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

Merge pull request #44 from moxi000/dev

Browse Source 
feat: 优化配额管理页面 UI 与交互
This commit is contained in:
Supra4E8C
2026-01-04 23:38:44 +08:00
committed by GitHub
parent bf20f3d86e 692f7f3cde
commit 916dd3ec26
10 changed files with 286 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/pages/QuotaPage.module.scss
View File

@@ -30,6 +30,36 @@
display: flex;
gap: $spacing-sm;
flex-wrap: wrap;
align-items: center;
:global(.btn-sm) {
line-height: 16px;
}
:global(svg) {
display: block;
}
}
.titleWrapper {
display: flex;
align-items: center;
gap: $spacing-sm;
}
.countBadge {
display: inline-flex;
align-items: center;
justify-content: center;
height: 24px;
min-width: 24px;
padding: 0 8px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: var(--count-badge-text);
background-color: var(--count-badge-bg);
box-sizing: border-box;
}
.errorBox {
@@ -76,11 +106,7 @@
.geminiCliGrid {
display: grid;
gap: $spacing-md;
grid-template-columns: repeat(3, minmax(0, 1fr));
@include tablet {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
@include mobile {
grid-template-columns: 1fr;
@@ -112,28 +138,28 @@
}
}
.viewModeToggle {
display: flex;
gap: $spacing-xs;
align-items: center;
}
.antigravityCard {
background-image: linear-gradient(
180deg,
rgba(224, 247, 250, 0.12),
rgba(224, 247, 250, 0)
);
background-image: linear-gradient(180deg,
rgba(224, 247, 250, 0.12),
rgba(224, 247, 250, 0));
}
.codexCard {
background-image: linear-gradient(
180deg,
rgba(255, 243, 224, 0.18),
rgba(255, 243, 224, 0)
);
background-image: linear-gradient(180deg,
rgba(255, 243, 224, 0.18),
rgba(255, 243, 224, 0));
}
.geminiCliCard {
background-image: linear-gradient(
180deg,
rgba(231, 239, 255, 0.2),
rgba(231, 239, 255, 0)
);
background-image: linear-gradient(180deg,
rgba(231, 239, 255, 0.2),
rgba(231, 239, 255, 0));
}
.quotaSection {
@@ -331,3 +357,32 @@
background-color: var(--bg-secondary);
border-radius: $radius-md;
}
.warningOverlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.warningModal {
background-color: var(--bg-primary);
border-radius: $radius-lg;
padding: $spacing-lg;
max-width: 400px;
text-align: center;
box-shadow: $shadow-lg;
p {
margin: 0 0 $spacing-md 0;
color: var(--text-primary);
font-size: 14px;
line-height: 1.6;
}
}