refactor: 删除单排和双排模式,简化事件列表展示
问题: - 事件列表组件包含4种模式(单排/双排/纵向/平铺) - 单排(carousel)和双排(grid)模式代码已被注释,未实际使用 - 保留未使用代码增加维护成本和代码复杂度 修改: 1. 删除未使用的 import(DynamicNewsEventCard, CompactEventCard, Spinner, HStack) 2. 删除加载遮罩相关代码(仅单排/双排模式使用) 3. 删除已注释的单排/双排切换按钮代码 4. 删除单排轮播模式完整实现(~32行) 5. 删除双排网格模式完整实现(~33行) 6. 更新组件注释:明确只支持纵向和平铺两种模式 7. 更新默认模式:carousel → vertical 8. 简化条件判断(overflowX/overflowY/maxH) 效果: - 代码从 361 行缩减到 254 行(删除 ~107 行) - 只保留两种实际使用的模式:纵向(vertical)和平铺(four-row) - 降低代码复杂度,提升可维护性 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -11,13 +11,9 @@ import {
|
|||||||
ButtonGroup,
|
ButtonGroup,
|
||||||
Center,
|
Center,
|
||||||
VStack,
|
VStack,
|
||||||
HStack,
|
|
||||||
Spinner,
|
|
||||||
Text,
|
Text,
|
||||||
useColorModeValue
|
useColorModeValue
|
||||||
} from '@chakra-ui/react';
|
} from '@chakra-ui/react';
|
||||||
import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard';
|
|
||||||
import CompactEventCard from '../EventCard/CompactEventCard';
|
|
||||||
import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
|
import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
|
||||||
import DynamicNewsDetailPanel from '../DynamicNewsDetail';
|
import DynamicNewsDetailPanel from '../DynamicNewsDetail';
|
||||||
import PaginationControl from './PaginationControl';
|
import PaginationControl from './PaginationControl';
|
||||||
@@ -25,7 +21,7 @@ import VirtualizedFourRowGrid from './VirtualizedFourRowGrid';
|
|||||||
import PageNavigationButton from './PageNavigationButton';
|
import PageNavigationButton from './PageNavigationButton';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 事件列表组件 - 支持两种展示模式
|
* 事件列表组件 - 支持纵向和平铺两种展示模式
|
||||||
* @param {Array} events - 当前页的事件列表(服务端已分页)
|
* @param {Array} events - 当前页的事件列表(服务端已分页)
|
||||||
* @param {Object} selectedEvent - 当前选中的事件
|
* @param {Object} selectedEvent - 当前选中的事件
|
||||||
* @param {Function} onEventSelect - 事件选择回调
|
* @param {Function} onEventSelect - 事件选择回调
|
||||||
@@ -35,7 +31,7 @@ import PageNavigationButton from './PageNavigationButton';
|
|||||||
* @param {Function} onPageChange - 页码改变回调
|
* @param {Function} onPageChange - 页码改变回调
|
||||||
* @param {boolean} loading - 全局加载状态
|
* @param {boolean} loading - 全局加载状态
|
||||||
* @param {number|null} loadingPage - 正在加载的目标页码(用于显示"正在加载第X页...")
|
* @param {number|null} loadingPage - 正在加载的目标页码(用于显示"正在加载第X页...")
|
||||||
* @param {string} mode - 展示模式:'carousel'(单排轮播)| 'grid'(双排网格)
|
* @param {string} mode - 展示模式:'vertical'(纵向分栏)| 'four-row'(平铺网格)
|
||||||
* @param {Function} onModeChange - 模式切换回调
|
* @param {Function} onModeChange - 模式切换回调
|
||||||
* @param {boolean} hasMore - 是否还有更多数据
|
* @param {boolean} hasMore - 是否还有更多数据
|
||||||
* @param {Object} eventFollowStatus - 事件关注状态 { [eventId]: { isFollowing, followerCount } }
|
* @param {Object} eventFollowStatus - 事件关注状态 { [eventId]: { isFollowing, followerCount } }
|
||||||
@@ -55,7 +51,7 @@ const EventScrollList = ({
|
|||||||
totalPages,
|
totalPages,
|
||||||
onPageChange,
|
onPageChange,
|
||||||
loading = false,
|
loading = false,
|
||||||
mode = 'carousel',
|
mode = 'vertical',
|
||||||
onModeChange,
|
onModeChange,
|
||||||
hasMore = true,
|
hasMore = true,
|
||||||
eventFollowStatus = {},
|
eventFollowStatus = {},
|
||||||
@@ -73,10 +69,6 @@ const EventScrollList = ({
|
|||||||
const scrollbarThumbBg = useColorModeValue('#888', '#4A5568');
|
const scrollbarThumbBg = useColorModeValue('#888', '#4A5568');
|
||||||
const scrollbarThumbHoverBg = useColorModeValue('#555', '#718096');
|
const scrollbarThumbHoverBg = useColorModeValue('#555', '#718096');
|
||||||
|
|
||||||
// 加载遮罩颜色
|
|
||||||
const loadingOverlayBg = useColorModeValue('whiteAlpha.800', 'blackAlpha.700');
|
|
||||||
const loadingTextColor = useColorModeValue('gray.600', 'gray.300');
|
|
||||||
|
|
||||||
const getTimelineBoxStyle = () => {
|
const getTimelineBoxStyle = () => {
|
||||||
return {
|
return {
|
||||||
bg: timelineBg,
|
bg: timelineBg,
|
||||||
@@ -89,24 +81,10 @@ const EventScrollList = ({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Box>
|
<Box>
|
||||||
{/* 顶部控制栏:模式切换按钮(左)+ 分页控制器 + 加载提示(右) */}
|
{/* 顶部控制栏:模式切换按钮(左)+ 分页控制器(右) */}
|
||||||
<Flex justify="space-between" align="center" mb={2}>
|
<Flex justify="space-between" align="center" mb={2}>
|
||||||
{/* 模式切换按钮 */}
|
{/* 模式切换按钮 */}
|
||||||
<ButtonGroup size="sm" isAttached>
|
<ButtonGroup size="sm" isAttached>
|
||||||
{/* <Button
|
|
||||||
onClick={() => onModeChange('carousel')}
|
|
||||||
colorScheme="blue"
|
|
||||||
variant={mode === 'carousel' ? 'solid' : 'outline'}
|
|
||||||
>
|
|
||||||
单排
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
onClick={() => onModeChange('grid')}
|
|
||||||
colorScheme="blue"
|
|
||||||
variant={mode === 'grid' ? 'solid' : 'outline'}
|
|
||||||
>
|
|
||||||
双排
|
|
||||||
</Button> */}
|
|
||||||
<Button
|
<Button
|
||||||
onClick={() => onModeChange('vertical')}
|
onClick={() => onModeChange('vertical')}
|
||||||
colorScheme="blue"
|
colorScheme="blue"
|
||||||
@@ -159,9 +137,9 @@ const EventScrollList = ({
|
|||||||
{/* 事件卡片容器 */}
|
{/* 事件卡片容器 */}
|
||||||
<Box
|
<Box
|
||||||
ref={scrollContainerRef}
|
ref={scrollContainerRef}
|
||||||
overflowX={mode === 'carousel' ? 'auto' : 'hidden'}
|
overflowX="hidden"
|
||||||
overflowY={mode === 'four-row' || mode === 'vertical' ? 'hidden' : 'auto'}
|
overflowY="hidden"
|
||||||
maxH={mode === 'vertical' ? '820px' : (mode === 'four-row' ? 'none' : '800px')}
|
maxH={mode === 'vertical' ? '820px' : 'none'}
|
||||||
pt={0}
|
pt={0}
|
||||||
pb={4}
|
pb={4}
|
||||||
px={2}
|
px={2}
|
||||||
@@ -187,95 +165,7 @@ const EventScrollList = ({
|
|||||||
WebkitOverflowScrolling: 'touch',
|
WebkitOverflowScrolling: 'touch',
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* 加载遮罩 - 四排和纵向模式不显示(使用底部 loading 指示器) */}
|
{/* 平铺网格模式 - 使用虚拟滚动 + 双向无限滚动 */}
|
||||||
{loading && mode !== 'four-row' && mode !== 'vertical' && (
|
|
||||||
<Center
|
|
||||||
position="absolute"
|
|
||||||
top={0}
|
|
||||||
left={0}
|
|
||||||
right={0}
|
|
||||||
bottom={0}
|
|
||||||
bg={loadingOverlayBg}
|
|
||||||
backdropFilter="blur(2px)"
|
|
||||||
zIndex={10}
|
|
||||||
borderRadius="md"
|
|
||||||
>
|
|
||||||
<VStack>
|
|
||||||
<Spinner size="lg" color="blue.500" thickness="3px" />
|
|
||||||
<Text fontSize="sm" color={loadingTextColor}>
|
|
||||||
加载中...
|
|
||||||
</Text>
|
|
||||||
</VStack>
|
|
||||||
</Center>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 模式1: 单排轮播模式 */}
|
|
||||||
{mode === 'carousel' && (
|
|
||||||
<Flex gap={4}>
|
|
||||||
{events.map((event, index) => (
|
|
||||||
<Box
|
|
||||||
key={event.id}
|
|
||||||
minW="calc((100% - 64px) / 5)"
|
|
||||||
maxW="calc((100% - 64px) / 5)"
|
|
||||||
flexShrink={0}
|
|
||||||
>
|
|
||||||
<DynamicNewsEventCard
|
|
||||||
event={event}
|
|
||||||
index={index}
|
|
||||||
isFollowing={eventFollowStatus[event.id]?.isFollowing || false}
|
|
||||||
followerCount={eventFollowStatus[event.id]?.followerCount || event.follower_count || 0}
|
|
||||||
isSelected={selectedEvent?.id === event.id}
|
|
||||||
onEventClick={(clickedEvent) => {
|
|
||||||
onEventSelect(clickedEvent);
|
|
||||||
}}
|
|
||||||
onTitleClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
onEventSelect(event);
|
|
||||||
}}
|
|
||||||
onToggleFollow={() => onToggleFollow?.(event.id)}
|
|
||||||
timelineStyle={getTimelineBoxStyle()}
|
|
||||||
borderColor={borderColor}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
))}
|
|
||||||
</Flex>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 模式2: 双排网格模式 */}
|
|
||||||
{mode === 'grid' && (
|
|
||||||
<Grid
|
|
||||||
templateRows="repeat(2, 1fr)"
|
|
||||||
templateColumns="repeat(5, 1fr)"
|
|
||||||
gap={4}
|
|
||||||
autoFlow="column"
|
|
||||||
>
|
|
||||||
{events.map((event, index) => (
|
|
||||||
<Box key={event.id}>
|
|
||||||
<DynamicNewsEventCard
|
|
||||||
event={event}
|
|
||||||
index={index}
|
|
||||||
isFollowing={eventFollowStatus[event.id]?.isFollowing || false}
|
|
||||||
followerCount={eventFollowStatus[event.id]?.followerCount || event.follower_count || 0}
|
|
||||||
isSelected={selectedEvent?.id === event.id}
|
|
||||||
onEventClick={(clickedEvent) => {
|
|
||||||
onEventSelect(clickedEvent);
|
|
||||||
}}
|
|
||||||
onTitleClick={(e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
onEventSelect(event);
|
|
||||||
}}
|
|
||||||
onToggleFollow={() => onToggleFollow?.(event.id)}
|
|
||||||
timelineStyle={getTimelineBoxStyle()}
|
|
||||||
borderColor={borderColor}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
))}
|
|
||||||
</Grid>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* 模式3: 四排网格模式 - 使用虚拟滚动 + 双向无限滚动 */}
|
|
||||||
{mode === 'four-row' && (
|
{mode === 'four-row' && (
|
||||||
<VirtualizedFourRowGrid
|
<VirtualizedFourRowGrid
|
||||||
events={displayEvents || events} // 使用累积列表(如果有)
|
events={displayEvents || events} // 使用累积列表(如果有)
|
||||||
|
|||||||
Reference in New Issue
Block a user