fix(ui): Windows 原生 chrome / 胶囊缩小 / 自定义下拉 (#417 #418) by appergb · Pull Request #419 · Open-Less/openless

appergb · 2026-05-12T05:34:42Z

User description

Summary

Windows 端 UI 一致性整理。三件事打包：

Windows 原生 chrome：删除自定义标题栏 + resize handles，交还 Tauri decorations:true 原生 Win11 标题栏。修复用户反馈的 X 按钮重叠 + 圆角处黑边/白线（双层 chrome 之间露出的窗口背景）。macOS 路径零变化。
胶囊缩小 (Windows 端胶囊视觉过大，需要按平台缩小尺寸 #417)：Windows pill 从 196×52、textWidth 104 缩到 180×44、textWidth 88，与 macOS 的 176×42/84 视觉密度对齐。
自定义下拉 (Windows 端 native <select> 下拉弹框是方形丑框，建议替换为自定义下拉 #418)：SelectLite 重写为完整受控组件——portal popover、键盘 Arrow/Enter/Esc/Tab 导航、视口边缘自动翻转、role="combobox" / role="listbox" a11y。替换全仓库 11 处 native <select>，彻底绕开 Win32 ComboBox 的直角丑框。
顺手收尾：删 "个性化 → 界面语言" 的重复入口（"设置 → 语言" 早有等价控件）；SwitchLite 加 outline:none 解决 Windows 上开关黑框；保留 _atoms.tsx Collapsible 的键盘 outline（pr-agent refactor(ui): Collapsible groups in Settings & Vocab #407）。

Closes

Test plan

PR Type

Enhancement, Bug fix

Description

Replace native <select> with portal-based custom SelectLite dropdown for glass styling and keyboard a11y
- Sub‑bullet: covers Settings, LocalAsr, Translation, and Language sections
Remove Windows custom title bar and resize handles, restoring native Win11 decorations
- Sub‑bullet: fixes X‑button overlap and corner black‑line artifacts
Downsize Windows capsule pill to 180×44 for visual parity with macOS
Delete duplicate interface‑language picker from Personalize; keep in Language section only
Add .ol-focus-ring class for keyboard focus visibility across components

Diagram Walkthrough

flowchart LR
  A["WindowChrome.tsx: custom chrome removed"] --> B["Native Win11 title bar"]
  C["capsuleLayout.ts: smaller metrics"] --> D["Windows pill matches macOS"]
  E["SelectLite.tsx: full dropdown component"] --> F["Replaces all native <select>"]
  G["SettingsModal.tsx: LanguagePicker deleted"] --> H["One language entry point"]
  I["global.css: .ol-focus-ring"] --> J["Keyboard ring on buttons/dropdowns"]

File Walkthrough

Relevant files

Bug fix

2 files

WindowChrome.tsx `Remove Windows custom title bar and resize handles`	+20/-189
capsuleLayout.ts `Reduce Windows pill to 180×44 for macOS parity`	+2/-1

Enhancement

7 files

SelectLite.tsx `Rewrite as controlled dropdown with portal popover and a11y`	+288/-14
SwitchLite.tsx `Add .ol-focus-ring and outline:none`	+3/-0
LocalAsr.tsx `Swap native for SelectLite (5 instances)`	+52/-82
Settings.tsx `Replace all native with SelectLite`	+49/-42
Translation.tsx `Replace native target‑language with SelectLite`	+14/-22
LanguageSection.tsx `Replace native language with SelectLite`	+18/-13
global.css `Add ol-select-pop keyframe and .ol-focus-ring class`	+12/-0

Cleanup

1 files

SettingsModal.tsx `Delete duplicate LanguagePicker from Personalize section`	+0/-54

Configuration changes

5 files

en.ts `Remove personalize.language key`	+0/-1
ja.ts `Remove personalize.language key`	+0/-1
ko.ts `Remove personalize.language key`	+0/-1
zh-CN.ts `Remove personalize.language key`	+0/-1
zh-TW.ts `Remove personalize.language key`	+0/-1

- WindowChrome: 移除 Windows 端自定义标题栏和 resize handles，交还 Tauri decorations:true 原生 Win11 标题栏，修复 X 按钮重叠与圆角处的黑边/白线 - Capsule (#417): Windows pill 196×52→180×44，textWidth 104→88，视觉密度与 macOS 对齐 - SelectLite (#418): 重写为受控下拉组件（portal popover, 键盘导航 Arrow/Enter/Esc, 视口翻转, a11y combobox/listbox），替换 11 处 native <select> 以避开 Win32 ComboBox 直角丑框 - SettingsModal: 删除"个性化"中重复的"界面语言"入口，功能保留在 "设置 → 语言"分区；5 个 locale 同步清理 modal.personalize.language - SwitchLite: 加 outline:none 解决 Windows 上点击后的黑色焦点框 - global.css: 移入 ol-select-pop 关键帧；不再用全局 outline:none，以保留 _atoms.tsx Collapsible 的键盘 outline (pr-agent #407)

90b3505 bump 到 1.3.1-1 时漏改了 package-lock.json 的 root 与 nested version 字段（都还是 1.3.0），CI "Verify version sync across 5 files" 卡死所有平台，本 PR 的 build / check 步骤根本没机会执行。手动同步到 1.3.1-1，与 package.json / tauri.conf.json / Cargo.toml / Cargo.lock 对齐。本地复跑 CI 第一步的 node -p 校验全部一致。

github-actions · 2026-05-12T05:53:13Z

PR Reviewer Guide 🔍

(Review updated until commit `6c7598a`)

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis ✅ 417 - PR Code Verified Compliant requirements: Windows capsule metrics were reduced. macOS capsule metrics remain unchanged. Requires further human verification: Visual verification on Windows 10/11 to confirm the new capsule size matches the intended density. 418 - PR Code Verified Compliant requirements: A reusable custom `SelectLite` component was added. Native `<select>` usages shown in the diff were replaced with `SelectLite`. Keyboard handling for Arrow/Enter/Esc/Tab was implemented. The popover uses rounded, glass-like styling and portal rendering. Requires further human verification: Full repository verification that no native `<select>` usages remain outside the shown diff. In-app visual and keyboard QA on Windows to confirm the popover behaves and looks as intended.
⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ No major issues detected

pr-agent #419 review 指出两个 button 都用 outline:none 关掉了浏览器默认焦点 ring 却没替代——键盘 Tab 时用户看不到当前焦点在哪。和 _atoms.tsx Collapsible 的 pr-agent #407 是同一类问题。修法：新增 .ol-focus-ring class，:focus-visible 时上 2px 半透明蓝 box-shadow（不是 outline，因为 inline style 的 outline:none 会盖掉 class 里的 outline，但盖不掉 box-shadow）。:focus-visible 只在键盘 focus 时生效，鼠标点击保持干净。

github-actions · 2026-05-12T06:16:28Z

Persistent review updated to latest commit 8a6ac8b

github-actions · 2026-05-12T06:23:29Z

Persistent review updated to latest commit 70917cb

pr-agent #419 第二轮 review 指出的两个 focus areas： 1. Keyboard scroll：长 dropdown 超过 280px 时 ArrowUp/Down 切换 highlight 不会把高亮项 scroll into view，键盘用户看不到当前选中。新增 useEffect 监听 highlight 改变，找到 data-option-index 对应 DOM 元素后 scrollIntoView({ block: 'nearest' })，已可见的项不会被强行滚动。 2. Viewport clipping：popover 用 trigger.left 作 anchor，没有横向边界 clamp。窗口右边的 select 弹出后可能溢出屏幕。positionPopover 改成测真实 popover 宽度（首次开打用 trigger 宽度估），然后把 left clamp 到 [8, viewport - width - 8] 区间。不动 keyboard 导航 / disabled 处理 / vertical flip 等已 verified 行为。

github-actions · 2026-05-12T06:49:06Z

Persistent review updated to latest commit 6c7598a

PR #419 已合并到 beta，UI 完整版（Windows 原生 chrome / 胶囊缩小 / 自定义下拉 / a11y 焦点指示 + 键盘 scrollIntoView + 视口 clamp）相比上一轮 1.3.1-1 commit (90b3505) 累积了实质改动，bump patch-build 号到 1.3.1-2 区分。 6 处版本号同步：package.json / package-lock.json (root + nested) / tauri.conf.json / Cargo.toml / Cargo.lock。

PR #419 删了 React 端 WinTitleBar 自定义标题栏，commit message 说"交还 Tauri decorations:true 原生 Win11 标题栏"，但漏看 lib.rs 里有一段 Rust 代码在 setup 时**强制**调 set_decorations(false) 把原生 chrome 关掉（原本是为了让自定义 WinTitleBar 接管）。结果：v1.3.1-2-beta 上 Windows 主窗口完全无 chrome —— 无法拖动 / 无法点 X 关闭 / 无法最小化，只能从 tray 退出。用户卡死。修法： - lib.rs setup() Windows 分支：移除 set_decorations(false) + 移除 apply_windows_rounded_frame 调用，保留 apply_mica 给原生 chrome 提供磨砂材质 - RunEvent Resized/ScaleFactorChanged 里也移除 apply_windows_rounded_frame 调用（原生 chrome 自带 resize border + 圆角） - apply_windows_rounded_frame 函数本身变成 dead code，整段删除（含 raw_window_handle / Win32 DwmSetWindowAttribute / SetWindowRgn 等 import） tauri.conf.json 的 decorations:true 配置不动，配合 hiddenTitle:true 让原生标题栏接管。

PR #421 hotfix 合并后 bump。本版本相对 v1.3.1-1-beta-tauri 累积修复： - Windows 主窗口交还原生 Win11 chrome（修 PR #419 删自定义标题栏后无法拖/关/最小化的卡死状态） - Vocab 词条 Windows 大圈（global.css button appearance:none） - polish "清晰结构"模式输出退化成单段（ROLE_BLOCK 回滚到 v1.2.24-9-beta） v1.3.1-2 tag + release 已删除（含 Windows 主窗口无 chrome 阻塞 bug）。

PR #422 合并后 bump。本版本相对 v1.3.1-3-beta 累积修复： - Windows 默认字号 'large'（fontScale.ts UA 检测） - Windows 原生标题栏底色刷成白色，与 sidebar 视觉统一（DWM CAPTION_COLOR） - 全平台玻璃统一：WindowChrome 撤销 PR #419 留下的"Windows 100% opaque + 无 backdropFilter"分支，两平台用同一半透明 background + blur saturate(190%)， alpha 0.92 → 0.78 让玻璃感更明显但不过透 - Vocab 词条大圈再次根治：global.css button reset 补加 outline:none / min-width:0 / min-height:0 / box-sizing:border-box - polish ROLE_BLOCK 撤销 b2325a2 回滚，恢复 7e60bdb 8-条规则状态 - polish ROLE_BLOCK 「意图难判」规则改为强制结构化（用户拍板的新版）

5 个用户反馈一次性收： 1. Windows 默认字号放大 fontScale.ts readFontScale() 检测 navigator UA 含 Windows 时新装默认返回 'large'（1.1x zoom），已存 localStorage 偏好的用户不受影响。 2. Windows 顶栏白色，与左侧 sidebar 视觉统一 lib.rs 重新引入 apply_windows_caption_color，用 DWM API DwmSetWindowAttribute DWMWA_CAPTION_COLOR=35 (Win11 22H2+) 把原生标题栏底色刷成 0x00FFFFFF。 pre-22H2 Win 静默失败仅 warn。 3. 全平台玻璃效果统一 & 略浊 WindowChrome.tsx 撤销 PR Open-Less#419 留下的"Windows 100% opaque background + 去 backdropFilter"分支（那是 Win sidebar 完全无玻璃感的根因）。两个平台改用同一份半透明 background（alpha 从 0.92 降到 0.78）+ blur var(--ol-glass-blur-strong) saturate(190%)，让 sidebar 透过磨砂底板。 Windows 配合 apply_mica + tauri.conf transparent:true 透出 Mica。 4. Vocab 词条大圈再次尝试根治 global.css button reset 在 appearance:none 基础上再加 outline:none / min-width:0 / min-height:0 / box-sizing:border-box。Windows Chromium user-agent style 包含上述四项默认值，单一个 appearance:none 不够覆盖全部。键盘焦点指示走 .ol-focus-ring + :focus-visible box-shadow，不被 outline:0 影响。 5. polish.rs ROLE_BLOCK 撤回 b2325a2 回滚用户确认 13:08 之前最近的 polish.rs commit（20756f7e，含 7e60bdb refine）表现正常。我之前 b2325a2 误以为 7e60bdb 是问题源把 ROLE_BLOCK 改回 v1.2.24-9-beta 状态，反而离用户认可的版本更远。改回 7e60bdb 8-条 ROLE_BLOCK 状态。

baiqing added 2 commits May 12, 2026 13:34

github-actions Bot added the Review effort 4/5 label May 12, 2026

github-actions Bot added Review effort 3/5 and removed Review effort 4/5 labels May 12, 2026

appergb merged commit 993bb90 into beta May 12, 2026
4 checks passed

appergb deleted the fix/windows-ui-417-418 branch May 12, 2026 06:54

appergb mentioned this pull request May 12, 2026

fix: Windows 主窗口 chrome 丢失 + Vocab 大圈 + polish 清晰结构回归 (v1.3.1-3 hotfix) #421

Merged

5 tasks

appergb mentioned this pull request May 12, 2026

fix: v1.3.1-4 Windows 字号/顶栏色/玻璃 + Vocab 大圈 + polish 回滚 #422

Merged

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(ui): Windows 原生 chrome / 胶囊缩小 / 自定义下拉 (#417 #418)#419

fix(ui): Windows 原生 chrome / 胶囊缩小 / 自定义下拉 (#417 #418)#419
appergb merged 4 commits into
betafrom
fix/windows-ui-417-418

appergb commented May 12, 2026 •

edited by github-actions Bot

Loading

Uh oh!

github-actions Bot commented May 12, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 12, 2026

Uh oh!

github-actions Bot commented May 12, 2026

Uh oh!

github-actions Bot commented May 12, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

appergb commented May 12, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

Summary

Closes

Test plan

PR Type

Description

Diagram Walkthrough

File Walkthrough

Uh oh!

github-actions Bot commented May 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Reviewer Guide 🔍

(Review updated until commit 6c7598a)

Uh oh!

github-actions Bot commented May 12, 2026

Uh oh!

github-actions Bot commented May 12, 2026

Uh oh!

github-actions Bot commented May 12, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

appergb commented May 12, 2026 •

edited by github-actions Bot

Loading

github-actions Bot commented May 12, 2026 •

edited

Loading

(Review updated until commit `6c7598a`)