fix: queue panel fetches data on open, lyrics auto-sync with playback time

- Player store tracks playStartedAt/pausedElapsed for elapsed time
- Queue component fetches from server when opened
- Lyrics page syncs every 200ms using elapsed time
- Lyrics auto-scroll to active line with smooth animation
- Translation lines shown below main lyrics
- Fade mask on lyrics scroll area

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

web/src/views/Lyrics.vue

@@ -15,14 +15,19 @@
         <div v-if="loading" class="lyrics-loading">加载歌词中...</div>
         <div v-else-if="lines.length === 0" class="lyrics-empty">暂无歌词</div>
         <div v-else class="lyrics-scroll" ref="scrollContainer">
+          <div class="lyrics-spacer" />
           <div
             v-for="(line, i) in lines"
             :key="i"
+            :ref="el => { if (el) lineRefs[i] = el as HTMLElement }"
             class="lyrics-line"
             :class="{ active: i === activeLine }"
+            @click="seekToLine(i)"
           >
-            {{ line.text }}
+            <div class="lyrics-text">{{ line.text }}</div>
+            <div v-if="line.translation" class="lyrics-translation">{{ line.translation }}</div>
           </div>
+          <div class="lyrics-spacer" />
         </div>
       </div>
     </div>
@@ -34,7 +39,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted } from 'vue';
+import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
 import axios from 'axios';
 import { usePlayerStore } from '../stores/player.js';
 import CoverArt from '../components/CoverArt.vue';
@@ -45,13 +50,15 @@ const currentSong = computed(() => store.currentSong);
 interface LyricLine {
   time: number;
   text: string;
+  translation?: string;
 }
 
 const lines = ref<LyricLine[]>([]);
-const activeLine = ref(0);
+const activeLine = ref(-1);
 const loading = ref(false);
 const scrollContainer = ref<HTMLElement | null>(null);
-const dominantColor = ref('');
+const lineRefs = ref<Record<number, HTMLElement>>({});
+let syncTimer: ReturnType<typeof setInterval> | null = null;
 
 const bgStyle = computed(() => {
   if (currentSong.value?.coverUrl) {
@@ -68,6 +75,7 @@ async function fetchLyrics() {
   if (!currentSong.value) return;
   loading.value = true;
   lines.value = [];
+  activeLine.value = -1;
 
   try {
     const res = await axios.get(`/api/music/lyrics/${currentSong.value.id}`, {
@@ -81,12 +89,71 @@ async function fetchLyrics() {
   }
 }
 
+function findActiveLine(elapsed: number): number {
+  if (lines.value.length === 0) return -1;
+  // Find the last line whose time <= elapsed
+  let idx = -1;
+  for (let i = 0; i < lines.value.length; i++) {
+    if (lines.value[i].time <= elapsed) {
+      idx = i;
+    } else {
+      break;
+    }
+  }
+  return idx;
+}
+
+function scrollToActiveLine(idx: number) {
+  const el = lineRefs.value[idx];
+  if (el && scrollContainer.value) {
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  }
+}
+
+function syncLyrics() {
+  if (!store.isPlaying || lines.value.length === 0) return;
+  const elapsed = store.elapsed;
+  const idx = findActiveLine(elapsed);
+  if (idx !== activeLine.value && idx >= 0) {
+    activeLine.value = idx;
+    scrollToActiveLine(idx);
+  }
+}
+
+function seekToLine(index: number) {
+  // Can't actually seek server-side playback, just highlight
+  activeLine.value = index;
+}
+
+function startSync() {
+  stopSync();
+  syncTimer = setInterval(syncLyrics, 200);
+}
+
+function stopSync() {
+  if (syncTimer) {
+    clearInterval(syncTimer);
+    syncTimer = null;
+  }
+}
+
 watch(currentSong, () => {
   fetchLyrics();
+  lineRefs.value = {};
 });
 
+watch(() => store.isPlaying, (playing) => {
+  if (playing) startSync();
+  else stopSync();
+}, { immediate: true });
+
 onMounted(() => {
   if (currentSong.value) fetchLyrics();
+  if (store.isPlaying) startSync();
+});
+
+onUnmounted(() => {
+  stopSync();
 });
 </script>
 
@@ -103,7 +170,7 @@ onMounted(() => {
 .lyrics-overlay {
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.7);
+  background: rgba(0, 0, 0, 0.75);
   backdrop-filter: blur(60px);
   -webkit-backdrop-filter: blur(60px);
 }
@@ -116,6 +183,7 @@ onMounted(() => {
   max-width: 1000px;
   width: 100%;
   padding: 40px;
+  height: 80vh;
 }
 
 .lyrics-left {
@@ -123,6 +191,7 @@ onMounted(() => {
   flex-direction: column;
   align-items: center;
   gap: 24px;
+  flex-shrink: 0;
 }
 
 .song-meta {
@@ -143,31 +212,68 @@ onMounted(() => {
 
 .lyrics-right {
   flex: 1;
-  max-height: 400px;
-  overflow-y: auto;
+  overflow: hidden;
+  position: relative;
+  mask-image: linear-gradient(
+    transparent 0%,
+    black 15%,
+    black 85%,
+    transparent 100%
+  );
+  -webkit-mask-image: linear-gradient(
+    transparent 0%,
+    black 15%,
+    black 85%,
+    transparent 100%
+  );
 }
 
 .lyrics-scroll {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 40px 0;
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-width: none;
+  &::-webkit-scrollbar { display: none; }
+}
+
+.lyrics-spacer {
+  height: 40%;
 }
 
 .lyrics-line {
-  font-size: 18px;
-  color: rgba(255, 255, 255, 0.35);
-  transition: all 0.3s ease;
+  padding: 8px 0;
   cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
 
-  &.active {
-    font-size: 22px;
-    font-weight: 600;
-    color: white;
+  .lyrics-text {
+    font-size: 18px;
+    line-height: 1.5;
+    color: rgba(255, 255, 255, 0.3);
+    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
   }
 
-  &:hover {
-    color: rgba(255, 255, 255, 0.6);
+  .lyrics-translation {
+    font-size: 14px;
+    line-height: 1.4;
+    color: rgba(255, 255, 255, 0.15);
+    margin-top: 2px;
+    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
+  }
+
+  &.active {
+    .lyrics-text {
+      font-size: 22px;
+      font-weight: 600;
+      color: white;
+    }
+    .lyrics-translation {
+      color: rgba(255, 255, 255, 0.5);
+    }
+  }
+
+  &:hover:not(.active) {
+    .lyrics-text {
+      color: rgba(255, 255, 255, 0.5);
+    }
   }
 }