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

10
src/App.tsx
View File

@@ -54,21 +54,23 @@ function AppContent() {
return ( return (
<div className="h-screen bg-gray-50 text-gray-900 flex flex-col font-sans"> <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 /> <Header />
</div> </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={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 /> <PromptComposer />
</div> </div>
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="h-full card card-lg">
<ImageCanvas /> <ImageCanvas />
</div> </div>
</div>
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<div className="h-full shadow-lg"> <div className="h-full card card-lg">
<HistoryPanel /> <HistoryPanel />
</div> </div>
</div> </div>

4
src/components/Header.tsx
View File

@@ -8,7 +8,7 @@ export const Header: React.FC = () => {
return ( 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 space-x-2">
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-yellow-50"> <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-yellow-50">
<div className="text-lg">🍌</div> <div className="text-lg">🍌</div>
@@ -23,7 +23,7 @@ export const Header: React.FC = () => {
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => setShowInfoModal(true)} 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" /> <HelpCircle className="h-4 w-4" />
</Button> </Button>

24
src/components/HistoryPanel.tsx
View File

@@ -93,7 +93,7 @@ export const HistoryPanel: React.FC = () => {
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => setShowHistory(!showHistory)} onClick={() => setShowHistory(!showHistory)}
className="h-6 w-6" className="h-6 w-6 rounded-full card"
title="隐藏历史面板" title="隐藏历史面板"
> >
× ×
@@ -104,7 +104,7 @@ export const HistoryPanel: React.FC = () => {
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
className="mt-2" className="mt-2 card"
onClick={refresh} onClick={refresh}
> >
重新加载 重新加载
@@ -194,10 +194,10 @@ export const HistoryPanel: React.FC = () => {
if (!showHistory) { if (!showHistory) {
return ( 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 <button
onClick={() => setShowHistory(true)} 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="显示历史面板" title="显示历史面板"
> >
<div className="flex flex-col space-y-1"> <div className="flex flex-col space-y-1">
@@ -211,7 +211,7 @@ export const HistoryPanel: React.FC = () => {
} }
return ( 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 justify-between mb-3">
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
@@ -223,7 +223,7 @@ export const HistoryPanel: React.FC = () => {
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={refresh} 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="刷新历史记录" title="刷新历史记录"
> >
⟳ ⟳
@@ -232,7 +232,7 @@ export const HistoryPanel: React.FC = () => {
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => setShowHistory(!showHistory)} 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="隐藏历史面板" 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"> <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" type="date"
value={startDate} value={startDate}
onChange={(e) => setStartDate(e.target.value)} 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="开始日期" placeholder="开始日期"
/> />
<input <input
type="date" type="date"
value={endDate} value={endDate}
onChange={(e) => setEndDate(e.target.value)} 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="结束日期" placeholder="结束日期"
/> />
</div> </div>
@@ -266,13 +266,13 @@ export const HistoryPanel: React.FC = () => {
type="text" type="text"
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} 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="搜索提示词..." placeholder="搜索提示词..."
/> />
<Button <Button
variant="outline" variant="outline"
size="sm" 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={() => { onClick={() => {
setStartDate(''); setStartDate('');
setEndDate(''); setEndDate('');
@@ -720,7 +720,7 @@ export const HistoryPanel: React.FC = () => {
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
className="w-full h-9 text-sm" className="w-full h-9 text-sm card"
onClick={() => { onClick={() => {
// 查找当前显示的图像（生成记录或编辑记录） // 查找当前显示的图像（生成记录或编辑记录）
let imageUrl: string | null = null; let imageUrl: string | null = null;

16
src/components/ImageCanvas.tsx
View File

@@ -211,7 +211,7 @@ export const ImageCanvas: React.FC = () => {
{/* 画布区域 */} {/* 画布区域 */}
<div <div
id="canvas-container" 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 && ( {!image && !isGenerating && (
<div className="absolute inset-0 flex items-center justify-center z-0"> <div className="absolute inset-0 flex items-center justify-center z-0">
@@ -231,8 +231,8 @@ export const ImageCanvas: React.FC = () => {
)} )}
{isGenerating && ( {isGenerating && (
<div className="absolute inset-0 flex items-center justify-center bg-gray-900/40 z-50 backdrop-blur-sm"> <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 shadow-2xl backdrop-blur-sm border border-gray-200/50"> <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" /> <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> <p className="text-gray-700 text-sm font-medium">正在创建图像...</p>
</div> </div>
@@ -308,12 +308,12 @@ export const ImageCanvas: React.FC = () => {
{/* 悬浮操作按钮 */} {/* 悬浮操作按钮 */}
{image && !isGenerating && ( {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 <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => handleZoom(-0.1)} 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" /> <ZoomOut className="h-4 w-4" />
</Button> </Button>
@@ -324,7 +324,7 @@ export const ImageCanvas: React.FC = () => {
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => handleZoom(0.1)} 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" /> <ZoomIn className="h-4 w-4" />
</Button> </Button>
@@ -332,7 +332,7 @@ export const ImageCanvas: React.FC = () => {
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={handleReset} 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" /> <RotateCcw className="h-4 w-4" />
</Button> </Button>
@@ -341,7 +341,7 @@ export const ImageCanvas: React.FC = () => {
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={handleDownload} 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" /> <Download className="h-4 w-4" />
</Button> </Button>

20
src/components/PromptComposer.tsx
View File

@@ -138,10 +138,10 @@ export const PromptComposer: React.FC = () => {
if (!showPromptPanel) { if (!showPromptPanel) {
return ( 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 <button
onClick={() => setShowPromptPanel(true)} 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="显示提示面板" title="显示提示面板"
> >
<div className="flex flex-col space-y-1"> <div className="flex flex-col space-y-1">
@@ -156,7 +156,7 @@ export const PromptComposer: React.FC = () => {
return ( 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>
<div className="flex items-center justify-between mb-2"> <div className="flex items-center justify-between mb-2">
<h3 className="text-xs font-medium text-gray-500 uppercase tracking-wide">模式</h3> <h3 className="text-xs font-medium text-gray-500 uppercase tracking-wide">模式</h3>
@@ -165,7 +165,7 @@ export const PromptComposer: React.FC = () => {
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => setShowHintsModal(true)} 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" /> <HelpCircle className="h-3.5 w-3.5" />
</Button> </Button>
@@ -173,7 +173,7 @@ export const PromptComposer: React.FC = () => {
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => setShowPromptPanel(false)} 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="隐藏面板" 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"> <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" variant="outline"
size="sm" size="sm"
onClick={() => fileInputRef.current?.click()} onClick={() => fileInputRef.current?.click()}
className="mt-1" className="mt-1 card"
disabled={ disabled={
(selectedTool === 'generate' && uploadedImages.length >= 2) || (selectedTool === 'generate' && uploadedImages.length >= 2) ||
(selectedTool === 'edit' && editReferenceImages.length >= 2) (selectedTool === 'edit' && editReferenceImages.length >= 2)
@@ -335,7 +335,7 @@ export const PromptComposer: React.FC = () => {
<div className="flex gap-2"> <div className="flex gap-2">
<Button <Button
onClick={() => selectedTool === 'generate' ? cancelGeneration() : cancelEdit()} 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" /> <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 <Button
onClick={handleGenerate} onClick={handleGenerate}
disabled={!currentPrompt.trim()} 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" /> <Wand2 className="h-4 w-4 mr-2" />
{selectedTool === 'generate' ? '生成图像' : '应用编辑'} {selectedTool === 'generate' ? '生成图像' : '应用编辑'}
@@ -415,7 +415,7 @@ export const PromptComposer: React.FC = () => {
variant="destructive" variant="destructive"
size="sm" size="sm"
onClick={handleClearSession} onClick={handleClearSession}
className="flex-1 h-8 text-xs" className="flex-1 h-8 text-xs card"
> >
确认 确认
</Button> </Button>
@@ -423,7 +423,7 @@ export const PromptComposer: React.FC = () => {
variant="outline" variant="outline"
size="sm" size="sm"
onClick={() => setShowClearConfirm(false)} 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> </Button>

15
src/index.css
View File

@@ -98,3 +98,18 @@ body {
transition-duration: 200ms; transition-duration: 200ms;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 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', '100': '25rem',
'112': '28rem', '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: [], plugins: [],