fix: 改进 SSE 克隆处理，仓库页面添加调试信息
This commit is contained in:
@@ -78,41 +78,80 @@ document.getElementById('clone-form').addEventListener('submit', async function(
|
||||
const bar = document.getElementById('clone-bar');
|
||||
const errorEl = document.getElementById('clone-error');
|
||||
btn.disabled = true;
|
||||
btn.textContent = '克隆中...';
|
||||
progress.classList.remove('hidden');
|
||||
errorEl.classList.add('hidden');
|
||||
bar.style.width = '0%';
|
||||
status.textContent = '正在连接...';
|
||||
|
||||
try {
|
||||
const resp = await fetch('/api/repos', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({url: url})
|
||||
});
|
||||
if (!resp.ok) { const data = await resp.json(); throw new Error(data.error || 'clone failed'); }
|
||||
|
||||
if (!resp.ok) {
|
||||
const data = await resp.json();
|
||||
throw new Error(data.error || 'clone failed');
|
||||
}
|
||||
|
||||
const reader = resp.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let buffer = '';
|
||||
let currentEvent = '';
|
||||
|
||||
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('data: ')) {
|
||||
if (line.startsWith('event: ')) {
|
||||
currentEvent = line.slice(7).trim();
|
||||
} else if (line.startsWith('data: ')) {
|
||||
try {
|
||||
const data = JSON.parse(line.slice(6));
|
||||
if (data.progress !== undefined) bar.style.width = data.progress + '%';
|
||||
if (data.message) status.textContent = data.message;
|
||||
if (data.done) { window.location.href = '/repo/' + data.repo_id; return; }
|
||||
} catch {}
|
||||
|
||||
if (currentEvent === 'start') {
|
||||
status.textContent = '开始克隆...';
|
||||
bar.style.width = '10%';
|
||||
} else if (currentEvent === 'progress') {
|
||||
status.textContent = data.step || '处理中...';
|
||||
if (data.current !== undefined && data.total > 0) {
|
||||
bar.style.width = Math.round((data.current / data.total) * 80 + 10) + '%';
|
||||
} else {
|
||||
bar.style.width = '50%';
|
||||
}
|
||||
} else if (currentEvent === 'complete') {
|
||||
bar.style.width = '100%';
|
||||
status.textContent = '克隆完成！';
|
||||
// Redirect to repo page
|
||||
setTimeout(() => {
|
||||
window.location.href = '/repo/' + data.repo_id;
|
||||
}, 500);
|
||||
return;
|
||||
} else if (currentEvent === 'error') {
|
||||
throw new Error(data.message || '克隆失败');
|
||||
}
|
||||
} catch (parseErr) {
|
||||
if (parseErr.message && !parseErr.message.includes('JSON')) {
|
||||
throw parseErr;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
errorEl.textContent = err.message;
|
||||
errorEl.classList.remove('hidden');
|
||||
progress.classList.add('hidden');
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.textContent = '克隆';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
+149
-79
@@ -18,12 +18,6 @@
|
||||
.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">
|
||||
@@ -31,9 +25,10 @@
|
||||
|
||||
<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>
|
||||
<h1 class="text-2xl font-bold text-gray-900">仓库详情</h1>
|
||||
<p id="repo-url" class="text-gray-500 text-sm mt-1"></p>
|
||||
</div>
|
||||
<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 描述
|
||||
@@ -44,62 +39,84 @@
|
||||
</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>
|
||||
<!-- Debug Info -->
|
||||
<div id="debug-info" class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-4 text-sm hidden">
|
||||
<p><strong>调试信息:</strong></p>
|
||||
<p>仓库 ID: <span id="debug-id"></span></p>
|
||||
<p>Refs: <span id="debug-refs"></span></p>
|
||||
<p>Graph: <span id="debug-graph"></span></p>
|
||||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<!-- Loading State -->
|
||||
<div id="loading" class="bg-white rounded-lg shadow-md p-8 text-center">
|
||||
<div class="spinner inline-block"></div>
|
||||
<p class="mt-2 text-gray-500">加载仓库数据...</p>
|
||||
</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>
|
||||
<!-- Error State -->
|
||||
<div id="error" class="bg-red-50 border border-red-200 rounded-lg p-4 hidden">
|
||||
<p class="text-red-600" id="error-message"></p>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div id="main-content" class="hidden">
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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 id="diff-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -107,50 +124,103 @@
|
||||
{{template "footer" .}}
|
||||
|
||||
<script>
|
||||
const repoId = {{.ID}};
|
||||
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);
|
||||
}
|
||||
// Show debug info in development
|
||||
const showDebug = true;
|
||||
|
||||
// Load repo info
|
||||
async function init() {
|
||||
console.log('Initializing repo page, ID:', repoId);
|
||||
|
||||
if (showDebug) {
|
||||
document.getElementById('debug-info').classList.remove('hidden');
|
||||
document.getElementById('debug-id').textContent = repoId;
|
||||
}
|
||||
|
||||
try {
|
||||
// Load repo info first
|
||||
const reposResp = await fetch('/api/repos');
|
||||
if (reposResp.ok) {
|
||||
const repos = await reposResp.json();
|
||||
const repo = repos.find(r => r.id === repoId);
|
||||
console.log('Repos:', repos);
|
||||
const repo = repos.find(r => r.id == repoId || r.id === parseInt(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`;
|
||||
} else {
|
||||
showError('仓库未找到 (ID: ' + repoId + ')');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Load refs
|
||||
console.log('Loading refs...');
|
||||
const refsResp = await fetch(`/api/repos/${repoId}/refs`);
|
||||
if (refsResp.ok) {
|
||||
currentRefs = await refsResp.json();
|
||||
console.log('Refs loaded:', currentRefs);
|
||||
if (showDebug) {
|
||||
document.getElementById('debug-refs').textContent = currentRefs.length + ' refs';
|
||||
}
|
||||
populateRefSelects(currentRefs);
|
||||
} else {
|
||||
console.error('Failed to load refs:', refsResp.status);
|
||||
if (showDebug) {
|
||||
document.getElementById('debug-refs').textContent = 'Error: ' + refsResp.status;
|
||||
}
|
||||
}
|
||||
|
||||
// Init graph
|
||||
GitGraph.init('git-graph', repoId);
|
||||
console.log('Loading graph...');
|
||||
const graphResp = await fetch(`/api/repos/${repoId}/graph`);
|
||||
if (graphResp.ok) {
|
||||
const graphData = await graphResp.json();
|
||||
console.log('Graph data:', graphData);
|
||||
if (showDebug) {
|
||||
document.getElementById('debug-graph').textContent =
|
||||
(graphData.commits ? graphData.commits.length : 0) + ' commits, ' +
|
||||
(graphData.refs ? graphData.refs.length : 0) + ' refs';
|
||||
}
|
||||
|
||||
// Render graph
|
||||
GitGraph.init('git-graph', repoId);
|
||||
} else {
|
||||
console.error('Failed to load graph:', graphResp.status);
|
||||
if (showDebug) {
|
||||
document.getElementById('debug-graph').textContent = 'Error: ' + graphResp.status;
|
||||
}
|
||||
}
|
||||
|
||||
// Init diff viewer
|
||||
DiffViewer.init('diff-container');
|
||||
|
||||
// Show main content
|
||||
document.getElementById('loading').classList.add('hidden');
|
||||
document.getElementById('main-content').classList.remove('hidden');
|
||||
|
||||
} catch (err) {
|
||||
console.error('Init error:', err);
|
||||
showError('加载失败: ' + err.message);
|
||||
}
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
document.getElementById('loading').classList.add('hidden');
|
||||
document.getElementById('error').classList.remove('hidden');
|
||||
document.getElementById('error-message').textContent = message;
|
||||
}
|
||||
|
||||
function populateRefSelects(refs) {
|
||||
const selects = ['graph-base', 'graph-head', 'diff-base', 'diff-head'];
|
||||
const branches = refs.filter(r => !r.is_tag);
|
||||
const tags = refs.filter(r => r.is_tag);
|
||||
|
||||
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 = '分支';
|
||||
|
||||
Reference in New Issue
Block a user