diff --git a/track-uniapp/src/pages/scan/components/FlowTree.vue b/track-uniapp/src/pages/scan/components/FlowTree.vue
new file mode 100644
index 0000000..2725f97
--- /dev/null
+++ b/track-uniapp/src/pages/scan/components/FlowTree.vue
@@ -0,0 +1,128 @@
+<template>
+  <view class="ft-node">
+    <!-- 节点卡片 -->
+    <view class="ft-card" :class="statusColorClass(node.status)">
+      <view class="ft-head">
+        <text class="ft-badge" :class="isMainNode ? 'ft-badge-main' : 'ft-badge-sub'">{{ isMainNode ? '主线' : '分支' }}</text>
+        <text :class="['ft-status', statusColorClass(node.status)]">{{ statusLabel(node.status) }}</text>
+        <text v-if="node.is_rework" class="ft-rework">⚠返工</text>
+      </view>
+      <text class="ft-name">{{ node.task_name }}</text>
+      <view class="ft-meta">
+        <!-- 在库任务显示"转入在库"，其余显示负责人 -->
+        <text v-if="isWarehouseTask" class="ft-warehouse-in">📥 转入在库: {{ formatUserName(node.assignee_id) }}</text>
+        <text v-else class="ft-assignee">👤 {{ formatUserName(node.assignee_id) || '未分配' }}</text>
+      </view>
+      <view class="ft-bottom">
+        <text class="ft-time">⏰ {{ fmtDate(node.created_at) }}{{ node.completed_at ? ' → ' + fmtDate(node.completed_at) : ' → 至今' }}</text>
+        <text v-if="node.records && node.records.length" class="ft-records" @tap.stop="$emit('viewRecords', node)">📋 {{ node.records.length }}条 ›</text>
+      </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)"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import { formatUserName } from "../../../utils/format";
+
+export default {
+  name: "FlowTree",
+  props: {
+    node: { type: Object, required: true },
+    currentUser: { type: Object, default: null },
+    currentUserId: { type: [String, Number], default: "" },
+    currentUsername: { type: String, default: "" },
+  },
+  emits: ["viewRecords"],
+  computed: {
+    isMainNode() {
+      return !this.node.parent_task_id
+        || this.node.task_type === "TRANSFER"
+        || this.node.task_type === "RECOVERY";
+    },
+    isWarehouseTask() {
+      const name = String(this.node.task_name || "");
+      return (name.includes("在库") || name.includes("入库")) || this.node.assignee_id === "virtual_warehouse";
+    },
+  },
+  methods: {
+    statusLabel(s) {
+      const map = { PENDING: "待接收", WIP: "进行中", COMPLETED: "已完成", REJECTED: "已驳回", ARCHIVED: "已入库", OUTBOUND: "已出库" };
+      return map[s] || s;
+    },
+    statusColorClass(s) {
+      switch (s) {
+        case "PENDING": return "s-yellow";
+        case "WIP": return "s-blue";
+        case "COMPLETED": return "s-green";
+        case "REJECTED": return "s-red";
+        case "ARCHIVED": return "s-archived";
+        case "OUTBOUND": return "s-outbound";
+        default: return "s-gray";
+      }
+    },
+    fmtDate(t) {
+      if (!t) return "";
+      const d = new Date(t);
+      const p = (n) => String(n).padStart(2, "0");
+      return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.ft-node { margin-bottom: 10px; }
+.ft-card {
+  background: #fff;
+  border-radius: 10px;
+  border: 1px solid #e5e7eb;
+  border-left-width: 4px;
+  padding: 10px 12px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+}
+/* 状态左色条 */
+.ft-card.s-yellow { border-left-color: #f59e0b; }
+.ft-card.s-blue { border-left-color: #3b82f6; }
+.ft-card.s-green { border-left-color: #22c55e; }
+.ft-card.s-red { border-left-color: #ef4444; }
+.ft-card.s-archived { border-left-color: #8b5cf6; }
+.ft-card.s-outbound { border-left-color: #4f46e5; }
+.ft-card.s-gray { border-left-color: #9ca3af; }
+
+.ft-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
+.ft-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 4px; color: #fff; }
+.ft-badge-main { background: #2563eb; }
+.ft-badge-sub { background: #7c3aed; }
+.ft-status { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 10px; }
+.s-yellow .ft-status { background: #fef3c7; color: #b45309; }
+.s-blue .ft-status { background: #dbeafe; color: #1d4ed8; }
+.s-green .ft-status { background: #dcfce7; color: #15803d; }
+.s-red .ft-status { background: #fce4ec; color: #be123c; }
+.s-archived .ft-status { background: #ede9fe; color: #7c3aed; }
+.s-outbound .ft-status { background: #e0e7ff; color: #4338ca; }
+.s-gray .ft-status { background: #f3f4f6; color: #6b7280; }
+.ft-rework { font-size: 10px; background: #ef4444; color: #fff; padding: 1px 5px; border-radius: 4px; font-weight: 700; }
+
+.ft-name { font-size: 14px; font-weight: 700; color: #1f2937; }
+.ft-meta { margin-top: 4px; font-size: 12px; }
+.ft-assignee { color: #4b5563; }
+.ft-warehouse-in { color: #059669; font-weight: 700; }
+.ft-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
+.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; }
+</style>
diff --git a/track-uniapp/src/pages/scan/components/TreeCanvas.vue b/track-uniapp/src/pages/scan/components/TreeCanvas.vue
index d37ce94..ddeea66 100644
--- a/track-uniapp/src/pages/scan/components/TreeCanvas.vue
+++ b/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;