From 531e4bdbc3ef74cae1ac614553651a6980eadcf8 Mon Sep 17 00:00:00 2001
From: thzxx <thzxx@gitee.com>
Date: Thu, 28 May 2026 14:53:07 +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=E6=94=B9=E4=B8=BA=E7=BB=91=E5=AE=9A?=
 =?UTF-8?q?=E5=88=B0=20#tab-bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- wheel 事件从 #tab-list 移到 #tab-bar 上绑定
- 同时支持触控板左右滑动 (deltaX) 和鼠标滚轮上下滚动 (deltaY)
- 智能选择滚动量：比较 deltaX 和 deltaY 的绝对值取较大者
---
 src/renderer/components/TabBar/TabBar.tsx | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/TabBar/TabBar.tsx b/src/renderer/components/TabBar/TabBar.tsx
index bc4470c..5a6eebc 100644
--- a/src/renderer/components/TabBar/TabBar.tsx
+++ b/src/renderer/components/TabBar/TabBar.tsx
@@ -20,15 +20,19 @@ export function TabBar() {
   const closeAllTabs = useTabStore(s => s.closeAllTabs)
   const closeTabsToRight = useTabStore(s => s.closeTabsToRight)
 
+  const tabBarRef = useRef<HTMLDivElement>(null)
   const tabListRef = useRef<HTMLDivElement>(null)
   const [menu, setMenu] = useState<ContextMenuState>({ visible: false, x: 0, y: 0, tabId: '' })
 
   // 支持鼠标滚轮水平滚动标签栏
   useEffect(() => {
-    const tabList = tabListRef.current
-    if (!tabList) return
+    const tabBar = tabBarRef.current
+    if (!tabBar) return
 
     const handleWheel = (e: WheelEvent) => {
+      const tabList = tabListRef.current
+      if (!tabList) return
+
       // 只有当标签列表有水平滚动空间时才处理
       const hasHorizontalScroll = tabList.scrollWidth > tabList.clientWidth
       if (!hasHorizontalScroll) return
@@ -37,13 +41,16 @@ export function TabBar() {
       e.preventDefault()
       e.stopPropagation()
       
-      // 将垂直滚动转换为水平滚动
-      tabList.scrollLeft += e.deltaY
+      // 计算滚动量：优先使用 deltaX（触控板左右滑动），否则用 deltaY（鼠标滚轮）
+      const scrollAmount = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY
+      
+      // 应用滚动
+      tabList.scrollLeft += scrollAmount
     }
 
-    // 使用 capture 阶段，确保事件能被捕获
-    tabList.addEventListener('wheel', handleWheel, { passive: false, capture: true })
-    return () => tabList.removeEventListener('wheel', handleWheel, { capture: true })
+    // 绑定到 #tab-bar 上，确保能捕获所有滚轮事件
+    tabBar.addEventListener('wheel', handleWheel, { passive: false })
+    return () => tabBar.removeEventListener('wheel', handleWheel)
   }, [])
 
   // 自动滚动到活动标签
@@ -137,7 +144,7 @@ export function TabBar() {
   if (tabs.length === 0) return null
 
   return (
-    <div id="tab-bar">
+    <div id="tab-bar" ref={tabBarRef}>
       <div id="tab-list" ref={tabListRef}>
         {tabs.map(tab => (
           <div