feat(组件): 添加线性进度条组件并替换圆形进度条

重构进度指示器，使用新的LinearProgress组件替换原有的CircularProgress
更新文件管理器中的进度指示器引用
修改首页加载动画为线性进度条样式

index.html

@@ -46,43 +46,39 @@
         transform: scale(0.8);
         animation: fadeIn 0.6s ease-out 0.3s forwards;
       }
-      #app-loader .spinner {
+      #app-loader .progress-container {
-        width: 28px;
+        width: 200px;
-        height: 28px;
+        height: 4px;
-        position: relative;
+        background-color: rgba(0, 0, 0, 0.1);
+        border-radius: 2px;
+        overflow: hidden;
         opacity: 0;
         transform: scale(0.8);
         animation: fadeIn 0.6s ease-out 0.3s forwards;
       }
-      #app-loader .spinner {
+      #app-loader .progress-bar {
-        display: inline-block;
+        height: 100%;
-        width: 40px;
+        background-color: var(--defaultThemeColor);
-        height: 40px;
+        border-radius: 2px;
-      }
+        animation: linearProgress 1.5s infinite ease-in-out;
-      #app-loader .spinner svg {
-        display: block;
-      }
-      #app-loader .spinner .stroke {
-        stroke: var(--defaultThemeColor);
-        stroke-linecap: round;
-        animation: spinDash 1.4s ease-in-out infinite;
-      }
-      #app-loader .spinner .background {
-        stroke: rgba(0, 0, 0, 0.1)
       }
 
-      @keyframes spinDash {
+      @keyframes linearProgress {
         0% {
-          stroke-dasharray: 1px, 200px;
+          transform: translateX(-100%);
-          stroke-dashoffset: 0;
+          width: 50%;
         }
         50% {
-          stroke-dasharray: 100px, 200px;
+          transform: translateX(100%);
-          stroke-dashoffset: -15px;
+          width: 50%;
+        }
+        51% {
+          transform: translateX(100%);
+          width: 50%;
         }
         100% {
-          stroke-dasharray: 1px, 200px;
+          transform: translateX(-100%);
-          stroke-dashoffset: -126px;
+          width: 50%;
         }
       }
       @keyframes fadeIn {
@@ -97,11 +93,8 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="app-loader">
       <div class="logo"></div>
-      <div class="spinner">
+      <div class="progress-container">
-        <svg viewBox="22 22 44 44">
+        <div class="progress-bar"></div>
-          <circle class="background" cx="44" cy="44" r="20" fill="none" stroke-width="4"></circle>
-          <circle class="stroke" cx="44" cy="44" r="20" fill="none" stroke-width="4"></circle>
-        </svg>
       </div>
     </div>
     <script async type="module" src="/src/main.tsx"></script>

src/component/Common/CircularProgress.tsx

@@ -1,39 +1,24 @@
-import { Box, CircularProgress, circularProgressClasses, CircularProgressProps } from "@mui/material";
+import { Box } from "@mui/material";
 import { forwardRef } from "react";
+import LinearProgressComponent from "./LinearProgress";
 
-export interface FacebookCircularProgressProps extends CircularProgressProps {
+export interface FacebookCircularProgressProps {
+  sx?: any;
+  color?: string;
+  size?: number;
+  thickness?: number;
   bgColor?: string;
   fgColor?: string;
 }
 
-const FacebookCircularProgress = forwardRef(({ sx, bgColor, fgColor, ...rest }: FacebookCircularProgressProps, ref) => {
+const FacebookCircularProgress = forwardRef(
-  return (
+  ({ sx, color, bgColor, fgColor, ...rest }: FacebookCircularProgressProps, ref) => {
-    <Box sx={{ position: "relative", ...sx }} ref={ref}>
+    return (
-      <CircularProgress
+      <Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", ...sx }} ref={ref}>
-        variant="determinate"
+        <LinearProgressComponent color={color || fgColor} height={8} />
-        sx={{
+      </Box>
-          color: (theme) => bgColor ?? theme.palette.grey[theme.palette.mode === "light" ? 200 : 800],
+    );
-        }}
+  },
-        size={40}
+);
-        thickness={4}
-        {...rest}
-        value={100}
-      />
-      <CircularProgress
-        sx={{
-          color: (theme) => fgColor ?? theme.palette.primary.main,
-          position: "absolute",
-          left: 0,
-          [`& .${circularProgressClasses.circle}`]: {
-            strokeLinecap: "round",
-          },
-        }}
-        size={40}
-        thickness={4}
-        {...rest}
-      />
-    </Box>
-  );
-});
 
 export default FacebookCircularProgress;

src/component/Common/LinearProgress.tsx

@@ -0,0 +1,30 @@
+import { Box, LinearProgress, linearProgressClasses } from "@mui/material";
+import { forwardRef } from "react";
+
+export interface LinearProgressProps {
+  color?: string;
+  height?: number;
+}
+
+const LinearProgressComponent = forwardRef(({ color, height = 8, ...rest }: LinearProgressProps, ref) => {
+  return (
+    <Box sx={{ width: "100%", maxWidth: 200, ...rest }} ref={ref}>
+      <LinearProgress
+        variant="indeterminate"
+        sx={{
+          height: height,
+          borderRadius: height / 2,
+          [`&.${linearProgressClasses.colorPrimary}`]: {
+            backgroundColor: (theme) => theme.palette.grey[theme.palette.mode === "light" ? 200 : 800],
+          },
+          [`& .${linearProgressClasses.bar}`]: {
+            borderRadius: height / 2,
+            backgroundColor: color || ((theme) => theme.palette.primary.main),
+          },
+        }}
+      />
+    </Box>
+  );
+});
+
+export default LinearProgressComponent;

src/component/FileManager/Explorer/Explorer.tsx

@@ -6,7 +6,7 @@ import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts";
 import { ConfigLoadState } from "../../../redux/siteConfigSlice.ts";
 import { openEmptyContextMenu } from "../../../redux/thunks/filemanager.ts";
 import { loadSiteConfig } from "../../../redux/thunks/site.ts";
-import CircularProgress from "../../Common/CircularProgress.tsx";
+import FacebookCircularProgress from "../../Common/CircularProgress.tsx";
 import "../../Common/FadeTransition.css";
 import { RadiusFrame } from "../../Frame/RadiusFrame.tsx";
 import ExplorerError from "./ExplorerError.tsx";
@@ -137,7 +137,7 @@ const Explorer = () => {
                   alignItems: "center",
                 }}
               >
-                <CircularProgress />
+                <FacebookCircularProgress />
               </Box>
             )}
             {index == ExplorerPage.GridView && <GridView />}