f964c76382
Merge box number and paichan info into a single header bar, compress list rows to 40px with left color bars, fix bottom operation area (scan/submit/finish) above status bar, and shrink notification bars and status bar for more list space. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
9.1 KiB
PRD · 多码凑箱页面布局优化
模块：装箱编号 > 多码凑箱模式（BoxingMode.multiCode）
文件：lib/pages/boxing_page.dart（主要影响 _buildManyToOneBody 及相关子方法）
版本：v2
状态：待评审
1. 背景与目标
多码凑箱页面在手持 PDA / 手机屏幕（宽度约 375–390px）上使用时，原版布局存在以下问题：
- 垂直空间浪费：AppBar、箱号区、排产信息区各自独占一行，三块合计高度约 140px，挤压了中间列表区的可视行数。
- 操作区随列表滚动：扫码区和提交区位于列表下方，装入项目多时需要下拉才能看到操作控件，增加操作摩擦。
- 信息层次不清晰：删除确认使用弹窗，打断了列表的整体感知；通知条与内容区边界不明确。
优化目标：在同一屏内展示更多已装入项目，同时保持操作控件始终可见，整体界面整洁、层次分明。
2. 改动总览
| 区域 | 原版高度（估算） | v2 高度（估算） | 节省 |
|---|---|---|---|
| AppBar | ~52px | 44px | 8px |
| 箱号区 + 排产信息区 | ~80px（两行） | 48px（合并一行） | 32px |
| 列表每行 | ~48–52px | 40px | 8–12px/行 |
| 通知条（每条） | ~36px | 30px | 6px |
| 状态栏 | ~38px | 28px | 10px |
三项以上改动叠加后，典型场景下可多显示 1–2 条已装入记录，且操作底栏固定可见。
3. 详细改动说明
3.1 AppBar（_buildAppBar）
原版：高度约 52px，标题与模式切换按钮分布松散，模式徽章内边距较大。
v2：
- 高度收紧至 44px（Material 标准最小可触高度）。
- 标题（
装箱编号）与模式徽章（⇄ 多码凑箱 P2）左右对齐，中间用弹性空白（Spacer）分隔。 - 模式徽章内边距从
6px 10px收窄至3px 9px，字号保持11px，快捷键角标用半透明背景小标签呈现。
3.2 箱号区 + 排产信息区 → 合并为 header-bar（_buildManyToOneBoxNoPanel）
原版：箱号输入框（22px 标签 + 44px 输入框）与排产信息行（排产号、已有箱数、最大箱号、详情按钮）分两个独立区块，共约 80px。
v2：合并为单行 header-bar，高度约 48px，布局如下：
[ 箱号 ██ 1 ██ ] │ W00009 已有 1 箱 · 最大箱号 1 详情
- 箱号输入框：宽 52px，高 32px，字号 18px 加粗，左侧配
11px灰色小标签"箱号"。 - 竖向分隔线将箱号区与排产信息区视觉隔开。
- 排产号（
13px加粗）+ 统计信息（11px灰色）两行叠放，flex: 1撑满中间。 详情链接按钮右对齐，无数据时置灰。
影响代码：_buildManyToOneBoxNoPanel()、相关 _boxNoController 绑定逻辑不变，仅 UI 结构调整。
3.3 已装入列表（_buildManyToOnePackedList）
原版：每行 packed-item 高度约 48–52px，内含 8px 8px 内边距，信息横排一行。
v2：每行高度压缩至 40px，采用左侧色条 + 两行叠放的结构：
序号 ▌ 26BW0011 80 / 80 ✏️ 🗑
▌ WO-2026-001
- 左侧色条（宽 3px，高 26px，圆角）：正常 = 绿色，编辑中 = 琥珀色，删除确认 = 红色。用色条替代原版整行背景色染色，减少视觉干扰。
- 序号列（宽 14px）：灰色小字，方便操作者快速定位。
- 主信息列：总排号
12px加粗（上行）+ 工单号11px灰色（下行），overflow: ellipsis防止溢出。 - 数量列：
12px加粗绿色，格式已装 / 总量。 - 操作按钮：✏️（编辑）/ 🗑（删除），触摸区域 28×28px，悬停背景
#eeeeee。
编辑态：数量文字替换为 52px 宽输入框，操作按钮变为 ✓（保存）/ ✕（取消）。
删除确认态：废弃弹窗方案，改为行内展开次级条（高度约 26px），与触发行紧邻，包含删除 / 取消 两个小按钮。行背景变淡红，色条变红，视觉上整体标记该条目处于危险操作中。
列表头（sticky）：高度约 30px，已装入本箱 左对齐，N 项 蓝色右对齐，固定在列表顶部，滚动时不消失。
3.4 底部操作区固定化（_buildManyToOneScanArea + _buildManyToOneSubmitArea）
原版：扫码区、数量输入、确认按钮、完成本箱按钮位于列表下方，随列表内容延伸，装入项目多时操作区不可见。
v2：底部操作区改为固定底栏（不参与滚动），从上至下分三行：
┌──────────────────────────────────────────┐
│ [✓ 26BW0014 · WO-004 · 50件] │ 扫码条 ~38px
│ 数量 [ 50 ] [确认] │ 提交行 ~48px
│ [ 完成本箱 ] │ 完成行 ~50px
└──────────────────────────────────────────┘
扫码条：
- 等待状态：灰色背景，
📷 请扫描执行卡二维码，文字灰色。 - 已扫码状态：浅绿背景，
✓ 总排号 · 工单号 · N件，文字绿色，绿色边框。
提交行：
数量标签（11px）+ 输入框（flex:1，高 34px）+ 确认按钮（高 34px，padding 0 18px）。- 未扫码时：输入框禁用，确认按钮灰色不可点。
- 已扫码时：输入框激活，确认按钮蓝色可点。
完成本箱行：
- 全宽描边按钮（高 36px，圆角 8px），有已装入项时激活，否则灰色。
3.5 通知条（Alert Bars）
原版：每条高度约 36px，字号 13px，内边距 8px 16px。
v2：
- 高度压缩至约 30px，内边距
6px 12px，字号12px。 - 多条通知可叠加显示（同步条 + 警告条并存，场景6）。
- 各通知类型颜色语义不变：橙（同步中）/ 琥珀（警告）/ 蓝（信息）/ 黄（重复箱号）。
- 同步条保留旋转动画小图标（
12px，0.7s线性）。
3.6 状态栏（StatusBar）
原版：高度约 38px，背景 #f0f0f0，内边距 12px 16px。
v2：
- 高度压缩至约 28px，内边距
6px 12px。 - 状态点直径从 8px 缩至 7px，文字从 14px 缩至 12px。
- 颜色语义不变（蓝/绿/橙/红/琥珀）。
4. 整体布局结构（v2）
┌──────────────────────────────────────────┐ 44px
│ 装箱编号 [⇄ 多码凑箱 P2] │ AppBar
├──────────────────────────────────────────┤
│ [通知条，可叠加，每条 ~30px] │ 可选
├──────────────────────────────────────────┤ 48px
│ 箱号 [ 1 ] │ W00009 已有1箱·最大箱1 详情│ header-bar
├──────────────────────────────────────────┤
│ 已装入本箱（sticky） 3 项 │ ~30px
│ 1 ▌ 26BW0011 WO-001 80/80 ✏️ 🗑 │ 40px
│ 2 ▌ 26BW0012 WO-002 60/60 ✏️ 🗑 │ 40px
│ 3 ▌ 26BW0013 WO-003 40/40 ✏️ 🗑 │ 40px ← 可滚动
│ ... │
├──────────────────────────────────────────┤
│ [✓ 26BW0014 · WO-004 · 50件] │ ~38px 固定
│ 数量 [ 50 ] [确认] │ ~48px 固定
│ [ 完成本箱 ] │ ~50px 固定
├──────────────────────────────────────────┤ 28px
│ ● 装箱成功，请继续扫码 │ 状态栏
└──────────────────────────────────────────┘
5. 影响范围
| 方法/组件 | 改动类型 |
|---|---|
_buildManyToOneBody() |
结构重组（列表区 + 固定底栏） |
_buildManyToOneBoxNoPanel() |
重写（合并为 header-bar） |
_buildManyToOnePackedList() |
重写（行高、色条、内联删除确认） |
_buildManyToOneScanArea() |
移入固定底栏，样式调整 |
_buildManyToOneSubmitArea() |
移入固定底栏，高度调整 |
_buildAppBar() 多码分支 |
高度和内边距调整 |
StatusBar widget |
尺寸参数调整 |
| Alert bar 区域 | 内边距和字号调整 |
业务逻辑（decideMultiCodePaichanContext、_applyAutoFill、_onSubmitSuccess、_finishManyToOneBox 等）不受影响。
6. 不在本次范围内
- 单码装箱模式（
BoxingMode.single）的布局不做调整。 - 字体、主题色、品牌色系不做变更。
- 横屏/平板适配留作后续专项。