🌈 style: 优化歌词与桌面歌词样式问题

components.d.ts

@@ -61,8 +61,11 @@ 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']
@@ -70,6 +73,7 @@ declare module 'vue' {
     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']
@@ -100,6 +104,7 @@ 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']

package.json

@@ -40,7 +40,7 @@
     "@electron-toolkit/utils": "^4.0.0",
     "@imsyy/color-utils": "^1.0.2",
     "@material/material-color-utilities": "^0.3.0",
-    "@neteasecloudmusicapienhanced/api": "^4.29.15",
+    "@neteasecloudmusicapienhanced/api": "^4.29.16",
     "@pixi/app": "^7.4.3",
     "@pixi/core": "^7.4.3",
     "@pixi/display": "^7.4.3",

pnpm-lock.yaml

@@ -34,8 +34,8 @@ importers:
         specifier: ^0.3.0
         version: 0.3.0
       '@neteasecloudmusicapienhanced/api':
-        specifier: ^4.29.15
+        specifier: ^4.29.16
-        version: 4.29.15
+        version: 4.29.16
       '@pixi/app':
         specifier: ^7.4.3
         version: 7.4.3(@pixi/core@7.4.3)(@pixi/display@7.4.3(@pixi/core@7.4.3))
@@ -967,8 +967,8 @@ packages:
   '@material/material-color-utilities@0.3.0':
     resolution: {integrity: sha512-ztmtTd6xwnuh2/xu+Vb01btgV8SQWYCaK56CkRK8gEkWe5TuDyBcYJ0wgkMRn+2VcE9KUmhvkz+N9GHrqw/C0g==}
 
-  '@neteasecloudmusicapienhanced/api@4.29.15':
+  '@neteasecloudmusicapienhanced/api@4.29.16':
-    resolution: {integrity: sha512-/dw0ON90NDXJnULEyKzGEvKjjkJyHYb9fJgKa1dxsN5AIN/tXNAu4AV2vMJcPGfA/NV7iRnLDEPS8ocJCbCU2w==}
+    resolution: {integrity: sha512-ml6cTErjJ/fn+E0wvlNGGoW74rDj3mfogO85xySuTCuX/Mdhuayv+pPtoSm5YDM6j26hHmS8+rV2ma4o16pUiw==}
     engines: {node: '>=12'}
     hasBin: true
 
@@ -5331,7 +5331,7 @@ snapshots:
 
   '@material/material-color-utilities@0.3.0': {}
 
-  '@neteasecloudmusicapienhanced/api@4.29.15':
+  '@neteasecloudmusicapienhanced/api@4.29.16':
     dependencies:
       '@unblockneteasemusic/server': 0.28.0
       axios: 1.13.2

src/components/Player/MainLyric.vue

@@ -58,7 +58,10 @@
               ]"
               :style="{
                 filter: settingStore.lyricsBlur
-                  ? `blur(${Math.min(Math.abs(statusStore.lyricIndex - index) * 1.8, 10)}px)`
+                  ? (playSeek >= item.time && playSeek < item.endTime) ||
+                    statusStore.lyricIndex === index
+                    ? 'blur(0)'
+                    : `blur(${Math.min(Math.abs(statusStore.lyricIndex - index) * 1.8, 10)}px)`
                   : 'blur(0)',
               }"
               @click="jumpSeek(item.time)"

src/components/Setting/LyricsSetting.vue

@@ -287,7 +287,10 @@
       </n-collapse-transition>
     </div>
     <div class="set-list">
-      <n-h3 prefix="bar"> Apple Music-like Lyrics </n-h3>
+      <n-h3 prefix="bar">
+        Apple Music-like Lyrics
+        <n-tag type="warning" size="small" round>Beta</n-tag>
+      </n-h3>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">使用 Apple Music-like Lyrics</n-text>
@@ -318,7 +321,10 @@
       </n-card>
     </div>
     <div v-if="isElectron" class="set-list">
-      <n-h3 prefix="bar"> 桌面歌词 </n-h3>
+      <n-h3 prefix="bar">
+        桌面歌词
+        <n-tag type="warning" size="small" round>Beta</n-tag>
+      </n-h3>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">开启桌面歌词</n-text>

src/components/Setting/MainSetting.vue

@@ -195,6 +195,12 @@ const toGithub = () => {
         margin-bottom: 0;
       }
     }
+    .n-h {
+      display: inline-flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+    }
     .n-collapse-transition {
       margin-bottom: 12px;
       &:last-child {

src/utils/player-utils/lyric.ts

@@ -26,20 +26,20 @@ export const getLyricData = async (id: number) => {
   try {
     // 检测本地歌词覆盖
     const getLyric = getLyricFun(settingStore.localLyricPath, id);
-    // 先加载 LRC，不阻塞到 TTML 完成
+    // 并发请求：如果 TTML 先到并且有效，则直接采用 TTML，不再等待或覆盖为 LRC
     const lrcPromise = getLyric("lrc", songLyric);
     const ttmlPromise = settingStore.enableTTMLLyric ? getLyric("ttml", songLyricTTML) : null;
 
-    const { lyric: lyricRes, isLocal: lyricLocal } = await lrcPromise;
+    let settled = false; // 是否已采用某一种歌词并结束加载状态
-    parsedLyricsData(lyricRes, lyricLocal && !settingStore.enableExcludeLocalLyrics);
+    let ttmlAdopted = false; // 是否已采用 TTML
-    // LRC 到达后即可认为加载完成
-    statusStore.lyricLoading = false;
 
-    // TTML 并行加载，完成后增量更新，不阻塞整体流程
+    const adoptTTML = async () => {
-    if (ttmlPromise) {
+      if (!ttmlPromise) {
         statusStore.usingTTMLLyric = false;
-      void ttmlPromise
+        return;
-        .then(({ lyric: ttmlContent, isLocal: ttmlLocal }) => {
+      }
+      try {
+        const { lyric: ttmlContent, isLocal: ttmlLocal } = await ttmlPromise;
         if (!ttmlContent) {
           statusStore.usingTTMLLyric = false;
           return;
@@ -54,33 +54,50 @@ export const getLyricData = async (id: number) => {
         const skipExclude = skipExcludeLocal || skipExcludeTTML;
         const ttmlLyric = parseTTMLToAMLL(parsedResult, skipExclude);
         const ttmlYrcLyric = parseTTMLToYrc(parsedResult, skipExclude);
-          console.log("TTML lyrics:", ttmlLyric, ttmlYrcLyric);
+
-          // 合并数据
         const updates: Partial<{ yrcAMData: LyricLine[]; yrcData: LyricType[] }> = {};
-          if (ttmlLyric?.length) {
+        if (ttmlLyric?.length) updates.yrcAMData = ttmlLyric;
-            updates.yrcAMData = ttmlLyric;
+        if (ttmlYrcLyric?.length) updates.yrcData = ttmlYrcLyric;
-            console.log("✅ TTML AMLL lyrics success");
+
-          }
-          if (ttmlYrcLyric?.length) {
-            updates.yrcData = ttmlYrcLyric;
-            console.log("✅ TTML Yrc lyrics success");
-          }
         if (Object.keys(updates).length) {
           musicStore.setSongLyric(updates);
           statusStore.usingTTMLLyric = true;
+          ttmlAdopted = true;
+          if (!settled) {
+            statusStore.lyricLoading = false;
+            settled = true;
+          }
+          console.log("✅ TTML lyrics adopted (prefer TTML)");
         } else {
           statusStore.usingTTMLLyric = false;
         }
-        })
+      } catch (err) {
-        .catch((err) => {
         console.error("❌ Error loading TTML lyrics:", err);
         statusStore.usingTTMLLyric = false;
-        });
-    } else {
-      statusStore.usingTTMLLyric = false;
       }
+    };
 
-    console.log("Lyrics: ", musicStore.songLyric);
+    const adoptLRC = async () => {
+      try {
+        const { lyric: lyricRes, isLocal: lyricLocal } = await lrcPromise;
+        // 如果 TTML 已采用，则忽略 LRC
+        if (ttmlAdopted) return;
+        parsedLyricsData(lyricRes, lyricLocal && !settingStore.enableExcludeLocalLyrics);
+        statusStore.usingTTMLLyric = false;
+        if (!settled) {
+          statusStore.lyricLoading = false;
+          settled = true;
+        }
+        console.log("✅ LRC lyrics adopted");
+      } catch (err) {
+        console.error("❌ Error loading LRC lyrics:", err);
+        if (!settled) statusStore.lyricLoading = false;
+      }
+    };
+
+    // 启动并发任务：TTML 与 LRC 同时进行，哪个先成功就先用
+    void adoptLRC();
+    void adoptTTML();
   } catch (error) {
     console.error("❌ Error loading lyrics:", error);
     statusStore.usingTTMLLyric = false;

src/utils/request.ts

@@ -3,7 +3,7 @@ import { isDev, isElectron } from "./env";
 import { useSettingStore } from "@/stores";
 import { getCookie } from "./cookie";
 import { isLogin } from "./auth";
-import axiosRetry from "axios-retry";
+// import axiosRetry from "axios-retry";
 
 // 全局地址
 const baseURL: string = String(isDev ? "/api/netease" : import.meta.env["VITE_API_URL"]);
@@ -18,10 +18,10 @@ const server: AxiosInstance = axios.create({
 });
 
 // 请求重试
-axiosRetry(server, {
+// axiosRetry(server, {
-  // 重试次数
+//   // 重试次数
-  retries: 3,
+//   retries: 3,
-});
+// });
 
 // 请求拦截器
 server.interceptors.request.use(

src/views/DesktopLyric/index.vue

@@ -118,7 +118,7 @@
 </template>
 
 <script setup lang="ts">
-import { Position, useRafFn } from "@vueuse/core";
+import { useRafFn } from "@vueuse/core";
 import { LyricContentType, LyricType } from "@/types/main";
 import { LyricConfig, LyricData, RenderLine } from "@/types/desktop-lyric";
 import defaultDesktopLyricConfig from "@/assets/data/lyricConfig";
@@ -332,40 +332,50 @@ const dragState = reactive({
 
 /**
  * 桌面歌词拖动开始
- * @param _position 拖动位置
  * @param event 指针事件
  */
-const lyricDragStart = async (_position: Position, event: PointerEvent) => {
+const onDocPointerDown = async (event: PointerEvent) => {
   if (lyricConfig.isLock) return;
+  // 仅左键触发
+  if (event.button !== 0) return;
+  const target = event?.target as HTMLElement | null;
+  if (!target) return;
+  // 过滤 header 中的按钮：不触发拖拽
+  if (target.closest(".menu-btn")) return;
+  startDrag(event);
+};
+
+/**
+ * 桌面歌词拖动开始
+ * @param event 指针事件
+ */
+const startDrag = async (event: PointerEvent) => {
   dragState.isDragging = true;
   const { x, y } = await window.electron.ipcRenderer.invoke("get-window-bounds");
   const { width, height } = await window.api.store.get("lyric");
-  // 直接限制最大宽高
+  window.electron.ipcRenderer.send("toggle-fixed-max-size", { width, height, fixed: true });
-  window.electron.ipcRenderer.send("toggle-fixed-max-size", {
-    width,
-    height,
-    fixed: true,
-  });
   dragState.startX = event?.screenX ?? 0;
   dragState.startY = event?.screenY ?? 0;
   dragState.startWinX = x;
   dragState.startWinY = y;
   dragState.winWidth = width ?? 0;
   dragState.winHeight = height ?? 0;
+  document.addEventListener("pointermove", onDocPointerMove, { capture: true });
+  document.addEventListener("pointerup", onDocPointerUp, { capture: true });
+  event.preventDefault();
 };
 
 /**
  * 桌面歌词拖动移动
- * @param _position 拖动位置
  * @param event 指针事件
  */
-const lyricDragMove = async (_position: Position, event: PointerEvent) => {
+const onDocPointerMove = async (event: PointerEvent) => {
   if (!dragState.isDragging || lyricConfig.isLock) return;
   const screenX = event?.screenX ?? 0;
   const screenY = event?.screenY ?? 0;
   let newWinX = Math.round(dragState.startWinX + (screenX - dragState.startX));
   let newWinY = Math.round(dragState.startWinY + (screenY - dragState.startY));
-  // 可选：限制在屏幕边界（支持多屏）
+  // 是否限制在屏幕边界（支持多屏）
   if (lyricConfig.limitBounds) {
     const { minX, minY, maxX, maxY } = await window.electron.ipcRenderer.invoke(
       "get-virtual-screen-bounds",
@@ -382,24 +392,19 @@ const lyricDragMove = async (_position: Position, event: PointerEvent) => {
   );
 };
 
-// 监听桌面歌词拖动
+/**
-useDraggable(desktopLyricRef, {
+ * 桌面歌词拖动结束
-  onStart: (position, event) => {
+ */
-    lyricDragStart(position, event);
+const onDocPointerUp = () => {
-  },
+  if (!dragState.isDragging) return;
-  onMove: (position, event) => {
-    lyricDragMove(position, event);
-  },
-  onEnd: () => {
   // 关闭拖拽状态
   dragState.isDragging = false;
+  // 移除全局监听
+  document.removeEventListener("pointermove", onDocPointerMove, { capture: true });
+  document.removeEventListener("pointerup", onDocPointerUp, { capture: true });
   requestAnimationFrame(() => {
     // 恢复拖拽前宽高
-      window.electron.ipcRenderer.send(
+    window.electron.ipcRenderer.send("update-lyric-size", dragState.winWidth, dragState.winHeight);
-        "update-lyric-size",
-        dragState.winWidth,
-        dragState.winHeight,
-      );
     // 根据字体大小恢复一次高度
     const height = fontSizeToHeight(lyricConfig.fontSize);
     if (height) pushWindowHeight(height);
@@ -410,8 +415,7 @@ useDraggable(desktopLyricRef, {
       fixed: false,
     });
   });
-  },
+};
-});
 
 // 监听窗口大小变化
 const { height: winHeight } = useWindowSize();
@@ -547,11 +551,16 @@ onMounted(() => {
   } else {
     pauseSeek();
   }
+  // 拖拽入口
+  document.addEventListener("pointerdown", onDocPointerDown, { capture: true });
 });
 
 onBeforeUnmount(() => {
   // 关闭 RAF
   pauseSeek();
+  // 解绑事件
+  document.removeEventListener("pointerdown", onDocPointerDown, { capture: true });
+  if (dragState.isDragging) onDocPointerUp();
 });
 </script>
 
@@ -570,9 +579,10 @@ onBeforeUnmount(() => {
   border-radius: 12px;
   overflow: hidden;
   transition: background-color 0.3s;
-  cursor: move;
+  cursor: default;
   .header {
     margin-bottom: 12px;
+    cursor: default;
     // 子内容三等分grid
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
@@ -752,6 +762,9 @@ onBeforeUnmount(() => {
       }
     }
   }
+  .lyric-container {
+    cursor: move;
+  }
 }
 </style>