MikiVL/studynote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: API Key 输入框改为 password 类型并支持切换显示

Browse Source
This commit is contained in:
MikiVL 2026-05-05 03:23:50 +08:00
parent c26875cc15
commit b8169347a4
1 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/ai/ModelSettingsModal.tsx
View File

@ -18,6 +18,7 @@ export function ModelSettingsModal({ onClose }: { onClose: () => void }) {
const [formError, setFormError] = useState('') const [formError, setFormError] = useState('')
const [saving, setSaving] = useState(false) const [saving, setSaving] = useState(false)
const [expandedId, setExpandedId] = useState<string | null>(null) const [expandedId, setExpandedId] = useState<string | null>(null)
const [showKey, setShowKey] = useState(false)
const fetchModels = async () => { const fetchModels = async () => {
try { try {
@ -188,16 +189,40 @@ export function ModelSettingsModal({ onClose }: { onClose: () => void }) {
].map(f => ( ].map(f => (
<div key={f.key}> <div key={f.key}>
<label className="text-xs" style={{ color: 'var(--text-faint)' }}>{f.label}</label> <label className="text-xs" style={{ color: 'var(--text-faint)' }}>{f.label}</label>
<input {f.key === 'apiKey' ? (
type={f.key === 'apiKey' ? 'password' : 'text'} <div className="relative">
value={form[f.key as keyof typeof form]} <input
onChange={e => setForm(prev => ({ ...prev, [f.key]: e.target.value }))} type={showKey ? 'text' : 'password'}
placeholder={f.placeholder} autoComplete="off"
className="w-full mt-0.5 px-3 py-1.5 rounded-lg text-sm outline-none" value={form.apiKey}
style={{ background: 'var(--bg-muted)', border: '1px solid var(--border)', color: 'var(--text)' }} onChange={e => setForm(prev => ({ ...prev, apiKey: e.target.value }))}
onFocus={e => (e.currentTarget.style.borderColor = 'var(--accent)')} placeholder={f.placeholder}
onBlur={e => (e.currentTarget.style.borderColor = 'var(--border)')} 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> </div>
))} ))}
{formError && <p className="text-xs" style={{ color: '#ef4444' }}>{formError}</p>} {formError && <p className="text-xs" style={{ color: '#ef4444' }}>{formError}</p>}