chuan/Cli-Proxy-API-Management-Center
1
0
Fork 0
mirror of https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git synced 2026-02-02 02:40:50 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Supra4E8C
2025-12-06 16:32:47 +08:00
parent 28750ab068
commit 2bcaf15fe8
3 changed files with 356 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
index.html
View File

@@ -890,81 +890,91 @@
<!-- 概览统计卡片 -->
<div class="stats-overview">
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-paper-plane"></i>
</div>
<div class="stat-content">
<div class="stat-number" id="total-requests">0</div>
<div class="stat-label" data-i18n="usage_stats.total_requests">总请求数</div>
</div>
</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 class="stat-card-header">
<div class="stat-meta">
<div class="stat-label" data-i18n="usage_stats.total_requests">总请求数</div>
<div class="stat-number" id="total-requests">0</div>
<div class="stat-subtext stat-subtext-inline">
<span><span data-i18n="usage_stats.success_requests">成功请求</span> <span id="success-requests">0</span></span>
<span class="dot-divider">•</span>
<span><span data-i18n="usage_stats.failed_requests">失败请求</span> <span id="failed-requests">0</span></span>
</div>
</div>
<div class="stat-subtext">
<span data-i18n="usage_stats.reasoning_tokens">思考 Token 数</span>:
<span id="reasoning-tokens">0</span>
<div class="stat-icon">
<i class="fas fa-paper-plane"></i>
</div>
</div>
</div>
<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 class="stat-sparkline" aria-label="30分钟请求趋势">
<canvas id="requests-sparkline"></canvas>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-stopwatch"></i>
<div class="stat-card-header">
<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-number" id="tpm-30m">0</div>
<div class="stat-label" data-i18n="usage_stats.tpm_30m">TPM（近30分钟）</div>
<div class="stat-sparkline" aria-label="30分钟Token趋势">
<canvas id="tokens-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.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">
<i class="fas fa-dollar-sign"></i>
<div class="stat-card-header">
<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-number" id="total-cost">--</div>
<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 class="stat-sparkline" aria-label="30分钟花费趋势">
<canvas id="cost-sparkline"></canvas>
</div>
</div>
</div>

233
src/modules/usage.js
View File

@@ -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,

71
styles.css
View File

@@ -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;
gap: 16px;
flex-direction: column;
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;
height: 50px;
width: 44px;
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;
margin-bottom: 4px;
line-height: 1.1;
}
.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 {
margin-top: 6px;
.stat-subtext-inline {
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 {