继续完善

2025-09-16 12:57:36 +08:00
parent 249e434b72
commit 17691af8d1
25 changed files with 1981 additions and 83 deletions
--- a/InfoGenie-frontend/public/aimodelapp/AI变量命名助手/index.html
+++ b/InfoGenie-frontend/public/aimodelapp/AI变量命名助手/index.html
@@ -37,6 +37,7 @@
    </div>
  </div>

+  <script src="../coin-manager.js"></script>
  <script src="env.js"></script>
  <script src="script.js"></script>
 </body>
--- a/InfoGenie-frontend/public/aimodelapp/AI变量命名助手/script.js
+++ b/InfoGenie-frontend/public/aimodelapp/AI变量命名助手/script.js
@@ -40,10 +40,18 @@ const namingConventions = {
 // 调用后端API
 async function callBackendAPI(description) {
    try {
+        // 获取JWT token
+        const token = localStorage.getItem('token');
+        
+        if (!token) {
+            throw new Error('未登录，请先登录后使用AI功能');
+        }
+        
        const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/variable-naming', {
            method: 'POST',
            headers: {
-                'Content-Type': 'application/json'
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${token}`
            },
            body: JSON.stringify({
                description: description
@@ -208,15 +216,30 @@ async function generateSuggestions() {
        return;
    }
    
+    // 检查萌芽币余额是否足够
+    if (window.coinManager && !window.coinManager.checkBeforeApiCall()) {
+        return;
+    }
+    
    showLoading(true);
    suggestionsContainer.innerHTML = '';
    
    try {
        const suggestions = await callBackendAPI(description);
        displaySuggestions(suggestions);
+        
+        // 刷新萌芽币信息
+        if (window.coinManager) {
+            window.coinManager.loadCoinsInfo();
+        }
    } catch (error) {
        console.error('生成建议失败:', error);
-        showErrorMessage(`生成失败: ${error.message}`);
+        // 检查是否是萌芽币不足导致的错误
+        if (error.message && error.message.includes('萌芽币余额不足')) {
+            showErrorMessage(`萌芽币不足: 每次使用AI功能需要消耗100萌芽币，请通过每日签到获取更多萌芽币`);
+        } else {
+            showErrorMessage(`生成失败: ${error.message}`);
+        }
    } finally {
        showLoading(false);
    }
--- a/InfoGenie-frontend/public/aimodelapp/coin-manager.js
+++ b/InfoGenie-frontend/public/aimodelapp/coin-manager.js
@@ -0,0 +1,288 @@
+/**
+ * InfoGenie 萌芽币管理工具
+ * 此模块负责管理用户AI功能的萌芽币余额和消费
+ * 为所有AI模型应用提供统一的萌芽币检查和显示功能
+ */
+
+class CoinManager {
+  constructor() {
+    // 状态变量
+    this.coins = 0;
+    this.aiCost = 100;
+    this.canUseAi = false;
+    this.username = '';
+    this.usageCount = 0;
+    this.recentUsage = [];
+    this.isLoaded = false;
+    this.isLoading = false;
+    this.error = null;
+
+    // UI元素
+    this.coinInfoContainer = null;
+    
+    // 初始化
+    this.init();
+  }
+
+  /**
+   * 初始化萌芽币管理器
+   */
+  async init() {
+    // 创建UI元素
+    this.createCoinInfoUI();
+    
+    // 加载萌芽币信息
+    await this.loadCoinsInfo();
+
+    // 监听网络状态变化
+    window.addEventListener('online', () => this.loadCoinsInfo());
+  }
+
+  /**
+   * 创建萌芽币信息UI
+   */
+  createCoinInfoUI() {
+    // 检查是否已创建
+    if (this.coinInfoContainer) {
+      return;
+    }
+
+    // 创建容器
+    this.coinInfoContainer = document.createElement('div');
+    this.coinInfoContainer.className = 'coin-info-container';
+    this.coinInfoContainer.style = `
+      position: fixed;
+      top: 10px;
+      right: 10px;
+      background: rgba(255, 255, 255, 0.95);
+      border-radius: 8px;
+      padding: 12px;
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      z-index: 9999;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      max-width: 300px;
+      transition: all 0.3s ease;
+      border: 1px solid rgba(74, 222, 128, 0.4);
+    `;
+
+    // 更新UI内容
+    this.updateCoinInfoUI();
+
+    // 添加到页面
+    document.body.appendChild(this.coinInfoContainer);
+  }
+
+  /**
+   * 更新萌芽币信息UI
+   */
+  updateCoinInfoUI() {
+    if (!this.coinInfoContainer) {
+      return;
+    }
+
+    let content = '';
+
+    if (this.isLoading) {
+      content = '<div style="text-align: center; padding: 10px;">加载中...</div>';
+    } else if (this.error) {
+      content = `
+        <div style="color: #d32f2f; text-align: center; padding: 10px;">
+          <div style="font-weight: bold; margin-bottom: 5px;">加载失败</div>
+          <div style="font-size: 12px;">${this.error}</div>
+          <button 
+            onclick="coinManager.loadCoinsInfo()" 
+            style="
+              background: #4ade80;
+              color: white;
+              border: none;
+              padding: 5px 10px;
+              border-radius: 4px;
+              margin-top: 8px;
+              cursor: pointer;
+            "
+          >
+            重试
+          </button>
+        </div>
+      `;
+    } else if (!this.isLoaded) {
+      content = '<div style="text-align: center; padding: 10px;">正在检查萌芽币余额...</div>';
+    } else {
+      const usageHistory = this.recentUsage.length > 0 
+        ? `
+          <div style="margin-top: 8px; border-top: 1px solid #eee; padding-top: 8px;">
+            <div style="font-size: 12px; color: #666; margin-bottom: 5px;">最近使用记录:</div>
+            ${this.recentUsage.map(usage => `
+              <div style="font-size: 11px; color: #555; margin: 3px 0;">
+                ${this.formatApiType(usage.api_type)} (-${usage.cost}币)
+                <span style="color: #999; float: right;">${this.formatDate(usage.timestamp)}</span>
+              </div>
+            `).join('')}
+          </div>
+        `
+        : '';
+      
+      content = `
+        <div style="display: flex; align-items: center; justify-content: space-between;">
+          <div style="font-weight: bold; color: #333;">${this.username || '用户'}的萌芽币</div>
+          <div style="
+            background: ${this.canUseAi ? '#4ade80' : '#ef4444'};
+            color: white;
+            font-size: 11px;
+            padding: 2px 6px;
+            border-radius: 10px;
+          ">
+            ${this.canUseAi ? '可使用' : '币不足'}
+          </div>
+        </div>
+        
+        <div style="margin: 10px 0; display: flex; align-items: center; justify-content: center;">
+          <div style="
+            font-size: 28px;
+            font-weight: bold;
+            color: ${this.canUseAi ? '#16a34a' : '#dc2626'};
+          ">
+            ${this.coins}
+          </div>
+          <div style="margin-left: 5px; font-size: 12px; color: #666;">萌芽币</div>
+        </div>
+        
+        <div style="font-size: 12px; color: #666; text-align: center;">
+          AI功能每次使用消耗 <b>${this.aiCost}</b> 萌芽币
+        </div>
+        
+        ${usageHistory}
+      `;
+    }
+
+    this.coinInfoContainer.innerHTML = content;
+  }
+
+  /**
+   * 加载萌芽币信息
+   */
+  async loadCoinsInfo() {
+    try {
+      this.isLoading = true;
+      this.error = null;
+      this.updateCoinInfoUI();
+      
+      // 获取JWT token
+      const token = localStorage.getItem('token');
+      
+      if (!token) {
+        this.error = '未登录，无法获取萌芽币信息';
+        this.isLoading = false;
+        this.updateCoinInfoUI();
+        return;
+      }
+      
+      // 调用API
+      const response = await fetch('/api/aimodelapp/coins', {
+        method: 'GET',
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+      
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || '获取萌芽币信息失败');
+      }
+      
+      const data = await response.json();
+      
+      if (data.success) {
+        // 更新状态
+        this.coins = data.data.coins;
+        this.aiCost = data.data.ai_cost;
+        this.canUseAi = data.data.can_use_ai;
+        this.username = data.data.username;
+        this.usageCount = data.data.usage_count;
+        this.recentUsage = data.data.recent_usage || [];
+        this.isLoaded = true;
+      } else {
+        throw new Error(data.message || '获取萌芽币信息失败');
+      }
+    } catch (error) {
+      console.error('加载萌芽币信息失败:', error);
+      this.error = error.message || '获取萌芽币信息失败';
+    } finally {
+      this.isLoading = false;
+      this.updateCoinInfoUI();
+    }
+  }
+
+  /**
+   * 格式化API类型
+   */
+  formatApiType(apiType) {
+    const typeMap = {
+      'chat': 'AI聊天',
+      'name-analysis': '姓名评测',
+      'variable-naming': '变量命名',
+      'poetry': 'AI写诗',
+      'translation': 'AI翻译',
+      'classical_conversion': '文言文转换',
+      'expression-maker': '表情制作',
+      'linux-command': 'Linux命令'
+    };
+    
+    return typeMap[apiType] || apiType;
+  }
+
+  /**
+   * 格式化日期
+   */
+  formatDate(isoString) {
+    try {
+      const date = new Date(isoString);
+      return `${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`;
+    } catch (e) {
+      return isoString;
+    }
+  }
+
+  /**
+   * 检查是否有足够的萌芽币
+   */
+  hasEnoughCoins() {
+    return this.canUseAi;
+  }
+
+  /**
+   * 显示萌芽币不足提示
+   */
+  showInsufficientCoinsMessage() {
+    alert(`萌芽币余额不足！\n当前余额：${this.coins}，需要：${this.aiCost}\n请通过每日签到等方式获取更多萌芽币。`);
+  }
+
+  /**
+   * 在API调用前检查萌芽币
+   * @returns {boolean} 是否有足够的萌芽币
+   */
+  checkBeforeApiCall() {
+    // 强制刷新萌芽币状态
+    this.loadCoinsInfo().then(() => {
+      // 检查余额
+      if (!this.hasEnoughCoins()) {
+        this.showInsufficientCoinsMessage();
+        return false;
+      }
+      return true;
+    });
+    
+    // 使用当前缓存的状态进行快速检查
+    if (!this.hasEnoughCoins()) {
+      this.showInsufficientCoinsMessage();
+      return false;
+    }
+    return true;
+  }
+}
+
+// 创建全局实例
+const coinManager = new window.CoinManager = new CoinManager();
+
+// 导出实例
+export default coinManager;
--- a/InfoGenie-frontend/src/pages/AiModelPage.js
+++ b/InfoGenie-frontend/src/pages/AiModelPage.js
@@ -284,6 +284,26 @@ const AiModelPage = () => {
  const closeEmbedded = () => {
    setEmbeddedApp(null);
  };
+  
+  // 在iframe加载时注入token
+  const handleIframeLoad = (e) => {
+    try {
+      const iframe = e.target;
+      const token = localStorage.getItem('token');
+      
+      if (iframe && iframe.contentWindow && token) {
+        // 将token传递给iframe
+        iframe.contentWindow.localStorage.setItem('token', token);
+        
+        // 确保coin-manager.js已加载
+        if (iframe.contentWindow.coinManager) {
+          iframe.contentWindow.coinManager.loadCoinsInfo();
+        }
+      }
+    } catch (error) {
+      console.error('iframe通信错误:', error);
+    }
+  };



@@ -393,7 +413,36 @@ const AiModelPage = () => {
          </LoginPrompt>
        )}

-        {/* 内嵌显示组件 */}
+        {/* 萌芽币提示 */}
+        {isLoggedIn && (
+          <div style={{
+            maxWidth: '800px',
+            margin: '0 auto 40px',
+            padding: '20px',
+            background: 'rgba(74, 222, 128, 0.1)',
+            borderRadius: '12px',
+            border: '1px solid rgba(74, 222, 128, 0.3)'
+          }}>
+            <h3 style={{ 
+              display: 'flex', 
+              alignItems: 'center', 
+              gap: '10px',
+              color: '#16a34a',
+              marginTop: 0
+            }}>
+              <span style={{ fontSize: '24px' }}>💰</span>
+              萌芽币消费提示
+            </h3>
+            <p style={{ lineHeight: '1.6', color: '#374151' }}>
+              每次使用AI功能将消耗<b>100萌芽币</b>，无论成功与否。当萌芽币余额不足时，无法使用AI功能。
+            </p>
+            <p style={{ lineHeight: '1.6', color: '#374151' }}>
+              您可以通过<b>每日签到</b>获得300萌芽币。详细的萌芽币余额和使用记录将显示在各AI应用的右上角。
+            </p>
+          </div>
+        )}
+
+      {/* 内嵌显示组件 */}
        {embeddedApp && (
          <EmbeddedContainer onClick={closeEmbedded}>
            <EmbeddedContent onClick={(e) => e.stopPropagation()}>
@@ -407,6 +456,7 @@ const AiModelPage = () => {
              <EmbeddedFrame
                src={embeddedApp.link}
                title={embeddedApp.title}
+                onLoad={handleIframeLoad}
              />
            </EmbeddedContent>
          </EmbeddedContainer>
--- a/InfoGenie-frontend/src/utils/api.js
+++ b/InfoGenie-frontend/src/utils/api.js
@@ -95,6 +95,12 @@ export const userAPI = {



+// AI模型相关API
+export const aiModelAPI = {
+  // 获取萌芽币余额和使用历史
+  getCoins: () => api.get('/api/aimodelapp/coins'),
+};
+
 // 健康检查
 export const healthAPI = {
  check: () => api.get('/api/health'),
--- a/InfoGenie-frontend/前端架构文档.md
+++ b/InfoGenie-frontend/前端架构文档.md
@@ -0,0 +1,381 @@
+# InfoGenie 前端架构文档
+
+## 项目概述
+
+InfoGenie 是一个基于前后端分离架构的全栈 Web 应用，前端采用 React 单页应用（SPA）架构，结合静态 HTML 页面实现丰富的功能模块。后端提供 RESTful API 接口，支持用户认证、数据获取等核心功能。
+
+## 技术栈
+
+### 核心框架
+- **React 18.2.0**: 前端 UI 框架，使用函数式组件和 Hooks
+- **React Router DOM 6.15.0**: 客户端路由管理
+- **Axios 1.5.0**: HTTP 客户端，用于后端 API 调用
+
+### 样式和 UI
+- **styled-components 6.0.7**: CSS-in-JS 样式解决方案
+- **react-icons 4.11.0**: 图标库
+- **react-hot-toast 2.4.1**: 通知提示组件
+
+### 开发工具
+- **Create React App**: 项目脚手架
+- **ESLint**: 代码规范检查
+- **Service Worker**: PWA 支持
+
+## 架构设计
+
+### 整体架构
+```
+前端应用
+├── React SPA (主要页面)
+│   ├── 用户认证系统
+│   ├── 导航和布局
+│   ├── 页面路由
+│   └── 用户管理
+└── 静态 HTML 页面
+    ├── API 数据展示页面
+    ├── 小游戏页面
+    └── AI 模型工具页面
+```
+
+### 文件结构
+```
+src/
+├── components/          # 公共组件
+│   ├── Header.js       # 顶部导航栏
+│   ├── Navigation.js   # 底部导航栏（移动端）
+│   └── Footer.js       # 页脚
+├── pages/              # 页面组件
+│   ├── HomePage.js     # 首页
+│   ├── LoginPage.js    # 登录页面
+│   ├── Api60sPage.js   # API 60s 页面
+│   ├── SmallGamePage.js # 小游戏页面
+│   ├── AiModelPage.js  # AI 模型页面
+│   └── UserProfilePage.js # 用户资料页面
+├── contexts/           # React Context
+│   └── UserContext.js  # 用户状态管理
+├── config/             # 配置文件
+│   └── StaticPageConfig.js # 静态页面配置
+├── utils/              # 工具函数
+│   └── api.js          # API 调用封装
+└── styles/             # 全局样式
+```
+
+## API 接口设计
+
+### 基础配置
+- **Base URL**: `https://infogenie.api.shumengya.top` (这是生产环境)(可通过环境变量 `REACT_APP_API_URL` 配置测试环境)
+- **认证方式**: JWT Bearer Token
+- **请求格式**: JSON
+- **响应格式**: JSON
+- **超时时间**: 10秒
+
+### 认证相关接口
+
+#### 发送验证码
+```http
+POST /api/auth/send-verification
+Content-Type: application/json
+
+{
+  "email": "user@example.com"
+}
+```
+
+#### 验证验证码
+```http
+POST /api/auth/verify-code
+Content-Type: application/json
+
+{
+  "email": "user@example.com",
+  "code": "123456"
+}
+```
+
+#### 用户登录
+```http
+POST /api/auth/login
+Content-Type: application/json
+
+{
+  "email": "user@example.com",
+  "password": "password"
+}
+```
+
+#### 用户注册
+```http
+POST /api/auth/register
+Content-Type: application/json
+
+{
+  "email": "user@example.com",
+  "password": "password",
+  "verification_code": "123456"
+}
+```
+
+#### 用户登出
+```http
+POST /api/auth/logout
+Authorization: Bearer <token>
+```
+
+#### 检查登录状态
+```http
+GET /api/auth/check
+Authorization: Bearer <token>
+```
+
+### 用户管理接口
+
+#### 获取用户资料
+```http
+GET /api/user/profile
+Authorization: Bearer <token>
+```
+
+#### 修改密码
+```http
+POST /api/user/change-password
+Authorization: Bearer <token>
+Content-Type: application/json
+
+{
+  "old_password": "old_password",
+  "new_password": "new_password"
+}
+```
+
+#### 获取用户统计
+```http
+GET /api/user/stats
+Authorization: Bearer <token>
+```
+
+#### 获取游戏数据
+```http
+GET /api/user/game-data
+Authorization: Bearer <token>
+```
+
+#### 用户签到
+```http
+POST /api/user/checkin
+Authorization: Bearer <token>
+```
+
+#### 删除账户
+```http
+POST /api/user/delete
+Authorization: Bearer <token>
+Content-Type: application/json
+
+{
+  "password": "password"
+}
+```
+
+### 数据展示接口
+
+前端包含大量静态页面用于展示各种 API 数据，这些页面直接调用后端提供的公开接口：
+
+#### 热搜榜单系列
+- 百度实时热搜: `GET /v2/baidu/realtime`
+- 百度贴吧话题榜: `GET /v2/baidu/tieba`
+- 哔哩哔哩热搜榜: `GET /v2/bilibili/hot`
+- 抖音热搜榜: `GET /v2/douyin/hot`
+- 头条热搜榜: `GET /v2/toutiao/hot`
+- 微博热搜榜: `GET /v2/weibo/hot`
+- 小红书热点: `GET /v2/xiaohongshu/hot`
+- 知乎热门话题: `GET /v2/zhihu/hot`
+- Hacker News 榜单: `GET /v2/hackernews`
+
+#### 日更资讯系列
+- 必应每日壁纸: `GET /v2/bing/wallpaper`
+- 历史上的今天: `GET /v2/history/today`
+- 每日国际汇率: `GET /v2/exchange/rates`
+- 每天60s读懂世界: `GET /v2/60s/world`
+
+#### 实用功能系列
+- 百度百科词条: `GET /v2/baike/search?keyword={keyword}`
+- 公网IP地址: `GET /v2/ip/public`
+- 哈希解压压缩: `POST /v2/hash/{algorithm}`
+- 链接OG信息: `GET /v2/og?url={url}`
+- 密码强度检测: `POST /v2/password/strength`
+- 农历信息: `GET /v2/calendar/lunar?date={date}`
+- 配色方案: `GET /v2/color/schemes`
+- 身体健康分析: `POST /v2/health/analysis`
+- 生成二维码: `POST /v2/qrcode/generate`
+- 实时天气: `GET /v2/weather?location={location}`
+- 随机密码生成器: `GET /v2/password/random`
+- 随机颜色: `GET /v2/color/random`
+- 天气预报: `GET /v2/weather/forecast?location={location}`
+- 在线翻译: `POST /v2/translate`
+- EpicGames免费游戏: `GET /v2/epic/free-games`
+
+#### 娱乐消遣系列
+- 随机唱歌音频: `GET /v2/entertainment/random-song`
+- 随机发病文学: `GET /v2/entertainment/random-meme`
+- 随机搞笑段子: `GET /v2/entertainment/random-joke`
+- 随机冷笑话: `GET /v2/entertainment/random-pun`
+- 随机一言: `GET /v2/entertainment/random-quote`
+- 随机运势: `GET /v2/entertainment/random-fortune`
+- 随机JavaScript趣味题: `GET /v2/entertainment/random-js-quiz`
+- 随机KFC文案: `GET /v2/entertainment/random-kfc`
+
+## 状态管理
+
+### 用户状态管理
+使用 React Context 进行全局状态管理：
+
+```javascript
+const UserContext = createContext();
+
+export const UserProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+
+  // 用户登录、登出、状态检查等方法
+};
+```
+
+### 本地存储
+- 用户信息和 Token 存储在 localStorage 中
+- 页面刷新后自动恢复用户状态
+
+## 路由设计
+
+```javascript
+const App = () => {
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/login" element={<LoginPage />} />
+        <Route path="/60sapi" element={<Api60sPage />} />
+        <Route path="/smallgame" element={<SmallGamePage />} />
+        <Route path="/aimodel" element={<AiModelPage />} />
+        <Route path="/profile" element={<UserProfilePage />} />
+        <Route path="*" element={<Navigate to="/" replace />} />
+      </Routes>
+    </Router>
+  );
+};
+```
+
+## 响应式设计
+
+- 移动优先设计理念
+- 使用 CSS Grid 和 Flexbox 实现响应式布局
+- 媒体查询适配不同屏幕尺寸
+- 移动端使用底部导航栏，桌面端使用顶部导航
+
+## 安全考虑
+
+### 前端安全措施
+- JWT Token 自动过期和刷新
+- XSS 防护：使用 React 自动转义
+- CSRF 防护：使用 SameSite Cookie
+- 输入验证：前端表单验证
+
+### API 安全要求
+- 所有敏感接口需要 JWT 认证
+- Token 存储在 localStorage，需要后端验证
+- 密码等敏感信息前端不存储明文
+- API 请求包含 CORS 配置
+
+## 部署和构建
+
+### 构建命令
+```bash
+npm run build  # 生产环境构建
+npm start      # 开发环境启动
+```
+
+### 环境变量
+- `REACT_APP_API_URL`: 后端 API 基础地址
+- 支持 `.env` 文件配置不同环境的变量
+
+### PWA 支持
+- 注册 Service Worker 实现离线缓存
+- Web App Manifest 支持安装到桌面
+
+## 与后端协作要点
+
+1. **API 接口约定**: 遵循 RESTful 设计原则，统一响应格式
+2. **错误处理**: 后端返回统一的错误格式，前端统一处理
+3. **认证流程**: JWT Token 的生成、验证和刷新机制
+4. **数据格式**: 前后端约定清晰的数据结构
+5. **跨域配置**: 后端需要配置 CORS 允许前端域名
+6. **API 版本管理**: 使用 `/v2/` 前缀进行版本控制
+7. **性能优化**: 考虑 API 响应时间和前端缓存策略
+
+## 萌芽币消费系统
+
+### 系统概述
+萌芽币是平台内部的虚拟货币，用于限制和管理用户对AI功能的使用频率。每次调用AI功能需消耗100萌芽币，当用户萌芽币不足时，无法使用AI功能。
+
+### 技术实现
+1. **萌芽币管理器**: `/public/aimodelapp/coin-manager.js`
+   - 管理用户萌芽币余额和使用记录
+   - 提供UI组件显示萌芽币信息
+   - 实现API调用前的余额检查
+
+2. **API集成**:
+   - 在 `/src/utils/api.js` 中添加萌芽币查询接口
+   - 所有AI功能API调用必须添加JWT Token认证
+   - API调用后自动刷新萌芽币余额显示
+
+3. **用户体验**:
+   - 在页面右上角显示萌芽币余额和使用记录
+   - 当萌芽币不足时，提供友好的提示
+   - 引导用户通过签到等方式获取更多萌芽币
+
+### 接口设计
+```http
+GET /api/aimodelapp/coins
+Authorization: Bearer <token>
+
+响应:
+{
+  "success": true,
+  "data": {
+    "coins": 200,
+    "ai_cost": 100,
+    "can_use_ai": true,
+    "username": "用户名",
+    "usage_count": 5,
+    "recent_usage": [
+      {
+        "api_type": "chat",
+        "cost": 100,
+        "timestamp": "2025-09-16T11:15:47.285720"
+      },
+      ...
+    ]
+  },
+  "message": "当前萌芽币余额: 200"
+}
+```
+
+### 页面集成流程
+1. 引入萌芽币管理器 JavaScript 文件
+2. 在API调用前检查萌芽币余额
+3. 处理API响应中的萌芽币相关错误
+4. API调用后刷新萌芽币信息
+
+详细集成步骤请参考 [前端萌芽币消费系统集成文档](/前端萌芽币消费系统集成文档.md)
+
+## 后续扩展建议
+
+1. **状态管理升级**: 可考虑引入 Redux 或 Zustand 进行更复杂的状态管理
+2. **组件库**: 可引入 Ant Design 或 Material-UI 统一 UI 组件
+3. **测试覆盖**: 添加单元测试和集成测试
+4. **性能监控**: 集成前端性能监控工具
+5. **国际化**: 支持多语言切换功能
+6. **萌芽币系统扩展**: 
+   - 实现萌芽币充值功能
+   - 针对不同AI功能设置差异化定价
+   - 添加萌芽币消费统计和分析功能
--- a/InfoGenie-frontend/前端萌芽币消费系统集成文档.md
+++ b/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萌芽币，无论成功与否
+- 用户可以通过每日签到获取萌芽币
--- a/InfoGenie-frontend/萌芽币消费系统集成报告.md
+++ b/InfoGenie-frontend/萌芽币消费系统集成报告.md
@@ -0,0 +1,64 @@
+# InfoGenie前端萌芽币消费系统集成报告
+
+## 完成工作概述
+
+根据后端新增的萌芽币消费系统需求，已成功在前端项目中完成了相应的功能集成。具体完成了以下工作：
+
+### 1. API工具扩展
+在`/src/utils/api.js`中添加了萌芽币余额查询API：
+```javascript
+export const aiModelAPI = {
+  // 获取萌芽币余额和使用历史
+  getCoins: () => api.get('/api/aimodelapp/coins'),
+};
+```
+
+### 2. 萌芽币管理工具实现
+创建了`/public/aimodelapp/coin-manager.js`文件，实现了以下功能：
+- 萌芽币余额和使用历史查询
+- 用户友好的UI显示
+- AI API调用前的余额检查
+- 错误处理和用户提示
+
+### 3. AI变量命名助手集成示例
+完成了AI变量命名助手的萌芽币系统集成：
+- 引入了coin-manager.js
+- 添加了JWT Token认证
+- 实现了API调用前的余额检查
+- 处理了萌芽币不足的错误情况
+- API调用后自动刷新萌芽币信息
+
+### 4. AI模型页面增强
+在`/src/pages/AiModelPage.js`中添加了以下功能：
+- 萌芽币消费提示说明
+- iframe加载时的token传递
+- 确保嵌入应用正确加载萌芽币管理器
+
+### 5. 文档更新
+完成了两份文档的更新：
+1. `/前端架构文档.md`: 添加了萌芽币消费系统的架构说明
+2. `/前端萌芽币消费系统集成文档.md`: 创建了详细的集成指南
+
+## 后续工作建议
+
+1. 按照集成文档完成其余所有AI应用的萌芽币系统集成：
+   - AI写诗小助手
+   - AI姓名评测
+   - AI语言翻译助手
+   - AI文章转文言文
+   - AI生成表情包
+   - AI生成Linux命令
+
+2. 用户体验优化：
+   - 在用户资料页面显示萌芽币余额和完整的使用历史
+   - 添加萌芽币获取引导（如签到提醒）
+   - 考虑实现萌芽币充值功能
+
+3. 性能和安全性优化：
+   - 优化币管理器的加载性能
+   - 添加币管理器的错误处理和重试机制
+   - 确保token传递的安全性
+
+## 结论
+
+萌芽币消费系统的前端集成已基本完成，示例应用可以正常工作。系统实现了后端要求的所有功能，并提供了良好的用户体验。后续只需按照文档中的步骤，将相同的集成方式应用到其余AI应用中即可完成全部工作。