114 lines
6.1 KiB
HTML
114 lines
6.1 KiB
HTML
<!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">
|
|
{{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>
|
|
</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>
|
|
</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 {}
|
|
}
|
|
}
|
|
}
|
|
} catch (err) {
|
|
document.getElementById('review-summary').textContent = '错误: ' + err.message;
|
|
} finally {
|
|
btn.disabled = false; btn.textContent = '开始审查';
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|