feat: 实现实时要闻服务端分页功能

功能新增：
- 实时要闻组件支持服务端分页，每次切换页码重新请求数据
- 分页控制器组件，支持数字页码、上下翻页、快速跳转
- Mock 数据量从 100 条增加到 200 条，支持分页测试

技术实现：

1. Redux 状态管理（communityDataSlice.js）
   - fetchDynamicNews 接收分页参数 { page, per_page }
   - 返回数据结构调整为 { events, pagination }
   - initialState 新增 dynamicNewsPagination 字段
   - Reducer 分别存储 events 和 pagination 信息
   - Selector 返回完整的 pagination 数据

2. 组件层（index.js → DynamicNewsCard → EventScrollList）
   - Community/index.js: 获取并传递 pagination 信息
   - DynamicNewsCard.js: 管理分页状态，触发服务端请求
   - EventScrollList.js: 接收服务端 totalPages，渲染当前页数据
   - 页码切换时自动选中第一个事件

3. 分页控制器（PaginationControl.js）
   - 精简版设计：移除首页/末页按钮
   - 上一页/下一页按钮，边界状态自动禁用
   - 智能页码列表（最多5个，使用省略号）
   - 输入框跳转功能，支持回车键
   - Toast 提示非法输入
   - 全部使用 xs 尺寸，紧凑布局

4. Mock 数据（events.js）
   - 总事件数从 100 增加到 200 条
   - 支持服务端分页测试（40 页 × 5 条/页）

分页流程：
1. 初始加载：请求 page=1, per_page=5
2. 切换页码：dispatch(fetchDynamicNews({ page: 2, per_page: 5 }))
3. 后端返回：{ events: [5条], pagination: { page, total, total_pages } }
4. 前端更新：显示新页面数据，更新分页控制器状态

UI 优化：
- 紧凑的分页控制器布局
- 移除冗余元素（首页/末页/总页数提示）
- xs 尺寸按钮，减少视觉负担
- 保留核心功能（翻页、页码、跳转）

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

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

src/views/Community/components/DynamicNewsCard.js

@@ -2,6 +2,7 @@
 // 横向滚动事件卡片组件（实时要闻·动态追踪）
 
 import React, { forwardRef, useState, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import {
   Card,
   CardHeader,
@@ -20,11 +21,13 @@ import {
 import { TimeIcon } from '@chakra-ui/icons';
 import EventScrollList from './DynamicNewsCard/EventScrollList';
 import DynamicNewsDetailPanel from './DynamicNewsDetail';
+import { fetchDynamicNews } from '../../../store/slices/communityDataSlice';
 
 /**
  * 实时要闻·动态追踪 - 横向滚动卡片组件
  * @param {Array} events - 事件列表
  * @param {boolean} loading - 加载状态
+ * @param {Object} pagination - 分页信息 { page, per_page, total, total_pages }
  * @param {Date} lastUpdateTime - 最后更新时间
  * @param {Function} onEventClick - 事件点击回调
  * @param {Function} onViewDetail - 查看详情回调
@@ -33,15 +36,21 @@ import DynamicNewsDetailPanel from './DynamicNewsDetail';
 const DynamicNewsCard = forwardRef(({
   events,
   loading,
+  pagination = {},
   lastUpdateTime,
   onEventClick,
   onViewDetail,
   ...rest
 }, ref) => {
+  const dispatch = useDispatch();
   const cardBg = useColorModeValue('white', 'gray.800');
   const borderColor = useColorModeValue('gray.200', 'gray.700');
   const [selectedEvent, setSelectedEvent] = useState(null);
 
+  const pageSize = 5; // 每页显示5个事件
+  const currentPage = pagination.page || 1;
+  const totalPages = pagination.total_pages || 1;
+
   // 默认选中第一个事件
   useEffect(() => {
     if (events && events.length > 0 && !selectedEvent) {
@@ -49,6 +58,15 @@ const DynamicNewsCard = forwardRef(({
     }
   }, [events, selectedEvent]);
 
+  // 页码改变时，触发服务端分页请求
+  const handlePageChange = (newPage) => {
+    // 发起 Redux action 获取新页面数据
+    dispatch(fetchDynamicNews({ page: newPage, per_page: pageSize }));
+
+    // 重置选中事件（等新数据加载后自动选中第一个）
+    setSelectedEvent(null);
+  };
+
   return (
     <Card ref={ref} {...rest} bg={cardBg} borderColor={borderColor} mb={4}>
       {/* 标题部分 */}
@@ -101,6 +119,9 @@ const DynamicNewsCard = forwardRef(({
             selectedEvent={selectedEvent}
             onEventSelect={setSelectedEvent}
             borderColor={borderColor}
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={handlePageChange}
           />
         )}