fix: enforce max screenshot limit (2) on upload area and existing remove button

This commit is contained in:
2026-05-16 19:13:16 +08:00
parent f4eab9c8e0
commit 88a098f387
+13 -9
View File
@@ -290,10 +290,12 @@ export function ReviewStep({
return opt?.label ?? environment.frameGenMethod return opt?.label ?? environment.frameGenMethod
})() })()
const totalScreenshots = (existingScreenshots?.length ?? 0) + (screenshotFiles?.length ?? 0)
const canUploadMore = const canUploadMore =
(!screenshotFiles || screenshotFiles.length < 2) && totalScreenshots < 2 &&
submitPhase !== "uploading" && submitPhase !== "uploading" &&
submitPhase !== "saving" submitPhase !== "saving"
const showExistingRemove = totalScreenshots >= 2
return ( return (
<div className='space-y-6'> <div className='space-y-6'>
@@ -559,14 +561,16 @@ export function ReviewStep({
draggable={false} draggable={false}
/> />
<div className="absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" /> <div className="absolute inset-0 bg-linear-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
<button {showExistingRemove && (
type="button" <button
onClick={() => onRemoveExistingScreenshot?.(ss.id)} type="button"
className="absolute top-2 right-2 p-1.5 rounded-lg bg-black/50 text-white/80 hover:text-white hover:bg-red-500/80 backdrop-blur-sm transition-colors opacity-0 group-hover:opacity-100 cursor-pointer" onClick={() => onRemoveExistingScreenshot?.(ss.id)}
title="Remove screenshot" className="absolute top-2 right-2 p-1.5 rounded-lg bg-black/50 text-white/80 hover:text-white hover:bg-red-500/80 backdrop-blur-sm transition-colors opacity-0 group-hover:opacity-100 cursor-pointer"
> title="Remove screenshot"
<X className="h-3.5 w-3.5" /> >
</button> <X className="h-3.5 w-3.5" />
</button>
)}
<div className="absolute bottom-2 left-2 px-2 py-0.5 rounded-md bg-black/50 backdrop-blur-sm text-[10px] font-medium text-white/90 opacity-0 group-hover:opacity-100"> <div className="absolute bottom-2 left-2 px-2 py-0.5 rounded-md bg-black/50 backdrop-blur-sm text-[10px] font-medium text-white/90 opacity-0 group-hover:opacity-100">
Existing · #{ss.orderIndex + 1} Existing · #{ss.orderIndex + 1}
</div> </div>