新增设置面板

src/components/CustomTitleBar.tsx

@@ -1,10 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { Button } from './ui/Button';
-import { HelpCircle, Minus, Square, X } from 'lucide-react';
+import { HelpCircle, Minus, Square, X, Settings } from 'lucide-react';
 import { InfoModal } from './InfoModal';
+import { SettingsModal } from './SettingsModal';
 
 export const CustomTitleBar: React.FC = () => {
   const [showInfoModal, setShowInfoModal] = useState(false);
+  const [showSettingsModal, setShowSettingsModal] = useState(false);
   const [isMaximized, setIsMaximized] = useState(false);
 
   // 检查窗口是否最大化
@@ -58,6 +60,15 @@ export const CustomTitleBar: React.FC = () => {
         </div>
 
         <div className="flex items-center space-x-1 non-draggable">
+          <Button 
+            variant="ghost" 
+            size="icon"
+            onClick={() => setShowSettingsModal(true)}
+            className="h-7 w-7 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full card non-draggable"
+          >
+            <Settings className="h-4 w-4" />
+          </Button>
+          
           <Button 
             variant="ghost" 
             size="icon"
@@ -102,6 +113,7 @@ export const CustomTitleBar: React.FC = () => {
       </header>
       
       <InfoModal open={showInfoModal} onOpenChange={setShowInfoModal} />
+      <SettingsModal open={showSettingsModal} onOpenChange={setShowSettingsModal} />
     </>
   );
 };

src/components/Header.tsx

@@ -1,10 +1,12 @@
 import React, { useState } from 'react';
 import { Button } from './ui/Button';
-import { HelpCircle } from 'lucide-react';
+import { HelpCircle, Settings } from 'lucide-react';
 import { InfoModal } from './InfoModal';
+import { SettingsModal } from './SettingsModal';
 
 export const Header: React.FC = () => {
   const [showInfoModal, setShowInfoModal] = useState(false);
+  const [showSettingsModal, setShowSettingsModal] = useState(false);
 
   return (
     <>
@@ -19,6 +21,14 @@ export const Header: React.FC = () => {
         </div>
 
         <div className="flex items-center space-x-1">
+          <Button 
+            variant="ghost" 
+            size="icon"
+            onClick={() => setShowSettingsModal(true)}
+            className="h-7 w-7 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full card"
+          >
+            <Settings className="h-4 w-4" />
+          </Button>
           <Button 
             variant="ghost" 
             size="icon"
@@ -31,6 +41,7 @@ export const Header: React.FC = () => {
       </header>
       
       <InfoModal open={showInfoModal} onOpenChange={setShowInfoModal} />
+      <SettingsModal open={showSettingsModal} onOpenChange={setShowSettingsModal} />
     </>
   );
 };

src/components/ImageCanvas.tsx

@@ -5,6 +5,7 @@ import type { Stage as StageType } from 'konva/lib/Stage';
 import { useAppStore } from '../store/useAppStore';
 import { Button } from './ui/Button';
 import { ZoomIn, ZoomOut, RotateCcw, Download } from 'lucide-react';
+import { downloadImage } from '../utils/imageUtils';
 
 export const ImageCanvas: React.FC = () => {
   const {
@@ -392,7 +393,7 @@ export const ImageCanvas: React.FC = () => {
     }
   };
 
-  const handleDownload = () => {
+  const handleDownload = async () => {
     // 首先尝试从当前选中的生成记录或编辑记录中获取上传后的URL
     const { selectedGenerationId, selectedEditId, currentProject } = useAppStore.getState();
     
@@ -409,40 +410,11 @@ export const ImageCanvas: React.FC = () => {
       // 下载第一个上传结果（通常是生成的图像）
       const uploadResult = selectedRecord.uploadResults[0];
       if (uploadResult.success && uploadResult.url) {
-        // 使用fetch获取图像数据并创建Blob URL以确保正确下载
-        // 添加更多缓存控制头以绕过CDN缓存
-        fetch(uploadResult.url, { 
-          headers: { 
-            'Cache-Control': 'no-cache, no-store, must-revalidate',
-            'Pragma': 'no-cache',
-            'Expires': '0'
-          } 
-        })
-          .then(response => response.blob())
-          .then(blob => {
-            const url = URL.createObjectURL(blob);
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = `nano-banana-${Date.now()}.png`;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            URL.revokeObjectURL(url);
-          })
-          .catch(error => {
-            console.error('下载图像失败:', error);
-            // 如果fetch失败，回退到直接使用a标签
-            const link = document.createElement('a');
-            if (uploadResult.url) {
-              link.href = uploadResult.url;
-              link.download = `nano-banana-${Date.now()}.png`;
-              link.target = '_blank';
-              document.body.appendChild(link);
-              link.click();
-              document.body.removeChild(link);
-            }
-          });
-        
+        try {
+          await downloadImage(uploadResult.url, `nano-banana-${Date.now()}.png`);
+        } catch (error) {
+          console.error('下载图像失败:', error);
+        }
         // 立即返回
         return;
       }
@@ -469,86 +441,15 @@ export const ImageCanvas: React.FC = () => {
         
         // 如果Konva下载失败，回退到下载原始图像
         if (canvasImage) {
-          // 处理不同类型的URL
-          if (canvasImage.startsWith('data:')) {
-            // base64格式
-            const link = document.createElement('a');
-            link.href = canvasImage;
-            link.download = `nano-banana-${Date.now()}.png`;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-          } else if (canvasImage.startsWith('blob:')) {
-            // Blob URL格式
-            // 使用fetch获取图像数据并创建Blob URL以确保正确下载
-            // 添加更多缓存控制头以绕过CDN缓存
-            fetch(canvasImage, { 
-              headers: { 
-                'Cache-Control': 'no-cache, no-store, must-revalidate',
-                'Pragma': 'no-cache',
-                'Expires': '0'
-              } 
-            })
-              .then(response => response.blob())
-              .then(blob => {
-                const url = URL.createObjectURL(blob);
-                const link = document.createElement('a');
-                link.href = url;
-                link.download = `nano-banana-${Date.now()}.png`;
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
-                URL.revokeObjectURL(url);
-              })
-              .catch(error => {
-                console.error('下载图像失败:', error);
-                // 如果fetch失败，回退到直接使用a标签
-                const link = document.createElement('a');
-                link.href = canvasImage;
-                link.download = `nano-banana-${Date.now()}.png`;
-                link.target = '_blank';
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
-              });
-          } else {
-            // 普通URL格式
-            // 使用fetch获取图像数据并创建Blob URL以确保正确下载
-            // 添加更多缓存控制头以绕过CDN缓存
-            fetch(canvasImage, { 
-              headers: { 
-                'Cache-Control': 'no-cache, no-store, must-revalidate',
-                'Pragma': 'no-cache',
-                'Expires': '0'
-              } 
-            })
-              .then(response => response.blob())
-              .then(blob => {
-                const url = URL.createObjectURL(blob);
-                const link = document.createElement('a');
-                link.href = url;
-                link.download = `nano-banana-${Date.now()}.png`;
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
-                URL.revokeObjectURL(url);
-              })
-              .catch(error => {
-                console.error('下载图像失败:', error);
-                // 如果fetch失败，回退到直接使用a标签
-                const link = document.createElement('a');
-                link.href = canvasImage;
-                link.download = `nano-banana-${Date.now()}.png`;
-                link.target = '_blank';
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
-              });
+          try {
+            await downloadImage(canvasImage, `nano-banana-${Date.now()}.png`);
+          } catch (error) {
+            console.error('下载图像失败:', error);
           }
         }
       }
     }
-  };
+  };;
 
   return (
     <div className="flex flex-col h-full">

src/components/SettingsModal.tsx

@@ -0,0 +1,167 @@
+import React, { useState, useEffect } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { X, Settings } from 'lucide-react';
+import { Button } from './ui/Button';
+
+interface SettingsModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export const SettingsModal: React.FC<SettingsModalProps> = ({ open, onOpenChange }) => {
+  const [accessToken, setAccessToken] = useState('');
+  const [geminiApiKey, setGeminiApiKey] = useState('');
+  const [uploadAssetUrl, setUploadAssetUrl] = useState('');
+
+  // 组件挂载时从localStorage加载设置
+  useEffect(() => {
+    if (open) {
+      const savedAccessToken = localStorage.getItem('VITE_ACCESS_TOKEN') || '';
+      const savedGeminiApiKey = localStorage.getItem('VITE_GEMINI_API_KEY') || '';
+      const savedUploadAssetUrl = localStorage.getItem('VITE_UPLOAD_ASSET_URL') || '';
+      
+      setAccessToken(savedAccessToken);
+      setGeminiApiKey(savedGeminiApiKey);
+      setUploadAssetUrl(savedUploadAssetUrl);
+    }
+  }, [open]);
+
+  const handleSave = () => {
+    // 保存到localStorage
+    if (accessToken) {
+      localStorage.setItem('VITE_ACCESS_TOKEN', accessToken);
+    } else {
+      localStorage.removeItem('VITE_ACCESS_TOKEN');
+    }
+    
+    if (geminiApiKey) {
+      localStorage.setItem('VITE_GEMINI_API_KEY', geminiApiKey);
+    } else {
+      localStorage.removeItem('VITE_GEMINI_API_KEY');
+    }
+    
+    if (uploadAssetUrl) {
+      localStorage.setItem('VITE_UPLOAD_ASSET_URL', uploadAssetUrl);
+    } else {
+      localStorage.removeItem('VITE_UPLOAD_ASSET_URL');
+    }
+    
+    // 显示保存成功的提示
+    alert('设置已保存！');
+    
+    // 关闭模态框
+    onOpenChange(false);
+  };
+
+  const handleReset = () => {
+    // 重置为默认值（环境变量中的值）
+    const defaultAccessToken = import.meta.env.VITE_ACCESS_TOKEN || '';
+    const defaultGeminiApiKey = import.meta.env.VITE_GEMINI_API_KEY || '';
+    const defaultUploadAssetUrl = import.meta.env.VITE_UPLOAD_ASSET_URL || '';
+    
+    setAccessToken(defaultAccessToken);
+    setGeminiApiKey(defaultGeminiApiKey);
+    setUploadAssetUrl(defaultUploadAssetUrl);
+  };
+
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 z-50 animate-in fade-in duration-200" />
+        <Dialog.Content className="fixed inset-0 m-auto w-full max-w-md h-fit max-h-[90vh] overflow-y-auto bg-white border border-gray-200 rounded-lg p-6 z-50 animate-in scale-in duration-200">
+          <div className="flex items-center justify-between mb-4">
+            <Dialog.Title className="text-lg font-semibold text-gray-900">
+              设置
+            </Dialog.Title>
+            <Dialog.Close asChild>
+              <Button variant="ghost" size="icon" className="h-6 w-6">
+                <X className="h-4 w-4" />
+              </Button>
+            </Dialog.Close>
+          </div>
+          
+          <div className="space-y-6">
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <label htmlFor="accessToken" className="text-sm font-medium text-gray-700">
+                  访问令牌
+                </label>
+                <input
+                  id="accessToken"
+                  type="password"
+                  value={accessToken}
+                  onChange={(e) => setAccessToken(e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent"
+                  placeholder="输入访问令牌"
+                />
+                <p className="text-xs text-gray-500">
+                  用于图像上传功能的访问令牌
+                </p>
+              </div>
+              
+              <div className="space-y-2">
+                <label htmlFor="geminiApiKey" className="text-sm font-medium text-gray-700">
+                  Gemini API 密钥
+                </label>
+                <input
+                  id="geminiApiKey"
+                  type="password"
+                  value={geminiApiKey}
+                  onChange={(e) => setGeminiApiKey(e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent"
+                  placeholder="输入Gemini API密钥"
+                />
+                <p className="text-xs text-gray-500">
+                  用于AI图像生成和编辑的Google Gemini API密钥
+                </p>
+              </div>
+              
+              <div className="space-y-2">
+                <label htmlFor="uploadAssetUrl" className="text-sm font-medium text-gray-700">
+                  上传资源URL
+                </label>
+                <input
+                  id="uploadAssetUrl"
+                  type="text"
+                  value={uploadAssetUrl}
+                  onChange={(e) => setUploadAssetUrl(e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-transparent"
+                  placeholder="输入上传资源URL前缀"
+                />
+                <p className="text-xs text-gray-500">
+                  图像上传后返回的URL前缀
+                </p>
+              </div>
+            </div>
+            
+            <div className="flex justify-between pt-4">
+              <Button
+                variant="outline"
+                onClick={handleReset}
+                className="px-4 py-2 text-sm"
+              >
+                重置为默认值
+              </Button>
+              <div className="space-x-2">
+                <Dialog.Close asChild>
+                  <Button
+                    variant="outline"
+                    className="px-4 py-2 text-sm"
+                  >
+                    取消
+                  </Button>
+                </Dialog.Close>
+                <Button
+                  onClick={handleSave}
+                  className="px-4 py-2 text-sm bg-yellow-500 hover:bg-yellow-600 text-white"
+                >
+                  保存设置
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};