feat(ai-web): 完成自研流程图的保存

service-web/client/src/components/flow/FlowEditor.tsx

@@ -1,4 +1,4 @@
-import {PlusCircleFilled, SaveFilled} from '@ant-design/icons'
+import {PlusCircleFilled, RollbackOutlined, SaveFilled} from '@ant-design/icons'
 import {
   Background,
   BackgroundVariant,
@@ -9,23 +9,22 @@ import {
   type NodeProps,
   ReactFlow
 } from '@xyflow/react'
-import {useMount} from 'ahooks'
 import type {Schema} from 'amis'
-import {Button, Drawer, Dropdown, message, Space} from 'antd'
+import {Button, Drawer, Dropdown, message, Popconfirm, Space} from 'antd'
 import {arrToMap, find, isEqual, isNil, randomId} from 'licia'
-import {type JSX, type MemoExoticComponent, useState} from 'react'
+import {type JSX, type MemoExoticComponent, useEffect, useState} from 'react'
 import styled from 'styled-components'
 import '@xyflow/react/dist/style.css'
 import {amisRender, commonInfo, horizontalFormOptions} from '../../util/amis.tsx'
 import {checkAddConnection, checkAddNode, checkSave} from './FlowChecker.tsx'
 import CodeNode from './node/CodeNode.tsx'
-import EndNode from './node/EndNode.tsx'
+import OutputNode from './node/OutputNode.tsx'
 import KnowledgeNode from './node/KnowledgeNode.tsx'
 import LlmNode from './node/LlmNode.tsx'
-import StartNode from './node/StartNode.tsx'
 import SwitchNode from './node/SwitchNode.tsx'
 import {useDataStore} from './store/DataStore.ts'
 import {useFlowStore} from './store/FlowStore.ts'
+import {useNavigate} from 'react-router'
 
 const FlowableDiv = styled.div`
     height: 100%;
@@ -72,6 +71,7 @@ export type FlowEditorProps = {
 }
 
 function FlowEditor(props: FlowEditorProps) {
+  const navigate = useNavigate()
   const [messageApi, contextHolder] = message.useMessage()
   const [nodeDef] = useState<{
     key: string,
@@ -79,14 +79,9 @@ function FlowEditor(props: FlowEditorProps) {
     component: MemoExoticComponent<(props: NodeProps) => JSX.Element>
   }[]>([
     {
-      key: 'start-node',
-      name: '开始',
-      component: StartNode,
-    },
-    {
-      key: 'end-node',
-      name: '结束',
-      component: EndNode,
+      key: 'output-node',
+      name: '输出',
+      component: OutputNode,
     },
     {
       key: 'llm-node',
@@ -145,7 +140,13 @@ function FlowEditor(props: FlowEditorProps) {
                         actionType: 'custom',
                         // @ts-ignore
                         script: (context, action, event) => {
-                          setDataById(id, context.props.data)
+                          setDataById(
+                            id,
+                            {
+                              ...context.props.data,
+                              finished: true,
+                            }
+                          )
                           setOpen(false)
                         },
                       },
@@ -202,7 +203,7 @@ function FlowEditor(props: FlowEditorProps) {
     editNode,
   }
 
-  useMount(() => {
+  useEffect(() => {
     // language=JSON
     // let initialData = JSON.parse('{"nodes":[{"id":"TCxPixrdkI","type":"start-node","position":{"x":-256,"y":109.5},"data":{},"measured":{"width":256,"height":83},"selected":false,"dragging":false},{"id":"tGs78_ietp","type":"llm-node","position":{"x":108,"y":-2.5},"data":{},"measured":{"width":256,"height":105},"selected":false,"dragging":false},{"id":"OeZdaU7LpY","type":"llm-node","position":{"x":111,"y":196},"data":{},"measured":{"width":256,"height":105},"selected":false,"dragging":false},{"id":"LjfoCYZo-E","type":"knowledge-node","position":{"x":497.62196259607214,"y":-10.792497317791003},"data":{},"measured":{"width":256,"height":75},"selected":false,"dragging":false},{"id":"sQM_22GYB5","type":"end-node","position":{"x":874.3164534765615,"y":151.70316541496913},"data":{},"measured":{"width":256,"height":75},"selected":false,"dragging":false},{"id":"KpMH_xc3ZZ","type":"llm-node","position":{"x":529.6286840434341,"y":150.4721376669937},"data":{},"measured":{"width":256,"height":75},"selected":false,"dragging":false},{"id":"pOrR6EMVbe","type":"switch-node","position":{"x":110.33793030183864,"y":373.9551529987239},"data":{},"measured":{"width":256,"height":157},"selected":false,"dragging":false}],"edges":[{"source":"TCxPixrdkI","sourceHandle":"source","target":"tGs78_ietp","targetHandle":"target","id":"xy-edge__TCxPixrdkIsource-tGs78_ietptarget"},{"source":"TCxPixrdkI","sourceHandle":"source","target":"OeZdaU7LpY","targetHandle":"target","id":"xy-edge__TCxPixrdkIsource-OeZdaU7LpYtarget"},{"source":"tGs78_ietp","sourceHandle":"source","target":"LjfoCYZo-E","targetHandle":"target","id":"xy-edge__tGs78_ietpsource-LjfoCYZo-Etarget"},{"source":"LjfoCYZo-E","sourceHandle":"source","target":"KpMH_xc3ZZ","targetHandle":"target","id":"xy-edge__LjfoCYZo-Esource-KpMH_xc3ZZtarget"},{"source":"OeZdaU7LpY","sourceHandle":"source","target":"KpMH_xc3ZZ","targetHandle":"target","id":"xy-edge__OeZdaU7LpYsource-KpMH_xc3ZZtarget"},{"source":"KpMH_xc3ZZ","sourceHandle":"source","target":"sQM_22GYB5","targetHandle":"target","id":"xy-edge__KpMH_xc3ZZsource-sQM_22GYB5target"},{"source":"TCxPixrdkI","sourceHandle":"source","target":"pOrR6EMVbe","id":"xy-edge__TCxPixrdkIsource-pOrR6EMVbe"},{"source":"pOrR6EMVbe","sourceHandle":"3","target":"sQM_22GYB5","targetHandle":"target","id":"xy-edge__pOrR6EMVbe3-sQM_22GYB5target"},{"source":"pOrR6EMVbe","sourceHandle":"1","target":"KpMH_xc3ZZ","targetHandle":"target","id":"xy-edge__pOrR6EMVbe1-KpMH_xc3ZZtarget"}],"data":{"tGs78_ietp":{"model":"qwen3","outputs":{"text":{"type":"string"}},"systemPrompt":"你是个聪明人"},"OeZdaU7LpY":{"model":"qwen3","outputs":{"text":{"type":"string"}},"systemPrompt":"你也是个聪明人"}}}')
     // let initialData: any = {}
@@ -217,7 +218,7 @@ function FlowEditor(props: FlowEditorProps) {
     }
     setNodes(initialNodes)
     setEdges(initialEdges)
-  })
+  }, [props.graphData])
 
   return (
     <FlowableDiv>
@@ -250,6 +251,16 @@ function FlowEditor(props: FlowEditorProps) {
             新增节点
           </Button>
         </Dropdown>
+        <Popconfirm
+          title="返回上一页"
+          description="未保存的流程图将会被丢弃，确认是否返回"
+          onConfirm={() => navigate(-1)}
+        >
+          <Button type="default">
+            <RollbackOutlined/>
+            返回
+          </Button>
+        </Popconfirm>
         <Button type="primary" onClick={() => {
           try {
             if (commonInfo.debug) {