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 22:48:42 +08:00
parent a922a4e507
commit b3cbba41bb
4 changed files with 208 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/ImageCanvas.tsx
View File

@@ -188,29 +188,29 @@ export const ImageCanvas: React.FC = () => {
return (
<div className="flex flex-col h-full">
{/* 工具栏 */}
<div className="p-3 border-b border-gray-200 bg-white">
<div className="p-2 border-b border-gray-200 bg-white">
<div className="flex items-center justify-between">
{/* 左侧 - 缩放控制 */}
<div className="flex items-center space-x-2">
<Button variant="outline" size="sm" onClick={() => handleZoom(-0.1)}>
<div className="flex items-center space-x-1">
<Button variant="outline" size="sm" onClick={() => handleZoom(-0.1)} className="h-8 w-8 p-0">
<ZoomOut className="h-4 w-4" />
</Button>
<span className="text-sm text-gray-400 min-w-[60px] text-center">
<span className="text-xs text-gray-400 min-w-[40px] text-center">
{Math.round(canvasZoom * 100)}%
</span>
<Button variant="outline" size="sm" onClick={() => handleZoom(0.1)}>
<Button variant="outline" size="sm" onClick={() => handleZoom(0.1)} className="h-8 w-8 p-0">
<ZoomIn className="h-4 w-4" />
</Button>
<Button variant="outline" size="sm" onClick={handleReset}>
<Button variant="outline" size="sm" onClick={handleReset} className="h-8 w-8 p-0">
<RotateCcw className="h-4 w-4" />
</Button>
</div>
{/* 右侧 - 工具和操作 */}
<div className="flex items-center space-x-2">
<div className="flex items-center space-x-1">
{selectedTool === 'mask' && (
<>
<div className="flex items-center space-x-2 mr-2">
<div className="flex items-center space-x-1 mr-1">
<span className="text-xs text-gray-400">画笔:</span>
<input
type="range"
@@ -218,7 +218,7 @@ export const ImageCanvas: React.FC = () => {
max="50"
value={brushSize}
onChange={(e) => setBrushSize(parseInt(e.target.value))}
className="w-16 h-2 bg-gray-800 rounded-lg appearance-none cursor-pointer slider"
className="w-12 h-2 bg-gray-800 rounded-lg appearance-none cursor-pointer slider"
/>
<span className="text-xs text-gray-400 w-6">{brushSize}</span>
</div>
@@ -227,6 +227,7 @@ export const ImageCanvas: React.FC = () => {
size="sm"
onClick={clearBrushStrokes}
disabled={brushStrokes.length === 0}
className="h-8 w-8 p-0"
>
<Eraser className="h-4 w-4" />
</Button>
@@ -237,16 +238,14 @@ export const ImageCanvas: React.FC = () => {
variant="outline"
size="sm"
onClick={() => setShowMasks(!showMasks)}
className={cn(showMasks && 'bg-yellow-400/10 border-yellow-400/50')}
className={cn(showMasks && 'bg-yellow-400/10 border-yellow-400/50', 'h-8 w-8 p-0')}
>
{showMasks ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
<span className="hidden sm:inline ml-2">遮罩</span>
</Button>
{canvasImage && (
<Button variant="secondary" size="sm" onClick={handleDownload}>
<Download className="h-4 w-4 mr-2" />
<span className="hidden sm:inline">下载</span>
<Button variant="secondary" size="sm" onClick={handleDownload} className="h-8 px-2">
<Download className="h-4 w-4" />
</Button>
)}
</div>
@@ -260,14 +259,14 @@ export const ImageCanvas: React.FC = () => {
>
{!image && !isGenerating && (
<div className="absolute inset-0 flex items-center justify-center z-0">
<div className="text-center">
<div className="text-6xl mb-4">🍌</div>
<h2 className="text-xl font-medium text-gray-300 mb-2">
欢迎使用 Nano Banana 框架
<div className="text-center max-w-xs">
<div className="text-5xl mb-3">🍌</div>
<h2 className="text-lg font-medium text-gray-400 mb-1">
Nano Banana AI
</h2>
<p className="text-gray-500 max-w-md">
<p className="text-gray-500 text-sm">
{selectedTool === 'generate'
? '首先在提示框中描述您想要创建的内容'
? '在提示框中描述您想要创建的内容'
: '上传图像开始编辑'
}
</p>
@@ -276,10 +275,10 @@ export const ImageCanvas: React.FC = () => {
)}
{isGenerating && (
<div className="absolute inset-0 flex items-center justify-center bg-gray-900/50 z-50">
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-yellow-400 mb-4" />
<p className="text-gray-300">正在创建您的图像...</p>
<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-lg">
<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>
</div>
)}
@@ -353,29 +352,18 @@ export const ImageCanvas: React.FC = () => {
</div>
{/* 状态栏 */}
<div className="p-3 border-t border-gray-200 bg-white">
<div className="p-2 border-t border-gray-200 bg-white">
<div className="flex items-center justify-between text-xs text-gray-500">
<div className="flex items-center space-x-4">
<div className="flex items-center space-x-2">
{brushStrokes.length > 0 && (
<span className="text-yellow-400">{brushStrokes.length} 个画笔描边{brushStrokes.length !== 1 ? 's' : ''}</span>
<span className="text-yellow-400">{brushStrokes.length} 个描边</span>
)}
</div>
<div className="flex items-center space-x-2">
<div className="flex items-center space-x-1">
<span className="text-xs text-gray-500">
© 2025 Mark Fulton -
<a
href="https://www.reinventing.ai/"
target="_blank"
rel="noopener noreferrer"
className="text-yellow-400 hover:text-yellow-300 transition-colors ml-1"
>
Reinventing.AI Solutions
</a>
© 2025 Mark Fulton
</span>
<span className="text-gray-600 hidden md:inline">•</span>
<span className="text-yellow-400 hidden md:inline">⚡</span>
<span className="hidden md:inline">由 Gemini 2.5 Flash Image 提供支持</span>
</div>
</div>
</div>