diff --git a/argontheme.js b/argontheme.js index f026d1d..f847c09 100644 --- a/argontheme.js +++ b/argontheme.js @@ -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 = `
错误类型: ${errorType}
`; + + // 如果提取到错误行号,显示它 + if (errorLine) { + errorBodyHTML += `错误位置: 第 ${errorLine} 行
`; + } + + 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 - 要转义的文本 diff --git a/style.css b/style.css index 277ca1c..c2e0926 100644 --- a/style.css +++ b/style.css @@ -1187,67 +1187,125 @@ article.card .mermaid-container { } } -/* Mermaid 错误提示样式 */ +/* ---------- Mermaid 错误提示样式 ---------- */ .mermaid-error-container { - background: rgba(220, 53, 69, 0.1); - border: 1px solid rgba(220, 53, 69, 0.3); - border-radius: 8px; + background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%); + border: 2px solid #fc8181; + border-left: 5px solid #e53e3e; + border-radius: var(--card-radius); padding: 20px; margin: 20px 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15); + transition: box-shadow 0.3s ease; } -.mermaid-error-container .error-header { +.mermaid-error-container:hover { + box-shadow: 0 4px 12px rgba(220, 53, 69, 0.25); +} + +.mermaid-error-header { display: flex; align-items: center; - margin-bottom: 12px; + margin-bottom: 15px; + padding-bottom: 12px; + border-bottom: 1px solid rgba(220, 53, 69, 0.2); } -.mermaid-error-container .error-icon { - font-size: 24px; - margin-right: 10px; +.mermaid-error-icon { + font-size: 28px; + margin-right: 12px; + animation: pulse 2s ease-in-out infinite; } -.mermaid-error-container .error-title { - font-size: 16px; - font-weight: 600; - color: #dc3545; +@keyframes pulse { + 0%, 100% { + transform: scale(1); + opacity: 1; + } + 50% { + transform: scale(1.1); + opacity: 0.8; + } } -.mermaid-error-container .error-body { - margin-bottom: 12px; - color: #721c24; +.mermaid-error-title { + font-size: 18px; + font-weight: bold; + color: #c53030; + letter-spacing: 0.3px; } -.mermaid-error-container .error-type, -.mermaid-error-container .error-message, -.mermaid-error-container .error-line { - margin: 6px 0; - font-size: 14px; +.mermaid-error-body { + margin-bottom: 15px; + line-height: 1.6; } -.mermaid-error-container .error-code { - margin-top: 12px; -} - -.mermaid-error-container .error-code summary { - cursor: pointer; - font-weight: 500; - color: #721c24; - user-select: none; -} - -.mermaid-error-container .error-code pre { - margin-top: 10px; - background: rgba(0, 0, 0, 0.05); - padding: 12px; +.mermaid-error-type { + font-weight: bold; + color: #742a2a; + margin: 8px 0; + padding: 4px 8px; + background: rgba(220, 53, 69, 0.1); border-radius: 4px; - overflow-x: auto; + display: inline-block; } -.mermaid-error-container .error-code code { - font-family: 'Consolas', 'Monaco', 'Courier New', monospace; - font-size: 13px; - color: #333; +.mermaid-error-message { + color: #742a2a; + margin: 8px 0; + padding: 8px 12px; + background: rgba(255, 255, 255, 0.6); + border-radius: 4px; + border-left: 3px solid #fc8181; +} + +.mermaid-error-code { + margin-top: 15px; +} + +.mermaid-error-code summary { + cursor: pointer; + color: var(--themecolor); + font-weight: bold; + padding: 8px 12px; + background: rgba(255, 255, 255, 0.6); + border-radius: 4px; + user-select: none; + transition: all 0.2s ease; + display: inline-block; +} + +.mermaid-error-code summary:hover { + background: rgba(255, 255, 255, 0.9); + transform: translateX(4px); +} + +.mermaid-error-code summary::marker { + color: var(--themecolor); +} + +.mermaid-error-code[open] summary { + margin-bottom: 10px; +} + +.mermaid-error-code pre { + background: #2d3748; + color: #e2e8f0; + padding: 15px; + border-radius: 6px; + overflow-x: auto; + margin-top: 10px; + font-family: 'Courier New', Consolas, Monaco, monospace; + font-size: 14px; + line-height: 1.6; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); +} + +.mermaid-error-code code { + background: transparent; + color: inherit; + padding: 0; } ::-webkit-scrollbar { @@ -16834,29 +16892,50 @@ html.darkmode .mermaid-container { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } +/* ---------- 夜间模式下的 Mermaid 错误提示 ---------- */ html.darkmode .mermaid-error-container { - background: rgba(220, 53, 69, 0.2); - border-color: rgba(220, 53, 69, 0.4); + background: linear-gradient(135deg, #2d1f1f 0%, #3d2020 100%); + border-color: #9b2c2c; + border-left-color: #e53e3e; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } -html.darkmode .mermaid-error-container .error-title { - color: #ff6b7a; +html.darkmode .mermaid-error-container:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); } -html.darkmode .mermaid-error-container .error-body { - color: #ffb3ba; +html.darkmode .mermaid-error-header { + border-bottom-color: rgba(155, 44, 44, 0.3); } -html.darkmode .mermaid-error-container .error-code summary { - color: #ffb3ba; +html.darkmode .mermaid-error-title { + color: #fc8181; } -html.darkmode .mermaid-error-container .error-code pre { +html.darkmode .mermaid-error-type { + color: #feb2b2; + background: rgba(155, 44, 44, 0.3); +} + +html.darkmode .mermaid-error-message { + color: #feb2b2; background: rgba(0, 0, 0, 0.3); + border-left-color: #9b2c2c; } -html.darkmode .mermaid-error-container .error-code code { - color: #eee; +html.darkmode .mermaid-error-code summary { + background: rgba(0, 0, 0, 0.3); + color: #90cdf4; +} + +html.darkmode .mermaid-error-code summary:hover { + background: rgba(0, 0, 0, 0.5); +} + +html.darkmode .mermaid-error-code pre { + background: #1a202c; + color: #cbd5e0; + box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5); } @@ -17047,103 +17126,6 @@ html.darkmode .mermaid-container { } } -/* ---------- Mermaid 错误提示样式 ---------- */ -.mermaid-error-container { - background: #fff5f5; - border: 1px solid #fc8181; - border-radius: var(--card-radius); - padding: 20px; - margin: 20px 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -} - -.mermaid-error-header { - display: flex; - align-items: center; - margin-bottom: 15px; -} - -.mermaid-error-icon { - font-size: 24px; - margin-right: 10px; -} - -.mermaid-error-title { - font-size: 18px; - font-weight: bold; - color: #c53030; -} - -.mermaid-error-body { - margin-bottom: 15px; - line-height: 1.6; -} - -.mermaid-error-type { - font-weight: bold; - color: #742a2a; - margin: 5px 0; -} - -.mermaid-error-message { - color: #742a2a; - margin: 5px 0; -} - -.mermaid-error-code { - margin-top: 10px; -} - -.mermaid-error-code summary { - cursor: pointer; - color: var(--themecolor); - font-weight: bold; - padding: 5px 0; - user-select: none; -} - -.mermaid-error-code summary:hover { - text-decoration: underline; -} - -.mermaid-error-code pre { - background: #2d3748; - color: #e2e8f0; - padding: 15px; - border-radius: 4px; - overflow-x: auto; - margin-top: 10px; - font-family: 'Courier New', Consolas, Monaco, monospace; - font-size: 14px; - line-height: 1.5; -} - -.mermaid-error-code code { - background: transparent; - color: inherit; - padding: 0; -} - -/* ---------- 夜间模式下的错误提示 ---------- */ -html.darkmode .mermaid-error-container { - background: #2d1f1f; - border-color: #9b2c2c; -} - -html.darkmode .mermaid-error-title { - color: #fc8181; -} - -html.darkmode .mermaid-error-type, -html.darkmode .mermaid-error-message { - color: #feb2b2; -} - -html.darkmode .mermaid-error-code pre { - background: #1a202c; - color: #cbd5e0; -} - /* ---------- 打印样式 ---------- */ @media print { .mermaid-container {