vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 集成四排/纵向模式UI和优化交互逻辑

Browse Source 
VirtualizedFourRowGrid:
- 组件通用化，支持多列布局（通过 columnsPerRow 参数配置）
- 支持自定义卡片组件（通过 CardComponent 参数传入）
- 根据列数动态调整间距

EventScrollList:
- 添加四排和纵向模式切换按钮
- 集成 VirtualizedFourRowGrid 组件（四排模式使用4列，纵向模式使用1列）
- 添加纵向分栏布局（1:2 比例，左侧列表+右侧详情）
- 启用纵向滚动和统一滚动条样式
- 接收新 props: displayEvents, isAccumulateMode, loadNextPage, onFourRowEventClick

DynamicNewsCard:
- 添加 Modal 弹窗显示四排模式详情
- 优化自动选中逻辑：
  · 首次加载时自动选中第一个事件
  · 翻页时，单排/双排/纵向模式自动选中当前页第一个事件（保持详情显示）
  · 翻页时，四排模式清空选中状态（通过弹窗显示详情）
- 传递新 props 到 EventScrollList
- 添加调试日志
This commit is contained in:
zdl
2025-11-05 08:56:44 +08:00
parent be0c53b588
commit f9387ffbd9
3 changed files with 198 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/views/Community/components/DynamicNewsCard.js
View File

@@ -16,8 +16,15 @@ import {
Badge,
Center,
Spinner,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalBody,
ModalCloseButton,
useColorModeValue,
useToast
useToast,
useDisclosure
} from '@chakra-ui/react';
import { TimeIcon } from '@chakra-ui/icons';
import EventScrollList from './DynamicNewsCard/EventScrollList';
@@ -27,6 +34,9 @@ import { fetchDynamicNews, toggleEventFollow, selectEventFollowStatus } from '..
import { usePagination } from './DynamicNewsCard/hooks/usePagination';
import { PAGINATION_CONFIG } from './DynamicNewsCard/constants';
// 🔍 调试：渲染计数器
let dynamicNewsCardRenderCount = 0;
/**
* 实时要闻·动态追踪 - 事件展示卡片组件
* @param {Array} allCachedEvents - 完整缓存事件列表（从 Redux 传入）
@@ -56,6 +66,9 @@ const DynamicNewsCard = forwardRef(({
onViewDetail,
...rest
}, ref) => {
// 🔍 调试：记录每次渲染
dynamicNewsCardRenderCount++;
console.log(`%c🔍 [DynamicNewsCard] 渲染 #${dynamicNewsCardRenderCount} - allCachedEvents.length=${allCachedEvents.length}, total=${total}`, 'color: #FF9800; font-weight: bold; font-size: 14px;');
const dispatch = useDispatch();
const toast = useToast();
const cardBg = useColorModeValue('white', 'gray.800');
@@ -72,8 +85,14 @@ const DynamicNewsCard = forwardRef(({
// 本地状态
const [selectedEvent, setSelectedEvent] = useState(null);
// 弹窗状态（用于四排模式）
const { isOpen: isModalOpen, onOpen: onModalOpen, onClose: onModalClose } = useDisclosure();
const [modalEvent, setModalEvent] = useState(null);
// 初始化标记 - 确保初始加载只执行一次
const hasInitialized = useRef(false);
// 追踪是否已自动选中过首个事件
const hasAutoSelectedFirstEvent = useRef(false);
// 使用分页 Hook
const {
@@ -84,8 +103,11 @@ const DynamicNewsCard = forwardRef(({
totalPages,
hasMore,
currentPageEvents,
displayEvents, // 新增：累积显示的事件列表
isAccumulateMode, // 新增：是否累积模式
handlePageChange,
handleModeToggle
handleModeToggle,
loadNextPage // 新增：加载下一页
} = usePagination({
allCachedEvents,
total,
@@ -94,6 +116,13 @@ const DynamicNewsCard = forwardRef(({
toast
});
// 四排模式的事件点击处理（打开弹窗）
const handleFourRowEventClick = useCallback((event) => {
console.log('%c🔲 [四排模式] 点击事件，打开详情弹窗', 'color: #8B5CF6; font-weight: bold;', { eventId: event.id, title: event.title });
setModalEvent(event);
onModalOpen();
}, [onModalOpen]);
// 初始加载 - 只在组件首次挂载且未初始化时执行
useEffect(() => {
if (!hasInitialized.current && allCachedEvents.length === 0) {
@@ -107,20 +136,37 @@ const DynamicNewsCard = forwardRef(({
}
}, [dispatch, allCachedEvents.length]);
// 默认选中第一个事件 - 只在当前选中的事件不在当前页时重置
// 自动选中逻辑 - 只在首次加载时自动选中第一个事件，翻页时不自动选中
useEffect(() => {
if (currentPageEvents.length > 0) {
// 检查当前选中的事件是否在当前页中
// 情况1: 首次加载 - 自动选中第一个事件并触发详情加载
if (!hasAutoSelectedFirstEvent.current && !selectedEvent) {
console.log('%c🎯 [首次加载] 自动选中第一个事件', 'color: #10B981; font-weight: bold;');
hasAutoSelectedFirstEvent.current = true;
setSelectedEvent(currentPageEvents[0]);
return;
}
// 情况2: 翻页 - 如果选中的事件不在当前页，根据模式决定处理方式
const selectedEventInCurrentPage = currentPageEvents.find(
e => e.id === selectedEvent?.id
);
// 如果选中的事件不在当前页，则选中当前页第一个事件
if (!selectedEventInCurrentPage) {
setSelectedEvent(currentPageEvents[0]);
if (selectedEvent && !selectedEventInCurrentPage) {
console.log('%c📄 [翻页] 选中的事件不在当前页', 'color: #F59E0B; font-weight: bold;');
// 单排/双排/纵向模式：自动选中当前页第一个事件（保持详情显示）
// 四排模式：清空选中状态（不需要底部详情）
if (mode === 'carousel' || mode === 'grid' || mode === 'vertical') {
console.log('%c📄 [翻页] 自动选中当前页第一个事件', 'color: #10B981; font-weight: bold;');
setSelectedEvent(currentPageEvents[0]);
} else {
console.log('%c📄 [翻页] 清空选中状态（四排模式）', 'color: #F59E0B; font-weight: bold;');
setSelectedEvent(null);
}
}
}
}, [currentPageEvents, selectedEvent?.id]);
}, [currentPageEvents, selectedEvent?.id, mode]);
// 组件卸载时清理选中状态
useEffect(() => {
@@ -169,6 +215,10 @@ const DynamicNewsCard = forwardRef(({
{currentPageEvents && currentPageEvents.length > 0 ? (
<EventScrollList
events={currentPageEvents}
displayEvents={displayEvents} // 新增：累积显示的事件列表
isAccumulateMode={isAccumulateMode} // 新增：是否累积模式
loadNextPage={loadNextPage} // 新增：加载下一页
onFourRowEventClick={handleFourRowEventClick} // 新增：四排模式事件点击
selectedEvent={selectedEvent}
onEventSelect={setSelectedEvent}
borderColor={borderColor}
@@ -200,13 +250,30 @@ const DynamicNewsCard = forwardRef(({
</Center>
)}
{/* 详情面板 - 始终显示（如果有选中事件） */}
{currentPageEvents && currentPageEvents.length > 0 && selectedEvent && (
{/* 详情面板 - 仅在单排/双排模式下显示（四排模式不显示，纵向模式已在右侧显示） */}
{currentPageEvents && currentPageEvents.length > 0 && selectedEvent &&
(mode === 'carousel' || mode === 'grid') && (
<Box mt={6}>
<DynamicNewsDetailPanel event={selectedEvent} />
</Box>
)}
</CardBody>
{/* 四排模式详情弹窗 - 未打开时不渲染 */}
{isModalOpen && (
<Modal isOpen={isModalOpen} onClose={onModalClose} size="6xl" scrollBehavior="inside">
<ModalOverlay />
<ModalContent>
<ModalHeader>
{modalEvent?.title || '事件详情'}
</ModalHeader>
<ModalCloseButton />
<ModalBody pb={6}>
{modalEvent && <DynamicNewsDetailPanel event={modalEvent} />}
</ModalBody>
</ModalContent>
</Modal>
)}
</Card>
);
});

130
src/views/Community/components/DynamicNewsCard/EventScrollList.js
View File

@@ -6,6 +6,7 @@ import {
Box,
Flex,
Grid,
GridItem,
IconButton,
Button,
ButtonGroup,
@@ -18,7 +19,11 @@ import {
} from '@chakra-ui/react';
import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard';
import CompactEventCard from '../EventCard/CompactEventCard';
import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
import DynamicNewsDetailPanel from '../DynamicNewsDetail';
import PaginationControl from './PaginationControl';
import VirtualizedFourRowGrid from './VirtualizedFourRowGrid';
/**
* 事件列表组件 - 支持两种展示模式
@@ -39,6 +44,10 @@ import PaginationControl from './PaginationControl';
*/
const EventScrollList = ({
events,
displayEvents, // 累积显示的事件列表（四排模式用）
isAccumulateMode, // 是否累积模式
loadNextPage, // 加载下一页（无限滚动）
onFourRowEventClick, // 四排模式事件点击回调（打开弹窗）
selectedEvent,
onEventSelect,
borderColor,
@@ -88,7 +97,7 @@ const EventScrollList = ({
<Flex justify="space-between" align="center" mb={2}>
{/* 模式切换按钮 */}
<ButtonGroup size="sm" isAttached>
<Button
{/* <Button
onClick={() => onModeChange('carousel')}
colorScheme="blue"
variant={mode === 'carousel' ? 'solid' : 'outline'}
@@ -101,6 +110,20 @@ const EventScrollList = ({
variant={mode === 'grid' ? 'solid' : 'outline'}
>
双排
</Button> */}
<Button
onClick={() => onModeChange('vertical')}
colorScheme="blue"
variant={mode === 'vertical' ? 'solid' : 'outline'}
>
纵向
</Button>
<Button
onClick={() => onModeChange('four-row')}
colorScheme="blue"
variant={mode === 'four-row' ? 'solid' : 'outline'}
>
平铺
</Button>
</ButtonGroup>
@@ -126,7 +149,10 @@ const EventScrollList = ({
top="50%"
transform="translateY(-50%)"
zIndex={2}
onClick={() => onPageChange(currentPage - 1)}
onClick={() => {
console.log(`%c🔵 [翻页] 点击上一页: 当前页${currentPage} → 目标页${currentPage - 1} (共${totalPages}页)`, 'color: #3B82F6; font-weight: bold;');
onPageChange(currentPage - 1);
}}
variant="ghost"
size="md"
w="40px"
@@ -146,7 +172,7 @@ const EventScrollList = ({
)}
{/* 右侧翻页按钮 - 下一页 */}
{currentPage < totalPages && hasMore && (
{currentPage < totalPages && (
<IconButton
icon={<ChevronRightIcon boxSize={6} color="blue.500" />}
position="absolute"
@@ -154,7 +180,10 @@ const EventScrollList = ({
top="50%"
transform="translateY(-50%)"
zIndex={2}
onClick={() => onPageChange(currentPage + 1)}
onClick={() => {
console.log(`%c🔵 [翻页] 点击下一页: 当前页${currentPage} → 目标页${currentPage + 1} (共${totalPages}页)`, 'color: #3B82F6; font-weight: bold;');
onPageChange(currentPage + 1);
}}
variant="ghost"
size="md"
w="40px"
@@ -168,7 +197,7 @@ const EventScrollList = ({
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
transform: 'translateY(-50%) scale(1.05)'
}}
isDisabled={currentPage >= totalPages && !hasMore}
isDisabled={currentPage >= totalPages}
aria-label="下一页"
title="下一页"
/>
@@ -178,13 +207,16 @@ const EventScrollList = ({
<Box
ref={scrollContainerRef}
overflowX={mode === 'carousel' ? 'auto' : 'hidden'}
overflowY="hidden"
overflowY="auto" // ✅ 启用纵向滚动
maxH="600px" // ✅ 添加最大高度限制
pt={0}
pb={4}
px={2}
position="relative"
css={mode === 'carousel' ? {
css={{
// 统一滚动条样式（支持横向和纵向）
'&::-webkit-scrollbar': {
width: '8px',
height: '8px',
},
'&::-webkit-scrollbar-track': {
@@ -200,10 +232,10 @@ const EventScrollList = ({
},
scrollBehavior: 'smooth',
WebkitOverflowScrolling: 'touch',
} : {}}
}}
>
{/* 加载遮罩 */}
{loading && (
{/* 加载遮罩 - 四排和纵向模式不显示（使用底部 loading 指示器） */}
{loading && mode !== 'four-row' && mode !== 'vertical' && (
<Center
position="absolute"
top={0}
@@ -289,6 +321,84 @@ const EventScrollList = ({
))}
</Grid>
)}
{/* 模式3: 四排网格模式 - 使用虚拟滚动 + 无限滚动 */}
{mode === 'four-row' && (
<VirtualizedFourRowGrid
events={displayEvents || events} // 使用累积列表（如果有）
selectedEvent={selectedEvent}
onEventSelect={onFourRowEventClick} // 四排模式点击打开弹窗
eventFollowStatus={eventFollowStatus}
onToggleFollow={onToggleFollow}
getTimelineBoxStyle={getTimelineBoxStyle}
borderColor={borderColor}
loadNextPage={loadNextPage} // 加载下一页
hasMore={hasMore} // 是否还有更多数据
loading={loading} // 加载状态
/>
)}
{/* 模式4: 纵向分栏模式 - 横向布局（时间在左，卡片在右） */}
{mode === 'vertical' && (
<Grid templateColumns="1fr 2fr" gap={6} minH="500px">
{/* 左侧：事件列表 (33.3%) - 使用虚拟滚动 + 无限滚动 */}
<GridItem>
<VirtualizedFourRowGrid
events={displayEvents || events} // 使用累积列表
columnsPerRow={1} // 单列布局
CardComponent={HorizontalDynamicNewsEventCard} // 使用横向卡片
selectedEvent={selectedEvent}
onEventSelect={onEventSelect}
eventFollowStatus={eventFollowStatus}
onToggleFollow={onToggleFollow}
getTimelineBoxStyle={getTimelineBoxStyle}
borderColor={borderColor}
loadNextPage={loadNextPage} // 支持无限滚动
hasMore={hasMore}
loading={loading}
/>
</GridItem>
{/* 右侧：事件详情 (66.7%) */}
<GridItem>
<Box
overflowY="auto"
maxH="600px"
pl={2}
css={{
overscrollBehavior: 'contain',
'&::-webkit-scrollbar': {
width: '6px',
},
'&::-webkit-scrollbar-track': {
background: scrollbarTrackBg,
borderRadius: '10px',
},
'&::-webkit-scrollbar-thumb': {
background: scrollbarThumbBg,
borderRadius: '10px',
},
'&::-webkit-scrollbar-thumb:hover': {
background: scrollbarThumbHoverBg,
borderRadius: '10px',
},
}}
>
{selectedEvent ? (
<DynamicNewsDetailPanel event={selectedEvent} />
) : (
<Center h="100%" minH="400px">
<VStack spacing={4}>
<Text fontSize="lg" color="gray.500">
请选择左侧事件查看详情
</Text>
</VStack>
</Center>
)}
</Box>
</GridItem>
</Grid>
)}
</Box>
</Box>
</Box>

2
src/views/Community/components/DynamicNewsCard/constants.js
View File

@@ -19,7 +19,7 @@ export const DISPLAY_MODES = {
VERTICAL: 'vertical', // 纵向分栏模式
};
export const DEFAULT_MODE = DISPLAY_MODES.CAROUSEL;
export const DEFAULT_MODE = DISPLAY_MODES.VERTICAL;
// ========== Toast 提示配置 ==========
export const TOAST_CONFIG = {