Skip to content

Windows 端 native <select> 下拉弹框是方形丑框,建议替换为自定义下拉 #418

@appergb

Description

@appergb

现象

Windows 端点击任何下拉菜单时,弹出的选项列表是 直角方形 + 黑色实边框 的 Win32 ComboBox 默认样式,与 OpenLess 整体圆角 / 玻璃质感设计严重不符。

macOS 上 WKWebView 渲染 native <select> 相对柔和,所以问题不明显。但 Windows 的 WebView2 把下拉弹框交给 Win32 ComboBox 控件——这层弹框 无法用 CSS 改样式(颜色、圆角、阴影、字体都改不了),是 Windows GDI 系统级控件。

复现

  1. Windows 端打开应用
  2. 进入 Settings → 任一下拉(ASR provider / Polish provider / Language 等)
  3. 点击下拉 → 弹出的列表是方形直角带边框,与界面整体风格冲突

相关代码(仓库里所有 native <select> 用点)

  • openless-all/app/src/components/SettingsModal.tsx:558(语言切换器,L536 注释明确说"用原生 select")
  • openless-all/app/src/pages/Settings.tsx:457
  • openless-all/app/src/pages/LocalAsr.tsx:629 / 659 / 679 / 808 / 862
  • 其他可能遗漏的 <select> 用点

注:src/components/ui/SelectLite.tsx 当前只是个静态视觉占位(一个 chevron + value 显示,没有 popover、没有 onClick、没有 options 列表),并非真正可用的下拉组件。

期望方案

Native <select> 在 Windows 上没法救 —— 只能整体替换。两条路:

  1. 推荐:把 SelectLite 升级成真正的自定义 React 下拉(含 popover、键盘导航、a11y role=\"listbox\" 等),然后把仓库里所有 native <select> 替换掉。圆角 / 阴影 / 玻璃感全部可控。
  2. 引入轻量 headless 下拉库(如 Radix @radix-ui/react-select、Floating UI),重新包一层。

不论哪条路,最终 popover 要:

  • 圆角 ≈ 10px,与窗体内卡圆角一致
  • 半透明白底 + backdrop-blur(与 SettingsModal 等组件一致的玻璃感)
  • 阴影柔和(参考 --ol-shadow-xl
  • 跨平台一致

平台

Windows 是主要受害平台。macOS 上现有 native <select> 视觉勉强能看,但替换后会更统一。

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingwindowsWindows-specific issue

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions