65 lines
2.5 KiB
TypeScript
65 lines
2.5 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { Button } from './Button';
|
||
|
||
interface SettingsModalProps {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
onSave: (apiKey: string) => void;
|
||
currentApiKey: string;
|
||
}
|
||
|
||
export const SettingsModal: React.FC<SettingsModalProps> = ({ isOpen, onClose, onSave, currentApiKey }) => {
|
||
const [key, setKey] = useState(currentApiKey);
|
||
|
||
// Sync internal state when prop changes or modal opens
|
||
useEffect(() => {
|
||
setKey(currentApiKey);
|
||
}, [currentApiKey, isOpen]);
|
||
|
||
if (!isOpen) return null;
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm p-4">
|
||
<div className="bg-white rounded-xl shadow-2xl w-full max-w-md overflow-hidden transform transition-all">
|
||
<div className="bg-slate-50 px-6 py-4 border-b border-slate-100 flex justify-between items-center">
|
||
<h3 className="text-lg font-bold text-slate-800">设置</h3>
|
||
<button onClick={onClose} className="text-slate-400 hover:text-slate-600">
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div className="p-6 space-y-4">
|
||
<div>
|
||
<label htmlFor="apiKey" className="block text-sm font-semibold text-slate-700 mb-2">
|
||
Google Gemini API Key
|
||
</label>
|
||
<input
|
||
type="password"
|
||
id="apiKey"
|
||
value={key}
|
||
onChange={(e) => setKey(e.target.value)}
|
||
placeholder="AIzaSy..."
|
||
className="w-full px-3 py-2 border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 text-sm font-mono"
|
||
/>
|
||
<p className="mt-2 text-xs text-slate-500">
|
||
您的 Key 仅存储在本地浏览器中，用于直接调用 Google Gemini API。
|
||
<br/>
|
||
如果留空，将尝试使用系统默认配置。
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-slate-50 px-6 py-4 border-t border-slate-100 flex justify-end gap-3">
|
||
<Button variant="outline" onClick={onClose}>
|
||
取消
|
||
</Button>
|
||
<Button onClick={() => onSave(key)}>
|
||
保存配置
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}; |