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(() => {