pref: UI优化

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

@@ -6,7 +6,6 @@ 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';
 
 /**
  * 纵向分栏模式布局
@@ -14,8 +13,7 @@ import PaginationControl from './PaginationControl';
  * - detail（默认）：左侧事件列表 1fr | 右侧详情 2fr
  * - list：左侧事件列表 7fr | 右侧详情 300px
  *
- * 左侧使用分页模式，高度根据内容自适应，分页控制器在左侧列表底部
- *
+ * @param {string} display - CSS display 属性（用于显示/隐藏组件）
  * @param {Array} events - 当前页的事件列表（分页数据）
  * @param {Object} selectedEvent - 当前选中的事件
  * @param {Function} onEventSelect - 事件选择回调
@@ -23,11 +21,9 @@ import PaginationControl from './PaginationControl';
  * @param {Function} onToggleFollow - 关注按钮回调
  * @param {Function} getTimelineBoxStyle - 时间线样式获取函数
  * @param {string} borderColor - 边框颜色
- * @param {number} currentPage - 当前页码
- * @param {number} totalPages - 总页数
- * @param {Function} onPageChange - 页码改变回调
  */
 const VerticalModeLayout = ({
+  display = 'flex',
   events,
   selectedEvent,
   onEventSelect,
@@ -35,9 +31,6 @@ const VerticalModeLayout = ({
   onToggleFollow,
   getTimelineBoxStyle,
   borderColor,
-  currentPage,
-  totalPages,
-  onPageChange,
 }) => {
   // 布局模式状态：'detail' = 聚焦详情（默认），'list' = 聚焦列表
   const [layoutMode, setLayoutMode] = useState('list');
@@ -53,6 +46,7 @@ const VerticalModeLayout = ({
 
   return (
     <Flex
+      display={display}
       gap={6}
       position="relative"
       transition="all 0.3s ease-in-out"
@@ -80,17 +74,6 @@ const VerticalModeLayout = ({
               />
             ))}
         </VStack>
-
-        {/* 分页控制器 */}
-        {totalPages > 1 && (
-          <Flex justify="center" py={3} px={2}>
-            <PaginationControl
-              currentPage={currentPage}
-              totalPages={totalPages}
-              onPageChange={onPageChange}
-            />
-          </Flex>
-        )}
       </Box>
 
       {/* 右侧：事件详情 */}