fix: fix image upload in canvas ImageNode

Added stopPropagation to prevent Rnd click handler from intercepting the file input click event. Added an explicit button for better UX.
This commit is contained in:
Your Name 2026-01-24 20:53:23 +08:00
parent 0d5742a7a8
commit bc7e967aba

View File

@ -178,16 +178,24 @@ export function ImageNode({ node, isSelected }: ImageNodeProps) {
<span className="text-sm text-destructive">生成失败</span>
</div>
) : (
<label className="w-full h-full flex flex-col items-center justify-center bg-muted cursor-pointer hover:bg-muted/80 transition-colors">
<div className="w-full h-full flex flex-col items-center justify-center bg-muted">
<ImagePlus className="h-8 w-8 text-muted-foreground mb-2" />
<span className="text-sm text-muted-foreground">点击上传图片</span>
<input
type="file"
accept="image/*"
className="hidden"
onChange={handleImageUpload}
/>
</label>
<span className="text-sm text-muted-foreground mb-3">点击上传图片</span>
<label
className="cursor-pointer"
onClick={(e) => e.stopPropagation()}
>
<input
type="file"
accept="image/*"
className="hidden"
onChange={handleImageUpload}
/>
<span className="px-4 py-2 bg-primary text-primary-foreground text-sm rounded-md hover:bg-primary/90 transition-colors">
选择文件
</span>
</label>
</div>
)}
{/* 处理中遮罩 */}