原型图 | React + Tailwind
向用户展示钱包余额和余额变动明细。用户多次购买套餐等同于充值，所有金额汇入同一个余额池（FIFO消耗）。购买历史在订单列表查看，本页只关注余额和变动记录。支持查看购买获得、管理员赠送、取水消耗、管理员扣除、退款清零五种变动类型。提供使用须知弹窗，展示购买/使用/退款规则。
| 模块 | 说明 |
|---|---|
| 余额卡片 | 总可用余额（蓝色大字）+ 购买余额/赠送余额拆分 + 已消费进度条 |
| 底部按钮行 | 「套餐订单」按钮（跳转c02套餐订单Tab）+ 「使用须知」按钮（弹窗），同行并列，仅有余额时展示 |
| 余额明细 | 变动记录时间线，5种变动类型标签，时间倒序，每条含类型/金额/余额/时间/来源 |
| 无余额状态 | 展示"暂无套餐"+ 购买套餐引导按钮 |
| 场景 | 展示内容 |
|---|---|
| 场景① 有余额 | 余额卡片（总余额+拆分+进度条）+ 套餐订单按钮 + 使用须知按钮 + 余额明细列表 |
| 场景② 无余额 | "暂无套餐"空状态 + 购买套餐引导按钮 |
C11 套餐详情 ├─ 来源：C00 首页套餐卡片 / C12 我的套餐余额卡片 ├─ 返回箭头 → C00 首页 ├─ 套餐订单按钮 → C02 订单列表（套餐订单Tab） └─ 购买套餐按钮（场景②无余额时）→ C05 套餐购买