feat(web): 靶子显示友好名 + 支持连打次数
- 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
+202
-96
@@ -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 = {};
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user