From 291362b88d7cf1be2e327e019e861d92ce46a1ed Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 6 Nov 2025 14:13:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20VerticalModeLayout=20=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?/=E5=88=97=E8=A1=A8=E6=A8=A1=E5=BC=8F=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 点击事件自动切换到详情模式
- 切换到列表模式时重置详情面板（通过 key 强制重新渲染）
- 添加独立滚动容器，支持左右两侧独立滚动
- 优化布局高度控制，使用 h="100%" 撑满父容器

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../DynamicNewsCard/VerticalModeLayout.js     | 52 +++++++++++++++++--
 1 file changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js b/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
index e32d207a..17901529 100644
--- a/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
+++ b/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
@@ -1,7 +1,7 @@
 // src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
 // 纵向分栏模式布局组件
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Box, IconButton, Tooltip, VStack, Flex } from '@chakra-ui/react';
 import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons';
 import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
@@ -35,9 +35,25 @@ const VerticalModeLayout = ({
   // 布局模式状态：'detail' = 聚焦详情（默认），'list' = 聚焦列表
   const [layoutMode, setLayoutMode] = useState('list');
 
+  // 详情面板重置 key（切换到 list 模式时改变，强制重新渲染）
+  const [detailPanelKey, setDetailPanelKey] = useState(0);
+
+  // 监听事件选择 - 自动切换到详情模式
+  useEffect(() => {
+    if (selectedEvent) {
+      setLayoutMode('detail');
+    }
+  }, [selectedEvent]);
+
   // 切换布局模式
   const toggleLayoutMode = () => {
-    setLayoutMode(prev => prev === 'detail' ? 'list' : 'detail');
+    const newMode = layoutMode === 'detail' ? 'list' : 'detail';
+    setLayoutMode(newMode);
+
+    // 如果切换到 list 模式，重置详情面板（收起所有 CollapsibleSection）
+    if (newMode === 'list') {
+      setDetailPanelKey(prev => prev + 1);  // 改变 key，强制重新渲染
+    }
   };
 
   // 根据模式计算 flex 比例
@@ -50,9 +66,33 @@ const VerticalModeLayout = ({
       gap={6}
       position="relative"
       transition="all 0.3s ease-in-out"
+      h="100%"
+      overflow="hidden"
     >
-      {/* 左侧：事件列表 - 使用分页模式 */}
-      <Box flex={leftFlex} minWidth={0}>
+      {/* 左侧：事件列表 - 独立滚动 */}
+      <Box
+        flex={leftFlex}
+        minWidth={0}
+        overflowY="auto"
+        h="100%"
+        data-scroll-container="true"
+        css={{
+          overscrollBehavior: 'contain',
+          '&::-webkit-scrollbar': {
+            width: '6px',
+          },
+          '&::-webkit-scrollbar-track': {
+            background: '#f1f1f1',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            background: '#888',
+            borderRadius: '3px',
+          },
+          '&::-webkit-scrollbar-thumb:hover': {
+            background: '#555',
+          },
+        }}
+      >
         {/* 事件列表 */}
         <VStack
           spacing={2}
@@ -76,12 +116,13 @@ const VerticalModeLayout = ({
         </VStack>
       </Box>
 
-      {/* 右侧：事件详情 */}
+      {/* 右侧：事件详情 - 独立滚动 */}
       <Box
         flex={rightFlex}
         minHeight={0}
         position="relative"
         overflow="hidden"
+        h="100%"
       >
         {/* 布局切换按钮 */}
         <Tooltip
@@ -104,6 +145,7 @@ const VerticalModeLayout = ({
 
         {/* 详情面板 */}
         <EventDetailScrollPanel
+          key={detailPanelKey}
           selectedEvent={selectedEvent}
         />
       </Box>