🎈 perf: 优化歌词并发限制

Author: imsyy

components.d.ts

@@ -61,19 +61,15 @@ declare module 'vue' {
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NDynamicTags: typeof import('naive-ui')['NDynamicTags']
-    NEllipsis: typeof import('naive-ui')['NEllipsis']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NFlex: typeof import('naive-ui')['NFlex']
-    NFloatButton: typeof import('naive-ui')['NFloatButton']
-    NFloatButtonGroup: typeof import('naive-ui')['NFloatButtonGroup']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NFormItemGi: typeof import('naive-ui')['NFormItemGi']
     NGi: typeof import('naive-ui')['NGi']
     NGlobalStyle: typeof import('naive-ui')['NGlobalStyle']
     NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
-    NH2: typeof import('naive-ui')['NH2']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
     NImage: typeof import('naive-ui')['NImage']
@@ -104,7 +100,6 @@ declare module 'vue' {
     NSelect: typeof import('naive-ui')['NSelect']
     NSkeleton: typeof import('naive-ui')['NSkeleton']
     NSlider: typeof import('naive-ui')['NSlider']
-    NSpin: typeof import('naive-ui')['NSpin']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTabPane: typeof import('naive-ui')['NTabPane']
     NTabs: typeof import('naive-ui')['NTabs']

src/components/Player/FullPlayer.vue

@@ -268,6 +268,9 @@ onBeforeUnmount(() => {
           }
         }
       }
+      .content-right {
+        opacity: 0;
+      }
     }
     // 无歌词
     &.no-lrc {

src/components/Player/MainLyric.vue

@@ -383,6 +383,8 @@ onBeforeUnmount(() => {
           top: 0;
           transform: none;
           will-change: -webkit-mask-position-x, transform, opacity;
+          // padding: 2px 8px;
+          // margin: -2px -8px;
           mask-image: linear-gradient(
             to right,
             rgb(0, 0, 0) 45.4545454545%,
@@ -399,7 +401,7 @@ onBeforeUnmount(() => {
           -webkit-mask-repeat: no-repeat;
           transition:
             opacity 0.3s,
-            filter 0.5s,
+            filter 0.3s,
             margin 0.3s,
             padding 0.3s !important;
         }

src/utils/player-utils/lyric.ts

@@ -5,6 +5,11 @@ import { parseTTML } from "@applemusic-like-lyrics/lyric";
 import { LyricLine } from "@applemusic-like-lyrics/core";
 import { LyricType } from "@/types/main";
 
+// 歌词加载并发保护：始终只允许最新一次请求写入
+let lyricSessionCounter = 0;
+const newLyricSession = () => ++lyricSessionCounter;
+const isStale = (sid: number) => sid !== lyricSessionCounter;
+
 /**
  * 获取歌词
  * @param id 歌曲id
@@ -15,6 +20,8 @@ export const getLyricData = async (id: number) => {
   const statusStore = useStatusStore();
   // 切歌或重新获取时，先标记为加载中
   statusStore.lyricLoading = true;
+  // 为本次歌词请求创建会话 ID，用于防止旧请求覆盖新结果
+  const currentSessionId = newLyricSession();
 
   if (!id) {
     statusStore.usingTTMLLyric = false;
@@ -31,6 +38,8 @@ export const getLyricData = async (id: number) => {
     const ttmlPromise = settingStore.enableTTMLLyric ? getLyric("ttml", songLyricTTML) : null;
 
     const { lyric: lyricRes, isLocal: lyricLocal } = await lrcPromise;
+    // 如果已经发起了新的歌词请求，直接放弃旧结果
+    if (isStale(currentSessionId)) return;
     parsedLyricsData(lyricRes, lyricLocal && !settingStore.enableExcludeLocalLyrics);
     // LRC 到达后即可认为加载完成
     statusStore.lyricLoading = false;
@@ -40,11 +49,15 @@ export const getLyricData = async (id: number) => {
       statusStore.usingTTMLLyric = false;
       void ttmlPromise
         .then(({ lyric: ttmlContent, isLocal: ttmlLocal }) => {
+          // 如果已经发起了新的歌词请求，直接放弃旧结果
+          if (isStale(currentSessionId)) return;
           if (!ttmlContent) {
             statusStore.usingTTMLLyric = false;
             return;
           }
           const parsedResult = parseTTML(ttmlContent);
+          // 如果已经发起了新的歌词请求，直接放弃旧结果
+          if (isStale(currentSessionId)) return;
           if (!parsedResult?.lines?.length) {
             statusStore.usingTTMLLyric = false;
             return;
@@ -65,6 +78,7 @@ export const getLyricData = async (id: number) => {
             updates.yrcData = ttmlYrcLyric;
             console.log("✅ TTML Yrc lyrics success");
           }
+          if (isStale(currentSessionId)) return;
           if (Object.keys(updates).length) {
             musicStore.setSongLyric(updates);
             statusStore.usingTTMLLyric = true;
@@ -74,18 +88,25 @@ export const getLyricData = async (id: number) => {
         })
         .catch((err) => {
           console.error("❌ Error loading TTML lyrics:", err);
-          statusStore.usingTTMLLyric = false;
+          // 旧请求错误不影响当前状态
+          if (!isStale(currentSessionId)) {
+            statusStore.usingTTMLLyric = false;
+          }
         });
     } else {
       statusStore.usingTTMLLyric = false;
     }
 
-    console.log("Lyrics: ", musicStore.songLyric);
+    // 如果已经发起了新的歌词请求，跳过日志输出以避免混淆
+    if (!isStale(currentSessionId)) console.log("Lyrics: ", musicStore.songLyric);
   } catch (error) {
     console.error("❌ Error loading lyrics:", error);
-    statusStore.usingTTMLLyric = false;
-    resetSongLyric();
-    statusStore.lyricLoading = false;
+    // 旧请求错误不影响当前最新状态
+    if (!isStale(currentSessionId)) {
+      statusStore.usingTTMLLyric = false;
+      resetSongLyric();
+      statusStore.lyricLoading = false;
+    }
   }
 };