t11-topbar: 组合按钮整块高亮,导出 title 精简

This commit is contained in:
2026-09-05 18:12:42 +08:00
parent ae18af1bf3
commit f9e198c8b6
+18 -5
View File
@@ -149,7 +149,7 @@ async function scrollToExport() {
<span class="combo"> <span class="combo">
<button <button
class="tbtn combo-body" class="tbtn combo-body"
:class="{ active: tool === 'shape' }" :class="{ active: tool === 'shape' || open }"
:title="tip('toolShape', '形状工具')" :title="tip('toolShape', '形状工具')"
aria-label="形状工具" aria-label="形状工具"
@click="pickShapeTool(open, toggle)" @click="pickShapeTool(open, toggle)"
@@ -158,7 +158,7 @@ async function scrollToExport() {
</button> </button>
<button <button
class="tbtn combo-caret" class="tbtn combo-caret"
:class="{ active: open }" :class="{ active: tool === 'shape' || open }"
title="形状类型" title="形状类型"
aria-label="选择形状类型" aria-label="选择形状类型"
:aria-expanded="open" :aria-expanded="open"
@@ -178,7 +178,7 @@ async function scrollToExport() {
<span class="combo"> <span class="combo">
<button <button
class="tbtn combo-body" class="tbtn combo-body"
:class="{ active: tool === 'background' }" :class="{ active: tool === 'background' || open }"
:title="tip('toolBackground', '背景工具')" :title="tip('toolBackground', '背景工具')"
aria-label="背景工具" aria-label="背景工具"
@click="pickBackgroundTool(open, toggle)" @click="pickBackgroundTool(open, toggle)"
@@ -187,7 +187,7 @@ async function scrollToExport() {
</button> </button>
<button <button
class="tbtn combo-caret" class="tbtn combo-caret"
:class="{ active: open }" :class="{ active: tool === 'background' || open }"
title="背景来源" title="背景来源"
aria-label="选择背景来源" aria-label="选择背景来源"
:aria-expanded="open" :aria-expanded="open"
@@ -226,7 +226,7 @@ async function scrollToExport() {
<span class="vr" aria-hidden="true"></span> <span class="vr" aria-hidden="true"></span>
<button <button
class="tbtn" class="tbtn"
title="导出(面板在右侧,点了滚过去)" :title="tip('export', '导出')"
aria-label="导出" aria-label="导出"
@click="scrollToExport" @click="scrollToExport"
> >
@@ -322,6 +322,19 @@ async function scrollToExport() {
font-size: 12px; font-size: 12px;
} }
/* 组合按钮整块一起亮:hover 与 active 都作用到两个按钮,不分家。
* `.combo:hover .tbtn:not(.active)` 管非激活时的悬停(光靠单个 .tbtn:hover
* 只会亮鼠标底下那一半);`.combo .tbtn.active` 保证激活态在悬停时也不被
* .tbtn:hover 的 color 盖回 fg。 */
.combo:hover .tbtn:not(.active) {
background: var(--bg3);
color: var(--fg);
}
.combo .tbtn.active {
background: var(--bg3);
color: var(--accent);
}
.vr { .vr {
width: 1px; width: 1px;
height: 20px; height: 20px;