Skip to content

feat(ui): 划词追问框与语音胶囊磨砂玻璃质感#519

Merged
appergb merged 2 commits into
betafrom
feat/frosted-glass-overlays
May 21, 2026
Merged

feat(ui): 划词追问框与语音胶囊磨砂玻璃质感#519
appergb merged 2 commits into
betafrom
feat/frosted-glass-overlays

Conversation

@appergb
Copy link
Copy Markdown
Collaborator

@appergb appergb commented May 21, 2026

User description

背景

划词追问框(qa 窗口)与语音胶囊(capsule 窗口)都是 Tauri 的 transparent: true 浮窗。它们原本写了 backdrop-filter: blur() 想做毛玻璃,但 webview 无法模糊透明窗口背后的桌面像素 —— 这是 Tauri 已知的上游限制(tauri-apps/tauri#2827、#10064、#6876)。所以原来的 backdrop-filter 在这两个面上是死代码,三平台都不生效。

方案

不做真实高斯模糊(webview 做不到;原生 vibrancy / 截屏方案经评估后均排除),改用纯静态 CSS 的「假毛玻璃」

  • 半透明白底(体渐变 + 左上高光扫面)
  • 分形噪点颗粒(.ol-frost::before,磨砂质感来源)
  • 内描边高光 + 柔和阴影(宿主 box-shadow

零运行时 / 动画开销,macOS / Windows / Linux 像素一致。

改动

文件 改动
tokens.css 新增 --ol-frost-grain —— 不透明灰度分形噪点(inline SVG data URI)
global.css 新增 .ol-frost 类(::before 噪点层,z-index:-1 + isolation:isolate 保证噪点压在宿主背景之上、内容之下)
QaPanel.tsx 追问框外壳套用 .ol-frost,移除死的 backdrop-filter
Capsule.tsx 胶囊本体套用 .ol-frost,移除死的 backdrop-filter 及不再用到的 useBackdrop

范围说明

Capsule.tsxCircleButton(取消按钮)和「正在翻译」徽章另有各自的 backdrop-filter,本 PR 刻意不动:取消按钮的是页内模糊(非死代码),徽章的虽是死代码但属独立小组件,留待后续单独清理,避免本 PR 越界。

测试

  • tsc --noEmit 通过
  • vite build 通过
  • Chrome DevTools 模拟桌面背景下截图核对 qa / capsule 两个面;噪点 SVG 正常解码
  • macOS 真机 tauri build 跑过,磨砂层正常渲染
  • Windows / Linux 真机回归(CI / 后续)

🤖 Generated with Claude Code


PR Type

Enhancement, Bug fix


Description

  • Probe real network status and latency

  • Harden GitHub/update requests with timeouts

  • Add retry actions for failed states

  • Apply shared frosted-glass overlay styling


Diagram Walkthrough

flowchart LR
  A["Tauri backend commands"] -- "network probe / timeout fixes" --> B["Permissions & auth UI"]
  C["Update handling"] -- "error details / retry" --> D["About update controls"]
  E["Shared frosted CSS"] -- ".ol-frost styling" --> F["QaPanel & Capsule overlays"]
  G["Marketplace load error"] -- "retry button" --> H["Marketplace card"]
Loading

File Walkthrough

Relevant files
Bug fix
4 files
commands.rs
Add network probe and HTTP timeouts                                           
+40/-2   
AutoUpdate.tsx
Surface update errors and extend timeout                                 
+9/-1     
Marketplace.tsx
Add retry action for load failures                                             
+7/-2     
AboutUpdateControl.tsx
Show update errors with retry button                                         
+18/-3   
Enhancement
12 files
lib.rs
Register new network check command                                             
+1/-0     
Capsule.tsx
Apply frosted overlay styling to capsule                                 
+5/-6     
en.ts
Add network offline and retry strings                                       
+2/-0     
ja.ts
Add network offline and retry strings                                       
+2/-0     
ko.ts
Add network offline and retry strings                                       
+2/-0     
zh-CN.ts
Add network offline and retry strings                                       
+2/-0     
zh-TW.ts
Add network offline and retry strings                                       
+2/-0     
ipc.ts
Expose network check IPC helper                                                   
+12/-0   
QaPanel.tsx
Switch QA panel to frosted shell                                                 
+5/-7     
PermissionsSection.tsx
Report live network availability in settings                         
+38/-2   
global.css
Add reusable frosted glass utility class                                 
+35/-0   
tokens.css
Add frosted noise texture token                                                   
+7/-0     

baiqing and others added 2 commits May 20, 2026 20:49
1. 更新检查:超时从 8s 提至 15s,error 态展示具体错误原因 + 重试按钮
2. GitHub 登录:device flow 两个 HTTP 请求加 15s timeout,防网络差时永远卡住
3. 网络连通性:新增 check_network 命令(HEAD apic.openless.top + github.com),
   PermissionsSection 从硬编码"可用"改为真实探测 + 30s 轮询 + 离线重试
4. Marketplace:加载失败卡片增加重试按钮
5. i18n:五语言新增 networkOffline / settings.about.retryBtn

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
webview 无法模糊透明窗口背后的桌面(Tauri 上游限制 #2827/#10064/#6876),原 backdrop-filter 在 qa / capsule 透明浮窗里是死代码。改用纯静态 CSS 的「假毛玻璃」:半透明白底 + 分形噪点颗粒 + 内描边高光 + 柔和阴影,三平台像素一致、零运行时开销。

- tokens.css: 新增 --ol-frost-grain(不透明灰度分形噪点 data URI)
- global.css: 新增 .ol-frost 类,::before 叠噪点颗粒层
- QaPanel / Capsule: 外壳套用 .ol-frost,移除这两个面上死的 backdrop-filter
@github-actions
Copy link
Copy Markdown

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review

False Positive

Any 3xx response is treated as online, so a captive portal or proxy login page can make the app show Available even though cloud ASR/LLM requests still cannot succeed. That makes the new network indicator misleading in exactly the restricted-network case it is supposed to help with.

if let Ok(resp) = client.head(*url).send().await {
    if resp.status().is_success() || resp.status().is_redirection() {
        let ms = start.elapsed().as_millis() as u64;
        return NetworkCheckResult { online: true, latency_ms: Some(ms) };
    }

@appergb
Copy link
Copy Markdown
Collaborator Author

appergb commented May 21, 2026

关于 pr_agent 指出的网络检测 3xx → 在线 误报点:

该判断位于既有网络检测代码(commit c729fc59),不属于本 PR 的「磨砂玻璃」特性——本 PR 因 origin/beta 落后而连带携带了 c729fc59 这个上一会话已提交、未推送的修复 commit。

captive portal 误报是真实但边缘的场景,且正确修复需要校验响应内容/可达性(非一行能改),已记录为后续单独跟进,本次不在此 PR 内扩大范围。

本 PR 核心改动(磨砂玻璃:tokens.css / global.css / QaPanel.tsx / Capsule.tsx)已过本地 code-reviewer,CI 三平台构建 + pr_agent 均已通过。

@appergb appergb merged commit 32d7c22 into beta May 21, 2026
4 checks passed
@appergb appergb deleted the feat/frosted-glass-overlays branch May 21, 2026 15:54
appergb pushed a commit that referenced this pull request May 22, 2026
…s/Linux 修复

自 v1.3.4-11-beta-tauri 以来的改动:

- feat(ui): 给划词追问框与语音胶囊加磨砂玻璃质感(#519)
- fix(linux): 修复 Linux 主窗口控件(#518 / issue #517)
- fix(windows): 缩短 Windows IME 提交超时(#514 / issue #491)
- fix(windows): 流式 SendInput 节流(#513 / issue #491)
- feat(asr): 新增更大的 Foundry Whisper 模型(#512 / issue #511)
- fix(asr): 修复智谱 ASR endpoint 处理(#510 / issue #507)
- fix(ui+network): 更新/登录/网络检测/市场加载四项修复
- fix(asr): 修复智谱批量 ASR 分片(#509 / issue #508)

本次只动版本号,逻辑改动已在上述 PR 落盘。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant