docs: add P22 StoryGallery consolidation plan (chapters + gallery merge)
This commit is contained in:
59
ROADMAP.md
59
ROADMAP.md
@@ -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": {
|
||||
|
||||
Reference in New Issue
Block a user