From b8169347a4790e05b31d5453c72f1b4054f01357 Mon Sep 17 00:00:00 2001
From: MikiVL <mikivl@MikiVLdeMacBook-Air.local>
Date: Tue, 5 May 2026 03:23:50 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20API=20Key=20=E8=BE=93=E5=85=A5=E6=A1=86?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=20password=20=E7=B1=BB=E5=9E=8B=E5=B9=B6?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=88=87=E6=8D=A2=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ai/ModelSettingsModal.tsx | 45 ++++++++++++++++++------
 1 file changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/components/ai/ModelSettingsModal.tsx b/src/components/ai/ModelSettingsModal.tsx
index 6cb2935..9978be7 100644
--- a/src/components/ai/ModelSettingsModal.tsx
+++ b/src/components/ai/ModelSettingsModal.tsx
@@ -18,6 +18,7 @@ export function ModelSettingsModal({ onClose }: { onClose: () => void }) {
   const [formError, setFormError] = useState('')
   const [saving, setSaving] = useState(false)
   const [expandedId, setExpandedId] = useState<string | null>(null)
+  const [showKey, setShowKey] = useState(false)
 
   const fetchModels = async () => {
     try {
@@ -188,16 +189,40 @@ export function ModelSettingsModal({ onClose }: { onClose: () => void }) {
               ].map(f => (
                 <div key={f.key}>
                   <label className="text-xs" style={{ color: 'var(--text-faint)' }}>{f.label}</label>
-                  <input
-                    type={f.key === 'apiKey' ? 'password' : 'text'}
-                    value={form[f.key as keyof typeof form]}
-                    onChange={e => setForm(prev => ({ ...prev, [f.key]: e.target.value }))}
-                    placeholder={f.placeholder}
-                    className="w-full mt-0.5 px-3 py-1.5 rounded-lg text-sm outline-none"
-                    style={{ background: 'var(--bg-muted)', border: '1px solid var(--border)', color: 'var(--text)' }}
-                    onFocus={e => (e.currentTarget.style.borderColor = 'var(--accent)')}
-                    onBlur={e => (e.currentTarget.style.borderColor = 'var(--border)')}
-                  />
+                  {f.key === 'apiKey' ? (
+                    <div className="relative">
+                      <input
+                        type={showKey ? 'text' : 'password'}
+                        autoComplete="off"
+                        value={form.apiKey}
+                        onChange={e => setForm(prev => ({ ...prev, apiKey: e.target.value }))}
+                        placeholder={f.placeholder}
+                        className="w-full mt-0.5 px-3 py-1.5 rounded-lg text-sm outline-none pr-12"
+                        style={{ background: 'var(--bg-muted)', border: '1px solid var(--border)', color: 'var(--text)' }}
+                        onFocus={e => (e.currentTarget.style.borderColor = 'var(--accent)')}
+                        onBlur={e => (e.currentTarget.style.borderColor = 'var(--border)')}
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setShowKey(v => !v)}
+                        className="absolute right-2 top-1/2 -translate-y-1/2 text-xs"
+                        style={{ color: 'var(--text-faint)' }}
+                      >
+                        {showKey ? '隐藏' : '显示'}
+                      </button>
+                    </div>
+                  ) : (
+                    <input
+                      type="text"
+                      value={form[f.key as keyof typeof form]}
+                      onChange={e => setForm(prev => ({ ...prev, [f.key]: e.target.value }))}
+                      placeholder={f.placeholder}
+                      className="w-full mt-0.5 px-3 py-1.5 rounded-lg text-sm outline-none"
+                      style={{ background: 'var(--bg-muted)', border: '1px solid var(--border)', color: 'var(--text)' }}
+                      onFocus={e => (e.currentTarget.style.borderColor = 'var(--accent)')}
+                      onBlur={e => (e.currentTarget.style.borderColor = 'var(--border)')}
+                    />
+                  )}
                 </div>
               ))}
               {formError && <p className="text-xs" style={{ color: '#ef4444' }}>{formError}</p>}