From 41cf19ff612683c44a9468b1a2b599b61c4f31c3 Mon Sep 17 00:00:00 2001
From: wonder <hezhaohui0807@163.com>
Date: Sun, 21 Jun 2026 15:43:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20PR=20=E7=94=9F=E6=88=90=E9=A1=B5?=
 =?UTF-8?q?=E6=B5=81=E5=BC=8F=E8=BE=93=E5=87=BA=E3=80=81=E5=B7=A6=E5=8F=B3?=
 =?UTF-8?q?=E4=B8=A4=E6=A0=8F=E5=B8=83=E5=B1=80=E5=8F=8A=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E4=BA=A4=E4=BA=92=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 content 事件处理器，实时显示 LLM 流式原始输出
- 按钮增加 opacity-70 和 cursor-not-allowed 视觉反馈
- 详细说明区域改为左右两栏：左侧渲染效果、右侧 Markdown 源码
- 流式阶段显示带自动滚动的内容区域，完成后切换为结构化展示
- 精简布局：移除独立 Markdown 预览区域，合并到两栏中
---
 templates/pages/generate.html | 109 +++++++++++++++++++++-------------
 1 file changed, 68 insertions(+), 41 deletions(-)

diff --git a/templates/pages/generate.html b/templates/pages/generate.html
index 393276c..64af0b5 100644
--- a/templates/pages/generate.html
+++ b/templates/pages/generate.html
@@ -41,43 +41,56 @@
                 </button>
             </div>
 
-            <div id="output-content">
-                <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-500">标题</label>
-                    <p id="pr-title" class="text-lg font-semibold text-gray-900"></p>
+            <!-- Streaming: show raw LLM output as it arrives -->
+            <div id="streaming" class="hidden">
+                <div class="flex items-center gap-2 mb-3">
+                    <div class="spinner inline-block"></div>
+                    <p class="text-gray-500 text-sm">正在生成 PR 描述...</p>
+                    <p id="streaming-status" class="text-xs text-gray-400"></p>
                 </div>
-
-                <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-500">类型</label>
-                    <span id="pr-type" class="inline-block px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm"></span>
-                </div>
-
-                <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-500">摘要</label>
-                    <p id="pr-summary" class="text-gray-700"></p>
-                </div>
-
-                <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-500">详细说明</label>
-                    <div id="pr-details" class="text-gray-700 prose text-sm"></div>
-                </div>
-
-                <div class="mb-4">
-                    <label class="block text-sm font-medium text-gray-500">影响</label>
-                    <p id="pr-impact" class="text-gray-700"></p>
-                </div>
-
-                <div id="markdown-preview" class="mt-6 p-4 bg-gray-50 rounded-md hidden">
-                    <label class="block text-sm font-medium text-gray-500 mb-2">Markdown 预览</label>
-                    <pre id="pr-markdown" class="whitespace-pre-wrap text-sm text-gray-800 font-mono"></pre>
+                <div id="streaming-content" class="p-4 bg-gray-50 rounded-md max-h-96 overflow-y-auto">
+                    <pre id="streaming-text" class="whitespace-pre-wrap text-sm text-gray-700 font-mono"></pre>
                 </div>
             </div>
 
-            <!-- Streaming indicator -->
-            <div id="streaming" class="text-center py-8 hidden">
-                <div class="spinner inline-block"></div>
-                <p class="mt-2 text-gray-500">正在生成 PR 描述...</p>
-                <p id="streaming-status" class="mt-1 text-xs text-gray-400"></p>
+            <!-- Structured output (two-column after done) -->
+            <div id="output-content">
+                <div id="structured-fields">
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-500">标题</label>
+                        <p id="pr-title" class="text-lg font-semibold text-gray-900"></p>
+                    </div>
+
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-500">类型</label>
+                        <span id="pr-type" class="inline-block px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm"></span>
+                    </div>
+
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-500">摘要</label>
+                        <p id="pr-summary" class="text-gray-700"></p>
+                    </div>
+
+                    <div class="mb-4">
+                        <label class="block text-sm font-medium text-gray-500">影响</label>
+                        <p id="pr-impact" class="text-gray-700"></p>
+                    </div>
+                </div>
+
+                <!-- Two-column: rendered markdown (left) + raw markdown (right) -->
+                <div class="mb-4">
+                    <label class="block text-sm font-medium text-gray-500 mb-2">详细说明</label>
+                    <div class="grid grid-cols-2 gap-4">
+                        <div>
+                            <div class="text-xs text-gray-400 mb-1">渲染效果</div>
+                            <div id="pr-details" class="text-gray-700 prose text-sm p-4 border rounded-md bg-white min-h-[120px]"></div>
+                        </div>
+                        <div>
+                            <div class="text-xs text-gray-400 mb-1">Markdown 源码</div>
+                            <pre id="pr-markdown" class="whitespace-pre-wrap text-sm text-gray-800 font-mono p-4 border rounded-md bg-gray-50 min-h-[120px] overflow-auto"></pre>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
     </main>
@@ -202,9 +215,12 @@
 
             btn.disabled = true;
             btn.textContent = '生成中...';
+            btn.classList.add('opacity-70', 'cursor-not-allowed');
             output.classList.remove('hidden');
             outputContent.classList.add('hidden');
             streaming.classList.remove('hidden');
+            document.getElementById('streaming-text').textContent = '';
+            document.getElementById('streaming-status').textContent = '';
 
             // Clear previous results
             document.getElementById('pr-title').textContent = '';
@@ -213,54 +229,64 @@
             document.getElementById('pr-details').innerHTML = '';
             document.getElementById('pr-impact').textContent = '';
             document.getElementById('pr-markdown').textContent = '';
-            document.getElementById('markdown-preview').classList.add('hidden');
             markdownContent = '';
 
             // Accumulate streaming content
             const fields = { title: '', type: '', summary: '', details: '', impact: '' };
+            let rawStreamText = '';
 
             SSE.post(`/api/repos/${repoId}/generate`, {
                 base: baseRef,
                 head: headRef,
             }, {
+                // Raw streaming content from LLM — show in real-time
+                content(data) {
+                    const chunk = data.content || '';
+                    rawStreamText += chunk;
+                    document.getElementById('streaming-text').textContent = rawStreamText;
+                    // Auto-scroll to bottom
+                    const container = document.getElementById('streaming-content');
+                    container.scrollTop = container.scrollHeight;
+                },
                 title(data) {
                     fields.title += data.content || '';
                     document.getElementById('pr-title').textContent = fields.title;
-                    document.getElementById('streaming-status').textContent = '生成标题...';
+                    document.getElementById('streaming-status').textContent = '解析标题...';
                 },
                 type(data) {
                     fields.type += data.content || '';
                     document.getElementById('pr-type').textContent = fields.type;
-                    document.getElementById('streaming-status').textContent = '生成类型...';
+                    document.getElementById('streaming-status').textContent = '解析类型...';
                 },
                 summary(data) {
                     fields.summary += data.content || '';
                     document.getElementById('pr-summary').textContent = fields.summary;
-                    document.getElementById('streaming-status').textContent = '生成摘要...';
+                    document.getElementById('streaming-status').textContent = '解析摘要...';
                 },
                 detail(data) {
                     fields.details += data.content || '';
                     document.getElementById('pr-details').innerHTML = renderMarkdown(fields.details);
-                    document.getElementById('streaming-status').textContent = '生成详细说明...';
+                    document.getElementById('streaming-status').textContent = '解析详细说明...';
                 },
                 impact(data) {
                     fields.impact += data.content || '';
                     document.getElementById('pr-impact').textContent = fields.impact;
-                    document.getElementById('streaming-status').textContent = '生成影响范围...';
+                    document.getElementById('streaming-status').textContent = '解析影响范围...';
                 },
                 markdown(data) {
                     markdownContent += data.content || '';
                     document.getElementById('pr-markdown').textContent = markdownContent;
                 },
                 done() {
-                    // Assemble full markdown from structured fields for copy
+                    // Assemble full markdown from structured fields
                     markdownContent = buildMarkdown(fields);
                     document.getElementById('pr-markdown').textContent = markdownContent;
-                    document.getElementById('markdown-preview').classList.remove('hidden');
+                    // Switch from streaming to structured display
                     streaming.classList.add('hidden');
                     outputContent.classList.remove('hidden');
                     btn.disabled = false;
                     btn.textContent = '生成 PR 描述';
+                    btn.classList.remove('opacity-70', 'cursor-not-allowed');
                 },
                 error(data) {
                     showToast('生成失败: ' + (data.message || '未知错误'), 'error');
@@ -268,6 +294,7 @@
                     output.classList.add('hidden');
                     btn.disabled = false;
                     btn.textContent = '生成 PR 描述';
+                    btn.classList.remove('opacity-70', 'cursor-not-allowed');
                 },
             });
         }