feat: 添加 Mermaid 渲染状态标记

- 在渲染成功后添加 data-mermaid-rendered 属性
- 在 isRendered() 函数中检查该属性(已实现)
- 覆盖三种渲染路径:标准 API、旧版 API、init 降级方案
- 确保已渲染的代码块不会被重复渲染
- 遵循项目代码规范(Tab 缩进、单引号、JSDoc 注释)
- 完成任务 1.3
This commit is contained in:
2026-01-25 13:02:16 +08:00
parent 8f7165cede
commit 9e4888f28c
2 changed files with 13 additions and 2 deletions

View File

@@ -16,8 +16,8 @@
- [ ] 1. 修复 PJAX 页面切换后 Mermaid 不渲染的问题 - [ ] 1. 修复 PJAX 页面切换后 Mermaid 不渲染的问题
- [x] 1.1 实现 Mermaid 代码块检测函数 _需求3.1-3.5_ - [x] 1.1 实现 Mermaid 代码块检测函数 _需求3.1-3.5_
- [~] 1.2 优化 PJAX complete 事件处理 _需求1.1-1.5_ - [x] 1.2 优化 PJAX complete 事件处理 _需求1.1-1.5_
- [~] 1.3 添加渲染状态标记,避免重复渲染 _需求3.5_ - [x] 1.3 添加渲染状态标记,避免重复渲染 _需求3.5_
- [~] 1.4 测试 PJAX 跳转后的渲染效果 _需求1.1-1.5_ - [~] 1.4 测试 PJAX 跳转后的渲染效果 _需求1.1-1.5_
- [ ] 2. 修复 Mermaid 语法解析错误 - [ ] 2. 修复 Mermaid 语法解析错误

View File

@@ -5433,6 +5433,9 @@ void 0;
// 保存原始代码(用于主题切换时重新渲染) // 保存原始代码(用于主题切换时重新渲染)
container.dataset.mermaidCode = code; container.dataset.mermaidCode = code;
container.dataset.currentTheme = this.getMermaidTheme(); container.dataset.currentTheme = this.getMermaidTheme();
// 需求 3.5: 添加渲染状态标记,避免重复渲染
container.setAttribute('data-mermaid-rendered', 'true');
// 替换加载动画为渲染结果 // 替换加载动画为渲染结果
if (loadingContainer.parentNode) { if (loadingContainer.parentNode) {
@@ -5483,6 +5486,10 @@ void 0;
container.innerHTML = svgCode; container.innerHTML = svgCode;
container.dataset.mermaidCode = code; container.dataset.mermaidCode = code;
container.dataset.currentTheme = this.getMermaidTheme(); container.dataset.currentTheme = this.getMermaidTheme();
// 需求 3.5: 添加渲染状态标记,避免重复渲染
container.setAttribute('data-mermaid-rendered', 'true');
element.parentNode.replaceChild(container, element); element.parentNode.replaceChild(container, element);
this.rendered.add(container); this.rendered.add(container);
this.applyStyles(container); this.applyStyles(container);
@@ -5497,6 +5504,10 @@ void 0;
if (typeof window.mermaid.init === 'function') { if (typeof window.mermaid.init === 'function') {
window.mermaid.init(undefined, container); window.mermaid.init(undefined, container);
this.rendered.add(container); this.rendered.add(container);
// 需求 3.5: 添加渲染状态标记,避免重复渲染
container.setAttribute('data-mermaid-rendered', 'true');
this.logDebug(`图表渲染成功init 方法): ${chartId}`); this.logDebug(`图表渲染成功init 方法): ${chartId}`);
} else { } else {
this.handleRenderError(element, new Error('无可用的 Mermaid 渲染方法'), code); this.handleRenderError(element, new Error('无可用的 Mermaid 渲染方法'), code);