Appearance
第八章 分页栏与消息通知
模块原型
原型操作指引
- 切换每页条数
- 点击页码按钮查看分页交互
- 观察右上角消息通知的显示效果
8.1 分页栏模块(M07)
分页栏位于数据表格底部,用于控制列表数据的分页显示。
8.1.1 布局结构
| 区域 | 位置 | 内容 |
|---|---|---|
| 信息展示区 | 左侧 | 共 N 场赛事,当前显示 M-K |
| 每页条数选择器 | 中部 | 下拉选择每页显示条数 |
| 页码按钮组 | 右侧 | 页码切换按钮 |
8.1.2 每页条数选择器
| 选项 | 说明 |
|---|---|
| 50 条/页(默认) | 日常操盘 |
| 100 条/页 | 批量操作 |
| 200 条/页 | 大屏监控 |
用户选择的每页条数保存到本地存储,下次访问时恢复。切换每页条数后自动跳转到第一页。
8.1.3 页码按钮组
| 总页数 | 显示方式 |
|---|---|
| ≤ 7 页 | 显示所有页码 |
| > 7 页 | 首页 + 当前页前后各 1 页 + 末页,中间用省略号 |
按钮状态:当前页高亮显示;首页时「上一页」禁用;末页时「下一页」禁用。
8.1.4 分页与其他模块的联动
| 触发操作 | 分页行为 |
|---|---|
| 切换筛选条件或 Tab | 重置到第 1 页 |
| 执行操作(上架、下架、批量上架、批量下架) | 保持当前页,刷新数据 |
8.2 消息通知模块(M08)
消息通知(Toast)用于向用户反馈操作结果。
8.2.1 位置
页面右上角固定位置,距顶部 70px,距右侧 20px。同时最多显示 3 条,新通知从上方推入。
8.2.2 通知类型
| 类型 | 边框颜色 | 图标 | 使用场景 |
|---|---|---|---|
| 成功 | 绿色 | ✓ | 操作成功 |
| 错误 | 红色 | ✕ | 操作失败、系统错误 |
| 警告 | 橙色 | ⚠ | 部分成功、风控告警 |
| 信息 | 蓝色 | ℹ | 数据更新通知 |
8.2.3 通知内容与消失时间
每条通知包含:图标、标题、描述(可选)、关闭按钮。
| 类型 | 自动消失时间 |
|---|---|
| 成功、信息 | 3 秒 |
| 警告 | 5 秒 |
| 错误 | 10 秒或手动关盘 |
8.2.4 去重规则
5 秒内相同类型 + 相同标题的通知合并显示,更新计数。例如批量上架 5 场成功,显示「上架成功 ×5」或「已成功上架 5 场赛事」。
8.2.5 上架/下架与风控管理限额衔接规则
上架操作时需要校验风控管理中的联赛限额配置。具体校验规则详见第11章11.1.5节:
| 校验项 | 数据来源 | 失败提示 | 处理方式 |
|---|---|---|---|
| 联赛限额 | 风控管理→联赛限额面板 | 该联赛已达到最大货量限额 | 阻止上架 |
| 玩法分组限额 | 风控管理→联赛限额→玩法分组 | 该玩法已达到最大货量限额 | 阻止上架 |
| 单注限额 | 风控管理→联赛限额→单注min/max | 单注金额超过限额范围 | 警告提示,允许操盘手确认后继续 |
| 用户限额 | 风控管理→用户限额面板 | 该用户在该联赛单玩法已达最大货量 | 阻止上架 |
下架操作不涉及风控管理限额校验,操盘手可随时下架。
8.3 实时更新提示条
8.3.1 设计目的
当用户正在进行以下操作时,系统暂停自动刷新表格,改为显示提示条:
| 暂停自动刷新的场景 |
|---|
| 用户正在编辑弹窗(如上架确认中) |
| 用户已勾选赛事(批量操作准备中) |
8.3.2 显示位置与内容
位于筛选区与数据表格之间,全宽横条。
| 元素 | 内容 |
|---|---|
| 文案 | 有 N 条新数据更新 |
| 按钮 | 「立即刷新」 |
8.3.3 交互行为
| 操作 | 行为 |
|---|---|
| 点击「立即刷新」 | 刷新列表数据,提示条消失,选中状态清空 |
| 用户完成操作(如关闭弹窗) | 自动刷新数据,提示条消失 |
| 用户切换筛选条件或 Tab | 提示条消失,重新加载数据 |
修订记录
| 版本 | 日期 | 修订内容 |
|---|---|---|
| v1.0 | 2026-01-15 | 初稿 |
| v1.1 | 2026-01-20 | 【审计修正】1) 修复原型区域格式问题,补充原型操作指引;2) 8.1.4节操作列表与D1决策保持一致(明确为上架、下架、批量上架、批量下架) |