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

23
src/components/Header.tsx
View File

@@ -8,29 +8,24 @@ export const Header: React.FC = () => {
return (
<>
<header className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6">
<div className="flex items-center space-x-4">
<header className="h-12 bg-white border-b border-gray-100 flex items-center justify-between px-3">
<div className="flex items-center space-x-2">
<div className="text-2xl">🍌</div>
<h1 className="text-xl font-semibold text-gray-900 hidden md:block">
Nano Banana AI 图像编辑器
</h1>
<h1 className="text-xl font-semibold text-gray-900 md:hidden">
NB 编辑器
</h1>
</div>
<div className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
1.0
<div className="flex items-center justify-center w-8 h-8 rounded-lg bg-yellow-50">
<div className="text-lg">🍌</div>
</div>
<h1 className="text-base font-medium text-gray-800 hidden sm:block">
Nano Banana
</h1>
</div>
<div className="flex items-center space-x-2">
<div className="flex items-center space-x-1">
<Button
variant="ghost"
size="icon"
onClick={() => setShowInfoModal(true)}
className="h-7 w-7 text-gray-500 hover:text-gray-700 hover:bg-gray-100"
>
<HelpCircle className="h-5 w-5" />
<HelpCircle className="h-4 w-4" />
</Button>
</div>
</header>

129
src/components/HistoryPanel.tsx
View File

@@ -211,19 +211,19 @@ export const HistoryPanel: React.FC = () => {
}
return (
<div className="w-80 bg-white border-l border-gray-200 p-6 flex flex-col h-full">
<div className="w-72 bg-white border-l border-gray-200 p-4 flex flex-col h-full">
{/* 头部 */}
<div className="flex items-center justify-between mb-4">
<div className="flex items-center justify-between mb-3">
<div className="flex items-center space-x-2">
<History className="h-5 w-5 text-gray-400" />
<h3 className="text-sm font-medium text-gray-300">历史记录和变体</h3>
<History className="h-4 w-4 text-gray-500" />
<h3 className="text-sm font-medium text-gray-700">历史记录</h3>
</div>
<div className="flex space-x-1">
<Button
variant="ghost"
size="icon"
onClick={refresh}
className="h-6 w-6"
className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100"
title="刷新历史记录"
>
⟳
@@ -232,29 +232,32 @@ export const HistoryPanel: React.FC = () => {
variant="ghost"
size="icon"
onClick={() => setShowHistory(!showHistory)}
className="h-6 w-6"
className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100"
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">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</Button>
</div>
</div>
{/* 筛选和搜索控件 */}
<div className="mb-4 space-y-3">
<div className="flex space-x-2">
<div className="mb-3 space-y-2">
<div className="flex space-x-1">
<input
type="date"
value={startDate}
onChange={(e) => setStartDate(e.target.value)}
className="flex-1 text-xs p-1 border rounded"
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"
placeholder="开始日期"
/>
<input
type="date"
value={endDate}
onChange={(e) => setEndDate(e.target.value)}
className="flex-1 text-xs p-1 border rounded"
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"
placeholder="结束日期"
/>
</div>
@@ -263,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 border rounded-l"
placeholder="搜索提示词或编辑指令..."
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"
placeholder="搜索提示词..."
/>
<Button
variant="outline"
size="sm"
className="text-xs p-1 rounded-l-none"
className="text-xs p-1.5 rounded-l-none h-7 border-gray-200 text-gray-600 hover:bg-gray-100"
onClick={() => {
setStartDate('');
setEndDate('');
@@ -283,28 +286,28 @@ export const HistoryPanel: React.FC = () => {
{/* 变体网格 */}
<div className="mb-6 flex-shrink-0">
<div className="flex items-center justify-between mb-3">
<h4 className="text-xs font-medium text-gray-400">当前变体</h4>
<span className="text-xs text-gray-500">
<div className="flex items-center justify-between mb-2">
<h4 className="text-xs font-medium text-gray-500 uppercase tracking-wide">变体</h4>
<span className="text-xs text-gray-400">
{filteredGenerations.length + filteredEdits.length}/1000
</span>
</div>
{filteredGenerations.length === 0 && filteredEdits.length === 0 ? (
<div className="text-center py-8">
<div className="text-4xl mb-2">🖼️</div>
<p className="text-sm text-gray-500">暂无生成记录</p>
<div className="text-2xl mb-2 text-gray-300">🖼️</div>
<p className="text-xs text-gray-400">暂无历史记录</p>
</div>
) : (
<div className="grid grid-cols-3 gap-2 max-h-80 overflow-y-auto">
<div className="grid grid-cols-3 gap-1.5 max-h-72 overflow-y-auto">
{/* 显示生成记录 */}
{[...filteredGenerations].sort((a, b) => b.timestamp - a.timestamp).slice(0, 50).map((generation, index) => (
<div
key={generation.id}
className={cn(
'relative aspect-square rounded-lg border-2 cursor-pointer transition-all duration-200 overflow-hidden',
'relative aspect-square rounded border cursor-pointer transition-all duration-200 overflow-hidden',
selectedGenerationId === generation.id
? 'border-yellow-400'
: 'border-gray-300 hover:border-gray-400'
: 'border-gray-200 hover:border-gray-300'
)}
onClick={() => {
selectGeneration(generation.id);
@@ -400,10 +403,10 @@ export const HistoryPanel: React.FC = () => {
<div
key={edit.id}
className={cn(
'relative aspect-square rounded-lg border-2 cursor-pointer transition-all duration-200 overflow-hidden',
'relative aspect-square rounded border cursor-pointer transition-all duration-200 overflow-hidden',
selectedEditId === edit.id
? 'border-purple-400'
: 'border-gray-300 hover:border-gray-400'
: 'border-gray-200 hover:border-gray-300'
)}
onClick={() => {
selectEdit(edit.id);
@@ -518,56 +521,56 @@ export const HistoryPanel: React.FC = () => {
)}
{/* 生成详情 */}
<div className="mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200 flex-1 overflow-y-auto min-h-0">
<h4 className="text-xs font-medium text-gray-500 mb-2">生成详情</h4>
<div className="flex-1 overflow-y-auto min-h-0">
<h4 className="text-xs font-medium text-gray-500 mb-2 uppercase tracking-wide">详情</h4>
{(() => {
const gen = filteredGenerations.find(g => g.id === selectedGenerationId) || dbGenerations.find(g => g.id === selectedGenerationId);
const selectedEdit = filteredEdits.find(e => e.id === selectedEditId) || dbEdits.find(e => e.id === selectedEditId);
if (gen) {
return (
<div className="space-y-3">
<div className="space-y-2 text-xs text-gray-600">
<div className="space-y-3 p-3 bg-gray-50 rounded-lg">
<div className="space-y-2.5 text-xs text-gray-700">
<div>
<span className="text-gray-500">提示:</span>
<p className="text-gray-800 mt-1">{gen.prompt}</p>
<p className="text-gray-800 mt-1 leading-relaxed">{gen.prompt}</p>
</div>
<div className="flex justify-between">
<span>模型:</span>
<span>{gen.modelVersion}</span>
<span className="text-gray-500">模型:</span>
<span className="text-gray-700">{gen.modelVersion}</span>
</div>
{gen.parameters.seed && (
<div className="flex justify-between">
<span>种子:</span>
<span>{gen.parameters.seed}</span>
<span className="text-gray-500">种子:</span>
<span className="text-gray-700 font-mono">{gen.parameters.seed}</span>
</div>
)}
<div className="flex justify-between">
<span>时间:</span>
<span>{new Date(gen.timestamp).toLocaleString()}</span>
<span className="text-gray-500">时间:</span>
<span className="text-gray-700">{new Date(gen.timestamp).toLocaleString()}</span>
</div>
</div>
{/* 上传结果 */}
{gen.uploadResults && gen.uploadResults.length > 0 && (
<div>
<div className="pt-2 border-t border-gray-200">
<h5 className="text-xs font-medium text-gray-500 mb-2">上传结果</h5>
<div className="space-y-1">
<div className="space-y-1.5">
{gen.uploadResults.map((result, index) => (
<div key={index} className="text-xs">
<div className="flex justify-between">
<span>图像 {index + 1}:</span>
<span className="text-gray-500">图像 {index + 1}:</span>
<span className={result.success ? 'text-green-600' : 'text-red-600'}>
{result.success ? '成功' : '失败'}
</span>
</div>
{result.success && result.url && (
<div className="text-blue-600 truncate">
<div className="text-blue-600 truncate text-xs mt-0.5">
{result.url.split('/').pop()}
</div>
)}
{result.error && (
<div className="text-red-600 truncate">
<div className="text-red-600 truncate text-xs mt-0.5">
{result.error}
</div>
)}
@@ -579,7 +582,7 @@ export const HistoryPanel: React.FC = () => {
{/* 参考图像信息 */}
{gen.sourceAssets && gen.sourceAssets.length > 0 && (
<div>
<div className="pt-2 border-t border-gray-200">
<h5 className="text-xs font-medium text-gray-500 mb-2">参考图像</h5>
<div className="text-xs text-gray-600 mb-2">
{gen.sourceAssets.length} 个参考图像
@@ -588,7 +591,7 @@ export const HistoryPanel: React.FC = () => {
{gen.sourceAssets.slice(0, 4).map((asset: any, index: number) => (
<div
key={asset.id}
className="relative w-16 h-16 rounded border overflow-hidden cursor-pointer"
className="relative w-16 h-16 rounded border overflow-hidden cursor-pointer hover:ring-2 hover:ring-yellow-400"
onClick={(e) => {
e.stopPropagation();
setPreviewModal({
@@ -617,25 +620,25 @@ export const HistoryPanel: React.FC = () => {
</div>
);
} else if (selectedEdit) {
const parentGen = dbGenerations.find(g => g.id === selectedEdit.parentGenerationId);
const parentGen = filteredGenerations.find(g => g.id === selectedEdit.parentGenerationId) || dbGenerations.find(g => g.id === selectedEdit.parentGenerationId);
return (
<div className="space-y-3">
<div className="space-y-2 text-xs text-gray-600">
<div className="space-y-3 p-3 bg-gray-50 rounded-lg">
<div className="space-y-2.5 text-xs text-gray-700">
<div>
<span className="text-gray-500">编辑指令:</span>
<p className="text-gray-800 mt-1">{selectedEdit.instruction}</p>
<p className="text-gray-800 mt-1 leading-relaxed">{selectedEdit.instruction}</p>
</div>
<div className="flex justify-between">
<span>类型:</span>
<span>图像编辑</span>
<span className="text-gray-500">类型:</span>
<span className="text-gray-700">图像编辑</span>
</div>
<div className="flex justify-between">
<span>创建时间:</span>
<span>{new Date(selectedEdit.timestamp).toLocaleString()}</span>
<span className="text-gray-500">创建时间:</span>
<span className="text-gray-700">{new Date(selectedEdit.timestamp).toLocaleString()}</span>
</div>
{selectedEdit.maskAssetId && (
<div className="flex justify-between">
<span>遮罩:</span>
<span className="text-gray-500">遮罩:</span>
<span className="text-purple-600">已应用</span>
</div>
)}
@@ -643,24 +646,24 @@ export const HistoryPanel: React.FC = () => {
{/* 上传结果 */}
{selectedEdit.uploadResults && selectedEdit.uploadResults.length > 0 && (
<div>
<div className="pt-2 border-t border-gray-200">
<h5 className="text-xs font-medium text-gray-500 mb-2">上传结果</h5>
<div className="space-y-1">
<div className="space-y-1.5">
{selectedEdit.uploadResults.map((result, index) => (
<div key={index} className="text-xs">
<div className="flex justify-between">
<span>图像 {index + 1}:</span>
<span className="text-gray-500">图像 {index + 1}:</span>
<span className={result.success ? 'text-green-600' : 'text-red-600'}>
{result.success ? '成功' : '失败'}
</span>
</div>
{result.success && result.url && (
<div className="text-blue-600 truncate">
<div className="text-blue-600 truncate text-xs mt-0.5">
{result.url.split('/').pop()}
</div>
)}
{result.error && (
<div className="text-red-600 truncate">
<div className="text-red-600 truncate text-xs mt-0.5">
{result.error}
</div>
)}
@@ -672,7 +675,7 @@ export const HistoryPanel: React.FC = () => {
{/* 原始生成参考 */}
{parentGen && (
<div>
<div className="pt-2 border-t border-gray-200">
<h5 className="text-xs font-medium text-gray-500 mb-2">原始生成</h5>
<div className="text-xs text-gray-600">
基于: G{dbGenerations.findIndex(g => g.id === parentGen.id) + 1}
@@ -687,7 +690,7 @@ export const HistoryPanel: React.FC = () => {
{parentGen.sourceAssets.slice(0, 4).map((asset: any, index: number) => (
<div
key={asset.id}
className="relative w-16 h-16 rounded border overflow-hidden cursor-pointer"
className="relative w-16 h-16 rounded border overflow-hidden cursor-pointer hover:ring-2 hover:ring-yellow-400"
onClick={(e) => {
e.stopPropagation();
setPreviewModal({
@@ -719,8 +722,8 @@ export const HistoryPanel: React.FC = () => {
);
} else {
return (
<div className="space-y-2 text-xs text-gray-500">
<p className="text-gray-500">选择一个生成记录或编辑记录以查看详细信息</p>
<div className="space-y-2 text-xs text-gray-500 p-3 text-center">
<p className="text-gray-400">选择一个记录以查看详细信息</p>
</div>
);
}
@@ -728,11 +731,11 @@ export const HistoryPanel: React.FC = () => {
</div>
{/* 操作 */}
<div className="space-y-3 flex-shrink-0">
<div className="space-y-2 flex-shrink-0 pt-2 border-t border-gray-100">
<Button
variant="outline"
size="sm"
className="w-full"
className="w-full h-9 text-sm"
onClick={() => {
// 查找当前显示的图像（生成记录或编辑记录）
let imageUrl: string | null = null;
@@ -775,7 +778,7 @@ export const HistoryPanel: React.FC = () => {
disabled={!selectedGenerationId && !useAppStore.getState().canvasImage}
>
<Download className="h-4 w-4 mr-2" />
下载
下载图像
</Button>
</div>

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>

203
src/components/PromptComposer.tsx
View File

@@ -156,43 +156,46 @@ export const PromptComposer: React.FC = () => {
return (
<>
<div className="w-80 lg:w-72 xl:w-80 h-full bg-white border-r border-gray-200 p-6 flex flex-col space-y-6 overflow-y-auto">
<div className="w-72 h-full bg-white border-r border-gray-200 p-4 flex flex-col space-y-5 overflow-y-auto">
<div>
<div className="flex items-center justify-between mb-3">
<h3 className="text-sm font-medium text-gray-300">模式</h3>
<div className="flex items-center space-x-1">
<div className="flex items-center justify-between mb-2">
<h3 className="text-xs font-medium text-gray-500 uppercase tracking-wide">模式</h3>
<div className="flex items-center space-x-0.5">
<Button
variant="ghost"
size="icon"
onClick={() => setShowHintsModal(true)}
className="h-6 w-6"
className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100"
>
<HelpCircle className="h-4 w-4" />
<HelpCircle className="h-3.5 w-3.5" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => setShowPromptPanel(false)}
className="h-6 w-6"
title="隐藏提示面板"
className="h-6 w-6 text-gray-400 hover:text-gray-600 hover:bg-gray-100"
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">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</Button>
</div>
</div>
<div className="grid grid-cols-3 gap-2">
<div className="grid grid-cols-3 gap-1.5">
{tools.map((tool) => (
<button
key={tool.id}
onClick={() => setSelectedTool(tool.id)}
className={cn(
'flex flex-col items-center p-3 rounded-lg border transition-all duration-200',
'flex flex-col items-center p-2 rounded-lg border transition-all duration-200',
selectedTool === tool.id
? 'bg-yellow-400/10 border-yellow-400/50 text-yellow-400'
: 'bg-white border-yellow-400/50 text-gray-400 hover:bg-yellow-400 hover:text-white'
? 'bg-yellow-50 border-yellow-300 text-yellow-700 shadow-sm'
: 'bg-gray-50 border-gray-200 text-gray-500 hover:bg-yellow-50 hover:border-yellow-300 hover:text-yellow-700'
)}
>
<tool.icon className="h-5 w-5 mb-1" />
<tool.icon className="h-4 w-4 mb-1" />
<span className="text-xs font-medium">{tool.label}</span>
</button>
))}
@@ -206,7 +209,7 @@ export const PromptComposer: React.FC = () => {
onDragLeave={handleDragLeave}
onDrop={handleDrop}
className={cn(
"border-2 border-dashed rounded-lg p-6 text-center transition-colors",
"border border-dashed rounded-md p-4 text-center transition-colors",
isDragOver
? "border-yellow-400 bg-yellow-400/10"
: "border-gray-300 hover:border-yellow-400"
@@ -216,13 +219,13 @@ export const PromptComposer: React.FC = () => {
{selectedTool === 'generate' ? '参考图像' : selectedTool === 'edit' ? '样式参考' : '上传图像'}
</label>
{selectedTool === 'mask' && (
<p className="text-xs text-gray-500 mb-3">使用遮罩编辑图像</p>
<p className="text-xs text-gray-500 mb-2">使用遮罩编辑图像</p>
)}
{selectedTool === 'generate' && (
<p className="text-xs text-gray-500 mb-3">可选，最多2张图像</p>
<p className="text-xs text-gray-500 mb-2">可选，最多2张图像</p>
)}
{selectedTool === 'edit' && (
<p className="text-xs text-gray-500 mb-3">
<p className="text-xs text-gray-500 mb-2">
{canvasImage ? '可选样式参考，最多2张图像' : '上传要编辑的图像，最多2张图像'}
</p>
)}
@@ -235,29 +238,30 @@ export const PromptComposer: React.FC = () => {
className="hidden"
/>
<div className="flex flex-col items-center justify-center space-y-3">
<Upload className={cn("h-8 w-8", isDragOver ? "text-yellow-500" : "text-gray-400")} />
<div className="flex flex-col items-center justify-center space-y-2">
<Upload className={cn("h-6 w-6", isDragOver ? "text-yellow-500" : "text-gray-400")} />
<div>
<p className={cn(
"text-sm font-medium",
isDragOver ? "text-yellow-700" : "text-gray-600"
)}>
{isDragOver ? "释放文件以上传" : "拖拽图像到此处或点击上传"}
{isDragOver ? "释放文件以上传" : "拖拽或点击上传"}
</p>
<p className="text-xs text-gray-500 mt-1">
支持 JPG, PNG, GIF 格式
支持 JPG, PNG, GIF
</p>
</div>
<Button
variant="outline"
size="sm"
onClick={() => fileInputRef.current?.click()}
className="mt-2"
className="mt-1"
disabled={
(selectedTool === 'generate' && uploadedImages.length >= 2) ||
(selectedTool === 'edit' && editReferenceImages.length >= 2)
}
>
<Upload className="h-4 w-4 mr-2" />
<Upload className="h-3 w-3 mr-1" />
选择文件
</Button>
</div>
@@ -266,13 +270,13 @@ export const PromptComposer: React.FC = () => {
{/* Show uploaded images preview */}
{((selectedTool === 'generate' && uploadedImages.length > 0) ||
(selectedTool === 'edit' && editReferenceImages.length > 0)) && (
<div className="mt-3 space-y-2">
<div className="mt-2 space-y-2">
{(selectedTool === 'generate' ? uploadedImages : editReferenceImages).map((image, index) => (
<div key={index} className="relative">
<img
src={image}
alt={`参考图像 ${index + 1}`}
className="w-full h-20 object-cover rounded-lg border border-gray-300"
className="w-full h-16 object-cover rounded border border-gray-300"
/>
<button
onClick={() => selectedTool === 'generate' ? removeUploadedImage(index) : removeEditReferenceImage(index)}
@@ -280,7 +284,7 @@ export const PromptComposer: React.FC = () => {
>
×
</button>
<div className="absolute bottom-1 left-1 bg-gray-100/80 text-xs px-2 py-1 rounded text-gray-700">
<div className="absolute bottom-1 left-1 bg-gray-100/80 text-xs px-1 py-0.5 rounded text-gray-700">
参考 {index + 1}
</div>
</div>
@@ -291,36 +295,36 @@ export const PromptComposer: React.FC = () => {
{/* 提示输入 */}
<div>
<label className="text-sm font-medium text-gray-700 mb-3 block">
{selectedTool === 'generate' ? '描述您想要创建的内容' : '描述您的修改'}
<label className="text-xs font-medium text-gray-500 mb-2 block uppercase tracking-wide">
{selectedTool === 'generate' ? '提示词' : '编辑指令'}
</label>
<Textarea
value={currentPrompt}
onChange={(e) => setCurrentPrompt(e.target.value)}
placeholder={
selectedTool === 'generate'
? '宁静的山景日落，湖面倒映着金色的天空...'
: '让天空更加戏剧化，添加暴风云...'
? '描述您想要创建的内容...'
: '描述您想要的修改...'
}
className="min-h-[120px] resize-none"
className="min-h-[100px] resize-none text-sm"
/>
{/* 提示质量指示器 */}
<button
onClick={() => setShowHintsModal(true)}
className="mt-2 flex items-center text-xs hover:text-gray-600 transition-colors group"
className="mt-2 flex items-center text-xs hover:text-gray-700 transition-colors group"
>
{currentPrompt.length < 20 ? (
<HelpCircle className="h-3 w-3 mr-2 text-red-500 group-hover:text-red-400" />
<HelpCircle className="h-3 w-3 mr-2 text-red-400 group-hover:text-red-500" />
) : (
<div className={cn(
'h-2 w-2 rounded-full mr-2',
currentPrompt.length < 50 ? 'bg-yellow-500' : 'bg-green-500'
currentPrompt.length < 50 ? 'bg-yellow-400' : 'bg-green-400'
)} />
)}
<span className="text-gray-600 group-hover:text-gray-800">
{currentPrompt.length < 20 ? '添加更多细节以获得更好的结果' :
currentPrompt.length < 50 ? '细节水平良好' : '提示细节优秀'}
<span className="text-gray-500 group-hover:text-gray-700">
{currentPrompt.length < 20 ? '添加更多细节' :
currentPrompt.length < 50 ? '细节良好' : '细节优秀'}
</span>
</button>
</div>
@@ -331,9 +335,9 @@ export const PromptComposer: React.FC = () => {
<div className="flex gap-2">
<Button
onClick={() => selectedTool === 'generate' ? cancelGeneration() : cancelEdit()}
className="flex-1 h-14 text-base font-medium bg-red-500 hover:bg-red-600"
className="flex-1 h-12 text-sm font-medium bg-red-500 hover:bg-red-600 rounded-lg"
>
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-900 mr-2" />
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2" />
中断
</Button>
</div>
@@ -341,63 +345,30 @@ export const PromptComposer: React.FC = () => {
<Button
onClick={handleGenerate}
disabled={!currentPrompt.trim()}
className="w-full h-14 text-base font-medium"
className="w-full h-12 text-sm font-medium rounded-lg shadow-sm hover:shadow-md transition-shadow"
>
<Wand2 className="h-4 w-4 mr-2" />
{selectedTool === 'generate' ? '生成' : '应用编辑'}
{selectedTool === 'generate' ? '生成图像' : '应用编辑'}
</Button>
)}
{/* 高级控制 */}
<div>
<div className="pt-2 border-t border-gray-100">
<button
onClick={() => setShowAdvanced(!showAdvanced)}
className="flex items-center text-sm text-gray-600 hover:text-gray-800 transition-colors duration-200"
className="flex items-center text-xs text-gray-500 hover:text-gray-700 transition-colors duration-200"
>
{showAdvanced ? <ChevronDown className="h-4 w-4 mr-1" /> : <ChevronRight className="h-4 w-4 mr-1" />}
{showAdvanced ? '隐藏' : '显示'} 高级控制
{showAdvanced ? <ChevronDown className="h-3 w-3 mr-1" /> : <ChevronRight className="h-3 w-3 mr-1" />}
高级选项
</button>
<button
onClick={() => setShowClearConfirm(!showClearConfirm)}
className="flex items-center text-sm text-gray-600 hover:text-red-500 transition-colors duration-200 mt-2"
>
<RotateCcw className="h-4 w-4 mr-2" />
清除会话
</button>
{showClearConfirm && (
<div className="mt-3 p-3 bg-gray-100 rounded-lg border border-gray-300">
<p className="text-xs text-gray-600 mb-3">
您确定要清除此会话吗？这将删除所有上传、提示和画布内容。
</p>
<div className="flex space-x-2">
<Button
variant="destructive"
size="sm"
onClick={handleClearSession}
className="flex-1"
>
确认清除
</Button>
<Button
variant="outline"
size="sm"
onClick={() => setShowClearConfirm(false)}
className="flex-1"
>
取消
</Button>
</div>
</div>
)}
{showAdvanced && (
<div className="mt-4 space-y-4">
<div className="mt-3 space-y-3">
{/* 创造力 */}
<div>
<label className="text-xs text-gray-600 mb-2 block">
创造力 ({temperature})
<label className="text-xs text-gray-500 mb-1.5 block flex justify-between">
<span>创造力</span>
<span className="font-mono">{temperature}</span>
</label>
<input
type="range"
@@ -406,13 +377,13 @@ export const PromptComposer: React.FC = () => {
step="0.1"
value={temperature}
onChange={(e) => setTemperature(parseFloat(e.target.value))}
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
className="w-full h-1.5 bg-gray-200 rounded-full appearance-none cursor-pointer slider"
/>
</div>
{/* 种子 */}
<div>
<label className="text-xs text-gray-600 mb-2 block">
<label className="text-xs text-gray-500 mb-1.5 block">
种子 (可选)
</label>
<input
@@ -420,36 +391,70 @@ export const PromptComposer: React.FC = () => {
value={seed || ''}
onChange={(e) => setSeed(e.target.value ? parseInt(e.target.value) : null)}
placeholder="随机"
className="w-full h-8 px-2 bg-white border border-gray-300 rounded text-xs text-gray-900"
className="w-full h-8 px-2.5 bg-gray-50 border border-gray-200 rounded-md text-xs text-gray-700 focus:outline-none focus:ring-1 focus:ring-yellow-400"
/>
</div>
</div>
)}
<button
onClick={() => setShowClearConfirm(!showClearConfirm)}
className="flex items-center text-xs text-gray-500 hover:text-red-500 transition-colors duration-200 mt-3"
>
<RotateCcw className="h-3 w-3 mr-1.5" />
清除会话
</button>
{showClearConfirm && (
<div className="mt-2 p-3 bg-red-50 rounded-lg border border-red-100">
<p className="text-xs text-red-700 mb-3">
确定要清除此会话吗？这将删除所有内容。
</p>
<div className="flex space-x-2">
<Button
variant="destructive"
size="sm"
onClick={handleClearSession}
className="flex-1 h-8 text-xs"
>
确认
</Button>
<Button
variant="outline"
size="sm"
onClick={() => setShowClearConfirm(false)}
className="flex-1 h-8 text-xs border-gray-200"
>
取消
</Button>
</div>
</div>
)}
</div>
{/* 键盘快捷键 */}
<div className="pt-4 border-t border-gray-200">
<h4 className="text-xs font-medium text-gray-600 mb-2">快捷键</h4>
<div className="space-y-1 text-xs text-gray-700">
<div className="pt-3 border-t border-gray-100">
<h4 className="text-xs font-medium text-gray-500 mb-2 uppercase tracking-wide">快捷键</h4>
<div className="space-y-1.5 text-xs text-gray-600">
<div className="flex justify-between">
<span>生成</span>
<span>⌘ + Enter</span>
<span className="text-gray-500">生成</span>
<span className="font-mono bg-gray-100 px-1.5 py-0.5 rounded text-gray-700">⌘ + Enter</span>
</div>
<div className="flex justify-between">
<span>重新生成</span>
<span>⇧ + R</span>
<span className="text-gray-500">重新生成</span>
<span className="font-mono bg-gray-100 px-1.5 py-0.5 rounded text-gray-700">⇧ + R</span>
</div>
<div className="flex justify-between">
<span>编辑模式</span>
<span>E</span>
<span className="text-gray-500">编辑模式</span>
<span className="font-mono bg-gray-100 px-1.5 py-0.5 rounded text-gray-700">E</span>
</div>
<div className="flex justify-between">
<span>历史记录</span>
<span>H</span>
<span className="text-gray-500">历史记录</span>
<span className="font-mono bg-gray-100 px-1.5 py-0.5 rounded text-gray-700">H</span>
</div>
<div className="flex justify-between">
<span>切换面板</span>
<span>P</span>
<span className="text-gray-500">切换面板</span>
<span className="font-mono bg-gray-100 px-1.5 py-0.5 rounded text-gray-700">P</span>
</div>
</div>
</div>