feat: 优化 Mermaid 错误提示显示效果

- 增强错误容器视觉设计(渐变背景、阴影效果、悬停动画)
- 添加错误图标脉冲动画,提升视觉吸引力
- 优化错误信息显示(错误类型标签、消息框样式)
- 新增错误行号提取功能,支持多种行号格式
- 改进代码查看区域样式(summary 悬停效果、代码块阴影)
- 完善夜间模式适配(深色渐变背景、优化颜色对比度)
- 删除重复的 CSS 样式定义(第 17050 行)
- 统一使用 .mermaid-error-* 类名规范

需求:19.1, 19.2, 19.3, 19.4, 19.5
This commit is contained in:
2026-01-25 01:38:36 +08:00
parent 66df8348be
commit 6309a2236b
2 changed files with 168 additions and 151 deletions

View File

@@ -5526,6 +5526,7 @@ void 0;
// 提取错误信息
const errorMessage = error.message || '未知错误';
const errorType = this.getErrorType(errorMessage);
const errorLine = this.extractErrorLine(errorMessage);
// 创建错误显示结构
const errorHeader = document.createElement('div');
@@ -5537,17 +5538,25 @@ void 0;
const errorBody = document.createElement('div');
errorBody.className = 'mermaid-error-body';
errorBody.innerHTML = `
let errorBodyHTML = `
<p class="mermaid-error-type">错误类型: ${errorType}</p>
<p class="mermaid-error-message">${this.escapeHtml(errorMessage)}</p>
`;
// 如果提取到错误行号,显示它
if (errorLine) {
errorBodyHTML += `<p class="mermaid-error-type">错误位置: 第 ${errorLine} 行</p>`;
}
errorBody.innerHTML = errorBodyHTML;
// 创建代码查看区域
const codeDetails = document.createElement('details');
codeDetails.className = 'mermaid-error-code';
const codeSummary = document.createElement('summary');
codeSummary.textContent = '查看原始代码';
codeSummary.textContent = '📄 查看原始代码';
const codeBlock = document.createElement('pre');
const codeElement = document.createElement('code');
@@ -5581,10 +5590,36 @@ void 0;
return '词法错误';
} else if (errorMessage.includes('Expecting')) {
return '格式错误';
} else if (errorMessage.includes('Unknown')) {
return '未知图表类型';
}
return '渲染错误';
},
/**
* 从错误信息中提取行号
* @param {string} errorMessage - 错误信息
* @returns {string|null} 行号或 null
*/
extractErrorLine(errorMessage) {
// 尝试匹配常见的行号格式
const linePatterns = [
/line (\d+)/i,
/at line (\d+)/i,
/on line (\d+)/i,
/第 (\d+) 行/,
];
for (const pattern of linePatterns) {
const match = errorMessage.match(pattern);
if (match && match[1]) {
return match[1];
}
}
return null;
},
/**
* HTML 转义
* @param {string} text - 要转义的文本