feat: 多列布局ui调整

src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js

@@ -3,7 +3,8 @@
 
 import React, { useRef, useMemo, useEffect } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { Box, Grid, Spinner, Text, VStack, Center } from '@chakra-ui/react';
+import { Box, Grid, Spinner, Text, VStack, Center, HStack, IconButton } from '@chakra-ui/react';
+import { RepeatIcon } from '@chakra-ui/icons';
 import { useColorModeValue } from '@chakra-ui/react';
 import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard';
 
@@ -37,6 +38,8 @@ const VirtualizedFourRowGrid = ({
   loadPrevPage,  // 新增：加载上一页
   hasMore,
   loading,
+  error,         // 新增：错误状态
+  onRetry,       // 新增：重试回调
 }) => {
   const parentRef = useRef(null);
   const isLoadingMore = useRef(false);  // 防止重复加载
@@ -160,6 +163,39 @@ const VirtualizedFourRowGrid = ({
     return () => clearTimeout(timer);
   }, [events.length]);  // 监听 events 变化，加载上一页后会增加 events 数量
 
+  // 错误指示器（同行显示）
+  const renderErrorIndicator = () => {
+    if (!error) return null;
+
+    return (
+      <Center py={6}>
+        <HStack spacing={2}>
+          <Text color="gray.500" fontSize="sm">
+            数据加载失败，
+          </Text>
+          <IconButton
+            icon={<RepeatIcon />}
+            size="sm"
+            colorScheme="blue"
+            variant="ghost"
+            onClick={onRetry}
+            aria-label="刷新"
+          />
+          <Text
+            color="blue.500"
+            fontSize="sm"
+            fontWeight="medium"
+            cursor="pointer"
+            onClick={onRetry}
+            _hover={{ textDecoration: 'underline' }}
+          >
+            刷新
+          </Text>
+        </HStack>
+      </Center>
+    );
+  };
+
   // 底部加载指示器
   const renderLoadingIndicator = () => {
     if (!hasMore) {
@@ -243,7 +279,7 @@ const VirtualizedFourRowGrid = ({
                   w="100%"
                 >
                   {rowEvents.map((event, colIndex) => (
-                    <Box key={event.id}>
+                    <Box key={event.id} w="100%" minW={0}>
                       <CardComponent
                         event={event}
                         index={virtualRow.index * columnsPerRow + colIndex}
@@ -278,7 +314,7 @@ const VirtualizedFourRowGrid = ({
           right={0}
           w="100%"
         >
-          {renderLoadingIndicator()}
+          {error ? renderErrorIndicator() : renderLoadingIndicator()}
         </Box>
       </Box>
     </Box>