fix-loading-api-error.md 6.4 KB
修复客户报告生成Loading API错误
🐛 问题描述
错误信息
❌ 生成客户报告失败: TypeError: window?.fmode?.loading is not a function
at stage-requirements.component.ts:4225:38
错误场景
用户在重新分析后，点击"确认报告并保存"，然后选择生成客户报告时，出现此错误导致无法继续操作。
根本原因
代码中使用了不存在的window?.fmode?.loading()API：
const loading = window?.fmode?.loading('正在生成客户报告，请稍候...');
这个API在项目中并未定义，导致运行时错误。
✅ 解决方案
修复内容
文件: stage-requirements.component.ts (第4213-4284行)
修复前
async generateAndShowClientReport(): Promise<void> {
try {
const loading = window?.fmode?.loading('正在生成客户报告，请稍候...');
const clientReport = await this.designAnalysisAIService.generateClientReport({
analysisData: {...},
spaceName: '...',
onContentChange: (content) => {
if (loading) {
loading.message = '正在生成报告...' + content.length + '字';
}
},
loading // ❌ 传递无效的loading对象
});
loading?.close(); // ❌ loading可能为undefined
} catch (error) {
// ...
}
}
修复后
async generateAndShowClientReport(): Promise<void> {
// ✅ 使用组件状态变量管理loading
this.aiDesignGeneratingReport = true;
this.cdr.markForCheck();
try {
console.log('🤖 正在生成客户报告...');
// ✅ 移除无效的loading参数
const clientReport = await this.designAnalysisAIService.generateClientReport({
analysisData: {
report: this.aiDesignReport,
analysisResult: this.aiDesignAnalysisResult,
spaceInfo: this.aiDesignCurrentSpace
},
spaceName: this.aiDesignCurrentSpace?.name || '未命名空间',
onContentChange: (content) => {
console.log('📝 报告生成中...', content.length, '字');
}
});
// 保存客户报告...
// ✅ 使用toast显示成功提示
window?.fmode?.toast?.success?.('客户报告生成成功！');
} catch (error: any) {
console.error('❌ 生成客户报告失败:', error);
window?.fmode?.alert('生成报告失败: ' + (error.message || '未知错误'));
} finally {
// ✅ 确保状态恢复
this.aiDesignGeneratingReport = false;
this.cdr.markForCheck();
}
}
核心改进
移除无效API调用
// ❌ 修复前 const loading = window?.fmode?.loading('正在生成客户报告，请稍候...'); // ✅ 修复后 this.aiDesignGeneratingReport = true;使用组件状态管理
- 使用
aiDesignGeneratingReport状态变量 - 配合
cdr.markForCheck()触发视图更新 - UI可以根据此状态显示loading动画
- 使用
添加finally块
finally { // 确保无论成功失败都恢复状态 this.aiDesignGeneratingReport = false; this.cdr.markForCheck(); }使用正确的toast API
// ✅ 使用存在的toast API window?.fmode?.toast?.success?.('客户报告生成成功！');
📊 影响范围
修改文件
stage-requirements.component.ts(第4213-4284行)
相关功能
- ✅ AI图片分析
- ✅ 确认分析报告
- ✅ 生成客户报告
- ✅ 保存报告到项目数据
兼容性
- ✅ 不影响现有功能
- ✅ 状态管理更规范
- ✅ 错误处理更完善
🧪 测试验证
测试步骤
上传图片并分析
1. 进入确认需求阶段 2. 上传参考图片 3. 点击"开始AI分析" 4. 等待分析完成确认分析报告
5. 查看AI分析结果 6. 点击"确认报告并保存" 7. 选择"是"生成客户报告验证客户报告生成
8. 观察loading状态显示 9. 等待报告生成完成 10. 验证成功提示 11. 确认报告已保存
预期结果
修复前：
❌ TypeError: window?.fmode?.loading is not a function
❌ 报告生成失败
❌ 无法继续操作
修复后：
✅ loading状态正常显示
✅ 报告生成成功
✅ 显示成功提示
✅ 报告已保存到项目数据
✅ 可以继续其他操作
📝 控制台日志
正常流程日志
🤖 正在生成客户报告...
📝 报告生成中... 1500 字
✅ 客户报告生成完成
错误处理日志
❌ 生成客户报告失败: [具体错误信息]
💡 最佳实践
1. Loading状态管理
推荐方式：
// ✅ 使用组件状态变量
this.loading = true;
try {
await someAsyncOperation();
} finally {
this.loading = false;
this.cdr.markForCheck();
}
避免方式：
// ❌ 依赖未定义的全局API
const loading = window?.fmode?.loading('...');
2. 错误处理
完整的错误处理：
try {
// 主要逻辑
} catch (error: any) {
// 错误处理
console.error('❌ 操作失败:', error);
window?.fmode?.alert('操作失败: ' + error.message);
} finally {
// 清理工作（必须执行）
this.loading = false;
this.cdr.markForCheck();
}
3. 用户反馈
多层次反馈：
// 1. 状态变量（UI loading动画）
this.loading = true;
// 2. 控制台日志（开发调试）
console.log('🤖 正在处理...');
// 3. Toast提示（成功/失败）
window?.fmode?.toast?.success?.('操作成功！');
// 4. Confirm对话框（需要用户决策）
const result = await window?.fmode?.confirm('是否继续？');
🔗 相关文档
创建时间: 2024-12-01
修复状态: ✅ 已完成
测试状态: ⏳ 待验证
🎉 总结
问题: 使用了不存在的window?.fmode?.loading()API
解决: 使用组件状态变量aiDesignGeneratingReport管理loading
改进: 添加finally块确保状态恢复，使用正确的toast API
效果: 客户报告生成功能恢复正常，用户体验更好