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(null) const [menu, setMenu] = useState({ 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 (
-
+
{tabs.map(tab => (