refactor(web): 优化节点展现

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

@@ -1,6 +1,6 @@
 import type {NodeProps} from '@xyflow/react'
 import {Tag} from 'antd'
-import React from 'react'
+import React, {useCallback, useEffect, useState} from 'react'
 import {useContextStore} from '../store/ContextStore.ts'
 import {useDataStore} from '../store/DataStore.ts'
 import {useFlowStore} from '../store/FlowStore.ts'
@@ -13,46 +13,63 @@ const modelMap: Record<string, string> = {
 
 const LlmNode = (props: NodeProps) => {
   const {getNodes, getEdges} = useFlowStore()
-  const {getData} = useDataStore()
+  const {getData, mergeDataById, getDataById} = useDataStore()
   const {getInputSchema} = useContextStore()
+
+  const [nodeData, setNodeData] = useState<any>()
+
+  useEffect(() => {
+    mergeDataById(
+      props.id,
+      {
+        outputs: {
+          text: {
+            type: 'string',
+          },
+        },
+      },
+    )
+    setNodeData(getDataById(props.id))
+  }, [props.id])
+
+  const columnsSchema = useCallback(() => [
+    ...inputsFormColumns(props.id, getInputSchema(), getNodes(), getEdges(), getData()),
+    {
+      type: 'divider',
+    },
+    {
+      type: 'select',
+      name: 'model',
+      label: '大模型',
+      required: true,
+      selectFirst: true,
+      options: Object.keys(modelMap).map(key => ({label: modelMap[key], value: key})),
+    },
+    {
+      type: 'textarea',
+      name: 'systemPrompt',
+      label: '系统提示词',
+      required: true,
+    },
+    {
+      type: 'divider',
+    },
+    ...outputsFormColumns(false, true),
+  ], [props.id])
   return (
     <AmisNode
       nodeProps={props}
       defaultNodeName="大模型"
       defaultNodeDescription="使用大模型对话"
-      extraNodeDescription={nodeData => {
-        const model = nodeData?.model as string | undefined
-        return model
+      extraNodeDescription={
+        nodeData?.model
           ? <div className="mt-2 flex justify-between">
             <span>大模型</span>
-            <Tag className="m-0" color="blue">{modelMap[model]}</Tag>
+            <Tag className="m-0" color="blue">{modelMap[nodeData.model]}</Tag>
           </div>
           : <></>
-      }}
-      columnSchema={() => [
-        ...inputsFormColumns(props.id, getInputSchema(), getNodes(), getEdges(), getData()),
-        {
-          type: 'divider',
-        },
-        {
-          type: 'select',
-          name: 'model',
-          label: '大模型',
-          required: true,
-          selectFirst: true,
-          options: Object.keys(modelMap).map(key => ({label: modelMap[key], value: key})),
-        },
-        {
-          type: 'textarea',
-          name: 'systemPrompt',
-          label: '系统提示词',
-          required: true,
-        },
-        {
-          type: 'divider',
-        },
-        ...outputsFormColumns(false, true, {text: {type: 'string'}}),
-      ]}
+      }
+      columnSchema={columnsSchema}
       handler={<NormalNodeHandler/>}
     />
   )