Merge branch 'feat-20220718' into 'staging'

Feat 20220718

See merge request !33

src/components/mui/MyButton.tsx

@@ -82,12 +82,12 @@ const theme = createTheme({
 					},
 				},
 				outlinedSecondary: {
-					border: "1px solid #FF4E4E",
+					border: "1px solid rgba(221, 225, 230, 1)",
 					boxShadow: "none !important",
-					color: "#FF4E4E",
+					color: "rgba(30, 38, 51, 1)",
 					"&:hover": {
-						backgroundColor: "#FFEDED ",
-						border: "1px solid #FF4E4E",
+						backgroundColor: "rgba(240, 242, 245, 1) ",
+						border: "1px solid rgba(221, 225, 230, 1)",
 					},
 				},
 				textSecondary: {

src/components/mui/MyDialog.tsx

@@ -89,6 +89,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 						onClick={onClose}
 						variant="outlined"
 						size="small"
+						color="secondary"
 					/>
 				) : null}
 				{showConfirm ? (

src/components/mui/MyInput.tsx

@@ -37,27 +37,36 @@ const MyInput = (props: MyInputProps) => {
 						fontSize: "14px",
 						"&.MuiInputBase-sizeSmall": {
 							height: "32px",
-							"& .MuiOutlinedInput-notchedOutline": {
-								height: "34px",
-							},
 						},
 					},
+					multiline: {
+						height: "auto",
+						textarea: {
+							padding: 0,
+						},
+					},
+					input: {},
 				},
 			},
-
 			MuiInputLabel: {
 				styleOverrides: {
 					root: {
-						top: label ? "-5px" : "-10px",
+						top: "-9px",
+					},
+					shrink: {
+						top: 0,
+					},
+					sizeSmall: {
+						top: "-5px",
 					},
 				},
 			},
 			MuiOutlinedInput: {
 				styleOverrides: {
 					root: {
-						height: "36px",
-						lineHeight: "36px",
-						paddingRight: "12px",
+						"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+							borderWidth: "1px",
+						},
 						":hover": {
 							"& .MuiOutlinedInput-notchedOutline": error
 								? {}
@@ -70,9 +79,6 @@ const MyInput = (props: MyInputProps) => {
 						padding: "6.5px 12px",
 						verticalAlign: "middle",
 					},
-					notchedOutline: {
-						height: "36px",
-					},
 				},
 			},
 		},

src/components/mui/MyInputCopy.tsx

-/*
- * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
- * @Date: 2022-07-05 14:00:37
- * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-21 17:33:59
- * @FilePath: /bkunyun/src/components/mui/MyInput.tsx
- * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
- */
-import TextField, { TextFieldProps } from "@mui/material/TextField";
-import { ThemeProvider, createTheme } from "@mui/material/styles";
-
-interface MyInputProps extends Omit<TextFieldProps, "value"> {
-	value?: string;
-	variant?: "standard" | "filled" | "outlined";
-	size?: "small" | "medium";
-	placeholder?: string;
-	fullWidth?: boolean; // 宽度是否和容器一致
-	error?: boolean;
-}
-
-const MyInput = (props: MyInputProps) => {
-	const {
-		size = "medium",
-		placeholder = "请输入",
-		fullWidth = true,
-		error = false,
-		label,
-		...other
-	} = props;
-
-	const theme = createTheme({
-		components: {
-			MuiInputBase: {
-				styleOverrides: {
-					root: {
-						height: "36px",
-						fontSize: "14px",
-						"&.MuiInputBase-sizeSmall": {
-							height: "32px",
-						},
-					},
-				},
-			},
-			MuiInputLabel: {
-				styleOverrides: {
-					root: {
-						top: "-9px",
-					},
-					shrink: {
-						top: 0,
-					},
-					sizeSmall: {
-						top: "-5px",
-					},
-				},
-			},
-			MuiOutlinedInput: {
-				styleOverrides: {
-					root: {
-						"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
-							borderWidth: "1px",
-						},
-						":hover": {
-							"& .MuiOutlinedInput-notchedOutline": error
-								? {}
-								: {
-										borderColor: "#1370ff",
-								  },
-						},
-					},
-					input: {
-						padding: "6.5px 12px",
-						verticalAlign: "middle",
-					},
-				},
-			},
-		},
-	});
-
-	return (
-		<ThemeProvider theme={theme}>
-			<TextField
-				error={error}
-				size={size}
-				placeholder={placeholder}
-				fullWidth={fullWidth}
-				label={label}
-				{...other}
-			/>
-		</ThemeProvider>
-	);
-};
-
-export default MyInput;

src/views/ConsoleLayout/index.tsx

@@ -97,14 +97,12 @@ const ConsoleLayout = observer(() => {
 							dropValue={productOpen}
 							drop={true}
 						/>
-
 						{/* <ArrowDropDownIcon classes={{
               root: cx({
                 [style.ArrowDropDownIconRoot]: true,
                 [style.ArrowDropDownIconRootOpen]: Boolean(productOpen)
               })
             }} /> */}
-
 						<Menu
 							id="product-menu"
 							anchorEl={productAnchorEl}

src/views/Project/ProjectData/AddFolder/index.tsx

-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 
-import { TextField } from "@mui/material";
 import MyDialog from "@/components/mui/MyDialog";
 import { checkIsNumberLetterChinese } from "@/utils/util";
 import { useMessage } from "@/components/MySnackbar";

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

@@ -38,6 +38,7 @@
 .taskName {
     font-size: 14px;
     font-weight: 500;
+    cursor: pointer;
 }
 
 .taskStatus {

src/views/Project/ProjectOverview/TaskCard/index.tsx

@@ -13,6 +13,7 @@ import fileIcon from "@/assets/project/fileIcon.svg";
 import dataSetIcon from "@/assets/project/dataSetIcon.svg";
 
 type TaskCardProps = {
+    id: string;
     name: string;
     creator: string;
     state: string;
@@ -24,7 +25,7 @@ type TaskCardProps = {
 };
 
 const TaskCard = (props: TaskCardProps) => {
-    const { name, creator, state, completeNum, totalNum, costTime, jobCost, outputs } = props;
+    const { id, name, creator, state, completeNum, totalNum, costTime, jobCost, outputs } = props;
     const navigate = useNavigate();
     const randerOutputs = useMemo(() => {
         if (outputs) {
@@ -62,6 +63,12 @@ const TaskCard = (props: TaskCardProps) => {
             });
         }
     }
+    // 跳转详情页
+    const gotoDetail = (id: string) => {
+        navigate(`/product/cadd/projectJobDetail`, {
+            state: { taskId: id },
+        });
+    }
     // 渲染状态图标
     const renderStatusIcon = (data: string) => {
         switch (data) {
@@ -140,7 +147,7 @@ const TaskCard = (props: TaskCardProps) => {
     return <div className={style.cardBox}>
         <div className={style.cardLeft}>
             <div className={style.topLine}>
-                <div className={style.taskName}>{name}</div>
+                <div className={style.taskName} onClick={() => gotoDetail(id)}>{name}</div>
                 <div className={style.taskStatus} style={{ color: renderTextColor(state), background: renderBackgroundColor(state) }}>
                     <img src={renderStatusIcon(state)} alt="" className={style.statusImg} />
                     <span>{renderStatusText(state)}</span>
@@ -152,7 +159,7 @@ const TaskCard = (props: TaskCardProps) => {
                     <div>Progress</div>
                     <div style={{ color: renderTextColor(state) }}>{completeNum + "/" + totalNum}</div>
                 </div>
-                <MyProgress color={renderProgressColor(state)} value={(completeNum / totalNum) * 100}/>
+                <MyProgress color={renderProgressColor(state)} value={(completeNum / totalNum) * 100} />
             </div>
             <div className={style.bottomLine}>
                 <img alt="" src={runTime} />

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

@@ -38,6 +38,10 @@
     color: #565C66;
 }
 
+.otherInformationBoxRight{
+    color: #565C66;
+}
+
 .numberDisplay {
     font-size: 20px;
     font-weight: 600;
@@ -48,7 +52,7 @@
 .verticalLine {
     height: 32px;
     border: 1px solid #EBEDF0;
-    margin-left: 10px;
+    margin-left: 20px;
     margin-right: 20px;
 }
 

src/views/Project/ProjectOverview/index.tsx

@@ -44,19 +44,23 @@ const ProjectOverview = observer(() => {
         },
     });
     useEffect(() => {
-        getOverview({
-            id: currentProjectStore.currentProjectInfo.id as string,
-        });
+        if (currentProjectStore.currentProjectInfo.id) {
+            getOverview({
+                id: currentProjectStore.currentProjectInfo.id as string,
+            });
+        }
     }, [currentProjectStore.currentProjectInfo.id, getOverview]);
 
     useEffect(() => {
-        getTaskOverviewList({
-            projectId: currentProjectStore.currentProjectInfo.id as string,
-            jobName: jobName,
-            day: Number(day),
-            page: page,
-            size: size,
-        });
+        if (currentProjectStore.currentProjectInfo.id) {
+            getTaskOverviewList({
+                projectId: currentProjectStore.currentProjectInfo.id as string,
+                jobName: jobName,
+                day: Number(day),
+                page: page,
+                size: size,
+            });
+        }
     }, [currentProjectStore.currentProjectInfo.id, getTaskOverviewList, day, jobName]);
 
     const handleKeyWordChangeKeyUp = (e: any) => {
@@ -64,6 +68,21 @@ const ProjectOverview = observer(() => {
             setJobName(e.target.value);
         }
     }
+
+    const storageUnitFromB = (b: number) => {
+        if (b <= 0) {
+            return { data: '0.00', unit: 'KB' };
+        } else if (b < 1024 * 1024) {
+            return { data: (b / 1024).toFixed(2), unit: 'KB' };
+        } else if (b < 1024 * 1024 * 1024) {
+            return { data: (b / (1024 * 1024)).toFixed(2), unit: 'MB' };
+        } else if (b < 1024 * 1024 * 1024 * 1024) {
+            return { data: (b / (1024 * 1024 * 1024)).toFixed(2), unit: 'G' };
+        } else {
+            return { data: (b / (1024 * 1024 * 1024 * 1024)).toFixed(2), unit: 'T' };
+        }
+    };
+
     if (currentProjectStore.currentProjectInfo.name) {
         if (loading) {
             return (
@@ -90,18 +109,21 @@ const ProjectOverview = observer(() => {
                         </div>
                         <div className={style.basicInformationRight}>
                             <div>
-                                <div className={style.otherInformationBox}>项目总消费</div>
+                                <div className={style.otherInformationBoxRight}>项目总消费</div>
                                 <div><span className={style.numberDisplay}>{overviewInfo.projectCost?.toFixed(2)}</span>元</div>
                             </div>
                             <div className={style.verticalLine}></div>
                             <div>
-                                <div className={style.otherInformationBox}>项目剩余预算</div>
+                                <div className={style.otherInformationBoxRight}>项目剩余预算</div>
                                 <div><span className={style.numberDisplay}>{overviewInfo.projectRemainingBudget?.toFixed(2)}</span>元</div>
                             </div>
                             <div className={style.verticalLine}></div>
                             <div>
-                                <div className={style.otherInformationBox}>项目存储大小</div>
-                                <div><span className={style.numberDisplay}>{overviewInfo.projectStorage?.toFixed(2)}</span> G</div>
+                                <div className={style.otherInformationBoxRight} style={{ marginRight: '20px' }}>项目存储大小</div>
+                                <div>
+                                    <span className={style.numberDisplay}>{overviewInfo.projectStorage !== undefined ? storageUnitFromB(overviewInfo.projectStorage).data : ''}</span>
+                                    {overviewInfo.projectStorage !== undefined ? storageUnitFromB(overviewInfo.projectStorage).unit : ''}
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -134,6 +156,7 @@ const ProjectOverview = observer(() => {
                         {/* 任务列表卡片渲染 */}
                         {taskList.length > 0 && taskList.map((item: any) => {
                             return <TaskCard
+                                id={item.id}
                                 name={item.name}
                                 creator={item.creator}
                                 state={item.state}

src/views/Project/ProjectSetting/BaseInfo/index.tsx

@@ -23,7 +23,7 @@ import InformationDisplay from "@/components/CommonComponents/InformationDisplay
 import classnames from "classnames";
 import { TextField } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
-import InputAdornment from '@mui/material/InputAdornment';
+import InputAdornment from "@mui/material/InputAdornment";
 import { useMessage } from "@/components/MySnackbar";
 import Loading from "@/views/Loading";
 import MyDialog from "@/components/mui/MyDialog";
@@ -59,6 +59,13 @@ const BaseInfo = observer(() => {
 	).name;
 	// 弹窗显示控制
 	const [dialogOpen, setDialogOpen] = useState(false);
+
+	// 打开弹窗时重置表单
+	useEffect(() => {
+		if (dialogOpen) {
+			setDeleteProjectName("");
+		}
+	}, [dialogOpen]);
 	// 是否拥有编辑权限
 	const hasEditAuth = useMemo(() => {
 		if (!currentUserName) {
@@ -75,7 +82,10 @@ const BaseInfo = observer(() => {
 	}, [currentUserName, projectInfo]);
 	const { run, loading } = useMyRequest(getProject, {
 		onSuccess: (result: any) => {
-			setProjectInfo({ ...result.data, projectBudget: result.data.projectBudget.toFixed(2) });
+			setProjectInfo({
+				...result.data,
+				projectBudget: result.data.projectBudget.toFixed(2),
+			});
 		},
 	});
 	useEffect(() => {
@@ -184,43 +194,50 @@ const BaseInfo = observer(() => {
 		});
 	};
 
-	const budgetChange = (e: any) => {
-		let inputValue = e.target.value.replace('.', '')
-		if (inputValue.indexOf('.') !== -1) {
-			setBudgetCheck({
-				error: true,
-				help: "格式错误，请输入正确的金额，可精确至分（两位小数）",
-			});
-			return
-		}
-		if (isNaN(Number(inputValue))) {
-			setBudgetCheck({
-				error: true,
-				help: "格式错误，请输入正确的金额，可精确至分（两位小数）",
-			});
-			return
+	const checkBudget = (budget: string, showMessage = false) => {
+		let help = "";
+		if (budget) {
+			if (isNaN(Number(budget)) || Number(budget) > 10000000 || Number(budget) < 0) {
+				help = "格式错误，请输入0~10000000之间的数值，结果最高保留两位小数。";
+				setBudgetCheck({
+					error: true,
+					help,
+				});
+				showMessage && message.error(help);
+				return false;
+			} else {
+				setBudgetCheck({
+					error: false,
+					help: "",
+				});
+				return true;
+			}
 		} else {
-			setProjectInfo({
-				...projectInfo,
-				projectBudget: e.target.value
-			})
+			help = "格式错误，请输入0~10000000之间的数值，结果最高保留两位小数。";
 			setBudgetCheck({
-				error: false,
-				help: "",
+				error: true,
+				help,
 			});
+			showMessage && message.error(help);
+			return false;
 		}
 	}
-	const budgetBlur = (e: any) => {
+
+	const budgetChange = (e: any) => {
 		setProjectInfo({
 			...projectInfo,
-			projectBudget: Number(e.target.value).toFixed(2)
-		})
-		setBudgetCheck({
-			error: false,
-			help: "",
+			projectBudget: e.target.value,
 		});
+		checkBudget(e.target.value);
 	}
 
+	const budgetBlur = (e: any) => {
+		setProjectInfo({
+			...projectInfo,
+			projectBudget: Number(e.target.value) ? Number(e.target.value).toFixed(2) : e.target.value,
+		});
+	};
+
 	const { run: updateProjectRun, loading: updateLoading } = useMyRequest(
 		updateProject,
 		{
@@ -235,7 +252,7 @@ const BaseInfo = observer(() => {
 
 	// 修改项目
 	const handleClickUpdate = () => {
-		if (checkName(projectInfo.name, true)) {
+		if (checkName(projectInfo.name, true) && checkBudget(projectInfo.projectBudget, true)) {
 			updateProjectRun({ ...projectInfo, product: "cadd" });
 		} else {
 			return;
@@ -312,9 +329,9 @@ const BaseInfo = observer(() => {
 						size="small"
 						sx={{
 							width: "560px",
-							'& .MuiOutlinedInput-root': {
-								height: '36px'
-							}
+							"& .MuiOutlinedInput-root": {
+								height: "36px",
+							},
 						}}
 					/>
 					{/* <input
@@ -390,12 +407,14 @@ const BaseInfo = observer(() => {
 						size="small"
 						sx={{
 							width: "560px",
-							'& .MuiOutlinedInput-root': {
-								height: '36px'
-							}
+							"& .MuiOutlinedInput-root": {
+								height: "36px",
+							},
 						}}
 						InputProps={{
-							startAdornment: <InputAdornment position="start">¥</InputAdornment>,
+							startAdornment: (
+								<InputAdornment position="start">¥</InputAdornment>
+							),
 						}}
 					/>
 				</div>
@@ -426,10 +445,10 @@ const BaseInfo = observer(() => {
 						删除项目将删除其存储的数据和所有相关资源，并且已删除的项目无法恢复！请谨慎操作！
 					</div>
 					<MyButton
-						text='删除项目'
+						text="删除项目"
 						variant="contained"
 						onClick={() => setDialogOpen(true)}
-						color='error'
+						color="error"
 					// style={{
 					// 	backgroundColor: "#fff",
 					// 	color: "#FF4E4E",

src/views/Project/ProjectSubmitWork/ConfigForm/index.tsx

@@ -310,7 +310,15 @@ const ConfigForm = (props: ConfigFormProps) => {
 										onBlur={() => setSelectedBatchNodeId("")}
 										value={parameter.value}
 										onChange={(e: any) =>
-											handleParameterChange(e, taskId, parameter.name || "")
+											handleParameterChange(
+												{
+													target: {
+														value: e,
+													},
+												},
+												taskId,
+												parameter.name || ""
+											)
 										}
 										error={parameter.error || false}
 										helpertext={parameter.helperText}
@@ -324,7 +332,15 @@ const ConfigForm = (props: ConfigFormProps) => {
 										onBlur={() => setSelectedBatchNodeId("")}
 										value={parameter.value}
 										onChange={(e: any) =>
-											handleParameterChange(e, taskId, parameter.name || "")
+											handleParameterChange(
+												{
+													target: {
+														value: e,
+													},
+												},
+												taskId,
+												parameter.name || ""
+											)
 										}
 										multiple={true}
 										error={parameter.error || false}

src/views/Project/ProjectSubmitWork/components/MySelect.tsx

-import * as React from "react";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import FormHelperText from "@mui/material/FormHelperText";
-import Select, { SelectProps } from "@mui/material/Select";
-
-export interface IOption {
-	label: string;
-	value: string;
-	disabled?: boolean;
-}
-
-export const optionsTransform = (
-	arr: Array<any>,
-	labelKey: string = "label",
-	valueKey: string = "value",
-	disabledKey: string = "disabled"
-): Array<IOption> => {
-	return arr.map((item: any) => {
-		return {
-			label: item[labelKey],
-			value: item[valueKey],
-			disabled: item[disabledKey],
-		};
-	});
-};
-
-interface IProps
-	extends Omit<SelectProps, "value" | "options" | "onChange" | "title"> {
-	value?: any;
-	options: IOption[];
-	onChange?: any;
-	/** 类型变种 */
-	variant?: "standard" | "outlined" | "filled";
-	/** title */
-	title?: string;
-	/** 是否显示title */
-	isTitle?: boolean;
-	size?: "small" | "medium";
-	multiple?: boolean; // 多选
-	error?: boolean;
-	helpertext?: string;
-	fullWidth?: boolean;
-}
-export default function MySelect(props: IProps) {
-	const {
-		value,
-		options,
-		onChange,
-		title,
-		isTitle = false,
-		variant,
-		size = "small",
-		multiple = false,
-		error = false,
-		helpertext,
-		fullWidth = true,
-	} = props;
-
-	return (
-		<FormControl fullWidth={fullWidth} variant={variant} error={error}>
-			{isTitle ? (
-				<InputLabel id="demo-simple-select-label">
-					{title || "请选择"}
-				</InputLabel>
-			) : null}
-			<Select
-				labelId="demo-simple-select-label"
-				id="demo-simple-select"
-				label={title || ""}
-				size={size}
-				{...props}
-				value={value}
-				onChange={onChange}
-				multiple={multiple}
-			>
-				{options.length
-					? options?.map((item: IOption) => {
-							return (
-								<MenuItem
-									key={item.value}
-									value={item.value}
-									disabled={item?.disabled}
-								>
-									{item.label}
-								</MenuItem>
-							);
-					  })
-					: null}
-			</Select>
-			{helpertext && error && <FormHelperText>{helpertext}</FormHelperText>}
-		</FormControl>
-	);
-}

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

 .formBox {
-  height: 300px;
-  width: 388px;
-  display: flex;
-  flex-direction: column;
-  padding: 10px 0;
-  justify-content: space-around;
+	padding: 8px 0;
+	width: 388px;
 }

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

 import style from "./index.module.css";
-import { TextField, MenuItem } from "@mui/material";
+import { MenuItem } from "@mui/material";
+import MyInput from "@/components/mui/MyInput";
 import MyDialog from "@/components/mui/MyDialog";
 import React, { useState, useEffect } from "react";
 import useMyRequest from "@/hooks/useMyRequest";
@@ -165,7 +166,7 @@ const AddProject = (props: IAddProjectProps) => {
 			title="新建项目"
 		>
 			<div className={style.formBox} onClick={handleFromBox}>
-				<TextField
+				<MyInput
 					required
 					error={nameCheck.error}
 					id="name"
@@ -174,9 +175,9 @@ const AddProject = (props: IAddProjectProps) => {
 					value={name}
 					onChange={handleNameChange}
 					helperText={nameCheck.help}
-					size="small"
+					sx={{ marginBottom: "20px" }}
 				/>
-				<TextField
+				<MyInput
 					id="zoneId"
 					select
 					required
@@ -185,7 +186,7 @@ const AddProject = (props: IAddProjectProps) => {
 					onChange={handleZoneIdChange}
 					variant="outlined"
 					onClick={handleFromBox}
-					size="small"
+					sx={{ marginBottom: "20px" }}
 				>
 					{zoneIdOptions &&
 						zoneIdOptions.map((option) => (
@@ -193,19 +194,30 @@ const AddProject = (props: IAddProjectProps) => {
 								{option.name}
 							</MenuItem>
 						))}
-				</TextField>
-				<TextField
-					value={desc}
-					error={descCheck.error}
-					id="desc"
-					label="项目描述"
-					multiline
-					rows={4}
-					placeholder="请输入项目描述"
-					onChange={handleDescChange}
-					helperText={descCheck.help}
-					size="small"
-				/>
+				</MyInput>
+				<div style={{ position: "relative" }}>
+					<MyInput
+						value={desc}
+						error={descCheck.error}
+						id="desc"
+						label="项目描述"
+						multiline
+						rows={4}
+						placeholder="请输入项目描述"
+						onChange={handleDescChange}
+						helperText={descCheck.help}
+					/>
+					<span
+						style={{
+							position: "absolute",
+							bottom: "7px",
+							right: "12px",
+							color: "rgba(194, 198, 204, 1)",
+						}}
+					>
+						{desc.length}/100
+					</span>
+				</div>
 			</div>
 		</MyDialog>
 	);

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

 .projectBox {
-  width: 260px;
-  height: calc(100vh - 57px);
-  background-color: #fff;
-  border-right: 1px solid #ebedf0;
-  display: flex;
-  flex-direction: column;
+	width: 260px;
+	height: calc(100vh - 57px);
+	background-color: #fff;
+	border-right: 1px solid #ebedf0;
+	display: flex;
+	flex-direction: column;
 }
 .searchBox {
-  box-sizing: border-box;
-  height: 56px;
-  padding: 17px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+	box-sizing: border-box;
+	height: 56px;
+	padding: 17px;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
 }
 .searchButton {
-  width: 22px;
-  height: 22px;
+	width: 22px;
+	height: 22px;
 }
 .searchIcon {
-  color: #999999;
+	color: #999999;
 }
 .searchInput {
-  margin: 0 6px;
-  flex: 1;
-  color: #1e2633;
-  /* #C2C6CC */
-  font-size: 14px;
-  line-height: 22px;
-  border-right: 1px solid #ebedf0;
+	margin: 0 6px;
+	flex: 1;
+	color: #1e2633;
+	/* #C2C6CC */
+	font-size: 14px;
+	line-height: 22px;
+	border-right: 1px solid #ebedf0;
 }
 .add {
-  padding: 0 15px;
-  width: 22px;
-  height: 22px;
+	padding: 0 15px;
+	width: 22px;
+	height: 22px;
 }
 .addIcon {
-  color: #1e2633;
+	color: #1e2633;
 }
 .projectlist {
-  flex: 1;
-  overflow-y: scroll;
+	flex: 1;
+	overflow-y: scroll;
+	border-top: 1px solid #f0f2f5;
 }
 .projectli {
-  cursor: pointer;
+	cursor: pointer;
 }
 .projectli:hover {
-  background-color: #f2f7ff;
+	background-color: rgba(240, 242, 245, 1);
+}
+.projectliActive {
+	background-color: rgba(237, 244, 255, 1);
 }
 .projectliBorderBox {
-  box-sizing: border-box;
-  height: 86px;
-  margin: 0 0 0 24px;
-  padding: 20px 24px 20px 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-start;
-  border-top: 1px solid #f0f2f5;
+	box-sizing: border-box;
+	height: 86px;
+	margin: 0 0 0 24px;
+	padding: 20px 24px 20px 0;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: flex-start;
+	border-bottom: 1px solid #f0f2f5;
 }
 .projectliLogo {
-  width: 24px;
-  margin-right: 12px;
+	width: 24px;
+	margin-right: 12px;
 }
 .projectName {
-  color: #1e2633;
-  line-height: 22px;
-  font-size: 14px;
-  font-weight: 600;
-  margin-bottom: 4px;
-  width: 166px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  display: block;
-  overflow: hidden;
+	color: #1e2633;
+	line-height: 22px;
+	font-size: 14px;
+	font-weight: 600;
+	margin-bottom: 4px;
+	width: 166px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	display: block;
+	overflow: hidden;
 }
 .projectOwnerTime {
-  display: flex;
-  justify-content: space-between;
+	display: flex;
+	justify-content: space-between;
 }
 .projectOwner {
-  color: #565c66;
-  line-height: 20px;
-  font-size: 14px;
-  margin-right: 32px;
-  max-width: 60px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  display: block;
-  overflow: hidden;
+	color: #565c66;
+	line-height: 20px;
+	font-size: 14px;
+	margin-right: 32px;
+	max-width: 60px;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	display: block;
+	overflow: hidden;
 }
 .projectTime {
-  color: #8a9099;
-  line-height: 20px;
-  font-size: 14px;
+	color: #8a9099;
+	line-height: 20px;
+	font-size: 14px;
 }

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

@@ -3,6 +3,7 @@ import style from "./index.module.css";
 import { InputBase, IconButton } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import AddIcon from "@mui/icons-material/Add";
+import classNames from "classnames";
 import { useStores } from "@/store/index";
 import moment from "moment";
 import React, { useMemo, useState } from "react";
@@ -10,77 +11,86 @@ import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 
 const ProjectListPopper = observer((props: any) => {
-  const { handleChangeCurrentProject, handleClickOpen } = props;
-  const { currentProjectStore } = useStores();
-  const [name, setName] = useState("");
-  const nameChange = (e: any) => {
-    setName(e.target.value);
-  };
+	const { handleChangeCurrentProject, handleClickOpen } = props;
+	const { currentProjectStore } = useStores();
+	const projectList = toJS(currentProjectStore.projectList);
+	const currentProjectName = toJS(currentProjectStore.currentProjectInfo.name);
+	// 通过名称本地搜索
+	const [name, setName] = useState("");
+	const nameChange = (e: any) => {
+		setName(e.target.value);
+	};
 
-  const list = useMemo(() => {
-    return toJS(currentProjectStore.projectList).filter((item: any) => {
-      return item.name?.indexOf(name) !== -1;
-    });
-  }, [currentProjectStore.projectList, name]);
+	const list = useMemo(() => {
+		return projectList.filter((item: any) => {
+			return item.name?.indexOf(name) !== -1;
+		});
+	}, [projectList, name]);
 
-  const handleProjectBox = (e: React.SyntheticEvent) => {
-    e.nativeEvent.stopImmediatePropagation();
-  };
+	const handleProjectBox = (e: React.SyntheticEvent) => {
+		e.nativeEvent.stopImmediatePropagation();
+	};
 
-  return (
-    <div className={style.projectBox} onClick={handleProjectBox}>
-      <div className={style.searchBox}>
-        <IconButton
-          type="submit"
-          className={style.searchButton}
-          aria-label="search"
-        >
-          <SearchIcon className={style.searchIcon} />
-        </IconButton>
-        <InputBase
-          className={style.searchInput}
-          placeholder="请输入项目名称"
-          inputProps={{ "aria-label": "请输入项目名称" }}
-          value={name}
-          onChange={nameChange}
-        />
-        <IconButton
-          onClick={handleClickOpen}
-          type="submit"
-          className={style.add}
-          aria-label="search"
-        >
-          <AddIcon className={style.addIcon} />
-        </IconButton>
-      </div>
-      <div className={style.projectlist}>
-        {list.map((item: any) => {
-          return (
-            <div
-              className={style.projectli}
-              key={item.id}
-              onClick={() => handleChangeCurrentProject(item)}
-            >
-              <div className={style.projectliBorderBox}>
-                <img src={smallLogo} alt="" className={style.projectliLogo} />
-                <div className={style.projectliInfo}>
-                  <div className={style.projectName}>{item.name}</div>
-                  <div className={style.projectOwnerTime}>
-                    <span className={style.projectOwner} title={item.owner}>
-                      {item.owner}
-                    </span>
-                    <span className={style.projectTime}>
-                      {moment(item.createdAt).format("YYYY-MM-DD")}
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
+	return (
+		<div className={style.projectBox} onClick={handleProjectBox}>
+			<div className={style.searchBox}>
+				<IconButton
+					type="submit"
+					className={style.searchButton}
+					aria-label="search"
+				>
+					<SearchIcon
+						className={style.searchIcon}
+						style={{ color: "rgba(153, 153, 153, 1)" }}
+					/>
+				</IconButton>
+				<InputBase
+					className={style.searchInput}
+					placeholder="请输入项目名称"
+					inputProps={{ "aria-label": "请输入项目名称" }}
+					value={name}
+					onChange={nameChange}
+				/>
+				<IconButton
+					onClick={handleClickOpen}
+					type="submit"
+					className={style.add}
+					aria-label="search"
+				>
+					<AddIcon className={style.addIcon} />
+				</IconButton>
+			</div>
+			<div className={style.projectlist}>
+				{list.map((item: any) => {
+					return (
+						<div
+							className={classNames({
+								[style.projectli]: true,
+								[style.projectliActive]: item.name === currentProjectName,
+							})}
+							key={item.id}
+							onClick={() => handleChangeCurrentProject(item)}
+						>
+							<div className={style.projectliBorderBox}>
+								<img src={smallLogo} alt="" className={style.projectliLogo} />
+								<div className={style.projectliInfo}>
+									<div className={style.projectName}>{item.name}</div>
+									<div className={style.projectOwnerTime}>
+										<span className={style.projectOwner} title={item.owner}>
+											{item.owner}
+										</span>
+										<span className={style.projectTime}>
+											{moment(item.createdAt).format("YYYY-MM-DD")}
+										</span>
+									</div>
+								</div>
+							</div>
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
 });
 
 export default ProjectListPopper;

src/views/WorkFlowEdit/components/ParameterSetting/index.tsx

@@ -9,9 +9,6 @@ import {
 import noTemplate from "@/assets/project/noTemplate.svg";
 import MyInput from "@/components/mui/MyInput";
 import MyCheckBox from "@/components/mui/MyCheckBox";
-// import MySelect, {
-// 	optionsTransform,
-// } from "../../../Project/ProjectSubmitWork/components/MySelect";
 import MySelect from "@/components/mui/MySelect";
 import FileSelect, {
 	FileSelectType,
@@ -491,7 +488,14 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 							<MySelect
 								value={parameter.defaultValue}
 								onChange={(e: any) =>
-									handleParameterChange(e, parameter.name || "")
+									handleParameterChange(
+										{
+											target: {
+												value: e,
+											},
+										},
+										parameter.name || ""
+									)
 								}
 								error={parameter.error || false}
 								helpertext={parameter.helperText}
@@ -503,7 +507,14 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 							<MySelect
 								value={parameter.defaultValue}
 								onChange={(e: any) =>
-									handleParameterChange(e, parameter.name || "")
+									handleParameterChange(
+										{
+											target: {
+												value: e,
+											},
+										},
+										parameter.name || ""
+									)
 								}
 								multiple={true}
 								error={parameter.error || false}

src/views/mui_demo/input.tsx

 import { memo } from "react";
 import { InputAdornment } from "@mui/material";
-// import InputComponent from "@/components/mui/MyInput";
-import InputComponent from "@/components/mui/MyInputCopy";
+import InputComponent from "@/components/mui/MyInput";
 
 const ProjectMembers = () => {
 	return (