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-18 02:30:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance MainLayout with header height management using useLayoutEffect, improve AiProvidersPage by removing priority field, and update UsagePage with dynamic stats cards and sparkline charts for better data visualization

Browse Source
This commit is contained in:
Supra4E8C
2025-12-10 01:42:21 +08:00
parent d8f540cdb1
commit c71af9a8a5
9 changed files with 371 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/pages/UsagePage.module.scss
View File

@@ -43,10 +43,10 @@
.statsGrid {
display: grid;
gap: $spacing-md;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
@include tablet {
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
}
@include mobile {
@@ -62,6 +62,40 @@
display: flex;
flex-direction: column;
gap: $spacing-sm;
min-height: 200px;
box-shadow: $shadow-sm;
transition: transform $transition-fast, box-shadow $transition-fast, border-color $transition-fast;
overflow: hidden;
&:hover {
transform: translateY(-2px);
box-shadow: $shadow-md;
border-color: rgba(37, 99, 235, 0.2);
}
}
.statCardHeader {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: $spacing-sm;
}
.statLabelGroup {
display: flex;
flex-direction: column;
gap: 2px;
}
.statIconBadge {
width: 40px;
height: 40px;
border-radius: $radius-md;
display: grid;
place-items: center;
color: #fff;
font-size: 18px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}
.statHeader {
@@ -75,13 +109,15 @@
}
.statLabel {
font-size: 14px;
font-size: 13px;
color: var(--text-secondary);
font-weight: 500;
font-weight: 600;
letter-spacing: 0.01em;
text-transform: uppercase;
}
.statValue {
font-size: 28px;
font-size: 30px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
@@ -128,6 +164,52 @@
color: var(--text-secondary);
}
.statMetaRow {
display: flex;
flex-wrap: wrap;
gap: $spacing-sm;
font-size: 12px;
color: var(--text-secondary);
}
.statMetaItem {
display: inline-flex;
align-items: center;
gap: 6px;
}
.statMetaDot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: var(--text-secondary);
}
.statSubtle {
color: var(--text-tertiary);
}
.statTrend {
margin-top: auto;
background: var(--bg-secondary, #f6f8fb);
border-radius: $radius-md;
padding: $spacing-xs $spacing-sm;
height: 72px;
border: 1px solid var(--border-color);
}
.statTrendPlaceholder {
width: 100%;
height: 100%;
background: var(--bg-tertiary, #eef1f6);
border-radius: $radius-sm;
}
.sparkline {
width: 100%;
height: 100% !important;
}
.statHint {
color: var(--text-tertiary);
font-style: italic;