feat: Phase 2 — Git 核心功能，go-git 克隆、SSE 进度、D3.js 图形、diff2html 查看器
This commit is contained in:
+192
-101
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user