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

This commit is contained in:
2026-06-10 15:18:39 +08:00
parent e7ed52d89b
commit bf4b09f4e0
7 changed files with 292 additions and 56 deletions

View File

@@ -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 移除,语言挪到设置面板
- 半透明 overlaymenuVideo 背景可透
**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
{