feat(HEL-546): 数据中枢 A/B/C 三方向落地为可用页面
- 基于第七版稳定基线(be647bb)重构 admin 前端为模块化架构：
tokens.css(设计token唯一来源) + shared.css(公共组件) + core.js(状态/API/事件总线/轮询/路由)
+ main.js(入口) + layouts/{flowline,ledger,strata}.{css,js}(三方向独立布局)
+ layouts/shared.js(三方向共用数据视图与操作绑定)
- 三个页面(A装配线/B值班台账/C地层剖面)通过 ?layout= 查询参数独立可达、可刷新、可前进后退导航，
共享登录态、真实后端数据(overview/sources/jobs/batches/datasets/audit)、错误处理与主题
- 六大板块(总览/数据源/调度任务/盘后发布/数据集/审计)在三个方向均可查看与操作(探测/触发/回滚/补数)
- 修正健康状态语义：CircuitBreaker closed/half_open/open 与适配器 ok/error/empty/unconfigured/unknown
统一归一化为 ok/warn/error/unconfigured/unknown 供三方向一致展示
- 事件驱动动效：A 水平接力光梭、B 行级高亮+实时调用跑马灯、C 纵向贯穿光点+分层标记；
统一使用 transform/opacity/WAAPI，避免 transition:all，支持 prefers-reduced-motion 静态降级
- 修复响应式布局在 1024/1280 断点因 CSS Grid 默认 min-width:auto 被内部宽表格撑爆轨道的问题
- 修复布局切换/前进后退时残留 setTimeout 回调在 unmount 后访问 null root 导致的报错(mounted 标志位+
safeTimeout+统一清理定时器)
- 自测：Playwright 全断点(1440/1280/1024)x 双主题矩阵截图、90 次连续布局切换+前进后退压力测试无报错、
探测/触发/回滚danger操作流程验证、reduced-motion 验证；后端 pytest 全量 133 用例通过，无回归
- 未改动:登录/鉴权契约、后端 API、'问天'冻结区、生产数据/权限
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
总工
co-authored by
Cursor
multica-agent
Cursor
multica-agent
parent
be647bbaba
commit
011ecc0d1a
@@ -0,0 +1,97 @@
|
||||
/* A · 装配线 Flowline —— 来源→加工→发布→审计 四工位水平因果链
|
||||
只写这个布局独有的排布；颜色/组件规则一律来自 tokens.css + shared.css。 */
|
||||
#fl-root { padding: var(--sp4); max-width: 1584px; margin: 0 auto; }
|
||||
|
||||
#fl-band { position: relative; padding: 14px 16px 18px; margin-bottom: 14px; overflow: hidden; }
|
||||
#fl-band .lane-labels { display: flex; }
|
||||
#fl-band .lane-labels span { flex: 1; }
|
||||
#fl-wire { position: relative; height: 1px; background: var(--line); margin: 22px 0 18px; }
|
||||
#fl-wire .chev { position: absolute; top: -8px; font-size: 13px; color: var(--t3); font-family: var(--font-mono); transform: translateX(-50%); }
|
||||
|
||||
#fl-lanes { display: grid; grid-template-columns: 2fr 1.15fr 1.05fr 0.85fr; gap: 14px; align-items: start; }
|
||||
/* 防止内部宽表格用 min-width:auto 撑爆 1fr 轨道，参见 ledger.css 同类注释。 */
|
||||
#fl-lanes > *, #fl-cols > * { min-width: 0; }
|
||||
#fl-srcCards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
|
||||
.fl-src-card { position: relative; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
|
||||
.fl-src-card .row { display: flex; align-items: center; gap: 8px; }
|
||||
.fl-src-card .name { font-size: 14px; font-weight: 600; color: var(--t1); }
|
||||
.fl-src-card .role { font-size: 11px; color: var(--t3); }
|
||||
.fl-src-card .grow { flex: 1; }
|
||||
.fl-src-card .lat { font-size: 12px; color: var(--t2); }
|
||||
.fl-src-card .cred { font-size: 11px; color: var(--t3); }
|
||||
.fl-src-card .lamps { display: flex; align-items: center; gap: 4px; }
|
||||
.fl-src-card .edge {
|
||||
position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--act);
|
||||
border-radius: 2px; opacity: 0; transition: opacity var(--dur-ui) var(--ease-out);
|
||||
}
|
||||
.fl-src-card .edge.err { background: var(--error); }
|
||||
|
||||
.fl-station { padding: 12px 14px; min-height: 150px; position: relative; transition: box-shadow var(--dur-ui) var(--ease-out); }
|
||||
.fl-station.pulse { box-shadow: 0 0 0 2px var(--action-soft) inset; }
|
||||
.fl-station .hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
|
||||
.fl-station .hd .nm { font-size: 13px; font-weight: 600; color: var(--t1); }
|
||||
.fl-station .hd .grow { flex: 1; }
|
||||
.fl-station .task { font-size: 12px; color: var(--t2); margin-bottom: 8px; }
|
||||
.fl-station .task b { color: var(--t1); font-weight: 600; }
|
||||
.fl-pbar { position: relative; height: 4px; border-radius: 2px; background: var(--bg2); overflow: hidden; margin-bottom: 6px; }
|
||||
.fl-pbar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--action); border-radius: 2px; transition: width var(--dur-ui) var(--ease-out); }
|
||||
.fl-station .queue { font-size: 12px; color: var(--t2); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
|
||||
.fl-miniruns { border-top: 1px solid var(--line-soft); padding-top: 6px; }
|
||||
.fl-miniruns .mr { display: flex; gap: 8px; font-size: 11px; line-height: 1.7; }
|
||||
.fl-miniruns .mr .id { color: var(--t3); width: 34px; }
|
||||
.fl-miniruns .mr .why { color: var(--error); }
|
||||
|
||||
.fl-gate .bignum { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
|
||||
.fl-gate .bignum .n { font-size: var(--fs-hero); font-weight: 600; color: var(--t1); display: inline-block; transition: transform var(--dur-ui) var(--ease-out); }
|
||||
.fl-gate .bignum .cap { font-size: 12px; color: var(--t3); }
|
||||
.fl-gate .latest { font-size: 12px; color: var(--t2); margin-bottom: 10px; }
|
||||
.fl-gate .valrow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t2); }
|
||||
|
||||
.fl-audit .al { font-size: 11px; line-height: 1.75; color: var(--t2); white-space: normal; word-break: break-all; }
|
||||
.fl-audit .al .dim { color: var(--t3); }
|
||||
.fl-audit .adiv { border-top: 1px solid var(--line-soft); margin: 6px 0; }
|
||||
|
||||
#fl-packet {
|
||||
position: absolute; width: 34px; height: 3px; border-radius: 2px; background: var(--packet);
|
||||
opacity: 0; pointer-events: none; z-index: 5; top: 0; left: 0;
|
||||
}
|
||||
|
||||
#fl-cols { display: grid; grid-template-columns: 1.15fr 1.1fr 1fr; gap: 14px; }
|
||||
.fl-col { padding: 12px 14px; }
|
||||
.fl-col .sec-label { display: block; margin-bottom: 8px; }
|
||||
.fl-col .sub-label { display: block; margin: 12px 0 4px; }
|
||||
#fl-callsTable td.res-ok { color: var(--t2); }
|
||||
#fl-callsTable td.res-err { color: var(--error); }
|
||||
#fl-callsFoot { margin-top: 8px; font-size: 11px; color: var(--t3); border-top: 1px solid var(--line-soft); padding-top: 8px; }
|
||||
.fl-newrow { transition: background var(--dur-ui) var(--ease-out); }
|
||||
.fl-newrow.flashin { background: var(--alive-soft); }
|
||||
|
||||
.fl-jobrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
|
||||
.fl-jobrow .jid { font-size: 12px; color: var(--t1); }
|
||||
.fl-jobrow .jti { font-size: 12px; color: var(--t2); }
|
||||
.fl-jobrow .jat { font-size: 11px; color: var(--t3); }
|
||||
.fl-jobrow .grow { flex: 1; }
|
||||
|
||||
#fl-col3 .toolrow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
|
||||
#fl-col3 .toolrow input {
|
||||
font-family: var(--font-mono); font-size: 12px; color: var(--t1); background: var(--bg2);
|
||||
border: 1px solid var(--line); border-radius: var(--r-chip); padding: 5px 8px; width: 96px; outline: none;
|
||||
}
|
||||
.fl-anom { margin-top: 10px; }
|
||||
tr.fl-rowflash td { transition: background var(--dur-ui) var(--ease-out); }
|
||||
tr.fl-rowflash.on td { background: var(--alive-soft); }
|
||||
|
||||
/* ---------------- 1280 ---------------- */
|
||||
@media (max-width: 1280px) {
|
||||
#fl-lanes { grid-template-columns: 1fr; }
|
||||
#fl-srcCards { grid-template-columns: 1fr 1fr; }
|
||||
#fl-cols { grid-template-columns: 1fr 1fr; }
|
||||
#fl-col3 { grid-column: 1 / -1; }
|
||||
}
|
||||
/* ---------------- 1024 ---------------- */
|
||||
@media (max-width: 1100px) {
|
||||
#fl-root { padding: var(--sp3); }
|
||||
#fl-srcCards { grid-template-columns: 1fr; }
|
||||
#fl-cols { grid-template-columns: 1fr; }
|
||||
.fl-src-card .role, .fl-src-card .cred { display: none; }
|
||||
}
|
||||
@@ -0,0 +1,300 @@
|
||||
"use strict";
|
||||
/* ==========================================================================
|
||||
A · 装配线 Flowline —— 来源 → 加工 → 发布 → 审计 四工位水平因果链。
|
||||
数据卡是线上工件，真实事件沿发丝导线从触发的那一工位接力到下一工位。
|
||||
========================================================================== */
|
||||
(function () {
|
||||
const C = window.Core, S = window.HubShared;
|
||||
const { $, esc, timeShort } = C;
|
||||
let root = null;
|
||||
let unsubs = [];
|
||||
let stationFlashTimers = {};
|
||||
let mounted = false;
|
||||
let pendingTimers = [];
|
||||
/* 布局随时可能被切走：任何跨阶段延时回调都必须先确认还挂载着，
|
||||
否则 unmount 之后残留的 setTimeout 会在 root=null 时报错。 */
|
||||
function safeTimeout(fn, ms) {
|
||||
const id = setTimeout(() => { if (mounted) fn(); }, ms);
|
||||
pendingTimers.push(id);
|
||||
return id;
|
||||
}
|
||||
|
||||
const SKELETON = `
|
||||
<div id="fl-root" class="page-shell">
|
||||
<section id="fl-band" class="card">
|
||||
<div class="lane-labels">
|
||||
<span class="sec-label">来源 SOURCES</span>
|
||||
<span class="sec-label">加工 PROCESS</span>
|
||||
<span class="sec-label">发布 PUBLISH</span>
|
||||
<span class="sec-label">审计 AUDIT</span>
|
||||
</div>
|
||||
<div id="fl-wire"><span class="chev" style="left:26%">›</span><span class="chev" style="left:57%">›</span><span class="chev" style="left:80%">›</span></div>
|
||||
<div id="fl-lanes">
|
||||
<div id="fl-srcCards"></div>
|
||||
<div id="fl-process" class="card fl-station" data-station="process">
|
||||
<div class="hd"><span class="nm">中枢处理</span><span class="grow"></span><span data-pct class="mono">-</span></div>
|
||||
<div id="fl-processBody"></div>
|
||||
</div>
|
||||
<div id="fl-publish" class="card fl-station fl-gate" data-station="publish">
|
||||
<div class="hd"><span class="nm">发布闸口</span><span class="grow"></span><span class="sec-label">GATE</span></div>
|
||||
<div id="fl-publishBody"></div>
|
||||
</div>
|
||||
<div id="fl-audit" class="card fl-station fl-audit" data-station="audit">
|
||||
<div class="hd"><span class="nm">审计末端</span></div>
|
||||
<div id="fl-auditBody"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="fl-packet"></div>
|
||||
</section>
|
||||
|
||||
<div id="fl-cols">
|
||||
<section id="fl-col1" class="card fl-col">
|
||||
<span class="sec-label">最近调用 RECENT CALLS</span>
|
||||
<div id="fl-callsTable"></div>
|
||||
<div id="fl-callsFoot"></div>
|
||||
</section>
|
||||
<section id="fl-col2" class="card fl-col">
|
||||
<span class="sec-label">调度任务 JOBS</span>
|
||||
<div id="fl-jobRows"></div>
|
||||
<span class="sec-label sub-label">最近运行 RUNS</span>
|
||||
<div id="fl-runsTable"></div>
|
||||
</section>
|
||||
<section id="fl-col3" class="card fl-col">
|
||||
<span class="sec-label">盘后发布 RELEASE</span>
|
||||
<div class="toolrow">
|
||||
<input id="fl-rel-date" value="" spellcheck="false" />
|
||||
<button type="button" class="btn" id="fl-rel-load">查看</button>
|
||||
<button type="button" class="btn danger" id="fl-rel-backfill">补数</button>
|
||||
</div>
|
||||
<span class="sec-label sub-label">当前映射 MAPPING</span>
|
||||
<div id="fl-pubTable"></div>
|
||||
<div id="fl-anom" class="fl-anom"></div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
function srcCardHtml(item) {
|
||||
const health = item.health || {};
|
||||
const link = item._link || C.linkState(health);
|
||||
const cred = item.credential || {};
|
||||
const credText = cred.configured ? `已配置 · ${esc(cred.last4 || "****")}` : "未配置";
|
||||
return `
|
||||
<div class="fl-src-card card" data-provider="${esc(item.provider)}">
|
||||
<div class="edge"></div>
|
||||
<div class="row">
|
||||
<span class="name">${esc(C.FLOW_LABEL[item.provider] || item.provider)}</span>
|
||||
<span class="role">${esc(C.FLOW_ROLE[item.provider] || item.role)}</span>
|
||||
<span class="grow"></span>
|
||||
${C.chipHtml(link, health.state || link)}
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="lamps"><i class="lamp link ${C.linkLampClass(link)}" data-link></i><span class="lamp-tag">LINK</span></span>
|
||||
<span class="lamps"><i class="lamp act" data-act></i><span class="lamp-tag">ACT</span></span>
|
||||
<span class="grow"></span>
|
||||
<span class="lat mono">${health.latency_ms == null ? "-" : health.latency_ms + "ms"}</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span class="cred mono">${credText}</span><span class="grow"></span>
|
||||
<button class="btn ghost mini" data-probe="${esc(item.provider)}">探测一次</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function renderSources() {
|
||||
const v = S.sourcesView();
|
||||
const host = $("fl-srcCards");
|
||||
if (!v) { host.innerHTML = `<div class="muted">正在加载…</div>`; return; }
|
||||
host.innerHTML = v.live.map(srcCardHtml).join("") +
|
||||
(v.reserved.length ? `<div class="fl-src-card card muted" style="align-items:center;justify-content:center;font-size:12px;grid-column: 1 / -1">预留源 ${v.reserved.length} 个 · 未接入 · 无真实调用</div>` : "");
|
||||
S.bindProbeButtons(host);
|
||||
}
|
||||
|
||||
function renderProcess() {
|
||||
const jv = S.jobsView();
|
||||
const body = $("fl-processBody");
|
||||
const pctEl = root.querySelector('[data-pct]');
|
||||
if (!jv || !jv.latest) { body.innerHTML = `<div class="muted">正在加载…</div>`; return; }
|
||||
const latest = jv.latest;
|
||||
const running = jv.runs.filter((r) => r.state === "running").length;
|
||||
const pct = latest.state === "running" ? 62 : latest.state === "success" ? 100 : latest.state === "failed" ? 100 : 0;
|
||||
pctEl.textContent = latest.state === "running" ? `${pct}%` : "空闲";
|
||||
body.innerHTML = `
|
||||
<div class="task mono"><b>${esc(latest.job_id)}</b> · ${esc((jv.jobs.find((j) => j.id === latest.job_id) || {}).title || "")}</div>
|
||||
<div class="fl-pbar"><i style="width:${pct}%;background:${latest.state === "failed" ? "var(--error)" : "var(--action)"}"></i></div>
|
||||
<div class="queue">队列 <b class="mono">${running}</b> · 最近 20 次失败 <span class="chip ${jv.failedRecent ? "err" : "ok"}">${jv.failedRecent}</span></div>
|
||||
<div class="fl-miniruns">
|
||||
${jv.runs.slice(0, 3).map((r) => `<div class="mr mono"><span class="id">${r.id}</span><span class="${r.state === "failed" ? "fail" : r.state === "running" ? "warn" : "ok"}">${esc(r.state)}</span><span class="${r.error ? "why" : "muted"}">${esc(r.error || (r.finished_at !== "-" && r.finished_at ? timeShort(r.finished_at) : "—"))}</span></div>`).join("")}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function renderPublish() {
|
||||
const rv = S.releaseView();
|
||||
const body = $("fl-publishBody");
|
||||
if (!rv) { body.innerHTML = `<div class="muted">正在加载…</div>`; return; }
|
||||
const valuation = rv.pubs.find((p) => p.dataset === "valuation");
|
||||
const latestPub = rv.pubs.slice().sort((a, b) => String(a.published_at).localeCompare(String(b.published_at))).pop();
|
||||
body.innerHTML = `
|
||||
<div class="bignum"><span class="n mono" data-pubnum>${rv.pubs.length}</span><span class="cap">今日发布</span></div>
|
||||
<div class="latest mono">最新批次 ${esc(latestPub ? `${latestPub.active_batch} · ${latestPub.published_at}` : "暂无")}</div>
|
||||
${valuation ? `<div class="valrow"><span class="mono">valuation</span>${C.chipHtml(valuation.state)}</div>` : ""}`;
|
||||
}
|
||||
|
||||
function renderAudit() {
|
||||
const av = S.auditView();
|
||||
const body = $("fl-auditBody");
|
||||
if (!av || !av.items.length) { body.innerHTML = `<div class="muted">正在加载…</div>`; return; }
|
||||
const a0 = av.items[0];
|
||||
body.innerHTML = `
|
||||
<div class="al mono">${esc(timeShort(a0.created_at))} ${esc(a0.actor)} · ${esc(a0.action)}</div>
|
||||
<div class="al mono dim">${esc(a0.target)}${a0.detail ? " · " + esc(a0.detail) : ""}</div>
|
||||
<div class="adiv"></div>
|
||||
${av.items.slice(1, 3).map((a) => `<div class="al mono dim">${esc(timeShort(a.created_at))} ${esc(a.actor)} · ${esc(a.action)}</div>`).join("")}`;
|
||||
}
|
||||
|
||||
function renderCalls() {
|
||||
const ov = S.overviewView();
|
||||
const sv = S.sourcesView();
|
||||
if (!ov) { $("fl-callsTable").innerHTML = `<div class="muted">正在加载…</div>`; return; }
|
||||
$("fl-callsTable").innerHTML = C.table(["时间", "源", "端点", "结果", "耗时"], ov.recentCalls.map((row) => [
|
||||
`<span class="mono">${esc(timeShort(row.created_at))}</span>`,
|
||||
`<span class="mono k">${esc(row.provider)}</span>`,
|
||||
`<span class="mono">${esc(row.endpoint)}</span>`,
|
||||
row.ok ? '<span class="res-ok">成功</span>' : `<span class="res-err mono">${esc(row.error)}</span>`,
|
||||
`<span class="mono">${row.latency_ms ?? "-"} ms</span>`,
|
||||
]));
|
||||
if (sv) {
|
||||
$("fl-callsFoot").textContent = "今日调用 · " + sv.live.map((s) => `${s.provider} ${s.calls_today ?? 0}`).join(" · ");
|
||||
}
|
||||
}
|
||||
|
||||
function renderJobsCol() {
|
||||
const jv = S.jobsView();
|
||||
const jobRows = $("fl-jobRows");
|
||||
if (!jv) { jobRows.innerHTML = `<div class="muted">正在加载…</div>`; return; }
|
||||
jobRows.innerHTML = jv.jobs.map((job) => `
|
||||
<div class="fl-jobrow">
|
||||
<span class="jid mono">${esc(job.id)}</span><span class="jti">${esc(job.title)}</span>
|
||||
<span class="jat mono">${esc(job.at)}</span>${C.chipHtml(jv.latestByJob.get(job.id) ? jv.latestByJob.get(job.id).state : "idle")}
|
||||
<span class="grow"></span><button class="btn ghost mini" data-run="${esc(job.id)}">手动触发</button>
|
||||
</div>`).join("");
|
||||
S.bindRunButtons(jobRows);
|
||||
$("fl-runsTable").innerHTML = C.table(["ID", "任务", "状态", "开始", "结束", "错误"], jv.runs.map((r) => [
|
||||
`<span class="mono">${r.id}</span>`, `<span class="mono k">${esc(r.job_id)}</span>`,
|
||||
`<span class="mono ${r.state === "failed" ? "fail" : r.state === "running" ? "warn" : "ok"}">${esc(r.state)}</span>`,
|
||||
`<span class="mono">${esc(timeShort(r.started_at))}</span>`, `<span class="mono">${esc(timeShort(r.finished_at))}</span>`,
|
||||
`<span class="fail">${esc(r.error || "")}</span>`,
|
||||
]));
|
||||
}
|
||||
|
||||
function renderReleaseCol() {
|
||||
const rv = S.releaseView();
|
||||
const dateInput = $("fl-rel-date");
|
||||
if (!dateInput.value) dateInput.value = C.state.releaseDate;
|
||||
if (!rv) { $("fl-pubTable").innerHTML = `<div class="muted">正在加载…</div>`; return; }
|
||||
$("fl-pubTable").innerHTML = C.table(["数据集", "活跃批次", "上一批次", "状态", "发布时间", "操作"], rv.pubs.map((p) => [
|
||||
`<span class="mono k">${esc(p.dataset)}</span>`, `<span class="mono">${esc(p.active_batch)}</span>`,
|
||||
`<span class="mono">${esc(p.prev_batch || "-")}</span>`, C.chipHtml(p.state),
|
||||
`<span class="mono">${esc(p.published_at)}</span>`,
|
||||
p.prev_batch ? `<button class="btn danger mini" data-rollback="${esc(p.dataset)}">回滚</button>` : "-",
|
||||
]));
|
||||
S.bindRollbackButtons($("fl-pubTable"), () => renderReleaseCol());
|
||||
const failed = rv.batches.filter((b) => b.state === "failed" || b.state === "error");
|
||||
$("fl-anom").innerHTML = failed.length
|
||||
? failed.map((b) => `<span class="chip err mono">${esc(b.batch_id)} · ${esc(b.dataset)} · ${esc(b.error || "异常")}</span>`).join(" ")
|
||||
: `<span class="chip ok">批次全部正常</span>`;
|
||||
}
|
||||
|
||||
function refresh() {
|
||||
if (!root) return;
|
||||
renderSources(); renderProcess(); renderPublish(); renderAudit();
|
||||
renderCalls(); renderJobsCol(); renderReleaseCol();
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------- 真实事件动效
|
||||
水平接力：source ACT 闪 → 沿导线光梭滑到 process → process 高亮 → 光梭滑到
|
||||
publish → publish 高亮 → 光梭滑到 audit → audit 高亮。reduced 时只做状态高亮，
|
||||
不做位移。 */
|
||||
function flashSource(provider, kind) {
|
||||
const card = root.querySelector(`.fl-src-card[data-provider="${provider}"]`);
|
||||
if (!card) return;
|
||||
const act = card.querySelector("[data-act]");
|
||||
act.classList.remove("on", "err");
|
||||
act.classList.add("on"); if (kind === "error" || kind === "rollback") act.classList.add("err");
|
||||
const edge = card.querySelector(".edge");
|
||||
edge.classList.toggle("err", kind === "error");
|
||||
edge.style.opacity = "1";
|
||||
clearTimeout(card._flashTimer);
|
||||
card._flashTimer = setTimeout(() => { act.classList.remove("on", "err"); edge.style.opacity = "0"; }, 820);
|
||||
return card;
|
||||
}
|
||||
|
||||
function pulseStation(key, ms) {
|
||||
const el = root.querySelector(`.fl-station[data-station="${key}"]`);
|
||||
if (!el) return;
|
||||
el.classList.add("pulse");
|
||||
clearTimeout(stationFlashTimers[key]);
|
||||
stationFlashTimers[key] = setTimeout(() => el.classList.remove("pulse"), ms || 640);
|
||||
}
|
||||
|
||||
function travelPacket(fromEl, toEl, color) {
|
||||
if (!fromEl || !toEl || C.state.reduced) return;
|
||||
const pk = $("fl-packet");
|
||||
const band = $("fl-band").getBoundingClientRect();
|
||||
const a = fromEl.getBoundingClientRect(), b = toEl.getBoundingClientRect();
|
||||
const x0 = a.left + a.width / 2 - band.left, y0 = a.top + a.height / 2 - band.top;
|
||||
const x1 = b.left + b.width / 2 - band.left, y1 = b.top + b.height / 2 - band.top;
|
||||
pk.style.background = color || "var(--packet)";
|
||||
pk.style.top = y0 - 1.5 + "px"; pk.style.left = x0 - 17 + "px"; pk.style.opacity = "0";
|
||||
if (pk._anim) pk._anim.cancel();
|
||||
pk._anim = pk.animate([
|
||||
{ transform: "translate(0,0)", opacity: 0 },
|
||||
{ transform: "translate(0,0)", opacity: 1, offset: .08 },
|
||||
{ transform: `translate(${x1 - x0}px, ${y1 - y0}px)`, opacity: 1, offset: .92 },
|
||||
{ transform: `translate(${x1 - x0}px, ${y1 - y0}px)`, opacity: 0 },
|
||||
], { duration: 640, easing: "linear" });
|
||||
pk._anim.onfinish = () => { pk.style.opacity = "0"; };
|
||||
}
|
||||
|
||||
function onEvent(evt) {
|
||||
if (!root || !mounted) return;
|
||||
const process = root.querySelector('.fl-station[data-station="process"]');
|
||||
const publish = root.querySelector('.fl-station[data-station="publish"]');
|
||||
const audit = root.querySelector('.fl-station[data-station="audit"]');
|
||||
if (C.FLOW_PROVIDERS.includes(evt.channel)) {
|
||||
const card = flashSource(evt.channel, evt.kind);
|
||||
safeTimeout(() => { travelPacket(card, process, evt.kind === "error" ? "var(--error)" : "var(--packet)"); pulseStation("process", 700); }, 260);
|
||||
renderCalls();
|
||||
} else if (evt.channel === "junction") {
|
||||
pulseStation("process", 700);
|
||||
safeTimeout(() => { travelPacket(process, publish, "var(--packet)"); pulseStation("publish", 700); renderProcess(); }, 260);
|
||||
} else if (evt.channel === "tx") {
|
||||
pulseStation("publish", 700);
|
||||
safeTimeout(() => { travelPacket(publish, audit, evt.kind === "rollback" ? "var(--error)" : "var(--packet)"); pulseStation("audit", 700); renderPublish(); renderReleaseCol(); }, 260);
|
||||
} else if (evt.channel === "audit") {
|
||||
pulseStation("audit", 700);
|
||||
renderAudit();
|
||||
}
|
||||
}
|
||||
|
||||
function mount(el) {
|
||||
root = el;
|
||||
mounted = true;
|
||||
root.innerHTML = SKELETON;
|
||||
refresh();
|
||||
S.bindReleaseDateReload(root, "#fl-rel-date", "#fl-rel-load", () => renderReleaseCol());
|
||||
S.bindBackfillButton(root, "#fl-rel-backfill", () => renderReleaseCol());
|
||||
unsubs.push(C.Bus.on("data", refresh));
|
||||
unsubs.push(C.Bus.on("event", onEvent));
|
||||
}
|
||||
function unmount() {
|
||||
mounted = false;
|
||||
unsubs.forEach((fn) => fn()); unsubs = [];
|
||||
Object.values(stationFlashTimers).forEach(clearTimeout); stationFlashTimers = {};
|
||||
pendingTimers.forEach(clearTimeout); pendingTimers = [];
|
||||
root = null;
|
||||
}
|
||||
|
||||
window.HUB_LAYOUTS = window.HUB_LAYOUTS || {};
|
||||
window.HUB_LAYOUTS.flowline = { mount, unmount };
|
||||
})();
|
||||
@@ -0,0 +1,81 @@
|
||||
/* B · 值班台账 Ledger Desk —— 表格本身就是主舞台，每条真实事件一行。
|
||||
高密度、精密仪器感；按钮/状态/异常一眼可读。 */
|
||||
#lg-root { padding: var(--sp3) var(--sp4); max-width: 1680px; margin: 0 auto; }
|
||||
#lg-grid { display: grid; grid-template-columns: 250px 1fr 300px; gap: 12px; align-items: start; }
|
||||
/* CSS Grid 子项默认 min-width:auto，会被内部宽表格的内在尺寸撑爆整条 1fr 轨道；
|
||||
显式清零，让表格自己用 overflow 滚动，而不是撑破布局。 */
|
||||
#lg-grid > * { min-width: 0; }
|
||||
|
||||
#lg-side, #lg-side-r { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
|
||||
.lg-panel { padding: 10px 12px; min-width: 0; }
|
||||
.lg-panel .sec-label { display: block; margin-bottom: 8px; }
|
||||
|
||||
.lg-src-row { display: flex; align-items: center; gap: 7px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
|
||||
.lg-src-row:last-child { border-bottom: 0; }
|
||||
.lg-src-row .nm { flex: 1; color: var(--t1); }
|
||||
.lg-src-row .lat { color: var(--t3); font-size: 11px; }
|
||||
.lg-src-row .lamps { display: flex; gap: 3px; }
|
||||
|
||||
.lg-jobline { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
|
||||
.lg-jobline:last-child { border-bottom: 0; }
|
||||
.lg-jobline .nm { flex: 1; color: var(--t1); }
|
||||
.lg-jobline .at { color: var(--t3); font-size: 11px; }
|
||||
.lg-jobline button { margin-left: 4px; }
|
||||
|
||||
/* -------- 主舞台：事件台账表 -------- */
|
||||
#lg-ledger { padding: 10px 12px; }
|
||||
#lg-ledger .lg-ledger-hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
|
||||
#lg-ledger .lg-ledger-hd .hint { font-size: 11px; color: var(--t3); }
|
||||
table.lg-ledger { width: 100%; border-collapse: collapse; font-size: 12px; }
|
||||
table.lg-ledger th {
|
||||
position: sticky; top: 0; background: var(--bg1); text-align: left; font-weight: 500; color: var(--t3);
|
||||
font-size: 11px; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; z-index: 1;
|
||||
}
|
||||
table.lg-ledger th.stage { text-align: center; }
|
||||
table.lg-ledger td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
|
||||
table.lg-ledger td.ev { min-width: 150px; }
|
||||
table.lg-ledger td.ev .nm { color: var(--t1); font-weight: 600; font-size: 12.5px; }
|
||||
table.lg-ledger td.ev .sub { color: var(--t3); font-size: 10.5px; }
|
||||
table.lg-ledger td.src { color: var(--t2); font-size: 11.5px; white-space: nowrap; }
|
||||
table.lg-ledger td.stage { text-align: center; white-space: nowrap; }
|
||||
.lg-cell {
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 58px;
|
||||
padding: 3px 7px; border-radius: var(--r-chip); font-family: var(--font-mono); font-size: 11px;
|
||||
background: var(--bg2); color: var(--t3); transition: background var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
|
||||
}
|
||||
.lg-cell.ok { background: var(--alive-soft); color: var(--alive); }
|
||||
.lg-cell.err { background: var(--error-soft); color: var(--error); }
|
||||
.lg-cell.warn { background: var(--act-soft); color: var(--act); }
|
||||
.lg-cell.dash { opacity: .4; }
|
||||
tr.lg-row { transition: background var(--dur-ui) var(--ease-out); }
|
||||
tr.lg-row.flashnew td { background: var(--action-soft); }
|
||||
tr.lg-row.flashnew.err td { background: var(--error-soft); }
|
||||
|
||||
/* -------- 调用带（持续，只滚真实数据） -------- */
|
||||
#lg-tape { margin-top: 10px; padding: 8px 0 0; border-top: 1px solid var(--line-soft); }
|
||||
#lg-tape .sec-label { display: block; margin-bottom: 6px; }
|
||||
#lg-tape-track { overflow: hidden; white-space: nowrap; position: relative; height: 24px; }
|
||||
#lg-tape-inner { display: inline-flex; gap: 22px; will-change: transform; }
|
||||
.lg-tape-item { font-family: var(--font-mono); font-size: 11.5px; color: var(--t2); white-space: nowrap; }
|
||||
.lg-tape-item b { color: var(--t1); }
|
||||
.lg-tape-item.err { color: var(--error); }
|
||||
#lg-tape.paused #lg-tape-inner { animation-play-state: paused; }
|
||||
|
||||
/* -------- 右侧发布/审计 -------- */
|
||||
#lg-release table.grid td, #lg-release table.grid th { padding: 5px 6px; font-size: 11px; }
|
||||
#lg-release .toolrow { display: flex; gap: 6px; margin-bottom: 8px; }
|
||||
#lg-release .toolrow input { width: 84px; font-family: var(--font-mono); font-size: 11px; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-chip); padding: 4px 6px; color: var(--t1); }
|
||||
.lg-auditline { font-size: 11px; color: var(--t2); padding: 5px 0; border-bottom: 1px solid var(--line-soft); line-height: 1.5; }
|
||||
.lg-auditline:last-child { border-bottom: 0; }
|
||||
.lg-auditline .dim { color: var(--t3); }
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
#lg-grid { grid-template-columns: 1fr; }
|
||||
#lg-side, #lg-side-r { flex-direction: row; flex-wrap: wrap; }
|
||||
.lg-panel { flex: 1 1 260px; }
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
#lg-root { padding: var(--sp2) var(--sp3); }
|
||||
table.lg-ledger { font-size: 11px; }
|
||||
.lg-cell { min-width: 46px; font-size: 10px; padding: 2px 5px; }
|
||||
}
|
||||
@@ -0,0 +1,291 @@
|
||||
"use strict";
|
||||
/* ==========================================================================
|
||||
B · 值班台账 Ledger Desk —— 表格本身就是主舞台，每条真实事件一行。
|
||||
响应/汇入/处理/发布/审计五列只填该行真实具备的阶段，没有发生的阶段留空，
|
||||
不做跨行编造关联。底部调用带只滚真实 recent_calls。
|
||||
========================================================================== */
|
||||
(function () {
|
||||
const C = window.Core, S = window.HubShared;
|
||||
const { $, esc, timeShort } = C;
|
||||
let root = null;
|
||||
let unsubs = [];
|
||||
let seenRowKeys = new Set();
|
||||
let mounted = false;
|
||||
let pendingTimers = [];
|
||||
function safeTimeout(fn, ms) {
|
||||
const id = setTimeout(() => { if (mounted) fn(); }, ms);
|
||||
pendingTimers.push(id);
|
||||
return id;
|
||||
}
|
||||
|
||||
const SKELETON = `
|
||||
<div id="lg-root" class="page-shell">
|
||||
<div id="lg-grid">
|
||||
<div id="lg-side">
|
||||
<section class="card lg-panel">
|
||||
<span class="sec-label">来源健康 SOURCES</span>
|
||||
<div id="lg-srcList"></div>
|
||||
</section>
|
||||
<section class="card lg-panel">
|
||||
<span class="sec-label">调度任务 JOBS</span>
|
||||
<div id="lg-jobList"></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<section class="card" id="lg-ledger">
|
||||
<div class="lg-ledger-hd">
|
||||
<span class="sec-label">事件台账 EVENT LEDGER</span>
|
||||
<span class="hint">每条事件依次经过 响应→汇入→处理→发布→审计</span>
|
||||
</div>
|
||||
<div style="overflow:auto; max-height: 62vh;">
|
||||
<table class="lg-ledger">
|
||||
<thead><tr>
|
||||
<th>时间</th><th>事件</th><th>来源</th>
|
||||
<th class="stage">响应<br/><span style="opacity:.6">RESP</span></th>
|
||||
<th class="stage">汇入<br/><span style="opacity:.6">INGEST</span></th>
|
||||
<th class="stage">处理<br/><span style="opacity:.6">PROC</span></th>
|
||||
<th class="stage">发布<br/><span style="opacity:.6">PUB</span></th>
|
||||
<th class="stage">审计<br/><span style="opacity:.6">AUDIT</span></th>
|
||||
</tr></thead>
|
||||
<tbody id="lg-ledgerBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="lg-tape">
|
||||
<span class="sec-label">调用带 CALL TAPE</span>
|
||||
<div id="lg-tape-track"><div id="lg-tape-inner"></div></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="lg-side-r">
|
||||
<section class="card lg-panel" id="lg-release">
|
||||
<span class="sec-label">盘后发布 RELEASE</span>
|
||||
<div class="toolrow">
|
||||
<input id="lg-rel-date" value="" />
|
||||
<button type="button" class="btn mini" id="lg-rel-load">查看</button>
|
||||
<button type="button" class="btn danger mini" id="lg-rel-backfill">补数</button>
|
||||
</div>
|
||||
<div id="lg-pubTable"></div>
|
||||
</section>
|
||||
<section class="card lg-panel">
|
||||
<span class="sec-label">审计 AUDIT</span>
|
||||
<div id="lg-auditList"></div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
function renderSources() {
|
||||
const v = S.sourcesView();
|
||||
const host = $("lg-srcList");
|
||||
if (!v) { host.innerHTML = `<div class="muted">正在加载…</div>`; return; }
|
||||
host.innerHTML = v.live.map((it) => {
|
||||
const health = it.health || {};
|
||||
const link = it._link || C.linkState(health);
|
||||
return `<div class="lg-src-row" data-provider="${esc(it.provider)}">
|
||||
<span class="lamps"><i class="lamp link ${C.linkLampClass(link)}"></i><i class="lamp act" data-act></i></span>
|
||||
<span class="nm">${esc(C.FLOW_LABEL[it.provider] || it.provider)}</span>
|
||||
${C.chipHtml(link, health.state || link)}
|
||||
<span class="lat mono">${health.latency_ms == null ? "-" : health.latency_ms + "ms"}</span>
|
||||
<button class="btn ghost mini" data-probe="${esc(it.provider)}">探测</button>
|
||||
</div>`;
|
||||
}).join("");
|
||||
S.bindProbeButtons(host, () => renderSources());
|
||||
}
|
||||
|
||||
function renderJobs() {
|
||||
const v = S.jobsView();
|
||||
const host = $("lg-jobList");
|
||||
if (!v) { host.innerHTML = `<div class="muted">正在加载…</div>`; return; }
|
||||
host.innerHTML = v.jobs.map((job) => {
|
||||
const latest = v.latestByJob.get(job.id);
|
||||
return `<div class="lg-jobline">
|
||||
${C.chipHtml(latest ? latest.state : "idle")}
|
||||
<span class="nm mono">${esc(job.id)}</span>
|
||||
<span class="at mono">${esc(job.at)}</span>
|
||||
<button class="btn ghost mini" data-run="${esc(job.id)}">触发</button>
|
||||
</div>`;
|
||||
}).join("");
|
||||
S.bindRunButtons(host, () => renderJobs());
|
||||
}
|
||||
|
||||
function renderRelease() {
|
||||
const v = S.releaseView();
|
||||
const dateInput = $("lg-rel-date");
|
||||
if (!dateInput.value) dateInput.value = C.state.releaseDate;
|
||||
if (!v) { $("lg-pubTable").innerHTML = `<div class="muted">正在加载…</div>`; return; }
|
||||
$("lg-pubTable").innerHTML = C.table(["数据集", "批次", "状态", "时间", ""], v.pubs.map((p) => [
|
||||
`<span class="mono k">${esc(p.dataset)}</span>`, `<span class="mono">${esc(p.active_batch)}</span>`,
|
||||
C.chipHtml(p.state), `<span class="mono">${esc(p.published_at)}</span>`,
|
||||
p.prev_batch ? `<button class="btn danger mini" data-rollback="${esc(p.dataset)}">回滚</button>` : "-",
|
||||
]));
|
||||
S.bindRollbackButtons($("lg-pubTable"), () => renderRelease());
|
||||
}
|
||||
|
||||
function renderAuditList() {
|
||||
const v = S.auditView();
|
||||
const host = $("lg-auditList");
|
||||
if (!v) { host.innerHTML = `<div class="muted">正在加载…</div>`; return; }
|
||||
host.innerHTML = v.items.slice(0, 10).map((a) => `
|
||||
<div class="lg-auditline mono">
|
||||
<div>${esc(timeShort(a.created_at))} <b>${esc(a.actor)}</b> <span class="${String(a.action).includes("rollback") ? "warn" : ""}">${esc(a.action)}</span></div>
|
||||
<div class="dim">${esc(a.target)}${a.detail ? " · " + esc(a.detail) : ""}</div>
|
||||
</div>`).join("");
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------- 台账行合成
|
||||
每行只填该事件类型真实具备的阶段；不同类型互不编造对方的字段。 */
|
||||
function cell(text, kind) {
|
||||
if (text == null || text === "") return `<span class="lg-cell dash">—</span>`;
|
||||
return `<span class="lg-cell ${kind || ""}">${esc(text)}</span>`;
|
||||
}
|
||||
|
||||
function buildLedgerRows() {
|
||||
const ov = S.overviewView(), jv = S.jobsView(), rv = S.releaseView(), av = S.auditView();
|
||||
const rows = [];
|
||||
if (ov) {
|
||||
for (const c of ov.recentCalls) {
|
||||
rows.push({
|
||||
key: `call:${c.id}`, t: c.created_at, name: c.endpoint, sub: "来源响应", source: c.provider,
|
||||
resp: cell(timeShort(c.created_at), c.ok ? "ok" : "err"),
|
||||
ingest: c.ok ? cell(timeShort(c.created_at), "ok") : cell(),
|
||||
proc: cell(), pub: cell(), audit: cell(),
|
||||
err: !c.ok,
|
||||
});
|
||||
}
|
||||
}
|
||||
if (jv) {
|
||||
for (const r of jv.runs.slice(0, 30)) {
|
||||
const job = jv.jobs.find((j) => j.id === r.job_id);
|
||||
rows.push({
|
||||
key: `run:${r.id}`, t: r.started_at, name: (job && job.title) || r.job_id, sub: r.job_id, source: "system",
|
||||
resp: cell(), ingest: cell(timeShort(r.started_at), "ok"),
|
||||
proc: r.state === "running" ? cell("running", "warn") : r.state === "failed" ? cell(r.error || "failed", "err") : cell(timeShort(r.finished_at), "ok"),
|
||||
pub: cell(), audit: cell(),
|
||||
err: r.state === "failed",
|
||||
});
|
||||
}
|
||||
}
|
||||
if (rv) {
|
||||
for (const p of rv.pubs) {
|
||||
if (!p.published_at || p.published_at === "-") continue;
|
||||
rows.push({
|
||||
key: `pub:${p.dataset}:${p.active_batch}`, t: p.published_at, name: `批次发布 · ${p.dataset}`, sub: p.active_batch, source: "system",
|
||||
resp: cell(), ingest: cell(), proc: cell(),
|
||||
pub: cell(timeShort(p.published_at), p.state === "published" ? "ok" : "warn"),
|
||||
audit: cell(),
|
||||
err: p.state === "missing" || p.state === "error",
|
||||
});
|
||||
}
|
||||
}
|
||||
if (av) {
|
||||
for (const a of av.items.slice(0, 30)) {
|
||||
const isRollback = String(a.action).includes("rollback");
|
||||
const isProbe = a.action === "probe";
|
||||
rows.push({
|
||||
key: `audit:${a.id}`, t: a.created_at, name: a.action, sub: a.target, source: a.actor,
|
||||
resp: isProbe ? cell(timeShort(a.created_at), String(a.detail).includes("失败") ? "err" : "ok") : cell(),
|
||||
ingest: cell(), proc: cell(),
|
||||
pub: isRollback ? cell(timeShort(a.created_at), "warn") : cell(),
|
||||
audit: cell(timeShort(a.created_at), isRollback ? "warn" : "ok"),
|
||||
err: isRollback,
|
||||
});
|
||||
}
|
||||
}
|
||||
rows.sort((a, b) => String(b.t).localeCompare(String(a.t)));
|
||||
return rows.slice(0, 60);
|
||||
}
|
||||
|
||||
function renderLedger() {
|
||||
const rows = buildLedgerRows();
|
||||
const body = $("lg-ledgerBody");
|
||||
body.innerHTML = rows.map((r) => `
|
||||
<tr class="lg-row ${seenRowKeys.has(r.key) ? "" : "flashnew"} ${r.err ? "err" : ""}" data-key="${esc(r.key)}">
|
||||
<td class="mono">${esc(timeShort(r.t))}</td>
|
||||
<td class="ev"><div class="nm">${esc(r.name)}</div><div class="sub">${esc(r.sub || "")}</div></td>
|
||||
<td class="src mono">${esc(r.source)}</td>
|
||||
<td class="stage">${r.resp}</td>
|
||||
<td class="stage">${r.ingest}</td>
|
||||
<td class="stage">${r.proc}</td>
|
||||
<td class="stage">${r.pub}</td>
|
||||
<td class="stage">${r.audit}</td>
|
||||
</tr>`).join("");
|
||||
rows.forEach((r) => seenRowKeys.add(r.key));
|
||||
if (!C.state.reduced) {
|
||||
body.querySelectorAll("tr.flashnew").forEach((tr) => {
|
||||
setTimeout(() => tr.classList.remove("flashnew"), 1000);
|
||||
});
|
||||
} else {
|
||||
body.querySelectorAll("tr.flashnew").forEach((tr) => tr.classList.remove("flashnew"));
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------- 调用带：只滚真实 recent_calls */
|
||||
function renderTape() {
|
||||
const ov = S.overviewView();
|
||||
const inner = $("lg-tape-inner");
|
||||
if (!ov || !ov.recentCalls.length) { inner.innerHTML = `<span class="lg-tape-item muted">暂无真实调用</span>`; inner.style.animation = "none"; return; }
|
||||
const items = ov.recentCalls.slice(0, 16).map((c) => `<span class="lg-tape-item ${c.ok ? "" : "err"}">${esc(timeShort(c.created_at))} <b>${esc(c.provider)}</b> ${esc(c.endpoint)} ${c.ok ? "✓" : "× " + esc(c.error)}</span>`).join("");
|
||||
inner.innerHTML = items + items; // 首尾拼接形成无缝循环，内容仍全部来自真实调用
|
||||
if (C.state.reduced) { inner.style.animation = "none"; return; }
|
||||
const width = inner.scrollWidth / 2;
|
||||
inner.style.animation = "none";
|
||||
void inner.offsetWidth;
|
||||
inner.style.setProperty("--tape-w", `-${width}px`);
|
||||
inner.style.animation = `lg-tape-scroll ${Math.max(12, width / 40)}s linear infinite`;
|
||||
}
|
||||
if (!document.getElementById("lg-tape-keyframes")) {
|
||||
const style = document.createElement("style");
|
||||
style.id = "lg-tape-keyframes";
|
||||
style.textContent = `@keyframes lg-tape-scroll { from { transform: translateX(0); } to { transform: translateX(var(--tape-w, -800px)); } }`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
function updateTapePauseState() {
|
||||
const el = $("lg-tape");
|
||||
if (!el) return;
|
||||
el.classList.toggle("paused", !C.Poller.runtimeAvailable() || C.state.reduced);
|
||||
}
|
||||
|
||||
function refresh() {
|
||||
if (!root) return;
|
||||
renderSources(); renderJobs(); renderRelease(); renderAuditList(); renderLedger(); renderTape(); updateTapePauseState();
|
||||
}
|
||||
|
||||
function onEvent(evt) {
|
||||
if (!root || !mounted) return;
|
||||
if (C.FLOW_PROVIDERS.includes(evt.channel)) {
|
||||
const row = root.querySelector(`.lg-src-row[data-provider="${evt.channel}"] [data-act]`);
|
||||
if (row) {
|
||||
row.classList.remove("on", "err");
|
||||
row.classList.add("on"); if (evt.kind === "error") row.classList.add("err");
|
||||
setTimeout(() => row.classList.remove("on", "err"), 800);
|
||||
}
|
||||
}
|
||||
renderLedger();
|
||||
renderTape();
|
||||
}
|
||||
|
||||
function mount(el) {
|
||||
root = el;
|
||||
mounted = true;
|
||||
seenRowKeys = new Set();
|
||||
root.innerHTML = SKELETON;
|
||||
refresh();
|
||||
S.bindReleaseDateReload(root, "#lg-rel-date", "#lg-rel-load", () => renderRelease());
|
||||
S.bindBackfillButton(root, "#lg-rel-backfill", () => renderRelease());
|
||||
unsubs.push(C.Bus.on("data", refresh));
|
||||
unsubs.push(C.Bus.on("event", onEvent));
|
||||
unsubs.push(C.Bus.on("runtime", updateTapePauseState));
|
||||
unsubs.push(C.Bus.on("reduced", () => { renderTape(); updateTapePauseState(); }));
|
||||
}
|
||||
function unmount() {
|
||||
mounted = false;
|
||||
unsubs.forEach((fn) => fn()); unsubs = [];
|
||||
pendingTimers.forEach(clearTimeout); pendingTimers = [];
|
||||
root = null;
|
||||
}
|
||||
|
||||
window.HUB_LAYOUTS = window.HUB_LAYOUTS || {};
|
||||
window.HUB_LAYOUTS.ledger = { mount, unmount };
|
||||
})();
|
||||
@@ -0,0 +1,136 @@
|
||||
"use strict";
|
||||
/* ==========================================================================
|
||||
三方向共用的数据整形 + 操作绑定。A/B/C 各自的 mount() 只管 DOM 结构和动效编排，
|
||||
"字段从哪来、按钮点了调什么接口" 统一走这里，禁止在布局文件里重写业务判断。
|
||||
========================================================================== */
|
||||
window.HubShared = (function () {
|
||||
const C = window.Core;
|
||||
const { esc, timeShort } = C;
|
||||
|
||||
function overviewView() {
|
||||
const d = C.state.data.overview;
|
||||
if (!d) return null;
|
||||
const eod = d.eod_status || {}, rev = d.revision_status || {};
|
||||
return {
|
||||
tradeDate: d.trade_date,
|
||||
phase: C.PHASE_LABELS[d.session_phase] || d.session_phase,
|
||||
pubCount: d.publications.length,
|
||||
eodState: eod.state, eodLabel: C.EOD_LABELS[eod.state] || eod.state || "-", eod,
|
||||
revState: rev.state, revLabel: C.REV_LABELS[rev.state] || rev.state || "-", rev,
|
||||
anomalies: d.anomalies.length,
|
||||
recentCalls: d.recent_calls || [],
|
||||
sourceCount: d.source_count,
|
||||
};
|
||||
}
|
||||
|
||||
function sourcesView() {
|
||||
const d = C.state.data.sources;
|
||||
if (!d) return null;
|
||||
const live = d.items.filter((it) => C.FLOW_PROVIDERS.includes(it.provider));
|
||||
const reserved = d.items.filter((it) => !C.FLOW_PROVIDERS.includes(it.provider));
|
||||
return { live, reserved, all: d.items };
|
||||
}
|
||||
|
||||
function jobsView() {
|
||||
const d = C.state.data.jobs;
|
||||
if (!d) return null;
|
||||
const runs = d.runs || [];
|
||||
const latestByJob = new Map();
|
||||
for (const r of runs) if (!latestByJob.has(r.job_id)) latestByJob.set(r.job_id, r);
|
||||
return {
|
||||
jobs: d.jobs || [], runs, latest: runs[0], latestByJob,
|
||||
failedRecent: runs.slice(0, 20).filter((r) => r.state === "failed").length,
|
||||
fresh: C.state.freshJobRuns || [],
|
||||
};
|
||||
}
|
||||
|
||||
function releaseView() {
|
||||
const d = C.state.data.batches;
|
||||
if (!d) return null;
|
||||
const pubs = d.publications || [];
|
||||
const batches = d.batches || [];
|
||||
return {
|
||||
tradeDate: d.trade_date, pubs, batches,
|
||||
rollbacks: pubs.filter((p) => p.prev_batch).length,
|
||||
failedBatches: batches.filter((b) => b.state === "failed").length,
|
||||
};
|
||||
}
|
||||
|
||||
function datasetsView() {
|
||||
const d = C.state.data.datasets;
|
||||
if (!d) return null;
|
||||
return { tradeDate: d.trade_date, pubs: d.publications || [], diffs: d.diff_reports || [] };
|
||||
}
|
||||
|
||||
function auditView() {
|
||||
const d = C.state.data.audit;
|
||||
if (!d) return null;
|
||||
return { items: d.items || [] };
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------- 操作绑定 */
|
||||
function bindProbeButtons(root, onDone) {
|
||||
root.querySelectorAll("[data-probe]").forEach((btn) => {
|
||||
btn.addEventListener("click", async () => {
|
||||
const provider = btn.dataset.probe;
|
||||
btn.disabled = true;
|
||||
const original = btn.textContent;
|
||||
btn.textContent = "探测中…";
|
||||
try {
|
||||
const result = await C.probeSource(provider);
|
||||
btn.textContent = "已探测";
|
||||
setTimeout(() => { btn.textContent = original; }, 1200);
|
||||
if (onDone) onDone(result, provider);
|
||||
} catch (err) {
|
||||
alert(err.message);
|
||||
btn.textContent = original;
|
||||
} finally {
|
||||
setTimeout(() => { btn.disabled = false; }, 400);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function bindRunButtons(root, onDone) {
|
||||
root.querySelectorAll("[data-run]").forEach((btn) => {
|
||||
btn.addEventListener("click", async () => {
|
||||
const date = prompt("交易日 YYYYMMDD（可留空=今天）", "") || "";
|
||||
btn.disabled = true;
|
||||
try {
|
||||
const result = await C.runJob(btn.dataset.run, date);
|
||||
if (onDone) onDone(result);
|
||||
} catch (err) {
|
||||
alert(err.message);
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function bindRollbackButtons(root, onDone) {
|
||||
root.querySelectorAll("[data-rollback]").forEach((btn) => {
|
||||
btn.addEventListener("click", () => C.dangerous("rollback", btn.dataset.rollback, onDone));
|
||||
});
|
||||
}
|
||||
|
||||
function bindBackfillButton(root, selector, onDone) {
|
||||
const el = root.querySelector(selector);
|
||||
if (el) el.addEventListener("click", () => C.dangerous("backfill", null, onDone));
|
||||
}
|
||||
|
||||
function bindReleaseDateReload(root, inputSel, btnSel, onDone) {
|
||||
const btn = root.querySelector(btnSel);
|
||||
if (!btn) return;
|
||||
btn.addEventListener("click", async () => {
|
||||
C.state.releaseDate = root.querySelector(inputSel).value.trim();
|
||||
await C.pollBatches();
|
||||
if (onDone) onDone();
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
overviewView, sourcesView, jobsView, releaseView, datasetsView, auditView,
|
||||
bindProbeButtons, bindRunButtons, bindRollbackButtons, bindBackfillButton, bindReleaseDateReload,
|
||||
};
|
||||
})();
|
||||
@@ -0,0 +1,60 @@
|
||||
/* C · 地层剖面 Strata —— 来源层→加工层→发布层→审计沉积层 四条全宽横带。
|
||||
真实事件自上而下贯穿；整齐、纵向追踪；选中/关联状态解决跨层追踪费眼问题。 */
|
||||
#st-root { padding: var(--sp3) var(--sp4); max-width: 1680px; margin: 0 auto; position: relative; }
|
||||
#st-spine { position: absolute; left: 46px; top: 56px; bottom: 12px; width: 2px; background: var(--line); z-index: 0; }
|
||||
#st-dot { position: absolute; left: 41px; width: 12px; height: 12px; border-radius: 50%; background: var(--packet); opacity: 0; z-index: 3; pointer-events: none; box-shadow: 0 0 0 4px var(--bg0); }
|
||||
|
||||
.st-band { position: relative; display: flex; gap: 16px; padding: 14px 16px 16px 62px; margin-bottom: 10px; z-index: 1; border-left: 3px solid transparent; transition: border-color var(--dur-ui) var(--ease-out), background var(--dur-ui) var(--ease-out); }
|
||||
.st-band > div { min-width: 0; }
|
||||
.st-band.pulse { border-left-color: var(--action); background: var(--action-soft); }
|
||||
.st-band.pulse.err { border-left-color: var(--error); background: var(--error-soft); }
|
||||
.st-band .st-idx { position: absolute; left: 6px; top: 14px; width: 36px; text-align: center; }
|
||||
.st-band .st-idx .n { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--t3); display: block; }
|
||||
.st-band .st-idx .lb { font-size: 9.5px; color: var(--t3); letter-spacing: .12em; display: block; margin-top: 2px; }
|
||||
|
||||
#st-sources { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 12px; flex: 1; min-width: 0; }
|
||||
/* 防止内部宽表格用 min-width:auto 撑爆 1fr 轨道，参见 ledger.css 同类注释。 */
|
||||
#st-sources > *, #st-process > *, #st-publish > * { min-width: 0; }
|
||||
.st-src { padding: 8px 10px; cursor: pointer; border: 1px solid var(--line); border-radius: var(--r-card); transition: border-color var(--dur-ui) var(--ease-out); }
|
||||
.st-src.sel { border-color: var(--action); box-shadow: 0 0 0 1px var(--action) inset; }
|
||||
.st-src .row { display: flex; align-items: center; gap: 6px; }
|
||||
.st-src .nm { font-size: 13px; font-weight: 600; color: var(--t1); flex: 1; }
|
||||
.st-src .sub { font-size: 10.5px; color: var(--t3); margin-top: 2px; }
|
||||
.st-src .lat { font-size: 11px; color: var(--t2); }
|
||||
.st-reserved { align-self: center; font-size: 11px; color: var(--t3); white-space: nowrap; padding: 0 8px; }
|
||||
|
||||
#st-process { flex: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
|
||||
.st-jobs .st-job { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; cursor: pointer; border-radius: 4px; }
|
||||
.st-jobs .st-job:last-child { border-bottom: 0; }
|
||||
.st-jobs .st-job.sel { background: var(--action-soft); }
|
||||
.st-jobs .st-job .nm { flex: 1; color: var(--t1); }
|
||||
.st-jobs .st-job .at { color: var(--t3); font-size: 11px; }
|
||||
.st-runs table.grid td, .st-runs table.grid th { padding: 4px 6px; font-size: 11px; }
|
||||
.st-runs tr.hi td { background: var(--action-soft); }
|
||||
|
||||
#st-publish { flex: 1; display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
|
||||
.st-gate .bignum { display: flex; align-items: baseline; gap: 8px; }
|
||||
.st-gate .bignum .n { font-size: var(--fs-hero); font-weight: 700; color: var(--t1); }
|
||||
.st-gate .bignum .cap { font-size: 11px; color: var(--t3); }
|
||||
.st-gate .win { font-size: 11px; color: var(--t2); margin-top: 8px; line-height: 1.7; }
|
||||
.st-datasets table.grid td, .st-datasets table.grid th { padding: 4px 6px; font-size: 11px; }
|
||||
.st-datasets tr.hi td { background: var(--action-soft); }
|
||||
|
||||
#st-audit { flex: 1; display: flex; flex-direction: column; gap: 6px; }
|
||||
.st-audit-line { font-size: 11.5px; color: var(--t2); font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.st-audit-line b { color: var(--t1); }
|
||||
.st-audit-line.warn { color: var(--act); }
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
#st-sources { grid-template-columns: repeat(2, 1fr); }
|
||||
.st-reserved { grid-column: 1 / -1; }
|
||||
#st-process, #st-publish { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 1100px) {
|
||||
#st-root { padding: var(--sp2) var(--sp3); }
|
||||
#st-spine { left: 30px; }
|
||||
#st-dot { left: 25px; }
|
||||
.st-band { padding-left: 46px; gap: 10px; }
|
||||
.st-band .st-idx { width: 26px; }
|
||||
.st-band .st-idx .n { font-size: 14px; }
|
||||
}
|
||||
@@ -0,0 +1,248 @@
|
||||
"use strict";
|
||||
/* ==========================================================================
|
||||
C · 地层剖面 Strata —— 来源层 → 加工层 → 发布层 → 审计沉积层 四条全宽横带。
|
||||
真实事件自上而下贯穿（脊线上的光点从上一层滑到下一层）；点击任一层的项目
|
||||
进入"选中"态，用同一颜色在其它层高亮可关联的真实行，解决跨层追踪费眼问题。
|
||||
========================================================================== */
|
||||
(function () {
|
||||
const C = window.Core, S = window.HubShared;
|
||||
const { $, esc, timeShort } = C;
|
||||
let root = null;
|
||||
let mounted = false;
|
||||
let pendingTimers = [];
|
||||
function safeTimeout(fn, ms) {
|
||||
const id = setTimeout(() => { if (mounted) fn(); }, ms);
|
||||
pendingTimers.push(id);
|
||||
return id;
|
||||
}
|
||||
let unsubs = [];
|
||||
let selection = null; // { type: 'provider'|'job'|'dataset', value }
|
||||
|
||||
const SKELETON = `
|
||||
<div id="st-root" class="page-shell">
|
||||
<div id="st-spine"></div>
|
||||
<div id="st-dot"></div>
|
||||
|
||||
<section class="st-band card" data-band="sources">
|
||||
<div class="st-idx"><span class="n">01</span><span class="lb">SOURCES<br/>来源层</span></div>
|
||||
<div id="st-sources"></div>
|
||||
</section>
|
||||
|
||||
<section class="st-band card" data-band="process">
|
||||
<div class="st-idx"><span class="n">02</span><span class="lb">PROCESS<br/>加工层</span></div>
|
||||
<div id="st-process">
|
||||
<div class="st-jobs">
|
||||
<span class="sec-label">调度任务 JOBS</span>
|
||||
<div id="st-jobList"></div>
|
||||
</div>
|
||||
<div class="st-runs">
|
||||
<span class="sec-label">最近运行 RUNS</span>
|
||||
<div id="st-runsTable"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="st-band card" data-band="publish">
|
||||
<div class="st-idx"><span class="n">03</span><span class="lb">PUBLISH<br/>发布层</span></div>
|
||||
<div id="st-publish">
|
||||
<div class="st-gate">
|
||||
<span class="sec-label">盘后发布 RELEASE</span>
|
||||
<div class="bignum"><span class="n mono" id="st-pubnum">-</span><span class="cap">今日发布</span></div>
|
||||
<div class="win mono" id="st-pubwin"></div>
|
||||
<div class="toolrow" style="margin-top:8px;display:flex;gap:6px;">
|
||||
<input id="st-rel-date" style="width:88px;font-family:var(--font-mono);font-size:11px;background:var(--bg2);border:1px solid var(--line);border-radius:5px;padding:4px 6px;color:var(--t1)" />
|
||||
<button type="button" class="btn mini" id="st-rel-load">查看</button>
|
||||
<button type="button" class="btn danger mini" id="st-rel-backfill">补数</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="st-datasets">
|
||||
<span class="sec-label">数据集 DATASETS</span>
|
||||
<div id="st-datasetsTable"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="st-band card" data-band="audit">
|
||||
<div class="st-idx"><span class="n">04</span><span class="lb">AUDIT<br/>审计层</span></div>
|
||||
<div id="st-audit"></div>
|
||||
</section>
|
||||
</div>
|
||||
`;
|
||||
|
||||
function applySelectionClasses() {
|
||||
root.querySelectorAll("[data-sel-provider]").forEach((el) => el.classList.toggle("sel", selection && selection.type === "provider" && el.dataset.selProvider === selection.value));
|
||||
root.querySelectorAll("[data-sel-job]").forEach((el) => el.classList.toggle("sel", selection && selection.type === "job" && el.dataset.selJob === selection.value));
|
||||
root.querySelectorAll("[data-rel-job]").forEach((el) => el.classList.toggle("hi", selection && selection.type === "job" && el.dataset.relJob === selection.value));
|
||||
root.querySelectorAll("[data-rel-dataset]").forEach((el) => el.classList.toggle("hi", selection && selection.type === "dataset" && el.dataset.relDataset === selection.value));
|
||||
}
|
||||
function setSelection(type, value) {
|
||||
selection = (selection && selection.type === type && selection.value === value) ? null : { type, value };
|
||||
applySelectionClasses();
|
||||
}
|
||||
|
||||
function renderSources() {
|
||||
const v = S.sourcesView();
|
||||
const host = $("st-sources");
|
||||
if (!v) { host.innerHTML = `<div class="muted">正在加载…</div>`; return; }
|
||||
host.innerHTML = v.live.map((it) => {
|
||||
const health = it.health || {};
|
||||
const link = it._link || C.linkState(health);
|
||||
return `<div class="st-src card" data-sel-provider="${esc(it.provider)}" data-provider="${esc(it.provider)}">
|
||||
<div class="row">
|
||||
<span class="lamp link ${C.linkLampClass(link)}"></span>
|
||||
<span class="lamp act" data-act></span>
|
||||
<span class="nm">${esc(C.FLOW_LABEL[it.provider] || it.provider)}</span>
|
||||
${C.chipHtml(link, health.state || link)}
|
||||
</div>
|
||||
<div class="sub">${esc(C.FLOW_ROLE[it.provider] || it.role)} · 配置 ${(it.credential || {}).configured ? "已配置" : "未配置"} · ${it.calls_today ?? 0} 次</div>
|
||||
<div class="row" style="margin-top:6px;justify-content:space-between">
|
||||
<span class="lat mono">${health.latency_ms == null ? "-" : health.latency_ms + "ms"}</span>
|
||||
<button class="btn ghost mini" data-probe="${esc(it.provider)}">探测一次</button>
|
||||
</div>
|
||||
</div>`;
|
||||
}).join("") + (v.reserved.length ? `<div class="st-reserved">预留 ${v.reserved.length} 个<br/>未接入</div>` : "");
|
||||
S.bindProbeButtons(host, () => renderSources());
|
||||
host.querySelectorAll(".st-src").forEach((el) => el.addEventListener("click", (e) => {
|
||||
if (e.target.closest("button")) return;
|
||||
setSelection("provider", el.dataset.provider);
|
||||
}));
|
||||
applySelectionClasses();
|
||||
}
|
||||
|
||||
function renderProcess() {
|
||||
const v = S.jobsView();
|
||||
const jobHost = $("st-jobList");
|
||||
if (!v) { jobHost.innerHTML = `<div class="muted">正在加载…</div>`; return; }
|
||||
jobHost.innerHTML = v.jobs.map((job) => {
|
||||
const latest = v.latestByJob.get(job.id);
|
||||
return `<div class="st-job" data-sel-job="${esc(job.id)}" data-job="${esc(job.id)}">
|
||||
${C.chipHtml(latest ? latest.state : "idle")}
|
||||
<span class="nm mono">${esc(job.id)}</span><span class="at mono">${esc(job.at)}</span>
|
||||
<button class="btn ghost mini" data-run="${esc(job.id)}">触发</button>
|
||||
</div>`;
|
||||
}).join("");
|
||||
S.bindRunButtons(jobHost, () => renderProcess());
|
||||
jobHost.querySelectorAll(".st-job").forEach((el) => el.addEventListener("click", (e) => {
|
||||
if (e.target.closest("button")) return;
|
||||
setSelection("job", el.dataset.job);
|
||||
}));
|
||||
$("st-runsTable").innerHTML = C.table(["ID", "任务", "状态", "开始", "结束", "错误"], v.runs.map((r) => [
|
||||
`<span class="mono" data-rel-job="${esc(r.job_id)}">${r.id}</span>`,
|
||||
`<span class="mono k">${esc(r.job_id)}</span>`,
|
||||
`<span class="mono ${r.state === "failed" ? "fail" : r.state === "running" ? "warn" : "ok"}">${esc(r.state)}</span>`,
|
||||
`<span class="mono">${esc(timeShort(r.started_at))}</span>`, `<span class="mono">${esc(timeShort(r.finished_at))}</span>`,
|
||||
`<span class="fail">${esc(r.error || "")}</span>`,
|
||||
]));
|
||||
root.querySelectorAll("#st-runsTable tr").forEach((tr, i) => {
|
||||
if (i === 0) return;
|
||||
const run = v.runs[i - 1]; if (run) tr.dataset.relJob = run.job_id;
|
||||
});
|
||||
applySelectionClasses();
|
||||
}
|
||||
|
||||
function renderPublish() {
|
||||
const v = S.releaseView();
|
||||
const dateInput = $("st-rel-date");
|
||||
if (!dateInput.value) dateInput.value = C.state.releaseDate;
|
||||
if (!v) { $("st-pubnum").textContent = "-"; $("st-datasetsTable").innerHTML = `<div class="muted">正在加载…</div>`; return; }
|
||||
$("st-pubnum").textContent = v.pubs.length;
|
||||
const eod = (S.overviewView() || {}).eod || {};
|
||||
$("st-pubwin").textContent = eod.state === "waiting_upstream" ? `等待上游 · 已试 ${eod.attempts ?? "-"} 次` : "";
|
||||
$("st-datasetsTable").innerHTML = C.table(["数据集", "活跃批次", "上一批次", "状态", "发布时间", "操作"], v.pubs.map((p) => [
|
||||
`<span class="mono k" data-rel-dataset="${esc(p.dataset)}">${esc(p.dataset)}</span>`,
|
||||
`<span class="mono">${esc(p.active_batch)}</span>`, `<span class="mono">${esc(p.prev_batch || "-")}</span>`,
|
||||
C.chipHtml(p.state), `<span class="mono">${esc(p.published_at)}</span>`,
|
||||
p.prev_batch ? `<button class="btn danger mini" data-rollback="${esc(p.dataset)}">回滚</button>` : "-",
|
||||
]));
|
||||
root.querySelectorAll("#st-datasetsTable tr").forEach((tr, i) => {
|
||||
if (i === 0) return;
|
||||
const p = v.pubs[i - 1]; if (p) tr.dataset.relDataset = p.dataset;
|
||||
});
|
||||
S.bindRollbackButtons($("st-datasetsTable"), () => renderPublish());
|
||||
applySelectionClasses();
|
||||
}
|
||||
|
||||
function renderAudit() {
|
||||
const v = S.auditView();
|
||||
const host = $("st-audit");
|
||||
if (!v) { host.innerHTML = `<div class="muted">正在加载…</div>`; return; }
|
||||
host.innerHTML = v.items.slice(0, 8).map((a) => `
|
||||
<div class="st-audit-line ${String(a.action).includes("rollback") ? "warn" : ""}">
|
||||
${esc(timeShort(a.created_at))} <b>${esc(a.actor)}</b> ${esc(a.action)} · ${esc(a.target)}${a.detail ? " · " + esc(a.detail) : ""}
|
||||
</div>`).join("");
|
||||
}
|
||||
|
||||
function refresh() { if (!root) return; renderSources(); renderProcess(); renderPublish(); renderAudit(); }
|
||||
|
||||
/* ---------------------------------------------------------------- 纵向贯穿动效 */
|
||||
const BAND_ORDER = ["sources", "process", "publish", "audit"];
|
||||
function pulseBand(key, err) {
|
||||
if (!root) return;
|
||||
const el = root.querySelector(`.st-band[data-band="${key}"]`);
|
||||
if (!el) return;
|
||||
el.classList.add("pulse"); el.classList.toggle("err", !!err);
|
||||
clearTimeout(el._t);
|
||||
el._t = setTimeout(() => el.classList.remove("pulse", "err"), 700);
|
||||
}
|
||||
function travelSpine(fromKey, toKey) {
|
||||
if (C.state.reduced || !root) return;
|
||||
const dot = $("st-dot");
|
||||
const a = root.querySelector(`.st-band[data-band="${fromKey}"]`);
|
||||
const b = root.querySelector(`.st-band[data-band="${toKey}"]`);
|
||||
if (!a || !b) return;
|
||||
const rootRect = $("st-root").getBoundingClientRect();
|
||||
const ar = a.getBoundingClientRect(), br = b.getBoundingClientRect();
|
||||
const y0 = ar.top - rootRect.top + 20, y1 = br.top - rootRect.top + 20;
|
||||
dot.style.top = y0 + "px"; dot.style.opacity = "0";
|
||||
if (dot._anim) dot._anim.cancel();
|
||||
dot._anim = dot.animate([
|
||||
{ transform: "translateY(0)", opacity: 0 },
|
||||
{ transform: "translateY(0)", opacity: 1, offset: .1 },
|
||||
{ transform: `translateY(${y1 - y0}px)`, opacity: 1, offset: .9 },
|
||||
{ transform: `translateY(${y1 - y0}px)`, opacity: 0 },
|
||||
], { duration: 620, easing: "linear" });
|
||||
}
|
||||
|
||||
function onEvent(evt) {
|
||||
if (!root || !mounted) return;
|
||||
if (C.FLOW_PROVIDERS.includes(evt.channel)) {
|
||||
const act = root.querySelector(`.st-src[data-provider="${evt.channel}"] [data-act]`);
|
||||
if (act) {
|
||||
act.classList.remove("on", "err"); act.classList.add("on"); if (evt.kind === "error") act.classList.add("err");
|
||||
setTimeout(() => act.classList.remove("on", "err"), 800);
|
||||
}
|
||||
pulseBand("sources", evt.kind === "error");
|
||||
safeTimeout(() => { travelSpine("sources", "process"); pulseBand("process"); renderSources(); }, 200);
|
||||
} else if (evt.channel === "junction") {
|
||||
pulseBand("process", evt.kind === "error");
|
||||
safeTimeout(() => { travelSpine("process", "publish"); pulseBand("publish"); renderProcess(); }, 200);
|
||||
} else if (evt.channel === "tx") {
|
||||
pulseBand("publish", evt.kind === "rollback");
|
||||
safeTimeout(() => { travelSpine("publish", "audit"); pulseBand("audit", evt.kind === "rollback"); renderPublish(); }, 200);
|
||||
} else if (evt.channel === "audit") {
|
||||
pulseBand("audit", evt.kind === "rollback");
|
||||
renderAudit();
|
||||
}
|
||||
}
|
||||
|
||||
function mount(el) {
|
||||
root = el;
|
||||
mounted = true;
|
||||
selection = null;
|
||||
root.innerHTML = SKELETON;
|
||||
refresh();
|
||||
S.bindReleaseDateReload(root, "#st-rel-date", "#st-rel-load", () => renderPublish());
|
||||
S.bindBackfillButton(root, "#st-rel-backfill", () => renderPublish());
|
||||
unsubs.push(C.Bus.on("data", refresh));
|
||||
unsubs.push(C.Bus.on("event", onEvent));
|
||||
}
|
||||
function unmount() {
|
||||
mounted = false;
|
||||
unsubs.forEach((fn) => fn()); unsubs = [];
|
||||
pendingTimers.forEach(clearTimeout); pendingTimers = [];
|
||||
root = null;
|
||||
}
|
||||
|
||||
window.HUB_LAYOUTS = window.HUB_LAYOUTS || {};
|
||||
window.HUB_LAYOUTS.strata = { mount, unmount };
|
||||
})();
|
||||
Reference in New Issue
Block a user