feat(web): 增加节点的参数展示

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

@@ -0,0 +1,76 @@
+import {type Edge, type Node} from '@xyflow/react'
+
+export const buildEL = (nodes: Node[], edges: Edge[]): string => {
+  const nodeMap: Map<string, Node> = new Map<string, Node>()
+  // 构建邻接列表和内图
+  const adjList = new Map<string, string[]>()
+  const inDegree = new Map<string, number>()
+  for (const node of nodes) {
+    nodeMap.set(node.id, node)
+    adjList.set(node.id, [])
+    inDegree.set(node.id, 0)
+  }
+  for (const edge of edges) {
+    adjList.get(edge.source)!.push(edge.target)
+    inDegree.set(edge.target, inDegree.get(edge.target)! + 1)
+  }
+
+  // Compute levels (longest path from start)
+  const levelMap = new Map<string, number>()
+
+  function computeLevel(nodeId: string): number {
+    if (levelMap.has(nodeId)) return levelMap.get(nodeId)!
+    const preds = edges.filter(e => e.target === nodeId).map(e => e.source)
+    const level = preds.length === 0 ? 0 : Math.max(...preds.map(p => computeLevel(p))) + 1
+    levelMap.set(nodeId, level)
+    return level
+  }
+
+  for (const node of nodes) computeLevel(node.id)
+
+  // Group nodes by level
+  const maxLevel = Math.max(...Array.from(levelMap.values()))
+  const levels: string[][] = Array.from({length: maxLevel + 1}, () => [])
+  for (const node of nodes) levels[levelMap.get(node.id)!].push(node.id)
+
+  const covertNodeFromId = (id: string) => {
+    let node = nodeMap.get(id)!
+    return `node("${node.type}").bind("nodeId", ${node.id})`
+  }
+
+  // Build EL expression
+  const expressions: string[] = []
+  for (let i = 0; i <= maxLevel; i++) {
+    const nodesAtLevel = levels[i]
+    if (nodesAtLevel.length === 0) continue
+
+    // 识别从这个级别开始的串行链
+    const serialChains: string[] = []
+    for (const nodeId of nodesAtLevel) {
+      let chain = [nodeId]
+      let current = nodeId
+      while (adjList.get(current)?.length === 1) {
+        const next = adjList.get(current)![0]
+        if (inDegree.get(next) === 1 && levelMap.get(next) === i + chain.length) {
+          chain.push(next)
+          current = next
+        } else break
+      }
+      if (chain.length > 1) {
+        serialChains.push(`THEN(${chain.map(id => covertNodeFromId(id)).join(',')})`)
+        // Remove processed nodes from their levels
+        for (let j = 1; j < chain.length; j++) {
+          const level = levelMap.get(chain[j])!
+          levels[level] = levels[level].filter(n => n !== chain[j])
+        }
+      } else {
+        serialChains.push(covertNodeFromId(nodeId))
+      }
+    }
+
+    // Combine chains or nodes at this level
+    expressions.push(serialChains.length > 1 ? `WHEN(${serialChains.join(', ')})` : serialChains[0])
+  }
+
+  return `THEN(${expressions.join(',')})`
+}

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

@@ -4,7 +4,7 @@ import {
   BackgroundVariant,
   type Connection,
   Controls,
-  getIncomers,
+  type Edge,
   getOutgoers,
   MiniMap,
   type Node,
@@ -18,13 +18,12 @@ 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 Queue from 'yocto-queue'
 import {amisRender, commonInfo, horizontalFormOptions} from '../../../util/amis.tsx'
+import {buildEL} from './ElParser.tsx'
 import CodeNode from './node/CodeNode.tsx'
 import EndNode from './node/EndNode.tsx'
 import KnowledgeNode from './node/KnowledgeNode.tsx'
 import LlmNode from './node/LlmNode.tsx'
-import ParallelNode from './node/ParallelNode.tsx'
 import StartNode from './node/StartNode.tsx'
 import {useDataStore} from './store/DataStore.ts'
 import {useFlowStore} from './store/FlowStore.ts'
@@ -83,11 +82,6 @@ function FlowEditor() {
       name: '结束',
       component: EndNode,
     },
-    {
-      key: 'parallel-node',
-      name: '并行',
-      component: ParallelNode,
-    },
     {
       key: 'llm-node',
       name: '大模型',
@@ -228,7 +222,7 @@ function FlowEditor() {
       throw new Error('禁止流程循环')
     }
 
-    const hasRedundant = (source: Node, target: Node) => {
+    /*const hasRedundant = (source: Node, target: Node) => {
       const visited = new Set<string>()
       const queue = new Queue<Node>()
       queue.enqueue(source)
@@ -250,12 +244,30 @@ function FlowEditor() {
     }
     if (hasRedundant(sourceNode, targetNode)) {
       throw new Error('出现冗余边')
+    }*/
+  }
+
+  // @ts-ignore
+  const checkSave = (nodes: Node[], edges: Edge[], data: any) => {
+    if (nodes.filter(n => isEqual('start-node', n.type)).length < 1) {
+      throw new Error('至少存在1个开始节点')
     }
+    if (nodes.filter(n => isEqual('end-node', n.type)).length < 1) {
+      throw new Error('至少存在1个结束节点')
+    }
+  }
+
+  // 用于透传node操作到主流程
+  const initialNodeHandlers = {
+    getDataById,
+    setDataById,
+    removeNode,
+    editNode,
   }
 
   useMount(() => {
     // language=JSON
-    let initialData = JSON.parse('{\n  "nodes": [\n    {\n      "id": "lurod0PM-J",\n      "type": "parallel-node",\n      "position": {\n        "x": -156,\n        "y": 77\n      },\n      "data": {},\n      "measured": {\n        "width": 256,\n        "height": 75\n      },\n      "selected": false,\n      "dragging": false\n    },\n    {\n      "id": "ldoKAzHnKF",\n      "type": "llm-node",\n      "position": {\n        "x": 207,\n        "y": -38\n      },\n      "data": {},\n      "measured": {\n        "width": 256,\n        "height": 75\n      },\n      "selected": false,\n      "dragging": false\n    },\n    {\n      "id": "1eJtMoJWs6",\n      "type": "llm-node",\n      "position": {\n        "x": 207,\n        "y": 172.5\n      },\n      "data": {},\n      "measured": {\n        "width": 256,\n        "height": 75\n      },\n      "selected": false,\n      "dragging": false\n    }\n  ],\n  "edges": [\n    {\n      "source": "lurod0PM-J",\n      "target": "1eJtMoJWs6",\n      "id": "xy-edge__lurod0PM-J-1eJtMoJWs6"\n    },\n    {\n      "source": "lurod0PM-J",\n      "target": "ldoKAzHnKF",\n      "id": "xy-edge__lurod0PM-J-ldoKAzHnKF"\n    }\n  ],\n  "data": {}\n}')
+    let initialData = JSON.parse('{\n  "nodes": [\n    {\n      "id": "ldoKAzHnKF",\n      "type": "llm-node",\n      "position": {\n        "x": 207,\n        "y": -38\n      },\n      "data": {},\n      "measured": {\n        "width": 256,\n        "height": 105\n      },\n      "selected": false,\n      "dragging": false\n    },\n    {\n      "id": "1eJtMoJWs6",\n      "type": "llm-node",\n      "position": {\n        "x": 207,\n        "y": 172.5\n      },\n      "data": {},\n      "measured": {\n        "width": 256,\n        "height": 105\n      },\n      "selected": false,\n      "dragging": false\n    },\n    {\n      "id": "7e5vQLDGTl",\n      "type": "start-node",\n      "position": {\n        "x": -162.3520537805597,\n        "y": 67.84901301708827\n      },\n      "data": {},\n      "measured": {\n        "width": 256,\n        "height": 105\n      },\n      "selected": false,\n      "dragging": false\n    },\n    {\n      "id": "Wyqg_bXILg",\n      "type": "knowledge-node",\n      "position": {\n        "x": 560.402133595296,\n        "y": -38.892263766178665\n      },\n      "data": {},\n      "measured": {\n        "width": 256,\n        "height": 75\n      },\n      "selected": false,\n      "dragging": false\n    },\n    {\n      "id": "7DaF-0G-yv",\n      "type": "llm-node",\n      "position": {\n        "x": 634.9924233956513,\n        "y": 172.01821084172227\n      },\n      "data": {},\n      "measured": {\n        "width": 256,\n        "height": 75\n      },\n      "selected": false,\n      "dragging": false\n    },\n    {\n      "id": "mymIbw_W6k",\n      "type": "end-node",\n      "position": {\n        "x": 953.9302142661356,\n        "y": 172.0182108417223\n      },\n      "data": {},\n      "measured": {\n        "width": 256,\n        "height": 75\n      },\n      "selected": false,\n      "dragging": false\n    }\n  ],\n  "edges": [\n    {\n      "source": "7e5vQLDGTl",\n      "target": "ldoKAzHnKF",\n      "id": "xy-edge__7e5vQLDGTl-ldoKAzHnKF"\n    },\n    {\n      "source": "ldoKAzHnKF",\n      "target": "Wyqg_bXILg",\n      "id": "xy-edge__ldoKAzHnKF-Wyqg_bXILg"\n    },\n    {\n      "source": "7e5vQLDGTl",\n      "target": "1eJtMoJWs6",\n      "id": "xy-edge__7e5vQLDGTl-1eJtMoJWs6"\n    },\n    {\n      "source": "Wyqg_bXILg",\n      "target": "7DaF-0G-yv",\n      "id": "xy-edge__Wyqg_bXILg-7DaF-0G-yv"\n    },\n    {\n      "source": "1eJtMoJWs6",\n      "target": "7DaF-0G-yv",\n      "id": "xy-edge__1eJtMoJWs6-7DaF-0G-yv"\n    },\n    {\n      "source": "7DaF-0G-yv",\n      "target": "mymIbw_W6k",\n      "id": "xy-edge__7DaF-0G-yv-mymIbw_W6k"\n    }\n  ],\n  "data": {\n    "7e5vQLDGTl": {\n      "inputs": {\n        "question": {\n          "type": "text",\n          "description": "问题"\n        }\n      }\n    },\n    "ldoKAzHnKF": {\n      "model": "qwen3",\n      "outputs": {\n        "text": {\n          "type": "string"\n        }\n      },\n      "systemPrompt": "你是个聪明人"\n    },\n    "1eJtMoJWs6": {\n      "model": "deepseek",\n      "outputs": {\n        "text": {\n          "type": "string"\n        }\n      },\n      "systemPrompt": "你也是个好人"\n    }\n  }\n}')
     let initialNodes = initialData['nodes'] ?? []
     let initialEdges = initialData['edges'] ?? []
 
@@ -263,12 +275,7 @@ function FlowEditor() {
     setData(initialNodeData)
 
     for (let node of initialNodes) {
-      node.data = {
-        getDataById,
-        setDataById,
-        removeNode,
-        editNode,
-      }
+      node.data = initialNodeHandlers
     }
     setNodes(initialNodes)
     setEdges(initialEdges)
@@ -288,12 +295,7 @@ function FlowEditor() {
                   id: randomId(10),
                   type: key,
                   position: {x: 100, y: 100},
-                  data: {
-                    getDataById,
-                    setDataById,
-                    removeNode,
-                    editNode,
-                  },
+                  data: initialNodeHandlers,
                 })
               } catch (e) {
                 // @ts-ignore
@@ -308,8 +310,15 @@ function FlowEditor() {
           </Button>
         </Dropdown>
         <Button type="primary" onClick={() => {
-          let saveData = {nodes, edges, data}
-          console.log(JSON.stringify(saveData, null, 2))
+          try {
+            checkSave(nodes, edges, data)
+            let saveData = {nodes, edges, data}
+            console.log(JSON.stringify(saveData, null, 2))
+            console.log(buildEL(nodes, edges))
+          } catch (e) {
+            // @ts-ignore
+            messageApi.error(e.message)
+          }
         }}>
           <SaveFilled/>
           保存

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

@@ -8,6 +8,34 @@ import {horizontalFormOptions} from '../../../../util/amis.tsx'
 
 export type AmisNodeType = 'normal' | 'start' | 'end'
 
+export function inputsFormColumns(required: boolean = false, preload?: any): Schema[] {
+  return [
+    {
+      type: 'input-kvs',
+      name: 'inputs',
+      label: '输入变量',
+      value: preload,
+      addButtonText: '新增输入',
+      draggable: false,
+      keyItem: {
+        ...horizontalFormOptions(),
+        label: '参数名称',
+      },
+      required: required,
+      valueItems: [
+        {
+          ...horizontalFormOptions(),
+          type: 'select',
+          name: 'type',
+          label: '变量',
+          required: true,
+          options: [],
+        },
+      ],
+    },
+  ]
+}
+
 export function outputsFormColumns(editable: boolean = false, required: boolean = false, preload?: any): Schema[] {
   return [
     {
@@ -147,7 +175,7 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
         <Card
           className="node-card"
           title={nodeName}
-          extra={<span className="text-secondary">{id}</span>}
+          extra={<span className="text-gray-300 text-xs">{id}</span>}
           size="small"
         >
           <div className="card-description p-2 text-secondary text-sm">
@@ -159,7 +187,7 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
       {isNil(handlers)
         ? <>
           {isEqual(type, 'start') || isEqual(type, 'normal')
-            ? <LimitHandler type="source" position={Position.Right} limit={1}/> : undefined}
+            ? <Handle type="source" position={Position.Right}/> : undefined}
           {isEqual(type, 'end') || isEqual(type, 'normal')
             ? <Handle type="target" position={Position.Left}/> : undefined}
         </>

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

@@ -1,6 +1,5 @@
 import type {NodeProps} from '@xyflow/react'
-import {horizontalFormOptions} from '../../../../util/amis.tsx'
-import AmisNode, {outputsFormColumns} from './AmisNode.tsx'
+import AmisNode, {inputsFormColumns, outputsFormColumns} from './AmisNode.tsx'
 
 const CodeNode = (props: NodeProps) => AmisNode({
   nodeProps: props,
@@ -8,27 +7,7 @@ const CodeNode = (props: NodeProps) => AmisNode({
   defaultNodeName: '代码执行',
   defaultNodeDescription: '执行自定义的处理代码',
   columnSchema: [
-    {
-      type: 'input-kvs',
-      name: 'inputs',
-      label: '输入变量',
-      addButtonText: '新增输入',
-      draggable: false,
-      keyItem: {
-        ...horizontalFormOptions(),
-        label: '参数名称',
-      },
-      valueItems: [
-        {
-          ...horizontalFormOptions(),
-          type: 'select',
-          name: 'type',
-          label: '变量',
-          required: true,
-          options: [],
-        },
-      ],
-    },
+    ...inputsFormColumns(),
     {
       type: 'divider',
     },

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

@@ -1,6 +1,6 @@
 import type {NodeProps} from '@xyflow/react'
 import {commonInfo} from '../../../../util/amis.tsx'
-import AmisNode from './AmisNode.tsx'
+import AmisNode, {inputsFormColumns, outputsFormColumns} from './AmisNode.tsx'
 
 const KnowledgeNode = (props: NodeProps) => AmisNode({
   nodeProps: props,
@@ -8,6 +8,10 @@ const KnowledgeNode = (props: NodeProps) => AmisNode({
   defaultNodeName: '知识库',
   defaultNodeDescription: '查询知识库获取外部知识',
   columnSchema: [
+    ...inputsFormColumns(),
+    {
+      type: 'divider',
+    },
     {
       type: 'select',
       name: 'knowledgeId',
@@ -51,6 +55,10 @@ const KnowledgeNode = (props: NodeProps) => AmisNode({
       max: 1,
       step: 0.05,
     },
+    {
+      type: 'divider',
+    },
+    ...outputsFormColumns(false, true, {result: {type: 'array-string'}}),
   ],
 })
 

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

@@ -1,28 +1,38 @@
 import type {NodeProps} from '@xyflow/react'
-import AmisNode, {outputsFormColumns} from './AmisNode.tsx'
+import {Tag} from 'antd'
+import AmisNode, {inputsFormColumns, 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: [
+    ...inputsFormColumns(),
+    {
+      type: 'divider',
+    },
     {
       type: 'select',
       name: 'model',
       label: '大模型',
       required: true,
       selectFirst: true,
-      options: [
-        {
-          label: 'Qwen3',
-          value: 'qwen3',
-        },
-        {
-          label: 'Deepseek',
-          value: 'deepseek',
-        },
-      ],
+      options: Object.keys(modelMap).map(key => ({label: modelMap[key], value: key})),
     },
     {
       type: 'textarea',

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

@@ -1,19 +0,0 @@
-import {Handle, type NodeProps, Position} from '@xyflow/react'
-import AmisNode, {LimitHandler} from './AmisNode.tsx'
-
-const ParallelNode = (props: NodeProps) => AmisNode({
-  nodeProps: props,
-  type: 'normal',
-  defaultNodeName: '并行节点',
-  defaultNodeDescription: '允许开启并行流程',
-  handlers: () => {
-    return (
-      <>
-        <Handle type="source" position={Position.Right}/>
-        <LimitHandler type="target" position={Position.Left} limit={1}/>
-      </>
-    )
-  },
-})
-
-export default ParallelNode

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

@@ -1,12 +1,38 @@
 import type {NodeProps} from '@xyflow/react'
+import {Tag} from 'antd'
+import {each} from 'licia'
+import type {JSX} from 'react'
 import {horizontalFormOptions} from '../../../../util/amis.tsx'
 import AmisNode from './AmisNode.tsx'
 
+const typeMap: Record<string, string> = {
+  text: '文本',
+  number: '数字',
+  files: '文件',
+}
+
 const StartNode = (props: NodeProps) => AmisNode({
   nodeProps: props,
   type: 'start',
   defaultNodeName: '开始节点',
   defaultNodeDescription: '定义输入变量',
+  extraNodeDescription: nodeData => {
+    const variables: JSX.Element[] = []
+    const inputs = (nodeData['inputs'] ?? {}) as Record<string, { type: string, description: string }>
+    each(inputs, (value, key) => {
+      variables.push(
+        <div className="mt-1 flex justify-between" key={key}>
+          <span>{key}</span>
+          <Tag className="m-0" color="blue">{typeMap[value.type]}</Tag>
+        </div>,
+      )
+    })
+    return (
+      <div className="mt-2">
+        {...variables}
+      </div>
+    )
+  },
   columnSchema: [
     {
       type: 'input-kvs',
@@ -32,20 +58,7 @@ const StartNode = (props: NodeProps) => AmisNode({
           label: '参数类型',
           required: true,
           selectFirst: true,
-          options: [
-            {
-              label: '文本',
-              value: 'text',
-            },
-            {
-              label: '数字',
-              value: 'number',
-            },
-            {
-              label: '文件',
-              value: 'files',
-            },
-          ],
+          options: Object.keys(typeMap).map(key => ({label: typeMap[key], value: key})),
         },
       ],
     },