pref: 去掉无用代码
This commit is contained in:
@@ -4,13 +4,9 @@
|
||||
import React, { useRef, useCallback } from 'react';
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
useColorModeValue
|
||||
} from '@chakra-ui/react';
|
||||
import PaginationControl from './PaginationControl';
|
||||
import VirtualizedFourRowGrid from './VirtualizedFourRowGrid';
|
||||
import PageNavigationButton from './PageNavigationButton';
|
||||
import ModeToggleButtons from './ModeToggleButtons';
|
||||
import VerticalModeLayout from './VerticalModeLayout';
|
||||
|
||||
/**
|
||||
@@ -79,97 +75,69 @@ const EventScrollList = ({
|
||||
}
|
||||
}, [onPageChange, currentPage]);
|
||||
|
||||
{/* 事件卡片容器 */}
|
||||
return (
|
||||
<Box>
|
||||
{/* 横向滚动区域 */}
|
||||
<Box position="relative">
|
||||
<Box
|
||||
ref={scrollContainerRef}
|
||||
overflowX="hidden"
|
||||
pt={0}
|
||||
pb={4}
|
||||
px={mode === 'four-row' ? 0 : 2}
|
||||
position="relative"
|
||||
css={{
|
||||
// 统一滚动条样式(支持横向和纵向)
|
||||
'&::-webkit-scrollbar': {
|
||||
width: '1px',
|
||||
height: '1px',
|
||||
},
|
||||
'&::-webkit-scrollbar-track': {
|
||||
background: scrollbarTrackBg,
|
||||
borderRadius: '10px',
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
background: scrollbarThumbBg,
|
||||
borderRadius: '10px',
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb:hover': {
|
||||
background: scrollbarThumbHoverBg,
|
||||
},
|
||||
scrollBehavior: 'smooth',
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
}}
|
||||
>
|
||||
{/* 平铺网格模式 - 使用虚拟滚动 + 双向无限滚动 */}
|
||||
<VirtualizedFourRowGrid
|
||||
display={mode === 'four-row' ? 'block' : 'none'}
|
||||
columnsPerRow={4} // 每行显示4列
|
||||
events={displayEvents || events} // 使用累积列表(如果有)
|
||||
selectedEvent={selectedEvent}
|
||||
onEventSelect={onFourRowEventClick} // 四排模式点击打开弹窗
|
||||
eventFollowStatus={eventFollowStatus}
|
||||
onToggleFollow={onToggleFollow}
|
||||
getTimelineBoxStyle={getTimelineBoxStyle}
|
||||
borderColor={borderColor}
|
||||
loadNextPage={loadNextPage} // 加载下一页
|
||||
loadPrevPage={loadPrevPage} // 加载上一页(双向滚动)
|
||||
hasMore={hasMore} // 是否还有更多数据
|
||||
loading={loading} // 加载状态
|
||||
error={error} // 错误状态
|
||||
onRetry={handleRetry} // 重试回调
|
||||
/>
|
||||
|
||||
{/* 翻页导航按钮(平铺模式不显示,使用无限滚动) */}
|
||||
{mode !== 'four-row' && (
|
||||
<>
|
||||
<PageNavigationButton
|
||||
direction="prev"
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={onPageChange}
|
||||
mode={mode}
|
||||
/>
|
||||
<PageNavigationButton
|
||||
direction="next"
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={onPageChange}
|
||||
mode={mode}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 事件卡片容器 */}
|
||||
<Box
|
||||
ref={scrollContainerRef}
|
||||
overflowX="hidden"
|
||||
pt={0}
|
||||
pb={4}
|
||||
px={mode === 'four-row' ? 0 : 2}
|
||||
position="relative"
|
||||
css={{
|
||||
// 统一滚动条样式(支持横向和纵向)
|
||||
'&::-webkit-scrollbar': {
|
||||
width: '1px',
|
||||
height: '1px',
|
||||
},
|
||||
'&::-webkit-scrollbar-track': {
|
||||
background: scrollbarTrackBg,
|
||||
borderRadius: '10px',
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
background: scrollbarThumbBg,
|
||||
borderRadius: '10px',
|
||||
},
|
||||
'&::-webkit-scrollbar-thumb:hover': {
|
||||
background: scrollbarThumbHoverBg,
|
||||
},
|
||||
scrollBehavior: 'smooth',
|
||||
WebkitOverflowScrolling: 'touch',
|
||||
}}
|
||||
>
|
||||
{/* 平铺网格模式 - 使用虚拟滚动 + 双向无限滚动 */}
|
||||
{mode === 'four-row' && (
|
||||
<VirtualizedFourRowGrid
|
||||
columnsPerRow={4} // 每行显示4列
|
||||
events={displayEvents || events} // 使用累积列表(如果有)
|
||||
selectedEvent={selectedEvent}
|
||||
onEventSelect={onFourRowEventClick} // 四排模式点击打开弹窗
|
||||
eventFollowStatus={eventFollowStatus}
|
||||
onToggleFollow={onToggleFollow}
|
||||
getTimelineBoxStyle={getTimelineBoxStyle}
|
||||
borderColor={borderColor}
|
||||
loadNextPage={loadNextPage} // 加载下一页
|
||||
loadPrevPage={loadPrevPage} // 加载上一页(双向滚动)
|
||||
hasMore={hasMore} // 是否还有更多数据
|
||||
loading={loading} // 加载状态
|
||||
error={error} // 错误状态
|
||||
onRetry={handleRetry} // 重试回调
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 纵向分栏模式 */}
|
||||
{mode === 'vertical' && (
|
||||
<VerticalModeLayout
|
||||
events={events}
|
||||
selectedEvent={selectedEvent}
|
||||
onEventSelect={onEventSelect}
|
||||
eventFollowStatus={eventFollowStatus}
|
||||
onToggleFollow={onToggleFollow}
|
||||
getTimelineBoxStyle={getTimelineBoxStyle}
|
||||
borderColor={borderColor}
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={onPageChange}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
{/* 纵向分栏模式 */}
|
||||
<VerticalModeLayout
|
||||
display={mode === 'vertical' ? 'block' : 'none'}
|
||||
events={events}
|
||||
selectedEvent={selectedEvent}
|
||||
onEventSelect={onEventSelect}
|
||||
eventFollowStatus={eventFollowStatus}
|
||||
onToggleFollow={onToggleFollow}
|
||||
getTimelineBoxStyle={getTimelineBoxStyle}
|
||||
borderColor={borderColor}
|
||||
currentPage={currentPage}
|
||||
totalPages={totalPages}
|
||||
onPageChange={onPageChange}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user