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

2025-07-10 12:08:13 +08:00
parent 898e20d5d7
commit 5e763637da
10 changed files with 467 additions and 513 deletions
--- a/service-web/client/src/components/flow/FlowEditor.tsx
+++ b/service-web/client/src/components/flow/FlowEditor.tsx
@@ -1,23 +1,12 @@
 import {PlusCircleFilled, RollbackOutlined, SaveFilled} from '@ant-design/icons'
-import {
-  Background,
-  BackgroundVariant,
-  Controls,
-  type Edge,
-  MiniMap,
-  type Node,
-  type NodeProps,
-  ReactFlow,
-} from '@xyflow/react'
-import type {Schema} from 'amis'
-import {Button, Drawer, Dropdown, message, Popconfirm, Space} from 'antd'
-import {arrToMap, find, isEqual, isNil, randomId} from 'licia'
-import {type JSX, type MemoExoticComponent, useEffect, useState} from 'react'
+import {Background, BackgroundVariant, Controls, type Edge, MiniMap, type Node, ReactFlow} from '@xyflow/react'
+import {Button, Dropdown, message, Popconfirm, Space} from 'antd'
+import {arrToMap, find, isEqual, randomId} from 'licia'
+import {useEffect} from 'react'
 import {useNavigate} from 'react-router'
 import styled from 'styled-components'
 import '@xyflow/react/dist/style.css'
-import {useShallow} from 'zustand/react/shallow'
-import {amisRender, commonInfo, horizontalFormOptions} from '../../util/amis.tsx'
+import {commonInfo} from '../../util/amis.tsx'
 import {checkAddConnection, checkAddNode, checkSave} from './FlowChecker.tsx'
 import CodeNode from './node/CodeNode.tsx'
 import KnowledgeNode from './node/KnowledgeNode.tsx'
@@ -29,8 +18,6 @@ import {useDataStore} from './store/DataStore.ts'
 import {useFlowStore} from './store/FlowStore.ts'

 const FlowableDiv = styled.div`
-    height: 100%;
-
    .react-flow__node.selectable {
        &:focus {
            box-shadow: 0 0 20px 1px #e8e8e8;
@@ -65,6 +52,34 @@ const FlowableDiv = styled.div`
    }
 `

+const nodeDefine = [
+  {
+    key: 'output-node',
+    name: '输出',
+    component: OutputNode,
+  },
+  {
+    key: 'llm-node',
+    name: '大模型',
+    component: LlmNode,
+  },
+  {
+    key: 'knowledge-node',
+    name: '知识库',
+    component: KnowledgeNode,
+  },
+  {
+    key: 'code-node',
+    name: '代码执行',
+    component: CodeNode,
+  },
+  {
+    key: 'switch-node',
+    name: '条件分支',
+    component: SwitchNode,
+  },
+]
+
 export type GraphData = { nodes: Node[], edges: Edge[], data: any }

 export type FlowEditorProps = {
@@ -76,47 +91,8 @@ export type FlowEditorProps = {
 function FlowEditor(props: FlowEditorProps) {
  const navigate = useNavigate()
  const [messageApi, contextHolder] = message.useMessage()
-  const [nodeDef] = useState<{
-    key: string,
-    name: string,
-    component: MemoExoticComponent<(props: NodeProps) => JSX.Element>
-  }[]>([
-    {
-      key: 'output-node',
-      name: '输出',
-      component: OutputNode,
-    },
-    {
-      key: 'llm-node',
-      name: '大模型',
-      component: LlmNode,
-    },
-    {
-      key: 'knowledge-node',
-      name: '知识库',
-      component: KnowledgeNode,
-    },
-    {
-      key: 'code-node',
-      name: '代码执行',
-      component: CodeNode,
-    },
-    {
-      key: 'switch-node',
-      name: '条件分支',
-      component: SwitchNode,
-    },
-  ])
-  const [open, setOpen] = useState(false)

-  const {data, setData, getDataById, setDataById} = useDataStore(
-    useShallow(state => ({
-      data: state.data,
-      setData: state.setData,
-      getDataById: state.getDataById,
-      setDataById: state.setDataById,
-    })),
-  )
+  const {data, setData} = useDataStore()
  const {
    nodes,
    addNode,
@@ -126,106 +102,9 @@ function FlowEditor(props: FlowEditorProps) {
    setEdges,
    onEdgesChange,
    onConnect,
-  } = useFlowStore(
-    useShallow(state => ({
-      nodes: state.nodes,
-      getNodes: state.getNodes,
-      addNode: state.addNode,
-      removeNode: state.removeNode,
-      setNodes: state.setNodes,
-      onNodesChange: state.onNodesChange,
-      edges: state.edges,
-      getEdges: state.getEdges,
-      setEdges: state.setEdges,
-      onEdgesChange: state.onEdgesChange,
-      onConnect: state.onConnect,
-    })),
-  )
+  } = useFlowStore()

-  const {
-    setInputSchema,
-  } = useContextStore()
-
-  const [currentNodeForm, setCurrentNodeForm] = useState<JSX.Element>()
-  const editNode = (id: string, columnSchema?: Schema[]) => {
-    if (!isNil(columnSchema)) {
-      setCurrentNodeForm(
-        amisRender(
-          {
-            type: 'wrapper',
-            size: 'none',
-            body: [
-              {
-                debug: commonInfo.debug,
-                type: 'form',
-                ...horizontalFormOptions(),
-                wrapWithPanel: false,
-                onEvent: {
-                  submitSucc: {
-                    actions: [
-                      {
-                        actionType: 'custom',
-                        // @ts-ignore
-                        script: (context, action, event) => {
-                          setDataById(
-                            id,
-                            {
-                              ...context.props.data,
-                              finished: true,
-                            },
-                          )
-                          setOpen(false)
-                        },
-                      },
-                    ],
-                  },
-                },
-                body: [
-                  ...(columnSchema ?? []),
-                  {
-                    type: 'wrapper',
-                    size: 'none',
-                    className: 'space-x-2 text-right',
-                    body: [
-                      {
-                        type: 'action',
-                        label: '取消',
-                        onEvent: {
-                          click: {
-                            actions: [
-                              {
-                                actionType: 'custom',
-                                // @ts-ignore
-                                script: (context, action, event) => {
-                                  setOpen(false)
-                                },
-                              },
-                            ],
-                          },
-                        },
-                      },
-                      {
-                        type: 'submit',
-                        label: '保存',
-                        level: 'primary',
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          },
-          getDataById(id),
-        ),
-      )
-      setOpen(true)
-    }
-  }
-
-  // 用于透传node操作到主流程
-  const initialNodeHandlers = {
-    editNode,
-  }
+  const {setInputSchema} = useContextStore()

  useEffect(() => {
    // language=JSON
@@ -236,10 +115,6 @@ function FlowEditor(props: FlowEditorProps) {

    let initialNodeData = props.graphData?.data ?? {}
    setData(initialNodeData)
-
-    for (let node of initialNodes) {
-      node.data = initialNodeHandlers
-    }
    setNodes(initialNodes)
    setEdges(initialEdges)

@@ -247,12 +122,12 @@ function FlowEditor(props: FlowEditorProps) {
  }, [props.graphData])

  return (
-    <FlowableDiv>
+    <FlowableDiv className="h-full w-full">
      {contextHolder}
      <Space className="toolbar">
        <Dropdown
          menu={{
-            items: nodeDef.map(def => ({key: def.key, label: def.name})),
+            items: nodeDefine.map(def => ({key: def.key, label: def.name})),
            onClick: ({key}) => {
              try {
                if (commonInfo.debug) {
@@ -263,7 +138,7 @@ function FlowEditor(props: FlowEditorProps) {
                  id: randomId(10),
                  type: key,
                  position: {x: 100, y: 100},
-                  data: initialNodeHandlers,
+                  data: {},
                })
              } catch (e) {
                // @ts-ignore
@@ -303,16 +178,6 @@ function FlowEditor(props: FlowEditorProps) {
          保存
        </Button>
      </Space>
-      <Drawer
-        title="节点编辑"
-        open={open}
-        closeIcon={false}
-        maskClosable={false}
-        destroyOnHidden
-        size="large"
-      >
-        {currentNodeForm}
-      </Drawer>
      <ReactFlow
        nodes={nodes}
        edges={edges}
@@ -332,8 +197,8 @@ function FlowEditor(props: FlowEditorProps) {
        }}
        // @ts-ignore
        nodeTypes={arrToMap(
-          nodeDef.map(def => def.key),
-          key => find(nodeDef, def => isEqual(key, def.key))!.component)
+          nodeDefine.map(def => def.key),
+          key => find(nodeDefine, def => isEqual(key, def.key))!.component)
        }
      >
        <Controls/>
--- a/service-web/client/src/components/flow/node/AmisNode.tsx
+++ b/service-web/client/src/components/flow/node/AmisNode.tsx
@@ -1,33 +1,78 @@
 import {CopyFilled, DeleteFilled, EditFilled} from '@ant-design/icons'
-import {Handle, type HandleProps, type Node, type NodeProps, Position, useNodeConnections} from '@xyflow/react'
+import {type Edge, getIncomers, Handle, type Node, type NodeProps, Position} from '@xyflow/react'
 import type {Schema} from 'amis'
-import {Button, Card} from 'antd'
-import {has, isEmpty, isEqual, isNil} from 'licia'
-import {type JSX} from 'react'
+import {Button, Card, Drawer} from 'antd'
+import {find, has, isEmpty, isEqual, unique} from 'licia'
+import {type JSX, useCallback, useState} from 'react'
 import styled from 'styled-components'
-import {horizontalFormOptions} from '../../../util/amis.tsx'
-import {useContextStore} from '../store/ContextStore.ts'
+import Queue from 'yocto-queue'
+import {amisRender, commonInfo, horizontalFormOptions} from '../../../util/amis.tsx'
 import {useDataStore} from '../store/DataStore.ts'
 import {useFlowStore} from '../store/FlowStore.ts'

-export type AmisNodeType = 'normal' | 'start' | 'end'
+export type InputFormOptions = {
+  label: string
+  value: string
+}

-export function inputsFormColumns(props: ColumnsSchemaProps): Schema[] {
-  let incomers = props.getAllIncomerNodeById(props.nodeId)
-  let groups = []
-  for (const incomer of incomers) {
-    let data = props.getNodeDataById(incomer.id)
-    if (has(data, 'outputs')) {
-      let outputs = data?.outputs ?? []
-      groups.push({
-        label: incomer.id,
-        children: Object.keys(outputs).map(key => ({
-          value: `${incomer.id}.${key}`,
+export type InputFormOptionsGroup = {
+  group: string,
+  variables: InputFormOptions[],
+}
+
+const getAllIncomerNodeById: (id: string, nodes: Node[], edges: Edge[]) => string[] = (id, nodes, edges) => {
+  let queue = new Queue<Node>()
+  queue.enqueue(find(nodes, node => isEqual(node.id, id))!)
+  let result: string[] = []
+  while (queue.size !== 0) {
+    let currentNode = queue.dequeue()!
+    for (const incomer of getIncomers(currentNode, nodes, edges)) {
+      result.push(incomer.id)
+      queue.enqueue(incomer)
+    }
+  }
+  return unique(result, (a, b) => isEqual(a, b))
+}
+
+export function inputsFormColumns(
+  nodeId: string,
+  inputSchema: Record<string, Record<string, any>>,
+  nodes: Node[],
+  edges: Edge[],
+  data: any,
+): Schema[] {
+  let inputSchemaVariables: InputFormOptions[] = Object.keys(inputSchema).map(key => ({
+    label: inputSchema[key]?.label ?? '',
+    value: key,
+  }))
+
+  let incomerIds = getAllIncomerNodeById(nodeId, nodes, edges)
+  console.log(incomerIds, nodes, edges)
+  let incomerVariables: InputFormOptionsGroup[] = []
+  for (const incomerId of incomerIds) {
+    let nodeData = data[incomerId] ?? {}
+    if (has(nodeData, 'outputs')) {
+      let outputs = nodeData?.outputs ?? []
+      incomerVariables.push({
+        group: incomerId,
+        variables: Object.keys(outputs).map(key => ({
+          value: `${incomerId}.${key}`,
          label: key,
        })),
      })
    }
  }
+
+  let inputVariables = [
+    ...(isEmpty(inputSchemaVariables) ? [] : [
+      {
+        group: '流程入参',
+        variables: inputSchemaVariables,
+      },
+    ]),
+    ...incomerVariables,
+  ]
+
  return [
    {
      type: 'input-kvs',
@@ -48,14 +93,10 @@ export function inputsFormColumns(props: ColumnsSchemaProps): Schema[] {
          required: true,
          selectMode: 'group',
          options: [
-            {
-              label: '流程参数',
-              children: Object.keys(props.inputSchema).map(key => ({
-                label: props.inputSchema[key]?.label ?? '',
-                value: key,
-              })),
-            },
-            ...groups,
+            ...inputVariables.map(item => ({
+              label: item.group,
+              children: item.variables,
+            })),
          ],
        },
      ],
@@ -110,35 +151,13 @@ export function outputsFormColumns(editable: boolean = false, required: boolean
  ]
 }

-export const LimitHandler = (props: HandleProps & { limit: number }) => {
-  const connections = useNodeConnections({
-    handleType: props.type,
-  })
-  return (
-    <Handle
-      {...props}
-      isConnectable={connections.length < props.limit}
-    />
-  )
-}
-
-type ColumnsSchemaProps = {
-  // getInputSchema: () => Record<string, Record<string, any>>,
-  inputSchema: Record<string, Record<string, any>>,
-  nodeId: string,
-  nodeData: any,
-  getNodeDataById: (id: string) => any,
-  getAllIncomerNodeById: (id: string) => Node[],
-}
-
 type AmisNodeProps = {
  nodeProps: NodeProps
-  type: AmisNodeType
  defaultNodeName: String
  defaultNodeDescription?: String
  extraNodeDescription?: (nodeData: any) => JSX.Element
-  handlers?: (nodeData: any) => JSX.Element
-  columnSchema?: (props: ColumnsSchemaProps) => Schema[]
+  handler: JSX.Element
+  columnSchema?: () => Schema[]
 }

 const AmisNodeContainerDiv = styled.div`
@@ -151,30 +170,140 @@ const AmisNodeContainerDiv = styled.div`
    }
 `

+export const StartNodeHandler = () => {
+  return <Handle type="source" position={Position.Right} id="source"/>
+}
+
+export const EndNodeHandler = () => {
+  return <Handle type="target" position={Position.Left} id="target"/>
+}
+
+export const NormalNodeHandler = () => {
+  return (
+    <>
+      <StartNodeHandler/>
+      <EndNodeHandler/>
+    </>
+  )
+}
+
 const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
  nodeProps,
-  type,
  defaultNodeName,
  defaultNodeDescription,
  extraNodeDescription,
-  handlers,
+  handler,
  columnSchema,
 }) => {
-  const {
-    removeNode,
-    getAllIncomerNodeById,
-  } = useFlowStore()
-  const {getDataById} = useDataStore()
-  const {inputSchema} = useContextStore()
-
-  const {id, data} = nodeProps
-  const {editNode} = data
+  const {removeNode} = useFlowStore()
+  const {getDataById, setDataById} = useDataStore()
+  const {id} = nodeProps
  // @ts-ignore
  const nodeData = getDataById(id)
  const nodeName = isEmpty(nodeData?.node?.name) ? defaultNodeName : nodeData.node.name
  const nodeDescription = isEmpty(nodeData?.node?.description) ? defaultNodeDescription : nodeData.node?.description
+
+  const [editDrawerOpen, setEditDrawerOpen] = useState(false)
+  const [editDrawerForm, setEditDrawerForm] = useState<JSX.Element>(<></>)
+  const openEditDrawer = useCallback(() => {
+    setEditDrawerForm(
+      amisRender(
+        {
+          type: 'wrapper',
+          size: 'none',
+          body: [
+            {
+              debug: commonInfo.debug,
+              type: 'form',
+              ...horizontalFormOptions(),
+              wrapWithPanel: false,
+              onEvent: {
+                submitSucc: {
+                  actions: [
+                    {
+                      actionType: 'custom',
+                      // @ts-ignore
+                      script: (context, action, event) => {
+                        setDataById(
+                          id,
+                          {
+                            ...context.props.data,
+                            finished: true,
+                          },
+                        )
+                        setEditDrawerOpen(false)
+                      },
+                    },
+                  ],
+                },
+              },
+              body: [
+                {
+                  type: 'input-text',
+                  name: 'node.name',
+                  label: '节点名称',
+                  placeholder: nodeName,
+                },
+                {
+                  type: 'textarea',
+                  name: 'node.description',
+                  label: '节点描述',
+                  placeholder: nodeDescription,
+                },
+                {
+                  type: 'divider',
+                },
+                ...(columnSchema?.() ?? []),
+                {
+                  type: 'wrapper',
+                  size: 'none',
+                  className: 'space-x-2 text-right',
+                  body: [
+                    {
+                      type: 'action',
+                      label: '取消',
+                      onEvent: {
+                        click: {
+                          actions: [
+                            {
+                              actionType: 'custom',
+                              // @ts-ignore
+                              script: (context, action, event) => {
+                                setEditDrawerOpen(false)
+                              },
+                            },
+                          ],
+                        },
+                      },
+                    },
+                    {
+                      type: 'submit',
+                      label: '保存',
+                      level: 'primary',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+        getDataById(id),
+      ),
+    )
+    setEditDrawerOpen(true)
+  }, [nodeData])
  return (
    <AmisNodeContainerDiv className="w-64">
+      <Drawer
+        title="节点编辑"
+        open={editDrawerOpen}
+        closeIcon={false}
+        maskClosable={false}
+        destroyOnHidden
+        size="large"
+      >
+        {editDrawerForm}
+      </Drawer>
      <Card
        className="node-card"
        title={nodeName}
@@ -195,36 +324,7 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
            size="small"
            icon={<EditFilled/>}
            block
-            // @ts-ignore
-            onClick={() => editNode(
-              id,
-              [
-                {
-                  type: 'input-text',
-                  name: 'node.name',
-                  label: '节点名称',
-                  placeholder: nodeName,
-                },
-                {
-                  type: 'textarea',
-                  name: 'node.description',
-                  label: '节点描述',
-                  placeholder: nodeDescription,
-                },
-                {
-                  type: 'divider',
-                },
-                ...(
-                  columnSchema?.({
-                    inputSchema,
-                    nodeId: id,
-                    nodeData,
-                    getNodeDataById: getDataById,
-                    getAllIncomerNodeById,
-                  }) ?? []
-                ),
-              ],
-            )}
+            onClick={() => openEditDrawer()}
          />,
          <Button
            className="text-secondary"
@@ -241,14 +341,7 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
          {extraNodeDescription?.(nodeData)}
        </div>
      </Card>
-      {isNil(handlers)
-        ? <>
-          {isEqual(type, 'start') || isEqual(type, 'normal')
-            ? <Handle type="source" position={Position.Right} id="source"/> : undefined}
-          {isEqual(type, 'end') || isEqual(type, 'normal')
-            ? <Handle type="target" position={Position.Left} id="target"/> : undefined}
-        </>
-        : handlers?.(nodeData)}
+      {handler}
    </AmisNodeContainerDiv>
  )
 }
--- a/service-web/client/src/components/flow/node/CodeNode.tsx
+++ b/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)
--- a/service-web/client/src/components/flow/node/KnowledgeNode.tsx
+++ b/service-web/client/src/components/flow/node/KnowledgeNode.tsx
@@ -1,66 +1,76 @@
 import type {NodeProps} from '@xyflow/react'
-import {commonInfo} from '../../../util/amis.tsx'
-import AmisNode, {inputsFormColumns, outputsFormColumns} from './AmisNode.tsx'
 import React from 'react'
+import {commonInfo} from '../../../util/amis.tsx'
+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 KnowledgeNode = (props: NodeProps) => AmisNode({
-  nodeProps: props,
-  type: 'normal',
-  defaultNodeName: '知识库',
-  defaultNodeDescription: '查询知识库获取外部知识',
-  columnSchema: (props) => [
-    ...inputsFormColumns(props),
-    {
-      type: 'divider',
-    },
-    {
-      type: 'select',
-      name: 'knowledgeId',
-      label: '知识库',
-      required: true,
-      options: [],
-      source: {
-        method: 'get',
-        url: `${commonInfo.baseAiUrl}/knowledge/list`,
-        // @ts-ignore
-        adaptor: (payload, response, api, context) => {
-          return {
-            ...payload,
-            data: {
-              items: payload.data.items.map((item: any) => ({value: item['id'], label: item['name']})),
-            },
-          }
+const KnowledgeNode = (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()),
+        {
+          type: 'divider',
        },
-      },
-    },
-    {
-      type: 'input-text',
-      name: 'query',
-      label: '查询文本',
-      required: true,
-    },
-    {
-      type: 'input-range',
-      name: 'count',
-      label: '返回数量',
-      required: true,
-      value: 3,
-      max: 10,
-    },
-    {
-      type: 'input-range',
-      name: 'score',
-      label: '匹配阀值',
-      required: true,
-      value: 0.6,
-      max: 1,
-      step: 0.05,
-    },
-    {
-      type: 'divider',
-    },
-    ...outputsFormColumns(false, true, {result: {type: 'array-string'}}),
-  ],
-})
+        {
+          type: 'select',
+          name: 'knowledgeId',
+          label: '知识库',
+          required: true,
+          options: [],
+          source: {
+            method: 'get',
+            url: `${commonInfo.baseAiUrl}/knowledge/list`,
+            // @ts-ignore
+            adaptor: (payload, response, api, context) => {
+              return {
+                ...payload,
+                data: {
+                  items: payload.data.items.map((item: any) => ({value: item['id'], label: item['name']})),
+                },
+              }
+            },
+          },
+        },
+        {
+          type: 'input-text',
+          name: 'query',
+          label: '查询文本',
+          required: true,
+        },
+        {
+          type: 'input-range',
+          name: 'count',
+          label: '返回数量',
+          required: true,
+          value: 3,
+          max: 10,
+        },
+        {
+          type: 'input-range',
+          name: 'score',
+          label: '匹配阀值',
+          required: true,
+          value: 0.6,
+          max: 1,
+          step: 0.05,
+        },
+        {
+          type: 'divider',
+        },
+        ...outputsFormColumns(false, true, {result: {type: 'array-string'}}),
+      ]}
+      handler={<NormalNodeHandler/>}
+    />
+  )
+}

 export default React.memo(KnowledgeNode)
--- a/service-web/client/src/components/flow/node/LlmNode.tsx
+++ b/service-web/client/src/components/flow/node/LlmNode.tsx
@@ -1,51 +1,61 @@
 import type {NodeProps} from '@xyflow/react'
 import {Tag} from 'antd'
-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 modelMap: Record<string, string> = {
  qwen3: 'Qwen3',
  deepseek: 'Deepseek',
 }

-const LlmNode = (props: NodeProps) => AmisNode({
-  nodeProps: props,
-  type: 'normal',
-  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: (props) => [
-    ...inputsFormColumns(props),
-    {
-      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'}}),
-  ],
-})
+const LlmNode = (props: NodeProps) => {
+  const {getNodes, getEdges} = useFlowStore()
+  const {getData} = 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={() => [
+        ...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'}}),
+      ]}
+      handler={<NormalNodeHandler/>}
+    />
+  )
+}

 export default React.memo(LlmNode)
--- a/service-web/client/src/components/flow/node/OutputNode.tsx
+++ b/service-web/client/src/components/flow/node/OutputNode.tsx
@@ -1,13 +1,17 @@
 import type {NodeProps} from '@xyflow/react'
-import AmisNode, {outputsFormColumns} from './AmisNode.tsx'
 import React from 'react'
+import AmisNode, {EndNodeHandler, outputsFormColumns} from './AmisNode.tsx'

-const OutputNode = (props: NodeProps) => AmisNode({
-  nodeProps: props,
-  type: 'end',
-  defaultNodeName: '输出节点',
-  defaultNodeDescription: '定义输出变量',
-  columnSchema: () => outputsFormColumns(true),
-})
+const OutputNode = (props: NodeProps) => {
+  return (
+    <AmisNode
+      nodeProps={props}
+      defaultNodeName="输出节点"
+      defaultNodeDescription="定义输出变量"
+      columnSchema={() => outputsFormColumns(true)}
+      handler={<EndNodeHandler/>}
+    />
+  )
+}

 export default React.memo(OutputNode)
--- a/service-web/client/src/components/flow/node/SwitchNode.tsx
+++ b/service-web/client/src/components/flow/node/SwitchNode.tsx
@@ -15,41 +15,39 @@ const cases = [
  },
 ]

-const SwitchNode = (props: NodeProps) => AmisNode({
-  nodeProps: props,
-  type: 'normal',
-  defaultNodeName: '分支节点',
-  defaultNodeDescription: '根据不同的情况前往不同的分支',
-  columnSchema: () => [],
-  // @ts-ignore
-  extraNodeDescription: nodeData => {
-    return (
-      <div className="mt-2">
-        {cases.map(item => (
-          <div key={item.index} className="mt-1">
-            <Tag className="m-0" color="blue">分支 {item.index}</Tag>
+const SwitchNode = (props: NodeProps) => {
+  return (
+    <AmisNode
+      nodeProps={props}
+      defaultNodeName="分支节点"
+      defaultNodeDescription="根据不同的情况前往不同的分支"
+      extraNodeDescription={() => {
+        return (
+          <div className="mt-2">
+            {cases.map(item => (
+              <div key={item.index} className="mt-1">
+                <Tag className="m-0" color="blue">分支 {item.index}</Tag>
+              </div>
+            ))}
          </div>
-        ))}
-      </div>
-    )
-  },
-  // @ts-ignore
-  handlers: nodeData => {
-    return (
-      <>
-        <Handle type="target" position={Position.Left}/>
-        {cases.map((item, index) => (
-          <Handle
-            type="source"
-            position={Position.Right}
-            key={item.index}
-            id={`${item.index}`}
-            style={{top: 85 + (25 * index)}}
-          />
-        ))}
-      </>
-    )
-  },
-})
+        )
+      }}
+      handler={
+        <>
+          <Handle type="target" position={Position.Left}/>
+          {cases.map((item, index) => (
+            <Handle
+              type="source"
+              position={Position.Right}
+              key={item.index}
+              id={`${item.index}`}
+              style={{top: 85 + (25 * index)}}
+            />
+          ))}
+        </>
+      }
+    />
+  )
+}

 export default React.memo(SwitchNode)
--- a/service-web/client/src/components/flow/store/ContextStore.ts
+++ b/service-web/client/src/components/flow/store/ContextStore.ts
@@ -2,10 +2,12 @@ import {create} from 'zustand/react'

 export type ContextStoreState = {
  inputSchema: Record<string, Record<string, any>>,
+  getInputSchema: () => Record<string, Record<string, any>>,
  setInputSchema: (inputSchema: Record<string, Record<string, any>>) => void,
 }

-export const useContextStore = create<ContextStoreState>((set) => ({
+export const useContextStore = create<ContextStoreState>((set, get) => ({
  inputSchema: {},
+  getInputSchema: () => get().inputSchema,
  setInputSchema: (inputSchema: Record<string, Record<string, any>>) => set({inputSchema}),
 }))
--- a/service-web/client/src/components/flow/store/FlowStore.ts
+++ b/service-web/client/src/components/flow/store/FlowStore.ts
@@ -3,14 +3,12 @@ import {
  applyEdgeChanges,
  applyNodeChanges,
  type Edge,
-  getIncomers,
  type Node,
  type OnConnect,
  type OnEdgesChange,
  type OnNodesChange,
 } from '@xyflow/react'
-import {filter, find, isEqual, unique} from 'licia'
-import Queue from 'yocto-queue'
+import {filter, find, isEqual} from 'licia'
 import {create} from 'zustand/react'

 export type FlowStoreState = {
@@ -18,7 +16,6 @@ export type FlowStoreState = {
  getNodes: () => Node[],
  onNodesChange: OnNodesChange,
  getNodeById: (id: string) => Node | undefined,
-  getAllIncomerNodeById: (id: string) => Node[],
  addNode: (node: Node) => void,
  removeNode: (id: string) => void,
  setNodes: (nodes: Node[]) => void,
@@ -40,21 +37,6 @@ export const useFlowStore = create<FlowStoreState>((set, get) => ({
    })
  },
  getNodeById: (id: string) => find(get().nodes, node => isEqual(node.id, id)),
-  getAllIncomerNodeById: (id: string) => {
-    let nodes = get().nodes
-    let edges = get().edges
-    let queue = new Queue<Node>()
-    queue.enqueue(find(nodes, node => isEqual(node.id, id))!)
-    let result: Node[] = []
-    while (queue.size !== 0) {
-      let currentNode = queue.dequeue()!
-      for (const incomer of getIncomers(currentNode, nodes, edges)) {
-        result.push(incomer)
-        queue.enqueue(incomer)
-      }
-    }
-    return unique(result, (a, b) => isEqual(a.id, b.id))
-  },
  addNode: node => set({nodes: get().nodes.concat(node)}),
  removeNode: id => {
    set({
--- a/service-web/client/src/pages/Test.tsx
+++ b/service-web/client/src/pages/Test.tsx
@@ -1,40 +1,20 @@
-import {amisRender, commonInfo} from '../util/amis.tsx'
+import {useState} from 'react'
+import FlowEditor, {type GraphData} from '../components/flow/FlowEditor.tsx'

 function Test() {
+  const [graphData] = useState<GraphData>({
+    nodes: [],
+    edges: [],
+    data: {},
+  })
+
  return (
-    <div>
-      {amisRender(
-        {
-          debug: commonInfo.debug,
-          type: 'form',
-          canAccessSuperData: false,
-          actions: [
-            {
-              type: 'reset',
-              label: '重置',
-            },
-            {
-              type: 'submit',
-              label: '提交',
-            },
-          ],
-          body: [
-            {
-              type: 'input-file',
-              required: true,
-              name: 'files',
-              label: '数据文件',
-              autoUpload: false,
-              drag: true,
-              multiple: true,
-              accept: '*',
-              maxSize: 104857600,
-              receiver: `${commonInfo.baseAiUrl}/upload`,
-              useChunk: false,
-            },
-          ],
-        },
-      )}
+    <div className="h-screen">
+      <FlowEditor
+        inputSchema={{}}
+        graphData={graphData}
+        onGraphDataChange={data => console.log(data)}
+      />
    </div>
  )
 }