feat(web): 正式提取流程设计能力到AI目录下，做代码拆分

service-web/client/src/pages/Test.tsx

@@ -1,486 +1,6 @@
-import {DeleteFilled, EditFilled, PlusCircleFilled, SaveFilled} from '@ant-design/icons'
-import {
-  addEdge,
-  applyEdgeChanges,
-  applyNodeChanges,
-  Background,
-  BackgroundVariant,
-  Controls,
-  type Edge,
-  Handle,
-  MiniMap,
-  type Node,
-  type NodeProps,
-  type OnConnect,
-  type OnEdgesChange,
-  type OnNodesChange,
-  Position,
-  ReactFlow,
-} from '@xyflow/react'
-import {useMount} from 'ahooks'
-import type {Schema} from 'amis'
-import {Button, Card, Drawer, Dropdown, message, Space} from 'antd'
-import {arrToMap, filter, find, findIdx, isEqual, isNil, randomId} from 'licia'
-import {type JSX, useState} from 'react'
-import styled from 'styled-components'
-import '@xyflow/react/dist/style.css'
-import {create} from 'zustand/react'
-import {amisRender, commonInfo} from '../util/amis.tsx'
-
-const FlowableDiv = styled.div`
-    height: 93vh;
-
-    .toolbar {
-        z-index: 999;
-        position: absolute;
-    }
-
-    .node-card {
-        cursor: grab;
-
-        .card-container {
-            cursor: default;
-        }
-    }
-`
-
-type AmisNodeType = 'normal' | 'start' | 'end'
-
-const AmisNode = (
-  props: NodeProps,
-  type: AmisNodeType,
-  name: String,
-  description?: String,
-  columnSchema?: Schema[],
-) => {
-  const {id, data} = props
-  const {getDataById, removeNode, editNode} = data
-  return (
-    <div className="p-1 w-64">
-      <Card
-        className="node-card"
-        title={name}
-        size="small"
-        hoverable
-      >
-        <Dropdown
-          className="card-container"
-          trigger={['contextMenu']}
-          menu={{
-            items: [
-              {
-                key: 'edit',
-                label: '编辑',
-                icon: <EditFilled className="text-gray-600 hover:text-blue-500"/>,
-              },
-              {
-                key: 'remove',
-                label: '删除',
-                icon: <DeleteFilled className="text-red-500 hover:text-red-500"/>,
-              },
-            ],
-            onClick: menu => {
-              switch (menu.key) {
-                case 'edit':
-                  // @ts-ignore
-                  editNode(id, name, description, columnSchema)
-                  break
-                case 'remove':
-                  // @ts-ignore
-                  removeNode(id)
-                  break
-              }
-            },
-          }}
-        >
-          <div className="card-description p-2 text-secondary text-sm">
-            {description}
-          </div>
-        </Dropdown>
-      </Card>
-      {isEqual(type, 'start') || isEqual(type, 'normal')
-        ? <Handle type="source" position={Position.Right}/> : undefined}
-      {isEqual(type, 'end') || isEqual(type, 'normal')
-        ? <Handle type="target" position={Position.Left}/> : undefined}
-    </div>
-  )
-}
-
-const StartAmisNode = (props: NodeProps) => AmisNode(
-  props,
-  'start',
-  '开始节点',
-  '定义输入变量',
-  [
-    {
-      type: 'input-kvs',
-      name: 'fields',
-      addButtonText: '新增入参',
-      draggable: false,
-      keyItem: {
-        label: '参数名称',
-      },
-      valueItems: [
-        {
-          type: 'input-text',
-          name: 'description',
-          label: '参数描述',
-        },
-        {
-          type: 'select',
-          name: 'type',
-          label: '参数类型',
-          required: true,
-          selectFirst: true,
-          options: [
-            {
-              label: '文本',
-              value: 'text',
-            },
-            {
-              label: '数字',
-              value: 'number',
-            },
-            {
-              label: '文件',
-              value: 'files',
-            },
-          ],
-        },
-      ],
-    },
-  ],
-)
-const EndAmisNode = (props: NodeProps) => AmisNode(
-  props,
-  'end',
-  '结束节点',
-  '定义输出变量',
-  [
-    {
-      type: 'input-kvs',
-      name: 'fields',
-      addButtonText: '新增输出',
-      draggable: false,
-      keyItem: {
-        label: '参数名称',
-      },
-      valueItems: [
-        {
-          type: 'select',
-          name: 'type',
-          label: '参数',
-          required: true,
-          selectFirst: true,
-          options: [],
-        },
-      ],
-    },
-  ],
-)
-const LlmAmisNode = (props: NodeProps) => AmisNode(
-  props,
-  'normal',
-  '大模型节点',
-  '使用大模型对话',
-  [
-    {
-      type: 'select',
-      name: 'model',
-      label: '大模型',
-      required: true,
-      selectFirst: true,
-      options: [
-        {
-          label: 'Qwen3',
-          value: 'qwen3',
-        },
-        {
-          label: 'Deepseek',
-          value: 'deepseek',
-        },
-      ],
-    },
-    {
-      type: 'textarea',
-      name: 'systemPrompt',
-      label: '系统提示词',
-      required: true,
-    },
-  ],
-)
-
-const initialNodes: Node[] = [
-  {
-    id: 'BMFP3Eov94',
-    type: 'start-amis-node',
-    position: {x: 10, y: 100},
-    data: {},
-  },
-  {
-    id: 'PYK8LjduQ1',
-    type: 'end-amis-node',
-    position: {x: 500, y: 100},
-    data: {},
-  },
-]
-const initialEdges: Edge[] = []
-
-const useStore = create<{
-  data: Record<string, any>,
-  getData: () => Record<string, any>,
-  setData: (data: Record<string, any>) => void,
-  getDataById: (id: string) => any,
-  setDataById: (id: string, data: any) => void,
-}>((set, get) => ({
-  data: {},
-  getData: () => get().data,
-  setData: (data) => set(data),
-  getDataById: id => get().data[id],
-  setDataById: (id, data) => {
-    let updateData = get().data
-    updateData[id] = data
-    set({
-      data: updateData,
-    })
-  },
-}))
-
-const useFlowStore = create<{
-  nodes: Node[],
-  onNodesChange: OnNodesChange,
-  addNode: (node: Node) => void,
-  removeNode: (id: string) => void,
-  setNodes: (nodes: Node[]) => void,
-
-  edges: Edge[],
-  onEdgesChange: OnEdgesChange,
-  setEdges: (edges: Edge[]) => void,
-
-  onConnect: OnConnect,
-}>((set, get) => ({
-  nodes: [],
-  onNodesChange: changes => {
-    set({
-      nodes: applyNodeChanges(changes, get().nodes),
-    })
-  },
-  addNode: node => set({nodes: get().nodes.concat(node)}),
-  removeNode: id => {
-    set({
-      nodes: filter(get().nodes, node => !isEqual(node.id, id)),
-    })
-  },
-  setNodes: nodes => set({nodes}),
-
-  edges: [],
-  onEdgesChange: changes => {
-    set({
-      edges: applyEdgeChanges(changes, get().edges),
-    })
-  },
-  setEdges: edges => set({edges}),
-
-  onConnect: connection => {
-    set({
-      edges: addEdge(connection, get().edges),
-    })
-  },
-}))
-
 function Test() {
-  const [messageApi, contextHolder] = message.useMessage()
-  const [nodeDef] = useState<{
-    key: string,
-    name: string,
-    component: (props: NodeProps) => JSX.Element
-  }[]>([
-    {
-      key: 'start-amis-node',
-      name: '开始',
-      component: StartAmisNode,
-    },
-    {
-      key: 'end-amis-node',
-      name: '结束',
-      component: EndAmisNode,
-    },
-    {
-      key: 'llm-amis-node',
-      name: '大模型',
-      component: LlmAmisNode,
-    },
-  ])
-  const [open, setOpen] = useState(false)
-
-  const {getData, getDataById, setDataById} = useStore()
-  const {
-    nodes,
-    addNode,
-    removeNode,
-    setNodes,
-    onNodesChange,
-    edges,
-    setEdges,
-    onEdgesChange,
-    onConnect,
-  } = useFlowStore()
-
-  const [currentNodeForm, setCurrentNodeForm] = useState<JSX.Element>()
-  const editNode = (id: string, name: string, description: string, columnSchema?: Schema[]) => {
-    if (!isNil(columnSchema)) {
-      setCurrentNodeForm(
-        amisRender(
-          {
-            type: 'wrapper',
-            size: 'none',
-            body: [
-              {
-                type: 'tpl',
-                className: 'text-secondary',
-                tpl: description,
-              },
-              {
-                debug: commonInfo.debug,
-                title: name,
-                type: 'form',
-                wrapWithPanel: false,
-                onEvent: {
-                  submitSucc: {
-                    actions: [
-                      {
-                        actionType: 'custom',
-                        // @ts-ignore
-                        script: (context, action, event) => {
-                          setDataById(id, context.props.data)
-                          setOpen(false)
-                        },
-                      },
-                    ],
-                  },
-                },
-                body: [
-                  ...(columnSchema ?? []),
-                  {
-                    type: 'wrapper',
-                    size: 'none',
-                    className: 'space-x-1 float-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)
-    }
-  }
-
-  useMount(() => {
-    for (let node of initialNodes) {
-      node.data = {
-        getDataById,
-        setDataById,
-        removeNode,
-        editNode,
-      }
-    }
-    setNodes(initialNodes)
-    setEdges(initialEdges)
-  })
-
   return (
-    <FlowableDiv>
-      {contextHolder}
-      <Space className="toolbar">
-        <Button type="primary" onClick={() => console.log(JSON.stringify(getData()))}>
-          <SaveFilled/>
-          保存
-        </Button>
-        <Dropdown
-          menu={{
-            items: nodeDef.map(def => ({key: def.key, label: def.name})),
-            onClick: ({key}) => {
-              if (isEqual(key, 'start-amis-node') && findIdx(nodes, (node: Node) => isEqual(key, node.type)) > -1) {
-                messageApi.error('只能存在1个开始节点')
-                return
-              }
-              if (isEqual(key, 'end-amis-node') && findIdx(nodes, (node: Node) => isEqual(key, node.type)) > -1) {
-                messageApi.error('只能存在1个结束节点')
-                return
-              }
-
-              addNode({
-                id: randomId(10),
-                type: key,
-                position: {x: 100, y: 100},
-                data: {
-                  getDataById,
-                  setDataById,
-                  removeNode,
-                  editNode,
-                },
-              })
-            },
-          }}
-        >
-          <Button type="dashed">
-            <PlusCircleFilled/>
-            新增节点
-          </Button>
-        </Dropdown>
-      </Space>
-      <Drawer
-        title="节点编辑"
-        open={open}
-        closeIcon={false}
-        maskClosable={false}
-        destroyOnHidden
-      >
-        {currentNodeForm}
-      </Drawer>
-      <ReactFlow
-        nodes={nodes}
-        edges={edges}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        onConnect={onConnect}
-        // @ts-ignore
-        nodeTypes={arrToMap(
-          nodeDef.map(def => def.key),
-          key => find(nodeDef, def => isEqual(key, def.key))!.component)
-        }
-      >
-        <Controls/>
-        <MiniMap/>
-        <Background variant={BackgroundVariant.Cross} gap={20} size={3}/>
-      </ReactFlow>
-    </FlowableDiv>
+    <div>Test</div>
   )
 }
 

service-web/client/src/pages/ai/flow/FlowEditor.tsx

@@ -0,0 +1,255 @@
+import {PlusCircleFilled, SaveFilled} from '@ant-design/icons'
+import {
+  Background,
+  BackgroundVariant,
+  Controls,
+  type Edge,
+  MiniMap,
+  type Node,
+  type NodeProps,
+  ReactFlow,
+} from '@xyflow/react'
+import {useMount} from 'ahooks'
+import type {Schema} from 'amis'
+import {Button, Drawer, Dropdown, message, Space} from 'antd'
+import {arrToMap, find, findIdx, isEqual, isNil, randomId} from 'licia'
+import {type JSX, useState} from 'react'
+import styled from 'styled-components'
+import '@xyflow/react/dist/style.css'
+import {amisRender, commonInfo} from '../../../util/amis.tsx'
+import StartNode from './node/StartNode.tsx'
+import EndNode from './node/EndNode.tsx'
+import LlmNode from './node/LlmNode.tsx'
+import {useDataStore} from './store/DataStore.ts'
+import {useFlowStore} from './store/FlowStore.ts'
+
+const FlowableDiv = styled.div`
+    height: 93vh;
+
+    .toolbar {
+        z-index: 999;
+        position: absolute;
+    }
+
+    .node-card {
+        cursor: grab;
+
+        .card-container {
+            cursor: default;
+        }
+    }
+`
+
+const initialNodes: Node[] = [
+  {
+    id: 'BMFP3Eov94',
+    type: 'start-amis-node',
+    position: {x: 10, y: 100},
+    data: {},
+  },
+  {
+    id: 'PYK8LjduQ1',
+    type: 'end-amis-node',
+    position: {x: 500, y: 100},
+    data: {},
+  },
+]
+const initialEdges: Edge[] = []
+
+function FlowEditor() {
+  const [messageApi, contextHolder] = message.useMessage()
+  const [nodeDef] = useState<{
+    key: string,
+    name: string,
+    component: (props: NodeProps) => JSX.Element
+  }[]>([
+    {
+      key: 'start-amis-node',
+      name: '开始',
+      component: StartNode,
+    },
+    {
+      key: 'end-amis-node',
+      name: '结束',
+      component: EndNode,
+    },
+    {
+      key: 'llm-amis-node',
+      name: '大模型',
+      component: LlmNode,
+    },
+  ])
+  const [open, setOpen] = useState(false)
+
+  const {getData, getDataById, setDataById} = useDataStore()
+  const {
+    nodes,
+    addNode,
+    removeNode,
+    setNodes,
+    onNodesChange,
+    edges,
+    setEdges,
+    onEdgesChange,
+    onConnect,
+  } = useFlowStore()
+
+  const [currentNodeForm, setCurrentNodeForm] = useState<JSX.Element>()
+  const editNode = (id: string, name: string, description: string, columnSchema?: Schema[]) => {
+    if (!isNil(columnSchema)) {
+      setCurrentNodeForm(
+        amisRender(
+          {
+            type: 'wrapper',
+            size: 'none',
+            body: [
+              {
+                type: 'tpl',
+                className: 'text-secondary',
+                tpl: description,
+              },
+              {
+                debug: commonInfo.debug,
+                title: name,
+                type: 'form',
+                wrapWithPanel: false,
+                onEvent: {
+                  submitSucc: {
+                    actions: [
+                      {
+                        actionType: 'custom',
+                        // @ts-ignore
+                        script: (context, action, event) => {
+                          setDataById(id, context.props.data)
+                          setOpen(false)
+                        },
+                      },
+                    ],
+                  },
+                },
+                body: [
+                  ...(columnSchema ?? []),
+                  {
+                    type: 'wrapper',
+                    size: 'none',
+                    className: 'space-x-1 float-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)
+    }
+  }
+
+  useMount(() => {
+    for (let node of initialNodes) {
+      node.data = {
+        getDataById,
+        setDataById,
+        removeNode,
+        editNode,
+      }
+    }
+    setNodes(initialNodes)
+    setEdges(initialEdges)
+  })
+
+  return (
+    <FlowableDiv>
+      {contextHolder}
+      <Space className="toolbar">
+        <Button type="primary" onClick={() => console.log(JSON.stringify(getData()))}>
+          <SaveFilled/>
+          保存
+        </Button>
+        <Dropdown
+          menu={{
+            items: nodeDef.map(def => ({key: def.key, label: def.name})),
+            onClick: ({key}) => {
+              if (isEqual(key, 'start-amis-node') && findIdx(nodes, (node: Node) => isEqual(key, node.type)) > -1) {
+                messageApi.error('只能存在1个开始节点')
+                return
+              }
+              if (isEqual(key, 'end-amis-node') && findIdx(nodes, (node: Node) => isEqual(key, node.type)) > -1) {
+                messageApi.error('只能存在1个结束节点')
+                return
+              }
+
+              addNode({
+                id: randomId(10),
+                type: key,
+                position: {x: 100, y: 100},
+                data: {
+                  getDataById,
+                  setDataById,
+                  removeNode,
+                  editNode,
+                },
+              })
+            },
+          }}
+        >
+          <Button type="dashed">
+            <PlusCircleFilled/>
+            新增节点
+          </Button>
+        </Dropdown>
+      </Space>
+      <Drawer
+        title="节点编辑"
+        open={open}
+        closeIcon={false}
+        maskClosable={false}
+        destroyOnHidden
+      >
+        {currentNodeForm}
+      </Drawer>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        // @ts-ignore
+        nodeTypes={arrToMap(
+          nodeDef.map(def => def.key),
+          key => find(nodeDef, def => isEqual(key, def.key))!.component)
+        }
+      >
+        <Controls/>
+        <MiniMap/>
+        <Background variant={BackgroundVariant.Cross} gap={20} size={3}/>
+      </ReactFlow>
+    </FlowableDiv>
+  )
+}
+
+export default FlowEditor

service-web/client/src/pages/ai/flow/node/AmisNode.tsx

@@ -0,0 +1,69 @@
+import {Handle, type NodeProps, Position} from '@xyflow/react'
+import type {Schema} from 'amis'
+import {Card, Dropdown} from 'antd'
+import {DeleteFilled, EditFilled} from '@ant-design/icons'
+import {isEqual} from 'licia'
+
+export type AmisNodeType = 'normal' | 'start' | 'end'
+
+const AmisNode = (
+  props: NodeProps,
+  type: AmisNodeType,
+  name: String,
+  description?: String,
+  columnSchema?: Schema[],
+) => {
+  const {id, data} = props
+  const {getDataById, removeNode, editNode} = data
+  return (
+    <div className="p-1 w-64">
+      <Card
+        className="node-card"
+        title={name}
+        size="small"
+        hoverable
+      >
+        <Dropdown
+          className="card-container"
+          trigger={['contextMenu']}
+          menu={{
+            items: [
+              {
+                key: 'edit',
+                label: '编辑',
+                icon: <EditFilled className="text-gray-600 hover:text-blue-500"/>,
+              },
+              {
+                key: 'remove',
+                label: '删除',
+                icon: <DeleteFilled className="text-red-500 hover:text-red-500"/>,
+              },
+            ],
+            onClick: menu => {
+              switch (menu.key) {
+                case 'edit':
+                  // @ts-ignore
+                  editNode(id, name, description, columnSchema)
+                  break
+                case 'remove':
+                  // @ts-ignore
+                  removeNode(id)
+                  break
+              }
+            },
+          }}
+        >
+          <div className="card-description p-2 text-secondary text-sm">
+            {description}
+          </div>
+        </Dropdown>
+      </Card>
+      {isEqual(type, 'start') || isEqual(type, 'normal')
+        ? <Handle type="source" position={Position.Right}/> : undefined}
+      {isEqual(type, 'end') || isEqual(type, 'normal')
+        ? <Handle type="target" position={Position.Left}/> : undefined}
+    </div>
+  )
+}
+
+export default AmisNode

service-web/client/src/pages/ai/flow/node/EndNode.tsx

@@ -0,0 +1,32 @@
+import type {NodeProps} from '@xyflow/react'
+import AmisNode from './AmisNode.tsx'
+
+const EndNode = (props: NodeProps) => AmisNode(
+  props,
+  'end',
+  '结束节点',
+  '定义输出变量',
+  [
+    {
+      type: 'input-kvs',
+      name: 'fields',
+      addButtonText: '新增输出',
+      draggable: false,
+      keyItem: {
+        label: '参数名称',
+      },
+      valueItems: [
+        {
+          type: 'select',
+          name: 'type',
+          label: '参数',
+          required: true,
+          selectFirst: true,
+          options: [],
+        },
+      ],
+    },
+  ],
+)
+
+export default EndNode

service-web/client/src/pages/ai/flow/node/LlmNode.tsx

@@ -0,0 +1,36 @@
+import type {NodeProps} from '@xyflow/react'
+import AmisNode from './AmisNode.tsx'
+
+const LlmNode = (props: NodeProps) => AmisNode(
+  props,
+  'normal',
+  '大模型节点',
+  '使用大模型对话',
+  [
+    {
+      type: 'select',
+      name: 'model',
+      label: '大模型',
+      required: true,
+      selectFirst: true,
+      options: [
+        {
+          label: 'Qwen3',
+          value: 'qwen3',
+        },
+        {
+          label: 'Deepseek',
+          value: 'deepseek',
+        },
+      ],
+    },
+    {
+      type: 'textarea',
+      name: 'systemPrompt',
+      label: '系统提示词',
+      required: true,
+    },
+  ],
+)
+
+export default LlmNode

service-web/client/src/pages/ai/flow/node/StartNode.tsx

@@ -0,0 +1,50 @@
+import type {NodeProps} from '@xyflow/react'
+import AmisNode from './AmisNode.tsx'
+
+const StartNode = (props: NodeProps) => AmisNode(
+  props,
+  'start',
+  '开始节点',
+  '定义输入变量',
+  [
+    {
+      type: 'input-kvs',
+      name: 'fields',
+      addButtonText: '新增入参',
+      draggable: false,
+      keyItem: {
+        label: '参数名称',
+      },
+      valueItems: [
+        {
+          type: 'input-text',
+          name: 'description',
+          label: '参数描述',
+        },
+        {
+          type: 'select',
+          name: 'type',
+          label: '参数类型',
+          required: true,
+          selectFirst: true,
+          options: [
+            {
+              label: '文本',
+              value: 'text',
+            },
+            {
+              label: '数字',
+              value: 'number',
+            },
+            {
+              label: '文件',
+              value: 'files',
+            },
+          ],
+        },
+      ],
+    },
+  ],
+)
+
+export default StartNode

service-web/client/src/pages/ai/flow/store/DataStore.ts

@@ -0,0 +1,21 @@
+import {create} from 'zustand/react'
+
+export const useDataStore = create<{
+  data: Record<string, any>,
+  getData: () => Record<string, any>,
+  setData: (data: Record<string, any>) => void,
+  getDataById: (id: string) => any,
+  setDataById: (id: string, data: any) => void,
+}>((set, get) => ({
+  data: {},
+  getData: () => get().data,
+  setData: (data) => set(data),
+  getDataById: id => get().data[id],
+  setDataById: (id, data) => {
+    let updateData = get().data
+    updateData[id] = data
+    set({
+      data: updateData,
+    })
+  },
+}))

service-web/client/src/pages/ai/flow/store/FlowStore.ts

@@ -0,0 +1,54 @@
+import {create} from 'zustand/react'
+import {
+  addEdge,
+  applyEdgeChanges,
+  applyNodeChanges,
+  type Edge,
+  type Node,
+  type OnConnect,
+  type OnEdgesChange,
+  type OnNodesChange
+} from '@xyflow/react'
+import {filter, isEqual} from 'licia'
+
+export const useFlowStore = create<{
+  nodes: Node[],
+  onNodesChange: OnNodesChange,
+  addNode: (node: Node) => void,
+  removeNode: (id: string) => void,
+  setNodes: (nodes: Node[]) => void,
+
+  edges: Edge[],
+  onEdgesChange: OnEdgesChange,
+  setEdges: (edges: Edge[]) => void,
+
+  onConnect: OnConnect,
+}>((set, get) => ({
+  nodes: [],
+  onNodesChange: changes => {
+    set({
+      nodes: applyNodeChanges(changes, get().nodes),
+    })
+  },
+  addNode: node => set({nodes: get().nodes.concat(node)}),
+  removeNode: id => {
+    set({
+      nodes: filter(get().nodes, node => !isEqual(node.id, id)),
+    })
+  },
+  setNodes: nodes => set({nodes}),
+
+  edges: [],
+  onEdgesChange: changes => {
+    set({
+      edges: applyEdgeChanges(changes, get().edges),
+    })
+  },
+  setEdges: edges => set({edges}),
+
+  onConnect: connection => {
+    set({
+      edges: addEdge(connection, get().edges),
+    })
+  },
+}))

service-web/client/src/route.tsx

@@ -4,6 +4,7 @@ import {
   ClusterOutlined,
   CompressOutlined,
   DatabaseOutlined,
+  GatewayOutlined,
   InfoCircleOutlined,
   OpenAIOutlined,
   QuestionOutlined,
@@ -32,6 +33,7 @@ import Yarn from './pages/overview/Yarn.tsx'
 import YarnCluster from './pages/overview/YarnCluster.tsx'
 import Test from './pages/Test.tsx'
 import {commonInfo} from './util/amis.tsx'
+import FlowEditor from './pages/ai/flow/FlowEditor.tsx'
 
 export const routes: RouteObject[] = [
   {
@@ -109,6 +111,10 @@ export const routes: RouteObject[] = [
             path: 'knowledge/detail/:knowledge_id/segment/:group_id',
             Component: DataSegment,
           },
+          {
+            path: 'flowable',
+            Component: FlowEditor,
+          },
         ],
       },
       {
@@ -211,6 +217,11 @@ export const menus = {
           name: '知识库',
           icon: <DatabaseOutlined/>,
         },
+        {
+          path: '/ai/flowable',
+          name: '流程编排',
+          icon: <GatewayOutlined/>,
+        },
       ],
     },
   ],