feat: implement token key fetching and masking in API responses

web/src/hooks/tokens/useTokensData.jsx

@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Modal } from '@douyinfe/semi-ui';
 import {
@@ -29,6 +29,7 @@ import {
 } from '../../helpers';
 import { ITEMS_PER_PAGE } from '../../constants';
 import { useTableCompactMode } from '../common/useTableCompactMode';
+import { fetchTokenKey as fetchTokenKeyById } from '../../helpers/token';
 
 export const useTokensData = (openFluentNotification, openCCSwitchModal) => {
   const { t } = useTranslation();
@@ -54,6 +55,9 @@ export const useTokensData = (openFluentNotification, openCCSwitchModal) => {
   // UI state
   const [compactMode, setCompactMode] = useTableCompactMode('tokens');
   const [showKeys, setShowKeys] = useState({});
+  const [resolvedTokenKeys, setResolvedTokenKeys] = useState({});
+  const [loadingTokenKeys, setLoadingTokenKeys] = useState({});
+  const keyRequestsRef = useRef({});
 
   // Form state
   const [formApi, setFormApi] = useState(null);
@@ -87,6 +91,7 @@ export const useTokensData = (openFluentNotification, openCCSwitchModal) => {
     setTokenCount(payload.total || 0);
     setActivePage(payload.page || 1);
     setPageSize(payload.page_size || pageSize);
+    setShowKeys({});
   };
 
   // Load tokens function
@@ -122,14 +127,86 @@ export const useTokensData = (openFluentNotification, openCCSwitchModal) => {
     }
   };
 
+  const fetchTokenKey = async (tokenOrId, options = {}) => {
+    const { suppressError = false } = options;
+    const tokenId =
+      typeof tokenOrId === 'object' ? tokenOrId?.id : Number(tokenOrId);
+
+    if (!tokenId) {
+      const error = new Error(t('令牌不存在'));
+      if (!suppressError) {
+        showError(error.message);
+      }
+      throw error;
+    }
+
+    if (resolvedTokenKeys[tokenId]) {
+      return resolvedTokenKeys[tokenId];
+    }
+
+    if (keyRequestsRef.current[tokenId]) {
+      return keyRequestsRef.current[tokenId];
+    }
+
+    const request = (async () => {
+      setLoadingTokenKeys((prev) => ({ ...prev, [tokenId]: true }));
+      try {
+        const fullKey = await fetchTokenKeyById(tokenId);
+        setResolvedTokenKeys((prev) => ({ ...prev, [tokenId]: fullKey }));
+        return fullKey;
+      } catch (error) {
+        const normalizedError = new Error(
+          error?.message || t('获取令牌密钥失败'),
+        );
+        if (!suppressError) {
+          showError(normalizedError.message);
+        }
+        throw normalizedError;
+      } finally {
+        delete keyRequestsRef.current[tokenId];
+        setLoadingTokenKeys((prev) => {
+          const next = { ...prev };
+          delete next[tokenId];
+          return next;
+        });
+      }
+    })();
+
+    keyRequestsRef.current[tokenId] = request;
+    return request;
+  };
+
+  const toggleTokenVisibility = async (record) => {
+    const tokenId = record?.id;
+    if (!tokenId) {
+      return;
+    }
+
+    if (showKeys[tokenId]) {
+      setShowKeys((prev) => ({ ...prev, [tokenId]: false }));
+      return;
+    }
+
+    const fullKey = await fetchTokenKey(record);
+    if (fullKey) {
+      setShowKeys((prev) => ({ ...prev, [tokenId]: true }));
+    }
+  };
+
+  const copyTokenKey = async (record) => {
+    const fullKey = await fetchTokenKey(record);
+    await copyText(`sk-${fullKey}`);
+  };
+
   // Open link function for chat integrations
   const onOpenLink = async (type, url, record) => {
+    const fullKey = await fetchTokenKey(record);
     if (url && url.startsWith('ccswitch')) {
-      openCCSwitchModal(record.key);
+      openCCSwitchModal(fullKey);
       return;
     }
     if (url && url.startsWith('fluent')) {
-      openFluentNotification(record.key);
+      openFluentNotification(fullKey);
       return;
     }
     let status = localStorage.getItem('status');
@@ -145,7 +222,7 @@ export const useTokensData = (openFluentNotification, openCCSwitchModal) => {
       let cherryConfig = {
         id: 'new-api',
         baseUrl: serverAddress,
-        apiKey: 'sk-' + record.key,
+        apiKey: `sk-${fullKey}`,
       };
       let encodedConfig = encodeURIComponent(
         encodeToBase64(JSON.stringify(cherryConfig)),
@@ -155,7 +232,7 @@ export const useTokensData = (openFluentNotification, openCCSwitchModal) => {
       let aionuiConfig = {
         platform: 'new-api',
         baseUrl: serverAddress,
-        apiKey: 'sk-' + record.key,
+        apiKey: `sk-${fullKey}`,
       };
       let encodedConfig = encodeURIComponent(
         encodeToBase64(JSON.stringify(aionuiConfig)),
@@ -164,7 +241,7 @@ export const useTokensData = (openFluentNotification, openCCSwitchModal) => {
     } else {
       let encodedServerAddress = encodeURIComponent(serverAddress);
       url = url.replaceAll('{address}', encodedServerAddress);
-      url = url.replaceAll('{key}', 'sk-' + record.key);
+      url = url.replaceAll('{key}', `sk-${fullKey}`);
     }
 
     window.open(url, '_blank');
@@ -314,48 +391,28 @@ export const useTokensData = (openFluentNotification, openCCSwitchModal) => {
   };
 
   // Batch copy tokens
-  const batchCopyTokens = (copyType) => {
+  const batchCopyTokens = async (copyType) => {
     if (selectedKeys.length === 0) {
       showError(t('请至少选择一个令牌！'));
       return;
     }
-
-    Modal.info({
-      title: t('复制令牌'),
-      icon: null,
-      content: t('请选择你的复制方式'),
-      footer: (
-        <div className='flex gap-2'>
-          <button
-            className='px-3 py-1 bg-gray-200 rounded'
-            onClick={async () => {
-              let content = '';
-              for (let i = 0; i < selectedKeys.length; i++) {
-                content +=
-                  selectedKeys[i].name + '    sk-' + selectedKeys[i].key + '\n';
-              }
-              await copyText(content);
-              Modal.destroyAll();
-            }}
-          >
-            {t('名称+密钥')}
-          </button>
-          <button
-            className='px-3 py-1 bg-blue-500 text-white rounded'
-            onClick={async () => {
-              let content = '';
-              for (let i = 0; i < selectedKeys.length; i++) {
-                content += 'sk-' + selectedKeys[i].key + '\n';
-              }
-              await copyText(content);
-              Modal.destroyAll();
-            }}
-          >
-            {t('仅密钥')}
-          </button>
-        </div>
-      ),
-    });
+    try {
+      const keys = await Promise.all(
+        selectedKeys.map((token) => fetchTokenKey(token, { suppressError: true })),
+      );
+      let content = '';
+      for (let i = 0; i < selectedKeys.length; i++) {
+        const fullKey = keys[i];
+        if (copyType === 'name+key') {
+          content += `${selectedKeys[i].name}    sk-${fullKey}\n`;
+        } else {
+          content += `sk-${fullKey}\n`;
+        }
+      }
+      await copyText(content);
+    } catch (error) {
+      showError(error?.message || t('复制令牌失败'));
+    }
   };
 
   // Initialize data
@@ -392,6 +449,8 @@ export const useTokensData = (openFluentNotification, openCCSwitchModal) => {
     setCompactMode,
     showKeys,
     setShowKeys,
+    resolvedTokenKeys,
+    loadingTokenKeys,
 
     // Form state
     formApi,
@@ -403,6 +462,9 @@ export const useTokensData = (openFluentNotification, openCCSwitchModal) => {
     loadTokens,
     refresh,
     copyText,
+    fetchTokenKey,
+    toggleTokenVisibility,
+    copyTokenKey,
     onOpenLink,
     manageToken,
     searchTokens,