From f9e198c8b6b9ca0f5a6ba7d2cff7cb4fc3c56193 Mon Sep 17 00:00:00 2001
From: Jz0ojiang <hi@im0o.top>
Date: Sat, 5 Sep 2026 18:12:42 +0800
Subject: [PATCH] =?UTF-8?q?t11-topbar:=20=E7=BB=84=E5=90=88=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E6=95=B4=E5=9D=97=E9=AB=98=E4=BA=AE=EF=BC=8C=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA=20title=20=E7=B2=BE=E7=AE=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TopBar.vue | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index eedff90..569c6d6 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -149,7 +149,7 @@ async function scrollToExport() {
           <span class="combo">
             <button
               class="tbtn combo-body"
-              :class="{ active: tool === 'shape' }"
+              :class="{ active: tool === 'shape' || open }"
               :title="tip('toolShape', '形状工具')"
               aria-label="形状工具"
               @click="pickShapeTool(open, toggle)"
@@ -158,7 +158,7 @@ async function scrollToExport() {
             </button>
             <button
               class="tbtn combo-caret"
-              :class="{ active: open }"
+              :class="{ active: tool === 'shape' || open }"
               title="形状类型"
               aria-label="选择形状类型"
               :aria-expanded="open"
@@ -178,7 +178,7 @@ async function scrollToExport() {
           <span class="combo">
             <button
               class="tbtn combo-body"
-              :class="{ active: tool === 'background' }"
+              :class="{ active: tool === 'background' || open }"
               :title="tip('toolBackground', '背景工具')"
               aria-label="背景工具"
               @click="pickBackgroundTool(open, toggle)"
@@ -187,7 +187,7 @@ async function scrollToExport() {
             </button>
             <button
               class="tbtn combo-caret"
-              :class="{ active: open }"
+              :class="{ active: tool === 'background' || open }"
               title="背景来源"
               aria-label="选择背景来源"
               :aria-expanded="open"
@@ -226,7 +226,7 @@ async function scrollToExport() {
       <span class="vr" aria-hidden="true"></span>
       <button
         class="tbtn"
-        title="导出（面板在右侧，点了滚过去）"
+        :title="tip('export', '导出')"
         aria-label="导出"
         @click="scrollToExport"
       >
@@ -322,6 +322,19 @@ async function scrollToExport() {
   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 {
   width: 1px;
   height: 20px;