refactor: 优化分页存储架构和缓存逻辑...

src/views/Community/components/DynamicNewsCard.js

@@ -82,36 +82,48 @@ const DynamicNewsCard = forwardRef(({
   // 🔍 调试：从 Redux 读取数据
   console.log('%c[DynamicNewsCard] 从 Redux 读取数据', 'color: #3B82F6; font-weight: bold;', {
     currentMode,
-    'verticalData.data?.length': verticalData.data?.length || 0,
+    'verticalData.data type': typeof verticalData.data,
+    'verticalData.data keys': verticalData.data ? Object.keys(verticalData.data) : [],
     'verticalData.total': verticalData.total,
-    'verticalData.cachedCount': verticalData.cachedCount,
+    'verticalData.cachedPageCount': verticalData.cachedPageCount,
     'verticalData.loading': verticalData.loading,
     'fourRowData.data?.length': fourRowData.data?.length || 0,
     'fourRowData.total': fourRowData.total,
   });
 
-  // 根据模式选择数据源（添加默认值避免解构失败）
+  // 根据模式选择数据源
+  // 纵向模式：data 是页码映射 { 1: [...], 2: [...] }
+  // 平铺模式：data 是数组 [...]
+  const modeData = currentMode === 'four-row' ? fourRowData : verticalData;
   const {
-    data: allCachedEvents = [],
+    data = currentMode === 'vertical' ? {} : [],  // 纵向是对象，平铺是数组
     loading = false,
     error = null,
-    total = 0,
-    cachedCount = 0
-  } = currentMode === 'four-row' ? fourRowData : verticalData;
+    pagination,                                     // 分页元数据
+    total = 0,                                      // 向后兼容
+    cachedCount = 0,
+    cachedPageCount = 0
+  } = modeData;
+
+  // 传递给 usePagination 的数据
+  const allCachedEventsByPage = currentMode === 'vertical' ? data : undefined;
+  const allCachedEvents = currentMode === 'four-row' ? data : undefined;
 
   // 🔍 调试：选择的数据源
   console.log('%c[DynamicNewsCard] 选择的数据源', 'color: #3B82F6; font-weight: bold;', {
     mode: currentMode,
-    'allCachedEvents.length': allCachedEvents.length,
+    'allCachedEventsByPage': allCachedEventsByPage ? Object.keys(allCachedEventsByPage) : 'undefined',
+    'allCachedEvents?.length': allCachedEvents?.length,
     total,
     cachedCount,
+    cachedPageCount,
     loading,
     error
   });
 
   // 🔍 调试：记录每次渲染
   dynamicNewsCardRenderCount++;
-  console.log(`%c🔍 [DynamicNewsCard] 渲染 #${dynamicNewsCardRenderCount} - mode=${currentMode}, allCachedEvents.length=${allCachedEvents.length}, total=${total}`, 'color: #FF9800; font-weight: bold; font-size: 14px;');
+  console.log(`%c🔍 [DynamicNewsCard] 渲染 #${dynamicNewsCardRenderCount} - mode=${currentMode}, allCachedEvents.length=${allCachedEvents?.length || 0}, total=${total}`, 'color: #FF9800; font-weight: bold; font-size: 14px;');
 
   // 关注按钮点击处理
   const handleToggleFollow = useCallback((eventId) => {
@@ -141,15 +153,16 @@ const DynamicNewsCard = forwardRef(({
     totalPages,
     hasMore,
     currentPageEvents,
-    displayEvents,        // 新增：累积显示的事件列表
-    isAccumulateMode,     // 新增：是否累积模式
+    displayEvents,        // 当前显示的事件列表
     handlePageChange,
     handleModeToggle,
-    loadNextPage,         // 新增：加载下一页
-    loadPrevPage          // 新增：加载上一页
+    loadNextPage,         // 加载下一页
+    loadPrevPage          // 加载上一页
   } = usePagination({
-    allCachedEvents,
-    total,
+    allCachedEventsByPage,  // 纵向模式：页码映射
+    allCachedEvents,         // 平铺模式：数组
+    pagination,              // 分页元数据对象
+    total,                   // 向后兼容
     cachedCount,
     dispatch,
     toast,
@@ -183,7 +196,11 @@ const DynamicNewsCard = forwardRef(({
 
   // 初始加载 - 只在组件首次挂载且对应模式数据为空时执行
   useEffect(() => {
-    if (!hasInitialized.current && allCachedEvents.length === 0) {
+    const isDataEmpty = currentMode === 'vertical'
+      ? Object.keys(allCachedEventsByPage || {}).length === 0
+      : (allCachedEvents?.length || 0) === 0;
+
+    if (!hasInitialized.current && isDataEmpty) {
       hasInitialized.current = true;
       dispatch(fetchDynamicNews({
         mode: mode,  // 传递当前模式
@@ -194,7 +211,7 @@ const DynamicNewsCard = forwardRef(({
         page: PAGINATION_CONFIG.INITIAL_PAGE,  // 然后覆盖 page 参数
       }));
     }
-  }, [dispatch, allCachedEvents.length, mode, pageSize]);  // ✅ 移除 filters 依赖，避免重复触发
+  }, [dispatch, allCachedEventsByPage, allCachedEvents, currentMode, mode, pageSize]);  // ✅ 移除 filters 依赖，避免重复触发
 
   // 监听筛选条件变化 - 清空缓存并重新请求数据
   useEffect(() => {
@@ -231,7 +248,11 @@ const DynamicNewsCard = forwardRef(({
 
   // 监听模式切换 - 如果新模式数据为空，请求数据
   useEffect(() => {
-    if (hasInitialized.current && allCachedEvents.length === 0) {
+    const isDataEmpty = currentMode === 'vertical'
+      ? Object.keys(allCachedEventsByPage || {}).length === 0
+      : (allCachedEvents?.length || 0) === 0;
+
+    if (hasInitialized.current && isDataEmpty) {
       console.log(`%c🔄 [模式切换] ${mode} 模式数据为空，开始加载`, 'color: #8B5CF6; font-weight: bold;');
       dispatch(fetchDynamicNews({
         mode: mode,
@@ -309,11 +330,10 @@ const DynamicNewsCard = forwardRef(({
         {currentPageEvents && currentPageEvents.length > 0 ? (
           <EventScrollList
             events={currentPageEvents}
-            displayEvents={displayEvents}              // 新增：累积显示的事件列表
-            isAccumulateMode={isAccumulateMode}        // 新增：是否累积模式
-            loadNextPage={loadNextPage}                // 新增：加载下一页
-            loadPrevPage={loadPrevPage}                // 新增：加载上一页
-            onFourRowEventClick={handleFourRowEventClick}  // 新增：四排模式事件点击
+            displayEvents={displayEvents}              // 累积显示的事件列表（平铺模式）
+            loadNextPage={loadNextPage}                // 加载下一页
+            loadPrevPage={loadPrevPage}                // 加载上一页
+            onFourRowEventClick={handleFourRowEventClick}  // 四排模式事件点击
             selectedEvent={selectedEvent}
             onEventSelect={setSelectedEvent}
             borderColor={borderColor}