feat: pause menu, accessibility improvements, main menu polish, roadmap update

ROADMAP.md

@@ -1062,7 +1062,83 @@ npx @electron/packager . MyGame --platform=win32 --arch=x64 --out=release
 - [x] `public/scenes/demo.json` — 配置 `introVideo` / `menuVideo`
 - [x] 验证：TypeScript + Vite build 通过
 
-## 依赖清单
+### P21 菜单系统重构 — 主菜单 + 暂停菜单 + 设置 + 游戏内顶栏 ✅ 已完成 2026-06-10
+
+目标：按照行业标准（Detroit / Dark Pictures / Telltale）重新整理四个菜单系统的设计和交互。
+
+**现状 vs 业界差距：**
+
+| 菜单 | 现状 | 业界标准 |
+|------|------|---------|
+| 主菜单 | 两行横排 7 个按钮，LangSwitch 悬浮 | 竖排单列 4-5 项，语言在设置里，背景视频可见 |
+| 游戏内顶栏 | 左侧 LangSwitch + PlaybackBar，右侧 3 个按钮 = 共 5 项 | 几乎无 HUD，仅角落菜单图标 |
+| ESC 行为 | 直接打开 SaveLoadMenu | 打开暂停菜单（存档是子项） |
+| 设置面板 | AccessibilitySettings 独立面板 | 设置中分类展示，**语言在设置里** |
+
+**四个菜单系统重新规划：**
+
+**1. 主菜单（MainMenu.vue 重设计）**
+
+```
+(menuVideo 循环播放作为背景，半透 overlay)
+
+              [ 新游戏 ]               ← 竖排，最大
+              [ 继续 ]                 ← 可选
+
+         章节选择  ·  成就  ·  画廊  ·  设置   ← 底部小字装饰行
+```
+
+- 改为竖排单列，视觉层次分明
+- LangSwitch 移除，语言挪到设置面板
+- 半透明 overlay，menuVideo 背景可透
+
+**2. 游戏内顶栏（App.vue 精简）**
+
+```
+左：跳过(条件) · 倍速(条<><E69DA1><EFBFBD>)           右：全屏 · [ ≡ ]
+```
+
+- LangSwitch 移除
+- 设置按钮移除，统一在 ≡ 暂停菜单内
+- ≡ 按钮基于现有的"菜单"/"设置"入口替代
+
+**3. ESC 暂停菜单（新建 `PauseMenu.vue`）**
+
+```
+(当前视频暂停，半透明遮罩覆盖)
+
+              [ 继续游戏 ]              ← 或按 Space/Esc
+              [ 存档 / 读档 ]
+              [ 设置 ]
+              [ 返回主菜单 ]
+```
+
+- 不再直接打开 SaveLoadMenu
+- 第一个 Esc 打开暂停菜单，再按 Esc 继续
+
+**4. 设置面板（AccessibilitySettings.vue 升级）**
+
+```
+             语言：中文 ▼  English       ← 顶部新增
+
+             字幕字号：20 ▼
+             字幕背景透明：0 ▼
+             QTE 时限放宽：关/开
+             QTE 按键简化：关/开
+             防误触延迟：开/关
+             可暂停：开/关
+```
+
+- 语言选择下拉移到这里
+
+**实现清单：**
+
+- [x] `src/components/PauseMenu.vue` — **新增** — ESC 暂停菜单：继续/存档/设置/返回主菜单 + 按 Esc 继续提示
+- [x] `src/components/MainMenu.vue` — 竖排单列设计：开始最大、继续次之、底部装饰行、移除 LangSwitch
+- [x] `src/components/AccessibilitySettings.vue` — 顶部新增语言选择下拉（中文/English）
+- [x] `src/App.vue` — 顶栏精简到跳过/倍速/全屏/≡；ESC 打开 PauseMenu 替代直接开 SaveLoadMenu；移除 LangSwitch
+- [x] `src/locales/zh.json` + `en.json` — 新增 8 个 PauseMenu 专用翻译 key
+- [x] 验证：TypeScript + Vite build 通过
 
 ```json
 {

src/App.vue

@@ -9,6 +9,7 @@ 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'
@@ -27,6 +28,7 @@ const videoElB = ref<HTMLVideoElement | null>(null)
 const loading = ref(true)
 const started = ref(false)
 const showMenu = ref(false)
+const showPauseMenu = ref(false)
 const showChapterSelect = ref(false)
 const showAchievements = ref(false)
 const showEndingGallery = ref(false)
@@ -192,9 +194,16 @@ function onGlobalKeydown(e: KeyboardEvent) {
       showChapterSelect.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) {
-      showMenu.value = true
-      refreshSaves()
+      showPauseMenu.value = true
     }
   }
 }
@@ -210,6 +219,28 @@ function togglePause() {
   }
 }
 
+function onPauseResume() {
+  showPauseMenu.value = false
+}
+
+function onPauseSaveLoad() {
+  showPauseMenu.value = false
+  showMenu.value = true
+  refreshSaves()
+}
+
+function onPauseSettings() {
+  showPauseMenu.value = false
+  store.setShowSettings(true)
+}
+
+function onQuitToMenu() {
+  showPauseMenu.value = false
+  store.setGameEnded(true)
+  engine.qteSystem.cancel()
+  engine.audioSystem.stop(2.0)
+}
+
 function onGlobalMouseMove() {
   store.setInputMode('mouse')
 }
@@ -275,18 +306,14 @@ init()
           <div v-if="showPromptToast" class="prompt-toast">{{ promptToast }}</div>
         </Transition>
         <div v-if="started && !store.gameEnded" class="top-bar">
-          <LangSwitch />
           <PlaybackBar
             :can-skip="canSkip"
             :current-speed="currentSpeed"
             @skip="handleSkip"
             @speed-change="handleSpeedChange"
           />
-          <button class="top-btn" @click="toggleFullscreen" :title="isFullscreen ? t('ui.exitFullscreen') : t('ui.fullscreen')">
-            {{ isFullscreen ? '⛶' : '⛶' }}
-          </button>
-          <button class="top-btn" @click="toggleMenu">{{ t('ui.menu') }}</button>
-          <button class="top-btn" @click="store.setShowSettings(true)">设置</button>
+          <button class="top-btn" @click="toggleFullscreen" :title="t('ui.fullscreen')">⛶</button>
+          <button class="top-btn" @click="showPauseMenu = true" :title="t('ui.menu')">≡</button>
         </div>
       </div>
       <MainMenu
@@ -303,6 +330,13 @@ init()
         @gallery="showEndingGallery = true"
         @settings="store.setShowSettings(true)"
       />
+      <PauseMenu
+        v-if="showPauseMenu"
+        @resume="onPauseResume"
+        @save-load="onPauseSaveLoad"
+        @settings="onPauseSettings"
+        @quit-to-menu="onQuitToMenu"
+      />
       <SaveLoadMenu
         v-if="showMenu"
         :saves="store.saves"

src/components/AccessibilitySettings.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'
+import { useI18n } from '@/composables/useI18n'
 
 const store = useGameStore()
+const { currentLang, setLang } = useI18n()
 
 const emit = defineEmits<{
   close: []
@@ -17,6 +19,13 @@ const bgAlphaOptions = [0, 0.3, 0.5, 0.7, 0.9]
       <h2 class="settings-title">设置</h2>
 
       <div class="settings-body">
+        <div class="setting-row">
+          <span class="setting-label">语言</span>
+          <select :value="currentLang" @change="setLang(($event.target as HTMLSelectElement).value as 'zh' | 'en')">
+            <option value="zh">中文</option>
+            <option value="en">English</option>
+          </select>
+        </div>
         <div class="setting-row">
           <span class="setting-label">字幕字号</span>
           <select :value="store.subFontSize" @change="store.setSubFontSize(+($event.target as HTMLSelectElement).value)">

src/components/MainMenu.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useI18n } from '@/composables/useI18n'
-import LangSwitch from '@/components/LangSwitch.vue'
 
 defineProps<{
   showResume: boolean
@@ -25,22 +24,20 @@ const { t } = useI18n()
 <template>
   <div class="main-menu-overlay">
     <div class="main-menu">
-      <div class="menu-top-bar">
-        <LangSwitch />
-      </div>
-
       <h1 v-if="isGameEnd" class="menu-title">{{ t('ui.gameEnd') }}</h1>
 
-      <div class="menu-row primary-row">
-        <button class="menu-btn primary" @click="emit('start')">{{ t('ui.start') }}</button>
-        <button v-if="showResume" class="menu-btn secondary" @click="emit('resume')">{{ t('ui.resume') }}</button>
-      </div>
+      <button class="menu-btn primary" @click="emit('start')">{{ t('ui.start') }}</button>
 
-      <div class="menu-row secondary-row">
-        <button v-if="showChapters" class="menu-btn tertiary" @click="emit('chapters')">{{ t('ui.chapters') }}</button>
-        <button v-if="showAchievements" class="menu-btn tertiary" @click="emit('achievements')">成就</button>
-        <button v-if="showGallery" class="menu-btn tertiary" @click="emit('gallery')">画廊</button>
-        <button class="menu-btn tertiary" @click="emit('settings')">设置</button>
+      <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="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>
   </div>
@@ -50,7 +47,7 @@ const { t } = useI18n()
 .main-menu-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.45);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -61,11 +58,7 @@ const { t } = useI18n()
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 20px;
-}
-
-.menu-top-bar {
-  margin-bottom: 8px;
+  gap: 14px;
 }
 
 .menu-title {
@@ -73,22 +66,17 @@ const { t } = useI18n()
   font-weight: 400;
   letter-spacing: 6px;
   color: #ddd;
-  margin-bottom: 8px;
-}
-
-.menu-row {
-  display: flex;
-  gap: 12px;
+  margin-bottom: 12px;
 }
 
 .menu-btn {
-  padding: 16px 40px;
+  padding: 16px 56px;
   font-size: 18px;
   color: #fff;
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 4px;
   cursor: pointer;
-  letter-spacing: 2px;
+  letter-spacing: 3px;
   transition: background 0.2s;
 }
 
@@ -98,9 +86,9 @@ const { t } = useI18n()
 
 .menu-btn.primary {
   background: rgba(255, 255, 255, 0.1);
-  padding: 18px 56px;
-  font-size: 22px;
-  letter-spacing: 4px;
+  padding: 20px 72px;
+  font-size: 24px;
+  letter-spacing: 6px;
 }
 
 .menu-btn.primary:hover {
@@ -108,28 +96,41 @@ const { t } = useI18n()
 }
 
 .menu-btn.secondary {
-  background: rgba(100, 200, 255, 0.08);
-  border-color: rgba(100, 200, 255, 0.3);
-  color: #8cf;
-  font-size: 16px;
-  padding: 16px 36px;
+  background: rgba(100, 200, 255, 0.06);
+  border-color: rgba(100, 200, 255, 0.2);
+  color: #7cb8e4;
+  font-size: 14px;
+  padding: 12px 40px;
+  letter-spacing: 2px;
 }
 
 .menu-btn.secondary:hover {
-  background: rgba(100, 200, 255, 0.15);
+  background: rgba(100, 200, 255, 0.12);
 }
 
-.menu-btn.tertiary {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: rgba(255, 255, 255, 0.15);
-  color: #aaa;
-  font-size: 14px;
-  padding: 12px 28px;
-  letter-spacing: 1px;
+.menu-sub-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 10px;
 }
 
-.menu-btn.tertiary:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: #ddd;
+.menu-sub {
+  background: none;
+  border: none;
+  color: #777;
+  font-size: 13px;
+  cursor: pointer;
+  padding: 4px 8px;
+  transition: color 0.15s;
+}
+
+.menu-sub:hover {
+  color: #ccc;
+}
+
+.sub-sep {
+  color: #444;
+  font-size: 12px;
 }
 </style>

src/components/PauseMenu.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { useI18n } from '@/composables/useI18n'
+
+const emit = defineEmits<{
+  resume: []
+  saveLoad: []
+  settings: []
+  quitToMenu: []
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div class="pause-overlay" @click.self="emit('resume')" @keydown.escape="emit('resume')">
+    <div class="pause-menu">
+      <h2 class="pause-title">{{ t('ui.paused') }}</h2>
+
+      <div class="pause-actions">
+        <button class="pause-btn primary" @click="emit('resume')">{{ t('ui.resume') }}</button>
+        <button class="pause-btn" @click="emit('saveLoad')">{{ t('ui.saveLoad') }}</button>
+        <button class="pause-btn" @click="emit('settings')">{{ t('ui.settings') }}</button>
+        <button class="pause-btn danger" @click="emit('quitToMenu')">{{ t('ui.quitToMenu') }}</button>
+      </div>
+
+      <div class="pause-hint">{{ t('ui.pauseHint') }}</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.pause-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+}
+
+.pause-menu {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.pause-title {
+  font-size: 32px;
+  font-weight: 400;
+  letter-spacing: 6px;
+  color: #ddd;
+}
+
+.pause-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 280px;
+}
+
+.pause-btn {
+  padding: 14px 32px;
+  font-size: 16px;
+  color: #ccc;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 4px;
+  cursor: pointer;
+  letter-spacing: 2px;
+  transition: background 0.15s, color 0.15s;
+}
+
+.pause-btn:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+}
+
+.pause-btn.primary {
+  color: #fff;
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.25);
+}
+
+.pause-btn.danger {
+  color: #e57373;
+  border-color: rgba(229, 115, 115, 0.2);
+  margin-top: 12px;
+}
+
+.pause-btn.danger:hover {
+  background: rgba(229, 115, 115, 0.1);
+}
+
+.pause-hint {
+  font-size: 12px;
+  color: #666;
+}
+</style>

src/locales/en.json

@@ -17,6 +17,14 @@
     "empty": "Empty",
     "loading": "Loading...",
     "speed": "Speed",
+    "paused": "Paused",
+    "resume": "Resume",
+    "saveLoad": "Save / Load",
+    "settings": "Settings",
+    "quitToMenu": "Back to Menu",
+    "pauseHint": "Esc = Resume",
+    "achievements": "Achievements",
+    "gallery": "Gallery",
     "noAutoSave": "No auto save yet",
     "autoSaveHint": "Game auto-saves to slot 0 at each scene change"
   }

src/locales/zh.json

@@ -17,6 +17,14 @@
     "empty": "空",
     "loading": "加载中...",
     "speed": "倍速",
+    "paused": "游戏暂停",
+    "resume": "继续",
+    "saveLoad": "存档 / 读档",
+    "settings": "设置",
+    "quitToMenu": "返回主菜单",
+    "pauseHint": "Esc = 继续",
+    "achievements": "成就",
+    "gallery": "画廊",
     "noAutoSave": "暂无自动存档",
     "autoSaveHint": "游戏会在每次场景切换时自动保存到槽位 0"
   }