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

功能改进:
- 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} modelId={model.id}
modelPhotos={model.photos} modelPhotos={model.photos}
onGenerate={onGenerate} onGenerate={onGenerate}
onClose={onClose}
isGenerating={isGenerating} isGenerating={isGenerating}
/> />
</div> </div>

View File

@ -17,6 +17,7 @@ interface OutfitImageGeneratorProps {
modelId: string; modelId: string;
modelPhotos: ModelPhoto[]; modelPhotos: ModelPhoto[];
onGenerate: (request: OutfitImageGenerationRequest) => Promise<void>; onGenerate: (request: OutfitImageGenerationRequest) => Promise<void>;
onClose?: () => void; // 添加关闭回调
isGenerating?: boolean; isGenerating?: boolean;
disabled?: boolean; disabled?: boolean;
} }
@ -31,6 +32,7 @@ export const OutfitImageGenerator: React.FC<OutfitImageGeneratorProps> = ({
modelId, modelId,
modelPhotos, modelPhotos,
onGenerate, onGenerate,
onClose,
isGenerating = false, isGenerating = false,
disabled = false disabled = false
}) => { }) => {
@ -154,11 +156,16 @@ export const OutfitImageGenerator: React.FC<OutfitImageGeneratorProps> = ({
setSelectedModelImageId(''); setSelectedModelImageId('');
setProductImages([]); setProductImages([]);
setGenerationPrompt(''); setGenerationPrompt('');
// 生成成功后关闭模态框
if (onClose) {
onClose();
}
} catch (error) { } catch (error) {
console.error('生成穿搭图片失败:', error); console.error('生成穿搭图片失败:', error);
setError(`生成穿搭图片失败: ${error}`); setError(`生成穿搭图片失败: ${error}`);
} }
}, [modelId, selectedModelImageId, productImages, generationPrompt, onGenerate]); }, [modelId, selectedModelImageId, productImages, generationPrompt, onGenerate, onClose]);
const canGenerate = selectedModelImageId && productImages.length > 0 && !isGenerating && !disabled; const canGenerate = selectedModelImageId && productImages.length > 0 && !isGenerating && !disabled;