feat: 纵向布局分页模式优化

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

@@ -163,7 +163,6 @@ const EventScrollList = ({
         {/* 纵向分栏模式 */}
         {mode === 'vertical' && (
           <VerticalModeLayout
-            displayEvents={displayEvents}
             events={events}
             selectedEvent={selectedEvent}
             onEventSelect={onEventSelect}
@@ -171,10 +170,6 @@ const EventScrollList = ({
             onToggleFollow={onToggleFollow}
             getTimelineBoxStyle={getTimelineBoxStyle}
             borderColor={borderColor}
-            loadNextPage={loadNextPage}
-            loadPrevPage={loadPrevPage}
-            hasMore={hasMore}
-            loading={loading}
             scrollbarTrackBg={scrollbarTrackBg}
             scrollbarThumbBg={scrollbarThumbBg}
             scrollbarThumbHoverBg={scrollbarThumbHoverBg}

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

@@ -2,34 +2,31 @@
 // 纵向分栏模式布局组件
 
 import React, { useState } from 'react';
-import { Grid, GridItem, IconButton, Tooltip } from '@chakra-ui/react';
+import { Grid, GridItem, IconButton, Tooltip, VStack } from '@chakra-ui/react';
 import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
-import VirtualizedFourRowGrid from './VirtualizedFourRowGrid';
 import EventDetailScrollPanel from './EventDetailScrollPanel';
 
 /**
  * 纵向分栏模式布局
- * 左侧：事件列表（33.3%）| 右侧：事件详情（66.7%）
+ * 支持两种展示模式：
+ * - detail（默认）：左侧事件列表 1fr | 右侧详情 2fr
+ * - list：左侧事件列表 3fr | 右侧详情 150px
  *
- * @param {Array} displayEvents - 累积显示的事件列表
+ * 左侧使用分页模式（不使用虚拟滚动），右侧支持布局切换
- * @param {Array} events - 备用事件列表
+ *
+ * @param {Array} events - 当前页的事件列表（分页数据）
  * @param {Object} selectedEvent - 当前选中的事件
  * @param {Function} onEventSelect - 事件选择回调
  * @param {Object} eventFollowStatus - 事件关注状态
  * @param {Function} onToggleFollow - 关注按钮回调
  * @param {Function} getTimelineBoxStyle - 时间线样式获取函数
  * @param {string} borderColor - 边框颜色
- * @param {Function} loadNextPage - 加载下一页
- * @param {Function} loadPrevPage - 加载上一页
- * @param {boolean} hasMore - 是否还有更多数据
- * @param {boolean} loading - 加载状态
  * @param {string} scrollbarTrackBg - 滚动条轨道背景色
  * @param {string} scrollbarThumbBg - 滚动条滑块背景色
  * @param {string} scrollbarThumbHoverBg - 滚动条滑块悬浮背景色
  */
 const VerticalModeLayout = ({
-  displayEvents,
   events,
   selectedEvent,
   onEventSelect,
@@ -37,10 +34,6 @@ const VerticalModeLayout = ({
   onToggleFollow,
   getTimelineBoxStyle,
   borderColor,
-  loadNextPage,
-  loadPrevPage,
-  hasMore,
-  loading,
   scrollbarTrackBg,
   scrollbarThumbBg,
   scrollbarThumbHoverBg,
@@ -54,7 +47,7 @@ const VerticalModeLayout = ({
   };
 
   // 根据模式计算 Grid 的 templateColumns
-  const gridTemplateColumns = layoutMode === 'detail' ? '1fr 2fr' : '3fr 150px';
+  const gridTemplateColumns = layoutMode === 'detail' ? '1fr 2fr' : '7fr 300px';
 
   return (
     <Grid
@@ -64,23 +57,45 @@ const VerticalModeLayout = ({
       position="relative"
       transition="grid-template-columns 0.3s ease-in-out"
     >
-      {/* 左侧：事件列表 (33.3%) - 使用虚拟滚动 + 双向无限滚动 */}
+      {/* 左侧：事件列表 - 使用分页模式 */}
-      <GridItem>
+      <GridItem h="100%">
-        <VirtualizedFourRowGrid
+        <VStack
-          events={displayEvents || events}  // 使用累积列表
+          spacing={3}
-          columnsPerRow={1}  // 单列布局
+          align="stretch"
-          CardComponent={HorizontalDynamicNewsEventCard}  // 使用横向卡片
+          h="100%"
-          selectedEvent={selectedEvent}
+          overflowY="auto"
-          onEventSelect={onEventSelect}
+          p={2}
-          eventFollowStatus={eventFollowStatus}
+          sx={{
-          onToggleFollow={onToggleFollow}
+            '&::-webkit-scrollbar': {
-          getTimelineBoxStyle={getTimelineBoxStyle}
+              width: '3px',
-          borderColor={borderColor}
+            },
-          loadNextPage={loadNextPage}  // 支持向下无限滚动
+            '&::-webkit-scrollbar-track': {
-          loadPrevPage={loadPrevPage}  // 支持向上无限滚动（双向滚动）
+              background: scrollbarTrackBg,
-          hasMore={hasMore}
+              borderRadius: '10px',
-          loading={loading}
+            },
-        />
+            '&::-webkit-scrollbar-thumb': {
+              background: scrollbarThumbBg,
+              borderRadius: '10px',
+            },
+            '&::-webkit-scrollbar-thumb:hover': {
+              background: scrollbarThumbHoverBg,
+            },
+          }}
+        >
+          {events.map((event) => (
+            <HorizontalDynamicNewsEventCard
+              key={event.id}
+              event={event}
+              isSelected={selectedEvent?.id === event.id}
+              onEventClick={() => onEventSelect(event)}
+              isFollowing={eventFollowStatus[event.id]?.isFollowing}
+              followerCount={eventFollowStatus[event.id]?.followerCount}
+              onToggleFollow={onToggleFollow}
+              timelineStyle={getTimelineBoxStyle()}
+              borderColor={borderColor}
+            />
+          ))}
+        </VStack>
       </GridItem>
 
       {/* 右侧：事件详情 (66.7%) */}