新增设置面板

IFLOW.md

@@ -12,8 +12,9 @@
 - **AI 集成**: Google Generative AI SDK (Gemini)
 - **数据存储**: IndexedDB (通过 idb-keyval)
 - **构建工具**: Vite
+- **桌面应用**: Electron
 
-项目结构遵循标准的 React 应用组织方式，主要源代码位于 `src/` 目录下。
+项目结构遵循标准的 React 应用组织方式，主要源代码位于 `src/` 目录下。该项目同时支持Web和桌面应用（Electron）。
 
 ## 构建和运行
 
@@ -31,15 +32,23 @@
 
 3. **启动开发服务器**:
    ```bash
+   # 启动Web开发服务器
    npm run dev
+   
+   # 启动Electron开发环境
+   npm run electron:dev
    ```
-   访问 `http://localhost:5173` 查看应用。
+   访问 `http://localhost:5173` 查看Web应用。
 
 ### 构建和部署
 
 - **构建生产版本**:
   ```bash
+  # 构建Web版本
   npm run build
+  
+  # 构建Electron桌面应用
+  npm run electron:build
   ```
 
 - **预览生产构建**:
@@ -82,26 +91,39 @@
 src/
 ├── components/          # React 组件
 │   ├── ui/             # 可重用的 UI 组件
+│   │   ├── Button.tsx
+│   │   ├── Input.tsx
+│   │   └── Textarea.tsx
+│   ├── CustomTitleBar.tsx  # 自定义标题栏（用于Electron应用）
+│   ├── Header.tsx          # 应用头部和导航
 │   ├── PromptComposer.tsx  # 提示输入和工具选择
 │   ├── ImageCanvas.tsx     # 使用 Konva 的交互式画布
 │   ├── HistoryPanel.tsx    # 生成历史和变体
-│   ├── Header.tsx          # 应用头部和导航
+│   ├── InfoModal.tsx       # 关于模态框和链接
-│   └── InfoModal.tsx       # 关于模态框和链接
+│   ├── Toast.tsx           # 消息提示组件
+│   └── ToastContext.tsx    # 消息提示上下文
 ├── services/           # 外部服务集成
 │   ├── geminiService.ts    # Gemini API 客户端
-│   ├── uploadService.ts    # 图像上传服务
+│   ├── indexedDBService.ts # IndexedDB 数据库服务
-│   ├── cacheService.ts     # IndexedDB 缓存层
+│   ├── cacheService.ts     # IndexedDB 缓存层（未使用）
-│   └── referenceImageService.ts # 参考图像处理
+│   ├── referenceImageService.ts # 参考图像处理（未使用）
+│   └── uploadService.ts    # 图像上传服务（未使用）
 ├── store/              # Zustand 状态管理
 │   └── useAppStore.ts      # 全局应用状态
 ├── hooks/              # 自定义 React 钩子
 │   ├── useImageGeneration.ts  # 生成和编辑逻辑
-│   └── useKeyboardShortcuts.ts # 键盘导航
+│   ├── useKeyboardShortcuts.ts # 键盘导航
+│   └── useIndexedDBListener.ts # IndexedDB监听器（未使用）
 ├── utils/              # 工具函数
 │   ├── cn.ts              # 类名工具
 │   └── imageUtils.ts      # 图像处理助手
-└── types/              # TypeScript 类型定义
+├── types/              # TypeScript 类型定义
-    └── index.ts           # 核心类型定义
+│   └── index.ts           # 核心类型定义
+└── __tests__/          # 测试文件
+    ├── ImageCanvas.test.tsx
+    ├── PromptComposer.test.tsx
+    ├── useAppStore.test.ts
+    └── useImageGeneration.test.ts
 ```
 
 ### 组件开发
@@ -131,3 +153,49 @@ src/
 4. 彻底测试，确保键盘导航和可访问性
 5. 记录更改，更新 README 并添加内联注释
 6. 遵守 AGPL-3.0 许可证
+
+## 项目特性
+
+### AI 图像生成与编辑
+- 文本到图像生成：使用 Google Gemini 2.5 Flash Image 模型从描述性提示创建图像
+- 对话式编辑：使用自然语言指令修改现有图像
+- 区域感知选择：通过绘制遮罩来针对特定区域进行编辑
+
+### 用户界面
+- 交互式画布：支持平滑缩放、平移和导航大图像
+- 画笔工具：可变画笔尺寸以实现精确的遮罩绘制
+- 响应式设计：在所有设备上都能完美运行
+- 键盘快捷键：使用热键提高工作效率
+
+### 数据管理
+- 生成历史：跟踪所有创作和编辑记录
+- 变体比较：生成并并排比较多个版本
+- 离线缓存：使用 IndexedDB 存储以实现离线资产访问
+- 项目管理：有序存储所有生成的内容
+
+### 部署选项
+- Web 应用：标准的 Web 应用程序，可在浏览器中运行
+- 桌面应用：使用 Electron 构建的桌面应用程序，支持 Windows、macOS 和 Linux
+
+## 依赖包更新
+
+项目已清理未使用的依赖包，当前依赖包括：
+
+### 运行时依赖
+- `@google/genai`: Google Generative AI SDK
+- `@radix-ui/react-dialog`: React 对话框组件
+- `@tanstack/react-query`: 服务端状态管理
+- `class-variance-authority`, `clsx`, `tailwind-merge`: 类名工具
+- `idb-keyval`: IndexedDB 封装库
+- `konva`, `react-konva`: Canvas 图形库
+- `lucide-react`: 图标库
+- `react`, `react-dom`: React 核心库
+- `react-day-picker`: 日期选择器组件
+- `zustand`: 客户端状态管理
+
+### 开发依赖
+- `@eslint/js`, `eslint`, `typescript-eslint`: 代码质量工具
+- `@testing-library/*`: 测试工具
+- `electron-builder`: Electron 应用构建工具
+- `typescript`: TypeScript 编译器
+- `vite`: 构建工具

electron/main.js

@@ -1,11 +1,6 @@
 import { app, BrowserWindow } from 'electron';
 import * as path from 'path';
 
-// Handle creating/removing shortcuts on Windows when installing/uninstalling.
-if (require('electron-squirrel-startup')) {
-  app.quit();
-}
-
 const createWindow = () => {
   // Create the browser window.
   const mainWindow = new BrowserWindow({

electron/main.ts

@@ -1,18 +1,13 @@
 import { app, BrowserWindow, ipcMain } from 'electron';
 import * as path from 'path';
 
-// Handle creating/removing shortcuts on Windows when installing/uninstalling.
-if (require('electron-squirrel-startup')) {
-  app.quit();
-}
-
 let mainWindow: BrowserWindow | null = null;
 
 const createWindow = () => {
   // Create the browser window.
   mainWindow = new BrowserWindow({
-    width: 1200,
+    width: 1600,
-    height: 800,
+    height: 900,
     frame: false, // 隐藏默认的窗口框架
     icon: path.join(__dirname, '../../build/icon.ico'), // 设置应用图标
     webPreferences: {
@@ -25,16 +20,15 @@ const createWindow = () => {
   // and load the index.html of the app.
   if (process.env.VITE_DEV_SERVER_URL) {
     mainWindow.loadURL(process.env.VITE_DEV_SERVER_URL);
+    // 仅在开发环境中打开开发者工具
+    mainWindow.webContents.openDevTools();
   } else {
     // 使用绝对路径从项目根目录的 dist 文件夹加载
     const indexPath = path.join(__dirname, '../../dist/index.html');
     console.log('Loading index.html from:', indexPath);
     mainWindow.loadFile(indexPath);
-  }
+    // 在生产环境中确保关闭开发者工具
-
+    mainWindow.webContents.closeDevTools();
-  // Open the DevTools.
-  if (process.env.VITE_DEV_SERVER_URL) {
-    mainWindow.webContents.openDevTools();
   }
 };
 

package.json

@@ -9,9 +9,8 @@
     "url": "https://git.pandorastudio.cn/yuantao/Nano-Banana-AI-Image-Editor.git"
   },
   "author": {
-    "name": "Mark Fulton",
+    "name": "潘哆呐科技",
-    "email": "markfulton@example.com",
+    "email": "work@pandorastudio.cn"
-    "url": "https://markfulton.com"
   },
   "main": "electron/index.js",
   "scripts": {
@@ -30,15 +29,9 @@
   "dependencies": {
     "@google/genai": "^1.16.0",
     "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-switch": "^1.2.6",
     "@tanstack/react-query": "^5.85.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
-    "electron-squirrel-startup": "^1.0.1",
-    "fabric": "^6.7.1",
     "idb-keyval": "^6.2.2",
     "konva": "^9.3.22",
     "lucide-react": "^0.344.0",
@@ -53,25 +46,13 @@
     "@eslint/js": "^9.9.1",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^30.0.0",
-    "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "autoprefixer": "^10.4.18",
-    "electron": "^38.2.1",
     "electron-builder": "^26.0.12",
     "eslint": "^9.9.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.11",
     "globals": "^15.9.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest-environment-jsdom": "^30.1.2",
-    "postcss": "^8.4.35",
-    "pump": "^3.0.3",
-    "tailwindcss": "^3.4.1",
-    "tar": "^7.4.3",
-    "ts-jest": "^29.4.3",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.3.0",
     "vite": "^5.4.2"

src/App.tsx

@@ -27,6 +27,30 @@ function AppContent() {
   const [previewPosition, setPreviewPosition] = useState<{x: number, y: number} | null>(null);
   const [isPreviewVisible, setIsPreviewVisible] = useState(false);
   
+  // 在挂载时检查localStorage中的设置
+  useEffect(() => {
+    // 检查是否有存储在localStorage中的API密钥
+    const savedGeminiApiKey = localStorage.getItem('VITE_GEMINI_API_KEY');
+    if (savedGeminiApiKey) {
+      // 这里可以添加任何需要在应用启动时执行的逻辑
+      console.log('使用localStorage中的Gemini API密钥');
+    }
+    
+    // 检查是否有存储在localStorage中的访问令牌
+    const savedAccessToken = localStorage.getItem('VITE_ACCESS_TOKEN');
+    if (savedAccessToken) {
+      // 这里可以添加任何需要在应用启动时执行的逻辑
+      console.log('使用localStorage中的访问令牌');
+    }
+    
+    // 检查是否有存储在localStorage中的上传URL
+    const savedUploadAssetUrl = localStorage.getItem('VITE_UPLOAD_ASSET_URL');
+    if (savedUploadAssetUrl) {
+      // 这里可以添加任何需要在应用启动时执行的逻辑
+      console.log('使用localStorage中的上传资源URL');
+    }
+  }, []);
+  
   // 在挂载时初始化IndexedDB并清理base64数据
   useEffect(() => {
     const init = async () => {

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以确保正确下载
+        try {
-        // 添加更多缓存控制头以绕过CDN缓存
+          await downloadImage(uploadResult.url, `nano-banana-${Date.now()}.png`);
-        fetch(uploadResult.url, { 
+        } catch (error) {
-          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);
         }
-          });
-        
         // 立即返回
         return;
       }
@@ -469,86 +441,15 @@ export const ImageCanvas: React.FC = () => {
         
         // 如果Konva下载失败，回退到下载原始图像
         if (canvasImage) {
-          // 处理不同类型的URL
+          try {
-          if (canvasImage.startsWith('data:')) {
+            await downloadImage(canvasImage, `nano-banana-${Date.now()}.png`);
-            // base64格式
+          } catch (error) {
-            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);
-              });
           }
         }
       }
     }
-  };
+  };;
 
   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>
+  );
+};

src/services/geminiService.ts

@@ -1,7 +1,8 @@
 import { GoogleGenAI } from '@google/genai'
 
 // 注意：在生产环境中，这应该通过后端代理处理
-const API_KEY = import.meta.env.VITE_GEMINI_API_KEY || 'demo-key'
+// 优先使用localStorage中的API密钥，如果没有则使用环境变量中的，最后使用默认值
+const API_KEY = localStorage.getItem('VITE_GEMINI_API_KEY') || import.meta.env.VITE_GEMINI_API_KEY || 'demo-key'
 const genAI = new GoogleGenAI({ apiKey: API_KEY })
 
 export interface GenerationRequest {

src/services/uploadService.ts

@@ -2,7 +2,8 @@
 import { UploadResult } from '../types'
 
 // 上传接口URL
-const UPLOAD_URL = 'https://api.pandorastudio.cn/auth/OSSupload'
+// 优先使用localStorage中的URL，如果没有则使用环境变量中的
+const UPLOAD_URL = localStorage.getItem('VITE_UPLOAD_ASSET_URL') || import.meta.env.VITE_UPLOAD_ASSET_URL || 'https://api.pandorastudio.cn/auth/OSSupload'
 
 // 创建一个Map来缓存已上传的图像
 const uploadCache = new Map<string, UploadResult>()
@@ -198,8 +199,8 @@ export const uploadImage = async (imageData: string | Blob, accessToken: string,
     
     // 根据返回格式处理结果: {"code": 200,"msg": "上传成功","data": "9ecbaa0a0.jpg"}
     if (result.code === 200) {
-      // 使用环境变量中的VITE_UPLOAD_ASSET_URL作为前缀
+      // 使用localStorage中的VITE_UPLOAD_ASSET_URL作为前缀，如果没有则使用环境变量中的
-      const uploadAssetUrl = import.meta.env.VITE_UPLOAD_ASSET_URL || '';
+      const uploadAssetUrl = localStorage.getItem('VITE_UPLOAD_ASSET_URL') || import.meta.env.VITE_UPLOAD_ASSET_URL || '';
       const fullUrl = uploadAssetUrl ? `${uploadAssetUrl}/${result.data}` : result.data;
       
       // 清理过期缓存

src/utils/imageUtils.ts

@@ -54,7 +54,41 @@ export function generateId(): string {
   return `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
 }
 
-export function downloadImage(imageData: string, filename: string): void {
+export async function downloadImage(imageData: string, filename: string): Promise<void> {
+  try {
+    // 使用fetch获取图像数据并创建Blob URL以确保正确下载
+    // 添加更多缓存控制头以绕过CDN缓存
+    const response = await fetch(imageData, { 
+      headers: { 
+        'Cache-Control': 'no-cache, no-store, must-revalidate',
+        'Pragma': 'no-cache',
+        'Expires': '0'
+      } 
+    });
+    
+    const blob = await response.blob();
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    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 = imageData;
+    link.download = filename;
+    link.target = '_blank';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }
+}
+
+export function downloadImageSimple(imageData: string, filename: string): void {
   if (imageData.startsWith('blob:')) {
     // 对于Blob URL，我们需要获取实际的Blob数据
     fetch(imageData)

vite.config.ts

@@ -2,10 +2,6 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import * as path from 'path';
 
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import * as path from 'path';
-
 // https://vitejs.dev/config/
 export default defineConfig({
   base: './', // 添加这行以确保资源路径正确