From 1cba0f4422cff774facacd77069eb37c19be1e77 Mon Sep 17 00:00:00 2001
From: lanyuanxiaoyao <lanyuanxiaoyao@gmail.com>
Date: Tue, 24 Jun 2025 10:44:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E5=AE=8C=E6=88=90=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E5=9B=BE=E5=A4=96=E9=83=A8=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../client/src/pages/ai/flow/FlowEditor.tsx   | 125 ++++++++++++++----
 .../src/pages/ai/flow/store/DataStore.ts      |   4 +-
 2 files changed, 99 insertions(+), 30 deletions(-)

diff --git a/service-web/client/src/pages/ai/flow/FlowEditor.tsx b/service-web/client/src/pages/ai/flow/FlowEditor.tsx
index a83efd4..c556e4d 100644
--- a/service-web/client/src/pages/ai/flow/FlowEditor.tsx
+++ b/service-web/client/src/pages/ai/flow/FlowEditor.tsx
@@ -1,14 +1,5 @@
 import {PlusCircleFilled, SaveFilled} from '@ant-design/icons'
-import {
-  Background,
-  BackgroundVariant,
-  Controls,
-  type Edge,
-  MiniMap,
-  type Node,
-  type NodeProps,
-  ReactFlow,
-} from '@xyflow/react'
+import {Background, BackgroundVariant, Controls, 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'
@@ -38,22 +29,6 @@ const FlowableDiv = styled.div`
     }
 `
 
-const initialNodes: Node[] = [
-  {
-    id: 'BMFP3Eov94',
-    type: 'start-amis-node',
-    position: {x: 10, y: 100},
-    data: {},
-  },
-  {
-    id: 'PYK8LjduQ1',
-    type: 'end-amis-node',
-    position: {x: 500, y: 100},
-    data: {},
-  },
-]
-const initialEdges: Edge[] = []
-
 function FlowEditor() {
   const [messageApi, contextHolder] = message.useMessage()
   const [nodeDef] = useState<{
@@ -79,7 +54,7 @@ function FlowEditor() {
   ])
   const [open, setOpen] = useState(false)
 
-  const {getData, getDataById, setDataById} = useDataStore()
+  const {data, setData, getDataById, setDataById} = useDataStore()
   const {
     nodes,
     addNode,
@@ -153,7 +128,7 @@ function FlowEditor() {
                   },
                 ],
               },
-            ]
+            ],
           },
           getDataById(id),
         ),
@@ -163,6 +138,95 @@ function FlowEditor() {
   }
 
   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"
+    },
+    {
+      "source": "nCm-ij5I6o",
+      "target": "PYK8LjduQ1",
+      "id": "xy-edge__nCm-ij5I6o-PYK8LjduQ1"
+    }
+  ],
+  "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,
@@ -179,7 +243,10 @@ function FlowEditor() {
     <FlowableDiv>
       {contextHolder}
       <Space className="toolbar">
-        <Button type="primary" onClick={() => console.log(JSON.stringify(getData()))}>
+        <Button type="primary" onClick={() => {
+          let saveData = {nodes, edges, data}
+          console.log(JSON.stringify(saveData, null, 2))
+        }}>
           <SaveFilled/>
           保存
         </Button>
diff --git a/service-web/client/src/pages/ai/flow/store/DataStore.ts b/service-web/client/src/pages/ai/flow/store/DataStore.ts
index 25e3aa6..390e581 100644
--- a/service-web/client/src/pages/ai/flow/store/DataStore.ts
+++ b/service-web/client/src/pages/ai/flow/store/DataStore.ts
@@ -9,7 +9,9 @@ export const useDataStore = create<{
 }>((set, get) => ({
   data: {},
   getData: () => get().data,
-  setData: (data) => set(data),
+  setData: (data) => set({
+    data: data
+  }),
   getDataById: id => get().data[id],
   setDataById: (id, data) => {
     let updateData = get().data