继续完善

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

@@ -0,0 +1,100 @@
+# 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萌芽币，无论成功与否
+- 用户可以通过每日签到获取萌芽币