feat: 优化社区动态新闻分页和预加载策略

## 主要改动

### 1. 修复分页显示问题
- 修复总页数计算错误（使用服务端 total 而非缓存 cachedCount）
- 修复目标页数据检查逻辑（排除 null 占位符）

### 2. 实现请求拆分策略 (Critical Fix)
- 将合并请求（per_page: 15）拆分为单页循环请求（per_page: 5）
- 解决后端无法处理动态 per_page 导致返回空数据的问题
- 后台预加载和显示 loading 两个场景均已拆分

### 3. 优化智能预加载逻辑
- 连续翻页（上/下页）：预加载前后各 2 页
- 跳转翻页（点页码）：只加载当前页
- 目标页已缓存时立即切换，后台静默预加载其他页

### 4. Redux 状态管理优化
- 添加 pageSize 参数用于正确计算索引
- 重写 reducer 插入逻辑（append/replace/jump 三种模式）
- 只在 append 模式去重，避免替换和跳页时数据丢失
- 修复 selector 计算有效数量（排除 null）

### 5. 修复 React Hook 规则违规
- 将所有 useColorModeValue 移至组件顶层
- 添加缺失的 HStack 导入

## 影响范围
- 仅影响社区页面动态新闻分页功能
- 无后端变更，向后兼容

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/store/slices/communityDataSlice.js

@@ -170,6 +170,7 @@ export const fetchDynamicNews = createAsyncThunk(
   async ({
     page = 1,
     per_page = 5,
+    pageSize = 5,  // 每页实际显示的数据量（用于计算索引）
     clearCache = false,
     prependMode = false
   } = {}, { rejectWithValue }) => {
@@ -196,6 +197,9 @@ export const fetchDynamicNews = createAsyncThunk(
         return {
           events: response.data.events,
           total: response.data.pagination?.total || 0,
+          page,
+          per_page,
+          pageSize,  // 返回 pageSize 用于索引计算
           clearCache,
           prependMode
         };
@@ -205,6 +209,9 @@ export const fetchDynamicNews = createAsyncThunk(
       return {
         events: [],
         total: 0,
+        page,
+        per_page,
+        pageSize,  // 返回 pageSize 用于索引计算
         clearCache,
         prependMode
       };
@@ -371,7 +378,7 @@ const communityDataSlice = createSlice({
         state.error.dynamicNews = null;
       })
       .addCase(fetchDynamicNews.fulfilled, (state, action) => {
-        const { events, total, clearCache, prependMode } = action.payload;
+        const { events, total, page, per_page, pageSize, clearCache, prependMode } = action.payload;
 
         if (clearCache) {
           // 清空缓存模式：直接替换
@@ -389,14 +396,67 @@ const communityDataSlice = createSlice({
             totalCount: state.dynamicNews.length
           });
         } else {
-          // 追加到尾部模式（默认）：去重后追加
-          const existingIds = new Set(state.dynamicNews.map(e => e.id));
-          const newEvents = events.filter(e => !existingIds.has(e.id));
-          state.dynamicNews = [...state.dynamicNews, ...newEvents];
-          logger.debug('CommunityData', '追加新数据到尾部', {
-            newCount: newEvents.length,
-            totalCount: state.dynamicNews.length
-          });
+          // 智能插入模式：根据页码计算正确的插入位置
+          // 使用 pageSize（每页显示量）而不是 per_page（请求数量）
+          const startIndex = (page - 1) * (pageSize || per_page);
+
+          // 判断插入模式
+          const isAppend = startIndex === state.dynamicNews.length;
+          const isReplace = startIndex < state.dynamicNews.length;
+          const isJump = startIndex > state.dynamicNews.length;
+
+          // 只在 append 模式下去重（避免定时刷新重复）
+          // 替换和跳页模式直接使用原始数据（避免因去重导致数据丢失）
+          if (isAppend) {
+            // Append 模式：连续加载，需要去重
+            const existingIds = new Set(
+              state.dynamicNews
+                .filter(e => e !== null)
+                .map(e => e.id)
+            );
+            const newEvents = events.filter(e => !existingIds.has(e.id));
+            state.dynamicNews = [...state.dynamicNews, ...newEvents];
+
+            logger.debug('CommunityData', '连续追加数据（去重）', {
+              page,
+              startIndex,
+              endIndex: startIndex + newEvents.length,
+              originalEventsCount: events.length,
+              newEventsCount: newEvents.length,
+              filteredCount: events.length - newEvents.length,
+              totalCount: state.dynamicNews.length
+            });
+          } else if (isReplace) {
+            // 替换模式：直接覆盖，不去重
+            const endIndex = startIndex + events.length;
+            const before = state.dynamicNews.slice(0, startIndex);
+            const after = state.dynamicNews.slice(endIndex);
+            state.dynamicNews = [...before, ...events, ...after];
+
+            logger.debug('CommunityData', '替换重叠数据（不去重）', {
+              page,
+              startIndex,
+              endIndex,
+              eventsCount: events.length,
+              beforeLength: before.length,
+              afterLength: after.length,
+              totalCount: state.dynamicNews.length
+            });
+          } else {
+            // 跳页模式：填充间隔，不去重
+            const gap = startIndex - state.dynamicNews.length;
+            const fillers = Array(gap).fill(null);
+            state.dynamicNews = [...state.dynamicNews, ...fillers, ...events];
+
+            logger.debug('CommunityData', '跳页加载，填充间隔（不去重）', {
+              page,
+              startIndex,
+              endIndex: startIndex + events.length,
+              gap,
+              eventsCount: events.length,
+              totalCount: state.dynamicNews.length
+            });
+          }
         }
 
         state.dynamicNewsTotal = total;
@@ -449,11 +509,11 @@ export const selectHotEventsWithLoading = (state) => ({
 });
 
 export const selectDynamicNewsWithLoading = (state) => ({
-  data: state.communityData.dynamicNews,              // 完整缓存列表
+  data: state.communityData.dynamicNews,              // 完整缓存列表（可能包含 null 占位符）
   loading: state.communityData.loading.dynamicNews,
   error: state.communityData.error.dynamicNews,
   total: state.communityData.dynamicNewsTotal,        // 服务端总数量
-  cachedCount: state.communityData.dynamicNews.length, // 已缓存数量
+  cachedCount: state.communityData.dynamicNews.filter(e => e !== null).length, // 已缓存有效数量（排除 null）
   lastUpdated: state.communityData.lastUpdated.dynamicNews
 });