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-09-16 20:52:38 +08:00
parent 2345ed80f1
commit ca8f086c93
1 changed files with 14 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/HistoryPanel.tsx
View File

@@ -298,7 +298,7 @@ export const HistoryPanel: React.FC = () => {
<p className="text-xs text-gray-400">暂无历史记录</p>
</div>
) : (
<div className="grid grid-cols-3 gap-1.5 max-h-72 relative">
<div className="grid grid-cols-3 gap-1.5 max-h-72 relative overflow-y-scroll">
{/* 显示生成记录 */}
{[...filteredGenerations].sort((a, b) => b.timestamp - a.timestamp).slice(0, 50).map((generation, index) => (
<div
@@ -346,8 +346,8 @@ export const HistoryPanel: React.FC = () => {
});
// 计算预览位置，确保不超出屏幕边界
const previewWidth = 300;
const previewHeight = 300;
const previewWidth = 500;
const previewHeight = 500;
const offsetX = 10;
const offsetY = 10;
@@ -400,8 +400,8 @@ export const HistoryPanel: React.FC = () => {
});
// 计算预览位置
const previewWidth = 300;
const previewHeight = 300;
const previewWidth = 500;
const previewHeight = 500;
const offsetX = 10;
const offsetY = 10;
@@ -440,8 +440,8 @@ export const HistoryPanel: React.FC = () => {
}}
onMouseMove={(e) => {
// 调整预览位置以避免被遮挡
const previewWidth = 300;
const previewHeight = 300;
const previewWidth = 500;
const previewHeight = 500;
const offsetX = 10;
const offsetY = 10;
@@ -558,8 +558,8 @@ export const HistoryPanel: React.FC = () => {
});
// 计算预览位置，确保不超出屏幕边界
const previewWidth = 300;
const previewHeight = 300;
const previewWidth = 500;
const previewHeight = 500;
const offsetX = 10;
const offsetY = 10;
@@ -605,8 +605,8 @@ export const HistoryPanel: React.FC = () => {
});
// 计算预览位置
const previewWidth = 300;
const previewHeight = 300;
const previewWidth = 500;
const previewHeight = 500;
const offsetX = 10;
const offsetY = 10;
@@ -649,8 +649,8 @@ export const HistoryPanel: React.FC = () => {
}}
onMouseMove={(e) => {
// 调整预览位置以避免被遮挡
const previewWidth = 300;
const previewHeight = 300;
const previewWidth = 500;
const previewHeight = 500;
const offsetX = 10;
const offsetY = 10;
@@ -942,28 +942,6 @@ export const HistoryPanel: React.FC = () => {
}
})()}
</div>
{/* 测试按钮 - 用于调试 */}
<div className="mb-2">
<Button
variant="outline"
size="sm"
className="w-full h-8 text-xs card"
onClick={() => {
// 测试悬浮预览功能
setHoveredImage({
url: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?w=200',
title: '测试图像',
width: 200,
height: 200,
size: 102400
});
setPreviewPosition({x: 100, y: 100});
}}
>
测试悬浮预览
</Button>
</div>
{/* 操作 */}
<div className="space-y-2 flex-shrink-0 pt-2 border-t border-gray-100">
@@ -1053,7 +1031,7 @@ export const HistoryPanel: React.FC = () => {
<span className="text-gray-800">{hoveredImage.width} × {hoveredImage.height}</span>
</div>
)}
{hoveredImage.size && (
{hoveredImage.size > 0 && (
<div className="flex justify-between text-gray-600 mt-1">
<span>大小:</span>
<span className="text-gray-800">{Math.round(hoveredImage.size / 1024)} KB</span>