feat: 提取VerticalModeLayout - 提升可读性，但耦合度中等

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

@@ -0,0 +1,111 @@
+// src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
+// 纵向分栏模式布局组件
+
+import React from 'react';
+import { Box, Grid, GridItem, Center, VStack, Text } from '@chakra-ui/react';
+import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
+import DynamicNewsDetailPanel from '../DynamicNewsDetail';
+import VirtualizedFourRowGrid from './VirtualizedFourRowGrid';
+
+/**
+ * 纵向分栏模式布局
+ * 左侧：事件列表（33.3%）| 右侧：事件详情（66.7%）
+ *
+ * @param {Array} displayEvents - 累积显示的事件列表
+ * @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,
+  eventFollowStatus,
+  onToggleFollow,
+  getTimelineBoxStyle,
+  borderColor,
+  loadNextPage,
+  loadPrevPage,
+  hasMore,
+  loading,
+  scrollbarTrackBg,
+  scrollbarThumbBg,
+  scrollbarThumbHoverBg,
+}) => {
+  return (
+    <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>
+  );
+};
+
+export default VerticalModeLayout;