Merge pull request #15 from weiruchenai1/experimental

feat: 更新余额显示逻辑，优化高度计算

Author: weiruchenai1

src/components/features/BalanceDisplay/KeyBalanceDisplay.jsx

@@ -1,31 +1,47 @@
 import React, { useState, useEffect } from 'react';
 import { getApiBalance } from '../../../services/api/base';
 import { useLanguage } from '../../../hooks/useLanguage';
+import { useAppState } from '../../../contexts/AppStateContext';
 
 const KeyBalanceDisplay = ({ apiKey, apiType, proxyUrl }) => {
   const { t } = useLanguage();
-  const [balanceInfo, setBalanceInfo] = useState(null);
+  const { state, dispatch } = useAppState();
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState(null);
+
+  // 从keyResults中获取当前key的余额信息
+  const keyResult = state.keyResults?.find(result => result.key === apiKey);
+  const balanceInfo = keyResult?.balanceInfo;
+  const balanceError = keyResult?.balanceError;
 
   const fetchBalance = async () => {
     if (!apiKey || !apiType) return;
 
+    // 如果已经有余额信息，不重复查询
+    if (balanceInfo || balanceError) 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);
-      }
+      
+      // 更新keyResults中的余额信息
+      dispatch({
+        type: 'UPDATE_KEY_STATUS',
+        payload: {
+          key: apiKey,
+          balanceInfo: result.success ? result : null,
+          balanceError: result.success ? null : result.error
+        }
+      });
     } catch (err) {
-      setError(err.message);
-      setBalanceInfo(null);
+      // 更新错误信息
+      dispatch({
+        type: 'UPDATE_KEY_STATUS',
+        payload: {
+          key: apiKey,
+          balanceError: err.message
+        }
+      });
     } finally {
       setLoading(false);
     }
@@ -49,7 +65,7 @@ const KeyBalanceDisplay = ({ apiKey, apiType, proxyUrl }) => {
     return <div className="key-model">{t('balance.title')}: {t('balance.refreshing')}</div>;
   }
 
-  if (error) {
+  if (balanceError) {
     return <div className="key-model">{t('balance.title')}: {t('balance.fetchFailed')}</div>;
   }
 

src/components/features/Results/VirtualizedList.jsx

@@ -165,7 +165,7 @@ const VirtualizedList = () => {
 
   // 创建一个函数来获取每个项目的高度
   const getItemSize = (index) => {
-    return getItemHeight(filteredKeys[index]);
+    return getItemHeight(filteredKeys[index], state.apiType);
   };
 
   // 当数据变化时重置虚拟化缓存

src/hooks/useVirtualization.js

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 export const useVirtualization = () => {
-  const getItemHeight = useCallback((keyData) => {
+  const getItemHeight = useCallback((keyData, apiType) => {
     if (!keyData) return 60; // 默认高度
 
     // 基础高度：padding(12*2=24) + wrapper padding(2*2=4) + 基础内容(40) = 68px
@@ -43,6 +43,11 @@ export const useVirtualization = () => {
       baseHeight += lineHeight;
     }
 
+    // 如果是硅基流动且是有效密钥，为余额显示增加额外高度
+    if (apiType === 'siliconcloud' && (keyData.status === 'valid' || keyData.status === 'paid')) {
+      baseHeight += lineHeight; // 为余额显示增加一行高度
+    }
+
     return Math.max(baseHeight, 68); // 设置最小高度为68px
   }, []);
 

src/styles/globals.css

@@ -748,8 +748,8 @@ body {
     align-items: flex-start;
     gap: var(--spacing-sm);
     padding: 10px 12px;
-    margin-bottom: 3px;
-    min-height: 70px;
+    margin-bottom: 6px;
+    min-height: 80px;
   }
 
   .key-content {
@@ -851,8 +851,8 @@ body {
 
   .key-item {
     padding: 8px 10px;
-    margin-bottom: 2px;
-    min-height: 65px;
+    margin-bottom: 5px;
+    min-height: 75px;
   }
 
   .key-text {
@@ -969,6 +969,7 @@ body {
   border-color: #444444;
   color: #ffffff;
 }
+
 /* Results tooltip */
 .results-tooltip {
   display: flex;
@@ -1040,5 +1041,4 @@ body {
     max-height: 80vh;
     margin: var(--spacing-sm) auto;
   }
-}
-
+}