提交流程图

src/shared/components/FlowchartEditor/useFlowOperations.ts

@@ -1,10 +1,7 @@
 import { nanoid } from "nanoid"
-import type { Ref } from 'vue'
-import type { Node, Edge } from '@vue-flow/core'
+import type { Ref } from "vue"
+import type { Node, Edge } from "@vue-flow/core"
 
-/**
- * 简化的流程操作
- */
 export function useFlowOperations(
   nodes: Ref<Node[]>,
   edges: Ref<Edge[]>,
@@ -12,24 +9,77 @@ export function useFlowOperations(
   addEdges: (edges: Edge[]) => void,
   removeNodes: (nodeIds: string[]) => void,
   removeEdges: (edgeIds: string[]) => void,
-  saveState: (nodes: Node[], edges: Edge[]) => void
+  saveState: (nodes: Node[], edges: Edge[]) => void,
 ) {
+  // 根据节点类型和handle自动推断标签
+  const getAutoLabel = (
+    sourceNode: any,
+    targetNode: any,
+    sourceHandle: string,
+    targetHandle: string,
+  ) => {
+    const sourceType = sourceNode?.data?.originalType || sourceNode?.type
+    const targetType = targetNode?.data?.originalType || targetNode?.type
+
+    // 如果是判断节点
+    if (sourceType === "decision") {
+      // 根据handle ID推断标签
+      if (sourceHandle === "yes") {
+        return "是"
+      } else if (sourceHandle === "no") {
+        return "否"
+      }
+    }
+
+    // 如果是循环节点
+    if (sourceType === "loop") {
+      // 根据handle ID推断标签
+      if (sourceHandle === "continue") {
+        return "继续"
+      } else if (sourceHandle === "exit") {
+        return "退出"
+      }
+    }
+
+    // 如果是循环体回到循环节点
+    if (targetType === "loop") {
+      if (targetHandle === "return") {
+        return "返回"
+      }
+    }
+    // 默认情况
+    return ""
+  }
+
   // 连接处理
   const handleConnect = (params: any) => {
+    // 获取源节点和目标节点
+    const sourceNode = nodes.value.find((node) => node.id === params.source)
+    const targetNode = nodes.value.find((node) => node.id === params.target)
+
+    // 自动推断标签
+    const autoLabel = getAutoLabel(
+      sourceNode,
+      targetNode,
+      params.sourceHandle,
+      params.targetHandle,
+    )
+
     const newEdge: Edge = {
       id: `edge-${nanoid()}`,
       source: params.source,
       target: params.target,
       sourceHandle: params.sourceHandle,
       targetHandle: params.targetHandle,
-      type: 'default'
+      type: "default",
+      label: autoLabel,
     }
-    
+
     addEdges([newEdge])
     saveState(nodes.value, edges.value)
   }
 
-  // 边点击删除
+  // 边点击处理 - 单击删除
   const handleEdgeClick = (event: any) => {
     removeEdges([event.edge.id])
     saveState(nodes.value, edges.value)
@@ -38,39 +88,39 @@ export function useFlowOperations(
   // 节点删除
   const handleNodeDelete = (nodeId: string) => {
     // 删除相关边
-    const relatedEdges = edges.value.filter(edge => 
-      edge.source === nodeId || edge.target === nodeId
+    const relatedEdges = edges.value.filter(
+      (edge) => edge.source === nodeId || edge.target === nodeId,
     )
     if (relatedEdges.length > 0) {
-      removeEdges(relatedEdges.map(edge => edge.id))
+      removeEdges(relatedEdges.map((edge) => edge.id))
     }
-    
+
     removeNodes([nodeId])
     saveState(nodes.value, edges.value)
   }
 
   // 节点更新
   const handleNodeUpdate = (nodeId: string, newLabel: string) => {
-    const nodeIndex = nodes.value.findIndex(node => node.id === nodeId)
-    
+    const nodeIndex = nodes.value.findIndex((node) => node.id === nodeId)
+
     if (nodeIndex !== -1) {
       const oldNode = nodes.value[nodeIndex]
-      
+
       // 创建新的节点对象以确保响应式更新
       const updatedNode = {
         ...oldNode,
         data: {
           ...oldNode.data,
-          customLabel: newLabel
-        }
+          customLabel: newLabel,
+        },
       }
-      
+
       // 使用 Vue Flow 的更新方法
       nodes.value[nodeIndex] = updatedNode
-      
+
       // 强制触发响应式更新
       nodes.value = [...nodes.value]
-      
+
       saveState(nodes.value, edges.value)
     }
   }
@@ -84,14 +134,14 @@ export function useFlowOperations(
 
   // 删除选中的节点和边
   const deleteSelected = () => {
-    const selectedNodes = nodes.value.filter(node => (node as any).selected)
-    const selectedEdges = edges.value.filter(edge => (edge as any).selected)
-    
+    const selectedNodes = nodes.value.filter((node) => (node as any).selected)
+    const selectedEdges = edges.value.filter((edge) => (edge as any).selected)
+
     if (selectedNodes.length > 0) {
-      removeNodes(selectedNodes.map(node => node.id))
+      removeNodes(selectedNodes.map((node) => node.id))
     }
     if (selectedEdges.length > 0) {
-      removeEdges(selectedEdges.map(edge => edge.id))
+      removeEdges(selectedEdges.map((edge) => edge.id))
     }
     saveState(nodes.value, edges.value)
   }
@@ -102,6 +152,6 @@ export function useFlowOperations(
     handleNodeDelete,
     handleNodeUpdate,
     clearCanvas,
-    deleteSelected
+    deleteSelected,
   }
 }