feat(lyric): 增强桌面歌词功能并添加预载下一首选项

imsyy · imsyy · commit af5515988244 · 2025-12-03T15:04:11.000+08:00
- 新增始终显示播放信息选项及界面元素
- 重构歌词数据获取逻辑，支持歌手信息显示
- 添加预载下一首歌曲的开关选项
- 优化URL验证逻辑，确保包含%s占位符
- 修复窗口首次显示置顶问题
- 改进歌词索引计算和显示逻辑
diff --git a/electron/main/ipc/ipc-lyric.ts b/electron/main/ipc/ipc-lyric.ts
@@ -80,12 +80,6 @@ const initLyricIpc = (): void => {
     lyricWin.webContents.send("update-desktop-lyric-data", { playStatus: status });
   });
 
-  // 音乐名称更改
-  ipcMain.on("play-song-change", (_, title) => {
-    if (!isWinAlive(lyricWin)) return;
-    lyricWin.webContents.send("update-desktop-lyric-data", { playName: title });
-  });
-
   // 音乐歌词更改
   ipcMain.on("play-lyric-change", (_, lyricData) => {
     if (!lyricData || !isWinAlive(lyricWin)) return;
diff --git a/electron/main/ipc/ipc-window.ts b/electron/main/ipc/ipc-window.ts
@@ -7,7 +7,9 @@ import mainWindow from "../windows/main-window";
 import loadWindow from "../windows/load-window";
 import loginWindow from "../windows/login-window";
 
-// 记录是否已处理启动协议
+/** 是否已首次启动 */
+let isFirstLaunch = false;
+/** 是否已处理协议 */
 let isProtocolProcessed = false;
 
 /**
@@ -35,16 +37,19 @@ const initWindowsIpc = (): void => {
     if (!mainWin) return;
     mainWin?.show();
     mainWin?.focus();
-    // 解决窗口不立即显示
-    mainWin?.setAlwaysOnTop(true);
-    // 100ms 后取消置顶
-    const timer = setTimeout(() => {
-      if (mainWin && !mainWin.isDestroyed()) {
-        mainWin.setAlwaysOnTop(false);
-        mainWin.focus();
-        clearTimeout(timer);
-      }
-    }, 100);
+    if (!isFirstLaunch) {
+      // 解决窗口不立即显示
+      mainWin?.setAlwaysOnTop(true);
+      // 100ms 后取消置顶
+      const timer = setTimeout(() => {
+        if (mainWin && !mainWin.isDestroyed()) {
+          mainWin.setAlwaysOnTop(false);
+          mainWin.focus();
+          clearTimeout(timer);
+        }
+      }, 100);
+      isFirstLaunch = true;
+    }
     // 初始化缩略图工具栏
     if (mainWin) {
       initThumbar(mainWin);
diff --git a/electron/main/store/index.ts b/electron/main/store/index.ts
@@ -49,7 +49,7 @@ export const useStore = () => {
         config: defaultLyricConfig,
       },
       proxy: "",
-      amllDbServer: "https://amll-ttml-db.stevexmh.net",
+      amllDbServer: "https://amll-ttml-db.stevexmh.net/ncm/%s",
     },
   });
 };
diff --git a/electron/server/netease/index.ts b/electron/server/netease/index.ts
@@ -70,10 +70,8 @@ export const initNcmAPI = async (fastify: FastifyInstance) => {
         return reply.status(400).send({ error: "id is required" });
       }
       const store = useStore();
-      const server = store.get("amllDbServer") ?? "https://amll-ttml-db.stevexmh.net";
-      // 净化网址
-      const cleanServer = server.replace(/\/$/, "");
-      const url = `${cleanServer}/ncm/${id}`;
+      const server = store.get("amllDbServer") ?? "https://amll-ttml-db.stevexmh.net/ncm/%s";
+      const url = server.replace("%s", String(id));
       try {
         const response = await fetch(url);
         if (response.status !== 200) {
diff --git a/src/api/song.ts b/src/api/song.ts
@@ -1,8 +1,8 @@
 import { isElectron } from "@/utils/env";
 import { songLevelData } from "@/utils/meta";
 import { SongUnlockServer } from "@/utils/songManager";
-import request from "@/utils/request";
 import { useSettingStore } from "@/stores";
+import request from "@/utils/request";
 
 // 获取歌曲详情
 export const songDetail = (ids: number | number[]) => {
@@ -78,8 +78,8 @@ export const songLyricTTML = async (id: number) => {
     return request({ url: "/lyric/ttml", params: { id, noCookie: true } });
   } else {
     const settingStore = useSettingStore();
-    const server = settingStore.amllDbServer || "https://amll-ttml-db.stevexmh.net";
-    const url = `${server}/ncm/${id}`;
+    const server = settingStore.amllDbServer || "https://amll-ttml-db.stevexmh.net/ncm/%s";
+    const url = server.replace("%s", String(id));
     try {
       const response = await fetch(url);
       if (response === null || response.status !== 200) {
diff --git a/src/assets/data/lyricConfig.ts b/src/assets/data/lyricConfig.ts
@@ -14,6 +14,7 @@ const config: LyricConfig = {
   position: "both",
   limitBounds: false,
   textBackgroundMask: false,
+  alwaysShowPlayInfo: false,
 };
 
 export default config;
diff --git a/src/components/Setting/LyricsSetting.vue b/src/components/Setting/LyricsSetting.vue
@@ -444,7 +444,7 @@
           />
         </n-flex>
       </n-card>
-      <!-- <n-card class="set-item">
+      <n-card class="set-item">
         <div class="label">
           <n-text class="name">显示逐字歌词</n-text>
           <n-text class="tip" :depth="3">是否显示桌面歌词逐字效果</n-text>
@@ -455,7 +455,7 @@
           class="set"
           @update:value="saveDesktopLyricConfig"
         />
-      </n-card> -->
+      </n-card>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">显示翻译</n-text>
@@ -549,6 +549,18 @@
           @update:value="saveDesktopLyricConfig"
         />
       </n-card>
+      <n-card class="set-item">
+        <div class="label">
+          <n-text class="name">始终展示播放信息</n-text>
+          <n-text class="tip" :depth="3">是否始终展示当前歌曲名及歌手</n-text>
+        </div>
+        <n-switch
+          v-model:value="desktopLyricConfig.alwaysShowPlayInfo"
+          :round="false"
+          class="set"
+          @update:value="saveDesktopLyricConfig"
+        />
+      </n-card>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">恢复默认配置</n-text>
@@ -580,7 +592,7 @@ const settingStore = useSettingStore();
 const allFontsData = ref<SelectOption[]>([]);
 
 // AMLL TTML DB 地址
-const amllDbServer = ref("https://amll-ttml-db.stevexmh.net");
+const amllDbServer = ref("https://amll-ttml-db.stevexmh.net/ncm/%s");
 
 // 桌面歌词配置
 const desktopLyricConfig = reactive<LyricConfig>({ ...defaultDesktopLyricConfig });
@@ -681,26 +693,27 @@ const changeAMLLDBServer = () => {
               { depth: 3, type: "warning" },
               { default: () => "如果你不清楚这里是做什么的，请不要修改" },
             ),
+            h(NText, null, { default: () => "请确保地址正确，并且包含 %s（ 用于替换歌曲 ID ）" }),
             h(NInput, {
               value: amllDbServer.value,
               onUpdateValue: (val) => (amllDbServer.value = val),
               placeholder: "请输入 AMLL TTML DB 地址",
             }),
-            h(NText, { depth: 3 }, { default: () => "请确保地址正确，否则将导致歌词获取失败" }),
           ],
         },
       ),
     positiveText: "确认",
     negativeText: "取消",
     onPositiveClick: async () => {
       const urlValue = amllDbServer.value.trim();
-      if (isValidURL(urlValue)) {
+      // 验证 URL 格式和 %s
+      if (isValidURL(urlValue) && urlValue.includes("%s")) {
         await window.api.store.set("amllDbServer", urlValue);
         settingStore.amllDbServer = urlValue;
         window.$message.success("AMLL TTML DB 地址已更新");
         return true;
       } else {
-        window.$message.error("请输入正确的网址格式");
+        window.$message.error("请输入正确的网址格式，需包含 %s");
         return false;
       }
     },
diff --git a/src/components/Setting/PlaySetting.vue b/src/components/Setting/PlaySetting.vue
@@ -16,6 +16,13 @@
           :disabled="!isElectron"
         />
       </n-card>
+      <n-card class="set-item">
+        <div class="label">
+          <n-text class="name">下一首歌曲预载</n-text>
+          <n-text class="tip" :depth="3">提前预加载下一首歌曲的播放地址，提升切换速度</n-text>
+        </div>
+        <n-switch v-model:value="settingStore.useNextPrefetch" class="set" :round="false" />
+      </n-card>
       <n-card class="set-item">
         <div class="label">
           <n-text class="name">记忆上次播放位置</n-text>
diff --git a/src/stores/setting.ts b/src/stores/setting.ts
@@ -100,6 +100,8 @@ export interface SettingState {
   playDevice: "default" | string;
   /** 自动播放 */
   autoPlay: boolean;
+  /** 预载下一首 */
+  useNextPrefetch: boolean;
   /** 渐入渐出 */
   songVolumeFade: boolean;
   /** 渐入渐出时间 */
@@ -254,6 +256,7 @@ export const useSettingStore = defineStore("setting", {
     songLevel: "exhigh",
     playDevice: "default",
     autoPlay: false,
+    useNextPrefetch: true,
     songVolumeFade: true,
     songVolumeFadeTime: 300,
     useSongUnlock: true,
@@ -282,7 +285,7 @@ export const useSettingStore = defineStore("setting", {
     useAMLyrics: false,
     useAMSpring: false,
     enableTTMLLyric: true,
-    amllDbServer: "https://amll-ttml-db.stevexmh.net",
+    amllDbServer: "https://amll-ttml-db.stevexmh.net/ncm/%s",
     showYrc: true,
     showYrcAnimation: true,
     showYrcLongEffect: true,
diff --git a/src/types/desktop-lyric.d.ts b/src/types/desktop-lyric.d.ts
@@ -2,8 +2,10 @@ import { type LyricLine } from "@applemusic-like-lyrics/lyric";
 
 /** 桌面歌词数据 */
 export interface LyricData {
-  /** 播放歌曲名称 */
+  /** 歌曲名称 */
   playName?: string;
+  /** 歌手名称 */
+  artistName?: string;
   /** 播放状态 */
   playStatus?: boolean;
   /** 当前播放进度 */
@@ -49,6 +51,8 @@ export interface LyricConfig {
   limitBounds: boolean;
   /** 文本背景遮罩 */
   textBackgroundMask: boolean;
+  /** 始终展示播放信息 */
+  alwaysShowPlayInfo: boolean;
 }
 
 /**
diff --git a/src/utils/initIpc.ts b/src/utils/initIpc.ts
@@ -52,11 +52,13 @@ const initIpc = () => {
       const musicStore = useMusicStore();
       const statusStore = useStatusStore();
       if (player) {
+        const { name, artist } = songManager.getPlayerInfoObj() || {};
         window.electron.ipcRenderer.send(
           "update-desktop-lyric-data",
           cloneDeep({
             playStatus: statusStore.playStatus,
-            playName: songManager.getPlayerInfo(),
+            playName: name,
+            artistName: artist,
             currentTime: statusStore.currentTime,
             songId: musicStore.playSong?.id,
             songOffset: statusStore.getSongOffset(musicStore.playSong?.id),
@@ -86,7 +88,7 @@ const initIpc = () => {
     // 协议数据
     window.electron.ipcRenderer.on("protocol-url", (_, url) => {
       console.log("📡 Received protocol url:", url);
-      handleProtocolUrl(url)
+      handleProtocolUrl(url);
     });
   } catch (error) {
     console.log(error);
diff --git a/src/utils/player.ts b/src/utils/player.ts
@@ -43,16 +43,21 @@ class Player {
     audioManager.on("play", () => {
       const statusStore = useStatusStore();
       const playSongData = songManager.getPlaySongData();
-
+      const { name, artist } = songManager.getPlayerInfoObj() || {};
+      const playTitle = `${name} - ${artist}`;
+      window.document.title = `${playTitle} | SPlayer`;
       statusStore.playStatus = true;
-      window.document.title = songManager.getPlayerInfo() || "SPlayer";
       // 重置重试计数
       const sid = playSongData?.type === "radio" ? playSongData?.dj?.id : playSongData?.id;
       this.retryInfo = { songId: Number(sid || 0), count: 0 };
       // IPC 通知
       if (isElectron) {
         window.electron.ipcRenderer.send("play-status-change", true);
-        window.electron.ipcRenderer.send("play-song-change", songManager.getPlayerInfo());
+        window.electron.ipcRenderer.send("play-song-change", playTitle);
+        window.electron.ipcRenderer.send("update-desktop-lyric-data", {
+          playName: name,
+          artistName: artist,
+        });
       }
       console.log("▶️ song play:", playSongData);
     });
@@ -191,7 +196,11 @@ class Player {
     // 更新 MediaSession
     if (!path) this.updateMediaSession();
     // 预载下一首播放地址
-    this.nextPrefetch = await songManager.getNextSongUrl();
+    if (settingStore.useNextPrefetch) {
+      this.nextPrefetch = await songManager.getNextSongUrl();
+    } else {
+      this.nextPrefetch = null;
+    }
   }
   /**
    * 初始化 MediaSession
@@ -332,6 +341,7 @@ class Player {
    * 重置状态
    */
   public resetStatus() {
+    this.nextPrefetch = null;
     const musicStore = useMusicStore();
     const statusStore = useStatusStore();
     const settingStore = useSettingStore();
@@ -395,7 +405,7 @@ class Player {
 
           // 使用预载缓存
           const cached = this.nextPrefetch;
-          if (cached && cached.id === songId && cached.url) {
+          if (settingStore.useNextPrefetch && cached && cached.id === songId && cached.url) {
             playerUrl = cached.url;
             statusStore.playUblock = cached.ublock;
             statusStore.songQuality = cached.quality;
@@ -573,6 +583,7 @@ class Player {
    * 切换播放模式
    */
   public async togglePlayMode(mode: PlayModeType | false) {
+    this.nextPrefetch = null;
     const statusStore = useStatusStore();
     const dataStore = useDataStore();
     const musicStore = useMusicStore();
@@ -737,6 +748,7 @@ class Player {
       play: true,
     },
   ) {
+    this.nextPrefetch = null;
     if (!data || !data.length) return;
     const dataStore = useDataStore();
     const musicStore = useMusicStore();
@@ -976,6 +988,7 @@ class Player {
       const musicStore = useMusicStore();
       const statusStore = useStatusStore();
       if (!open && statusStore.playHeartbeatMode) {
+        this.nextPrefetch = null;
         statusStore.playHeartbeatMode = false;
         window.$message.success("已退出心动模式");
         return;
@@ -1006,8 +1019,10 @@ class Player {
       if (result.code === 200) {
         this.message?.destroy();
         const heartRatelists = formatSongsList(result.data);
-        await this.updatePlayList(heartRatelists, heartRatelists[0]);
+        this.nextPrefetch = null;
         statusStore.playHeartbeatMode = true;
+        statusStore.playIndex = 0;
+        await this.updatePlayList(heartRatelists, heartRatelists[0]);
       } else {
         this.message?.destroy();
         window.$message.error(result.message || "心动模式开启出错，请重试");
@@ -1025,6 +1040,7 @@ class Player {
    * @param playNext 是否播放下一首
    */
   public async initPersonalFM(playNext: boolean = false) {
+    this.nextPrefetch = null;
     const musicStore = useMusicStore();
     const statusStore = useStatusStore();
     try {
diff --git a/src/utils/songManager.ts b/src/utils/songManager.ts
diff --git a/src/utils/validate.ts b/src/utils/validate.ts
diff --git a/src/views/DesktopLyric/index.vue b/src/views/DesktopLyric/index.vue
