feat(web): 增加任务和流程图CRUD

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

@@ -1,5 +1,14 @@
 import {PlusCircleFilled, SaveFilled} from '@ant-design/icons'
-import {Background, BackgroundVariant, Controls, MiniMap, type NodeProps, ReactFlow} from '@xyflow/react'
+import {
+  Background,
+  BackgroundVariant,
+  Controls,
+  type Edge,
+  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'
@@ -7,7 +16,7 @@ import {arrToMap, find, isEqual, isNil, randomId} from 'licia'
 import {type JSX, type MemoExoticComponent, useState} from 'react'
 import styled from 'styled-components'
 import '@xyflow/react/dist/style.css'
-import {amisRender, commonInfo, horizontalFormOptions} from '../../../util/amis.tsx'
+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'
@@ -55,10 +64,14 @@ const FlowableDiv = styled.div`
     }
 `
 
+export type GraphData = { nodes: Node[], edges: Edge[], data: any }
+
 export type FlowEditorProps = {
+  graphData: GraphData,
+  onGraphDataChange: (graphData: GraphData) => void,
 }
 
-function FlowEditor() {
+function FlowEditor(props: FlowEditorProps) {
   const [messageApi, contextHolder] = message.useMessage()
   const [nodeDef] = useState<{
     key: string,
@@ -191,12 +204,12 @@ function FlowEditor() {
 
   useMount(() => {
     // 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 = 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 = {}
-    let initialNodes = initialData?.nodes ?? []
+    let initialNodes = props.graphData?.nodes ?? []
-    let initialEdges = initialData?.edges ?? []
+    let initialEdges = props.graphData?.edges ?? []
 
-    let initialNodeData = initialData?.data ?? {}
+    let initialNodeData = props.graphData?.data ?? {}
     setData(initialNodeData)
 
     for (let node of initialNodes) {
@@ -243,8 +256,7 @@ function FlowEditor() {
               console.info('Save', JSON.stringify({nodes, edges, data}))
             }
             checkSave(nodes, edges, data)
-            // let saveData = {nodes, edges, data}
+            props.onGraphDataChange({nodes, edges, data})
-            // console.log(buildEL(nodes, edges))
           } catch (e) {
             // @ts-ignore
             messageApi.error(e.toString())

service-web/client/src/components/flow/node/AmisNode.tsx

@@ -4,7 +4,7 @@ import type {Schema} from 'amis'
 import {Card, Dropdown} from 'antd'
 import {isEmpty, isEqual, isNil} from 'licia'
 import {type JSX} from 'react'
-import {horizontalFormOptions} from '../../../../util/amis.tsx'
+import {horizontalFormOptions} from '../../../util/amis.tsx'
 
 export type AmisNodeType = 'normal' | 'start' | 'end'
 

service-web/client/src/components/flow/node/KnowledgeNode.tsx

@@ -1,5 +1,5 @@
 import type {NodeProps} from '@xyflow/react'
-import {commonInfo} from '../../../../util/amis.tsx'
+import {commonInfo} from '../../../util/amis.tsx'
 import AmisNode, {inputsFormColumns, outputsFormColumns} from './AmisNode.tsx'
 import React from 'react'
 

service-web/client/src/components/flow/node/StartNode.tsx

@@ -2,7 +2,7 @@ import type {NodeProps} from '@xyflow/react'
 import {Tag} from 'antd'
 import {each} from 'licia'
 import React, {type JSX} from 'react'
-import {horizontalFormOptions} from '../../../../util/amis.tsx'
+import {horizontalFormOptions} from '../../../util/amis.tsx'
 import AmisNode from './AmisNode.tsx'
 
 const typeMap: Record<string, string> = {

service-web/client/src/index.tsx

@@ -1,7 +1,7 @@
 import {createRoot} from 'react-dom/client'
 import {createHashRouter, RouterProvider} from 'react-router'
 import './index.scss'
-import './components/Registry.ts'
+import './components/amis/Registry.ts'
 
 import {routes} from './route.tsx'
 

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

@@ -1,76 +0,0 @@
-import {type Edge, type Node} from '@xyflow/react'
-
-export const buildEL = (nodes: Node[], edges: Edge[]): string => {
-  const nodeMap: Map<string, Node> = new Map<string, Node>()
-  // 构建邻接列表和内图
-  const adjList = new Map<string, string[]>()
-  const inDegree = new Map<string, number>()
-  for (const node of nodes) {
-    nodeMap.set(node.id, node)
-    adjList.set(node.id, [])
-    inDegree.set(node.id, 0)
-  }
-  for (const edge of edges) {
-    adjList.get(edge.source)!.push(edge.target)
-    inDegree.set(edge.target, inDegree.get(edge.target)! + 1)
-  }
-
-  // Compute levels (longest path from start)
-  const levelMap = new Map<string, number>()
-
-  function computeLevel(nodeId: string): number {
-    if (levelMap.has(nodeId)) return levelMap.get(nodeId)!
-    const preds = edges.filter(e => e.target === nodeId).map(e => e.source)
-    const level = preds.length === 0 ? 0 : Math.max(...preds.map(p => computeLevel(p))) + 1
-    levelMap.set(nodeId, level)
-    return level
-  }
-
-  for (const node of nodes) computeLevel(node.id)
-
-  // Group nodes by level
-  const maxLevel = Math.max(...Array.from(levelMap.values()))
-  const levels: string[][] = Array.from({length: maxLevel + 1}, () => [])
-  for (const node of nodes) levels[levelMap.get(node.id)!].push(node.id)
-
-  const covertNodeFromId = (id: string) => {
-    let node = nodeMap.get(id)!
-    return `node("${node.type}").bind("nodeId", ${node.id})`
-  }
-
-  // Build EL expression
-  const expressions: string[] = []
-  for (let i = 0; i <= maxLevel; i++) {
-    const nodesAtLevel = levels[i]
-    if (nodesAtLevel.length === 0) continue
-
-    // 识别从这个级别开始的串行链
-    const serialChains: string[] = []
-    for (const nodeId of nodesAtLevel) {
-      let chain = [nodeId]
-      let current = nodeId
-      while (adjList.get(current)?.length === 1) {
-        const next = adjList.get(current)![0]
-        if (inDegree.get(next) === 1 && levelMap.get(next) === i + chain.length) {
-          chain.push(next)
-          current = next
-        } else break
-      }
-      if (chain.length > 1) {
-        serialChains.push(`THEN(${chain.map(id => covertNodeFromId(id)).join(',')})`)
-        // Remove processed nodes from their levels
-        for (let j = 1; j < chain.length; j++) {
-          const level = levelMap.get(chain[j])!
-          levels[level] = levels[level].filter(n => n !== chain[j])
-        }
-      } else {
-        serialChains.push(covertNodeFromId(nodeId))
-      }
-    }
-
-    // Combine chains or nodes at this level
-    expressions.push(serialChains.length > 1 ? `WHEN(${serialChains.join(', ')})` : serialChains[0])
-  }
-
-  return `THEN(${expressions.join(',')})`
-}

service-web/client/src/pages/ai/task/template/FlowTaskTemplate.tsx

@@ -97,7 +97,7 @@ const FlowTaskTemplate: React.FC = () => {
                               actionType: 'custom',
                               // @ts-ignore
                               script: (context, doAction, event) => {
-                                navigate(`/ai/flow_task_template/edit/${context.props.data['id']}`)
+                                navigate(`/ai/flow_task_template/flow/edit/${context.props.data['id']}`)
                               },
                             },
                           ],

service-web/client/src/pages/ai/task/template/FlowTaskTemplateEdit.tsx

@@ -33,10 +33,7 @@ const FlowTaskTemplateEdit: React.FC = () => {
             },
           },
           initApi: preloadTemplateId
-            ? {
+            ? `get:${commonInfo.baseAiUrl}/flow_task/template/detail/${preloadTemplateId}`
-              method: 'GET',
-              url: `${commonInfo.baseAiUrl}/flow_task/template/detail/${preloadTemplateId}`,
-            }
             : undefined,
           wrapWithPanel: false,
           ...horizontalFormOptions(),

service-web/client/src/pages/ai/task/template/FlowTaskTemplateFlowEdit.tsx

@@ -0,0 +1,38 @@
+import React, {useEffect, useState} from 'react'
+import styled from 'styled-components'
+import {useParams, useNavigate} from 'react-router'
+import {useMount} from 'ahooks'
+import axios from 'axios'
+import {commonInfo} from '../../../../util/amis.tsx'
+import FlowEditor, {type GraphData} from '../../../../components/flow/FlowEditor.tsx'
+
+const FlowTaskTemplateFlowEditDiv = styled.div`
+`
+
+const FlowTaskTemplateFlowEdit: React.FC = () => {
+  const navigate = useNavigate()
+  const {template_id} = useParams()
+  const [graphData, setGraphData] = useState<GraphData>()
+
+  useMount(async () => {
+    let {data} = await axios.get(
+      `${commonInfo.baseAiUrl}/flow_task/template/detail/${template_id}`,
+      {
+        headers: commonInfo.authorizationHeaders
+      }
+    )
+  })
+
+  return (
+    <FlowTaskTemplateFlowEditDiv className="h-full w-full">
+      <FlowEditor
+        graphData={graphData}
+        onGraphDataChange={data => {
+          navigate(-1)
+        }}
+      />
+    </FlowTaskTemplateFlowEditDiv>
+  )
+}
+
+export default FlowTaskTemplateFlowEdit

service-web/client/src/route.tsx

@@ -18,7 +18,6 @@ import {values} from 'licia'
 import {Navigate, type RouteObject} from 'react-router'
 import Conversation from './pages/ai/Conversation.tsx'
 import Feedback from './pages/ai/feedback/Feedback.tsx'
-import FlowEditor from './pages/ai/flow/FlowEditor.tsx'
 import DataDetail from './pages/ai/knowledge/DataDetail.tsx'
 import DataImport from './pages/ai/knowledge/DataImport.tsx'
 import DataSegment from './pages/ai/knowledge/DataSegment.tsx'
@@ -39,6 +38,7 @@ import Yarn from './pages/overview/Yarn.tsx'
 import YarnCluster from './pages/overview/YarnCluster.tsx'
 import Test from './pages/Test.tsx'
 import {commonInfo} from './util/amis.tsx'
+import FlowTaskTemplateFlowEdit from './pages/ai/task/template/FlowTaskTemplateFlowEdit.tsx'
 
 export const routes: RouteObject[] = [
   {
@@ -133,9 +133,9 @@ export const routes: RouteObject[] = [
             Component: FlowTaskTemplateEdit,
           },
           {
-            path: 'flowable',
+            path: 'flow_task_template/flow/edit/:template_id',
-            Component: FlowEditor,
+            Component: FlowTaskTemplateFlowEdit,
-          },
+          }
         ],
       },
       {
@@ -238,11 +238,6 @@ export const menus = {
           name: '知识库',
           icon: <DatabaseOutlined/>,
         },
-        {
-          path: '/ai/flowable',
-          name: '流程编排',
-          icon: <GatewayOutlined/>,
-        },
         {
           path: '1089caa6-9477-44a5-99f1-a9c179f6cfd3',
           name: '流程任务',

service-web/client/src/util/amis.tsx

@@ -10,8 +10,8 @@ import {isEqual} from 'licia'
 export const commonInfo = {
   debug: isEqual(import.meta.env.MODE, 'development'),
   baseUrl: 'http://132.126.207.130:35690/hudi_services/service_web',
-  baseAiUrl: 'http://132.126.207.130:35690/hudi_services/service_ai_web',
+  // baseAiUrl: 'http://132.126.207.130:35690/hudi_services/service_ai_web',
-  // baseAiUrl: 'http://localhost:8080',
+  baseAiUrl: 'http://localhost:8080',
   authorizationHeaders: {
     'Authorization': 'Basic QXhoRWJzY3dzSkRiWU1IMjpjWXhnM2I0UHRXb1ZENVNqRmF5V3h0blNWc2p6UnNnNA==',
     'Content-Type': 'application/json',