pref: 去掉无用代码
This commit is contained in:
@@ -4,13 +4,9 @@
|
|||||||
import React, { useRef, useCallback } from 'react';
|
import React, { useRef, useCallback } from 'react';
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Flex,
|
|
||||||
useColorModeValue
|
useColorModeValue
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import PaginationControl from './PaginationControl';
|
|
||||||
import VirtualizedFourRowGrid from './VirtualizedFourRowGrid';
|
import VirtualizedFourRowGrid from './VirtualizedFourRowGrid';
|
||||||
import PageNavigationButton from './PageNavigationButton';
|
|
||||||
import ModeToggleButtons from './ModeToggleButtons';
|
|
||||||
import VerticalModeLayout from './VerticalModeLayout';
|
import VerticalModeLayout from './VerticalModeLayout';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -79,97 +75,69 @@ const EventScrollList = ({
|
|||||||
}
|
}
|
||||||
}, [onPageChange, currentPage]);
|
}, [onPageChange, currentPage]);
|
||||||
|
|
||||||
|
{/* 事件卡片容器 */}
|
||||||
return (
|
return (
|
||||||
<Box>
|
<Box
|
||||||
{/* 横向滚动区域 */}
|
ref={scrollContainerRef}
|
||||||
<Box position="relative">
|
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' && (
|
<VerticalModeLayout
|
||||||
<>
|
display={mode === 'vertical' ? 'block' : 'none'}
|
||||||
<PageNavigationButton
|
events={events}
|
||||||
direction="prev"
|
selectedEvent={selectedEvent}
|
||||||
currentPage={currentPage}
|
onEventSelect={onEventSelect}
|
||||||
totalPages={totalPages}
|
eventFollowStatus={eventFollowStatus}
|
||||||
onPageChange={onPageChange}
|
onToggleFollow={onToggleFollow}
|
||||||
mode={mode}
|
getTimelineBoxStyle={getTimelineBoxStyle}
|
||||||
/>
|
borderColor={borderColor}
|
||||||
<PageNavigationButton
|
currentPage={currentPage}
|
||||||
direction="next"
|
totalPages={totalPages}
|
||||||
currentPage={currentPage}
|
onPageChange={onPageChange}
|
||||||
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>
|
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user