From fa30161f524c9cba9cb0d56a4a579ddb3ab06cf8 Mon Sep 17 00:00:00 2001
From: baiqing <lbx12309@icloud.com>
Date: Wed, 6 May 2026 20:05:46 +0800
Subject: [PATCH] =?UTF-8?q?fix(startup):=20splash=20=E9=80=8F=E6=98=8E?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=20+=20=E5=8D=A1=E7=89=87=E5=8C=96=EF=BC=8C?=
 =?UTF-8?q?=E9=81=BF=E5=85=8D=E9=95=BF=E5=90=AF=E5=8A=A8=E6=97=B6=E5=B7=A6?=
 =?UTF-8?q?=E5=8D=8A=E7=99=BD=E5=B1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户反馈：当启动时间较长时（凭据迁移 / 权限 probe / hotkey hook 还没
ready），窗口左侧出现白色矩形并显示「OpenLess 正在启动」，本应是纯
磨砂玻璃背景。

根因：main window 在 tauri.conf.json 是 transparent + macOSPrivateApi
(NSVisualEffectView vibrancy)。但 StartupShell 之前用：

    background: linear-gradient(180deg, rgba(245,245,247,0.96), ...)

96% 不透明渐变盖过 vibrancy。在窗口内容布局首帧或啥的时候，左侧 paint
StartupShell 浅灰，右侧未完成 vibrancy → 视觉割裂「左白右磨砂」。

修：StartupShell 容器改 background: transparent 让 vibrancy 全屏展开；
提示文字 + icon 用一个圆角 pill 卡片承载（rgba(255,255,255,0.55) +
backdrop-filter blur），跟 Capsule 视觉一致。
---
 openless-all/app/src/App.tsx | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/openless-all/app/src/App.tsx b/openless-all/app/src/App.tsx
index b1baac39..d047bf72 100644
--- a/openless-all/app/src/App.tsx
+++ b/openless-all/app/src/App.tsx
@@ -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>