zhouz/huachuang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3a74a3f59840592c0c3f73d839d9ea1c62ceff7e
huachuang/docs/superpowers/plans/2026-08-17-sub-package-relation-batch.md
liyongde 3a74a3f598 feat：子卷质检不合格
2026-08-18 18:44:13 +08:00

5.9 KiB
Raw Blame History

子卷包装关系批量新增 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

  • 步骤 1：定义可验证的静态结构约束

确认 HTML 必须包含 #batchModal、#editableBody、#addRowBtn、#clearBtn、#cancelBtn 和 #submitBtn，并包含 11 个业务字段对应的输入控件生成逻辑。

  • 步骤 2：创建完整后台页面骨架

实现侧边栏、顶栏、面包屑、查询区、子卷包装关系列表和遮罩层，让弹窗处于真实页面上下文中。

  • 步骤 3：实现 Ant Design 风格令牌

在 :root 中定义主色 #1677ff、边框 #d9d9d9、页面底色 #f5f5f5、正文色 #1f2329、圆角和阴影；实现按钮、输入框、表格、提示条、弹窗及键盘聚焦状态。

  • 步骤 4：验证静态结构

运行：

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

  • 步骤 1：定义行数据与木箱类型

定义 rows 数组、递增行键和以下演示字典：

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 },
};
  • 步骤 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，其中尺寸字段只读。

  • 步骤 3：实现木箱类型联动

监听 box_type 变化，将选中类型对应的长、宽、高写入当前行；清空类型时同步清空三个尺寸并重新渲染统计。

  • 步骤 4：实现行级操作

实现新增、复制和删除。复制时保留公共数据并清空 package_box_sn、container_name；删除到最后一行时用新空行替换。

  • 步骤 5：实现批量清空

点击“清空全部”弹出确认层，确认后恢复 3 个空行，取消后保持原数据。

任务 3：实现校验、提交与关闭流程

文件：

  • 修改：docs/prototype_design/design/2026-08-17-sub-package-relation-batch-design.html

  • 步骤 1：实现逐行必填校验

要求七个可编辑业务字段和 box_type 均有值，box_weight 必须大于 0；错误记录为 { rowKey, field, message } 并映射到对应单元格。

  • 步骤 2：实现重复值校验

使用两个 Map 检查 package_box_sn 和 container_name，第二次出现及其首次出现位置都标红，并显示“与第 N 行重复”。

  • 步骤 3：实现错误摘要与定位

提交失败时显示顶部红色摘要，更新错误数量，并聚焦首个无效控件；输入修正后清除当前字段错误。

  • 步骤 4：实现本地模拟提交

校验通过后显示加载状态，短暂延迟后关闭弹窗、向背景列表追加记录，并显示“成功新增 N 条子卷包装关系”。

  • 步骤 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

  • 步骤 1：以目标视口打开原型

使用 1440 × 900 视口加载本地 HTML，确认弹窗未超出视口，表格只在内容区内部滚动，底部按钮始终可见。

  • 步骤 2：走通核心流程

依次操作新增行、选择 BX-B、确认尺寸为 1100 × 900 × 850、复制行、删除行、清空取消、空表提交校验、重复值校验和有效提交。

  • 步骤 3：检查运行错误

确认控制台无 JavaScript 错误、无远程资源失败、所有按钮可点击、Tab 键焦点可见。

  • 步骤 4：修正视觉问题

重点检查表头分组、冻结列、横向滚动、错误提示、背景遮罩、弹窗间距和 12 至 14px 的信息密度，修复裁切或重叠。

  • 步骤 5：完成静态检查

运行：

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:// 依赖。