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

2026-06-10 15:18:39 +08:00
parent e7ed52d89b
commit bf4b09f4e0
7 changed files with 292 additions and 56 deletions
--- a/src/App.vue
+++ b/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"
--- a/src/components/AccessibilitySettings.vue
+++ b/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)">
--- a/src/components/MainMenu.vue
+++ b/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>
--- a/src/components/PauseMenu.vue
+++ b/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>
--- a/src/locales/en.json
+++ b/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"
  }
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -17,6 +17,14 @@
    "empty": "空",
    "loading": "加载中...",
    "speed": "倍速",
+    "paused": "游戏暂停",
+    "resume": "继续",
+    "saveLoad": "存档 / 读档",
+    "settings": "设置",
+    "quitToMenu": "返回主菜单",
+    "pauseHint": "Esc = 继续",
+    "achievements": "成就",
+    "gallery": "画廊",
    "noAutoSave": "暂无自动存档",
    "autoSaveHint": "游戏会在每次场景切换时自动保存到槽位 0"
  }