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