You've already forked Nano-Banana-AI-Image-Editor
770 lines
30 KiB
TypeScript
770 lines
30 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import { useAppStore } from '../store/useAppStore';
|
||
import { Button } from './ui/Button';
|
||
import { History, Download, Image as ImageIcon } from 'lucide-react';
|
||
import { cn } from '../utils/cn';
|
||
import { ImagePreviewModal } from './ImagePreviewModal';
|
||
import * as indexedDBService from '../services/indexedDBService';
|
||
|
||
export const HistoryPanel: React.FC = () => {
|
||
const {
|
||
currentProject,
|
||
canvasImage,
|
||
selectedGenerationId,
|
||
selectedEditId,
|
||
selectGeneration,
|
||
selectEdit,
|
||
showHistory,
|
||
setShowHistory,
|
||
setCanvasImage,
|
||
selectedTool
|
||
} = useAppStore();
|
||
|
||
const { getBlob } = useAppStore.getState();
|
||
|
||
const [previewModal, setPreviewModal] = React.useState<{
|
||
open: boolean;
|
||
imageUrl: string;
|
||
title: string;
|
||
description?: string;
|
||
}>({
|
||
open: false,
|
||
imageUrl: '',
|
||
title: '',
|
||
description: ''
|
||
});
|
||
|
||
// 存储从Blob URL解码的图像数据
|
||
const [decodedImages, setDecodedImages] = useState<Record<string, string>>({});
|
||
|
||
// 存储从IndexedDB获取的完整记录
|
||
const [dbGenerations, setDbGenerations] = useState<any[]>([]);
|
||
const [dbEdits, setDbEdits] = useState<any[]>([]);
|
||
|
||
// 筛选和搜索状态
|
||
const [startDate, setStartDate] = useState<string>('');
|
||
const [endDate, setEndDate] = useState<string>('');
|
||
const [searchTerm, setSearchTerm] = useState<string>('');
|
||
|
||
// 悬浮预览状态
|
||
const [hoveredImage, setHoveredImage] = useState<{url: string, title: string} | null>(null);
|
||
const [previewPosition, setPreviewPosition] = useState<{x: number, y: number}>({x: 0, y: 0});
|
||
|
||
const generations = currentProject?.generations || [];
|
||
const edits = currentProject?.edits || [];
|
||
|
||
// 获取上传后的图片链接
|
||
const getUploadedImageUrl = (generationOrEdit: any, index: number) => {
|
||
if (generationOrEdit.uploadResults && generationOrEdit.uploadResults[index]) {
|
||
const uploadResult = generationOrEdit.uploadResults[index];
|
||
if (uploadResult.success && uploadResult.url) {
|
||
// 添加参数以降低图片质量
|
||
return `${uploadResult.url}?x-oss-process=image/quality,q_50`;
|
||
}
|
||
}
|
||
return null;
|
||
};
|
||
|
||
// 获取当前图像尺寸
|
||
const [imageDimensions, setImageDimensions] = React.useState<{ width: number; height: number } | null>(null);
|
||
|
||
React.useEffect(() => {
|
||
if (canvasImage) {
|
||
const img = new Image();
|
||
img.onload = () => {
|
||
setImageDimensions({ width: img.width, height: img.height });
|
||
};
|
||
img.src = canvasImage;
|
||
} else {
|
||
setImageDimensions(null);
|
||
}
|
||
}, [canvasImage]);
|
||
|
||
// 当组件挂载时，从IndexedDB获取记录
|
||
useEffect(() => {
|
||
const loadDBRecords = async () => {
|
||
try {
|
||
// 初始化数据库
|
||
await indexedDBService.initDB();
|
||
|
||
// 获取所有生成记录和编辑记录
|
||
const allGenerations = await indexedDBService.getAllGenerations();
|
||
const allEdits = await indexedDBService.getAllEdits();
|
||
|
||
setDbGenerations(allGenerations);
|
||
setDbEdits(allEdits);
|
||
} catch (err) {
|
||
console.error('从IndexedDB加载记录失败:', err);
|
||
}
|
||
};
|
||
|
||
loadDBRecords();
|
||
}, []);
|
||
|
||
// 当有新记录添加时，重新加载记录
|
||
useEffect(() => {
|
||
// 监听store中的记录变化，如果有新记录则重新加载
|
||
const handleStorageChange = (e: StorageEvent) => {
|
||
if (e.key === 'nano-banana-store') {
|
||
// 重新加载记录
|
||
const loadDBRecords = async () => {
|
||
try {
|
||
const allGenerations = await indexedDBService.getAllGenerations();
|
||
const allEdits = await indexedDBService.getAllEdits();
|
||
setDbGenerations(allGenerations);
|
||
setDbEdits(allEdits);
|
||
} catch (err) {
|
||
console.error('从IndexedDB重新加载记录失败:', err);
|
||
}
|
||
};
|
||
loadDBRecords();
|
||
}
|
||
};
|
||
|
||
window.addEventListener('storage', handleStorageChange);
|
||
return () => window.removeEventListener('storage', handleStorageChange);
|
||
}, []);
|
||
|
||
// 筛选记录的函数
|
||
const filterRecords = (records: any[], isGeneration: boolean) => {
|
||
return records.filter(record => {
|
||
// 日期筛选
|
||
const recordDate = new Date(record.timestamp);
|
||
if (startDate && recordDate < new Date(startDate)) return false;
|
||
if (endDate && recordDate > new Date(endDate)) return false;
|
||
|
||
// 搜索词筛选
|
||
if (searchTerm) {
|
||
if (isGeneration) {
|
||
// 生成记录按提示词搜索
|
||
return record.prompt.toLowerCase().includes(searchTerm.toLowerCase());
|
||
} else {
|
||
// 编辑记录按指令搜索
|
||
return record.instruction.toLowerCase().includes(searchTerm.toLowerCase());
|
||
}
|
||
}
|
||
|
||
return true;
|
||
});
|
||
};
|
||
|
||
// 筛选后的记录
|
||
const filteredGenerations = filterRecords(dbGenerations, true);
|
||
const filteredEdits = filterRecords(dbEdits, false);
|
||
|
||
// 当项目变化时，解码Blob图像
|
||
useEffect(() => {
|
||
const decodeBlobImages = async () => {
|
||
const newDecodedImages: Record<string, string> = {};
|
||
|
||
// 解码生成记录的输出图像
|
||
for (const gen of generations) {
|
||
if (Array.isArray(gen.outputAssetsBlobUrls)) {
|
||
for (const blobUrl of gen.outputAssetsBlobUrls) {
|
||
if (!decodedImages[blobUrl] && blobUrl.startsWith('blob:')) {
|
||
const blob = getBlob(blobUrl);
|
||
if (blob) {
|
||
const dataUrl = await new Promise<string>((resolve) => {
|
||
const reader = new FileReader();
|
||
reader.onload = () => resolve(reader.result as string);
|
||
reader.readAsDataURL(blob);
|
||
});
|
||
newDecodedImages[blobUrl] = dataUrl;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 解码编辑记录的输出图像
|
||
for (const edit of edits) {
|
||
if (Array.isArray(edit.outputAssetsBlobUrls)) {
|
||
for (const blobUrl of edit.outputAssetsBlobUrls) {
|
||
if (!decodedImages[blobUrl] && blobUrl.startsWith('blob:')) {
|
||
const blob = getBlob(blobUrl);
|
||
if (blob) {
|
||
const dataUrl = await new Promise<string>((resolve) => {
|
||
const reader = new FileReader();
|
||
reader.onload = () => resolve(reader.result as string);
|
||
reader.readAsDataURL(blob);
|
||
});
|
||
newDecodedImages[blobUrl] = dataUrl;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
if (Object.keys(newDecodedImages).length > 0) {
|
||
setDecodedImages(prev => ({ ...prev, ...newDecodedImages }));
|
||
}
|
||
};
|
||
|
||
decodeBlobImages();
|
||
}, [generations, edits, getBlob, decodedImages]);
|
||
|
||
if (!showHistory) {
|
||
return (
|
||
<div className="w-8 bg-white border-l border-gray-200 flex flex-col items-center justify-center">
|
||
<button
|
||
onClick={() => setShowHistory(true)}
|
||
className="w-6 h-16 bg-gray-100 hover:bg-gray-200 rounded-l-lg border border-r-0 border-gray-300 flex items-center justify-center transition-colors group"
|
||
title="显示历史面板"
|
||
>
|
||
<div className="flex flex-col space-y-1">
|
||
<div className="w-1 h-1 bg-gray-500 group-hover:bg-gray-400 rounded-full"></div>
|
||
<div className="w-1 h-1 bg-gray-500 group-hover:bg-gray-400 rounded-full"></div>
|
||
<div className="w-1 h-1 bg-gray-500 group-hover:bg-gray-400 rounded-full"></div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="w-80 bg-white border-l border-gray-200 p-6 flex flex-col h-full">
|
||
{/* 头部 */}
|
||
<div className="flex items-center justify-between mb-4">
|
||
<div className="flex items-center space-x-2">
|
||
<History className="h-5 w-5 text-gray-400" />
|
||
<h3 className="text-sm font-medium text-gray-300">历史记录和变体</h3>
|
||
</div>
|
||
<div className="flex space-x-1">
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
onClick={async () => {
|
||
try {
|
||
const allGenerations = await indexedDBService.getAllGenerations();
|
||
const allEdits = await indexedDBService.getAllEdits();
|
||
setDbGenerations(allGenerations);
|
||
setDbEdits(allEdits);
|
||
} catch (err) {
|
||
console.error('刷新历史记录失败:', err);
|
||
}
|
||
}}
|
||
className="h-6 w-6"
|
||
title="刷新历史记录"
|
||
>
|
||
⟳
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
onClick={() => setShowHistory(!showHistory)}
|
||
className="h-6 w-6"
|
||
title="隐藏历史面板"
|
||
>
|
||
×
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 筛选和搜索控件 */}
|
||
<div className="mb-4 space-y-3">
|
||
<div className="flex space-x-2">
|
||
<input
|
||
type="date"
|
||
value={startDate}
|
||
onChange={(e) => setStartDate(e.target.value)}
|
||
className="flex-1 text-xs p-1 border rounded"
|
||
placeholder="开始日期"
|
||
/>
|
||
<input
|
||
type="date"
|
||
value={endDate}
|
||
onChange={(e) => setEndDate(e.target.value)}
|
||
className="flex-1 text-xs p-1 border rounded"
|
||
placeholder="结束日期"
|
||
/>
|
||
</div>
|
||
<div className="flex">
|
||
<input
|
||
type="text"
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
className="flex-1 text-xs p-1 border rounded-l"
|
||
placeholder="搜索提示词或编辑指令..."
|
||
/>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="text-xs p-1 rounded-l-none"
|
||
onClick={() => {
|
||
setStartDate('');
|
||
setEndDate('');
|
||
setSearchTerm('');
|
||
}}
|
||
>
|
||
重置
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 变体网格 */}
|
||
<div className="mb-6 flex-shrink-0">
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h4 className="text-xs font-medium text-gray-400">当前变体</h4>
|
||
<span className="text-xs text-gray-500">
|
||
{filteredGenerations.length + filteredEdits.length}/1000
|
||
</span>
|
||
</div>
|
||
{filteredGenerations.length === 0 && filteredEdits.length === 0 ? (
|
||
<div className="text-center py-8">
|
||
<div className="text-4xl mb-2">🖼️</div>
|
||
<p className="text-sm text-gray-500">暂无生成记录</p>
|
||
</div>
|
||
) : (
|
||
<div className="grid grid-cols-3 gap-2 max-h-80 overflow-y-auto">
|
||
{/* 显示生成记录 */}
|
||
{[...filteredGenerations].sort((a, b) => b.timestamp - a.timestamp).slice(0, 50).map((generation, index) => (
|
||
<div
|
||
key={generation.id}
|
||
className={cn(
|
||
'relative aspect-square rounded-lg border-2 cursor-pointer transition-all duration-200 overflow-hidden',
|
||
selectedGenerationId === generation.id
|
||
? 'border-yellow-400'
|
||
: 'border-gray-300 hover:border-gray-400'
|
||
)}
|
||
onClick={() => {
|
||
selectGeneration(generation.id);
|
||
// 设置画布图像为第一个输出资产
|
||
if (generation.outputAssets && generation.outputAssets.length > 0) {
|
||
const asset = generation.outputAssets[0];
|
||
if (asset.url) {
|
||
setCanvasImage(asset.url);
|
||
}
|
||
}
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
if (generation.outputAssets && generation.outputAssets.length > 0) {
|
||
const asset = generation.outputAssets[0];
|
||
if (asset.url) {
|
||
setHoveredImage({
|
||
url: asset.url,
|
||
title: `生成记录 G${index + 1}: ${generation.prompt.substring(0, 50)}${generation.prompt.length > 50 ? '...' : ''}`
|
||
});
|
||
setPreviewPosition({x: e.clientX, y: e.clientY});
|
||
}
|
||
}
|
||
}}
|
||
onMouseMove={(e) => {
|
||
// 调整预览位置以避免被遮挡
|
||
const previewWidth = 300;
|
||
const previewHeight = 300;
|
||
const offsetX = 10;
|
||
const offsetY = 10;
|
||
|
||
let x = e.clientX + offsetX;
|
||
let y = e.clientY + offsetY;
|
||
|
||
// 检查是否超出右边界
|
||
if (x + previewWidth > window.innerWidth) {
|
||
x = window.innerWidth - previewWidth - 10;
|
||
}
|
||
|
||
// 检查是否超出下边界
|
||
if (y + previewHeight > window.innerHeight) {
|
||
y = window.innerHeight - previewHeight - 10;
|
||
}
|
||
|
||
// 检查是否超出左边界
|
||
if (x < 0) {
|
||
x = 10;
|
||
}
|
||
|
||
// 检查是否超出上边界
|
||
if (y < 0) {
|
||
y = 10;
|
||
}
|
||
|
||
setPreviewPosition({x, y});
|
||
}}
|
||
onMouseLeave={() => {
|
||
setHoveredImage(null);
|
||
}}
|
||
>
|
||
{generation.outputAssets && generation.outputAssets.length > 0 ? (
|
||
(() => {
|
||
const asset = generation.outputAssets[0];
|
||
if (asset.url) {
|
||
// 如果是base64数据URL，直接显示
|
||
if (asset.url.startsWith('data:')) {
|
||
return <img src={asset.url} alt="生成的变体" className="w-full h-full object-cover" />;
|
||
}
|
||
// 如果是普通URL，直接显示
|
||
return <img src={asset.url} alt="生成的变体" className="w-full h-full object-cover" />;
|
||
} else {
|
||
return (
|
||
<div className="w-full h-full bg-gray-100 flex items-center justify-center">
|
||
<ImageIcon className="h-4 w-4 text-gray-400" />
|
||
</div>
|
||
);
|
||
}
|
||
})()
|
||
) : (
|
||
<div className="w-full h-full bg-gray-100 flex items-center justify-center">
|
||
<ImageIcon className="h-4 w-4 text-gray-400" />
|
||
</div>
|
||
)}
|
||
|
||
{/* 变体编号 */}
|
||
<div className="absolute top-1 left-1 bg-gray-900/80 text-xs px-1 py-0.5 rounded text-white">
|
||
G{index + 1}
|
||
</div>
|
||
</div>
|
||
))}
|
||
|
||
{/* 显示编辑记录 */}
|
||
{[...filteredEdits].sort((a, b) => b.timestamp - a.timestamp).slice(0, 50).map((edit, index) => (
|
||
<div
|
||
key={edit.id}
|
||
className={cn(
|
||
'relative aspect-square rounded-lg border-2 cursor-pointer transition-all duration-200 overflow-hidden',
|
||
selectedEditId === edit.id
|
||
? 'border-purple-400'
|
||
: 'border-gray-300 hover:border-gray-400'
|
||
)}
|
||
onClick={() => {
|
||
selectEdit(edit.id);
|
||
selectGeneration(null);
|
||
// 设置画布图像为第一个输出资产
|
||
if (edit.outputAssets && edit.outputAssets.length > 0) {
|
||
const asset = edit.outputAssets[0];
|
||
if (asset.url) {
|
||
setCanvasImage(asset.url);
|
||
}
|
||
}
|
||
}}
|
||
onMouseEnter={(e) => {
|
||
if (edit.outputAssets && edit.outputAssets.length > 0) {
|
||
const asset = edit.outputAssets[0];
|
||
if (asset.url) {
|
||
setHoveredImage({
|
||
url: asset.url,
|
||
title: `编辑记录 E${index + 1}: ${edit.instruction.substring(0, 50)}${edit.instruction.length > 50 ? '...' : ''}`
|
||
});
|
||
setPreviewPosition({x: e.clientX, y: e.clientY});
|
||
}
|
||
}
|
||
}}
|
||
onMouseMove={(e) => {
|
||
// 调整预览位置以避免被遮挡
|
||
const previewWidth = 300;
|
||
const previewHeight = 300;
|
||
const offsetX = 10;
|
||
const offsetY = 10;
|
||
|
||
let x = e.clientX + offsetX;
|
||
let y = e.clientY + offsetY;
|
||
|
||
// 检查是否超出右边界
|
||
if (x + previewWidth > window.innerWidth) {
|
||
x = window.innerWidth - previewWidth - 10;
|
||
}
|
||
|
||
// 检查是否超出下边界
|
||
if (y + previewHeight > window.innerHeight) {
|
||
y = window.innerHeight - previewHeight - 10;
|
||
}
|
||
|
||
// 检查是否超出左边界
|
||
if (x < 0) {
|
||
x = 10;
|
||
}
|
||
|
||
// 检查是否超出上边界
|
||
if (y < 0) {
|
||
y = 10;
|
||
}
|
||
|
||
setPreviewPosition({x, y});
|
||
}}
|
||
onMouseLeave={() => {
|
||
setHoveredImage(null);
|
||
}}
|
||
>
|
||
{edit.outputAssets && edit.outputAssets.length > 0 ? (
|
||
(() => {
|
||
const asset = edit.outputAssets[0];
|
||
if (asset.url) {
|
||
// 如果是base64数据URL，直接显示
|
||
if (asset.url.startsWith('data:')) {
|
||
return <img src={asset.url} alt="编辑的变体" className="w-full h-full object-cover" />;
|
||
}
|
||
// 如果是普通URL，直接显示
|
||
return <img src={asset.url} alt="编辑的变体" className="w-full h-full object-cover" />;
|
||
} else {
|
||
return (
|
||
<div className="w-full h-full bg-gray-100 flex items-center justify-center">
|
||
<ImageIcon className="h-4 w-4 text-gray-400" />
|
||
</div>
|
||
);
|
||
}
|
||
})()
|
||
) : (
|
||
<div className="w-full h-full bg-gray-100 flex items-center justify-center">
|
||
<ImageIcon className="h-4 w-4 text-gray-400" />
|
||
</div>
|
||
)}
|
||
|
||
{/* 编辑标签 */}
|
||
<div className="absolute top-1 left-1 bg-purple-900/80 text-xs px-1 py-0.5 rounded text-white">
|
||
E{index + 1}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 当前图像信息 */}
|
||
{(canvasImage || imageDimensions) && (
|
||
<div className="mb-4 p-3 bg-gray-50 rounded-lg border border-gray-200">
|
||
<h4 className="text-xs font-medium text-gray-500 mb-2">当前图像</h4>
|
||
<div className="space-y-1 text-xs text-gray-600">
|
||
{imageDimensions && (
|
||
<div className="flex justify-between">
|
||
<span>尺寸:</span>
|
||
<span className="text-gray-800">{imageDimensions.width} × {imageDimensions.height}</span>
|
||
</div>
|
||
)}
|
||
<div className="flex justify-between">
|
||
<span>模式:</span>
|
||
<span className="text-gray-800 capitalize">{selectedTool}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 生成详情 */}
|
||
<div className="mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200 flex-1 overflow-y-auto min-h-0">
|
||
<h4 className="text-xs font-medium text-gray-500 mb-2">生成详情</h4>
|
||
{(() => {
|
||
const gen = filteredGenerations.find(g => g.id === selectedGenerationId) || dbGenerations.find(g => g.id === selectedGenerationId);
|
||
const selectedEdit = filteredEdits.find(e => e.id === selectedEditId) || dbEdits.find(e => e.id === selectedEditId);
|
||
|
||
if (gen) {
|
||
return (
|
||
<div className="space-y-3">
|
||
<div className="space-y-2 text-xs text-gray-600">
|
||
<div>
|
||
<span className="text-gray-500">提示:</span>
|
||
<p className="text-gray-800 mt-1">{gen.prompt}</p>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span>模型:</span>
|
||
<span>{gen.modelVersion}</span>
|
||
</div>
|
||
{gen.parameters.seed && (
|
||
<div className="flex justify-between">
|
||
<span>种子:</span>
|
||
<span>{gen.parameters.seed}</span>
|
||
</div>
|
||
)}
|
||
<div className="flex justify-between">
|
||
<span>时间:</span>
|
||
<span>{new Date(gen.timestamp).toLocaleString()}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 上传结果 */}
|
||
{gen.uploadResults && gen.uploadResults.length > 0 && (
|
||
<div>
|
||
<h5 className="text-xs font-medium text-gray-500 mb-2">上传结果</h5>
|
||
<div className="space-y-1">
|
||
{gen.uploadResults.map((result, index) => (
|
||
<div key={index} className="text-xs">
|
||
<div className="flex justify-between">
|
||
<span>图像 {index + 1}:</span>
|
||
<span className={result.success ? 'text-green-600' : 'text-red-600'}>
|
||
{result.success ? '成功' : '失败'}
|
||
</span>
|
||
</div>
|
||
{result.success && result.url && (
|
||
<div className="text-blue-600 truncate">
|
||
{result.url.split('/').pop()}
|
||
</div>
|
||
)}
|
||
{result.error && (
|
||
<div className="text-red-600 truncate">
|
||
{result.error}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 参考图像信息 */}
|
||
{gen.sourceAssets && gen.sourceAssets.length > 0 && (
|
||
<div>
|
||
<h5 className="text-xs font-medium text-gray-500 mb-2">参考图像</h5>
|
||
<div className="text-xs text-gray-600">
|
||
{gen.sourceAssets.length} 个参考图像
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
} else if (selectedEdit) {
|
||
const parentGen = dbGenerations.find(g => g.id === selectedEdit.parentGenerationId);
|
||
return (
|
||
<div className="space-y-3">
|
||
<div className="space-y-2 text-xs text-gray-600">
|
||
<div>
|
||
<span className="text-gray-500">编辑指令:</span>
|
||
<p className="text-gray-800 mt-1">{selectedEdit.instruction}</p>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span>类型:</span>
|
||
<span>图像编辑</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span>创建时间:</span>
|
||
<span>{new Date(selectedEdit.timestamp).toLocaleString()}</span>
|
||
</div>
|
||
{selectedEdit.maskAssetId && (
|
||
<div className="flex justify-between">
|
||
<span>遮罩:</span>
|
||
<span className="text-purple-600">已应用</span>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 上传结果 */}
|
||
{selectedEdit.uploadResults && selectedEdit.uploadResults.length > 0 && (
|
||
<div>
|
||
<h5 className="text-xs font-medium text-gray-500 mb-2">上传结果</h5>
|
||
<div className="space-y-1">
|
||
{selectedEdit.uploadResults.map((result, index) => (
|
||
<div key={index} className="text-xs">
|
||
<div className="flex justify-between">
|
||
<span>图像 {index + 1}:</span>
|
||
<span className={result.success ? 'text-green-600' : 'text-red-600'}>
|
||
{result.success ? '成功' : '失败'}
|
||
</span>
|
||
</div>
|
||
{result.success && result.url && (
|
||
<div className="text-blue-600 truncate">
|
||
{result.url.split('/').pop()}
|
||
</div>
|
||
)}
|
||
{result.error && (
|
||
<div className="text-red-600 truncate">
|
||
{result.error}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* 原始生成参考 */}
|
||
{parentGen && (
|
||
<div>
|
||
<h5 className="text-xs font-medium text-gray-500 mb-2">原始生成</h5>
|
||
<div className="text-xs text-gray-600">
|
||
基于: G{dbGenerations.findIndex(g => g.id === parentGen.id) + 1}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
} else {
|
||
return (
|
||
<div className="space-y-2 text-xs text-gray-500">
|
||
<p className="text-gray-500">选择一个生成记录或编辑记录以查看详细信息</p>
|
||
</div>
|
||
);
|
||
}
|
||
})()}
|
||
</div>
|
||
|
||
{/* 操作 */}
|
||
<div className="space-y-3 flex-shrink-0">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
className="w-full"
|
||
onClick={() => {
|
||
// 查找当前显示的图像（生成记录或编辑记录）
|
||
let imageUrl: string | null = null;
|
||
|
||
if (selectedGenerationId) {
|
||
const { canvasImage } = useAppStore.getState();
|
||
imageUrl = canvasImage;
|
||
} else {
|
||
// 如果没有选择生成记录，尝试获取当前画布图像
|
||
const { canvasImage } = useAppStore.getState();
|
||
imageUrl = canvasImage;
|
||
}
|
||
|
||
if (imageUrl) {
|
||
// 处理数据URL和常规URL
|
||
if (imageUrl.startsWith('data:')) {
|
||
const link = document.createElement('a');
|
||
link.href = imageUrl;
|
||
link.download = `nano-banana-${Date.now()}.png`;
|
||
document.body.appendChild(link);
|
||
link.click();
|
||
document.body.removeChild(link);
|
||
} else {
|
||
// 对于外部URL，我们需要获取并转换为blob
|
||
fetch(imageUrl)
|
||
.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);
|
||
});
|
||
}
|
||
}
|
||
}}
|
||
disabled={!selectedGenerationId && !useAppStore.getState().canvasImage}
|
||
>
|
||
<Download className="h-4 w-4 mr-2" />
|
||
下载
|
||
</Button>
|
||
</div>
|
||
|
||
{/* 图像预览模态框 */}
|
||
<ImagePreviewModal
|
||
open={previewModal.open}
|
||
onOpenChange={(open) => setPreviewModal(prev => ({ ...prev, open }))}
|
||
imageUrl={previewModal.imageUrl}
|
||
title={previewModal.title}
|
||
description={previewModal.description}
|
||
/>
|
||
|
||
{/* 悬浮预览 */}
|
||
{hoveredImage && (
|
||
<div
|
||
className="fixed z-50 shadow-2xl border-2 border-gray-300 rounded-lg overflow-hidden"
|
||
style={{
|
||
left: Math.min(previewPosition.x + 10, window.innerWidth - 320),
|
||
top: Math.min(previewPosition.y + 10, window.innerHeight - 320),
|
||
maxWidth: '300px',
|
||
maxHeight: '300px'
|
||
}}
|
||
>
|
||
<div className="bg-black text-white text-xs p-1 truncate">
|
||
{hoveredImage.title}
|
||
</div>
|
||
<img
|
||
src={hoveredImage.url}
|
||
alt="预览"
|
||
className="w-full h-full object-contain max-w-[300px] max-h-[300px]"
|
||
/>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}; |