From ce064f50d887f1da7262eef72d57627ff9befd05 Mon Sep 17 00:00:00 2001
From: caoqianming <caoqianming@foxmail.com>
Date: Mon, 10 Aug 2026 09:39:41 +0800
Subject: [PATCH] fix(flow): align route edges with node handles

---
 src/components/flow/MaterialNode.vue | 33 +++++++++++++++-------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/components/flow/MaterialNode.vue b/src/components/flow/MaterialNode.vue
index 0102e6c2..32a77707 100644
--- a/src/components/flow/MaterialNode.vue
+++ b/src/components/flow/MaterialNode.vue
@@ -117,28 +117,31 @@ export default {
 	padding: 0;
 }
 .vue-flow__handle {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 56px;
-	height: 56px;
+	width: 9px;
+	height: 9px;
 	border-radius: 50%;
-	background: transparent;
-	border: 0;
+	background: #fff;
+	border: 2px solid #409eff;
 	cursor: crosshair;
 }
+.vue-flow__handle::before {
+	content: "";
+	position: absolute;
+	inset: -24px;
+	border-radius: 50%;
+	/* 扩大编辑器中的命中区域，但不改变 Vue Flow 用来计算连线端点的 Handle 尺寸。 */
+	background: transparent;
+}
 .vue-flow__handle::after {
 	content: "";
-	width: 9px;
-	height: 9px;
-	border: 2px solid #409eff;
-	border-radius: 50%;
-	background: #fff;
-	transition: width 0.15s, height 0.15s, background 0.15s, box-shadow 0.15s;
+	position: absolute;
+	inset: -2px;
+	border-radius: inherit;
+	background: transparent;
+	transition: background 0.15s, box-shadow 0.15s;
 }
 .vue-flow__handle:hover::after {
-	width: 13px;
-	height: 13px;
+	inset: -2px;
 	background: #409eff;
 	box-shadow: 0 0 0 4px rgba(64, 158, 255, 0.18);
 }