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

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

 .RadiosBox {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border: 1px solid #e6e8eb;
-  border-radius: 4px;
-  background-color: #e6e8eb;
-  cursor: pointer;
-  height: 32px;
-  box-sizing: border-box;
-  padding: 2px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border: 1px solid #e6e8eb;
+	border-radius: 4px;
+	background-color: #e6e8eb;
+	cursor: pointer;
+	height: 32px;
+	box-sizing: border-box;
+	padding: 2px;
 }
 .radio {
-  height: 28px;
-  box-sizing: border-box;
-  font-size: 14px;
-  color: #565c66;
-  border-radius: 4px;
-  line-height: 20px;
-  padding: 3px 18px;
-  background-color: #e6e8eb;
-  display: flex;
-  align-items: center;
+	height: 28px;
+	box-sizing: border-box;
+	font-size: 14px;
+	color: #565c66;
+	border-radius: 4px;
+	line-height: 20px;
+	padding: 3px 18px;
+	background-color: #e6e8eb;
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 .radioActive {
-  color: #1370ff;
-  background-color: #fff;
-  border: 1px solid #e6e8eb;
+	color: #1370ff;
+	background-color: #fff;
+	border: 1px solid #e6e8eb;
 }

src/components/CommonComponents/RadioGroupOfButtonStyle/index.tsx

@@ -3,37 +3,41 @@ import classnames from "classnames";
 import style from "./index.module.css";
 
 type radioOption = {
-  value: string;
-  label: string;
+	value: string;
+	label: string;
 };
 
 type IRadioGroupOfButtonStyleProps = {
-  radioOptions: Array<radioOption>;
-  value: string;
-  handleRadio: any;
+	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}>
-      {radioOptions.map((options) => {
-        return (
-          <div
-            key={options.value}
-            className={classnames({
-              [style.radio]: true,
-              [style.radioActive]: value === options.value,
-            })}
-            onClick={() => handleRadio(options.value)}
-          >
-            {options.label}
-          </div>
-        );
-      })}
-    </div>
-  );
+	return (
+		<div className={style.RadiosBox} style={RadiosBoxStyle}>
+			{radioOptions.map((options) => {
+				return (
+					<div
+						key={options.value}
+						className={classnames({
+							[style.radio]: true,
+							[style.radioActive]: value === options.value,
+						})}
+						onClick={() => handleRadio(options.value)}
+						style={radioStyle}
+					>
+						{options.label}
+					</div>
+				);
+			})}
+		</div>
+	);
 };
 
 export default RadioGroupOfButtonStyle;

src/views/Project/ProjectJobDetail/index.tsx

@@ -73,22 +73,22 @@ const ProjectSubmitWork = observer(() => {
 
 	const { name, state } = workFlowJobInfo || {};
 
-  /** 获取模版数据 */
-  const { run } = useMyRequest(fetchWorkFlowJob, {
-    pollingInterval: 1000 * 60,
-    pollingWhenHidden: false,
-    onSuccess: (res: IResponse<ITaskInfo>) => {
-      getOutouts(res.data.outputs);
-      setWorkFlowJobInfo(res.data);
-    },
-  });
+	/** 获取模版数据 */
+	const { run } = useMyRequest(fetchWorkFlowJob, {
+		pollingInterval: 1000 * 60,
+		pollingWhenHidden: false,
+		onSuccess: (res: IResponse<ITaskInfo>) => {
+			getOutouts(res.data.outputs);
+			setWorkFlowJobInfo(res.data);
+		},
+	});
 
-  useEffect(() => {
-    const locationInfo: any = location?.state;
-    run({
-      id: locationInfo.taskId,
-    });
-  }, [location?.state, run]);
+	useEffect(() => {
+		const locationInfo: any = location?.state;
+		run({
+			id: locationInfo.taskId,
+		});
+	}, [location?.state, run]);
 
 	const { run: getworkFlowTaskInfoRun } = useMyRequest(getworkFlowTaskInfo, {
 		onSuccess: (res) => {
@@ -96,34 +96,35 @@ const ProjectSubmitWork = observer(() => {
 		},
 	});
 
-  const goToProjectData = (path: string) => {
-    path = path.slice(13);
-    if (path) {
-      navigate(`/product/cadd/projectData`, {
-        state: { pathName: path },
-      });
-    } else {
-      navigate(`/product/cadd/projectData`, {
-        state: { pathName: "/" },
-      });
-    }
-  };
+	// 前往数据管理页面
+	const goToProjectData = (path: string) => {
+		path = path.slice(13);
+		if (path) {
+			navigate(`/product/cadd/projectData`, {
+				state: { pathName: path },
+			});
+		} else {
+			navigate(`/product/cadd/projectData`, {
+				state: { pathName: "/" },
+			});
+		}
+	};
 
-  // 通过文件路径获取文件所在文件夹路径  如 输入 /home/cloudam/task_a.out  输出/home/cloudam/
-  const getFolderPath = (path: string) => {
-    const lastIndex = path.lastIndexOf("/");
-    if (lastIndex !== -1) {
-      path = path.slice(0, lastIndex + 1);
-    }
-    return path;
-  };
+	// 通过文件路径获取文件所在文件夹路径  如 输入 /home/cloudam/task_a.out  输出/home/cloudam/
+	const getFolderPath = (path: string) => {
+		const lastIndex = path.lastIndexOf("/");
+		if (lastIndex !== -1) {
+			path = path.slice(0, lastIndex + 1);
+		}
+		return path;
+	};
 
-  /** 返回事件 */
-  const onBack = useCallback(() => {
-    navigate("/product/cadd/projectWorkbench", {
-      state: { type: "workbenchList" },
-    });
-  }, [navigate]);
+	/** 返回事件 */
+	const onBack = useCallback(() => {
+		navigate("/product/cadd/projectWorkbench", {
+			state: { type: "workbenchList" },
+		});
+	}, [navigate]);
 
 	const outputPathTransform = (path: string) => {
 		path = path.slice(13);
@@ -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
@@ -510,16 +513,16 @@ const ProjectSubmitWork = observer(() => {
 												{patchInfo?.children.map((item: any, index: number) => {
 													return (
 														<div
-                              key={index}
-                              className={classNames({
-                                [styles.option]: true,
-                                [styles.optionActive]:
-                                  activeFlowIndex === index,
-                              })}
-                              onClick={() => setActiveFlowIndex(index)}
-                            >
-                              {item.title}
-                            </div>
+															key={index}
+															className={classNames({
+																[styles.option]: true,
+																[styles.optionActive]:
+																	activeFlowIndex === index,
+															})}
+															onClick={() => setActiveFlowIndex(index)}
+														>
+															{item.title}
+														</div>
 													);
 												})}
 											</div>

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,8 +77,30 @@ const WorkFlowEdit = () => {
 				</div>
 			</div>
 			<div className={styles.swContent}>
-				<div className={styles.swFormBox}>
-					<OperatorList />
+				<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>