fix: 修复移动端流转树全览空白,改用独立 FlowTree 递归树组件

- 修复 scroll-view 高度为 0 导致内容不可见
- 新建 FlowTree.vue 独立递归渲染(主线/分支标记、状态、转入在库、时间、记录)
- 不依赖 TaskTreeNode,展示更贴近网页端流转树

track-uniapp/src/pages/scan/components/TreeCanvas.vue

@@ -14,19 +14,16 @@
       <text class="zero-icon">📋</text><text class="zero-text">该产品暂无流转记录</text>
     </view>
 
-    <scroll-view v-else scroll-y class="tree-scroll">
+    <scroll-view v-else scroll-y class="tree-scroll" :style="{ height: scrollHeight + 'px' }">
       <view class="tree-root">
-        <!-- 递归纵向树：主线 + 分支缩进，复用 TaskTreeNode 渲染 -->
-        <TaskTreeNode
-          v-for="(t, idx) in product.task_tree"
+        <!-- 递归纵向流转树：主线 + 分支缩进 -->
+        <FlowTree
+          v-for="t in product.task_tree"
           :key="t.id"
-          :task="t"
+          :node="t"
           :current-user="currentUser"
           :current-user-id="currentUserId"
           :current-username="currentUsername"
-          :has-children="!!(t.child_tasks && t.child_tasks.length)"
-          :readonly="true"
-          :is-last="idx === product.task_tree.length - 1"
           @view-records="$emit('viewRecords', $event)"
         />
       </view>
@@ -43,11 +40,11 @@
 </template>
 
 <script>
-import TaskTreeNode from "./TaskTreeNode.vue";
+import FlowTree from "./FlowTree.vue";
 
 export default {
   name: "TreeCanvas",
-  components: { TaskTreeNode },
+  components: { FlowTree },
   props: {
     product: { type: Object, required: true },
     currentUser: { type: Object, default: null },
@@ -55,6 +52,16 @@ export default {
     currentUsername: { type: String, default: "" },
   },
   emits: ["viewRecords", "back", "swipe"],
+  data() {
+    return { scrollHeight: 500 };
+  },
+  mounted() {
+    try {
+      const info = uni.getSystemInfoSync();
+      // 工具条高度 + 底部安全区预留约 70px，剩余给滚动区
+      this.scrollHeight = Math.max((info.windowHeight || 600) - 70, 300);
+    } catch (e) {}
+  },
 };
 </script>
 
@@ -87,7 +94,7 @@ export default {
 .zero-icon { font-size: 40px; margin-bottom: 10px; }
 .zero-text { font-size: 14px; color: #9ca3af; }
 
-.tree-scroll { flex: 1; height: 0; overflow: hidden; }
+.tree-scroll { flex-shrink: 0; }
 .tree-root { padding: 16px 12px 20px; }
 .tree-legend {
   display: flex;