Merge pull request #14 from handsomezhuzhu/siliconcloud-balance-feature

feat: 新增硅基流动API余额检测功能

Author: weiruchenai1

src/components/features/BalanceDisplay/KeyBalanceDisplay.jsx

@@ -0,0 +1,63 @@
+import React, { useState, useEffect } from 'react';
+import { getApiBalance } from '../../../services/api/base';
+import { useLanguage } from '../../../hooks/useLanguage';
+
+const KeyBalanceDisplay = ({ apiKey, apiType, proxyUrl }) => {
+  const { t } = useLanguage();
+  const [balanceInfo, setBalanceInfo] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const fetchBalance = async () => {
+    if (!apiKey || !apiType) return;
+    
+    setLoading(true);
+    setError(null);
+    
+    try {
+      const result = await getApiBalance(apiKey, apiType, proxyUrl);
+      if (result.success) {
+        setBalanceInfo(result);
+        setError(null);
+      } else {
+        setError(result.error);
+        setBalanceInfo(null);
+      }
+    } catch (err) {
+      setError(err.message);
+      setBalanceInfo(null);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    // 只有当apiType支持余额查询时才自动获取
+    if (apiType === 'siliconcloud' && apiKey) {
+      fetchBalance();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [apiKey, apiType, proxyUrl]);
+
+  // 如果不是支持余额查询的API类型，则不显示组件
+  if (apiType !== 'siliconcloud') {
+    return null;
+  }
+
+  // 根据状态返回相应的显示内容
+  if (loading) {
+    return <div className="key-model">{t('balance.title')}: {t('balance.refreshing')}</div>;
+  }
+  
+  if (error) {
+    return <div className="key-model">{t('balance.title')}: {t('balance.fetchFailed')}</div>;
+  }
+  
+  if (balanceInfo) {
+    return <div className="key-model">{t('balance.title')}: ¥{Number(balanceInfo.balance).toFixed(2)}</div>;
+  }
+
+  return null;
+};
+
+export default KeyBalanceDisplay;

src/components/features/Results/VirtualizedList.jsx

@@ -3,6 +3,7 @@ import { VariableSizeList as List } from 'react-window';
 import { useLanguage } from '../../../hooks/useLanguage';
 import { useAppState } from '../../../contexts/AppStateContext';
 import { useVirtualization } from '../../../hooks/useVirtualization';
+import KeyBalanceDisplay from '../BalanceDisplay/KeyBalanceDisplay';
 
 const KeyItem = ({ index, style, data }) => {
   const { t } = useLanguage();
@@ -111,6 +112,14 @@ const KeyItem = ({ index, style, data }) => {
               {getKeyStatusInfo()}
             </div>
           )}
+          {/* 余额显示 - 只在有效的siliconcloud key时显示 */}
+          {(keyData.status === 'valid' || keyData.status === 'paid') && state.apiType === 'siliconcloud' && (
+            <KeyBalanceDisplay 
+              apiKey={keyData.key}
+              apiType={state.apiType}
+              proxyUrl={state.proxyUrl}
+            />
+          )}
         </div>
         <div className={`key-status ${getStatusClass(keyData.status)}`}>
           {getStatusText(keyData.status)}

src/locales/en.json

@@ -203,5 +203,15 @@
   },
   "results": {
     "logTooltip": "Tip: Click a test result card to view the log for that key."
+  },
+  "balance": {
+    "title": "Balance",
+    "refresh": "Refresh",
+    "refreshing": "Querying...",
+    "accountBalance": "Account Balance",
+    "userNickname": "User Nickname",
+    "email": "Email",
+    "fetchFailed": "Query Failed",
+    "clickToRefresh": "Click refresh button to query balance information"
   }
 }

src/locales/zh.json

@@ -203,5 +203,15 @@
   },
   "results": {
     "logTooltip": "提示：点击测试结果卡片即可查看对应 key 的测试日志。"
+  },
+  "balance": {
+    "title": "余额",
+    "refresh": "刷新",
+    "refreshing": "查询中...",
+    "accountBalance": "账户余额",
+    "userNickname": "用户昵称",
+    "email": "邮箱",
+    "fetchFailed": "查询失败",
+    "clickToRefresh": "点击刷新按钮查询余额信息"
   }
 }

src/services/api/base.js

@@ -2,7 +2,7 @@ import { testOpenAIKey, getOpenAIModels } from './openai';
 import { testClaudeKey, getClaudeModels } from './claude';
 import { testGeminiKey, getGeminiModels } from './gemini';
 import { testDeepSeekKey, getDeepSeekModels } from './deepseek';
-import { testSiliconCloudKey, getSiliconCloudModels } from './siliconcloud';
+import { testSiliconCloudKey, getSiliconCloudModels, getSiliconCloudBalance } from './siliconcloud';
 import { testXAIKey, getXAIModels } from './xai';
 import { testOpenRouterKey, getOpenRouterModels } from './openrouter';
 
@@ -78,3 +78,36 @@ export const getAvailableModels = async (apiKey, apiType, proxyUrl) => {
     return [];
   }
 };
+
+export const getApiBalance = async (apiKey, apiType, proxyUrl) => {
+  try {
+    switch (apiType) {
+      case 'siliconcloud':
+        return await getSiliconCloudBalance(apiKey, proxyUrl);
+      case 'openai':
+      case 'claude':
+      case 'gemini':
+      case 'deepseek':
+      case 'xai':
+      case 'openrouter':
+        return {
+          success: false,
+          error: '该API类型暂不支持余额查询',
+          balance: null
+        };
+      default:
+        return {
+          success: false,
+          error: '不支持的API类型',
+          balance: null
+        };
+    }
+  } catch (error) {
+    console.error('获取API余额失败:', error);
+    return {
+      success: false,
+      error: error.message,
+      balance: null
+    };
+  }
+};

src/services/api/siliconcloud.js

@@ -59,3 +59,43 @@ export const getSiliconCloudModels = async (apiKey, proxyUrl) => {
     return [];
   }
 };
+
+export const getSiliconCloudBalance = async (apiKey, proxyUrl) => {
+  try {
+    const url = getApiUrl('siliconcloud', '/user/info', proxyUrl);
+
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        'Authorization': `Bearer ${apiKey}`,
+        'Content-Type': 'application/json'
+      }
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => null);
+      throw new Error(errorData?.error?.message || `HTTP ${response.status}`);
+    }
+
+    const data = await response.json();
+    
+    // 返回格式化的余额信息
+    return {
+      success: true,
+      balance: data.data?.balance || 0,
+      currency: data.data?.currency || 'CNY',
+      userInfo: {
+        userId: data.data?.user_id,
+        email: data.data?.email,
+        nickname: data.data?.nickname
+      }
+    };
+  } catch (error) {
+    console.error('获取SiliconCloud余额失败:', error);
+    return {
+      success: false,
+      error: error.message,
+      balance: null
+    };
+  }
+};

src/styles/variables.css

@@ -49,15 +49,27 @@
 
   /* 颜色别名 */
   --primary-color: var(--color-primary);
+  --primary-hover: #0056b3;
   --success-color: var(--color-success);
   --error-color: var(--color-danger);
   --warning-color: var(--color-warning);
   --info-color: var(--color-info);
 
   /* 背景色别名 */
-  --bg-primary: var(--color-primary);
+  --bg-primary: var(--bg-input);
+  --bg-secondary: var(--bg-card);
   --bg-tertiary: #f1f3f4;
 
+  /* 错误样式 */
+  --error-bg: #f8d7da;
+  --error-border: #f5c6cb;
+
+  /* 边框样式 */
+  --border-light: rgba(0, 0, 0, 0.1);
+
+  /* 字体 */
+  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+
   /* 过渡动画 */
   --transition-fast: 0.15s ease;
   --transition-normal: 0.25s ease;
@@ -79,4 +91,12 @@
   --border-focus: #60a5fa;
 
   --color-primary: #60a5fa;
+
+  /* 深色主题的特殊变量 */
+  --dark-bg-primary: #1a1a1a;
+  --dark-bg-secondary: #2a2a2a;
+  --dark-text-primary: #ffffff;
+  --dark-text-secondary: #b0b0b0;
+  --dark-border-color: #444444;
+  --dark-border-light: rgba(255, 255, 255, 0.1);
 }