feat: 提示信息message组件样式优化 数据管理刷新按钮图标替换

src/assets/project/refresh.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>刷新备份</title>
+    <g id="上线UI" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="刷新备份">
+            <rect id="矩形" x="0" y="0" width="16" height="16"></rect>
+            <path d="M14.1034483,5.0750097 L12.3103448,6.87501758 C11.862069,4.9250128 10.0689767,3.42499873 7.97701897,3.42499873 C5.51150172,3.42499873 3.49426034,5.45000759 3.49426034,7.92501842 C3.49426034,10.3999842 5.51150172,12.4249931 7.97701897,12.4249931 C10.3678534,12.4249931 12.3850948,10.5500599 12.4597328,8.15001941 L13.8045603,6.8000135 C13.8793103,7.17501139 13.9540603,7.55002053 13.9540603,8.0000225 C13.9540603,11.2999882 11.2644052,14 7.97701897,14 C4.68965517,14 2,11.2999882 2,8.0000225 C2,4.70001181 4.68965517,2 7.97701897,2 C9.91954397,2 11.712681,2.97499677 12.7586207,4.40000675 L12.9080086,4.17500577 L15,4.17500577 L14.1034483,5.0750097 Z" id="路径" fill="#8A9099"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/components/MySnackbar/MySnackbarProvider.tsx

@@ -75,30 +75,19 @@ const MySnackbarProvider = ({
 		info,
 		close,
 	} = useMySnackbar();
-	// .MuiAlert-filledInfo
-
-	const getColorStyle = useMemo(() => {
-		if (messageInfo.severity === "success") {
-			return "#02AB83";
-		}
-		if (messageInfo.severity === "info") {
-			return "#1370FF";
-		}
-		if (messageInfo.severity === "warning") {
-			return "#FFB919";
-		}
-		if (messageInfo.severity === "error") {
-			return "#FF4E4E";
-		}
-	}, [messageInfo.severity]);
 
 	const theme = createTheme({
 		components: {
 			MuiAlert: {
 				styleOverrides: {
 					root: {
-						width: "360px",
-						height: "38px",
+						minWidth: "360px",
+						maxWidth: "542px",
+						minHeight: "38px",
+						boxShadow: "none",
+						"& .MuiAlert-action": {
+							paddingLeft: "60px",
+						},
 						"&.MuiAlert-standardError": {
 							color: "#FF4E4E",
 							background: "rgba(255, 237, 237, 1)",
@@ -164,7 +153,7 @@ const MySnackbarProvider = ({
 						severity={messageInfo?.severity}
 						variant={variant}
 						elevation={elevation}
-						sx={{ boxShadow: "unset", ...alertSx }}
+						sx={{ ...alertSx }}
 						onClose={() => {
 							setOpen(false);
 						}}

src/index.tsx

@@ -41,9 +41,7 @@ root.render(
 	<React.StrictMode>
 		<ThemeProvider theme={theme}>
 			<Provider {...stores}>
-				<MySnackbarProvider
-					alertSx={{ boxShadow: "0px 2px 4px 0px rgb(0 0 0 / 8%)" }}
-				>
+				<MySnackbarProvider>
 					<MyRouter></MyRouter>
 				</MySnackbarProvider>
 			</Provider>

src/views/Project/ProjectData/index.module.css

@@ -40,6 +40,11 @@
 	align-items: center;
 }
 
+.refreshIcon {
+	width: 16px;
+	height: 16px;
+}
+
 .folderIconBox {
 	display: flex;
 	justify-content: flex-start;

src/views/Project/ProjectData/index.tsx

@@ -2,9 +2,9 @@ import React, { useState, useCallback, useEffect, useMemo } from "react";
 import style from "./index.module.css";
 import classnames from "classnames";
 import { IconButton } from "@mui/material";
-import RefreshIcon from "@mui/icons-material/Refresh";
 import MyTable from "@/components/mui/MyTable";
 import dataSetIcon from "@/assets/project/dataSetIcon.svg";
+import refresh from "@/assets/project/refresh.svg";
 import fileIcon from "@/assets/project/fileIcon.svg";
 import folderIcon from "@/assets/project/folderIcon.svg";
 import noFile from "@/assets/project/noFile.svg";
@@ -68,7 +68,7 @@ const ProjectData = observer(() => {
 
 	useEffect(() => {
 		const locationInfo: any = location?.state;
-		setActiveTab(locationInfo?.dataType || 'file')
+		setActiveTab(locationInfo?.dataType || "file");
 		setPath(locationInfo?.pathName || "/");
 	}, [location]);
 
@@ -557,12 +557,17 @@ const ProjectData = observer(() => {
 									size="small"
 									onClick={handleRefresh}
 									disabled={!isPass("PROJECT_DATA_REFRESH", "USER")}
-									sx={{ marginLeft: "17px", width: '32px', height: '32px', ":hover": {
-										backgroundColor: "#F0F2F5 ",
-										borderRadius: 2
-									} }}
+									sx={{
+										marginLeft: "17px",
+										width: "32px",
+										height: "32px",
+										":hover": {
+											backgroundColor: "#F0F2F5 ",
+											borderRadius: 2,
+										},
+									}}
 								>
-									<RefreshIcon sx={{ fontSize: "18px" }} />
+									<img className={style.refreshIcon} src={refresh} alt="" />
 								</IconButton>
 							</div>
 						</div>

src/views/Project/ProjectSubmitWork/index.tsx

@@ -42,7 +42,8 @@ const ProjectSubmitWork = observer(() => {
 	let configFormRef: any = React.createRef();
 	/** 是否全屏 */
 	const [fullScreenShow, setFullScreenShow] = useState<boolean>(false);
-	const [externalSelectedNodeId, setExternalSelectedNodeId] = useState<string>("");
+	const [externalSelectedNodeId, setExternalSelectedNodeId] =
+		useState<string>("");
 
 	// 前往工作台
 	const goToWorkbench = (toWorkbenchList = false) => {