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

优化 整体风格统一化调整

Browse Source
This commit is contained in:
yuantao
2025-09-16 13:05:57 +08:00
parent b910110b6d
commit e0600f5d50
7 changed files with 63 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/ImageCanvas.tsx
View File

@@ -211,7 +211,7 @@ export const ImageCanvas: React.FC = () => {
{/* 画布区域 */}
<div
id="canvas-container"
className="flex-1 relative overflow-hidden bg-gray-100"
className="flex-1 relative overflow-hidden bg-gray-100 rounded-lg"
>
{!image && !isGenerating && (
<div className="absolute inset-0 flex items-center justify-center z-0">
@@ -231,8 +231,8 @@ export const ImageCanvas: React.FC = () => {
)}
{isGenerating && (
<div className="absolute inset-0 flex items-center justify-center bg-gray-900/40 z-50 backdrop-blur-sm">
<div className="text-center bg-white/90 rounded-xl p-6 shadow-2xl backdrop-blur-sm border border-gray-200/50">
<div className="absolute inset-0 flex items-center justify-center bg-gray-900/40 z-50 backdrop-blur-sm rounded-lg">
<div className="text-center bg-white/90 rounded-xl p-6 card-lg backdrop-blur-sm">
<div className="animate-spin rounded-full h-10 w-10 border-2 border-yellow-400 border-t-transparent mx-auto mb-3" />
<p className="text-gray-700 text-sm font-medium">正在创建图像...</p>
</div>
@@ -308,12 +308,12 @@ export const ImageCanvas: React.FC = () => {
{/* 悬浮操作按钮 */}
{image && !isGenerating && (
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-white/80 backdrop-blur-sm rounded-full shadow-lg border border-gray-200 px-3 py-2 flex items-center space-x-2">
<div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-white/80 backdrop-blur-sm rounded-full card border border-gray-200 px-3 py-2 flex items-center space-x-2">
<Button
variant="ghost"
size="sm"
onClick={() => handleZoom(-0.1)}
className="h-8 w-8 p-0 text-gray-600 hover:text-gray-900 hover:bg-gray-100"
className="h-8 w-8 p-0 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full card"
>
<ZoomOut className="h-4 w-4" />
</Button>
@@ -324,7 +324,7 @@ export const ImageCanvas: React.FC = () => {
variant="ghost"
size="sm"
onClick={() => handleZoom(0.1)}
className="h-8 w-8 p-0 text-gray-600 hover:text-gray-900 hover:bg-gray-100"
className="h-8 w-8 p-0 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full card"
>
<ZoomIn className="h-4 w-4" />
</Button>
@@ -332,7 +332,7 @@ export const ImageCanvas: React.FC = () => {
variant="ghost"
size="sm"
onClick={handleReset}
className="h-8 w-8 p-0 text-gray-600 hover:text-gray-900 hover:bg-gray-100"
className="h-8 w-8 p-0 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full card"
>
<RotateCcw className="h-4 w-4" />
</Button>
@@ -341,7 +341,7 @@ export const ImageCanvas: React.FC = () => {
variant="ghost"
size="sm"
onClick={handleDownload}
className="h-8 w-8 p-0 text-gray-600 hover:text-gray-900 hover:bg-gray-100"
className="h-8 w-8 p-0 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full card"
>
<Download className="h-4 w-4" />
</Button>