docs: add P22 StoryGallery consolidation plan (chapters + gallery merge)

This commit is contained in:
2026-06-10 15:49:11 +08:00
parent 7c1c734572
commit 0dec8a2376

View File

@@ -1140,6 +1140,65 @@ npx @electron/packager . MyGame --platform=win32 --arch=x64 --out=release
- [x] `src/locales/zh.json` + `en.json` — 新增 8 个 PauseMenu 专用翻译 key
- [x] 验证TypeScript + Vite build 通过
### P22 故事进度总览 — 章节选择 + 画廊合并(待实现)
目标:对标 Detroit: Become Human将章节选择和结局画廊合并为"故事进度总览"一张视图。
**现状 vs 业界对比:**
| | 当前 | 业界标准Detroit 等) |
|------|------|---------------------|
| 章节选择 | `ChapterSelect.vue` — 独立卡片选择器 | 章节卡片内嵌结局标签 |
| 结局画廊 | `EndingGallery.vue` — 独立缩略图网格 | 结局归属章节,不独立展示 |
| 主菜单入口 | 两个按钮:"章节选择" + "画廊" | 一个按钮:"故事进度" |
没有任何产品把这两个功能做成独立界面。结局天然属于章节,合并后:
- 一张卡片 = 章节缩略图 + 完成度百分比 + 解锁结局标签 + 开始按钮
- 减少操作步骤,一眼看完全局
- 视觉层级匹配叙事层级
**合并后界面:**
```
┌──────────────────────────────────────────┐
│ 故事进度总览 │
├──────────────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 第一章 │ │ 第二章 │ │ 第三章 │ │
│ │ [缩略图] │ │ [缩略图] │ │ [缩略图] │ │
│ │████ 43% │ │███░ 67% │ │███░ 80% │ │
│ │ │ │ │ │ │ │
│ │ 结局: │ │ 结局: │ │ 结局: │ │
│ │ ✅ 信任 │ │ — │ │ ✅ 继续 │ │
│ │ ✅ 独行 │ │ │ │ │ │
│ │ │ │ │ │ │ │
│ │ [▶ 开始] │ │ [▶ 开始] │ │ [▶ 开始] │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ 点击卡片主体 → 章节回顾 (ChapterRecap) │
│ 点击 ▶ 开始 → 进入该章节 │
│ [返回] │
└──────────────────────────────────────────┘
```
**数据依赖:** 无额外字段。`chapters` + `endings`(按 `chapterId` 归属)+ `visitedSceneIds` + BFS 完成度计算三条已足够。
**实现清单:**
- [ ] `src/components/StoryGallery.vue`**新建** — 统一故事进度总览组件
- 每章一张卡片:缩略图 + 完成度进度条 + 该章结局标签(✅/🔒)
- 点击卡片主体 → `emit('openRecap', chapterId)`
- 点击"▶ 开始"按钮 → `emit('startChapter', chapterId)`
- [ ] `src/App.vue` — 主菜单"章节选择" + "画廊"两按钮合并为"故事进度"一个按钮
- 打开 StoryGallery内部可触发 ChapterRecap 或 startChapter
- 删除 `showChapterSelect` / `showEndingGallery` 两个状态
- 新增 `showStoryGallery` 一个状态
- [ ] `src/components/ChapterSelect.vue`**删除**
- [ ] `src/components/EndingGallery.vue`**删除**
- [ ] `src/components/MainMenu.vue` — 移除 chapters/gallery 两个 emit合并为一个 `story` emit
- [ ] 验证TypeScript + Vite build 通过
```json
{
"dependencies": {