From be0c53b58843d984ffd19b33192978e7ddfd2674 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 5 Nov 2025 08:53:07 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=99=9A=E6=8B=9F=E5=8C=96=E7=BD=91?=
 =?UTF-8?q?=E6=A0=BC=E7=BB=84=E4=BB=B6=E9=80=9A=E7=94=A8=E5=8C=96=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=E2=94=82?=
 =?UTF-8?q?=20=E2=94=82=20=E2=94=82=20=E2=94=82=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=E2=94=82=20=E2=94=82=20?=
 =?UTF-8?q?=E2=94=82=20=E2=94=82=20-=20=E6=94=AF=E6=8C=81=E5=A4=9A?=
 =?UTF-8?q?=E5=88=97=E5=B8=83=E5=B1=80=EF=BC=88columnsPerRow=20=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=EF=BC=8C=E9=BB=98=E8=AE=A44=E5=88=97=EF=BC=89=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=E2=94=82=20?=
 =?UTF-8?q?=E2=94=82=20=E2=94=82=20=E2=94=82=20-=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E5=8D=A1=E7=89=87=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=EF=BC=88CardComponent=20=E5=8F=82=E6=95=B0=EF=BC=89=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=E2=94=82=20?=
 =?UTF-8?q?=E2=94=82=20=E2=94=82=20=E2=94=82=20-=20=E6=A0=B9=E6=8D=AE?=
 =?UTF-8?q?=E5=88=97=E6=95=B0=E5=8A=A8=E6=80=81=E8=B0=83=E6=95=B4=E9=97=B4?=
 =?UTF-8?q?=E8=B7=9D=EF=BC=88=E5=8D=95=E5=88=97=20gap=3D3=EF=BC=8C?=
 =?UTF-8?q?=E5=A4=9A=E5=88=97=20gap=3D4=EF=BC=89=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?=
 =?UTF-8?q?=20=20=20=20=20=20=E2=94=82=20=E2=94=82=20=E2=94=82=20=E2=94=82?=
 =?UTF-8?q?=20-=20=E6=9B=B4=E6=96=B0=E6=B3=A8=E9=87=8A=E5=92=8C=E6=96=87?=
 =?UTF-8?q?=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DynamicNewsCard/VirtualizedFourRowGrid.js | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js b/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js
index c6531d04..9d41801f 100644
--- a/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js
+++ b/src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js
@@ -1,5 +1,5 @@
 // src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js
-// 四列纵向滚动虚拟化网格组件（每行4列，纵向滚动 + 无限滚动）
+// 虚拟化网格组件（支持多列布局 + 纵向滚动 + 无限滚动）
 
 import React, { useRef, useMemo, useEffect } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -8,9 +8,11 @@ import { useColorModeValue } from '@chakra-ui/react';
 import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard';
 
 /**
- * 四列纵向滚动虚拟化网格组件（支持无限滚动）
+ * 虚拟化网格组件（支持多列布局 + 无限滚动）
  * @param {Object} props
  * @param {Array} props.events - 事件列表（累积显示）
+ * @param {number} props.columnsPerRow - 每行列数（默认 4，单列模式传 1）
+ * @param {React.Component} props.CardComponent - 卡片组件（默认 DynamicNewsEventCard）
  * @param {Object} props.selectedEvent - 当前选中的事件
  * @param {Function} props.onEventSelect - 事件选择回调
  * @param {Object} props.eventFollowStatus - 事件关注状态
@@ -23,6 +25,8 @@ import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard';
  */
 const VirtualizedFourRowGrid = ({
   events,
+  columnsPerRow = 4,
+  CardComponent = DynamicNewsEventCard,
   selectedEvent,
   onEventSelect,
   eventFollowStatus,
@@ -41,14 +45,14 @@ const VirtualizedFourRowGrid = ({
   const scrollbarThumbBg = useColorModeValue('#888', '#4A5568');
   const scrollbarThumbHoverBg = useColorModeValue('#555', '#718096');
 
-  // 将事件按4个一组分成行（每行4列）
+  // 将事件按 columnsPerRow 个一组分成行
   const rows = useMemo(() => {
     const r = [];
-    for (let i = 0; i < events.length; i += 4) {
-      r.push(events.slice(i, i + 4));
+    for (let i = 0; i < events.length; i += columnsPerRow) {
+      r.push(events.slice(i, i + columnsPerRow));
     }
     return r;
-  }, [events]);
+  }, [events, columnsPerRow]);
 
   // 配置虚拟滚动器（纵向滚动 + 动态高度测量）
   const rowVirtualizer = useVirtualizer({
@@ -159,17 +163,17 @@ const VirtualizedFourRowGrid = ({
                 w="100%"
                 transform={`translateY(${virtualRow.start}px)`}
               >
-                {/* 每行使用 Grid 横向排列4个卡片 */}
+                {/* 使用 Grid 横向排列卡片（列数由 columnsPerRow 决定） */}
                 <Grid
-                  templateColumns="repeat(4, 1fr)"
-                  gap={4}
+                  templateColumns={`repeat(${columnsPerRow}, 1fr)`}
+                  gap={columnsPerRow === 1 ? 3 : 4}
                   w="100%"
                 >
                   {rowEvents.map((event, colIndex) => (
                     <Box key={event.id}>
-                      <DynamicNewsEventCard
+                      <CardComponent
                         event={event}
-                        index={virtualRow.index * 4 + colIndex}
+                        index={virtualRow.index * columnsPerRow + colIndex}
                         isFollowing={eventFollowStatus[event.id]?.isFollowing || false}
                         followerCount={eventFollowStatus[event.id]?.followerCount || event.follower_count || 0}
                         isSelected={selectedEvent?.id === event.id}
@@ -182,7 +186,7 @@ const VirtualizedFourRowGrid = ({
                           onEventSelect(event);
                         }}
                         onToggleFollow={() => onToggleFollow?.(event.id)}
-                        timelineStyle={getTimelineBoxStyle()}
+                        timelineStyle={getTimelineBoxStyle?.()}
                         borderColor={borderColor}
                       />
                     </Box>