更新至 v0.1.1_20251209 版本

2025-12-09 22:38:05 +08:00
parent 2c7cbac954
commit 4773a9239c
6 changed files with 190 additions and 23 deletions
--- a/components/SettingsModal.tsx
+++ b/components/SettingsModal.tsx
@@ -0,0 +1,65 @@
+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>
+  );
+};