From ce6fc927804fcb413a3663c9d308f8ea6e9f0377 Mon Sep 17 00:00:00 2001
From: saopig1 <saopig@duck.com>
Date: Mon, 30 Mar 2026 02:22:50 +0800
Subject: [PATCH] fix: playlist cards use RouterLink for reliable navigation,
 lyrics use scrollTo for smooth sync

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/src/views/Home.vue   | 15 +++++++++------
 web/src/views/Lyrics.vue | 17 ++++++++++++++---
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 44610f0..5f58b5d 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -67,15 +67,15 @@
     <section class="section" v-if="playlists.length > 0">
       <h2 class="section-title">推荐歌单</h2>
       <div class="playlist-grid">
-        <div
+        <RouterLink
           v-for="playlist in playlists"
           :key="playlist.id"
+          :to="`/playlist/${playlist.id}?platform=${playlist.platform}`"
           class="playlist-card hover-scale"
-          @click="$router.push(`/playlist/${playlist.id}?platform=${playlist.platform}`)"
         >
           <CoverArt :url="playlist.coverUrl" :size="160" :radius="10" :show-shadow="true" />
           <div class="playlist-name">{{ playlist.name }}</div>
-        </div>
+        </RouterLink>
       </div>
     </section>
 
@@ -83,16 +83,16 @@
     <section class="section" v-if="userPlaylists.length > 0">
       <h2 class="section-title">我的歌单</h2>
       <div class="playlist-grid">
-        <div
+        <RouterLink
           v-for="pl in userPlaylists"
           :key="pl.id"
+          :to="`/playlist/${pl.id}?platform=${pl.platform}`"
           class="playlist-card hover-scale"
-          @click="$router.push(`/playlist/${pl.id}?platform=${pl.platform}`)"
         >
           <CoverArt :url="pl.coverUrl" :size="160" :radius="10" :show-shadow="true" />
           <div class="playlist-name">{{ pl.name }}</div>
           <div class="playlist-count">{{ pl.songCount }} 首</div>
-        </div>
+        </RouterLink>
       </div>
     </section>
   </div>
@@ -343,6 +343,9 @@ onMounted(async () => {
 
 .playlist-card {
   cursor: pointer;
+  display: block;
+  text-decoration: none;
+  color: inherit;
 }
 
 .playlist-name {
diff --git a/web/src/views/Lyrics.vue b/web/src/views/Lyrics.vue
index f7de78f..4c6f1da 100644
--- a/web/src/views/Lyrics.vue
+++ b/web/src/views/Lyrics.vue
@@ -110,9 +110,20 @@ function findActiveLine(elapsed: number): number {
 
 function scrollToActiveLine(idx: number) {
   const el = lineRefs.value[idx];
-  if (el && scrollContainer.value) {
-    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
-  }
+  const container = scrollContainer.value;
+  if (!el || !container) return;
+
+  // Calculate target scroll position to center the active line
+  const containerHeight = container.clientHeight;
+  const lineTop = el.offsetTop;
+  const lineHeight = el.offsetHeight;
+  const targetScroll = lineTop - containerHeight / 2 + lineHeight / 2;
+
+  // Smooth scroll using CSS scroll-behavior or manual animation
+  container.scrollTo({
+    top: targetScroll,
+    behavior: 'smooth',
+  });
 }
 
 function syncLyrics() {