From bf89c0e13e4dcd6a4a3cd85ae737e9d951cd29fd Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 5 Nov 2025 09:58:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=BA=B5=E5=90=91?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E5=8F=B3=E4=BE=A7=E8=AF=A6=E6=83=85=E6=8A=98?=
 =?UTF-8?q?=E5=8F=A0=E5=B1=95=E5=BC=80=E5=90=8E=E6=97=A0=E6=B3=95=E6=BB=91?=
 =?UTF-8?q?=E5=8A=A8=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题描述:
- 纵向模式下，右侧详情面板中的折叠区块（相关股票、历史事件等）展开后
- 右侧面板无法滚动，用户无法查看完整内容

根本原因:
- Chakra UI Collapse 组件在动画过程中设置 overflow: hidden
- 动画结束后可能没有正确恢复，影响父容器的滚动功能
- 嵌套滚动容器之间存在冲突

解决方案:

1. CollapsibleSection.js
   - 为 Collapse 组件添加 unmountOnExit={false}
   - 添加 startingHeight={0} 确保动画从 0 开始
   - 防止 Collapse 动画干扰父容器的 overflow 属性

2. EventScrollList.js
   - 为右侧详情 Box 添加 position="relative"
   - 使用 overflow: auto !important 强制保持滚动功能
   - 确保即使子元素有 overflow 设置也不受影响

技术细节:
- unmountOnExit={false} 保持 DOM 节点存在，避免频繁挂载/卸载
- startingHeight={0} 确保折叠动画的起始高度一致
- !important 提高 CSS 优先级，覆盖子元素的 overflow 设置
- position: relative 创建新的层叠上下文，隔离滚动行为

影响范围:
- 纵向模式右侧详情面板
- 所有使用 CollapsibleSection 的区块

测试建议:
1. 切换到纵向模式
2. 展开"相关股票"或其他折叠区块
3. 尝试滚动右侧详情面板
4. 确认可以正常查看所有内容

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/DynamicNewsCard/EventScrollList.js          | 2 ++
 .../components/DynamicNewsDetail/CollapsibleSection.js     | 7 ++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/views/Community/components/DynamicNewsCard/EventScrollList.js b/src/views/Community/components/DynamicNewsCard/EventScrollList.js
index 1fb954ae..5384bb02 100644
--- a/src/views/Community/components/DynamicNewsCard/EventScrollList.js
+++ b/src/views/Community/components/DynamicNewsCard/EventScrollList.js
@@ -316,8 +316,10 @@ const EventScrollList = ({
                 overflowY="auto"
                 h="100%"
                 pl={2}
+                position="relative"
                 css={{
                   overscrollBehavior: 'contain',
+                  overflow: 'auto !important',
                   '&::-webkit-scrollbar': {
                     width: '1px',
                   },
diff --git a/src/views/Community/components/DynamicNewsDetail/CollapsibleSection.js b/src/views/Community/components/DynamicNewsDetail/CollapsibleSection.js
index c4a7274d..2008fd81 100644
--- a/src/views/Community/components/DynamicNewsDetail/CollapsibleSection.js
+++ b/src/views/Community/components/DynamicNewsDetail/CollapsibleSection.js
@@ -29,7 +29,12 @@ const CollapsibleSection = ({ title, isOpen, onToggle, count = null, children })
         onToggle={onToggle}
         count={count}
       />
-      <Collapse in={isOpen} animateOpacity>
+      <Collapse
+        in={isOpen}
+        animateOpacity
+        unmountOnExit={false}
+        startingHeight={0}
+      >
         <Box mt={2} bg={sectionBg} p={3} borderRadius="md">
           {children}
         </Box>