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