161 lines
7.7 KiB
JavaScript
161 lines
7.7 KiB
JavaScript
import { api, stats } from "../api.js";
|
|
import { emptyChart, mixedChart } from "../charts.js";
|
|
import { emptyState, sectionHeader } from "../components.js";
|
|
import {
|
|
escapeHtml, formatCount, formatDateTime, formatNumber,
|
|
} from "../format.js";
|
|
|
|
function taskRows(tasks) {
|
|
// Order comes from backend (_task_records started_at DESC); do not re-sort here.
|
|
const entries = Object.entries(tasks || {});
|
|
if (!entries.length) return emptyState("暂无任务记录", "运行一次同步、快照或发现后会写入最近结果。");
|
|
return `<div class="table-wrap">
|
|
<table class="data-table">
|
|
<thead><tr><th>任务</th><th>结果</th><th>完成时间</th><th>摘要 / 错误</th></tr></thead>
|
|
<tbody>
|
|
${entries.map(([name, record]) => {
|
|
const summary = record.summary && typeof record.summary === "object"
|
|
? Object.entries(record.summary)
|
|
.filter(([key]) => ["added", "removed", "candidates", "notified", "ok", "failed", "total", "completed", "backup_error"].includes(key))
|
|
.map(([key, value]) => `${key}=${value}`).join(" ")
|
|
: "";
|
|
return `<tr>
|
|
<td>${escapeHtml(name)}</td>
|
|
<td>${record.ok ? "成功" : `<span class="danger">失败</span>`}</td>
|
|
<td>${escapeHtml(formatDateTime(record.finished_at))}</td>
|
|
<td class="summary-cell">${escapeHtml(summary || record.error || "—")}</td>
|
|
</tr>`;
|
|
}).join("")}
|
|
</tbody>
|
|
</table>
|
|
</div>`;
|
|
}
|
|
|
|
export async function renderSystem(root) {
|
|
const [system, visitStats] = await Promise.all([
|
|
api("/api/system"),
|
|
stats({ days: 30 }).catch(() => null),
|
|
]);
|
|
const health = system.snapshot_health || { total: 0, ok: 0, failed: 0 };
|
|
const counts = system.counts || {};
|
|
const next = system.next_runs || {};
|
|
const running = system.running || {};
|
|
|
|
const visitExtra = visitStats
|
|
? `<span class="section-note">近 ${visitStats.days} 天 · ${visitStats.pending ? "含未落库缓冲" : "已落库"}</span>`
|
|
: "";
|
|
const visitPanel = visitStats ? `
|
|
<section class="panel chart-panel">
|
|
${sectionHeader("访问统计", visitExtra)}
|
|
<div class="mini-stats">
|
|
<div><span>今日 PV</span><strong>${formatNumber(visitStats.today_pv)}</strong></div>
|
|
<div><span>今日 UV</span><strong>${formatNumber(visitStats.today_uv)}</strong></div>
|
|
<div><span>${visitStats.days} 天 PV</span><strong>${formatNumber(visitStats.total_pv)}</strong></div>
|
|
<div><span>${visitStats.days} 天 UV</span><strong>${formatNumber(visitStats.total_uv)}</strong></div>
|
|
</div>
|
|
<div class="chart" id="visit-chart"></div>
|
|
<p class="section-note">柱状为每日 PV，折线为每日 UV（按客户端 IP 去重）。数据来自前端埋点，先落内存、每分钟批量入库；仅统计页面访问，不含 API 与静态资源请求。</p>
|
|
${(visitStats.top_pages || []).length ? `<div class="table-wrap">
|
|
<table class="data-table">
|
|
<thead><tr><th>页面</th><th>PV</th><th>UV</th></tr></thead>
|
|
<tbody>
|
|
${visitStats.top_pages.map((page) => `<tr>
|
|
<td>${escapeHtml(page.path)}</td>
|
|
<td>${formatNumber(page.pv)}</td>
|
|
<td>${formatNumber(page.uv)}</td>
|
|
</tr>`).join("")}
|
|
</tbody>
|
|
</table>
|
|
</div>` : `<p class="section-note">暂无访问记录。</p>`}
|
|
</section>` : "";
|
|
|
|
root.innerHTML = `<section class="page system-page">
|
|
<header class="page-head">
|
|
<div>
|
|
<h1>系统状态</h1>
|
|
<p class="page-sub">数据 ${escapeHtml(system.data_date || "—")} · 快照 ${formatCount(system.snapshot_days)} 天</p>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="mini-stats">
|
|
<div><span>采集成功</span><strong>${formatCount(health.ok)}</strong></div>
|
|
<div><span>采集失败</span><strong class="${health.failed ? "danger" : ""}">${formatCount(health.failed)}</strong></div>
|
|
<div><span>在库</span><strong>${formatCount(counts.active)}</strong></div>
|
|
<div><span>已失效</span><strong>${formatCount(counts.removed)}</strong></div>
|
|
<div><span>已移出库</span><strong>${formatCount(counts.dropped)}</strong></div>
|
|
</div>
|
|
|
|
${visitPanel}
|
|
|
|
<section class="panel">
|
|
${sectionHeader("最近任务")}
|
|
${taskRows(system.tasks)}
|
|
</section>
|
|
|
|
<section class="panel">
|
|
${sectionHeader("预计下次运行")}
|
|
<div class="status-grid status-row-4">
|
|
<div><span>午夜落盘克隆</span><strong>${running.snapshot_seed ? "运行中" : escapeHtml(formatDateTime(next.snapshot_seed))}</strong></div>
|
|
<div><span>咻咻满粉丝数更新</span><strong>${running.fans ? "运行中" : escapeHtml(formatDateTime(next.fans))}</strong></div>
|
|
<div><span>视频数据快照 + UP 信息</span><strong>${running.snapshot ? "运行中" : escapeHtml(formatDateTime(next.snapshot))}</strong></div>
|
|
<div><span>新视频小时同步</span><strong>${running.snapshot_recent ? "运行中" : escapeHtml(formatDateTime(next.snapshot_recent))}</strong></div>
|
|
<div><span>新视频搜索</span><strong>${running.discover || running.discovery ? "运行中" : escapeHtml(formatDateTime(next.discover))}</strong></div>
|
|
</div>
|
|
<p class="section-note">进行中显示「运行中」；空闲时按该任务上次完成时间推算下次运行，不按墙钟抢跑。新视频小时同步与全站快照互斥。</p>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
${sectionHeader("授权与备份")}
|
|
<div class="status-grid">
|
|
<div><span>登录态</span><strong>${system.auth.ok === "1" ? "正常" : "异常"}</strong></div>
|
|
<div><span>登录信息</span><strong>${escapeHtml(system.auth.message || "—")}</strong></div>
|
|
<div><span>最近检查</span><strong>${escapeHtml(formatDateTime(system.auth.last_check))}</strong></div>
|
|
<div><span>最近备份</span><strong>${system.backup.ok === "1" ? "成功" : "未完成"}</strong></div>
|
|
<div><span>备份错误</span><strong class="${system.backup.error ? "danger" : ""}">${escapeHtml(system.backup.error || "—")}</strong></div>
|
|
<div><span>Telegram</span><strong>${system.telegram_enabled ? "已启用" : "未启用"}</strong></div>
|
|
</div>
|
|
</section>
|
|
|
|
${(system.errors || []).length ? `<section class="panel">
|
|
${sectionHeader("最近错误")}
|
|
${system.errors.map((error) => `<div class="error-row">
|
|
<strong>${escapeHtml(error.task)}</strong>
|
|
<span>${escapeHtml(error.error || "未知错误")}</span>
|
|
</div>`).join("")}
|
|
</section>` : ""}
|
|
|
|
<section class="panel">
|
|
${sectionHeader("UP 黑名单")}
|
|
<p class="section-note">只影响未来搜索发现；已入库视频继续追踪。移除请使用 CLI 或数据库。</p>
|
|
${(system.blacklist || []).length ? `<div class="table-wrap">
|
|
<table class="data-table">
|
|
<thead><tr><th>mid</th><th>昵称</th><th>原因</th><th>在库视频</th></tr></thead>
|
|
<tbody>
|
|
${system.blacklist.map((item) => `<tr>
|
|
<td>${item.mid}</td>
|
|
<td>${escapeHtml(item.name || "—")}</td>
|
|
<td>${escapeHtml(item.reason || "—")}</td>
|
|
<td>${formatNumber(item.video_count || 0)}</td>
|
|
</tr>`).join("")}
|
|
</tbody>
|
|
</table>
|
|
</div>` : emptyState("黑名单为空")}
|
|
</section>
|
|
</section>`;
|
|
|
|
const visitChart = root.querySelector("#visit-chart");
|
|
if (visitChart) {
|
|
if (visitStats && (visitStats.total_pv || visitStats.total_uv)) {
|
|
mixedChart(visitChart, {
|
|
dates: visitStats.series.dates,
|
|
bars: visitStats.series.pv,
|
|
line: visitStats.series.uv,
|
|
barName: "PV",
|
|
lineName: "UV",
|
|
});
|
|
} else {
|
|
emptyChart(visitChart, "暂无访问数据");
|
|
}
|
|
}
|
|
}
|