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

201 lines
8.3 KiB
HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
{{template "head" .}}
</head>
<body class="bg-gray-50 min-h-screen">
{{template "nav" .}}
<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>
<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>
<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 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" .}}
<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 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>