fix: 算子列表ui开发

b9a6c048 · 吴永生#A02208 · 91794fa1 · b9a6c048 · b9a6c048 · b9a6c048
Commit b9a6c048 authored Jul 06, 2022 by 吴永生#A02208
6 changed files
--- a/src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx
+++ b/src/views/Project/ProjectWorkbench/workbenchTemplate/index.tsx
@@ -2,7 +2,7 @@
 * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
 * @Date: 2022-05-31 10:18:13
 * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-06 17:32:50
+ * @LastEditTime: 2022-07-06 21:25:00
 * @FilePath: /bkunyun/src/views/Project/ProjectSetting/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

--- a/src/views/WorkFlowEdit/components/OperatorList/index.module.css
+++ b/src/views/WorkFlowEdit/components/OperatorList/index.module.css
@@ -2,8 +2,11 @@
 	background-color: #fff;
 	border-radius: 4px;
 	cursor: grab;
-	padding: 16px 0;
-	border-bottom: 1px solid #f0f2f5;
+	padding: 16px 16px 0 24px;
+}
+
+.dragBox {
+	background-color: #f5f6f7;
 }
 .operatorItemTitle {
 	user-select: none;
@@ -29,7 +32,22 @@
 	padding: 2px 8px;
 }

-.footerBx {
+.searchBox {
+	padding: 0 24px 16px 24px;
+}
+
+.footerBox {
 	display: flex;
 	align-items: center;
+	padding-bottom: 16px;
+	border-bottom: 1px solid #f0f2f5;
+}
+
+.operatorListBox {
+	height: 100%;
+}
+
+.listBox {
+	overflow-y: scroll;
+	height: calc(100% - 48px);
 }
--- a/src/views/WorkFlowEdit/components/OperatorList/index.tsx
+++ b/src/views/WorkFlowEdit/components/OperatorList/index.tsx
-import { IOperatorItemProps } from "./interface";
 import { OutlinedInput } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
+import classNames from "classnames";
+import { useCallback, useState } from "react";
+
+import { mockData } from "./mock";
+import { IOperatorItemProps } from "./interface";

 import styles from "./index.module.css";

@@ -8,20 +12,41 @@ import styles from "./index.module.css";
 * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
 * @Date: 2022-07-06 15:16:01
 * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-06 16:27:16
+ * @LastEditTime: 2022-07-06 21:23:19
 * @FilePath: /bkunyun/src/views/WorkFlowEdit/components/OperatorList/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
 const OperatorItem = (props: IOperatorItemProps) => {
 	const { info } = props;
+	const [isDragStyle, setIsDragStyle] = useState<boolean>(false);
+
+	/** 拖拽开始 */
+	const onDragStart = useCallback(() => {
+		setIsDragStyle(true);
+	}, []);
+
+	/** 拖拽结束 */
+	const onDragEnd = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+		console.log(e);
+		setIsDragStyle(false);
+	}, []);
+
 	return (
-		<div className={styles.operatorItemBox}>
+		<div
+			className={classNames({
+				[styles.operatorItemBox]: true,
+				[styles.dragBox]: isDragStyle,
+			})}
+			draggable={true}
+			onDragStart={onDragStart}
+			onDragEnd={onDragEnd}
+		>
 			<h2 className={styles.operatorItemTitle}>说什么呢啊</h2>
 			<div className={styles.operatorItemText}>
 				STU utility
 				是一个R-packa标处理目标处理，目标处理目标处理标处理目标处理后期委屈好委屈农，博啊发布丢我被欺安度切换阿斯顿几切换，i的亲戚我好奇你eqeqeweqeqeeqeqeqeqeq。
 			</div>
-			<div className={styles.footerBx}>
+			<div className={styles.footerBox}>
 				<span
 					className={styles.labelBox}
 					style={{
@@ -31,6 +56,15 @@ const OperatorItem = (props: IOperatorItemProps) => {
 				>
 					公共平台
 				</span>
+			</div>
+		</div>
+	);
+};
+
+const OperatorList = () => {
+	return (
+		<div className={styles.operatorListBox}>
+			<div className={styles.searchBox}>
 				<OutlinedInput
 					onChange={(e: any) => {
 						console.log(e.target.value);
@@ -38,23 +72,17 @@ const OperatorItem = (props: IOperatorItemProps) => {
 					// value={templateName}
 					placeholder="输入关键词搜索"
 					size="small"
-					sx={{ flex: 1, height: 32 }}
+					sx={{ height: 32, width: "100%" }}
 					endAdornment={<SearchIcon style={{ color: "#8A9099" }} />}
 				/>
 			</div>
+			<div className={styles.listBox}>
+				{mockData.map((item) => {
+					return <OperatorItem key={item.id} info={item} />;
+				})}
+			</div>
 		</div>
 	);
 };

-const OperatorList = () => {
-	const arr = [222, 3333, 339];
-	return (
-		<>
-			{arr.map((item) => {
-				return <OperatorItem key={item} info={item} />;
-			})}
-		</>
-	);
-};
-
 export default OperatorList;
--- a/src/views/WorkFlowEdit/components/OperatorList/mock.ts
+++ b/src/views/WorkFlowEdit/components/OperatorList/mock.ts
+export const mockData = [
+  {
+    "id": "批式Node ID (后端定义)",
+    "title": "Docking(Vina)",
+    "description": "这是一段Docking(Vina)算子的描述",
+    "version": "1.0.0",
+    "allVersions": ["1.0.0"],
+    "updateTime": "2022/07/05",
+    "tags": ["公共算子"],
+    "position": {
+      "x": null,
+      "y": null
+    },
+    "type": "BATCH",
+    "parentNode": "",
+    "data": {
+      "status": "wait",
+      "parameters": [
+        {
+          "id": "",
+          "show": true,
+          "name": "smi_in",
+          "required": true,
+          "domType": "fileSelect",
+          "dataType": "string",
+          "value": "",
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请选择smi文件作为输入",
+              "regex": "^.[s][m][i]$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "in"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "receptor_in",
+          "required": true,
+          "domType": "fileSelect",
+          "dataType": "string",
+          "value": "",
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请选择pdb文件作为输入",
+              "regex": "^.[p][d][b]$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "in"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "dataset_out",
+          "required": true,
+          "domType": "input",
+          "dataType": "dataset",
+          "value": "",
+          "description": "",
+          "validators": [
+            {
+              "helpText": "仅支持中文、英文、数据以及下划线",
+              "regex": "^[\u4E00-\u9FA5A-Za-z0-9_]+$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "out"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "pdb_out",
+          "required": true,
+          "domType": "input",
+          "dataType": "file",
+          "value": "",
+          "description": "",
+          "validators": [
+            {
+              "helpText": "仅支持中文、英文、数据以及下划线",
+              "regex": "^[\u4E00-\u9FA5A-Za-z0-9_]+$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "out"
+        }
+      ]
+    },
+    "edges": []
+  },
+  {
+    "id": "流式Node ID 1 (后端定义)",
+    "title": "RecordFileReader",
+    "description": "这是一段RecordFileReader算子的描述",
+    "version": "1.0.0",
+    "allVersions": ["1.0.0"],
+    "updateTime": "2022/07/05",
+    "tags": ["公共算子"],
+    "position": {
+      "x": 0,
+      "y": 0
+    },
+    "type": "FLOW",
+    "parentNode": "批式Node ID",
+    "data": {
+      "status": "wait",
+      "parameters": [
+        {
+          "id": "",
+          "show": true,
+          "name": "raw",
+          "required": false,
+          "domType": "radio",
+          "dataType": "boolean",
+          "value": false,
+          "description": "",
+          "validators": [],
+          "choices": [
+            {
+              "key": "true",
+              "value": true
+            },
+            {
+              "key": "false",
+              "value": false
+            }
+          ],
+          "parameterGroup": "basis"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "sep",
+          "required": false,
+          "domType": "input",
+          "dataType": "string",
+          "value": "",
+          "description": "",
+          "validators": [],
+          "choices": [],
+          "parameterGroup": "basis"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "contains_sep",
+          "required": false,
+          "domType": "radio",
+          "dataType": "boolean",
+          "value": false,
+          "description": "",
+          "validators": [],
+          "choices": [
+            {
+              "key": "true",
+              "value": true
+            },
+            {
+              "key": "false",
+              "value": false
+            }
+          ],
+          "parameterGroup": "basis"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "encoding",
+          "required": false,
+          "domType": "input",
+          "dataType": "string",
+          "value": "UTF-8",
+          "description": "",
+          "validators": [],
+          "choices": [],
+          "parameterGroup": "senior"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "chunk_size",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 1000,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "senior"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "compression",
+          "required": false,
+          "domType": "input",
+          "dataType": "string",
+          "value": "",
+          "description": "",
+          "validators": [],
+          "choices": [],
+          "parameterGroup": "senior"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "cpus",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 1,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "hardware"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "ntasks",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 1,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "hardware"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "partition",
+          "required": false,
+          "domType": "input",
+          "dataType": "string",
+          "value": "c-4-1",
+          "description": "",
+          "validators": "",
+          "choices": [],
+          "parameterGroup": "hardware"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "parallelism",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 1,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "hardware"
+        }
+      ]
+    },
+    "edges": [
+      {
+        "id": "",
+        "source": "流式Node ID 1",
+        "target": "流式Node ID 2"
+      }
+    ]
+  },
+  {
+    "id": "流式Node ID 2 (后端定义)",
+    "title": "Standard",
+    "description": "这是一段Standard算子的描述",
+    "version": "1.0.0",
+    "allVersions": ["1.0.0"],
+    "updateTime": "2022/07/05",
+    "tags": ["公共算子"],
+    "position": {
+      "x": 0,
+      "y": 0
+    },
+    "type": "FLOW",
+    "parentNode": "批式Node ID",
+    "data": {
+      "status": "wait",
+      "parameters": [
+        {
+          "id": "",
+          "show": false,
+          "name": "cpus",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 1,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "hardware"
+        },
+        {
+          "id": "",
+          "name": "ntasks",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 4,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "hardware"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "partition",
+          "required": false,
+          "domType": "input",
+          "dataType": "string",
+          "value": "c-4-1",
+          "description": "",
+          "validators": "",
+          "choices": [],
+          "parameterGroup": "hardware"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "parallelism",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 6,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "hardware"
+        }
+      ]
+    },
+    "edges": [
+      {
+        "id": "",
+        "source": "流式Node ID 2",
+        "target": "流式Node ID 3"
+      }
+    ]
+  },
+  {
+    "id": "流式Node ID 3 (后端定义)",
+    "title": "Docking",
+    "description": "这是一段Docking算子的描述",
+    "version": "1.0.0",
+    "allVersions": ["1.0.0"],
+    "updateTime": "2022/07/05",
+    "tags": ["公共算子"],
+    "position": {
+      "x": 0,
+      "y": 0
+    },
+    "type": "FLOW",
+    "parentNode": "批式Node ID",
+    "data": {
+      "status": "wait",
+      "parameters": [
+        {
+          "id": "",
+          "show": true,
+          "name": "core_num",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 1,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "basis"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "centerX",
+          "required": true,
+          "domType": "input",
+          "dataType": "int",
+          "value": "",
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "basis"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "centerY",
+          "required": true,
+          "domType": "input",
+          "dataType": "int",
+          "value": "",
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "basis"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "centerZ",
+          "required": true,
+          "domType": "input",
+          "dataType": "int",
+          "value": "",
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "basis"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "boxSizeX",
+          "required": true,
+          "domType": "input",
+          "dataType": "int",
+          "value": "",
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "basis"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "boxSizeY",
+          "required": true,
+          "domType": "input",
+          "dataType": "int",
+          "value": "",
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "basis"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "boxSizeZ",
+          "required": true,
+          "domType": "input",
+          "dataType": "int",
+          "value": "",
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "basis"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "poses_num",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 9,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "senior"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "verbosity",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 1,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "senior"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "exhaustiveness",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 1,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "senior"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "cpus",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 1,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "hardware"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "ntasks",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 4,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "hardware"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "partition",
+          "required": false,
+          "domType": "input",
+          "dataType": "string",
+          "value": "c-4-1",
+          "description": "",
+          "validators": [],
+          "choices": [],
+          "parameterGroup": "hardware"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "parallelism",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 6,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "hardware"
+        }
+      ]
+    },
+    "edges": [
+      {
+        "id": "",
+        "source": "流式Node ID 3",
+        "target": "流式Node ID 4"
+      },
+      {
+        "id": "",
+        "source": "流式Node ID 3",
+        "target": "流式Node ID 5"
+      }
+    ]
+  },
+  {
+    "id": "流式Node ID 4 (后端定义)",
+    "title": "Hitlist",
+    "description": "这是一段Hitlist算子的描述",
+    "version": "1.0.0",
+    "allVersions": ["1.0.0"],
+    "updateTime": "2022/07/05",
+    "tags": ["公共算子"],
+    "position": {
+      "x": 0,
+      "y": 0
+    },
+    "type": "FLOW",
+    "parentNode": "批式Node ID",
+    "data": {
+      "status": "wait",
+      "parameters": [
+        {
+          "id": "",
+          "show": false,
+          "name": "cpus",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 1,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "hardware"
+        },
+        {
+          "id": "",
+          "name": "ntasks",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 1,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "hardware"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "partition",
+          "required": false,
+          "domType": "input",
+          "dataType": "string",
+          "value": "c-4-1",
+          "description": "",
+          "validators": "",
+          "choices": [],
+          "parameterGroup": "hardware"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "parallelism",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 1,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "hardware"
+        }
+      ]
+    },
+    "edges": [
+      {
+        "id": "",
+        "source": "流式Node ID 4",
+        "target": "流式Node ID 6"
+      }
+    ]
+  },
+  {
+    "id": "流式Node ID 5 (后端定义)",
+    "title": "DatasetWritwer",
+    "description": "这是一段DatasetWritwer算子的描述",
+    "version": "1.0.0",
+    "allVersions": ["1.0.0"],
+    "updateTime": "2022/07/05",
+    "tags": ["公共算子"],
+    "position": {
+      "x": 0,
+      "y": 0
+    },
+    "type": "FLOW",
+    "parentNode": "批式Node ID",
+    "data": {
+      "status": "wait",
+      "parameters": [
+        {
+          "id": "",
+          "show": true,
+          "name": "compression",
+          "required": false,
+          "domType": "input",
+          "dataType": "string",
+          "value": "snappy",
+          "description": "",
+          "validators": [],
+          "choices": [],
+          "parameterGroup": "senior"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "chunk_size",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 100,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "senior"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "cpus",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 1,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "hardware"
+        },
+        {
+          "id": "",
+          "name": "ntasks",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 1,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "hardware"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "partition",
+          "required": false,
+          "domType": "input",
+          "dataType": "string",
+          "value": "c-4-1",
+          "description": "",
+          "validators": "",
+          "choices": [],
+          "parameterGroup": "hardware"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "parallelism",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 1,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "hardware"
+        }
+      ]
+    },
+    "edges": []
+  },
+  {
+    "id": "流式Node ID 6 (后端定义)",
+    "title": "RecordFileWriter",
+    "description": "这是一段RecordFileWriter算子的描述",
+    "version": "1.0.0",
+    "allVersions": ["1.0.0"],
+    "updateTime": "2022/07/05",
+    "tags": ["公共算子"],
+    "position": {
+      "x": 0,
+      "y": 0
+    },
+    "type": "FLOW",
+    "parentNode": "批式Node ID",
+    "data": {
+      "status": "wait",
+      "parameters": [
+        {
+          "id": "",
+          "show": true,
+          "name": "many",
+          "required": false,
+          "domType": "radio",
+          "dataType": "boolean",
+          "value": "false",
+          "description": "",
+          "validators": [],
+          "choices": [
+            {
+              "key": "true",
+              "value": "true"
+            },
+            {
+              "key": "false",
+              "value": "false"
+            }
+          ],
+          "parameterGroup": "basis"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "compression",
+          "required": false,
+          "domType": "input",
+          "dataType": "string",
+          "value": "snappy",
+          "description": "",
+          "validators": [],
+          "choices": [],
+          "parameterGroup": "senior"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "chunk_size",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 100,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "senior"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "suffix",
+          "required": false,
+          "domType": "input",
+          "dataType": "string",
+          "value": ".txt",
+          "description": "",
+          "validators": [],
+          "choices": [],
+          "parameterGroup": "senior"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "cpus",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 1,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "hardware"
+        },
+        {
+          "id": "",
+          "name": "ntasks",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 1,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "hardware"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "partition",
+          "required": false,
+          "domType": "input",
+          "dataType": "string",
+          "value": "c-4-1",
+          "description": "",
+          "validators": "",
+          "choices": [],
+          "parameterGroup": "hardware"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "parallelism",
+          "required": false,
+          "domType": "input",
+          "dataType": "int",
+          "value": 1,
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请输入非零的正整数",
+              "regex": "^[1-9]\\d*$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "hardware"
+        }
+      ]
+    },
+    "edges": []
+  },
+  {
+    "id": "批式Node ID (后端定义)",
+    "title": "gromaxRun",
+    "description": "这是一段gromaxRun算子的描述",
+    "version": "1.0.0",
+    "allVersions": ["1.0.0"],
+    "updateTime": "2022/07/05",
+    "tags": ["公共算子"],
+    "position": {
+      "x": null,
+      "y": null
+    },
+    "type": "BATCH",
+    "parentNode": "",
+    "data": {
+      "status": "wait",
+      "parameters": [
+        {
+          "id": "",
+          "show": true,
+          "name": "tpr_path",
+          "required": true,
+          "domType": "pathSelect",
+          "dataType": "string",
+          "value": "",
+          "description": "",
+          "validators": [],
+          "choices": [],
+          "parameterGroup": "in"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "pdb_in",
+          "required": true,
+          "domType": "fileSelect",
+          "dataType": "file",
+          "value": "",
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请选择pdb文件作为输入",
+              "regex": "^.[p][d][b]$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "in"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "result_out",
+          "required": true,
+          "domType": "input",
+          "dataType": "string",
+          "value": "fep",
+          "description": "",
+          "validators": [
+            {
+              "helpText": "仅支持中文、英文、数据以及下划线",
+              "regex": "^[\u4E00-\u9FA5A-Za-z0-9_]+$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "out"
+        }
+      ]
+    },
+    "edges": []
+  },
+  {
+    "id": "批式Node ID (后端定义)",
+    "title": "pdbToTpr",
+    "description": "这是一段pdbToTpr算子的描述",
+    "version": "1.0.0",
+    "allVersions": ["1.0.0"],
+    "updateTime": "2022/07/05",
+    "tags": ["公共算子"],
+    "position": {
+      "x": null,
+      "y": null
+    },
+    "type": "BATCH",
+    "parentNode": "",
+    "data": {
+      "status": "wait",
+      "parameters": [
+        {
+          "id": "",
+          "show": true,
+          "name": "pdb_in",
+          "required": true,
+          "domType": "fileSelect",
+          "dataType": "file",
+          "value": "",
+          "description": "",
+          "validators": [
+            {
+              "helpText": "请选择pdb文件作为输入",
+              "regex": "^.[p][d][b]$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "in"
+        },
+        {
+          "id": "",
+          "show": true,
+          "name": "pdb_out",
+          "required": true,
+          "domType": "input",
+          "dataType": "file",
+          "value": "",
+          "description": "",
+          "validators": [
+            {
+              "helpText": "仅支持中文、英文、数据以及下划线",
+              "regex": "^[\u4E00-\u9FA5A-Za-z0-9_]+$"
+            }
+          ],
+          "choices": [],
+          "parameterGroup": "out"
+        },
+        {
+          "id": "",
+          "show": false,
+          "name": "tpr_path",
+          "required": true,
+          "domType": "pathSelect",
+          "dataType": "string",
+          "value": "",
+          "description": "",
+          "validators": [],
+          "choices": [],
+          "parameterGroup": "out"
+        }
+      ]
+    },
+    "edges": []
+  }
+
+]
--- a/src/views/WorkFlowEdit/index.module.css
+++ b/src/views/WorkFlowEdit/index.module.css
 .swBox {
-    position: fixed;
-    z-index: 1000;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: RGBA(247, 248, 250, 1);
-    overflow-y: scroll;
-  }
-  .swHeader {
-    z-index: 1001;
-    position: sticky;
-    top: 0;
-    height: 56px;
-    background-color: #fff;
-    box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 24px;
-  }
-  .swHeaderLeft {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-  }
-  .swContent {
-    display: flex;
-    height: calc(100vh - 56px);
-  }
-  .swFormBox {
-    background-color: #fff;
-    border-right: 1xp solid rgba(235, 237, 240, 1);
-    width: 360px;
-    overflow-y: scroll;
-    box-sizing: border-box;
-    padding: 24px;
-  }
-  .swFlowBox {
-    flex: 1;
-    height: calc(100vh - 56px);
-  }
-  
\ No newline at end of file
+	position: fixed;
+	z-index: 1000;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	background-color: RGBA(247, 248, 250, 1);
+	overflow-y: scroll;
+}
+.swHeader {
+	z-index: 1001;
+	position: sticky;
+	top: 0;
+	height: 56px;
+	background-color: #fff;
+	box-shadow: 0px 3px 10px 0px rgba(0, 24, 57, 0.04);
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0 24px;
+}
+.swHeaderLeft {
+	display: flex;
+	justify-content: flex-start;
+	align-items: center;
+}
+.swContent {
+	display: flex;
+	height: calc(100vh - 56px);
+}
+.swFormBox {
+	background-color: #fff;
+	border-right: 1xp solid rgba(235, 237, 240, 1);
+	width: 360px;
+	/* overflow-y: scroll; */
+	box-sizing: border-box;
+}
+.swFlowBox {
+	flex: 1;
+	height: calc(100vh - 56px);
+}
--- a/src/views/WorkFlowEdit/index.tsx
+++ b/src/views/WorkFlowEdit/index.tsx
@@ -2,11 +2,11 @@
 * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
 * @Date: 2022-06-21 20:03:56
 * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
- * @LastEditTime: 2022-07-06 15:21:55
+ * @LastEditTime: 2022-07-06 18:35:24
 * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
-import React, {  useState } from "react";
+import React, { useState } from "react";
 import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
 import IconButton from "@mui/material/IconButton";
 import { useLocation, useNavigate } from "react-router-dom";
@@ -16,63 +16,59 @@ import ButtonComponent from "@/components/mui/Button";
 import { ITemplateConfig } from "../Project/ProjectSubmitWork/interface";
 import OperatorList from "./components/OperatorList";

-import styles from './index.module.css'
-
+import styles from "./index.module.css";

 const WorkFlowEdit = () => {
-  const [templateConfigInfo, setTemplateConfigInfo] =
-    useState<ITemplateConfig>();
-  const location: any = useLocation();
-  const navigate = useNavigate();
+	const [templateConfigInfo, setTemplateConfigInfo] =
+		useState<ITemplateConfig>();
+	const location: any = useLocation();
+	const navigate = useNavigate();

- 
-  return (
-    <div className={styles.swBox}>
-      <div className={styles.swHeader}>
-        <div className={styles.swHeaderLeft}>
-          <MyPopconfirm
-            title="返回后，当前页面已填写内容将不保存，确认返回吗？"
-            onConfirm={()=>console.log(11)}
-          >
-            <IconButton
-              color="primary"
-              // onClick={() => handleGoBack()}
-              aria-label="upload picture"
-              component="span"
-              size="small"
-            >
-              <ArrowBackIosNewIcon
-                sx={{
-                  color: "rgba(194, 198, 204, 1)",
-                  width: "12px",
-                  height: "12px",
-                }}
-              />
-            </IconButton>
-          </MyPopconfirm>
-        </div>
-        <div className={styles.swHeaderRight}>
-          <MyPopconfirm
-            title="提交前请先确认参数填写无误，确认提交吗？"
-            onConfirm={()=>console.log(2)}
-          >
-            <ButtonComponent
-              text="保存"
-              // click={handleSubmitForm}
-            ></ButtonComponent>
-          </MyPopconfirm>
-        </div>
-      </div>
-      <div className={styles.swContent}>
-        <div className={styles.swFormBox}>
-          <OperatorList/>
-        </div>
-        <div className={styles.swFlowBox}>
-          右侧
-        </div>
-      </div>
-    </div>
-  );
+	return (
+		<div className={styles.swBox}>
+			<div className={styles.swHeader}>
+				<div className={styles.swHeaderLeft}>
+					<MyPopconfirm
+						title="返回后，当前页面已填写内容将不保存，确认返回吗？"
+						onConfirm={() => console.log(11)}
+					>
+						<IconButton
+							color="primary"
+							// onClick={() => handleGoBack()}
+							aria-label="upload picture"
+							component="span"
+							size="small"
+						>
+							<ArrowBackIosNewIcon
+								sx={{
+									color: "rgba(194, 198, 204, 1)",
+									width: "12px",
+									height: "12px",
+								}}
+							/>
+						</IconButton>
+					</MyPopconfirm>
+				</div>
+				<div className={styles.swHeaderRight}>
+					<MyPopconfirm
+						title="提交前请先确认参数填写无误，确认提交吗？"
+						onConfirm={() => console.log(2)}
+					>
+						<ButtonComponent
+							text="保存"
+							// click={handleSubmitForm}
+						></ButtonComponent>
+					</MyPopconfirm>
+				</div>
+			</div>
+			<div className={styles.swContent}>
+				<div className={styles.swFormBox}>
+					<OperatorList />
+				</div>
+				<div className={styles.swFlowBox}>右侧</div>
+			</div>
+		</div>
+	);
 };

 export default WorkFlowEdit;