fix: 移动端流转树修复分支视觉脱节(先分支后主干道)

- 调换渲染顺序:先渲染分支(紧贴父节点),再渲染主干道(向下延伸)
- 分支容器加 ↳ 分支延伸 指示符 + 左侧虚线边框
- 主线每个子节点前恒画 ↓ 箭头(含父到长子)

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">
-      <!-- 修复断条：父节点与第一个主线子节点之间的连线箭头 -->
+      <!-- 1. 先渲染分支：紧贴父节点下方，缩进 + 左侧虚线框，视觉上被父节点"兜住" -->
-      <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>
-      <!-- 分支子任务：缩进 + 左边线；进入分支后子子孙孙都保持分支上下文 -->
       <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>