diff --git a/track-uniapp/src/pages/scan/components/TreeCanvas.vue b/track-uniapp/src/pages/scan/components/TreeCanvas.vue index 75a0873..6fe7042 100644 --- a/track-uniapp/src/pages/scan/components/TreeCanvas.vue +++ b/track-uniapp/src/pages/scan/components/TreeCanvas.vue @@ -145,6 +145,7 @@ export default { // ============================================================ // 🚀 连线计算:中央 → 分支 // ============================================================ + // 🔧 连线:卡片边缘到边缘,杜绝穿模 lines() { const result = []; const flatMap = {}; @@ -153,14 +154,18 @@ export default { if (n._isMain) return; const parent = n.parent_task_id ? flatMap[n.parent_task_id] : null; if (!parent) return; - const px = parent.x + 160; // 卡片右边缘 - const py = parent.y + 40; // 卡片垂直中心 - const nx = n.x; // 分支卡片左边缘 - const ny = n.y + 40; - result.push({ x1: Math.min(px, nx), y1: py, x2: Math.max(px, nx), y2: py, dashed: parent.status === 'COMPLETED' || parent.status === 'ARCHIVED' }); + const isLeft = n.x < parent.x; + const startX = isLeft ? n.x + 160 : parent.x + 160; // 左分支右边缘 / 主干右边缘 + const endX = isLeft ? parent.x : n.x; // 主干左边缘 / 右分支左边缘 + result.push({ + x1: startX, y1: parent.y + 40, + x2: endX, y2: parent.y + 40, + dashed: parent.status === 'COMPLETED' || parent.status === 'ARCHIVED', + }); }); return result; }, + // 🔧 箭头:像素级贴合分支卡片边缘 arrows() { const result = []; const flatMap = {}; @@ -172,8 +177,8 @@ export default { const isLegacy = parent && (parent.status === 'COMPLETED' || parent.status === 'ARCHIVED'); const isLeft = n.x < parent.x; result.push({ - x: isLeft ? n.x + 165 : n.x - 12, - y: n.y + 36, + x: isLeft ? n.x + 160 : n.x - 6, // 左分支: 卡片右边缘; 右分支: 卡片左边缘-箭头宽度 + y: n.y + 40 - 2, // 垂直居中 (border 4+4=8, -2 微调) rot: isLeft ? 180 : 0, dashed: isLegacy, });