From 557aef7a7f9a3bc98ff98afc98363508c988fa68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=B4=BA?= <xiaohe@zfxt.top>
Date: Sat, 6 Sep 2025 12:35:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9api=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ApiKeyCard.tsx | 57 ++++++++++++++++++++++----
 1 file changed, 48 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/ApiKeyCard.tsx b/frontend/src/components/ApiKeyCard.tsx
index 38c019b..75d3b0a 100644
--- a/frontend/src/components/ApiKeyCard.tsx
+++ b/frontend/src/components/ApiKeyCard.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { CheckCircle2, XCircle, Loader2, Trash2, RefreshCw } from 'lucide-react';
+import { CheckCircle2, XCircle, Loader2, Trash2, RefreshCw, Copy, Eye, EyeOff } from 'lucide-react';
 import { apiKeyService } from '../services/api';
 import type { ApiKey } from '../types/api';
 
@@ -12,6 +12,8 @@ interface ApiKeyCardProps {
 export function ApiKeyCard({ apiKey, onUpdate, onDelete }: ApiKeyCardProps) {
   const [isValidating, setIsValidating] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
+  const [showFullKey, setShowFullKey] = useState(false);
+  const [copied, setCopied] = useState(false);
 
   const handleValidate = async () => {
     setIsValidating(true);
@@ -41,6 +43,16 @@ export function ApiKeyCard({ apiKey, onUpdate, onDelete }: ApiKeyCardProps) {
     }
   };
 
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(apiKey.key);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (error) {
+      console.error('复制失败:', error);
+    }
+  };
+
   const formatCurrency = (amount: number) => {
     return new Intl.NumberFormat('zh-CN', {
       style: 'currency',
@@ -54,6 +66,14 @@ export function ApiKeyCard({ apiKey, onUpdate, onDelete }: ApiKeyCardProps) {
     return new Date(dateString).toLocaleString('zh-CN');
   };
 
+  const maskApiKey = (key: string) => {
+    if (key.length <= 8) return key; // 如果很短就直接显示
+    const start = key.slice(0, 4);
+    const end = key.slice(-4);
+    const masked = '*'.repeat(Math.max(0, key.length - 8));
+    return showFullKey ? key : `${start}${masked}${end}`;
+  };
+
   return (
     <div className="bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-shadow">
       <div className="p-6">
@@ -69,11 +89,25 @@ export function ApiKeyCard({ apiKey, onUpdate, onDelete }: ApiKeyCardProps) {
             )}
           </div>
           
-          <div className="flex items-center ml-4">
+          <div className="flex items-center ml-4 space-x-1">
+            <button
+              onClick={handleCopy}
+              className="p-2 text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
+              title="复制API Key"
+            >
+              <Copy className={`w-4 h-4 ${copied ? 'text-green-600' : ''}`} />
+            </button>
+            <button
+              onClick={() => setShowFullKey(!showFullKey)}
+              className="p-2 text-blue-600 hover:bg-blue-50 rounded-md transition-colors"
+              title={showFullKey ? "隐藏" : "显示"}
+            >
+              {showFullKey ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+            </button>
             <button
               onClick={handleValidate}
               disabled={isValidating}
-              className="p-2 mr-2 text-blue-600 hover:bg-blue-50 rounded-md disabled:opacity-50"
+              className="p-2 text-blue-600 hover:bg-blue-50 rounded-md disabled:opacity-50"
               title="验证API Key"
             >
               <RefreshCw className={`w-4 h-4 ${isValidating ? 'animate-spin' : ''}`} />
@@ -101,21 +135,26 @@ export function ApiKeyCard({ apiKey, onUpdate, onDelete }: ApiKeyCardProps) {
               无效
             </span>
           )}
+          {copied && (
+            <span className="ml-2 text-xs text-green-600">✓ 已复制</span>
+          )}
         </div>
 
-        {/* 直接显示完整的API Key */} 
-        <div className="mb-3">
+        {/* API Key 显示区域 */}
+        <div className="mb-4">
           <label className="block text-sm font-medium text-gray-700 mb-1">API Key:</label>
-          <div className="p-2 bg-gray-50 border border-gray-200 rounded-md text-xs font-mono text-gray-600 break-all">
-            {apiKey.key}
+          <div className="flex items-center space-x-2">
+            <div className="flex-1 p-2 bg-gray-50 border border-gray-200 rounded-md text-xs font-mono text-gray-600 break-all cursor-text select-all">
+              {maskApiKey(apiKey.key)}
+            </div>
           </div>
         </div>
 
-        {apiKey.error ? (
+        {apiKey.error && (
           <div className="mb-3 p-2 bg-red-50 border border-red-200 rounded-md">
             <p className="text-sm text-red-600">{apiKey.error}</p>
           </div>
-        ) : null}
+        )}
 
         {apiKey.balance !== undefined && (
           <div className="mb-3 p-3 bg-gray-50 rounded-md">