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

[appergb]

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.tsx 里 CircleButton（取消按钮）和「正在翻译」徽章另有各自的 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

---

[github-actions]

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. ifletOk(resp) = client.head(*url).send().await{if resp.status().is_success() || resp.status().is_redirection(){let ms = start.elapsed().as_millis()asu64;returnNetworkCheckResult{online:true,latency_ms:Some(ms)};}

[appergb]

关于 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 均已通过。