feat(web): 节点增加入参变量

2025-06-27 10:04:48 +08:00
parent 635c6537ed
commit 6e667c45e1
6 changed files with 78 additions and 69 deletions
--- a/service-web/client/src/pages/ai/flow/FlowEditor.tsx
+++ b/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": 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 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/>
          保存
--- a/service-web/client/src/pages/ai/flow/node/AmisNode.tsx
+++ b/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 [
    {
@@ -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}
        </>
--- a/service-web/client/src/pages/ai/flow/node/CodeNode.tsx
+++ b/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',
    },
--- a/service-web/client/src/pages/ai/flow/node/KnowledgeNode.tsx
+++ b/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'}}),
  ],
 })

--- a/service-web/client/src/pages/ai/flow/node/LlmNode.tsx
+++ b/service-web/client/src/pages/ai/flow/node/LlmNode.tsx
@@ -1,5 +1,5 @@
 import type {NodeProps} from '@xyflow/react'
-import AmisNode, {outputsFormColumns} from './AmisNode.tsx'
+import AmisNode, {inputsFormColumns, outputsFormColumns} from './AmisNode.tsx'

 const LlmNode = (props: NodeProps) => AmisNode({
  nodeProps: props,
@@ -7,6 +7,10 @@ const LlmNode = (props: NodeProps) => AmisNode({
  defaultNodeName: '大模型',
  defaultNodeDescription: '使用大模型对话',
  columnSchema: [
+    ...inputsFormColumns(),
+    {
+      type: 'divider',
+    },
    {
      type: 'select',
      name: 'model',
--- a/service-web/client/src/pages/ai/flow/node/ParallelNode.tsx
+++ b/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