84 lines
2.4 KiB
JavaScript
84 lines
2.4 KiB
JavaScript
// 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} onSearchFocus - 搜索框获得焦点回调
|
||
* @param {Function} onPageChange - 分页变化回调
|
||
* @param {Function} onEventClick - 事件点击回调
|
||
* @param {Function} onViewDetail - 查看详情回调
|
||
* @param {Object} ref - 用于滚动的ref
|
||
*/
|
||
const EventTimelineCard = forwardRef(({
|
||
events,
|
||
loading,
|
||
pagination,
|
||
filters,
|
||
popularKeywords,
|
||
lastUpdateTime,
|
||
onSearch,
|
||
onSearchFocus,
|
||
onPageChange,
|
||
onEventClick,
|
||
onViewDetail,
|
||
...rest
|
||
}, ref) => {
|
||
const cardBg = useColorModeValue('white', 'gray.800');
|
||
const borderColor = useColorModeValue('gray.200', 'gray.700');
|
||
|
||
return (
|
||
<Card ref={ref} {...rest} bg={cardBg} borderColor={borderColor} mb={4}>
|
||
{/* 标题部分 */}
|
||
<CardHeader>
|
||
<EventTimelineHeader lastUpdateTime={lastUpdateTime} />
|
||
</CardHeader>
|
||
|
||
{/* 主体内容 */}
|
||
<CardBody>
|
||
{/* 统一搜索组件（整合了话题、股票、行业、日期、排序、重要性、热门概念、筛选标签） */}
|
||
<Box mb={4}>
|
||
<UnifiedSearchBox
|
||
onSearch={onSearch}
|
||
onSearchFocus={onSearchFocus}
|
||
popularKeywords={popularKeywords}
|
||
filters={filters}
|
||
/>
|
||
</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;
|