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

@@ -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 {

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) {
+  const container = scrollContainer.value;
-    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+  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() {