支持导入定价文档并在统计页估算费用。

把用量与单价对齐，方便对照各模型实际开销。

Co-authored-by: Cursor <cursoragent@cursor.com>

web/stats.css

@@ -102,9 +102,165 @@
   box-shadow: 0 0 0 1px var(--st-border-strong);
 }
 
+.stats-pricing {
+  margin: 0 24px 16px;
+  padding: 12px 14px;
+  background: var(--st-surface);
+  border: 1px solid var(--st-border);
+  border-radius: var(--st-radius);
+}
+
+.stats-pricing .stats-section-label {
+  margin: 0;
+}
+
+.stats-pricing-head {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: 10px;
+}
+
+.stats-pricing-hint {
+  margin: 0;
+  font-size: 12px;
+  color: var(--st-muted);
+  line-height: 1.45;
+}
+
+.stats-pricing-add {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.stats-field-url {
+  flex: 1 1 18rem;
+  min-width: 0;
+}
+
+.stats-field-url input {
+  min-width: 0;
+  width: 100%;
+}
+
+.stats-pricing-suggested {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.stats-suggest {
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--st-border);
+  border-radius: 6px;
+  background: #fafafa;
+  color: var(--st-text);
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.stats-suggest:hover {
+  background: #f4f4f5;
+  border-color: var(--st-border-strong);
+}
+
+.stats-suggest:focus-visible,
+.stats-pricing button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--st-accent-soft);
+}
+
+.stats-pricing button:disabled,
+.stats-suggest:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.stats-pricing-list {
+  list-style: none;
+  margin: 10px 0 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.stats-pricing-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px 12px;
+  padding: 8px 0 0;
+  border-top: 1px solid var(--st-border);
+}
+
+.stats-pricing-meta {
+  min-width: 0;
+  flex: 1 1 14rem;
+}
+
+.stats-pricing-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--st-text);
+}
+
+.stats-pricing-url {
+  display: block;
+  margin-top: 1px;
+  font-size: 12px;
+  color: var(--st-accent);
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.stats-pricing-url:hover {
+  text-decoration: underline;
+}
+
+.stats-pricing-sub {
+  margin: 2px 0 0;
+  font-size: 12px;
+  color: var(--st-muted);
+}
+
+.stats-pricing-sub[data-state="error"] {
+  color: var(--st-danger);
+}
+
+.stats-pricing-actions {
+  display: flex;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.stats-pricing-status {
+  margin: 8px 0 0;
+  font-size: 12px;
+  color: var(--st-muted);
+}
+
+.stats-pricing-status[data-state="error"] {
+  color: var(--st-danger);
+}
+
+.stats-section-label {
+  margin: 0 24px 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--st-text);
+}
+
 .stats-summary {
   display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
+  grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 10px;
   margin: 0 24px 12px;
 }
@@ -143,10 +299,24 @@
   background: color-mix(in srgb, var(--st-accent-soft) 55%, var(--st-surface));
 }
 
-.stats-metric[data-emphasis="total"] .stats-metric-value {
+.stats-metric[data-emphasis="total"] .stats-metric-value,
+.stats-metric[data-emphasis="cost"] .stats-metric-value {
   color: var(--st-accent);
 }
 
+.stats-metric[data-emphasis="cost"] {
+  border-color: color-mix(in srgb, var(--st-accent) 28%, var(--st-border));
+  background: color-mix(in srgb, var(--st-accent-soft) 55%, var(--st-surface));
+}
+
+.stats-metric-note {
+  display: block;
+  margin-top: 2px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--st-muted);
+}
+
 .stats-status {
   display: flex;
   align-items: center;
@@ -175,6 +345,19 @@
   margin: 0 24px;
 }
 
+.stats-table-wrap-model {
+  max-height: none;
+  margin-bottom: 18px;
+}
+
+.stats-by-model {
+  margin-bottom: 4px;
+}
+
+.stats-unpriced {
+  color: var(--st-muted);
+}
+
 .stats-table {
   width: 100%;
   border-collapse: collapse;
@@ -258,7 +441,7 @@
   margin-bottom: 4px;
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1100px) {
   .stats-summary {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
@@ -267,8 +450,10 @@
 @media (max-width: 640px) {
   .stats-main .st-main-head,
   .stats-toolbar,
+  .stats-pricing,
   .stats-summary,
   .stats-status,
+  .stats-section-label,
   .stats-table-wrap {
     margin-left: 14px;
     margin-right: 14px;

web/stats.html

@@ -24,7 +24,7 @@
         <header class="st-main-head">
           <div>
             <h1>Token 统计</h1>
-            <p class="st-sub">按时间筛选本机调用记录（<code>stats/*.jsonl</code>）</p>
+            <p class="st-sub">按时间筛选本机调用；花销按你指定的官方价目文档估算（<code>stats/*.jsonl</code>）</p>
           </div>
         </header>
 
@@ -52,11 +52,60 @@
           </div>
         </div>
 
+        <section class="stats-pricing" aria-label="价格来源">
+          <div class="stats-pricing-head">
+            <p class="stats-section-label">价格来源</p>
+            <p class="stats-pricing-hint">
+              粘贴厂商官方价目页，解析型号单价后按调用时间估算（含缓存命中与高峰/闲时，若文档有写）。
+            </p>
+          </div>
+          <form class="stats-pricing-add" id="pricing-form">
+            <label class="stats-field stats-field-url">
+              官方文档 URL
+              <input
+                type="url"
+                id="pricing-url"
+                placeholder="https://api-docs.deepseek.com/quick_start/pricing"
+                autocomplete="off"
+              />
+            </label>
+            <button type="submit" class="btn-primary" id="btn-add-pricing">从文档计算</button>
+          </form>
+          <div class="stats-pricing-suggested" id="pricing-suggested"></div>
+          <ul class="stats-pricing-list" id="pricing-sources"></ul>
+          <p class="stats-pricing-status" id="pricing-status" hidden aria-live="polite"></p>
+        </section>
+
         <div class="stats-summary" id="summary" aria-live="polite"></div>
         <p class="stats-status" id="status" data-state="idle" aria-live="polite"></p>
 
+        <section class="stats-by-model" aria-label="按模型花销">
+          <p class="stats-section-label">按模型</p>
+          <div class="stats-table-wrap stats-table-wrap-model">
+            <table class="stats-table" id="model-table">
+              <thead>
+                <tr>
+                  <th scope="col">model</th>
+                  <th scope="col" class="num">调用</th>
+                  <th scope="col" class="num">prompt</th>
+                  <th scope="col" class="num">completion</th>
+                  <th scope="col" class="num">cached</th>
+                  <th scope="col" class="num">估算花销</th>
+                  <th scope="col">单价</th>
+                </tr>
+              </thead>
+              <tbody id="model-rows"></tbody>
+            </table>
+            <div class="stats-empty" id="model-empty" hidden>
+              <strong>没有可汇总的型号</strong>
+              先查出调用记录，并添加官方价目文档。
+            </div>
+          </div>
+        </section>
+
+        <p class="stats-section-label">调用记录</p>
         <div class="stats-table-wrap">
-          <table class="stats-table">
+          <table class="stats-table" id="call-table">
             <thead>
               <tr>
                 <th scope="col">时间</th>
@@ -66,6 +115,7 @@
                 <th scope="col" class="num">completion</th>
                 <th scope="col" class="num">total</th>
                 <th scope="col" class="num">cached</th>
+                <th scope="col" class="num">花销</th>
               </tr>
             </thead>
             <tbody id="rows"></tbody>

web/stats.js

@@ -28,18 +28,62 @@ function formatNum(n) {
   return Number(n).toLocaleString("zh-CN");
 }
 
+function formatMoney(money) {
+  if (!money || money.amount == null || Number.isNaN(Number(money.amount))) return "—";
+  const amount = Number(money.amount);
+  const currency = money.currency || "USD";
+  const symbol = currency === "CNY" ? "¥" : currency === "USD" ? "$" : `${currency} `;
+  const abs = Math.abs(amount);
+  let digits = 2;
+  if (abs > 0 && abs < 0.01) digits = 6;
+  else if (abs < 1) digits = 4;
+  const body = amount.toFixed(digits).replace(/(\.\d*?[1-9])0+$/, "$1").replace(/\.0+$/, "");
+  const shown = body.includes(".") ? body : `${body}.00`;
+  return `${symbol}${shown}`;
+}
+
+function formatCostTotal(total, byCurrency) {
+  if (total) return formatMoney(total);
+  const entries = Object.entries(byCurrency || {});
+  if (!entries.length) return "—";
+  return entries.map(([currency, amount]) => formatMoney({ amount, currency })).join(" + ");
+}
+
 function setStatus(text, state = "idle") {
   const status = document.getElementById("status");
   status.textContent = text;
   status.dataset.state = state;
 }
 
+function setPricingStatus(text, state = "idle") {
+  const el = document.getElementById("pricing-status");
+  if (!text) {
+    el.hidden = true;
+    el.textContent = "";
+    el.dataset.state = "idle";
+    return;
+  }
+  el.hidden = false;
+  el.textContent = text;
+  el.dataset.state = state;
+}
+
 function setRangeActive(id) {
   for (const btn of document.querySelectorAll(".stats-range .btn-secondary")) {
     btn.classList.toggle("is-active", btn.id === id);
   }
 }
 
+async function api(path, options = {}) {
+  const res = await fetch(path, {
+    headers: { "Content-Type": "application/json" },
+    ...options,
+  });
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+  return data;
+}
+
 async function loadStats() {
   const from = localInputToIso(document.getElementById("from").value);
   const to = localInputToIso(document.getElementById("to").value);
@@ -56,14 +100,20 @@ async function loadStats() {
     const data = await res.json();
     const records = data.records || [];
     renderSummary(data.summary);
+    renderModels(data.summary?.byModel || data.cost?.byModel || []);
     renderRows(records);
     const totalCalls = data.summary?.totalCalls ?? 0;
+    const unpriced = data.summary?.unpricedCalls ?? data.cost?.unpricedCalls ?? 0;
+    const extra = unpriced
+      ? ` · ${formatNum(unpriced)} 次无报价`
+      : "";
     setStatus(
-      `共 ${formatNum(totalCalls)} 次调用 · 显示 ${formatNum(records.length)} 条`,
+      `共 ${formatNum(totalCalls)} 次调用 · 显示 ${formatNum(records.length)} 条${extra}`,
       "idle",
     );
   } catch (err) {
     renderSummary(null);
+    renderModels([]);
     renderRows([]);
     setStatus(
       `加载失败：${err instanceof Error ? err.message : String(err)}`,
@@ -78,28 +128,69 @@ function renderSummary(summary) {
     el.innerHTML = "";
     return;
   }
+  const costValue = formatCostTotal(summary.estimatedCost, summary.byCurrency);
+  const costNote = summary.unpricedCalls
+    ? `${formatNum(summary.unpricedCalls)} 次无报价`
+    : summary.estimatedCost
+      ? "按官方文档估算"
+      : "未配置价目";
   const metrics = [
-    ["调用次数", summary.totalCalls, null],
-    ["总 token", summary.totalTokens, "total"],
-    ["prompt", summary.promptTokens, null],
-    ["completion", summary.completionTokens, null],
-    ["cached", summary.totalCached, null],
+    ["调用次数", formatNum(summary.totalCalls ?? 0), null, null],
+    ["估算花销", costValue, "cost", costNote],
+    ["总 token", formatNum(summary.totalTokens ?? 0), "total", null],
+    ["prompt", formatNum(summary.promptTokens ?? 0), null, null],
+    ["completion", formatNum(summary.completionTokens ?? 0), null, null],
+    ["cached", formatNum(summary.totalCached ?? 0), null, null],
   ];
   el.innerHTML = metrics
     .map(
-      ([label, value, emphasis]) =>
+      ([label, value, emphasis, note]) =>
         `<div class="stats-metric"${emphasis ? ` data-emphasis="${emphasis}"` : ""}>
           <span class="stats-metric-label">${label}</span>
-          <strong class="stats-metric-value">${formatNum(value ?? 0)}</strong>
+          <strong class="stats-metric-value">${value}</strong>
+          ${note ? `<span class="stats-metric-note">${escapeHtml(note)}</span>` : ""}
         </div>`,
     )
     .join("");
 }
 
+function renderModels(rows) {
+  const tbody = document.getElementById("model-rows");
+  const empty = document.getElementById("model-empty");
+  const table = document.getElementById("model-table");
+  if (!rows.length) {
+    tbody.innerHTML = "";
+    table.hidden = true;
+    empty.hidden = false;
+    return;
+  }
+  table.hidden = false;
+  empty.hidden = true;
+  tbody.innerHTML = rows
+    .map((r) => {
+      const cost = r.unmatched || !r.cost
+        ? `<span class="stats-unpriced">无报价</span>`
+        : formatMoney(r.cost);
+      const source = r.unmatched
+        ? "—"
+        : escapeHtml(r.sourceName || "官方文档");
+      return `<tr>
+        <td class="col-model" title="${escapeHtml(r.model || "")}">${escapeHtml(r.model || "—")}</td>
+        <td class="num">${formatNum(r.calls ?? 0)}</td>
+        <td class="num">${formatNum(r.promptTokens ?? 0)}</td>
+        <td class="num">${formatNum(r.completionTokens ?? 0)}</td>
+        <td class="num">${formatNum(r.cachedTokens ?? 0)}</td>
+        <td class="num col-total">${cost}</td>
+        <td class="col-caller" title="${source}">${source}</td>
+      </tr>`;
+    })
+    .join("");
+}
+
 function renderRows(records) {
   const tbody = document.getElementById("rows");
   const empty = document.getElementById("empty");
-  const table = tbody.closest("table");
+  const table = document.getElementById("call-table") || tbody.closest("table");
 
   if (!records.length) {
     tbody.innerHTML = "";
@@ -111,8 +202,11 @@ function renderRows(records) {
   if (table) table.hidden = false;
   empty.hidden = true;
   tbody.innerHTML = records
-    .map(
-      (r) => `<tr>
+    .map((r) => {
+      const cost = r.unmatchedRate || !r.estimatedCost
+        ? `<span class="stats-unpriced">—</span>`
+        : formatMoney(r.estimatedCost);
+      return `<tr>
       <td class="col-time">${formatAt(r.at)}</td>
       <td class="col-caller" title="${escapeHtml(r.caller || "")}">${escapeHtml(r.caller || "—")}</td>
       <td class="col-model" title="${escapeHtml(r.model || "")}">${escapeHtml(r.model || "—")}</td>
@@ -120,8 +214,9 @@ function renderRows(records) {
       <td class="num">${formatNum(r.completionTokens ?? 0)}</td>
       <td class="num col-total">${formatNum(r.totalTokens ?? 0)}</td>
       <td class="num">${r.cachedTokens == null ? "—" : formatNum(r.cachedTokens)}</td>
-    </tr>`,
-    )
+      <td class="num">${cost}</td>
+    </tr>`;
+    })
     .join("");
 }
 
@@ -138,6 +233,99 @@ function setRange(fromDate, toDate) {
   document.getElementById("to").value = toLocalInputValue(toDate);
 }
 
+async function loadPricing() {
+  try {
+    const data = await api("/api/stats/pricing");
+    renderSuggested(data.suggested || [], data.sources || []);
+    renderSources(data.sources || []);
+  } catch (err) {
+    setPricingStatus(
+      `价目来源加载失败：${err instanceof Error ? err.message : String(err)}`,
+      "error",
+    );
+  }
+}
+
+function renderSuggested(items, sources = []) {
+  const el = document.getElementById("pricing-suggested");
+  const used = new Set((sources || []).map((s) => s.url));
+  const remaining = items.filter((s) => !used.has(s.url));
+  if (!remaining.length) {
+    el.innerHTML = "";
+    return;
+  }
+  el.innerHTML = items
+    .map(
+      (s) =>
+        `<button type="button" class="stats-suggest" data-url="${escapeHtml(s.url)}">${escapeHtml(s.name)}</button>`,
+    )
+    .join("");
+}
+
+function renderSources(sources) {
+  const el = document.getElementById("pricing-sources");
+  if (!sources.length) {
+    el.innerHTML = "";
+    return;
+  }
+  el.innerHTML = sources
+    .map((s) => {
+      const when = s.fetchedAt ? formatAt(s.fetchedAt) : "尚未拉取";
+      const sub = s.fetchError
+        ? s.fetchError
+        : `${formatNum(s.modelCount ?? 0)} 个型号 · ${when}`;
+      const state = s.fetchError ? "error" : "idle";
+      return `<li class="stats-pricing-item" data-id="${escapeHtml(s.id)}">
+        <div class="stats-pricing-meta">
+          <div class="stats-pricing-name">${escapeHtml(s.name)}</div>
+          <a class="stats-pricing-url" href="${escapeHtml(s.url)}" target="_blank" rel="noopener noreferrer">${escapeHtml(s.url)}</a>
+          <p class="stats-pricing-sub" data-state="${state}">${escapeHtml(sub)}</p>
+        </div>
+        <div class="stats-pricing-actions">
+          <button type="button" class="btn-secondary" data-action="refresh">更新</button>
+          <button type="button" class="btn-danger" data-action="delete">移除</button>
+        </div>
+      </li>`;
+    })
+    .join("");
+}
+
+function setPricingBusy(busy) {
+  document.getElementById("btn-add-pricing").disabled = busy;
+  for (const btn of document.querySelectorAll(".stats-pricing-actions button, .stats-suggest")) {
+    btn.disabled = busy;
+  }
+}
+
+async function addPricingSource(url, name) {
+  const trimmed = (url || "").trim();
+  if (!trimmed) {
+    setPricingStatus("请填写官方价目文档 URL", "error");
+    return;
+  }
+  setPricingBusy(true);
+  setPricingStatus("正在拉取并解析官方文档…", "idle");
+  try {
+    const data = await api("/api/stats/pricing/sources", {
+      method: "POST",
+      body: JSON.stringify({ url: trimmed, name }),
+    });
+    document.getElementById("pricing-url").value = "";
+    if (data.source?.fetchError) {
+      setPricingStatus(data.source.fetchError, "error");
+    } else {
+      setPricingStatus("已按文档更新单价", "idle");
+    }
+    await loadPricing();
+    await loadStats();
+  } catch (err) {
+    setPricingStatus(err instanceof Error ? err.message : String(err), "error");
+    await loadPricing();
+  } finally {
+    setPricingBusy(false);
+  }
+}
+
 document.getElementById("btn-load").addEventListener("click", () => {
   setRangeActive("");
   loadStats();
@@ -160,11 +348,57 @@ document.getElementById("btn-7d").addEventListener("click", () => {
 document.getElementById("from").addEventListener("change", () => setRangeActive(""));
 document.getElementById("to").addEventListener("change", () => setRangeActive(""));
 
-// 默认：今天
+document.getElementById("pricing-form").addEventListener("submit", (ev) => {
+  ev.preventDefault();
+  addPricingSource(document.getElementById("pricing-url").value);
+});
+
+document.getElementById("pricing-suggested").addEventListener("click", (ev) => {
+  const btn = ev.target.closest(".stats-suggest");
+  if (!btn) return;
+  addPricingSource(btn.dataset.url, btn.textContent);
+});
+
+document.getElementById("pricing-sources").addEventListener("click", async (ev) => {
+  const btn = ev.target.closest("button[data-action]");
+  if (!btn) return;
+  const item = btn.closest(".stats-pricing-item");
+  const id = item?.dataset.id;
+  if (!id) return;
+  const action = btn.dataset.action;
+  setPricingBusy(true);
+  try {
+    if (action === "refresh") {
+      setPricingStatus("正在重新拉取官方文档…", "idle");
+      const data = await api(`/api/stats/pricing/sources/${encodeURIComponent(id)}/refresh`, {
+        method: "POST",
+      });
+      if (data.source?.fetchError) {
+        setPricingStatus(data.source.fetchError, "error");
+      } else {
+        setPricingStatus("已按文档更新单价", "idle");
+      }
+    } else if (action === "delete") {
+      await api(`/api/stats/pricing/sources/${encodeURIComponent(id)}`, {
+        method: "DELETE",
+      });
+      setPricingStatus("已移除价目来源", "idle");
+    }
+    await loadPricing();
+    await loadStats();
+  } catch (err) {
+    setPricingStatus(err instanceof Error ? err.message : String(err), "error");
+    await loadPricing();
+  } finally {
+    setPricingBusy(false);
+  }
+});
+
 (() => {
   const now = new Date();
   const start = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
   setRange(start, now);
   setRangeActive("btn-today");
+  loadPricing();
   loadStats();
 })();