添加穿搭图片生成完成后自动关闭功能
功能改进: - OutfitImageGenerator 组件添加 onClose 属性 - 生成成功后自动关闭模态框,提升用户体验 - 保持表单清空逻辑,确保下次使用时状态干净 修改内容: - OutfitImageGenerator.tsx: 添加 onClose 回调属性 - OutfitImageGenerationModal.tsx: 传递 onClose 属性 - handleGenerate 方法: 成功后调用 onClose 关闭模态框 这样用户在生成穿搭图片后,模态框会自动关闭,无需手动点击关闭按钮。
This commit is contained in:
parent
eaae092c72
commit
a12f05127a
|
|
@ -90,6 +90,7 @@ export const OutfitImageGenerationModal: React.FC<OutfitImageGenerationModalProp
|
|||
modelId={model.id}
|
||||
modelPhotos={model.photos}
|
||||
onGenerate={onGenerate}
|
||||
onClose={onClose}
|
||||
isGenerating={isGenerating}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ interface OutfitImageGeneratorProps {
|
|||
modelId: string;
|
||||
modelPhotos: ModelPhoto[];
|
||||
onGenerate: (request: OutfitImageGenerationRequest) => Promise<void>;
|
||||
onClose?: () => void; // 添加关闭回调
|
||||
isGenerating?: boolean;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
|
@ -31,6 +32,7 @@ export const OutfitImageGenerator: React.FC<OutfitImageGeneratorProps> = ({
|
|||
modelId,
|
||||
modelPhotos,
|
||||
onGenerate,
|
||||
onClose,
|
||||
isGenerating = false,
|
||||
disabled = false
|
||||
}) => {
|
||||
|
|
@ -154,11 +156,16 @@ export const OutfitImageGenerator: React.FC<OutfitImageGeneratorProps> = ({
|
|||
setSelectedModelImageId('');
|
||||
setProductImages([]);
|
||||
setGenerationPrompt('');
|
||||
|
||||
// 生成成功后关闭模态框
|
||||
if (onClose) {
|
||||
onClose();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('生成穿搭图片失败:', error);
|
||||
setError(`生成穿搭图片失败: ${error}`);
|
||||
}
|
||||
}, [modelId, selectedModelImageId, productImages, generationPrompt, onGenerate]);
|
||||
}, [modelId, selectedModelImageId, productImages, generationPrompt, onGenerate, onClose]);
|
||||
|
||||
const canGenerate = selectedModelImageId && productImages.length > 0 && !isGenerating && !disabled;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue