fix: 图片编辑器入口优化 - 直接进入编辑器主页面
Some checks failed
Lint / build (20) (push) Has been cancelled
Playwright Tests / test (push) Has been cancelled

- 点击图片编辑器按钮后直接显示完整编辑器界面(包含工具栏)
- 在画布区域显示上传区域,而非独立的上传窗口
- 保持拖拽、点击、粘贴上传功能
This commit is contained in:
Your Name 2026-01-18 15:02:58 +08:00
parent 688f67c25c
commit c36d0f93d8

View File

@ -1551,6 +1551,31 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod
</div>
<span className="text-sm text-muted-foreground">正在加载图片...</span>
</div>
) : !image ? (
/* 没有图片时显示上传区域 */
<div className="flex flex-col items-center justify-center p-8">
<div
className="w-full max-w-lg border-2 border-dashed border-muted-foreground/25 rounded-xl p-12 text-center cursor-pointer hover:border-primary/50 hover:bg-muted/20 transition-all group"
onClick={() => fileInputRef.current?.click()}
onDrop={handleDrop}
onDragOver={handleDragOver}
>
<div className="bg-background rounded-full p-4 w-20 h-20 mx-auto mb-6 shadow-sm group-hover:scale-105 transition-transform flex items-center justify-center">
<UploadIcon className="w-10 h-10 text-muted-foreground group-hover:text-primary transition-colors" />
</div>
<h3 className="text-xl font-medium mb-2">上传图片以开始编辑</h3>
<p className="text-muted-foreground mb-2">拖拽图片到此处、点击选择或 Ctrl+V 粘贴</p>
<p className="text-muted-foreground/60 text-sm mb-6">支持 JPG, PNG, WebP 格式,最大 10MB</p>
<Button variant="default">选择图片</Button>
<input
type="file"
ref={fileInputRef}
className="hidden"
accept="image/png,image/jpeg,image/webp"
onChange={handleImageUpload}
/>
</div>
</div>
) : isResizeMode ? (
/* 尺寸调整模式 - 左右对比布局 */
<>
@ -1728,55 +1753,5 @@ export function ImageAnnotator({ imageUrl, onConfirm, onCancel, initialResizeMod
return null;
}
// 如果没有图片,显示上传界面
if (!originalImageUrl) {
return createPortal(
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
<div className="relative flex h-[80vh] w-[90vw] max-w-5xl flex-col overflow-hidden rounded-xl border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200">
{/* Header */}
<div className="flex h-14 items-center justify-between border-b px-4">
<div className="flex items-center gap-2">
<span className="text-lg font-bold">图片编辑器</span>
</div>
<Button
variant="ghost"
size="icon"
onClick={onCancel}
className="h-8 w-8 rounded-full"
>
<X className="h-4 w-4" />
</Button>
</div>
{/* Upload Area */}
<div className="flex flex-1 flex-col items-center justify-center p-8 bg-muted/10">
<div
className="w-full max-w-md border-2 border-dashed border-muted-foreground/25 rounded-xl p-12 text-center cursor-pointer hover:border-primary/50 hover:bg-muted/20 transition-all group"
onClick={() => fileInputRef.current?.click()}
onDrop={handleDrop}
onDragOver={handleDragOver}
>
<div className="bg-background rounded-full p-4 w-20 h-20 mx-auto mb-6 shadow-sm group-hover:scale-105 transition-transform flex items-center justify-center">
<UploadIcon className="w-10 h-10 text-muted-foreground group-hover:text-primary transition-colors" />
</div>
<h3 className="text-xl font-medium mb-2">上传图片以开始编辑</h3>
<p className="text-muted-foreground mb-2">拖拽图片到此处、点击选择或 Ctrl+V 粘贴</p>
<p className="text-muted-foreground/60 text-sm mb-6">支持 JPG, PNG, WebP 格式,最大 10MB</p>
<Button variant="default">选择图片</Button>
<input
type="file"
ref={fileInputRef}
className="hidden"
accept="image/png,image/jpeg,image/webp"
onChange={handleImageUpload}
/>
</div>
</div>
</div>
</div>,
document.body
);
}
return createPortal(modalContent, document.body);
}