refactor(web): 优化流程节点的定义和实现

service-web/client/src/components/flow/node/CodeNode.tsx

@@ -1,52 +1,62 @@
 import type {NodeProps} from '@xyflow/react'
-import AmisNode, {inputsFormColumns, outputsFormColumns} from './AmisNode.tsx'
 import React from 'react'
+import {useContextStore} from '../store/ContextStore.ts'
+import {useDataStore} from '../store/DataStore.ts'
+import {useFlowStore} from '../store/FlowStore.ts'
+import AmisNode, {inputsFormColumns, NormalNodeHandler, outputsFormColumns} from './AmisNode.tsx'
 
-const CodeNode = (props: NodeProps) => AmisNode({
-  nodeProps: props,
-  type: 'normal',
-  defaultNodeName: '代码执行',
-  defaultNodeDescription: '执行自定义的处理代码',
-  columnSchema: (props) => [
-    ...inputsFormColumns(props),
-    {
-      type: 'divider',
-    },
-    {
-      type: 'select',
-      name: 'type',
-      label: '代码类型',
-      required: true,
-      options: [
+const CodeNode = (props: NodeProps) => {
+  const {getNodes, getEdges} = useFlowStore()
+  const {getData} = useDataStore()
+  const {getInputSchema} = useContextStore()
+  return (
+    <AmisNode
+      nodeProps={props}
+      defaultNodeName="代码执行"
+      defaultNodeDescription="执行自定义的处理代码"
+      columnSchema={() => [
+        ...inputsFormColumns(props.id, getInputSchema(), getNodes(), getEdges(), getData()),
         {
-          value: 'javascript',
-          label: 'JavaScript',
+          type: 'divider',
         },
         {
-          value: 'python',
-          label: 'Python',
+          type: 'select',
+          name: 'type',
+          label: '代码类型',
+          required: true,
+          options: [
+            {
+              value: 'javascript',
+              label: 'JavaScript',
+            },
+            {
+              value: 'python',
+              label: 'Python',
+            },
+            {
+              value: 'lua',
+              label: 'Lua',
+            },
+          ],
         },
         {
-          value: 'lua',
-          label: 'Lua',
+          type: 'editor',
+          required: true,
+          label: '代码内容',
+          name: 'content',
+          language: '${type}',
+          options: {
+            wordWrap: 'bounded',
+          },
         },
-      ],
-    },
-    {
-      type: 'editor',
-      required: true,
-      label: '代码内容',
-      name: 'content',
-      language: '${type}',
-      options: {
-        wordWrap: 'bounded',
-      },
-    },
-    {
-      type: 'divider',
-    },
-    ...outputsFormColumns(true, true, {result: {type: 'string'}}),
-  ],
-})
+        {
+          type: 'divider',
+        },
+        ...outputsFormColumns(true, true, {result: {type: 'string'}}),
+      ]}
+      handler={<NormalNodeHandler/>}
+    />
+  )
+}
 
 export default React.memo(CodeNode)