chore: flow组件开发

package-lock.json

@@ -1437,17 +1437,48 @@
       "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
     },
     "@emotion/react": {
-      "version": "11.9.0",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.0.tgz",
-      "integrity": "sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==",
+      "version": "11.9.3",
+      "resolved": "https://registry.npmmirror.com/@emotion/react/-/react-11.9.3.tgz",
+      "integrity": "sha512-g9Q1GcTOlzOEjqwuLF/Zd9LC+4FljjPjDfxSM7KmEakm+hsHXk+bYZ2q+/hTJzr0OUNkujo72pXLQvXj6H+GJQ==",
       "requires": {
         "@babel/runtime": "^7.13.10",
         "@emotion/babel-plugin": "^11.7.1",
-        "@emotion/cache": "^11.7.1",
-        "@emotion/serialize": "^1.0.3",
+        "@emotion/cache": "^11.9.3",
+        "@emotion/serialize": "^1.0.4",
         "@emotion/utils": "^1.1.0",
         "@emotion/weak-memoize": "^0.2.5",
         "hoist-non-react-statics": "^3.3.1"
+      },
+      "dependencies": {
+        "@emotion/cache": {
+          "version": "11.9.3",
+          "resolved": "https://registry.npmmirror.com/@emotion/cache/-/cache-11.9.3.tgz",
+          "integrity": "sha512-0dgkI/JKlCXa+lEXviaMtGBL0ynpx4osh7rjOXE71q9bIF8G+XhJgvi+wDu0B0IdCVx37BffiwXlN9I3UuzFvg==",
+          "requires": {
+            "@emotion/memoize": "^0.7.4",
+            "@emotion/sheet": "^1.1.1",
+            "@emotion/utils": "^1.0.0",
+            "@emotion/weak-memoize": "^0.2.5",
+            "stylis": "4.0.13"
+          }
+        },
+        "@emotion/serialize": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmmirror.com/@emotion/serialize/-/serialize-1.0.4.tgz",
+          "integrity": "sha512-1JHamSpH8PIfFwAMryO2bNka+y8+KA5yga5Ocf2d7ZEiJjb7xlLW7aknBGZqJLajuLOvJ+72vN+IBSwPlXD1Pg==",
+          "requires": {
+            "@emotion/hash": "^0.8.0",
+            "@emotion/memoize": "^0.7.4",
+            "@emotion/unitless": "^0.7.5",
+            "@emotion/utils": "^1.0.0",
+            "csstype": "^3.0.2"
+          }
+        },
+        "@emotion/sheet": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmmirror.com/@emotion/sheet/-/sheet-1.1.1.tgz",
+          "integrity": "sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA=="
+        }
       }
     },
     "@emotion/serialize": {
@@ -4126,6 +4157,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "classcat": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmmirror.com/classcat/-/classcat-5.0.3.tgz",
+      "integrity": "sha512-6dK2ke4VEJZOFx2ZfdDAl5OhEL8lvkl6EHF92IfRePfHxQTqir5NlcNVUv+2idjDqCX2NDc8m8YSAI5NI975ZQ=="
+    },
     "classnames": {
       "version": "2.3.1",
       "resolved": "https://registry.npmmirror.com/classnames/-/classnames-2.3.1.tgz",
@@ -4679,6 +4715,72 @@
       "resolved": "https://registry.npmmirror.com/custom-error-instance/-/custom-error-instance-2.1.1.tgz",
       "integrity": "sha512-p6JFxJc3M4OTD2li2qaHkDCw9SfMw82Ldr6OC9Je1aXiGfhx2W8p3GaoeaGrPJTUN9NirTM/KTxHWMUdR1rsUg=="
     },
+    "d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
+    },
+    "d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
+    },
+    "d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      }
+    },
+    "d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
+    },
+    "d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "requires": {
+        "d3-color": "1 - 3"
+      }
+    },
+    "d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
+    },
+    "d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
+    },
+    "d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      }
+    },
     "damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -10242,6 +10344,29 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-flow-renderer": {
+      "version": "10.3.7",
+      "resolved": "https://registry.npmmirror.com/react-flow-renderer/-/react-flow-renderer-10.3.7.tgz",
+      "integrity": "sha512-0WGyozT4SzMpim8MQRFBR8hqm11FGApXm+UD05BoAejhcUgohvmckBTRIQKxzGC2WQLR/6oXRzwzRYGQdrb4rw==",
+      "requires": {
+        "@babel/runtime": "^7.18.0",
+        "classcat": "^5.0.3",
+        "d3-drag": "^3.0.0",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0",
+        "zustand": "^3.7.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.18.3",
+          "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.18.3.tgz",
+          "integrity": "sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -11478,6 +11603,16 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
+    "tss-react": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmmirror.com/tss-react/-/tss-react-3.7.0.tgz",
+      "integrity": "sha512-thvJWR+sr3ZGMcV/Ryo1F5RzjXd1gMTzYV/ckfUEBhu701uTYE3KyL9DNxv827uRFPFSLYG7bKefuc7kmYMB9Q==",
+      "requires": {
+        "@emotion/cache": "*",
+        "@emotion/serialize": "*",
+        "@emotion/utils": "*"
+      }
+    },
     "tsutils": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
@@ -11838,7 +11973,7 @@
     },
     "webpack-dev-server": {
       "version": "4.9.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.9.0.tgz",
+      "resolved": "https://registry.npmmirror.com/webpack-dev-server/-/webpack-dev-server-4.9.0.tgz",
       "integrity": "sha512-+Nlb39iQSOSsFv0lWUuUTim3jDQO8nhK3E68f//J2r5rIcp4lULHXz2oZ0UVdEeWXEh5lSzYUlzarZhDAeAVQw==",
       "requires": {
         "@types/bonjour": "^3.5.9",
@@ -12398,6 +12533,11 @@
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="
+    },
+    "zustand": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmmirror.com/zustand/-/zustand-3.7.2.tgz",
+      "integrity": "sha512-PIJDIZKtokhof+9+60cpockVOq05sJzHCriyvaLBmEJixseQ1a5Kdov6fWZfWOu5SK9c+FhH1jU0tntLxRJYMA=="
     }
   }
 }

package.json

@@ -67,6 +67,7 @@
     "react-dev-utils": "^12.0.1",
     "react-dom": "^18.1.0",
     "react-dropzone": "^14.2.1",
+    "react-flow-renderer": "^10.3.7",
     "react-refresh": "^0.11.0",
     "react-router-dom": "^6.3.0",
     "resolve": "^1.20.0",

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

@@ -48,10 +48,10 @@ const ConfigForm = (props: ConfigFormProps) => {
   const renderTasks: IRenderTasks = useMemo(() => {
     const result: IRenderTasks = [];
     templateConfigInfo.tasks.forEach((task, taskIndex) => {
-      if (task.type === "batch") {
+      if (task.type === "BATCH") {
         result.push({ ...task, flows: [] });
       } else {
-        result[result.length - 1].flows.push({ ...task });
+        result[result.length - 1]?.flows.push({ ...task });
       }
     });
     return result;

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

-const WorkFlow = () => {
-  return <div>flow</div>;
+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-21 15:25:25
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-22 10:40:30
+ * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/WorkFlow/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import Flow from "../../components/Flow";
+import { ITemplateConfig } from "../interface";
+
+interface IProps {
+  templateConfigInfo: ITemplateConfig;
+}
+const WorkFlow = (props: IProps) => {
+  const { templateConfigInfo } = props;
+  return <Flow data={templateConfigInfo} />;
 };
 
 export default WorkFlow;

src/views/Project/ProjectSubmitWork/WorkFlow/initial-elements.tsx

+import React from "react";
+// import { MarkerType } from "react-flow-renderer";
+
+export const nodes = [
+  {
+    id: "1",
+    type: "input",
+    data: {
+      label: (
+        <>
+          Welcome to <strong>React Flow!</strong>
+        </>
+      ),
+    },
+    position: { x: 250, y: 0 },
+  },
+  {
+    id: "2",
+    data: {
+      label: (
+        <>
+          This is a <strong>default node</strong>
+        </>
+      ),
+    },
+    position: { x: 100, y: 100 },
+  },
+  {
+    id: "3",
+    data: {
+      label: (
+        <>
+          This one has a <strong>custom style</strong>
+        </>
+      ),
+    },
+    position: { x: 400, y: 100 },
+    style: {
+      background: "#D6D5E6",
+      color: "#333",
+      border: "1px solid #222138",
+      width: 180,
+    },
+  },
+  {
+    id: "4",
+    position: { x: 250, y: 200 },
+    data: {
+      label: "Another default node",
+    },
+  },
+  {
+    id: "5",
+    data: {
+      label: "Node id: 5",
+    },
+    position: { x: 250, y: 325 },
+  },
+  {
+    id: "6",
+    type: "output",
+    data: {
+      label: (
+        <>
+          An <strong>output node</strong>
+        </>
+      ),
+    },
+    position: { x: 100, y: 480 },
+  },
+  {
+    id: "7",
+    type: "output",
+    data: { label: "Another output node" },
+    position: { x: 400, y: 450 },
+  },
+];
+
+export const edges = [
+  { id: "e1-2", source: "1", target: "2", label: "this is an edge label" },
+  { id: "e1-3", source: "1", target: "3" },
+  {
+    id: "e3-4",
+    source: "3",
+    target: "4",
+    animated: true,
+    label: "animated edge",
+  },
+  {
+    id: "e4-5",
+    source: "4",
+    target: "5",
+    label: "edge with arrow head",
+  },
+  {
+    id: "e5-6",
+    source: "5",
+    target: "6",
+    type: "smoothstep",
+    label: "smooth step edge",
+  },
+  {
+    id: "e5-7",
+    source: "5",
+    target: "7",
+    type: "step",
+    style: { stroke: "#f6ab6c" },
+    label: "a step edge",
+    animated: true,
+    labelStyle: { fill: "#f6ab6c", fontWeight: 700 },
+  },
+];

src/views/Project/ProjectSubmitWork/index.tsx

+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-21 20:03:56
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-22 17:29:16
+ * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import { useState } from "react";
 import styles from "./index.module.css";
 import { templateConfigJson } from "./mock";
@@ -11,7 +19,7 @@ import _ from "lodash";
 
 const ProjectSubmitWork = () => {
   const [templateConfigInfo, setTemplateConfigInfo] = useState<ITemplateConfig>(
-    templateConfigJson as ITemplateConfig
+    templateConfigJson as any
   );
 
   const setParameter = (value: any, taskId: string, parameterName: string) => {
@@ -80,7 +88,7 @@ const ProjectSubmitWork = () => {
           />
         </div>
         <div className={styles.swFlowBox}>
-          <WorkFlow />
+          <WorkFlow templateConfigInfo={templateConfigInfo} />
         </div>
       </div>
     </div>

src/views/Project/ProjectSubmitWork/interface.ts

-export interface ITemplateConfig {
-  title: string;
-  version: string;
-  updateTime: string;
+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-21 20:03:56
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-22 19:53:09
+ * @FilePath: /bkunyun/src/views/Project/ProjectSubmitWork/interface.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+type IType = 'BATCH' | 'FLOW'
+export interface IParameter {
+  hidden: boolean;
+  id?: string;
+  name: string;
+  required: boolean;
+  domType: IDomType;
+  dataType?: string;
+  value: string;
   description: string;
   language: string;
   languageVersion: string;
   tags: Array<string>;
   source: string;
   productId: string;
-  tasks: Array<ITaskFlow | ITaskBatch>;
+  tasks: ITask[];
+  validators: Array<IValidator>;
+  choices: Array<IChoice>;
 }
 
-export interface ITaskFlow {
+export interface ITask {
   id: string;
   title: string;
   description: string;
@@ -19,36 +34,24 @@ export interface ITaskFlow {
     x: number;
     y: number;
   };
-  type: "flow";
-  parentNode: string;
+  type: IType;
+  parentNode?: string;
   parameters: Array<IParameter>;
   edges: Array<IEdge>;
 }
 
-export interface ITaskBatch {
-  id: string;
-  title: string;
-  description: string;
-  position: {
-    x: number;
-    y: number;
-  };
-  type: "batch";
-  parameters: Array<IParameter>;
-  edges: Array<IEdge>;
-}
 
-export interface IParameter {
-  hidden: boolean;
-  id?: string;
-  name: string;
-  required: boolean;
-  domType: IDomType;
-  dataType?: string;
-  value: string;
+export interface ITemplateConfig {
+  title: string;
+  version: string;
+  updateTime?: string;
   description: string;
-  validators: Array<IValidator>;
-  choices: Array<IChoice>;
+  language: string;
+  languageVersion: string;
+  tags: Array<string>;
+  source: string;
+  productId: string;
+  tasks: ITask[];
 }
 
 export type IDomType =
@@ -79,7 +82,7 @@ export interface IEdge {
   sourceHandle: string;
   target: string;
   targetHandle: string;
-  lable: string;
+  label: string;
 }
 
 // 提交任务时的动态表单的数据结构
@@ -92,8 +95,8 @@ export type IRenderTask = {
     x: number;
     y: number;
   };
-  type: "batch";
+  type: IType;
   parameters: Array<IParameter>;
   edges: Array<IEdge>;
-  flows: Array<ITaskFlow>;
+  flows: ITask[];
 };

src/views/Project/components/Flow/index.module.css

+.batchNode {
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 16px;
+  border: 1px solid #e6e8eb;
+  border-left: 4px solid #e6e8eb;
+}
+
+.selectBatchNode {
+  border-left: 4px solid #1370ff;
+}
+
+.batchRotate {
+  transform: rotate(-90deg);
+}
+
+.flowNode {
+  background-color: #f5f6f7;
+  border-radius: 2px;
+  padding: 6px 12px;
+}

src/views/Project/components/Flow/index.tsx

+import { ITemplateConfig, IEdge } from "../../ProjectSubmitWork/interface";
+import ReactFlow, {
+  addEdge,
+  MiniMap,
+  Controls,
+  Background,
+  useNodesState,
+  useEdgesState,
+  Handle,
+  Position,
+} from "react-flow-renderer";
+import { useCallback, useMemo } from "react";
+
+import styles from "./index.module.css";
+import classNames from "classnames";
+/*
+ * @Author: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @Date: 2022-06-22 10:15:22
+ * @LastEditors: 吴永生#A02208 yongsheng.wu@wholion.com
+ * @LastEditTime: 2022-06-22 11:10:35
+ * @FilePath: /bkunyun/src/views/Project/components/Flow/index.tsx
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+interface IProps {
+  data: ITemplateConfig;
+}
+
+const BatchNode = (props: any) => {
+  const { data } = props;
+  return (
+    <div
+      className={classNames({
+        [styles.batchNode]: true,
+        [styles.selectBatchNode]: false,
+      })}
+      style={data.style}
+    >
+      <Handle type="target" position={Position.Top} />
+      <div
+        className={classNames({
+          [styles.batchRotate]: false,
+        })}
+      >
+        {data.label || ""}
+      </div>
+      <Handle type="source" position={Position.Bottom} id="a" />
+    </div>
+  );
+};
+
+const FlowNode = (props: any) => {
+  const { data } = props;
+  return (
+    <div
+      className={classNames({
+        [styles.flowNode]: true,
+      })}
+    >
+      <Handle type="target" position={Position.Top} />
+      <div>{data.label || ""}</div>
+      <Handle type="source" position={Position.Bottom} id="a" />
+    </div>
+  );
+};
+
+const Flow = (props: IProps) => {
+  const { data } = props;
+
+  const nodeTypes = useMemo(() => {
+    return { batchNode: BatchNode, flowNode: FlowNode };
+  }, []);
+
+  const getBatchStyle = useCallback(
+    (id: string) => {
+      const positionXArr: number[] = [];
+      const positionYArr: number[] = [];
+      data?.tasks?.length &&
+        data?.tasks?.forEach((item) => {
+          if (item.parentNode === id) {
+            positionXArr.push(item.position?.x || 0);
+            positionYArr.push(item.position?.y || 0);
+          }
+        });
+      positionXArr.sort((a, b) => {
+        return a - b;
+      });
+      positionYArr.sort((a, b) => {
+        return a - b;
+      });
+      let width = 176,
+        height = 44;
+      if (positionXArr?.length) {
+        const val = positionXArr[positionXArr.length - 1] - positionXArr[0];
+        width = val ? val : width;
+      }
+      if (positionXArr?.length) {
+        const val = positionYArr[positionYArr.length - 1] - positionYArr[0];
+        height = val ? val : height;
+      }
+      return {
+        width,
+        height,
+      };
+    },
+    [data?.tasks]
+  );
+
+  const initialNodes = useMemo(() => {
+    const val: any = [];
+    data?.tasks?.length &&
+      data?.tasks.forEach((item) => {
+        if (item.type === "BATCH") {
+          console.log(getBatchStyle(item.id));
+        }
+        val.push({
+          id: item.id,
+          type: item.type === "BATCH" ? "batchNode" : "flowNode",
+          data: { label: item.title || "", style: getBatchStyle(item.id) },
+          position: item.position,
+          //   style: { width: 176, height: 500 },
+          ...(item.type === "BATCH" ? { style: getBatchStyle(item.id) } : {}),
+          ...(item.parentNode ? { parentNode: item.parentNode } : {}),
+          ...(item.type === "BATCH" ? { extent: "parent" } : {}),
+        });
+      });
+    return val;
+  }, [data?.tasks, getBatchStyle]);
+
+  const initialEdges = useMemo(() => {
+    const val: any = [];
+    data?.tasks?.length &&
+      data?.tasks.forEach((item) => {
+        val.push(...item.edges);
+      });
+    val.map((item: IEdge) => {
+      return {
+        id: item.id,
+        label: item.label,
+        source: item.source,
+        target: item.target,
+      };
+    });
+    return val;
+  }, [data]);
+
+  console.log(initialEdges, initialNodes, 11111);
+
+  const [nodes, setNodes, onNodesChange] = useNodesState<any>(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+  const onConnect = (params: any) => setEdges((eds) => addEdge(params, eds));
+
+  const onInit = (reactFlowInstance: any) =>
+    console.log("flow loaded:", reactFlowInstance);
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+      onConnect={onConnect}
+      onInit={onInit}
+      fitView
+      attributionPosition="top-right"
+      nodeTypes={nodeTypes}
+    >
+      <MiniMap
+        // nodeStrokeColor={(n) => {
+        //   if (n.style?.background) return n.style.background;
+        //   if (n.type === "input") return "#0041d0";
+        //   if (n.type === "output") return "#ff0072";
+        //   if (n.type === "default") return "#1a192b";
+
+        //   return "#eee";
+        // }}
+        // nodeColor={(n) => {
+        //   if (n.style?.background) return n.style.background;
+
+        //   return "#fff";
+        // }}
+        nodeBorderRadius={2}
+      />
+      <Controls />
+      <Background color="#aaa" gap={16} />
+    </ReactFlow>
+  );
+};
+
+export default Flow;