fix(sidebar): 增强引擎切换器视觉发现性 (#228, #235)

用户反馈"翻遍界面"找不到引擎切换入口,原切换器样式与 sidebar 其他
元素区分度低,容易被当作静态装饰忽略。

改进:
- 切换器上方新增 "ENGINE" section 标签,明确告诉用户这是引擎选择
- 按钮背景改为 accent 色调混合,提示可交互
- 图标使用 accent 色,尺寸从 14px 增大到 16px
- chevron 透明度 0.4 → 0.75,尺寸 12px → 14px
- 打开下拉时 chevron 旋转 180°(aria-expanded 驱动)
- 按钮加 title tooltip 和 aria-haspopup / aria-expanded(可访问性)
- 字体从 xs 增到 sm,字体权重 500
- :active 时轻微下沉,给出点击反馈

翻译覆盖 11 种语言。折叠侧边栏时仍然隐藏切换器(保持原行为)。
This commit is contained in:
晴天
2026-04-20 03:07:10 +08:00
parent 024e4c9517
commit 97e2fb507b
3 changed files with 43 additions and 16 deletions

View File

@@ -112,10 +112,11 @@ function _renderEngineSwitcher() {
const active = getActiveEngine()
if (!active) return ''
return `<div class="engine-switcher" id="engine-switcher">
<button class="engine-current" id="btn-engine-toggle">
<div class="engine-switcher-label">${_escSidebar(t('engine.switcherSectionLabel'))}</div>
<button class="engine-current" id="btn-engine-toggle" title="${_escSidebar(t('engine.switcherTooltip'))}" aria-haspopup="listbox" aria-expanded="false">
<span class="engine-icon">${active.icon || ''}</span>
<span class="engine-label">${_escSidebar(active.name)}</span>
<svg class="engine-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12"><path d="M6 9l6 6 6-6"/></svg>
<svg class="engine-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M6 9l6 6 6-6"/></svg>
</button>
<div class="engine-dropdown" id="engine-dropdown">
${engines.map(e => `<div class="engine-option${e.id === active.id ? ' active' : ''}" data-engine="${e.id}">
@@ -130,13 +131,21 @@ function _renderEngineSwitcher() {
function _closeEngineDropdown() {
const dd = document.getElementById('engine-dropdown')
if (dd) dd.classList.remove('open')
const btn = document.getElementById('btn-engine-toggle')
if (btn) btn.setAttribute('aria-expanded', 'false')
}
function _toggleEngineDropdown() {
const dd = document.getElementById('engine-dropdown')
if (!dd) return
if (dd.classList.contains('open')) { dd.classList.remove('open'); return }
const btn = document.getElementById('btn-engine-toggle')
if (dd.classList.contains('open')) {
dd.classList.remove('open')
if (btn) btn.setAttribute('aria-expanded', 'false')
return
}
dd.classList.add('open')
if (btn) btn.setAttribute('aria-expanded', 'true')
}
const LS_SIDEBAR_COLLAPSED = 'clawpanel_sidebar_collapsed'