feat: 添加详情面板和事件详情切换按钮

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

@@ -1,8 +1,9 @@
 // src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
 // 纵向分栏模式布局组件
 
-import React from 'react';
-import { Grid, GridItem } from '@chakra-ui/react';
+import React, { useState } from 'react';
+import { Grid, GridItem, IconButton, Tooltip } from '@chakra-ui/react';
+import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
 import VirtualizedFourRowGrid from './VirtualizedFourRowGrid';
 import EventDetailScrollPanel from './EventDetailScrollPanel';
@@ -44,8 +45,25 @@ const VerticalModeLayout = ({
   scrollbarThumbBg,
   scrollbarThumbHoverBg,
 }) => {
+  // 布局模式状态：'detail' = 聚焦详情（默认），'list' = 聚焦列表
+  const [layoutMode, setLayoutMode] = useState('detail');
+
+  // 切换布局模式
+  const toggleLayoutMode = () => {
+    setLayoutMode(prev => prev === 'detail' ? 'list' : 'detail');
+  };
+
+  // 根据模式计算 Grid 的 templateColumns
+  const gridTemplateColumns = layoutMode === 'detail' ? '1fr 2fr' : '3fr 150px';
+
   return (
-    <Grid templateColumns="1fr 2fr" gap={6} h="800px">
+    <Grid
+      templateColumns={gridTemplateColumns}
+      gap={6}
+      h="800px"
+      position="relative"
+      transition="grid-template-columns 0.3s ease-in-out"
+    >
       {/* 左侧：事件列表 (33.3%) - 使用虚拟滚动 + 双向无限滚动 */}
       <GridItem>
         <VirtualizedFourRowGrid
@@ -66,7 +84,27 @@ const VerticalModeLayout = ({
       </GridItem>
 
       {/* 右侧：事件详情 (66.7%) */}
-      <GridItem h="100%">
+      <GridItem h="100%" position="relative">
+        {/* 布局切换按钮 */}
+        <Tooltip
+          label={layoutMode === 'detail' ? '展开事件列表' : '展开详情面板'}
+          placement="left"
+        >
+          <IconButton
+            position="absolute"
+            top={2}
+            right={2}
+            zIndex={10}
+            size="sm"
+            icon={layoutMode === 'detail' ? <ViewOffIcon /> : <ViewIcon />}
+            onClick={toggleLayoutMode}
+            aria-label="切换布局模式"
+            colorScheme="blue"
+            variant="ghost"
+          />
+        </Tooltip>
+
+        {/* 详情面板 */}
         <EventDetailScrollPanel
           selectedEvent={selectedEvent}
           scrollbarTrackBg={scrollbarTrackBg}