更新至 v0.1.1_20251209 版本

App.tsx

@@ -1,9 +1,10 @@
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { generateSql } from './services/gemini';
 import { Button } from './components/Button';
 import { TextArea } from './components/TextArea';
 import { Select } from './components/Select';
+import { SettingsModal } from './components/SettingsModal';
 import { LoadingState, DatabaseType } from './types';
 
 // Default placeholders to help the user understand what to input
@@ -58,6 +59,23 @@ const App: React.FC = () => {
   const [status, setStatus] = useState<LoadingState>(LoadingState.IDLE);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
 
+  // API Key Management
+  const [apiKey, setApiKey] = useState<string>('');
+  const [isSettingsOpen, setIsSettingsOpen] = useState<boolean>(false);
+
+  useEffect(() => {
+    const storedKey = localStorage.getItem('user_api_key');
+    if (storedKey) {
+      setApiKey(storedKey);
+    }
+  }, []);
+
+  const handleSaveApiKey = (key: string) => {
+    setApiKey(key);
+    localStorage.setItem('user_api_key', key);
+    setIsSettingsOpen(false);
+  };
+
   const handleGenerate = async () => {
     if (!tableStructure.trim() || !requirement.trim()) {
       setErrorMsg("请至少填写表结构和查询需求。");
@@ -73,7 +91,8 @@ const App: React.FC = () => {
         tableStructure,
         dictionaryData,
         requirement,
-        databaseType
+        databaseType,
+        apiKey // Pass the custom API key
       });
       setGeneratedSql(sql);
       setStatus(LoadingState.SUCCESS);
@@ -86,12 +105,18 @@ const App: React.FC = () => {
   const copyToClipboard = () => {
     if (generatedSql) {
       navigator.clipboard.writeText(generatedSql);
-      // Optional: Show a toast here, but for now we'll just rely on user action
     }
   };
 
   return (
     <div className="flex flex-col h-screen bg-slate-50">
+      <SettingsModal 
+        isOpen={isSettingsOpen} 
+        onClose={() => setIsSettingsOpen(false)} 
+        onSave={handleSaveApiKey}
+        currentApiKey={apiKey}
+      />
+
       {/* Header */}
       <header className="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between shrink-0">
         <div className="flex items-center gap-3">
@@ -106,7 +131,13 @@ const App: React.FC = () => {
           </div>
         </div>
         <div>
-           {/* Placeholder for future user settings or profile */}
+           <Button variant="outline" onClick={() => setIsSettingsOpen(true)} className="flex items-center gap-2 text-xs md:text-sm">
+             <svg className="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+             </svg>
+             设置 API Key
+           </Button>
         </div>
       </header>
 
@@ -225,4 +256,4 @@ const App: React.FC = () => {
   );
 };
 
-export default App;
+export default App;