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

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"