1.9 KiB
1.9 KiB
经验记录
记录 1：report-editor 新建报告时显示空白模板
A. 具体问题
超级管理员进入 /report-editor（新建报告）时，编辑区域为纯白色空白，顶部模板选择器显示"无"，但 system-settings 中已配置了默认模板。
B. 产生问题原因
ReportEditor.tsx在组件卸载（如页面切换）时会自动将当前编辑器内容保存为草稿（draft）。即使用户未输入任何内容，保存的content也是空字符串""。- 初始化 effect 中判断草稿是否有效的条件仅使用了
typeof draft.content === 'string'，空字符串满足该条件，导致编辑器被填充为空白 HTML，并将contentLoadedRef.current设为true。 - 由于
contentLoadedRef.current已被置为true，后续加载settings.defaultTemplate的默认模板分支被完全跳过，从而永远显示空白。 - 此外，草稿中未保存
loadedTemplateId，即使内容非空时恢复草稿，模板选择器也会因缺少状态而显示"无"。
C. 解决问题方案
- 在
saveDraftToStorage中将当前loadedTemplateId一并存入 draft。 - 将四处草稿恢复的判断条件从
typeof draft.content === 'string'收紧为typeof draft.content === 'string' && draft.content.trim().length > 0，使空白草稿不再拦截默认模板加载。 - 恢复草稿时同步执行
setLoadedTemplateId(draft.loadedTemplateId || '')，确保模板选择器名称正确。
D. 后续如何避免问题
- 在前端使用 contentEditable 的自动保存机制时，保存和恢复草稿都应增加对空/仅空白内容的过滤。
- 若草稿与某个业务状态（如当前模板 ID）强关联，应确保两者一并持久化和恢复，避免状态不一致。
- 对兜底初始化逻辑（如默认模板加载）增加更严格的防护，防止被无效中间状态提前截断。