From e7c495a8b10b4c3a49a8a7a811a3d2ce994ee658 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Wed, 5 Nov 2025 08:29:44 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20feat:=20=E5=AE=9E=E7=8E=B0=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E8=AF=A6=E6=83=85=E5=AD=90=E6=A8=A1=E5=9D=97=E6=87=92?= =?UTF-8?q?=E5=8A=A0=E8=BD=BDuseEventStocks=E6=B7=BB=E5=8A=A0=20autoLoad?= =?UTF-8?q?=20=E5=8F=82=E6=95=B0=E5=92=8C=E5=88=86=E7=A6=BB=E5=8A=A0?= =?UTF-8?q?=E8=BD=BD=E5=87=BD=E6=95=B0=20=20=20=20=20=20=20=20=20=20=20=20?= =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?= =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?= =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?= =?UTF-8?q?=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20=20?= =?UTF-8?q?=E2=94=82=20=E2=94=82=20=E2=94=82=20=E2=94=82=20=20=20-=20Dynam?= =?UTF-8?q?icNewsDetailPanel=E5=AE=9E=E7=8E=B0=E5=AD=90=E6=A8=A1=E5=9D=97?= =?UTF-8?q?=E6=8A=98=E5=8F=A0=E5=92=8C=E6=87=92=E5=8A=A0=E8=BD=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DynamicNewsDetailPanel.js | 118 +++++++++++++----- .../StockDetailPanel/hooks/useEventStocks.js | 52 ++++++-- 2 files changed, 131 insertions(+), 39 deletions(-) diff --git a/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js b/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js index 9b441783..d80d4643 100644 --- a/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js +++ b/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js @@ -1,7 +1,7 @@ // src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js // 动态新闻详情面板主组件（组装所有子组件） -import React, { useState, useCallback } from 'react'; +import React, { useState, useCallback, useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { Card, @@ -42,20 +42,28 @@ const DynamicNewsDetailPanel = ({ event }) => { const isFollowing = event?.id ? (eventFollowStatus[event.id]?.isFollowing || false) : false; const followerCount = event?.id ? (eventFollowStatus[event.id]?.followerCount || event.follower_count || 0) : 0; - // 使用 Hook 获取实时数据 + // 使用 Hook 获取实时数据（禁用自动加载，改为手动触发） const { stocks, quotes, eventDetail, historicalEvents, expectationScore, - loading - } = useEventStocks(event?.id, event?.created_at); + loading, + loadStocksData, + loadHistoricalData, + loadChainAnalysis + } = useEventStocks(event?.id, event?.created_at, { autoLoad: false }); + + // 子区块折叠状态管理（默认折叠）+ 加载追踪 + const [isStocksOpen, setIsStocksOpen] = useState(false); + const [hasLoadedStocks, setHasLoadedStocks] = useState(false); + + const [isHistoricalOpen, setIsHistoricalOpen] = useState(false); + const [hasLoadedHistorical, setHasLoadedHistorical] = useState(false); - // 折叠状态管理 - const [isStocksOpen, setIsStocksOpen] = useState(true); - const [isHistoricalOpen, setIsHistoricalOpen] = useState(true); const [isTransmissionOpen, setIsTransmissionOpen] = useState(false); + const [hasLoadedTransmission, setHasLoadedTransmission] = useState(false); // 自选股管理（使用 localStorage） const [watchlistSet, setWatchlistSet] = useState(() => { @@ -67,6 +75,53 @@ const DynamicNewsDetailPanel = ({ event }) => { } }); + // 相关股票 - 展开时加载 + const handleStocksToggle = useCallback(() => { + const newState = !isStocksOpen; + setIsStocksOpen(newState); + + if (newState && !hasLoadedStocks) { + console.log('%c📊 [相关股票] 首次展开，加载股票数据', 'color: #10B981; font-weight: bold;', { eventId: event?.id }); + loadStocksData(); + setHasLoadedStocks(true); + } + }, [isStocksOpen, hasLoadedStocks, loadStocksData, event?.id]); + + // 历史事件对比 - 展开时加载 + const handleHistoricalToggle = useCallback(() => { + const newState = !isHistoricalOpen; + setIsHistoricalOpen(newState); + + if (newState && !hasLoadedHistorical) { + console.log('%c📜 [历史事件] 首次展开，加载历史事件数据', 'color: #3B82F6; font-weight: bold;', { eventId: event?.id }); + loadHistoricalData(); + setHasLoadedHistorical(true); + } + }, [isHistoricalOpen, hasLoadedHistorical, loadHistoricalData, event?.id]); + + // 传导链分析 - 展开时加载 + const handleTransmissionToggle = useCallback(() => { + const newState = !isTransmissionOpen; + setIsTransmissionOpen(newState); + + if (newState && !hasLoadedTransmission) { + console.log('%c🔗 [传导链] 首次展开，加载传导链数据', 'color: #8B5CF6; font-weight: bold;', { eventId: event?.id }); + loadChainAnalysis(); + setHasLoadedTransmission(true); + } + }, [isTransmissionOpen, hasLoadedTransmission, loadChainAnalysis, event?.id]); + + // 事件切换时重置所有子模块状态 + useEffect(() => { + console.log('%c🔄 [事件切换] 重置所有子模块状态', 'color: #F59E0B; font-weight: bold;', { eventId: event?.id }); + setIsStocksOpen(false); + setHasLoadedStocks(false); + setIsHistoricalOpen(false); + setHasLoadedHistorical(false); + setIsTransmissionOpen(false); + setHasLoadedTransmission(false); + }, [event?.id]); + // 切换关注状态 const handleToggleFollow = useCallback(async () => { if (!event?.id) return; @@ -148,29 +203,36 @@ const DynamicNewsDetailPanel = ({ event }) => { eventTime={event.created_at} /> - {/* 相关股票（可折叠） */} - {loading.stocks || loading.quotes ? ( -
- - 加载股票数据中... -
- ) : ( - setIsStocksOpen(!isStocksOpen)} - onWatchlistToggle={handleWatchlistToggle} - /> - )} + {/* 相关股票（可折叠） - 懒加载 */} + + {loading.stocks || loading.quotes ? ( +
+ + 加载股票数据中... +
+ ) : ( + {}} // 空函数 + onWatchlistToggle={handleWatchlistToggle} + /> + )} + - {/* 历史事件对比（可折叠） */} + {/* 历史事件对比（可折叠） - 懒加载 */} setIsHistoricalOpen(!isHistoricalOpen)} + onToggle={handleHistoricalToggle} count={historicalEvents?.length || 0} > {loading.historicalEvents ? ( @@ -186,11 +248,11 @@ const DynamicNewsDetailPanel = ({ event }) => { )} - {/* 传导链分析（可折叠） */} + {/* 传导链分析（可折叠） - 懒加载 */} setIsTransmissionOpen(!isTransmissionOpen)} + onToggle={handleTransmissionToggle} > { +export const useEventStocks = (eventId, eventTime, { autoLoad = true } = {}) => { const dispatch = useDispatch(); // 从 Redux 获取数据 @@ -45,22 +47,43 @@ export const useEventStocks = (eventId, eventTime) => { // 加载状态 const loading = useSelector(state => state.stock.loading, shallowEqual); - // 加载所有数据 + // 拆分加载函数 - 相关股票数据 + const loadStocksData = useCallback(() => { + if (!eventId) return; + logger.debug('useEventStocks', '加载股票数据', { eventId }); + dispatch(fetchEventStocks({ eventId })); + }, [dispatch, eventId]); + + // 拆分加载函数 - 历史事件数据 + const loadHistoricalData = useCallback(() => { + if (!eventId) return; + logger.debug('useEventStocks', '加载历史事件数据', { eventId }); + dispatch(fetchHistoricalEvents({ eventId })); + dispatch(fetchExpectationScore({ eventId })); + }, [dispatch, eventId]); + + // 拆分加载函数 - 传导链分析数据 + const loadChainAnalysis = useCallback(() => { + if (!eventId) return; + logger.debug('useEventStocks', '加载传导链数据', { eventId }); + dispatch(fetchChainAnalysis({ eventId })); + }, [dispatch, eventId]); + + // 加载所有数据（保留用于兼容性） const loadAllData = useCallback(() => { if (!eventId) { logger.warn('useEventStocks', 'eventId 为空，跳过数据加载'); return; } - logger.debug('useEventStocks', '开始加载事件数据', { eventId }); + logger.debug('useEventStocks', '开始加载事件所有数据', { eventId }); // 并发加载所有数据 - dispatch(fetchEventStocks({ eventId })); dispatch(fetchEventDetail({ eventId })); - dispatch(fetchHistoricalEvents({ eventId })); - dispatch(fetchChainAnalysis({ eventId })); - dispatch(fetchExpectationScore({ eventId })); - }, [dispatch, eventId]); + loadStocksData(); + loadHistoricalData(); + loadChainAnalysis(); + }, [dispatch, eventId, loadStocksData, loadHistoricalData, loadChainAnalysis]); // 强制刷新所有数据 const refreshAllData = useCallback(() => { @@ -88,12 +111,16 @@ export const useEventStocks = (eventId, eventTime) => { dispatch(fetchStockQuotes({ codes, eventTime })); }, [dispatch, stocks, eventTime]); - // 自动加载事件数据 + // 自动加载事件数据（可通过 autoLoad 参数控制） useEffect(() => { - if (eventId) { + if (eventId && autoLoad) { + logger.debug('useEventStocks', '自动加载已启用，加载所有数据', { eventId, autoLoad }); loadAllData(); + } else if (eventId && !autoLoad) { + logger.debug('useEventStocks', '自动加载已禁用，等待手动触发', { eventId, autoLoad }); + // 禁用自动加载时，不加载任何数据 } - }, [eventId]); // 修复：只依赖 eventId，避免无限循环 + }, [eventId, autoLoad, loadAllData]); // 添加 loadAllData 依赖 // 自动加载行情数据 useEffect(() => { @@ -131,6 +158,9 @@ export const useEventStocks = (eventId, eventTime) => { // 方法 loadAllData, + loadStocksData, // 新增：加载股票数据 + loadHistoricalData, // 新增：加载历史事件数据 + loadChainAnalysis, // 新增：加载传导链数据（重命名避免冲突） refreshAllData, refreshQuotes };