# “我的”账户充值弹窗落地设计

日期：`2026-04-25`

## 1. 范围

本轮在“我的”页面的“会员充值”入口落地账户充值弹窗，包含两个页签：

1. `光点充值`
2. `会员卡充值`

前端只负责展示与发起购买，套餐、价格、赠送规则、会员权益、生效时间、钱包余额与交易流水统一由 `server-rs` 后端返回。当前没有真实支付网关，本轮采用服务端模拟支付成功：创建订单后立即写入余额或会员状态，并返回最新账户中心快照。后续接入真实支付时，只替换订单支付状态推进，不改前端套餐与账户快照 contract。

## 2. 产品规则

### 2.1 光点充值套餐

| productId | 光点 | 金额分 | 徽标 | 说明 |
| --- | ---: | ---: | --- | --- |
| `points_60` | 60 | 600 | 首充双倍 | 首充送60光点 |
| `points_180` | 180 | 1800 | 首充双倍 | 首充送180光点 |
| `points_300` | 300 | 3000 | 首充双倍 | 首充送300光点 |
| `points_680` | 680 | 6800 | 首充双倍 | 首充送680光点 |
| `points_1280` | 1280 | 12800 | 首充双倍 | 首充送1280光点 |
| `points_3280` | 3280 | 32800 | 首充双倍 | 首充送3280光点 |

光点充值固定为 `¥6 / ¥18 / ¥30 / ¥68 / ¥128 / ¥328` 六个档位。全部档位参与首充双倍：用户历史上没有 `points_recharge` 流水时，本次购买到账光点为基础光点与等额赠送光点之和；已有充值流水后只到账基础光点。实际到账光点写入交易流水，余额以 SpacetimeDB projection 为准。

### 2.2 会员卡套餐

| productId | 类型 | 天数 | 金额分 | 权益 |
| --- | --- | ---: | ---: | --- |
| `member_month` | 月卡 | 30 | 2800 | 免光点回合数100，每日签到加成0% |
| `member_season` | 季卡 | 90 | 7800 | 免光点回合数100，每日签到加成100% |
| `member_year` | 年卡 | 365 | 24800 | 免光点回合数100，每日签到加成210% |

购买会员时，如果当前会员仍有效，则从当前到期时间顺延；如果已过期或从未购买，则从当前服务端时间开始计算。状态只区分 `普通` 与已生效会员，前端不自行推断。

## 3. 后端接口

### 3.1 `GET /api/profile/recharge-center`

需要 Bearer JWT。返回：

1. 当前光点余额、会员状态、到期时间
2. 光点套餐与会员套餐
3. 会员权益表
4. 最近订单摘要

兼容路径：`GET /api/runtime/profile/recharge-center`

### 3.2 `POST /api/profile/recharge/orders`

需要 Bearer JWT。请求：

```json
{
  "productId": "points_300",
  "paymentChannel": "mock"
}
```

行为：

1. 校验 `productId`
2. 后端创建已支付订单
3. 光点套餐写入钱包余额与流水
4. 会员套餐写入会员状态
5. 返回最新账户中心快照与订单摘要

兼容路径：`POST /api/runtime/profile/recharge/orders`

## 4. 前端交互

1. “我的”页会员充值按钮打开独立弹窗，不在当前面板下方展开。
2. 弹窗顶部标题为 `账户充值`，右上角关闭。
3. 默认打开 `光点充值`，可切换到 `会员卡充值`。
4. 点击套餐后调用下单接口，按钮进入处理中状态，成功后刷新 `profileDashboard`。
5. 弹窗内不写大段说明文案，只保留必要金额、光点、会员权益和状态反馈。
6. 会员卡充值区以套餐卡片优先展示周期、价格和处理状态；移动端单列，桌面端三列，权益表允许横向滚动，避免小屏挤压。

## 5. 验收

1. 普通用户打开弹窗能看到光点与会员套餐。
2. 光点购买后余额增加，流水来源为 `points_recharge`。
3. 首充赠送只在首次光点充值时生效。
4. 会员购买后会员状态与到期时间立即更新。
5. 移动端弹窗单列可滚动，桌面端接近参考图卡片网格。