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

## 概述

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

## 实现细节

### 1. API调用

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

```javascript
// 在 /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. 引入萌芽币管理器脚本：
```html
<script src="../coin-manager.js"></script>
```

2. 在API调用前添加萌芽币检查：
```javascript
// 检查萌芽币余额是否足够
if (window.coinManager && !window.coinManager.checkBeforeApiCall()) {
  return;
}
```

3. 确保所有AI API调用都添加JWT Token认证：
```javascript
const token = localStorage.getItem('token');
// 添加到请求头
headers: {
  'Authorization': `Bearer ${token}`
}
```

4. 在API调用成功后刷新萌芽币信息：
```javascript
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萌芽币，无论成功与否
- 用户可以通过每日签到获取萌芽币