feat: engine improvements, new scenes, videos, subtitles, hotspot component and docs update

src/App.vue

@@ -4,6 +4,7 @@ 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 HotspotLayer from '@/components/HotspotLayer.vue'
 import SaveLoadMenu from '@/components/SaveLoadMenu.vue'
 import { useGameEngine } from '@/composables/useGameEngine'
 import { useGameStore } from '@/stores/gameStore'
@@ -16,7 +17,7 @@ const started = ref(false)
 const showMenu = ref(false)
 const hasAutoSave = ref(false)
 
-const { loadGame, start, resumeAutoSave, makeChoice, saveGame, loadGameFromSlot, refreshSaves, saveSystem } =
+const { loadGame, start, resumeAutoSave, makeChoice, clickHotspot, saveGame, loadGameFromSlot, refreshSaves, saveSystem } =
   useGameEngine(() => [videoElA.value, videoElB.value])
 
 async function init() {
@@ -68,7 +69,13 @@ init()
     <div v-if="loading" class="loading">加载中...</div>
     <template v-else>
       <div class="game-screen">
-        <GamePlayer @video-ready="onVideoReady" />
+        <GamePlayer v-if="!store.isImageScene" @video-ready="onVideoReady" />
+        <HotspotLayer
+          :hotspots="store.hotspots"
+          :is-image-scene="store.isImageScene"
+          :image-url="store.currentScene?.imageUrl"
+          @click-hotspot="clickHotspot"
+        />
         <Subtitles
           :current-time="store.videoTime"
           :subtitle-url="store.currentScene?.subtitleUrl ?? null"