fix: 修复详情面板"相关股票"重复标题的问题

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

根本原因:
- 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>
This commit is contained in:
zdl
2025-11-05 09:54:50 +08:00
parent 41baf16d45
commit 4e7fcaad5c
2 changed files with 14 additions and 35 deletions

View File

@@ -221,8 +221,6 @@ const DynamicNewsDetailPanel = ({ event }) => {
quotes={quotes} quotes={quotes}
eventTime={event.created_at} eventTime={event.created_at}
watchlistSet={watchlistSet} watchlistSet={watchlistSet}
isOpen={true} // 内部始终展开
onToggle={() => {}} // 空函数
onWatchlistToggle={handleWatchlistToggle} onWatchlistToggle={handleWatchlistToggle}
/> />
)} )}

View File

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