From f5d340aa05d9d78b8a6e9677f3eedaf713e109bb Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 5 Nov 2025 13:56:52 +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/VerticalModeLayout.js     | 111 ++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js

diff --git a/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js b/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
new file mode 100644
index 00000000..b50dea80
--- /dev/null
+++ b/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;