From 1cfab2d2d10308c34ac2a4d0e4291095daf4a022 Mon Sep 17 00:00:00 2001
From: wonder <hezhaohui0807@163.com>
Date: Fri, 19 Jun 2026 21:41:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=94=B9=E8=BF=9B=20diff=20=E6=9F=A5?=
 =?UTF-8?q?=E7=9C=8B=E5=99=A8=E6=A0=B7=E5=BC=8F=E5=92=8C=20markdown=20?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 static/css/style.css          | 115 +++++++++++++++++++++++++++++++++-
 static/js/diff-viewer.js      |   2 +-
 static/js/review-inline.js    |   2 +-
 templates/pages/generate.html |  13 ++--
 templates/pages/review.html   |  15 +++--
 5 files changed, 136 insertions(+), 11 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index a57964e..bd71f50 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -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;
+}
diff --git a/static/js/diff-viewer.js b/static/js/diff-viewer.js
index b75e107..dfffba5 100644
--- a/static/js/diff-viewer.js
+++ b/static/js/diff-viewer.js
@@ -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>`;
diff --git a/static/js/review-inline.js b/static/js/review-inline.js
index cb19edf..8830901 100644
--- a/static/js/review-inline.js
+++ b/static/js/review-inline.js
@@ -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>
                 ` : ''}
diff --git a/templates/pages/generate.html b/templates/pages/generate.html
index e87be5e..bc7de56 100644
--- a/templates/pages/generate.html
+++ b/templates/pages/generate.html
@@ -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;
         }
 
diff --git a/templates/pages/review.html b/templates/pages/review.html
index 5975a5d..07f9850 100644
--- a/templates/pages/review.html
+++ b/templates/pages/review.html
@@ -303,7 +303,7 @@
         // Simple markdown rendering
         function renderMarkdown(text) {
             if (!text) return '';
-            return text
+            let html = text
                 .replace(/&/g, '&amp;')
                 .replace(/</g, '&lt;')
                 .replace(/>/g, '&gt;')
@@ -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();