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

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

@@ -267,7 +267,7 @@ function FlowEditor() {
 
   useMount(() => {
     // language=JSON
-    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": 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      "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": 75\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  }\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'] ?? []
 

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

@@ -175,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">

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

@@ -1,11 +1,26 @@
 import type {NodeProps} from '@xyflow/react'
+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(),
     {
@@ -17,16 +32,7 @@ const LlmNode = (props: NodeProps) => AmisNode({
       label: '大模型',
       required: true,
       selectFirst: true,
-      options: [
+      options: Object.keys(modelMap).map(key => ({label: modelMap[key], value: key})),
-        {
-          label: 'Qwen3',
-          value: 'qwen3',
-        },
-        {
-          label: 'Deepseek',
-          value: 'deepseek',
-        },
-      ],
     },
     {
       type: 'textarea',

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: [
+          options: Object.keys(typeMap).map(key => ({label: typeMap[key], value: key})),
-            {
-              label: '文本',
-              value: 'text',
-            },
-            {
-              label: '数字',
-              value: 'number',
-            },
-            {
-              label: '文件',
-              value: 'files',
-            },
-          ],
         },
       ],
     },