76 lines
1.7 KiB
JavaScript
76 lines
1.7 KiB
JavaScript
// src/views/Community/components/EventListSection.js
|
||
// 事件列表区域组件（包含Loading、Empty、List三种状态）
|
||
|
||
import React from 'react';
|
||
import {
|
||
Box,
|
||
Center,
|
||
VStack,
|
||
Spinner,
|
||
Text
|
||
} from '@chakra-ui/react';
|
||
import EventList from './EventList';
|
||
|
||
/**
|
||
* 事件列表区域组件
|
||
* @param {boolean} loading - 加载状态
|
||
* @param {Array} events - 事件列表
|
||
* @param {Object} pagination - 分页信息
|
||
* @param {Function} onPageChange - 分页变化回调
|
||
* @param {Function} onEventClick - 事件点击回调
|
||
* @param {Function} onViewDetail - 查看详情回调
|
||
*/
|
||
const EventListSection = ({
|
||
loading,
|
||
events,
|
||
pagination,
|
||
onPageChange,
|
||
onEventClick,
|
||
onViewDetail
|
||
}) => {
|
||
// ✅ 最小高度，避免加载后高度突变
|
||
const minHeight = '600px';
|
||
|
||
// Loading 状态
|
||
if (loading) {
|
||
return (
|
||
<Box minH={minHeight}>
|
||
<Center py={10}>
|
||
<VStack>
|
||
<Spinner size="xl" color="blue.500" thickness="4px" />
|
||
<Text color="gray.500">正在加载最新事件...</Text>
|
||
</VStack>
|
||
</Center>
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
// Empty 状态
|
||
if (!events || events.length === 0) {
|
||
return (
|
||
<Box minH={minHeight}>
|
||
<Center py={10}>
|
||
<VStack>
|
||
<Text fontSize="lg" color="gray.500">暂无事件数据</Text>
|
||
</VStack>
|
||
</Center>
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
// List 状态
|
||
return (
|
||
<Box minH={minHeight}>
|
||
<EventList
|
||
events={events}
|
||
pagination={pagination}
|
||
onPageChange={onPageChange}
|
||
onEventClick={onEventClick}
|
||
onViewDetail={onViewDetail}
|
||
/>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default EventListSection;
|