feat: Phase 2 — Git 核心功能，go-git 克隆、SSE 进度、D3.js 图形、diff2html 查看器
This commit is contained in:
+186
-88
@@ -1,102 +1,200 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" class="h-full">
|
||||
{{template "head" .}}
|
||||
<body class="h-full bg-gray-50 text-gray-900">
|
||||
<div class="min-h-full flex flex-col">
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
{{template "head" .}}
|
||||
</head>
|
||||
<body class="bg-gray-50 min-h-screen">
|
||||
{{template "nav" .}}
|
||||
<main class="flex-1">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<h1 class="text-2xl font-bold mb-6">生成 PR 描述</h1>
|
||||
<!-- Ref Selection -->
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
|
||||
<h2 class="text-lg font-semibold mb-4">选择范围</h2>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Base (基准)</label>
|
||||
<input type="text" id="base-ref" placeholder="main"
|
||||
class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Head (目标)</label>
|
||||
<input type="text" id="head-ref" placeholder="feature/branch"
|
||||
class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
|
||||
</div>
|
||||
|
||||
<main class="max-w-4xl mx-auto px-4 py-8">
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-6">生成 PR 描述</h1>
|
||||
|
||||
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
|
||||
<div class="grid grid-cols-2 gap-4 mb-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Base 分支</label>
|
||||
<select id="base-ref" class="w-full border rounded-md px-3 py-2" required>
|
||||
<option value="">加载中...</option>
|
||||
</select>
|
||||
</div>
|
||||
<button id="generate-btn" onclick="generatePR()"
|
||||
class="mt-4 bg-green-600 text-white px-5 py-2 rounded-md text-sm font-medium hover:bg-green-700">
|
||||
生成 PR 描述
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Head 分支</label>
|
||||
<select id="head-ref" class="w-full border rounded-md px-3 py-2" required>
|
||||
<option value="">加载中...</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button onclick="generate()" id="btn-generate" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700">
|
||||
生成 PR 描述
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Output -->
|
||||
<div id="output" class="bg-white rounded-lg shadow-md p-6 hidden">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-lg font-semibold">PR 描述</h2>
|
||||
<button onclick="copyMarkdown()" class="px-3 py-1 bg-gray-100 text-gray-700 rounded hover:bg-gray-200">
|
||||
复制 Markdown
|
||||
</button>
|
||||
</div>
|
||||
<!-- Output -->
|
||||
<div id="pr-output" class="hidden bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-lg font-semibold">PR 描述</h2>
|
||||
<button onclick="copyMarkdown()" class="text-sm text-indigo-600 hover:text-indigo-800">📋 复制 Markdown</button>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div id="pr-title" class="text-xl font-bold mb-2"></div>
|
||||
<div id="pr-type" class="inline-block bg-indigo-100 text-indigo-700 text-xs px-2 py-1 rounded mb-4"></div>
|
||||
<div id="pr-summary" class="text-gray-700 mb-4"></div>
|
||||
<div id="pr-details" class="prose prose-sm max-w-none"></div>
|
||||
<div id="pr-impact" class="mt-4 p-3 bg-yellow-50 rounded text-sm text-yellow-800"></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>
|
||||
<ul id="pr-details" class="list-disc list-inside text-gray-700 space-y-1"></ul>
|
||||
</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 class="mt-6 p-4 bg-gray-50 rounded-md">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<!-- Loading indicator -->
|
||||
<div id="loading" class="text-center py-8 hidden">
|
||||
<div class="spinner inline-block"></div>
|
||||
<p class="mt-2 text-gray-500">正在生成 PR 描述...</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{{template "footer" .}}
|
||||
</div>
|
||||
<script>
|
||||
async function generatePR() {
|
||||
const base = document.getElementById('base-ref').value.trim();
|
||||
const head = document.getElementById('head-ref').value.trim();
|
||||
if (!base || !head) { alert('请填写 base 和 head'); return; }
|
||||
const btn = document.getElementById('generate-btn');
|
||||
const output = document.getElementById('pr-output');
|
||||
btn.disabled = true; btn.textContent = '生成中...';
|
||||
output.classList.remove('hidden');
|
||||
try {
|
||||
const resp = await fetch('/api/repos/{{.ID}}/generate', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({base, head})
|
||||
});
|
||||
if (!resp.ok) { const data = await resp.json(); throw new Error(data.error || '生成失败'); }
|
||||
const reader = resp.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let buffer = '', eventType = '';
|
||||
while (true) {
|
||||
const {done, value} = await reader.read();
|
||||
if (done) break;
|
||||
buffer += decoder.decode(value, {stream: true});
|
||||
const lines = buffer.split('\n');
|
||||
buffer = lines.pop() || '';
|
||||
for (const line of lines) {
|
||||
if (line.startsWith('event: ')) eventType = line.slice(7).trim();
|
||||
else if (line.startsWith('data: ')) {
|
||||
try {
|
||||
const data = JSON.parse(line.slice(6));
|
||||
if (eventType === 'title') document.getElementById('pr-title').textContent = data.content;
|
||||
if (eventType === 'type') document.getElementById('pr-type').textContent = data.content;
|
||||
if (eventType === 'summary') document.getElementById('pr-summary').textContent = data.content;
|
||||
if (eventType === 'detail') document.getElementById('pr-details').innerHTML = data.content;
|
||||
if (eventType === 'impact') document.getElementById('pr-impact').textContent = '影响范围: ' + data.content;
|
||||
} catch {}
|
||||
}
|
||||
|
||||
<script>
|
||||
const repoId = {{.ID}};
|
||||
|
||||
// Load refs on page load
|
||||
async function loadRefs() {
|
||||
try {
|
||||
const resp = await fetch(`/api/repos/${repoId}/refs`);
|
||||
if (!resp.ok) throw new Error('Failed to load refs');
|
||||
const refs = await resp.json();
|
||||
|
||||
const baseSelect = document.getElementById('base-ref');
|
||||
const headSelect = document.getElementById('head-ref');
|
||||
baseSelect.innerHTML = '<option value="">选择分支</option>';
|
||||
headSelect.innerHTML = '<option value="">选择分支</option>';
|
||||
|
||||
const branches = refs.filter(r => !r.is_tag);
|
||||
|
||||
branches.forEach(ref => {
|
||||
const opt1 = document.createElement('option');
|
||||
opt1.value = ref.name;
|
||||
opt1.textContent = ref.name + (ref.is_head ? ' (HEAD)' : '');
|
||||
baseSelect.appendChild(opt1);
|
||||
|
||||
const opt2 = document.createElement('option');
|
||||
opt2.value = ref.name;
|
||||
opt2.textContent = ref.name + (ref.is_head ? ' (HEAD)' : '');
|
||||
headSelect.appendChild(opt2);
|
||||
});
|
||||
|
||||
// Auto-select main/master as base, HEAD as head
|
||||
const mainBranch = branches.find(b => b.name === 'main' || b.name === 'master');
|
||||
const headBranch = branches.find(r => r.is_head);
|
||||
|
||||
if (mainBranch) baseSelect.value = mainBranch.name;
|
||||
if (headBranch) headSelect.value = headBranch.name;
|
||||
} catch (err) {
|
||||
console.error('Load refs error:', err);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
document.getElementById('pr-summary').textContent = '错误: ' + err.message;
|
||||
} finally {
|
||||
btn.disabled = false; btn.textContent = '生成 PR 描述';
|
||||
}
|
||||
}
|
||||
function copyMarkdown() {
|
||||
const title = document.getElementById('pr-title').textContent;
|
||||
const type = document.getElementById('pr-type').textContent;
|
||||
const summary = document.getElementById('pr-summary').textContent;
|
||||
const details = document.getElementById('pr-details').innerText;
|
||||
const impact = document.getElementById('pr-impact').textContent;
|
||||
const md = '# ' + title + '\n\n**Type:** ' + type + '\n\n## Summary\n' + summary + '\n\n## Details\n' + details + '\n\n## Impact\n' + impact;
|
||||
navigator.clipboard.writeText(md);
|
||||
}
|
||||
</script>
|
||||
|
||||
async function generate() {
|
||||
const baseRef = document.getElementById('base-ref').value;
|
||||
const headRef = document.getElementById('head-ref').value;
|
||||
|
||||
if (!baseRef || !headRef) {
|
||||
alert('请选择 Base 和 Head 分支');
|
||||
return;
|
||||
}
|
||||
|
||||
const btn = document.getElementById('btn-generate');
|
||||
const output = document.getElementById('output');
|
||||
const loading = document.getElementById('loading');
|
||||
|
||||
btn.disabled = true;
|
||||
btn.textContent = '生成中...';
|
||||
output.classList.remove('hidden');
|
||||
document.getElementById('output-content').classList.add('hidden');
|
||||
loading.classList.remove('hidden');
|
||||
|
||||
try {
|
||||
const resp = await fetch(`/api/repos/${repoId}/generate`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ base_ref: baseRef, head_ref: headRef })
|
||||
});
|
||||
|
||||
if (!resp.ok) throw new Error('生成失败');
|
||||
|
||||
const data = await resp.json();
|
||||
|
||||
document.getElementById('pr-title').textContent = data.title || '';
|
||||
document.getElementById('pr-type').textContent = data.type || '';
|
||||
document.getElementById('pr-summary').textContent = data.summary || '';
|
||||
document.getElementById('pr-impact').textContent = data.impact || '';
|
||||
|
||||
const detailsList = document.getElementById('pr-details');
|
||||
detailsList.innerHTML = '';
|
||||
if (data.details && Array.isArray(data.details)) {
|
||||
data.details.forEach(item => {
|
||||
const li = document.createElement('li');
|
||||
li.textContent = item;
|
||||
detailsList.appendChild(li);
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('pr-markdown').textContent = data.markdown || '';
|
||||
|
||||
loading.classList.add('hidden');
|
||||
document.getElementById('output-content').classList.remove('hidden');
|
||||
} catch (err) {
|
||||
alert('生成失败: ' + err.message);
|
||||
output.classList.add('hidden');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = '生成 PR 描述';
|
||||
}
|
||||
}
|
||||
|
||||
function copyMarkdown() {
|
||||
const markdown = document.getElementById('pr-markdown').textContent;
|
||||
navigator.clipboard.writeText(markdown).then(() => {
|
||||
alert('已复制到剪贴板');
|
||||
}).catch(() => {
|
||||
// Fallback
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = markdown;
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
alert('已复制到剪贴板');
|
||||
});
|
||||
}
|
||||
|
||||
loadRefs();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user