4.6 KiB
4.6 KiB
子卷包装关系批量新增 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，分为三部分：
- 顶部：标题、关闭按钮、操作说明和当前数据统计。
- 中部：工具栏与可编辑表格，表格区域可横向、纵向滚动。
- 底部：固定操作栏，包含取消和“确认新增（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 导入、批量粘贴、真实接口请求、权限判断、后端字典加载或分页查询。这些能力可在后续开发阶段按实际接口补充。