From 80dc7406e330023f3f15754859ba1eafdfc249b2 Mon Sep 17 00:00:00 2001
From: thzxx <thzxx@gitee.com>
Date: Thu, 28 May 2026 14:30:09 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A0=87=E7=AD=BE=E6=A0=8F=E6=BB=9A?=
 =?UTF-8?q?=E8=BD=AE=E6=BB=9A=E5=8A=A8=E5=92=8C=E8=87=AA=E5=8A=A8=E5=AE=9A?=
 =?UTF-8?q?=E4=BD=8D=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复滚轮不生效：使用 capture 阶段监听 wheel 事件
- 修复滚轮不生效：添加 stopPropagation 防止事件被拦截
- 新增自动滚动到活动标签：切换/打开标签时自动定位到可见区域
- 优化 CSS：移除 #tab-bar 的 overflow，由 #tab-list 统一负责滚动
- 添加平滑滚动：scroll-behavior: smooth
---
 src/renderer/components/TabBar/TabBar.tsx | 24 ++++++++++++++---
 src/renderer/styles/global.css            | 33 +++++++++--------------
 2 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/src/renderer/components/TabBar/TabBar.tsx b/src/renderer/components/TabBar/TabBar.tsx
index 752aab2..bc4470c 100644
--- a/src/renderer/components/TabBar/TabBar.tsx
+++ b/src/renderer/components/TabBar/TabBar.tsx
@@ -30,17 +30,35 @@ export function TabBar() {
 
     const handleWheel = (e: WheelEvent) => {
       // 只有当标签列表有水平滚动空间时才处理
-      if (tabList.scrollWidth <= tabList.clientWidth) return
+      const hasHorizontalScroll = tabList.scrollWidth > tabList.clientWidth
+      if (!hasHorizontalScroll) return
       
+      // 阻止默认的垂直滚动
       e.preventDefault()
+      e.stopPropagation()
+      
       // 将垂直滚动转换为水平滚动
       tabList.scrollLeft += e.deltaY
     }
 
-    tabList.addEventListener('wheel', handleWheel, { passive: false })
-    return () => tabList.removeEventListener('wheel', handleWheel)
+    // 使用 capture 阶段，确保事件能被捕获
+    tabList.addEventListener('wheel', handleWheel, { passive: false, capture: true })
+    return () => tabList.removeEventListener('wheel', handleWheel, { capture: true })
   }, [])
 
+  // 自动滚动到活动标签
+  useEffect(() => {
+    if (!tabListRef.current || !activeTabId) return
+    
+    // 使用 requestAnimationFrame 确保 DOM 已更新
+    requestAnimationFrame(() => {
+      const activeTab = tabListRef.current?.querySelector('.tab-item.active')
+      if (activeTab) {
+        activeTab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' })
+      }
+    })
+  }, [activeTabId])
+
   const handleClose = useCallback((e: React.MouseEvent, tabId: string) => {
     e.stopPropagation()
     const tab = tabs.find(t => t.id === tabId)
diff --git a/src/renderer/styles/global.css b/src/renderer/styles/global.css
index a28f1bf..e93768d 100644
--- a/src/renderer/styles/global.css
+++ b/src/renderer/styles/global.css
@@ -470,26 +470,7 @@ html, body {
   align-items: flex-end;
   padding: 0 4px;
   flex-shrink: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-}
-
-/* 标签栏滚动条：默认隐藏，hover 时显示 */
-#tab-bar::-webkit-scrollbar {
-  height: 3px;
-}
-
-#tab-bar::-webkit-scrollbar-thumb {
-  background: var(--border);
-  border-radius: 2px;
-}
-
-#tab-bar::-webkit-scrollbar-thumb:hover {
-  background: var(--text-tertiary);
-}
-
-#tab-bar::-webkit-scrollbar-track {
-  background: transparent;
+  /* 不设置 overflow，由 #tab-list 负责滚动 */
 }
 
 #tab-list {
@@ -500,9 +481,11 @@ html, body {
   min-width: 0;
   overflow-x: auto;
   overflow-y: hidden;
+  /* 平滑滚动 */
+  scroll-behavior: smooth;
 }
 
-/* 标签列表滚动条：默认隐藏，hover 时显示 */
+/* 标签列表滚动条 */
 #tab-list::-webkit-scrollbar {
   height: 3px;
 }
@@ -520,6 +503,14 @@ html, body {
   background: transparent;
 }
 
+#tab-list::-webkit-scrollbar-thumb:hover {
+  background: var(--text-tertiary);
+}
+
+#tab-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
 .tab-item {
   display: flex;
   align-items: center;