添加穿搭图片生成完成后自动关闭功能

功能改进:
- OutfitImageGenerator 组件添加 onClose 属性
- 生成成功后自动关闭模态框,提升用户体验
- 保持表单清空逻辑,确保下次使用时状态干净

 修改内容:
- OutfitImageGenerator.tsx: 添加 onClose 回调属性
- OutfitImageGenerationModal.tsx: 传递 onClose 属性
- handleGenerate 方法: 成功后调用 onClose 关闭模态框

这样用户在生成穿搭图片后,模态框会自动关闭,无需手动点击关闭按钮。
This commit is contained in:
imeepos 2025-07-30 18:36:34 +08:00
parent eaae092c72
commit a12f05127a
2 changed files with 9 additions and 1 deletions

View File

@ -90,6 +90,7 @@ export const OutfitImageGenerationModal: React.FC<OutfitImageGenerationModalProp
modelId={model.id}
modelPhotos={model.photos}
onGenerate={onGenerate}
onClose={onClose}
isGenerating={isGenerating}
/>
</div>

View File

@ -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;