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>

panel/static/app.js

@@ -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);
+}

panel/static/style.css

@@ -110,6 +110,76 @@ input[readonly] {
   margin-bottom: 12px;
 }
 .node-head h2 { margin: 0; font-size: 1.1rem; }
+.node-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.status-badge {
+  font-size: 0.75rem;
+  padding: 3px 10px;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+}
+.status-badge.online {
+  color: #34d399;
+  border-color: rgba(52, 211, 153, 0.45);
+  background: rgba(52, 211, 153, 0.12);
+}
+.status-badge.offline {
+  color: var(--muted);
+  background: #111827;
+}
+.status-text.ok { color: #34d399; }
+.status-text.err { color: #f87171; }
+
+.summary-bar {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+  margin-bottom: 24px;
+}
+.summary-item {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 16px;
+}
+.summary-label {
+  display: block;
+  color: var(--muted);
+  font-size: 0.85rem;
+  margin-bottom: 6px;
+}
+
+.node-stats {
+  margin-bottom: 16px;
+  padding: 12px;
+  border-radius: 10px;
+  background: rgba(17, 24, 39, 0.55);
+  border: 1px solid var(--border);
+}
+.stat-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 10px;
+}
+.stat-box {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.stat-label {
+  color: var(--muted);
+  font-size: 0.78rem;
+}
+.stat-value {
+  font-size: 0.95rem;
+  font-variant-numeric: tabular-nums;
+}
+
 .tag {
   font-size: 0.8rem;
   color: var(--muted);
@@ -168,4 +238,6 @@ input[readonly] {
 @media (max-width: 640px) {
   .hero { flex-direction: column; align-items: flex-start; }
   .copy-row { grid-template-columns: 1fr; }
+  .summary-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 }