feat(web): 完成前序节点输出变量注入

service-web/client/package.json

@@ -15,33 +15,33 @@
     "@ant-design/x": "^1.4.0",
     "@echofly/fetch-event-source": "^3.0.2",
     "@fortawesome/fontawesome-free": "^6.7.2",
-    "@lightenna/react-mermaid-diagram": "^1.0.20",
+    "@lightenna/react-mermaid-diagram": "^1.0.21",
-    "@xyflow/react": "^12.7.1",
+    "@xyflow/react": "^12.8.1",
-    "ahooks": "^3.8.5",
+    "ahooks": "^3.9.0",
     "amis": "^6.12.0",
-    "antd": "^5.26.2",
+    "antd": "^5.26.3",
     "axios": "^1.10.0",
     "chart.js": "^4.5.0",
     "echarts-for-react": "^3.0.2",
     "licia": "^1.48.0",
-    "mermaid": "^11.7.0",
+    "mermaid": "^11.8.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",
+    "react-router": "^7.6.3",
     "styled-components": "^6.1.19",
     "yocto-queue": "^1.2.1",
-    "zustand": "^5.0.5"
+    "zustand": "^5.0.6"
   },
   "devDependencies": {
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react-swc": "^3.10.2",
-    "globals": "^16.2.0",
+    "globals": "^16.3.0",
     "sass": "^1.89.2",
     "typescript": "~5.8.3",
-    "vite": "^7.0.0",
+    "vite": "^7.0.2",
     "vite-plugin-javascript-obfuscator": "^3.1.0",
     "vitest": "^3.2.4"
   }

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

@@ -7,25 +7,26 @@ import {
   MiniMap,
   type Node,
   type NodeProps,
-  ReactFlow
+  ReactFlow,
 } from '@xyflow/react'
 import type {Schema} from 'amis'
 import {Button, Drawer, Dropdown, message, Popconfirm, Space} from 'antd'
 import {arrToMap, find, isEqual, isNil, randomId} from 'licia'
 import {type JSX, type MemoExoticComponent, useEffect, useState} from 'react'
+import {useNavigate} from 'react-router'
 import styled from 'styled-components'
 import '@xyflow/react/dist/style.css'
+import {useShallow} from 'zustand/react/shallow'
 import {amisRender, commonInfo, horizontalFormOptions} from '../../util/amis.tsx'
 import {checkAddConnection, checkAddNode, checkSave} from './FlowChecker.tsx'
 import CodeNode from './node/CodeNode.tsx'
-import OutputNode from './node/OutputNode.tsx'
 import KnowledgeNode from './node/KnowledgeNode.tsx'
 import LlmNode from './node/LlmNode.tsx'
+import OutputNode from './node/OutputNode.tsx'
 import SwitchNode from './node/SwitchNode.tsx'
+import {useContextStore} from './store/ContextStore.ts'
 import {useDataStore} from './store/DataStore.ts'
 import {useFlowStore} from './store/FlowStore.ts'
-import {useNavigate} from 'react-router'
-import {useShallow} from 'zustand/react/shallow'
 
 const FlowableDiv = styled.div`
     height: 100%;
@@ -67,7 +68,7 @@ const FlowableDiv = styled.div`
 export type GraphData = { nodes: Node[], edges: Edge[], data: any }
 
 export type FlowEditorProps = {
-  // inputSchema: Record<string, Record<string, any>>,
+  inputSchema: Record<string, Record<string, any>>,
   graphData: GraphData,
   onGraphDataChange: (graphData: GraphData) => void,
 }
@@ -114,7 +115,7 @@ function FlowEditor(props: FlowEditorProps) {
       setData: state.setData,
       getDataById: state.getDataById,
       setDataById: state.setDataById,
-    }))
+    })),
   )
   const {
     nodes,
@@ -138,9 +139,13 @@ function FlowEditor(props: FlowEditorProps) {
       setEdges: state.setEdges,
       onEdgesChange: state.onEdgesChange,
       onConnect: state.onConnect,
-    }))
+    })),
   )
 
+  const {
+    setInputSchema,
+  } = useContextStore()
+
   const [currentNodeForm, setCurrentNodeForm] = useState<JSX.Element>()
   const editNode = (id: string, columnSchema?: Schema[]) => {
     if (!isNil(columnSchema)) {
@@ -167,7 +172,7 @@ function FlowEditor(props: FlowEditorProps) {
                             {
                               ...context.props.data,
                               finished: true,
-                            }
+                            },
                           )
                           setOpen(false)
                         },
@@ -219,8 +224,7 @@ function FlowEditor(props: FlowEditorProps) {
 
   // 用于透传node操作到主流程
   const initialNodeHandlers = {
-    // getInputSchema: () => props.inputSchema,
+    editNode,
-    editNode
   }
 
   useEffect(() => {
@@ -238,6 +242,8 @@ function FlowEditor(props: FlowEditorProps) {
     }
     setNodes(initialNodes)
     setEdges(initialEdges)
+
+    setInputSchema(props.inputSchema)
   }, [props.graphData])
 
   return (
@@ -329,7 +335,6 @@ function FlowEditor(props: FlowEditorProps) {
           nodeDef.map(def => def.key),
           key => find(nodeDef, def => isEqual(key, def.key))!.component)
         }
-        fitView
       >
         <Controls/>
         <MiniMap/>

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

@@ -1,25 +1,33 @@
-import {
+import {CopyFilled, DeleteFilled, EditFilled} from '@ant-design/icons'
-  type Edge,
+import {Handle, type HandleProps, type Node, type NodeProps, Position, useNodeConnections} from '@xyflow/react'
-  Handle,
-  type HandleProps,
-  type Node,
-  type NodeProps,
-  Position,
-  useNodeConnections
-} from '@xyflow/react'
 import type {Schema} from 'amis'
 import {Button, Card} from 'antd'
-import {isEmpty, isEqual, isNil} from 'licia'
+import {has, isEmpty, isEqual, isNil} from 'licia'
-import {type JSX, useMemo} from 'react'
+import {type JSX} from 'react'
+import styled from 'styled-components'
 import {horizontalFormOptions} from '../../../util/amis.tsx'
+import {useContextStore} from '../store/ContextStore.ts'
 import {useDataStore} from '../store/DataStore.ts'
-import {EditFilled} from '@ant-design/icons'
+import {useFlowStore} from '../store/FlowStore.ts'
 
 export type AmisNodeType = 'normal' | 'start' | 'end'
 
 export function inputsFormColumns(props: ColumnsSchemaProps): Schema[] {
-  console.log('props', props)
+  let incomers = props.getAllIncomerNodeById(props.nodeId)
-
+  let groups = []
+  for (const incomer of incomers) {
+    let data = props.getNodeDataById(incomer.id)
+    if (has(data, 'outputs')) {
+      let outputs = data?.outputs ?? []
+      groups.push({
+        label: incomer.id,
+        children: Object.keys(outputs).map(key => ({
+          key: `${incomer.id}.${key}`,
+          label: key,
+        })),
+      })
+    }
+  }
   return [
     {
       type: 'input-kvs',
@@ -38,7 +46,17 @@ export function inputsFormColumns(props: ColumnsSchemaProps): Schema[] {
           name: 'type',
           label: '变量',
           required: true,
-          options: [],
+          selectMode: 'group',
+          options: [
+            {
+              label: '流程参数',
+              children: Object.keys(props.inputSchema).map(key => ({
+                label: props.inputSchema[key]?.label ?? '',
+                value: key,
+              })),
+            },
+            ...groups,
+          ],
         },
       ],
     },
@@ -106,10 +124,11 @@ export const LimitHandler = (props: HandleProps & { limit: number }) => {
 
 type ColumnsSchemaProps = {
   // getInputSchema: () => Record<string, Record<string, any>>,
+  inputSchema: Record<string, Record<string, any>>,
   nodeId: string,
   nodeData: any,
-  getNodes: () => Node[],
+  getNodeDataById: (id: string) => any,
-  getEdges: () => Edge[],
+  getAllIncomerNodeById: (id: string) => Node[],
 }
 
 type AmisNodeProps = {
@@ -122,6 +141,16 @@ type AmisNodeProps = {
   columnSchema?: (props: ColumnsSchemaProps) => Schema[]
 }
 
+const AmisNodeContainerDiv = styled.div`
+    .ant-card {
+        .ant-card-actions {
+            & > li {
+                margin: 0;
+            }
+        }
+    }
+`
+
 const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
   nodeProps,
   type,
@@ -131,43 +160,43 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
   handlers,
   columnSchema,
 }) => {
-  // const {
+  const {
-  //   removeNode,
+    removeNode,
-  //   getNodes,
+    getAllIncomerNodeById,
-  //   getEdges
+  } = useFlowStore()
-  // } = useFlowStore()
   const {getDataById} = useDataStore()
+  const {inputSchema} = useContextStore()
 
   const {id, data} = nodeProps
   const {editNode} = data
   // @ts-ignore
-  const nodeData = useMemo(() => {
+  const nodeData = getDataById(id)
-    return getDataById(id)
-  }, [id])
   const nodeName = isEmpty(nodeData?.node?.name) ? defaultNodeName : nodeData.node.name
   const nodeDescription = isEmpty(nodeData?.node?.description) ? defaultNodeDescription : nodeData.node?.description
   return (
-    <div className="w-64">
+    <AmisNodeContainerDiv className="w-64">
-      {/* className="card-container"
+      <Card
-        trigger={['contextMenu']}
+        className="node-card"
-        menu={{
+        title={nodeName}
-          items: [
+        extra={<span className="text-gray-300 text-xs">{id}</span>}
-            {
+        size="small"
-              key: 'edit',
+        actions={[
-              label: '编辑',
+          <Button
-              icon: <EditFilled className="text-gray-600 hover:text-blue-500"/>,
+            className="text-secondary"
-            },
+            disabled
-            {
+            type="text"
-              key: 'remove',
+            size="small"
-              label: '删除',
+            icon={<CopyFilled/>}
-              icon: <DeleteFilled className="text-red-500 hover:text-red-500"/>,
+            block
-            },
+          />,
-          ],
+          <Button
-          onClick: menu => {
+            className="text-secondary"
-            switch (menu.key) {
+            type="text"
-              case 'edit':
+            size="small"
+            icon={<EditFilled/>}
+            block
             // @ts-ignore
-                editNode(
+            onClick={() => editNode(
               id,
               [
                 {
@@ -187,32 +216,25 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
                 },
                 ...(
                   columnSchema?.({
-                        // @ts-ignore
+                    inputSchema,
-                        // getInputSchema,
                     nodeId: id,
                     nodeData,
-                        // @ts-ignore
+                    getNodeDataById: getDataById,
-                        getNodes,
+                    getAllIncomerNodeById,
-                        // @ts-ignore
-                        getEdges,
                   }) ?? []
                 ),
               ],
-                )
+            )}
-                break
+          />,
-              case 'remove':
+          <Button
-                // @ts-ignore
+            className="text-secondary"
-                removeNode(id)
+            type="text"
-                break
-            }
-          },
-        }}
-      >*/}
-      <Card
-        className="node-card"
-        title={nodeName}
-        extra={<span className="text-gray-300 text-xs">{id}</span>}
             size="small"
+            icon={<DeleteFilled/>}
+            block
+            onClick={() => removeNode(id)}
+          />,
+        ]}
       >
         <div className="card-description p-2 text-secondary text-sm">
           {nodeDescription}
@@ -227,7 +249,7 @@ const AmisNode: (props: AmisNodeProps) => JSX.Element = ({
             ? <Handle type="target" position={Position.Left} id="target"/> : undefined}
         </>
         : handlers?.(nodeData)}
-    </div>
+    </AmisNodeContainerDiv>
   )
 }
 

service-web/client/src/components/flow/store/ContextStore.ts

@@ -0,0 +1,11 @@
+import {create} from 'zustand/react'
+
+export type ContextStoreState = {
+  inputSchema: Record<string, Record<string, any>>,
+  setInputSchema: (inputSchema: Record<string, Record<string, any>>) => void,
+}
+
+export const useContextStore = create<ContextStoreState>((set) => ({
+  inputSchema: {},
+  setInputSchema: (inputSchema: Record<string, Record<string, any>>) => set({inputSchema}),
+}))

service-web/client/src/components/flow/store/DataStore.ts

@@ -12,7 +12,7 @@ export const useDataStore = create<DataStoreState>((set, get) => ({
   data: {},
   getData: () => get().data,
   setData: (data) => set({
-    data: data
+    data: data,
   }),
   getDataById: id => get().data[id],
   setDataById: (id, data) => {

service-web/client/src/components/flow/store/FlowStore.ts

@@ -3,12 +3,14 @@ import {
   applyEdgeChanges,
   applyNodeChanges,
   type Edge,
+  getIncomers,
   type Node,
   type OnConnect,
   type OnEdgesChange,
   type OnNodesChange,
 } from '@xyflow/react'
-import {filter, find, isEqual} from 'licia'
+import {filter, find, isEqual, unique} from 'licia'
+import Queue from 'yocto-queue'
 import {create} from 'zustand/react'
 
 export type FlowStoreState = {
@@ -16,6 +18,7 @@ export type FlowStoreState = {
   getNodes: () => Node[],
   onNodesChange: OnNodesChange,
   getNodeById: (id: string) => Node | undefined,
+  getAllIncomerNodeById: (id: string) => Node[],
   addNode: (node: Node) => void,
   removeNode: (id: string) => void,
   setNodes: (nodes: Node[]) => void,
@@ -37,6 +40,21 @@ export const useFlowStore = create<FlowStoreState>((set, get) => ({
     })
   },
   getNodeById: (id: string) => find(get().nodes, node => isEqual(node.id, id)),
+  getAllIncomerNodeById: (id: string) => {
+    let nodes = get().nodes
+    let edges = get().edges
+    let queue = new Queue<Node>()
+    queue.enqueue(find(nodes, node => isEqual(node.id, id))!)
+    let result: Node[] = []
+    while (queue.size !== 0) {
+      let currentNode = queue.dequeue()!
+      for (const incomer of getIncomers(currentNode, nodes, edges)) {
+        result.push(incomer)
+        queue.enqueue(incomer)
+      }
+    }
+    return unique(result, (a, b) => isEqual(a.id, b.id))
+  },
   addNode: node => set({nodes: get().nodes.concat(node)}),
   removeNode: id => {
     set({

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

@@ -1,10 +1,10 @@
-import React, {useState} from 'react'
-import styled from 'styled-components'
-import {useNavigate, useParams} from 'react-router'
 import {useMount} from 'ahooks'
 import axios from 'axios'
-import {commonInfo} from '../../../../util/amis.tsx'
+import React, {useState} from 'react'
+import {useNavigate, useParams} from 'react-router'
+import styled from 'styled-components'
 import FlowEditor, {type GraphData} from '../../../../components/flow/FlowEditor.tsx'
+import {commonInfo} from '../../../../util/amis.tsx'
 
 const FlowTaskTemplateFlowEditDiv = styled.div`
 `
@@ -12,7 +12,7 @@ const FlowTaskTemplateFlowEditDiv = styled.div`
 const FlowTaskTemplateFlowEdit: React.FC = () => {
   const navigate = useNavigate()
   const {template_id} = useParams()
-  // const [inputSchema, setInputSchema] = useState<Record<string, Record<string, any>>>({})
+  const [inputSchema, setInputSchema] = useState<Record<string, Record<string, any>>>({})
   const [graphData, setGraphData] = useState<GraphData>({nodes: [], edges: [], data: {}})
 
   useMount(async () => {
@@ -22,14 +22,14 @@ const FlowTaskTemplateFlowEdit: React.FC = () => {
         headers: commonInfo.authorizationHeaders
       }
     )
-    // setInputSchema(data?.data?.inputSchema)
+    setInputSchema(data?.data?.inputSchema)
     setGraphData(data?.data?.flowGraph)
   })
 
   return (
     <FlowTaskTemplateFlowEditDiv className="h-full w-full">
       <FlowEditor
-        // inputSchema={inputSchema}
+        inputSchema={inputSchema}
         graphData={graphData}
         onGraphDataChange={async data => {
           await axios.post(