Merge pull request #954 from imsyy/dev-lrc

给任务栏歌词支持了TTML的BG 然后给阿姨倒一杯卡布奇诺

Author: imsyy

electron/main/ipc/ipc-taskbar.ts

@@ -8,56 +8,26 @@ import taskbarLyricManager from "../utils/taskbar-lyric-manager";
 
 let cachedIsPlaying = false;
 
+/** 读取完整任务栏配置 */
 const getTaskbarConfig = (): TaskbarConfig => {
-  const store = useStore();
-  return {
-    mode: store.get("taskbar.mode", "taskbar"),
-    maxWidth: store.get("taskbar.maxWidth", 300),
-    position: store.get("taskbar.position", "automatic"),
-    autoShrink: store.get("taskbar.autoShrink", false),
-    margin: store.get("taskbar.margin", 10),
-    minWidth: store.get("taskbar.minWidth", 10),
-    enabled: store.get("taskbar.enabled", false),
-    floatingAlign: store.get("taskbar.floatingAlign", "right"),
-    floatingAutoWidth: store.get("taskbar.floatingAutoWidth", true),
-    floatingWidth: store.get("taskbar.floatingWidth", 300),
-    floatingHeight: store.get("taskbar.floatingHeight", 48),
-    floatingAlwaysOnTop: store.get("taskbar.floatingAlwaysOnTop", false),
-
-    showWhenPaused: store.get("taskbar.showWhenPaused", true),
-    showCover: store.get("taskbar.showCover", true),
-    themeMode: store.get("taskbar.themeMode", "auto"),
-    fontFamily: store.get("taskbar.fontFamily", ""),
-    globalFont: store.get("taskbar.globalFont", ""),
-    fontWeight: store.get("taskbar.fontWeight", 0),
-    animationMode: store.get("taskbar.animationMode", "slide-blur"),
-    singleLineMode: store.get("taskbar.singleLineMode", false),
-    showTranslation: store.get("taskbar.showTranslation", true),
-    showRomaji: store.get("taskbar.showRomaji", true),
-    showWordLyrics: store.get("taskbar.showWordLyrics", true),
-  };
+  return useStore().get("taskbar");
 };
 
+/** 根据配置更新窗口可见性 */
 const updateWindowVisibility = (config: TaskbarConfig) => {
   const tray = getMainTray();
-
-  if (tray) {
-    tray.setTaskbarLyricShow(config.enabled);
+  if (tray) tray.setTaskbarLyricShow(config.enabled);
+  if (!config.enabled) {
+    taskbarLyricManager.close(false);
+    return;
   }
-
-  const shouldBeVisible = config.enabled && (cachedIsPlaying || config.showWhenPaused);
-
+  taskbarLyricManager.create(config.mode);
+  const shouldBeVisible = cachedIsPlaying || config.showWhenPaused;
   taskbarLyricManager.setVisibility(shouldBeVisible);
 };
 
-const updateWindowLayout = (animate: boolean = true) => {
-  taskbarLyricManager.updateLayout(animate);
-};
-
 const initTaskbarIpc = () => {
-  // 在函数内部获取 store，确保在 app ready 事件之后
   const store = useStore();
-
   const initialConfig = getTaskbarConfig();
   if (initialConfig.enabled) {
     taskbarLyricManager.create(initialConfig.mode);
@@ -68,67 +38,30 @@ const initTaskbarIpc = () => {
     taskbarLyricManager.setContentWidth(width);
   });
 
-  ipcMain.on(
-    TASKBAR_IPC_CHANNELS.UPDATE_CONFIG,
-    (_event, partialConfig: Partial<TaskbarConfig>) => {
-      const oldConfig = getTaskbarConfig();
+  ipcMain.handle(TASKBAR_IPC_CHANNELS.GET_OPTION, () => getTaskbarConfig());
 
-      Object.entries(partialConfig).forEach(([key, value]) => {
+  // 设置配置（增量合并）
+  ipcMain.on(
+    TASKBAR_IPC_CHANNELS.SET_OPTION,
+    (_event, option: Partial<TaskbarConfig>, pushToWindow = true) => {
+      if (!option) return;
+      // 增量更新
+      const prev = getTaskbarConfig();
+      const next = { ...prev, ...option };
+      Object.entries(option).forEach(([key, value]) => {
         store.set(`taskbar.${key}`, value);
       });
-
-      const newConfig = getTaskbarConfig();
-
-      const modeChanged = newConfig.mode !== oldConfig.mode;
-
-      if (modeChanged) {
-        taskbarLyricManager.close(false);
+      // 推送到歌词窗口
+      if (pushToWindow) {
+        taskbarLyricManager.send(TASKBAR_IPC_CHANNELS.SYNC_STATE, {
+          type: "config-update",
+          data: option,
+        } as SyncStatePayload);
       }
-
-      if (newConfig.enabled && (!oldConfig.enabled || modeChanged)) {
-        taskbarLyricManager.create(newConfig.mode);
+      updateWindowVisibility(next);
+      if (next.enabled) {
+        taskbarLyricManager.updateLayout(false);
       }
-
-      if (
-        newConfig.enabled !== oldConfig.enabled ||
-        newConfig.showWhenPaused !== oldConfig.showWhenPaused ||
-        modeChanged
-      ) {
-        updateWindowVisibility(newConfig);
-      }
-
-      if (newConfig.enabled) {
-        if (newConfig.mode === "taskbar") {
-          if (
-            newConfig.maxWidth !== oldConfig.maxWidth ||
-            newConfig.position !== oldConfig.position ||
-            newConfig.autoShrink !== oldConfig.autoShrink ||
-            newConfig.margin !== oldConfig.margin ||
-            newConfig.minWidth !== oldConfig.minWidth
-          ) {
-            updateWindowLayout(true);
-          }
-        } else {
-          const floatingWidthChanged =
-            newConfig.floatingAutoWidth === false && newConfig.floatingWidth !== oldConfig.floatingWidth;
-          if (
-            newConfig.maxWidth !== oldConfig.maxWidth ||
-            newConfig.floatingAlign !== oldConfig.floatingAlign ||
-            newConfig.floatingAutoWidth !== oldConfig.floatingAutoWidth ||
-            floatingWidthChanged ||
-            newConfig.floatingHeight !== oldConfig.floatingHeight ||
-            newConfig.floatingAlwaysOnTop !== oldConfig.floatingAlwaysOnTop ||
-            modeChanged
-          ) {
-            updateWindowLayout(false);
-          }
-        }
-      }
-
-      taskbarLyricManager.send(TASKBAR_IPC_CHANNELS.SYNC_STATE, {
-        type: "config-update",
-        data: partialConfig,
-      } as SyncStatePayload);
     },
   );
 
@@ -174,9 +107,8 @@ const initTaskbarIpc = () => {
   // 把事件发射到 app 里不太好，但是我觉得也没有必要为了这一个事件创建一个事件总线
   // TODO: 如果有了事件总线，通过那个事件总线发射这个事件
   (app as EventEmitter).on("explorer-restarted", () => {
-    const currentEnabled = store.get("taskbar.enabled");
-    const currentMode = store.get("taskbar.mode", "taskbar");
-    if (currentEnabled && currentMode === "taskbar") {
+    const currentConfig = getTaskbarConfig();
+    if (currentConfig.enabled && currentConfig.mode === "taskbar") {
       taskbarLyricManager.close(false);
       setTimeout(() => {
         taskbarLyricManager.create("taskbar");

electron/main/store/index.ts

@@ -1,3 +1,4 @@
+import { DEFAULT_TASKBAR_CONFIG, type TaskbarConfig } from "@shared";
 import { app, screen } from "electron";
 import Store from "electron-store";
 import { join } from "path";
@@ -40,32 +41,9 @@ export interface StoreType {
     config?: LyricConfig;
   };
   /** 任务栏歌词 */
-  taskbar: {
-    /** 是否启用 */
-    enabled: boolean;
-    /** 模式 */
-    mode?: "taskbar" | "floating";
-    /** 最大宽度 */
-    maxWidth?: number;
-    /** 显示封面 */
-    showCover?: boolean;
-    /** 位置 */
-    position?: "automatic" | "left" | "right";
-    /** 暂停时显示 */
-    showWhenPaused?: boolean;
-    /** 自动收缩 */
-    autoShrink?: boolean;
-    /** 边距 */
-    margin?: number;
-    /** 最小宽度 (百分比) */
-    minWidth?: number;
+  taskbar: TaskbarConfig & {
     floatingX?: number;
     floatingY?: number;
-    floatingAlign?: "left" | "right";
-    floatingAutoWidth?: boolean;
-    floatingWidth?: number;
-    floatingHeight?: number;
-    floatingAlwaysOnTop?: boolean;
   };
   /** 代理 */
   proxy: string;
@@ -120,22 +98,9 @@ export const useStore = () => {
         config: defaultLyricConfig,
       },
       taskbar: {
-        enabled: false,
-        mode: "taskbar",
-        maxWidth: 30,
-        showCover: true,
-        position: "automatic",
-        showWhenPaused: true,
-        autoShrink: false,
-        margin: 10,
-        minWidth: 10,
+        ...DEFAULT_TASKBAR_CONFIG,
         floatingX: screenData.workArea.x + screenData.workArea.width / 2 - 150,
         floatingY: screenData.workArea.y + screenData.workArea.height - 120,
-        floatingAlign: "right",
-        floatingAutoWidth: true,
-        floatingWidth: 300,
-        floatingHeight: 48,
-        floatingAlwaysOnTop: false,
       },
       macos: {
         statusBarLyric: {

electron/main/windows/floating-taskbar-lyric-window.ts

@@ -209,7 +209,8 @@ class FloatingTaskbarLyricWindow {
       bounds.y !== nextY ||
       bounds.width !== nextWidth ||
       bounds.height !== nextHeight;
-    if (shouldUpdate) this.win.setBounds({ x: nextX, y: nextY, width: nextWidth, height: nextHeight });
+    if (shouldUpdate)
+      this.win.setBounds({ x: nextX, y: nextY, width: nextWidth, height: nextHeight });
 
     this.applyAlwaysOnTop(false);
     this.sendFloatingAlign(false);

electron/main/windows/taskbar-lyric-window.ts

@@ -5,7 +5,7 @@ import type {
   TrayWatcher,
   UiaWatcher,
 } from "@native/taskbar-lyric";
-import { TASKBAR_IPC_CHANNELS } from "@shared";
+import { TASKBAR_IPC_CHANNELS, type TaskbarConfig } from "@shared";
 import { app, type BrowserWindow, nativeTheme, screen } from "electron";
 import { debounce } from "lodash-es";
 import { join } from "node:path";
@@ -259,7 +259,7 @@ class TaskbarLyricWindow {
       const maxWidthSetting = Math.round(
         (primaryDisplay.workAreaSize.width * this.maxWidthPercent) / 100,
       );
-      const positionSetting = store.get("taskbar.position", "automatic");
+      const positionSetting = store.get("taskbar.position", "automatic") as TaskbarConfig["position"];
       const autoShrink = store.get("taskbar.autoShrink", false);
       const MAX_WIDTH_PHYSICAL = autoShrink
         ? Math.min(maxWidthSetting, this.contentWidth) * scaleFactor

src/components/List/ListDetail.vue

@@ -216,7 +216,11 @@
                 </n-tab>
                 <n-tab name="comments">
                   评论
-                  <n-text v-if="settingStore.showCommentCount !== 'off' && detailData?.commentCount" class="count" depth="3">
+                  <n-text
+                    v-if="detailData?.commentCount"
+                    class="count"
+                    depth="3"
+                  >
                     {{ formatCommentCount(detailData.commentCount) }}
                   </n-text>
                 </n-tab>

src/components/Modal/Setting/FontManager.vue

@@ -144,6 +144,55 @@
           />
         </n-flex>
       </n-card>
+      <n-card class="set-item" :class="{ 'input-mode': isInputMode }">
+        <div class="label">
+          <div class="label-header">
+            <div class="info" style="display: flex; flex-direction: column">
+              <n-text class="name">任务栏歌词字体</n-text>
+              <n-text class="tip" :depth="3"> 任务栏歌词使用的字体 </n-text>
+            </div>
+            <Transition name="fade" mode="out-in">
+              <n-button
+                :disabled="taskbarFontFamily === 'system-ui'"
+                type="primary"
+                strong
+                secondary
+                @click="saveTaskbarLyricFont('system-ui')"
+              >
+                恢复默认
+              </n-button>
+            </Transition>
+          </div>
+        </div>
+        <n-flex align="center">
+          <s-input
+            v-if="settingStore.fontSettingStyle === 'custom'"
+            :value="taskbarFontFamily"
+            :update-value-on-input="false"
+            placeholder="输入字体名称"
+            class="set"
+            @update:value="(val) => saveTaskbarLyricFont(val)"
+          />
+          <n-select
+            v-else-if="settingStore.fontSettingStyle === 'multi'"
+            :value="fontFamilyToArray(taskbarFontFamily)"
+            :options="getOptions('desktop')"
+            class="set"
+            filterable
+            multiple
+            tag
+            @update:value="(val: string[]) => saveTaskbarLyricFont(fontArrayToFamily(val))"
+          />
+          <n-select
+            v-else-if="settingStore.fontSettingStyle === 'single'"
+            :value="fontFamilyToDisplay(taskbarFontFamily)"
+            :options="getOptions('desktop')"
+            class="set"
+            filterable
+            @update:value="(val) => saveTaskbarLyricFont(fontDisplayToFamily(val))"
+          />
+        </n-flex>
+      </n-card>
     </div>
     <div class="set-list">
       <n-h3 prefix="bar">歌词字体</n-h3>
@@ -208,6 +257,7 @@
 
 <script setup lang="ts">
 import { useSettingStore } from "@/stores";
+import { TASKBAR_IPC_CHANNELS } from "@/types/shared";
 import { isElectron } from "@/utils/env";
 import type { SelectOption } from "naive-ui";
 import { lyricFontConfigs } from "@/utils/lyric/lyricFontConfig";
@@ -217,9 +267,10 @@ import { cloneDeep, isEqual } from "lodash-es";
 
 const settingStore = useSettingStore();
 
+// 任务栏歌词字体
+const taskbarFontFamily = ref("system-ui");
 // 系统字体选项
 const systemFonts = ref<SelectOption[]>([]);
-
 // 桌面歌词配置
 const desktopLyricConfig = reactive<LyricConfig>({ ...defaultDesktopLyricConfig });
 
@@ -342,6 +393,18 @@ const fontArrayToFamily = (fontArray: string[]): string => {
 };
 
 // 获取桌面歌词配置
+const getTaskbarLyricConfig = async () => {
+  if (!isElectron) return;
+  const config = await window.electron.ipcRenderer.invoke(TASKBAR_IPC_CHANNELS.GET_OPTION);
+  if (config?.fontFamily) taskbarFontFamily.value = config.fontFamily;
+};
+
+const saveTaskbarLyricFont = (fontFamily: string) => {
+  if (!isElectron) return;
+  taskbarFontFamily.value = fontFamily;
+  window.electron.ipcRenderer.send(TASKBAR_IPC_CHANNELS.SET_OPTION, { fontFamily }, true);
+};
+
 const getDesktopLyricConfig = async () => {
   if (!isElectron) return;
   const config = await window.electron.ipcRenderer.invoke("desktop-lyric:get-option");
@@ -375,6 +438,7 @@ const saveDesktopLyricConfig = (val?: string) => {
 onMounted(() => {
   getAllSystemFonts();
   getDesktopLyricConfig();
+  getTaskbarLyricConfig();
   window.electron.ipcRenderer.on("desktop-lyric:update-option", onLyricConfigUpdate);
 });
 

src/components/Modal/Setting/FullscreenPlayerManager.vue

@@ -42,6 +42,7 @@ const items: Item[] = [
   { label: "显示复制歌词", key: "copyLyric" },
   { label: "显示歌词调整", key: "lyricOffset" },
   { label: "显示歌词设置", key: "lyricSettings" },
+  { label: "显示评论数量", key: "commentCount" },
 ];
 
 const updateSetting = (key: FullscreenPlayerElementKey, val: boolean) => {

src/components/Player/FullPlayer.vue

@@ -121,9 +121,7 @@ const noLrc = computed<boolean>(() => {
 });
 
 /** 是否处于纯净模式 */
-const pureLyricMode = computed<boolean>(
-  () => statusStore.pureLyricMode && musicStore.isHasLrc,
-);
+const pureLyricMode = computed<boolean>(() => statusStore.pureLyricMode && musicStore.isHasLrc);
 
 /* 是否显示全屏封面 */
 const showFullScreenCover = computed<boolean>(
@@ -293,7 +291,7 @@ onBeforeUnmount(() => {
       height: 100%;
       display: flex;
       flex-direction: column;
-      mix-blend-mode: v-bind('settingStore.lyricsBlendMode');
+      mix-blend-mode: v-bind("settingStore.lyricsBlendMode");
       transition:
         width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
         opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);