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

优化 整体UI调整

Browse Source
This commit is contained in:
袁涛
2025-09-15 23:08:02 +08:00
parent b3cbba41bb
commit b910110b6d
5 changed files with 103 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/HistoryPanel.tsx
View File

@@ -211,7 +211,7 @@ export const HistoryPanel: React.FC = () => {
}
return (
<div className="w-72 bg-white border-l border-gray-200 p-4 flex flex-col h-full">
<div className="w-72 bg-white border-l border-gray-200 p-4 flex flex-col h-full shadow-lg">
{/* 头部 */}
<div className="flex items-center justify-between mb-3">
<div className="flex items-center space-x-2">
@@ -306,7 +306,7 @@ export const HistoryPanel: React.FC = () => {
className={cn(
'relative aspect-square rounded border cursor-pointer transition-all duration-200 overflow-hidden',
selectedGenerationId === generation.id
? 'border-yellow-400'
? 'border-yellow-400 ring-2 ring-yellow-400/30'
: 'border-gray-200 hover:border-gray-300'
)}
onClick={() => {
@@ -325,7 +325,8 @@ export const HistoryPanel: React.FC = () => {
if (asset.url) {
setHoveredImage({
url: asset.url,
title: `生成记录 G${index + 1}: ${generation.prompt.substring(0, 50)}${generation.prompt.length > 50 ? '...' : ''}`
title: `生成记录 G${index + 1}`,
description: generation.prompt
});
setPreviewPosition({x: e.clientX, y: e.clientY});
}
@@ -405,7 +406,7 @@ export const HistoryPanel: React.FC = () => {
className={cn(
'relative aspect-square rounded border cursor-pointer transition-all duration-200 overflow-hidden',
selectedEditId === edit.id
? 'border-purple-400'
? 'border-purple-400 ring-2 ring-purple-400/30'
: 'border-gray-200 hover:border-gray-300'
)}
onClick={() => {
@@ -425,7 +426,8 @@ export const HistoryPanel: React.FC = () => {
if (asset.url) {
setHoveredImage({
url: asset.url,
title: `编辑记录 E${index + 1}: ${edit.instruction.substring(0, 50)}${edit.instruction.length > 50 ? '...' : ''}`
title: `编辑记录 E${index + 1}`,
description: edit.instruction
});
setPreviewPosition({x: e.clientX, y: e.clientY});
}
@@ -501,24 +503,7 @@ export const HistoryPanel: React.FC = () => {
)}
</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="flex-1 overflow-y-auto min-h-0">
@@ -794,22 +779,35 @@ export const HistoryPanel: React.FC = () => {
{/* 悬浮预览 */}
{hoveredImage && (
<div
className="fixed z-50 shadow-2xl border-2 border-gray-300 rounded-lg overflow-hidden"
className="fixed z-50 shadow-2xl border border-gray-300 rounded-lg overflow-hidden bg-white backdrop-blur-sm"
style={{
left: Math.min(previewPosition.x + 10, window.innerWidth - 320),
top: Math.min(previewPosition.y + 10, window.innerHeight - 320),
maxWidth: '300px',
maxHeight: '300px'
left: Math.min(previewPosition.x + 10, window.innerWidth - 250),
top: Math.min(previewPosition.y + 10, window.innerHeight - 250),
maxWidth: '250px',
maxHeight: '250px'
}}
>
<div className="bg-black text-white text-xs p-1 truncate">
<div className="bg-gray-900 text-white text-xs p-2 truncate font-medium">
{hoveredImage.title}
</div>
<img
src={hoveredImage.url}
alt="预览"
className="w-full h-full object-contain max-w-[300px] max-h-[300px]"
className="w-full h-auto max-h-[150px] object-contain"
/>
{/* 图像信息 */}
<div className="p-2 bg-gray-50 border-t border-gray-200 text-xs">
{imageDimensions && (
<div className="flex justify-between text-gray-600">
<span>尺寸:</span>
<span className="text-gray-800">{imageDimensions.width} × {imageDimensions.height}</span>
</div>
)}
<div className="flex justify-between text-gray-600 mt-1">
<span>模式:</span>
<span className="text-gray-800 capitalize">{selectedTool}</span>
</div>
</div>
</div>
)}
</div>