修改api显示逻辑

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">