feat: 优化 Mermaid 错误提示显示效果
- 增强错误容器视觉设计(渐变背景、阴影效果、悬停动画) - 添加错误图标脉冲动画,提升视觉吸引力 - 优化错误信息显示(错误类型标签、消息框样式) - 新增错误行号提取功能,支持多种行号格式 - 改进代码查看区域样式(summary 悬停效果、代码块阴影) - 完善夜间模式适配(深色渐变背景、优化颜色对比度) - 删除重复的 CSS 样式定义(第 17050 行) - 统一使用 .mermaid-error-* 类名规范 需求:19.1, 19.2, 19.3, 19.4, 19.5
This commit is contained in:
@@ -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 - 要转义的文本
|
||||
|
||||
Reference in New Issue
Block a user