fix: 图片编辑器入口优化 - 直接进入编辑器主页面
- 点击图片编辑器按钮后直接显示完整编辑器界面(包含工具栏) - 在画布区域显示上传区域,而非独立的上传窗口 - 保持拖拽、点击、粘贴上传功能
This commit is contained in:
parent
688f67c25c
commit
c36d0f93d8
@ -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);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user