101 lines
2.6 KiB
Markdown
101 lines
2.6 KiB
Markdown
# 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萌芽币，无论成功与否
|
||
- 用户可以通过每日签到获取萌芽币
|