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/components/Queue.vue

@@ -33,12 +33,13 @@
 </template>
 
 <script setup lang="ts">
+import { watch } from 'vue';
 import { Icon } from '@iconify/vue';
 import axios from 'axios';
 import { usePlayerStore } from '../stores/player.js';
 import CoverArt from './CoverArt.vue';
 
-defineProps<{
+const props = defineProps<{
   open: boolean;
 }>();
 
@@ -48,10 +49,16 @@ defineEmits<{
 
 const store = usePlayerStore();
 
+// Fetch queue when panel opens
+watch(() => props.open, (isOpen) => {
+  if (isOpen) store.fetchQueue();
+});
+
 async function removeSong(index: number) {
   if (!store.activeBotId) return;
   try {
-    await axios.delete(`/api/player/${store.activeBotId}/queue/${index}`);
+    await axios.delete(`/api/player/${store.activeBotId}/queue/${index + 1}`);
+    await store.fetchQueue();
   } catch {
     // Ignore
   }

web/src/stores/player.ts

@@ -29,6 +29,8 @@ export const usePlayerStore = defineStore('player', {
     activeBotId: null as string | null,
     queue: [] as Song[],
     theme: 'dark' as 'dark' | 'light',
+    playStartedAt: 0, // timestamp when current song started
+    pausedElapsed: 0, // elapsed time when paused
   }),
 
   getters: {
@@ -44,6 +46,13 @@ export const usePlayerStore = defineStore('player', {
     isPaused(): boolean {
       return this.activeBot?.paused ?? false;
     },
+    /** Elapsed playback time in seconds */
+    elapsed(): number {
+      if (!this.activeBot?.currentSong) return 0;
+      if (this.isPaused) return this.pausedElapsed;
+      if (!this.isPlaying || this.playStartedAt === 0) return 0;
+      return (Date.now() - this.playStartedAt) / 1000;
+    },
   },
 
   actions: {
@@ -52,12 +61,34 @@ export const usePlayerStore = defineStore('player', {
     },
 
     updateBotStatus(botId: string, status: BotStatus) {
+      const prev = this.bots.find((b) => b.id === botId);
+      const prevSongId = prev?.currentSong?.id;
+      const newSongId = status.currentSong?.id;
+
       const index = this.bots.findIndex((b) => b.id === botId);
       if (index >= 0) {
         this.bots[index] = status;
       } else {
         this.bots.push(status);
       }
+
+      // Reset play timer when song changes
+      if (newSongId && newSongId !== prevSongId) {
+        this.playStartedAt = Date.now();
+        this.pausedElapsed = 0;
+      }
+
+      // Track pause/resume
+      if (status.playing && !status.paused && prev?.paused) {
+        // Resumed — adjust start time
+        this.playStartedAt = Date.now() - this.pausedElapsed * 1000;
+      }
+      if (status.paused && !prev?.paused) {
+        // Paused — save elapsed
+        this.pausedElapsed = this.playStartedAt > 0
+          ? (Date.now() - this.playStartedAt) / 1000
+          : 0;
+      }
     },
 
     removeBotStatus(botId: string) {
@@ -84,11 +115,28 @@ export const usePlayerStore = defineStore('player', {
       if (!this.activeBotId && this.bots.length > 0) {
         this.activeBotId = this.bots[0].id;
       }
+      // If a song is playing, set the start time
+      const bot = this.activeBot;
+      if (bot?.playing && bot.currentSong && this.playStartedAt === 0) {
+        this.playStartedAt = Date.now();
+      }
+    },
+
+    async fetchQueue() {
+      if (!this.activeBotId) return;
+      try {
+        const res = await axios.get(`/api/player/${this.activeBotId}/queue`);
+        this.queue = res.data.queue ?? [];
+      } catch {
+        // ignore
+      }
     },
 
     async play(query: string, platform = 'netease') {
       if (!this.activeBotId) return;
       await axios.post(`/api/player/${this.activeBotId}/play`, { query, platform });
+      this.playStartedAt = Date.now();
+      this.pausedElapsed = 0;
     },
 
     async addToQueue(query: string, platform = 'netease') {
@@ -98,27 +146,37 @@ export const usePlayerStore = defineStore('player', {
 
     async pause() {
       if (!this.activeBotId) return;
+      this.pausedElapsed = this.playStartedAt > 0
+        ? (Date.now() - this.playStartedAt) / 1000
+        : 0;
       await axios.post(`/api/player/${this.activeBotId}/pause`);
     },
 
     async resume() {
       if (!this.activeBotId) return;
+      this.playStartedAt = Date.now() - this.pausedElapsed * 1000;
       await axios.post(`/api/player/${this.activeBotId}/resume`);
     },
 
     async next() {
       if (!this.activeBotId) return;
       await axios.post(`/api/player/${this.activeBotId}/next`);
+      this.playStartedAt = Date.now();
+      this.pausedElapsed = 0;
     },
 
     async prev() {
       if (!this.activeBotId) return;
       await axios.post(`/api/player/${this.activeBotId}/prev`);
+      this.playStartedAt = Date.now();
+      this.pausedElapsed = 0;
     },
 
     async stop() {
       if (!this.activeBotId) return;
       await axios.post(`/api/player/${this.activeBotId}/stop`);
+      this.playStartedAt = 0;
+      this.pausedElapsed = 0;
     },
 
     async setVolume(volume: number) {

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);
+    }
   }
 }