fix: 修复穿搭图片生成进度条显示问题

问题分析:
- 后台任务正常执行并发送进度事件,但前端进度条显示为'等待中'
- 前端只监听完成和失败事件,缺少进度事件监听
- 后台任务开始时没有更新记录状态为'生成中'
- 进度回调只发送前端事件,没有更新数据库记录

解决方案:
1. 前端添加outfit_generation_progress事件监听
2. 后台任务开始时立即更新记录状态为'生成中'
3. 进度回调同时更新数据库记录和发送前端事件
4. 修复WorkflowProgress事件数据结构

技术改进:
- 实时进度更新:数据库记录progress字段实时更新
- 完整事件监听:监听progress、completed、failed三种事件
- 状态同步:确保前端显示与后台任务状态一致
- 详细进度信息:包含当前步骤、总步数、状态消息等

现在前端能正确显示'生成中'状态和实时进度百分比。
This commit is contained in:
imeepos 2025-07-30 23:35:20 +08:00
parent dd289a8685
commit 68c0ff9469
2 changed files with 40 additions and 2 deletions

View File

@ -593,6 +593,16 @@ pub async fn execute_outfit_image_task(
style_preferences: None, style_preferences: None,
}; };
// 立即更新记录状态为"生成中"
if let Ok(Some(mut record)) = outfit_repo.get_record_by_id(&record_id) {
record.start_processing();
if let Err(e) = outfit_repo.update_record(&record) {
error!("更新记录状态为生成中失败: {}", e);
} else {
info!("📝 更新记录状态为生成中: {}", record_id);
}
}
// 在后台异步执行生成任务 // 在后台异步执行生成任务
let app_handle_clone = app_handle.clone(); let app_handle_clone = app_handle.clone();
let record_id_clone = record_id.clone(); let record_id_clone = record_id.clone();
@ -890,9 +900,29 @@ async fn perform_outfit_image_generation(
// 创建进度回调 // 创建进度回调
let app_handle_clone = app_handle.clone(); let app_handle_clone = app_handle.clone();
let record_id_clone = record_id.clone(); let record_id_clone = record_id.clone();
let outfit_repo_clone = OutfitImageRepository::new(database.clone());
let progress_callback = move |progress: WorkflowProgress| { let progress_callback = move |progress: WorkflowProgress| {
// 更新数据库中的进度
if let Ok(Some(mut record)) = outfit_repo_clone.get_record_by_id(&record_id_clone) {
record.progress = progress.progress_percentage / 100.0; // 转换为0-1范围
if let Err(e) = outfit_repo_clone.update_record(&record) {
warn!("更新记录进度失败: {}", e);
}
}
// 发送进度事件到前端 // 发送进度事件到前端
if let Err(e) = app_handle_clone.emit("outfit_generation_progress", &progress) { let progress_event = serde_json::json!({
"type": "outfit_generation_progress",
"record_id": record_id_clone,
"progress_percentage": progress.progress_percentage,
"current_step": progress.current_step,
"total_steps": progress.total_steps,
"status_message": progress.status_message,
"current_node_id": progress.current_node_id
});
if let Err(e) = app_handle_clone.emit("outfit_generation_progress", &progress_event) {
warn!("发送进度事件失败: {}", e); warn!("发送进度事件失败: {}", e);
} }
info!("生成进度 - 记录ID: {}, 进度: {}%", record_id_clone, progress.progress_percentage); info!("生成进度 - 记录ID: {}, 进度: {}%", record_id_clone, progress.progress_percentage);

View File

@ -347,9 +347,16 @@ const ModelDetail: React.FC = () => {
loadOutfitRecords(); loadOutfitRecords();
}, [id]); }, [id]);
// 监听穿搭图片生成完成事件 // 监听穿搭图片生成事件
useEffect(() => { useEffect(() => {
const setupEventListeners = async () => { const setupEventListeners = async () => {
// 监听生成进度事件
const unlistenProgress = await listen('outfit_generation_progress', (event) => {
console.log('收到穿搭图片生成进度事件:', event.payload);
// 实时更新记录列表显示进度
loadOutfitRecords();
});
// 监听生成完成事件 // 监听生成完成事件
const unlistenCompleted = await listen('outfit_generation_completed', (event) => { const unlistenCompleted = await listen('outfit_generation_completed', (event) => {
console.log('收到穿搭图片生成完成事件:', event.payload); console.log('收到穿搭图片生成完成事件:', event.payload);
@ -366,6 +373,7 @@ const ModelDetail: React.FC = () => {
}); });
return () => { return () => {
unlistenProgress();
unlistenCompleted(); unlistenCompleted();
unlistenFailed(); unlistenFailed();
}; };