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>

src/components/PlaybackBar.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+
+const props = defineProps<{
+  canSkip: boolean
+  currentSpeed: number
+}>()
+
+const emit = defineEmits<{
+  skip: []
+  speedChange: [rate: number]
+}>()
+
+const speedLabel = ref('1x')
+
+function updateLabel(rate: number) {
+  speedLabel.value = rate + 'x'
+}
+
+function toggleSpeed() {
+  const next = props.currentSpeed === 1 ? 2 : props.currentSpeed === 2 ? 4 : 1
+  updateLabel(next)
+  emit('speedChange', next)
+}
+
+watch(() => props.currentSpeed, (v) => updateLabel(v))
+onMounted(() => updateLabel(props.currentSpeed))
+</script>
+
+<template>
+  <div class="playback-bar">
+    <button v-if="canSkip" class="pb-btn skip-btn" @click="emit('skip')">跳过</button>
+    <button class="pb-btn speed-btn" @click="toggleSpeed">{{ speedLabel }}</button>
+  </div>
+</template>
+
+<style scoped>
+.playback-bar {
+  position: absolute;
+  top: 16px;
+  left: 16px;
+  z-index: 20;
+  display: flex;
+  gap: 6px;
+}
+
+.pb-btn {
+  padding: 6px 14px;
+  font-size: 12px;
+  color: #ccc;
+  background: rgba(0, 0, 0, 0.5);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.pb-btn:hover {
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+}
+
+.skip-btn {
+  color: #ff9800;
+  border-color: rgba(255, 152, 0, 0.3);
+}
+
+.skip-btn:hover {
+  background: rgba(255, 152, 0, 0.15);
+}
+</style>

src/composables/useGameEngine.ts

@@ -15,10 +15,14 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
     ;(window as any).__store = store
   }
 
-  engine.setChapterUnlockHandler(async (chapterId) => {
-    await saveSystem.unlockChapter(chapterId)
-    store.addUnlockedChapter(chapterId)
-  })
+    engine.setChapterUnlockHandler(async (chapterId) => {
+      await saveSystem.unlockChapter(chapterId)
+      store.addUnlockedChapter(chapterId)
+    })
+
+    engine.setMarkWatchedHandler(async (sceneId) => {
+      await saveSystem.markWatched(sceneId)
+    })
 
   engine.on('sceneChange', (scene) => {
     store.setScene(scene)
@@ -116,11 +120,28 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
   }
 
   function startChapter(chapterId: string) {
-    ensureVideo()
+    const [elA, elB] = videoEls()
+    if (elA && elB) engine.videoManager.attach(elA, elB)
     store.setGameEnded(false)
     engine.startChapter(chapterId)
   }
 
+  function skipScene() {
+    engine.skipCurrentScene()
+  }
+
+  function setSpeed(rate: number) {
+    engine.videoManager.setPlaybackRate(rate)
+  }
+
+  function getSpeed(): number {
+    return engine.videoManager.getPlaybackRate()
+  }
+
+  async function isSceneWatched(sceneId: string): Promise<boolean> {
+    return await saveSystem.isWatched(sceneId)
+  }
+
   function makeChoice(index: number) {
     const scene = store.currentScene
     if (!scene?.choices) return
@@ -184,6 +205,10 @@ export function useGameEngine(videoEls: () => [HTMLVideoElement | null, HTMLVide
     makeChoice,
     clickHotspot,
     startChapter,
+    skipScene,
+    setSpeed,
+    getSpeed,
+    isSceneWatched,
     saveGame,
     loadGameFromSlot,
     refreshSaves,