# PRD：恩纳村 2D 色彩切换组合展示优化

| 项目 | 内容 |
|---|---|
| 客户名称 | 恩纳村 |
| 产品 | 2D 色彩切换 |
| 文档版本 | v0.4 |
| 交付日期 | 2026-07-23（下周四） |
| 适用端 | C 端 2D 色彩切换页面（PC / Pad / 移动端） |

## 修订记录

| 日期 | 版本 | 变更类型 | 变更摘要 | 修改人 / 来源 |
|---|---|---|---|---|
| 2026-07-17 | v0.4 | 文档结构整理 | 删除重复的“已确认业务规则”章节，规则保留于功能需求 | 客户修改意见 / Codex |
| 2026-07-17 | v0.3 | 重大规则确认 | 明确 6 种组合及材质说明跨风格共用；风格仅切换地板背景颜色 | 客户确认 / Codex |
| 2026-07-17 | v0.2 | 组合标识与排序补充 | 组合卡片名称统一为 ①～⑥，并明确按先横后竖排序 | 客户修改意见 / Codex |
| 2026-07-17 | v0.1 | 新增需求 | 新增 6 种组合展示及风格、组合状态解耦需求 | 客户修改意见 / Codex |

## 1. 需求背景

当前每个风格下仅展示 2 种组合；切换风格后，组合及材质说明随风格重置。客户希望一次展示完整的 6 种组合，并在切换风格时保留用户当前选择的组合，仅改变场景背景的地板颜色。

## 2. 目标与范围

| 目标 | 说明 |
|---|---|
| 完整比较 | 每个风格下均可直接浏览、选择 6 种组合 |
| 保持选择 | 切换风格不重置当前组合 |
| 正确说明 | 材质说明始终对应当前组合，不受风格切换影响 |

本次仅调整 2D 色彩切换页的组合数量、状态联动与响应式布局；不新增风格、不改变组合内柜体 / 台面等既有展示内容，也不涉及后台管理流程。

## 3. 功能需求

### 3.1 风格与组合的状态定义

| 状态 | 定义 | 切换后的影响 |
|---|---|---|
| 当前风格 | 用户当前选择的背景风格 | 仅决定场景背景中的地板颜色 |
| 当前组合 | 用户当前选择的 6 种组合之一 | 决定组合展示内容及其材质说明 |

- 风格与组合必须独立保存为两个页面状态。
- 切换风格时，当前组合不变；仅替换背景地板颜色。
- 切换组合时，当前风格不变；更新组合对应的柜体、台面等展示内容及材质说明。
- 材质说明以“当前组合”为唯一数据来源，不得因风格切换而替换或重置。
- 6 种组合及其材质说明为全部风格共用的一套数据；不维护按风格分别配置的组合、柜体 / 台面素材或材质说明。

### 3.2 组合展示与选择

- 每个风格下的组合选择区固定展示 6 种组合，不采用“更多”“翻页”或隐藏入口。
- 6 张组合卡片的展示名称统一使用带圈数字：`①`、`②`、`③`、`④`、`⑤`、`⑥`；不再使用“标准仕様”“セレクト①”等文字名称。
- 组合卡片按“先横后竖”排序：两列布局时第一行 `①、②`，第二行 `③、④`，第三行 `⑤、⑥`。单列布局时按 `①` 至 `⑥` 自上而下排列。
- 每种组合以独立缩略图卡片呈现，沿用现有选中态视觉规则；任一时刻仅可选中 1 种组合。
- 首次进入页面时，默认选中既有默认组合；切换风格后保持该组合的选中态。
- 6 种组合均须具备可展示的组合素材和对应材质说明；若任一组合缺少素材或说明，该组合不得上线为可选项。

### 3.3 材质说明

- 材质说明继续展示当前组合所包含的项目（如天板、扉、フローリング）及其色号 / 名称。
- 用户切换组合后，材质说明与组合画面同步更新。
- 用户仅切换风格后，材质说明内容、顺序与色号保持不变。

## 4. 用户用例

| 用例 | 操作 | 预期结果 |
|---|---|---|
| 浏览全部组合 | 用户进入任一风格 | 组合区一次显示全部 6 种组合，并能识别当前选中项 |
| 切换组合 | 用户点击卡片③ | 场景中的组合内容切换为③；材质说明同步显示③的信息；地板颜色保持当前风格 |
| 切换风格 | 用户已选择组合③后，点击另一风格 | 场景地板颜色切换为目标风格；组合③仍保持选中并继续展示；材质说明不变 |
| 连续比较 | 用户在不同风格之间反复切换 | 始终保留最后一次选择的组合，仅以不同地板背景辅助比较 |

## 5. 响应式布局要求

| 场景 | 要求 |
|---|---|
| PC / Pad 横屏 | 组合卡片采用 2 列、3 行展示，顺序为 `①、② / ③、④ / ⑤、⑥`；侧边配置面板可纵向滚动，不挤压或遮挡主场景 |
| 窄幅 Pad / 移动端 | 保证卡片缩略图、带圈数字名称和选中态可辨识、可点击；空间不足时组合区改为单列纵向排列，顺序为 `①` 至 `⑥` |
| 所有尺寸 | 禁止因组合数量从 2 项增至 6 项而出现页面横向滚动、文字截断或材质说明被遮挡；组合区与材质说明随面板纵向滚动完整可见 |

## 6. 验收标准

1. 任一风格下均完整显示 6 种可选组合，卡片名称依次为 ①、②、③、④、⑤、⑥。
2. 两列布局按先横后竖顺序展示为 ①、② / ③、④ / ⑤、⑥；单列布局按 ① 至 ⑥ 自上而下展示。
3. 选择任一组合后，组合画面、选中态和材质说明一致且同步更新。
4. 在任意组合已选中的情况下切换风格，仅场景背景地板颜色发生变化；组合、选中态及材质说明均保持不变。
5. 切换组合时，当前风格及其背景地板颜色保持不变。
6. PC、Pad 与移动端均可浏览并操作全部 6 种组合，无横向溢出、不可点击项或材质说明遮挡。