Skip to content

fix(startup): splash 透明背景 + 卡片化，避免长启动时左半白屏 #291

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.

Sign up for GitHub

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

Merged
appergb merged 1 commit into from
May 6, 2026
Merged

fix(startup): splash 透明背景 + 卡片化，避免长启动时左半白屏 #291

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 22 additions & 2 deletions openless-all/app/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,18 +147,38 @@ function isWindowHotkeyCandidate(event: KeyboardEvent): boolean {
}

function StartupShell() {
// 用透明背景：main window 是 transparent + macOSPrivateApi（NSVisualEffectView 磨砂）。
// 之前用 linear-gradient(rgba(245,245,247,0.96)...) 会盖过 macOS vibrancy，启动时
// 长时间在 'checking' phase（凭据迁移 / 权限 probe 慢）会让窗口看起来「左侧白屏 +
// 右侧磨砂」割裂。现在背景全透明，让磨砂统一展开，提示文字 + icon 用一个轻量
// pill 卡片承载，跟 capsule 视觉一致。
return (
<div
style={{
minHeight: '100vh',
display: 'grid',
placeItems: 'center',
background: 'linear-gradient(180deg, rgba(245,245,247,0.96) 0%, rgba(232,232,236,0.96) 100%)',
background: 'transparent',
color: 'var(--ol-ink-3)',
fontFamily: 'var(--ol-font-sans)',
}}
>
<div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13, fontWeight: 500 }}>
<div
style={{
display: 'flex',
alignItems: 'center',
gap: 10,
fontSize: 13,
fontWeight: 500,
padding: '10px 16px',
borderRadius: 999,
background: 'rgba(255, 255, 255, 0.55)',
backdropFilter: 'blur(20px) saturate(180%)',
WebkitBackdropFilter: 'blur(20px) saturate(180%)',
border: '0.5px solid rgba(0, 0, 0, 0.06)',
boxShadow: '0 4px 14px -6px rgba(0, 0, 0, 0.18), 0 0 0 0.5px rgba(0,0,0,0.04)',
}}
>
<img src="AppIcon.png" alt="" style={{ width: 18, height: 18, borderRadius: 4 }} />
<span>OpenLess 正在启动</span>
</div>
Expand Down
Loading