Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 修复 macOS 上 1px 白边问题以及圆角问题 #263

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

CakeAL
Copy link

@CakeAL CakeAL commented Jul 13, 2024

No description provided.

@CakeAL
Copy link
Author

CakeAL commented Jul 14, 2024

#259

@Borber
Copy link
Owner

Borber commented Jul 14, 2024

你好呀,非常感谢的 PR. ヾ(≧▽≦*)o

我现在手边没有mac电脑,在 windows 上 review了一下.

  1. 那个 1px 是通过设置窗口透明来解决的吗? 我之前也考虑过这个方案, 但感觉不是那么和谐, 以及也是因为windows上会奇怪的导致底部超出 1px, 所以才会莫名其妙减去 1px.
  2. macos 圆角效果我觉得没有问题, 确实应该更符合原生的效果, 但是感觉如果 win10 和 win11 也直接覆盖这个就不太妙了

如果你愿意的话, 可以 添加一个返回系统类型的函数, ( 这边建议是使用库 能识别具体版本号, 比如 win10 win11, 可能后面还可以搭配 window-vibrancy 添加不同的窗口效果, 例如 blur

然后在前端对这个函数结果进行判断, 如果是 mac 的话就应用相应的 css, 甚至这里也可以直接通过 js 进行修改 element 的 style (root 在 index.html 不太好进行响应式的判断) 也可以将高度的推算进行延后, 比如 root 还是 100% 在 panel 里面进行高度的限制都可以.

这是我的一点想法, 以及再次感谢

这是当前 pr 在 win10 上的运行效果, 可以看到, 圆角在边角上的透明效果不是很好.
image

@CakeAL
Copy link
Author

CakeAL commented Jul 14, 2024

  1. 是的,其实在macOS上并没有阴影效果,.shadow(true) 貌似不起作用。
  2. 我在 Windows 11 上试了一下,但是当时并没有细致观察阴影效果的问题(因为11本身窗口就是圆角的,让我以为本身就有圆角,所以在macOS上才加了圆角,在win11上看起来也没问题,但是win10上正常应该是原来没有圆角的),产生这个问题的原因应该是,阴影是根据长方形窗口判定的(win11上可能是圆角窗口,所以当时并没有发现这个问题),并不是根据 #root

之后我再修改一下。

关于其他的内容我都愿意尝试,窗口效果的话,可以直接用css实现(甚至可以给用户一个选择,让他们自定义 background),然后搭配上目前的背景透明,如果想用更原生的效果的话,确实使用这个库会更好而且也是支持macOS的(但是这个确实更好,css总觉得不够快)。

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