现象
Windows 端点击任何下拉菜单时,弹出的选项列表是 直角方形 + 黑色实边框 的 Win32 ComboBox 默认样式,与 OpenLess 整体圆角 / 玻璃质感设计严重不符。
macOS 上 WKWebView 渲染 native <select> 相对柔和,所以问题不明显。但 Windows 的 WebView2 把下拉弹框交给 Win32 ComboBox 控件——这层弹框 无法用 CSS 改样式(颜色、圆角、阴影、字体都改不了),是 Windows GDI 系统级控件。
复现
- Windows 端打开应用
- 进入 Settings → 任一下拉(ASR provider / Polish provider / Language 等)
- 点击下拉 → 弹出的列表是方形直角带边框,与界面整体风格冲突
相关代码(仓库里所有 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 上没法救 —— 只能整体替换。两条路:
- 推荐:把
SelectLite 升级成真正的自定义 React 下拉(含 popover、键盘导航、a11y role=\"listbox\" 等),然后把仓库里所有 native <select> 替换掉。圆角 / 阴影 / 玻璃感全部可控。
- 引入轻量 headless 下拉库(如 Radix
@radix-ui/react-select、Floating UI),重新包一层。
不论哪条路,最终 popover 要:
- 圆角 ≈ 10px,与窗体内卡圆角一致
- 半透明白底 + backdrop-blur(与 SettingsModal 等组件一致的玻璃感)
- 阴影柔和(参考
--ol-shadow-xl)
- 跨平台一致
平台
Windows 是主要受害平台。macOS 上现有 native <select> 视觉勉强能看,但替换后会更统一。
现象
Windows 端点击任何下拉菜单时,弹出的选项列表是 直角方形 + 黑色实边框 的 Win32 ComboBox 默认样式,与 OpenLess 整体圆角 / 玻璃质感设计严重不符。
macOS 上 WKWebView 渲染 native
<select>相对柔和,所以问题不明显。但 Windows 的 WebView2 把下拉弹框交给 Win32 ComboBox 控件——这层弹框 无法用 CSS 改样式(颜色、圆角、阴影、字体都改不了),是 Windows GDI 系统级控件。复现
相关代码(仓库里所有 native
<select>用点)openless-all/app/src/components/SettingsModal.tsx:558(语言切换器,L536 注释明确说"用原生 select")openless-all/app/src/pages/Settings.tsx:457openless-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 上没法救 —— 只能整体替换。两条路:SelectLite升级成真正的自定义 React 下拉(含 popover、键盘导航、a11yrole=\"listbox\"等),然后把仓库里所有 native<select>替换掉。圆角 / 阴影 / 玻璃感全部可控。@radix-ui/react-select、Floating UI),重新包一层。不论哪条路,最终 popover 要:
--ol-shadow-xl)平台
Windows 是主要受害平台。macOS 上现有 native
<select>视觉勉强能看,但替换后会更统一。