UI: 样式优化 select组件替换

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: "#FFEDED ",
+						// border: "1px solid rgba(30, 38, 51, 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/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/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/ProjectListPopper/index.module.css

@@ -41,12 +41,16 @@
 .projectlist {
 	flex: 1;
 	overflow-y: scroll;
+	border-top: 1px solid #f0f2f5;
 }
 .projectli {
 	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;
@@ -57,7 +61,7 @@
 	flex-direction: row;
 	justify-content: flex-start;
 	align-items: flex-start;
-  border-top: 1px solid #f0f2f5;
+	border-bottom: 1px solid #f0f2f5;
 }
 .projectliLogo {
 	width: 24px;

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";
@@ -12,16 +13,19 @@ import { observer } from "mobx-react-lite";
 const ProjectListPopper = observer((props: any) => {
 	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 projectList.filter((item: any) => {
 			return item.name?.indexOf(name) !== -1;
 		});
-  }, [currentProjectStore.projectList, name]);
+	}, [projectList, name]);
 
 	const handleProjectBox = (e: React.SyntheticEvent) => {
 		e.nativeEvent.stopImmediatePropagation();
@@ -35,7 +39,10 @@ const ProjectListPopper = observer((props: any) => {
 					className={style.searchButton}
 					aria-label="search"
 				>
-          <SearchIcon className={style.searchIcon} />
+					<SearchIcon
+						className={style.searchIcon}
+						style={{ color: "rgba(153, 153, 153, 1)" }}
+					/>
 				</IconButton>
 				<InputBase
 					className={style.searchInput}
@@ -57,7 +64,10 @@ const ProjectListPopper = observer((props: any) => {
 				{list.map((item: any) => {
 					return (
 						<div
-              className={style.projectli}
+							className={classNames({
+								[style.projectli]: true,
+								[style.projectliActive]: item.name === currentProjectName,
+							})}
 							key={item.id}
 							onClick={() => handleChangeCurrentProject(item)}
 						>

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}