114 lines
3.4 KiB
JavaScript
114 lines
3.4 KiB
JavaScript
function toLocalInputValue(d) {
|
|
const pad = (n) => String(n).padStart(2, "0");
|
|
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
|
|
}
|
|
|
|
function localInputToIso(value) {
|
|
if (!value) return undefined;
|
|
const d = new Date(value);
|
|
return Number.isNaN(d.getTime()) ? undefined : d.toISOString();
|
|
}
|
|
|
|
function formatAt(iso) {
|
|
if (!iso) return "—";
|
|
const d = new Date(iso);
|
|
if (Number.isNaN(d.getTime())) return iso;
|
|
return d.toLocaleString();
|
|
}
|
|
|
|
async function loadStats() {
|
|
const from = localInputToIso(document.getElementById("from").value);
|
|
const to = localInputToIso(document.getElementById("to").value);
|
|
const limit = Number(document.getElementById("limit").value) || 200;
|
|
const qs = new URLSearchParams();
|
|
if (from) qs.set("from", from);
|
|
if (to) qs.set("to", to);
|
|
qs.set("limit", String(limit));
|
|
|
|
const status = document.getElementById("status");
|
|
status.textContent = "加载中…";
|
|
try {
|
|
const res = await fetch(`/api/stats/tokens?${qs}`);
|
|
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
const data = await res.json();
|
|
renderSummary(data.summary);
|
|
renderRows(data.records || []);
|
|
status.textContent = `共 ${data.summary?.totalCalls ?? 0} 次调用 · 显示 ${(data.records || []).length} 条`;
|
|
} catch (err) {
|
|
status.textContent = `加载失败：${err instanceof Error ? err.message : String(err)}`;
|
|
}
|
|
}
|
|
|
|
function renderSummary(summary) {
|
|
const el = document.getElementById("summary");
|
|
if (!summary) {
|
|
el.innerHTML = "";
|
|
return;
|
|
}
|
|
const metrics = [
|
|
["调用次数", summary.totalCalls],
|
|
["总 token", summary.totalTokens],
|
|
["prompt", summary.promptTokens],
|
|
["completion", summary.completionTokens],
|
|
["cached", summary.totalCached],
|
|
];
|
|
el.innerHTML = metrics
|
|
.map(
|
|
([label, value]) =>
|
|
`<div class="stats-metric"><span class="stats-muted">${label}</span><strong>${value ?? 0}</strong></div>`,
|
|
)
|
|
.join("");
|
|
}
|
|
|
|
function renderRows(records) {
|
|
const tbody = document.getElementById("rows");
|
|
tbody.innerHTML = records
|
|
.map(
|
|
(r) => `<tr>
|
|
<td>${formatAt(r.at)}</td>
|
|
<td>${escapeHtml(r.caller || "")}</td>
|
|
<td>${escapeHtml(r.model || "")}</td>
|
|
<td>${r.promptTokens ?? 0}</td>
|
|
<td>${r.completionTokens ?? 0}</td>
|
|
<td>${r.totalTokens ?? 0}</td>
|
|
<td>${r.cachedTokens ?? "—"}</td>
|
|
</tr>`,
|
|
)
|
|
.join("");
|
|
}
|
|
|
|
function escapeHtml(s) {
|
|
return String(s)
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """);
|
|
}
|
|
|
|
function setRange(fromDate, toDate) {
|
|
document.getElementById("from").value = toLocalInputValue(fromDate);
|
|
document.getElementById("to").value = toLocalInputValue(toDate);
|
|
}
|
|
|
|
document.getElementById("btn-load").addEventListener("click", () => loadStats());
|
|
document.getElementById("btn-today").addEventListener("click", () => {
|
|
const now = new Date();
|
|
const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
|
|
setRange(start, now);
|
|
loadStats();
|
|
});
|
|
document.getElementById("btn-7d").addEventListener("click", () => {
|
|
const now = new Date();
|
|
const start = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
|
|
setRange(start, now);
|
|
loadStats();
|
|
});
|
|
|
|
// 默认：今天
|
|
(() => {
|
|
const now = new Date();
|
|
const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
|
|
setRange(start, now);
|
|
loadStats();
|
|
})();
|