feat: enhance usage statistics overview with responsive design, improved layout, and sparkline charts for better data visualization

index.html

@@ -890,81 +890,91 @@
                             <!-- 概览统计卡片 -->
                             <div class="stats-overview">
                                 <div class="stat-card">
-                                    <div class="stat-icon">
+                                    <div class="stat-card-header">
-                                        <i class="fas fa-paper-plane"></i>
+                                        <div class="stat-meta">
-                                    </div>
+                                            <div class="stat-label" data-i18n="usage_stats.total_requests">总请求数</div>
-                                    <div class="stat-content">
+                                            <div class="stat-number" id="total-requests">0</div>
-                                        <div class="stat-number" id="total-requests">0</div>
+                                            <div class="stat-subtext stat-subtext-inline">
-                                        <div class="stat-label" data-i18n="usage_stats.total_requests">总请求数</div>
+                                                <span><span data-i18n="usage_stats.success_requests">成功请求</span> <span id="success-requests">0</span></span>
-                                    </div>
+                                                <span class="dot-divider">•</span>
-                                </div>
+                                                <span><span data-i18n="usage_stats.failed_requests">失败请求</span> <span id="failed-requests">0</span></span>
-
+                                            </div>
-                                <div class="stat-card">
-                                    <div class="stat-icon success">
-                                        <i class="fas fa-check-circle"></i>
-                                    </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="success-requests">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.success_requests">成功请求</div>
-                                    </div>
-                                </div>
-
-                                <div class="stat-card">
-                                    <div class="stat-icon error">
-                                        <i class="fas fa-exclamation-circle"></i>
-                                    </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="failed-requests">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.failed_requests">失败请求</div>
-                                    </div>
-                                </div>
-
-                                <div class="stat-card">
-                                    <div class="stat-icon">
-                                        <i class="fas fa-coins"></i>
-                                    </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="total-tokens">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.total_tokens">总Token数</div>
-                                        <div class="stat-subtext">
-                                            <span data-i18n="usage_stats.cached_tokens">缓存 Token 数</span>:
-                                            <span id="cached-tokens">0</span>
                                         </div>
-                                        <div class="stat-subtext">
+                                        <div class="stat-icon">
-                                            <span data-i18n="usage_stats.reasoning_tokens">思考 Token 数</span>:
+                                            <i class="fas fa-paper-plane"></i>
-                                            <span id="reasoning-tokens">0</span>
                                         </div>
                                     </div>
-                                </div>
+                                    <div class="stat-sparkline" aria-label="30分钟请求趋势">
-
+                                        <canvas id="requests-sparkline"></canvas>
-                                <div class="stat-card">
-                                    <div class="stat-icon">
-                                        <i class="fas fa-gauge-high"></i>
-                                    </div>
-                                    <div class="stat-content">
-                                        <div class="stat-number" id="rpm-30m">0</div>
-                                        <div class="stat-label" data-i18n="usage_stats.rpm_30m">RPM（近30分钟）</div>
                                     </div>
                                 </div>
 
                                 <div class="stat-card">
-                                    <div class="stat-icon">
+                                    <div class="stat-card-header">
-                                        <i class="fas fa-stopwatch"></i>
+                                        <div class="stat-meta">
+                                            <div class="stat-label" data-i18n="usage_stats.total_tokens">总Token数</div>
+                                            <div class="stat-number" id="total-tokens">0</div>
+                                            <div class="stat-subtext">
+                                                <span data-i18n="usage_stats.cached_tokens">缓存 Token 数</span>:
+                                                <span id="cached-tokens">0</span>
+                                            </div>
+                                            <div class="stat-subtext">
+                                                <span data-i18n="usage_stats.reasoning_tokens">思考 Token 数</span>:
+                                                <span id="reasoning-tokens">0</span>
+                                            </div>
+                                        </div>
+                                        <div class="stat-icon">
+                                            <i class="fas fa-coins"></i>
+                                        </div>
                                     </div>
-                                    <div class="stat-content">
+                                    <div class="stat-sparkline" aria-label="30分钟Token趋势">
-                                        <div class="stat-number" id="tpm-30m">0</div>
+                                        <canvas id="tokens-sparkline"></canvas>
-                                        <div class="stat-label" data-i18n="usage_stats.tpm_30m">TPM（近30分钟）</div>
+                                    </div>
+                                </div>
+
+                                <div class="stat-card">
+                                    <div class="stat-card-header">
+                                        <div class="stat-meta">
+                                            <div class="stat-label" data-i18n="usage_stats.rpm_30m">RPM（近30分钟）</div>
+                                            <div class="stat-number" id="rpm-30m">0</div>
+                                        </div>
+                                        <div class="stat-icon">
+                                            <i class="fas fa-gauge-high"></i>
+                                        </div>
+                                    </div>
+                                    <div class="stat-sparkline" aria-label="30分钟RPM趋势">
+                                        <canvas id="rpm-sparkline"></canvas>
+                                    </div>
+                                </div>
+
+                                <div class="stat-card">
+                                    <div class="stat-card-header">
+                                        <div class="stat-meta">
+                                            <div class="stat-label" data-i18n="usage_stats.tpm_30m">TPM（近30分钟）</div>
+                                            <div class="stat-number" id="tpm-30m">0</div>
+                                        </div>
+                                        <div class="stat-icon">
+                                            <i class="fas fa-stopwatch"></i>
+                                        </div>
+                                    </div>
+                                    <div class="stat-sparkline" aria-label="30分钟TPM趋势">
+                                        <canvas id="tpm-sparkline"></canvas>
                                     </div>
                                 </div>
 
                                 <div class="stat-card cost-summary-card">
-                                    <div class="stat-icon">
+                                    <div class="stat-card-header">
-                                        <i class="fas fa-dollar-sign"></i>
+                                        <div class="stat-meta">
+                                            <div class="stat-label" data-i18n="usage_stats.total_cost">总花费</div>
+                                            <div class="stat-number" id="total-cost">--</div>
+                                            <div class="stat-subtext" id="total-cost-hint" data-i18n="usage_stats.total_cost_hint">基于已设置的模型单价</div>
+                                        </div>
+                                        <div class="stat-icon">
+                                            <i class="fas fa-dollar-sign"></i>
+                                        </div>
                                     </div>
-                                    <div class="stat-content">
+                                    <div class="stat-sparkline" aria-label="30分钟花费趋势">
-                                        <div class="stat-number" id="total-cost">--</div>
+                                        <canvas id="cost-sparkline"></canvas>
-                                        <div class="stat-label" data-i18n="usage_stats.total_cost">总花费</div>
-                                        <div class="stat-subtext" id="total-cost-hint" data-i18n="usage_stats.total_cost_hint">基于已设置的模型单价</div>
                                     </div>
                                 </div>
                             </div>

src/modules/usage.js

@@ -140,6 +140,7 @@ export async function loadUsageStats(usageData = null) {
 
         // 更新概览卡片
         this.updateUsageOverview(usage);
+        this.renderOverviewSparklines(usage);
         this.updateChartLineSelectors(usage);
         this.renderModelPriceOptions(usage);
         this.renderSavedModelPrices();
@@ -168,6 +169,7 @@ export async function loadUsageStats(usageData = null) {
         this.renderModelPriceOptions(null);
         this.renderSavedModelPrices();
         this.updateCostSummaryAndChart(null);
+        this.destroySparklineCharts();
 
         // 清空概览数据
         ['total-requests', 'success-requests', 'failed-requests', 'total-tokens', 'cached-tokens', 'reasoning-tokens', 'rpm-30m', 'tpm-30m'].forEach(id => {
@@ -242,6 +244,36 @@ export function formatPerMinuteValue(value) {
     return num.toFixed(2);
 }
 
+export function formatCompactNumber(value) {
+    const num = Number(value);
+    if (!Number.isFinite(num)) {
+        return '0';
+    }
+    const abs = Math.abs(num);
+    if (abs >= 1_000_000) {
+        return `${(num / 1_000_000).toFixed(1)}M`;
+    }
+    if (abs >= 1_000) {
+        return `${(num / 1_000).toFixed(1)}K`;
+    }
+    return abs >= 1 ? num.toFixed(0) : num.toFixed(2);
+}
+
+export function formatCompactNumber(value) {
+    const num = Number(value);
+    if (!Number.isFinite(num)) {
+        return '0';
+    }
+    const abs = Math.abs(num);
+    if (abs >= 1_000_000) {
+        return `${(num / 1_000_000).toFixed(1)}M`;
+    }
+    if (abs >= 1_000) {
+        return `${(num / 1_000).toFixed(1)}K`;
+    }
+    return abs >= 1 ? num.toFixed(0) : num.toFixed(2);
+}
+
 export function getModelNamesFromUsage(usage) {
     if (!usage) {
         return [];
@@ -751,6 +783,7 @@ export function handleModelPriceSubmit() {
     this.persistModelPrices(next);
     this.renderSavedModelPrices();
     this.updateCostSummaryAndChart(this.currentUsageData, this.getCostChartPeriod());
+    this.renderOverviewSparklines(this.currentUsageData);
     this.showNotification(i18n.t('usage_stats.model_price_saved'), 'success');
 }
 
@@ -768,6 +801,7 @@ export function handleModelPriceReset() {
     this.renderSavedModelPrices();
     this.prefillModelPriceInputs();
     this.updateCostSummaryAndChart(this.currentUsageData, this.getCostChartPeriod());
+    this.renderOverviewSparklines(this.currentUsageData);
 }
 
 export function calculateTokenBreakdown(usage = null) {
@@ -826,6 +860,191 @@ export function calculateRecentPerMinuteRates(windowMinutes = 30, usage = null)
     };
 }
 
+export function buildRecentWindowSeries(windowMinutes = 30, usage = null, prices = null) {
+    const usagePayload = usage || this.currentUsageData;
+    const effectiveWindow = Number.isFinite(windowMinutes) && windowMinutes > 0
+        ? Math.min(windowMinutes, 720)
+        : 30;
+    const bucketMs = 60 * 1000;
+    const bucketCount = Math.max(1, Math.floor(effectiveWindow));
+    const now = Date.now();
+    const windowStart = now - bucketCount * bucketMs;
+    const labels = Array.from({ length: bucketCount }, (_, index) =>
+        this.formatMinuteLabel(new Date(windowStart + index * bucketMs))
+    );
+
+    const requestSeries = new Array(bucketCount).fill(0);
+    const tokenSeries = new Array(bucketCount).fill(0);
+    const costSeries = new Array(bucketCount).fill(0);
+    const priceTable = prices || this.modelPrices || {};
+    const hasPrices = Object.keys(priceTable).length > 0;
+
+    if (!usagePayload) {
+        return {
+            labels,
+            requests: requestSeries,
+            tokens: tokenSeries,
+            rpm: requestSeries,
+            tpm: tokenSeries,
+            cost: costSeries,
+            hasPrices
+        };
+    }
+
+    const details = this.collectUsageDetailsFromUsage(usagePayload);
+    const calculateDetailCost = (detail) => {
+        if (!hasPrices) {
+            return 0;
+        }
+        const modelName = detail.__modelName || '';
+        const price = priceTable[modelName];
+        if (!price) {
+            return 0;
+        }
+        const tokens = detail?.tokens || {};
+        const promptTokens = Number(tokens.input_tokens) || 0;
+        const completionTokens = Number(tokens.output_tokens) || 0;
+        const promptCost = (promptTokens / TOKENS_PER_PRICE_UNIT) * (Number(price.prompt) || 0);
+        const completionCost = (completionTokens / TOKENS_PER_PRICE_UNIT) * (Number(price.completion) || 0);
+        const total = promptCost + completionCost;
+        return Number.isFinite(total) && total > 0 ? total : 0;
+    };
+
+    details.forEach(detail => {
+        const timestamp = Date.parse(detail.timestamp);
+        if (Number.isNaN(timestamp) || timestamp < windowStart) {
+            return;
+        }
+        const bucketIndex = Math.min(bucketCount - 1, Math.floor((timestamp - windowStart) / bucketMs));
+        if (bucketIndex < 0 || bucketIndex >= bucketCount) {
+            return;
+        }
+
+        requestSeries[bucketIndex] += 1;
+        tokenSeries[bucketIndex] += this.extractTotalTokens(detail);
+        costSeries[bucketIndex] += calculateDetailCost(detail);
+    });
+
+    return {
+        labels,
+        requests: requestSeries,
+        tokens: tokenSeries,
+        rpm: requestSeries,
+        tpm: tokenSeries,
+        cost: costSeries,
+        hasPrices
+    };
+}
+
+export function destroySparklineCharts(targetIds = null) {
+    if (!this.sparklineCharts) {
+        this.sparklineCharts = {};
+    }
+    const ids = targetIds && targetIds.length ? targetIds : Object.keys(this.sparklineCharts);
+    ids.forEach(id => {
+        const chart = this.sparklineCharts[id];
+        if (chart && typeof chart.destroy === 'function') {
+            chart.destroy();
+        }
+        delete this.sparklineCharts[id];
+
+        const canvas = document.getElementById(id);
+        if (canvas && typeof canvas.getContext === 'function') {
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                const width = canvas.width || canvas.clientWidth || 300;
+                const height = canvas.height || canvas.clientHeight || 80;
+                ctx.clearRect(0, 0, width, height);
+            }
+        }
+    });
+}
+
+export function renderOverviewSparklines(usage = null) {
+    const series = this.buildRecentWindowSeries(30, usage, this.modelPrices);
+    const labels = series.labels || [];
+    const styleFor = (index = 0) => {
+        const fallback = { borderColor: '#3b82f6', backgroundColor: 'rgba(59, 130, 246, 0.15)' };
+        if (!Array.isArray(this.chartLineStyles) || !this.chartLineStyles.length) {
+            return fallback;
+        }
+        return this.chartLineStyles[index % this.chartLineStyles.length] || fallback;
+    };
+
+    const createSparkline = ({ id, data, styleIndex, requirePrices = false }) => {
+        if (requirePrices && !series.hasPrices) {
+            this.destroySparklineCharts([id]);
+            return;
+        }
+        const canvas = document.getElementById(id);
+        if (!canvas) {
+            return;
+        }
+
+        const style = styleFor(styleIndex);
+        const values = Array.isArray(data) && data.length ? data : [0];
+        const maxValue = values.reduce((max, value) => Math.max(max, Number(value) || 0), 0);
+        const suggestedMax = maxValue > 0 ? maxValue * 1.2 : 1;
+
+        this.destroySparklineCharts([id]);
+        if (!this.sparklineCharts) {
+            this.sparklineCharts = {};
+        }
+
+        this.sparklineCharts[id] = new Chart(canvas, {
+            type: 'line',
+            data: {
+                labels,
+                datasets: [{
+                    data: values,
+                    borderColor: style.borderColor,
+                    backgroundColor: style.backgroundColor,
+                    fill: true,
+                    tension: 0.35,
+                    pointRadius: 0,
+                    pointHoverRadius: 3,
+                    borderWidth: 2,
+                    spanGaps: true
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                animation: false,
+                interaction: { intersect: false, mode: 'index' },
+                plugins: {
+                    legend: { display: false },
+                    tooltip: {
+                        callbacks: {
+                            label: (ctx) => this.formatCompactNumber(ctx.parsed.y || 0)
+                        }
+                    }
+                },
+                layout: { padding: { left: 2, right: 2, top: 6, bottom: 6 } },
+                scales: {
+                    x: { display: false },
+                    y: {
+                        display: false,
+                        beginAtZero: true,
+                        suggestedMin: 0,
+                        suggestedMax
+                    }
+                },
+                elements: {
+                    line: { borderWidth: 2, tension: 0.35 },
+                    point: { radius: 0, hitRadius: 3 }
+                }
+            }
+        });
+    };
+
+    createSparkline({ id: 'requests-sparkline', data: series.requests, styleIndex: 0 });
+    createSparkline({ id: 'tokens-sparkline', data: series.tokens, styleIndex: 1 });
+    createSparkline({ id: 'rpm-sparkline', data: series.rpm, styleIndex: 2 });
+    createSparkline({ id: 'tpm-sparkline', data: series.tpm, styleIndex: 3 });
+    createSparkline({ id: 'cost-sparkline', data: series.cost, styleIndex: 7, requirePrices: true });
+}
+
 export function createHourlyBucketMeta() {
     const hourMs = 60 * 60 * 1000;
     const now = new Date();
@@ -1000,6 +1219,15 @@ export function formatHourLabel(date) {
     return `${month}-${day} ${hour}:00`;
 }
 
+export function formatMinuteLabel(date) {
+    if (!(date instanceof Date)) {
+        return '';
+    }
+    const hour = date.getHours().toString().padStart(2, '0');
+    const minute = date.getMinutes().toString().padStart(2, '0');
+    return `${hour}:${minute}`;
+}
+
 export function formatDayLabel(date) {
     if (!(date instanceof Date)) {
         return '';
@@ -1602,13 +1830,16 @@ export const usageModule = {
     handleModelPriceReset,
     calculateTokenBreakdown,
     calculateRecentPerMinuteRates,
+    buildRecentWindowSeries,
     createHourlyBucketMeta,
     buildHourlySeriesByModel,
     buildDailySeriesByModel,
     buildChartDataForMetric,
     formatHourLabel,
+    formatMinuteLabel,
     formatTokensInMillions,
     formatPerMinuteValue,
+    formatCompactNumber,
     formatDayLabel,
     extractTotalTokens,
     formatUsd,
@@ -1616,6 +1847,8 @@ export const usageModule = {
     getCostChartPeriod,
     setCostChartPlaceholder,
     destroyCostChart,
+    destroySparklineCharts,
+    renderOverviewSparklines,
     initializeCostChart,
     updateCostSummaryAndChart,
     initializeCharts,

styles.css

@@ -3386,14 +3386,14 @@ input:checked+.slider:before {
 /* 使用统计样式 */
 .stats-overview {
     display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
     gap: 20px;
     margin-bottom: 30px;
 }
 
 @media (max-width: 1200px) {
     .stats-overview {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     }
 }
 
@@ -3486,10 +3486,11 @@ input:checked+.slider:before {
     background: var(--card-bg);
     border: 1px solid var(--border-color);
     border-radius: 12px;
-    padding: 24px;
+    padding: 18px;
     display: flex;
-    align-items: center;
+    flex-direction: column;
-    gap: 16px;
+    gap: 12px;
+    min-height: 220px;
     transition: all 0.2s ease;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -3500,16 +3501,31 @@ input:checked+.slider:before {
     transform: translateY(-2px);
 }
 
+.stat-card-header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    min-height: 110px;
+}
+
+.stat-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    flex: 1;
+}
+
 .stat-icon {
-    width: 50px;
+    width: 44px;
-    height: 50px;
+    height: 44px;
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--primary-color);
     color: white;
-    font-size: 20px;
+    font-size: 18px;
     flex-shrink: 0;
 }
 
@@ -3521,32 +3537,47 @@ input:checked+.slider:before {
     background: #ef4444;
 }
 
-.stat-content {
-    flex: 1;
-}
-
 .stat-number {
-    font-size: 28px;
+    font-size: 30px;
     font-weight: 700;
     color: var(--text-primary);
-    line-height: 1;
+    line-height: 1.1;
-    margin-bottom: 4px;
 }
 
 .stat-label {
-    font-size: 14px;
+    font-size: 13px;
+    letter-spacing: 0.2px;
     color: var(--text-secondary);
-    font-weight: 500;
+    text-transform: uppercase;
+    font-weight: 600;
 }
 
 .stat-subtext {
     font-size: 12px;
     color: var(--text-tertiary);
-    line-height: 1.4;
+    line-height: 1.5;
 }
 
-.stat-subtext:first-of-type {
+.stat-subtext-inline {
-    margin-top: 6px;
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.dot-divider {
+    color: var(--text-tertiary);
+    font-weight: 700;
+}
+
+.stat-sparkline {
+    height: 90px;
+    margin-top: auto;
+}
+
+.stat-sparkline canvas {
+    width: 100% !important;
+    height: 100% !important;
 }
 
 .cost-summary-card .stat-icon {