fix: 标签栏打开文件过多后无法滚动

- 修复 CSS 滚动条 height:0 导致滚动失效的问题
- 滚动条改为 3px 细条,hover 时可见
- 新增鼠标滚轮水平滚动支持(垂直滚动自动转换为水平)
- 触控板左右滑动手势也能正常工作
This commit is contained in:
thzxx
2026-05-28 14:12:26 +08:00
parent 9c92dcfa9d
commit 5863467206
2 changed files with 55 additions and 4 deletions
+21 -2
View File
@@ -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 { useTabStore } from '../../stores/tabStore'
import { getFileName } from '../../lib/fileUtils' import { getFileName } from '../../lib/fileUtils'
import { Close, Plus } from '../Icons' import { Close, Plus } from '../Icons'
@@ -20,8 +20,27 @@ export function TabBar() {
const closeAllTabs = useTabStore(s => s.closeAllTabs) const closeAllTabs = useTabStore(s => s.closeAllTabs)
const closeTabsToRight = useTabStore(s => s.closeTabsToRight) const closeTabsToRight = useTabStore(s => s.closeTabsToRight)
const tabListRef = useRef<HTMLDivElement>(null)
const [menu, setMenu] = useState<ContextMenuState>({ visible: false, x: 0, y: 0, tabId: '' }) 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) => { const handleClose = useCallback((e: React.MouseEvent, tabId: string) => {
e.stopPropagation() e.stopPropagation()
const tab = tabs.find(t => t.id === tabId) const tab = tabs.find(t => t.id === tabId)
@@ -101,7 +120,7 @@ export function TabBar() {
return ( return (
<div id="tab-bar"> <div id="tab-bar">
<div id="tab-list"> <div id="tab-list" ref={tabListRef}>
{tabs.map(tab => ( {tabs.map(tab => (
<div <div
key={tab.id} key={tab.id}
+34 -2
View File
@@ -474,7 +474,23 @@ html, body {
overflow-y: hidden; 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 { #tab-list {
display: flex; display: flex;
@@ -486,7 +502,23 @@ html, body {
overflow-y: hidden; 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 { .tab-item {
display: flex; display: flex;