系统运行概览
` - + `集中查看服务状态、资源用量与外部能力，数据默认每 10 秒自动更新。
${escapeHtml(label)}${badgeHTML}${affordance}
`
+ (value ? `${value}${unit ? ` ${escapeHtml(unit)}` : ""}
` : "")
@@ -196,15 +194,16 @@ function renderOpsSummary() {
const cost = Number(usage.cost_cny) || 0;
const cost7d = byDay.reduce((sum, row) => sum + (Number(row.cost_cny) || 0), 0);
- root.innerHTML = [
+ const primaryCards = [
summaryCard({
+ tab: "run", target: "s-runtime",
label: "任务运行", value: String(runningTasks), unit: "正在运行",
sub: cancellingTasks ? `取消中 ${cancellingTasks}` : (errorTasks ? "存在执行错误记录" : "当前无执行异常"),
meta: [`活动任务 ${activeTasks}`, `累计 ${tasks.total || 0}`],
badge: errorTasks ? { text: `错误 ${errorTasks}`, tone: "danger" } : { text: "正常", tone: "ok" },
}),
summaryCard({
- action: capacityEnabled ? "open-capacity" : "", label: "执行容量",
+ tab: "run", target: "s-sandbox-capacity", label: "执行容量",
value: !capacity ? "汇总中" : (capacityEnabled ? `${activeExecs} / ${activeLimit || "—"}` : "未启用"),
unit: capacityEnabled ? "使用中 / 上限" : "",
sub: !capacity ? "正在读取容器状态" : (capacityEnabled
@@ -219,7 +218,7 @@ function renderOpsSummary() {
tone: capacityTone, progress: capacityEnabled && activeLimit ? capacityPct : null,
}),
summaryCard({
- target: "s-windows-node", label: "专业软件节点",
+ tab: "resources", target: "s-windows-node", label: "专业软件节点",
value: softwareNodesLoaded ? `${nodeOnline} / ${nodeTotal}` : "汇总中", unit: softwareNodesLoaded ? "在线 / 总数" : "",
sub: softwareNodesLoaded ? `活动任务 ${nodeJobs}` : "正在读取节点状态",
meta: softwareNodesLoaded ? [`离线 ${nodeOffline}`, `禁用 ${nodeDisabled}`] : [],
@@ -228,7 +227,7 @@ function renderOpsSummary() {
: null,
}),
summaryCard({
- target: "s-toolfail", label: "工具健康",
+ tab: "quality", target: "s-toolfail", label: "工具健康",
value: toolFailuresData ? (failureCount ? `${failureCount} 次失败` : "正常") : "汇总中",
unit: toolFailuresData ? "近 24 小时" : "",
sub: toolFailuresData
@@ -239,27 +238,43 @@ function renderOpsSummary() {
? (toolTone ? { text: systemicCount || malformed ? "需处理" : "有记录", tone: toolTone } : { text: "正常", tone: "ok" })
: null,
}),
+ ];
+ const secondaryCards = [
summaryCard({
- target: "s-users", label: "活跃用户", value: String(activeUsers), unit: "近 7 天活跃",
+ tab: "users", target: "s-users", label: "活跃用户", value: String(activeUsers), unit: "近 7 天活跃",
sub: `活跃率 ${activeRate}% · 总用户 ${userTotal}`,
meta: [`活跃 ${activeUsers}`, `未活跃 ${Math.max(0, userTotal - activeUsers)}`], progress: activeRate,
}),
summaryCard({
- target: "s-usage", label: "Token 与缓存", value: fmtTokens(tokens7d), unit: "近 7 天",
+ tab: "usage", target: "s-usage", label: "Token 与缓存", value: fmtTokens(tokens7d), unit: "近 7 天",
sub: `缓存命中 ${hitRate}%`,
meta: [`输入 ${fmtTokens(tokensIn7d)}`, `输出 ${fmtTokens(tokensOut7d)}`], progress: hitRate,
}),
summaryCard({
- target: "s-usage", label: "成本", value: fmtCNY(cost7d), unit: "近 7 天",
+ tab: "usage", target: "s-usage", label: "成本", value: fmtCNY(cost7d), unit: "近 7 天",
sub: `累计 ${fmtCNY(cost)}`,
}),
summaryCard({
- target: "s-storage", label: "存储", value: storageValue, unit: storage ? "物理总占用" : "",
+ tab: "resources", target: "s-storage", label: "存储", value: storageValue, unit: storage ? "物理总占用" : "",
sub: storageSub, meta: storageMeta,
}),
- ].join("");
- const capacityCard = root.querySelector('[data-summary-action="open-capacity"]');
- if (capacityCard) capacityCard.onclick = openCapacityDrawer;
+ ];
+ root.innerHTML = `${primaryCards.join("")}
`
+ + `${secondaryCards.join("")}
`;
+ root.querySelectorAll("[data-summary-tab]").forEach(card => {
+ card.onclick = () => activateTab(card.dataset.summaryTab, card.dataset.summaryTarget);
+ });
+
+ const attentionCount = Number(Boolean(errorTasks))
+ + Number(Boolean(capacityEnabled && (capacity.memory_paused || queuedExecs)))
+ + Number(Boolean(nodeTone)) + Number(Boolean(toolTone));
+ const health = $("overview-health");
+ if (health) {
+ health.className = `summary-badge overview-health ${attentionCount ? "warn" : "ok"}`;
+ health.textContent = attentionCount ? `${attentionCount} 项需关注` : "全部正常";
+ }
+ renderRuntimeDetails();
+ renderCapacitySection();
if ($("capacity-drawer").classList.contains("show")) renderCapacityDrawer();
}
@@ -269,18 +284,37 @@ function capacityDetailItem(label, value, hint = "", tone = "") {
+ (hint ? `${escapeHtml(hint)}` : "") + ``;
}
-function renderCapacityDrawer() {
- const capacity = sandboxCapacityData;
- const body = $("capacity-drawer-body");
- const status = $("capacity-drawer-status");
- if (!capacity || !body || !status) return;
- if (capacity.enabled === false) {
- status.className = "summary-badge";
- status.textContent = "未启用";
- body.innerHTML = `Docker Sandbox 未启用，当前没有可展示的执行容量。
`;
- return;
- }
+function detailStat(label, value, tone = "") {
+ return `${escapeHtml(label)}`
+ + `${escapeHtml(String(value))}
`;
+}
+function renderRuntimeDetails() {
+ const root = $("s-runtime");
+ if (!root || !overviewData) return;
+ const runtime = overviewData.runtime || {};
+ const tasks = overviewData.tasks || {};
+ const runStatuses = tasks.by_run_status || {};
+ const taskStatuses = tasks.by_status || {};
+ const running = (Number(runStatuses.running) || 0) + (Number(runStatuses.cancelling) || 0);
+ const errors = Number(runStatuses.error) || 0;
+ root.innerHTML = `任务运行
` + + `与顶部总览使用同一份实时数据
`
+ + detailStat("正在运行", running, errors ? "warn" : "")
+ + detailStat("取消中", Number(runStatuses.cancelling) || 0)
+ + detailStat("错误记录", errors, errors ? "danger" : "")
+ + detailStat("活动任务", Number(taskStatuses.active) || 0)
+ + detailStat("累计任务", Number(tasks.total) || 0)
+ + detailStat("执行线程", `${Number(runtime.active_runs) || 0} / ${Number(runtime.max_workers) || "—"}`)
+ + detailStat("SSE 订阅", Number(runtime.sse_subs) || 0)
+ + detailStat("内存峰值", runtime.rss_peak_mb == null ? "—" : `${Math.round(runtime.rss_peak_mb)} MB`)
+ + `
正在读取执行容量…
`;
+ if (capacity.enabled === false) return `Docker Sandbox 未启用，当前没有可展示的执行容量。
`;
const limits = capacity.limits || {};
const foregroundRunning = Number(capacity.foreground_running) || 0;
const backgroundRunning = Number(capacity.background_running) || 0;
@@ -292,10 +326,7 @@ function renderCapacityDrawer() {
const available = Math.max(0, Number(capacity.admit_available) || 0);
const users = Object.entries(capacity.per_user || {}).sort((a, b) => (Number(b[1]) || 0) - (Number(a[1]) || 0));
const cpuLoad = (capacity.cpu_load || []).map(value => Number(value).toFixed(2)).join(" / ") || "—";
-
- status.className = `summary-badge ${capacity.memory_paused ? "danger" : (queued ? "warn" : "ok")}`;
- status.textContent = capacity.memory_paused ? "暂停放行" : (queued ? `排队 ${queued}` : "运行正常");
- body.innerHTML = (capacity.memory_paused
+ return (capacity.memory_paused
? `内存压力已暂停新任务放行运行中的任务不受影响；资源恢复后会继续调度。
`
: "")
+ `执行容量
` + + `队列、容器生命周期、单用户占用与宿主资源
Token、缓存与成本
` + + `顶部总览的完整指标口径
`
+ + detailStat("近 7 天 Token", fmtTokens(input7d + output7d))
+ + detailStat("近 7 天输入", fmtTokens(input7d))
+ + detailStat("近 7 天输出", fmtTokens(output7d))
+ + detailStat("缓存命中率", `${hitRate}%`)
+ + detailStat("近 7 天成本", fmtCNY(cost7d))
+ + detailStat("累计成本", fmtCNY(usage.cost_cny))
+ + detailStat("累计输入", fmtTokens(usage.tokens_in))
+ + detailStat("累计输出", fmtTokens(usage.tokens_out))
+ + `
`
+ const userOverview = (overviewData && overviewData.users) || {};
+ const userTotal = Number(userOverview.total) || 0;
+ const activeUsers = Number(userOverview.active_7d) || 0;
+ const activity = ``;
+ $("s-users").innerHTML = activity + `
用户活跃
` + + `近 7 天口径，与顶部总览一致
`
+ + detailStat("近 7 天活跃", activeUsers)
+ + detailStat("总用户", userTotal)
+ + detailStat("活跃率", `${userTotal ? Math.round(activeUsers / userTotal * 100) : 0}%`)
+ + detailStat("近 7 天未活跃", Math.max(0, userTotal - activeUsers))
+ + `
`
+ ``
+ tierLegendHTML()
+ ``
@@ -997,7 +1081,17 @@ function renderStorage(d) {
+ `
各用户用量（${rangeLabel(d.range)}）
${ctrlHTML("u", d.range, d.sort)}| ${r.scanned_at ? fmtTime(r.scanned_at) : "—"} | ` + ``; }).join("") || `||||||
| 无数据 | ||||||
| 用户 | 配额占用 | 占配额 | 文件数 | 回收站 | 物理合计 | 扫描于 |
|---|
`
- + ``
- + ``
+ + ``
+ + `加载中`
+ + ` `
+ + ``
+ `
`;
- renderOpsSummary();
- document.querySelectorAll("#toc a").forEach(a => {
- a.onclick = (e) => {
- e.preventDefault();
- const el = $(a.dataset.target);
- if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
- };
+ document.querySelectorAll(".workspace-tab").forEach(button => {
+ button.onclick = () => activateTab(button.dataset.tab);
});
- setupScrollSpy();
+ const initial = parseTabHash();
+ activateTab(initial.tab, initial.target, { updateHash: false, scroll: false });
+ renderOpsSummary();
}
-// 滚动高亮当前目录项(IntersectionObserver,粗粒度即可)
-function setupScrollSpy() {
- const links = {};
- document.querySelectorAll("#toc a").forEach(a => { links[a.dataset.target] = a; });
- const obs = new IntersectionObserver((entries) => {
- entries.forEach(en => {
- if (!en.isIntersecting) return;
- Object.values(links).forEach(l => l.classList.remove("active"));
- if (links[en.target.id]) links[en.target.id].classList.add("active");
- });
- }, { rootMargin: "-70px 0px -65% 0px", threshold: 0 });
- SECTIONS.forEach(([id]) => { const el = $(id); if (el) obs.observe(el); });
+function tabPanel(id, content) {
+ const tab = TABS.find(item => item[0] === id);
+ return `系统总览
` + + `运行状态与关键运营指标，每 10 秒自动更新
`
+ + tabPanel("run", ``)
+ + tabPanel("usage", ``)
+ + tabPanel("users", ``)
+ + tabPanel("resources", ``)
+ + tabPanel("integrations", ``)
+ + tabPanel("quality", ``)
+ + `
${escapeHtml(tab[1])}
${escapeHtml(tab[2])}