From 95286d126e5f819c4782969261e17d66ea1dea91 Mon Sep 17 00:00:00 2001
From: liyongde <1419499670@qq.com>
Date: Mon, 17 Aug 2026 10:14:30 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E5=AD=90=E5=8D=B7?=
 =?UTF-8?q?=E5=8C=85=E8=A3=85=E6=89=B9=E9=87=8F=E6=96=B0=E5=A2=9E=E5=8E=9F?=
 =?UTF-8?q?=E5=9E=8B=E8=AE=BE=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...08-17-sub-package-relation-batch-design.md | 89 +++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-08-17-sub-package-relation-batch-design.md

diff --git a/docs/superpowers/specs/2026-08-17-sub-package-relation-batch-design.md b/docs/superpowers/specs/2026-08-17-sub-package-relation-batch-design.md
new file mode 100644
index 00000000..f7b7b88f
--- /dev/null
+++ b/docs/superpowers/specs/2026-08-17-sub-package-relation-batch-design.md
@@ -0,0 +1,89 @@
+# 子卷包装关系批量新增 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 导入、批量粘贴、真实接口请求、权限判断、后端字典加载或分页查询。这些能力可在后续开发阶段按实际接口补充。