Files
PR-Helper/templates/pages/review.html
T

205 lines
8.5 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<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="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>
</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" .}}
<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);
}
}
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>