Skip to content

fix(mac): 修复灵动岛刘海对齐 - #44

Merged
imsyy merged 6 commits into
SPlayer-Dev:devfrom
xingranya:fix/mac-dynamic-island
Jun 22, 2026
Merged

imsyy merged 6 commits into
SPlayer-Dev:devfrom
xingranya:fix/mac-dynamic-island

Conversation

@xingranya

Copy link
Copy Markdown
Contributor

1. macOS 刘海屏灵动岛定位

  • 窗口尺寸修复 (electron/main/window/dynamicIsland.ts): 覆盖通用窗口默认 minWidth/minHeight,避免灵动岛被默认 800x600 最小尺寸撑大。
  • 刘海基准对齐 (electron/main/window/dynamicIsland.ts): 基于实测刘海尺寸按 display.scaleFactor 换算逻辑尺寸,并在 2x 屏下使用稳定的刘海基准宽高。
  • 顶部吸附修复 (electron/main/window/dynamicIsland.ts): snapped 模式改为基于 display.bounds 顶边居中吸附,不再使用 workArea.y,避免显示到菜单栏下方或恢复旧坐标。
  • 启动与拖拽纠偏 (electron/main/window/dynamicIsland.ts): 居中吸附时清空旧 x/y,宽高变化和拖回顶部释放后都会重新对齐真实刘海位置。

2. 灵动岛外观与歌词适配

  • 刘海融合轮廓 (windows/dynamic-island/App.vue): snapped 模式改为透明窗口中的自定义 SVG 轮廓,黑色区域从屏幕顶边开始绘制,与真机刘海视觉融合。
  • 圆角与边缘优化 (windows/dynamic-island/App.vue): 顶部两侧增加小圆弧对接处理,底部圆角与专辑图圆角保持呼应,减少突兀直角和错位感。
  • 长歌词自适应 (windows/dynamic-island/App.vue): 放宽最大展开宽度,并在渲染端增加文本缩放与省略策略,避免长歌词把窗口撑成异常长条或被硬裁断。
  • floating 模式保留 (windows/dynamic-island/App.vue): 拖离顶部后仍保持原胶囊浮窗交互,不影响自由移动使用场景。

3. 验证

  • 执行 pnpm typecheck,类型检查通过。
  • 执行 pnpm build:mac,构建通过,使用正常。
  • 手动在 MacBook 刘海屏上验证灵动岛顶部居中、贴合真机刘海,短歌词最小宽度覆盖刘海,长歌词会自动扩展并保持可读。
qq_pic_merged_1781960446849

imsyy

This comment was marked as off-topic.

@imsyy imsyy left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🙏 感谢您的贡献,但本 PR 未对操作系统加以区分,将 macOS 刘海屏的适配逻辑无条件应用到了所有平台,导致在 Windows / Linux 上出现以下回归:

  1. 非 macOS 平台顶部出现多余黑色区域、窗口高度偏大
    windows/dynamic-island/App.vue 中 windowHeight 在 snapped 状态下无条件叠加 NOTCH_HEIGHT + NOTCH_TOP_FILL(32px),该区域由
    notch-shape 绘制为纯色填充。macOS 下其覆盖于物理刘海之上不可见,非刘海平台则直接暴露为顶部黑条。

  2. 展开动画由窗口宽度变化退化为内部歌词伸缩
    改动前 .root 为 width: fit-content 且承载背景色,可见背景随 .lyric 的宽度过渡平滑伸缩;改动后背景移至铺满窗口的
    notch-shape(及 width: 100% 的根节点),而窗口宽度经 applyDynamicIslandWidth 一次性
    setBounds,无逐帧过渡。结果为背景尺寸瞬变、仅内部文本参与动画,该退化在 macOS 上同样存在。Windows
    因最小宽度被固定为刘海宽度(getWidthLimits 的 min: notch.width,100% 缩放下约 368px),窗口对多数歌词不再 resize,退化更为明显。

  3. “吸附时居中”配置失效
    computeSnappedPos、saveDynamicIslandState、applyDynamicIslandSnapCentered 均移除了对 config.snapCentered
    的判断,吸附位置一律居中,致使 system.dynamicIsland.snapCentered 设置项不再生效。

修改建议

刘海融合外观(顶部填充、notch-shape 渲染、强制居中)的成立前提是“存在居中的物理刘海”,仅在 macOS 成立,且与原胶囊外观差异较大。建议将其作为独立设置项显式提供,而非由平台自动决定:

  • 新增“刘海融合”开关,仅在 macOS 展示该设置项(参照 taskbarLyric 的平台过滤);默认关闭。
  • 开关关闭时完全回退改动前的原逻辑(胶囊外观、可变宽度、workArea 吸附、无顶部填充),保证非 macOS 及未开启的用户行为不变。
  • 开关开启时启用刘海融合,并隐含强制居中;此时“吸附时居中”可禁用或隐藏,以规避“融合开启 + 关闭居中”导致的悬空错位黑块。
  • 保留“吸附时居中”配置:在未开启刘海融合时其应正常生效(含关闭居中时保留拖拽后的水平位置)。
  • 平台判断可复用现有的 isMac,主进程引自 @main/utils/config,渲染端引自 @/utils/config。
  • 此外请评估恢复 snapped 状态下背景宽度的过渡动画;若 macOS 上的瞬变为预期行为,请在 PR 中说明。

@xingranya

Copy link
Copy Markdown
Contributor Author

感谢批评指正,是我考虑欠佳,我将完善好该 pr

@xingranya
xingranya requested a review from imsyy June 22, 2026 05:51
@imsyy
imsyy merged commit 62a818c into SPlayer-Dev:dev Jun 22, 2026
1 check passed
roarrabbit pushed a commit to roarrabbit/SPlayer-Next that referenced this pull request Aug 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants