feat: 优化事件中心页面 重构后的文件结构

src/views/Community/
     ├── index.js (主组件,150行左右)
     ├── components/
     │   ├── EventTimelineCard.js (新增)
     │   ├── EventTimelineHeader.js (新增)
     │   ├── EventListSection.js (新增)
     │   ├── HotEventsSection.js (新增)
     │   ├── EventModals.js (新增)
     │   ├── UnifiedSearchBox.js (已有)
     │   ├── EventList.js (已有)
     │   └── ...
     └── hooks/
         ├── useEventFilters.js (新增)
         └── useEventData.js (新增)
This commit is contained in:
zdl
2025-10-26 20:31:34 +08:00
parent f1bd9680b6
commit 97c5ce0d4d
8 changed files with 500 additions and 269 deletions

View File

@@ -0,0 +1,80 @@
// src/views/Community/components/EventTimelineCard.js
// 事件时间轴卡片组件整合Header + Search + List
import React, { forwardRef } from 'react';
import {
Card,
CardHeader,
CardBody,
Box,
useColorModeValue
} from '@chakra-ui/react';
import EventTimelineHeader from './EventTimelineHeader';
import UnifiedSearchBox from './UnifiedSearchBox';
import EventListSection from './EventListSection';
/**
* 事件时间轴卡片组件
* @param {Array} events - 事件列表
* @param {boolean} loading - 加载状态
* @param {Object} pagination - 分页信息
* @param {Object} filters - 筛选条件
* @param {Array} popularKeywords - 热门关键词
* @param {Date} lastUpdateTime - 最后更新时间
* @param {Function} onSearch - 搜索回调
* @param {Function} onPageChange - 分页变化回调
* @param {Function} onEventClick - 事件点击回调
* @param {Function} onViewDetail - 查看详情回调
* @param {Object} ref - 用于滚动的ref
*/
const EventTimelineCard = forwardRef(({
events,
loading,
pagination,
filters,
popularKeywords,
lastUpdateTime,
onSearch,
onPageChange,
onEventClick,
onViewDetail
}, ref) => {
const cardBg = useColorModeValue('white', 'gray.800');
const borderColor = useColorModeValue('gray.200', 'gray.700');
return (
<Card ref={ref} bg={cardBg} borderColor={borderColor} mb={4}>
{/* 标题部分 */}
<CardHeader>
<EventTimelineHeader lastUpdateTime={lastUpdateTime} />
</CardHeader>
{/* 主体内容 */}
<CardBody>
{/* 统一搜索组件(整合了话题、股票、行业、日期、排序、重要性、热门概念、筛选标签) */}
<Box mb={4}>
<UnifiedSearchBox
onSearch={onSearch}
popularKeywords={popularKeywords}
filters={filters}
loading={loading}
/>
</Box>
{/* 事件列表包含Loading、Empty、List三种状态 */}
<EventListSection
loading={loading}
events={events}
pagination={pagination}
onPageChange={onPageChange}
onEventClick={onEventClick}
onViewDetail={onViewDetail}
/>
</CardBody>
</Card>
);
});
EventTimelineCard.displayName = 'EventTimelineCard';
export default EventTimelineCard;