update ui

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

@@ -3,7 +3,7 @@
 
 import React, { useRef, useMemo, useEffect } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { Box, Grid, Spinner, Text, VStack, Center, HStack, IconButton } from '@chakra-ui/react';
+import { Box, Grid, Spinner, Text, VStack, Center, HStack, IconButton, useBreakpointValue } from '@chakra-ui/react';
 import { RepeatIcon } from '@chakra-ui/icons';
 import { useColorModeValue } from '@chakra-ui/react';
 import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard';
@@ -52,14 +52,26 @@ const VirtualizedFourRowGrid = ({
   const scrollbarThumbBg = useColorModeValue('#888', '#4A5568');
   const scrollbarThumbHoverBg = useColorModeValue('#555', '#718096');
 
-  // 将事件按 columnsPerRow 个一组分成行
+  // 响应式列数
+  const responsiveColumns = useBreakpointValue({
+    base: 1,          // 移动端：单列
+    sm: 2,            // 小屏：2列
+    md: 2,            // 中屏：2列
+    lg: 3,            // 大屏：3列
+    xl: 4,            // 超大屏：4列
+  });
+
+  // 使用响应式列数或传入的列数
+  const actualColumnsPerRow = responsiveColumns || columnsPerRow;
+
+  // 将事件按 actualColumnsPerRow 个一组分成行
   const rows = useMemo(() => {
     const r = [];
-    for (let i = 0; i < events.length; i += columnsPerRow) {
-      r.push(events.slice(i, i + columnsPerRow));
+    for (let i = 0; i < events.length; i += actualColumnsPerRow) {
+      r.push(events.slice(i, i + actualColumnsPerRow));
     }
     return r;
-  }, [events, columnsPerRow]);
+  }, [events, actualColumnsPerRow]);
 
   // 配置虚拟滚动器（纵向滚动 + 动态高度测量）
   const rowVirtualizer = useVirtualizer({
@@ -301,17 +313,17 @@ const VirtualizedFourRowGrid = ({
                 w="100%"
                 transform={`translateY(${virtualRow.start}px)`}
               >
-                {/* 使用 Grid 横向排列卡片（列数由 columnsPerRow 决定） */}
+                {/* 使用 Grid 横向排列卡片（列数由 actualColumnsPerRow 决定） */}
                 <Grid
-                  templateColumns={`repeat(${columnsPerRow}, 1fr)`}
-                  gap={columnsPerRow === 1 ? 3 : 4}
+                  templateColumns={`repeat(${actualColumnsPerRow}, 1fr)`}
+                  gap={actualColumnsPerRow === 1 ? 3 : 4}
                   w="100%"
                 >
                   {rowEvents.map((event, colIndex) => (
                     <Box key={event.id} w="100%" minW={0}>
                       <CardComponent
                         event={event}
-                        index={virtualRow.index * columnsPerRow + colIndex}
+                        index={virtualRow.index * actualColumnsPerRow + colIndex}
                         isFollowing={eventFollowStatus[event.id]?.isFollowing || false}
                         followerCount={eventFollowStatus[event.id]?.followerCount || event.follower_count || 0}
                         isSelected={selectedEvent?.id === event.id}