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

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>