diff --git a/src/pages/ExportPage.scss b/src/pages/ExportPage.scss index 6c2b112..632ec42 100644 --- a/src/pages/ExportPage.scss +++ b/src/pages/ExportPage.scss @@ -1975,12 +1975,11 @@ } } + .table-top-scrollbar, .table-bottom-scrollbar { flex: 0 0 auto; - height: 16px; overflow-x: auto; overflow-y: hidden; - border-top: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent); background: color-mix(in srgb, var(--bg-primary) 86%, var(--bg-secondary)); scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-tertiary) 70%, transparent) transparent; @@ -1999,10 +1998,24 @@ } } + .table-top-scrollbar { + height: 14px; + border-bottom: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent); + } + .table-bottom-scrollbar-inner { height: 1px; } + .table-bottom-scrollbar { + height: 16px; + border-top: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent); + } + + .table-top-scrollbar-inner { + height: 1px; + } + .selection-clear-btn { border: 1px solid var(--border-color); border-radius: 8px; diff --git a/src/pages/ExportPage.tsx b/src/pages/ExportPage.tsx index 956c4f2..31fd25f 100644 --- a/src/pages/ExportPage.tsx +++ b/src/pages/ExportPage.tsx @@ -1537,10 +1537,11 @@ function ExportPage() { const contactsAvatarCacheRef = useRef>({}) const contactsVirtuosoRef = useRef(null) const sessionTableSectionRef = useRef(null) + const contactsTopScrollbarRef = useRef(null) const contactsHorizontalViewportRef = useRef(null) const contactsHorizontalContentRef = useRef(null) const contactsBottomScrollbarRef = useRef(null) - const contactsScrollSyncSourceRef = useRef<'viewport' | 'bottom' | null>(null) + const contactsScrollSyncSourceRef = useRef<'viewport' | 'top' | 'bottom' | null>(null) const sessionFormatDropdownRef = useRef(null) const detailRequestSeqRef = useRef(0) const sessionsRef = useRef([]) @@ -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) => { syncContactsHorizontalScroll('viewport', event.currentTarget.scrollLeft) }, [syncContactsHorizontalScroll]) + const handleContactsTopScrollbarScroll = useCallback((event: UIEvent) => { + syncContactsHorizontalScroll('top', event.currentTarget.scrollLeft) + }, [syncContactsHorizontalScroll]) const handleContactsBottomScrollbarScroll = useCallback((event: UIEvent) => { 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() { )} + {hasFilteredContacts && hasContactsHorizontalOverflow && ( +
+
+
+ )} + {hasFilteredContacts && (