环境
- ReadAny 1.3.6(官方 dmg,
/Applications/ReadAny.app,非 dev)
- macOS 27.0 (26A428),Apple M4 Pro,2x 显示
- 出现位置:桌面端非全屏窗口,左侧栏上方 tab bar 的左上角 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(两个值,都很小):
trafficLightPosition.y: 10 → 18:让红绿灯顶部回到 9pt / 中心 16pt,即与 macOS 默认位置一致,也正好是 32pt tab bar 的中心。按旧版 macOS 的标准几何(28pt 标题栏、12pt 按钮、默认内边距 8pt)推算,y=18 同样得到中心 16pt,因此对旧系统不引入回归。
TabBar 的 paddingLeft: 68 → 80(= 72 + 8pt 留白):新几何下不再重叠,旧几何下多出的 12pt 空白无害。
备注
- 也可以直接删掉
trafficLightPosition(走系统默认:本机就是 32pt 标题栏 / 中心 16pt),代价是放弃现在的 x=12 微调。
- 更彻底的做法是在 Rust 侧读
standardWindowButton(...).frame 把真实红绿灯几何传给前端,避免以后再随系统改版错位;这次先做最小修复。
- 顺带一提:
tao 这个 y 的语义容易踩坑,可能也值得在 tauri.conf.json 旁边留个注释(JSON 不支持注释,所以我把推导写进了 TabBar.tsx 的常量注释里)。
环境
/Applications/ReadAny.app,非 dev)现象
Home 按钮与系统红绿灯既垂直错位又水平贴住:
TabBar左上角)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现在是:tao 的实现(
tao/src/platform_impl/macos/view.rs::inset_traffic_lights)只做两件事:AppKit 会把按钮按与容器底边固定间距摆放,因此实际顶部 =
y − 默认内边距,而不是y。用同样的 styleMask(
fullSizeContentView+titlebarAppearsTransparent+ 隐藏 title)在本机跑最小 AppKit 探针,套用上面的算法实测:trafficLightPosition.yy=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(两个值,都很小):
trafficLightPosition.y: 10 → 18:让红绿灯顶部回到 9pt / 中心 16pt,即与 macOS 默认位置一致,也正好是 32pt tab bar 的中心。按旧版 macOS 的标准几何(28pt 标题栏、12pt 按钮、默认内边距 8pt)推算,y=18同样得到中心 16pt,因此对旧系统不引入回归。TabBar的paddingLeft: 68 → 80(= 72 + 8pt 留白):新几何下不再重叠,旧几何下多出的 12pt 空白无害。备注
trafficLightPosition(走系统默认:本机就是 32pt 标题栏 / 中心 16pt),代价是放弃现在的x=12微调。standardWindowButton(...).frame把真实红绿灯几何传给前端,避免以后再随系统改版错位;这次先做最小修复。tao这个y的语义容易踩坑,可能也值得在tauri.conf.json旁边留个注释(JSON 不支持注释,所以我把推导写进了TabBar.tsx的常量注释里)。