From 56c190ad276742cd91bb93a752eca78e6960d749 Mon Sep 17 00:00:00 2001
From: liuw1535 <130421582+liuw1535@users.noreply.github.com>
Date: Thu, 4 Jun 2026 15:54:34 +0800
Subject: [PATCH] Add frontend monitoring center

---
 public/css/pages.css             | 275 +++++++++++++++++++++++++++++++
 public/index.html                |  77 ++++++++-
 public/js/main.js                |   2 +
 public/js/monitor.js             | 185 +++++++++++++++++++++
 public/js/ui.js                  |  20 ++-
 src/routes/admin.js              |  13 ++
 src/server/handlers/claude.js    |   5 +
 src/server/handlers/gemini.js    |   5 +
 src/server/handlers/geminicli.js |   5 +
 src/server/handlers/openai.js    |   5 +
 src/server/index.js              |  31 ++++
 src/utils/usageStats.js          | 214 ++++++++++++++++++++++++
 12 files changed, 832 insertions(+), 5 deletions(-)
 create mode 100644 public/js/monitor.js
 create mode 100644 src/utils/usageStats.js

diff --git a/public/css/pages.css b/public/css/pages.css
index 90a5065b..f89f0579 100644
--- a/public/css/pages.css
+++ b/public/css/pages.css
@@ -2347,3 +2347,278 @@ button.loading::after {
     color: white;
     transform: scale(1.1);
 }
+
+/* ==================== 监控中心样式 ==================== */
+#monitorPage {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    height: 100%;
+    overflow: auto;
+}
+
+#monitorPage.page-enter {
+    animation: pageSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.monitor-top-bar,
+.monitor-chart-panel {
+    background: rgba(255, 255, 255, 0.72);
+    border: 1.5px solid var(--border);
+    border-radius: 0.9rem;
+    padding: 1rem;
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+}
+
+.monitor-top-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.monitor-top-bar h3,
+.monitor-chart-header h3 {
+    margin: 0 0 0.25rem;
+    color: var(--text);
+}
+
+.monitor-top-bar p,
+.monitor-chart-header p {
+    margin: 0;
+    color: var(--text-light);
+    font-size: 0.875rem;
+}
+
+.monitor-range {
+    display: inline-flex;
+    gap: 0.35rem;
+    padding: 0.25rem;
+    border-radius: 999px;
+    background: rgba(15, 23, 42, 0.06);
+    flex-shrink: 0;
+}
+
+.monitor-range-btn {
+    border: 0;
+    padding: 0.45rem 0.8rem;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--text-light);
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.2s;
+}
+
+.monitor-range-btn.active,
+.monitor-range-btn:hover {
+    background: var(--primary);
+    color: white;
+    box-shadow: 0 8px 18px rgba(79, 70, 229, 0.22);
+}
+
+.monitor-cards {
+    display: grid;
+    grid-template-columns: repeat(5, minmax(150px, 1fr));
+    gap: 1rem;
+}
+
+.monitor-card {
+    position: relative;
+    overflow: hidden;
+    min-height: 132px;
+    padding: 1rem;
+    border-radius: 0.9rem;
+    border: 1.5px solid var(--border);
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.62));
+    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
+}
+
+.monitor-card::after {
+    content: '';
+    position: absolute;
+    right: -32px;
+    top: -32px;
+    width: 96px;
+    height: 96px;
+    border-radius: 50%;
+    background: rgba(79, 70, 229, 0.12);
+}
+
+.monitor-card-title {
+    color: var(--text-light);
+    font-size: 0.85rem;
+    font-weight: 700;
+}
+
+.monitor-card-value {
+    margin-top: 0.55rem;
+    color: var(--text);
+    font-size: 1.9rem;
+    font-weight: 800;
+    line-height: 1;
+}
+
+.monitor-card-sub {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-top: 0.8rem;
+    color: var(--text-light);
+    font-size: 0.8rem;
+}
+
+.monitor-card-sub .success { color: #059669; }
+.monitor-card-sub .danger { color: #dc2626; }
+.monitor-card.tokens::after { background: rgba(6, 182, 212, 0.14); }
+.monitor-card.tpm::after { background: rgba(16, 185, 129, 0.14); }
+.monitor-card.rpm::after { background: rgba(245, 158, 11, 0.14); }
+.monitor-card.rdp::after { background: rgba(236, 72, 153, 0.14); }
+
+.monitor-chart-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.model-usage-chart {
+    display: grid;
+    grid-template-columns: minmax(220px, 280px) 1fr;
+    gap: 1.5rem;
+    align-items: center;
+    min-height: 300px;
+}
+
+.donut-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.donut-chart {
+    width: 220px;
+    height: 220px;
+    border-radius: 50%;
+    display: grid;
+    place-items: center;
+    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.12);
+}
+
+.donut-hole {
+    width: 128px;
+    height: 128px;
+    border-radius: 50%;
+    background: var(--bg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    color: var(--text);
+    font-weight: 800;
+}
+
+.donut-hole small {
+    margin-top: 0.25rem;
+    color: var(--text-light);
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.model-legend {
+    display: flex;
+    flex-direction: column;
+    gap: 0.55rem;
+    min-width: 0;
+}
+
+.model-legend-item {
+    display: grid;
+    grid-template-columns: 12px minmax(0, 1fr) auto auto;
+    align-items: center;
+    gap: 0.65rem;
+    padding: 0.65rem 0.75rem;
+    border-radius: 0.7rem;
+    background: rgba(15, 23, 42, 0.04);
+}
+
+.model-color {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.model-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text);
+    font-weight: 700;
+}
+
+.model-tokens,
+.model-percent {
+    color: var(--text-light);
+    font-family: 'Ubuntu Mono', monospace;
+}
+
+.monitor-empty,
+.monitor-error {
+    grid-column: 1 / -1;
+    width: 100%;
+    padding: 3rem 1rem;
+    text-align: center;
+    color: var(--text-light);
+    border: 1.5px dashed var(--border);
+    border-radius: 0.85rem;
+}
+
+.monitor-error { color: #dc2626; }
+
+.monitor-card.skeleton {
+    background: linear-gradient(90deg, rgba(148, 163, 184, 0.14), rgba(148, 163, 184, 0.26), rgba(148, 163, 184, 0.14));
+    background-size: 220% 100%;
+    animation: shimmer 1.2s infinite linear;
+}
+
+@keyframes shimmer {
+    to { background-position: -220% 0; }
+}
+
+@media (prefers-color-scheme: dark) {
+    .monitor-top-bar,
+    .monitor-chart-panel,
+    .monitor-card {
+        background: rgba(30, 41, 59, 0.9);
+    }
+
+    .model-legend-item,
+    .monitor-range {
+        background: rgba(255, 255, 255, 0.06);
+    }
+}
+
+@media (max-width: 1180px) {
+    .monitor-cards {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+}
+
+@media (max-width: 760px) {
+    .monitor-top-bar,
+    .monitor-chart-header {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .monitor-range {
+        justify-content: center;
+    }
+
+    .monitor-cards,
+    .model-usage-chart {
+        grid-template-columns: 1fr;
+    }
+}
diff --git a/public/index.html b/public/index.html
index cb95d493..0edc9006 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,6 +14,8 @@
             var classes = ['auth-checking'];
             if (currentTab === 'settings') classes.push('tab-settings');
             if (currentTab === 'logs') classes.push('tab-logs');
+            if (currentTab === 'geminicli') classes.push('tab-geminicli');
+            if (currentTab === 'monitor') classes.push('tab-monitor');
             document.documentElement.className = classes.join(' ');
             // 检测字体加载
             if ('fonts' in document) {
@@ -74,6 +76,10 @@
             display: none !important;
         }
 
+        html.tab-settings #monitorPage {
+            display: none !important;
+        }
+
         html.tab-settings .tab[data-tab="tokens"] {
             background: transparent !important;
             color: var(--text-light, #888) !important;
@@ -84,7 +90,8 @@
             color: white !important;
         }
 
-        html.tab-settings .tab[data-tab="logs"] {
+        html.tab-settings .tab[data-tab="logs"],
+        html.tab-settings .tab[data-tab="monitor"] {
             background: transparent !important;
             color: var(--text-light, #888) !important;
         }
@@ -105,6 +112,10 @@
             display: none !important;
         }
 
+        html.tab-logs #monitorPage {
+            display: none !important;
+        }
+
         html.tab-logs .tab[data-tab="tokens"] {
             background: transparent !important;
             color: var(--text-light, #888) !important;
@@ -120,7 +131,8 @@
             color: white !important;
         }
 
-        html.tab-logs .tab[data-tab="geminicli"] {
+        html.tab-logs .tab[data-tab="geminicli"],
+        html.tab-logs .tab[data-tab="monitor"] {
             background: transparent !important;
             color: var(--text-light, #888) !important;
         }
@@ -138,6 +150,10 @@
             display: none !important;
         }
 
+        html.tab-geminicli #monitorPage {
+            display: none !important;
+        }
+
         html.tab-geminicli #geminicliPage {
             display: block !important;
         }
@@ -152,7 +168,8 @@
             color: var(--text-light, #888) !important;
         }
 
-        html.tab-geminicli .tab[data-tab="logs"] {
+        html.tab-geminicli .tab[data-tab="logs"],
+        html.tab-geminicli .tab[data-tab="monitor"] {
             background: transparent !important;
             color: var(--text-light, #888) !important;
         }
@@ -166,6 +183,30 @@
             display: none !important;
         }
 
+        html.tab-monitor #tokensPage,
+        html.tab-monitor #settingsPage,
+        html.tab-monitor #logsPage,
+        html.tab-monitor #geminicliPage {
+            display: none !important;
+        }
+
+        html.tab-monitor #monitorPage {
+            display: flex !important;
+        }
+
+        html.tab-monitor .tab[data-tab="tokens"],
+        html.tab-monitor .tab[data-tab="geminicli"],
+        html.tab-monitor .tab[data-tab="settings"],
+        html.tab-monitor .tab[data-tab="logs"] {
+            background: transparent !important;
+            color: var(--text-light, #888) !important;
+        }
+
+        html.tab-monitor .tab[data-tab="monitor"] {
+            background: var(--primary, #4f46e5) !important;
+            color: white !important;
+        }
+
         html.tab-settings .tab[data-tab="geminicli"] {
             background: transparent !important;
             color: var(--text-light, #888) !important;
@@ -256,6 +297,8 @@ <h2>Token 管理</h2>
                         class="tab-icon">💎</span><span class="tab-text">CLI</span></button>
                 <button class="tab" data-tab="settings" onclick="switchTab('settings')"><span
                         class="tab-icon">⚙️</span><span class="tab-text">设置</span></button>
+                <button class="tab" data-tab="monitor" onclick="switchTab('monitor')"><span
+                        class="tab-icon">📊</span><span class="tab-text">监控</span></button>
                 <button class="tab" data-tab="logs" onclick="switchTab('logs')"><span
                         class="tab-icon">📋</span><span class="tab-text">日志</span></button>
             </div>
@@ -352,6 +395,33 @@ <h2>Token 管理</h2>
                     </div>
                 </div>
 
+
+                <!-- 监控中心页面 -->
+                <div id="monitorPage" class="hidden">
+                    <div class="monitor-top-bar">
+                        <div>
+                            <h3>📊 监控中心</h3>
+                            <p>按时间范围统计 API 调用次数、Token 消耗和模型用量分布</p>
+                        </div>
+                        <div class="monitor-range" role="group" aria-label="监控时间范围">
+                            <button class="monitor-range-btn active" data-days="7" onclick="setMonitorRange(7)">最近7天</button>
+                            <button class="monitor-range-btn" data-days="14" onclick="setMonitorRange(14)">最近14天</button>
+                            <button class="monitor-range-btn" data-days="30" onclick="setMonitorRange(30)">最近30天</button>
+                        </div>
+                    </div>
+                    <div id="monitorCards" class="monitor-cards"></div>
+                    <div class="monitor-chart-panel">
+                        <div class="monitor-chart-header">
+                            <div>
+                                <h3>模型用量分布</h3>
+                                <p>按 Token 总数排名</p>
+                            </div>
+                            <button class="btn btn-sm btn-info" onclick="loadMonitorUsage()">↻ 刷新</button>
+                        </div>
+                        <div id="modelUsageChart" class="model-usage-chart"></div>
+                    </div>
+                </div>
+
                 <!-- 日志页面 -->
                 <div id="logsPage" class="hidden">
                     <div class="logs-top-bar">
@@ -765,6 +835,7 @@ <h5>白名单管理</h5>
     <script src="js/config.js" defer></script>
     <script src="js/security.js" defer></script>
     <script src="js/logs.js" defer></script>
+    <script src="js/monitor.js" defer></script>
     <script src="js/main.js" defer></script>
 </body>
 
diff --git a/public/js/main.js b/public/js/main.js
index 49cb28c2..2944dfc2 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -25,6 +25,8 @@ initFilterState(); // 恢复筛选状态
                 switchTab('logs', false);
             } else if (savedTab === 'geminicli') {
                 switchTab('geminicli', false);
+            } else if (savedTab === 'monitor') {
+                switchTab('monitor', false);
             } else {
                 // 默认显示 tokens 页面
                 switchTab('tokens', false);
diff --git a/public/js/monitor.js b/public/js/monitor.js
new file mode 100644
index 00000000..7c4e6d26
--- /dev/null
+++ b/public/js/monitor.js
@@ -0,0 +1,185 @@
+// 监控中心模块
+
+let monitorState = {
+    rangeDays: 7,
+    loading: false,
+    data: null
+};
+
+function formatNumber(value, digits = 0) {
+    const number = Number(value) || 0;
+    return new Intl.NumberFormat('zh-CN', {
+        maximumFractionDigits: digits,
+        minimumFractionDigits: digits
+    }).format(number);
+}
+
+function formatCompactNumber(value) {
+    const number = Number(value) || 0;
+    if (number >= 100000000) return `${formatNumber(number / 100000000, 2)}亿`;
+    if (number >= 10000) return `${formatNumber(number / 10000, 2)}万`;
+    return formatNumber(number);
+}
+
+function initMonitorPage() {
+    const savedDays = Number(localStorage.getItem('monitorRangeDays')) || 7;
+    monitorState.rangeDays = [7, 14, 30].includes(savedDays) ? savedDays : 7;
+    updateMonitorRangeButtons();
+    loadMonitorUsage();
+}
+
+function setMonitorRange(days) {
+    monitorState.rangeDays = [7, 14, 30].includes(Number(days)) ? Number(days) : 7;
+    localStorage.setItem('monitorRangeDays', String(monitorState.rangeDays));
+    updateMonitorRangeButtons();
+    loadMonitorUsage();
+}
+
+function updateMonitorRangeButtons() {
+    document.querySelectorAll('.monitor-range-btn').forEach(btn => {
+        btn.classList.toggle('active', Number(btn.dataset.days) === monitorState.rangeDays);
+    });
+}
+
+async function loadMonitorUsage() {
+    if (monitorState.loading) return;
+    monitorState.loading = true;
+    renderMonitorLoading();
+
+    try {
+        const response = await fetch(`/admin/monitor/usage?days=${monitorState.rangeDays}`, {
+            credentials: 'include'
+        });
+        if (!response.ok) {
+            throw new Error('获取监控统计失败');
+        }
+        const result = await response.json();
+        if (!result.success) {
+            throw new Error(result.message || '获取监控统计失败');
+        }
+        monitorState.data = result.data;
+        renderMonitorUsage(result.data);
+    } catch (error) {
+        console.error('加载监控统计失败:', error);
+        showToast('加载监控统计失败: ' + error.message, 'error');
+        renderMonitorError(error.message);
+    } finally {
+        monitorState.loading = false;
+    }
+}
+
+function renderMonitorLoading() {
+    const cards = document.getElementById('monitorCards');
+    const chart = document.getElementById('modelUsageChart');
+    if (cards && !monitorState.data) {
+        cards.innerHTML = Array.from({ length: 5 }).map(() => '<div class="monitor-card skeleton"></div>').join('');
+    }
+    if (chart && !monitorState.data) {
+        chart.innerHTML = '<div class="monitor-empty">正在加载监控数据...</div>';
+    }
+}
+
+function renderMonitorError(message) {
+    const cards = document.getElementById('monitorCards');
+    const chart = document.getElementById('modelUsageChart');
+    if (cards) cards.innerHTML = `<div class="monitor-error">${escapeHtml(message)}</div>`;
+    if (chart) chart.innerHTML = '<div class="monitor-empty">暂无可展示数据</div>';
+}
+
+function renderMonitorUsage(data) {
+    renderMonitorCards(data);
+    renderModelUsageChart(data);
+}
+
+function renderMonitorCards(data) {
+    const cards = document.getElementById('monitorCards');
+    if (!cards) return;
+
+    const totals = data.totals || {};
+    const averages = data.averages || {};
+    cards.innerHTML = `
+        <div class="monitor-card requests">
+            <div class="monitor-card-title">请求数</div>
+            <div class="monitor-card-value">${formatCompactNumber(totals.requests)}</div>
+            <div class="monitor-card-sub">
+                <span class="success">成功 ${formatCompactNumber(totals.success)}</span>
+                <span class="danger">失败 ${formatCompactNumber(totals.failed)}</span>
+            </div>
+        </div>
+        <div class="monitor-card tokens">
+            <div class="monitor-card-title">Tokens</div>
+            <div class="monitor-card-value">${formatCompactNumber(totals.totalTokens)}</div>
+            <div class="monitor-card-sub">
+                <span>输入 ${formatCompactNumber(totals.inputTokens)}</span>
+                <span>输出 ${formatCompactNumber(totals.outputTokens)}</span>
+            </div>
+        </div>
+        <div class="monitor-card tpm">
+            <div class="monitor-card-title">平均 TPM</div>
+            <div class="monitor-card-value">${formatNumber(averages.tpm, 2)}</div>
+            <div class="monitor-card-sub"><span>每分钟 Token 数</span></div>
+        </div>
+        <div class="monitor-card rpm">
+            <div class="monitor-card-title">平均 RPM</div>
+            <div class="monitor-card-value">${formatNumber(averages.rpm, 2)}</div>
+            <div class="monitor-card-sub"><span>每分钟请求数</span></div>
+        </div>
+        <div class="monitor-card rdp">
+            <div class="monitor-card-title">日均 RDP</div>
+            <div class="monitor-card-value">${formatNumber(averages.rdp, 2)}</div>
+            <div class="monitor-card-sub"><span>每日请求数</span></div>
+        </div>
+    `;
+}
+
+function renderModelUsageChart(data) {
+    const container = document.getElementById('modelUsageChart');
+    if (!container) return;
+
+    const models = (data.models || []).filter(item => item.totalTokens > 0);
+    const totalTokens = models.reduce((sum, item) => sum + item.totalTokens, 0);
+    if (!models.length || totalTokens <= 0) {
+        container.innerHTML = '<div class="monitor-empty">当前时间范围内暂无 Token 用量数据</div>';
+        return;
+    }
+
+    const colors = ['#4f46e5', '#06b6d4', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#64748b'];
+    const topModels = models.slice(0, 7);
+    const otherTokens = models.slice(7).reduce((sum, item) => sum + item.totalTokens, 0);
+    const chartItems = otherTokens > 0
+        ? [...topModels, { model: '其他模型', totalTokens: otherTokens, requests: models.slice(7).reduce((sum, item) => sum + item.requests, 0) }]
+        : topModels;
+
+    let cursor = 0;
+    const gradientStops = chartItems.map((item, index) => {
+        const percent = item.totalTokens / totalTokens * 100;
+        const start = cursor;
+        const end = cursor + percent;
+        cursor = end;
+        return `${colors[index % colors.length]} ${start}% ${end}%`;
+    }).join(', ');
+
+    const legend = chartItems.map((item, index) => {
+        const percent = item.totalTokens / totalTokens * 100;
+        return `
+            <div class="model-legend-item">
+                <span class="model-color" style="background:${colors[index % colors.length]}"></span>
+                <span class="model-name" title="${escapeHtml(item.model)}">${escapeHtml(item.model)}</span>
+                <span class="model-tokens">${formatCompactNumber(item.totalTokens)}</span>
+                <span class="model-percent">${formatNumber(percent, 1)}%</span>
+            </div>
+        `;
+    }).join('');
+
+    container.innerHTML = `
+        <div class="donut-wrap">
+            <div class="donut-chart" style="background: conic-gradient(${gradientStops});">
+                <div class="donut-hole">
+                    <span>${formatCompactNumber(totalTokens)}</span>
+                    <small>Tokens</small>
+                </div>
+            </div>
+        </div>
+        <div class="model-legend">${legend}</div>
+    `;
+}
diff --git a/public/js/ui.js b/public/js/ui.js
index f04f927f..193844d3 100644
--- a/public/js/ui.js
+++ b/public/js/ui.js
@@ -148,13 +148,15 @@ function hideLoading() {
 
 function switchTab(tab, saveState = true) {
     // 更新html元素的class以防止闪烁
-    document.documentElement.classList.remove('tab-settings', 'tab-logs', 'tab-geminicli');
+    document.documentElement.classList.remove('tab-settings', 'tab-logs', 'tab-geminicli', 'tab-monitor');
     if (tab === 'settings') {
         document.documentElement.classList.add('tab-settings');
     } else if (tab === 'logs') {
         document.documentElement.classList.add('tab-logs');
     } else if (tab === 'geminicli') {
         document.documentElement.classList.add('tab-geminicli');
+    } else if (tab === 'monitor') {
+        document.documentElement.classList.add('tab-monitor');
     }
 
     // 移除所有tab的active状态
@@ -170,6 +172,7 @@ function switchTab(tab, saveState = true) {
     const settingsPage = document.getElementById('settingsPage');
     const logsPage = document.getElementById('logsPage');
     const geminicliPage = document.getElementById('geminicliPage');
+    const monitorPage = document.getElementById('monitorPage');
 
     // 隐藏所有页面并移除动画类
     tokensPage.classList.add('hidden');
@@ -184,6 +187,10 @@ function switchTab(tab, saveState = true) {
         geminicliPage.classList.add('hidden');
         geminicliPage.classList.remove('page-enter');
     }
+    if (monitorPage) {
+        monitorPage.classList.add('hidden');
+        monitorPage.classList.remove('page-enter');
+    }
 
     // 清理日志页面的自动刷新（如果离开日志页面）
     if (tab !== 'logs' && typeof cleanupLogsPage === 'function') {
@@ -217,6 +224,15 @@ function switchTab(tab, saveState = true) {
                 initLogsPage();
             }
         }
+    } else if (tab === 'monitor') {
+        if (monitorPage) {
+            monitorPage.classList.remove('hidden');
+            void monitorPage.offsetWidth;
+            monitorPage.classList.add('page-enter');
+            if (typeof initMonitorPage === 'function' && isLoggedIn) {
+                initMonitorPage();
+            }
+        }
     } else if (tab === 'geminicli') {
         if (geminicliPage) {
             geminicliPage.classList.remove('hidden');
@@ -239,7 +255,7 @@ function switchTab(tab, saveState = true) {
 // 恢复Tab状态
 function restoreTabState() {
     const savedTab = localStorage.getItem('currentTab');
-    if (savedTab && (savedTab === 'tokens' || savedTab === 'settings' || savedTab === 'logs' || savedTab === 'geminicli')) {
+    if (savedTab && (savedTab === 'tokens' || savedTab === 'settings' || savedTab === 'logs' || savedTab === 'geminicli' || savedTab === 'monitor')) {
         switchTab(savedTab, false);
     }
 }
diff --git a/src/routes/admin.js b/src/routes/admin.js
index 24701b8b..d345c25a 100644
--- a/src/routes/admin.js
+++ b/src/routes/admin.js
@@ -14,6 +14,7 @@ import { getModelsWithQuotas } from '../api/client.js';
 import { getEnvPath } from '../utils/paths.js';
 import ipBlockManager from '../utils/ipBlockManager.js';
 import dotenv from 'dotenv';
+import usageStats from '../utils/usageStats.js';
 
 const envPath = getEnvPath();
 
@@ -744,6 +745,18 @@ router.put('/rotation', cookieAuthMiddleware, (req, res) => {
   }
 });
 
+// ==================== 监控中心 API ====================
+
+router.get('/monitor/usage', cookieAuthMiddleware, (req, res) => {
+  try {
+    const days = parseInt(req.query.days, 10) || 7;
+    res.json({ success: true, data: usageStats.getSummary(days) });
+  } catch (error) {
+    logger.error('获取监控统计失败:', error.message);
+    res.status(500).json({ success: false, message: error.message });
+  }
+});
+
 // ==================== 日志管理 API ====================
 
 // 获取日志列表
diff --git a/src/server/handlers/claude.js b/src/server/handlers/claude.js
index 50776986..5dc17223 100644
--- a/src/server/handlers/claude.js
+++ b/src/server/handlers/claude.js
@@ -11,6 +11,7 @@ import logger from '../../utils/logger.js';
 import config from '../../config/config.js';
 import tokenManager from '../../auth/token_manager.js';
 import quotaManager from '../../auth/quota_manager.js';
+import { setUsageMetrics } from '../../utils/usageStats.js';
 import { createClaudeResponse } from '../formatters/claude.js';
 import { validateIncomingChatRequest } from '../validators/chat.js';
 import { getSafeRetries } from './common/retry.js';
@@ -166,6 +167,7 @@ export const handleClaudeRequest = async (req, res, isStream) => {
           }));
 
           // 发送 message_delta 和 message_stop
+          setUsageMetrics(req, { model, usage });
           res.write(createClaudeStreamEvent('message_delta', {
             type: "message_delta",
             delta: { stop_reason: 'end_turn', stop_sequence: null },
@@ -319,6 +321,7 @@ export const handleClaudeRequest = async (req, res, isStream) => {
         }));
 
         // 发送 message_stop
+        setUsageMetrics(req, { model, usage: usageData });
         res.write(createClaudeStreamEvent('message_stop', {
           type: "message_stop"
         }));
@@ -372,6 +375,7 @@ export const handleClaudeRequest = async (req, res, isStream) => {
         );
 
         const stopReason = toolCalls.length > 0 ? 'tool_use' : 'end_turn';
+        setUsageMetrics(req, { model, usage: usageData });
         const response = createClaudeResponse(
           msgId,
           model,
@@ -408,6 +412,7 @@ export const handleClaudeRequest = async (req, res, isStream) => {
       );
 
       const stopReason = toolCalls.length > 0 ? 'tool_use' : 'end_turn';
+      setUsageMetrics(req, { model, usage });
       const response = createClaudeResponse(
         msgId,
         model,
diff --git a/src/server/handlers/gemini.js b/src/server/handlers/gemini.js
index f76ed108..b52f14b7 100644
--- a/src/server/handlers/gemini.js
+++ b/src/server/handlers/gemini.js
@@ -10,6 +10,7 @@ import logger from '../../utils/logger.js';
 import config from '../../config/config.js';
 import tokenManager from '../../auth/token_manager.js';
 import quotaManager from '../../auth/quota_manager.js';
+import { setUsageMetrics } from '../../utils/usageStats.js';
 import { createGeminiResponse } from '../formatters/gemini.js';
 import { validateIncomingChatRequest } from '../validators/chat.js';
 import { getSafeRetries } from './common/retry.js';
@@ -168,6 +169,7 @@ export const handleGeminiRequest = async (req, res, modelName, isStream) => {
             safeRetries,
             createRetryOptions('gemini.stream.image ')
           );
+          setUsageMetrics(req, { model: modelName, usage });
           const chunk = createGeminiResponse(content, null, reasoningSignature, null, 'STOP', usage, { passSignatureToClient: config.passSignatureToClient });
           writeStreamData(res, chunk);
           clearInterval(heartbeatTimer);
@@ -208,6 +210,7 @@ export const handleGeminiRequest = async (req, res, modelName, isStream) => {
 
         // 发送结束块和 usage
         const finishReason = hasToolCall ? "STOP" : "STOP"; // Gemini 工具调用也是 STOP
+        setUsageMetrics(req, { model: modelName, usage: usageData });
         const finalChunk = createGeminiResponse(null, null, null, null, finishReason, usageData, { passSignatureToClient: config.passSignatureToClient });
         writeStreamData(res, finalChunk);
 
@@ -260,6 +263,7 @@ export const handleGeminiRequest = async (req, res, modelName, isStream) => {
         );
 
         const finishReason = "STOP";
+        setUsageMetrics(req, { model: modelName, usage: usageData });
         const response = createGeminiResponse(content, reasoningContent || null, reasoningSignature, toolCalls, finishReason, usageData, { passSignatureToClient: config.passSignatureToClient });
         res.json(response);
       } catch (error) {
@@ -285,6 +289,7 @@ export const handleGeminiRequest = async (req, res, modelName, isStream) => {
       );
 
       const finishReason = toolCalls.length > 0 ? "STOP" : "STOP";
+      setUsageMetrics(req, { model: modelName, usage });
       const response = createGeminiResponse(content, reasoningContent, reasoningSignature, toolCalls, finishReason, usage, { passSignatureToClient: config.passSignatureToClient });
       res.json(response);
     }
diff --git a/src/server/handlers/geminicli.js b/src/server/handlers/geminicli.js
index aee8e2eb..ef428344 100644
--- a/src/server/handlers/geminicli.js
+++ b/src/server/handlers/geminicli.js
@@ -33,6 +33,7 @@ import {
 import { setSignature, getSignature, shouldCacheSignature, isImageModel } from '../../utils/thoughtSignatureCache.js';
 import { getSafeRetries } from './common/retry.js';
 import { disableTimeouts } from './common/timeouts.js';
+import { setUsageMetrics } from '../../utils/usageStats.js';
 
 /**
  * 处理 Gemini CLI 格式的聊天请求（支持 OpenAI/Gemini/Claude 格式）
@@ -90,6 +91,7 @@ export const handleGeminiCliRequest = async (req, res, forceFormat = null) => {
         );
 
         writer.finalize();
+        setUsageMetrics(req, { model: responseModel, usage: writer.getUsageData() });
 
         clearInterval(heartbeatTimer);
         endStream(res, false);
@@ -125,6 +127,7 @@ export const handleGeminiCliRequest = async (req, res, forceFormat = null) => {
           }
         }
 
+        setUsageMetrics(req, { model: responseModel, usage });
         writeGeminiCliFakeStreamResponse({
           format,
           res,
@@ -186,6 +189,8 @@ export const handleGeminiCliRequest = async (req, res, forceFormat = null) => {
         }
       }
 
+      setUsageMetrics(req, { model: responseModel, usage });
+
       // 根据请求格式返回相应格式的响应
       if (format === 'gemini') {
         res.json(createGeminiResponse(
diff --git a/src/server/handlers/openai.js b/src/server/handlers/openai.js
index d5f939af..01abf8c5 100644
--- a/src/server/handlers/openai.js
+++ b/src/server/handlers/openai.js
@@ -10,6 +10,7 @@ import logger from '../../utils/logger.js';
 import config from '../../config/config.js';
 import tokenManager from '../../auth/token_manager.js';
 import quotaManager from '../../auth/quota_manager.js';
+import { setUsageMetrics } from '../../utils/usageStats.js';
 import {
   createOpenAIStreamChunk as createStreamChunk,
   createOpenAIChatCompletionResponse
@@ -111,6 +112,7 @@ export const handleOpenAIRequest = async (req, res) => {
             delta.thoughtSignature = reasoningSignature;
           }
           writeStreamData(res, createStreamChunk(id, created, model, delta));
+          setUsageMetrics(req, { model, usage });
           writeStreamData(res, { ...createStreamChunk(id, created, model, {}, 'stop'), usage });
         } else {
           let hasToolCall = false;
@@ -153,6 +155,7 @@ export const handleOpenAIRequest = async (req, res) => {
             createRetryOptions('chat.stream ')
           );
 
+          setUsageMetrics(req, { model, usage: usageData });
           writeStreamData(res, { ...createStreamChunk(id, created, model, {}, hasToolCall ? 'tool_calls' : 'stop'), usage: usageData });
         }
 
@@ -218,6 +221,7 @@ export const handleOpenAIRequest = async (req, res) => {
           }
         }
 
+        setUsageMetrics(req, { model, usage: usageData });
         res.json(createOpenAIChatCompletionResponse({
           id,
           created,
@@ -268,6 +272,7 @@ export const handleOpenAIRequest = async (req, res) => {
       }
 
       // 使用预构建的响应对象，减少内存分配
+      setUsageMetrics(req, { model, usage });
       res.json(createOpenAIChatCompletionResponse({
         id,
         created,
diff --git a/src/server/index.js b/src/server/index.js
index e8da741b..f9d0525a 100644
--- a/src/server/index.js
+++ b/src/server/index.js
@@ -16,6 +16,7 @@ import { getPublicDir, getRelativePath } from '../utils/paths.js';
 import { errorHandler } from '../utils/errors.js';
 import { getChunkPoolSize, clearChunkPool } from './stream.js';
 import ipBlockManager from '../utils/ipBlockManager.js';
+import usageStats from '../utils/usageStats.js';
 
 // 路由模块
 import adminRouter from '../routes/admin.js';
@@ -27,6 +28,14 @@ import cliRouter from '../routes/cli.js';
 
 const publicDir = getPublicDir();
 
+
+function inferUsageModel(req, fullPath) {
+  if (req.body?.model) return req.body.model;
+  const geminiMatch = fullPath.match(/^\/v1beta\/models\/([^:]+):/);
+  if (geminiMatch) return decodeURIComponent(geminiMatch[1]).replace(/^models\//, '');
+  return req.params?.model || 'unknown';
+}
+
 const app = express();
 
 // 信任反向代理，以便正确获取 HTTPS 协议状态 (req.secure) 和客户端 IP
@@ -92,6 +101,28 @@ app.use((req, res, next) => {
 // SD API 路由
 app.use('/sdapi/v1', sdRouter);
 
+// ==================== 调用监控统计中间件 ====================
+app.use((req, res, next) => {
+  const fullPath = req.originalUrl.split('?')[0];
+  if (!usageStats.shouldTrackPath(fullPath)) {
+    return next();
+  }
+
+  const inferredModel = inferUsageModel(req, fullPath);
+  req.apiUsageMetrics = { model: inferredModel, usage: {} };
+  const startedAt = Date.now();
+  res.on('finish', () => {
+    usageStats.record({
+      timestamp: startedAt,
+      statusCode: res.statusCode,
+      model: req.apiUsageMetrics?.model || inferredModel,
+      usage: req.apiUsageMetrics?.usage || {},
+      path: fullPath
+    });
+  });
+  next();
+});
+
 // ==================== API Key 验证中间件 ====================
 app.use((req, res, next) => {
   if (req.path.startsWith('/v1/') || req.path.startsWith('/cli/v1/')) {
diff --git a/src/utils/usageStats.js b/src/utils/usageStats.js
new file mode 100644
index 00000000..5341cf97
--- /dev/null
+++ b/src/utils/usageStats.js
@@ -0,0 +1,214 @@
+/**
+ * API 调用监控统计
+ * 以内存环形历史记录保存最近 30 天的 API 请求与 token 用量。
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { getDataDir } from './paths.js';
+
+const MAX_DAYS = 30;
+const DAY_MS = 24 * 60 * 60 * 1000;
+const API_PATH_PREFIXES = ['/v1/', '/v1beta/', '/cli/v1/'];
+const DATA_FILE = path.join(getDataDir(), 'usage-stats.json');
+
+function startOfUtcDay(timestamp = Date.now()) {
+  const date = new Date(timestamp);
+  return Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
+}
+
+function emptyTotals() {
+  return {
+    requests: 0,
+    success: 0,
+    failed: 0,
+    inputTokens: 0,
+    outputTokens: 0,
+    totalTokens: 0
+  };
+}
+
+function normalizeUsage(usage = {}) {
+  const inputTokens = Number(
+    usage.prompt_tokens ??
+    usage.input_tokens ??
+    usage.promptTokenCount ??
+    usage.inputTokenCount ??
+    0
+  ) || 0;
+  const outputTokens = Number(
+    usage.completion_tokens ??
+    usage.output_tokens ??
+    usage.candidatesTokenCount ??
+    usage.outputTokenCount ??
+    0
+  ) || 0;
+  const totalTokens = Number(
+    usage.total_tokens ??
+    usage.totalTokenCount ??
+    inputTokens + outputTokens
+  ) || inputTokens + outputTokens;
+
+  return { inputTokens, outputTokens, totalTokens };
+}
+
+function createBucket(day) {
+  return {
+    day,
+    ...emptyTotals(),
+    models: {}
+  };
+}
+
+class UsageStatsStore {
+  constructor() {
+    this.buckets = new Map();
+    this.saveTimer = null;
+    this.load();
+  }
+
+  load() {
+    try {
+      if (!fs.existsSync(DATA_FILE)) return;
+      const raw = JSON.parse(fs.readFileSync(DATA_FILE, 'utf8'));
+      for (const bucket of raw.buckets || []) {
+        if (bucket?.day) {
+          this.buckets.set(Number(bucket.day), bucket);
+        }
+      }
+      this.prune();
+    } catch {
+      this.buckets = new Map();
+    }
+  }
+
+  scheduleSave() {
+    if (this.saveTimer) return;
+    this.saveTimer = setTimeout(() => {
+      this.saveTimer = null;
+      this.save();
+    }, 1000);
+  }
+
+  save() {
+    try {
+      fs.mkdirSync(path.dirname(DATA_FILE), { recursive: true });
+      fs.writeFileSync(DATA_FILE, JSON.stringify({ buckets: Array.from(this.buckets.values()) }, null, 2));
+    } catch {
+      // 监控统计不能影响主请求链路
+    }
+  }
+
+  shouldTrackPath(path = '') {
+    return API_PATH_PREFIXES.some(prefix => path.startsWith(prefix));
+  }
+
+  record({ timestamp = Date.now(), statusCode = 0, model = 'unknown', usage = {} } = {}) {
+    const day = startOfUtcDay(timestamp);
+    const bucket = this.buckets.get(day) || createBucket(day);
+    const normalizedUsage = normalizeUsage(usage);
+    const modelName = typeof model === 'string' && model.trim() ? model.trim() : 'unknown';
+    const failed = statusCode >= 400 || statusCode === 0;
+
+    bucket.requests += 1;
+    if (failed) {
+      bucket.failed += 1;
+    } else {
+      bucket.success += 1;
+    }
+    bucket.inputTokens += normalizedUsage.inputTokens;
+    bucket.outputTokens += normalizedUsage.outputTokens;
+    bucket.totalTokens += normalizedUsage.totalTokens;
+
+    const modelStats = bucket.models[modelName] || emptyTotals();
+    modelStats.requests += 1;
+    if (failed) {
+      modelStats.failed += 1;
+    } else {
+      modelStats.success += 1;
+    }
+    modelStats.inputTokens += normalizedUsage.inputTokens;
+    modelStats.outputTokens += normalizedUsage.outputTokens;
+    modelStats.totalTokens += normalizedUsage.totalTokens;
+    bucket.models[modelName] = modelStats;
+
+    this.buckets.set(day, bucket);
+    this.prune(timestamp);
+    this.scheduleSave();
+  }
+
+  prune(now = Date.now()) {
+    const minDay = startOfUtcDay(now - (MAX_DAYS - 1) * DAY_MS);
+    for (const day of this.buckets.keys()) {
+      if (day < minDay) {
+        this.buckets.delete(day);
+      }
+    }
+  }
+
+  getSummary(days = 7) {
+    const safeDays = [7, 14, 30].includes(Number(days)) ? Number(days) : 7;
+    const now = Date.now();
+    const today = startOfUtcDay(now);
+    const totals = emptyTotals();
+    const modelMap = new Map();
+    const daily = [];
+
+    this.prune(now);
+
+    for (let i = safeDays - 1; i >= 0; i--) {
+      const day = today - i * DAY_MS;
+      const bucket = this.buckets.get(day) || createBucket(day);
+      daily.push({
+        date: new Date(day).toISOString().slice(0, 10),
+        requests: bucket.requests,
+        success: bucket.success,
+        failed: bucket.failed,
+        inputTokens: bucket.inputTokens,
+        outputTokens: bucket.outputTokens,
+        totalTokens: bucket.totalTokens
+      });
+
+      for (const key of Object.keys(totals)) {
+        totals[key] += bucket[key];
+      }
+
+      for (const [modelName, stats] of Object.entries(bucket.models)) {
+        const merged = modelMap.get(modelName) || emptyTotals();
+        for (const key of Object.keys(merged)) {
+          merged[key] += stats[key] || 0;
+        }
+        modelMap.set(modelName, merged);
+      }
+    }
+
+    const minutes = safeDays * 24 * 60;
+    const models = Array.from(modelMap.entries())
+      .map(([model, stats]) => ({ model, ...stats }))
+      .sort((a, b) => b.totalTokens - a.totalTokens || b.requests - a.requests);
+
+    return {
+      rangeDays: safeDays,
+      totals,
+      averages: {
+        tpm: totals.totalTokens / minutes,
+        rpm: totals.requests / minutes,
+        rdp: totals.requests / safeDays
+      },
+      models,
+      daily,
+      updatedAt: new Date(now).toISOString()
+    };
+  }
+}
+
+export const usageStats = new UsageStatsStore();
+export function setUsageMetrics(req, { model, usage } = {}) {
+  if (!req) return;
+  req.apiUsageMetrics = {
+    ...(req.apiUsageMetrics || {}),
+    ...(model !== undefined ? { model } : {}),
+    ...(usage !== undefined ? { usage } : {})
+  };
+}
+export default usageStats;