yml/hello_js_reverse_skill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): 靶子显示友好名 + 支持连打次数

Browse Source 
- targets.py 增加 label 字段（1ms 签到 / mliev 登录），下拉框、说明、历史表统一用友好名
- POST /api/jobs 支持 count(1~20)：一次任务连打 N 发，发间自动按靶子频控节流、可取消
- 每发结果记入 stats.rounds，EVT_VERIFY 带 round，结果区展示「每发结果（通过 x/y）」彩色一览
- 滑块不再生成标注图（红圈+序号只表达点击顺序，对滑块是误导）
- 观测台 README 补齐启动/后台运行/端口占用/自检说明
This commit is contained in:
yml2213
2026-10-15 11:20:24 +08:00
parent 99565f65f0
commit 5c4ff8c4a1
8 changed files with 534 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tcaptcha/web/static/app.js
+202 -96
View File
@@ -4,6 +4,9 @@
* POST /api/jobs 建任务，拿 job_id
* GET /api/jobs/{id}/events SSE 事件流（服务端推 event.to_dict()）
* 事件类型由后端 tcaptcha/web/events.py 的 EVT_* 定义，这里按 data.type 分派。
*
* 布局要点：图片**不铺满容器**——底图/标注图限高缩略、提示图小缩略，
* 点任意图进 lightbox 看原始尺寸。否则 672x480 的图会把右栏撑成长条。
*/
'use strict';
@@ -11,15 +14,22 @@
const $ = (id) => document.getElementById(id);
const EC_MEANING = {
0: { text: '通过', cls: 'ec0' },
50: { text: '答案被否', cls: 'ec50' },
9: { text: '答案被否', cls: 'ec50' },
12: { text: '包级拒答', cls: 'ec12' },
0: { text: '通过', cls: 'ec0' },
50: { text: '答案被否', cls: 'ec50' },
9: { text: '答案被否', cls: 'ec50' },
12: { text: '包级拒答', cls: 'ec12' },
};
const KIND_LABEL = {
icon_click: '图标点选',
text_click: '文字点选',
slider: '滑块',
unknown: '未知',
};
function ecInfo(ec) {
if (ec === null || ec === undefined || ec === '') return { text: '—', cls: 'ecother' };
return EC_MEANING[Number(ec)] || { text: '未知', cls: 'ecother' };
if (ec === null || ec === undefined || ec === '') return { text: '—', cls: 'other' };
return EC_MEANING[Number(ec)] || { text: '未知', cls: 'other' };
}
function hhmmss(ts) {
@@ -27,9 +37,21 @@ function hhmmss(ts) {
return d.toTimeString().slice(0, 8);
}
function fmtMs(ms) {
if (ms === null || ms === undefined) return '—';
return ms >= 1000 ? (ms / 1000).toFixed(1) + 's' : ms + 'ms';
}
function el(tag, cls, text) {
const e = document.createElement(tag);
if (cls) e.className = cls;
if (text !== undefined) e.textContent = text;
return e;
}
let state = {
targets: [], kinds: [], currentJob: null, es: null,
cooldownUntil: 0, cards: {}, lastResult: null,
targets: [], currentJob: null, es: null,
cooldownUntil: 0, cards: {},
};
/* ------------------------------------------------------------------ 启动 */
@@ -37,17 +59,17 @@ async function boot() {
await loadTargets();
await loadHistory();
setInterval(tickCooldown, 1000);
$('target').onchange = () => renderNote();
$('target').onchange = renderNote;
$('start').onclick = startJob;
$('cancel').onclick = cancelJob;
setupLightbox();
}
async function loadTargets() {
const r = await fetch('/api/targets').then((x) => x.json());
state.targets = r.targets;
state.kinds = r.kinds;
$('target').innerHTML = r.targets
.map((t) => `<option value="${t.key}">${t.key}　aid=${t.aid}（最小间隔 ${t.min_interval}s）</option>`)
.map((t) => `<option value="${t.key}">${t.label || t.key}（最小间隔 ${t.min_interval}s）</option>`)
.join('');
renderNote();
applyCooldown(r.cooldown);
@@ -55,7 +77,7 @@ async function loadTargets() {
function renderNote() {
const t = state.targets.find((x) => x.key === $('target').value);
$('targetNote').textContent = t ? `【${t.key}】${t.note}` : '';
$('targetNote').textContent = t ? `【${t.label || t.key}】${t.note}` : '';
}
function applyCooldown(cd) {
@@ -65,30 +87,27 @@ function applyCooldown(cd) {
function tickCooldown() {
const left = Math.ceil((state.cooldownUntil - Date.now()) / 1000);
const el = $('cooldown');
const elCD = $('cooldown');
if (left > 0) {
el.textContent = `频控冷却 ${left}s`;
el.className = 'cooldown';
elCD.textContent = `频控冷却 ${left}s`;
elCD.className = 'cooldown';
$('start').disabled = true;
} else {
el.textContent = '可发';
el.className = 'cooldown ready';
elCD.textContent = '可发';
elCD.className = 'cooldown ready';
$('start').disabled = false;
}
}
/* ------------------------------------------------------------------ 任务 */
async function startJob() {
const body = {
target: $('target').value,
kind: $('kind').value,
max_retries: 2,
max_refreshes: 20,
};
const count = Math.max(1, Math.min(20, parseInt($('count').value, 10) || 1));
$('count').value = count; // 越界输入拉回合法范围
const body = { target: $('target').value, kind: $('kind').value, count,
max_retries: 2, max_refreshes: 20 };
resetView();
const job = await fetch('/api/jobs', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body),
}).then((r) => r.json());
subscribe(job.id);
@@ -100,17 +119,19 @@ function subscribe(jobId) {
$('jobId').textContent = jobId;
setState('pending');
$('cancel').disabled = false;
markActiveRow(jobId);
const es = new EventSource(`/api/jobs/${jobId}/events?since=0`);
es.onmessage = (e) => {
let evt;
try { evt = JSON.parse(e.data); } catch (err) { return; }
onEvent(evt);
if (evt.type === 'job.finished' || evt.type === 'job.error') {
es.close(); // 关键：必须主动关闭，否则 EventSource 会自动重连
es.close(); // 必须主动关，否则 EventSource 会自动重连
if (state.es === es) state.es = null;
}
};
es.onerror = () => { /* 断线时 EventSource 自动重连并带 Last-Event-ID 续传 */ };
es.onerror = () => { /* 断线时自动重连并带 Last-Event-ID 续传 */ };
state.es = es;
}
@@ -126,23 +147,23 @@ function onEvent(evt) {
switch (type) {
case 'job.started':
setState('running');
logRow('meta', `任务启动：靶子=${data.target} aid=${data.aid} 题型=${data.kind} 模式=${data.mode}`);
logRow('meta', `任务启动：靶子=${data.label || data.target} aid=${data.aid} 题型=${data.kind} 模式=${data.mode}`
+ (data.count > 1 ? ` 连打=${data.count} 发` : ''));
return;
case 'log':
logRow(data.level, data.message);
if (data.message && data.message.includes('频控节流')) setState('throttled');
return;
case 'challenge':
addChallengeCard(data);
logRow('meta', `抽到第 ${data.index} 题：${data.kind}　${data.instruction}`);
return;
case 'solve':
fillSolve(data);
return;
case 'telemetry':
logRow('meta', `collect：来源=${data.source} 长度=${data.collect_len} ` +
`段几何=${data.segments ? JSON.stringify(data.segments) : '—'}` +
(data.traj_points ? ` 轨迹点=${data.traj_points}` : '') +
(data.segments_err ? ` ⚠ ${data.segments_err}` : ''));
logRow('meta', `collect：来源=${data.source} 长度=${data.collect_len} 段几何=${data.segments ? JSON.stringify(data.segments) : '—'}`
+ (data.traj_points ? ` 轨迹点=${data.traj_points}` : '')
+ (data.segments_err ? ` ⚠ ${data.segments_err}` : ''));
return;
case 'verify':
renderVerify(data);
@@ -166,67 +187,94 @@ function setState(s) {
done: ['已完成', 'ok'], error: ['失败', 'err'], cancelled: ['已取消', 'warn'],
};
const [text, cls] = map[s] || [s, ''];
const el = $('state');
el.textContent = text;
el.className = 'badge ' + cls;
const b = $('state');
b.textContent = text;
b.className = 'badge ' + cls;
}
function logRow(level, message) {
const box = $('log');
const empty = box.querySelector('.empty');
if (empty) empty.remove(); // 首条事件时清掉占位
const atBottom = box.scrollTop + box.clientHeight >= box.scrollHeight - 30;
const row = document.createElement('div');
row.className = 'row ' + level;
row.innerHTML = `<span class="t">${hhmmss()}</span><span class="m"></span>`;
row.querySelector('.m').textContent = message;
const row = el('div', 'row ' + level);
row.appendChild(el('span', 't', hhmmss()));
row.appendChild(el('span', 'm', message));
box.appendChild(row);
if (atBottom) box.scrollTop = box.scrollHeight;
}
/* ------------------------------------------------------------ 图片卡片 */
/* ------------------------------------------------------------ 题目卡片 */
function addChallengeCard(d) {
const wrap = $('images');
const card = document.createElement('div');
card.className = 'shot';
const imgs = [];
if (d.bg_url) imgs.push(`<img src="${d.bg_url}" alt="底图">`);
if (d.prompt_url) imgs.push(`<img src="${d.prompt_url}" alt="提示图">`);
card.innerHTML =
`<div class="cap"><span>第 ${d.index} 题 · ${d.kind}</span>
<span class="muted">${d.instruction || ''}</span></div>
<div class="pair">${imgs.join('')}</div>
<div class="pts" data-pts>求解中…</div>`;
wrap.prepend(card); // 最新的题放最上面
const wrap = $('challenges');
const hint = wrap.querySelector('.empty-hint');
if (hint) hint.remove();
const card = el('div', 'challenge');
const head = el('div', 'ch-head');
head.appendChild(el('span', 'pill', '#' + d.index));
head.appendChild(el('span', 'kind', KIND_LABEL[d.kind] || d.kind));
if (d.instruction) head.appendChild(el('span', 'inst', d.instruction));
card.appendChild(head);
const media = el('div', 'ch-media');
if (d.bg_url) media.appendChild(figure(d.bg_url, '底图', ''));
if (d.annotated_url) media.appendChild(figure(d.annotated_url, '标注图（1/2/3 = 点击顺序）', ''));
if (d.prompt_url) media.appendChild(figure(d.prompt_url, '提示图', 'prompt'));
card.appendChild(media);
card.appendChild(el('div', 'ch-meta', '求解中…'));
wrap.prepend(card); // 最新的题放最上面
state.cards[d.index] = card;
}
/** 一张可点放的缩略图。CSS 限高，原始尺寸靠 lightbox 看。 */
function figure(src, caption, extraCls) {
const fig = el('figure', 'thumb' + (extraCls ? ' ' + extraCls : ''));
const img = el('img');
img.src = src;
img.alt = caption;
img.onclick = () => openLightbox(src);
fig.appendChild(img);
fig.appendChild(el('figcaption', '', caption));
return fig;
}
function fillSolve(d) {
const card = state.cards[d.index];
if (!card) return;
const offs = (d.off_px || []).map((v) => (v === null ? '—' : v + 'px')).join(' / ');
card.querySelector('[data-pts]').textContent =
`点位（按点击顺序）: ${JSON.stringify(d.points)}　离图标中心: ${offs}`;
if (d.annotated_url) {
const box = card.querySelector('.pair');
const img = document.createElement('img');
img.src = d.annotated_url;
img.alt = '标注图';
box.appendChild(img);
// 标注图是 solve 时才生成的，补插到「底图之后、提示图之前」。
// 判重用 data 标记（不能用 nth-child —— 提示图也排第 2，会误判已存在）。
const media = card.querySelector('.ch-media');
if (d.annotated_url && media && !media.querySelector('img[data-annotated]')) {
const fig = figure(d.annotated_url, '标注图（1/2/3 = 点击顺序）', '');
fig.querySelector('img').dataset.annotated = '1';
const promptFig = media.querySelector('.thumb.prompt');
media.insertBefore(fig, promptFig || null);
}
if (d.note) logRow('meta', `求解结论: ${d.note}`);
const meta = card.querySelector('.ch-meta');
if (!meta) return;
const offs = (d.off_px || []).map((v) => (v === null ? '—' : v + 'px'));
const measurable = offs.length && offs.some((v) => v !== '—');
meta.replaceChildren(
document.createTextNode(`点位（按点击顺序）：${JSON.stringify(d.points)}`),
measurable
? el('span', '', `　离图标中心：${offs.join(' / ')}`)
: el('span', 'warn', '　（滑块的答案是缺口位置，不适用“离图标中心”量尺）'),
);
if (d.note) logRow('meta', `求解结论：${d.note}`);
}
/* ------------------------------------------------------------ 结果渲染 */
function renderVerify(d) {
const info = ecInfo(d.errorCode);
state.lastResult = d;
$('result').innerHTML = `
<div class="card">
<div class="kv"><div class="k">errorCode</div>
<div class="v ${info.cls}">${d.errorCode ?? '—'}　<span style="font-size:12px">${info.text}</span></div></div>
<div class="kv"><div class="k">耗时</div><div class="v">${fmtMs(d.elapsed_ms)}</div></div>
<div class="kv"><div class="k">randstr</div><div class="v">${d.randstr || '—'}</div></div>
<div class="kv"><div class="k">ticket</div><div class="v">${d.ticket || '—'}</div></div>
</div>`;
const grid = el('div', 'kv-grid');
grid.appendChild(kv(d.round > 1 ? `第${d.round}发 errorCode` : 'errorCode',
String(d.errorCode ?? '—'), info.cls, info.text));
grid.appendChild(kv('耗时', fmtMs(d.elapsed_ms), '', ''));
grid.appendChild(kv('randstr', d.randstr || '—', '', ''));
grid.appendChild(kvWide('ticket', d.ticket || '—'));
$('result').replaceChildren(grid);
}
function finishJob(d) {
@@ -234,46 +282,93 @@ function finishJob(d) {
setState(d.success ? 'done' : (info.cls === 'ec12' ? 'error' : 'warn'));
$('cancel').disabled = true;
const st = d.stats || {};
$('result').insertAdjacentHTML('beforeend', `
<div class="card">
<div class="kv"><div class="k">结果</div><div class="v ${info.cls}">${d.success ? '成功' : (d.errorCode ?? '失败')}</div></div>
<div class="kv"><div class="k">抽题次数</div><div class="v">${st.challenges ?? '—'}</div></div>
<div class="kv"><div class="k">点位总数</div><div class="v">${st.points ?? '—'}</div></div>
<div class="kv"><div class="k">平均偏离中心</div><div class="v">${st.mean_offset_px ?? '—'}${st.mean_offset_px ? 'px' : ''}</div></div>
</div>`);
const grid = document.querySelector('#result .kv-grid') || el('div', 'kv-grid');
if (!grid.parentNode) $('result').replaceChildren(grid);
grid.appendChild(kv('结果', d.success ? '成功' : (d.errorCode ?? '失败'), info.cls, ''));
// 连打时展示每发的 errorCode 一览（0 绿 / 50/9 黄 / 12 红 / 其余灰）
if (st.count > 1 && Array.isArray(st.rounds) && st.rounds.length) {
const seq = st.rounds.map((r) => {
const ic = ecInfo(r.errorCode);
return `<span class="round-ec ${ic.cls}">#${r.round}:${r.errorCode ?? '—'}</span>`;
}).join(' ');
const box = el('div', 'kv wide');
box.appendChild(el('div', 'k', `每发结果（通过 ${st.ok}/${st.rounds.length}）`));
const val = el('div', 'v');
val.innerHTML = seq;
box.appendChild(val);
grid.appendChild(box);
}
grid.appendChild(kv('抽题次数', String(st.challenges ?? '—'), '', ''));
grid.appendChild(kv('点位总数', String(st.points ?? '—'), '', ''));
grid.appendChild(kv('平均偏离中心',
st.mean_offset_px ? st.mean_offset_px + 'px' : '—', '', ''));
if (d.error) logRow('WARNING', d.error);
// 本地起冷却（服务端也会节流，这里只是让按钮状态立刻正确）
const t = state.targets.find((x) => x.key === $('target').value);
if (t) state.cooldownUntil = Date.now() + t.min_interval * 1000;
tickCooldown();
loadHistory();
}
function fmtMs(ms) {
if (ms === null || ms === undefined) return '—';
return ms >= 1000 ? (ms / 1000).toFixed(1) + 's' : ms + 'ms';
function kv(k, v, cls, sub) {
const box = el('div', 'kv');
box.appendChild(el('div', 'k', k));
const val = el('div', 'v' + (cls ? ' ' + cls : ''), v);
if (sub) val.appendChild(el('small', '', ' ' + sub));
box.appendChild(val);
return box;
}
/** 长文本卡（ticket 等）：占整行 + 单行截断，点击复制全文。 */
function kvWide(k, v) {
const box = el('div', 'kv wide');
box.title = v === '—' ? '' : '点击复制';
box.appendChild(el('div', 'k', k));
const val = el('div', 'v trunc' + (v === '—' ? ' other' : ''), v);
box.appendChild(val);
if (v !== '—') {
box.style.cursor = 'copy';
box.onclick = async () => {
try { await navigator.clipboard.writeText(v); } catch (err) { /* 无剪贴板权限时静默 */ }
box.title = '已复制 ✓';
setTimeout(() => { box.title = '点击复制'; }, 1200);
};
}
return box;
}
/* ------------------------------------------------------------ 历史任务 */
async function loadHistory() {
const r = await fetch('/api/jobs').then((x) => x.json());
const tb = $('history').querySelector('tbody');
tb.innerHTML = '';
tb.replaceChildren();
for (const j of r.jobs) {
const ec = j.result ? j.result.errorCode : null;
const info = ecInfo(ec);
const tr = document.createElement('tr');
tr.innerHTML = `
<td class="mono muted">${hhmmss(j.created_at)}</td>
<td>${j.target}</td>
<td class="mono">${j.params.kind}</td>
<td class="mono ${info.cls}">${ec ?? '—'} <span class="muted" style="font-size:11px">${info.text}</span></td>
<td class="mono">${fmtMs(j.result ? j.result.elapsed_ms : null)}</td>
<td class="mono">${(j.result && j.result.success) ? '✓' : '—'}</td>
<td class="mono muted">${(j.result && j.result.ticket) ? j.result.ticket.slice(0, 14) + '…' : '—'}</td>`;
const t = state.targets.find((x) => x.key === j.target);
const tr = el('tr');
tr.dataset.job = j.id;
tr.appendChild(td(hhmmss(j.created_at), 'mono muted'));
tr.appendChild(td(t ? (t.label || t.key) : j.target, ''));
tr.appendChild(td(j.params.kind, 'mono'));
tr.appendChild(td(`${ec ?? '—'} ${info.text}`, 'mono ' + info.cls));
tr.appendChild(td(fmtMs(j.result ? j.result.elapsed_ms : null), 'mono'));
tr.appendChild(td((j.result && j.result.success) ? '✓' : '—', 'mono'));
tr.appendChild(td((j.result && j.result.ticket) ? j.result.ticket : '—', 'mono muted'));
tr.onclick = () => replay(j.id);
tb.appendChild(tr);
}
if (state.currentJob) markActiveRow(state.currentJob);
}
function td(text, cls) {
const c = el('td', cls, text);
return c;
}
function markActiveRow(jobId) {
document.querySelectorAll('#history tbody tr').forEach((tr) => {
tr.classList.toggle('active', tr.dataset.job === jobId);
});
}
/** 点历史行 → 重新订阅该任务的事件流，把整个过程重放一遍。 */
@@ -284,10 +379,21 @@ function replay(jobId) {
$('cancel').disabled = true;
}
/* ------------------------------------------------------------- lightbox */
function setupLightbox() {
const lb = $('lightbox');
lb.onclick = closeLightbox;
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeLightbox(); });
}
function openLightbox(src) { $('lightboxImg').src = src; $('lightbox').classList.add('show'); }
function closeLightbox() { $('lightbox').classList.remove('show'); }
/* ------------------------------------------------------------------ 复位 */
function resetView() {
$('log').innerHTML = '';
$('images').innerHTML = '';
$('result').innerHTML = '<p class="muted">等待事件…</p>';
$('log').replaceChildren(el('div', 'empty', '等待事件…'));
$('challenges').replaceChildren(el('p', 'empty-hint', '抽到题目后，底图与标注图会出现在这里。'));
$('result').replaceChildren(el('p', 'empty-hint', '等待事件…'));
state.cards = {};
}
tcaptcha/web/static/index.html
+50 -29
View File
@@ -13,18 +13,20 @@
<span class="sub">腾讯天御验证码 · 纯协议求解 · 实时观测</span>
</div>
<div class="controls">
<label>靶子
<select id="target"></select>
</label>
<label>靶子 <select id="target"></select></label>
<label>题型
<select id="kind">
<option value="any">any　遇到啥过啥（推荐）</option>
<option value="icon">icon　图标点选 2408</option>
<option value="text">text　文字点选 2404</option>
<option value="slider">slider　滑块 2401/2402</option>
<option value="any">any · 遇到啥过啥</option>
<option value="icon">icon · 图标点选 2408</option>
<option value="text">text · 文字点选 2404</option>
<option value="slider">slider · 滑块 2401/2402</option>
</select>
</label>
<button id="start" class="primary">开始一发</button>
<label>次数
<input id="count" type="number" min="1" max="20" step="1" value="1"
title="连打次数；发与发之间按靶子频控自动节流，可随时取消">
</label>
<button id="start" class="primary">开始</button>
<button id="cancel" disabled>取消</button>
<span id="cooldown" class="cooldown"></span>
</div>
@@ -32,30 +34,44 @@
</header>
<main>
<section class="panel">
<h2>执行轨迹 <span id="state" class="badge">空闲</span>
<span id="jobId" class="mono muted"></span>
</h2>
<div id="log" class="log"></div>
</section>
<!-- 左栏：执行过程 -->
<div class="col">
<section class="panel">
<h2>执行轨迹 <span id="state" class="badge">空闲</span>
<span class="right mono muted" id="jobId"></span>
</h2>
<div id="log" class="log"><div class="empty">还没有任务。</div></div>
</section>
<section class="panel">
<h2>题目 / 点位 / 结果</h2>
<div id="result" class="result"><p class="muted">还没有任务。选好靶子与题型，点「开始一发」。</p></div>
<div id="images" class="images"></div>
</section>
<section class="panel">
<h2>结果</h2>
<div id="result"><p class="empty-hint">选好靶子 / 题型 / 次数，点「开始」。</p></div>
</section>
</div>
<!-- 右栏：题目与点位 -->
<div class="col">
<section class="panel">
<h2>题目 / 点位 <span class="right muted" style="font-weight:400">点图片可放大</span></h2>
<div id="challenges"><p class="empty-hint">抽到题目后，底图与标注图会出现在这里（标注图上的 1/2/3 即点击顺序）。</p></div>
</section>
<section class="panel">
<h2>历史任务</h2>
<table id="history">
<colgroup>
<col class="c-time"><col class="c-target"><col class="c-kind">
<col class="c-ec"><col class="c-ms"><col class="c-ok"><col>
</colgroup>
<thead>
<tr><th>时间</th><th>靶子</th><th>题型</th><th>errorCode</th><th>耗时</th><th>结果</th><th>ticket</th></tr>
</thead>
<tbody></tbody>
</table>
</section>
</div>
</main>
<section class="panel wide">
<h2>历史任务</h2>
<table id="history">
<thead>
<tr><th>时间</th><th>靶子</th><th>题型</th><th>errorCode</th><th>耗时</th><th>点位</th><th>ticket</th></tr>
</thead>
<tbody></tbody>
</table>
</section>
<footer class="legend">
<span><b class="ec0">0</b> 通过</span>
<span><b class="ec50">50 / 9</b> 答案被否（点位或目标错）</span>
@@ -63,6 +79,11 @@
<span class="muted">靶子带实测最小间隔，后端会强制节流</span>
</footer>
<div id="lightbox" class="lightbox">
<span class="tip">点击任意处 / Esc 关闭</span>
<img id="lightboxImg" alt="放大查看">
</div>
<script src="/static/app.js"></script>
</body>
</html>
tcaptcha/web/static/style.css
+125 -55
View File
@@ -1,7 +1,7 @@
:root {
--bg: #0f1115;
--panel: #171a21;
--panel-2: #1e222b;
--bg: #0e1014;
--panel: #161920;
--panel-2: #1d212a;
--line: #2a2f3a;
--fg: #e6e9ef;
--muted: #8b93a3;
@@ -10,105 +10,175 @@
--err: #e05a5a;
--accent: #4c8dff;
--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--radius: 10px;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--fg);
font: 14px/1.55 -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
padding: 16px 18px 40px;
font: 13px/1.5 -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
padding: 12px 14px 18px;
}
header { margin-bottom: 14px; }
.brand { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
h1 { font-size: 18px; margin: 0; letter-spacing: .3px; }
h2 { font-size: 13px; margin: 0 0 10px; color: var(--muted); font-weight: 600;
text-transform: uppercase; letter-spacing: .6px;
display: flex; align-items: center; gap: 10px; }
.sub { color: var(--muted); font-size: 12px; }
/* ---------------------------------------------------------------- 顶栏 */
header { margin-bottom: 10px; }
.brand { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
h1 { font-size: 15px; margin: 0; letter-spacing: .2px; }
.sub { color: var(--muted); font-size: 11.5px; }
.controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.controls label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.controls { display: flex; align-items: center; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.controls label { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
select, button {
background: var(--panel-2); color: var(--fg);
border: 1px solid var(--line); border-radius: 7px;
padding: 7px 11px; font-size: 13px; font-family: inherit;
padding: 6px 10px; font-size: 12.5px; font-family: inherit;
}
input[type="number"] {
background: var(--panel-2); color: var(--fg);
border: 1px solid var(--line); border-radius: 7px;
padding: 6px 8px; font-size: 12.5px; font-family: var(--mono);
width: 64px;
}
select { padding-right: 6px; }
button { cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.primary:disabled { background: var(--panel-2); color: var(--fg); border-color: var(--line); }
.note { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.cooldown { font-family: var(--mono); font-size: 12.5px; color: var(--warn); }
.cooldown { font-family: var(--mono); font-size: 12px; color: var(--warn); }
.cooldown.ready { color: var(--ok); }
.note { margin-top: 6px; font-size: 12px; color: var(--muted); }
main { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(420px, 1.2fr); gap: 14px; }
@media (max-width: 1080px) { main { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------------- 布局 */
main {
display: grid;
grid-template-columns: minmax(330px, 0.82fr) minmax(430px, 1.18fr);
gap: 12px;
align-items: start;
}
@media (max-width: 1000px) { main { grid-template-columns: 1fr; } }
.col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.panel {
background: var(--panel); border: 1px solid var(--line);
border-radius: 11px; padding: 13px 14px; margin-bottom: 14px;
border-radius: var(--radius); padding: 11px 12px; min-width: 0;
}
.panel.wide { margin-bottom: 14px; }
h2 {
font-size: 11.5px; margin: 0 0 9px; color: var(--muted); font-weight: 600;
text-transform: uppercase; letter-spacing: .6px;
display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
h2 .right { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
.badge {
font-size: 11px; padding: 2px 9px; border-radius: 999px;
font-size: 10.5px; padding: 1px 8px; border-radius: 999px;
background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
font-weight: 500; text-transform: none; letter-spacing: 0;
}
.badge.running { color: var(--accent); border-color: var(--accent); }
.badge.ok { color: var(--ok); border-color: var(--ok); }
.badge.warn { color: var(--warn); border-color: var(--warn); }
.badge.err { color: var(--err); border-color: var(--err); }
/* ---------------------------------------------------------------- 日志 */
.log {
font-family: var(--mono); font-size: 12px;
height: 460px; overflow-y: auto;
background: #0c0e12; border: 1px solid var(--line); border-radius: 8px;
padding: 9px 11px;
font-family: var(--mono); font-size: 11.5px;
height: clamp(220px, 40vh, 420px); overflow-y: auto;
background: #0a0c10; border: 1px solid var(--line); border-radius: 8px;
padding: 8px 10px; overscroll-behavior: contain;
}
.log .row { display: grid; grid-template-columns: 62px 1fr; gap: 9px; padding: 1px 0; }
.log .t { color: #5a6376; }
.log .m { white-space: pre-wrap; word-break: break-word; }
.log .row.INFO .m { color: #cdd4e0; }
.log .row { display: grid; grid-template-columns: 56px 1fr; gap: 8px; padding: .5px 0; }
.log .t { color: #4f5766; }
.log .m { white-space: pre-wrap; word-break: break-word; color: #cdd4e0; }
.log .row.WARNING .m { color: var(--warn); }
.log .row.ERROR .m { color: var(--err); }
.log .row.meta .m { color: var(--muted); font-style: italic; }
.log .empty { color: #4f5766; font-style: italic; }
.result { margin-bottom: 12px; }
.result .card {
display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
gap: 9px; margin-top: 9px;
/* ---------------------------------------------------------------- 结果 */
.kv-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 8px; align-items: start; /* 关键：不让少数卡片被拉满整列高 */
}
.result .kv {
background: var(--panel-2); border: 1px solid var(--line);
border-radius: 8px; padding: 8px 10px;
}
.result .kv .k { color: var(--muted); font-size: 11px; letter-spacing: .4px; }
.result .kv .v { font-family: var(--mono); font-size: 14px; margin-top: 3px; word-break: break-all; }
.kv { background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; min-width: 0; }
.kv .k { color: var(--muted); font-size: 10.5px; letter-spacing: .3px; }
.kv .v { font-family: var(--mono); font-size: 13px; margin-top: 2px; word-break: break-all; }
.kv.wide { grid-column: 1 / -1; } /* ticket 这类长文本占整行，避免撑高别的卡 */
.kv .v.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v.ec0 { color: var(--ok); } .v.ec50 { color: var(--warn); }
.v.ec12 { color: var(--err); } .v.ecother { color: var(--muted); }
.v.ec12 { color: var(--err); } .v.other { color: var(--muted); }
.v small { font-size: 11px; font-family: inherit; }
.images { display: grid; gap: 11px; }
.shot { background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 9px; }
.shot .cap { display: flex; justify-content: space-between; align-items: center;
font-size: 12px; color: var(--muted); margin-bottom: 7px; }
.shot img { width: 100%; border-radius: 6px; display: block; background: #000; }
.shot .pair { display: grid; grid-template-columns: 1fr; gap: 7px; }
.shot .pts { font-family: var(--mono); font-size: 11.5px; color: #9fb0cc; margin-top: 6px; }
/* ----------------------------------------------------------- 题目卡片 */
.challenge {
border: 1px solid var(--line); border-radius: 9px;
background: var(--panel-2); padding: 9px 10px; margin-bottom: 10px;
}
.challenge:last-child { margin-bottom: 0; }
.ch-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.pill {
font-family: var(--mono); font-size: 11px; padding: 1px 7px; border-radius: 5px;
background: #263043; color: #9db8e8;
}
.kind { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.inst { font-size: 12px; color: #cdd4e0; letter-spacing: .5px; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: 11px; letter-spacing: .4px; }
.ch-media { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.thumb { margin: 0; min-width: 0; }
.thumb img {
display: block; max-width: 100%; max-height: 250px; width: auto; height: auto;
border-radius: 6px; background: #000; cursor: zoom-in; border: 1px solid #000;
}
.thumb.prompt img { max-height: 56px; }
.thumb figcaption { font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.ch-meta { font-family: var(--mono); font-size: 11px; color: #9fb0cc; margin-top: 8px; word-break: break-word; }
.ch-meta .warn { color: var(--warn); }
.empty-hint { color: var(--muted); font-size: 12.5px; }
/* ---------------------------------------------------------------- 表格 */
table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 10.5px; letter-spacing: .3px; }
td.mono, .mono { font-family: var(--mono); }
tbody tr:hover { background: var(--panel-2); cursor: pointer; }
tbody tr.active { background: #1b2436; }
col.c-time { width: 76px; } col.c-target { width: 62px; } col.c-kind { width: 64px; }
col.c-ec { width: 108px; } col.c-ms { width: 64px; } col.c-ok { width: 54px; }
.legend { display: flex; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin-top: 6px; }
.legend b { font-family: var(--mono); padding: 1px 6px; border-radius: 5px; }
/* ------------------------------------------------------------- lightbox */
.lightbox {
position: fixed; inset: 0; z-index: 50; display: none;
background: rgba(0, 0, 0, .86); align-items: center; justify-content: center;
padding: 24px; cursor: zoom-out;
}
.lightbox.show { display: flex; }
.lightbox img {
max-width: 96vw; max-height: 92vh; border-radius: 8px;
box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
}
.lightbox .tip {
position: fixed; top: 12px; left: 50%; transform: translateX(-50%);
font-size: 12px; color: #cfd6e4; background: rgba(0, 0, 0, .5);
padding: 4px 12px; border-radius: 999px;
}
/* ---------------------------------------------------------------- 图例 */
.legend { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 11.5px; margin-top: 10px; }
.legend b { font-family: var(--mono); padding: 0 5px; border-radius: 4px; }
.ec0 { color: var(--ok); } .ec50 { color: var(--warn); } .ec12 { color: var(--err); }
.muted { color: var(--muted); }
/* 连打时「每发结果」一览里的彩色编号 */
.round-ec { padding: 0 4px; border-radius: 4px; background: rgba(255,255,255,.05); }
.round-ec.ec0 { color: var(--ok); }
.round-ec.ec50 { color: var(--warn); }
.round-ec.ec12 { color: var(--err); }
.round-ec.other { color: var(--muted); }