添加穿搭图片生成完成后自动关闭功能
功能改进: - 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}
|
modelId={model.id}
|
||||||
modelPhotos={model.photos}
|
modelPhotos={model.photos}
|
||||||
onGenerate={onGenerate}
|
onGenerate={onGenerate}
|
||||||
|
onClose={onClose}
|
||||||
isGenerating={isGenerating}
|
isGenerating={isGenerating}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue