feat: 调整纵向列表UI

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

@@ -2,18 +2,19 @@
 // 纵向分栏模式布局组件
 
 import React, { useState } from 'react';
-import { Grid, GridItem, IconButton, Tooltip, VStack } from '@chakra-ui/react';
+import { Box, IconButton, Tooltip, VStack, Flex } from '@chakra-ui/react';
 import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
 import EventDetailScrollPanel from './EventDetailScrollPanel';
+import PaginationControl from './PaginationControl';
 
 /**
  * 纵向分栏模式布局
  * 支持两种展示模式：
  * - detail（默认）：左侧事件列表 1fr | 右侧详情 2fr
- * - list：左侧事件列表 3fr | 右侧详情 150px
+ * - list：左侧事件列表 7fr | 右侧详情 300px
  *
- * 左侧使用分页模式（不使用虚拟滚动），右侧支持布局切换
+ * 左侧使用分页模式，高度根据内容自适应，分页控制器在左侧列表底部
  *
  * @param {Array} events - 当前页的事件列表（分页数据）
  * @param {Object} selectedEvent - 当前选中的事件
@@ -22,9 +23,9 @@ import EventDetailScrollPanel from './EventDetailScrollPanel';
  * @param {Function} onToggleFollow - 关注按钮回调
  * @param {Function} getTimelineBoxStyle - 时间线样式获取函数
  * @param {string} borderColor - 边框颜色
- * @param {string} scrollbarTrackBg - 滚动条轨道背景色
- * @param {string} scrollbarThumbBg - 滚动条滑块背景色
- * @param {string} scrollbarThumbHoverBg - 滚动条滑块悬浮背景色
+ * @param {number} currentPage - 当前页码
+ * @param {number} totalPages - 总页数
+ * @param {Function} onPageChange - 页码改变回调
  */
 const VerticalModeLayout = ({
   events,
@@ -34,72 +35,71 @@ const VerticalModeLayout = ({
   onToggleFollow,
   getTimelineBoxStyle,
   borderColor,
-  scrollbarTrackBg,
-  scrollbarThumbBg,
-  scrollbarThumbHoverBg,
+  currentPage,
+  totalPages,
+  onPageChange,
 }) => {
   // 布局模式状态：'detail' = 聚焦详情（默认），'list' = 聚焦列表
-  const [layoutMode, setLayoutMode] = useState('detail');
+  const [layoutMode, setLayoutMode] = useState('list');
 
   // 切换布局模式
   const toggleLayoutMode = () => {
     setLayoutMode(prev => prev === 'detail' ? 'list' : 'detail');
   };
 
-  // 根据模式计算 Grid 的 templateColumns
-  const gridTemplateColumns = layoutMode === 'detail' ? '1fr 2fr' : '7fr 300px';
+  // 根据模式计算 flex 比例
+  const leftFlex = layoutMode === 'detail' ? '4' : '6';
+  const rightFlex = layoutMode === 'detail' ? '6' : '4';
 
   return (
-    <Grid
-      templateColumns={gridTemplateColumns}
+    <Flex
       gap={6}
-      h="800px"
       position="relative"
-      transition="grid-template-columns 0.3s ease-in-out"
+      transition="all 0.3s ease-in-out"
     >
       {/* 左侧：事件列表 - 使用分页模式 */}
-      <GridItem h="100%">
+      <Box flex={leftFlex} minWidth={0}>
+        {/* 事件列表 */}
         <VStack
-          spacing={3}
+          spacing={2}
           align="stretch"
-          h="100%"
-          overflowY="auto"
           p={2}
-          sx={{
-            '&::-webkit-scrollbar': {
-              width: '3px',
-            },
-            '&::-webkit-scrollbar-track': {
-              background: scrollbarTrackBg,
-              borderRadius: '10px',
-            },
-            '&::-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}
-            />
-          ))}
+            {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}
+                indicatorSize={layoutMode === 'detail' ? 'default' : 'comfortable'}
+              />
+            ))}
         </VStack>
-      </GridItem>
 
-      {/* 右侧：事件详情 (66.7%) */}
-      <GridItem h="100%" position="relative">
+        {/* 分页控制器 */}
+        {totalPages > 1 && (
+          <Flex justify="center" py={3} px={2}>
+            <PaginationControl
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onPageChange={onPageChange}
+            />
+          </Flex>
+        )}
+      </Box>
+
+      {/* 右侧：事件详情 */}
+      <Box
+        flex={rightFlex}
+        minHeight={0}
+        position="relative"
+        overflow="hidden"
+      >
         {/* 布局切换按钮 */}
         <Tooltip
           label={layoutMode === 'detail' ? '展开事件列表' : '展开详情面板'}
@@ -109,25 +109,22 @@ const VerticalModeLayout = ({
             position="absolute"
             top={2}
             right={2}
-            zIndex={10}
-            size="sm"
+            zIndex={9999}
+            size="md"
             icon={layoutMode === 'detail' ? <ViewOffIcon /> : <ViewIcon />}
             onClick={toggleLayoutMode}
             aria-label="切换布局模式"
             colorScheme="blue"
-            variant="ghost"
+            variant="solid"
           />
         </Tooltip>
 
         {/* 详情面板 */}
         <EventDetailScrollPanel
           selectedEvent={selectedEvent}
-          scrollbarTrackBg={scrollbarTrackBg}
-          scrollbarThumbBg={scrollbarThumbBg}
-          scrollbarThumbHoverBg={scrollbarThumbHoverBg}
         />
-      </GridItem>
-    </Grid>
+      </Box>
+    </Flex>
   );
 };