product/Nano-Banana-AI-Image-Editor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

新增设置面板

Browse Source
This commit is contained in:
袁涛
2025-10-06 00:02:40 +08:00
parent 29d4152e81
commit c21319fe3c
13 changed files with 356 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
IFLOW.md
View File

@@ -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 # 图像上传服务
│ ├── cacheService.ts # IndexedDB 缓存层
│ └── referenceImageService.ts # 参考图像处理
│ ├── indexedDBService.ts # IndexedDB 数据库服务
│ ├── cacheService.ts # IndexedDB 缓存层（未使用）
│ ├── 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 类型定义
└── index.ts # 核心类型定义
├── types/ # TypeScript 类型定义
│ └── 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`: 构建工具

5
electron/main.js
View File

@@ -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({

18
electron/main.ts
View File

@@ -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,
height: 800,
width: 1600,
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);
}
// Open the DevTools.
if (process.env.VITE_DEV_SERVER_URL) {
mainWindow.webContents.openDevTools();
// 在生产环境中确保关闭开发者工具
mainWindow.webContents.closeDevTools();
}
};

23
package.json
View File

@@ -9,9 +9,8 @@
"url": "https://git.pandorastudio.cn/yuantao/Nano-Banana-AI-Image-Editor.git"
},
"author": {
"name": "Mark Fulton",
"email": "markfulton@example.com",
"url": "https://markfulton.com"
"name": "潘哆呐科技",
"email": "work@pandorastudio.cn"
},
"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"

24
src/App.tsx
View File

@@ -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 () => {

14
src/components/CustomTitleBar.tsx
View File

@@ -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} />
</>
);
};

13
src/components/Header.tsx
View File

@@ -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} />
</>
);
};

117
src/components/ImageCanvas.tsx
View File

@@ -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 => {
try {
await downloadImage(uploadResult.url, `nano-banana-${Date.now()}.png`);
} 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
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 => {
try {
await downloadImage(canvasImage, `nano-banana-${Date.now()}.png`);
} 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">

167
src/components/SettingsModal.tsx Normal file
View File

@@ -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>
);
};

3
src/services/geminiService.ts
View File

@@ -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 {

7
src/services/uploadService.ts
View File

@@ -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作为前缀
const uploadAssetUrl = import.meta.env.VITE_UPLOAD_ASSET_URL || '';
// 使用localStorage中的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;
// 清理过期缓存

36
src/utils/imageUtils.ts
View File

@@ -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)

4
vite.config.ts
View File

@@ -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: './', // 添加这行以确保资源路径正确