feat: 样式修改

src/assets/style/public.css

 /* 修改滚动条样式 */
 div::-webkit-scrollbar,
 main::-webkit-scrollbar {
-  width: 8px;
+  width: 4px;
   height: 5px !important;
 }
 
@@ -15,11 +15,12 @@ main::-webkit-scrollbar-track {
 
 div::-webkit-scrollbar-thumb,
 main::-webkit-scrollbar-thumb {
-  background-color: #d8d8d8;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
+  background-color: #C2C6CC;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
   height: 5px !important;
+  width: 4px!important;
 }
 
 body,

src/components/CommonComponents/RadioGroupOfButtonStyle/index.module.css

@@ -4,29 +4,42 @@
 	align-items: center;
 	border: 1px solid #e6e8eb;
 	border-radius: 4px;
-	background-color: #e6e8eb;
+	background-color: #F0F2F5;
 	cursor: pointer;
 	height: 32px;
 	box-sizing: border-box;
 	padding: 2px;
 }
 .radio {
+	position: relative;
+	min-width: 64px;
 	height: 28px;
 	box-sizing: border-box;
 	font-size: 14px;
 	color: #565c66;
-	border-radius: 4px;
+	border-radius: 2px;
 	line-height: 20px;
-	padding: 3px 18px;
-	background-color: #e6e8eb;
+	padding: 6px 16px;
+	/* background-color: #e6e8eb; */
 	flex: 1;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	white-space: nowrap;
 }
+
+.radio:not(:last-child)::before {
+	position: absolute;
+	width: 1px;
+	height: 16px;
+	top: 6px;
+	right: 0; 
+	content: '';
+	background-color: #D1D6DE;
+}
+
 .radioActive {
 	color: #1370ff;
 	background-color: #fff;
-	border: 1px solid #e6e8eb;
+	box-shadow: 2px 4px 12px 0px rgba(0,27,63,0.06);
 }

src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx

+/*
+ * @Author: 吴永生 15770852798@163.com
+ * @Date: 2022-07-11 11:56:58
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-08-02 17:40:14
+ * @FilePath: /bkunyun/src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 // 按钮样式的单选组
 import classnames from "classnames";
 import style from "./index.module.css";

src/components/MySnackbar/MySnackbarProvider.tsx

-import React, { Fragment, ReactNode } from "react";
+import React, { Fragment, ReactNode, useMemo } from "react";
 import { Snackbar, Alert, Fade, Grow } from "@mui/material";
 import useMySnackbar from "./useMySnackbar";
 import snackbarContext from "./snackbarContext";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
 
 type MySnackbarProviderProp = {
   vertical?: "bottom" | "top";
@@ -42,7 +43,7 @@ const getTransitionComponent = (transition: "grow" | "fade") => {
 const MySnackbarProvider = ({
   vertical = "top",
   horizontal = "center",
-  autoHideDuration = 5000,
+  autoHideDuration = 890000,
   snackerClasses,
   ClickAwayListenerProps,
   ContentProps,
@@ -73,8 +74,53 @@ 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: {
+      MuiSvgIcon: {
+        styleOverrides: {
+          root: {
+            color: getColorStyle
+          }
+        }
+      },
+			MuiAlert: {
+				styleOverrides: {
+          icon: {
+            root: {
+              color: getColorStyle
+            }
+          },
+          root: {
+            color: getColorStyle
+          }
+				},
+			},
+		},
+	});
+
+
   return (
     <Fragment>
+      <ThemeProvider theme={theme}>
+        
+     
       <Snackbar
         open={open}
         autoHideDuration={autoHideDuration}
@@ -108,6 +154,7 @@ const MySnackbarProvider = ({
           {messageInfo?.content}
         </Alert>
       </Snackbar>
+      </ThemeProvider>
       <snackbarContext.Provider value={{ success, error, warning, info }}>
         {children}
       </snackbarContext.Provider>

src/views/ConsoleLayout/index.module.css

@@ -13,10 +13,26 @@
 }
 
 .logo {
-  padding: 0px 25px 0px 20px;
+  padding: 0px 16px 0px 20px;
   margin-top: -10px;
 }
 
+.uploadIconBox{
+  width: 32px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 10px;
+}
+
+.uploadIconBox:hover{
+ background-color: #f0f2f5;
+ border-radius: 2px;
+ cursor: pointer;
+}
+
+
 .topRightBox {
   display: flex;
   justify-content: flex-end;

src/views/ConsoleLayout/index.tsx

@@ -5,6 +5,7 @@ import { observer } from "mobx-react-lite";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import Avatar from "@mui/material/Avatar";
 import { Box, Menu, MenuItem } from "@mui/material";
+import classNames from "classnames";
 
 import uploadIcon from "@/assets/img/uploadIcon.svg";
 import globalText from "@/utils/globalText_CN";
@@ -20,6 +21,7 @@ import {
 	setFileServerEndPointLocalStorage,
 	getFiletokenAccordingToId,
 } from "@/views/Project/project";
+
 import style from "./index.module.css";
 
 const ConsoleLayout = observer(() => {
@@ -92,7 +94,7 @@ const ConsoleLayout = observer(() => {
 						<MyButton
 							text={globalText.product}
 							variant={"text"}
-							style={{ color: "#565C66" }}
+							style={{ color: "#565C66", paddingLeft: '8px' }}
 							onClick={handleProductClick}
 							dropValue={productOpen}
 							drop={true}
@@ -143,12 +145,14 @@ const ConsoleLayout = observer(() => {
 							horizontal: "right",
 						}}
 					>
-						<img
-							className={style.topRightItem}
-							src={uploadIcon}
-							alt=""
-							style={{ verticalAlign: "middle" }}
-						/>
+						<div className={classNames(style.uploadIconBox)}>
+							<img
+								src={uploadIcon}
+								alt=""
+								style={{ verticalAlign: "middle" }}
+							/>
+						</div>
+					
 					</MyPopover>
 					<Box className={style.topRightItem}>
 						<Box
@@ -209,4 +213,4 @@ const ConsoleLayout = observer(() => {
 	);
 });
 
-export default ConsoleLayout;
+export default ConsoleLayout;
\ No newline at end of file

src/views/Project/ProjectData/index.tsx

@@ -556,7 +556,10 @@ const ProjectData = observer(() => {
 									size="small"
 									onClick={handleRefresh}
 									disabled={!isPass("PROJECT_DATA_REFRESH", "USER")}
-									sx={{ marginLeft: "17px" }}
+									sx={{ marginLeft: "17px", width: '32px', height: '32px', ":hover": {
+										backgroundColor: "#F0F2F5 ",
+										borderRadius: 2
+									} }}
 								>
 									<RefreshIcon sx={{ fontSize: "18px" }} />
 								</IconButton>

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

@@ -51,7 +51,7 @@
 
 .verticalLine {
     height: 32px;
-    border: 1px solid #EBEDF0;
+    border-right: 1px solid #EBEDF0;
     margin-left: 20px;
     margin-right: 20px;
 }

src/views/Project/components/CurrentProject/index.module.css

@@ -7,10 +7,15 @@
   align-items: center;
   cursor: pointer;
 }
+
+.currentProject:hover{
+  background-color: #EEF1F5;
+}
 .logo {
   width: 32px;
   border-radius: 4px;
   background-color: #fff;
+  box-shadow: 2px 2px 8px 0px rgba(0,27,67,0.0600);
   margin-right: 12px;
   display: block;
 }
@@ -26,7 +31,7 @@
 .projectName {
   color: #8a9099;
   line-height: 20px;
-  font-size: 14px;
+  font-size: 12px;
   width: 125px;
   white-space: nowrap;
   text-overflow: ellipsis;

src/views/Project/components/ProjectListPopper/index.module.css

 .projectBox {
+	width: calc(100vw - 220px);
+	height: calc(100vh - 57px);
+	background-color: rgba(0, 0, 0, .5);
+	/* width: 260px;
+	height: calc(100vh - 57px); */
+	/* width: 260px;
+	height: calc(100vh - 57px);
+	background-color: #fff;
+	border-right: 1px solid #ebedf0;
+	display: flex;
+	flex-direction: column; */
+}
+
+.mainBox{
 	width: 260px;
 	height: calc(100vh - 57px);
 	background-color: #fff;
 	border-right: 1px solid #ebedf0;
 	display: flex;
 	flex-direction: column;
+	border-left:  1px solid #DDE1E6;;
 }
+
 .searchBox {
 	box-sizing: border-box;
 	height: 56px;

src/views/Project/components/ProjectListPopper/index.tsx

+/*
+ * @Author: 吴永生 15770852798@163.com
+ * @Date: 2022-08-02 11:43:28
+ * @LastEditors: 吴永生 15770852798@163.com
+ * @LastEditTime: 2022-08-02 19:36:32
+ * @FilePath: /bkunyun/src/views/Project/components/ProjectListPopper/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import smallLogo from "@/assets/project/projectIconSmall.svg";
 import style from "./index.module.css";
 import { InputBase, IconButton } from "@mui/material";
@@ -33,6 +41,7 @@ const ProjectListPopper = observer((props: any) => {
 
 	return (
 		<div className={style.projectBox} onClick={handleProjectBox}>
+			<div className={style.mainBox}>
 			<div className={style.searchBox}>
 				<IconButton
 					type="submit"
@@ -89,6 +98,7 @@ const ProjectListPopper = observer((props: any) => {
 					);
 				})}
 			</div>
+			</div>
 		</div>
 	);
 });