feat:工作台ui优化

src/components/mui/Tabs.tsx

@@ -69,7 +69,7 @@ const Tabs = (props: IProps) => {
 		tabList,
 		defaultValue,
 		allowNullValue = false,
-		tabPanelSx = { padding: "20px 0 0 0" },
+		tabPanelSx = { padding: "24px 0 0 0" },
 	} = props;
 	const [value, setValue] = useState(
 		defaultValue
@@ -88,14 +88,14 @@ const Tabs = (props: IProps) => {
 			<Box style={{ display: "flex", alignItems: "center" }}>
 				{item.icon ? (
 					<img
-						style={{ width: "14px", marginRight: "10px" }}
+						style={{ width: "16px", marginRight: "8px" }}
 						src={value === item.value ? item.iconed : item.icon}
 						alt=""
 					/>
 				) : (
 					""
 				)}
-				<Typography sx={{ fontSize: "14px", fontWeight: "400" }}>
+				<Typography sx={{ fontSize: "14px", lineHeight: "22px", height: "22px", fontWeight: "400" }}>
 					{item.label}
 				</Typography>
 			</Box>

src/views/MenuLayout/index.tsx

@@ -29,9 +29,9 @@ const MenuLayout = observer(() => {
     navigate("/home");
   }
 
-  const routerIcon = (id: string, isSelect: boolean)=>{
+  const routerIcon = (id: string, isSelect: boolean) => {
     try {
-      const result = require(`../../assets/project/${id}${isSelect ? '_BLUE': ''}.svg`)
+      const result = require(`../../assets/project/${id}${isSelect ? '_BLUE' : ''}.svg`)
       return result || ''
     } catch (error) {
       console.log(error)
@@ -42,7 +42,12 @@ const MenuLayout = observer(() => {
     <Box className={style.container}>
       <Box className={style.aside}>
         <CurrentProject />
-        <List>
+        <List
+          sx={{
+            paddingTop: 0,
+            paddingBottom: 0,
+          }}
+        >
           {permissionStore.sidebarRouters.map((item, index) => {
             if (item.show) {
               return (
@@ -54,8 +59,8 @@ const MenuLayout = observer(() => {
                   })}
                   onClick={() => item.type === "page" && navigate(item.path)}
                 >
-                  <img className={style.routerIcon} src={routerIcon(item.id || '', `/v3${item.path}` === pathname) || undefined} alt=''/>
-                  <span style={{verticalAlign: 'middle'}}>{item.name}</span>
+                  <img className={style.routerIcon} src={routerIcon(item.id || '', `/v3${item.path}` === pathname) || undefined} alt='' />
+                  <span style={{ verticalAlign: 'middle' }}>{item.name}</span>
                 </li>
               );
             }

src/views/Project/ProjectWorkbench/index.tsx

@@ -63,10 +63,9 @@ const ProjectWorkbench = observer(() => {
 	}, [isPass]);
 
 	return (
-		<div style={{ padding: 24 }}>
+		<div style={{ padding:'28px 24px 24px' }}>
 			<div style={{ display: "flex", alignItems: "center" }}>
-				<img src={projectImg} alt="项目logo" />
-				<span style={{ marginLeft: 12 }}>工作台</span>
+				<span style={{ fontSize: "18px", lineHeight: "26px", fontWeight: "600", color: "#1E2633" }}>工作台</span>
 			</div>
 			<Box sx={{ width: "100%", typography: "body1" }}>
 				<Tabs

src/views/Project/ProjectWorkbench/workbenchList/index.module.css

-.headerBox {
-    margin-bottom: 20px;
-}
+/* .headerBox { */
+    /* margin-bottom: 20px; */
+/* } */
 
 .tabHeader {
     display: flex;
@@ -17,11 +17,11 @@
     border-top: 1px solid #F0F2F5;
     overflow: hidden;
     overflow-y: auto;
-    height: calc(100vh - 290px);
+    height: calc(100vh - 325px);
 }
 
 .tabBox {
-    padding: 15px 0px 16px 24px;
+    padding: 16px 0px 16px 24px;
     display: flex;
     align-items: center;
     width: 100%;
@@ -34,6 +34,7 @@
 
 .tabBoxInfo {
     width: 24%;
+    min-width: 280px;
 }
 
 .tabBoxDescInfo {
@@ -43,13 +44,16 @@
 
 .tabBoxTitle {
     font-size: 14px;
+    line-height: 22px;
     font-weight: 600;
     color: #1E2633;
-    margin-bottom: 10px;
+    margin-bottom: 8px;
 }
 
 .tabBoxDesc {
     font-size: 12px;
+    line-height: 20px;
+    white-space: nowrap;
     font-weight: 400;
     color: #8A9099;
 }
@@ -65,12 +69,15 @@
     display: flex;
     align-items: center;
     width: 10%;
+    min-width: 105px;
+    white-space: nowrap;
 }
 
 .tabBoxJobStatus {
     display: flex;
     align-items: center;
     width: 46%;
+    min-width: 180px;
 }
 
 .tabBoxStatusText {

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

@@ -38,6 +38,7 @@ import { observer } from "mobx-react-lite";
 import usePass from "@/hooks/usePass";
 import MyProgress from "@/components/mui/MyProgress";
 import SearchInput from "@/components/BusinessComponents/SearchInput";
+import moment from "moment";
 
 import styles from "./index.module.css";
 
@@ -382,7 +383,7 @@ const ProjectMembers = observer(() => {
 											className={styles.tabBoxDesc}
 											style={{ marginRight: "24px" }}
 										>
-											创建时间：{item.createTime}
+											创建时间：{moment(item.createTime).format("YYYY-MM-DD")}
 										</div>
 										<div className={styles.tabBoxDesc}>
 											创建人：{item.creator}

src/views/Project/ProjectWorkbench/workbenchTemplate/index.module.css

@@ -19,6 +19,7 @@
 .templateBlock {
 	height: 194px;
 	background: #ffffff;
+	box-shadow: 0px 3px 10px 0px rgba(0,24,57,0.0400);
 	border-radius: 4px;
 	border: 1px solid #ebedf0;
 	padding: 16px 20px;

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

@@ -134,18 +134,18 @@ const AddProject = (props: IAddProjectProps) => {
 
 	const handleDescChange = (e: any) => {
 		const desc = e.target.value;
-		setDesc(desc);
-		if (desc.length > 100) {
-			setDescCheck({
-				error: true,
-				help: "格式不正确，必须在100字符以内",
-			});
-		} else {
-			setDescCheck({
-				error: false,
-				help: "",
-			});
-		}
+		setDesc(desc.slice(0,100));
+		// if (desc.length > 100) {
+		// 	setDescCheck({
+		// 		error: true,
+		// 		help: "格式不正确，必须在100字符以内",
+		// 	});
+		// } else {
+		// 	setDescCheck({
+		// 		error: false,
+		// 		help: "",
+		// 	});
+		// }
 	};
 
 	const handleSubmit = () => {
@@ -211,7 +211,7 @@ const AddProject = (props: IAddProjectProps) => {
 						id="desc"
 						label="项目描述"
 						multiline
-						rows={4}
+						rows={5}
 						placeholder="请输入项目描述"
 						onChange={handleDescChange}
 						helperText={descCheck.help}