update pay function

src/views/Community/components/DynamicNewsCard.js

@@ -683,15 +683,6 @@ const [currentMode, setCurrentMode] = useState('vertical');
           </ModalContent>
         </Modal>
       )}
-      
-      {/* 右侧：分页控制器（仅在纵向模式显示），H5 放不下时折行 */}
-      {mode === 'vertical' && totalPages > 1 && (
-        <PaginationControl
-          currentPage={currentPage}
-          totalPages={totalPages}
-          onPageChange={handlePageChangeWithScroll}
-        />
-      )}
     </Card>
   );
 });

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}
       />
     </Box>
   );

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(({
             </VStack>
           </Center>
         )}
+
+        {/* 分页控制器 - 放在事件列表下方 */}
+        {totalPages > 1 && onPageChange && (
+          <Box pt={3} pb={1}>
+            <PaginationControl
+              currentPage={currentPage}
+              totalPages={totalPages}
+              onPageChange={onPageChange}
+            />
+          </Box>
+        )}
       </Box>
 
       {/* 右侧：事件详情 - 独立滚动 - 移动端隐藏 */}

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
+    loadChainAnalysis,
-  } = useEventStocks(event?.id, event?.created_at, { autoLoad: false });
+    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 });
+    if (newState && !hasLoadedQuotes && stocks.length > 0) {
-      loadStocksData();
+      console.log('%c📈 [相关股票] 首次展开，加载行情数据', 'color: #10B981; font-weight: bold;', {
-      setHasLoadedStocks(true);
+        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 });
+    if (newState) {
-      loadHistoricalData();
+      console.log('%c📜 [历史事件] 展开（数据已预加载）', 'color: #3B82F6; font-weight: bold;', {
-      setHasLoadedHistorical(true);
+        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 () => {

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