From 9808742f947ca69ee5522980415dc81387b9e688 Mon Sep 17 00:00:00 2001
From: duxingchen <duxingchen@iris-rs.cn>
Date: Tue, 1 Sep 2026 14:29:58 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=B5=81?=
 =?UTF-8?q?=E8=BD=AC=E6=A0=91=E4=BF=AE=E5=A4=8D=E5=88=86=E6=94=AF=E8=A7=86?=
 =?UTF-8?q?=E8=A7=89=E8=84=B1=E8=8A=82(=E5=85=88=E5=88=86=E6=94=AF?=
 =?UTF-8?q?=E5=90=8E=E4=B8=BB=E5=B9=B2=E9=81=93)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调换渲染顺序:先渲染分支(紧贴父节点),再渲染主干道(向下延伸)
- 分支容器加 ↳ 分支延伸 指示符 + 左侧虚线边框
- 主线每个子节点前恒画 ↓ 箭头(含父到长子)
---
 .../src/pages/scan/components/FlowTree.vue    | 42 +++++++++++--------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/track-uniapp/src/pages/scan/components/FlowTree.vue b/track-uniapp/src/pages/scan/components/FlowTree.vue
index 7486050..2c22e6b 100644
--- a/track-uniapp/src/pages/scan/components/FlowTree.vue
+++ b/track-uniapp/src/pages/scan/components/FlowTree.vue
@@ -19,23 +19,11 @@
       </view>
     </view>
 
-    <!-- 子任务：主线继续主干道(左对齐 + ↓连线)，分支(SPAWN 协助)缩进 -->
+    <!-- 子任务：先渲染分支(紧贴父节点、缩进)，再渲染主干道(继续向下延伸) -->
     <view v-if="node.child_tasks && node.child_tasks.length">
-      <!-- 修复断条：父节点与第一个主线子节点之间的连线箭头 -->
-      <view v-if="mainChildren.length" class="ft-flow-arrow">↓</view>
-      <!-- 主线子任务：左边缘对齐，形成笔直主干道，之间用 ↓ 连线 -->
-      <template v-for="(child, i) in mainChildren" :key="'mc-' + child.id">
-        <view v-if="i > 0" class="ft-flow-arrow">↓</view>
-        <FlowTree
-          :node="child"
-          :current-user="currentUser"
-          :current-user-id="currentUserId"
-          :current-username="currentUsername"
-          @view-records="$emit('viewRecords', $event)"
-        />
-      </template>
-      <!-- 分支子任务：缩进 + 左边线；进入分支后子子孙孙都保持分支上下文 -->
+      <!-- 1. 先渲染分支：紧贴父节点下方，缩进 + 左侧虚线框，视觉上被父节点"兜住" -->
       <view v-if="branchChildren.length" class="ft-branch-children">
+        <view class="ft-branch-indicator">↳ 分支延伸</view>
         <FlowTree
           v-for="child in branchChildren"
           :key="child.id"
@@ -47,6 +35,17 @@
           @view-records="$emit('viewRecords', $event)"
         />
       </view>
+      <!-- 2. 再渲染主干道：每个主线子节点前都画向下连线箭头（含父→长子） -->
+      <template v-for="(child, i) in mainChildren" :key="'mc-' + child.id">
+        <view v-if="i === 0 || i > 0" class="ft-flow-arrow">↓</view>
+        <FlowTree
+          :node="child"
+          :current-user="currentUser"
+          :current-user-id="currentUserId"
+          :current-username="currentUsername"
+          @view-records="$emit('viewRecords', $event)"
+        />
+      </template>
     </view>
   </view>
 </template>
@@ -172,11 +171,18 @@ export default {
   line-height: 1;
   margin: 2px 0;
 }
-/* 分支子任务：缩进 + 左边线 */
+/* 分支子任务：缩进 + 左侧虚线框，视觉上被父节点"兜住" */
 .ft-branch-children {
-  margin-left: 16px;
+  margin-left: 12px;
   padding-left: 12px;
-  border-left: 2px solid #e5e7eb;
+  border-left: 2px dashed #cbd5e1;
   margin-top: 8px;
 }
+/* 分支指示符：轻量级连接锚点 */
+.ft-branch-indicator {
+  color: #9ca3af;
+  font-size: 14px;
+  margin-bottom: 4px;
+  padding-left: 4px;
+}
 </style>