Top
全局顶部状态栏功能说明,覆盖会员汇总、余额展示、提现入口、消息入口和 Profile。
Top 位于代理商后台内容区最上方,用于展示当前账号的关键经营数据和高频操作入口。除 Login 外,所有登录后业务页面都需要使用该全局模块。
页面摘要
| 项目 | 说明 |
|---|---|
| 页面性质 | 登录后全局顶部状态栏,除 Login 外跨业务页面复用 |
| 核心动作 | 展示会员汇总、Coupon Balance、Withdrawal Balance、Withdrawal Request、消息入口和 Profile |
| 数据范围 | 当前账号权限范围内的会员、余额、提现入口、消息和账号信息 |
| 当前状态 | 展示规则、入口行为和异常处理已定义;暂无独立开放问题区 |
需求状态
| 状态 | 内容 |
|---|---|
Confirmed | Top 是登录后全局模块;页面内部筛选、分页和弹窗不能改变 Top 的数据口径。 |
Inferred from Figma | 会员汇总和余额以顶部卡片形式展示,消息入口未读数只代表未读消息数量。 |
Open Question | 当前未发现阻塞实现的独立开放问题;如新增待办、审批或异常提醒,需要在对应模块单独定义口径。 |
1. Figma 原型
页面状态 Figma 截图
Global / Top

Top 横向展示在线/充值会员、优惠券余额、提现余额、提现入口、消息入口和 Profile。
2. 概览
Top 是登录后页面的全局状态栏,不属于某个单一数据表或单一业务页面。用户进入任一登录后业务页面时,都需要立即看到当前账号权限范围内的会员状态、资金状态、消息状态和账号操作入口。
该模块的核心价值是把高频判断和高频入口固定在页面顶部:运营可以快速判断会员活跃与资金状态,财务可以直接进入提现申请,客服和管理员可以看到消息提醒并进入账号菜单。
3. 页面组成
页面组成只描述 UI 结构。具体数据口径、点击行为、业务规则和异常处理统一写在对应功能说明中。
| 元素 | UI 表现 | 对应功能说明 |
|---|---|---|
| Online Member / Deposit Member | 浅蓝色圆角卡片,左侧会员图标,右侧显示 247 / 123 形式的数值 | 会员汇总 |
| Coupon Balance | 浅蓝色圆角卡片,左侧票券图标,金额使用紫色强调 | 优惠券余额 |
| Withdrawal Balance | 浅蓝色圆角卡片,左侧钱包图标,金额使用紫色强调 | 提现余额 |
| Withdrawal Request | 紫色主按钮,位于提现余额卡片右侧 | 提现申请入口 |
| 消息入口 | 紫色信封按钮,右上角显示红色未读角标 | 消息入口 |
| Profile | 用户图标、Profile 文案、下拉箭头 | 账号菜单 |
4. 功能说明
4.1 Online Member / Deposit Member
Online Member / Deposit Member 展示当前账号权限范围内的会员活跃与充值覆盖情况,格式为 在线会员数 / 总充值会员数。
| 项目 | 说明 |
|---|---|
| 在线会员数 | 当前统计时点处于在线状态的会员数量。只统计当前账号有权限查看的会员。 |
| 总充值会员数 | 当前账号权限范围内发生过充值行为的会员总数,不要求会员当前在线。只要会员曾经完成有效充值,就计入该数值。 |
| 展示格式 | 使用斜杠分隔两个数字,例如 247 / 123。左侧为在线会员数,右侧为总充值会员数。 |
| 刷新规则 | 页面首次进入和刷新时重新获取;局部刷新失败时保留上一次成功数据,并给出重试提示。 |
| 权限规则 | 不展示无权限品牌、无权限下级代理或无权限会员的数据。 |
该数据用于快速判断当前业务活跃度和充值会员覆盖规模。两个数字必须使用同一统计时点,不能出现在线数和充值数来自不同刷新批次的情况。
4.2 Coupon Balance
Coupon Balance 展示当前账号可使用的优惠券余额,用于判断是否可以继续执行发券、活动补贴或运营激励动作。
| 项目 | 说明 |
|---|---|
| 数据范围 | 当前账号权限范围内可使用的优惠券余额。 |
| 金额展示 | 使用千分位和系统约定的小数规则展示;示例图中展示为 500,000。 |
| 关联页面 | 发券、优惠券创建和使用记录在 Coupon Mgmt. 中查看。 |
| 不足处理 | 当余额不足以完成发券动作时,相关发券功能需要明确提示余额不足,不能静默失败。 |
| 加载失败 | 不展示模拟金额;保留占位状态,并提示刷新或稍后重试。 |
该余额必须与优惠券发放功能使用的可用余额保持一致。任何扣减、冻结、回滚或补发动作完成后,Top 中的余额需要同步更新。
4.3 Withdrawal Balance
Withdrawal Balance 展示当前账号可提现余额,用于让财务或代理商管理员快速判断当前可发起提现的金额。
| 项目 | 说明 |
|---|---|
| 数据范围 | 当前账号权限范围内可提现余额。 |
| 金额展示 | 使用千分位展示,金额颜色使用紫色强调。 |
| 业务口径 | 必须与财务提现口径一致,不能与实际可提现金额产生差异。 |
| 状态限制 | 账号冻结、提现权限关闭、余额不足或风控限制时,需要影响提现入口的可用状态。 |
| 加载失败 | 不展示模拟金额;保留占位状态,并提示刷新或稍后重试。 |
如果提现余额与提现申请弹窗的可提现金额不一致,以财务系统最终计算结果为准,同时需要记录并排查 Top 数据同步问题。
4.4 Withdrawal Request
Withdrawal Request 是提现申请入口,点击后打开 Withdrawal Request 提现弹窗。
| 项目 | 说明 |
|---|---|
| UI 状态 | 默认展示为紫色主按钮,位于提现余额区域右侧。 |
| 点击行为 | 点击后打开 Withdrawal Request 提现弹窗。打开前不清空当前页面筛选条件,关闭弹窗后应尽量保留原页面状态。 |
| 可用条件 | 当前账号拥有提现申请权限、账号状态正常、提现功能未维护、提现余额满足最低提现要求。 |
| 不可用处理 | 无权限时隐藏或禁用入口;账号或余额不满足条件时需要给出不可用原因。 |
| 异常处理 | 弹窗打开失败时保留当前页面,并提示用户重试。 |
该入口是全局高频操作入口,不依赖当前页面处于 Data Report、Customer Mgmt. 或其他业务页面。只要用户已经登录且具备提现权限,就应该能在 Top 中进入提现申请流程。
4.5 消息入口
消息入口用于展示当前账号未读消息状态,并进入 Notification 页面查看通知详情。
| 项目 | 说明 |
|---|---|
| UI 状态 | 紫色信封按钮,右上角显示红色未读角标。 |
| 未读角标 | 未读数大于 0 时显示;未读数为 0 时隐藏。超过展示上限时使用产品约定的上限格式。 |
| 点击行为 | 点击后进入 Notification 页面或打开消息列表。 |
| 数据范围 | 只展示当前账号可见的系统通知、运营消息、财务提醒和权限相关提醒。 |
| 加载失败 | 不显示错误角标;消息入口仍然可点击,用户可以进入通知页查看实际状态。 |
未读数只能代表“未读消息数量”,不能混用待处理任务、审批数量或系统异常数量。如果后续需要展示其他提醒类型,需要在 Notification 文档中定义单独口径。
4.6 Profile
Profile 是账号操作入口,点击后展开账号菜单,或进入 Profile 模块查看当前账号资料和账号安全页面。
| 项目 | 说明 |
|---|---|
| UI 状态 | 用户图标、Profile 文案和下拉箭头横向排列。 |
| 点击行为 | 点击后展开账号菜单;菜单项可包含 Profile Information、Change Password、语言偏好、退出登录等。 |
| 页面跳转 | 个人资料入口默认跳转到 Profile Information;账号安全入口跳转到 Change Password。 |
| 权限规则 | 只展示当前账号有权限访问的账号操作。 |
| 加载失败 | 展示基础账号入口和退出登录;加载失败的菜单项不展示。 |
Profile 菜单需要保持轻量,不承载复杂业务操作。涉及财务、优惠券、权限配置等业务动作时,应跳转到对应页面,而不是在 Profile 菜单内完成。
5. 业务规则
- Top 的所有数据必须限制在当前登录账号权限范围内,不展示无权限品牌、下级代理或会员数据。
- Top 中所有数值都应来自正式业务口径,不能使用页面缓存、示例数据或前端估算值覆盖真实数据。
Online Member / Deposit Member的两个数字必须使用同一统计时点。- 优惠券余额必须与 Coupon Mgmt. 的发券可用余额一致。
- 提现余额必须与 Withdrawal Request 的可提现金额口径一致。
- 消息未读数必须与 Notification 的未读状态一致。
- Profile 菜单只展示当前账号可访问的账号操作,不能暴露无权限入口。
- 除非用户主动刷新页面或切换账号,Top 不应该频繁闪烁、清空或显示不稳定状态。
6. 异常与空态
| 场景 | 处理 |
|---|---|
| 会员数加载失败 | 保留上一次成功数据;卡片内或页面顶部给出重试提示。 |
| 优惠券余额加载失败 | 不展示模拟金额;保留占位并提示刷新。 |
| 提现余额加载失败 | 不展示模拟金额;提现入口按不可确认状态处理,避免误导用户提交申请。 |
| 无提现权限 | 隐藏或禁用 Withdrawal Request,并在可见场景提供原因。 |
| 未读消息接口失败 | 不显示错误角标,消息入口仍可点击进入通知页。 |
| Profile 菜单加载失败 | 展示基础账号入口和退出登录;失败项不展示。 |
| 响应式宽度不足 | 按响应式规则压缩间距或换行,不能遮挡按钮、角标和金额。 |