feat: 事件列表添加最低高度

This commit is contained in:
zdl
2025-10-27 00:12:09 +08:00
parent 794581e429
commit 197c792219

View File

@@ -3,6 +3,7 @@
import React from 'react'; import React from 'react';
import { import {
Box,
Center, Center,
VStack, VStack,
Spinner, Spinner,
@@ -27,38 +28,47 @@ const EventListSection = ({
onEventClick, onEventClick,
onViewDetail onViewDetail
}) => { }) => {
// ✅ 最小高度,避免加载后高度突变
const minHeight = '600px';
// Loading 状态 // Loading 状态
if (loading) { if (loading) {
return ( return (
<Center py={10}> <Box minH={minHeight}>
<VStack> <Center py={10}>
<Spinner size="xl" color="blue.500" thickness="4px" /> <VStack>
<Text color="gray.500">正在加载最新事件...</Text> <Spinner size="xl" color="blue.500" thickness="4px" />
</VStack> <Text color="gray.500">正在加载最新事件...</Text>
</Center> </VStack>
</Center>
</Box>
); );
} }
// Empty 状态 // Empty 状态
if (!events || events.length === 0) { if (!events || events.length === 0) {
return ( return (
<Center py={10}> <Box minH={minHeight}>
<VStack> <Center py={10}>
<Text fontSize="lg" color="gray.500">暂无事件数据</Text> <VStack>
</VStack> <Text fontSize="lg" color="gray.500">暂无事件数据</Text>
</Center> </VStack>
</Center>
</Box>
); );
} }
// List 状态 // List 状态
return ( return (
<EventList <Box minH={minHeight}>
events={events} <EventList
pagination={pagination} events={events}
onPageChange={onPageChange} pagination={pagination}
onEventClick={onEventClick} onPageChange={onPageChange}
onViewDetail={onViewDetail} onEventClick={onEventClick}
/> onViewDetail={onViewDetail}
/>
</Box>
); );
}; };