From 4c4ed7234dc4af8709dccf9fd1e5f3e804949122 Mon Sep 17 00:00:00 2001
From: duxingchen <duxingchen@iris-rs.cn>
Date: Wed, 5 Aug 2026 17:22:36 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=88=E6=9E=81=E9=87=8D=E6=9E=84:=20getTask?=
 =?UTF-8?q?Remark=E5=85=9C=E5=BA=95(record=E6=8C=96=E6=8E=98)=20+=20movabl?=
 =?UTF-8?q?e-area=202D=E7=94=BB=E5=B8=83(=E6=8B=96=E6=8B=BD+=E7=BC=A9?=
 =?UTF-8?q?=E6=94=BE)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 track-uniapp/src/pages/scan/detail.vue | 1058 ++++--------------------
 1 file changed, 174 insertions(+), 884 deletions(-)

diff --git a/track-uniapp/src/pages/scan/detail.vue b/track-uniapp/src/pages/scan/detail.vue
index 0738b70..f19fdff 100644
--- a/track-uniapp/src/pages/scan/detail.vue
+++ b/track-uniapp/src/pages/scan/detail.vue
@@ -1,13 +1,9 @@
 <template>
   <view class="page-container">
-    <!-- ======== 加载/错误 ======== -->
     <view v-if="loading" class="loading">加载中...</view>
     <view v-if="error" class="error-box">{{ error }}</view>
 
     <template v-if="product && !loading">
-      <!-- ================================================================ -->
-      <!-- 宏观状态栏 -->
-      <!-- ================================================================ -->
       <view class="overall-bar" @tap="showStatusPicker = true">
         <text class="overall-label">宏观状态</text>
         <text :class="['overall-val', product.overall_status ? '' : 'overall-empty']">
@@ -16,9 +12,6 @@
         <text class="overall-arrow">▾</text>
       </view>
 
-      <!-- ================================================================ -->
-      <!-- 产品卡片 -->
-      <!-- ================================================================ -->
       <view class="card">
         <view class="card-header">
           <text class="card-title">📦 产品信息</text>
@@ -31,22 +24,10 @@
           </view>
         </view>
         <view class="info-grid">
-          <view class="info-item">
-            <text class="label">序列号</text>
-            <text class="value sn">{{ product.serial_number }}</text>
-          </view>
-          <view class="info-item">
-            <text class="label">物料名称</text>
-            <text class="value">{{ product.material_name || product.material_id || '—' }}</text>
-          </view>
-          <view class="info-item">
-            <text class="label">规格型号</text>
-            <text class="value">{{ product.spec_model || '—' }}</text>
-          </view>
-          <view class="info-item">
-            <text class="label">订单编号</text>
-            <text class="value">{{ product.order_no || '—' }}</text>
-          </view>
+          <view class="info-item"><text class="label">序列号</text><text class="value sn">{{ product.serial_number }}</text></view>
+          <view class="info-item"><text class="label">物料名称</text><text class="value">{{ product.material_name || product.material_id || '—' }}</text></view>
+          <view class="info-item"><text class="label">规格型号</text><text class="value">{{ product.spec_model || '—' }}</text></view>
+          <view class="info-item"><text class="label">订单编号</text><text class="value">{{ product.order_no || '—' }}</text></view>
           <view class="info-item" v-if="product.current_location_id">
             <text class="label">当前位置</text>
             <text :class="['value', product.current_location_id === 'virtual_warehouse' ? 'warehouse' : '']">
@@ -56,36 +37,26 @@
         </view>
       </view>
 
-      <!-- ================================================================ -->
-      <!-- 🛠️ 个人工作区 (workspace) -->
-      <!-- ================================================================ -->
+      <!-- 🛠️ 个人工作区 -->
       <view v-if="currentMode === 'workspace'" class="workspace-area">
-        <!-- 0任务 -->
         <view v-if="!product.task_tree || !product.task_tree.length" class="zero-task">
-          <text class="zero-icon">📋</text>
-          <text class="zero-text">该产品暂无流转任务</text>
+          <text class="zero-icon">📋</text><text class="zero-text">该产品暂无流转任务</text>
           <button class="btn-start" @tap="openCreateFirstTask">🚀 发起首道工序</button>
         </view>
-
-        <!-- 无本人任务 -->
         <view v-else-if="!focusTasks.length" class="zero-task">
-          <text class="zero-icon">🔒</text>
-          <text class="zero-text">当前没有需要你处理的任务</text>
+          <text class="zero-icon">🔒</text><text class="zero-text">当前没有需要你处理的任务</text>
           <text class="task-count">共 {{ countTasks(product.task_tree) }} 个任务</text>
         </view>
-
-        <!-- ====== 任务列表（未锁定） ====== -->
         <template v-else-if="!lockedTaskId">
           <view class="list-header">
             <text class="list-title">📋 待处理任务 ({{ focusTasks.length }})</text>
-            <text class="list-hint">点击任务进入工作区</text>
+            <text class="list-hint">点击任务进入绝对锁定工作区</text>
           </view>
           <view class="task-list">
-            <view v-for="t in focusTasks" :key="t.id" class="task-list-item"
-              :class="statusColor(t.status)" @tap="lockTask(t.id)">
+            <view v-for="t in focusTasks" :key="t.id" class="task-list-item" :class="statusColor(t.status)" @tap="lockTask(t.id)">
               <view class="tli-left">
                 <text class="tli-name">{{ t.task_name }}</text>
-                <text v-if="t.remark" class="tli-remark">{{ t.remark }}</text>
+                <text v-if="getTaskRemark(t)" class="tli-remark">{{ getTaskRemark(t) }}</text>
               </view>
               <view class="tli-right">
                 <text :class="['tli-badge', statusColor(t.status)]">{{ statusLabel(t.status) }}</text>
@@ -95,28 +66,21 @@
             </view>
           </view>
         </template>
-
-        <!-- ====== 锁定工作区（单任务详情） ====== -->
         <template v-else>
           <view class="lock-bar">
             <text class="lock-back" @tap="lockedTaskId = null">← 返回列表</text>
-            <text class="lock-title">🔒 {{ lockedTask.task_name }}</text>
+            <text class="lock-title">🔒 沉浸工作区</text>
           </view>
-
           <view class="focus-card" :class="statusColor(lockedTask.status)">
             <view class="fc-header">
               <text class="fc-status">{{ statusLabel(lockedTask.status) }}</text>
               <text v-if="lockedTask.is_rework" class="tag tag-rework-sm">⚠返工</text>
             </view>
             <text class="fc-name">{{ lockedTask.task_name }}</text>
-
-            <!-- 📌 交接/接收备注 -->
-            <!-- 📌 交接/接收备注（强制渲染，极其醒目） -->
-            <view v-if="lockedTask.remark" style="margin-top:20rpx;padding:20rpx;background:#FFFBE8;border-left:8rpx solid #FADB14;border-radius:12rpx;">
+            <view v-if="getTaskRemark(lockedTask)" style="margin-top:20rpx;padding:20rpx;background:#FFFBE8;border-left:8rpx solid #FADB14;border-radius:12rpx;">
               <text style="font-size:26rpx;color:#8C6A00;font-weight:bold;">📌 初始/交接备注：</text>
-              <view style="font-size:28rpx;color:#333;margin-top:10rpx;">{{ lockedTask.remark }}</view>
+              <view style="font-size:28rpx;color:#333;margin-top:10rpx;">{{ getTaskRemark(lockedTask) }}</view>
             </view>
-
             <view v-if="lockedTask.parent_task_id && parentTaskOf(lockedTask)" class="fc-link fc-up">
               <text class="fc-link-label">⬆ 上游工序</text>
               <text class="fc-link-name">{{ parentTaskOf(lockedTask).task_name }} → {{ parentTaskOf(lockedTask).assignee_id || '—' }}</text>
@@ -129,256 +93,131 @@
                 <text v-else-if="c.status==='ARCHIVED'" class="branch-done">📦已入库</text>
               </text>
             </view>
-
             <view v-if="lockedTask.records && lockedTask.records.length" class="fc-records-bar" @tap="handleViewRecords(lockedTask)">
               📋 {{ lockedTask.records.length }} 条干活记录 ›
             </view>
             <view class="fc-time">{{ formatTaskTime(lockedTask) }}</view>
           </view>
-
           <view class="footer-actions">
-            <button v-if="lockedTask.status === 'WIP'" class="footer-btn footer-transfer"
-              @tap="handleTaskAction({ task: lockedTask, type: 'transfer' })">🔄 完工转交</button>
-            <button v-if="lockedTask.status === 'WIP'" class="footer-btn footer-record"
-              @tap="handleTaskAction({ task: lockedTask, type: 'record' })">📝 记录/拍照</button>
-            <button v-if="lockedTask.status === 'WIP'" class="footer-btn footer-end"
-              @tap="handleTaskAction({ task: lockedTask, type: 'end' })">🏁 结束分支</button>
-            <button v-if="lockedTask.status === 'PENDING'" class="footer-btn footer-receive"
-              @tap="handleTaskAction({ task: lockedTask, type: 'receive' })">✅ 接收任务</button>
-            <button v-if="lockedTask.status === 'PENDING'" class="footer-btn footer-reject"
-              @tap="handleTaskAction({ task: lockedTask, type: 'reject' })">❌ 驳回任务</button>
+            <button v-if="lockedTask.status === 'WIP'" class="footer-btn footer-transfer" @tap="handleTaskAction({ task: lockedTask, type: 'transfer' })">🔄 完工转交</button>
+            <button v-if="lockedTask.status === 'WIP'" class="footer-btn footer-record" @tap="handleTaskAction({ task: lockedTask, type: 'record' })">📝 记录/拍照</button>
+            <button v-if="lockedTask.status === 'WIP'" class="footer-btn footer-end" @tap="handleTaskAction({ task: lockedTask, type: 'end' })">🏁 结束分支</button>
+            <button v-if="lockedTask.status === 'PENDING'" class="footer-btn footer-receive" @tap="handleTaskAction({ task: lockedTask, type: 'receive' })">✅ 接收任务</button>
+            <button v-if="lockedTask.status === 'PENDING'" class="footer-btn footer-reject" @tap="handleTaskAction({ task: lockedTask, type: 'reject' })">❌ 驳回任务</button>
           </view>
         </template>
       </view>
 
-      <!-- ================================================================ -->
-      <!-- 🌳 全局流转树 (tree 模式 — 2D 画布只读) -->
-      <!-- ================================================================ -->
+      <!-- 🌳 全局流转树 (2D movable-area 画布) -->
       <view v-if="currentMode === 'tree'" class="tree-area">
         <view v-if="!product.task_tree || !product.task_tree.length" class="zero-task">
-          <text class="zero-icon">📋</text>
-          <text class="zero-text">该产品暂无流转任务</text>
+          <text class="zero-icon">📋</text><text class="zero-text">该产品暂无流转任务</text>
         </view>
-        <view v-else class="canvas-hint">🖐 上下滑动看流程 · 左右滑动看分支</view>
-        <scroll-view v-else scroll-x scroll-y class="tree-canvas" style="width:100%;height:100%;">
-          <view class="canvas-inner" :style="{ width: Math.max(canvasWidth, 600) + 'px', height: Math.max(canvasHeight, 600) + 'px', padding: '40px' }">
-            <!-- 节点 -->
-            <view v-for="node in treeNodes" :key="node.id"
-              class="canvas-node" :class="statusColor(node.status)"
-              :style="{ left: node.x + 'px', top: node.y + 'px' }"
-              @tap="node.records && node.records.length && handleViewRecords(node)">
-              <text class="cn-name">{{ node.task_name }}</text>
-              <text class="cn-assignee">{{ node.assignee_id || '—' }}</text>
-              <text :class="['cn-badge', statusColor(node.status)]">{{ statusLabel(node.status) }}</text>
-              <text v-if="node.remark" class="cn-remark">{{ node.remark }}</text>
-              <text v-if="node.status==='COMPLETED' && !node.child_tasks.length" class="cn-end">🏁 终止</text>
-              <text v-if="node.status==='ARCHIVED'" class="cn-end cn-end-wh">📦 入库</text>
-              <text v-if="node.records && node.records.length" class="cn-records">📋{{ node.records.length }}</text>
-            </view>
-            <!-- 连接线 -->
-            <view v-for="line in treeLines" :key="line.key" class="canvas-line"
-              :style="lineStyle(line)">
-            </view>
-          </view>
-        </scroll-view>
+        <template v-else>
+          <view class="canvas-hint">🖐 2D 蓝图画布：支持随意拖拽探索分支走向</view>
+          <movable-area class="tree-movable-area">
+            <movable-view class="tree-movable-view" direction="all" :x="0" :y="0" :scale="true" :scale-min="0.5" :scale-max="2"
+              :style="{ width: Math.max(canvasWidth, 1200) + 'px', height: Math.max(canvasHeight, 1200) + 'px' }">
+              <view class="canvas-inner">
+                <view v-for="line in treeLines" :key="line.key" class="canvas-line" :style="lineStyle(line)"></view>
+                <view v-for="node in treeNodes" :key="node.id" class="canvas-node" :class="statusColor(node.status)"
+                  :style="{ left: node.x + 'px', top: node.y + 'px' }"
+                  @tap="node.records && node.records.length && handleViewRecords(node)">
+                  <view class="cn-header">
+                    <text class="cn-name">{{ node.task_name }}</text>
+                    <text :class="['cn-badge', statusColor(node.status)]">{{ statusLabel(node.status) }}</text>
+                  </view>
+                  <text class="cn-assignee">负责人: {{ node.assignee_id || '—' }}</text>
+                  <text v-if="getTaskRemark(node)" class="cn-remark">📌 {{ getTaskRemark(node) }}</text>
+                  <view class="cn-footer">
+                    <text v-if="node.status==='COMPLETED' && (!node.child_tasks || !node.child_tasks.length)" class="cn-end">🏁 终止</text>
+                    <text v-if="node.status==='ARCHIVED'" class="cn-end cn-end-wh">📦 入库</text>
+                    <text v-if="node.records && node.records.length" class="cn-records">📋 {{ node.records.length }}记录 ›</text>
+                  </view>
+                </view>
+              </view>
+            </movable-view>
+          </movable-area>
+        </template>
       </view>
     </template>
 
-    <!-- ================================================================ -->
-    <!-- 弹窗层 -->
-    <!-- ================================================================ -->
-
-    <!-- 1. 状态定调 -->
+    <!-- 状态定调 -->
     <view v-if="showStatusPicker" class="overlay" @tap="() => {}">
       <view class="sheet">
         <text class="sheet-title">{{ product && product.overall_status ? '修改宏观状态' : '🔔 请设定产品宏观状态' }}</text>
         <text class="sheet-hint">首次扫码，请选择一个状态以开启流转</text>
         <view class="sheet-options">
-          <view v-for="opt in OVERALL_OPTIONS" :key="opt"
-            :class="['sheet-opt', product && product.overall_status === opt ? 'sheet-opt-active' : '']"
-            @tap="handleSetOverallStatus(opt)"><text>{{ opt }}</text></view>
+          <view v-for="opt in OVERALL_OPTIONS" :key="opt" :class="['sheet-opt', product && product.overall_status === opt ? 'sheet-opt-active' : '']" @tap="handleSetOverallStatus(opt)"><text>{{ opt }}</text></view>
         </view>
         <button v-if="product && product.overall_status" class="sheet-close" @tap="showStatusPicker = false">关闭</button>
       </view>
     </view>
-
-    <!-- 2. 编辑产品 -->
+    <!-- 编辑产品 -->
     <view v-if="editProductVisible" class="overlay" @tap="editProductVisible = false">
       <view class="popup" @tap.stop>
         <text class="popup-title">编辑产品</text>
         <input v-model="editForm.order_no" class="popup-input" placeholder="订单编号" />
         <input v-model="editForm.external_serial" class="popup-input" placeholder="外部序列号" />
-        <view class="popup-btns">
-          <button class="btn-cancel" @tap="editProductVisible = false">取消</button>
-          <button class="btn-primary" :disabled="editSaving" @tap="doEditProduct">
-            {{ editSaving ? '保存中...' : '保存' }}
-          </button>
-        </view>
+        <view class="popup-btns"><button class="btn-cancel" @tap="editProductVisible = false">取消</button><button class="btn-primary" :disabled="editSaving" @tap="doEditProduct">{{ editSaving ? '保存中...' : '保存' }}</button></view>
       </view>
     </view>
-
-    <!-- 3. 发起首道工序 -->
+    <!-- 发起首道工序 -->
     <view v-if="createFirstVisible" class="overlay" @tap="createFirstVisible = false">
       <view class="popup" @tap.stop>
         <text class="popup-title">🚀 发起首道工序</text>
-
-        <!-- 工序名称 Picker -->
         <view class="field-label">工序名称 <text class="required">*</text></view>
-        <picker :range="TASK_NAME_OPTIONS" :value="firstForm.taskNameIdx" @change="onTaskNameChange">
-          <view class="picker-box">{{ firstForm.task_name || '请选择工序名称' }}</view>
-        </picker>
-
-        <!-- 接收人 Picker -->
+        <picker :range="TASK_NAME_OPTIONS" :value="firstForm.taskNameIdx" @change="onTaskNameChange"><view class="picker-box">{{ firstForm.task_name || '请选择工序名称' }}</view></picker>
         <view class="field-label">接收人 <text class="required">*</text></view>
-        <picker :range="userLabels" :value="firstForm.assigneeIdx" @change="onAssigneeChange">
-          <view class="picker-box">{{ firstForm.assigneeLabel || '请选择接收人' }}</view>
-        </picker>
-
-        <!-- 备注（必填） -->
+        <picker :range="userLabels" :value="firstForm.assigneeIdx" @change="onAssigneeChange"><view class="picker-box">{{ firstForm.assigneeLabel || '请选择接收人' }}</view></picker>
         <view class="field-label">备注 <text class="required">*</text></view>
         <textarea v-model="firstForm.note" class="popup-textarea" placeholder="请填写备注说明（必填）" :maxlength="500" />
-
-        <!-- 立即接收开关 -->
-        <label class="switch-row" @tap="firstForm.autoReceive = !firstForm.autoReceive">
-          <text class="switch-label">⚡ 立即接收并开始计时</text>
-          <switch :checked="firstForm.autoReceive" color="#2563EB" style="transform:scale(0.8)" />
-        </label>
-        <text class="switch-hint">{{ firstForm.autoReceive ? '创建后自动调用接收接口，任务直接变为 WIP 并记录开工时间' : '仅创建任务（PENDING），由工人自行接收' }}</text>
-
-        <view class="popup-btns">
-          <button class="btn-cancel" @tap="createFirstVisible = false">取消</button>
-          <button class="btn-primary" :disabled="firstSaving || !firstForm.task_name || !firstForm.assignee_id || !firstForm.note.trim()" @tap="doCreateFirstTask">
-            {{ firstSaving ? '创建中...' : (firstForm.autoReceive ? '创建并接收' : '确认创建') }}
-          </button>
-        </view>
+        <label class="switch-row" @tap="firstForm.autoReceive = !firstForm.autoReceive"><text class="switch-label">⚡ 立即接收并开始计时</text><switch :checked="firstForm.autoReceive" color="#2563EB" style="transform:scale(0.8)" /></label>
+        <view class="popup-btns"><button class="btn-cancel" @tap="createFirstVisible = false">取消</button><button class="btn-primary" :disabled="firstSaving || !firstForm.task_name || !firstForm.assignee_id || !firstForm.note.trim()" @tap="doCreateFirstTask">{{ firstSaving ? '创建中...' : (firstForm.autoReceive ? '创建并接收' : '确认创建') }}</button></view>
       </view>
     </view>
-
-    <!-- 4. 记录/拍照 -->
+    <!-- 记录/拍照 -->
     <view v-if="recordPopup.visible" class="overlay" @tap="closeRecordPopup">
       <view class="popup" @tap.stop>
         <text class="popup-title">{{ recordForm.recordId ? '✏️ 编辑记录' : '📝 记录/拍照' }}</text>
         <text class="popup-task">{{ recordPopup.task && recordPopup.task.task_name }}</text>
         <textarea v-model="recordForm.remark" class="popup-textarea" placeholder="填写备注说明" :maxlength="2000" />
-
-        <!-- 图片九宫格预览 -->
         <view class="img-grid">
-          <view v-for="(img, i) in recordForm.images" :key="i" class="img-cell">
-            <image :src="img" mode="aspectFill" class="img-thumb" @tap="previewRecordImage(i)" />
-            <text v-if="canDeleteImage" class="img-del" @tap.stop="removeRecordImage(i)">✕</text>
-          </view>
-          <!-- 上传中占位 -->
-          <view v-for="n in recordForm.pendingCount" :key="'p'+n" class="img-cell img-cell-loading">
-            <text class="img-loading-text">⏳</text>
-          </view>
-        </view>
-
-        <!-- 上传按钮 (未满9张时显示) -->
-        <button
-          v-if="recordForm.images.length + recordForm.pendingCount < 9"
-          class="btn-upload" @tap="handleChooseImage" :disabled="isUploading"
-        >
-          {{ isUploading ? '上传中...' : `📷 拍照/选图 (${recordForm.images.length + recordForm.pendingCount}/9)` }}
-        </button>
-
-        <view class="popup-btns">
-          <button class="btn-cancel" @tap="closeRecordPopup">取消</button>
-          <button class="btn-primary" :disabled="recordSaving || isUploading" @tap="doSaveRecord">
-            {{ isUploading ? `上传中 (${recordForm.images.length}/${recordForm.images.length + recordForm.pendingCount})` : (recordSaving ? '保存中...' : (recordForm.recordId ? '更新记录' : '保存记录')) }}
-          </button>
+          <view v-for="(img, i) in recordForm.images" :key="i" class="img-cell"><image :src="img" mode="aspectFill" class="img-thumb" @tap="previewRecordImage(i)" /><text v-if="canDeleteImage" class="img-del" @tap.stop="removeRecordImage(i)">✕</text></view>
+          <view v-for="n in recordForm.pendingCount" :key="'p'+n" class="img-cell img-cell-loading"><text class="img-loading-text">⏳</text></view>
         </view>
+        <button v-if="recordForm.images.length + recordForm.pendingCount < 9" class="btn-upload" @tap="handleChooseImage" :disabled="isUploading">{{ isUploading ? '上传中...' : `📷 拍照/选图 (${recordForm.images.length + recordForm.pendingCount}/9)` }}</button>
+        <view class="popup-btns"><button class="btn-cancel" @tap="closeRecordPopup">取消</button><button class="btn-primary" :disabled="recordSaving || isUploading" @tap="doSaveRecord">{{ isUploading ? `上传中` : (recordSaving ? '保存中...' : (recordForm.recordId ? '更新记录' : '保存记录')) }}</button></view>
       </view>
     </view>
-
-    <!-- 5. 任务操作弹出 -->
+    <!-- 任务操作 -->
     <view v-if="actionPopup.visible" class="overlay" @tap="closeActionPopup">
       <view class="popup" @tap.stop>
-        <!-- 接收 -->
         <template v-if="actionPopup.type === 'receive'">
           <text class="popup-title">确认接收任务</text>
           <view class="popup-task">{{ actionPopup.task && actionPopup.task.task_name }}</view>
           <text class="popup-hint">状态: {{ statusLabel(actionPopup.task && actionPopup.task.status) }} → 进行中</text>
           <textarea v-model="receiveRemark" class="popup-textarea" placeholder="接收备注（选填）" :maxlength="500" />
-          <view class="popup-btns">
-            <button class="btn-cancel" @tap="closeActionPopup">取消</button>
-            <button class="btn-primary" :disabled="actionLoading" @tap="doReceive">确认接收</button>
-          </view>
+          <view class="popup-btns"><button class="btn-cancel" @tap="closeActionPopup">取消</button><button class="btn-primary" :disabled="actionLoading" @tap="doReceive">确认接收</button></view>
         </template>
-        <!-- 驳回 -->
         <template v-if="actionPopup.type === 'reject'">
           <text class="popup-title">品质驳回</text>
           <textarea v-model="rejectReason" class="popup-textarea" placeholder="请填写驳回原因（必填）" :maxlength="500" />
           <text class="popup-hint">⚠ 驳回后将自动创建返工任务</text>
-          <view class="popup-btns">
-            <button class="btn-cancel" @tap="closeActionPopup">取消</button>
-            <button class="btn-danger" :disabled="actionLoading || !rejectReason.trim()" @tap="doReject">确认驳回</button>
-          </view>
+          <view class="popup-btns"><button class="btn-cancel" @tap="closeActionPopup">取消</button><button class="btn-danger" :disabled="actionLoading || !rejectReason.trim()" @tap="doReject">确认驳回</button></view>
         </template>
-        <!-- 转交（支持多分支裂变） -->
         <template v-if="actionPopup.type === 'transfer'">
           <text class="popup-title">完工转交 · 裂变派发</text>
-
-          <!-- 分支列表 -->
           <view v-for="(branch, idx) in transferForm.branches" :key="idx" class="branch-item">
-            <view class="branch-header">
-              <text class="branch-label">分支 {{ idx + 1 }}</text>
-              <text v-if="transferForm.branches.length > 1" class="branch-del"
-                @tap="removeBranch(idx)">🗑️ 删除</text>
-            </view>
-
-            <!-- 工序选择 -->
-            <view class="form-item">
-              <text class="form-label">工序 <text class="required">*</text></text>
-              <picker mode="selector" :range="processOptions" @change="(e) => onBranchProcessChange(idx, e)">
-                <view class="picker-value">
-                  <text :class="branch.task_name ? '' : 'picker-placeholder'">
-                    {{ branch.task_name || '请选择工序' }}
-                  </text>
-                  <text class="picker-arrow">▾</text>
-                </view>
-              </picker>
-            </view>
-
-            <!-- 接收人（入库分支不需要） -->
-            <view v-if="!isBranchWarehouse(idx)" class="form-item">
-              <text class="form-label">接收人 <text class="required">*</text></text>
-              <picker mode="selector" :range="userOptions" range-key="name" @change="(e) => onBranchUserChange(idx, e)">
-                <view class="picker-value">
-                  <text :class="branchUserName(idx) ? '' : 'picker-placeholder'">
-                    {{ branchUserName(idx) || '请选择接收人' }}
-                  </text>
-                  <text class="picker-arrow">▾</text>
-                </view>
-              </picker>
-            </view>
-
-            <view v-if="isBranchWarehouse(idx)" class="warehouse-hint">
-              📦 入库分支 — 直接归档，无需指定接收人
-            </view>
+            <view class="branch-header"><text class="branch-label">分支 {{ idx + 1 }}</text><text v-if="transferForm.branches.length > 1" class="branch-del" @tap="removeBranch(idx)">🗑️ 删除</text></view>
+            <view class="form-item"><text class="form-label">工序 <text class="required">*</text></text><picker mode="selector" :range="processOptions" @change="(e) => onBranchProcessChange(idx, e)"><view class="picker-value"><text :class="branch.task_name ? '' : 'picker-placeholder'">{{ branch.task_name || '请选择工序' }}</text><text class="picker-arrow">▾</text></view></picker></view>
+            <view v-if="!isBranchWarehouse(idx)" class="form-item"><text class="form-label">接收人 <text class="required">*</text></text><picker mode="selector" :range="userOptions" range-key="name" @change="(e) => onBranchUserChange(idx, e)"><view class="picker-value"><text :class="branchUserName(idx) ? '' : 'picker-placeholder'">{{ branchUserName(idx) || '请选择接收人' }}</text><text class="picker-arrow">▾</text></view></picker></view>
+            <view v-if="isBranchWarehouse(idx)" class="warehouse-hint">📦 入库分支 — 直接归档，无需指定接收人</view>
           </view>
-
-          <!-- ➕ 添加分支 -->
           <button class="btn-add-branch" @tap="addBranch">➕ 添加并行分支</button>
-
-          <!-- 备注 -->
           <input v-model="transferForm.note" class="popup-input" placeholder="交接备注（选填）" style="margin-top:12px;" />
-
-          <!-- 预览 -->
-          <view v-if="transferForm.branches.some(b => b.task_name)" class="preview-hint">
-            将创建 {{ transferForm.branches.length }} 个并行任务：
-            <text v-for="(b, i) in transferForm.branches" :key="i" style="display:block;margin-top:2px;">
-              {{ i + 1 }}. {{ b.task_name || '—' }} → {{ branchUserName(i) || (isBranchWarehouse(i) ? '仓库' : '未选') }}
-            </text>
-          </view>
-
-          <view class="popup-btns">
-            <button class="btn-cancel" @tap="closeActionPopup">取消</button>
-            <button class="btn-primary"
-              :disabled="actionLoading || !transferForm.branches.some(b => b.task_name) || !canSubmitTransfer"
-              @tap="doTransfer">
-              {{ actionLoading ? '提交中...' : '确认转交 (' + transferForm.branches.length + '分支)' }}
-            </button>
-          </view>
+          <view v-if="transferForm.branches.some(b => b.task_name)" class="preview-hint">将创建 {{ transferForm.branches.length }} 个并行任务：<text v-for="(b, i) in transferForm.branches" :key="i" style="display:block;margin-top:2px;">{{ i + 1 }}. {{ b.task_name || '—' }} → {{ branchUserName(i) || (isBranchWarehouse(i) ? '仓库' : '未选') }}</text></view>
+          <view class="popup-btns"><button class="btn-cancel" @tap="closeActionPopup">取消</button><button class="btn-primary" :disabled="actionLoading || !transferForm.branches.some(b => b.task_name) || !canSubmitTransfer" @tap="doTransfer">{{ actionLoading ? '提交中...' : '确认转交 (' + transferForm.branches.length + '分支)' }}</button></view>
         </template>
       </view>
     </view>
@@ -387,583 +226,102 @@
 
 <script>
 import request, { get, post, patch, put } from "../../utils/request";
-import TaskTreeNode from "./components/TaskTreeNode.vue";
 
 const OVERALL_OPTIONS = ["备货", "生产", "测试", "维修", "在库"];
 const TASK_NAME_OPTIONS = ["备货", "生产", "测试", "维修", "在库"];
-const STATUS_MAP = {
-  PENDING: "待接收", WIP: "进行中", COMPLETED: "已完成",
-  REJECTED: "已驳回", ARCHIVED: "已入库",
-};
+const STATUS_MAP = { PENDING: "待接收", WIP: "进行中", COMPLETED: "已完成", REJECTED: "已驳回", ARCHIVED: "已入库" };
 
 export default {
-  components: { TaskTreeNode },
   data() {
     return {
-      OVERALL_OPTIONS,
-      loading: true,
-      error: "",
-      product: null,
-      // 状态定调
-      showStatusPicker: false,
-      // 编辑产品
-      editProductVisible: false,
-      editForm: { order_no: "", external_serial: "" },
-      editSaving: false,
-      // 用户列表
-      users: [],
-      TASK_NAME_OPTIONS,
-      // 发起首道工序
-      createFirstVisible: false,
-      firstForm: { task_name: "", taskNameIdx: 0, assignee_id: "", assigneeLabel: "", assigneeIdx: 0, note: "", autoReceive: true },
-      firstSaving: false,
-      // 记录/拍照
-      recordPopup: { visible: false, task: null },
-      recordForm: { recordId: null, remark: "", images: [], pendingCount: 0 },
-      recordSaving: false,
-      isUploading: false,
-      currentUser: null,
-      currentUserId: "",
-      currentUsername: "",
-      currentMode: "tree",
-      lockedTaskId: null,
-      // Picker 数据源
-      processOptions: [],
-      userOptions: [],
-      // 任务操作
-      actionPopup: { visible: false, type: "", task: null },
-      actionLoading: false,
-      rejectReason: "",
-      receiveRemark: "",
+      OVERALL_OPTIONS, loading: true, error: "", product: null,
+      showStatusPicker: false, editProductVisible: false, editForm: { order_no: "", external_serial: "" }, editSaving: false,
+      users: [], TASK_NAME_OPTIONS,
+      createFirstVisible: false, firstForm: { task_name: "", taskNameIdx: 0, assignee_id: "", assigneeLabel: "", assigneeIdx: 0, note: "", autoReceive: true }, firstSaving: false,
+      recordPopup: { visible: false, task: null }, recordForm: { recordId: null, remark: "", images: [], pendingCount: 0 }, recordSaving: false, isUploading: false,
+      currentUser: null, currentUserId: "", currentUsername: "", currentMode: "tree", lockedTaskId: null,
+      processOptions: [], userOptions: [],
+      actionPopup: { visible: false, type: "", task: null }, actionLoading: false, rejectReason: "", receiveRemark: "",
       transferForm: { branches: [{ task_name: "", assignee_id: "" }], note: "" },
     };
   },
   computed: {
-    userLabels() {
-      return this.users.map(u => `${u.full_name} (${u.username})`);
-    },
-    canDeleteImage() {
-      if (!this.recordPopup.task) return true;
-      if (!this.currentUser) return true;
-      return this.currentUser.username === this.recordPopup.task.assignee_id;
-    },
-    canSubmitTransfer() {
-      return this.transferForm.branches.every(b => {
-        if (!b.task_name) return false;
-        if (b.task_name === "🏭 入库 (virtual_warehouse)") return true;
-        return !!b.assignee_id;
-      });
-    },
-    // 构建 parent_task_id → task 的索引
-    taskMap() {
-      const m = {};
-      const walk = (tasks) => {
-        if (!tasks) return;
-        for (const t of tasks) { m[t.id] = t; walk(t.child_tasks); }
-      };
-      if (this.product) walk(this.product.task_tree);
-      return m;
-    },
-    // 只返回当前用户需要处理的活跃任务 (PENDING/WIP)
-    focusTasks() {
-      const result = [];
-      const walk = (tasks) => {
-        if (!tasks) return;
-        for (const t of tasks) {
-          const isMine = t.status === 'WIP' || t.status === 'PENDING';
-          const matchId = t.assignee_id == this.currentUserId;
-          const matchName = t.assignee_id == this.currentUsername;
-          if (isMine && (matchId || matchName)) result.push(t);
-          walk(t.child_tasks);
-        }
-      };
-      if (this.product) walk(this.product.task_tree);
-      return result;
-    },
-    lockedTask() {
-      return this.focusTasks.find(t => t.id === this.lockedTaskId) || null;
-    },
-    hasMyActiveTask() {
-      return this.focusTasks.length > 0;
-    },
-    // 2D 画布布局
+    userLabels() { return this.users.map(u => `${u.full_name} (${u.username})`); },
+    canDeleteImage() { if (!this.recordPopup.task) return true; if (!this.currentUser) return true; return this.currentUser.username === this.recordPopup.task.assignee_id; },
+    canSubmitTransfer() { return this.transferForm.branches.every(b => { if (!b.task_name) return false; if (b.task_name === "🏭 入库 (virtual_warehouse)") return true; return !!b.assignee_id; }); },
+    taskMap() { const m = {}; const walk = (tasks) => { if (!tasks) return; for (const t of tasks) { m[t.id] = t; walk(t.child_tasks); } }; if (this.product) walk(this.product.task_tree); return m; },
+    focusTasks() { const result = []; const walk = (tasks) => { if (!tasks) return; for (const t of tasks) { const isMine = t.status === 'WIP' || t.status === 'PENDING'; const matchId = t.assignee_id == this.currentUserId; const matchName = t.assignee_id == this.currentUsername; if (isMine && (matchId || matchName)) result.push(t); walk(t.child_tasks); } }; if (this.product) walk(this.product.task_tree); return result; },
+    lockedTask() { return this.focusTasks.find(t => t.id === this.lockedTaskId) || null; },
+    hasMyActiveTask() { return this.focusTasks.length > 0; },
     treeNodes() {
-      const nodes = [];
-      const CARD_W = 180, CARD_H = 120, GAP_X = 40, GAP_Y = 30;
+      const nodes = []; const CARD_W = 200, CARD_H = 140, GAP_X = 60, GAP_Y = 60;
       const layout = (tasks, depth, startX) => {
         if (!tasks || !tasks.length) return startX;
-        const y = 20 + depth * (CARD_H + GAP_Y);
-        let x = startX;
-        const childXs = [];
+        const y = 20 + depth * (CARD_H + GAP_Y); let x = startX; const childXs = [];
         for (const t of tasks) {
-          nodes.push({ ...t, x, y });
-          const childStartX = x;
-          if (t.child_tasks && t.child_tasks.length) {
-            x = layout(t.child_tasks, depth + 1, x);
-          } else {
-            x += CARD_W + GAP_X;
-          }
+          nodes.push({ ...t, x, y }); const childStartX = x;
+          if (t.child_tasks && t.child_tasks.length) { x = layout(t.child_tasks, depth + 1, x); } else { x += CARD_W + GAP_X; }
           childXs.push({ id: t.id, cx: childStartX + CARD_W / 2, cy: y + CARD_H, children: t.child_tasks || [] });
         }
-        // Store parent center for line drawing
         nodes._lines = nodes._lines || [];
-        for (const cx of childXs) {
-          if (cx.children.length) {
-            const midX = cx.cx;
-            for (const c of cx.children) {
-              const childNode = nodes.find(n => n.id === c.id);
-              if (childNode) {
-                nodes._lines.push({ key: cx.id + '-' + c.id, x1: midX, y1: cx.cy, x2: childNode.x + CARD_W / 2, y2: childNode.y });
-              }
-            }
-          }
-        }
+        for (const cx of childXs) { if (cx.children.length) { const midX = cx.cx; for (const c of cx.children) { const childNode = nodes.find(n => n.id === c.id); if (childNode) { nodes._lines.push({ key: cx.id + '-' + c.id, x1: midX, y1: cx.cy, x2: childNode.x + CARD_W / 2, y2: childNode.y }); } } } }
         return x;
       };
-      if (this.product && this.product.task_tree) {
-        nodes._lines = [];
-        layout(this.product.task_tree, 0, 20);
-      }
+      if (this.product && this.product.task_tree) { nodes._lines = []; layout(this.product.task_tree, 0, 40); }
       return nodes;
     },
-    treeLines() {
-      return this.treeNodes._lines || [];
-    },
-    canvasWidth() {
-      const nodes = this.treeNodes;
-      if (!nodes.length) return 400;
-      return Math.max(400, Math.max(...nodes.map(n => n.x)) + 200);
-    },
-    canvasHeight() {
-      const nodes = this.treeNodes;
-      if (!nodes.length) return 400;
-      return Math.max(400, Math.max(...nodes.map(n => n.y)) + 140);
-    },
-  },
-  onLoad(options) {
-    this.loadUsers();
-    this.loadCurrentUser();
-    const sn = options.serial || "";
-    if (sn) this.doQuery(sn);
+    treeLines() { return this.treeNodes._lines || []; },
+    canvasWidth() { const nodes = this.treeNodes; if (!nodes.length) return 400; return Math.max(400, Math.max(...nodes.map(n => n.x)) + 300); },
+    canvasHeight() { const nodes = this.treeNodes; if (!nodes.length) return 400; return Math.max(400, Math.max(...nodes.map(n => n.y)) + 300); },
   },
+  onLoad(options) { this.loadUsers(); this.loadCurrentUser(); const sn = options.serial || ""; if (sn) this.doQuery(sn); },
   methods: {
     statusLabel(s) { return STATUS_MAP[s] || s; },
-    statusColor(s) {
-      switch (s) {
-        case "PENDING": return "s-yellow";
-        case "WIP": return "s-blue";
-        case "COMPLETED": return "s-green";
-        case "REJECTED": return "s-red";
-        default: return "s-gray";
-      }
-    },
+    statusColor(s) { switch (s) { case "PENDING": return "s-yellow"; case "WIP": return "s-blue"; case "COMPLETED": return "s-green"; case "REJECTED": return "s-red"; default: return "s-gray"; } },
     countTasks(tree) { return tree ? tree.reduce((s, t) => s + 1 + this.countTasks(t.child_tasks), 0) : 0; },
 
-    // ---- 数据 ----
-    async doQuery(sn) {
-      this.loading = true; this.error = "";
-      try {
-        this.product = await get(`/products/scan/${sn}`);
-        if (!this.product.overall_status) this.showStatusPicker = true;
-        // 智能分流：有本人活跃任务 → workspace，否则 → tree
-        this.$nextTick(() => {
-          this.currentMode = this.hasMyActiveTask ? 'workspace' : 'tree';
-          this.lockedTaskId = null;
-        });
-      } catch (e) { this.error = e?.data?.detail || "查询失败"; }
-      finally { this.loading = false; }
-    },
-    toggleMode() {
-      this.currentMode = this.currentMode === 'workspace' ? 'tree' : 'workspace';
-      if (this.currentMode === 'workspace') this.lockedTaskId = null;
-    },
-    lockTask(taskId) {
-      this.lockedTaskId = taskId;
-    },
-    lineStyle(line) {
-      const dx = line.x2 - line.x1;
-      const dy = line.y2 - line.y1;
-      const len = Math.sqrt(dx * dx + dy * dy);
-      const angle = Math.atan2(dy, dx) * 180 / Math.PI;
-      return {
-        left: line.x1 + 'px',
-        top: line.y1 + 'px',
-        width: len + 'px',
-        transform: `rotate(${angle}deg)`,
-        transformOrigin: '0 0',
-      };
-    },
+    getTaskRemark(t) { if (!t) return ""; if (t.remark) return t.remark; if (t.records && t.records.length > 0) { const recs = [...t.records].reverse(); const rec = recs.find(r => r.remark && r.remark.length > 0); if (rec) return rec.remark; } return ""; },
 
-    // ---- 状态定调 ----
-    async handleSetOverallStatus(status) {
-      try {
-        this.product = await patch(`/products/scan/${this.product.serial_number}/status`, { status });
-        uni.showToast({ title: `状态已更新: ${status}`, icon: "success" });
-        this.showStatusPicker = false;
-      } catch {}
-    },
+    async doQuery(sn) { this.loading = true; this.error = ""; try { this.product = await get(`/products/scan/${sn}`); if (!this.product.overall_status) this.showStatusPicker = true; this.$nextTick(() => { this.currentMode = this.hasMyActiveTask ? 'workspace' : 'tree'; this.lockedTaskId = null; }); } catch (e) { this.error = e?.data?.detail || "查询失败"; } finally { this.loading = false; } },
+    toggleMode() { this.currentMode = this.currentMode === 'workspace' ? 'tree' : 'workspace'; if (this.currentMode === 'workspace') this.lockedTaskId = null; },
+    lockTask(taskId) { this.lockedTaskId = taskId; },
+    lineStyle(line) { const dx = line.x2 - line.x1; const dy = line.y2 - line.y1; const len = Math.sqrt(dx * dx + dy * dy); const angle = Math.atan2(dy, dx) * 180 / Math.PI; return { left: line.x1 + 'px', top: line.y1 + 'px', width: len + 'px', transform: `rotate(${angle}deg)`, transformOrigin: '0 0' }; },
 
-    // ---- 编辑产品 ----
-    openEditProduct() {
-      this.editForm = {
-        order_no: this.product.order_no || "",
-        external_serial: this.product.external_serial || "",
-      };
-      this.editProductVisible = true;
-    },
-    async doEditProduct() {
-      this.editSaving = true;
-      try {
-        this.product = await patch(`/products/${this.product.id}`, { order_no: this.editForm.order_no.trim(), external_serial: this.editForm.external_serial.trim() });
-        uni.showToast({ title: "已保存", icon: "success" });
-        this.editProductVisible = false;
-      } catch {}
-      finally { this.editSaving = false; }
-    },
-
-    // ---- 用户列表 ----
-    async loadUsers() {
-      try {
-        this.users = await get("/users/", { limit: 200 });
-        // 同步填充 Picker 使用的 userOptions（接口返回 id/username/full_name）
-        this.userOptions = (this.users || []).map(u => ({
-          id: u.username || u.id,
-          name: u.full_name || u.username,
-        }));
-      } catch { /* 静默 */ }
-    },
-    loadCurrentUser() {
-      try {
-        let user = uni.getStorageSync("user");
-        // ⚠️ Storage 可能返回 JSON 字符串，必须强制解析
-        if (typeof user === "string" && user) {
-          try { user = JSON.parse(user); } catch (e) { user = null; }
-        }
-        if (user && typeof user === "object") {
-          this.currentUser = user;
-          this.currentUserId = String(user.id || "");
-          this.currentUsername = user.username || "";
-        }
-      } catch {}
-    },
-
-    // ---- 发起首道工序 ----
-    onTaskNameChange(e) {
-      const idx = e.detail.value;
-      this.firstForm.taskNameIdx = idx;
-      this.firstForm.task_name = TASK_NAME_OPTIONS[idx];
-    },
-    onAssigneeChange(e) {
-      const idx = e.detail.value;
-      const u = this.users[idx];
-      if (u) {
-        this.firstForm.assigneeIdx = idx;
-        this.firstForm.assignee_id = u.username;
-        this.firstForm.assigneeLabel = `${u.full_name} (${u.username})`;
-      }
-    },
-    openCreateFirstTask() {
-      this.firstForm = {
-        task_name: TASK_NAME_OPTIONS[0],
-        taskNameIdx: 0,
-        assignee_id: this.users.length > 0 ? this.users[0].username : "",
-        assigneeLabel: this.users.length > 0 ? `${this.users[0].full_name} (${this.users[0].username})` : "",
-        assigneeIdx: 0,
-        note: "",
-        autoReceive: true,
-      };
-      this.createFirstVisible = true;
-    },
-    async doCreateFirstTask() {
-      this.firstSaving = true;
-      try {
-        const task = await post("/tasks/", {
-          product_id: this.product.id,
-          task_name: this.firstForm.task_name,
-          assignee_id: this.firstForm.assignee_id,
-          notify_parent_on_complete: false,
-          remark: this.firstForm.note.trim() || undefined,
-        });
-        // 场景B: 立即接收
-        if (this.firstForm.autoReceive) {
-          try {
-            const opId = this.currentUsername || this.currentUserId;
-            await post(`/tasks/${task.id}/receive?operator_id=${encodeURIComponent(opId)}`);
-          } catch { /* receive 失败不影响流程 */ }
-        }
-        uni.showToast({
-          title: this.firstForm.autoReceive ? "已创建并接收 (WIP)" : "已创建 (PENDING)",
-          icon: "success",
-        });
-        this.createFirstVisible = false;
-        this.doQuery(this.product.serial_number);
-      } catch {}
-      finally { this.firstSaving = false; }
-    },
-
-    // ---- 删除记录 ----
-    async doDeleteRecord(record) {
-      try {
-        await request({ url: `/records/${record.id}`, method: "DELETE" });
-        uni.showToast({ title: "记录已删除", icon: "success" });
-        this.doQuery(this.product.serial_number);
-      } catch {}
-    },
-
-    // ---- 记录/拍照 ----
-    openRecordPopup(task) {
-      this.recordPopup = { visible: true, task };
-      this.recordForm = { recordId: null, remark: "", images: [], pendingCount: 0 };
-      this.isUploading = false;
-    },
-    openEditRecord({ task, record }) {
-      this.recordPopup = { visible: true, task };
-      this.recordForm = {
-        recordId: record.id,
-        remark: record.remark || "",
-        images: record.images || [],
-        pendingCount: 0,
-      };
-      this.isUploading = false;
-    },
+    async handleSetOverallStatus(status) { try { this.product = await patch(`/products/scan/${this.product.serial_number}/status`, { status }); uni.showToast({ title: `状态已更新: ${status}`, icon: "success" }); this.showStatusPicker = false; } catch {} },
+    openEditProduct() { this.editForm = { order_no: this.product.order_no || "", external_serial: this.product.external_serial || "" }; this.editProductVisible = true; },
+    async doEditProduct() { this.editSaving = true; try { this.product = await patch(`/products/${this.product.id}`, { order_no: this.editForm.order_no.trim(), external_serial: this.editForm.external_serial.trim() }); uni.showToast({ title: "已保存", icon: "success" }); this.editProductVisible = false; } catch {} finally { this.editSaving = false; } },
+    async loadUsers() { try { this.users = await get("/users/", { limit: 200 }); this.userOptions = (this.users || []).map(u => ({ id: u.username || u.id, name: u.full_name || u.username })); } catch {} },
+    loadCurrentUser() { try { let user = uni.getStorageSync("user"); if (typeof user === "string" && user) { try { user = JSON.parse(user); } catch (e) { user = null; } } if (user && typeof user === "object") { this.currentUser = user; this.currentUserId = String(user.id || ""); this.currentUsername = user.username || ""; } } catch {} },
+    onTaskNameChange(e) { const idx = e.detail.value; this.firstForm.taskNameIdx = idx; this.firstForm.task_name = TASK_NAME_OPTIONS[idx]; },
+    onAssigneeChange(e) { const idx = e.detail.value; const u = this.users[idx]; if (u) { this.firstForm.assigneeIdx = idx; this.firstForm.assignee_id = u.username; this.firstForm.assigneeLabel = `${u.full_name} (${u.username})`; } },
+    openCreateFirstTask() { this.firstForm = { task_name: TASK_NAME_OPTIONS[0], taskNameIdx: 0, assignee_id: this.users.length > 0 ? this.users[0].username : "", assigneeLabel: this.users.length > 0 ? `${this.users[0].full_name} (${this.users[0].username})` : "", assigneeIdx: 0, note: "", autoReceive: true }; this.createFirstVisible = true; },
+    async doCreateFirstTask() { this.firstSaving = true; try { const task = await post("/tasks/", { product_id: this.product.id, task_name: this.firstForm.task_name, assignee_id: this.firstForm.assignee_id, notify_parent_on_complete: false, remark: this.firstForm.note.trim() || undefined }); if (this.firstForm.autoReceive) { try { const opId = this.currentUsername || this.currentUserId; await post(`/tasks/${task.id}/receive?operator_id=${encodeURIComponent(opId)}`, { remark: this.firstForm.note.trim() || undefined }); } catch {} } uni.showToast({ title: this.firstForm.autoReceive ? "已创建并接收" : "已创建", icon: "success" }); this.createFirstVisible = false; this.doQuery(this.product.serial_number); } catch {} finally { this.firstSaving = false; } },
+    async doDeleteRecord(record) { try { await request({ url: `/records/${record.id}`, method: "DELETE" }); uni.showToast({ title: "记录已删除", icon: "success" }); this.doQuery(this.product.serial_number); } catch {} },
+    openRecordPopup(task) { this.recordPopup = { visible: true, task }; this.recordForm = { recordId: null, remark: "", images: [], pendingCount: 0 }; this.isUploading = false; },
+    openEditRecord({ task, record }) { this.recordPopup = { visible: true, task }; this.recordForm = { recordId: record.id, remark: record.remark || "", images: record.images || [], pendingCount: 0 }; this.isUploading = false; },
     closeRecordPopup() { this.recordPopup = { visible: false, task: null }; },
-
-    // ---- 选图 → 压缩 → 上传 ----
-    async handleChooseImage() {
-      const maxSlots = 9 - (this.recordForm.images.length + this.recordForm.pendingCount);
-      if (maxSlots <= 0) { uni.showToast({ title: "最多上传 9 张图片", icon: "none" }); return; }
-
-      // 第一步：选择图片（仅压缩图，禁止原图）
-      const chooseRes = await new Promise((resolve, reject) => {
-        uni.chooseImage({
-          count: maxSlots,
-          sizeType: ["compressed"],
-          sourceType: ["camera", "album"],
-          success: resolve,
-          fail: reject,
-        });
-      }).catch(() => null);
-      if (!chooseRes || !chooseRes.tempFilePaths || !chooseRes.tempFilePaths.length) return;
-
-      // 第二步：强制二次压缩 (quality=60，车间场景足够)
-      let compressSkipCount = 0;
-      const compressedPaths = [];
-      for (const p of chooseRes.tempFilePaths) {
-        try {
-          const compressed = await new Promise((resolve, reject) => {
-            uni.compressImage({
-              src: p,
-              quality: 60,
-              success: resolve,
-              fail: reject,
-            });
-          });
-          compressedPaths.push(compressed.tempFilePath);
-        } catch {
-          // 压缩失败 → 丢弃该图片，禁止原图直传
-          compressSkipCount++;
-        }
-      }
-      if (compressSkipCount > 0) {
-        uni.showToast({ title: `${compressSkipCount} 张压缩失败已丢弃`, icon: "none", duration: 1500 });
-      }
-      if (!compressedPaths.length) {
-        uni.showToast({ title: "所有图片压缩失败，请重试", icon: "none" });
-        return;
-      }
-
-      // 第三步：逐张上传（只传压缩后的文件）
-      this.isUploading = true;
-      this.recordForm.pendingCount += compressedPaths.length;
-      let failCount = 0;
-      for (const path of compressedPaths) {
-        const url = await this.uploadFile(path);
-        if (url) {
-          this.recordForm.images.push(url);
-        } else {
-          failCount++;
-          uni.showToast({ title: "单张图片上传失败", icon: "none", duration: 1500 });
-        }
-        this.recordForm.pendingCount--;
-      }
-
-      this.isUploading = false;
-      if (failCount > 0 && this.recordForm.images.length === 0) {
-        uni.showToast({ title: `${failCount} 张全部上传失败，请重试`, icon: "none" });
-      }
-    },
-
-    uploadFile(filePath) {
-      return new Promise((resolve) => {
-        uni.uploadFile({
-          url: "http://192.168.9.80:8011/api/v1/upload/",
-          filePath,
-          name: "file",
-          timeout: 30000,
-          success(res) {
-            if (res.statusCode !== 200) { resolve(null); return; }
-            try {
-              const data = JSON.parse(res.data);
-              if (!data || !data.url) { resolve(null); return; }
-              resolve(data.url);
-            } catch { resolve(null); }
-          },
-          fail: () => resolve(null),
-        });
-      });
-    },
-
+    async handleChooseImage() { const maxSlots = 9 - (this.recordForm.images.length + this.recordForm.pendingCount); if (maxSlots <= 0) return; const chooseRes = await new Promise((resolve, reject) => { uni.chooseImage({ count: maxSlots, sizeType: ["compressed"], sourceType: ["camera", "album"], success: resolve, fail: reject }); }).catch(() => null); if (!chooseRes || !chooseRes.tempFilePaths || !chooseRes.tempFilePaths.length) return; let compressSkipCount = 0; const compressedPaths = []; for (const p of chooseRes.tempFilePaths) { try { const compressed = await new Promise((resolve, reject) => { uni.compressImage({ src: p, quality: 60, success: resolve, fail: reject }); }); compressedPaths.push(compressed.tempFilePath); } catch { compressSkipCount++; } } if (!compressedPaths.length) return; this.isUploading = true; this.recordForm.pendingCount += compressedPaths.length; for (const path of compressedPaths) { const url = await this.uploadFile(path); if (url) this.recordForm.images.push(url); this.recordForm.pendingCount--; } this.isUploading = false; },
+    uploadFile(filePath) { return new Promise((resolve) => { uni.uploadFile({ url: "http://192.168.9.80:8011/api/v1/upload/", filePath, name: "file", success(res) { try { const data = JSON.parse(res.data); resolve(data.url || null); } catch { resolve(null); } }, fail: () => resolve(null) }); }); },
     removeRecordImage(i) { this.recordForm.images.splice(i, 1); },
     previewRecordImage(i) { uni.previewImage({ urls: this.recordForm.images, current: i }); },
-
-    // ---- 保存记录 ----
-    async doSaveRecord() {
-      if (this.isUploading) { uni.showToast({ title: "图片上传中，请稍候", icon: "none" }); return; }
-      if (this.recordForm.pendingCount > 0) { uni.showToast({ title: "有图片未上传成功，请删除或重试", icon: "none" }); return; }
-
-      this.recordSaving = true;
-      try {
-        const payload = { remark: this.recordForm.remark.trim(), images: this.recordForm.images };
-        if (this.recordForm.recordId) {
-          await put(`/records/${this.recordForm.recordId}`, payload);
-        } else {
-          await patch(`/tasks/${this.recordPopup.task.id}/records`, payload);
-        }
-        uni.showToast({ title: this.recordForm.recordId ? "记录已更新" : "记录已保存", icon: "success" });
-        this.closeRecordPopup();
-        this.doQuery(this.product.serial_number);
-      } catch {}
-      finally { this.recordSaving = false; }
-    },
-
-    // ---- 任务操作 ----
-    async handleTaskAction({ task, type, record }) {
-      if (type === "record") { this.openRecordPopup(task); return; }
-      if (type === "deleteRecord") { this.doDeleteRecord(record); return; }
-      if (type === "end") { this.confirmEndBranch(task); return; }
-
-      // 转交时异步拉取真实工序和用户数据
-      if (type === "transfer") {
-        uni.showLoading({ title: "加载数据..." });
-        try {
-          if (!this.userOptions.length) await this.loadUsers();
-          if (!this.processOptions.length) {
-            this.processOptions = ["🏭 入库 (virtual_warehouse)", ...TASK_NAME_OPTIONS];
-          }
-        } finally {
-          uni.hideLoading();
-        }
-      }
-
-      this.actionPopup = { visible: true, type, task };
-      this.rejectReason = "";
-      this.receiveRemark = "";
-      this.transferForm = { branches: [{ task_name: "", assignee_id: "" }], note: "" };
-    },
-    handleViewRecords(task) {
-      uni.navigateTo({ url: `/pages/scan/records?taskId=${task.id}` });
-    },
-    confirmEndBranch(task) {
-      uni.showModal({
-        title: "结束当前分支",
-        content: `确定结束「${task.task_name}」吗？\n此分支将标记为已完成，不会创建下游任务。`,
-        confirmText: "确定结束",
-        confirmColor: "#f59e0b",
-        success: (res) => { if (res.confirm) this.doEndBranch(task); },
-      });
-    },
-    async doEndBranch(task) {
-      try {
-        const opId = this.currentUsername || this.currentUserId;
-        await post(`/tasks/${task.id}/end?operator_id=${encodeURIComponent(opId)}`);
-        uni.showToast({ title: "分支已结束", icon: "success" });
-        this.doQuery(this.product.serial_number);
-      } catch {}
-    },
-    parentTaskOf(t) {
-      if (!t || !t.parent_task_id) return null;
-      return this.taskMap[t.parent_task_id] || null;
-    },
-    formatTaskTime(t) {
-      if (!t) return "";
-      const parts = [];
-      if (t.created_at) parts.push("创建: " + this.formatTime(t.created_at));
-      if (t.received_at) parts.push("接收: " + this.formatTime(t.received_at));
-      return parts.join("  |  ");
-    },
-    formatTime(d) {
-      if (!d) return "";
-      const dt = new Date(d);
-      const pad = (n) => String(n).padStart(2, "0");
-      return `${dt.getFullYear()}-${pad(dt.getMonth()+1)}-${pad(dt.getDate())} ${pad(dt.getHours())}:${pad(dt.getMinutes())}`;
-    },
+    async doSaveRecord() { if (this.isUploading) return; this.recordSaving = true; try { const payload = { remark: this.recordForm.remark.trim(), images: this.recordForm.images }; if (this.recordForm.recordId) await put(`/records/${this.recordForm.recordId}`, payload); else await patch(`/tasks/${this.recordPopup.task.id}/records`, payload); uni.showToast({ title: "已保存", icon: "success" }); this.closeRecordPopup(); this.doQuery(this.product.serial_number); } catch {} finally { this.recordSaving = false; } },
+    async handleTaskAction({ task, type, record }) { if (type === "record") { this.openRecordPopup(task); return; } if (type === "deleteRecord") { this.doDeleteRecord(record); return; } if (type === "end") { this.confirmEndBranch(task); return; } if (type === "transfer") { uni.showLoading({ title: "加载数据..." }); try { if (!this.userOptions.length) await this.loadUsers(); if (!this.processOptions.length) this.processOptions = ["🏭 入库 (virtual_warehouse)", ...TASK_NAME_OPTIONS]; } finally { uni.hideLoading(); } } this.actionPopup = { visible: true, type, task }; this.rejectReason = ""; this.receiveRemark = ""; this.transferForm = { branches: [{ task_name: "", assignee_id: "" }], note: "" }; },
+    handleViewRecords(task) { uni.navigateTo({ url: `/pages/scan/records?taskId=${task.id}` }); },
+    confirmEndBranch(task) { uni.showModal({ title: "结束分支", content: `确定结束「${task.task_name}」吗？`, success: (res) => { if (res.confirm) this.doEndBranch(task); } }); },
+    async doEndBranch(task) { try { const opId = this.currentUsername || this.currentUserId; await post(`/tasks/${task.id}/end?operator_id=${encodeURIComponent(opId)}`); uni.showToast({ title: "分支已结束", icon: "success" }); this.doQuery(this.product.serial_number); } catch {} },
+    parentTaskOf(t) { return t && t.parent_task_id ? (this.taskMap[t.parent_task_id] || null) : null; },
+    formatTaskTime(t) { if (!t) return ""; const parts = []; if (t.created_at) parts.push("创建: " + this.formatTime(t.created_at)); if (t.received_at) parts.push("接收: " + this.formatTime(t.received_at)); return parts.join("  |  "); },
+    formatTime(d) { if (!d) return ""; const dt = new Date(d); const pad = (n) => String(n).padStart(2, "0"); return `${dt.getFullYear()}-${pad(dt.getMonth()+1)}-${pad(dt.getDate())} ${pad(dt.getHours())}:${pad(dt.getMinutes())}`; },
     closeActionPopup() { this.actionPopup = { visible: false, type: "", task: null }; },
-
-    async doReceive() {
-      this.actionLoading = true;
-      try {
-        const remark = this.receiveRemark.trim() || undefined;
-        const opId = this.currentUsername || this.currentUserId;
-        await post(`/tasks/${this.actionPopup.task.id}/receive?operator_id=${encodeURIComponent(opId)}`, { remark });
-        uni.showToast({ title: "已接收", icon: "success" });
-        this.closeActionPopup();
-        this.doQuery(this.product.serial_number);
-      } catch {} finally { this.actionLoading = false; }
-    },
-    async doReject() {
-      this.actionLoading = true;
-      try {
-        const opId = this.currentUsername || this.currentUserId;
-        await post(`/tasks/${this.actionPopup.task.id}/reject?operator_id=${encodeURIComponent(opId)}`, { reason: this.rejectReason.trim() });
-        uni.showToast({ title: "已驳回，返工任务已创建", icon: "success" });
-        this.closeActionPopup();
-        this.doQuery(this.product.serial_number);
-      } catch {} finally { this.actionLoading = false; }
-    },
-    // ---- 多分支操作 ----
-    addBranch() {
-      if (this.transferForm.branches.length >= 5) {
-        uni.showToast({ title: "最多 5 个并行分支", icon: "none" }); return;
-      }
-      this.transferForm.branches.push({ task_name: "", assignee_id: "" });
-    },
-    removeBranch(idx) {
-      if (this.transferForm.branches.length <= 1) return;
-      this.transferForm.branches.splice(idx, 1);
-    },
-    onBranchProcessChange(idx, e) {
-      this.transferForm.branches[idx].task_name = this.processOptions[e.detail.value];
-      // 切换工序时清空接收人
-      this.transferForm.branches[idx].assignee_id = "";
-    },
-    onBranchUserChange(idx, e) {
-      const user = this.userOptions[e.detail.value];
-      if (user) this.transferForm.branches[idx].assignee_id = user.id;
-    },
-    isBranchWarehouse(idx) {
-      return this.transferForm.branches[idx].task_name === "🏭 入库 (virtual_warehouse)";
-    },
-    branchUserName(idx) {
-      const u = this.userOptions.find(u => u.id === this.transferForm.branches[idx].assignee_id);
-      return u ? u.name : "";
-    },
-    async doTransfer() {
-      this.actionLoading = true;
-      const branches = this.transferForm.branches.filter(b => b.task_name);
-      try {
-        await post(`/tasks/${this.actionPopup.task.id}/transfer`, {
-          next_tasks: branches.map(b => ({
-            task_name: b.task_name,
-            assignees: b.task_name === "🏭 入库 (virtual_warehouse)"
-              ? ["virtual_warehouse"] : [b.assignee_id],
-          })),
-          note: this.transferForm.note.trim() || undefined,
-        });
-        uni.showToast({ title: `已派发 ${branches.length} 个分支`, icon: "success" });
-        this.closeActionPopup();
-        this.doQuery(this.product.serial_number);
-      } catch {} finally { this.actionLoading = false; }
-    },
+    async doReceive() { this.actionLoading = true; try { const remark = this.receiveRemark.trim() || undefined; const opId = this.currentUsername || this.currentUserId; await post(`/tasks/${this.actionPopup.task.id}/receive?operator_id=${encodeURIComponent(opId)}`, { remark }); uni.showToast({ title: "已接收", icon: "success" }); this.closeActionPopup(); this.doQuery(this.product.serial_number); } catch {} finally { this.actionLoading = false; } },
+    async doReject() { this.actionLoading = true; try { const opId = this.currentUsername || this.currentUserId; await post(`/tasks/${this.actionPopup.task.id}/reject?operator_id=${encodeURIComponent(opId)}`, { reason: this.rejectReason.trim() }); uni.showToast({ title: "已驳回", icon: "success" }); this.closeActionPopup(); this.doQuery(this.product.serial_number); } catch {} finally { this.actionLoading = false; } },
+    addBranch() { if (this.transferForm.branches.length >= 5) { uni.showToast({ title: "最多 5 个分支", icon: "none" }); return; } this.transferForm.branches.push({ task_name: "", assignee_id: "" }); },
+    removeBranch(idx) { if (this.transferForm.branches.length > 1) this.transferForm.branches.splice(idx, 1); },
+    onBranchProcessChange(idx, e) { this.transferForm.branches[idx].task_name = this.processOptions[e.detail.value]; this.transferForm.branches[idx].assignee_id = ""; },
+    onBranchUserChange(idx, e) { const user = this.userOptions[e.detail.value]; if (user) this.transferForm.branches[idx].assignee_id = user.id; },
+    isBranchWarehouse(idx) { return this.transferForm.branches[idx].task_name === "🏭 入库 (virtual_warehouse)"; },
+    branchUserName(idx) { const u = this.userOptions.find(u => u.id === this.transferForm.branches[idx].assignee_id); return u ? u.name : ""; },
+    async doTransfer() { this.actionLoading = true; const branches = this.transferForm.branches.filter(b => b.task_name); try { await post(`/tasks/${this.actionPopup.task.id}/transfer`, { next_tasks: branches.map(b => ({ task_name: b.task_name, assignees: b.task_name === "🏭 入库 (virtual_warehouse)" ? ["virtual_warehouse"] : [b.assignee_id] })), note: this.transferForm.note.trim() || undefined }); uni.showToast({ title: "派发成功", icon: "success" }); this.closeActionPopup(); this.doQuery(this.product.serial_number); } catch {} finally { this.actionLoading = false; } },
   },
 };
 </script>
@@ -972,18 +330,12 @@ export default {
 .page-container { height: 100vh; display: flex; flex-direction: column; background-color: #f3f4f6; box-sizing: border-box; padding: 16px; padding-bottom: 0; overflow: hidden; }
 .loading { text-align: center; padding: 48px 0; color: #6b7280; }
 .error-box { padding: 12px; border-radius: 10px; background: #fef2f2; color: #dc2626; font-size: 13px; border: 1px solid #fecaca; }
-
-/* 宏观状态 */
-.overall-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
-  background: #fff; border-radius: 12px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
+.overall-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff; border-radius: 12px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
 .overall-label { font-size: 13px; color: #6b7280; }
 .overall-val { font-size: 15px; font-weight: 700; color: #2563eb; flex: 1; }
 .overall-empty { color: #ef4444; }
 .overall-arrow { font-size: 12px; color: #9ca3af; }
-
-/* 卡片 */
 .card { background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); flex-shrink: 0; }
-/* 工作区 */
 .workspace-area { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
 .list-header { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 4px; flex-shrink: 0; }
 .list-title { font-size: 14px; font-weight: 700; color: #1f2937; }
@@ -991,78 +343,60 @@ export default {
 .task-list { flex: 1; overflow-y: auto; min-height: 0; }
 .task-list-item { display: flex; align-items: flex-start; justify-content: space-between; background: #fff; border-radius: 12px; padding: 14px; margin-bottom: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); border-left: 4px solid transparent; }
 .task-list-item.s-yellow { border-left-color: #f59e0b; }
-.task-list-item.s-blue   { border-left-color: #3b82f6; }
+.task-list-item.s-blue { border-left-color: #3b82f6; }
 .tli-left { flex: 1; min-width: 0; }
 .tli-name { font-size: 15px; font-weight: 700; color: #1f2937; display: block; }
-.tli-remark { font-size: 12px; color: #6b7280; margin-top: 4px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tli-remark { font-size: 12px; color: #a16207; font-weight: bold; margin-top: 4px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .tli-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; margin-left: 8px; }
 .tli-badge { font-size: 11px; padding: 2px 10px; border-radius: 12px; font-weight: 600; }
 .tli-badge.s-yellow { background: #fef3c7; color: #b45309; }
-.tli-badge.s-blue   { background: #dbeafe; color: #1d4ed8; }
+.tli-badge.s-blue { background: #dbeafe; color: #1d4ed8; }
 .tli-arrow { font-size: 18px; color: #d1d5db; }
-
 .lock-bar { display: flex; align-items: center; gap: 12px; padding: 8px 0; flex-shrink: 0; }
 .lock-back { font-size: 13px; color: #2563eb; font-weight: 600; }
 .lock-title { font-size: 14px; font-weight: 700; color: #1f2937; }
-
 .branch-done { font-size: 11px; font-weight: 600; color: #16a34a; }
-.branch-active { font-size: 11px; font-weight: 600; color: #2563eb; }
 .task-count { font-size: 12px; color: #9ca3af; display: block; margin-top: 4px; }
-
-.focus-card {
-  height: 100%; margin: 0 4px; padding: 20px 16px; border-radius: 16px;
-  background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.08); overflow-y: auto;
-  border-top: 5px solid #3b82f6;
-}
+.focus-card { height: 100%; margin: 0 4px; padding: 20px 16px; border-radius: 16px; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.08); overflow-y: auto; border-top: 5px solid #3b82f6; }
 .focus-card.s-yellow { border-top-color: #f59e0b; }
-.focus-card.s-blue   { border-top-color: #3b82f6; }
-.focus-card.s-green  { border-top-color: #22c55e; }
-.focus-card.s-red    { border-top-color: #ef4444; }
-
+.focus-card.s-blue { border-top-color: #3b82f6; }
+.focus-card.s-green { border-top-color: #22c55e; }
+.focus-card.s-red { border-top-color: #ef4444; }
 .fc-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
 .fc-status { font-size: 12px; padding: 2px 10px; border-radius: 12px; font-weight: 700; background: #f3f4f6; color: #6b7280; }
 .s-yellow .fc-status { background: #fef3c7; color: #b45309; }
-.s-blue .fc-status   { background: #dbeafe; color: #1d4ed8; }
+.s-blue .fc-status { background: #dbeafe; color: #1d4ed8; }
 .tag-rework-sm { font-size: 10px; padding: 2px 6px; border-radius: 8px; background: #ef4444; color: #fff; }
-
 .fc-name { font-size: 22px; font-weight: 800; color: #1f2937; display: block; margin-bottom: 10px; }
-
-.fc-remark { display: flex; gap: 6px; padding: 10px 12px; background: #fefce8; border-radius: 10px; margin-bottom: 10px; border-left: 4px solid #eab308; }
-.fc-remark-label { font-size: 14px; flex-shrink: 0; }
-.fc-remark-text { font-size: 14px; color: #713f12; line-height: 1.5; word-break: break-all; }
-
-.fc-chain { margin-bottom: 8px; }
-.fc-link { padding: 6px 10px; border-radius: 8px; margin-bottom: 4px; font-size: 12px; }
+.fc-link { padding: 6px 10px; border-radius: 8px; margin-bottom: 4px; font-size: 12px; margin-top: 10px; }
 .fc-up { background: #f0fdf4; color: #16a34a; }
 .fc-down { background: #eff6ff; color: #2563eb; }
 .fc-link-label { font-weight: 700; display: block; }
 .fc-link-name { display: block; margin-top: 2px; }
-.fc-link-who { color: #9ca3af; font-size: 11px; }
-
-.fc-records-bar { padding: 8px 12px; background: linear-gradient(135deg,#eff6ff,#dbeafe); border-radius: 8px; font-size: 13px; font-weight: 700; color: #2563eb; margin-bottom: 8px; }
+.fc-records-bar { padding: 8px 12px; background: linear-gradient(135deg,#eff6ff,#dbeafe); border-radius: 8px; font-size: 13px; font-weight: 700; color: #2563eb; margin-top: 10px; margin-bottom: 8px; }
 .fc-time { font-size: 11px; color: #9ca3af; margin-top: auto; padding-top: 8px; border-top: 1px solid #f3f4f6; }
-
-/* 流转树 2D 画布 */
-.tree-area { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: #f5f6f8; }
+.tree-area { flex: 1; display: flex; flex-direction: column; overflow: hidden; margin-top: 4px; }
 .canvas-hint { font-size: 11px; color: #9ca3af; text-align: center; padding: 4px 0; flex-shrink: 0; }
-.tree-canvas { flex: 1; min-height: 0; }
-.canvas-inner { position: relative; min-width: 200%; min-height: 200%; }
-.canvas-node { position: absolute; width: 180px; min-height: 100px; background: #fff; border-radius: 10px; padding: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); border-top: 4px solid #3b82f6; }
-.canvas-node.s-yellow { border-top-color: #f59e0b; }
-.canvas-node.s-blue   { border-top-color: #3b82f6; }
-.canvas-node.s-green  { border-top-color: #22c55e; }
-.canvas-node.s-red    { border-top-color: #ef4444; }
-.cn-name { font-size: 13px; font-weight: 700; color: #1f2937; display: block; }
-.cn-assignee { font-size: 10px; color: #9ca3af; display: block; margin-top: 2px; }
-.cn-badge { font-size: 9px; padding: 1px 6px; border-radius: 8px; font-weight: 600; margin-top: 4px; display: inline-block; }
+.tree-movable-area { flex: 1; width: 100%; background-color: #ebedf0; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 20px rgba(0,0,0,0.05); }
+.canvas-inner { position: absolute; left: 0; top: 0; }
+.canvas-node { position: absolute; width: 180px; min-height: 100px; background: #ffffff; border-radius: 12px; padding: 14px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border-left: 6px solid #3b82f6; border-top: none; z-index: 10; display: flex; flex-direction: column; gap: 6px; }
+.canvas-node.s-yellow { border-left-color: #f59e0b; }
+.canvas-node.s-blue { border-left-color: #3b82f6; }
+.canvas-node.s-green { border-left-color: #22c55e; }
+.canvas-node.s-red { border-left-color: #ef4444; }
+.cn-header { display: flex; align-items: center; justify-content: space-between; }
+.cn-name { font-size: 14px; font-weight: 800; color: #1f2937; }
+.cn-badge { font-size: 10px; padding: 2px 6px; border-radius: 8px; font-weight: 600; }
 .cn-badge.s-yellow { background: #fef3c7; color: #b45309; }
-.cn-badge.s-blue   { background: #dbeafe; color: #1d4ed8; }
-.cn-badge.s-green  { background: #dcfce7; color: #15803d; }
-.cn-remark { font-size: 10px; color: #6b7280; margin-top: 4px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.cn-end { font-size: 9px; font-weight: 600; color: #16a34a; margin-top: 2px; }
+.cn-badge.s-blue { background: #dbeafe; color: #1d4ed8; }
+.cn-badge.s-green { background: #dcfce7; color: #15803d; }
+.cn-assignee { font-size: 11px; color: #6b7280; }
+.cn-remark { font-size: 11px; color: #a16207; background: #fefce8; padding: 4px 8px; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cn-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; border-top: 1px solid #f3f4f6; }
+.cn-end { font-size: 10px; font-weight: 600; color: #16a34a; }
 .cn-end-wh { color: #7c3aed; }
-.cn-records { font-size: 10px; color: #2563eb; font-weight: 600; margin-top: 2px; }
-.canvas-line { position: absolute; height: 2px; background: #d1d5db; }
+.cn-records { font-size: 11px; color: #2563eb; font-weight: 600; }
+.canvas-line { position: absolute; height: 3px; background: #94a3b8; z-index: 1; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
 .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
 .card-header-right { display: flex; align-items: center; gap: 8px; }
 .card-title { font-size: 15px; font-weight: 700; }
@@ -1079,88 +413,50 @@ export default {
 .s-green .badge, .s-green { color: #15803d; }
 .s-red .badge, .s-red { color: #be123c; }
 .s-gray .badge, .s-gray { color: #6b7280; }
-.task-count { font-size: 12px; color: #9ca3af; }
-
-/* 0任务 */
 .zero-task { display: flex; flex-direction: column; align-items: center; padding: 24px 0; }
 .zero-icon { font-size: 40px; margin-bottom: 8px; }
 .zero-text { font-size: 14px; color: #9ca3af; margin-bottom: 16px; }
-.btn-start { width: 220px; height: 44px; background: linear-gradient(135deg, #2563EB, #3B82F6);
-  border: none; border-radius: 12px; color: #fff; font-size: 15px; font-weight: 700; line-height: 44px; box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
-
-/* 遮罩 + 底部面板 */
-.overlay { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,0.45);
-  display: flex; align-items: flex-end; justify-content: center; }
+.btn-start { width: 220px; height: 44px; background: linear-gradient(135deg, #2563EB, #3B82F6); border: none; border-radius: 12px; color: #fff; font-size: 15px; font-weight: 700; line-height: 44px; box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
+.overlay { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,0.45); display: flex; align-items: flex-end; justify-content: center; }
 .sheet { width: 100%; max-width: 480px; background: #fff; border-radius: 20px 20px 0 0; padding: 20px 16px 32px; }
 .sheet-title { font-size: 17px; font-weight: 700; display: block; text-align: center; }
 .sheet-hint { font-size: 13px; color: #9ca3af; display: block; text-align: center; margin: 6px 0 16px; }
 .sheet-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
-.sheet-opt { padding: 14px 8px; border-radius: 12px; text-align: center; font-size: 15px; font-weight: 600;
-  background: #f3f4f6; color: #374151; border: 2px solid transparent; }
+.sheet-opt { padding: 14px 8px; border-radius: 12px; text-align: center; font-size: 15px; font-weight: 600; background: #f3f4f6; color: #374151; border: 2px solid transparent; }
 .sheet-opt-active { background: #dbeafe; color: #2563eb; border-color: #2563eb; }
 .sheet-close { margin-top: 14px; height: 40px; background: #f3f4f6; border: none; border-radius: 10px; font-size: 14px; color: #6b7280; line-height: 40px; }
-
-/* 通用弹窗 */
-.popup { width: 100%; max-width: 480px; background: #fff; border-radius: 16px 16px 0 0;
-  padding: 20px 16px 32px; max-height: 80vh; overflow-y: auto; }
+.popup { width: 100%; max-width: 480px; background: #fff; border-radius: 16px 16px 0 0; padding: 20px 16px 32px; max-height: 80vh; overflow-y: auto; }
 .popup-title { font-size: 16px; font-weight: 700; display: block; text-align: center; margin-bottom: 12px; }
 .popup-task { font-size: 14px; font-weight: 600; color: #2563eb; text-align: center; margin-bottom: 4px; }
 .popup-hint { font-size: 12px; color: #9ca3af; display: block; text-align: center; }
 .popup-textarea { width: 100%; height: 80px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; font-size: 14px; margin: 10px 0; box-sizing: border-box; }
 .popup-input { width: 100%; height: 42px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 0 10px; font-size: 14px; margin: 8px 0; box-sizing: border-box; }
-.flex-1 { flex: 1; margin: 0; }
 .popup-btns { display: flex; gap: 10px; margin-top: 16px; }
 .btn-cancel { flex: 1; height: 42px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; color: #6b7280; font-size: 14px; line-height: 42px; }
 .btn-primary { flex: 1; height: 42px; border: none; border-radius: 10px; background: #2563eb; color: #fff; font-size: 14px; font-weight: 600; line-height: 42px; }
 .btn-primary[disabled] { opacity: 0.5; }
 .btn-danger { flex: 1; height: 42px; border: none; border-radius: 10px; background: #dc2626; color: #fff; font-size: 14px; font-weight: 600; line-height: 42px; }
 .btn-danger[disabled] { opacity: 0.5; }
-.btn-sm { height: 42px; width: 42px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f3f4f6; font-size: 18px; line-height: 42px; text-align: center; padding: 0; }
-.popup-assignee-area { margin: 8px 0; }
-.popup-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
-.popup-tag { padding: 4px 10px; border-radius: 20px; background: #dbeafe; color: #2563eb; font-size: 12px; font-weight: 600; }
-.popup-tag-wh { background: #ede9fe; color: #7c3aed; }
-.popup-add-row { display: flex; gap: 6px; }
-.wh-label { font-size: 13px; display: flex; align-items: center; gap: 4px; margin-top: 6px; color: #6b7280; }
-.warehouse-hint { font-size: 13px; background: #ede9fe; color: #7c3aed; padding: 10px 14px; border-radius: 10px; margin: 8px 0; text-align: center; }
-.preview-hint { font-size: 12px; background: #f0fdf4; color: #16a34a; padding: 8px 10px; border-radius: 8px; margin: 6px 0; }
-
-/* 多分支裂变 */
 .branch-item { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
 .branch-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
 .branch-label { font-size: 13px; font-weight: 700; color: #374151; }
 .branch-del { font-size: 12px; color: #ef4444; font-weight: 600; padding: 2px 8px; }
 .btn-add-branch { width: 100%; height: 40px; border: 2px dashed #93c5fd; border-radius: 10px; background: #eff6ff; color: #2563eb; font-size: 14px; font-weight: 700; line-height: 40px; margin: 4px 0; }
 .btn-add-branch::after { border: none; }
-
-/* Picker & 表单 */
 .field-label { font-size: 14px; font-weight: 600; color: #374151; margin-top: 10px; margin-bottom: 4px; }
 .required { color: #ef4444; }
-.picker-box { width: 100%; height: 42px; border: 1px solid #e5e7eb; border-radius: 10px;
-  padding: 0 12px; font-size: 14px; color: #1f2937; line-height: 42px; box-sizing: border-box; background: #fff; }
+.picker-box { width: 100%; height: 42px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 0 12px; font-size: 14px; color: #1f2937; line-height: 42px; box-sizing: border-box; background: #fff; }
 .switch-row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 8px 0; }
 .switch-label { font-size: 15px; font-weight: 600; color: #2563eb; }
 .switch-hint { font-size: 11px; color: #9ca3af; display: block; margin-top: 2px; }
-
-/* 图片上传 — 九宫格 */
 .img-grid { display: flex; flex-wrap: wrap; margin: 8px -5px; }
 .img-cell { position: relative; width: 160rpx; height: 160rpx; margin: 10rpx; }
 .img-thumb { width: 160rpx; height: 160rpx; border-radius: 12rpx; border: 1px solid #e5e7eb; }
-.img-cell-loading { display: flex; align-items: center; justify-content: center;
-  background: #f3f4f6; border-radius: 12rpx; border: 1px dashed #d1d5db; }
+.img-cell-loading { display: flex; align-items: center; justify-content: center; background: #f3f4f6; border-radius: 12rpx; border: 1px dashed #d1d5db; }
 .img-loading-text { font-size: 36rpx; }
-.img-del { position: absolute; top: -12rpx; right: -12rpx; width: 40rpx; height: 40rpx;
-  background: #ef4444; color: #fff; border-radius: 20rpx; font-size: 24rpx;
-  text-align: center; line-height: 40rpx; z-index: 2; }
-.btn-upload { width: 100%; height: 42px; border: 1px dashed #d1d5db; border-radius: 10px;
-  background: #f9fafb; color: #6b7280; font-size: 14px; line-height: 42px; margin: 8px 0; }
-.btn-upload[disabled] { opacity: 0.5; }
-
-/* 底部操作栏 (钉死在屏幕最下方) */
-.footer-actions {
-  display: flex; gap: 20rpx; padding: 20rpx 30rpx; padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-  background: #ffffff; box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05); z-index: 99; flex-shrink: 0;
-}
+.img-del { position: absolute; top: -12rpx; right: -12rpx; width: 40rpx; height: 40rpx; background: #ef4444; color: #fff; border-radius: 20rpx; font-size: 24rpx; text-align: center; line-height: 40rpx; z-index: 2; }
+.btn-upload { width: 100%; height: 42px; border: 1px dashed #d1d5db; border-radius: 10px; background: #f9fafb; color: #6b7280; font-size: 14px; line-height: 42px; margin: 8px 0; }
+.footer-actions { display: flex; gap: 20rpx; padding: 20rpx 30rpx; padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); background: #ffffff; box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05); z-index: 99; flex-shrink: 0; }
 .footer-btn { flex: 1; height: 88rpx; border: none; border-radius: 12rpx; font-size: 30rpx; font-weight: 700; line-height: 88rpx; }
 .footer-btn::after { border: none; }
 .footer-transfer { background: #dcfce7; color: #16a34a; }
@@ -1168,17 +464,11 @@ export default {
 .footer-receive { background: #dbeafe; color: #1d4ed8; }
 .footer-reject { background: #fce4ec; color: #dc2626; }
 .footer-end { background: #fef3c7; color: #b45309; }
-
-/* Picker 选择器 */
 .form-item { margin: 10px 0; }
 .form-label { font-size: 14px; font-weight: 600; color: #374151; display: block; margin-bottom: 4px; }
-.required { color: #ef4444; }
-.picker-value {
-  display: flex; align-items: center; justify-content: space-between;
-  width: 100%; height: 42px; padding: 0 12px;
-  border: 1px solid #e5e7eb; border-radius: 10px;
-  background: #f9fafb; font-size: 14px; box-sizing: border-box;
-}
+.picker-value { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 42px; padding: 0 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #f9fafb; font-size: 14px; box-sizing: border-box; }
 .picker-placeholder { color: #9ca3af; }
 .picker-arrow { font-size: 12px; color: #9ca3af; margin-left: 8px; }
+.warehouse-hint { font-size: 13px; background: #ede9fe; color: #7c3aed; padding: 10px 14px; border-radius: 10px; margin: 8px 0; text-align: center; }
+.preview-hint { font-size: 12px; background: #f0fdf4; color: #16a34a; padding: 8px 10px; border-radius: 8px; margin: 6px 0; }
 </style>