From 327cfc09e2ddaed8c628edb8279e59bd2365fbc8 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 5 Nov 2025 13:57:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=20=E6=8F=90=E5=8F=96VerticalModeLayout?=
 =?UTF-8?q?=20-=20=E6=8F=90=E5=8D=87=E5=8F=AF=E8=AF=BB=E6=80=A7=EF=BC=8C?=
 =?UTF-8?q?=E4=BD=86=E8=80=A6=E5=90=88=E5=BA=A6=E4=B8=AD=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DynamicNewsCard/EventScrollList.js        | 87 ++++---------------
 1 file changed, 19 insertions(+), 68 deletions(-)

diff --git a/src/views/Community/components/DynamicNewsCard/EventScrollList.js b/src/views/Community/components/DynamicNewsCard/EventScrollList.js
index 26f9cb56..a4000365 100644
--- a/src/views/Community/components/DynamicNewsCard/EventScrollList.js
+++ b/src/views/Community/components/DynamicNewsCard/EventScrollList.js
@@ -5,19 +5,13 @@ import React, { useRef } from 'react';
 import {
   Box,
   Flex,
-  Grid,
-  GridItem,
-  Center,
-  VStack,
-  Text,
   useColorModeValue
 } from '@chakra-ui/react';
-import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
-import DynamicNewsDetailPanel from '../DynamicNewsDetail';
 import PaginationControl from './PaginationControl';
 import VirtualizedFourRowGrid from './VirtualizedFourRowGrid';
 import PageNavigationButton from './PageNavigationButton';
 import ModeToggleButtons from './ModeToggleButtons';
+import VerticalModeLayout from './VerticalModeLayout';
 
 /**
  * 事件列表组件 - 支持纵向和平铺两种展示模式
@@ -166,68 +160,25 @@ const EventScrollList = ({
           />
         )}
 
-        {/* 模式4: 纵向分栏模式 - 横向布局（时间在左，卡片在右） */}
+        {/* 纵向分栏模式 */}
         {mode === 'vertical' && (
-          <Grid templateColumns="1fr 2fr" gap={6} h="800px">
-            {/* 左侧：事件列表 (33.3%) - 使用虚拟滚动 + 双向无限滚动 */}
-            <GridItem>
-              <VirtualizedFourRowGrid
-                events={displayEvents || events}  // 使用累积列表
-                columnsPerRow={1}  // 单列布局
-                CardComponent={HorizontalDynamicNewsEventCard}  // 使用横向卡片
-                selectedEvent={selectedEvent}
-                onEventSelect={onEventSelect}
-                eventFollowStatus={eventFollowStatus}
-                onToggleFollow={onToggleFollow}
-                getTimelineBoxStyle={getTimelineBoxStyle}
-                borderColor={borderColor}
-                loadNextPage={loadNextPage}  // 支持向下无限滚动
-                loadPrevPage={loadPrevPage}  // 支持向上无限滚动（双向滚动）
-                hasMore={hasMore}
-                loading={loading}
-              />
-            </GridItem>
-
-            {/* 右侧：事件详情 (66.7%) */}
-            <GridItem h="100%">
-              <Box
-                pl={2}
-                position="relative"
-                sx={{
-                  height: '100% !important',
-                  maxHeight: '800px !important',
-                  overflowY: 'scroll !important',
-                  overflowX: 'hidden !important',
-                  '&::-webkit-scrollbar': {
-                    width: '3px',
-                  },
-                  '&::-webkit-scrollbar-track': {
-                    background: scrollbarTrackBg,
-                    borderRadius: '10px',
-                  },
-                  '&::-webkit-scrollbar-thumb': {
-                    background: scrollbarThumbBg,
-                    borderRadius: '10px',
-                  },
-                  '&::-webkit-scrollbar-thumb:hover': {
-                    background: scrollbarThumbHoverBg,
-                  },
-                }}
-              >
-                {selectedEvent ? (
-                  <DynamicNewsDetailPanel event={selectedEvent} />
-                ) : (
-                  <Center h="100%" minH="400px">
-                    <VStack spacing={4}>
-                      <Text fontSize="lg" color="gray.500">
-                        请选择左侧事件查看详情
-                      </Text>
-                    </VStack>
-                  </Center>
-                )}
-              </Box>
-            </GridItem>
-          </Grid>
+          <VerticalModeLayout
+            displayEvents={displayEvents}
+            events={events}
+            selectedEvent={selectedEvent}
+            onEventSelect={onEventSelect}
+            eventFollowStatus={eventFollowStatus}
+            onToggleFollow={onToggleFollow}
+            getTimelineBoxStyle={getTimelineBoxStyle}
+            borderColor={borderColor}
+            loadNextPage={loadNextPage}
+            loadPrevPage={loadPrevPage}
+            hasMore={hasMore}
+            loading={loading}
+            scrollbarTrackBg={scrollbarTrackBg}
+            scrollbarThumbBg={scrollbarThumbBg}
+            scrollbarThumbHoverBg={scrollbarThumbHoverBg}
+          />
         )}
       </Box>
       </Box>