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

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;