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> <p className="text-xs text-gray-400">暂无历史记录</p>
</div> </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) => ( {[...filteredGenerations].sort((a, b) => b.timestamp - a.timestamp).slice(0, 50).map((generation, index) => (
<div <div
@@ -346,8 +346,8 @@ export const HistoryPanel: React.FC = () => {
}); });
// 计算预览位置，确保不超出屏幕边界 // 计算预览位置，确保不超出屏幕边界
const previewWidth = 300; const previewWidth = 500;
const previewHeight = 300; const previewHeight = 500;
const offsetX = 10; const offsetX = 10;
const offsetY = 10; const offsetY = 10;
@@ -400,8 +400,8 @@ export const HistoryPanel: React.FC = () => {
}); });
// 计算预览位置 // 计算预览位置
const previewWidth = 300; const previewWidth = 500;
const previewHeight = 300; const previewHeight = 500;
const offsetX = 10; const offsetX = 10;
const offsetY = 10; const offsetY = 10;
@@ -440,8 +440,8 @@ export const HistoryPanel: React.FC = () => {
}} }}
onMouseMove={(e) => { onMouseMove={(e) => {
// 调整预览位置以避免被遮挡 // 调整预览位置以避免被遮挡
const previewWidth = 300; const previewWidth = 500;
const previewHeight = 300; const previewHeight = 500;
const offsetX = 10; const offsetX = 10;
const offsetY = 10; const offsetY = 10;
@@ -558,8 +558,8 @@ export const HistoryPanel: React.FC = () => {
}); });
// 计算预览位置，确保不超出屏幕边界 // 计算预览位置，确保不超出屏幕边界
const previewWidth = 300; const previewWidth = 500;
const previewHeight = 300; const previewHeight = 500;
const offsetX = 10; const offsetX = 10;
const offsetY = 10; const offsetY = 10;
@@ -605,8 +605,8 @@ export const HistoryPanel: React.FC = () => {
}); });
// 计算预览位置 // 计算预览位置
const previewWidth = 300; const previewWidth = 500;
const previewHeight = 300; const previewHeight = 500;
const offsetX = 10; const offsetX = 10;
const offsetY = 10; const offsetY = 10;
@@ -649,8 +649,8 @@ export const HistoryPanel: React.FC = () => {
}} }}
onMouseMove={(e) => { onMouseMove={(e) => {
// 调整预览位置以避免被遮挡 // 调整预览位置以避免被遮挡
const previewWidth = 300; const previewWidth = 500;
const previewHeight = 300; const previewHeight = 500;
const offsetX = 10; const offsetX = 10;
const offsetY = 10; const offsetY = 10;
@@ -943,28 +943,6 @@ export const HistoryPanel: React.FC = () => {
})()} })()}
</div> </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"> <div className="space-y-2 flex-shrink-0 pt-2 border-t border-gray-100">
<Button <Button
@@ -1053,7 +1031,7 @@ export const HistoryPanel: React.FC = () => {
<span className="text-gray-800">{hoveredImage.width} × {hoveredImage.height}</span> <span className="text-gray-800">{hoveredImage.width} × {hoveredImage.height}</span>
</div> </div>
)} )}
{hoveredImage.size && ( {hoveredImage.size > 0 && (
<div className="flex justify-between text-gray-600 mt-1"> <div className="flex justify-between text-gray-600 mt-1">
<span>大小:</span> <span>大小:</span>
<span className="text-gray-800">{Math.round(hoveredImage.size / 1024)} KB</span> <span className="text-gray-800">{Math.round(hoveredImage.size / 1024)} KB</span>