feat: 提交任务样式修改

src/components/mui/MyCheckBox.tsx

@@ -12,6 +12,7 @@ import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
 import FormControl from "@mui/material/FormControl";
 import FormHelperText from "@mui/material/FormHelperText";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
 import _ from "lodash";
 
 interface IMyCheckBoxProps extends FormGroupProps {
@@ -44,6 +45,33 @@ export const optionsTransform = (
 	});
 };
 
+const theme = createTheme({
+	components: {
+		MuiFormControlLabel: {
+			styleOverrides: {
+				label: {
+					fontSize: "14px",
+				},
+			},
+		},
+		MuiSvgIcon: {
+			styleOverrides: {
+				root: {
+					fontSize: "19px",
+				},
+			},
+		},
+		MuiCheckbox: {
+			styleOverrides: {
+				colorPrimary: {
+					color: "rgba(209, 214, 222, 1)",
+				},
+			},
+		},
+		// MuiCheckbox-colorPrimary
+	},
+});
+
 export default function MyCheckBox(props: IMyCheckBoxProps) {
 	const {
 		value,
@@ -76,27 +104,29 @@ export default function MyCheckBox(props: IMyCheckBoxProps) {
 	};
 
 	return (
-		<FormControl fullWidth variant={variant} error={error}>
-			<FormGroup {...props} row>
-				{options.map((option) => {
-					return (
-						<FormControlLabel
-							key={option.value}
-							control={
-								<Checkbox
-									checked={getCheckedStatus(option.value, value)}
-									value={option.value}
-								/>
-							}
-							label={option.label}
-							name={option.value}
-							onChange={handleMyCheckBoxOnChange}
-							disabled={option.disabled}
-						/>
-					);
-				})}
-			</FormGroup>
-			{helperText && error && <FormHelperText>{helperText}</FormHelperText>}
-		</FormControl>
+		<ThemeProvider theme={theme}>
+			<FormControl fullWidth variant={variant} error={error}>
+				<FormGroup {...props} row>
+					{options.map((option) => {
+						return (
+							<FormControlLabel
+								key={option.value}
+								control={
+									<Checkbox
+										checked={getCheckedStatus(option.value, value)}
+										value={option.value}
+									/>
+								}
+								label={option.label}
+								name={option.value}
+								onChange={handleMyCheckBoxOnChange}
+								disabled={option.disabled}
+							/>
+						);
+					})}
+				</FormGroup>
+				{helperText && error && <FormHelperText>{helperText}</FormHelperText>}
+			</FormControl>
+		</ThemeProvider>
 	);
 }

src/components/mui/MyRadio.tsx

@@ -12,6 +12,7 @@ import RadioGroup, { RadioGroupProps } from "@mui/material/RadioGroup";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormControl from "@mui/material/FormControl";
 import FormHelperText from "@mui/material/FormHelperText";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
 
 interface IMyRadioProps extends RadioGroupProps {
 	value: any;
@@ -44,6 +45,25 @@ export const optionsTransform = (
 	});
 };
 
+const theme = createTheme({
+	components: {
+		MuiFormControlLabel: {
+			styleOverrides: {
+				label: {
+					fontSize: "14px",
+				},
+			},
+		},
+		MuiSvgIcon: {
+			styleOverrides: {
+				root: {
+					fontSize: "19px",
+				},
+			},
+		},
+	},
+});
+
 export default function MyRadio(props: IMyRadioProps) {
 	const {
 		value,
@@ -55,28 +75,30 @@ export default function MyRadio(props: IMyRadioProps) {
 	} = props;
 
 	return (
-		<FormControl fullWidth variant={variant} error={error}>
-			<RadioGroup
-				{...props}
-				row
-				aria-labelledby="demo-row-radio-buttons-group-label"
-				name="row-radio-buttons-group"
-				value={value}
-				onChange={onChange}
-			>
-				{options.map((option) => {
-					return (
-						<FormControlLabel
-							key={option.value}
-							value={option.value}
-							control={<Radio sx={{ color: "rgba(209, 214, 222, 1)" }} />}
-							label={option.label}
-							disabled={option.disabled}
-						/>
-					);
-				})}
-			</RadioGroup>
-			{helperText && error && <FormHelperText>{helperText}</FormHelperText>}
-		</FormControl>
+		<ThemeProvider theme={theme}>
+			<FormControl fullWidth variant={variant} error={error}>
+				<RadioGroup
+					{...props}
+					row
+					aria-labelledby="demo-row-radio-buttons-group-label"
+					name="row-radio-buttons-group"
+					value={value}
+					onChange={onChange}
+				>
+					{options.map((option) => {
+						return (
+							<FormControlLabel
+								key={option.value}
+								value={option.value}
+								control={<Radio sx={{ color: "rgba(209, 214, 222, 1)" }} />}
+								label={option.label}
+								disabled={option.disabled}
+							/>
+						);
+					})}
+				</RadioGroup>
+				{helperText && error && <FormHelperText>{helperText}</FormHelperText>}
+			</FormControl>
+		</ThemeProvider>
 	);
 }

src/views/Project/ProjectSubmitWork/ConfigForm/index.module.css

@@ -81,7 +81,7 @@
 }
 
 .taskConfigBox {
-	padding: 16px 24px 4px;
+	padding: 16px 0px 4px;
 }
 .flowTitle {
 	line-height: 16px;
@@ -118,3 +118,13 @@
 	color: rgba(138, 144, 153, 1);
 	margin-left: 16px;
 }
+.bacthConfigBox {
+	padding: 0 24px 0;
+}
+.flowConfigBox {
+	border-bottom: 1px solid rgba(235, 237, 240, 1);
+	padding: 20px 24px 12px;
+}
+.flowConfigBox:nth-last-child(1) {
+	border-bottom: none;
+}

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

@@ -189,10 +189,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 		setParameter(e.target.value, taskId, parameterName);
 	};
 
-	const randerParameters = (
-		parameters: Array<IParameter>,
-		taskId: string,
-	) => {
+	const randerParameters = (parameters: Array<IParameter>, taskId: string) => {
 		return parameters
 			.filter((parameter) => parameter.hidden === false)
 			.map((parameter, parameterIndex) => {
@@ -495,10 +492,12 @@ const ConfigForm = (props: ConfigFormProps) => {
 							/>
 						</div>
 						<div className={styles.taskConfigBox}>
-							{randerParameters(
-								task.parameters.filter((parameter) => !parameter?.thrown),
-								task.id,
-							)}
+							<div className={styles.bacthConfigBox}>
+								{randerParameters(
+									task.parameters.filter((parameter) => !parameter?.thrown),
+									task.id
+								)}
+							</div>
 							{task.flows.map((flow) => {
 								if (
 									flow.parameters.filter(
@@ -508,7 +507,11 @@ const ConfigForm = (props: ConfigFormProps) => {
 									return null;
 								}
 								return (
-									<div className={styles.flowConfigBox} key={flow.id} id={`point${flow.id}`}>
+									<div
+										className={styles.flowConfigBox}
+										key={flow.id}
+										id={`point${flow.id}`}
+									>
 										<div className={styles.flowTitle}>
 											{flow.title}
 											{flow.description && (
@@ -521,10 +524,7 @@ const ConfigForm = (props: ConfigFormProps) => {
 												</MyTooltip>
 											)}
 										</div>
-										{randerParameters(
-											flow.parameters,
-											flow.id,
-										)}
+										{randerParameters(flow.parameters, flow.id)}
 									</div>
 								);
 							})}

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

@@ -14,7 +14,7 @@
 	top: 0;
 	height: 56px;
 	background-color: #fff;
-	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.06);
 	display: flex;
 	justify-content: space-between;
 	align-items: center;

src/views/Project/ProjectSubmitWork/index.tsx

@@ -28,6 +28,7 @@ import { useMessage } from "@/components/MySnackbar";
 import { useStores } from "@/store";
 import { observer } from "mobx-react-lite";
 import MyPopconfirm from "@/components/mui/MyPopconfirm";
+import goback from "@/assets/project/goback.svg";
 
 import styles from "./index.module.css";
 
@@ -254,24 +255,14 @@ const ProjectSubmitWork = observer(() => {
 			{fullScreenShow ? null : (
 				<div className={styles.swHeader}>
 					<div className={styles.swHeaderLeft}>
-						<IconButton
-							color="primary"
+						<img
+							className={styles.goBackIcon}
+							src={goback}
+							alt=""
 							onClick={(e: any) =>
 								handleShowPopper(e, "返回将放弃当前页面所有操作，确认返回吗？")
 							}
-							aria-label="upload picture"
-							component="span"
-							size="small"
-						>
-							<ArrowBackIosNewIcon
-								sx={{
-									color: "rgba(194, 198, 204, 1)",
-									width: "14px",
-									height: "14px",
-								}}
-							/>
-						</IconButton>
-
+						/>
 						<div className={styles.swTemplateTitle}>
 							{templateConfigInfo?.title}
 						</div>
@@ -294,17 +285,12 @@ const ProjectSubmitWork = observer(() => {
 						<div className={styles.swHeaderGoback}></div>
 					</div>
 					<div className={styles.swHeaderRight}>
-						{/* <MyPopconfirm
-							title="提交前请先确认参数填写无误，确认提交吗？"
-							onConfirm={handleSubmitForm}
-						> */}
 						<MyButton
 							text="提交任务"
 							onClick={(e: any) =>
 								handleShowPopper(e, "提交前请先确认参数填写无误，确认提交吗？")
 							}
 						></MyButton>
-						{/* </MyPopconfirm> */}
 					</div>
 				</div>
 			)}

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

@@ -19,9 +19,7 @@
 .templateBox {
 	display: flex;
 	flex-wrap: wrap;
-	/* max-height: calc(100vh - 276px); */
 	margin: 0 -8px;
-	overflow-y: overlay;
 }
 
 .template {
@@ -41,7 +39,7 @@
 	margin-bottom: 16px;
 	position: relative;
 	box-sizing: border-box;
-	transition: box-shadow .2s cubic-bezier(0, 0, 1, 1);
+	transition: box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
 }
 .templateBlock:hover {
 	box-shadow: 6px 8px 22px 0px rgba(0, 24, 57, 0.08);

src/views/WorkFlowEdit/index.tsx

@@ -199,27 +199,6 @@ const WorkFlowEdit = observer((props: IProps) => {
 				>
 					<img className={styles.goBackIcon} src={goback} alt="" />
 					<span className={styles.goBack}>返回</span>
-					{/* <IconButton
-						color="primary"
-						aria-label="upload picture"
-						component="span"
-						size="small"
-						onClick={(e: any) =>
-							handleShowPopper(
-								e,
-								"返回后，当前页面已填写内容将不保存，确认返回吗？"
-							)
-						}
-					>
-						<ArrowBackIosNewIcon
-							sx={{
-								color: "rgba(194, 198, 204, 1)",
-								width: "12px",
-								height: "12px",
-							}}
-						/>
-						返回
-					</IconButton> */}
 				</div>
 				<div className={styles.swHeaderRight}>
 					<MyButton text="保存" onClick={() => handlePreserve()}></MyButton>