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-03 11:20: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

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 {