feat: Phase 2 — Git 核心功能,go-git 克隆、SSE 进度、D3.js 图形、diff2html 查看器

This commit is contained in:
2026-06-18 22:59:51 +08:00
parent 1e9b1a2129
commit 34ef868e10
11 changed files with 2024 additions and 247 deletions
+186 -88
View File
@@ -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>
+208 -40
View File
@@ -1,51 +1,219 @@
<!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" .}}
<link rel="stylesheet" href="/static/lib/diff2html.min.css">
<script src="/static/lib/d3.min.js"></script>
<script src="/static/lib/diff2html.min.js"></script>
<script src="/static/lib/highlight.min.js"></script>
<script src="/static/js/graph.js"></script>
<script src="/static/js/diff-viewer.js"></script>
<style>
.graph-container {
background: #f8fafc;
border-radius: 8px;
min-height: 300px;
overflow: auto;
}
.graph-container svg {
display: block;
}
.ref-tag {
cursor: pointer;
}
.ref-tag:hover {
opacity: 0.8;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
{{template "nav" .}}
<main class="flex-1">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold">仓库详情</h1>
<div class="flex gap-3">
<a href="/repo/{{.ID}}/generate"
class="bg-green-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-green-700">
生成 PR 描述
</a>
<a href="/repo/{{.ID}}/review"
class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-blue-700">
AI 代码审查
</a>
</div>
<main class="max-w-7xl mx-auto px-4 py-8">
<div class="flex items-center justify-between mb-6">
<h1 class="text-2xl font-bold text-gray-900">
<span id="repo-url" class="text-gray-500 text-lg font-normal"></span>
</h1>
<div class="flex gap-2">
<a id="btn-generate" href="#" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
生成 PR 描述
</a>
<a id="btn-review" href="#" class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700">
AI 代码审查
</a>
</div>
<!-- Repo Info -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
<div id="repo-info" class="text-sm text-gray-500">加载中...</div>
</div>
<!-- Tabs -->
<div class="bg-white rounded-lg shadow-md">
<div class="border-b border-gray-200">
<nav class="flex -mb-px">
<button onclick="showTab('graph')" id="tab-graph" class="px-6 py-3 text-sm font-medium border-b-2 border-blue-500 text-blue-600">
Git Graph
</button>
<button onclick="showTab('diff')" id="tab-diff" class="px-6 py-3 text-sm font-medium border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">
Diff 视图
</button>
</nav>
</div>
<!-- Git Graph -->
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<h2 class="text-lg font-semibold mb-4">Git Graph</h2>
<div id="git-graph" class="overflow-auto" style="min-height: 400px;">
<p class="text-sm text-gray-400 text-center py-10">Git Graph 将在 Phase 3 实现</p>
<!-- Graph Tab -->
<div id="panel-graph" class="p-4">
<div class="flex items-center gap-4 mb-4">
<div class="flex items-center gap-2">
<label class="text-sm text-gray-600">Base:</label>
<select id="graph-base" class="border rounded px-2 py-1 text-sm">
<option value="">选择分支/标签</option>
</select>
</div>
<div class="flex items-center gap-2">
<label class="text-sm text-gray-600">Head:</label>
<select id="graph-head" class="border rounded px-2 py-1 text-sm">
<option value="">选择分支/标签</option>
</select>
</div>
</div>
<div id="git-graph" class="graph-container p-4"></div>
</div>
<!-- Diff Tab -->
<div id="panel-diff" class="p-4 hidden">
<div class="flex items-center gap-4 mb-4">
<div class="flex items-center gap-2">
<label class="text-sm text-gray-600">Base:</label>
<select id="diff-base" class="border rounded px-2 py-1 text-sm">
<option value="">选择分支/标签</option>
</select>
</div>
<div class="flex items-center gap-2">
<label class="text-sm text-gray-600">Head:</label>
<select id="diff-head" class="border rounded px-2 py-1 text-sm">
<option value="">选择分支/标签</option>
</select>
</div>
<button onclick="loadDiff()" class="px-3 py-1 bg-blue-600 text-white rounded text-sm hover:bg-blue-700">
查看 Diff
</button>
<div class="flex gap-1 ml-auto">
<button onclick="setDiffView('side-by-side')" class="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200">并排</button>
<button onclick="setDiffView('unified')" class="px-2 py-1 text-xs bg-gray-100 rounded hover:bg-gray-200">统一</button>
</div>
</div>
<div id="diff-container"></div>
</div>
</div>
</main>
{{template "footer" .}}
</div>
<script>
fetch('/api/repos').then(r => r.json()).then(repos => {
const repo = repos.find(r => r.id == {{.ID}});
const el = document.getElementById('repo-info');
if (repo) {
el.innerHTML = '<p><strong>URL:</strong> ' + repo.url + '</p>' +
'<p class="mt-1"><strong>大小:</strong> ' + (repo.size_bytes / 1024 / 1024).toFixed(1) + ' MB</p>' +
'<p class="mt-1"><strong>克隆时间:</strong> ' + repo.cloned_at + '</p>';
} else {
el.innerHTML = '<p class="text-red-500">仓库未找到</p>';
}
});
</script>
<script>
const repoId = {{.ID}};
let currentRefs = [];
// Load repo info and refs
async function init() {
try {
// Load refs
const refsResp = await fetch(`/api/repos/${repoId}/refs`);
if (refsResp.ok) {
currentRefs = await refsResp.json();
populateRefSelects(currentRefs);
}
// Load repo info
const reposResp = await fetch('/api/repos');
if (reposResp.ok) {
const repos = await reposResp.json();
const repo = repos.find(r => r.id === repoId);
if (repo) {
document.getElementById('repo-url').textContent = repo.url;
document.getElementById('btn-generate').href = `/repo/${repoId}/generate`;
document.getElementById('btn-review').href = `/repo/${repoId}/review`;
}
}
// Init graph
GitGraph.init('git-graph', repoId);
DiffViewer.init('diff-container');
} catch (err) {
console.error('Init error:', err);
}
}
function populateRefSelects(refs) {
const selects = ['graph-base', 'graph-head', 'diff-base', 'diff-head'];
selects.forEach(selectId => {
const select = document.getElementById(selectId);
select.innerHTML = '<option value="">选择分支/标签</option>';
// Branches first
const branches = refs.filter(r => !r.is_tag);
const tags = refs.filter(r => r.is_tag);
if (branches.length > 0) {
const group = document.createElement('optgroup');
group.label = '分支';
branches.forEach(ref => {
const opt = document.createElement('option');
opt.value = ref.name;
opt.textContent = ref.name + (ref.is_head ? ' (HEAD)' : '');
group.appendChild(opt);
});
select.appendChild(group);
}
if (tags.length > 0) {
const group = document.createElement('optgroup');
group.label = '标签';
tags.forEach(ref => {
const opt = document.createElement('option');
opt.value = ref.name;
opt.textContent = ref.name;
group.appendChild(opt);
});
select.appendChild(group);
}
});
// Auto-select main/master as base, HEAD as head
const mainBranch = branches.find(b => b.name === 'main' || b.name === 'master');
const headBranch = refs.find(r => r.is_head);
selects.forEach(selectId => {
const select = document.getElementById(selectId);
if (selectId.includes('base') && mainBranch) {
select.value = mainBranch.name;
} else if (selectId.includes('head') && headBranch) {
select.value = headBranch.name;
}
});
}
function showTab(tab) {
document.getElementById('panel-graph').classList.toggle('hidden', tab !== 'graph');
document.getElementById('panel-diff').classList.toggle('hidden', tab !== 'diff');
document.getElementById('tab-graph').classList.toggle('border-blue-500', tab === 'graph');
document.getElementById('tab-graph').classList.toggle('text-blue-600', tab === 'graph');
document.getElementById('tab-diff').classList.toggle('border-blue-500', tab === 'diff');
document.getElementById('tab-diff').classList.toggle('text-blue-600', tab === 'diff');
}
function loadDiff() {
const base = document.getElementById('diff-base').value;
const head = document.getElementById('diff-head').value;
if (!base || !head) {
alert('请选择 Base 和 Head 分支');
return;
}
DiffViewer.loadDiff(repoId, base, head);
}
function setDiffView(mode) {
DiffViewer.setViewMode(mode);
}
init();
</script>
</body>
</html>
+192 -101
View File
@@ -1,113 +1,204 @@
<!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" .}}
<link rel="stylesheet" href="/static/lib/diff2html.min.css">
<script src="/static/lib/diff2html.min.js"></script>
<script src="/static/lib/highlight.min.js"></script>
<script src="/static/js/diff-viewer.js"></script>
</head>
<body class="bg-gray-50 min-h-screen">
{{template "nav" .}}
<main class="flex-1">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<h1 class="text-2xl font-bold mb-6">AI 代码审查</h1>
<!-- Ref Selection + Top-N -->
<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-3 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>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Top-N 文件数</label>
<input type="number" id="top-n" value="{{.TopN}}" min="0"
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">
<p class="text-xs text-gray-400 mt-1">0 = 分析全部文件</p>
</div>
<main class="max-w-6xl mx-auto px-4 py-8">
<h1 class="text-2xl font-bold text-gray-900 mb-6">AI 代码审查</h1>
<div class="bg-white rounded-lg shadow-md p-6 mb-6">
<div class="grid grid-cols-3 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>
<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>
<label class="block text-sm font-medium text-gray-700 mb-1">Top-N 文件数</label>
<input type="number" id="top-n" value="20" min="1" max="100" class="w-full border rounded-md px-3 py-2">
</div>
<button id="review-btn" onclick="startReview()"
class="mt-4 bg-blue-600 text-white px-5 py-2 rounded-md text-sm font-medium hover:bg-blue-700">
开始审查
</button>
</div>
<!-- Review Output -->
<div id="review-output" class="hidden space-y-6">
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<h2 class="text-lg font-semibold mb-3">整体评估</h2>
<div id="review-summary" class="prose prose-sm max-w-none text-gray-700"></div>
</div>
<div id="file-reviews" class="space-y-4"></div>
<button onclick="startReview()" id="btn-review" class="w-full bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700">
开始审查
</button>
</div>
<!-- Progress -->
<div id="progress" class="bg-white rounded-lg shadow-md p-6 mb-6 hidden">
<h3 class="font-semibold text-gray-700 mb-2">审查进度</h3>
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-2">
<div id="progress-bar" class="bg-purple-600 h-2.5 rounded-full transition-all duration-300" style="width: 0%"></div>
</div>
<p id="progress-text" class="text-sm text-gray-500">准备中...</p>
</div>
<!-- Results -->
<div id="results" class="hidden">
<!-- Summary -->
<div id="summary" class="bg-white rounded-lg shadow-md p-6 mb-6">
<h2 class="text-lg font-semibold text-gray-900 mb-4">审查总结</h2>
<div id="summary-content" class="text-gray-700"></div>
</div>
<!-- File Reviews -->
<div id="file-reviews" class="space-y-4">
<!-- Dynamically populated -->
</div>
</div>
</main>
{{template "footer" .}}
</div>
<script>
async function startReview() {
const base = document.getElementById('base-ref').value.trim();
const head = document.getElementById('head-ref').value.trim();
const topN = parseInt(document.getElementById('top-n').value) || 0;
if (!base || !head) { alert('请填写 base 和 head'); return; }
const btn = document.getElementById('review-btn');
const output = document.getElementById('review-output');
const fileReviews = document.getElementById('file-reviews');
btn.disabled = true; btn.textContent = '审查中...';
output.classList.remove('hidden');
fileReviews.innerHTML = '';
document.getElementById('review-summary').innerHTML = '';
let currentFileEl = null;
try {
const resp = await fetch('/api/repos/{{.ID}}/review', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({base, head, top_n: topN})
});
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 === 'file_start') {
currentFileEl = document.createElement('div');
currentFileEl.className = 'bg-white rounded-lg shadow-sm border border-gray-200 p-6';
currentFileEl.innerHTML = '<h3 class="font-semibold text-gray-900 mb-3">📄 ' + data.file + '</h3><div class="space-y-2"></div>';
fileReviews.appendChild(currentFileEl);
}
if (eventType === 'suggestion' && currentFileEl) {
const colors = {critical: 'red', warning: 'yellow', info: 'green'};
const icons = {critical: '🔴', warning: '🟡', info: '🟢'};
const c = colors[data.severity] || 'gray';
const icon = icons[data.severity] || '⚪';
const div = document.createElement('div');
div.className = 'border-l-4 border-' + c + '-400 bg-' + c + '-50 px-4 py-2 rounded-r text-sm';
div.innerHTML = '<span class="font-medium">' + icon + ' ' + data.severity + '</span><p class="mt-1 text-gray-700">' + data.content + '</p>';
currentFileEl.querySelector('.space-y-2').appendChild(div);
}
if (eventType === 'file_end') currentFileEl = null;
if (eventType === 'summary') document.getElementById('review-summary').innerHTML = 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('review-summary').textContent = '错误: ' + err.message;
} finally {
btn.disabled = false; btn.textContent = '开始审查';
}
}
</script>
async function startReview() {
const baseRef = document.getElementById('base-ref').value;
const headRef = document.getElementById('head-ref').value;
const topN = document.getElementById('top-n').value;
if (!baseRef || !headRef) {
alert('请选择 Base 和 Head 分支');
return;
}
const btn = document.getElementById('btn-review');
const progress = document.getElementById('progress');
const results = document.getElementById('results');
btn.disabled = true;
btn.textContent = '审查中...';
progress.classList.remove('hidden');
results.classList.add('hidden');
try {
const resp = await fetch(`/api/repos/${repoId}/review`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ base_ref: baseRef, head_ref: headRef, top_n: parseInt(topN) })
});
if (!resp.ok) throw new Error('审查失败');
const data = await resp.json();
// Display summary
document.getElementById('summary-content').innerHTML = data.summary || '无总结';
// Display file reviews
const container = document.getElementById('file-reviews');
container.innerHTML = '';
if (data.files && Array.isArray(data.files)) {
data.files.forEach(file => {
const card = createFileCard(file);
container.appendChild(card);
});
}
results.classList.remove('hidden');
} catch (err) {
alert('审查失败: ' + err.message);
} finally {
btn.disabled = false;
btn.textContent = '开始审查';
progress.classList.add('hidden');
}
}
function createFileCard(file) {
const severityColors = {
critical: 'bg-red-100 text-red-800 border-red-200',
warning: 'bg-yellow-100 text-yellow-800 border-yellow-200',
info: 'bg-green-100 text-green-800 border-green-200'
};
const card = document.createElement('div');
card.className = 'bg-white rounded-lg shadow-md border-l-4 ' + (severityColors[file.max_severity] || severityColors.info);
let suggestionsHtml = '';
if (file.suggestions && Array.isArray(file.suggestions)) {
suggestionsHtml = file.suggestions.map(s => `
<div class="mt-2 p-2 bg-gray-50 rounded">
<div class="flex items-center gap-2 mb-1">
<span class="px-2 py-0.5 rounded text-xs font-medium ${severityColors[s.severity] || severityColors.info}">
${s.severity || 'info'}
</span>
${s.line ? `<span class="text-xs text-gray-500">行 ${s.line}</span>` : ''}
</div>
<p class="text-sm text-gray-700">${s.content || ''}</p>
</div>
`).join('');
}
card.innerHTML = `
<div class="p-4">
<div class="flex items-center justify-between">
<h3 class="font-medium text-gray-900">${file.filename || ''}</h3>
<span class="px-2 py-1 rounded text-xs font-medium ${severityColors[file.max_severity] || severityColors.info}">
${file.max_severity || 'info'}
</span>
</div>
<p class="mt-2 text-sm text-gray-600">${file.summary || ''}</p>
${suggestionsHtml}
</div>
`;
return card;
}
loadRefs();
</script>
</body>
</html>