From 5863467206acc57751950e6f7a2cfafd66b5f1fb Mon Sep 17 00:00:00 2001
From: thzxx <thzxx@gitee.com>
Date: Thu, 28 May 2026 14:12:26 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A0=87=E7=AD=BE=E6=A0=8F=E6=89=93?=
 =?UTF-8?q?=E5=BC=80=E6=96=87=E4=BB=B6=E8=BF=87=E5=A4=9A=E5=90=8E=E6=97=A0?=
 =?UTF-8?q?=E6=B3=95=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复 CSS 滚动条 height:0 导致滚动失效的问题
- 滚动条改为 3px 细条，hover 时可见
- 新增鼠标滚轮水平滚动支持（垂直滚动自动转换为水平）
- 触控板左右滑动手势也能正常工作
---
 src/renderer/components/TabBar/TabBar.tsx | 23 +++++++++++++--
 src/renderer/styles/global.css            | 36 +++++++++++++++++++++--
 2 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/TabBar/TabBar.tsx b/src/renderer/components/TabBar/TabBar.tsx
index 2be86a6..752aab2 100644
--- a/src/renderer/components/TabBar/TabBar.tsx
+++ b/src/renderer/components/TabBar/TabBar.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState, useEffect } from 'react'
+import React, { useCallback, useState, useEffect, useRef } from 'react'
 import { useTabStore } from '../../stores/tabStore'
 import { getFileName } from '../../lib/fileUtils'
 import { Close, Plus } from '../Icons'
@@ -20,8 +20,27 @@ export function TabBar() {
   const closeAllTabs = useTabStore(s => s.closeAllTabs)
   const closeTabsToRight = useTabStore(s => s.closeTabsToRight)
 
+  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 handleWheel = (e: WheelEvent) => {
+      // 只有当标签列表有水平滚动空间时才处理
+      if (tabList.scrollWidth <= tabList.clientWidth) return
+      
+      e.preventDefault()
+      // 将垂直滚动转换为水平滚动
+      tabList.scrollLeft += e.deltaY
+    }
+
+    tabList.addEventListener('wheel', handleWheel, { passive: false })
+    return () => tabList.removeEventListener('wheel', handleWheel)
+  }, [])
+
   const handleClose = useCallback((e: React.MouseEvent, tabId: string) => {
     e.stopPropagation()
     const tab = tabs.find(t => t.id === tabId)
@@ -101,7 +120,7 @@ export function TabBar() {
 
   return (
     <div id="tab-bar">
-      <div id="tab-list">
+      <div id="tab-list" ref={tabListRef}>
         {tabs.map(tab => (
           <div
             key={tab.id}
diff --git a/src/renderer/styles/global.css b/src/renderer/styles/global.css
index 53c5e7b..a28f1bf 100644
--- a/src/renderer/styles/global.css
+++ b/src/renderer/styles/global.css
@@ -474,7 +474,23 @@ html, body {
   overflow-y: hidden;
 }
 
-#tab-bar::-webkit-scrollbar { height: 0; }
+/* 标签栏滚动条：默认隐藏，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;
+}
 
 #tab-list {
   display: flex;
@@ -486,7 +502,23 @@ html, body {
   overflow-y: hidden;
 }
 
-#tab-list::-webkit-scrollbar { height: 0; }
+/* 标签列表滚动条：默认隐藏，hover 时显示 */
+#tab-list::-webkit-scrollbar {
+  height: 3px;
+}
+
+#tab-list::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 2px;
+}
+
+#tab-list::-webkit-scrollbar-thumb:hover {
+  background: var(--text-tertiary);
+}
+
+#tab-list::-webkit-scrollbar-track {
+  background: transparent;
+}
 
 .tab-item {
   display: flex;