refactor: move quality/skip/speed controls to bottom bar, sync visibility with top bar

src/components/PlaybackBar.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { ref, watch, onMounted } from 'vue'
 import { useI18n } from '@/composables/useI18n'
+import { useGameStore } from '@/stores/gameStore'
 
 const { t } = useI18n()
+const store = useGameStore()
 
 const props = defineProps<{
   canSkip: boolean
   currentSpeed: number
+  visible: boolean
+  showQuality: boolean
 }>()
 
 const emit = defineEmits<{
@@ -31,19 +35,45 @@ onMounted(() => updateLabel(props.currentSpeed))
 </script>
 
 <template>
-  <div class="playback-bar">
-    <button v-if="canSkip" class="pb-btn skip-btn" @click="emit('skip')">{{ t('ui.skip') }}</button>
-    <button class="pb-btn speed-btn" @click="toggleSpeed">{{ speedLabel }}</button>
+  <div class="bottom-bar left" :class="{ hidden: !visible }">
+    <button v-if="canSkip" class="bb-btn skip-btn" @click="emit('skip')">{{ t('ui.skip') }}</button>
+    <button class="bb-btn" @click="toggleSpeed">{{ speedLabel }}</button>
+  </div>
+
+  <div v-if="showQuality" class="bottom-bar right" :class="{ hidden: !visible }">
+    <select class="bb-select" :value="store.preferredQuality" @change="store.setPreferredQuality(($event.target as HTMLSelectElement).value)">
+      <option value="">自动</option>
+      <option value="超清 (1080P)">超清 (1080P)</option>
+      <option value="高清 (720P)">高清 (720P)</option>
+      <option value="标清 (480P)">标清 (480P)</option>
+    </select>
   </div>
 </template>
 
 <style scoped>
-.playback-bar {
+.bottom-bar {
+  position: absolute;
+  bottom: 20px;
+  z-index: 20;
   display: flex;
   gap: 6px;
+  transition: opacity 0.3s ease;
 }
 
-.pb-btn {
+.bottom-bar.left {
+  left: 20px;
+}
+
+.bottom-bar.right {
+  right: 20px;
+}
+
+.bottom-bar.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.bb-btn {
   padding: 6px 14px;
   font-size: 12px;
   color: #ccc;
@@ -54,7 +84,7 @@ onMounted(() => updateLabel(props.currentSpeed))
   transition: background 0.15s, color 0.15s;
 }
 
-.pb-btn:hover {
+.bb-btn:hover {
   background: rgba(0, 0, 0, 0.7);
   color: #fff;
 }
@@ -67,4 +97,15 @@ onMounted(() => updateLabel(props.currentSpeed))
 .skip-btn:hover {
   background: rgba(255, 152, 0, 0.15);
 }
+
+.bb-select {
+  padding: 6px 10px;
+  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;
+  outline: none;
+}
 </style>