hicccc77/WeFlow
1
0
Fork 0
mirror of https://github.com/hicccc77/WeFlow.git synced 2026-03-24 23:06:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(export): add top horizontal scrollbar for session table

Browse Source
This commit is contained in:
aits2026
2026-03-06 19:31:20 +08:00
parent ecd64f62bc
commit a8c05fd26c
2 changed files with 48 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/pages/ExportPage.tsx
View File

@@ -1537,10 +1537,11 @@ function ExportPage() {
const contactsAvatarCacheRef = useRef<Record<string, configService.ContactsAvatarCacheEntry>>({})
const contactsVirtuosoRef = useRef<VirtuosoHandle | null>(null)
const sessionTableSectionRef = useRef<HTMLDivElement | null>(null)
const contactsTopScrollbarRef = useRef<HTMLDivElement | null>(null)
const contactsHorizontalViewportRef = useRef<HTMLDivElement | null>(null)
const contactsHorizontalContentRef = useRef<HTMLDivElement | null>(null)
const contactsBottomScrollbarRef = useRef<HTMLDivElement | null>(null)
const contactsScrollSyncSourceRef = useRef<'viewport' | 'bottom' | null>(null)
const contactsScrollSyncSourceRef = useRef<'viewport' | 'top' | 'bottom' | null>(null)
const sessionFormatDropdownRef = useRef<HTMLDivElement | null>(null)
const detailRequestSeqRef = useRef(0)
const sessionsRef = useRef<SessionRow[]>([])
@@ -5665,13 +5666,18 @@ function ExportPage() {
row.mutualFriends.statusLabel.startsWith('加载中')
))
), [sessionLoadDetailRows])
const syncContactsHorizontalScroll = useCallback((source: 'viewport' | 'bottom', scrollLeft: number) => {
const syncContactsHorizontalScroll = useCallback((source: 'viewport' | 'top' | 'bottom', scrollLeft: number) => {
if (contactsScrollSyncSourceRef.current && contactsScrollSyncSourceRef.current !== source) return
contactsScrollSyncSourceRef.current = source
const topScrollbar = contactsTopScrollbarRef.current
const viewport = contactsHorizontalViewportRef.current
const bottomScrollbar = contactsBottomScrollbarRef.current
if (source !== 'top' && topScrollbar && Math.abs(topScrollbar.scrollLeft - scrollLeft) > 1) {
topScrollbar.scrollLeft = scrollLeft
}
if (source !== 'viewport' && viewport && Math.abs(viewport.scrollLeft - scrollLeft) > 1) {
viewport.scrollLeft = scrollLeft
}
@@ -5689,6 +5695,9 @@ function ExportPage() {
const handleContactsHorizontalViewportScroll = useCallback((event: UIEvent<HTMLDivElement>) => {
syncContactsHorizontalScroll('viewport', event.currentTarget.scrollLeft)
}, [syncContactsHorizontalScroll])
const handleContactsTopScrollbarScroll = useCallback((event: UIEvent<HTMLDivElement>) => {
syncContactsHorizontalScroll('top', event.currentTarget.scrollLeft)
}, [syncContactsHorizontalScroll])
const handleContactsBottomScrollbarScroll = useCallback((event: UIEvent<HTMLDivElement>) => {
syncContactsHorizontalScroll('bottom', event.currentTarget.scrollLeft)
}, [syncContactsHorizontalScroll])
@@ -5714,6 +5723,17 @@ function ExportPage() {
viewport.scrollLeft = clampedScrollLeft
}
const topScrollbar = contactsTopScrollbarRef.current
if (topScrollbar) {
const nextScrollLeft = Math.min(topScrollbar.scrollLeft, maxScrollLeft)
if (Math.abs(topScrollbar.scrollLeft - nextScrollLeft) > 1) {
topScrollbar.scrollLeft = nextScrollLeft
}
if (Math.abs(nextScrollLeft - clampedScrollLeft) > 1) {
topScrollbar.scrollLeft = clampedScrollLeft
}
}
const bottomScrollbar = contactsBottomScrollbarRef.current
if (bottomScrollbar) {
const nextScrollLeft = Math.min(bottomScrollbar.scrollLeft, maxScrollLeft)
@@ -6317,6 +6337,17 @@ function ExportPage() {
</div>
)}
{hasFilteredContacts && hasContactsHorizontalOverflow && (
<div
ref={contactsTopScrollbarRef}
className="table-top-scrollbar"
onScroll={handleContactsTopScrollbarScroll}
aria-label="会话列表顶部横向滚动条"
>
<div className="table-top-scrollbar-inner" style={contactsBottomScrollbarInnerStyle} />
</div>
)}
{hasFilteredContacts && (
<div className="contacts-list-header">
<span className="contacts-list-header-select">