From d14be2081d51256964b1fe987288e474f03a19f6 Mon Sep 17 00:00:00 2001 From: zzlgreat Date: Sat, 29 Nov 2025 14:07:55 +0800 Subject: [PATCH] update pay function --- .../Community/components/DynamicNewsCard.js | 9 --- .../DynamicNewsCard/EventScrollList.js | 3 + .../DynamicNewsCard/VerticalModeLayout.js | 18 +++++ .../DynamicNewsDetailPanel.js | 67 ++++++++++++------- .../StockDetailPanel/hooks/useEventStocks.js | 9 +-- 5 files changed, 68 insertions(+), 38 deletions(-) diff --git a/src/views/Community/components/DynamicNewsCard.js b/src/views/Community/components/DynamicNewsCard.js index 67897c08..b9e28205 100644 --- a/src/views/Community/components/DynamicNewsCard.js +++ b/src/views/Community/components/DynamicNewsCard.js @@ -683,15 +683,6 @@ const [currentMode, setCurrentMode] = useState('vertical'); )} - - {/* 右侧：分页控制器（仅在纵向模式显示），H5 放不下时折行 */} - {mode === 'vertical' && totalPages > 1 && ( - - )} ); }); diff --git a/src/views/Community/components/DynamicNewsCard/EventScrollList.js b/src/views/Community/components/DynamicNewsCard/EventScrollList.js index 5f181280..b843b76d 100644 --- a/src/views/Community/components/DynamicNewsCard/EventScrollList.js +++ b/src/views/Community/components/DynamicNewsCard/EventScrollList.js @@ -141,6 +141,9 @@ const EventScrollList = React.memo(({ onToggleFollow={onToggleFollow} getTimelineBoxStyle={getTimelineBoxStyle} borderColor={borderColor} + currentPage={currentPage} + totalPages={totalPages} + onPageChange={onPageChange} /> ); diff --git a/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js b/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js index abe9723e..847345b0 100644 --- a/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js +++ b/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js @@ -15,6 +15,7 @@ import { InfoIcon } from '@chakra-ui/icons'; import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard'; import EventDetailScrollPanel from './EventDetailScrollPanel'; import EventDetailModal from '../EventDetailModal'; +import PaginationControl from './PaginationControl'; /** * 纵向分栏模式布局 @@ -28,6 +29,9 @@ import EventDetailModal from '../EventDetailModal'; * @param {Function} onToggleFollow - 关注按钮回调 * @param {Function} getTimelineBoxStyle - 时间线样式获取函数 * @param {string} borderColor - 边框颜色 + * @param {number} currentPage - 当前页码 + * @param {number} totalPages - 总页数 + * @param {Function} onPageChange - 页码改变回调 */ const VerticalModeLayout = React.memo(({ display = 'flex', @@ -38,6 +42,9 @@ const VerticalModeLayout = React.memo(({ onToggleFollow, getTimelineBoxStyle, borderColor, + currentPage = 1, + totalPages = 1, + onPageChange, }) => { // 详情面板重置 key（预留，用于未来功能） const [detailPanelKey] = useState(0); @@ -137,6 +144,17 @@ const VerticalModeLayout = React.memo(({ )} + + {/* 分页控制器 - 放在事件列表下方 */} + {totalPages > 1 && onPageChange && ( + + + + )} {/* 右侧：事件详情 - 独立滚动 - 移动端隐藏 */} diff --git a/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js b/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js index 16399acd..7724a5c4 100644 --- a/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js +++ b/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js @@ -75,7 +75,9 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => { featureName: '' }); - // 使用 Hook 获取实时数据（禁用自动加载，改为手动触发） + // 使用 Hook 获取实时数据 + // - autoLoad: false - 禁用自动加载所有数据，改为手动触发 + // - autoLoadQuotes: false - 禁用自动加载行情，延迟到展开时加载（减少请求） const { stocks, quotes, @@ -85,8 +87,9 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => { loading, loadStocksData, loadHistoricalData, - loadChainAnalysis - } = useEventStocks(event?.id, event?.created_at, { autoLoad: false }); + loadChainAnalysis, + refreshQuotes + } = useEventStocks(event?.id, event?.created_at, { autoLoad: false, autoLoadQuotes: false }); // 🎯 加载事件详情（增加浏览量）- 与 EventDetailModal 保持一致 const loadEventDetail = useCallback(async () => { @@ -119,12 +122,14 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => { const canAccessTransmission = hasAccess('max'); // 子区块折叠状态管理 + 加载追踪 - // 初始值为 false，由 useEffect 根据权限动态设置 + // 相关股票默认折叠，只显示数量吸引点击 const [isStocksOpen, setIsStocksOpen] = useState(false); - const [hasLoadedStocks, setHasLoadedStocks] = useState(false); + const [hasLoadedStocks, setHasLoadedStocks] = useState(false); // 股票列表是否已加载（获取数量） + const [hasLoadedQuotes, setHasLoadedQuotes] = useState(false); // 行情数据是否已加载 const [isConceptsOpen, setIsConceptsOpen] = useState(false); + // 历史事件默认折叠，但预加载数量 const [isHistoricalOpen, setIsHistoricalOpen] = useState(false); const [hasLoadedHistorical, setHasLoadedHistorical] = useState(false); @@ -159,34 +164,41 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => { }); }, []); - // 相关股票 - 展开时加载（需要 PRO 权限） + // 相关股票 - 展开时加载行情（需要 PRO 权限） + // 股票列表在事件切换时预加载（显示数量），行情在展开时才加载 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); + // 展开时加载行情数据（如果还没加载过） + if (newState && !hasLoadedQuotes && stocks.length > 0) { + console.log('%c📈 [相关股票] 首次展开，加载行情数据', 'color: #10B981; font-weight: bold;', { + eventId: event?.id, + stockCount: stocks.length + }); + refreshQuotes(); + setHasLoadedQuotes(true); } - }, [isStocksOpen, hasLoadedStocks, loadStocksData, event?.id]); + }, [isStocksOpen, hasLoadedQuotes, stocks.length, refreshQuotes, event?.id]); // 相关概念 - 展开/收起（无需加载） const handleConceptsToggle = useCallback(() => { setIsConceptsOpen(!isConceptsOpen); }, [isConceptsOpen]); - // 历史事件对比 - 展开时加载 + // 历史事件对比 - 数据已预加载，只需切换展开状态 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); + // 数据已在事件切换时预加载，这里只需展开 + if (newState) { + console.log('%c📜 [历史事件] 展开（数据已预加载）', 'color: #3B82F6; font-weight: bold;', { + eventId: event?.id, + count: historicalEvents?.length || 0 + }); } - }, [isHistoricalOpen, hasLoadedHistorical, loadHistoricalData, event?.id]); + }, [isHistoricalOpen, event?.id, historicalEvents?.length]); // 传导链分析 - 展开时加载 const handleTransmissionToggle = useCallback(() => { @@ -209,24 +221,29 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => { // 重置所有加载状态 setHasLoadedStocks(false); + setHasLoadedQuotes(false); // 重置行情加载状态 setHasLoadedHistorical(false); setHasLoadedTransmission(false); - // 相关股票默认展开（有权限时） + // 相关股票默认折叠，但预加载股票列表（显示数量吸引点击） + setIsStocksOpen(false); if (canAccessStocks) { - setIsStocksOpen(true); - // 立即加载股票数据 - console.log('%c📊 [相关股票] 事件切换，加载股票数据', 'color: #10B981; font-weight: bold;', { eventId: event?.id }); + console.log('%c📊 [相关股票] 事件切换，预加载股票列表（获取数量）', 'color: #10B981; font-weight: bold;', { eventId: event?.id }); loadStocksData(); setHasLoadedStocks(true); - } else { - setIsStocksOpen(false); + } + + // 历史事件默认折叠，但预加载数据（显示数量吸引点击） + setIsHistoricalOpen(false); + if (canAccessHistorical) { + console.log('%c📜 [历史事件] 事件切换，预加载历史事件（获取数量）', 'color: #3B82F6; font-weight: bold;', { eventId: event?.id }); + loadHistoricalData(); + setHasLoadedHistorical(true); } setIsConceptsOpen(false); - setIsHistoricalOpen(false); setIsTransmissionOpen(false); - }, [event?.id, canAccessStocks, userTier, loadStocksData, loadEventDetail]); + }, [event?.id, canAccessStocks, canAccessHistorical, userTier, loadStocksData, loadHistoricalData, loadEventDetail]); // 切换关注状态 const handleToggleFollow = useCallback(async () => { diff --git a/src/views/Community/components/StockDetailPanel/hooks/useEventStocks.js b/src/views/Community/components/StockDetailPanel/hooks/useEventStocks.js index 40eaa18b..35e5f427 100644 --- a/src/views/Community/components/StockDetailPanel/hooks/useEventStocks.js +++ b/src/views/Community/components/StockDetailPanel/hooks/useEventStocks.js @@ -19,9 +19,10 @@ import { logger } from '../../../../../utils/logger'; * @param {string} eventTime - 事件时间 * @param {Object} options - 配置选项 * @param {boolean} options.autoLoad - 是否自动加载数据（默认true） + * @param {boolean} options.autoLoadQuotes - 是否自动加载行情数据（默认true，设为false可延迟到展开时加载） * @returns {Object} 事件数据和加载状态 */ -export const useEventStocks = (eventId, eventTime, { autoLoad = true } = {}) => { +export const useEventStocks = (eventId, eventTime, { autoLoad = true, autoLoadQuotes = true } = {}) => { const dispatch = useDispatch(); // 从 Redux 获取数据 @@ -122,12 +123,12 @@ export const useEventStocks = (eventId, eventTime, { autoLoad = true } = {}) => } }, [eventId, autoLoad, loadAllData]); // 添加 loadAllData 依赖 - // 自动加载行情数据 + // 自动加载行情数据（可通过 autoLoadQuotes 参数控制） useEffect(() => { - if (stocks.length > 0) { + if (stocks.length > 0 && autoLoadQuotes) { refreshQuotes(); } - }, [stocks.length, eventId]); // 注意：这里不依赖 refreshQuotes，避免重复请求 + }, [stocks.length, eventId, autoLoadQuotes]); // 注意：这里不依赖 refreshQuotes，避免重复请求 // 计算股票行情合并数据 const stocksWithQuotes = useMemo(() => {