feat: 修改tabs组件样式， 完成参数样式

src/components/mui/Tabs.tsx

@@ -11,27 +11,62 @@ import { isEqual } from "lodash";
 import { useState } from "react";
 import { Box } from "@mui/system";
 import Tab from "@mui/material/Tab";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
 import { TabContext, TabList, TabPanel } from "@mui/lab";
 import { Typography } from "@mui/material";
 
 interface ITabList {
 	label: string;
 	value: string;
-	component: JSX.Element;
+	component: JSX.Element | React.ReactNode;
 	icon?: string;
 	iconed?: string;
 	hide?: boolean;
+	disabled?: boolean;
 }
 
 interface IProps {
 	tabList: ITabList[];
 	defaultValue?: string;
+	allowNullValue?: boolean; // 是否允许空值
 }
 
+const theme = createTheme({
+	components: {
+		MuiTab: {
+			styleOverrides: {
+				root: {
+                    paddingLeft: 0,
+                    paddingRight: 0,
+                    paddingTop: '8px',
+                    paddingBottom: '8px',
+					minWidth: '20px',
+					marginRight: '32px',
+					color: '#8A9099',
+					selected: {
+						color: '#1976d2'
+					},
+					"&.Mui-disabled": {
+						color: '#C2C6CC',
+					},
+				},
+			},
+		},
+		// #C2C6CC
+		MuiTabs:{
+			styleOverrides: {
+				indicator: {
+					backgroundColor: '#1370FF',
+				}
+			}
+		},
+	},
+});
+
 const Tabs = (props: IProps) => {
-	const { tabList, defaultValue } = props;
+	const { tabList, defaultValue, allowNullValue = false } = props;
 	const [value, setValue] = useState(
-		defaultValue || tabList.filter((e) => !e.hide)[0].value
+		defaultValue ? defaultValue : allowNullValue ? '' : tabList.filter((e) => !e.hide)[0].value
 	);
 
 	const onChange = (val: string) => {
@@ -58,6 +93,7 @@ const Tabs = (props: IProps) => {
 	};
 
 	return (
+		<ThemeProvider theme={theme}>
 		<TabContext value={value}>
 			<Box sx={{ borderBottom: 1, borderColor: "#F0F2F5" }}>
 				<TabList
@@ -74,6 +110,7 @@ const Tabs = (props: IProps) => {
 									label={labelRender(item, key)}
 									value={item.value}
 									id={item.value}
+									disabled={item.disabled}
 								/>
 							);
 						})}
@@ -93,6 +130,7 @@ const Tabs = (props: IProps) => {
 					);
 				})}
 		</TabContext>
+		</ThemeProvider>
 	);
 };
 const handleEqual = (prvProps: IProps, nextProps: IProps) => {

src/views/WorkFlowEdit/components/ParameterSetting/index.module.css

@@ -133,3 +133,6 @@
 	line-height: 22px;
 	color: rgba(138, 144, 153, 1);
 }
+.paramsGroup{
+	padding-bottom: 24px;
+}
\ No newline at end of file

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

@@ -4,7 +4,7 @@ import {
 	IParameter,
 } from "../../../Project/ProjectSubmitWork/interface";
 import noTemplate from "@/assets/project/noTemplate.svg";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import MyInput from "@/components/mui/MyInput";
 import Tooltip from "@mui/material/Tooltip";
 import MyCheckBox from "@/components/mui/MyCheckBox";
@@ -16,6 +16,7 @@ import MyRadio from "@/components/mui/MyRadio";
 import questionMark from "@/assets/project/questionMark.svg";
 import fileSelectIcon from "@/assets/project/fileSelect.svg";
 import MySwitch from "@/components/mui/MySwitch";
+import Tabs from "@/components/mui/Tabs";
 import classNames from "classnames";
 
 type IParameterSettingProps = {
@@ -43,7 +44,7 @@ const templateConfigInfo = [
 				id: "",
 				name: "smi_in",
 				required: true,
-				defaultValue: null,
+				defaultValue: '',
 				domType: "select",
 				classType: "STRING",
 				classTypeName: "String",
@@ -67,9 +68,9 @@ const templateConfigInfo = [
 			{
 				hidden: true,
 				id: "",
-				name: "smi_in",
+				name: "out",
 				required: true,
-				defaultValue: null,
+				defaultValue: '',
 				domType: "select",
 				classType: "STRING",
 				classTypeName: "String",
@@ -90,6 +91,84 @@ const templateConfigInfo = [
 				choices: [],
 				parameterGroup: "out",
 			},
+			{
+				hidden: true,
+				id: "",
+				name: "basis",
+				required: true,
+				defaultValue: '',
+				domType: "select",
+				classType: "STRING",
+				classTypeName: "String",
+				value: "",
+				description: "",
+				language: "",
+				languageVersion: "",
+				tags: [],
+				source: "string",
+				productId: "",
+				tasks: [],
+				validators: [
+					{
+						message: "请选择smi文件作为输入",
+						regex: "^.[s][m][i]$",
+					},
+				],
+				choices: [],
+				parameterGroup: "basis",
+			},
+			{
+				hidden: true,
+				id: "",
+				name: "senior",
+				required: true,
+				defaultValue: '',
+				domType: "select",
+				classType: "STRING",
+				classTypeName: "String",
+				value: "",
+				description: "",
+				language: "",
+				languageVersion: "",
+				tags: [],
+				source: "string",
+				productId: "",
+				tasks: [],
+				validators: [
+					{
+						message: "请选择smi文件作为输入",
+						regex: "^.[s][m][i]$",
+					},
+				],
+				choices: [],
+				parameterGroup: "senior",
+			},
+			{
+				hidden: true,
+				id: "",
+				name: "hardware",
+				required: true,
+				defaultValue: '',
+				domType: "select",
+				classType: "STRING",
+				classTypeName: "String",
+				value: "",
+				description: "",
+				language: "",
+				languageVersion: "",
+				tags: [],
+				source: "string",
+				productId: "",
+				tasks: [],
+				validators: [
+					{
+						message: "请选择smi文件作为输入",
+						regex: "^.[s][m][i]$",
+					},
+				],
+				choices: [],
+				parameterGroup: "hardware",
+			},
 		],
 		edges: [],
 		isCheck: false,
@@ -132,88 +211,12 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 		}
 	}, [templateConfigInfo, taskId]);
 
-	// 输入参数
-	const inParameters: Array<IParameter> = useMemo(() => {
-		if (!taskInfo) {
-			return [];
-		} else {
-			return taskInfo.parameters.filter(
-				(parameter) => parameter.parameterGroup === "in"
-			);
-		}
-	}, [taskInfo]);
-	console.log(inParameters);
-
-	// 输出参数
-	const outParameters: Array<IParameter> = useMemo(() => {
-		if (!taskInfo) {
-			return [];
-		} else {
-			return taskInfo.parameters.filter(
-				(parameter) => parameter.parameterGroup === "out"
-			);
-		}
-	}, [taskInfo]);
-
-	// // 基础参数
-	// const basisParameters: Array<IParameter> = useMemo(() => {
-	// 	if (!taskInfo) {
-	// 		return [];
-	// 	} else {
-	// 		return taskInfo.parameters.filter(
-	// 			(parameter) => parameter.parameterGroup === "basis"
-	// 		);
-	// 	}
-	// }, [taskInfo]);
-
-	// // 高级选项
-	// const seniorParameters: Array<IParameter> = useMemo(() => {
-	// 	if (!taskInfo) {
-	// 		return [];
-	// 	} else {
-	// 		return taskInfo.parameters.filter(
-	// 			(parameter) => parameter.parameterGroup === "senior"
-	// 		);
-	// 	}
-	// }, [taskInfo]);
-
-	// // 硬件配置
-	// const hardwareParameters: Array<IParameter> = useMemo(() => {
-	// 	if (!taskInfo) {
-	// 		return [];
-	// 	} else {
-	// 		return taskInfo.parameters.filter(
-	// 			(parameter) => parameter.parameterGroup === "hardware"
-	// 		);
-	// 	}
-	// }, [taskInfo]);
-
-	const handleOpenFileSelect = (
-		taskId: string = "",
-		parameterName: string = ""
-	) => {
-		setFileSelectObject({
-			taskId,
-			parameterName,
-		});
-		setFileSelectOpen(true);
-	};
-
-	const handleParameterChange = (
-		e: any,
-		taskId: string,
-		parameterName: string
-	) => {
-		console.log(e.target.value, taskId, parameterName);
-		// setParameter(e.target.value, taskId, parameterName);
-	};
-
-	const renderInput = (parameter: IParameter) => {
+	const renderInput = useCallback((parameter: IParameter) => {
 		return (
 			<div>
 				{parameter.domType.toLowerCase() === "file" && (
 					<MyInput
-						value={parameter.value || ""}
+						value={parameter.defaultValue || ""}
 						InputProps={{
 							endAdornment: (
 								<img
@@ -232,7 +235,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 				)}
 				{parameter.domType.toLowerCase() === "path" && (
 					<MyInput
-						value={parameter.value || ""}
+						value={parameter.defaultValue || ""}
 						InputProps={{
 							endAdornment: (
 								<img
@@ -251,7 +254,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 				)}
 				{parameter.domType.toLowerCase() === "dataset" && (
 					<MyInput
-						value={parameter.value || ""}
+						value={parameter.defaultValue || ""}
 						InputProps={{
 							endAdornment: (
 								<img
@@ -270,7 +273,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 				)}
 				{parameter.domType.toLowerCase() === "input" && (
 					<MyInput
-						value={parameter.value || ""}
+						value={parameter.defaultValue || ""}
 						onChange={(e: any) =>
 							handleParameterChange(e, taskId, parameter.name || "")
 						}
@@ -282,7 +285,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 				)}
 				{parameter.domType.toLowerCase() === "select" && (
 					<MySelect
-						value={parameter.value}
+						value={parameter.defaultValue}
 						onChange={(e: any) =>
 							handleParameterChange(e, taskId, parameter.name || "")
 						}
@@ -294,7 +297,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 				)}
 				{parameter.domType.toLowerCase() === "multipleselect" && (
 					<MySelect
-						value={parameter.value}
+						value={parameter.defaultValue}
 						onChange={(e: any) =>
 							handleParameterChange(e, taskId, parameter.name || "")
 						}
@@ -307,7 +310,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 				)}
 				{parameter.domType.toLowerCase() === "radio" && (
 					<MyRadio
-						value={parameter.value}
+						value={parameter.defaultValue}
 						onChange={(e: any) =>
 							handleParameterChange(e, taskId, parameter.name || "")
 						}
@@ -318,7 +321,7 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 				)}
 				{parameter.domType.toLowerCase() === "checkbox" && (
 					<MyCheckBox
-						value={parameter.value}
+						value={parameter.defaultValue}
 						onChange={(e: any) =>
 							handleParameterChange(
 								{
@@ -342,8 +345,153 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 				)}
 			</div>
 		);
+	},[]);
+
+	// 输入参数
+	const inParameters: Array<IParameter> = useMemo(() => {
+		if (!taskInfo) {
+			return [];
+		} else {
+			return taskInfo.parameters.filter(
+				(parameter) => parameter.parameterGroup === "in"
+			);
+		}
+	}, [taskInfo]);
+	console.log(inParameters);
+
+	// 输出参数
+	const outParameters: Array<IParameter> = useMemo(() => {
+		if (!taskInfo) {
+			return [];
+		} else {
+			return taskInfo.parameters.filter(
+				(parameter) => parameter.parameterGroup === "out"
+			);
+		}
+	}, [taskInfo]);
+
+	// 基础参数
+	const basisParameters: Array<IParameter> = useMemo(() => {
+		if (!taskInfo) {
+			return [];
+		} else {
+			return taskInfo.parameters.filter(
+				(parameter) => parameter.parameterGroup === "basis"
+			);
+		}
+	}, [taskInfo]);
+
+	// 高级选项
+	const seniorParameters: Array<IParameter> = useMemo(() => {
+		if (!taskInfo) {
+			return [];
+		} else {
+			return taskInfo.parameters.filter(
+				(parameter) => parameter.parameterGroup === "senior"
+			);
+		}
+	}, [taskInfo]);
+
+	// 硬件配置
+	const hardwareParameters: Array<IParameter> = useMemo(() => {
+		if (!taskInfo) {
+			return [];
+		} else {
+			return taskInfo.parameters.filter(
+				(parameter) => parameter.parameterGroup === "hardware"
+			);
+		}
+	}, [taskInfo]);
+
+	const randerParameters = useCallback((parameters: Array<IParameter>)=>{
+		return (
+			<div className={styles.parameters}>
+				{parameters.map((parameter, parameterIndex) => {
+					return (
+						<div
+							className={styles.parameter}
+							key={parameter.id || "" + parameterIndex}
+						>
+							<div
+								className={classNames({
+									[styles.parameterTitle]: true,
+									[styles.required]: parameter.required,
+								})}
+							>
+								{parameter.name}
+								<span className={styles.parameterDataType}>
+									{parameter.classTypeName}
+								</span>
+							</div>
+							<div className={styles.parameterContent}>
+								{renderInput(parameter)}
+							</div>
+						</div>
+					);
+				})}
+			</div>
+		)
+	},[renderInput])
+
+	const handleOpenFileSelect = (
+		taskId: string = "",
+		parameterName: string = ""
+	) => {
+		setFileSelectObject({
+			taskId,
+			parameterName,
+		});
+		setFileSelectOpen(true);
 	};
 
+	const handleParameterChange = (
+		e: any,
+		taskId: string,
+		parameterName: string
+	) => {
+		console.log(e.target.value, taskId, parameterName);
+		// setParameter(e.target.value, taskId, parameterName);
+	};
+
+	// 参数组tabs
+	const paramsTabList = useMemo(()=>{
+		return [
+			{
+				label: "基础参数",
+				value: "basis",
+				component: randerParameters(basisParameters),
+				disabled: basisParameters.length === 0
+			},
+			{
+				label: "高级选项",
+				value: "senior",
+				component: randerParameters(seniorParameters),
+				disabled: seniorParameters.length === 0
+			},
+			{
+				label: "硬件配置",
+				value: "hardware",
+				component: randerParameters(hardwareParameters),
+				disabled: hardwareParameters.length === 0
+			}
+		]
+	}, [basisParameters, seniorParameters, hardwareParameters, randerParameters])
+
+	// 激活的参数组tab
+	const activeParamsTab = useMemo(()=>{
+		if (basisParameters.length !== 0) {
+			return 'basis'
+		} else if (seniorParameters.length !== 0) {
+			return 'senior'
+		} else if (hardwareParameters.length !== 0) {
+			return 'hardware'
+		} else {
+			return ''
+		}
+	}, [basisParameters, seniorParameters, hardwareParameters])
+
+	
+
 	return (
 		<div className={styles.parameterSetting}>
 			{taskInfo && (
@@ -451,20 +599,25 @@ const ParameterSetting = (props: IParameterSettingProps) => {
 			)}
 			{
 				taskInfo && (
-					<div>
+					<div className={styles.paramsGroup}>
 						<div className={styles.paramsTitle}>
-						参数组
-						<Tooltip
-							title="当某个参数项为启用状态时，代表该参数将由模板使用者在使用的时候填写赋值；当为关闭状态时，代表该参数不需要使用者来填写赋值。"
-							placement="right"
-						>
-							<img
-								className={styles.paramsTitleDesc}
-								src={questionMark}
-								alt=""
-							/>
-						</Tooltip>
-					</div>
+							参数组
+							<Tooltip
+								title="当某个参数项为启用状态时，代表该参数将由模板使用者在使用的时候填写赋值；当为关闭状态时，代表该参数不需要使用者来填写赋值。"
+								placement="right"
+							>
+								<img
+									className={styles.paramsTitleDesc}
+									src={questionMark}
+									alt=""
+								/>
+							</Tooltip>
+						</div>
+						<Tabs
+							tabList={paramsTabList}
+							defaultValue={activeParamsTab}
+							allowNullValue={true}
+						/>
 					</div>
 				)
 			}