前端美化

InfoGenie-frontend/public/aimodelapp/AI写诗小助手/env.js

@@ -0,0 +1,26 @@
+// 环境配置文件
+// 此文件定义了AI应用的基本配置
+
+// API配置
+window.API_CONFIG = {
+    baseUrl: 'http://127.0.0.1:5002',
+    endpoints: {
+        poetry: '/api/aimodelapp/poetry'
+    }
+};
+
+// 认证配置
+window.AUTH_CONFIG = {
+    tokenKey: 'token',
+    getToken: () => localStorage.getItem('token'),
+    isAuthenticated: () => !!localStorage.getItem('token')
+};
+
+// 应用配置
+window.APP_CONFIG = {
+    name: 'InfoGenie AI工具',
+    version: '1.0.0',
+    debug: false
+};
+
+console.log('环境配置已加载');

InfoGenie-frontend/public/aimodelapp/AI写诗小助手/script.js

@@ -10,17 +10,27 @@ const themeInput = document.getElementById('theme');
 // 调用后端API
 async function callBackendAPI(theme) {
     try {
-        const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/poetry', {
-            method: 'POST',
-            headers: {
+        const token = AUTH_CONFIG.getToken();
+        const headers = {
             'Content-Type': 'application/json'
-            },
+        };
+        
+        if (token) {
+            headers['Authorization'] = `Bearer ${token}`;
+        }
+        
+        const response = await fetch(`${API_CONFIG.baseUrl}${API_CONFIG.endpoints.poetry}`, {
+            method: 'POST',
+            headers: headers,
             body: JSON.stringify({
                 theme: theme
             })
         });
 
         if (!response.ok) {
+            if (response.status === 402) {
+                throw new Error('您的萌芽币余额不足，无法使用此功能');
+            }
             const errorData = await response.json();
             throw new Error(errorData.error || `API请求失败: ${response.status} ${response.statusText}`);
         }

InfoGenie-frontend/public/aimodelapp/AI变量命名助手/env.js

@@ -0,0 +1,26 @@
+// 环境配置文件
+// 此文件定义了AI应用的基本配置
+
+// API配置
+window.API_CONFIG = {
+    baseUrl: 'http://127.0.0.1:5002',
+    endpoints: {
+        variableNaming: '/api/aimodelapp/variable-naming'
+    }
+};
+
+// 认证配置
+window.AUTH_CONFIG = {
+    tokenKey: 'token',
+    getToken: () => localStorage.getItem('token'),
+    isAuthenticated: () => !!localStorage.getItem('token')
+};
+
+// 应用配置
+window.APP_CONFIG = {
+    name: 'InfoGenie AI工具',
+    version: '1.0.0',
+    debug: false
+};
+
+console.log('环境配置已加载');

InfoGenie-frontend/public/aimodelapp/AI变量命名助手/index.html

@@ -37,7 +37,6 @@
     </div>
   </div>
 
-  <script src="../coin-manager.js"></script>
   <script src="env.js"></script>
   <script src="script.js"></script>
 </body>

InfoGenie-frontend/public/aimodelapp/AI变量命名助手/script.js

@@ -59,6 +59,9 @@ async function callBackendAPI(description) {
         });
 
         if (!response.ok) {
+            if (response.status === 402) {
+                throw new Error('您的萌芽币余额不足，无法使用此功能');
+            }
             const errorData = await response.json();
             throw new Error(errorData.error || `API请求失败: ${response.status} ${response.statusText}`);
         }
@@ -216,22 +219,12 @@ 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);
         // 检查是否是萌芽币不足导致的错误

InfoGenie-frontend/public/aimodelapp/AI姓名评测/env.js

@@ -0,0 +1,26 @@
+// 环境配置文件
+// 此文件定义了AI应用的基本配置
+
+// API配置
+window.API_CONFIG = {
+    baseUrl: 'http://127.0.0.1:5002',
+    endpoints: {
+        nameAnalysis: '/api/aimodelapp/name-analysis'
+    }
+};
+
+// 认证配置
+window.AUTH_CONFIG = {
+    tokenKey: 'token',
+    getToken: () => localStorage.getItem('token'),
+    isAuthenticated: () => !!localStorage.getItem('token')
+};
+
+// 应用配置
+window.APP_CONFIG = {
+    name: 'InfoGenie AI工具',
+    version: '1.0.0',
+    debug: false
+};
+
+console.log('环境配置已加载');

InfoGenie-frontend/public/aimodelapp/AI姓名评测/script.js

@@ -193,11 +193,18 @@ async function analyzeName() {
 
   try {
     // 调用后端API
-    const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/name-analysis', {
-      method: 'POST',
-      headers: {
+    const token = AUTH_CONFIG.getToken();
+    const headers = {
       'Content-Type': 'application/json'
-      },
+    };
+    
+    if (token) {
+      headers['Authorization'] = `Bearer ${token}`;
+    }
+    
+    const response = await fetch(`${API_CONFIG.baseUrl}${API_CONFIG.endpoints.nameAnalysis}`, {
+      method: 'POST',
+      headers: headers,
       body: JSON.stringify(requestBody)
     });
 
@@ -207,6 +214,9 @@ async function analyzeName() {
     }
     
     if (!response.ok) {
+      if (response.status === 402) {
+        throw new Error('您的萌芽币余额不足，无法使用此功能');
+      }
       const errorData = await response.json();
       throw new Error(errorData.error || `请求失败: ${response.status} ${response.statusText}`);
     }

InfoGenie-frontend/public/aimodelapp/AI文章转文言文/env.js

@@ -0,0 +1,26 @@
+// 环境配置文件
+// 此文件定义了AI应用的基本配置
+
+// API配置
+window.API_CONFIG = {
+    baseUrl: 'http://127.0.0.1:5002',
+    endpoints: {
+        classicalConversion: '/api/aimodelapp/classical_conversion'
+    }
+};
+
+// 认证配置
+window.AUTH_CONFIG = {
+    tokenKey: 'token',
+    getToken: () => localStorage.getItem('token'),
+    isAuthenticated: () => !!localStorage.getItem('token')
+};
+
+// 应用配置
+window.APP_CONFIG = {
+    name: 'InfoGenie AI工具',
+    version: '1.0.0',
+    debug: false
+};
+
+console.log('环境配置已加载');

InfoGenie-frontend/public/aimodelapp/AI文章转文言文/script.js

@@ -12,11 +12,18 @@ const conversionResultContainer = document.getElementById('conversionResult');
 // 调用后端API
 async function callBackendAPI(modernText, style, articleType) {
     try {
-        const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/classical_conversion', {
-            method: 'POST',
-            headers: {
+        const token = AUTH_CONFIG.getToken();
+        const headers = {
             'Content-Type': 'application/json'
-            },
+        };
+        
+        if (token) {
+            headers['Authorization'] = `Bearer ${token}`;
+        }
+        
+        const response = await fetch(`${API_CONFIG.baseUrl}${API_CONFIG.endpoints.classicalConversion}`, {
+            method: 'POST',
+            headers: headers,
             body: JSON.stringify({
                 modern_text: modernText,
                 style: style,
@@ -25,6 +32,9 @@ async function callBackendAPI(modernText, style, articleType) {
         });
 
         if (!response.ok) {
+            if (response.status === 402) {
+                throw new Error('您的萌芽币余额不足，无法使用此功能');
+            }
             const errorData = await response.json();
             throw new Error(errorData.error || `API请求失败: ${response.status} ${response.statusText}`);
         }

InfoGenie-frontend/public/aimodelapp/AI生成Linux命令/env.js

@@ -0,0 +1,26 @@
+// 环境配置文件
+// 此文件定义了AI应用的基本配置
+
+// API配置
+window.API_CONFIG = {
+    baseUrl: 'http://127.0.0.1:5002',
+    endpoints: {
+        linuxCommand: '/api/aimodelapp/linux-command'
+    }
+};
+
+// 认证配置
+window.AUTH_CONFIG = {
+    tokenKey: 'token',
+    getToken: () => localStorage.getItem('token'),
+    isAuthenticated: () => !!localStorage.getItem('token')
+};
+
+// 应用配置
+window.APP_CONFIG = {
+    name: 'InfoGenie AI工具',
+    version: '1.0.0',
+    debug: false
+};
+
+console.log('环境配置已加载');

InfoGenie-frontend/public/aimodelapp/AI生成Linux命令/script.js

@@ -11,11 +11,18 @@ const commandsContainer = document.getElementById('commands');
 // 调用后端API
 async function callBackendAPI(taskDescription, difficultyLevel) {
     try {
-        const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/linux-command', {
-            method: 'POST',
-            headers: {
+        const token = AUTH_CONFIG.getToken();
+        const headers = {
             'Content-Type': 'application/json'
-            },
+        };
+        
+        if (token) {
+            headers['Authorization'] = `Bearer ${token}`;
+        }
+        
+        const response = await fetch(`${API_CONFIG.baseUrl}${API_CONFIG.endpoints.linuxCommand}`, {
+            method: 'POST',
+            headers: headers,
             body: JSON.stringify({
                 task_description: taskDescription,
                 difficulty_level: difficultyLevel
@@ -23,6 +30,9 @@ async function callBackendAPI(taskDescription, difficultyLevel) {
         });
 
         if (!response.ok) {
+            if (response.status === 402) {
+                throw new Error('您的萌芽币余额不足，无法使用此功能');
+            }
             const errorData = await response.json();
             throw new Error(errorData.error || `API请求失败: ${response.status} ${response.statusText}`);
         }

InfoGenie-frontend/public/aimodelapp/AI生成表情包/env.js

@@ -0,0 +1,26 @@
+// 环境配置文件
+// 此文件定义了AI应用的基本配置
+
+// API配置
+window.API_CONFIG = {
+    baseUrl: 'http://127.0.0.1:5002',
+    endpoints: {
+        expressionMaker: '/api/aimodelapp/expression-maker'
+    }
+};
+
+// 认证配置
+window.AUTH_CONFIG = {
+    tokenKey: 'token',
+    getToken: () => localStorage.getItem('token'),
+    isAuthenticated: () => !!localStorage.getItem('token')
+};
+
+// 应用配置
+window.APP_CONFIG = {
+    name: 'InfoGenie AI工具',
+    version: '1.0.0',
+    debug: false
+};
+
+console.log('环境配置已加载');

InfoGenie-frontend/public/aimodelapp/AI生成表情包/script.js

@@ -11,10 +11,18 @@ const expressionsContainer = document.getElementById('expressions');
 // 调用后端API
 async function callBackendAPI(text, style) {
     try {
-        const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/expression-maker', {
+        // 获取JWT token
+        const token = localStorage.getItem('token');
+        
+        if (!token) {
+            throw new Error('未登录，请先登录后使用AI功能');
+        }
+        
+        const response = await fetch(`${API_CONFIG.baseUrl}${API_CONFIG.endpoints.expressionMaker}`, {
             method: 'POST',
             headers: {
-                'Content-Type': 'application/json'
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${token}`
             },
             body: JSON.stringify({
                 text: text,
@@ -23,6 +31,9 @@ async function callBackendAPI(text, style) {
         });
 
         if (!response.ok) {
+            if (response.status === 402) {
+                throw new Error('您的萌芽币余额不足，无法使用此功能');
+            }
             const errorData = await response.json();
             throw new Error(errorData.error || `API请求失败: ${response.status} ${response.statusText}`);
         }
@@ -198,7 +209,12 @@ async function generateExpressions() {
         displayExpressions(expressions);
     } catch (error) {
         console.error('生成表情失败:', error);
+        // 检查是否是萌芽币不足导致的错误
+        if (error.message && error.message.includes('萌芽币余额不足')) {
+            showErrorMessage(`萌芽币不足: 每次使用AI功能需要消耗100萌芽币，请通过每日签到获取更多萌芽币`);
+        } else {
             showErrorMessage(`生成失败: ${error.message}`);
+        }
     } finally {
         showLoading(false);
     }

InfoGenie-frontend/public/aimodelapp/AI语言翻译助手/env.js

@@ -0,0 +1,26 @@
+// 环境配置文件
+// 此文件定义了AI应用的基本配置
+
+// API配置
+window.API_CONFIG = {
+    baseUrl: 'http://127.0.0.1:5002',
+    endpoints: {
+        translation: '/api/aimodelapp/translation'
+    }
+};
+
+// 认证配置
+window.AUTH_CONFIG = {
+    tokenKey: 'token',
+    getToken: () => localStorage.getItem('token'),
+    isAuthenticated: () => !!localStorage.getItem('token')
+};
+
+// 应用配置
+window.APP_CONFIG = {
+    name: 'InfoGenie AI工具',
+    version: '1.0.0',
+    debug: false
+};
+
+console.log('环境配置已加载');

InfoGenie-frontend/public/aimodelapp/AI语言翻译助手/script.js

@@ -11,11 +11,18 @@ const translationResultContainer = document.getElementById('translationResult');
 // 调用后端API
 async function callBackendAPI(sourceText, targetLanguage) {
     try {
-        const response = await fetch('http://127.0.0.1:5002/api/aimodelapp/translation', {
-            method: 'POST',
-            headers: {
+        const token = AUTH_CONFIG.getToken();
+        const headers = {
             'Content-Type': 'application/json'
-            },
+        };
+        
+        if (token) {
+            headers['Authorization'] = `Bearer ${token}`;
+        }
+        
+        const response = await fetch(`${API_CONFIG.baseUrl}${API_CONFIG.endpoints.translation}`, {
+            method: 'POST',
+            headers: headers,
             body: JSON.stringify({
                 source_text: sourceText,
                 target_language: targetLanguage
@@ -23,6 +30,9 @@ async function callBackendAPI(sourceText, targetLanguage) {
         });
 
         if (!response.ok) {
+            if (response.status === 402) {
+                throw new Error('您的萌芽币余额不足，无法使用此功能');
+            }
             const errorData = await response.json();
             throw new Error(errorData.error || `API请求失败: ${response.status} ${response.statusText}`);
         }

InfoGenie-frontend/public/aimodelapp/coin-manager.js

@@ -1,288 +0,0 @@
-/**
- * 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;

InfoGenie-frontend/src/components/Header.js

@@ -33,14 +33,18 @@ const Logo = styled(Link)`
   
   .logo-icon {
     margin-right: 8px;
-    font-size: 24px;
+    width: 36px;
+    height: 36px;
+    object-fit: cover;
+    border-radius: 50%;
   }
   
   @media (max-width: 768px) {
     font-size: 18px;
     
     .logo-icon {
-      font-size: 20px;
+      width: 30px;
+      height: 30px;
     }
   }
 `;
@@ -231,7 +235,7 @@ const Header = () => {
       <HeaderContainer>
         <HeaderContent>
           <Logo to="/">
-            <span className="logo-icon">✨</span>
+            <img className="logo-icon" src="/assets/logo.png" alt="InfoGenie Logo" />
             神奇万事通
           </Logo>
 

InfoGenie-frontend/src/config/StaticPageConfig.js

@@ -67,7 +67,7 @@ export const SMALL_GAMES = [
     description: '节奏感游戏，考验你的反应速度和手指协调',
     link: '/smallgame/别踩白方块/index.html',
     gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
-    icon: '⚫'
+    icon: '⬛'
   },
   {
     title: '俄罗斯方块',
@@ -98,19 +98,19 @@ export const API_60S_CATEGORIES = [
     icon: '🔥',
     color: '#ff6b6b',
     apis: [
-      { title: '哔哩哔哩热搜榜', link: '/60sapi/热搜榜单/哔哩哔哩热搜榜/index.html' },
-      { title: '抖音热搜榜', link: '/60sapi/热搜榜单/抖音热搜榜/index.html' },
-      { title: '猫眼票房排行榜', link: '/60sapi/热搜榜单/猫眼票房排行榜/index.html' },
-      { title: '头条热搜榜', link: '/60sapi/热搜榜单/头条热搜榜/index.html' },
-      { title: '网易云榜单', link: '/60sapi/热搜榜单/网易云榜单/index.html' },
-      { title: '微博热搜榜', link: '/60sapi/热搜榜单/微博热搜榜/index.html' },
-      { title: '知乎热门话题', link: '/60sapi/热搜榜单/知乎热门话题/index.html' },
-      { title: 'Hacker News 榜单', link: '/60sapi/热搜榜单/Hacker News 榜单/index.html' },
-      { title: '小红书热点', link: '/60sapi/热搜榜单/小红书热点/index.html' },
-      { title: '百度实时热搜', link: '/60sapi/热搜榜单/百度实时热搜/index.html' },
-      { title: '百度电视剧榜', link: '/60sapi/热搜榜单/百度电视剧榜/index.html' },
-      { title: '百度贴吧话题榜', link: '/60sapi/热搜榜单/百度贴吧话题榜/index.html' },
-      { title: '懂车帝热搜', link: '/60sapi/热搜榜单/懂车帝热搜/index.html' },
+      { title: '哔哩哔哩热搜榜', link: '/60sapi/热搜榜单/哔哩哔哩热搜榜/index.html', icon: '📺' },
+      { title: '抖音热搜榜', link: '/60sapi/热搜榜单/抖音热搜榜/index.html', icon: '🎵' },
+      { title: '猫眼票房排行榜', link: '/60sapi/热搜榜单/猫眼票房排行榜/index.html', icon: '🎬' },
+      { title: '头条热搜榜', link: '/60sapi/热搜榜单/头条热搜榜/index.html', icon: '📰' },
+      { title: '网易云榜单', link: '/60sapi/热搜榜单/网易云榜单/index.html', icon: '🎶' },
+      { title: '微博热搜榜', link: '/60sapi/热搜榜单/微博热搜榜/index.html', icon: '📱' },
+      { title: '知乎热门话题', link: '/60sapi/热搜榜单/知乎热门话题/index.html', icon: '💡' },
+      { title: 'Hacker News 榜单', link: '/60sapi/热搜榜单/Hacker News 榜单/index.html', icon: '💻' },
+      { title: '小红书热点', link: '/60sapi/热搜榜单/小红书热点/index.html', icon: '📖' },
+      { title: '百度实时热搜', link: '/60sapi/热搜榜单/百度实时热搜/index.html', icon: '🔍' },
+      { title: '百度电视剧榜', link: '/60sapi/热搜榜单/百度电视剧榜/index.html', icon: '📺' },
+      { title: '百度贴吧话题榜', link: '/60sapi/热搜榜单/百度贴吧话题榜/index.html', icon: '💬' },
+      { title: '懂车帝热搜', link: '/60sapi/热搜榜单/懂车帝热搜/index.html', icon: '🚗' },
     ]
   },
   {
@@ -118,10 +118,10 @@ export const API_60S_CATEGORIES = [
     icon: '📰',
     color: '#4ecdc4',
     apis: [
-      { title: '必应每日壁纸', link: '/60sapi/日更资讯/必应每日壁纸/index.html' },
-      { title: '历史上的今天', link: '/60sapi/日更资讯/历史上的今天/index.html' },
-      { title: '每日国际汇率', link: '/60sapi/日更资讯/每日国际汇率/index.html' },
-      { title: '每天60s读懂世界', link: '/60sapi/日更资讯/每天60s读懂世界/index.html' }
+      { title: '必应每日壁纸', link: '/60sapi/日更资讯/必应每日壁纸/index.html', icon: '🖼️' },
+      { title: '历史上的今天', link: '/60sapi/日更资讯/历史上的今天/index.html', icon: '📅' },
+      { title: '每日国际汇率', link: '/60sapi/日更资讯/每日国际汇率/index.html', icon: '💱' },
+      { title: '每天60s读懂世界', link: '/60sapi/日更资讯/每天60s读懂世界/index.html', icon: '🌍' }
     ]
   },
   {
@@ -129,20 +129,20 @@ export const API_60S_CATEGORIES = [
     icon: '🛠️',
     color: '#45b7d1',
     apis: [
-      { title: '百度百科词条', link: '/60sapi/实用功能/百度百科词条/index.html' },
-      { title: '公网IP地址', link: '/60sapi/实用功能/公网IP地址/index.html' },
-      { title: '哈希解压压缩', link: '/60sapi/实用功能/哈希解压压缩/index.html' },
-      { title: '链接OG信息', link: '/60sapi/实用功能/链接OG信息/index.html' },
-      { title: '密码强度检测', link: '/60sapi/实用功能/密码强度检测/index.html' },
-      { title: '农历信息', link: '/60sapi/实用功能/农历信息/index.html' },
-      { title: '配色方案', link: '/60sapi/实用功能/配色方案/index.html' },
-      { title: '身体健康分析', link: '/60sapi/实用功能/身体健康分析/index.html' },
-      { title: '生成二维码', link: '/60sapi/实用功能/生成二维码/index.html' },
-      { title: '随机密码生成器', link: '/60sapi/实用功能/随机密码生成器/index.html' },
-      { title: '随机颜色', link: '/60sapi/实用功能/随机颜色/index.html' },
-      { title: '天气预报', link: '/60sapi/实用功能/天气预报/index.html' },
-      { title: 'EpicGames免费游戏', link: '/60sapi/实用功能/EpicGames免费游戏/index.html' },
-      { title: '在线机器翻译', link: '/60sapi/实用功能/在线翻译/index.html' },
+      { title: '百度百科词条', link: '/60sapi/实用功能/百度百科词条/index.html', icon: '📚' },
+      { title: '公网IP地址', link: '/60sapi/实用功能/公网IP地址/index.html', icon: '🌐' },
+      { title: '哈希解压压缩', link: '/60sapi/实用功能/哈希解压压缩/index.html', icon: '🗜️' },
+      { title: '链接OG信息', link: '/60sapi/实用功能/链接OG信息/index.html', icon: '🔗' },
+      { title: '密码强度检测', link: '/60sapi/实用功能/密码强度检测/index.html', icon: '🔐' },
+      { title: '农历信息', link: '/60sapi/实用功能/农历信息/index.html', icon: '📅' },
+      { title: '配色方案', link: '/60sapi/实用功能/配色方案/index.html', icon: '🎨' },
+      { title: '身体健康分析', link: '/60sapi/实用功能/身体健康分析/index.html', icon: '🏥' },
+      { title: '生成二维码', link: '/60sapi/实用功能/生成二维码/index.html', icon: '📱' },
+      { title: '随机密码生成器', link: '/60sapi/实用功能/随机密码生成器/index.html', icon: '🔒' },
+      { title: '随机颜色', link: '/60sapi/实用功能/随机颜色/index.html', icon: '🌈' },
+      { title: '天气预报', link: '/60sapi/实用功能/天气预报/index.html', icon: '🌤️' },
+      { title: 'EpicGames免费游戏', link: '/60sapi/实用功能/EpicGames免费游戏/index.html', icon: '🎮' },
+      { title: '在线机器翻译', link: '/60sapi/实用功能/在线翻译/index.html', icon: '🌍' },
     ]
   },
   {
@@ -150,14 +150,14 @@ export const API_60S_CATEGORIES = [
     icon: '🎉',
     color: '#f7b731',
     apis: [
-      { title: '随机唱歌音频', link: '/60sapi/娱乐消遣/随机唱歌音频/index.html' },
-      { title: '随机发病文学', link: '/60sapi/娱乐消遣/随机发病文学/index.html' },
-      { title: '随机搞笑段子', link: '/60sapi/娱乐消遣/随机搞笑段子/index.html' },
-      { title: '随机冷笑话', link: '/60sapi/娱乐消遣/随机冷笑话/index.html' },
-      { title: '随机一言', link: '/60sapi/娱乐消遣/随机一言/index.html' },
-      { title: '随机运势', link: '/60sapi/娱乐消遣/随机运势/index.html' },
-      { title: '随机JavaScript趣味题', link: '/60sapi/娱乐消遣/随机JavaScript趣味题/index.html' },
-      { title: '随机KFC文案', link: '/60sapi/娱乐消遣/随机KFC文案/index.html' }
+      { title: '随机唱歌音频', link: '/60sapi/娱乐消遣/随机唱歌音频/index.html', icon: '🎤' },
+      { title: '随机发病文学', link: '/60sapi/娱乐消遣/随机发病文学/index.html', icon: '📖' },
+      { title: '随机搞笑段子', link: '/60sapi/娱乐消遣/随机搞笑段子/index.html', icon: '😂' },
+      { title: '随机冷笑话', link: '/60sapi/娱乐消遣/随机冷笑话/index.html', icon: '😄' },
+      { title: '随机一言', link: '/60sapi/娱乐消遣/随机一言/index.html', icon: '💭' },
+      { title: '随机运势', link: '/60sapi/娱乐消遣/随机运势/index.html', icon: '⭐' },
+      { title: '随机JavaScript趣味题', link: '/60sapi/娱乐消遣/随机JavaScript趣味题/index.html', icon: '💻' },
+      { title: '随机KFC文案', link: '/60sapi/娱乐消遣/随机KFC文案/index.html', icon: '🍗' }
     ]
   }
 ];

InfoGenie-frontend/src/pages/AiModelPage.js

@@ -116,7 +116,12 @@ const AppTheme = styled.div`
   width: 40px;
   height: 40px;
   border-radius: 8px;
-  background: ${props => props.$gradient};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  background: rgba(74, 222, 128, 0.1);
+  border: 1px solid rgba(74, 222, 128, 0.3);
 `;
 
 const LaunchButton = styled.button`
@@ -295,10 +300,7 @@ const AiModelPage = () => {
         // 将token传递给iframe
         iframe.contentWindow.localStorage.setItem('token', token);
         
-        // 确保coin-manager.js已加载
-        if (iframe.contentWindow.coinManager) {
-          iframe.contentWindow.coinManager.loadCoinsInfo();
-        }
+        // Token已传递给iframe
       }
     } catch (error) {
       console.error('iframe通信错误:', error);
@@ -391,7 +393,7 @@ const AiModelPage = () => {
                 </AppHeader>
                 <AppDescription>{app.description}</AppDescription>
                 <AppFooter>
-                  <AppTheme $gradient={app.gradient} />
+                  <AppTheme>{app.icon}</AppTheme>
                   <LaunchButton onClick={(e) => {
                     e.stopPropagation();
                     handleLaunchApp(app);

InfoGenie-frontend/src/pages/Api60sPage.js

@@ -283,7 +283,7 @@ const Api60sPage = () => {
                   >
                     <CardHeader>
                       <CardIcon color={category.color}>
-                        {category.icon}
+                        {api.icon || category.icon}
                       </CardIcon>
                       <CardTitle>{api.title}</CardTitle>
                       <ExternalIcon>

InfoGenie-frontend/src/pages/SmallGamePage.js

@@ -102,7 +102,12 @@ const GameTheme = styled.div`
   width: 40px;
   height: 40px;
   border-radius: 8px;
-  background: ${props => props.$gradient};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  background: rgba(74, 222, 128, 0.1);
+  border: 1px solid rgba(74, 222, 128, 0.3);
 `;
 
 const PlayButton = styled.button`
@@ -311,7 +316,7 @@ const SmallGamePage = () => {
                 </GameHeader>
                 <GameDescription>{game.description}</GameDescription>
                 <GameFooter>
-                  <GameTheme $gradient={game.gradient} />
+                  <GameTheme>{game.icon}</GameTheme>
                   <PlayButton onClick={(e) => {
                     e.stopPropagation();
                     handlePlayGame(game);

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

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