继续完善

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;