fix: 改进 diff 查看器样式和 markdown 渲染
This commit is contained in:
+114
-1
@@ -16,8 +16,12 @@
|
||||
.prose ul, .prose ol {
|
||||
margin-left: 1.5em;
|
||||
margin-bottom: 1em;
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
.prose li {
|
||||
margin-bottom: 0.25em;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.prose li { margin-bottom: 0.25em; }
|
||||
.prose code {
|
||||
background: #f3f4f6;
|
||||
padding: 0.15em 0.4em;
|
||||
@@ -68,6 +72,7 @@
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
min-height: 400px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.diff-sidebar {
|
||||
@@ -81,8 +86,10 @@
|
||||
|
||||
.diff-main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: auto;
|
||||
max-height: 80vh;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* File tree */
|
||||
@@ -176,6 +183,19 @@
|
||||
/* Review inline suggestion cards */
|
||||
.review-suggestion-card {
|
||||
font-size: 13px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Summary content container */
|
||||
#summary-content {
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Review content in suggestion cards */
|
||||
.review-content {
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.review-suggestion-row td {
|
||||
@@ -221,3 +241,96 @@
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
|
||||
/* Force diff2html light mode — prevent dark empty placeholders and backgrounds */
|
||||
.d2h-emptyplaceholder,
|
||||
.d2h-code-side-emptyplaceholder {
|
||||
background-color: #f1f1f1 !important;
|
||||
border-color: #e1e1e1 !important;
|
||||
}
|
||||
|
||||
.d2h-file-wrapper {
|
||||
border-color: #ddd !important;
|
||||
}
|
||||
|
||||
.d2h-file-header {
|
||||
background-color: #f7f7f7 !important;
|
||||
border-bottom-color: #d8d8d8 !important;
|
||||
}
|
||||
|
||||
/* Line number td: override absolute→static so it participates in table flow */
|
||||
/* Side-by-side: 4em (matches diff2html original) */
|
||||
td.d2h-code-side-linenumber {
|
||||
position: static !important;
|
||||
background-color: #fff !important;
|
||||
border-color: #eee !important;
|
||||
color: rgba(0, 0, 0, 0.3) !important;
|
||||
text-align: right !important;
|
||||
white-space: nowrap !important;
|
||||
padding: 0 0.5em 0 0 !important;
|
||||
width: 4em !important;
|
||||
min-width: 4em !important;
|
||||
max-width: 4em !important;
|
||||
}
|
||||
/* Unified: 7.5em (needs room for two line numbers) */
|
||||
td.d2h-code-linenumber {
|
||||
position: static !important;
|
||||
background-color: #fff !important;
|
||||
border-color: #eee !important;
|
||||
color: rgba(0, 0, 0, 0.3) !important;
|
||||
text-align: right !important;
|
||||
white-space: nowrap !important;
|
||||
width: 7.5em !important;
|
||||
min-width: 7.5em !important;
|
||||
max-width: 7.5em !important;
|
||||
}
|
||||
|
||||
.d2h-del {
|
||||
background-color: #fee8e9 !important;
|
||||
}
|
||||
|
||||
.d2h-ins {
|
||||
background-color: #dfd !important;
|
||||
}
|
||||
|
||||
.d2h-info {
|
||||
background-color: #f8fafd !important;
|
||||
color: rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
#diff-container {
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.d2h-files-diff {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
.d2h-file-side-diff {
|
||||
width: 50% !important;
|
||||
max-width: 50% !important;
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
|
||||
/* Diff table: full width, auto layout */
|
||||
.d2h-diff-table {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
/* Code cells fill remaining width after line number column */
|
||||
.d2h-file-side-diff td:not(.d2h-code-side-linenumber) {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
/* Code line fills the cell */
|
||||
.d2h-code-side-line {
|
||||
padding: 0 !important;
|
||||
width: 100% !important;
|
||||
display: block !important;
|
||||
}
|
||||
/* Collapse whitespace between prefix and content spans */
|
||||
.d2h-code-line-prefix {
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
@@ -774,7 +774,7 @@ const DiffViewer = {
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-xs font-medium">${severityLabels[severity] || severityLabels.info}</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700">${content}</p>
|
||||
<div class="text-sm text-gray-700 review-content">${typeof renderMarkdown === 'function' ? renderMarkdown(content) : content}</div>
|
||||
<div class="mt-2 note-editor-placeholder" data-scope="suggestion" data-scope-key="${suggestionId || ''}"></div>
|
||||
</div>
|
||||
</td>`;
|
||||
|
||||
@@ -66,7 +66,7 @@ const ReviewInline = {
|
||||
${suggestion.file ? `<span class="text-xs text-gray-500 font-mono">${suggestion.file}</span>` : ''}
|
||||
${suggestion.line ? `<span class="text-xs text-gray-400">行 ${suggestion.line}</span>` : ''}
|
||||
</div>
|
||||
<div class="text-sm text-gray-700 review-content">${suggestion.content || ''}</div>
|
||||
<div class="text-sm text-gray-700 review-content">${typeof renderMarkdown === 'function' ? renderMarkdown(suggestion.content || '') : (suggestion.content || '')}</div>
|
||||
${suggestion.code_example ? `
|
||||
<pre class="mt-2 p-2 bg-gray-100 rounded text-xs overflow-x-auto"><code>${this._escapeHtml(suggestion.code_example)}</code></pre>
|
||||
` : ''}
|
||||
|
||||
@@ -216,10 +216,15 @@
|
||||
.replace(/^# (.+)$/gm, '<h1>$1</h1>')
|
||||
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
||||
.replace(/`(.+?)`/g, '<code class="bg-gray-100 px-1 rounded">$1</code>')
|
||||
.replace(/^- (.+)$/gm, '<li>$1</li>')
|
||||
.replace(/\n/g, '<br>');
|
||||
// Wrap consecutive <li> in <ul>
|
||||
html = html.replace(/(<li>.*?<\/li>)(\s*<br>\s*<li>)/g, '$1$2');
|
||||
.replace(/^- (.+)$/gm, '<li class="bullet-item">$1</li>')
|
||||
.replace(/^(\d+)\. (.+)$/gm, '<li class="numbered-item">$2</li>')
|
||||
.replace(/\n/g, '\n');
|
||||
// Wrap consecutive bullet <li> in <ul>
|
||||
html = html.replace(/((?:<li class="bullet-item">.*<\/li>\n?)+)/g, '<ul>$1</ul>');
|
||||
// Wrap consecutive numbered <li> in <ol>
|
||||
html = html.replace(/((?:<li class="numbered-item">.*<\/li>\n?)+)/g, '<ol>$1</ol>');
|
||||
// Convert remaining newlines to <br> (outside lists)
|
||||
html = html.replace(/\n/g, '<br>');
|
||||
return html;
|
||||
}
|
||||
|
||||
|
||||
@@ -303,7 +303,7 @@
|
||||
// Simple markdown rendering
|
||||
function renderMarkdown(text) {
|
||||
if (!text) return '';
|
||||
return text
|
||||
let html = text
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
@@ -312,9 +312,16 @@
|
||||
.replace(/^# (.+)$/gm, '<h1>$1</h1>')
|
||||
.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
|
||||
.replace(/`(.+?)`/g, '<code class="bg-gray-100 px-1 rounded">$1</code>')
|
||||
.replace(/^- (.+)$/gm, '<li>$1</li>')
|
||||
.replace(/(\d+)\. (.+)$/gm, '<li>$1. $2</li>')
|
||||
.replace(/\n/g, '<br>');
|
||||
.replace(/^- (.+)$/gm, '<li class="bullet-item">$1</li>')
|
||||
.replace(/^(\d+)\. (.+)$/gm, '<li class="numbered-item">$2</li>')
|
||||
.replace(/\n/g, '\n');
|
||||
// Wrap consecutive bullet <li> in <ul>
|
||||
html = html.replace(/((?:<li class="bullet-item">.*<\/li>\n?)+)/g, '<ul>$1</ul>');
|
||||
// Wrap consecutive numbered <li> in <ol>
|
||||
html = html.replace(/((?:<li class="numbered-item">.*<\/li>\n?)+)/g, '<ol>$1</ol>');
|
||||
// Convert remaining newlines to <br> (outside lists)
|
||||
html = html.replace(/\n/g, '<br>');
|
||||
return html;
|
||||
}
|
||||
|
||||
loadRefs();
|
||||
|
||||
Reference in New Issue
Block a user