refactor(web): 优化节点展现

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

@@ -104,14 +104,13 @@ export function inputsFormColumns(
   ]
 }
 
-export function outputsFormColumns(editable: boolean = false, required: boolean = false, preload?: any): Schema[] {
+export function outputsFormColumns(editable: boolean = false, required: boolean = false): Schema[] {
   return [
     {
       disabled: !editable,
       type: 'input-kvs',
       name: 'outputs',
       label: '输出变量',
-      value: preload,
       addButtonText: '新增输出',
       draggable: false,
       keyItem: {
@@ -155,7 +154,7 @@ type AmisNodeProps = {
   nodeProps: NodeProps
   defaultNodeName: String
   defaultNodeDescription?: String
-  extraNodeDescription?: (nodeData: any) => JSX.Element
+  extraNodeDescription?: JSX.Element
   handler: JSX.Element
   columnSchema?: () => Schema[]
 }
@@ -338,7 +337,7 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
       >
         <div className="card-description p-2 text-secondary text-sm">
           {nodeDescription}
-          {extraNodeDescription?.(nodeData)}
+          {extraNodeDescription}
         </div>
       </Card>
       {handler}

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,14 +7,23 @@ import AmisNode, {inputsFormColumns, NormalNodeHandler, outputsFormColumns} from
 
 const CodeNode = (props: NodeProps) => {
   const {getNodes, getEdges} = useFlowStore()
-  const {getData} = useDataStore()
+  const {getData, mergeDataById} = useDataStore()
   const {getInputSchema} = useContextStore()
-  return (
+
-    <AmisNode
+  useEffect(() => {
-      nodeProps={props}
+    mergeDataById(
-      defaultNodeName="代码执行"
+      props.id,
-      defaultNodeDescription="执行自定义的处理代码"
+      {
-      columnSchema={() => [
+        outputs: {
+          result: {
+            type: 'string',
+          },
+        },
+      },
+    )
+  }, [props.id])
+
+  const columnsSchema = useCallback(() => [
     ...inputsFormColumns(props.id, getInputSchema(), getNodes(), getEdges(), getData()),
     {
       type: 'divider',
@@ -52,8 +61,14 @@ const CodeNode = (props: NodeProps) => {
     {
       type: 'divider',
     },
-        ...outputsFormColumns(true, true, {result: {type: 'string'}}),
+    ...outputsFormColumns(true, true),
-      ]}
+  ], [props.id])
+  return (
+    <AmisNode
+      nodeProps={props}
+      defaultNodeName="代码执行"
+      defaultNodeDescription="执行自定义的处理代码"
+      columnSchema={columnsSchema}
       handler={<NormalNodeHandler/>}
     />
   )

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

@@ -1,5 +1,5 @@
 import type {NodeProps} from '@xyflow/react'
-import React from 'react'
+import React, {useCallback, useEffect} from 'react'
 import {commonInfo} from '../../../util/amis.tsx'
 import {useContextStore} from '../store/ContextStore.ts'
 import {useDataStore} from '../store/DataStore.ts'
@@ -8,14 +8,23 @@ import AmisNode, {inputsFormColumns, NormalNodeHandler, outputsFormColumns} from
 
 const KnowledgeNode = (props: NodeProps) => {
   const {getNodes, getEdges} = useFlowStore()
-  const {getData} = useDataStore()
+  const {getData, mergeDataById} = useDataStore()
   const {getInputSchema} = useContextStore()
-  return (
+
-    <AmisNode
+  useEffect(() => {
-      nodeProps={props}
+    mergeDataById(
-      defaultNodeName="知识库"
+      props.id,
-      defaultNodeDescription="查询知识库获取外部知识"
+      {
-      columnSchema={() => [
+        outputs: {
+          result: {
+            type: 'array-string',
+          },
+        },
+      },
+    )
+  }, [props.id])
+
+  const columnsSchema = useCallback(() => [
     ...inputsFormColumns(props.id, getInputSchema(), getNodes(), getEdges(), getData()),
     {
       type: 'divider',
@@ -66,8 +75,14 @@ const KnowledgeNode = (props: NodeProps) => {
     {
       type: 'divider',
     },
-        ...outputsFormColumns(false, true, {result: {type: 'array-string'}}),
+    ...outputsFormColumns(false, true),
-      ]}
+  ], [props.id])
+  return (
+    <AmisNode
+      nodeProps={props}
+      defaultNodeName="知识库"
+      defaultNodeDescription="查询知识库获取外部知识"
+      columnSchema={columnsSchema}
       handler={<NormalNodeHandler/>}
     />
   )

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,23 +13,26 @@ const modelMap: Record<string, string> = {
 
 const LlmNode = (props: NodeProps) => {
   const {getNodes, getEdges} = useFlowStore()
-  const {getData} = useDataStore()
+  const {getData, mergeDataById, getDataById} = useDataStore()
   const {getInputSchema} = useContextStore()
-  return (
+
-    <AmisNode
+  const [nodeData, setNodeData] = useState<any>()
-      nodeProps={props}
+
-      defaultNodeName="大模型"
+  useEffect(() => {
-      defaultNodeDescription="使用大模型对话"
+    mergeDataById(
-      extraNodeDescription={nodeData => {
+      props.id,
-        const model = nodeData?.model as string | undefined
+      {
-        return model
+        outputs: {
-          ? <div className="mt-2 flex justify-between">
+          text: {
-            <span>大模型</span>
+            type: 'string',
-            <Tag className="m-0" color="blue">{modelMap[model]}</Tag>
+          },
-          </div>
+        },
-          : <></>
+      },
-      }}
+    )
-      columnSchema={() => [
+    setNodeData(getDataById(props.id))
+  }, [props.id])
+
+  const columnsSchema = useCallback(() => [
     ...inputsFormColumns(props.id, getInputSchema(), getNodes(), getEdges(), getData()),
     {
       type: 'divider',
@@ -51,8 +54,22 @@ const LlmNode = (props: NodeProps) => {
     {
       type: 'divider',
     },
-        ...outputsFormColumns(false, true, {text: {type: 'string'}}),
+    ...outputsFormColumns(false, true),
-      ]}
+  ], [props.id])
+  return (
+    <AmisNode
+      nodeProps={props}
+      defaultNodeName="大模型"
+      defaultNodeDescription="使用大模型对话"
+      extraNodeDescription={
+        nodeData?.model
+          ? <div className="mt-2 flex justify-between">
+            <span>大模型</span>
+            <Tag className="m-0" color="blue">{modelMap[nodeData.model]}</Tag>
+          </div>
+          : <></>
+      }
+      columnSchema={columnsSchema}
       handler={<NormalNodeHandler/>}
     />
   )

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

@@ -1,14 +1,16 @@
 import type {NodeProps} from '@xyflow/react'
-import React from 'react'
+import React, {useCallback} from 'react'
 import AmisNode, {EndNodeHandler, outputsFormColumns} from './AmisNode.tsx'
 
 const OutputNode = (props: NodeProps) => {
+  const columnsSchema = useCallback(() => outputsFormColumns(true), [props.id])
+
   return (
     <AmisNode
       nodeProps={props}
       defaultNodeName="输出节点"
       defaultNodeDescription="定义输出变量"
-      columnSchema={() => outputsFormColumns(true)}
+      columnSchema={columnsSchema}
       handler={<EndNodeHandler/>}
     />
   )

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

@@ -21,8 +21,7 @@ const SwitchNode = (props: NodeProps) => {
       nodeProps={props}
       defaultNodeName="分支节点"
       defaultNodeDescription="根据不同的情况前往不同的分支"
-      extraNodeDescription={() => {
+      extraNodeDescription={
-        return (
         <div className="mt-2">
           {cases.map(item => (
             <div key={item.index} className="mt-1">
@@ -30,8 +29,7 @@ const SwitchNode = (props: NodeProps) => {
             </div>
           ))}
         </div>
-        )
+      }
-      }}
       handler={
         <>
           <Handle type="target" position={Position.Left}/>

service-web/client/src/components/flow/store/DataStore.ts

@@ -6,6 +6,7 @@ export type DataStoreState = {
   setData: (data: Record<string, any>) => void,
   getDataById: (id: string) => any,
   setDataById: (id: string, data: any) => void,
+  mergeDataById: (id: string, data: any) => void,
 }
 
 export const useDataStore = create<DataStoreState>((set, get) => ({
@@ -22,4 +23,14 @@ export const useDataStore = create<DataStoreState>((set, get) => ({
       data: updateData,
     })
   },
+  mergeDataById: (id, data) => {
+    let updateData = get().data
+    updateData[id] = {
+      ...(updateData[id] ?? {}),
+      ...data,
+    }
+    set({
+      data: updateData,
+    })
+  },
 }))