InfoGenie/InfoGenie-frontend/前端萌芽币消费系统集成文档.md

InfoGenie前端萌芽币消费系统集成文档

概述

本文档描述了InfoGenie前端如何与后端的萌芽币消费系统进行集成。后端已实现AI模型应用每次调用消耗100萌芽币的功能，前端需要相应地支持显示萌芽币余额、使用记录，并在API调用前检查余额是否充足。

实现细节

1. API调用

新增了获取萌芽币余额和使用历史的API调用：

// 在 /src/utils/api.js 中添加
export const aiModelAPI = {
  // 获取萌芽币余额和使用历史
  getCoins: () => api.get('/api/aimodelapp/coins'),
};

2. 萌芽币管理器

创建了统一的萌芽币管理工具 /public/aimodelapp/coin-manager.js，提供以下功能：

• 获取和显示用户萌芽币余额
• 显示最近的AI使用记录
• 在调用AI API前检查萌芽币余额是否充足
• 在API调用成功后更新萌芽币信息

3. 前端集成

所有AI模型应用页面都需要进行以下修改：

1. 引入萌芽币管理器脚本：

<script src="../coin-manager.js"></script>

2. 在API调用前添加萌芽币检查：

// 检查萌芽币余额是否足够
if (window.coinManager && !window.coinManager.checkBeforeApiCall()) {
  return;
}

3. 确保所有AI API调用都添加JWT Token认证：

const token = localStorage.getItem('token');
// 添加到请求头
headers: {
  'Authorization': `Bearer ${token}`
}

4. 在API调用成功后刷新萌芽币信息：

if (window.coinManager) {
  window.coinManager.loadCoinsInfo();
}

4. 萌芽币提示显示

萌芽币管理器会在页面右上角显示一个悬浮窗口，包含：

• 当前萌芽币余额
• 每次调用消耗的萌芽币数量
• 最近的使用记录
• 当余额不足时的警告提示

5. 用户体验优化

• 在API调用失败时，会检查是否是因为萌芽币不足导致的，并给出相应提示
• 引导用户通过每日签到等方式获取更多萌芽币
• 实时显示萌芽币余额变化

使用示例

以AI变量命名助手为例，已完成集成：

1. 引入coin-manager.js
2. 修改API调用函数添加Token认证
3. 添加萌芽币检查逻辑
4. 添加错误处理，区分普通错误和萌芽币不足错误

后续工作

为所有AI模型应用页面添加相同的萌芽币集成，包括：

• AI写诗小助手
• AI姓名评测
• AI翻译助手
• AI文章转文言文
• AI生成表情包
• AI生成Linux命令

注意事项

• 萌芽币消费系统只对AI模型应用有效，其他功能不消耗萌芽币
• 每次调用AI API都会消耗100萌芽币，无论成功与否
• 用户可以通过每日签到获取萌芽币