feat(HEL-382): 搭建 datahub 底座和盘后正式数据链路
新增独立 xiaobai-datahub 服务（SQLite WAL、Tushare 盘后发布、/v1 契约和管理后台），不改现站页面与数据链路。 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
c2ebc0ab91
commit
3498dd7a4b
@@ -0,0 +1,268 @@
|
||||
const state = { csrf: "", page: "overview" };
|
||||
|
||||
function $(id) { return document.getElementById(id); }
|
||||
|
||||
async function api(path, options = {}) {
|
||||
const headers = Object.assign({ "Content-Type": "application/json" }, options.headers || {});
|
||||
if (state.csrf && (options.method || "GET") !== "GET") headers["X-CSRF-Token"] = state.csrf;
|
||||
const res = await fetch(path, Object.assign({}, options, { headers, credentials: "same-origin" }));
|
||||
const body = await res.json();
|
||||
if (!res.ok) {
|
||||
const msg = (body.error && body.error.message) || body.error || res.statusText;
|
||||
throw new Error(msg);
|
||||
}
|
||||
return body;
|
||||
}
|
||||
|
||||
function show(id) {
|
||||
["login-view", "change-view", "shell"].forEach((key) => { $(key).hidden = key !== id; });
|
||||
}
|
||||
|
||||
function esc(value) {
|
||||
return String(value ?? "").replace(/[&<>"]/g, (ch) => ({ "&": "&", "<": "<", ">": ">", '"': """ }[ch]));
|
||||
}
|
||||
|
||||
function table(headers, rows) {
|
||||
const thead = headers.map((h) => `<th>${esc(h)}</th>`).join("");
|
||||
const body = rows.length
|
||||
? rows.map((cols) => `<tr>${cols.map((c) => `<td>${c}</td>`).join("")}</tr>`).join("")
|
||||
: `<tr><td colspan="${headers.length}">暂无数据</td></tr>`;
|
||||
return `<table><thead><tr>${thead}</tr></thead><tbody>${body}</tbody></table>`;
|
||||
}
|
||||
|
||||
async function boot() {
|
||||
try {
|
||||
const session = await api("/admin/api/session");
|
||||
state.csrf = session.csrf;
|
||||
$("who").textContent = session.username;
|
||||
if (session.must_change) { show("change-view"); return; }
|
||||
show("shell");
|
||||
await render();
|
||||
} catch {
|
||||
show("login-view");
|
||||
}
|
||||
}
|
||||
|
||||
$("login-form").addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
const form = new FormData(event.target);
|
||||
$("login-error").hidden = true;
|
||||
try {
|
||||
const result = await api("/admin/api/login", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ username: form.get("username"), password: form.get("password") }),
|
||||
});
|
||||
state.csrf = result.csrf;
|
||||
if (result.must_change) show("change-view");
|
||||
else { show("shell"); await render(); }
|
||||
} catch (err) {
|
||||
$("login-error").hidden = false;
|
||||
$("login-error").textContent = err.message;
|
||||
}
|
||||
});
|
||||
|
||||
$("change-form").addEventListener("submit", async (event) => {
|
||||
event.preventDefault();
|
||||
const form = new FormData(event.target);
|
||||
try {
|
||||
await api("/admin/api/change-password", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ current: form.get("current"), new_password: form.get("new_password") }),
|
||||
});
|
||||
show("shell");
|
||||
await render();
|
||||
} catch (err) {
|
||||
$("change-error").hidden = false;
|
||||
$("change-error").textContent = err.message;
|
||||
}
|
||||
});
|
||||
|
||||
$("logout-btn").addEventListener("click", async () => {
|
||||
await api("/admin/api/logout", { method: "POST", body: "{}" });
|
||||
show("login-view");
|
||||
});
|
||||
|
||||
$("theme-btn").addEventListener("click", () => {
|
||||
const root = document.documentElement;
|
||||
const next = root.getAttribute("data-theme") === "night" ? "" : "night";
|
||||
if (next) root.setAttribute("data-theme", next);
|
||||
else root.removeAttribute("data-theme");
|
||||
$("theme-btn").textContent = next ? "日间" : "夜间";
|
||||
});
|
||||
|
||||
document.querySelectorAll("nav button").forEach((btn) => {
|
||||
btn.addEventListener("click", () => {
|
||||
document.querySelectorAll("nav button").forEach((item) => item.classList.remove("active"));
|
||||
btn.classList.add("active");
|
||||
state.page = btn.dataset.page;
|
||||
render();
|
||||
});
|
||||
});
|
||||
|
||||
async function render() {
|
||||
const page = $("page");
|
||||
if (state.page === "overview") {
|
||||
const data = await api("/admin/api/overview");
|
||||
$("phase").textContent = data.session_phase;
|
||||
page.innerHTML = `
|
||||
<div class="cards">
|
||||
<div class="card"><div class="muted">交易日</div><strong>${esc(data.trade_date)}</strong></div>
|
||||
<div class="card"><div class="muted">阶段</div><strong>${esc(data.session_phase)}</strong></div>
|
||||
<div class="card"><div class="muted">今日发布</div><strong>${data.publications.length}</strong></div>
|
||||
<div class="card"><div class="muted">异常批次</div><strong class="${data.anomalies.length ? "fail" : "ok"}">${data.anomalies.length}</strong></div>
|
||||
</div>
|
||||
<h2>最近调用</h2>
|
||||
${table(["时间", "源", "端点", "结果", "耗时"], data.recent_calls.map((row) => [
|
||||
esc(row.created_at), esc(row.provider), esc(row.endpoint),
|
||||
row.ok ? '<span class="ok">成功</span>' : `<span class="fail">${esc(row.error)}</span>`,
|
||||
`${row.latency_ms ?? "-"} ms`,
|
||||
]))}
|
||||
`;
|
||||
return;
|
||||
}
|
||||
if (state.page === "sources") {
|
||||
const data = await api("/admin/api/sources");
|
||||
page.innerHTML = `<h2>数据源</h2>` + table(
|
||||
["源", "角色", "状态", "凭据", "操作"],
|
||||
data.items.map((item) => {
|
||||
const cred = item.credential || {};
|
||||
const credText = cred.configured ? `已配置 · ${esc(cred.last4 || "****")}` : "未配置";
|
||||
return [
|
||||
esc(item.provider),
|
||||
esc(item.role),
|
||||
esc((item.health && (item.health.state || item.health.status)) || "-"),
|
||||
credText,
|
||||
`<button data-probe="${esc(item.provider)}">探测一次</button>`,
|
||||
];
|
||||
}),
|
||||
);
|
||||
page.querySelectorAll("[data-probe]").forEach((btn) => {
|
||||
btn.addEventListener("click", async () => {
|
||||
const result = await api(`/admin/api/sources/${btn.dataset.probe}/probe`, { method: "POST", body: "{}" });
|
||||
alert(JSON.stringify(result));
|
||||
render();
|
||||
});
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (state.page === "jobs") {
|
||||
const data = await api("/admin/api/jobs");
|
||||
page.innerHTML = `
|
||||
<h2>调度任务</h2>
|
||||
${table(["任务", "时刻", "操作"], data.jobs.map((job) => [
|
||||
`${esc(job.id)} · ${esc(job.title)}`, esc(job.at),
|
||||
`<button data-run="${esc(job.id)}">手动触发</button>`,
|
||||
]))}
|
||||
<h3>最近运行</h3>
|
||||
${table(["ID", "任务", "状态", "开始", "结束", "错误"], data.runs.map((row) => [
|
||||
row.id, esc(row.job_id), esc(row.state), esc(row.started_at), esc(row.finished_at), esc(row.error),
|
||||
]))}
|
||||
`;
|
||||
page.querySelectorAll("[data-run]").forEach((btn) => {
|
||||
btn.addEventListener("click", async () => {
|
||||
const date = prompt("交易日 YYYYMMDD（可留空=今天）", "") || "";
|
||||
await api(`/admin/api/jobs/${btn.dataset.run}/run`, { method: "POST", body: JSON.stringify({ trade_date: date }) });
|
||||
render();
|
||||
});
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (state.page === "release") {
|
||||
const date = new Date().toISOString().slice(0, 10).replace(/-/g, "");
|
||||
const data = await api(`/admin/api/batches?date=${date}`);
|
||||
page.innerHTML = `
|
||||
<h2>盘后发布 ${esc(data.trade_date)}</h2>
|
||||
<div class="toolbar">
|
||||
<label>日期 <input id="rel-date" value="${esc(data.trade_date)}" /></label>
|
||||
<button type="button" id="rel-load">查看</button>
|
||||
<button type="button" id="rel-backfill">补数</button>
|
||||
</div>
|
||||
<h3>当前映射</h3>
|
||||
${table(["数据集", "活跃批次", "上一批次", "状态", "发布时间", "操作"], data.publications.map((row) => [
|
||||
esc(row.dataset), esc(row.active_batch), esc(row.prev_batch), esc(row.state), esc(row.published_at),
|
||||
row.prev_batch ? `<button class="danger" data-rollback="${esc(row.dataset)}">回滚</button>` : "-",
|
||||
]))}
|
||||
<h3>批次</h3>
|
||||
${table(["batch_id", "数据集", "状态", "行数", "错误"], data.batches.map((row) => [
|
||||
esc(row.batch_id), esc(row.dataset), esc(row.state), row.rows_out ?? "", esc(row.error),
|
||||
]))}
|
||||
`;
|
||||
$bindRelease(page);
|
||||
return;
|
||||
}
|
||||
if (state.page === "datasets") {
|
||||
const data = await api("/admin/api/datasets?date=");
|
||||
page.innerHTML = `
|
||||
<h2>数据集 / 质量 ${esc(data.trade_date)}</h2>
|
||||
${table(["数据集", "批次", "状态", "发布时间"], data.publications.map((row) => [
|
||||
esc(row.dataset), esc(row.active_batch), esc(row.state), esc(row.published_at),
|
||||
]))}
|
||||
<h3>源间差异</h3>
|
||||
${table(["指标", "左", "右", "偏差", "样本"], data.diff_reports.map((row) => [
|
||||
esc(row.metric), esc(row.left_value), esc(row.right_value), esc(row.deviation), row.sample_count ?? "",
|
||||
]))}
|
||||
`;
|
||||
return;
|
||||
}
|
||||
if (state.page === "audit") {
|
||||
const data = await api("/admin/api/audit");
|
||||
page.innerHTML = `<h2>审计</h2>` + table(
|
||||
["时间", "操作者", "动作", "对象", "详情"],
|
||||
data.items.map((row) => [esc(row.created_at), esc(row.actor), esc(row.action), esc(row.target), esc(row.detail)]),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function $bindRelease(page) {
|
||||
page.querySelector("#rel-load").addEventListener("click", async () => {
|
||||
const date = page.querySelector("#rel-date").value;
|
||||
const data = await api(`/admin/api/batches?date=${encodeURIComponent(date)}`);
|
||||
state.page = "release";
|
||||
// re-render with fetched date by writing location hash
|
||||
history.replaceState(null, "", `#release-${date}`);
|
||||
$("page").innerHTML = renderRelease(data);
|
||||
$bindRelease($("page"));
|
||||
});
|
||||
page.querySelector("#rel-backfill").addEventListener("click", () => dangerous("backfill"));
|
||||
page.querySelectorAll("[data-rollback]").forEach((btn) => {
|
||||
btn.addEventListener("click", () => dangerous("rollback", btn.dataset.rollback));
|
||||
});
|
||||
}
|
||||
|
||||
function renderRelease(data) {
|
||||
return `
|
||||
<h2>盘后发布 ${esc(data.trade_date)}</h2>
|
||||
<div class="toolbar">
|
||||
<label>日期 <input id="rel-date" value="${esc(data.trade_date)}" /></label>
|
||||
<button type="button" id="rel-load">查看</button>
|
||||
<button type="button" id="rel-backfill">补数</button>
|
||||
</div>
|
||||
<h3>当前映射</h3>
|
||||
${table(["数据集", "活跃批次", "上一批次", "状态", "发布时间", "操作"], data.publications.map((row) => [
|
||||
esc(row.dataset), esc(row.active_batch), esc(row.prev_batch), esc(row.state), esc(row.published_at),
|
||||
row.prev_batch ? `<button class="danger" data-rollback="${esc(row.dataset)}">回滚</button>` : "-",
|
||||
]))}
|
||||
<h3>批次</h3>
|
||||
${table(["batch_id", "数据集", "状态", "行数", "错误"], data.batches.map((row) => [
|
||||
esc(row.batch_id), esc(row.dataset), esc(row.state), row.rows_out ?? "", esc(row.error),
|
||||
]))}
|
||||
`;
|
||||
}
|
||||
|
||||
async function dangerous(kind, dataset) {
|
||||
const date = ($("rel-date") && $("rel-date").value) || "";
|
||||
const ds = dataset || prompt("数据集（daily / valuation / moneyflow / auction / index_daily / reference）", "daily");
|
||||
if (!ds) return;
|
||||
const password = prompt("二次确认：输入管理密码");
|
||||
if (!password) return;
|
||||
const confirmWord = `${ds}:${date}`;
|
||||
const typed = prompt(`请输入确认词：${confirmWord}`);
|
||||
const path = kind === "rollback" ? "/admin/api/rollback" : "/admin/api/backfill";
|
||||
await api(path, {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ dataset: ds, trade_date: date, password, confirm: typed }),
|
||||
});
|
||||
render();
|
||||
}
|
||||
|
||||
boot();
|
||||
@@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>xiaobai-datahub 管理后台</title>
|
||||
<link rel="stylesheet" href="/admin/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<section id="login-view" class="panel auth-panel">
|
||||
<h1>数据中枢</h1>
|
||||
<p class="muted">内网管理后台，用于查看源状态、调度和盘后发布批次。</p>
|
||||
<form id="login-form">
|
||||
<label>账号 <input name="username" value="hub_admin" autocomplete="username" /></label>
|
||||
<label>密码 <input name="password" type="password" autocomplete="current-password" /></label>
|
||||
<button type="submit">登录</button>
|
||||
<p id="login-error" class="error" hidden></p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section id="change-view" class="panel auth-panel" hidden>
|
||||
<h1>修改初始密码</h1>
|
||||
<form id="change-form">
|
||||
<label>当前密码 <input name="current" type="password" /></label>
|
||||
<label>新密码（至少 8 位） <input name="new_password" type="password" /></label>
|
||||
<button type="submit">保存并继续</button>
|
||||
<p id="change-error" class="error" hidden></p>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<section id="shell" hidden>
|
||||
<header class="top">
|
||||
<strong>xiaobai-datahub</strong>
|
||||
<span id="phase" class="pill"></span>
|
||||
<span id="who" class="muted"></span>
|
||||
<button type="button" id="theme-btn" class="ghost">夜间</button>
|
||||
<button type="button" id="logout-btn" class="ghost">退出</button>
|
||||
</header>
|
||||
<nav>
|
||||
<button data-page="overview" class="active">总览</button>
|
||||
<button data-page="sources">数据源</button>
|
||||
<button data-page="jobs">调度任务</button>
|
||||
<button data-page="release">盘后发布</button>
|
||||
<button data-page="datasets">数据集</button>
|
||||
<button data-page="audit">审计</button>
|
||||
</nav>
|
||||
<main id="page"></main>
|
||||
</section>
|
||||
</div>
|
||||
<script src="/admin/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,51 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #f4f5f7;
|
||||
--surface: #ffffff;
|
||||
--text: #1f2329;
|
||||
--muted: #646a73;
|
||||
--line: #dee0e3;
|
||||
--action: #3370ff;
|
||||
--danger: #e04536;
|
||||
--ok: #16a34a;
|
||||
--warn: #b45309;
|
||||
--radius: 8px;
|
||||
--pad: 16px;
|
||||
font-family: "Segoe UI", "PingFang SC", "Noto Sans SC", sans-serif;
|
||||
}
|
||||
:root[data-theme="night"] {
|
||||
color-scheme: dark;
|
||||
--bg: #111318;
|
||||
--surface: #1b1e24;
|
||||
--text: #e8eaed;
|
||||
--muted: #9aa0a6;
|
||||
--line: #2a2f38;
|
||||
--action: #5b8cff;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; background: var(--bg); color: var(--text); }
|
||||
.panel, header.top, nav, main { background: var(--surface); }
|
||||
.auth-panel { max-width: 420px; margin: 12vh auto; padding: 28px; border-radius: var(--radius); border: 1px solid var(--line); }
|
||||
label { display: block; margin: 12px 0; }
|
||||
input, select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg); color: var(--text); }
|
||||
button { background: var(--action); color: #fff; border: 0; border-radius: 4px; padding: 8px 14px; cursor: pointer; }
|
||||
button.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
|
||||
button.danger { background: var(--danger); }
|
||||
.muted { color: var(--muted); }
|
||||
.error { color: var(--danger); }
|
||||
.top { display: flex; gap: 12px; align-items: center; padding: 10px var(--pad); border-bottom: 1px solid var(--line); }
|
||||
nav { display: flex; gap: 4px; padding: 8px var(--pad); border-bottom: 1px solid var(--line); }
|
||||
nav button { background: transparent; color: var(--muted); }
|
||||
nav button.active { color: var(--action); background: transparent; font-weight: 600; }
|
||||
main { padding: var(--pad); min-height: calc(100vh - 96px); }
|
||||
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
|
||||
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
|
||||
table { width: 100%; border-collapse: collapse; font-size: 13px; }
|
||||
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
|
||||
.pill { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); }
|
||||
.ok { color: var(--ok); }
|
||||
.warn { color: var(--warn); }
|
||||
.fail { color: var(--danger); }
|
||||
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; align-items: end; }
|
||||
.toolbar label { margin: 0; }
|
||||
dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); padding: 20px; }
|
||||
Reference in New Issue
Block a user