feat: UI polish, chapter select improvements, save system enhancements, roadmap update

This commit is contained in:
2026-06-09 15:19:53 +08:00
parent 2748b2c16f
commit 72e442f2c3
7 changed files with 206 additions and 18 deletions

View File

@@ -532,18 +532,41 @@ GainNode 的 ramp 目标值 = `Math.min(bgmVolume, bgmDuckLevel × bgmVolume)`
- [x] `public/scenes/demo.json``qte_success` / `qte_fail``skippable: false`
- [x] 验证TypeScript + Vite build 通过
### P10 键盘/手柄导航(待实现)
### P10a 键盘导航 — 方向键+确认键驱动全流程 ✅ 已完成 2026-06-09
目标:支持纯键盘或手柄操作整个游戏流程(选择选项、确认、QTE、菜单适配"躺沙发"体验
目标:支持纯键盘操作整个游戏流程(选项选择、确认、菜单),方向键/WASD 移动高亮、Enter/Space 确认、Esc 菜单
适配《底特律》《Telltale》级别的键盘交互体验。
**核心设计(对标业界):**
| 设计点 | 做法 |
|--------|------|
| **输入范围** | 完整接管:选项导航、菜单导航、存档界面、章节选择 |
| **视觉反馈** | 自定义高亮(发光边框/变色),和鼠标 hover 共用样式 |
| **自动检测** | 检测到 keydown → 标记 `inputMode='keyboard'` → 显示焦点环;鼠标移动 → 恢复 `inputMode='mouse'` |
| **QTE** | 本期不做 QTE 键位整合QTE 仍直接监听 keydown远期 P10b 处理 |
**按键映射:**
| 操作 | 按键 |
|------|------|
| 选项上移 | ↑ / W |
| 选项下移 | ↓ / S |
| 确认 | Enter / Space |
| 菜单 | Esc |
| 跳过 | 不变(按钮点击) |
| 全屏 | 不变(按钮点击) |
**实现清单:**
- [ ] `engine/systems/InputSystem.ts` — 统一输入抽象层:键盘(方向键/WASD+ 手柄Gamepad API+ 鼠标
- [ ] 选项高亮导航:↑↓ 移动焦点Enter/Space 确认,有视觉高亮指示器
- [ ] QTE 键位整合到 InputSystem目前 QTE 直接监听 `keydown`
- [ ] `src/components/ChoicePanel.vue` — 键盘焦点环样式(`focus-visible`
- [ ] `src/App.vue` — 菜单键Esc 打开/关闭菜单
- [ ] 验证:纯键盘完成一次完整流程开始→选择→QTE→存档→读档→结束、手柄连接时自动切换
- [x] `src/stores/gameStore.ts``inputMode` 状态mouse/keyboard+ `setInputMode` setter
- [x] `src/App.vue` — 全局 keydown 监听(方向键/Enter/Space/Tab → keyboard 模式Esc → 关闭菜单/章节mousemove → mouse 模式
- [x] `src/components/ChoicePanel.vue` — 选项出现时 auto-focus 第一项;↑↓ 键导航焦点Enter/Space 确认;`:focus-visible` 发光边框样式
- [x] `src/components/ChapterSelect.vue` — ←→ 键在章节卡片间导航跳过锁定章节Enter 选择Esc/Backspace 返回;`:focus-visible` 高亮
- [x] `src/components/SaveLoadMenu.vue``@keydown.escape` 关闭菜单
- [x] 验证:TypeScript + Vite build 通过
### P10b 手柄导航(远期 P10b— 见 FUTURE.md
### P11 多语言字幕(待实现)