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

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

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) => {
-  return (
-    <Box sx={{ position: "relative", ...sx }} ref={ref}>
-      <CircularProgress
-        variant="determinate"
-        sx={{
-          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>
-  );
-});
+const FacebookCircularProgress = forwardRef(
+  ({ sx, color, bgColor, fgColor, ...rest }: FacebookCircularProgressProps, ref) => {
+    return (
+      <Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", ...sx }} ref={ref}>
+        <LinearProgressComponent color={color || fgColor} height={8} />
+      </Box>
+    );
+  },
+);
 
 export default FacebookCircularProgress;