From 25ad5156f836f70dcdced46c8ebb3df3d849c27a Mon Sep 17 00:00:00 2001
From: duxingchen <duxingchen@iris-rs.cn>
Date: Tue, 1 Sep 2026 14:10:40 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF=E6=B5=81?=
 =?UTF-8?q?=E8=BD=AC=E6=A0=91=E4=B8=BB=E5=B9=B2=E9=81=93=E5=AF=B9=E9=BD=90?=
 =?UTF-8?q?=E4=B8=8E=E8=BF=9E=E7=BA=BF=E7=AE=AD=E5=A4=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 主线(含 TRANSFER 子任务)左边缘对齐,消除缩进形成笔直主干道
- 主线卡片之间加向下连线箭头(↓)
- 分支(SPAWN 协助)保留缩进 + 左边线
---
 .../src/pages/scan/components/FlowTree.vue    | 66 +++++++++++++++----
 .../src/pages/scan/components/TreeCanvas.vue  | 31 ++++++---
 2 files changed, 75 insertions(+), 22 deletions(-)

diff --git a/track-uniapp/src/pages/scan/components/FlowTree.vue b/track-uniapp/src/pages/scan/components/FlowTree.vue
index ff97399..0049486 100644
--- a/track-uniapp/src/pages/scan/components/FlowTree.vue
+++ b/track-uniapp/src/pages/scan/components/FlowTree.vue
@@ -19,17 +19,32 @@
       </view>
     </view>
 
-    <!-- 子任务（递归缩进） -->
-    <view v-if="node.child_tasks && node.child_tasks.length" class="ft-children">
-      <FlowTree
-        v-for="child in node.child_tasks"
-        :key="child.id"
-        :node="child"
-        :current-user="currentUser"
-        :current-user-id="currentUserId"
-        :current-username="currentUsername"
-        @view-records="$emit('viewRecords', $event)"
-      />
+    <!-- 子任务：主线继续主干道(左对齐 + ↓连线)，分支(SPAWN 协助)缩进 -->
+    <view v-if="node.child_tasks && node.child_tasks.length">
+      <!-- 主线子任务：左边缘对齐，形成笔直主干道，之间用 ↓ 连线 -->
+      <template v-for="(child, i) in mainChildren">
+        <view :key="'arrow-' + child.id" v-if="i > 0" class="ft-flow-arrow">↓</view>
+        <FlowTree
+          :key="child.id"
+          :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">
+        <FlowTree
+          v-for="child in branchChildren"
+          :key="child.id"
+          :node="child"
+          :current-user="currentUser"
+          :current-user-id="currentUserId"
+          :current-username="currentUsername"
+          @view-records="$emit('viewRecords', $event)"
+        />
+      </view>
     </view>
   </view>
 </template>
@@ -52,6 +67,18 @@ export default {
         || this.node.task_type === "TRANSFER"
         || this.node.task_type === "RECOVERY";
     },
+    // 主线子任务：TRANSFER/RECOVERY，继续主干道（左对齐）
+    mainChildren() {
+      return (this.node.child_tasks || []).filter((c) =>
+        !c.parent_task_id || c.task_type === "TRANSFER" || c.task_type === "RECOVERY"
+      );
+    },
+    // 分支子任务：其余(SPAWN 协助等)，缩进显示
+    branchChildren() {
+      return (this.node.child_tasks || []).filter((c) =>
+        c.parent_task_id && c.task_type !== "TRANSFER" && c.task_type !== "RECOVERY"
+      );
+    },
     isWarehouseTask() {
       const name = String(this.node.task_name || "");
       return (name.includes("在库") || name.includes("入库")) || this.node.assignee_id === "virtual_warehouse";
@@ -128,5 +155,20 @@ export default {
 .ft-time { font-size: 11px; color: #9ca3af; }
 .ft-records { font-size: 11px; color: #2563eb; font-weight: 600; }
 
-.ft-children { margin-left: 16px; padding-left: 10px; border-left: 2px solid #e5e7eb; margin-top: 8px; }
+/* 主线子任务：无缩进（左边缘对齐成笔直主干道），之间用 ↓ 连线 */
+.ft-flow-arrow {
+  text-align: center;
+  color: #9ca3af;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  margin: 2px 0;
+}
+/* 分支子任务：缩进 + 左边线 */
+.ft-branch-children {
+  margin-left: 16px;
+  padding-left: 12px;
+  border-left: 2px solid #e5e7eb;
+  margin-top: 8px;
+}
 </style>
diff --git a/track-uniapp/src/pages/scan/components/TreeCanvas.vue b/track-uniapp/src/pages/scan/components/TreeCanvas.vue
index ddeea66..58e5ff1 100644
--- a/track-uniapp/src/pages/scan/components/TreeCanvas.vue
+++ b/track-uniapp/src/pages/scan/components/TreeCanvas.vue
@@ -16,16 +16,18 @@
 
     <scroll-view v-else scroll-y class="tree-scroll" :style="{ height: scrollHeight + 'px' }">
       <view class="tree-root">
-        <!-- 递归纵向流转树：主线 + 分支缩进 -->
-        <FlowTree
-          v-for="t in product.task_tree"
-          :key="t.id"
-          :node="t"
-          :current-user="currentUser"
-          :current-user-id="currentUserId"
-          :current-username="currentUsername"
-          @view-records="$emit('viewRecords', $event)"
-        />
+        <!-- 递归纵向流转树：根级主线之间用 ↓ 连线，分支由 FlowTree 内部缩进 -->
+        <template v-for="(t, i) in product.task_tree">
+          <view :key="'arrow-' + i" v-if="i > 0" class="ft-flow-arrow">↓</view>
+          <FlowTree
+            :key="t.id"
+            :node="t"
+            :current-user="currentUser"
+            :current-user-id="currentUserId"
+            :current-username="currentUsername"
+            @view-records="$emit('viewRecords', $event)"
+          />
+        </template>
       </view>
 
       <!-- 图例 -->
@@ -96,6 +98,15 @@ export default {
 
 .tree-scroll { flex-shrink: 0; }
 .tree-root { padding: 16px 12px 20px; }
+/* 根级主线之间的向下连线箭头 */
+.ft-flow-arrow {
+  text-align: center;
+  color: #9ca3af;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  margin: 2px 0;
+}
 .tree-legend {
   display: flex;
   flex-wrap: wrap;