feat: 提交任务样式修改

src/components/mui/MyRadio.tsx

@@ -11,7 +11,7 @@ import Radio from "@mui/material/Radio";
 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 FormHelperText from "@mui/material/FormHelperText";
 
 interface IMyRadioProps extends RadioGroupProps {
 	value: any;
@@ -20,7 +20,7 @@ interface IMyRadioProps extends RadioGroupProps {
 	variant?: "standard" | "outlined" | "filled";
 	error?: boolean;
 	helperText?: string;
-};
+}
 
 type ICheckBoxOption = {
 	value: any;
@@ -45,7 +45,14 @@ export const optionsTransform = (
 };
 
 export default function MyRadio(props: IMyRadioProps) {
-  const { value, options, onChange , error = false, helperText, variant} = props;
+	const {
+		value,
+		options,
+		onChange,
+		error = false,
+		helperText,
+		variant,
+	} = props;
 
 	return (
 		<FormControl fullWidth variant={variant} error={error}>
@@ -62,7 +69,7 @@ export default function MyRadio(props: IMyRadioProps) {
 						<FormControlLabel
 							key={option.value}
 							value={option.value}
-              control={<Radio />}
+							control={<Radio sx={{ color: "rgba(209, 214, 222, 1)" }} />}
 							label={option.label}
 							disabled={option.disabled}
 						/>

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

@@ -16,17 +16,30 @@
 	line-height: 20px;
 	color: #565c66;
 }
+.formItemBox {
+	background: #ffffff;
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
+	border-radius: 4px;
+	border: 1px solid #ebedf0;
+	margin-bottom: 24px;
+}
+/* .taskBox {
+	margin-bottom: 24px;
+} */
 .backgroundTitle {
 	background-color: rgba(245, 246, 247, 1);
 	height: 48px;
 	display: flex;
 	justify-content: flex-start;
 	align-items: center;
-  padding: 12px 16px;
+	padding: 12px 24px;
 	box-sizing: border-box;
 	position: relative;
 }
 .backgroundTitleTextIcon {
+	position: absolute;
+	top: 16px;
+	right: 24px;
 	visibility: hidden;
 }
 .backgroundTitleTextIconShow {
@@ -37,7 +50,6 @@
 	font-weight: 600;
 	line-height: 24px;
 	color: rgba(30, 38, 51, 1);
-  margin-left: 12px;
 }
 .taskDescIcon {
 	margin-left: 8px;
@@ -46,7 +58,7 @@
 	margin-left: 8px;
 }
 .formItems {
-  padding: 20px 44px 40px 44px;
+	padding: 16px 24px 4px;
 }
 .formItem {
 	margin-bottom: 20px;
@@ -69,18 +81,19 @@
 }
 
 .taskConfigBox {
-  padding: 24px 44px 40px 44px;
+	padding: 16px 24px 4px;
 }
 .flowTitle {
 	line-height: 16px;
 	margin: 3px 0 27px;
-  color: rgba(30, 38, 51, 1);
+	color: rgba(19, 112, 255, 1);
 	font-size: 14px;
 	font-weight: 600;
 	border-left: 3px solid rgba(19, 112, 255, 1);
 	padding-left: 3px;
 	display: flex;
 	align-items: center;
+	padding-left: 8px;
 }
 .parameter {
 	margin-bottom: 20px;

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

@@ -396,14 +396,21 @@ const ConfigForm = (props: ConfigFormProps) => {
 					{templateConfigInfo?.description || ""}
 				</div>
 			</div>
+			<div className={styles.formItemBox}>
 				<div
 					className={classnames({
 						[styles.backgroundTitle]: true,
-					[styles.backgroundTitlePass]: true,
 					})}
 				>
-				<img src="" alt="" />
 					<span className={styles.backgroundTitleText}>基础信息</span>
+					<img
+						className={classnames({
+							[styles.backgroundTitleTextIcon]: true,
+							[styles.backgroundTitleTextIconShow]: !nameHelp.error,
+						})}
+						src={jobSueIcon}
+						alt=""
+					/>
 				</div>
 				<div className={styles.formItems}>
 					<div className={styles.formItem}>
@@ -457,23 +464,15 @@ const ConfigForm = (props: ConfigFormProps) => {
 						</div>
 					</div>
 				</div>
+			</div>
 			{renderTasks.map((task, taskIndex) => {
 				return (
-					<div className={styles.taskBox} key={task.id + taskIndex}>
+					<div className={styles.formItemBox} key={task.id + taskIndex}>
 						<div
 							className={classnames({
 								[styles.backgroundTitle]: true,
-								[styles.backgroundTitlePass]: true,
 							})}
 						>
-							<img
-								className={classnames({
-									[styles.backgroundTitleTextIcon]: true,
-									[styles.backgroundTitleTextIconShow]: task.isCheck,
-								})}
-								src={jobSueIcon}
-								alt=""
-							/>
 							<span
 								id={`point${task.id}`}
 								className={styles.backgroundTitleText}
@@ -485,10 +484,25 @@ const ConfigForm = (props: ConfigFormProps) => {
 									<img className={styles.taskDescIcon} src={tipsIcon} alt="" />
 								</MyTooltip>
 							)}
+							<img
+								className={classnames({
+									[styles.backgroundTitleTextIcon]: true,
+									[styles.backgroundTitleTextIconShow]: task.isCheck,
+								})}
+								src={jobSueIcon}
+								alt=""
+							/>
 						</div>
 						<div className={styles.taskConfigBox}>
 							{randerParameters(task.parameters, task.id, task.id)}
 							{task.flows.map((flow) => {
+								if (
+									flow.parameters.filter(
+										(parameter) => parameter.hidden === false
+									).length === 0
+								) {
+									return null;
+								}
 								return (
 									<div className={styles.flowConfigBox} key={flow.id}>
 										<div className={styles.flowTitle}>

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

@@ -30,13 +30,14 @@
 	line-height: 22px;
 	font-size: 14px;
 	color: rgba(30, 38, 51, 1);
-	font-weight: 600;
+	font-weight: 700;
 	padding-right: 20px;
-	border-right: 1px solid rgba(235, 237, 240, 1);
+	border-right: 1px solid rgba(209, 214, 222, 1);
 }
 .swHeaderLable {
 	color: rgba(138, 144, 153, 1);
 	font-size: 12px;
+	line-height: 22px;
 }
 .swHeaderValue {
 	color: rgba(30, 38, 51, 1);

src/views/Project/ProjectSubmitWork/index.tsx

@@ -240,8 +240,8 @@ const ProjectSubmitWork = observer(() => {
 							<ArrowBackIosNewIcon
 								sx={{
 									color: "rgba(194, 198, 204, 1)",
-									width: "12px",
-									height: "12px",
+									width: "14px",
+									height: "14px",
 								}}
 							/>
 						</IconButton>