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

12
src/App.tsx
View File

@@ -54,21 +54,23 @@ function AppContent() {
return (
<div className="h-screen bg-gray-50 text-gray-900 flex flex-col font-sans">
<div className="shadow-sm">
<div className="card card-lg rounded-none">
<Header />
</div>
<div className="flex-1 flex overflow-hidden">
<div className="flex-1 flex overflow-hidden p-4 gap-4">
<div className={cn("flex-shrink-0 transition-all duration-300", !showPromptPanel && "w-8")}>
<div className="h-full shadow-lg">
<div className="h-full card card-lg">
<PromptComposer />
</div>
</div>
<div className="flex-1 min-w-0">
<ImageCanvas />
<div className="h-full card card-lg">
<ImageCanvas />
</div>
</div>
<div className="flex-shrink-0">
<div className="h-full shadow-lg">
<div className="h-full card card-lg">
<HistoryPanel />
</div>
</div>

4
src/components/Header.tsx
View File

@@ -8,7 +8,7 @@ export const Header: React.FC = () => {
return (
<>
<header className="h-12 bg-white border-b border-gray-100 flex items-center justify-between px-3 shadow-sm">
<header className="h-12 bg-white flex items-center justify-between px-3 rounded-t-xl">
<div className="flex items-center space-x-2">
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-yellow-50">
<div className="text-lg">🍌</div>
@@ -23,7 +23,7 @@ export const Header: React.FC = () => {
variant="ghost"
size="icon"
onClick={() => setShowInfoModal(true)}
className="h-7 w-7 text-gray-500 hover:text-gray-700 hover:bg-gray-100"
className="h-7 w-7 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full card"
>
<HelpCircle className="h-4 w-4" />
</Button>

24
src/components/HistoryPanel.tsx
View File

@@ -93,7 +93,7 @@ export const HistoryPanel: React.FC = () => {
variant="ghost"
size="icon"
onClick={() => setShowHistory(!showHistory)}
className="h-6 w-6"
className="h-6 w-6 rounded-full card"
title="隐藏历史面板"
>
×
@@ -104,7 +104,7 @@ export const HistoryPanel: React.FC = () => {
<Button
variant="outline"
size="sm"
className="mt-2"
className="mt-2 card"
onClick={refresh}
>
重新加载
@@ -194,10 +194,10 @@ export const HistoryPanel: React.FC = () => {
if (!showHistory) {
return (
<div className="w-8 bg-white border-l border-gray-200 flex flex-col items-center justify-center">
<div className="w-8 bg-white flex flex-col items-center justify-center rounded-r-xl">
<button
onClick={() => setShowHistory(true)}
className="w-6 h-16 bg-gray-100 hover:bg-gray-200 rounded-l-lg border border-r-0 border-gray-300 flex items-center justify-center transition-colors group"
className="w-6 h-16 bg-gray-100 hover:bg-gray-200 rounded-l-lg flex items-center justify-center transition-colors group"
title="显示历史面板"
>
<div className="flex flex-col space-y-1">
@@ -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 shadow-lg">
<div className="w-72 bg-white p-4 flex flex-col h-full">
{/* 头部 */}
<div className="flex items-center justify-between mb-3">
<div className="flex items-center space-x-2">
@@ -223,7 +223,7 @@ export const HistoryPanel: React.FC = () => {
variant="ghost"
size="icon"
onClick={refresh}
className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100"
className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full card"
title="刷新历史记录"
>
⟳
@@ -232,7 +232,7 @@ export const HistoryPanel: React.FC = () => {
variant="ghost"
size="icon"
onClick={() => setShowHistory(!showHistory)}
className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100"
className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full card"
title="隐藏历史面板"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -250,14 +250,14 @@ export const HistoryPanel: React.FC = () => {
type="date"
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
className="flex-1 text-xs p-1.5 border border-gray-200 rounded text-gray-600 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-yellow-400"
className="flex-1 text-xs p-1.5 border border-gray-200 rounded-lg text-gray-600 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-yellow-400 card"
placeholder="开始日期"
/>
<input
type="date"
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
className="flex-1 text-xs p-1.5 border border-gray-200 rounded text-gray-600 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-yellow-400"
className="flex-1 text-xs p-1.5 border border-gray-200 rounded-lg text-gray-600 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-yellow-400 card"
placeholder="结束日期"
/>
</div>
@@ -266,13 +266,13 @@ export const HistoryPanel: React.FC = () => {
type="text"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="flex-1 text-xs p-1.5 border border-gray-200 rounded-l bg-gray-50 focus:outline-none focus:ring-1 focus:ring-yellow-400"
className="flex-1 text-xs p-1.5 border border-gray-200 rounded-l-lg bg-gray-50 focus:outline-none focus:ring-1 focus:ring-yellow-400 card"
placeholder="搜索提示词..."
/>
<Button
variant="outline"
size="sm"
className="text-xs p-1.5 rounded-l-none h-7 border-gray-200 text-gray-600 hover:bg-gray-100"
className="text-xs p-1.5 rounded-l-none h-7 border-gray-200 text-gray-600 hover:bg-gray-100 card"
onClick={() => {
setStartDate('');
setEndDate('');
@@ -720,7 +720,7 @@ export const HistoryPanel: React.FC = () => {
<Button
variant="outline"
size="sm"
className="w-full h-9 text-sm"
className="w-full h-9 text-sm card"
onClick={() => {
// 查找当前显示的图像（生成记录或编辑记录）
let imageUrl: string | null = null;

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>

20
src/components/PromptComposer.tsx
View File

@@ -138,10 +138,10 @@ export const PromptComposer: React.FC = () => {
if (!showPromptPanel) {
return (
<div className="w-8 bg-white border-r border-gray-200 flex flex-col items-center justify-center">
<div className="w-8 bg-white flex flex-col items-center justify-center rounded-l-xl">
<button
onClick={() => setShowPromptPanel(true)}
className="w-6 h-16 bg-gray-100 hover:bg-gray-200 rounded-r-lg border border-l-0 border-gray-300 flex items-center justify-center transition-colors group"
className="w-6 h-16 bg-gray-100 hover:bg-gray-200 rounded-r-lg flex items-center justify-center transition-colors group"
title="显示提示面板"
>
<div className="flex flex-col space-y-1">
@@ -156,7 +156,7 @@ export const PromptComposer: React.FC = () => {
return (
<>
<div className="w-72 h-full bg-white border-r border-gray-200 p-4 flex flex-col space-y-5 overflow-y-auto shadow-lg">
<div className="w-72 h-full bg-white p-4 flex flex-col space-y-5 overflow-y-auto">
<div>
<div className="flex items-center justify-between mb-2">
<h3 className="text-xs font-medium text-gray-500 uppercase tracking-wide">模式</h3>
@@ -165,7 +165,7 @@ export const PromptComposer: React.FC = () => {
variant="ghost"
size="icon"
onClick={() => setShowHintsModal(true)}
className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100"
className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full card"
>
<HelpCircle className="h-3.5 w-3.5" />
</Button>
@@ -173,7 +173,7 @@ export const PromptComposer: React.FC = () => {
variant="ghost"
size="icon"
onClick={() => setShowPromptPanel(false)}
className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100"
className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded-full card"
title="隐藏面板"
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -255,7 +255,7 @@ export const PromptComposer: React.FC = () => {
variant="outline"
size="sm"
onClick={() => fileInputRef.current?.click()}
className="mt-1"
className="mt-1 card"
disabled={
(selectedTool === 'generate' && uploadedImages.length >= 2) ||
(selectedTool === 'edit' && editReferenceImages.length >= 2)
@@ -335,7 +335,7 @@ export const PromptComposer: React.FC = () => {
<div className="flex gap-2">
<Button
onClick={() => selectedTool === 'generate' ? cancelGeneration() : cancelEdit()}
className="flex-1 h-12 text-sm font-medium bg-red-500 hover:bg-red-600 rounded-lg"
className="flex-1 h-12 text-sm font-medium bg-red-500 hover:bg-red-600 rounded-lg card"
>
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" />
中断
@@ -345,7 +345,7 @@ export const PromptComposer: React.FC = () => {
<Button
onClick={handleGenerate}
disabled={!currentPrompt.trim()}
className="w-full h-12 text-sm font-medium rounded-lg shadow-sm hover:shadow-md transition-shadow"
className="w-full h-12 text-sm font-medium rounded-lg shadow-sm hover:shadow-md transition-shadow card"
>
<Wand2 className="h-4 w-4 mr-2" />
{selectedTool === 'generate' ? '生成图像' : '应用编辑'}
@@ -415,7 +415,7 @@ export const PromptComposer: React.FC = () => {
variant="destructive"
size="sm"
onClick={handleClearSession}
className="flex-1 h-8 text-xs"
className="flex-1 h-8 text-xs card"
>
确认
</Button>
@@ -423,7 +423,7 @@ export const PromptComposer: React.FC = () => {
variant="outline"
size="sm"
onClick={() => setShowClearConfirm(false)}
className="flex-1 h-8 text-xs border-gray-200"
className="flex-1 h-8 text-xs border-gray-200 card"
>
取消
</Button>

15
src/index.css
View File

@@ -97,4 +97,19 @@ body {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-duration: 200ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Card styles */
.card {
@apply bg-white rounded-xl shadow-card border border-gray-100 overflow-hidden;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.card-hover {
@apply shadow-card-hover;
}
.card-lg {
@apply shadow-card-lg;
}

9
tailwind.config.js
View File

@@ -50,6 +50,15 @@ export default {
'100': '25rem',
'112': '28rem',
},
boxShadow: {
'card': '0 4px 12px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.05)',
'card-hover': '0 6px 16px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)',
'card-lg': '0 10px 25px rgba(0, 0, 0, 0.1), 0 5px 10px rgba(0, 0, 0, 0.05)',
'inner': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
},
backdropBlur: {
'xs': '2px',
}
},
},
plugins: [],