134 lines
5.9 KiB
Markdown
134 lines
5.9 KiB
Markdown
# 子卷包装关系批量新增 PC 原型实现计划
|
||
|
||
> **面向 AI 代理的工作者：** 必需子技能：使用 superpowers:subagent-driven-development（推荐）或 superpowers:executing-plans 逐任务实现此计划。步骤使用复选框（`- [ ]`）语法来跟踪进度。
|
||
|
||
**目标：** 创建一个符合现有 Vben Admin + Ant Design 风格、可在 PC 上完整演示批量新增子卷包装关系流程的单文件 HTML 原型。
|
||
|
||
**架构：** 使用一个自包含 HTML 文件承载页面结构、CSS 设计令牌与原生 JavaScript 状态管理。以行数组作为唯一数据源，集中实现渲染、木箱尺寸联动、复制/删除、校验和本地模拟提交，避免远程依赖与构建步骤。
|
||
|
||
**技术栈：** HTML5、CSS3、原生 JavaScript、Playwright 或可用浏览器工具进行交互验证。
|
||
|
||
---
|
||
|
||
## 文件结构
|
||
|
||
- 创建：`docs/prototype_design/design/2026-08-17-sub-package-relation-batch-design.html`——完整页面、弹窗、样式、模拟数据和交互逻辑。
|
||
- 修改：`docs/superpowers/plans/2026-08-17-sub-package-relation-batch.md`——执行后勾选任务状态。
|
||
|
||
### 任务 1：建立页面骨架与视觉体系
|
||
|
||
**文件：**
|
||
- 创建：`docs/prototype_design/design/2026-08-17-sub-package-relation-batch-design.html`
|
||
|
||
- [x] **步骤 1：定义可验证的静态结构约束**
|
||
|
||
确认 HTML 必须包含 `#batchModal`、`#editableBody`、`#addRowBtn`、`#clearBtn`、`#cancelBtn` 和 `#submitBtn`，并包含 11 个业务字段对应的输入控件生成逻辑。
|
||
|
||
- [x] **步骤 2：创建完整后台页面骨架**
|
||
|
||
实现侧边栏、顶栏、面包屑、查询区、子卷包装关系列表和遮罩层，让弹窗处于真实页面上下文中。
|
||
|
||
- [x] **步骤 3：实现 Ant Design 风格令牌**
|
||
|
||
在 `:root` 中定义主色 `#1677ff`、边框 `#d9d9d9`、页面底色 `#f5f5f5`、正文色 `#1f2329`、圆角和阴影；实现按钮、输入框、表格、提示条、弹窗及键盘聚焦状态。
|
||
|
||
- [x] **步骤 4：验证静态结构**
|
||
|
||
运行：
|
||
|
||
```powershell
|
||
rg -n 'batchModal|editableBody|addRowBtn|clearBtn|cancelBtn|submitBtn' docs/prototype_design/design/2026-08-17-sub-package-relation-batch-design.html
|
||
```
|
||
|
||
预期：六个关键 ID 均至少出现一次。
|
||
|
||
### 任务 2：实现批量录入核心交互
|
||
|
||
**文件：**
|
||
- 修改：`docs/prototype_design/design/2026-08-17-sub-package-relation-batch-design.html`
|
||
|
||
- [x] **步骤 1：定义行数据与木箱类型**
|
||
|
||
定义 `rows` 数组、递增行键和以下演示字典：
|
||
|
||
```js
|
||
const boxTypes = {
|
||
'BX-A': { length: 1200, width: 1000, high: 900 },
|
||
'BX-B': { length: 1100, width: 900, high: 850 },
|
||
'BX-C': { length: 800, width: 600, high: 600 },
|
||
};
|
||
```
|
||
|
||
- [x] **步骤 2：实现表格渲染与字段绑定**
|
||
|
||
每行渲染 `package_box_sn`、`box_weight`、`quality_guaran_period`、`sale_order_name`、`customer_name`、`date_of_fg_inbound`、`container_name`、`box_type`、`box_length`、`box_width`、`box_high`，其中尺寸字段只读。
|
||
|
||
- [x] **步骤 3：实现木箱类型联动**
|
||
|
||
监听 `box_type` 变化，将选中类型对应的长、宽、高写入当前行；清空类型时同步清空三个尺寸并重新渲染统计。
|
||
|
||
- [x] **步骤 4：实现行级操作**
|
||
|
||
实现新增、复制和删除。复制时保留公共数据并清空 `package_box_sn`、`container_name`；删除到最后一行时用新空行替换。
|
||
|
||
- [x] **步骤 5：实现批量清空**
|
||
|
||
点击“清空全部”弹出确认层，确认后恢复 3 个空行，取消后保持原数据。
|
||
|
||
### 任务 3：实现校验、提交与关闭流程
|
||
|
||
**文件：**
|
||
- 修改：`docs/prototype_design/design/2026-08-17-sub-package-relation-batch-design.html`
|
||
|
||
- [x] **步骤 1：实现逐行必填校验**
|
||
|
||
要求七个可编辑业务字段和 `box_type` 均有值，`box_weight` 必须大于 0；错误记录为 `{ rowKey, field, message }` 并映射到对应单元格。
|
||
|
||
- [x] **步骤 2：实现重复值校验**
|
||
|
||
使用两个 `Map` 检查 `package_box_sn` 和 `container_name`，第二次出现及其首次出现位置都标红，并显示“与第 N 行重复”。
|
||
|
||
- [x] **步骤 3：实现错误摘要与定位**
|
||
|
||
提交失败时显示顶部红色摘要，更新错误数量，并聚焦首个无效控件；输入修正后清除当前字段错误。
|
||
|
||
- [x] **步骤 4：实现本地模拟提交**
|
||
|
||
校验通过后显示加载状态，短暂延迟后关闭弹窗、向背景列表追加记录，并显示“成功新增 N 条子卷包装关系”。
|
||
|
||
- [x] **步骤 5：实现关闭保护与重新打开**
|
||
|
||
有内容时点击取消、关闭或遮罩显示放弃确认；空表直接关闭。背景页“批量新增”按钮重新打开弹窗并恢复 3 行。
|
||
|
||
### 任务 4：浏览器验证与视觉修正
|
||
|
||
**文件：**
|
||
- 修改：`docs/prototype_design/design/2026-08-17-sub-package-relation-batch-design.html`
|
||
- 修改：`docs/superpowers/plans/2026-08-17-sub-package-relation-batch.md`
|
||
|
||
- [x] **步骤 1：以目标视口打开原型**
|
||
|
||
使用 1440 × 900 视口加载本地 HTML，确认弹窗未超出视口，表格只在内容区内部滚动，底部按钮始终可见。
|
||
|
||
- [x] **步骤 2：走通核心流程**
|
||
|
||
依次操作新增行、选择 BX-B、确认尺寸为 1100 × 900 × 850、复制行、删除行、清空取消、空表提交校验、重复值校验和有效提交。
|
||
|
||
- [x] **步骤 3：检查运行错误**
|
||
|
||
确认控制台无 JavaScript 错误、无远程资源失败、所有按钮可点击、Tab 键焦点可见。
|
||
|
||
- [x] **步骤 4：修正视觉问题**
|
||
|
||
重点检查表头分组、冻结列、横向滚动、错误提示、背景遮罩、弹窗间距和 12 至 14px 的信息密度，修复裁切或重叠。
|
||
|
||
- [x] **步骤 5：完成静态检查**
|
||
|
||
运行：
|
||
|
||
```powershell
|
||
rg -n 'package_box_sn|box_weight|quality_guaran_period|sale_order_name|customer_name|date_of_fg_inbound|container_name|box_type|box_length|box_width|box_high' docs/prototype_design/design/2026-08-17-sub-package-relation-batch-design.html
|
||
```
|
||
|
||
预期：11 个字段名全部存在；HTML 无远程 `http://` 或 `https://` 依赖。
|