feat: P22 merge chapter select and gallery into StoryGallery, i18n updates

2026-06-10 16:01:26 +08:00
parent 0dec8a2376
commit d2dae38f05
8 changed files with 461 additions and 440 deletions
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -1140,9 +1140,16 @@ 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 故事进度总览 — 章节选择 + 画廊合并（待实现）
+### P22 故事进度总览 — 章节选择 + 画廊合并 ✅ 已完成 2026-06-10

-目标：对标 Detroit: Become Human，将章节选择和结局画廊合并为"故事进度总览"一张视图。
+目标：对标 Detroit: Become Human，将章节选择和结局画廊合并为一张"故事进度总览"视图。
+
+**优化设计（两处改进）：**
+
+| 优化 | 说明 |
+|------|------|
+| **A: 去掉 `chapterId`** | 结局归属哪章不用显式声明。StoryGallery 通过 BFS 判断 `ending.sceneId` 是否在章节可达范围内，自动推导。零类型改动 |
+| **B: 内嵌回顾** | 点击章节卡片 → 卡片展开内嵌回顾区域（同面板内显示场景列表+进度条），不再弹出独立的 ChapterRecap 弹窗。避免主菜单→故事进度→章节回顾三层模态框 |

 **现状 vs 业界对比：**

@@ -1152,12 +1159,7 @@ npx @electron/packager . MyGame --platform=win32 --arch=x64 --out=release
 | 结局画廊 | `EndingGallery.vue` — 独立缩略图网格 | 结局归属章节，不独立展示 |
 | 主菜单入口 | 两个按钮："章节选择" + "画廊" | 一个按钮："故事进度" |

-没有任何产品把这两个功能做成独立界面。结局天然属于章节，合并后：
- 一张卡片 = 章节缩略图 + 完成度百分比 + 解锁结局标签 + 开始按钮
- 减少操作步骤，一眼看完全局
- 视觉层级匹配叙事层级
-
-**合并后界面：**
+任何产品都不会把这两个功能做成独立界面。合并后：

 ```
 ┌──────────────────────────────────────────┐
@@ -1171,33 +1173,37 @@ npx @electron/packager . MyGame --platform=win32 --arch=x64 --out=release
 │   │          │  │          │  │          │ │
 │   │ 结局:    │  │ 结局:    │  │ 结局:    │ │
 │   │ ✅ 信任  │  │ —        │  │ ✅ 继续   │ │
-│   │ ✅ 独行  │  │          │  │          │ │
+│   │ 🔒 独行  │  │          │  │          │ │
 │   │          │  │          │  │          │ │
 │   │ [▶ 开始] │  │ [▶ 开始] │  │ [▶ 开始] │ │
 │   └─────────┘  └─────────┘  └─────────┘ │
 │                                          │
-│  点击卡片主体 → 章节回顾 (ChapterRecap)    │
+│  点击卡片主体 → 卡片展开内嵌回顾区域       │
 │  点击 ▶ 开始 → 进入该章节                  │
 │                       [返回]             │
 └──────────────────────────────────────────┘
 ```

-**数据依赖：** 无额外字段。`chapters` + `endings`（按 `chapterId` 归属）+ `visitedSceneIds` + BFS 完成度计算三条已足够。
+埋入展示后，点击卡片主体 → 卡片区域自动展开，内嵌显示 BFS 可达的场景列表（✅ visited / ⬜ unvisited + 条件提示），无需额外弹出 ChapterRecap 弹窗。
+
+**数据依赖：** `chapters` + `endings`（按 BFS 自动推导归属） + `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 通过
+- [x] `src/components/StoryGallery.vue` — **新建** — 统一故事进度总览组件。BFS 自动推导结局归属；点击卡片内嵌展开场景列表
+- [x] `src/components/ChapterSelect.vue` — **删除**
+- [x] `src/components/EndingGallery.vue` — **删除**
+- [x] `src/components/ChapterRecap.vue` — 逻辑内嵌到 StoryGallery（场景列表 + 完成度 + 条件提示）
+- [x] `src/components/MainMenu.vue` — chapters/gallery 两 emit 合并为 `story` emit
+- [x] `src/App.vue` — 主菜单只显示"故事进度"一个按钮；删除旧两组件引用
+- [x] `src/locales/zh.json` + `en.json` — 新增 `story` key
+- [x] 验证：TypeScript + Vite build 通过
+- [x] 验证：主菜单只显示一个"故事进度"按钮，不再有独立的"章节选择"和"画廊"
+- [x] 验证：StoryGallery 中每章卡片正确显示完成度百分比
+- [x] 验证：结局标签按 BFS 自动归属到正确的章节卡片下（✅/🔒）
+- [x] 验证：点击卡片主体 → 内嵌展开场景列表（✅ visited / ⬜ unvisited + 条件提示），不额外弹窗
+- [x] 验证：点击 ▶ 开始 → 正确跳转到该章节
+- [x] 验证：已删除 ChapterSelect.vue / EndingGallery.vue 后项目无编译残留

 ```json
 {
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,15 +6,13 @@ import QTEOverlay from '@/components/QTEOverlay.vue'
 import Subtitles from '@/components/Subtitles.vue'
 import HotspotLayer from '@/components/HotspotLayer.vue'
 import SaveLoadMenu from '@/components/SaveLoadMenu.vue'
-import ChapterSelect from '@/components/ChapterSelect.vue'
 import PlaybackBar from '@/components/PlaybackBar.vue'
 import MainMenu from '@/components/MainMenu.vue'
 import PauseMenu from '@/components/PauseMenu.vue'
 import AchievementToast from '@/components/AchievementToast.vue'
 import AchievementPanel from '@/components/AchievementPanel.vue'
-import EndingGallery from '@/components/EndingGallery.vue'
-import ChapterRecap from '@/components/ChapterRecap.vue'
 import AccessibilitySettings from '@/components/AccessibilitySettings.vue'
+import StoryGallery from '@/components/StoryGallery.vue'
 import { useGameEngine } from '@/composables/useGameEngine'
 import { useGameStore } from '@/stores/gameStore'
 import { useFullscreen } from '@/composables/useFullscreen'
@@ -29,10 +27,8 @@ const loading = ref(true)
 const started = ref(false)
 const showMenu = ref(false)
 const showPauseMenu = ref(false)
-const showChapterSelect = ref(false)
+const showStoryGallery = ref(false)
 const showAchievements = ref(false)
-const showEndingGallery = ref(false)
-const recapChapterId = ref<string | null>(null)
 const hasAutoSave = ref(false)
 const currentSpeed = ref(1)
 const canSkip = ref(false)
@@ -117,8 +113,8 @@ watch([() => store.qteTimeRelax, () => store.qteSingleKey], () => {

 watch(
  () => [
-    showPauseMenu.value, showMenu.value, showChapterSelect.value,
-    showAchievements.value, showEndingGallery.value, recapChapterId.value,
+    showPauseMenu.value, showMenu.value,
+    showAchievements.value, showStoryGallery.value,
    paused.value, store.showSettings,
  ],
  () => { resetTopBarTimer() },
@@ -155,14 +151,9 @@ async function onLoad(slot: number) {
  showMenu.value = false
 }

-function openChapterSelect() {
-  showMenu.value = false
-  showChapterSelect.value = true
-}
-
 async function onStartChapter(chapterId: string) {
-  showChapterSelect.value = false
  started.value = true
+  applyQteParams()
  startChapter(chapterId)
 }

@@ -201,18 +192,14 @@ function onGlobalKeydown(e: KeyboardEvent) {
  if (key === 'Escape') {
    if (store.showSettings) {
      store.showSettings = false
-    } else if (showChapterSelect.value) {
-      showChapterSelect.value = false
+    } else if (showStoryGallery.value) {
+      showStoryGallery.value = false
    } else if (showMenu.value) {
      showMenu.value = false
    } else if (showPauseMenu.value) {
      showPauseMenu.value = false
    } else if (showAchievements.value) {
      showAchievements.value = false
-    } else if (showEndingGallery.value) {
-      showEndingGallery.value = false
-    } else if (recapChapterId.value) {
-      recapChapterId.value = null
    } else if (started.value && !store.gameEnded) {
      showPauseMenu.value = true
    }
@@ -258,9 +245,8 @@ function onGlobalMouseMove() {
 }

 function anyOverlayOpen(): boolean {
-  return showPauseMenu.value || showMenu.value || showChapterSelect.value
-    || showAchievements.value || showEndingGallery.value || !!recapChapterId.value
-    || paused.value || store.showSettings
+  return showPauseMenu.value || showMenu.value || showStoryGallery.value
+    || showAchievements.value || paused.value || store.showSettings
 }

 function resetTopBarTimer() {
@@ -346,15 +332,13 @@ init()
      <MainMenu
        v-if="!started || store.gameEnded"
        :show-resume="!store.gameEnded && hasAutoSave"
-        :show-chapters="store.chapters.length > 0"
+        :show-story="store.chapters.length > 0"
        :show-achievements="store.achievementDefs.length > 0"
-        :show-gallery="store.endings.length > 0"
        :is-game-end="store.gameEnded"
        @start="handleStart"
        @resume="handleResume"
-        @chapters="openChapterSelect"
+        @story="showStoryGallery = true"
        @achievements="showAchievements = true"
-        @gallery="showEndingGallery = true"
        @settings="store.setShowSettings(true)"
      />
      <PauseMenu
@@ -371,12 +355,15 @@ init()
        @load="onLoad"
        @close="showMenu = false"
      />
-      <ChapterSelect
-        v-if="showChapterSelect"
+      <StoryGallery
+        v-if="showStoryGallery"
        :chapters="store.chapters"
-        :unlocked-ids="store.unlockedChapterIds"
-        @select="onStartChapter"
-        @back="showChapterSelect = false"
+        :endings="store.endings"
+        :scenes="engine.sceneManager.getScenes()"
+        :visited-ids="store.visitedSceneIds"
+        :unlocked-chapter-ids="store.unlockedChapterIds"
+        @start-chapter="(chId: string) => { showStoryGallery = false; onStartChapter(chId) }"
+        @close="showStoryGallery = false"
      />
      <AchievementPanel
        v-if="showAchievements"
@@ -384,20 +371,6 @@ init()
        :unlocked-ids="store.unlockedAchievementIds"
        @close="showAchievements = false"
      />
-      <EndingGallery
-        v-if="showEndingGallery"
-        :endings="store.endings"
-        :visited-ids="store.visitedSceneIds"
-        @close="showEndingGallery = false"
-        @select-chapter="(chId: string) => { showEndingGallery = false; recapChapterId = chId }"
-      />
-      <ChapterRecap
-        v-if="recapChapterId"
-        :chapter="store.chapters.find(c => c.id === recapChapterId)!"
-        :scenes="engine.sceneManager.getScenes()"
-        :visited-ids="store.visitedSceneIds"
-        @close="recapChapterId = null"
-      />
      <AccessibilitySettings
        v-if="store.showSettings"
        @close="store.setShowSettings(false)"
--- a/src/components/ChapterSelect.vue
+++ b/src/components/ChapterSelect.vue
@@ -1,209 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, nextTick } from 'vue'
-import type { ChapterInfo } from '@engine/types'
-import { useI18n } from '@/composables/useI18n'
-
-const props = defineProps<{
-  chapters: ChapterInfo[]
-  unlockedIds: Set<string>
-}>()
-
-const emit = defineEmits<{
-  select: [chapterId: string]
-  back: []
-}>()
-
-const { t } = useI18n()
-const focusIdx = ref(0)
-const cardRefs = ref<(HTMLDivElement | null)[]>([])
-
-function setRef(el: HTMLDivElement | null, i: number) {
-  cardRefs.value[i] = el
-}
-
-// when shown, focus first unlocked
-watch(() => props.chapters.length, async (len) => {
-  if (len > 0) {
-    const first = props.chapters.findIndex(ch => props.unlockedIds.has(ch.id))
-    focusIdx.value = first >= 0 ? first : 0
-    await nextTick()
-    cardRefs.value[focusIdx.value]?.focus()
-  }
-})
-
-function onKeydown(e: KeyboardEvent, index: number) {
-  if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
-    e.preventDefault()
-    const dir = e.key === 'ArrowRight' ? 1 : -1
-    const len = props.chapters.length
-    let next = (index + dir + len) % len
-    // skip locked ones
-    let tries = 0
-    while (!props.unlockedIds.has(props.chapters[next].id) && tries < len) {
-      next = (next + dir + len) % len
-      tries++
-    }
-    focusIdx.value = next
-    cardRefs.value[next]?.focus()
-  }
-  if (e.key === 'Enter' || e.key === ' ') {
-    e.preventDefault()
-    if (props.unlockedIds.has(props.chapters[index].id)) {
-      emit('select', props.chapters[index].id)
-    }
-  }
-  if (e.key === 'Escape' || e.key === 'Backspace') {
-    e.preventDefault()
-    emit('back')
-  }
-}
-</script>
-
-<template>
-  <div class="chapter-overlay" @keydown="(e: KeyboardEvent) => { if (e.key === 'Escape' || e.key === 'Backspace') { e.preventDefault(); emit('back'); } }">
-    <div class="chapter-panel">
-      <h2 class="chapter-title">{{ t('ui.chapters') }}</h2>
-
-      <div class="chapter-grid">
-        <div
-          v-for="(ch, i) in chapters"
-          :key="ch.id"
-          :ref="(el: any) => setRef(el, i)"
-          class="chapter-card"
-          :class="{ locked: !unlockedIds.has(ch.id) }"
-          :tabindex="unlockedIds.has(ch.id) ? 0 : -1"
-          @click="unlockedIds.has(ch.id) && emit('select', ch.id)"
-          @keydown="onKeydown($event, i)"
-        >
-          <div class="chapter-thumb">
-            <img v-if="ch.thumbnail" :src="ch.thumbnail" class="thumb-img" />
-            <div v-else class="thumb-placeholder">?</div>
-          </div>
-          <div class="chapter-label">{{ ch.label }}</div>
-          <div v-if="!unlockedIds.has(ch.id)" class="lock-icon">🔒</div>
-        </div>
-      </div>
-
-      <button class="back-btn" @click="emit('back')">{{ t('ui.back') }} (Esc)</button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.chapter-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.88);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 200;
-}
-
-.chapter-panel {
-  background: #1a1a2e;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 10px;
-  padding: 36px 40px;
-  min-width: 520px;
-  max-width: 700px;
-}
-
-.chapter-title {
-  text-align: center;
-  font-size: 22px;
-  font-weight: 400;
-  color: #ddd;
-  letter-spacing: 3px;
-  margin-bottom: 28px;
-}
-
-.chapter-grid {
-  display: flex;
-  gap: 16px;
-  justify-content: center;
-}
-
-.chapter-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-  padding: 16px;
-  background: rgba(255, 255, 255, 0.04);
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background 0.2s, border-color 0.2s, transform 0.15s;
-  width: 150px;
-  outline: none;
-}
-
-.chapter-card:hover:not(.locked) {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: rgba(255, 255, 255, 0.25);
-  transform: translateY(-2px);
-}
-
-.chapter-card:focus-visible {
-  background: rgba(255, 255, 255, 0.12);
-  border-color: rgba(255, 255, 255, 0.4);
-  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
-  transform: translateY(-2px);
-}
-
-.chapter-card.locked {
-  opacity: 0.4;
-  cursor: default;
-}
-
-.chapter-thumb {
-  width: 100px;
-  height: 56px;
-  background: rgba(0, 0, 0, 0.4);
-  border-radius: 4px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.thumb-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.thumb-placeholder {
-  font-size: 24px;
-  color: #555;
-}
-
-.chapter-label {
-  font-size: 13px;
-  color: #ccc;
-  text-align: center;
-}
-
-.lock-icon {
-  font-size: 14px;
-}
-
-.back-btn {
-  display: block;
-  margin: 24px auto 0;
-  padding: 10px 36px;
-  font-size: 14px;
-  color: #888;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s;
-}
-
-.back-btn:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #ccc;
-}
-</style>
--- a/src/components/EndingGallery.vue
+++ b/src/components/EndingGallery.vue
@@ -1,154 +0,0 @@
-<script setup lang="ts">
-import type { EndingDef } from '@engine/types'
-
-defineProps<{
-  endings: EndingDef[]
-  visitedIds: Set<string>
-}>()
-
-const emit = defineEmits<{
-  close: []
-  selectChapter: [chapterId: string]
-}>()
-
-function isUnlocked(ending: EndingDef, visitedIds: Set<string>): boolean {
-  return visitedIds.has(ending.sceneId)
-}
-</script>
-
-<template>
-  <div class="ending-overlay" @click.self="emit('close')" @keydown.escape="emit('close')">
-    <div class="ending-panel">
-      <h2 class="ending-title">结局画廊</h2>
-
-      <div class="ending-grid">
-        <div
-          v-for="end in endings"
-          :key="end.id"
-          class="ending-card"
-          :class="{ locked: !isUnlocked(end, visitedIds), clickable: isUnlocked(end, visitedIds) && !!end.chapterId }"
-          @click="isUnlocked(end, visitedIds) && end.chapterId && emit('selectChapter', end.chapterId)"
-        >
-          <div class="ending-thumb">
-            <img v-if="end.thumbnail" :src="end.thumbnail" class="thumb-img" />
-            <div v-else class="thumb-placeholder">?</div>
-          </div>
-          <div class="ending-label">{{ isUnlocked(end, visitedIds) ? end.label : '???' }}</div>
-          <div v-if="!isUnlocked(end, visitedIds)" class="lock-icon">🔒</div>
-        </div>
-      </div>
-
-      <button class="end-close" @click="emit('close')">关闭</button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.ending-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.88);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 200;
-}
-
-.ending-panel {
-  background: #1a1a2e;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 10px;
-  padding: 36px 40px;
-  min-width: 400px;
-  max-width: 560px;
-}
-
-.ending-title {
-  text-align: center;
-  font-size: 22px;
-  font-weight: 400;
-  color: #ddd;
-  letter-spacing: 3px;
-  margin-bottom: 28px;
-}
-
-.ending-grid {
-  display: flex;
-  gap: 16px;
-  justify-content: center;
-  flex-wrap: wrap;
-}
-
-.ending-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-  width: 140px;
-}
-
-.ending-card.locked {
-  opacity: 0.4;
-}
-
-.ending-card.clickable {
-  cursor: pointer;
-}
-
-.ending-card.clickable:hover {
-  opacity: 0.85;
-  transform: scale(1.05);
-  transition: transform 0.15s ease;
-}
-
-.ending-thumb {
-  width: 120px;
-  height: 68px;
-  background: rgba(0, 0, 0, 0.4);
-  border-radius: 6px;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.thumb-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.thumb-placeholder {
-  font-size: 28px;
-  color: #555;
-}
-
-.ending-label {
-  font-size: 13px;
-  color: #ccc;
-  text-align: center;
-}
-
-.lock-icon {
-  font-size: 14px;
-  margin-top: -6px;
-}
-
-.end-close {
-  display: block;
-  margin: 24px auto 0;
-  padding: 10px 36px;
-  font-size: 14px;
-  color: #888;
-  background: rgba(255, 255, 255, 0.05);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s;
-}
-
-.end-close:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #ccc;
-}
-</style>
--- a/src/components/MainMenu.vue
+++ b/src/components/MainMenu.vue
@@ -3,18 +3,16 @@ import { useI18n } from '@/composables/useI18n'

 defineProps<{
  showResume: boolean
-  showChapters: boolean
+  showStory: boolean
  showAchievements: boolean
-  showGallery: boolean
  isGameEnd: boolean
 }>()

 const emit = defineEmits<{
  start: []
  resume: []
-  chapters: []
+  story: []
  achievements: []
-  gallery: []
  settings: []
 }>()

@@ -31,12 +29,10 @@ const { t } = useI18n()
      <button v-if="showResume" class="menu-btn secondary" @click="emit('resume')">{{ t('ui.resume') }}</button>

      <div class="menu-sub-row">
-        <button v-if="showChapters" class="menu-sub" @click="emit('chapters')">{{ t('ui.chapters') }}</button>
-        <span v-if="showChapters" class="sub-sep">·</span>
+        <button v-if="showStory" class="menu-sub" @click="emit('story')">{{ t('ui.story') }}</button>
+        <span v-if="showStory" class="sub-sep">·</span>
        <button v-if="showAchievements" class="menu-sub" @click="emit('achievements')">{{ t('ui.achievements') }}</button>
        <span v-if="showAchievements" class="sub-sep">·</span>
-        <button v-if="showGallery" class="menu-sub" @click="emit('gallery')">{{ t('ui.gallery') }}</button>
-        <span v-if="showGallery" class="sub-sep">·</span>
        <button class="menu-sub" @click="emit('settings')">{{ t('ui.settings') }}</button>
      </div>
    </div>
--- a/src/components/StoryGallery.vue
+++ b/src/components/StoryGallery.vue
@@ -0,0 +1,407 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type { ChapterInfo, SceneNode, EndingDef } from '@engine/types'
+
+const props = defineProps<{
+  chapters: ChapterInfo[]
+  endings: EndingDef[]
+  scenes: Record<string, SceneNode>
+  visitedIds: Set<string>
+  unlockedChapterIds: Set<string>
+}>()
+
+const emit = defineEmits<{
+  startChapter: [chapterId: string]
+  close: []
+}>()
+
+const expandedChapterId = ref<string | null>(null)
+
+function collectReachable(startId: string): Set<string> {
+  const visited = new Set<string>()
+  const queue = [startId]
+  while (queue.length > 0) {
+    const id = queue.shift()!
+    if (visited.has(id)) continue
+    const scene = props.scenes[id]
+    if (!scene) continue
+    visited.add(id)
+    if (scene.choices) {
+      for (const c of scene.choices) {
+        if (c.targetScene && !visited.has(c.targetScene)) queue.push(c.targetScene)
+      }
+    }
+    if (scene.nextScene && !visited.has(scene.nextScene)) queue.push(scene.nextScene)
+    if (scene.qte) {
+      if (scene.qte.successScene && !visited.has(scene.qte.successScene)) queue.push(scene.qte.successScene)
+      if (scene.qte.failScene && !visited.has(scene.qte.failScene)) queue.push(scene.qte.failScene)
+    }
+    if (scene.hotspots) {
+      for (const h of scene.hotspots) {
+        if (h.targetScene && !visited.has(h.targetScene)) queue.push(h.targetScene)
+      }
+    }
+  }
+  return visited
+}
+
+// For each chapter, precompute reachable set
+const chapterReachable = computed(() => {
+  const result: Record<string, Set<string>> = {}
+  for (const ch of props.chapters) {
+    result[ch.id] = collectReachable(ch.startScene)
+  }
+  return result
+})
+
+// Which endings belong to each chapter (BFS-based, no chapterId needed)
+const chapterEndings = computed(() => {
+  const result: Record<string, EndingDef[]> = {}
+  for (const ch of props.chapters) {
+    result[ch.id] = props.endings.filter((e) => chapterReachable.value[ch.id]?.has(e.sceneId))
+  }
+  return result
+})
+
+function endingStatus(endingId: string) {
+  return props.visitedIds.has(props.endings.find(e => e.id === endingId)?.sceneId ?? '')
+}
+
+function chapterProgress(chapterId: string) {
+  const reachable = chapterReachable.value[chapterId]
+  if (!reachable || reachable.size === 0) return { count: 0, total: 0, pct: 0 }
+  let count = 0
+  for (const id of reachable) {
+    if (props.visitedIds.has(id)) count++
+  }
+  return { count, total: reachable.size, pct: Math.round((count / reachable.size) * 100) }
+}
+
+function sceneListForChapter(chapterId: string) {
+  const reachable = chapterReachable.value[chapterId]
+  if (!reachable) return []
+  return [...reachable].map((id) => {
+    const scene = props.scenes[id]
+    const isVisited = props.visitedIds.has(id)
+    let hint = ''
+    if (!isVisited) {
+      for (const [, src] of Object.entries(props.scenes)) {
+        if (src.choices) {
+          for (const c of src.choices) {
+            if (c.targetScene === id && c.conditions && c.conditions.length > 0) {
+              hint = `${c.conditions[0].variable} ${c.conditions[0].op} ${c.conditions[0].value}`
+              break
+            }
+          }
+        }
+        if (src.hotspots) {
+          for (const h of src.hotspots) {
+            if (h.targetScene === id && h.conditions && h.conditions.length > 0) {
+              hint = `${h.conditions[0].variable} ${h.conditions[0].op} ${h.conditions[0].value}`
+              break
+            }
+          }
+        }
+        if (hint) break
+      }
+    }
+    return { id, label: scene?.id ?? id, isVisited, hint }
+  })
+}
+
+function toggleExpand(chapterId: string) {
+  expandedChapterId.value = expandedChapterId.value === chapterId ? null : chapterId
+}
+</script>
+
+<template>
+  <div class="story-overlay" @click.self="emit('close')" @keydown.escape="emit('close')">
+    <div class="story-panel">
+      <h2 class="story-title">故事进度</h2>
+
+      <div class="story-grid">
+        <div
+          v-for="ch in chapters"
+          :key="ch.id"
+          class="story-card"
+          :class="{ locked: !unlockedChapterIds.has(ch.id), expanded: expandedChapterId === ch.id }"
+        >
+          <div class="card-main" @click="unlockedChapterIds.has(ch.id) && toggleExpand(ch.id)">
+            <div class="card-thumb">
+              <img v-if="ch.thumbnail" :src="ch.thumbnail" class="thumb-img" />
+              <div v-else class="thumb-placeholder">?</div>
+            </div>
+            <div class="card-label">{{ ch.label }}</div>
+
+            <div class="card-progress" v-if="unlockedChapterIds.has(ch.id)">
+              <div class="mini-progress-bar">
+                <div class="mini-progress-fill" :style="{ width: chapterProgress(ch.id).pct + '%' }"></div>
+              </div>
+              <div class="mini-progress-text">{{ chapterProgress(ch.id).pct }}%</div>
+            </div>
+
+            <div class="card-endings" v-if="chapterEndings[ch.id]?.length">
+              <span
+                v-for="end in chapterEndings[ch.id]"
+                :key="end.id"
+                class="ending-tag"
+                :class="{ unlocked: endingStatus(end.id) }"
+              >{{ endingStatus(end.id) ? '✅' : '🔒' }} {{ end.label }}</span>
+            </div>
+
+            <button
+              v-if="unlockedChapterIds.has(ch.id)"
+              class="card-start-btn"
+              @click.stop="emit('startChapter', ch.id)"
+            >▶ 开始</button>
+          </div>
+
+          <div class="card-recap" v-if="expandedChapterId === ch.id">
+            <div class="recap-scene-list">
+              <div
+                v-for="item in sceneListForChapter(ch.id)"
+                :key="item.id"
+                class="recap-item"
+                :class="{ visited: item.isVisited }"
+              >
+                <span class="recap-icon">{{ item.isVisited ? '✅' : '⬜' }}</span>
+                <span class="recap-label">{{ item.label }}</span>
+                <span v-if="!item.isVisited && item.hint" class="recap-hint">🔒 {{ item.hint }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <button class="story-close" @click="emit('close')">关闭</button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.story-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.88);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+}
+
+.story-panel {
+  background: #1a1a2e;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 10px;
+  padding: 36px 40px;
+  max-width: 800px;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.story-title {
+  text-align: center;
+  font-size: 22px;
+  font-weight: 400;
+  color: #ddd;
+  letter-spacing: 3px;
+  margin-bottom: 24px;
+}
+
+.story-grid {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  overflow-y: auto;
+  padding-right: 8px;
+}
+
+.story-card {
+  display: flex;
+  flex-direction: column;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  width: 200px;
+  overflow: hidden;
+  transition: border-color 0.2s;
+}
+
+.story-card.locked {
+  opacity: 0.4;
+}
+
+.story-card.expanded {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.card-main {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 14px;
+  cursor: pointer;
+}
+
+.story-card.locked .card-main {
+  cursor: default;
+}
+
+.card-thumb {
+  width: 140px;
+  height: 78px;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 6px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.thumb-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumb-placeholder {
+  font-size: 28px;
+  color: #555;
+}
+
+.card-label {
+  font-size: 14px;
+  color: #ddd;
+  text-align: center;
+}
+
+.card-progress {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.mini-progress-bar {
+  flex: 1;
+  height: 4px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.mini-progress-fill {
+  height: 100%;
+  background: #4caf50;
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+
+.mini-progress-text {
+  font-size: 11px;
+  color: #888;
+  white-space: nowrap;
+}
+
+.card-endings {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  width: 100%;
+}
+
+.ending-tag {
+  font-size: 11px;
+  color: #666;
+}
+
+.ending-tag.unlocked {
+  color: #ccc;
+}
+
+.card-start-btn {
+  padding: 6px 20px;
+  margin-top: 4px;
+  font-size: 12px;
+  color: #8cf;
+  background: rgba(100, 200, 255, 0.08);
+  border: 1px solid rgba(100, 200, 255, 0.2);
+  border-radius: 3px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.card-start-btn:hover {
+  background: rgba(100, 200, 255, 0.15);
+}
+
+.card-recap {
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  padding: 12px 14px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.recap-scene-list {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.recap-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 6px;
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 3px;
+  font-size: 11px;
+}
+
+.recap-item.visited {
+  background: rgba(76, 175, 80, 0.06);
+}
+
+.recap-icon {
+  font-size: 11px;
+  flex-shrink: 0;
+}
+
+.recap-label {
+  color: #aaa;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.recap-item.visited .recap-label {
+  color: #ddd;
+}
+
+.recap-hint {
+  font-size: 10px;
+  color: #ff9800;
+  white-space: nowrap;
+}
+
+.story-close {
+  margin-top: 20px;
+  padding: 10px 36px;
+  font-size: 14px;
+  color: #888;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+  align-self: center;
+}
+
+.story-close:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ccc;
+}
+</style>
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -25,6 +25,7 @@
    "pauseHint": "Esc = Resume",
    "achievements": "Achievements",
    "gallery": "Gallery",
+    "story": "Story Progress",
    "noAutoSave": "No auto save yet",
    "autoSaveHint": "Game auto-saves to slot 0 at each scene change",
    "language": "Language",
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -25,6 +25,7 @@
    "pauseHint": "Esc = 继续",
    "achievements": "成就",
    "gallery": "画廊",
+    "story": "故事进度",
    "noAutoSave": "暂无自动存档",
    "autoSaveHint": "游戏会在每次场景切换时自动保存到槽位 0",
    "language": "语言",