refactor(web): 优化节点展现

2025-07-10 12:44:37 +08:00
parent 5e763637da
commit f707a0d2b5
7 changed files with 202 additions and 145 deletions
--- a/service-web/client/src/components/flow/node/AmisNode.tsx
+++ b/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}
--- a/service-web/client/src/components/flow/node/CodeNode.tsx
+++ b/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
-      nodeProps={props}
-      defaultNodeName="代码执行"
-      defaultNodeDescription="执行自定义的处理代码"
-      columnSchema={() => [
+
+  useEffect(() => {
+    mergeDataById(
+      props.id,
+      {
+        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/>}
    />
  )
--- a/service-web/client/src/components/flow/node/KnowledgeNode.tsx
+++ b/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
-      nodeProps={props}
-      defaultNodeName="知识库"
-      defaultNodeDescription="查询知识库获取外部知识"
-      columnSchema={() => [
+
+  useEffect(() => {
+    mergeDataById(
+      props.id,
+      {
+        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/>}
    />
  )
--- a/service-web/client/src/components/flow/node/LlmNode.tsx
+++ b/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
-      nodeProps={props}
-      defaultNodeName="大模型"
-      defaultNodeDescription="使用大模型对话"
-      extraNodeDescription={nodeData => {
-        const model = nodeData?.model as string | undefined
-        return model
-          ? <div className="mt-2 flex justify-between">
-            <span>大模型</span>
-            <Tag className="m-0" color="blue">{modelMap[model]}</Tag>
-          </div>
-          : <></>
-      }}
-      columnSchema={() => [
+
+  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',
@@ -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/>}
    />
  )
--- a/service-web/client/src/components/flow/node/OutputNode.tsx
+++ b/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/>}
    />
  )
--- a/service-web/client/src/components/flow/node/SwitchNode.tsx
+++ b/service-web/client/src/components/flow/node/SwitchNode.tsx
@@ -21,8 +21,7 @@ const SwitchNode = (props: NodeProps) => {
      nodeProps={props}
      defaultNodeName="分支节点"
      defaultNodeDescription="根据不同的情况前往不同的分支"
-      extraNodeDescription={() => {
-        return (
+      extraNodeDescription={
        <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}/>
--- a/service-web/client/src/components/flow/store/DataStore.ts
+++ b/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,
+    })
+  },
 }))