fix: MyPropress进度条组件开发

src/components/mui/MyProgress.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-07-11 11:56:58
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-07-22 15:47:55
+ * @FilePath: /bkunyun/src/components/mui/MyProgress.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import { LinearProgress, LinearProgressProps } from "@mui/material";
+import { useMemo } from "react";
+
+interface IMyProgressProps extends Omit<LinearProgressProps, "color"> {
+	color:
+		| "disable"
+		| "primary"
+		| "secondary"
+		| "error"
+		| "info"
+		| "success"
+		| "warning"
+		| "inherit";
+}
+
+const MyProgress = (props: IMyProgressProps) => {
+	const { color, variant = "determinate", ...other } = props;
+
+	const backgroundColorInfo = useMemo(() => {
+		if (color === "info") {
+			return {
+				backgroundColor: "#1370FF",
+			};
+		}
+		if (color === "success") {
+			return {
+				backgroundColor: "#0DD09B",
+			};
+		}
+		if (color === "error") {
+			return {
+				backgroundColor: "#FF4E4E",
+			};
+		}
+		if (color === "disable") {
+			return {
+				backgroundColor: "#C2C6CC",
+			};
+		}
+	}, [color]);
+
+	// /#C2C6CC
+	const theme = createTheme({
+		components: {
+			MuiLinearProgress: {
+				styleOverrides: {
+					root: {
+						borderRadius: 3,
+						height: "6px",
+						background: "#F0F2F5",
+					},
+					bar: backgroundColorInfo,
+				},
+			},
+		},
+	});
+
+	return (
+		<ThemeProvider theme={theme}>
+			<LinearProgress {...other} />
+		</ThemeProvider>
+	);
+};
+
+export default MyProgress;

src/views/ConsoleLayout/components/FileItem/index.tsx

@@ -3,12 +3,12 @@ import { useNavigate, useLocation } from "react-router-dom";
 import { observer } from "mobx-react-lite";
 import { useMemo } from "react";
 
-import { LinearProgress } from "@mui/material";
 import { formatTime, storageUnitFromB } from "@/utils/util";
 import useGlobalStore from "@/hooks/useGlobalStore";
 import { IUploadInfo } from "@/store/modules/fileList";
 import { useMessage } from "@/components/MySnackbar";
 import bkunyunFile from "@/assets/img/bkunyunFile.svg";
+import MyProgress from "@/components/mui/MyProgress";
 
 import styles from "./index.module.css";
 
@@ -115,14 +115,12 @@ const FileItem = observer((props: IProps) => {
 						)}
 					</div>
 					{statusMsg !== "上传成功" ? (
-						<LinearProgress
+						<MyProgress
 							sx={{
 								width: 300,
-								borderRadius: 2,
 								margin: "6px 0",
-								color: "red",
 							}}
-							variant="determinate"
+							color="error"
 							value={itemInfo?.percentage}
 						/>
 					) : null}

src/views/Project/ProjectWorkbench/workbenchList/index.tsx

@@ -2,7 +2,7 @@
  * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
  * @Date: 2022-05-31 10:18:13
  * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-06-28 11:30:27
+ * @LastEditTime: 2022-07-22 16:20:26
  * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
@@ -12,7 +12,6 @@ import { useNavigate } from "react-router-dom";
 import { Box, Typography } from "@mui/material";
 import OutlinedInput from "@mui/material/OutlinedInput";
 import SearchIcon from "@mui/icons-material/Search";
-import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
 import { TablePagination } from '@mui/material';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
@@ -39,6 +38,7 @@ import {
 import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 import usePass from "@/hooks/usePass";
+import MyProgress from "@/components/mui/MyProgress";
 
 import styles from "./index.module.css";
 
@@ -231,20 +231,37 @@ const ProjectMembers = observer(() => {
         }
     }
 
-    const renderProgress = (data: any) => {
-        switch (data) {
-            case "RUNNING":
-                return '#1370FF'
-            case "ABORTED":
-                return '#C2C6CC'
-            case "FAILED":
-                return '#FF4E4E'
-            case "SUCCEEDED":
-                return '#0DD09B'
-            default:
-                return '#C2C6CC'
-        }
-    }
+   /** 渲染字体颜色 */
+	const renderTextColor = (data: any) => {
+		switch (data) {
+			case "RUNNING":
+				return "#1370FF";
+			case "ABORTED":
+				return "#C2C6CC";
+			case "FAILED":
+				return "#FF4E4E";
+			case "SUCCEEDED":
+				return "#0DD09B";
+			default:
+				return "#C2C6CC";
+		}
+	};
+
+	/** 渲染进度条颜色 */
+	const renderProgressColor = useCallback((data: any) => {
+		switch (data) {
+			case "RUNNING":
+				return "info";
+			case "ABORTED":
+				return "disable";
+			case "FAILED":
+				return "error";
+			case "SUCCEEDED":
+				return "success";
+			default:
+				return "disable";
+		}
+	}, []);
 
     /** 点击每一行 */
     const rowClick = useCallback(
@@ -282,12 +299,12 @@ const ProjectMembers = observer(() => {
                             size="small"
                             sx={{
                                 width: 180, height: 32,
-                                ['& .MuiOutlinedInput-root']: {
+                                '& .MuiOutlinedInput-root': {
                                     height: '32px',
                                     color: "#1E2633",
                                     fontSize: '14px'
                                 },
-                                ['& .MuiInputLabel-root']: {
+                                '& .MuiInputLabel-root': {
                                     color: "#8A9099",
                                     fontSize: '14px'
                                 },
@@ -350,19 +367,13 @@ const ProjectMembers = observer(() => {
                                     <img alt="" src={renderStatusIcon(item.state)} />
                                     <div className={styles.tabBoxStatusText}>{renderStatusText(item.state)}</div>
                                     <Box sx={{ width: '100%' }}>
-                                        <LinearProgress variant="determinate" value={(item.completeNum / item.totalNum) * 100}
+                                        <MyProgress color={renderProgressColor(item.data)} value={(item.completeNum / item.totalNum) * 100}
                                             sx={{
-                                                borderRadius: '3px', height: "6px",
-                                                backgroundColor: "#F0F2F5",
                                                 marginRight: '16px',
-                                                [`& .${linearProgressClasses.bar}`]: {
-                                                    backgroundColor: renderProgress(item.state),
-                                                    borderRadius: '3px',
-                                                },
                                             }}
                                         />
                                     </Box>
-                                    <div style={{ color: renderProgress(item.state) }} className={styles.tabBoxStatusText}>{item.completeNum + "/" + item.totalNum}</div>
+                                    <div style={{ color: renderTextColor(item.state) }} className={styles.tabBoxStatusText}>{item.completeNum + "/" + item.totalNum}</div>
                                 </Box>
 
                                 {