fix: 级联/因果视角切换 — 跨层箭头方向+SVG三角+ConnectionLines联动

frontend/src/components/strategy/ConnectionLines.vue

@@ -147,6 +147,8 @@ const props = defineProps({
   tempLine: { type: Object, default: null },
   /** 容器尺寸变化触发重算 */
   containerKey: { type: Number, default: 0 },
+  /** 视角方向：cascade(级联,上层→下层) / causal(因果,下层→上层) */
+  viewDirection: { type: String, default: 'cascade' },
 })
 
 const emit = defineEmits(['select-connection', 'delete-connection'])
@@ -159,28 +161,41 @@ const crossLayerLines = ref([])
 
 /**
  * 计算跨层固定箭头
- * 从上层底部中心 → 下层顶部中心
+ * cascade: 从上层底部中心 → 下层顶部中心（管理视角，上层驱动下层）
+ * causal:  从下层顶部中心 → 上层底部中心（因果视角，下层驱动上层）
  */
 function calcCrossLayerLines() {
   const lines = []
   const keys = props.layerKeys
+  const isCausal = props.viewDirection === 'causal'
   for (let i = 0; i < keys.length - 1; i++) {
-    const fromEl = props.layerRefs[keys[i]]
-    const toEl = props.layerRefs[keys[i + 1]]
-    if (!fromEl || !toEl) continue
+    const upperEl = props.layerRefs[keys[i]]
+    const lowerEl = props.layerRefs[keys[i + 1]]
+    if (!upperEl || !lowerEl) continue
 
-    const fr = fromEl.getBoundingClientRect()
-    const tr = toEl.getBoundingClientRect()
+    const ur = upperEl.getBoundingClientRect()
+    const lr = lowerEl.getBoundingClientRect()
     const svg = svgRef.value
     if (!svg) continue
     const svgRect = svg.getBoundingClientRect()
 
-    lines.push({
-      x1: fr.left + fr.width / 2 - svgRect.left,
-      y1: fr.bottom - svgRect.top,
-      x2: tr.left + tr.width / 2 - svgRect.left,
-      y2: tr.top - svgRect.top,
-    })
+    if (isCausal) {
+      // 因果视角：从下层顶 → 上层底（箭头向上）
+      lines.push({
+        x1: lr.left + lr.width / 2 - svgRect.left,
+        y1: lr.top - svgRect.top,
+        x2: ur.left + ur.width / 2 - svgRect.left,
+        y2: ur.bottom - svgRect.top,
+      })
+    } else {
+      // 级联视角：从上层底 → 下层顶（箭头向下）
+      lines.push({
+        x1: ur.left + ur.width / 2 - svgRect.left,
+        y1: ur.bottom - svgRect.top,
+        x2: lr.left + lr.width / 2 - svgRect.left,
+        y2: lr.top - svgRect.top,
+      })
+    }
   }
   crossLayerLines.value = lines
 }