# 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)