feat(ai-web): 尝试解析流程图

service-ai/pom.xml

@@ -155,6 +155,11 @@
                 <artifactId>liteflow-spring-boot-starter</artifactId>
                 <version>2.13.2</version>
             </dependency>
+            <dependency>
+                <groupId>com.yomahub</groupId>
+                <artifactId>liteflow-el-builder</artifactId>
+                <version>2.13.2</version>
+            </dependency>
             <dependency>
                 <groupId>org.noear</groupId>
                 <artifactId>solon-ai</artifactId>

service-ai/service-ai-web/pom.xml

@@ -62,6 +62,10 @@
             <groupId>com.yomahub</groupId>
             <artifactId>liteflow-spring-boot-starter</artifactId>
         </dependency>
+        <dependency>
+            <groupId>com.yomahub</groupId>
+            <artifactId>liteflow-el-builder</artifactId>
+        </dependency>
         <dependency>
             <groupId>org.springframework.ai</groupId>
             <artifactId>spring-ai-tika-document-reader</artifactId>

service-ai/service-ai-web/src/test/java/com/lanyuanxiaoyao/service/ai/web/flow/BaseNode.java

@@ -0,0 +1,10 @@
+package com.lanyuanxiaoyao.service.ai.web.flow;
+
+import com.yomahub.liteflow.core.NodeComponent;
+
+/**
+ * @author lanyuanxiaoyao
+ * @version 20250625
+ */
+public abstract class BaseNode extends NodeComponent {
+}

service-ai/service-ai-web/src/test/java/com/lanyuanxiaoyao/service/ai/web/flow/EndNode.java

@@ -0,0 +1,12 @@
+package com.lanyuanxiaoyao.service.ai.web.flow;
+
+/**
+ * @author lanyuanxiaoyao
+ * @version 20250625
+ */
+public class EndNode extends BaseNode {
+  @Override
+  public void process() throws Exception {
+
+  }
+}

service-ai/service-ai-web/src/test/java/com/lanyuanxiaoyao/service/ai/web/flow/LiteFlowService.java

@@ -0,0 +1,157 @@
+package com.lanyuanxiaoyao.service.ai.web.flow;
+
+import cn.hutool.core.util.StrUtil;
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.databind.DeserializationFeature;
+import com.fasterxml.jackson.databind.JsonNode;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import com.yomahub.liteflow.builder.LiteFlowNodeBuilder;
+import com.yomahub.liteflow.builder.el.ELBus;
+import com.yomahub.liteflow.core.NodeComponent;
+import com.yomahub.liteflow.enums.NodeTypeEnum;
+import java.util.List;
+import java.util.Map;
+import lombok.Data;
+import lombok.extern.slf4j.Slf4j;
+
+/**
+ * @author lanyuanxiaoyao
+ * @version 20250625
+ */
+@Slf4j
+public class LiteFlowService {
+  public LiteFlowService() {
+    createNode("start-amis-node", NodeTypeEnum.COMMON, StartNode.class);
+    createNode("end-amis-node", NodeTypeEnum.COMMON, EndNode.class);
+    createNode("llm-amis-node", NodeTypeEnum.COMMON, LlmNode.class);
+  }
+
+  private static void createNode(String name, NodeTypeEnum type, Class<? extends NodeComponent> clazz) {
+    LiteFlowNodeBuilder.createNode()
+        .setId(name)
+        .setName(name)
+        .setType(type)
+        .setClazz(clazz)
+        .build();
+  }
+
+  @Data
+  public static class FlowData {
+    private List<Node> nodes;
+    private List<Edge> edges;
+    private Map<String, Object> data;
+
+    @Data
+    public static class Node {
+      private String id;
+      private String type;
+    }
+
+    @Data
+    public static class Edge {
+      private String id;
+      private String source;
+      private String target;
+    }
+  }
+
+  public static void main(String[] args) throws JsonProcessingException {
+    ObjectMapper mapper = new ObjectMapper();
+    mapper.configure(DeserializationFeature.FAIL_ON_UNKNOWN_PROPERTIES, false);
+    // language=JSON
+    String source = """
+        {
+          "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"
+            },
+            {
+              "source": "nCm-ij5I6o",
+              "target": "PYK8LjduQ1",
+              "id": "xy-edge__nCm-ij5I6o-PYK8LjduQ1"
+            }
+          ],
+          "data": {
+            "BMFP3Eov94": {
+              "inputs": {
+                "name": {
+                  "type": "text"
+                },
+                "description": {
+                  "type": "text",
+                  "description": "文件描述"
+                }
+              }
+            },
+            "nCm-ij5I6o": {
+              "model": "qwen3",
+              "outputs": {
+                "text": {
+                  "type": "string"
+                }
+              },
+              "systemPrompt": "你是个沙雕"
+            }
+          }
+        }
+        """;
+    FlowData root = mapper.readValue(StrUtil.trim(source), FlowData.class);
+    log.info("{}", root);
+    log.info(
+        "\n{}",
+        ELBus.ser(
+            "start-amis-node",
+            ELBus.ser("start-amis-node", "end-amis-node"),
+            "end-amis-node"
+        ).toEL(true)
+    );
+  }
+}

service-ai/service-ai-web/src/test/java/com/lanyuanxiaoyao/service/ai/web/flow/LlmNode.java

@@ -0,0 +1,12 @@
+package com.lanyuanxiaoyao.service.ai.web.flow;
+
+/**
+ * @author lanyuanxiaoyao
+ * @version 20250625
+ */
+public class LlmNode extends BaseNode {
+  @Override
+  public void process() throws Exception {
+
+  }
+}

service-ai/service-ai-web/src/test/java/com/lanyuanxiaoyao/service/ai/web/flow/StartNode.java

@@ -0,0 +1,12 @@
+package com.lanyuanxiaoyao.service.ai.web.flow;
+
+/**
+ * @author lanyuanxiaoyao
+ * @version 20250625
+ */
+public class StartNode extends BaseNode {
+  @Override
+  public void process() throws Exception {
+
+  }
+}

service-web/client/package.json

@@ -15,34 +15,31 @@
     "@echofly/fetch-event-source": "^3.0.2",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@lightenna/react-mermaid-diagram": "^1.0.20",
-    "@tinyflow-ai/react": "^0.2.1",
+    "@xyflow/react": "^12.7.1",
-    "@xyflow/react": "^12.7.0",
     "ahooks": "^3.8.5",
     "amis": "^6.12.0",
-    "antd": "^5.26.1",
+    "antd": "^5.26.2",
     "axios": "^1.10.0",
     "chart.js": "^4.5.0",
     "echarts-for-react": "^3.0.2",
     "licia": "^1.48.0",
-    "markdown-it": "^14.1.0",
+    "mermaid": "^11.7.0",
-    "mermaid": "^11.6.0",
     "react": "^18.3.1",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^18.3.1",
     "react-markdown": "^10.1.0",
     "react-router": "^7.6.2",
-    "styled-components": "^6.1.18",
+    "styled-components": "^6.1.19",
     "zustand": "^5.0.5"
   },
   "devDependencies": {
-    "@types/markdown-it": "^14.1.2",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react-swc": "^3.10.2",
     "globals": "^16.2.0",
     "sass": "^1.89.2",
     "typescript": "~5.8.3",
-    "vite": "^6.3.5",
+    "vite": "^7.0.0",
     "vite-plugin-javascript-obfuscator": "^3.1.0"
   }
 }

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

@@ -19,7 +19,9 @@ 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 CodeNode from './node/CodeNode.tsx'
 import EndNode from './node/EndNode.tsx'
+import KnowledgeNode from './node/KnowledgeNode.tsx'
 import LlmNode from './node/LlmNode.tsx'
 import StartNode from './node/StartNode.tsx'
 import {useDataStore} from './store/DataStore.ts'
@@ -84,6 +86,16 @@ function FlowEditor() {
       name: '大模型',
       component: LlmNode,
     },
+    {
+      key: 'knowledge-amis-node',
+      name: '知识库',
+      component: KnowledgeNode,
+    },
+    {
+      key: 'code-amis-node',
+      name: '代码执行',
+      component: CodeNode,
+    },
   ])
   const [open, setOpen] = useState(false)
 
@@ -189,7 +201,6 @@ function FlowEditor() {
     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('开始节点不能直连结束节点')
@@ -223,83 +234,7 @@ function FlowEditor() {
 
   useMount(() => {
     // language=JSON
-    let initialData = JSON.parse(`{
+    let initialData = JSON.parse('{\n  "nodes": [\n    {\n      "id": "BMFP3Eov94",\n      "type": "start-amis-node",\n      "position": {\n        "x": 8,\n        "y": 272\n      },\n      "data": {},\n      "measured": {\n        "width": 256,\n        "height": 75\n      },\n      "selected": false,\n      "dragging": false\n    },\n    {\n      "id": "PYK8LjduQ1",\n      "type": "end-amis-node",\n      "position": {\n        "x": 1439.5556937134281,\n        "y": 282.2797340760818\n      },\n      "data": {},\n      "measured": {\n        "width": 256,\n        "height": 75\n      },\n      "selected": false,\n      "dragging": false\n    },\n    {\n      "id": "nCm-ij5I6o",\n      "type": "llm-amis-node",\n      "position": {\n        "x": 902.6781018665707,\n        "y": 115.31234529524048\n      },\n      "data": {},\n      "measured": {\n        "width": 256,\n        "height": 75\n      },\n      "selected": false,\n      "dragging": false\n    },\n    {\n      "id": "9RIg65O0YQ",\n      "type": "knowledge-amis-node",\n      "position": {\n        "x": 338,\n        "y": 287\n      },\n      "data": {},\n      "measured": {\n        "width": 256,\n        "height": 75\n      },\n      "selected": false,\n      "dragging": false\n    },\n    {\n      "id": "2vTyjP0Gu9",\n      "type": "code-amis-node",\n      "position": {\n        "x": 1086.6322978498904,\n        "y": 371.3061114283591\n      },\n      "data": {},\n      "measured": {\n        "width": 256,\n        "height": 75\n      },\n      "selected": true,\n      "dragging": false\n    },\n    {\n      "id": "s9VfZpvb4P",\n      "type": "llm-amis-node",\n      "position": {\n        "x": 700.0944461714178,\n        "y": 369.84258971430364\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": "BMFP3Eov94",\n      "target": "9RIg65O0YQ",\n      "id": "xy-edge__BMFP3Eov94-9RIg65O0YQ"\n    },\n    {\n      "source": "9RIg65O0YQ",\n      "target": "nCm-ij5I6o",\n      "id": "xy-edge__9RIg65O0YQ-nCm-ij5I6o"\n    },\n    {\n      "source": "nCm-ij5I6o",\n      "target": "PYK8LjduQ1",\n      "id": "xy-edge__nCm-ij5I6o-PYK8LjduQ1"\n    },\n    {\n      "source": "s9VfZpvb4P",\n      "target": "2vTyjP0Gu9",\n      "id": "xy-edge__s9VfZpvb4P-2vTyjP0Gu9"\n    },\n    {\n      "source": "9RIg65O0YQ",\n      "target": "s9VfZpvb4P",\n      "id": "xy-edge__9RIg65O0YQ-s9VfZpvb4P"\n    },\n    {\n      "source": "2vTyjP0Gu9",\n      "target": "PYK8LjduQ1",\n      "id": "xy-edge__2vTyjP0Gu9-PYK8LjduQ1"\n    }\n  ],\n  "data": {\n    "BMFP3Eov94": {\n      "inputs": {\n        "name": {\n          "type": "text"\n        },\n        "description": {\n          "type": "text",\n          "description": "文件描述"\n        }\n      }\n    },\n    "nCm-ij5I6o": {\n      "model": "qwen3",\n      "outputs": {\n        "text": {\n          "type": "string"\n        }\n      },\n      "systemPrompt": "你是个沙雕"\n    },\n    "9RIg65O0YQ": {\n      "count": 3,\n      "score": 0.75,\n      "knowledgeId": 3585368238960640,\n      "query": "hello world"\n    },\n    "2vTyjP0Gu9": {\n      "type": "python",\n      "content": "code=\'hello\'\\nprint(code)"\n    },\n    "s9VfZpvb4P": {\n      "model": "qwen3",\n      "outputs": {\n        "text": {\n          "type": "string"\n        }\n      },\n      "systemPrompt": "你是个聪明人"\n    }\n  }\n}')
-      "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": {
-            "name": {
-              "type": "text"
-            },
-            "description": {
-              "type": "text",
-              "description": "文件描述"
-            }
-          }
-        },
-        "nCm-ij5I6o": {
-          "model": "qwen3",
-          "outputs": {
-            "text": {
-              "type": "string"
-            }
-          },
-          "systemPrompt": "你是个沙雕"
-        }
-      }
-    }`)
     let initialNodes = initialData['nodes'] ?? []
     let initialEdges = initialData['edges'] ?? []
 
@@ -388,6 +323,7 @@ function FlowEditor() {
           nodeDef.map(def => def.key),
           key => find(nodeDef, def => isEqual(key, def.key))!.component)
         }
+        fitView
       >
         <Controls/>
         <MiniMap/>

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

@@ -8,7 +8,7 @@ import {horizontalFormOptions} from '../../../../util/amis.tsx'
 
 export type AmisNodeType = 'normal' | 'start' | 'end'
 
-export function outputsFormColumns(editable: boolean = false, preload?: any): Schema[] {
+export function outputsFormColumns(editable: boolean = false, required: boolean = false, preload?: any): Schema[] {
   return [
     {
       disabled: !editable,
@@ -22,6 +22,7 @@ export function outputsFormColumns(editable: boolean = false, preload?: any): Sc
         ...horizontalFormOptions(),
         label: '参数名称',
       },
+      required: required,
       valueItems: [
         {
           ...horizontalFormOptions(),

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

@@ -0,0 +1,73 @@
+import type {NodeProps} from '@xyflow/react'
+import {horizontalFormOptions} from '../../../../util/amis.tsx'
+import AmisNode, {outputsFormColumns} from './AmisNode.tsx'
+
+const CodeNode = (props: NodeProps) => AmisNode(
+  props,
+  'normal',
+  '代码执行',
+  '执行自定义的处理代码',
+  undefined,
+  [
+    {
+      type: 'input-kvs',
+      name: 'inputs',
+      label: '输入变量',
+      addButtonText: '新增输入',
+      draggable: false,
+      keyItem: {
+        ...horizontalFormOptions(),
+        label: '参数名称',
+      },
+      valueItems: [
+        {
+          ...horizontalFormOptions(),
+          type: 'select',
+          name: 'type',
+          label: '变量',
+          required: true,
+          options: [],
+        },
+      ],
+    },
+    {
+      type: 'divider',
+    },
+    {
+      type: 'select',
+      name: 'type',
+      label: '代码类型',
+      required: true,
+      options: [
+        {
+          value: 'javascript',
+          label: 'JavaScript',
+        },
+        {
+          value: 'python',
+          label: 'Python',
+        },
+        {
+          value: 'lua',
+          label: 'Lua',
+        },
+      ],
+    },
+    {
+      type: 'editor',
+      required: true,
+      label: '代码内容',
+      name: 'content',
+      language: '${type}',
+      options: {
+        wordWrap: 'bounded',
+      },
+    },
+    {
+      type: 'divider',
+    },
+    ...outputsFormColumns(true, true, {result: {type: 'string'}}),
+  ],
+)
+
+export default CodeNode

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

@@ -0,0 +1,58 @@
+import type {NodeProps} from '@xyflow/react'
+import {commonInfo} from '../../../../util/amis.tsx'
+import AmisNode from './AmisNode.tsx'
+
+const KnowledgeNode = (props: NodeProps) => AmisNode(
+  props,
+  'normal',
+  '知识库',
+  '查询知识库获取外部知识',
+  undefined,
+  [
+    {
+      type: 'select',
+      name: 'knowledgeId',
+      label: '知识库',
+      required: true,
+      options: [],
+      source: {
+        method: 'get',
+        url: `${commonInfo.baseAiUrl}/knowledge/list`,
+        // @ts-ignore
+        adaptor: (payload, response, api, context) => {
+          return {
+            ...payload,
+            data: {
+              items: payload.data.items.map((item: any) => ({value: item['id'], label: item['name']})),
+            }
+          }
+        },
+      },
+    },
+    {
+      type: 'input-text',
+      name: 'query',
+      label: '查询文本',
+      required: true,
+    },
+    {
+      type: 'input-range',
+      name: 'count',
+      label: '返回数量',
+      required: true,
+      value: 3,
+      max: 10,
+    },
+    {
+      type: 'input-range',
+      name: 'score',
+      label: '匹配阀值',
+      required: true,
+      value: 0.6,
+      max: 1,
+      step: 0.05,
+    },
+  ],
+)
+
+export default KnowledgeNode

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

@@ -4,7 +4,7 @@ import AmisNode, {outputsFormColumns} from './AmisNode.tsx'
 const LlmNode = (props: NodeProps) => AmisNode(
   props,
   'normal',
-  '大模型节点',
+  '大模型',
   '使用大模型对话',
   undefined,
   [
@@ -34,7 +34,7 @@ const LlmNode = (props: NodeProps) => AmisNode(
     {
       type: 'divider',
     },
-    ...outputsFormColumns(false, {text: {type: 'string'}}),
+    ...outputsFormColumns(false, true, {text: {type: 'string'}}),
   ],
 )