90 lines
4.6 KiB
Markdown
90 lines
4.6 KiB
Markdown
# 子卷包装关系批量新增 PC 原型设计
|
||
|
||
## 目标
|
||
|
||
为“子卷包装关系”列表设计一个符合现有 Vben Admin + Ant Design 视觉体系的 PC 端“批量新增”弹窗。目标用户可在一个弹窗内连续录入多条完整包装关系，快速核对并提交。
|
||
|
||
本次只交付自包含、可交互的单文件 HTML 原型，不接入真实后端。
|
||
|
||
## 终端与交付
|
||
|
||
- 目标终端：PC，基准视口 1440 × 900。
|
||
- 视觉模式：严格沿用项目现有后台风格，包括浅灰页面背景、白色内容卡片、蓝色主按钮、紧凑表格、Ant Design 风格表单与弹窗。
|
||
- 交付方式：聊天内嵌展示；同时保存本地 HTML 文件。
|
||
- 保存路径：`docs/prototype_design/design/2026-08-17-sub-package-relation-batch-design.html`。
|
||
|
||
## 页面结构
|
||
|
||
原型包含完整的“子卷包装关系列表”后台页面作为背景，并默认打开“批量新增子卷包装关系”弹窗，使弹窗的尺寸、层级和操作上下文可直接评估。
|
||
|
||
弹窗约 1280 × 720，分为三部分：
|
||
|
||
1. 顶部：标题、关闭按钮、操作说明和当前数据统计。
|
||
2. 中部：工具栏与可编辑表格，表格区域可横向、纵向滚动。
|
||
3. 底部：固定操作栏，包含取消和“确认新增（N 条）”。
|
||
|
||
## 数据字段
|
||
|
||
每一行完整录入一条包装关系，字段如下：
|
||
|
||
| 接口字段 | 页面名称 | 控件与规则 |
|
||
| --- | --- | --- |
|
||
| `package_box_sn` | 木箱唯一码 | 文本输入，必填，批次内不可重复 |
|
||
| `box_weight` | 重量 | 数字输入，必填，大于 0，单位 kg |
|
||
| `quality_guaran_period` | 保质期 | 日期选择器，必填 |
|
||
| `sale_order_name` | 销售订单号 | 文本输入，必填 |
|
||
| `customer_name` | 客户名称 | 文本输入，必填 |
|
||
| `date_of_fg_inbound` | 入库日期 | 日期选择器，必填 |
|
||
| `container_name` | 子卷号 | 文本输入，必填，批次内不可重复 |
|
||
| `box_type` | 木箱类型 | 可搜索下拉框，必填 |
|
||
| `box_length` | 木箱长 | 根据木箱类型自动带出，只读，单位 mm |
|
||
| `box_width` | 木箱宽 | 根据木箱类型自动带出，只读，单位 mm |
|
||
| `box_high` | 木箱高 | 根据木箱类型自动带出，只读，单位 mm |
|
||
|
||
木箱类型使用本地演示选项。选择类型后，长、宽、高同步更新；清空类型时三个尺寸同时清空。
|
||
|
||
## 表格组织
|
||
|
||
表头按业务分为“木箱信息”“订单信息”“子卷信息”和“操作”。木箱唯一码靠左固定，操作列靠右固定；其他字段位于可横向滚动区域。
|
||
|
||
弹窗默认创建 3 行。工具栏提供“新增一行”和“清空全部”。每行提供：
|
||
|
||
- 复制：复制当前行的重量、保质期、订单、客户、入库日期和木箱类型，自动带出尺寸；清空木箱唯一码与子卷号。
|
||
- 删除：删除当前行；仅剩一行时保留空行，不让表格进入无可编辑状态。
|
||
|
||
## 交互状态
|
||
|
||
- 表格输入支持清晰的悬停、聚焦和键盘焦点状态。
|
||
- 选择木箱类型后显示尺寸，并通过浅灰只读样式与可编辑字段区分。
|
||
- 点击提交时逐行检查必填项、重量范围、木箱唯一码重复和子卷号重复。
|
||
- 校验失败时，错误单元格显示红色边框和简短说明，顶部错误摘要提示首个问题，页面滚动到首个错误位置。
|
||
- 校验通过时弹出本地模拟成功反馈，关闭弹窗并在背景列表顶部加入新数据。
|
||
- 点击取消或关闭按钮时，若存在已输入内容，显示放弃确认；空表可直接关闭。
|
||
- 重新点击背景页“批量新增”按钮可以再次打开并重置为 3 行。
|
||
|
||
## 演示数据
|
||
|
||
原型预置若干背景列表记录和以下木箱类型：
|
||
|
||
- BX-A：1200 × 1000 × 900 mm
|
||
- BX-B：1100 × 900 × 850 mm
|
||
- BX-C：800 × 600 × 600 mm
|
||
|
||
以上仅用于交互演示，不代表生产配置。
|
||
|
||
## 可用性与适配
|
||
|
||
- 基准视口 1440 × 900 下无需页面级滚动即可完成主要操作。
|
||
- 弹窗内容区允许内部滚动，避免底部按钮离开视口。
|
||
- 使用明确的 `label`、表头、键盘焦点和足够颜色对比度。
|
||
- 在较窄 PC 视口下保留横向滚动，不压缩输入框到不可操作宽度。
|
||
- 不使用远程依赖，HTML 可直接打开。
|
||
|
||
## 验证范围
|
||
|
||
交付前验证：打开/关闭弹窗、新增行、复制行、删除行、清空全部、选择木箱类型并联动尺寸、错误校验、重复值校验、成功提交、背景列表刷新，以及 1440 × 900 下的裁切和滚动情况。
|
||
|
||
## 范围边界
|
||
|
||
本次不实现 Excel 导入、批量粘贴、真实接口请求、权限判断、后端字典加载或分页查询。这些能力可在后续开发阶段按实际接口补充。
|