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

service-web/client/src/components/flow/FlowEditor.tsx

@@ -1,23 +1,12 @@
 import {PlusCircleFilled, RollbackOutlined, SaveFilled} from '@ant-design/icons'
-import {
+import {Background, BackgroundVariant, Controls, type Edge, MiniMap, type Node, ReactFlow} from '@xyflow/react'
-  Background,
+import {Button, Dropdown, message, Popconfirm, Space} from 'antd'
-  BackgroundVariant,
+import {arrToMap, find, isEqual, randomId} from 'licia'
-  Controls,
+import {useEffect} from 'react'
-  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 {useNavigate} from 'react-router'
 import styled from 'styled-components'
 import '@xyflow/react/dist/style.css'
-import {useShallow} from 'zustand/react/shallow'
+import {commonInfo} from '../../util/amis.tsx'
-import {amisRender, commonInfo, horizontalFormOptions} 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,22 +52,7 @@ const FlowableDiv = styled.div`
     }
 `
 
-export type GraphData = { nodes: Node[], edges: Edge[], data: any }
+const nodeDefine = [
-
-export type FlowEditorProps = {
-  inputSchema: Record<string, Record<string, any>>,
-  graphData: GraphData,
-  onGraphDataChange: (graphData: GraphData) => void,
-}
-
-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: '输出',
@@ -106,17 +78,21 @@ function FlowEditor(props: FlowEditorProps) {
     name: '条件分支',
     component: SwitchNode,
   },
-  ])
+]
-  const [open, setOpen] = useState(false)
 
-  const {data, setData, getDataById, setDataById} = useDataStore(
+export type GraphData = { nodes: Node[], edges: Edge[], data: any }
-    useShallow(state => ({
+
-      data: state.data,
+export type FlowEditorProps = {
-      setData: state.setData,
+  inputSchema: Record<string, Record<string, any>>,
-      getDataById: state.getDataById,
+  graphData: GraphData,
-      setDataById: state.setDataById,
+  onGraphDataChange: (graphData: GraphData) => void,
-    })),
+}
-  )
+
+function FlowEditor(props: FlowEditorProps) {
+  const navigate = useNavigate()
+  const [messageApi, contextHolder] = message.useMessage()
+
+  const {data, setData} = useDataStore()
   const {
     nodes,
     addNode,
@@ -126,106 +102,9 @@ function FlowEditor(props: FlowEditorProps) {
     setEdges,
     onEdgesChange,
     onConnect,
-  } = useFlowStore(
+  } = 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,
-    })),
-  )
 
-  const {
+  const {setInputSchema} = useContextStore()
-    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,
-  }
 
   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),
+          nodeDefine.map(def => def.key),
-          key => find(nodeDef, def => isEqual(key, def.key))!.component)
+          key => find(nodeDefine, def => isEqual(key, def.key))!.component)
         }
       >
         <Controls/>

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 {Button, Card, Drawer} from 'antd'
-import {has, isEmpty, isEqual, isNil} from 'licia'
+import {find, has, isEmpty, isEqual, unique} from 'licia'
-import {type JSX} from 'react'
+import {type JSX, useCallback, useState} from 'react'
 import styled from 'styled-components'
-import {horizontalFormOptions} from '../../../util/amis.tsx'
+import Queue from 'yocto-queue'
-import {useContextStore} from '../store/ContextStore.ts'
+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[] {
+export type InputFormOptionsGroup = {
-  let incomers = props.getAllIncomerNodeById(props.nodeId)
+  group: string,
-  let groups = []
+  variables: InputFormOptions[],
-  for (const incomer of incomers) {
+}
-    let data = props.getNodeDataById(incomer.id)
+
-    if (has(data, 'outputs')) {
+const getAllIncomerNodeById: (id: string, nodes: Node[], edges: Edge[]) => string[] = (id, nodes, edges) => {
-      let outputs = data?.outputs ?? []
+  let queue = new Queue<Node>()
-      groups.push({
+  queue.enqueue(find(nodes, node => isEqual(node.id, id))!)
-        label: incomer.id,
+  let result: string[] = []
-        children: Object.keys(outputs).map(key => ({
+  while (queue.size !== 0) {
-          value: `${incomer.id}.${key}`,
+    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: [
-            {
+            ...inputVariables.map(item => ({
-              label: '流程参数',
+              label: item.group,
-              children: Object.keys(props.inputSchema).map(key => ({
+              children: item.variables,
-                label: props.inputSchema[key]?.label ?? '',
-                value: key,
             })),
-            },
-            ...groups,
           ],
         },
       ],
@@ -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
+  handler: JSX.Element
-  columnSchema?: (props: ColumnsSchemaProps) => Schema[]
+  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 {
+  const {removeNode} = useFlowStore()
-    removeNode,
+  const {getDataById, setDataById} = useDataStore()
-    getAllIncomerNodeById,
+  const {id} = nodeProps
-  } = useFlowStore()
-  const {getDataById} = useDataStore()
-  const {inputSchema} = useContextStore()
-
-  const {id, data} = nodeProps
-  const {editNode} = data
   // @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={() => openEditDrawer()}
-            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,
-                  }) ?? []
-                ),
-              ],
-            )}
           />,
           <Button
             className="text-secondary"
@@ -241,14 +341,7 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
           {extraNodeDescription?.(nodeData)}
         </div>
       </Card>
-      {isNil(handlers)
+      {handler}
-        ? <>
-          {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)}
     </AmisNodeContainerDiv>
   )
 }

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

@@ -1,14 +1,21 @@
 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({
+const CodeNode = (props: NodeProps) => {
-  nodeProps: props,
+  const {getNodes, getEdges} = useFlowStore()
-  type: 'normal',
+  const {getData} = useDataStore()
-  defaultNodeName: '代码执行',
+  const {getInputSchema} = useContextStore()
-  defaultNodeDescription: '执行自定义的处理代码',
+  return (
-  columnSchema: (props) => [
+    <AmisNode
-    ...inputsFormColumns(props),
+      nodeProps={props}
+      defaultNodeName="代码执行"
+      defaultNodeDescription="执行自定义的处理代码"
+      columnSchema={() => [
+        ...inputsFormColumns(props.id, getInputSchema(), getNodes(), getEdges(), getData()),
         {
           type: 'divider',
         },
@@ -46,7 +53,10 @@ const CodeNode = (props: NodeProps) => AmisNode({
           type: 'divider',
         },
         ...outputsFormColumns(true, true, {result: {type: 'string'}}),
-  ],
+      ]}
-})
+      handler={<NormalNodeHandler/>}
+    />
+  )
+}
 
 export default React.memo(CodeNode)

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

@@ -1,15 +1,22 @@
 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({
+const KnowledgeNode = (props: NodeProps) => {
-  nodeProps: props,
+  const {getNodes, getEdges} = useFlowStore()
-  type: 'normal',
+  const {getData} = useDataStore()
-  defaultNodeName: '知识库',
+  const {getInputSchema} = useContextStore()
-  defaultNodeDescription: '查询知识库获取外部知识',
+  return (
-  columnSchema: (props) => [
+    <AmisNode
-    ...inputsFormColumns(props),
+      nodeProps={props}
+      defaultNodeName="知识库"
+      defaultNodeDescription="查询知识库获取外部知识"
+      columnSchema={() => [
+        ...inputsFormColumns(props.id, getInputSchema(), getNodes(), getEdges(), getData()),
         {
           type: 'divider',
         },
@@ -60,7 +67,10 @@ const KnowledgeNode = (props: NodeProps) => AmisNode({
           type: 'divider',
         },
         ...outputsFormColumns(false, true, {result: {type: 'array-string'}}),
-  ],
+      ]}
-})
+      handler={<NormalNodeHandler/>}
+    />
+  )
+}
 
 export default React.memo(KnowledgeNode)

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

@@ -1,19 +1,26 @@
 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({
+const LlmNode = (props: NodeProps) => {
-  nodeProps: props,
+  const {getNodes, getEdges} = useFlowStore()
-  type: 'normal',
+  const {getData} = useDataStore()
-  defaultNodeName: '大模型',
+  const {getInputSchema} = useContextStore()
-  defaultNodeDescription: '使用大模型对话',
+  return (
-  extraNodeDescription: nodeData => {
+    <AmisNode
+      nodeProps={props}
+      defaultNodeName="大模型"
+      defaultNodeDescription="使用大模型对话"
+      extraNodeDescription={nodeData => {
         const model = nodeData?.model as string | undefined
         return model
           ? <div className="mt-2 flex justify-between">
@@ -21,9 +28,9 @@ const LlmNode = (props: NodeProps) => AmisNode({
             <Tag className="m-0" color="blue">{modelMap[model]}</Tag>
           </div>
           : <></>
-  },
+      }}
-  columnSchema: (props) => [
+      columnSchema={() => [
-    ...inputsFormColumns(props),
+        ...inputsFormColumns(props.id, getInputSchema(), getNodes(), getEdges(), getData()),
         {
           type: 'divider',
         },
@@ -45,7 +52,10 @@ const LlmNode = (props: NodeProps) => AmisNode({
           type: 'divider',
         },
         ...outputsFormColumns(false, true, {text: {type: 'string'}}),
-  ],
+      ]}
-})
+      handler={<NormalNodeHandler/>}
+    />
+  )
+}
 
 export default React.memo(LlmNode)

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({
+const OutputNode = (props: NodeProps) => {
-  nodeProps: props,
+  return (
-  type: 'end',
+    <AmisNode
-  defaultNodeName: '输出节点',
+      nodeProps={props}
-  defaultNodeDescription: '定义输出变量',
+      defaultNodeName="输出节点"
-  columnSchema: () => outputsFormColumns(true),
+      defaultNodeDescription="定义输出变量"
-})
+      columnSchema={() => outputsFormColumns(true)}
+      handler={<EndNodeHandler/>}
+    />
+  )
+}
 
 export default React.memo(OutputNode)

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

@@ -15,14 +15,13 @@ const cases = [
   },
 ]
 
-const SwitchNode = (props: NodeProps) => AmisNode({
+const SwitchNode = (props: NodeProps) => {
-  nodeProps: props,
+  return (
-  type: 'normal',
+    <AmisNode
-  defaultNodeName: '分支节点',
+      nodeProps={props}
-  defaultNodeDescription: '根据不同的情况前往不同的分支',
+      defaultNodeName="分支节点"
-  columnSchema: () => [],
+      defaultNodeDescription="根据不同的情况前往不同的分支"
-  // @ts-ignore
+      extraNodeDescription={() => {
-  extraNodeDescription: nodeData => {
         return (
           <div className="mt-2">
             {cases.map(item => (
@@ -32,10 +31,8 @@ const SwitchNode = (props: NodeProps) => AmisNode({
             ))}
           </div>
         )
-  },
+      }}
-  // @ts-ignore
+      handler={
-  handlers: nodeData => {
-    return (
         <>
           <Handle type="target" position={Position.Left}/>
           {cases.map((item, index) => (
@@ -48,8 +45,9 @@ const SwitchNode = (props: NodeProps) => AmisNode({
             />
           ))}
         </>
+      }
+    />
   )
-  },
+}
-})
 
 export default React.memo(SwitchNode)

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}),
 }))

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 {filter, find, isEqual} from 'licia'
-import Queue from 'yocto-queue'
 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({

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>
+    <div className="h-screen">
-      {amisRender(
+      <FlowEditor
-        {
+        inputSchema={{}}
-          debug: commonInfo.debug,
+        graphData={graphData}
-          type: 'form',
+        onGraphDataChange={data => console.log(data)}
-          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>
   )
 }