新增任务实时详情：Agent实时状态上报(决策/执行/验证阶段)+前端详情面板(2.5s轮询步骤日志/截图/停止按钮)；修复static路径
This commit is contained in:
@@ -45,3 +45,36 @@ a.report-link:hover { text-decoration: underline; }
|
||||
.modal-body { width: 90vw; height: 90vh; background: #fff; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
|
||||
.modal-head { padding: 12px 16px; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
|
||||
#report-frame { flex: 1; border: none; width: 100%; }
|
||||
.btn.danger { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
|
||||
.btn.danger:hover { background: #fecaca; }
|
||||
/* 任务详情 */
|
||||
.detail-body { width: 96vw; max-width: 1100px; }
|
||||
.detail-content { flex: 1; overflow-y: auto; padding: 16px 20px; }
|
||||
.detail-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 24px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; font-size: 13px; margin-bottom: 14px; }
|
||||
.detail-meta .m-item b { display: block; color: #6b7280; font-size: 11px; font-weight: 500; margin-bottom: 3px; }
|
||||
.detail-meta .m-item span { color: #111; word-break: break-all; }
|
||||
.live-bar { display: flex; align-items: flex-start; gap: 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; padding: 12px 16px; margin-bottom: 16px; }
|
||||
.live-bar.hidden { display: none; }
|
||||
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #3b82f6; margin-top: 5px; animation: pulse 1.2s infinite; }
|
||||
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
|
||||
.live-phase { font-weight: 600; font-size: 14px; color: #1e40af; margin-bottom: 4px; }
|
||||
.live-detail { font-size: 13px; color: #374151; }
|
||||
.live-reason { font-size: 12px; color: #6b7280; margin-top: 4px; }
|
||||
.detail-steps-head { font-size: 14px; font-weight: 600; margin: 18px 0 10px; }
|
||||
.detail-steps { display: flex; flex-direction: column; gap: 8px; }
|
||||
.step-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; background: #fff; }
|
||||
.step-card .step-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
|
||||
.step-num { background: #f3f4f6; color: #374151; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
|
||||
.step-action { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: #dbeafe; color: #1e40af; }
|
||||
.step-action.assert { background: #fef3c7; color: #92400e; }
|
||||
.step-action.click { background: #dcfce7; color: #166534; }
|
||||
.step-action.fill { background: #ede9fe; color: #5b21b6; }
|
||||
.step-action.fail { background: #fee2e2; color: #991b1b; }
|
||||
.step-target { font-family: ui-monospace, monospace; font-size: 12px; color: #374151; background: #f9fafb; padding: 2px 8px; border-radius: 6px; }
|
||||
.step-result { margin-left: auto; font-size: 12px; font-weight: 600; }
|
||||
.step-result.ok { color: #16a34a; }
|
||||
.step-result.bad { color: #dc2626; }
|
||||
.step-reason { font-size: 12px; color: #6b7280; margin-bottom: 6px; }
|
||||
.step-shot img { max-width: 320px; border-radius: 8px; border: 1px solid #e5e7eb; display: block; margin-top: 6px; cursor: zoom-in; }
|
||||
.step-detail { font-size: 12px; color: #374151; }
|
||||
.step-time { font-size: 11px; color: #9ca3af; margin-left: 8px; }
|
||||
@@ -46,6 +46,33 @@
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="detail-modal" class="modal hidden">
|
||||
<div class="modal-body detail-body">
|
||||
<div class="modal-head">
|
||||
<span id="detail-title">任务详情</span>
|
||||
<span>
|
||||
<button id="detail-report-btn" class="btn small hidden">📄 完整报告</button>
|
||||
<button id="detail-stop-btn" class="btn small danger hidden">⏹ 停止</button>
|
||||
<button id="detail-close" class="btn small">关闭</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="detail-content">
|
||||
<div class="detail-meta" id="detail-meta"></div>
|
||||
<div class="live-bar hidden" id="live-bar">
|
||||
<span class="live-dot"></span>
|
||||
<div class="live-info">
|
||||
<div class="live-phase" id="live-phase"></div>
|
||||
<div class="live-detail" id="live-detail"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-steps-head">步骤日志</div>
|
||||
<div class="detail-steps" id="detail-steps">
|
||||
<div class="empty">加载中...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="report-modal" class="modal hidden">
|
||||
<div class="modal-body">
|
||||
<div class="modal-head"><span id="modal-title">测试报告</span><button id="modal-close" class="btn small">关闭</button></div>
|
||||
|
||||
+102
-3
@@ -40,8 +40,8 @@ async function loadTasks() {
|
||||
? `<button class="btn small" onclick="stopTask('${t.id}')">停止</button> `
|
||||
: '';
|
||||
const report = t.status === 'finished'
|
||||
? `<a class="report-link" href="#" onclick="openReport('${t.id}');return false;">查看报告</a>`
|
||||
: '—';
|
||||
? `<a class="report-link" href="#" onclick="openReport('${t.id}');return false;">报告</a>`
|
||||
: '';
|
||||
return `<tr>
|
||||
<td>${esc(t.id)}</td>
|
||||
<td>${esc(t.url)}</td>
|
||||
@@ -50,7 +50,7 @@ async function loadTasks() {
|
||||
<td><span class="result ${esc(t.result)}">${RESULT_MAP[t.result] || esc(t.result)}</span></td>
|
||||
<td>${t.steps || 0}</td>
|
||||
<td>${esc(t.created)}</td>
|
||||
<td>${ops}${report}</td>
|
||||
<td><button class="btn small" onclick="openDetail('${t.id}')">详情</button> ${ops}${report}</td>
|
||||
</tr>`;
|
||||
}).join('');
|
||||
} catch (e) {
|
||||
@@ -70,6 +70,105 @@ function openReport(tid) {
|
||||
$('#report-modal').classList.remove('hidden');
|
||||
}
|
||||
|
||||
/* ========== 任务详情 ========== */
|
||||
let detailTid = null;
|
||||
let detailTimer = null;
|
||||
|
||||
function openDetail(tid) {
|
||||
detailTid = tid;
|
||||
$('#detail-title').textContent = `任务详情 - ${tid}`;
|
||||
$('#detail-steps').innerHTML = '<div class="empty">加载中...</div>';
|
||||
$('#detail-modal').classList.remove('hidden');
|
||||
refreshDetail();
|
||||
detailTimer = setInterval(refreshDetail, 2500);
|
||||
}
|
||||
|
||||
function closeDetail() {
|
||||
detailTid = null;
|
||||
if (detailTimer) { clearInterval(detailTimer); detailTimer = null; }
|
||||
$('#detail-modal').classList.add('hidden');
|
||||
}
|
||||
|
||||
const ACTION_LABEL = { click: '点击', fill: '填表', select: '选择', press: '按键',
|
||||
wait: '等待', scroll: '滚动', assert: '断言', screenshot: '截图', done: '完成', fail: '失败' };
|
||||
|
||||
async function refreshDetail() {
|
||||
if (!detailTid) return;
|
||||
let t;
|
||||
try {
|
||||
const r = await fetch(API + `/api/tasks/${detailTid}`);
|
||||
t = await r.json();
|
||||
} catch (e) { return; }
|
||||
|
||||
// 元信息
|
||||
const done = t.status === 'finished' || t.status === 'stopped';
|
||||
$('#detail-meta').innerHTML = `
|
||||
<div class="m-item"><b>目标网址</b><span>${esc(t.url)}</span></div>
|
||||
<div class="m-item"><b>测试目标</b><span>${esc(t.goal)}</span></div>
|
||||
<div class="m-item"><b>状态</b><span><span class="status ${esc(t.status)}">${STATUS_MAP[t.status] || esc(t.status)}</span> / <span class="result ${esc(t.result)}">${RESULT_MAP[t.result] || esc(t.result)}</span></span></div>
|
||||
<div class="m-item"><b>步骤</b><span>${t.steps || 0} / ${t.max_steps}</span></div>
|
||||
<div class="m-item"><b>创建时间</b><span>${esc(t.created)}</span></div>
|
||||
${t.finished ? `<div class="m-item"><b>结束时间</b><span>${esc(t.finished)}</span></div>` : ''}
|
||||
`;
|
||||
|
||||
// 实时状态条
|
||||
const cur = t.current;
|
||||
const liveBar = $('#live-bar');
|
||||
if (!done && cur) {
|
||||
liveBar.classList.remove('hidden');
|
||||
$('#live-phase').textContent = `步骤 ${cur.step || '-'}: ${cur.phase || ''}` +
|
||||
(cur.elapsed ? `（已运行 ${cur.elapsed}s）` : '');
|
||||
let d = cur.detail || '';
|
||||
if (cur.reason) d += `<div class="live-reason">💡 ${esc(cur.reason)}</div>`;
|
||||
$('#live-detail').innerHTML = esc(d);
|
||||
} else {
|
||||
liveBar.classList.add('hidden');
|
||||
}
|
||||
|
||||
// 按钮
|
||||
$('#detail-report-btn').classList.toggle('hidden', !done || t.result === 'error');
|
||||
$('#detail-stop-btn').classList.toggle('hidden', done);
|
||||
|
||||
// 步骤列表
|
||||
const steps = t.steps_log || [];
|
||||
if (!steps.length) {
|
||||
$('#detail-steps').innerHTML = '<div class="empty">还没有步骤记录，AI 正在准备...</div>';
|
||||
} else {
|
||||
$('#detail-steps').innerHTML = steps.map(s => {
|
||||
const act = s.action || '';
|
||||
const actCls = ['assert','click','fill','fail'].includes(act) ? act : '';
|
||||
const shot = s.screenshot
|
||||
? `<div class="step-shot"><img src="${API}/api/tasks/${detailTid}/screenshot/${esc(s.screenshot)}" loading="lazy" onclick="window.open(this.src)"></div>`
|
||||
: '';
|
||||
const resCls = s.result === 'ok' ? 'ok' : (s.result === 'fail' || s.result === 'error' ? 'bad' : '');
|
||||
return `<div class="step-card">
|
||||
<div class="step-top">
|
||||
<span class="step-num">#${s.n}</span>
|
||||
<span class="step-action ${actCls}">${ACTION_LABEL[act] || act}</span>
|
||||
${s.target ? `<span class="step-target">${esc(s.target)}${s.value ? ' ' + esc(s.value) : ''}</span>` : ''}
|
||||
<span class="step-result ${resCls}">${esc(s.result)}</span>
|
||||
<span class="step-time">${esc(s.ts || '')}</span>
|
||||
</div>
|
||||
${s.reason ? `<div class="step-reason">💡 ${esc(s.reason)}</div>` : ''}
|
||||
${s.detail ? `<div class="step-detail">${esc(s.detail)}</div>` : ''}
|
||||
${shot}
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// 结束后停止轮询
|
||||
if (done) { if (detailTimer) { clearInterval(detailTimer); detailTimer = null; } }
|
||||
}
|
||||
|
||||
$('#detail-close').onclick = closeDetail;
|
||||
$('#detail-modal').onclick = e => { if (e.target === $('#detail-modal')) closeDetail(); };
|
||||
$('#detail-stop-btn').onclick = async () => {
|
||||
if (!detailTid || !confirm('确定停止该任务？')) return;
|
||||
await fetch(API + `/api/tasks/${detailTid}/stop`, { method: 'POST' });
|
||||
refreshDetail(); loadTasks();
|
||||
};
|
||||
$('#detail-report-btn').onclick = () => { if (detailTid) openReport(detailTid); };
|
||||
|
||||
$('#modal-close').onclick = () => $('#report-modal').classList.add('hidden');
|
||||
$('#report-modal').onclick = e => { if (e.target === $('#report-modal')) $('#report-modal').classList.add('hidden'); };
|
||||
|
||||
|
||||
Reference in New Issue
Block a user