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

New Issue

2026-08-24T11:29:26+08:00

ila commented

2026-08-24 11:29:26 +08:00

基本信息

类型：需求
父级大工单：#14
所属 MVP / 版本：#291 / 蝦皮与 PDD 商品级颜色映射
阶段：Stage A 交互原型

要解决什么

需要先把 cmautobuy 的商品级颜色映射页面、入口、状态和多对一选择交互做成可审核原型，避免直接复制 goauto #69 的侧栏、颜色/尺码双标签、单一颜色价格等不适合当前 Admin 的设计。用户确认原型前不得开始数据库和生产页面实现。

做什么 / 不做什么

做：在 prototypes/291/v1/ 制作单文件、可点击的本地 HTML 原型，沿用当前 Admin 顶部导航和三段式数据页风格。
做：展示蝦皮商品、当前 PDD 商品、颜色映射进度和单一颜色映射表。
做：PDD 下拉包含“当前选择 / 未使用的颜色 / 已经匹配（仍可选择）”，允许多对一、部分保存和明确清除。
做：覆盖未关联 PDD、未采集、无规格、加载、加载失败、待匹配、已匹配、已失效、陈旧提交、保存失败和未保存离开提示。
不做：不制作尺码映射标签页，不展示误导性的单一颜色价格；需要价格信息时只展示当前可购买组合的价格区间。
不做：不修改 Admin 生产模板、Go、数据库、Client 或接口，不连接生产数据。

怎么做

参考 D:\OPC\goauto\prototypes\69\v2\index.html 的商品摘要、进度、多对一和下拉分组交互，但重新使用 cmautobuy 的导航、文案、颜色、间距和 1366×768 布局。
页面主入口表达为“蝦皮数据 → 商品详情/列表 → 颜色匹配”，SYB 行可作为后续快捷入口，但不增加顶部模块。
行使用蝦皮颜色业务身份，不用行号；来源以“正式 SKU / SYB 观测”文字显示，不能只靠颜色区分。
页面只保留一个主操作“保存修改”；动态下拉、筛选和离开提醒可用原生 JavaScript。
原型包含明确说明：颜色映射不会修改两端原始规格，也不能单独让订单进入采购。
原型版本一经用户确认不得原位覆盖；后续改动新建 v2。

验收标准

本地 HTML 可直接打开，资源使用相对路径且不依赖外部服务。
页面符合当前 Admin 外壳和三段式布局，在 1366×768 下主要操作可用，横向滚动只发生在表格容器内。
没有尺码映射标签页、审核场景选择器或新的顶部模块。
多对一选择、未使用/已使用分组、部分保存、清除和未保存离开可以点击演示。
所有异常和空状态有明确原因及下一步，不只靠颜色表达。
原型不包含账号、凭据、个人信息或生产业务数据。
用户明确确认原型通过后，才允许 #293、#294、#295 进入实施。

怎么验证

直接打开 prototypes/291/v1/index.html，逐项点击入口、颜色选择、清除、保存、离开和状态切换。
检查内嵌 JavaScript 语法、外部 HTTP(S) 资源、敏感字样和 git diff --check。
视觉走查宽度至少覆盖 1366×768 和窄窗口表格横向滚动。

风险和回退

风险：原型若照搬参考项目，会与当前 Admin 导航和数据语义冲突；必须以 cmautobuy 基线为准。
回退：原型只作为设计证据，删除对应版本目录即可，不影响任何生产代码和数据。

## 基本信息 - 类型：需求 - 父级大工单：#14 - 所属 MVP / 版本：#291 / 蝦皮与 PDD 商品级颜色映射 - 阶段：Stage A 交互原型 ## 要解决什么需要先把 cmautobuy 的商品级颜色映射页面、入口、状态和多对一选择交互做成可审核原型，避免直接复制 goauto #69 的侧栏、颜色/尺码双标签、单一颜色价格等不适合当前 Admin 的设计。用户确认原型前不得开始数据库和生产页面实现。 ## 做什么 / 不做什么 - 做：在 `prototypes/291/v1/` 制作单文件、可点击的本地 HTML 原型，沿用当前 Admin 顶部导航和三段式数据页风格。 - 做：展示蝦皮商品、当前 PDD 商品、颜色映射进度和单一颜色映射表。 - 做：PDD 下拉包含“当前选择 / 未使用的颜色 / 已经匹配（仍可选择）”，允许多对一、部分保存和明确清除。 - 做：覆盖未关联 PDD、未采集、无规格、加载、加载失败、待匹配、已匹配、已失效、陈旧提交、保存失败和未保存离开提示。 - 不做：不制作尺码映射标签页，不展示误导性的单一颜色价格；需要价格信息时只展示当前可购买组合的价格区间。 - 不做：不修改 Admin 生产模板、Go、数据库、Client 或接口，不连接生产数据。 ## 怎么做 - 参考 `D:\OPC\goauto\prototypes\69\v2\index.html` 的商品摘要、进度、多对一和下拉分组交互，但重新使用 cmautobuy 的导航、文案、颜色、间距和 1366×768 布局。 - 页面主入口表达为“蝦皮数据 → 商品详情/列表 → 颜色匹配”，SYB 行可作为后续快捷入口，但不增加顶部模块。 - 行使用蝦皮颜色业务身份，不用行号；来源以“正式 SKU / SYB 观测”文字显示，不能只靠颜色区分。 - 页面只保留一个主操作“保存修改”；动态下拉、筛选和离开提醒可用原生 JavaScript。 - 原型包含明确说明：颜色映射不会修改两端原始规格，也不能单独让订单进入采购。 - 原型版本一经用户确认不得原位覆盖；后续改动新建 v2。 ## 验收标准 - [ ] 本地 HTML 可直接打开，资源使用相对路径且不依赖外部服务。 - [ ] 页面符合当前 Admin 外壳和三段式布局，在 1366×768 下主要操作可用，横向滚动只发生在表格容器内。 - [ ] 没有尺码映射标签页、审核场景选择器或新的顶部模块。 - [ ] 多对一选择、未使用/已使用分组、部分保存、清除和未保存离开可以点击演示。 - [ ] 所有异常和空状态有明确原因及下一步，不只靠颜色表达。 - [ ] 原型不包含账号、凭据、个人信息或生产业务数据。 - [ ] 用户明确确认原型通过后，才允许 #293、#294、#295 进入实施。 ## 怎么验证 - 直接打开 `prototypes/291/v1/index.html`，逐项点击入口、颜色选择、清除、保存、离开和状态切换。 - 检查内嵌 JavaScript 语法、外部 HTTP(S) 资源、敏感字样和 `git diff --check`。 - 视觉走查宽度至少覆盖 1366×768 和窄窗口表格横向滚动。 ## 风险和回退 - 风险：原型若照搬参考项目，会与当前 Admin 导航和数据语义冲突；必须以 cmautobuy 基线为准。 - 回退：原型只作为设计证据，删除对应版本目录即可，不影响任何生产代码和数据。

ila commented

2026-08-24 11:43:39 +08:00

实施进度（2026-08-23）

状态：进行中。

已开始制作 prototypes/291/v1/index.html 单文件交互原型。范围严格限定为颜色映射，不包含尺码映射标签页，不修改 Admin 正式模板、Go、数据库或 Client。

当前实现覆盖商品入口、正式 SKU / SYB 观测来源、多对一颜色选择、下拉分组、部分保存、清除、失效、未关联、待采集、无可购买规格、加载失败、保存失败、陈旧提交和未保存离开。完成静态检查后提交供用户审核。

## 实施进度（2026-08-23）状态：进行中。已开始制作 `prototypes/291/v1/index.html` 单文件交互原型。范围严格限定为颜色映射，不包含尺码映射标签页，不修改 Admin 正式模板、Go、数据库或 Client。当前实现覆盖商品入口、正式 SKU / SYB 观测来源、多对一颜色选择、下拉分组、部分保存、清除、失效、未关联、待采集、无可购买规格、加载失败、保存失败、陈旧提交和未保存离开。完成静态检查后提交供用户审核。

ila commented

2026-08-24 11:43:40 +08:00

原型已提交，待用户确认（2026-08-23）

原型：prototypes/291/v1/index.html
实现提交：a0a9804（feat: 增加商品颜色匹配交互原型 (#292)）
当前状态：待用户审核原型；工单保持开放，尚未归档或关闭。

已实现

沿用 cmautobuy 当前顶部导航、工具条、表格、底部状态条和 1366×768 高密度布局。
只维护颜色，不包含尺码映射标签页或新顶部模块。
展示正式 SKU 与 SYB 观测来源、实际 PDD 颜色维度、多对一关系、当前选择 / 未使用 / 已使用分组、部分保存和清除。
覆盖未关联 PDD、PDD 待采集、无可购买规格、加载中、加载失败、待匹配、已匹配、已失效、保存失败、陈旧提交和未保存离开。
明确颜色映射不会覆盖两端原始规格，也不能独立绕过完整规格采购门禁。

验证

内嵌 JavaScript 语法检查：通过。
10 项静态原型断言：通过（单文件、无外部资源、无尺码标签、无审核场景下拉、表格滚动、reduced-motion、陈旧提交、保存失败、加载失败、未保存离开、多对一分组）。
静态 ID / label 关联检查：通过。
git diff --check：通过。
外部 URL、凭据、个人信息及生产数据关键字检查：通过。
未验证：当前机器没有可连接的浏览器实例，尚未完成实际 1366×768 截图和鼠标点击走查；请用户直接打开单文件审核，或浏览器可用后补测。

请用户确认 v1。确认前 #293、#294、#295 不进入实施。

## 原型已提交，待用户确认（2026-08-23） - 原型：`prototypes/291/v1/index.html` - 实现提交：`a0a9804`（`feat: 增加商品颜色匹配交互原型 (#292)`） - 当前状态：待用户审核原型；工单保持开放，尚未归档或关闭。 ### 已实现 - 沿用 cmautobuy 当前顶部导航、工具条、表格、底部状态条和 1366×768 高密度布局。 - 只维护颜色，不包含尺码映射标签页或新顶部模块。 - 展示正式 SKU 与 SYB 观测来源、实际 PDD 颜色维度、多对一关系、当前选择 / 未使用 / 已使用分组、部分保存和清除。 - 覆盖未关联 PDD、PDD 待采集、无可购买规格、加载中、加载失败、待匹配、已匹配、已失效、保存失败、陈旧提交和未保存离开。 - 明确颜色映射不会覆盖两端原始规格，也不能独立绕过完整规格采购门禁。 ### 验证 - 内嵌 JavaScript 语法检查：通过。 - 10 项静态原型断言：通过（单文件、无外部资源、无尺码标签、无审核场景下拉、表格滚动、reduced-motion、陈旧提交、保存失败、加载失败、未保存离开、多对一分组）。 - 静态 ID / label 关联检查：通过。 - `git diff --check`：通过。 - 外部 URL、凭据、个人信息及生产数据关键字检查：通过。 - 未验证：当前机器没有可连接的浏览器实例，尚未完成实际 1366×768 截图和鼠标点击走查；请用户直接打开单文件审核，或浏览器可用后补测。请用户确认 v1。确认前 #293、#294、#295 不进入实施。

ila commented

2026-08-24 11:43:41 +08:00