fix: 标签栏打开文件过多后无法滚动
- 修复 CSS 滚动条 height:0 导致滚动失效的问题 - 滚动条改为 3px 细条,hover 时可见 - 新增鼠标滚轮水平滚动支持(垂直滚动自动转换为水平) - 触控板左右滑动手势也能正常工作
This commit is contained in:
@@ -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}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user