From db80aebadca466302976fa3f34b3efbe0b9a7a21 Mon Sep 17 00:00:00 2001
From: root <root@DESKTOP-KRTCPNH.localdomain>
Date: Sun, 1 Feb 2026 20:32:59 +0800
Subject: [PATCH] =?UTF-8?q?feat(webui):=20=E6=B7=BB=E5=8A=A0=20API=20?=
 =?UTF-8?q?=E5=AF=86=E9=92=A5=E8=87=AA=E5=8A=A8=E7=94=9F=E6=88=90=E5=92=8C?=
 =?UTF-8?q?=E5=A4=8D=E5=88=B6=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加密钥弹窗增加「生成」按钮，自动生成 sk-xxx 格式随机密钥
- 密钥列表添加复制按钮，点击复制完整密钥到剪贴板
- 复制成功显示内联 toast 提示
---
 webui/src/components/AccountManager.jsx | 66 ++++++++++++++++++-------
 1 file changed, 49 insertions(+), 17 deletions(-)

diff --git a/webui/src/components/AccountManager.jsx b/webui/src/components/AccountManager.jsx
index 54f669e..66658a0 100644
--- a/webui/src/components/AccountManager.jsx
+++ b/webui/src/components/AccountManager.jsx
@@ -10,7 +10,9 @@ import {
     MoreHorizontal,
     X,
     Server,
-    ShieldCheck
+    ShieldCheck,
+    Copy,
+    Check
 } from 'lucide-react'
 import clsx from 'clsx'
 
@@ -18,6 +20,7 @@ export default function AccountManager({ config, onRefresh, onMessage, authFetch
     const [showAddKey, setShowAddKey] = useState(false)
     const [showAddAccount, setShowAddAccount] = useState(false)
     const [newKey, setNewKey] = useState('')
+    const [copiedKey, setCopiedKey] = useState(null)
     const [newAccount, setNewAccount] = useState({ email: '', mobile: '', password: '' })
     const [loading, setLoading] = useState(false)
     const [validating, setValidating] = useState({})
@@ -298,15 +301,34 @@ export default function AccountManager({ config, onRefresh, onMessage, authFetch
                     {config.keys?.length > 0 ? (
                         config.keys.map((key, i) => (
                             <div key={i} className="p-4 flex items-center justify-between hover:bg-muted/50 transition-colors group">
-                                <div className="font-mono text-sm bg-muted/50 px-3 py-1 rounded inline-block">
-                                    {key.slice(0, 16)}****
+                                <div className="flex items-center gap-2">
+                                    <div className="font-mono text-sm bg-muted/50 px-3 py-1 rounded inline-block">
+                                        {key.slice(0, 16)}****
+                                    </div>
+                                    {copiedKey === key && (
+                                        <span className="text-xs text-green-500 animate-pulse">已复制</span>
+                                    )}
+                                </div>
+                                <div className="flex items-center gap-1">
+                                    <button
+                                        onClick={() => {
+                                            navigator.clipboard.writeText(key)
+                                            setCopiedKey(key)
+                                            setTimeout(() => setCopiedKey(null), 2000)
+                                        }}
+                                        className="p-2 text-muted-foreground hover:text-primary hover:bg-primary/10 rounded-md transition-colors opacity-0 group-hover:opacity-100"
+                                        title="复制密钥"
+                                    >
+                                        {copiedKey === key ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
+                                    </button>
+                                    <button
+                                        onClick={() => deleteKey(key)}
+                                        className="p-2 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-md transition-colors opacity-0 group-hover:opacity-100"
+                                        title="删除密钥"
+                                    >
+                                        <Trash2 className="w-4 h-4" />
+                                    </button>
                                 </div>
-                                <button
-                                    onClick={() => deleteKey(key)}
-                                    className="p-2 text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-md transition-colors opacity-0 group-hover:opacity-100"
-                                >
-                                    <Trash2 className="w-4 h-4" />
-                                </button>
                             </div>
                         ))
                     ) : (
@@ -445,14 +467,24 @@ export default function AccountManager({ config, onRefresh, onMessage, authFetch
                             <div className="p-6 space-y-4">
                                 <div>
                                     <label className="block text-sm font-medium mb-1.5">新密钥值</label>
-                                    <input
-                                        type="text"
-                                        className="input-field bg-[#09090b]"
-                                        placeholder="输入自定义 API 密钥"
-                                        value={newKey}
-                                        onChange={e => setNewKey(e.target.value)}
-                                        autoFocus
-                                    />
+                                    <div className="flex gap-2">
+                                        <input
+                                            type="text"
+                                            className="input-field bg-[#09090b] flex-1"
+                                            placeholder="输入自定义 API 密钥"
+                                            value={newKey}
+                                            onChange={e => setNewKey(e.target.value)}
+                                            autoFocus
+                                        />
+                                        <button
+                                            type="button"
+                                            onClick={() => setNewKey('sk-' + crypto.randomUUID().replace(/-/g, ''))}
+                                            className="px-3 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/80 transition-colors text-sm font-medium border border-border whitespace-nowrap"
+                                        >
+                                            生成
+                                        </button>
+                                    </div>
+                                    <p className="text-xs text-muted-foreground mt-1.5">点击「生成」自动创建随机密钥</p>
                                 </div>
                                 <div className="flex justify-end gap-2 pt-2">
                                     <button onClick={() => setShowAddKey(false)} className="px-4 py-2 rounded-lg border border-border hover:bg-secondary transition-colors text-sm font-medium">取消</button>