feat: i18n support for quality selector labels

src/components/PlaybackBar.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, onMounted, onUnmounted } from 'vue'
+import { ref, watch, onMounted, onUnmounted, computed } from 'vue'
 import { useI18n } from '@/composables/useI18n'
 import { useGameStore } from '@/stores/gameStore'
 
@@ -22,6 +22,19 @@ const emit = defineEmits<{
 const speedLabel = ref('')
 const showSpeedMenu = ref(false)
 const speedOptions = [1, 2, 4]
+const showQualityMenu = ref(false)
+const qualityOptions = computed(() => [
+  { value: '', label: t('ui.qualityAuto') },
+  { value: '超清 (1080P)', label: t('ui.quality1080p') },
+  { value: '高清 (720P)', label: t('ui.quality720p') },
+  { value: '标清 (480P)', label: t('ui.quality480p') },
+])
+
+function currentQualityLabel() {
+  if (!store.preferredQuality) return t('ui.qualityAuto')
+  const found = qualityOptions.value.find(q => q.value === store.preferredQuality)
+  return found?.label || store.preferredQuality
+}
 
 function updateLabel(rate: number) {
   speedLabel.value = rate + 'x'
@@ -33,10 +46,16 @@ function selectSpeed(rate: number) {
   emit('speedChange', rate)
 }
 
+function selectQuality(q: string) {
+  store.setPreferredQuality(q)
+  showQualityMenu.value = false
+}
+
 function onDocClick(e: MouseEvent) {
   const target = e.target as HTMLElement
-  if (!target.closest('.speed-wrapper')) {
+  if (!target.closest('.speed-wrapper') && !target.closest('.quality-wrapper')) {
     showSpeedMenu.value = false
+    showQualityMenu.value = false
   }
 }
 
@@ -71,12 +90,22 @@ onUnmounted(() => document.removeEventListener('click', onDocClick))
   </div>
 
   <div v-if="showQuality && !hide" 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 class="quality-wrapper">
+      <button class="bb-btn" @click.stop="showQualityMenu = !showQualityMenu">
+        {{ currentQualityLabel() }} ▾
+      </button>
+      <Transition name="speed-drop">
+        <div v-if="showQualityMenu" class="speed-menu">
+          <button
+            v-for="q in qualityOptions"
+            :key="q.value"
+            class="speed-option"
+            :class="{ active: store.preferredQuality === q.value }"
+            @click.stop="selectQuality(q.value)"
+          >{{ q.label }}</button>
+        </div>
+      </Transition>
+    </div>
   </div>
 </template>
 
@@ -132,6 +161,10 @@ onUnmounted(() => document.removeEventListener('click', onDocClick))
   position: relative;
 }
 
+.quality-wrapper {
+  position: relative;
+}
+
 .speed-menu {
   position: absolute;
   bottom: calc(100% + 4px);
@@ -166,17 +199,6 @@ onUnmounted(() => document.removeEventListener('click', onDocClick))
   color: #c9a84c;
 }
 
-.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;
-}
-
 .speed-drop-enter-active,
 .speed-drop-leave-active {
   transition: all 0.15s ease;