Merge pull request #918 from laoshuikaixue/feature/taskbar-lyric-word

kazukokawagawa · web-flow · commit 2bb4d65fb219 · 2026-02-22T15:16:39.000+08:00
feat(taskbar): 添加任务栏逐字歌词功能
diff --git a/electron/main/ipc/ipc-taskbar.ts b/electron/main/ipc/ipc-taskbar.ts
@@ -27,6 +27,7 @@ const getTaskbarConfig = (): TaskbarConfig => {
     singleLineMode: store.get("taskbar.singleLineMode", false),
     showTranslation: store.get("taskbar.showTranslation", true),
     showRomaji: store.get("taskbar.showRomaji", true),
+    showWordLyrics: store.get("taskbar.showWordLyrics", true),
   };
 };
 
diff --git a/src/assets/data/lyricConfig.ts b/src/assets/data/lyricConfig.ts
@@ -9,7 +9,7 @@ const config: LyricConfig = {
   fontSize: 24,
   fontWeight: 400,
   showTran: true,
-  showYrc: true,
+  showWordLyrics: true,
   isDoubleLine: true,
   position: "both",
   limitBounds: false,
diff --git a/src/components/AMLL/LyricPlayer.vue b/src/components/AMLL/LyricPlayer.vue
@@ -308,7 +308,7 @@ watch(
             player.scrollToIndex = Math.min(...player.bufferedLines);
           } else {
             const foundIndex = player.processedLines.findIndex(
-              (line: any) => line.startTime >= time
+              (line: any) => line.startTime >= time,
             );
             player.scrollToIndex = foundIndex === -1 ? player.processedLines.length : foundIndex;
           }
@@ -321,7 +321,7 @@ watch(
       playerRef.value?.setCurrentTime(time, false);
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 // 渐变宽度
diff --git a/src/components/Menu/CoverMenu.vue b/src/components/Menu/CoverMenu.vue
@@ -100,11 +100,7 @@ const openDropdown = async (
           label: `分享${type === "playlist" ? "歌单" : type === "album" ? "专辑" : type === "video" ? "视频" : "电台"}链接`,
           show: item.id !== 0 && item.id?.toString().length < 16,
           props: {
-            onClick: () =>
-              copyData(
-                getShareUrl(type, item.id),
-                "已复制分享链接到剪贴板",
-              ),
+            onClick: () => copyData(getShareUrl(type, item.id), "已复制分享链接到剪贴板"),
           },
           icon: renderIcon("Share", { size: 18 }),
         },
diff --git a/src/components/Player/FullPlayer.vue b/src/components/Player/FullPlayer.vue
@@ -118,7 +118,7 @@ const isShowComment = computed<boolean>(
 /** 没有歌词 */
 const noLrc = computed<boolean>(() => {
   const noNormalLrc = !musicStore.isHasLrc;
-  const noYrcAvailable = !musicStore.isHasYrc || !settingStore.showYrc;
+  const noYrcAvailable = !musicStore.isHasYrc || !settingStore.showWordLyrics;
   return noNormalLrc && noYrcAvailable;
 });
 
@@ -161,7 +161,7 @@ const playerDataCenter = computed<boolean>(
 
 // 当前实时歌词
 const instantLyrics = computed(() => {
-  const isYrc = musicStore.songLyric.yrcData?.length && settingStore.showYrc;
+  const isYrc = musicStore.songLyric.yrcData?.length && settingStore.showWordLyrics;
   const content = isYrc
     ? musicStore.songLyric.yrcData[statusStore.lyricIndex]
     : musicStore.songLyric.lrcData[statusStore.lyricIndex];
diff --git a/src/components/Player/MainPlayer.vue b/src/components/Player/MainPlayer.vue
@@ -325,11 +325,7 @@ const songMoreOptions = computed<DropdownOption[]>(() => {
           label: `分享${song.type === "song" ? "歌曲" : "节目"}链接`,
           show: !isLocal,
           props: {
-            onClick: () =>
-              copyData(
-                getShareUrl(song.type, song.id),
-                "已复制分享链接到剪切板",
-              ),
+            onClick: () => copyData(getShareUrl(song.type, song.id), "已复制分享链接到剪切板"),
           },
           icon: renderIcon("Share", { size: 18 }),
         },
@@ -414,7 +410,7 @@ const isShowLyrics = computed(() => {
 
 // 当前实时歌词
 const instantLyrics = computed(() => {
-  const isYrc = musicStore.songLyric.yrcData?.length && settingStore.showYrc;
+  const isYrc = musicStore.songLyric.yrcData?.length && settingStore.showWordLyrics;
   const content = isYrc
     ? musicStore.songLyric.yrcData[statusStore.lyricIndex]
     : musicStore.songLyric.lrcData[statusStore.lyricIndex];
diff --git a/src/components/Player/PlayerControl.vue b/src/components/Player/PlayerControl.vue
@@ -182,38 +182,38 @@ watch(
 );
 
 watch(
-    () => statusStore.automixEndedSeq,
-    (seq, prev) => {
-      if (!seq || seq === prev) return;
-      if (showAutomixLabel.value) {
-        if (automixFxTimer !== null) {
-          window.clearTimeout(automixFxTimer);
-        }
-        automixFxTimer = window.setTimeout(() => {
-          showAutomixLabel.value = false;
-          showAutomixFx.value = false;
-          automixFxTimer = null;
-        }, 2000); // 混音结束后保留 2 秒再淡出
+  () => statusStore.automixEndedSeq,
+  (seq, prev) => {
+    if (!seq || seq === prev) return;
+    if (showAutomixLabel.value) {
+      if (automixFxTimer !== null) {
+        window.clearTimeout(automixFxTimer);
       }
-    },
-  );
+      automixFxTimer = window.setTimeout(() => {
+        showAutomixLabel.value = false;
+        showAutomixFx.value = false;
+        automixFxTimer = null;
+      }, 2000); // 混音结束后保留 2 秒再淡出
+    }
+  },
+);
 
-  // 监听歌曲变化，延迟关闭混音显示和辉光
-  watch(
-    () => musicStore.playSong?.id,
-    (_newId, _oldId) => {
-      if (showAutomixLabel.value) {
-        if (automixFxTimer !== null) {
-          window.clearTimeout(automixFxTimer);
-        }
-        automixFxTimer = window.setTimeout(() => {
-          showAutomixLabel.value = false;
-          showAutomixFx.value = false;
-          automixFxTimer = null;
-        }, 2000); // 切歌后保留 2 秒再淡出
+// 监听歌曲变化，延迟关闭混音显示和辉光
+watch(
+  () => musicStore.playSong?.id,
+  (_newId, _oldId) => {
+    if (showAutomixLabel.value) {
+      if (automixFxTimer !== null) {
+        window.clearTimeout(automixFxTimer);
       }
-    },
-  );
+      automixFxTimer = window.setTimeout(() => {
+        showAutomixLabel.value = false;
+        showAutomixFx.value = false;
+        automixFxTimer = null;
+      }, 2000); // 切歌后保留 2 秒再淡出
+    }
+  },
+);
 
 const onFxAnimationEnd = () => {
   // 移除之前的单次动画结束逻辑，因为现在是 infinite 循环，直到 showAutomixFx 为 false
diff --git a/src/components/Player/PlayerLyric/AMLyric.vue b/src/components/Player/PlayerLyric/AMLyric.vue
@@ -82,7 +82,7 @@ const amLyricsData = computed(() => {
   const { songLyric } = musicStore;
   if (!songLyric) return [];
   // 优先使用逐字歌词(YRC/TTML)
-  const useYrc = songLyric.yrcData?.length && settingStore.showYrc;
+  const useYrc = songLyric.yrcData?.length && settingStore.showWordLyrics;
   const lyrics = useYrc ? songLyric.yrcData : songLyric.lrcData;
   // 简单检查歌词有效性
   if (!Array.isArray(lyrics) || lyrics.length === 0) return [];
diff --git a/src/components/Player/PlayerLyric/DefaultLyric.vue b/src/components/Player/PlayerLyric/DefaultLyric.vue
@@ -156,7 +156,7 @@ const player = usePlayerController();
 const lyricScrollContainer = ref<HTMLElement | null>(null);
 
 // 是否为逐字歌词模式
-const isYrcMode = computed(() => settingStore.showYrc && musicStore.isHasYrc);
+const isYrcMode = computed(() => settingStore.showWordLyrics && musicStore.isHasYrc);
 
 // 获取当前使用的歌词数据
 const currentLyricData = computed(() => {
diff --git a/src/components/Player/PlayerMeta/PlayerData.vue b/src/components/Player/PlayerMeta/PlayerData.vue
@@ -168,7 +168,7 @@ const player = usePlayerController();
 
 // 当前歌词模式
 const lyricMode = computed(() => {
-  if (settingStore.showYrc) {
+  if (settingStore.showWordLyrics) {
     if (statusStore.usingTTMLLyric) return "TTML";
     if (musicStore.isHasYrc) {
       // 如果是从QQ音乐获取的歌词，显示QRC
diff --git a/src/components/Setting/config/lyric.ts b/src/components/Setting/config/lyric.ts
@@ -263,13 +263,13 @@ export const useLyricSettings = (): SettingConfig => {
             }),
           },
           {
-            key: "showYrc",
+            key: "showWordLyrics",
             label: "显示逐字歌词",
             type: "switch",
             description: "对性能要求较高，若发生卡顿请关闭",
             value: computed({
-              get: () => settingStore.showYrc,
-              set: (v) => (settingStore.showYrc = v),
+              get: () => settingStore.showWordLyrics,
+              set: (v) => (settingStore.showWordLyrics = v),
             }),
             children: [
               {
@@ -634,14 +634,14 @@ export const useLyricSettings = (): SettingConfig => {
             action: openFontManager,
           },
           {
-            key: "desktopLyricShowYrc",
+            key: "desktopLyricShowWordLyrics",
             label: "显示逐字歌词",
             type: "switch",
             description: "是否显示桌面歌词逐字效果",
             value: computed({
-              get: () => desktopLyricConfig.showYrc,
+              get: () => desktopLyricConfig.showWordLyrics,
               set: (v) => {
-                desktopLyricConfig.showYrc = v;
+                desktopLyricConfig.showWordLyrics = v;
                 saveDesktopLyricConfig();
               },
             }),
@@ -919,6 +919,13 @@ export const useLyricSettings = (): SettingConfig => {
             description: "是否仅显示单行歌词（不显示下一句）",
             value: toRef(settingStore, "taskbarLyricSingleLineMode"),
           },
+          {
+            key: "taskbarLyricShowWordLyrics",
+            label: "显示逐字歌词",
+            type: "switch",
+            description: "是否显示任务栏歌词逐字效果",
+            value: toRef(settingStore, "taskbarLyricShowWordLyrics"),
+          },
           {
             key: "taskbarLyricFontWeight",
             label: "文字字重",
diff --git a/src/composables/useInit.ts b/src/composables/useInit.ts
@@ -112,26 +112,30 @@ export const useInit = () => {
       watch(
         () => [
           settingStore.taskbarLyricShowCover,
+          settingStore.themeMode,
           settingStore.LyricFont,
           settingStore.globalFont,
           settingStore.taskbarLyricFontWeight,
           settingStore.taskbarLyricAnimationMode,
           settingStore.taskbarLyricSingleLineMode,
           settingStore.showTran,
           settingStore.showRoma,
+          settingStore.taskbarLyricShowWordLyrics,
           settingStore.taskbarLyricShowWhenPaused,
         ],
         () => {
           updateTaskbarConfig({
             showCover: settingStore.taskbarLyricShowCover,
+            themeMode: settingStore.themeMode,
             fontFamily: settingStore.LyricFont,
             globalFont: settingStore.globalFont,
             fontWeight: settingStore.taskbarLyricFontWeight,
             animationMode: settingStore.taskbarLyricAnimationMode,
             singleLineMode: settingStore.taskbarLyricSingleLineMode,
+            showWhenPaused: settingStore.taskbarLyricShowWhenPaused,
             showTranslation: settingStore.showTran,
             showRomaji: settingStore.showRoma,
-            showWhenPaused: settingStore.taskbarLyricShowWhenPaused,
+            showWordLyrics: settingStore.taskbarLyricShowWordLyrics,
           });
         },
       );
diff --git a/src/composables/useSongMenu.ts b/src/composables/useSongMenu.ts
@@ -263,8 +263,7 @@ export const useSongMenu = () => {
             label: `分享${type === "song" ? "歌曲" : "节目"}链接`,
             show: !isLocal && type !== "streaming",
             props: {
-              onClick: () =>
-                copyData(getShareUrl(type, song.id), "已复制分享链接到剪贴板"),
+              onClick: () => copyData(getShareUrl(type, song.id), "已复制分享链接到剪贴板"),
             },
             icon: renderIcon("Share", { size: 18 }),
           },
diff --git a/src/core/player/PlayerController.ts b/src/core/player/PlayerController.ts
@@ -1759,7 +1759,7 @@ class PlayerController {
       // 计算歌词索引
       const songId = musicStore.playSong?.id;
       const offset = statusStore.getSongOffset(songId);
-      const useYrc = !!(settingStore.showYrc && musicStore.songLyric.yrcData?.length);
+      const useYrc = !!(settingStore.showWordLyrics && musicStore.songLyric.yrcData?.length);
       let rawLyrics: LyricLine[] = [];
       if (useYrc) {
         rawLyrics = toRaw(musicStore.songLyric.yrcData);
diff --git a/src/stores/setting.ts b/src/stores/setting.ts
@@ -62,6 +62,8 @@ export interface SettingState {
   taskbarLyricAnimationMode: "slide-blur" | "left-sm";
   /** 任务栏歌词单行模式 */
   taskbarLyricSingleLineMode: boolean;
+  /** 任务栏歌词逐字模式 */
+  taskbarLyricShowWordLyrics: boolean;
   /** 任务栏歌词跟随主题色 */
   taskbarLyricUseThemeColor: boolean;
   /** 任务栏歌词字重 */
@@ -85,7 +87,7 @@ export interface SettingState {
   /** 歌词字重设置 */
   lyricFontWeight: number;
   /** 显示逐字歌词 */
-  showYrc: boolean;
+  showWordLyrics: boolean;
   /** 显示歌词翻译 */
   showTran: boolean;
   /** 显示歌词音译 */
@@ -528,6 +530,7 @@ export const useSettingStore = defineStore("setting", {
     taskbarLyricShowWhenPaused: true,
     taskbarLyricAnimationMode: "slide-blur",
     taskbarLyricSingleLineMode: false,
+    taskbarLyricShowWordLyrics: true,
     taskbarLyricUseThemeColor: false,
     taskbarLyricFontWeight: 400,
     checkUpdateOnStart: true,
@@ -584,7 +587,7 @@ export const useSettingStore = defineStore("setting", {
     lyricPriority: "auto",
     localLyricQQMusicMatch: false,
     amllDbServer: defaultAMLLDbServer,
-    showYrc: true,
+    showWordLyrics: true,
     showTran: true,
     showRoma: true,
     swapTranRoma: false,
diff --git a/src/types/desktop-lyric.d.ts b/src/types/desktop-lyric.d.ts
@@ -44,7 +44,7 @@ export interface LyricConfig {
   /** 显示翻译 */
   showTran: boolean;
   /** 是否开启逐字歌词 */
-  showYrc: boolean;
+  showWordLyrics: boolean;
   /** 文本排版位置 */
   position: "left" | "center" | "right" | "both";
   /** 是否限制在屏幕边界内拖动 */
diff --git a/src/types/shared/taskbar-ipc.ts b/src/types/shared/taskbar-ipc.ts
@@ -19,6 +19,7 @@ export interface TaskbarConfig {
   fontWeight: number;
   animationMode: "slide-blur" | "left-sm";
   singleLineMode: boolean;
+  showWordLyrics: boolean;
   showTranslation: boolean;
   showRomaji: boolean;
 }
diff --git a/src/utils/initIpc.ts b/src/utils/initIpc.ts
@@ -115,6 +115,7 @@ const initIpc = () => {
         singleLineMode: settingStore.taskbarLyricSingleLineMode,
         showTranslation: settingStore.showTran,
         showRomaji: settingStore.showRoma,
+        showWordLyrics: settingStore.taskbarLyricShowWordLyrics,
       };
 
       const hasYrc = (musicStore.songLyric.yrcData?.length ?? 0) > 0;
diff --git a/src/views/Artist/layout.vue b/src/views/Artist/layout.vue
@@ -208,11 +208,7 @@ const moreOptions = computed<DropdownOption[]>(() => [
     label: "复制分享链接",
     key: "copy",
     props: {
-      onClick: () =>
-        copyData(
-          getShareUrl("artist", artistId.value),
-          "已复制分享链接到剪贴板",
-        ),
+      onClick: () => copyData(getShareUrl("artist", artistId.value), "已复制分享链接到剪贴板"),
     },
     icon: renderIcon("Share"),
   },
diff --git a/src/views/DesktopLyric/index.vue b/src/views/DesktopLyric/index.vue
@@ -103,7 +103,11 @@
         >
           <!-- 逐字歌词渲染 -->
           <template
-            v-if="lyricConfig.showYrc && lyricData?.yrcData?.length && line.line?.words?.length > 1"
+            v-if="
+              lyricConfig.showWordLyrics &&
+              lyricData?.yrcData?.length &&
+              line.line?.words?.length > 1
+            "
           >
             <span
               class="scroll-content"
@@ -200,7 +204,9 @@ const LYRIC_LOOKAHEAD = 300;
 // 实时歌词索引
 const currentLyricIndex = computed(() => {
   const lyrics =
-    lyricConfig.showYrc && lyricData?.yrcData?.length ? lyricData.yrcData : lyricData.lrcData;
+    lyricConfig.showWordLyrics && lyricData?.yrcData?.length
+      ? lyricData.yrcData
+      : lyricData.lrcData;
   // 边界检查
   if (!lyrics || !lyrics.length) return -1;
   return calculateLyricIndex(playSeekMs.value, lyrics, 0, 2);
@@ -312,7 +318,9 @@ const renderLyricLines = computed<RenderLine[]>(() => {
   }
 
   const lyrics =
-    lyricConfig.showYrc && lyricData?.yrcData?.length ? lyricData.yrcData : lyricData.lrcData;
+    lyricConfig.showWordLyrics && lyricData?.yrcData?.length
+      ? lyricData.yrcData
+      : lyricData.lrcData;
   // 无歌曲名且无歌词
   if (!lyricData.playName && !lyrics?.length) {
     return placeholder("SPlayer Desktop Lyric");
diff --git a/src/views/List/album.vue b/src/views/List/album.vue
diff --git a/src/views/List/liked.vue b/src/views/List/liked.vue
diff --git a/src/views/List/playlist.vue b/src/views/List/playlist.vue
diff --git a/src/views/List/radio.vue b/src/views/List/radio.vue
diff --git a/src/views/TaskbarLyric/LyricScroll.vue b/src/views/TaskbarLyric/LyricScroll.vue
diff --git a/src/views/TaskbarLyric/index.vue b/src/views/TaskbarLyric/index.vue
