zdl
|
3b5caf8a01
|
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>
|
2025-11-03 12:38:25 +08:00 |
|