Skip to content

[Bug] macOS 桌面端:左上角 Home 按钮与系统红绿灯按钮错位(高 8pt,hover 区伸进红绿灯) #792

Description

@Gyarados4157

环境

  • ReadAny 1.3.6(官方 dmg,/Applications/ReadAny.app,非 dev)
  • macOS 27.0 (26A428),Apple M4 Pro,2x 显示
  • 出现位置:桌面端非全屏窗口,左侧栏上方 tab bar 的左上角 Home 按钮

现象

左上角放大,标注了红绿灯中心与 Home 按钮中心

整窗截图

Home 按钮与系统红绿灯既垂直错位又水平贴住:

元素 实测(窗口坐标,来自截图 + 代码坐标对齐,误差 ≤1pt)
红绿灯按钮组 每个按钮 14×14pt,中心距 23pt;左边缘 x=12,顶部 y=1,垂直中心 y=8;右边缘 x=72
Home 按钮(TabBar 左上角) 图标盒 18px,居中于 32pt 高(h-8)的行 → 垂直中心 y=16;图标盒左边缘 x=72;hover 背景左边缘 x=68

也就是红绿灯整体比 Home 按钮高 8pt,同时 Home 按钮的 hover 热区(x=68 起)已经伸进红绿灯组 4pt(红绿灯组右边缘 72pt,图标盒与绿点只差 0~1.5pt,视觉上是贴住的)。

根因(两个独立问题叠加)

1. trafficLightPosition.y 的实际语义不是"按钮顶部 = y"

packages/app/src-tauri/tauri.conf.json 现在是:

"trafficLightPosition": { "x": 12, "y": 10 }

tao 的实现(tao/src/platform_impl/macos/view.rs::inset_traffic_lights)只做两件事:

let title_bar_frame_height = close_rect.size.height + y;   // 容器高 = 按钮高 + y
title_bar_rect.size.height = title_bar_frame_height;
title_bar_rect.origin.y = window.frame().size.height - title_bar_frame_height; // 贴着窗口顶
// …然后只改按钮的 origin.x,y 完全交给 AppKit

AppKit 会把按钮按与容器底边固定间距摆放,因此实际顶部 = y − 默认内边距,而不是 y。

用同样的 styleMask(fullSizeContentView + titlebarAppearsTransparent + 隐藏 title)在本机跑最小 AppKit 探针,套用上面的算法实测:

trafficLightPosition.y 按钮顶部 垂直中心
不设置(系统默认) 9pt 16pt
10(当前值) 1pt 8pt
18 9pt 16pt

y=10 期望得到"顶部 10pt、中心 16pt",实际是"顶部 1pt、中心 8pt" —— 正好解释了截图里 8pt 的错位。

2. 前端预留的 68pt 是按旧的红绿灯尺寸写的,新系统下不够

现在(本机 27.0 实测)红绿灯是 14pt 按钮 + 23pt 中心距;此前长期是 12pt + 20pt,红绿灯组宽度相应从 52pt 变成 60pt:

  • 旧:12 + 3×12 + 2×8 = 64pt → paddingLeft: 68 正是 64 + 4pt 留白
  • 新:12 + 3×14 + 2×9 = 72pt → 已经超过 68,留白归零,hover 背景压到绿点上

建议修复

见 PR(两个值,都很小):

  1. trafficLightPosition.y: 10 → 18:让红绿灯顶部回到 9pt / 中心 16pt,即与 macOS 默认位置一致,也正好是 32pt tab bar 的中心。按旧版 macOS 的标准几何(28pt 标题栏、12pt 按钮、默认内边距 8pt)推算,y=18 同样得到中心 16pt,因此对旧系统不引入回归。
  2. TabBar 的 paddingLeft: 68 → 80(= 72 + 8pt 留白):新几何下不再重叠,旧几何下多出的 12pt 空白无害。

备注

  • 也可以直接删掉 trafficLightPosition(走系统默认:本机就是 32pt 标题栏 / 中心 16pt),代价是放弃现在的 x=12 微调。
  • 更彻底的做法是在 Rust 侧读 standardWindowButton(...).frame 把真实红绿灯几何传给前端,避免以后再随系统改版错位;这次先做最小修复。
  • 顺带一提:tao 这个 y 的语义容易踩坑,可能也值得在 tauri.conf.json 旁边留个注释(JSON 不支持注释,所以我把推导写进了 TabBar.tsx 的常量注释里)。

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions