From f6e3807a3dd97a6e856c0ae4e352de8c95c58e3e Mon Sep 17 00:00:00 2001
From: Aqr-K <95741669+Aqr-K@users.noreply.github.com>
Date: Wed, 5 Mar 2025 04:24:54 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=8C=E5=96=84=E8=BF=9E=E6=8E=A5=20`?=
 =?UTF-8?q?workflow`=20=E8=8A=82=E7=82=B9=E6=97=B6=E7=9A=84=E5=90=88?=
 =?UTF-8?q?=E6=B3=95=E6=80=A7=E6=A0=A1=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dialog/WorkflowActionsDialog.vue          | 44 ++++++++++++++++++-
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/components/dialog/WorkflowActionsDialog.vue b/src/components/dialog/WorkflowActionsDialog.vue
index 252e736c..a1d84c44 100644
--- a/src/components/dialog/WorkflowActionsDialog.vue
+++ b/src/components/dialog/WorkflowActionsDialog.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { VueFlow, useVueFlow, type Connection, type GraphNode } from '@vue-flow/core'
 import { MiniMap } from '@vue-flow/minimap'
 import useDragAndDrop from '@core/utils/workflow'
 import { Workflow } from '@/api/types'
@@ -14,7 +14,46 @@ const { onConnect, addEdges, nodes, edges } = useVueFlow()
 
 const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop()
 
-onConnect(addEdges)
+// 连接事件
+onConnect((connection: Connection) => {
+  // 双重校验
+  if (!isValidConnection(connection)) {
+    $toast.warning('非法连接：不能连接自身或同类型端口！')
+    return
+  }
+  addEdges(connection)
+})
+
+// 获取指定节点端口的类型（输入/输出）
+const getPortType = (node: GraphNode, handleId: string) => {
+  // 检查是否是输入端口（对应 handleBounds.target）
+  const isInput = node.handleBounds?.target?.some(h => h.id === handleId)
+  if (isInput) return 'input'
+
+  // 检查是否是输出端口（对应 handleBounds.source）
+  const isOutput = node.handleBounds?.source?.some(h => h.id === handleId)
+  return isOutput ? 'output' : null
+}
+
+// 校验连接是否合法
+const isValidConnection = (connection: Connection) => {
+  // 获取连接的源节点和目标节点
+  const sourceNode = nodes.value.find(n => n.id === connection.source)
+  const targetNode = nodes.value.find(n => n.id === connection.target)
+
+  if (!sourceNode || !targetNode) return false
+
+  // 获取端口类型
+  const sourcePortType = getPortType(sourceNode, connection.sourceHandle!)
+  const targetPortType = getPortType(targetNode, connection.targetHandle!)
+
+  /* 同时满足三个条件，才允许连接：
+   * 1. 源端口是输出类型（output）
+   * 2. 目标端口是输入类型（input）
+   * 3. 不是同一节点的连接
+   */
+  return sourcePortType === 'output' && targetPortType === 'input' && connection.source !== connection.target
+}
 
 // 自定义节点类型
 const nodeTypes: Record<string, any> = ref({})
@@ -170,6 +209,7 @@ onMounted(() => {
             :nodes="nodes"
             :edges="edges"
             :nodeTypes="nodeTypes"
+            :is-valid-connection="isValidConnection"
             :default-edge-options="{ type: 'animation', animated: true }"
             :edge-updater-radius="10"
             @dragover="onDragOver"