cmautobuy/docs/task/292-蝦皮与PDD商品颜色匹配交互原型.md

292 Admin：设计蝦皮与 PDD 商品颜色匹配交互原型

• 类型：需求
• 父级大工单：#14
• 所属 MVP / 版本：#291 / 蝦皮与 PDD 商品级颜色映射
• 状态：已完成
• 日期：2026-08-23
• Gitea 工单：http://ilaer.eicp.net:8418/chengma/cmautobuy/issues/292

背景与目标

在修改数据库和正式页面前，先用可交互原型确认蝦皮颜色与当前关联 PDD 商品颜色的维护方式。原型只处理颜色，不增加尺码映射页面，也不改变 Admin、Client 或生产数据。

最终方案

在 prototypes/291/v1/index.html 提供可直接打开的单文件原型，沿用 Admin 当前顶部导航、工具条、数据表和底部状态条。页面展示蝦皮商品、当前 PDD 商品、颜色来源、真实 PDD 维度和映射状态；PDD 颜色下拉按当前选择、未使用颜色和已使用但仍可选择的颜色分组，支持多对一、部分保存和明确清除。

原型同时覆盖未关联 PDD、PDD 待采集、无可购买规格、加载和加载失败、保存失败、映射失效、陈旧提交以及未保存离开。页面明确说明颜色映射不会覆盖两端原始规格，也不能独立绕过完整规格采购门禁。

改了哪些

• prototypes/291/v1/index.html：新增单文件颜色匹配交互原型，使用虚构数据和原生 JavaScript。

验收结果

验收标准	结果
本地 HTML 可直接打开且不依赖外部资源	通过
符合 Admin 外壳和三段式布局，表格独立滚动	通过
不包含尺码映射标签页、审核场景选择器或新顶部模块	通过
可演示多对一、分组选择、部分保存、清除和未保存离开	通过
异常和空状态均显示原因及下一步	通过
不包含凭据、个人信息或生产业务数据	通过
用户明确确认原型	通过，用户于 2026-08-23 确认

测试

• 执行的命令：内嵌 JavaScript 语法检查、静态 HTML 断言、ID 与 label 关联检查、外部 URL 和敏感字样检查、git diff --check。
• 结果：全部通过；原型实现提交为 a0a9804。
• 没验证到的部分：当前机器没有可连接的浏览器实例，未自动执行 1366×768 截图和鼠标点击回归；用户已直接审核并确认 v1 原型通过。

相关提交

• a0a9804 feat: 增加商品颜色匹配交互原型 (#292)