From 319a3799216dbfe521be01f787a1a08f43d1122b Mon Sep 17 00:00:00 2001
From: cocos02 <cocos02@163.com>
Date: Sun, 7 Jun 2026 19:35:14 +0800
Subject: [PATCH] feat: P2 - QTE system, subtitles, save thumbnails

- QTESystem: trigger detection via timeupdate, multi-key matching, timeout handling
- QTEOverlay: SVG countdown ring + key prompts + success/fail animation
- Engine: integrate QTE (timeupdate check, conditional branching, effect application)
- Subtitles: WebVTT parsing + synchronized subtitle rendering
- GamePlayer: overlay QTE and subtitle components
- SaveSystem: DB v2 with thumbnail field, canvas snapshot at 320x180 JPEG
- SaveLoadMenu: thumbnail preview for save slots
- VideoManager: getActiveVideoElement() for canvas capture
- App.vue: QTE/subtitle integration, thumbnail capture on save
- stores: QTE state management, save list with thumbnails
- demo.json: QTE scene (right_door), subtitles, new event types
- ROADMAP: mark P2 as completed
---
 ROADMAP.md                       |  18 ++--
 engine/core/Engine.ts            |  62 +++++++++++-
 engine/core/VideoManager.ts      |   4 +
 engine/systems/QTESystem.ts      |  75 +++++++++++++++
 engine/systems/SaveSystem.ts     |  12 ++-
 engine/types.ts                  |   2 +
 public/scenes/demo.json          |  34 ++++++-
 public/subtitles/intro.vtt       |   7 ++
 public/subtitles/left_door.vtt   |   7 ++
 public/subtitles/stay.vtt        |   4 +
 public/videos/qte_fail.mp4       | Bin 0 -> 12805 bytes
 public/videos/qte_success.mp4    | Bin 0 -> 17920 bytes
 src/App.vue                      |  15 +++
 src/components/QTEOverlay.vue    | 158 +++++++++++++++++++++++++++++++
 src/components/SaveLoadMenu.vue  |  91 ++++++++++--------
 src/components/Subtitles.vue     | 115 ++++++++++++++++++++++
 src/composables/useGameEngine.ts |  37 +++++++-
 src/stores/gameStore.ts          |  37 +++++++-
 18 files changed, 625 insertions(+), 53 deletions(-)
 create mode 100644 engine/systems/QTESystem.ts
 create mode 100644 public/subtitles/intro.vtt
 create mode 100644 public/subtitles/left_door.vtt
 create mode 100644 public/subtitles/stay.vtt
 create mode 100644 public/videos/qte_fail.mp4
 create mode 100644 public/videos/qte_success.mp4
 create mode 100644 src/components/QTEOverlay.vue
 create mode 100644 src/components/Subtitles.vue

diff --git a/ROADMAP.md b/ROADMAP.md
index d8fb30e..bc7ae73 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -154,14 +154,18 @@ interface SaveData {
 - [x] `src/App.vue` — 整合 SaveLoadMenu、双 video、计时器
 - [x] 验证：条件分支走通，存档读档正常，视频切换交叉淡化
 
-### P2 进阶 — QTE + 字幕 + 多存档槽（1 周）
+### P2 进阶 — QTE + 字幕 + 多存档槽（1 周）✅ 已完成 2026-06-07
 
-- [ ] `engine/systems/QTESystem.ts` — QTE 触发、键盘监听、超时判定
-- [ ] `src/components/QTEOverlay.vue` — QTE 视觉遮罩（按键提示 + 倒计时环）
-- [ ] `src/components/Subtitles.vue` — WebVTT 解析 + 字幕渲染
-- [ ] 多存档槽位 + 存档缩略图（canvas 截图当前视频帧）
-- [ ] `engine/core/Engine.ts` — 完整事件总线（sceneChange, choiceMade, qteTriggered 等）
-- [ ] 验证：QTE 正常触发与判定，字幕同步，多存档正常工作
+- [x] `engine/systems/QTESystem.ts` — QTE 触发、键盘监听（支持多键匹配）、超时判定
+- [x] `src/components/QTEOverlay.vue` — SVG 倒计时环 + 按键提示 + 成功/失败动画
+- [x] `src/components/Subtitles.vue` — WebVTT 解析 + 字幕同步渲染
+- [x] `engine/core/Engine.ts` — 集成 QTE（timeupdate 检测 + 条件跳转 + 效果应用）
+- [x] 多存档槽位 + 存档缩略图（canvas 截图当前视频帧，320x180 JPEG）
+- [x] `engine/core/VideoManager.ts` — 新增 `getActiveVideoElement()` 供截图
+- [x] `engine/systems/SaveSystem.ts` — DB 版本升级 v2（支持 thumbnail 字段）
+- [x] `src/components/SaveLoadMenu.vue` — 存档缩略图预览
+- [x] 完整事件总线（sceneChange, choiceRequest, choiceTimer, choiceTimeout, videoEnd, qteTrigger, qteTimer, qteResult, gameEnd）
+- [x] 验证：QTE 正常触发与判定（ArrowLeft/ArrowRight/A/D 躲石块），字幕同步，存档缩略图正常
 
 ### P3 编辑器 — 可视化剧情编辑（2-3 周）
 
diff --git a/engine/core/Engine.ts b/engine/core/Engine.ts
index 05c951c..72164fc 100644
--- a/engine/core/Engine.ts
+++ b/engine/core/Engine.ts
@@ -3,6 +3,7 @@ import { SceneManager } from './SceneManager'
 import { VideoManager } from './VideoManager'
 import { StateManager } from './StateManager'
 import { ChoiceSystem } from '../systems/ChoiceSystem'
+import { QTESystem } from '../systems/QTESystem'
 
 type EventHandler = (...args: any[]) => void
 
@@ -11,17 +12,21 @@ export class Engine {
   videoManager: VideoManager
   stateManager: StateManager
   choiceSystem: ChoiceSystem
+  qteSystem: QTESystem
 
   private currentScene: SceneNode | null = null
   private events: Map<EngineEvent, Set<EventHandler>> = new Map()
   private ended = false
   private isInitialScene = true
+  private qteTriggered = false
+  private qteResolved = false
 
   constructor() {
     this.sceneManager = new SceneManager()
     this.videoManager = new VideoManager()
     this.stateManager = new StateManager()
     this.choiceSystem = new ChoiceSystem()
+    this.qteSystem = new QTESystem()
   }
 
   on(event: EngineEvent, handler: EventHandler) {
@@ -46,6 +51,8 @@ export class Engine {
 
   private goToScene(scene: SceneNode) {
     this.currentScene = scene
+    this.qteTriggered = false
+    this.qteResolved = false
 
     if (scene.onEnter) {
       this.stateManager.apply(scene.onEnter)
@@ -57,8 +64,14 @@ export class Engine {
     )
 
     this.videoManager.onEnd(() => {
-      this.emit('videoEnd', scene)
-      this.onVideoEnd(scene)
+      if (!this.qteResolved) {
+        this.emit('videoEnd', scene)
+        this.onVideoEnd(scene)
+      }
+    })
+
+    this.videoManager.onTimeUpdate((time) => {
+      this.checkQTE(scene, time)
     })
 
     if (this.isInitialScene) {
@@ -71,6 +84,49 @@ export class Engine {
     this.emit('sceneChange', scene)
   }
 
+  private checkQTE(scene: SceneNode, time: number) {
+    if (!scene.qte || this.qteTriggered) return
+    if (time >= scene.qte.triggerTime) {
+      this.qteTriggered = true
+      const qte = scene.qte
+
+      this.emit('qteTrigger', qte)
+
+      this.qteSystem.trigger(
+        qte,
+        (remaining, total) => {
+          this.emit('qteTimer', { remaining, total })
+        },
+        (success) => {
+          this.qteResolved = true
+          if (success) {
+            if (qte.effects?.success) {
+              this.stateManager.apply(qte.effects.success)
+            }
+            this.emit('qteResult', { success: true })
+            const targetScene = this.sceneManager.getScene(qte.successScene)
+            if (targetScene) {
+              this.goToScene(targetScene)
+            } else {
+              this.endGame()
+            }
+          } else {
+            if (qte.effects?.fail) {
+              this.stateManager.apply(qte.effects.fail)
+            }
+            this.emit('qteResult', { success: false })
+            const targetScene = this.sceneManager.getScene(qte.failScene)
+            if (targetScene) {
+              this.goToScene(targetScene)
+            } else {
+              this.endGame()
+            }
+          }
+        }
+      )
+    }
+  }
+
   private onVideoEnd(scene: SceneNode) {
     const validChoices = this.getValidChoices(scene)
 
@@ -129,6 +185,7 @@ export class Engine {
 
   endGame() {
     this.ended = true
+    this.qteSystem.cancel()
     this.emit('gameEnd')
   }
 
@@ -163,6 +220,7 @@ export class Engine {
   }
 
   destroy() {
+    this.qteSystem.destroy()
     this.videoManager.detach()
     this.events.clear()
   }
diff --git a/engine/core/VideoManager.ts b/engine/core/VideoManager.ts
index a0c26ea..ccf212f 100644
--- a/engine/core/VideoManager.ts
+++ b/engine/core/VideoManager.ts
@@ -132,6 +132,10 @@ export class VideoManager {
     return this.active?.currentTime ?? 0
   }
 
+  getActiveVideoElement(): HTMLVideoElement | null {
+    return this.active ?? null
+  }
+
   onEnd(cb: VideoEndCallback) {
     this.onEndCallback = cb
   }
diff --git a/engine/systems/QTESystem.ts b/engine/systems/QTESystem.ts
new file mode 100644
index 0000000..aea6915
--- /dev/null
+++ b/engine/systems/QTESystem.ts
@@ -0,0 +1,75 @@
+import type { QTEDefinition } from '../types'
+
+type QTEUpdateCallback = (remaining: number, total: number) => void
+type QTEResultCallback = (success: boolean) => void
+
+export class QTESystem {
+  private timerId: ReturnType<typeof setInterval> | null = null
+  private timeoutId: ReturnType<typeof setTimeout> | null = null
+  private keyHandler: ((e: KeyboardEvent) => void) | null = null
+  private tickMs = 50
+  private active = false
+
+  trigger(
+    qte: QTEDefinition,
+    onUpdate: QTEUpdateCallback,
+    onResult: QTEResultCallback,
+  ) {
+    if (this.active) return
+    this.active = true
+
+    const startTime = Date.now()
+    const total = qte.timeLimit * 1000
+
+    this.keyHandler = (e: KeyboardEvent) => {
+      if (!this.active) return
+      const matched = qte.keys.some(
+        (k) => k.toLowerCase() === e.key.toLowerCase()
+      )
+      if (matched) {
+        this.clear()
+        onResult(true)
+      }
+    }
+    document.addEventListener('keydown', this.keyHandler)
+
+    this.timerId = setInterval(() => {
+      const elapsed = Date.now() - startTime
+      const remaining = Math.max(0, total - elapsed)
+      onUpdate(remaining / 1000, qte.timeLimit)
+      if (remaining <= 0) {
+        this.clear()
+        onResult(false)
+      }
+    }, this.tickMs)
+
+    this.timeoutId = setTimeout(() => {
+      this.clear()
+      onResult(false)
+    }, total)
+  }
+
+  cancel() {
+    this.clear()
+  }
+
+  private clear() {
+    this.active = false
+    if (this.timerId !== null) {
+      clearInterval(this.timerId)
+      this.timerId = null
+    }
+    if (this.timeoutId !== null) {
+      clearTimeout(this.timeoutId)
+      this.timeoutId = null
+    }
+    if (this.keyHandler !== null) {
+      document.removeEventListener('keydown', this.keyHandler)
+      this.keyHandler = null
+    }
+  }
+
+  destroy() {
+    this.clear()
+  }
+}
diff --git a/engine/systems/SaveSystem.ts b/engine/systems/SaveSystem.ts
index afe15a9..a727c9f 100644
--- a/engine/systems/SaveSystem.ts
+++ b/engine/systems/SaveSystem.ts
@@ -9,6 +9,7 @@ interface SaveRecord {
   variables: string
   flags: string
   history: string
+  thumbnail?: string
 }
 
 class SaveDB extends Dexie {
@@ -16,7 +17,7 @@ class SaveDB extends Dexie {
 
   constructor() {
     super('MovieGameSaves')
-    this.version(1).stores({
+    this.version(2).stores({
       saves: '++id, slot',
     })
   }
@@ -25,14 +26,15 @@ class SaveDB extends Dexie {
 const db = new SaveDB()
 
 export class SaveSystem {
-  async save(slot: number, data: Omit<SaveData, 'slot' | 'thumbnail'>): Promise<void> {
+  async save(slot: number, data: Omit<SaveData, 'slot'>): Promise<void> {
     const record: SaveRecord = {
       slot,
-      timestamp: Date.now(),
+      timestamp: data.timestamp || Date.now(),
       currentScene: data.currentScene,
       variables: JSON.stringify(data.variables),
       flags: JSON.stringify(data.flags),
       history: JSON.stringify(data.history),
+      thumbnail: data.thumbnail,
     }
 
     const existing = await db.saves.where('slot').equals(slot).first()
@@ -54,15 +56,17 @@ export class SaveSystem {
       variables: JSON.parse(record.variables),
       flags: JSON.parse(record.flags),
       history: JSON.parse(record.history),
+      thumbnail: record.thumbnail,
     }
   }
 
-  async listSlots(): Promise<{ slot: number; timestamp: number; sceneLabel: string }[]> {
+  async listSlots(): Promise<{ slot: number; timestamp: number; sceneLabel: string; thumbnail?: string }[]> {
     const records = await db.saves.orderBy('slot').toArray()
     return records.map((r) => ({
       slot: r.slot,
       timestamp: r.timestamp,
       sceneLabel: r.currentScene,
+      thumbnail: r.thumbnail,
     }))
   }
 
diff --git a/engine/types.ts b/engine/types.ts
index f71a58f..9ee94ce 100644
--- a/engine/types.ts
+++ b/engine/types.ts
@@ -69,5 +69,7 @@ export type EngineEvent =
   | 'choiceTimer'
   | 'gameEnd'
   | 'qteTrigger'
+  | 'qteTimer'
+  | 'qteResult'
   | 'videoEnd'
   | 'choiceTimeout'
diff --git a/public/scenes/demo.json b/public/scenes/demo.json
index ba29a3e..4bcd0b1 100644
--- a/public/scenes/demo.json
+++ b/public/scenes/demo.json
@@ -8,11 +8,11 @@
     "intro": {
       "id": "intro",
       "videoUrl": "/videos/intro.mp4",
+      "subtitleUrl": "/subtitles/intro.vtt",
       "choices": [
         {
           "text": "走向左边那扇发光的门",
           "targetScene": "left_door",
-          "timeLimit": 5,
           "effects": [
             { "type": "add", "target": "courage", "value": 10 }
           ]
@@ -33,6 +33,7 @@
     "left_door": {
       "id": "left_door",
       "videoUrl": "/videos/left_door.mp4",
+      "subtitleUrl": "/subtitles/left_door.vtt",
       "choices": [
         {
           "text": "与陌生人握手",
@@ -50,6 +51,36 @@
     "right_door": {
       "id": "right_door",
       "videoUrl": "/videos/right_door.mp4",
+      "qte": {
+        "triggerTime": 1.0,
+        "prompt": "躲避飞来的石块！",
+        "keys": ["ArrowLeft", "ArrowRight", "a", "d"],
+        "timeLimit": 3.0,
+        "successScene": "qte_success",
+        "failScene": "qte_fail",
+        "effects": {
+          "success": [{ "type": "add", "target": "courage", "value": 15 }],
+          "fail": [{ "type": "add", "target": "trust", "value": -20 }]
+        }
+      }
+    },
+    "qte_success": {
+      "id": "qte_success",
+      "videoUrl": "/videos/qte_success.mp4",
+      "choices": [
+        {
+          "text": "继续前进",
+          "targetScene": "continue_ending"
+        },
+        {
+          "text": "回头",
+          "targetScene": "intro"
+        }
+      ]
+    },
+    "qte_fail": {
+      "id": "qte_fail",
+      "videoUrl": "/videos/qte_fail.mp4",
       "choices": [
         {
           "text": "继续前进",
@@ -64,6 +95,7 @@
     "stay": {
       "id": "stay",
       "videoUrl": "/videos/stay.mp4",
+      "subtitleUrl": "/subtitles/stay.vtt",
       "nextScene": "alone_ending"
     },
     "trust_ending": {
diff --git a/public/subtitles/intro.vtt b/public/subtitles/intro.vtt
new file mode 100644
index 0000000..421d01d
--- /dev/null
+++ b/public/subtitles/intro.vtt
@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00.000 --> 00:02.000
+你醒来发现自己在一个陌生的房间
+
+00:02.500 --> 00:03.000
+前方有两扇门，你必须做出选择
diff --git a/public/subtitles/left_door.vtt b/public/subtitles/left_door.vtt
new file mode 100644
index 0000000..a453522
--- /dev/null
+++ b/public/subtitles/left_door.vtt
@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00.000 --> 00:02.500
+你走进了发光的门，来到一个明亮的大厅
+
+00:02.500 --> 00:03.000
+一位陌生人向你伸出了手
diff --git a/public/subtitles/stay.vtt b/public/subtitles/stay.vtt
new file mode 100644
index 0000000..0aaf9de
--- /dev/null
+++ b/public/subtitles/stay.vtt
@@ -0,0 +1,4 @@
+WEBVTT
+
+00:00.000 --> 00:03.000
+你选择留在原地，时间缓缓流逝...
diff --git a/public/videos/qte_fail.mp4 b/public/videos/qte_fail.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..f920d3d6a7776db2d56a36b6e7743075c658b8d3
GIT binary patch
literal 12805
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

literal 0
HcmV?d00001

diff --git a/public/videos/qte_success.mp4 b/public/videos/qte_success.mp4
new file mode 100644
index 0000000000000000000000000000000000000000..3fc6fef4beba7264591e59a790d7364a0bb526ba
GIT binary patch
literal 17920
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
CSLUq%

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index 2605ef1..cd5f552 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,8 @@
 import { ref } from 'vue'
 import GamePlayer from '@/components/GamePlayer.vue'
 import ChoicePanel from '@/components/ChoicePanel.vue'
+import QTEOverlay from '@/components/QTEOverlay.vue'
+import Subtitles from '@/components/Subtitles.vue'
 import SaveLoadMenu from '@/components/SaveLoadMenu.vue'
 import { useGameEngine } from '@/composables/useGameEngine'
 import { useGameStore } from '@/stores/gameStore'
@@ -67,7 +69,20 @@ init()
     <template v-else>
       <div class="game-screen">
         <GamePlayer @video-ready="onVideoReady" />
+        <Subtitles
+          :current-time="store.videoTime"
+          :video-url="store.currentScene?.subtitleUrl ?? null"
+        />
+        <QTEOverlay
+          :visible="store.qteActive"
+          :prompt="store.qteDef?.prompt ?? ''"
+          :keys="store.qteDef?.keys ?? []"
+          :total="store.qteTotal"
+          :remaining="store.qteRemaining"
+          :result="store.qteResult"
+        />
         <ChoicePanel
+          v-if="!store.qteActive"
           :choices="store.choices"
           :timer-total="store.timerTotal"
           :timer-remaining="store.timerRemaining"
diff --git a/src/components/QTEOverlay.vue b/src/components/QTEOverlay.vue
new file mode 100644
index 0000000..8f07a5a
--- /dev/null
+++ b/src/components/QTEOverlay.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { computed, ref, watch, onUnmounted } from 'vue'
+
+const props = defineProps<{
+  visible: boolean
+  prompt: string
+  keys: string[]
+  total: number
+  remaining: number
+  result: 'none' | 'success' | 'fail'
+}>()
+
+const emit = defineEmits<{
+  done: []
+}>()
+
+const ringRadius = 60
+const ringStroke = 4
+const normalizedRadius = ringRadius - ringStroke * 2
+const circumference = normalizedRadius * 2 * Math.PI
+
+const progress = computed(() => {
+  if (props.total <= 0) return circumference
+  return (props.remaining / props.total) * circumference
+})
+
+const keyLabels = computed(() => props.keys.map(displayKey))
+
+function displayKey(key: string): string {
+  const map: Record<string, string> = {
+    ' ': '空格',
+    ArrowUp: '↑',
+    ArrowDown: '↓',
+    ArrowLeft: '←',
+    ArrowRight: '→',
+    Enter: '回车',
+    Escape: 'Esc',
+  }
+  return map[key] ?? key.toUpperCase()
+}
+
+watch(() => props.result, (val) => {
+  if (val !== 'none') {
+    setTimeout(() => emit('done'), 800)
+  }
+})
+</script>
+
+<template>
+  <div class="qte-overlay" v-if="visible">
+    <div class="qte-center">
+      <div class="qte-ring" :class="{ 'qte-success': result === 'success', 'qte-fail': result === 'fail' }">
+        <svg width="140" height="140" viewBox="0 0 140 140">
+          <circle
+            stroke="rgba(255,255,255,0.15)"
+            fill="none"
+            :stroke-width="ringStroke"
+            :r="normalizedRadius"
+            :cx="ringRadius + ringStroke"
+            :cy="ringRadius + ringStroke"
+          />
+          <circle
+            class="ring-progress"
+            stroke="#fff"
+            fill="none"
+            :stroke-width="ringStroke"
+            :r="normalizedRadius"
+            :cx="ringRadius + ringStroke"
+            :cy="ringRadius + ringStroke"
+            :stroke-dasharray="circumference + ' ' + circumference"
+            :stroke-dashoffset="circumference - progress"
+            stroke-linecap="round"
+            transform="rotate(-90 64 64)"
+          />
+        </svg>
+        <div class="qte-key">{{ keyLabels[0] }}</div>
+        <div class="qte-time">{{ remaining.toFixed(1) }}s</div>
+      </div>
+      <div class="qte-prompt">{{ prompt }}</div>
+      <div class="qte-result-text" v-if="result === 'success'">成功</div>
+      <div class="qte-result-text fail-text" v-else-if="result === 'fail'">失败</div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.qte-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 30;
+}
+
+.qte-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.qte-ring {
+  position: relative;
+  width: 140px;
+  height: 140px;
+}
+
+.qte-ring .ring-progress {
+  transition: stroke-dashoffset 50ms linear, stroke 0.3s;
+}
+
+.qte-ring.qte-success .ring-progress {
+  stroke: #4caf50;
+}
+
+.qte-ring.qte-fail .ring-progress {
+  stroke: #e74c3c;
+}
+
+.qte-key {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -60%);
+  font-size: 28px;
+  font-weight: bold;
+  color: #fff;
+  text-shadow: 0 0 12px rgba(255,255,255,0.4);
+}
+
+.qte-time {
+  position: absolute;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 12px;
+  color: #aaa;
+}
+
+.qte-prompt {
+  font-size: 18px;
+  color: #ddd;
+  letter-spacing: 2px;
+}
+
+.qte-result-text {
+  font-size: 32px;
+  letter-spacing: 4px;
+  color: #4caf50;
+  font-weight: bold;
+}
+
+.qte-result-text.fail-text {
+  color: #e74c3c;
+}
+</style>
diff --git a/src/components/SaveLoadMenu.vue b/src/components/SaveLoadMenu.vue
index f866dc4..c85c646 100644
--- a/src/components/SaveLoadMenu.vue
+++ b/src/components/SaveLoadMenu.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
 import type { SlotInfo } from '@/stores/gameStore'
 
-const props = defineProps<{
+defineProps<{
   saves: SlotInfo[]
 }>()
 
@@ -21,33 +20,26 @@ const maxSlots = 5
       <h2 class="save-title">存档 / 读档</h2>
 
       <div class="slot-list">
-        <div class="save-slot auto-save-slot">
-          <div class="slot-label auto-save-label">自动存档</div>
-          <div class="slot-info" v-if="saves.find(s => s.slot === 0)">
-            {{ saves.find(s => s.slot === 0)!.sceneLabel }}
-          </div>
-          <div class="slot-info empty" v-else>暂无自动存档</div>
-          <div class="slot-actions">
-            <button
-              class="slot-btn load-btn"
-              :disabled="!saves.find(s => s.slot === 0)"
-              @click="emit('load', 0)"
-            >
-              读取
-            </button>
-          </div>
-        </div>
-
         <div
           v-for="slot in maxSlots"
           :key="slot"
           class="save-slot"
         >
-          <div class="slot-label">存档 {{ slot }}</div>
-          <div class="slot-info" v-if="saves.find(s => s.slot === slot)">
-            {{ saves.find(s => s.slot === slot)!.sceneLabel }}
+          <div class="slot-thumb">
+            <img
+              v-if="saves.find(s => s.slot === slot)?.thumbnail"
+              :src="saves.find(s => s.slot === slot)!.thumbnail"
+              class="thumb-img"
+            />
+            <span v-else class="thumb-empty">空</span>
+          </div>
+          <div class="slot-meta">
+            <div class="slot-label">存档 {{ slot }}</div>
+            <div class="slot-info" v-if="saves.find(s => s.slot === slot)">
+              {{ saves.find(s => s.slot === slot)!.sceneLabel }}
+            </div>
+            <div class="slot-info empty" v-else>空</div>
           </div>
-          <div class="slot-info empty" v-else>空</div>
           <div class="slot-actions">
             <button class="slot-btn save-btn" @click="emit('save', slot)">保存</button>
             <button
@@ -61,6 +53,7 @@ const maxSlots = 5
         </div>
       </div>
 
+      <div class="save-hint">游戏会在每次场景切换时自动保存到槽位 0</div>
       <button class="close-btn" @click="emit('close')">关闭</button>
     </div>
   </div>
@@ -82,8 +75,8 @@ const maxSlots = 5
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 8px;
   padding: 32px;
-  min-width: 400px;
-  max-width: 500px;
+  min-width: 480px;
+  max-width: 560px;
 }
 
 .save-title {
@@ -98,36 +91,53 @@ const maxSlots = 5
 .slot-list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
 }
 
 .save-slot {
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 12px 16px;
+  padding: 10px 14px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 4px;
 }
 
-.auto-save-slot {
-  border-color: rgba(100, 200, 255, 0.3);
-  background: rgba(100, 200, 255, 0.06);
+.slot-thumb {
+  width: 64px;
+  height: 36px;
+  background: rgba(0, 0, 0, 0.4);
+  border-radius: 3px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
 }
 
-.auto-save-label {
-  color: #6cf;
+.thumb-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumb-empty {
+  font-size: 12px;
+  color: #444;
+}
+
+.slot-meta {
+  flex: 1;
+  min-width: 0;
 }
 
 .slot-label {
-  font-size: 14px;
-  color: #aaa;
-  white-space: nowrap;
+  font-size: 12px;
+  color: #888;
 }
 
 .slot-info {
-  flex: 1;
   font-size: 13px;
   color: #ccc;
   overflow: hidden;
@@ -164,9 +174,16 @@ const maxSlots = 5
   cursor: default;
 }
 
+.save-hint {
+  text-align: center;
+  font-size: 12px;
+  color: #555;
+  margin-top: 16px;
+}
+
 .close-btn {
   display: block;
-  margin: 24px auto 0;
+  margin: 12px auto 0;
   padding: 10px 32px;
   font-size: 14px;
   color: #888;
diff --git a/src/components/Subtitles.vue b/src/components/Subtitles.vue
new file mode 100644
index 0000000..d2c6c81
--- /dev/null
+++ b/src/components/Subtitles.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+interface SubCue {
+  start: number
+  end: number
+  text: string
+}
+
+const props = defineProps<{
+  currentTime: number
+  videoUrl: string | null
+}>()
+
+const cues = ref<SubCue[]>([])
+const currentText = ref('')
+const loadedUrl = ref('')
+
+watch(() => props.videoUrl, async (url) => {
+  if (!url || url === loadedUrl.value) return
+  loadedUrl.value = url
+  try {
+    const resp = await fetch(url)
+    const text = await resp.text()
+    cues.value = parseVTT(text)
+  } catch {
+    cues.value = []
+  }
+}, { immediate: true })
+
+watch(() => props.currentTime, (t) => {
+  if (cues.value.length === 0) {
+    currentText.value = ''
+    return
+  }
+  const active = cues.value.find((c) => t >= c.start && t <= c.end)
+  currentText.value = active?.text ?? ''
+})
+
+function parseVTT(raw: string): SubCue[] {
+  const result: SubCue[] = []
+  const lines = raw.split(/\r?\n/)
+  let i = 0
+
+  while (i < lines.length && !lines[i].includes('-->')) {
+    i++
+  }
+
+  for (; i < lines.length; i++) {
+    const line = lines[i].trim()
+    const timeMatch = line.match(
+      /(\d{1,2}:)?(\d{1,2}:)?(\d{1,2}[.,]\d{1,3})\s*-->\s*(\d{1,2}:)?(\d{1,2}:)?(\d{1,2}[.,]\d{1,3})/
+    )
+    if (!timeMatch) continue
+
+    const start = vttTimeToSeconds(timeMatch[0].split('-->')[0].trim())
+    const end = vttTimeToSeconds(timeMatch[0].split('-->')[1].trim())
+
+    let text = ''
+    i++
+    while (i < lines.length && lines[i].trim() !== '') {
+      text += (text ? '\n' : '') + lines[i].trim()
+      i++
+    }
+
+    if (text) {
+      result.push({ start, end, text })
+    }
+  }
+
+  return result
+}
+
+function vttTimeToSeconds(ts: string): number {
+  const parts = ts.replace(',', '.').split(':')
+  if (parts.length === 3) {
+    return parseFloat(parts[0]) * 3600 + parseFloat(parts[1]) * 60 + parseFloat(parts[2])
+  }
+  if (parts.length === 2) {
+    return parseFloat(parts[0]) * 60 + parseFloat(parts[1])
+  }
+  return parseFloat(parts[0])
+}
+</script>
+
+<template>
+  <div class="subtitles" v-if="currentText">
+    <div class="sub-text">{{ currentText }}</div>
+  </div>
+</template>
+
+<style scoped>
+.subtitles {
+  position: absolute;
+  bottom: 80px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  z-index: 5;
+  pointer-events: none;
+}
+
+.sub-text {
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  font-size: 20px;
+  padding: 8px 20px;
+  border-radius: 4px;
+  max-width: 80%;
+  text-align: center;
+  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
+  white-space: pre-line;
+}
+</style>
diff --git a/src/composables/useGameEngine.ts b/src/composables/useGameEngine.ts
index 5e6cb31..2b1db92 100644
--- a/src/composables/useGameEngine.ts
+++ b/src/composables/useGameEngine.ts
@@ -47,6 +47,22 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
       store.setGameEnded(true)
       engine.choiceSystem.stop()
     })
+
+    engine.on('qteTrigger', (qte) => {
+      store.showQTE(qte)
+    })
+
+    engine.on('qteTimer', ({ remaining }) => {
+      store.updateQTE(remaining)
+    })
+
+    engine.on('qteResult', ({ success }) => {
+      store.resolveQTE(success)
+    })
+
+    engine.videoManager.onTimeUpdate((t: number) => {
+      store.setVideoTime(t)
+    })
   }
 
   function start() {
@@ -73,12 +89,31 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
 
   async function saveGame(slot: number) {
     const state = engine.stateManager
+    const currentScene = store.currentScene
+
+    // Capture thumbnail from active video
+    let thumbnail: string | undefined
+    try {
+      const video = engine.videoManager.getActiveVideoElement()
+      if (video && video.readyState >= 2) {
+        const canvas = document.createElement('canvas')
+        canvas.width = 320
+        canvas.height = 180
+        const ctx = canvas.getContext('2d')
+        if (ctx) {
+          ctx.drawImage(video, 0, 0, 320, 180)
+          thumbnail = canvas.toDataURL('image/jpeg', 0.6)
+        }
+      }
+    } catch { /* ignore canvas errors */ }
+
     await saveSystem.save(slot, {
       timestamp: Date.now(),
-      currentScene: store.currentScene?.id ?? '',
+      currentScene: currentScene?.id ?? '',
       variables: state.variables,
       flags: [...state.flags],
       history: state.history,
+      thumbnail,
     })
     await refreshSaves()
   }
diff --git a/src/stores/gameStore.ts b/src/stores/gameStore.ts
index 6199148..ef2648b 100644
--- a/src/stores/gameStore.ts
+++ b/src/stores/gameStore.ts
@@ -1,11 +1,12 @@
 import { defineStore } from 'pinia'
 import { ref, shallowRef } from 'vue'
-import type { SceneNode, Choice } from '@engine/types'
+import type { SceneNode, Choice, QTEDefinition } from '@engine/types'
 
 export interface SlotInfo {
   slot: number
   timestamp: number
   sceneLabel: string
+  thumbnail?: string
 }
 
 export const useGameStore = defineStore('game', () => {
@@ -16,6 +17,13 @@ export const useGameStore = defineStore('game', () => {
   const timerRemaining = ref(0)
   const saves = ref<SlotInfo[]>([])
 
+  const qteActive = ref(false)
+  const qteDef = shallowRef<QTEDefinition | null>(null)
+  const qteTotal = ref(0)
+  const qteRemaining = ref(0)
+  const qteResult = ref<'none' | 'success' | 'fail'>('none')
+  const videoTime = ref(0)
+
   function setScene(scene: SceneNode) {
     currentScene.value = scene
   }
@@ -46,9 +54,36 @@ export const useGameStore = defineStore('game', () => {
     saves.value = list
   }
 
+  function showQTE(qte: QTEDefinition) {
+    qteActive.value = true
+    qteDef.value = qte
+    qteTotal.value = qte.timeLimit
+    qteRemaining.value = qte.timeLimit
+    qteResult.value = 'none'
+  }
+
+  function updateQTE(remaining: number) {
+    qteRemaining.value = remaining
+  }
+
+  function resolveQTE(success: boolean) {
+    qteResult.value = success ? 'success' : 'fail'
+    setTimeout(() => {
+      qteActive.value = false
+      qteDef.value = null
+      qteResult.value = 'none'
+    }, 1000)
+  }
+
+  function setVideoTime(t: number) {
+    videoTime.value = t
+  }
+
   return {
     currentScene, choices, gameEnded, timerTotal, timerRemaining, saves,
+    qteActive, qteDef, qteTotal, qteRemaining, qteResult, videoTime,
     setScene, setChoices, clearChoices, setGameEnded,
     setTimer, clearTimer, setSaves,
+    showQTE, updateQTE, resolveQTE, setVideoTime,
   }
 })