tianshu-engine/src/components/PlaybackBar.vue

<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted, computed } 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
  hide: boolean
}>()

const emit = defineEmits<{
  skip: []
  speedChange: [rate: number]
}>()

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'
}

function selectSpeed(rate: number) {
  updateLabel(rate)
  showSpeedMenu.value = false
  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') && !target.closest('.quality-wrapper')) {
    showSpeedMenu.value = false
    showQualityMenu.value = false
  }
}

watch(() => props.currentSpeed, (v) => updateLabel(v))
onMounted(() => {
  updateLabel(props.currentSpeed)
  document.addEventListener('click', onDocClick)
})
onUnmounted(() => document.removeEventListener('click', onDocClick))
</script>

<template>
  <div class="bottom-bar left" :class="{ hidden: !visible }" v-if="!hide">
    <button v-if="canSkip" class="bb-btn skip-btn" @click="emit('skip')">{{ t('ui.skip') }}</button>

    <div class="speed-wrapper">
      <button class="bb-btn" @click.stop="showSpeedMenu = !showSpeedMenu">
        {{ speedLabel }} ▾
      </button>
      <Transition name="speed-drop">
        <div v-if="showSpeedMenu" class="speed-menu">
          <button
            v-for="rate in speedOptions"
            :key="rate"
            class="speed-option"
            :class="{ active: props.currentSpeed === rate }"
            @click.stop="selectSpeed(rate)"
          >{{ rate }}x</button>
        </div>
      </Transition>
    </div>
  </div>

  <div v-if="showQuality && !hide" class="bottom-bar right" :class="{ hidden: !visible }">
    <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>

<style scoped>
.bottom-bar {
  position: absolute;
  bottom: 20px;
  z-index: 20;
  display: flex;
  gap: 6px;
  transition: opacity 0.3s ease;
}

.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;
  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;
}

.bb-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);
}

.speed-wrapper {
  position: relative;
}

.quality-wrapper {
  position: relative;
}

.speed-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  display: flex;
  flex-direction: column;
  background: rgba(20, 20, 30, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  overflow: hidden;
  min-width: 60px;
}

.speed-option {
  padding: 6px 16px;
  font-size: 12px;
  color: #999;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  transition: background 0.1s, color 0.1s;
}

.speed-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ddd;
}

.speed-option.active {
  color: #c9a84c;
}

.speed-drop-enter-active,
.speed-drop-leave-active {
  transition: all 0.15s ease;
}

.speed-drop-enter-from,
.speed-drop-leave-to {
  opacity: 0;
  transform: translateY(4px);
}
</style>