fix(taskbar-lyric): 修复任务栏歌词鼠标命中区域错位

imsyy · imsyy · commit 566bc036ef59 · 2026-04-17T17:45:45.000+08:00
close #940
diff --git a/electron/main/windows/taskbar-lyric-window.ts b/electron/main/windows/taskbar-lyric-window.ts
@@ -42,14 +42,11 @@ class TaskbarLyricWindow {
   private registryWatcher: RegistryWatcher | null = null;
   private uiaWatcher: UiaWatcher | null = null;
   private trayWatcher: TrayWatcher | null = null;
-  private currentWidth = 300;
   private themeListener: (() => void) | null = null;
   private animationTimer: NodeJS.Timeout | null = null;
   private service: TaskbarService | null = null;
   private useAnimation = false;
   private isNativeDisposed = false;
-  private contentWidth = 300;
-  private maxWidthPercent = 30;
   private isFadingOut = false;
   private shouldBeVisible = false;
 
@@ -88,13 +85,16 @@ class TaskbarLyricWindow {
 
     const primaryDisplay = screen.getPrimaryDisplay();
     const maxWindowWidth = primaryDisplay.workAreaSize.width;
+    // 初始尺寸故意开大（覆盖任何可能的任务栏宽高），避免 transparent+SetParent 后
+    // Chromium 合成器视口不随 setBounds 增长、超出初始尺寸区域因 alpha=0 吞掉鼠标事件
+    // （表现为"只有前面一点点可以操作"）。后续 setBounds 只做缩小，视口始终覆盖整个 HWND
     this.win = createWindow({
-      width: this.currentWidth,
-      height: 48,
-      minWidth: 100,
-      minHeight: 30,
+      width: 3000,
+      height: 200,
+      minWidth: 0,
+      minHeight: 0,
       maxWidth: maxWindowWidth,
-      maxHeight: 100,
+      maxHeight: 200,
       type: "toolbar",
       frame: false,
       transparent: true,
@@ -149,9 +149,9 @@ class TaskbarLyricWindow {
     this.win.once("ready-to-show", () => {
       if (this.win) {
         this.embed();
-        if (this.shouldBeVisible) {
-          this.win.show();
-        }
+        // 不在此处 show，让 applyLayout 首次 setBounds 到正确尺寸后再触发 show
+        // （applyLayout 里 shouldBeVisible && !isVisible 的分支会处理），
+        // 避免 3000x200 的初始大窗口在屏幕上闪现
         this.updateLayout(false);
         sendTheme();
       }
@@ -198,11 +198,12 @@ class TaskbarLyricWindow {
     return this.win;
   }
 
-  setContentWidth(width: number) {
-    if (this.contentWidth !== width) {
-      this.contentWidth = width;
-      this.debouncedUpdateLayout();
-    }
+  /**
+   * 保留接口用于 manager 分发兼容（floating 模式使用）；taskbar 模式不需要根据
+   * 内容宽度动态收缩，窗口按 autoMaxWidth/maxWidth 设置占空间
+   */
+  setContentWidth(_width: number) {
+    // no-op
   }
 
   embed() {
@@ -215,32 +216,24 @@ class TaskbarLyricWindow {
     }
   }
 
-  private getMaxWidthPercent(screenWidth: number) {
+  /** 返回期望的 HWND 物理像素宽度（autoMaxWidth 开启时返回屏幕宽度，由 Rust 侧据可用空间裁剪） */
+  private getDesiredPhysicalWidth() {
     const store = useStore();
-    let maxWidthSetting = store.get("taskbar.maxWidth", 30);
-    if (maxWidthSetting > 100) {
-      // Assume it's pixels, convert to percent
-      const converted = Math.round((maxWidthSetting / screenWidth) * 100);
-      maxWidthSetting = Math.min(Math.max(converted, 10), 100);
-      store.set("taskbar.maxWidth", maxWidthSetting);
-      return maxWidthSetting;
+    const primaryDisplay = screen.getPrimaryDisplay();
+    const scaleFactor = primaryDisplay.scaleFactor;
+    const autoMaxWidth = store.get("taskbar.autoMaxWidth", true);
+    if (autoMaxWidth) {
+      // 尽量撑满可用空间
+      return Math.round(primaryDisplay.workAreaSize.width * scaleFactor);
     }
-    return Math.min(Math.max(maxWidthSetting, 10), 100);
+    const maxWidthLogical = store.get("taskbar.maxWidth", 400);
+    return Math.round(maxWidthLogical * scaleFactor);
   }
 
   updateLayout(animate: boolean = false) {
     if (!this.win || !this.service) return;
     this.useAnimation = animate;
-
-    const primaryDisplay = screen.getPrimaryDisplay();
-    this.maxWidthPercent = this.getMaxWidthPercent(primaryDisplay.workAreaSize.width);
-    const scaleFactor = primaryDisplay.scaleFactor;
-    const maxWidthSetting = Math.round(
-      (primaryDisplay.workAreaSize.width * this.maxWidthPercent) / 100,
-    );
-    const requestWidth = Math.round(maxWidthSetting * scaleFactor);
-
-    this.service.update(requestWidth);
+    this.service.update(this.getDesiredPhysicalWidth());
   }
 
   private applyLayout(layout: TaskbarLayout | null) {
@@ -256,17 +249,13 @@ class TaskbarLyricWindow {
       const scaleFactor = primaryDisplay.scaleFactor;
       const store = useStore();
       const GAP = store.get("taskbar.margin", 10) * scaleFactor;
-      const maxWidthSetting = Math.round(
-        (primaryDisplay.workAreaSize.width * this.maxWidthPercent) / 100,
-      );
       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
-        : maxWidthSetting * scaleFactor;
-      const minWidthPercent = Math.min(Math.max(store.get("taskbar.minWidth", 10), 0), 50);
-      const MIN_WIDTH_PHYSICAL =
-        Math.round((primaryDisplay.workAreaSize.width * minWidthPercent) / 100) * scaleFactor;
+      // autoMaxWidth 开启时无上限（撑满可用空间），关闭时按设置的像素值（逻辑像素）限制
+      const autoMaxWidth = store.get("taskbar.autoMaxWidth", true);
+      const maxWidthLogical = store.get("taskbar.maxWidth", 400);
+      const MAX_WIDTH_PHYSICAL = autoMaxWidth
+        ? Number.POSITIVE_INFINITY
+        : maxWidthLogical * scaleFactor;
 
       let targetBounds: Electron.Rectangle = {
         x: 0,
@@ -303,8 +292,9 @@ class TaskbarLyricWindow {
         const finalPhysicalY = 0;
         let finalPhysicalWidth = 0;
 
+        // 取可用空间与最大宽度限制的较小值；空间 <= 0 时返回 0 表示该侧不可用
         const clampWidth = (space: number) => {
-          if (space < MIN_WIDTH_PHYSICAL) return 0;
+          if (space <= 0) return 0;
           return Math.min(space, MAX_WIDTH_PHYSICAL);
         };
 
@@ -319,8 +309,8 @@ class TaskbarLyricWindow {
           finalPhysicalX = effectiveRightAnchor - finalPhysicalWidth - GAP;
           shouldCenter = false; // Right Align
         } else if (isCentered) {
-          // 自动判断 (Win11 居中)
-          if (leftSpaceNet >= MIN_WIDTH_PHYSICAL) {
+          // 自动判断 (Win11 居中): 选空间大的一侧
+          if (leftSpaceNet >= rightSpaceNet && leftSpaceNet > 0) {
             finalPhysicalWidth = clampWidth(leftSpaceNet);
             finalPhysicalX = widgetsRightEdge + GAP;
             shouldCenter = true; // Left Align
@@ -336,16 +326,12 @@ class TaskbarLyricWindow {
           shouldCenter = false; // Right Align
         }
 
-        // processLog.info(finalPhysicalWidth, finalPhysicalX);
-
         if (finalPhysicalWidth <= 0) {
           processLog.warn("[TaskbarLyric] 无可用空间");
           this.win.hide();
           return;
         }
 
-        this.currentWidth = Math.round(finalPhysicalWidth / scaleFactor);
-
         targetBounds = {
           x: finalPhysicalX,
           y: finalPhysicalY,
diff --git a/src/components/Setting/config/lyric.ts b/src/components/Setting/config/lyric.ts
@@ -993,43 +993,38 @@ export const useLyricSettings = (): SettingConfig => {
             }),
           },
           {
-            key: "taskbarLyricMaxWidth",
-            label: "最大宽度",
-            type: "slider",
-            description: "任务栏歌词的最大宽度占屏幕比例",
-            min: 10,
-            max: 100,
-            step: 1,
+            key: "taskbarLyricAutoMaxWidth",
+            label: "宽度自动",
+            type: "switch",
+            description: "开启后占满任务栏的可用空间；关闭后按最大宽度限制",
+            show: () => taskbarLyricConfig.mode === "taskbar",
             value: computed({
-              get: () => taskbarLyricConfig.maxWidth,
+              get: () => taskbarLyricConfig.autoMaxWidth,
               set: (v) => {
-                taskbarLyricConfig.maxWidth = v ?? 30;
+                taskbarLyricConfig.autoMaxWidth = v ?? true;
+                saveTaskbarLyricConfig({ autoMaxWidth: taskbarLyricConfig.autoMaxWidth });
               },
             }),
-            action: () => {
-              saveTaskbarLyricConfig({ maxWidth: taskbarLyricConfig.maxWidth });
-            },
-            suffix: "%",
           },
           {
-            key: "taskbarLyricMinWidth",
-            label: "最小宽度",
+            key: "taskbarLyricMaxWidth",
+            label: "最大宽度",
             type: "slider",
-            description: "任务栏歌词可用空间低于此比例时自动隐藏",
-            show: () => taskbarLyricConfig.mode === "taskbar",
-            min: 0,
-            max: 50,
-            step: 1,
+            description: "超出可用空间时仍以可用空间为准，避免挤占",
+            show: () => taskbarLyricConfig.mode === "taskbar" && !taskbarLyricConfig.autoMaxWidth,
+            min: 200,
+            max: 800,
+            step: 20,
             value: computed({
-              get: () => taskbarLyricConfig.minWidth,
+              get: () => taskbarLyricConfig.maxWidth,
               set: (v) => {
-                taskbarLyricConfig.minWidth = v ?? 10;
+                taskbarLyricConfig.maxWidth = v ?? 400;
               },
             }),
             action: () => {
-              saveTaskbarLyricConfig({ minWidth: taskbarLyricConfig.minWidth });
+              saveTaskbarLyricConfig({ maxWidth: taskbarLyricConfig.maxWidth });
             },
-            suffix: "%",
+            suffix: "px",
           },
           {
             key: "taskbarLyricMargin",
@@ -1049,33 +1044,6 @@ export const useLyricSettings = (): SettingConfig => {
             }),
             defaultValue: 10,
           },
-          {
-            key: "taskbarLyricAutoShrink",
-            label: "自动收缩",
-            type: "switch",
-            description: "关闭后将固定占据设置的最大宽度",
-            show: () => taskbarLyricConfig.mode === "taskbar",
-            value: computed({
-              get: () => taskbarLyricConfig.autoShrink,
-              set: (v) => {
-                if (v) {
-                  window.$dialog.warning({
-                    title: "提示",
-                    content: "可能会导致右侧对齐的任务栏歌词异常抖动，是否开启？",
-                    positiveText: "开启",
-                    negativeText: "取消",
-                    onPositiveClick: () => {
-                      taskbarLyricConfig.autoShrink = true;
-                      saveTaskbarLyricConfig({ autoShrink: true });
-                    },
-                  });
-                } else {
-                  taskbarLyricConfig.autoShrink = false;
-                  saveTaskbarLyricConfig({ autoShrink: false });
-                }
-              },
-            }),
-          },
           {
             key: "taskbarLyricPosition",
             label: "显示位置",
diff --git a/src/types/shared/taskbar-ipc.ts b/src/types/shared/taskbar-ipc.ts
@@ -5,16 +5,14 @@ export type Milliseconds = number;
 export interface TaskbarConfig {
   /** 模式 */
   mode: "taskbar" | "floating";
-  /** 最大宽度 */
+  /** 宽度自动——开启时占满可用空间，关闭时按 maxWidth 限制 */
+  autoMaxWidth: boolean;
+  /** 最大宽度（逻辑像素）——仅在 autoMaxWidth 关闭时生效，超出可用空间时以可用空间为准 */
   maxWidth: number;
   /** 位置 */
   position: "automatic" | "left" | "right";
-  /** 自动收缩 */
-  autoShrink: boolean;
   /** 边距 */
   margin: number;
-  /** 最小宽度 */
-  minWidth: number;
   /** 悬浮对齐 */
   floatingAlign: "left" | "right";
   /** 悬浮自动宽度 */
@@ -120,11 +118,10 @@ export type SyncStatePayload =
 /** 默认任务栏歌词配置 */
 export const DEFAULT_TASKBAR_CONFIG: TaskbarConfig = {
   mode: "taskbar",
-  maxWidth: 30,
+  autoMaxWidth: true,
+  maxWidth: 400,
   position: "automatic",
-  autoShrink: false,
   margin: 10,
-  minWidth: 10,
   floatingAlign: "right",
   floatingAutoWidth: true,
   floatingWidth: 300,
