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

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

123
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 => {
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">

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)