mirror of
https://github.com/qingchencloud/clawpanel.git
synced 2026-05-30 04:40:18 +08:00
用户反馈"翻遍界面"找不到引擎切换入口,原切换器样式与 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:
@@ -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'
|
||||
|
||||
Reference in New Issue
Block a user