feat(web): 增加流程图连线限制

service-web/client/package.json

@@ -16,6 +16,7 @@
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@lightenna/react-mermaid-diagram": "^1.0.20",
     "@tinyflow-ai/react": "^0.2.1",
+    "@xyflow/react": "^12.7.0",
     "ahooks": "^3.8.5",
     "amis": "^6.12.0",
     "antd": "^5.26.1",
@@ -30,7 +31,8 @@
     "react-dom": "^18.3.1",
     "react-markdown": "^10.1.0",
     "react-router": "^7.6.2",
-    "styled-components": "^6.1.18"
+    "styled-components": "^6.1.18",
+    "zustand": "^5.0.5"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",

service-web/client/pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       '@tinyflow-ai/react':
         specifier: ^0.2.1
         version: 0.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(svelte@5.28.2)
+      '@xyflow/react':
+        specifier: ^12.7.0
+        version: 12.7.0(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       ahooks:
         specifier: ^3.8.5
         version: 3.8.5(react@18.3.1)
@@ -74,6 +77,9 @@ importers:
       styled-components:
         specifier: ^6.1.18
         version: 6.1.18(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      zustand:
+        specifier: ^5.0.5
+        version: 5.0.5(@types/react@18.3.23)(react@18.3.1)(use-sync-external-store@1.5.0(react@18.3.1))
     devDependencies:
       '@types/markdown-it':
         specifier: ^14.1.2
@@ -1092,6 +1098,12 @@ packages:
     peerDependencies:
       vite: ^4 || ^5 || ^6 || ^7.0.0-beta.0
 
+  '@xyflow/react@12.7.0':
+    resolution: {integrity: sha512-U6VMEbYjiCg1byHrR7S+b5ZdHTjgCFX4KpBc634G/WtEBUvBLoMQdlCD6uJHqodnOAxpt3+G2wiDeTmXAFJzgQ==}
+    peerDependencies:
+      react: '>=17'
+      react-dom: '>=17'
+
   '@xyflow/svelte@0.1.39':
     resolution: {integrity: sha512-QZ5mzNysvJeJW7DxmqI4Urhhef9tclqtPr7WAS5zQF5Gk6k9INwzey4CYNtEZo8XMj9H8lzgoJRmgMPnJEc1kw==}
     peerDependencies:
@@ -1100,6 +1112,9 @@ packages:
   '@xyflow/system@0.0.59':
     resolution: {integrity: sha512-+xgqYhoBv5F10TQx0SiKZR/DcWtuxFYR+e/LluHb7DMtX4SsMDutZWEJ4da4fDco25jZxw5G9fOlmk7MWvYd5Q==}
 
+  '@xyflow/system@0.0.62':
+    resolution: {integrity: sha512-Z2ufbnvuYxIOCGyzE/8eX8TAEM8Lpzc/JafjD1Tzy6ZJs/E7KGVU17Q1F5WDHVW+dbztJAdyXMG0ejR9bwSUAA==}
+
   abbrev@1.1.1:
     resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
 
@@ -3599,6 +3614,39 @@ packages:
   zrender@5.6.0:
     resolution: {integrity: sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==}
 
+  zustand@4.5.7:
+    resolution: {integrity: sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0.6'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+
+  zustand@5.0.5:
+    resolution: {integrity: sha512-mILtRfKW9xM47hqxGIxCv12gXusoY/xTSHBYApXozR0HmQv299whhBeeAcRy+KrPPybzosvJBCOmVjq6x12fCg==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
@@ -4613,6 +4661,17 @@ snapshots:
     transitivePeerDependencies:
       - '@swc/helpers'
 
+  '@xyflow/react@12.7.0(@types/react@18.3.23)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@xyflow/system': 0.0.62
+      classcat: 5.0.5
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      zustand: 4.5.7(@types/react@18.3.23)(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - immer
+
   '@xyflow/svelte@0.1.39(svelte@5.28.2)':
     dependencies:
       '@svelte-put/shortcut': 3.1.1(svelte@5.28.2)
@@ -4630,6 +4689,18 @@ snapshots:
       d3-selection: 3.0.0
       d3-zoom: 3.0.0
 
+  '@xyflow/system@0.0.62':
+    dependencies:
+      '@types/d3-drag': 3.0.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+
   abbrev@1.1.1:
     optional: true
 
@@ -7708,4 +7779,17 @@ snapshots:
     dependencies:
       tslib: 2.3.0
 
+  zustand@4.5.7(@types/react@18.3.23)(react@18.3.1):
+    dependencies:
+      use-sync-external-store: 1.5.0(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.23
+      react: 18.3.1
+
+  zustand@5.0.5(@types/react@18.3.23)(react@18.3.1)(use-sync-external-store@1.5.0(react@18.3.1)):
+    optionalDependencies:
+      '@types/react': 18.3.23
+      react: 18.3.1
+      use-sync-external-store: 1.5.0(react@18.3.1)
+
   zwitch@2.0.4: {}

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

@@ -1,14 +1,26 @@
 import {ProLayout} from '@ant-design/pro-components'
+import {ConfigProvider} from 'antd'
 import React from 'react'
 import {Outlet, useLocation, useNavigate} from 'react-router'
 import {menus} from '../route.tsx'
 
+const apps: { title: string, desc: string, url: string, icon?: string }[] = [
+  {
+    icon: 'http://132.126.207.124:8686/udal-manager/static/favicon.ico',
+    title: 'CSV-HUDI处理平台',
+    desc: 'Hudi 批量割接、稽核任务管理平台',
+    url: 'http://132.126.207.124:8686/udal-manager/',
+  },
+]
+
 const App: React.FC = () => {
   const navigate = useNavigate()
   const location = useLocation()
   return (
     <ProLayout
       token={{
+        colorTextAppListIcon: '#dfdfdf',
+        colorTextAppListIconHover: '#ffffff',
         header: {
           colorBgHeader: '#292f33',
           colorHeaderTitle: '#ffffff',
@@ -20,6 +32,8 @@ const App: React.FC = () => {
           colorTextRightActionsItem: '#dfdfdf',
         },
       }}
+      appList={apps}
+      disableMobile={true}
       logo={<img src="icon.png" alt="logo"/>}
       title="Hudi 服务总台"
       route={menus}
@@ -33,8 +47,19 @@ const App: React.FC = () => {
       splitMenus={true}
       style={{minHeight: '100vh'}}
       contentStyle={{backgroundColor: 'white', padding: '10px 10px 10px 20px'}}
+    >
+      <ConfigProvider
+        theme={{
+          components: {
+            Card: {
+              bodyPadding: 0,
+              bodyPaddingSM: 0,
+            },
+          },
+        }}
       >
         <Outlet/>
+      </ConfigProvider>
     </ProLayout>
   )
 }

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

@@ -1,18 +1,6 @@
-import {Tinyflow} from '@tinyflow-ai/react'
-import '@tinyflow-ai/react/dist/index.css'
-
 function Test() {
   return (
-    <div className="flowable">
+    <div>Test</div>
-      <Tinyflow
-        className="tinyflow-instance"
-        style={{height: '95vh'}}
-        onDataChange={(value) => {
-          console.log(value)
-          console.log(JSON.stringify(value))
-        }}
-      />
-    </div>
   )
 }
 

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

@@ -0,0 +1,378 @@
+import {PlusCircleFilled, SaveFilled} from '@ant-design/icons'
+import {
+  Background,
+  BackgroundVariant,
+  type Connection,
+  Controls,
+  getIncomers,
+  getOutgoers,
+  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, horizontalFormOptions} from '../../../util/amis.tsx'
+import EndNode from './node/EndNode.tsx'
+import LlmNode from './node/LlmNode.tsx'
+import StartNode from './node/StartNode.tsx'
+import {useDataStore} from './store/DataStore.ts'
+import {useFlowStore} from './store/FlowStore.ts'
+
+const FlowableDiv = styled.div`
+    height: 92vh;
+
+    .toolbar {
+    }
+
+    .node-card {
+        cursor: grab;
+
+        .card-container {
+            cursor: default;
+        }
+    }
+`
+
+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 {data, setData, getDataById, setDataById} = useDataStore()
+  const {
+    nodes,
+    getNodeById,
+    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: [
+              {
+                debug: commonInfo.debug,
+                type: 'form',
+                ...horizontalFormOptions(),
+                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)
+    }
+  }
+
+  const checkNode = (type: string) => {
+    if (isEqual(type, 'start-amis-node') && findIdx(nodes, (node: Node) => isEqual(type, node.type)) > -1) {
+      throw new Error('只能存在1个开始节点')
+    }
+    if (isEqual(type, 'end-amis-node') && findIdx(nodes, (node: Node) => isEqual(type, node.type)) > -1) {
+      throw new Error('只能存在1个结束节点')
+    }
+  }
+
+  const checkConnection = (connection: Connection) => {
+    let sourceNode = getNodeById(connection.source)
+    if (!sourceNode) {
+      throw new Error('连线起始节点未找到')
+    }
+    let targetNode = getNodeById(connection.target)
+    if (!targetNode) {
+      throw new Error('连线目标节点未找到')
+    }
+    console.log(sourceNode, targetNode, connection)
+    // 禁止短路整个流程
+    if (isEqual('start-amis-node', sourceNode.type) && isEqual('end-amis-node', targetNode.type)) {
+      throw new Error('开始节点不能直连结束节点')
+    }
+
+    // 禁止流程出现环，必须是有向无环图
+    const hasCycle = (node: Node, visited = new Set()) => {
+      if (visited.has(node.id)) return false
+      visited.add(node.id)
+      for (const outgoer of getOutgoers(node, nodes, edges)) {
+        if (isEqual(outgoer.id, sourceNode?.id)) return true
+        if (hasCycle(outgoer, visited)) return true
+      }
+    }
+    if (isEqual(sourceNode.id, targetNode.id)) {
+      throw new Error('节点不能直连自身')
+    } else if (hasCycle(targetNode)) {
+      throw new Error('禁止流程循环')
+    }
+
+    const hasShortcut = (node: Node, visited = new Set()) => {
+      if (visited.has(node.id)) return false
+      visited.add(node.id)
+      for (const incomer of getIncomers(node, nodes, edges)) {
+        if (isEqual(incomer.id, sourceNode?.id)) return true
+        if (hasShortcut(incomer, visited)) return true
+      }
+    }
+    console.log(getIncomers(targetNode, nodes, edges))
+  }
+
+  useMount(() => {
+    // language=JSON
+    let initialData = JSON.parse(`{
+      "nodes": [
+        {
+          "id": "BMFP3Eov94",
+          "type": "start-amis-node",
+          "position": {
+            "x": 10,
+            "y": 100
+          },
+          "data": {},
+          "measured": {
+            "width": 256,
+            "height": 83
+          },
+          "selected": false
+        },
+        {
+          "id": "PYK8LjduQ1",
+          "type": "end-amis-node",
+          "position": {
+            "x": 654,
+            "y": 332
+          },
+          "data": {},
+          "measured": {
+            "width": 256,
+            "height": 83
+          },
+          "selected": false,
+          "dragging": false
+        },
+        {
+          "id": "nCm-ij5I6o",
+          "type": "llm-amis-node",
+          "position": {
+            "x": 318,
+            "y": 208
+          },
+          "data": {},
+          "measured": {
+            "width": 256,
+            "height": 83
+          },
+          "selected": true,
+          "dragging": false
+        }
+      ],
+      "edges": [
+        {
+          "source": "BMFP3Eov94",
+          "target": "nCm-ij5I6o",
+          "id": "xy-edge__BMFP3Eov94-nCm-ij5I6o"
+        }
+      ],
+      "data": {
+        "BMFP3Eov94": {
+          "inputs": {
+            "文件名": {
+              "type": "text"
+            },
+            "文件描述": {
+              "type": "text",
+              "description": "文件描述"
+            }
+          }
+        },
+        "nCm-ij5I6o": {
+          "model": "qwen3",
+          "outputs": {
+            "text": {
+              "type": "string"
+            }
+          },
+          "systemPrompt": "你是个沙雕"
+        }
+      }
+    }`)
+    let initialNodes = initialData['nodes'] ?? []
+    let initialEdges = initialData['edges'] ?? []
+
+    let initialNodeData = initialData['data'] ?? {}
+    setData(initialNodeData)
+
+    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={() => {
+          let saveData = {nodes, edges, data}
+          console.log(JSON.stringify(saveData, null, 2))
+        }}>
+          <SaveFilled/>
+          保存
+        </Button>
+        <Dropdown
+          menu={{
+            items: nodeDef.map(def => ({key: def.key, label: def.name})),
+            onClick: ({key}) => {
+              try {
+                checkNode(key)
+                addNode({
+                  id: randomId(10),
+                  type: key,
+                  position: {x: 100, y: 100},
+                  data: {
+                    getDataById,
+                    setDataById,
+                    removeNode,
+                    editNode,
+                  },
+                })
+              } catch (e) {
+                // @ts-ignore
+                messageApi.error(e.message)
+              }
+            },
+          }}
+        >
+          <Button type="dashed">
+            <PlusCircleFilled/>
+            新增节点
+          </Button>
+        </Dropdown>
+      </Space>
+      <Drawer
+        title="节点编辑"
+        open={open}
+        closeIcon={false}
+        maskClosable={false}
+        destroyOnHidden
+        size="large"
+      >
+        {currentNodeForm}
+      </Drawer>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={(connection) => {
+          try {
+            checkConnection(connection)
+            onConnect(connection)
+          } catch (e) {
+            // @ts-ignore
+            messageApi.error(e.message)
+          }
+        }}
+        // @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,145 @@
+import {DeleteFilled, EditFilled} from '@ant-design/icons'
+import {Handle, type NodeProps, Position} from '@xyflow/react'
+import type {Schema} from 'amis'
+import {Card, Dropdown} from 'antd'
+import {isEmpty, isEqual} from 'licia'
+import type {JSX} from 'react'
+import {horizontalFormOptions} from '../../../../util/amis.tsx'
+
+export type AmisNodeType = 'normal' | 'start' | 'end'
+
+export function outputsFormColumns(editable: boolean = false, preload?: any): Schema[] {
+  return [
+    {
+      disabled: !editable,
+      type: 'input-kvs',
+      name: 'outputs',
+      label: '输出变量',
+      value: preload,
+      addButtonText: '新增输出',
+      draggable: false,
+      keyItem: {
+        ...horizontalFormOptions(),
+        label: '参数名称',
+      },
+      valueItems: [
+        {
+          ...horizontalFormOptions(),
+          type: 'select',
+          name: 'type',
+          label: '参数',
+          required: true,
+          selectFirst: true,
+          options: [
+            {
+              label: '文本',
+              value: 'string',
+            },
+            {
+              label: '数字',
+              value: 'number',
+            },
+            {
+              label: '文本数组',
+              value: 'array-string',
+            },
+            {
+              label: '对象数组',
+              value: 'array-object',
+            },
+          ],
+        },
+      ],
+    },
+  ]
+}
+
+const AmisNode = (
+  props: NodeProps,
+  type: AmisNodeType,
+  defaultNodeName: String,
+  defaultNodeDescription?: String,
+  extraNodeDescription?: (nodeData: any) => JSX.Element,
+  columnSchema?: Schema[],
+) => {
+  const {id, data} = props
+  const {getDataById, removeNode, 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
+  return (
+    <div className="p-1 w-64">
+      <Card
+        className="node-card"
+        title={nodeName}
+        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,
+                    defaultNodeName,
+                    defaultNodeDescription,
+                    [
+                      {
+                        type: 'input-text',
+                        name: 'node.name',
+                        label: '节点名称',
+                        placeholder: nodeName,
+                      },
+                      {
+                        type: 'textarea',
+                        name: 'node.description',
+                        label: '节点描述',
+                        placeholder: nodeDescription,
+                      },
+                      {
+                        type: 'divider',
+                      },
+                      ...(columnSchema ?? []),
+                    ],
+                  )
+                  break
+                case 'remove':
+                  // @ts-ignore
+                  removeNode(id)
+                  break
+              }
+            },
+          }}
+        >
+          <div className="card-description p-2 text-secondary text-sm">
+            {nodeDescription}
+            {extraNodeDescription?.(nodeData)}
+          </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,13 @@
+import type {NodeProps} from '@xyflow/react'
+import AmisNode, {outputsFormColumns} from './AmisNode.tsx'
+
+const EndNode = (props: NodeProps) => AmisNode(
+  props,
+  'end',
+  '结束节点',
+  '定义输出变量',
+  undefined,
+  outputsFormColumns(true),
+)
+
+export default EndNode

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

@@ -0,0 +1,41 @@
+import type {NodeProps} from '@xyflow/react'
+import AmisNode, {outputsFormColumns} from './AmisNode.tsx'
+
+const LlmNode = (props: NodeProps) => AmisNode(
+  props,
+  'normal',
+  '大模型节点',
+  '使用大模型对话',
+  undefined,
+  [
+    {
+      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,
+    },
+    {
+      type: 'divider',
+    },
+    ...outputsFormColumns(false, {text: {type: 'string'}}),
+  ],
+)
+
+export default LlmNode

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

@@ -0,0 +1,56 @@
+import type {NodeProps} from '@xyflow/react'
+import {horizontalFormOptions} from '../../../../util/amis.tsx'
+import AmisNode from './AmisNode.tsx'
+
+const StartNode = (props: NodeProps) => AmisNode(
+  props,
+  'start',
+  '开始节点',
+  '定义输入变量',
+  undefined,
+  [
+    {
+      type: 'input-kvs',
+      name: 'inputs',
+      label: '输入变量',
+      addButtonText: '新增入参',
+      draggable: false,
+      keyItem: {
+        label: '参数名称',
+        ...horizontalFormOptions(),
+      },
+      valueItems: [
+        {
+          ...horizontalFormOptions(),
+          type: 'input-text',
+          name: 'description',
+          label: '参数描述',
+        },
+        {
+          ...horizontalFormOptions(),
+          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,23 @@
+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: 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,56 @@
+import {
+  addEdge,
+  applyEdgeChanges,
+  applyNodeChanges,
+  type Edge,
+  type Node,
+  type OnConnect,
+  type OnEdgesChange,
+  type OnNodesChange,
+} from '@xyflow/react'
+import {filter, find, isEqual} from 'licia'
+import {create} from 'zustand/react'
+
+export const useFlowStore = create<{
+  nodes: Node[],
+  onNodesChange: OnNodesChange,
+  getNodeById: (id: string) => Node | undefined,
+  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),
+    })
+  },
+  getNodeById: (id: string) => find(get().nodes, node => isEqual(node.id, id)),
+  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/>,
+        },
       ],
     },
   ],

service-web/client/src/util/amis.tsx

@@ -274,6 +274,15 @@ export function serviceLogByAppNameAndHost(name: string, host: string) {
   )
 }
 
+export function horizontalFormOptions() {
+  return {
+    mode: 'horizontal',
+    horizontal: {
+      leftFixed: 'sm'
+    },
+  }
+}
+
 export function crudCommonOptions() {
   return {
     affixHeader: false,