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/EventScrollList.js

@@ -1,7 +1,7 @@
 // src/views/Community/components/DynamicNewsCard/EventScrollList.js
 // 横向滚动事件列表组件
 
-import React, { useRef, useState } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import {
   Box,
   Flex,
@@ -10,24 +10,41 @@ import {
 } from '@chakra-ui/react';
 import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
 import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard';
+import PaginationControl from './PaginationControl';
 
 /**
  * 横向滚动事件列表组件
- * @param {Array} events - 事件列表
+ * @param {Array} events - 当前页的事件列表（服务端已分页）
  * @param {Object} selectedEvent - 当前选中的事件
  * @param {Function} onEventSelect - 事件选择回调
  * @param {string} borderColor - 边框颜色
+ * @param {number} currentPage - 当前页码
+ * @param {number} totalPages - 总页数（由服务端返回）
+ * @param {Function} onPageChange - 页码改变回调
  */
 const EventScrollList = ({
   events,
   selectedEvent,
   onEventSelect,
-  borderColor
+  borderColor,
+  currentPage,
+  totalPages,
+  onPageChange
 }) => {
   const scrollContainerRef = useRef(null);
   const [showLeftArrow, setShowLeftArrow] = useState(false);
   const [showRightArrow, setShowRightArrow] = useState(true);
 
+  // 页码变化时，滚动到左侧起始位置
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTo({
+        left: 0,
+        behavior: 'smooth'
+      });
+    }
+  }, [currentPage]);
+
   // 滚动到左侧
   const scrollLeft = () => {
     if (scrollContainerRef.current) {
@@ -71,8 +88,21 @@ const EventScrollList = ({
   };
 
   return (
-    <Box position="relative">
-      {/* 左侧滚动按钮 */}
+    <Box>
+      {/* 分页控制器 - 右上角 */}
+      {totalPages > 1 && (
+        <Flex justify="flex-end" mb={3}>
+          <PaginationControl
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={onPageChange}
+          />
+        </Flex>
+      )}
+
+      {/* 横向滚动区域 */}
+      <Box position="relative">
+        {/* 左侧滚动按钮 */}
       {showLeftArrow && (
         <IconButton
           icon={<ChevronLeftIcon boxSize={6} />}
@@ -168,6 +198,7 @@ const EventScrollList = ({
           </Box>
         ))}
       </Flex>
+      </Box>
     </Box>
   );
 };