Skip to content

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

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> 视觉勉强能看,但替换后会更统一。

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions