update ui

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

@@ -1,17 +1,15 @@
 // src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
 // 纵向分栏模式布局组件
 
-import React, { useState, useEffect } from 'react';
-import { Box, IconButton, Tooltip, VStack, Flex, Center, Text } from '@chakra-ui/react';
-import { ViewIcon, ViewOffIcon, InfoIcon } from '@chakra-ui/icons';
+import React, { useState } from 'react';
+import { Box, VStack, Flex, Center, Text } from '@chakra-ui/react';
+import { InfoIcon } from '@chakra-ui/icons';
 import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
 import EventDetailScrollPanel from './EventDetailScrollPanel';
 
 /**
  * 纵向分栏模式布局
- * 支持两种展示模式：
- * - detail（默认）：左侧事件列表 1fr | 右侧详情 2fr
- * - list：左侧事件列表 7fr | 右侧详情 300px
+ * 固定布局：左侧事件列表 3fr | 右侧详情 7fr
  *
  * @param {string} display - CSS display 属性（用于显示/隐藏组件）
  * @param {Array} events - 当前页的事件列表（分页数据）
@@ -32,33 +30,12 @@ const VerticalModeLayout = ({
   getTimelineBoxStyle,
   borderColor,
 }) => {
-  // 布局模式状态：'detail' = 聚焦详情（默认），'list' = 聚焦列表
-  const [layoutMode, setLayoutMode] = useState('detail');
+  // 详情面板重置 key（预留，用于未来功能）
+  const [detailPanelKey] = useState(0);
 
-  // 详情面板重置 key（切换到 list 模式时改变，强制重新渲染）
-  const [detailPanelKey, setDetailPanelKey] = useState(0);
-
-  // 监听事件选择 - 自动切换到详情模式
-  useEffect(() => {
-    if (selectedEvent) {
-      setLayoutMode('detail');
-    }
-  }, [selectedEvent]);
-
-  // 切换布局模式
-  const toggleLayoutMode = () => {
-    const newMode = layoutMode === 'detail' ? 'list' : 'detail';
-    setLayoutMode(newMode);
-
-    // 如果切换到 list 模式，重置详情面板（收起所有 CollapsibleSection）
-    if (newMode === 'list') {
-      setDetailPanelKey(prev => prev + 1);  // 改变 key，强制重新渲染
-    }
-  };
-
-  // 根据模式计算 flex 比例
-  const leftFlex = layoutMode === 'detail' ? '4' : '6';
-  const rightFlex = layoutMode === 'detail' ? '6' : '4';
+  // 固定布局比例：左侧更窄（3），右侧更宽（7）
+  const leftFlex = '3';
+  const rightFlex = '7';
 
   return (
     <Flex
@@ -111,7 +88,7 @@ const VerticalModeLayout = ({
                   onToggleFollow={onToggleFollow}
                   timelineStyle={getTimelineBoxStyle()}
                   borderColor={borderColor}
-                  indicatorSize={layoutMode === 'detail' ? 'default' : 'comfortable'}
+                  indicatorSize="default"
                   layout="vertical"
                 />
               ))}
@@ -140,25 +117,6 @@ const VerticalModeLayout = ({
         overflow="hidden"
         h="100%"
       >
-        {/* 布局切换按钮 */}
-        <Tooltip
-          label={layoutMode === 'detail' ? '展开事件列表' : '展开详情面板'}
-          placement="left"
-        >
-          <IconButton
-            position="absolute"
-            top={2}
-            right={2}
-            zIndex={9999}
-            size="md"
-            icon={layoutMode === 'detail' ? <ViewOffIcon /> : <ViewIcon />}
-            onClick={toggleLayoutMode}
-            aria-label="切换布局模式"
-            colorScheme="blue"
-            variant="solid"
-          />
-        </Tooltip>
-
         {/* 详情面板 */}
         <EventDetailScrollPanel
           key={detailPanelKey}