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:
@@ -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}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -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,15 +29,6 @@ const RelatedStocksSection = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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}>
|
<SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={4}>
|
||||||
{stocks.map((stock, index) => (
|
{stocks.map((stock, index) => (
|
||||||
<StockListItem
|
<StockListItem
|
||||||
@@ -57,9 +41,6 @@ const RelatedStocksSection = ({
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</SimpleGrid>
|
</SimpleGrid>
|
||||||
</Box>
|
|
||||||
</Collapse>
|
|
||||||
</Box>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user