feat: refactor multi-code boxing UI with compact v2 layout

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>
This commit is contained in:
Misaka_Company
2026-05-18 13:58:50 +08:00
parent 3710e5955d
commit f964c76382
5 changed files with 3094 additions and 335 deletions

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,191 @@
# PRD · 多码凑箱页面布局优化
**模块**:装箱编号 > 多码凑箱模式BoxingMode.multiCode
**文件**`lib/pages/boxing_page.dart`(主要影响 `_buildManyToOneBody` 及相关子方法)
**版本**v2
**状态**:待评审
---
## 1. 背景与目标
多码凑箱页面在手持 PDA / 手机屏幕(宽度约 375390px上使用时原版布局存在以下问题
- **垂直空间浪费**AppBar、箱号区、排产信息区各自独占一行三块合计高度约 140px挤压了中间列表区的可视行数。
- **操作区随列表滚动**:扫码区和提交区位于列表下方,装入项目多时需要下拉才能看到操作控件,增加操作摩擦。
- **信息层次不清晰**:删除确认使用弹窗,打断了列表的整体感知;通知条与内容区边界不明确。
**优化目标**:在同一屏内展示更多已装入项目,同时保持操作控件始终可见,整体界面整洁、层次分明。
---
## 2. 改动总览
| 区域 | 原版高度(估算) | v2 高度(估算) | 节省 |
|------|--------------|--------------|------|
| AppBar | ~52px | 44px | 8px |
| 箱号区 + 排产信息区 | ~80px两行 | 48px合并一行 | 32px |
| 列表每行 | ~4852px | 40px | 812px/行 |
| 通知条(每条) | ~36px | 30px | 6px |
| 状态栏 | ~38px | 28px | 10px |
三项以上改动叠加后,典型场景下可多显示 **12 条**已装入记录,且操作底栏固定可见。
---
## 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` 高度约 4852px内含 `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`)的布局不做调整。
- 字体、主题色、品牌色系不做变更。
- 横屏/平板适配留作后续专项。