Skip to main content

SaasKit 前端充值与用量核心功能说明

本说明文档覆盖当前 SaasKit 前端主要功能：充值（Buy/Billing）、用量统计（Usage）、Mock 支付流程。

1. 充值/订单功能（Buy & Billing 页面）​

  • 支持在线充值（支付宝/微信），金额可选预设或自定义。
  • 充值后自动生成订单，订单状态实时更新。
  • 订单页面支持状态筛选、分页、导出、删除（仅待支付/已取消）。
  • 充值记录与用户账户绑定，余额实时同步。
  • 充值流程支持 Mock 支付（开发环境下），支付结果自动回调。

主要入口文件：

  • frontend/frontlin/frontlin/views/client/buy/__init__.py 充值页面 UI
  • frontend/frontlin/frontlin/views/client/billing/__init__.py 订单列表 UI
  • frontend/frontlin/frontlin/api/client/buy.py 充值相关 API
  • frontend/frontlin/frontlin/api/client/billing.py 订单相关 API
  • frontend/frontlin/frontlin/callbacks/client_c/buy_c.py 充值交互逻辑
  • frontend/frontlin/frontlin/callbacks/client_c/billing_c.py 订单交互逻辑

2. 用量统计功能（Usage 页面）​

  • 实时展示账户余额、累计消耗、累计 tokens、请求数等统计信息。
  • 支持按模型统计、历史记录分页、导出。
  • 页面自动刷新：充值后或切换标签页时余额自动更新，无需手动刷新。
  • 防抖机制避免频繁刷新，提升性能和体验。

主要入口文件：

  • frontend/frontlin/frontlin/views/client/usage/__init__.py 用量统计 UI
  • frontend/frontlin/frontlin/api/client/usage.py 用量相关 API
  • frontend/frontlin/frontlin/callbacks/client_c/usage_c.py 用量交互逻辑

3. Mock 支付流程（开发/测试环境）​

  • 支持模拟支付，自动回调订单状态（成功/超时/取消）。
  • 日志详细，便于调试和追踪。
  • 生产环境请务必移除相关 Mock 支付接口和前端自动触发逻辑。

4. 常见问题与注意事项​

  • 充值金额仅用于 API 服务，充值后可在订单页面查看记录。
  • 余额、订单、用量等数据均与当前登录用户绑定，安全隔离。
  • 若无 API Key，充值会提示先创建。
  • 生产环境请集成真实支付网关，移除 Mock 支付。

5. 未来可扩展方向​

  • 支持更多支付方式（如银行卡、企业转账等）
  • 充值目标 API Key 可选
  • 充值后自动跳转/提示
  • 用量统计支持自定义时间范围、趋势图等
  • WebSocket 实时推送余额变更

如需详细开发/调试说明，请参考源码注释与实际 UI 体验。