feat: show node connection status and traffic stats in admin panel

Enable sing-box Clash/V2Ray APIs for per-user metrics, persist cumulative traffic in SQLite, and refresh the dashboard every five seconds. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-16 09:57:16 +08:00
parent f0a3317e8b
commit ccf7e2a4c7
12 changed files with 595 additions and 3 deletions
@@ -72,3 +72,71 @@ document.querySelectorAll(".delete-btn").forEach((btn) => {
    }
  });
 });
+
+function setStatusBadge(el, online) {
+  el.textContent = online ? "在线" : "离线";
+  el.classList.toggle("online", online);
+  el.classList.toggle("offline", !online);
+}
+
+function updateStats(data) {
+  const summary = data.summary || {};
+  const onlineEl = document.getElementById("summaryOnline");
+  const upEl = document.getElementById("summaryUp");
+  const downEl = document.getElementById("summaryDown");
+  const statusEl = document.getElementById("summaryStatus");
+
+  if (onlineEl) {
+    onlineEl.textContent = `${summary.online || 0} / ${summary.total_nodes || 0}`;
+  }
+  if (upEl) upEl.textContent = summary.upload_speed_human || "0 B/s";
+  if (downEl) downEl.textContent = summary.download_speed_human || "0 B/s";
+  if (statusEl) {
+    if (data.singbox) {
+      statusEl.textContent = "正常";
+      statusEl.className = "status-text ok";
+    } else {
+      statusEl.textContent = "不可用";
+      statusEl.className = "status-text err";
+    }
+  }
+
+  document.querySelectorAll(".node-card[data-id]").forEach((card) => {
+    const node = (data.nodes || {})[card.dataset.id];
+    if (!node) return;
+
+    const status = card.querySelector('[data-role="status"]');
+    if (status) setStatusBadge(status, node.online);
+
+    const setText = (role, value) => {
+      const el = card.querySelector(`[data-role="${role}"]`);
+      if (el) el.textContent = value;
+    };
+
+    setText("connections", String(node.connections ?? 0));
+    setText("speed-up", node.upload_speed_human || "0 B/s");
+    setText("speed-down", node.download_speed_human || "0 B/s");
+    setText("total-up", node.upload_total_human || "0 B");
+    setText("total-down", node.download_total_human || "0 B");
+  });
+}
+
+async function refreshStats() {
+  try {
+    const res = await fetch("/api/stats");
+    if (!res.ok) return;
+    const data = await res.json();
+    updateStats(data);
+  } catch {
+    const statusEl = document.getElementById("summaryStatus");
+    if (statusEl) {
+      statusEl.textContent = "不可用";
+      statusEl.className = "status-text err";
+    }
+  }
+}
+
+if (document.getElementById("summaryBar")) {
+  refreshStats();
+  setInterval(refreshStats, 5000);
+}