feat: playback bar component, save system improvements, demo and roadmap updates

src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
 import GamePlayer from '@/components/GamePlayer.vue'
 import ChoicePanel from '@/components/ChoicePanel.vue'
 import QTEOverlay from '@/components/QTEOverlay.vue'
@@ -7,6 +7,7 @@ import Subtitles from '@/components/Subtitles.vue'
 import HotspotLayer from '@/components/HotspotLayer.vue'
 import SaveLoadMenu from '@/components/SaveLoadMenu.vue'
 import ChapterSelect from '@/components/ChapterSelect.vue'
+import PlaybackBar from '@/components/PlaybackBar.vue'
 import { useGameEngine } from '@/composables/useGameEngine'
 import { useGameStore } from '@/stores/gameStore'
 import { useFullscreen } from '@/composables/useFullscreen'
@@ -20,8 +21,11 @@ const started = ref(false)
 const showMenu = ref(false)
 const showChapterSelect = ref(false)
 const hasAutoSave = ref(false)
+const currentSpeed = ref(1)
+const canSkip = ref(false)
 
 const { loadGame, start, resumeAutoSave, makeChoice, clickHotspot, startChapter,
+  skipScene, setSpeed, getSpeed, isSceneWatched,
   saveGame, loadGameFromSlot, refreshSaves, saveSystem } =
   useGameEngine(() => [videoElA.value, videoElB.value])
 
@@ -77,6 +81,22 @@ async function onStartChapter(chapterId: string) {
   startChapter(chapterId)
 }
 
+function handleSkip() {
+  skipScene()
+}
+
+function handleSpeedChange(rate: number) {
+  setSpeed(rate)
+  currentSpeed.value = rate
+}
+
+watch(() => store.currentScene?.id, async (newId) => {
+  if (!newId) { canSkip.value = false; return }
+  const scene = store.currentScene
+  if (scene?.skippable === false) { canSkip.value = false; return }
+  canSkip.value = await isSceneWatched(newId)
+})
+
 init()
 </script>
 
@@ -112,6 +132,12 @@ init()
           @choose="onChoose"
         />
         <div v-if="started && !store.gameEnded" class="top-bar">
+          <PlaybackBar
+            :can-skip="canSkip"
+            :current-speed="currentSpeed"
+            @skip="handleSkip"
+            @speed-change="handleSpeedChange"
+          />
           <button class="top-btn" @click="toggleFullscreen" :title="isFullscreen ? '退出全屏' : '全屏'">
             {{ isFullscreen ? '⛶' : '⛶' }}
           </button>