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

src/components/AccessibilitySettings.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { useGameStore } from '@/stores/gameStore'
 import { useI18n } from '@/composables/useI18n'
-import { getVideoMode } from '@engine/core/VideoManager'
 
 const store = useGameStore()
 const { t, currentLang, setLang } = useI18n()
@@ -13,15 +12,6 @@ const emit = defineEmits<{
 const fontSizeOptions = [20, 24, 28, 32]
 const bgAlphaOptions = [0, 0.3, 0.5, 0.7, 0.9]
 
-const qualityOptions = [
-  { key: '', label: '自动' },
-  { key: '超清 (1080P)', label: '超清 (1080P)', speed: '需要 2.5 Mbps' },
-  { key: '高清 (720P)', label: '高清 (720P)', speed: '需要 2 Mbps' },
-  { key: '标清 (480P)', label: '标清 (480P)', speed: '需要 0.8 Mbps' },
-]
-
-const isWeb = getVideoMode() !== 'local'
-
 const langLabels: Record<string, string> = {
   zh: '中文',
   en: 'English',
@@ -49,15 +39,6 @@ const langLabels: Record<string, string> = {
           </select>
         </div>
 
-        <div class="setting-row" v-if="isWeb">
-          <span class="setting-label">画质</span>
-          <select :value="store.preferredQuality" @change="store.setPreferredQuality(($event.target as HTMLSelectElement).value)">
-            <option v-for="q in qualityOptions" :key="q.key" :value="q.key">
-              {{ q.label }}{{ q.speed ? '（' + q.speed + '）' : '' }}
-            </option>
-          </select>
-        </div>
-
         <div class="setting-row">
           <span class="setting-label">{{ t('ui.subtitleSize') }}</span>
           <select :value="store.subFontSize" @change="store.setSubFontSize(+($event.target as HTMLSelectElement).value)">

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>