From 4e7fcaad5ca19f8327a80cb1d43fd9f6cf77c9d5 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 5 Nov 2025 09:54:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF"=E7=9B=B8=E5=85=B3=E8=82=A1=E7=A5=A8"?=
 =?UTF-8?q?=E9=87=8D=E5=A4=8D=E6=A0=87=E9=A2=98=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题描述:
- 详情面板中出现两个"相关股票"标题
- 用户反馈截图显示标题重复渲染

根本原因:
- DynamicNewsDetailPanel 使用 CollapsibleSection 包裹 RelatedStocksSection
- RelatedStocksSection 内部又渲染了 CollapsibleHeader
- 导致双重标题渲染

解决方案:
1. RelatedStocksSection.js
   - 移除内部的 CollapsibleHeader 和 Collapse 组件
   - 只保留纯内容部分（股票网格）
   - 简化组件职责：仅负责渲染股票列表

2. DynamicNewsDetailPanel.js
   - 移除传递给 RelatedStocksSection 的 isOpen 和 onToggle props
   - 折叠逻辑由外层的 CollapsibleSection 统一管理

修改文件:
- RelatedStocksSection.js - 移除重复的标题和折叠逻辑
- DynamicNewsDetailPanel.js - 清理无用的 props 传递

影响范围:
- 事件详情面板的"相关股票"区块

测试建议:
1. 打开事件详情面板
2. 展开"相关股票"区块
3. 确认只有一个标题

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../DynamicNewsDetailPanel.js                 |  2 -
 .../DynamicNewsDetail/RelatedStocksSection.js | 47 ++++++-------------
 2 files changed, 14 insertions(+), 35 deletions(-)

diff --git a/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js b/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js
index d80d4643..295a281d 100644
--- a/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js
+++ b/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js
@@ -221,8 +221,6 @@ const DynamicNewsDetailPanel = ({ event }) => {
                 quotes={quotes}
                 eventTime={event.created_at}
                 watchlistSet={watchlistSet}
-                isOpen={true}  // 内部始终展开
-                onToggle={() => {}}  // 空函数
                 onWatchlistToggle={handleWatchlistToggle}
               />
             )}
diff --git a/src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js b/src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js
index fc1bd53a..e660ce49 100644
--- a/src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js
+++ b/src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js
@@ -1,24 +1,19 @@
 // src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js
-// 相关股票列表区组件（可折叠，网格布局）
+// 相关股票列表区组件（纯内容，不含标题）
 
 import React from 'react';
 import {
-  Box,
   SimpleGrid,
-  Collapse,
 } from '@chakra-ui/react';
-import CollapsibleHeader from './CollapsibleHeader';
 import StockListItem from './StockListItem';
 
 /**
- * 相关股票列表区组件
+ * 相关股票列表区组件（纯内容部分）
  * @param {Object} props
  * @param {Array<Object>} props.stocks - 股票数组
  * @param {Object} props.quotes - 股票行情字典 { [stockCode]: { change: number } }
  * @param {string} props.eventTime - 事件时间
  * @param {Set} props.watchlistSet - 自选股代码集合
- * @param {boolean} props.isOpen - 是否展开
- * @param {Function} props.onToggle - 切换展开/收起的回调
  * @param {Function} props.onWatchlistToggle - 切换自选股回调
  */
 const RelatedStocksSection = ({
@@ -26,8 +21,6 @@ const RelatedStocksSection = ({
   quotes = {},
   eventTime = null,
   watchlistSet = new Set(),
-  isOpen,
-  onToggle,
   onWatchlistToggle
 }) => {
   // 如果没有股票数据，不渲染
@@ -36,30 +29,18 @@ const RelatedStocksSection = ({
   }
 
   return (
-    <Box>
-      <CollapsibleHeader
-        title="相关股票"
-        isOpen={isOpen}
-        onToggle={onToggle}
-        count={stocks.length}
-      />
-      <Collapse in={isOpen} animateOpacity>
-        <Box mt={3}>
-          <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={4}>
-            {stocks.map((stock, index) => (
-              <StockListItem
-                key={index}
-                stock={stock}
-                quote={quotes[stock.stock_code]}
-                eventTime={eventTime}
-                isInWatchlist={watchlistSet.has(stock.stock_code)}
-                onWatchlistToggle={onWatchlistToggle}
-              />
-            ))}
-          </SimpleGrid>
-        </Box>
-      </Collapse>
-    </Box>
+    <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={4}>
+      {stocks.map((stock, index) => (
+        <StockListItem
+          key={index}
+          stock={stock}
+          quote={quotes[stock.stock_code]}
+          eventTime={eventTime}
+          isInWatchlist={watchlistSet.has(stock.stock_code)}
+          onWatchlistToggle={onWatchlistToggle}
+        />
+      ))}
+    </SimpleGrid>
   );
 };