feat: 增加算子列表、参数设置切换

src/components/CommonComponents/RadioGroupOfButtonStyle/index.module.css

@@ -19,8 +19,10 @@
 	line-height: 20px;
 	padding: 3px 18px;
 	background-color: #e6e8eb;
+	flex: 1;
 	display: flex;
 	align-items: center;
+	justify-content: center;
 }
 .radioActive {
 	color: #1370ff;

src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx

@@ -11,13 +11,16 @@ type IRadioGroupOfButtonStyleProps = {
 	radioOptions: Array<radioOption>;
 	value: string;
 	handleRadio: any;
+	RadiosBoxStyle?: object;
+	radioStyle?: object;
 };
 
 const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
-  const { radioOptions, value, handleRadio } = props;
+	const { radioOptions, value, handleRadio, RadiosBoxStyle, radioStyle } =
+		props;
 
 	return (
-    <div className={style.RadiosBox}>
+		<div className={style.RadiosBox} style={RadiosBoxStyle}>
 			{radioOptions.map((options) => {
 				return (
 					<div
@@ -27,6 +30,7 @@ const RadioGroupOfButtonStyle = (props: IRadioGroupOfButtonStyleProps) => {
 							[style.radioActive]: value === options.value,
 						})}
 						onClick={() => handleRadio(options.value)}
+						style={radioStyle}
 					>
 						{options.label}
 					</div>

src/views/Project/ProjectJobDetail/index.tsx

@@ -96,6 +96,7 @@ const ProjectSubmitWork = observer(() => {
 		},
 	});
 
+	// 前往数据管理页面
 	const goToProjectData = (path: string) => {
 		path = path.slice(13);
 		if (path) {
@@ -339,7 +340,9 @@ const ProjectSubmitWork = observer(() => {
 												<div key={index} className={styles.outputLi}>
 													<MyPopconfirm
 														title="即将跳转至项目数据内该任务的结果目录，确认继续吗？"
-														onConfirm={() => goToProjectData(getFolderPath(item.path))}
+														onConfirm={() =>
+															goToProjectData(getFolderPath(item.path))
+														}
 													>
 														<div className={styles.outputLiLeft}>
 															<img

src/views/WorkFlowEdit/index.module.css

@@ -40,3 +40,7 @@
 	flex: 1;
 	height: calc(100vh - 56px);
 }
+.radiosBox {
+	background-color: #fff;
+	padding: 24px;
+}

src/views/WorkFlowEdit/index.tsx

@@ -12,11 +12,24 @@ import IconButton from "@mui/material/IconButton";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import MyPopconfirm from "@/components/mui/MyPopconfirm";
+import RadioGroupOfButtonStyle from "@/components/CommonComponents/RadioGroupOfButtonStyle";
 import ButtonComponent from "@/components/mui/Button";
 import { ITemplateConfig } from "../Project/ProjectSubmitWork/interface";
 import OperatorList from "./components/OperatorList";
 
 import styles from "./index.module.css";
+import { style } from "@mui/system";
+
+const radioOptions = [
+	{
+		value: "list",
+		label: "算子列表",
+	},
+	{
+		value: "setting",
+		label: "参数设置",
+	},
+];
 
 const WorkFlowEdit = () => {
 	const [templateConfigInfo, setTemplateConfigInfo] =
@@ -24,6 +37,8 @@ const WorkFlowEdit = () => {
 	const location: any = useLocation();
 	const navigate = useNavigate();
 
+	const [leftContentType, setLeftContentType] = useState("list");
+
 	return (
 		<div className={styles.swBox}>
 			<div className={styles.swHeader}>
@@ -62,9 +77,31 @@ const WorkFlowEdit = () => {
 				</div>
 			</div>
 			<div className={styles.swContent}>
+				<div>
+					<div className={styles.radiosBox}>
+						<RadioGroupOfButtonStyle
+							radioOptions={radioOptions}
+							value={leftContentType}
+							handleRadio={setLeftContentType}
+							RadiosBoxStyle={{
+								height: "36px",
+								padding: "3px",
+							}}
+							radioStyle={{
+								fontSize: "16px",
+								height: "30px",
+							}}
+						></RadioGroupOfButtonStyle>
+					</div>
+					{leftContentType === "list" && (
 						<div className={styles.swFormBox}>
 							<OperatorList />
 						</div>
+					)}
+					{leftContentType !== "list" && (
+						<div className={styles.swFormBox}>123</div>
+					)}
+				</div>
 				<div className={styles.swFlowBox}>右侧</div>
 			</div>
 		</div>