refactor(web): 优化节点展现

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

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