UI: 样式优化

src/components/mui/MyButton.tsx

@@ -47,6 +47,10 @@ const theme = createTheme({
 					"&.MuiButton-textError": {
 						color: "rgba(255, 78, 78, 1)",
 					},
+					"&.MuiButton-outlinedError": {
+						color: "rgba(255, 78, 78, 1)",
+						border: "1px solid rgba(255, 78, 78, 1)",
+					},
 				},
 				contained: {
 					backgroundColor: "#1370FF",
@@ -60,6 +64,9 @@ const theme = createTheme({
 					boxShadow: "none !important",
 					color: "#1370FF",
 					"&:hover": { backgroundColor: "#ECF4FF " },
+					"&.MuiButton-textError": {
+						color: "rgba(255, 78, 78, 1)",
+					},
 				},
 				text: {
 					backgroundColor: "transparent",

src/components/mui/MyDialog.tsx

@@ -8,7 +8,7 @@ import {
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 
-import MyButton from './MyButton'
+import MyButton from "./MyButton";
 
 export interface IDialogProps {
 	/** 自定义类名 */
@@ -84,7 +84,12 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 		) : (
 			<DialogActions style={{ padding: "0 24px 24px 24px" }}>
 				{showCancel ? (
-					<MyButton text={cancelText || "取消"} onClick={onClose} variant="outlined" size="small" />
+					<MyButton
+						text={cancelText || "取消"}
+						onClick={onClose}
+						variant="outlined"
+						size="small"
+					/>
 				) : null}
 				{showConfirm ? (
 					<MyButton
@@ -123,6 +128,7 @@ const MyDialog: React.FunctionComponent<IDialogProps> = (props) => {
 							display: "flex",
 							justifyContent: "space-between",
 							alignItems: "center",
+							fontWeight: 600,
 						}}
 					>
 						<span>{title}</span>

src/components/mui/MyInput.tsx

@@ -20,7 +20,7 @@ interface MyInputProps extends Omit<TextFieldProps, "value"> {
 
 const MyInput = (props: MyInputProps) => {
 	const {
-		size = "small",
+		size = "medium",
 		placeholder = "请输入",
 		fullWidth = true,
 		error = false,

src/components/mui/MySelect.tsx

@@ -9,6 +9,7 @@
 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, { SelectChangeEvent, SelectProps } from "@mui/material/Select";
 import { createTheme, ThemeProvider } from "@mui/material";
 
@@ -44,6 +45,10 @@ interface IProps
 	title?: string;
 	/** 是否显示title */
 	isTitle?: boolean;
+	/** 是否显示提示文案 */
+	error?: boolean;
+	/** 提示文案 */
+	helpertext?: string;
 }
 export default function MySelect(props: IProps) {
 	const {
@@ -55,6 +60,8 @@ export default function MySelect(props: IProps) {
 		multiple = false,
 		onChange,
 		fullWidth,
+		error = false,
+		helpertext,
 		...other
 	} = props;
 
@@ -151,6 +158,7 @@ export default function MySelect(props: IProps) {
 						  })
 						: null}
 				</Select>
+				{helpertext && error && <FormHelperText>{helpertext}</FormHelperText>}
 			</FormControl>
 		</ThemeProvider>
 	);

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

@@ -7,6 +7,7 @@ import { useMessage } from "@/components/MySnackbar";
 import CloudEController from "@/api/fileserver/CloudEController";
 import usePass from "@/hooks/usePass";
 import InputAdornment from "@mui/material/InputAdornment";
+import MyInput from "@/components/mui/MyInput";
 import MyButton from "@/components/mui/MyButton";
 
 type IAddFolderProps = {
@@ -93,7 +94,7 @@ const AddFolder = (props: IAddFolderProps) => {
 	return (
 		<>
 			<MyButton
-				text='新建文件夹'
+				text="新建文件夹"
 				variant="outlined"
 				size="small"
 				onClick={() => setDeleteDialogOpen(true)}
@@ -108,11 +109,10 @@ const AddFolder = (props: IAddFolderProps) => {
 				onConfirm={handleAddSubmit}
 				title="新建文件夹"
 			>
-				<TextField
+				<div style={{ padding: "12px 0" }}>
+					<MyInput
 						sx={{
 							width: "388px",
-						border: "1px solide #E6E8EB",
-						marginTop: "12px",
 						}}
 						required
 						error={fileNameCheck.error}
@@ -129,8 +129,9 @@ const AddFolder = (props: IAddFolderProps) => {
 								</InputAdornment>
 							),
 						}}
-					size="small"
+						size="medium"
 					/>
+				</div>
 			</MyDialog>
 		</>
 	);

src/views/Project/ProjectData/index.tsx

@@ -370,9 +370,9 @@ const ProjectData = observer(() => {
 						text="下载"
 						style={{
 							position: "relative",
-							left: "-16px",
+							left: "-10px",
 							minWidth: "10px",
-							marginRight: "10px",
+							padding: "0 10px",
 							visibility:
 								item.type !== "dataSet" && item.type !== "directory"
 									? "visible"
@@ -388,9 +388,9 @@ const ProjectData = observer(() => {
 					text="移动至"
 					style={{
 						position: "relative",
-						left: "-16px",
+						left: "-10px",
 						minWidth: "10px",
-						marginRight: "10px",
+						padding: "0 10px",
 					}}
 					variant="text"
 					size="medium"
@@ -407,9 +407,9 @@ const ProjectData = observer(() => {
 					text="删除"
 					style={{
 						position: "relative",
-						left: "-16px",
+						left: "-10px",
 						minWidth: "10px",
-						marginRight: "10px",
+						padding: "0 10px",
 					}}
 					variant="text"
 					size="medium"
@@ -541,6 +541,7 @@ const ProjectData = observer(() => {
 								value={keyWord}
 								required
 								size="small"
+								// size="medium"
 								placeholder="输入关键词搜索"
 								onChange={handleKeyWordChange}
 								onKeyUp={handleKeyWordChangeKeyUp}
@@ -549,13 +550,11 @@ const ProjectData = observer(() => {
 										<SearchIcon
 											className={style.searchIcon}
 											style={{
-												color: "#999",
-												cursor: "pointer",
+												color: "rgba(153, 153, 153, 1)",
 												fontSize: "22px",
 												position: "relative",
 												left: "4px",
 											}}
-											onClick={handleRefresh}
 										/>
 									),
 								}}

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

@@ -30,7 +30,7 @@
 	line-height: 22px;
 	font-size: 14px;
 	color: rgba(30, 38, 51, 1);
-  font-weight: 600;
+	font-weight: 700;
 }
 
 .swContent {
@@ -74,7 +74,7 @@
 	font-size: 14px;
 }
 .outputLiLeftImg {
-  margin-right: 15px;
+	margin-right: 12px;
 }
 .outputLiRight {
 	color: rgba(138, 144, 153, 1);

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

@@ -7,12 +7,11 @@ import MyInput from "@/components/mui/MyInput";
 import FileSelect, {
 	FileSelectType,
 } from "@/components/BusinessComponents/FileSelect";
-import MySelect, { optionsTransform } from "../components/MySelect";
+import MySelect from "@/components/mui/MySelect";
 import MyCheckBox from "@/components/mui/MyCheckBox";
 import MyRadio from "@/components/mui/MyRadio";
 import { getCheckResult } from "../util";
 import fileSelectIcon from "@/assets/project/fileSelect.svg";
-import questionMark from "@/assets/project/questionMark.svg";
 import tipsIcon from "@/assets/project/tipsIcon.svg";
 import jobSueIcon from "@/assets/project/jobSue.svg";
 import { IParameter } from "../interface";
@@ -214,6 +213,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 								{parameter.classTypeName}
 							</span>
 						</div>
+						<MyTooltip title={parameter.description} placement="right">
 							<div className={styles.parameterContent}>
 								{parameter.domType.toLowerCase() === "file" && (
 									<MyInput
@@ -236,6 +236,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 										placeholder="请选择"
 										error={parameter.error || false}
 										helperText={parameter.helperText}
+										size="medium"
 									></MyInput>
 								)}
 								{parameter.domType.toLowerCase() === "path" && (
@@ -259,6 +260,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 										placeholder="请选择"
 										error={parameter.error || false}
 										helperText={parameter.helperText}
+										size="medium"
 									></MyInput>
 								)}
 								{parameter.domType.toLowerCase() === "dataset" && (
@@ -282,6 +284,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 										placeholder="请选择"
 										error={parameter.error || false}
 										helperText={parameter.helperText}
+										size="medium"
 									></MyInput>
 								)}
 								{parameter.domType.toLowerCase() === "input" && (
@@ -298,6 +301,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 										placeholder="请输入"
 										error={parameter.error || false}
 										helperText={parameter.helperText}
+										size="medium"
 									></MyInput>
 								)}
 								{parameter.domType.toLowerCase() === "select" && (
@@ -310,7 +314,8 @@ const ConfigForm = (props: ConfigFormProps) => {
 										}
 										error={parameter.error || false}
 										helpertext={parameter.helperText}
-									options={optionsTransform(parameter?.choices || [], "label")}
+										options={parameter?.choices || []}
+										fullWidth
 									></MySelect>
 								)}
 								{parameter.domType.toLowerCase() === "multipleselect" && (
@@ -324,7 +329,8 @@ const ConfigForm = (props: ConfigFormProps) => {
 										multiple={true}
 										error={parameter.error || false}
 										helpertext={parameter.helperText}
-									options={optionsTransform(parameter.choices, "label")}
+										options={parameter?.choices || []}
+										fullWidth
 									></MySelect>
 								)}
 								{parameter.domType.toLowerCase() === "radio" && (
@@ -335,7 +341,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 										}
 										onFocus={() => setSelectedBatchNodeId(batchId || "")}
 										onBlur={() => setSelectedBatchNodeId("")}
-									options={optionsTransform(parameter.choices, "label")}
+										options={parameter?.choices || []}
 										error={parameter.error || false}
 										helperText={parameter.helperText}
 									></MyRadio>
@@ -354,23 +360,15 @@ const ConfigForm = (props: ConfigFormProps) => {
 												parameter.name || ""
 											)
 										}
-									options={optionsTransform(parameter.choices, "label")}
+										options={parameter?.choices || []}
 										onFocus={() => setSelectedBatchNodeId(batchId || "")}
 										onBlur={() => setSelectedBatchNodeId("")}
 										error={parameter.error || false}
 										helperText={parameter.helperText}
 									/>
 								)}
-							{parameter.description && (
-								<MyTooltip title={parameter.description} placement="top">
-									<img
-										className={styles.parameterDesc}
-										src={questionMark}
-										alt=""
-									/>
-								</MyTooltip>
-							)}
 							</div>
+						</MyTooltip>
 					</div>
 				);
 			});

src/views/Project/ProjectSubmitWork/interface.ts

@@ -85,7 +85,7 @@ export type IValidator = {
 
 export interface IChoice {
   label: string;
-  value: boolean | string | number;
+  value: string;
 }
 
 export interface IEdge {

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

@@ -9,9 +9,10 @@ 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, {
+// 	optionsTransform,
+// } from "../../../Project/ProjectSubmitWork/components/MySelect";
+import MySelect from "@/components/mui/MySelect";
 import FileSelect, {
 	FileSelectType,
 } from "@/components/BusinessComponents/FileSelect";
@@ -397,7 +398,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 	const renderInput = useCallback(
 		(parameter: IParameter) => {
 			return (
-				<MyTooltip title={parameter.description} placement="top">
+				<MyTooltip title={parameter.description} placement="right">
 					<div>
 						{parameter.domType.toLowerCase() === "file" && (
 							<MyInput
@@ -494,7 +495,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 								}
 								error={parameter.error || false}
 								helpertext={parameter.helperText}
-								options={optionsTransform(parameter?.choices || [], "label")}
+								options={parameter?.choices || []}
 								disabled={parameter.parameterGroup === "out"}
 							></MySelect>
 						)}
@@ -507,7 +508,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 								multiple={true}
 								error={parameter.error || false}
 								helpertext={parameter.helperText}
-								options={optionsTransform(parameter.choices, "label")}
+								options={parameter?.choices || []}
 								disabled={parameter.parameterGroup === "out"}
 							></MySelect>
 						)}
@@ -517,7 +518,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 								onChange={(e: any) =>
 									handleParameterChange(e, parameter.name || "")
 								}
-								options={optionsTransform(parameter.choices, "label")}
+								options={parameter?.choices || []}
 								error={parameter.error || false}
 								helperText={parameter.helperText}
 							></MyRadio>
@@ -535,7 +536,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 										parameter.name || ""
 									)
 								}
-								options={optionsTransform(parameter.choices, "label")}
+								options={parameter?.choices || []}
 								error={parameter.error || false}
 								helperText={parameter.helperText}
 							></MyCheckBox>