diff --git a/src/views/Community/components/DynamicNewsCard/EventScrollList.js b/src/views/Community/components/DynamicNewsCard/EventScrollList.js index a0113ecd..6d71957b 100644 --- a/src/views/Community/components/DynamicNewsCard/EventScrollList.js +++ b/src/views/Community/components/DynamicNewsCard/EventScrollList.js @@ -1,7 +1,7 @@ // src/views/Community/components/DynamicNewsCard/EventScrollList.js // 横向滚动事件列表组件 -import React, { useRef } from 'react'; +import React, { useRef, useCallback } from 'react'; import { Box, Flex, @@ -44,6 +44,7 @@ const EventScrollList = ({ totalPages, onPageChange, loading = false, + error, // 错误状态 mode = 'vertical', onModeChange, hasMore = true, @@ -72,20 +73,27 @@ const EventScrollList = ({ }; }; + // 重试函数 + const handleRetry = useCallback(() => { + if (onPageChange) { + onPageChange(currentPage); + } + }, [onPageChange, currentPage]); + return ( - {/* 顶部控制栏:模式切换按钮(左)+ 分页控制器(右) */} + {/* 顶部控制栏:模式切换按钮 + 分页控制器 */} - {/* 模式切换按钮 */} + {/* 左侧:模式切换按钮 */} - {/* 分页控制器(平铺模式不显示,使用无限滚动) */} - {totalPages > 1 && mode !== 'four-row' && ( - + {/* 右侧:分页控制器(纵向和平铺模式都显示) */} + {totalPages > 1 && ( + )} @@ -116,11 +124,9 @@ const EventScrollList = ({ )} @@ -170,9 +179,9 @@ const EventScrollList = ({ onToggleFollow={onToggleFollow} getTimelineBoxStyle={getTimelineBoxStyle} borderColor={borderColor} - scrollbarTrackBg={scrollbarTrackBg} - scrollbarThumbBg={scrollbarThumbBg} - scrollbarThumbHoverBg={scrollbarThumbHoverBg} + currentPage={currentPage} + totalPages={totalPages} + onPageChange={onPageChange} /> )} diff --git a/src/views/Community/components/DynamicNewsCard/hooks/usePagination.js b/src/views/Community/components/DynamicNewsCard/hooks/usePagination.js index 2ac070fb..8b916995 100644 --- a/src/views/Community/components/DynamicNewsCard/hooks/usePagination.js +++ b/src/views/Community/components/DynamicNewsCard/hooks/usePagination.js @@ -34,16 +34,12 @@ export const usePagination = ({ allCachedEvents, total, cachedCount, dispatch, t // 根据模式决定每页显示数量 const pageSize = (() => { switch (mode) { - case DISPLAY_MODES.CAROUSEL: - return PAGINATION_CONFIG.CAROUSEL_PAGE_SIZE; - case DISPLAY_MODES.GRID: - return PAGINATION_CONFIG.GRID_PAGE_SIZE; case DISPLAY_MODES.FOUR_ROW: return PAGINATION_CONFIG.FOUR_ROW_PAGE_SIZE; case DISPLAY_MODES.VERTICAL: return PAGINATION_CONFIG.VERTICAL_PAGE_SIZE; default: - return PAGINATION_CONFIG.CAROUSEL_PAGE_SIZE; + return PAGINATION_CONFIG.VERTICAL_PAGE_SIZE; } })(); @@ -126,20 +122,37 @@ export const usePagination = ({ allCachedEvents, total, cachedCount, dispatch, t try { console.log(`%c🟢 [API请求] 开始加载第${targetPage}页数据`, 'color: #16A34A; font-weight: bold;'); - console.log(`%c 请求参数: page=${targetPage}, per_page=${pageSize}`, 'color: #16A34A;'); + console.log(`%c 请求参数: page=${targetPage}, per_page=${pageSize}, mode=${mode}`, 'color: #16A34A;'); + console.log(`%c 筛选条件:`, 'color: #16A34A;', filters); logger.debug('DynamicNewsCard', '开始加载页面数据', { targetPage, - pageSize + pageSize, + mode, + filters }); - await dispatch(fetchDynamicNews({ + // 🔍 调试:dispatch 前 + console.log(`%c🔵 [dispatch] 准备调用 fetchDynamicNews`, 'color: #3B82F6; font-weight: bold;', { + mode, page: targetPage, per_page: pageSize, + pageSize, + clearCache: false, + filters + }); + + const result = await dispatch(fetchDynamicNews({ + mode: mode, // 传递 mode 参数 + per_page: pageSize, pageSize: pageSize, - clearCache: false + clearCache: false, + ...filters, // 先展开筛选条件 + page: targetPage, // 然后覆盖 page 参数(避免被 filters.page 覆盖) })).unwrap(); + // 🔍 调试:dispatch 后 + console.log(`%c🔵 [dispatch] fetchDynamicNews 返回结果`, 'color: #3B82F6; font-weight: bold;', result); console.log(`%c🟢 [API请求] 第${targetPage}页加载完成`, 'color: #16A34A; font-weight: bold;'); logger.debug('DynamicNewsCard', `第 ${targetPage} 页加载完成`); @@ -185,10 +198,12 @@ export const usePagination = ({ allCachedEvents, total, cachedCount, dispatch, t logger.debug('DynamicNewsCard', '返回第一页,清空缓存重新加载'); setCurrentPage(1); dispatch(fetchDynamicNews({ - page: 1, + mode: mode, // 传递 mode 参数 per_page: pageSize, pageSize: pageSize, - clearCache: true // 清空缓存 + clearCache: true, // 清空缓存 + ...filters, // 先展开筛选条件 + page: 1, // 然后覆盖 page 参数 })); return; } @@ -305,7 +320,7 @@ export const usePagination = ({ allCachedEvents, total, cachedCount, dispatch, t } }, [currentPage, loadingPage, handlePageChange]); - // 模式切换处理 + // 模式切换处理(简化版 - 模式切换时始终请求数据,因为两种模式使用独立存储) const handleModeToggle = useCallback((newMode) => { if (newMode === mode) return; @@ -314,36 +329,15 @@ export const usePagination = ({ allCachedEvents, total, cachedCount, dispatch, t const newPageSize = (() => { switch (newMode) { - case DISPLAY_MODES.CAROUSEL: - return PAGINATION_CONFIG.CAROUSEL_PAGE_SIZE; - case DISPLAY_MODES.GRID: - return PAGINATION_CONFIG.GRID_PAGE_SIZE; case DISPLAY_MODES.FOUR_ROW: return PAGINATION_CONFIG.FOUR_ROW_PAGE_SIZE; case DISPLAY_MODES.VERTICAL: return PAGINATION_CONFIG.VERTICAL_PAGE_SIZE; default: - return PAGINATION_CONFIG.CAROUSEL_PAGE_SIZE; + return PAGINATION_CONFIG.VERTICAL_PAGE_SIZE; } })(); - - // 检查第1页的数据是否完整(排除 null) - const firstPageData = allCachedEvents.slice(0, newPageSize); - const validFirstPageCount = firstPageData.filter(e => e !== null).length; - const needsRefetch = validFirstPageCount < Math.min(newPageSize, total); - - if (needsRefetch) { - // 第1页数据不完整,清空缓存重新请求 - dispatch(fetchDynamicNews({ - page: 1, - per_page: newPageSize, - pageSize: newPageSize, // 传递 pageSize 确保索引计算一致 - clearCache: true, - ...filters // 应用筛选条件 - })); - } - // 如果第1页数据完整,不发起请求,直接切换 - }, [mode, allCachedEvents, total, dispatch, filters]); + }, [mode]); return { // 状态 diff --git a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js index bffa9a62..6ef496f9 100644 --- a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js +++ b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js @@ -33,6 +33,7 @@ import StockChangeIndicators from '../../../../components/StockChangeIndicators' * @param {Function} props.onToggleFollow - 切换关注事件 * @param {Object} props.timelineStyle - 时间轴样式配置 * @param {string} props.borderColor - 边框颜色 + * @param {string} props.indicatorSize - 涨幅指标尺寸 ('default' | 'comfortable' | 'large') */ const HorizontalDynamicNewsEventCard = ({ event, @@ -45,9 +46,15 @@ const HorizontalDynamicNewsEventCard = ({ onToggleFollow, timelineStyle, borderColor, + indicatorSize = 'comfortable', }) => { const importance = getImportanceConfig(event.importance); + + // 所有 useColorModeValue 必须在顶层调用 const cardBg = useColorModeValue('white', 'gray.800'); + const cardBgAlt = useColorModeValue('gray.50', 'gray.750'); + const selectedBg = useColorModeValue('blue.50', 'blue.900'); + const selectedBorderColor = useColorModeValue('blue.500', 'blue.400'); const linkColor = useColorModeValue('blue.600', 'blue.400'); return ( @@ -65,12 +72,12 @@ const HorizontalDynamicNewsEventCard = ({ flex="1" position="relative" bg={isSelected - ? useColorModeValue('blue.50', 'blue.900') - : (index % 2 === 0 ? cardBg : useColorModeValue('gray.50', 'gray.750')) + ? selectedBg + : (index % 2 === 0 ? cardBg : cardBgAlt) } borderWidth={isSelected ? "2px" : "1px"} borderColor={isSelected - ? useColorModeValue('blue.500', 'blue.400') + ? selectedBorderColor : borderColor } borderRadius="md" @@ -137,7 +144,7 @@ const HorizontalDynamicNewsEventCard = ({ avgChange={event.related_avg_chg} maxChange={event.related_max_chg} weekChange={event.related_week_chg} - size="comfortable" + size={indicatorSize} /> diff --git a/src/views/Community/index.js b/src/views/Community/index.js index d7c01dde..7859634e 100644 --- a/src/views/Community/index.js +++ b/src/views/Community/index.js @@ -5,8 +5,7 @@ import { useSelector, useDispatch } from 'react-redux'; import { fetchPopularKeywords, fetchHotEvents, - fetchDynamicNews, - selectDynamicNewsWithLoading + fetchDynamicNews } from '../../store/slices/communityDataSlice'; import { Box, @@ -39,13 +38,6 @@ const Community = () => { // Redux状态 const { popularKeywords, hotEvents } = useSelector(state => state.communityData); - const { - data: allCachedEvents, - loading: dynamicNewsLoading, - error: dynamicNewsError, - total: dynamicNewsTotal, - cachedCount: dynamicNewsCachedCount - } = useSelector(selectDynamicNewsWithLoading); // Chakra UI hooks const bgColor = useColorModeValue('gray.50', 'gray.900'); @@ -167,10 +159,6 @@ const Community = () => { {/* 实时要闻·动态追踪 - 横向滚动 */}