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-06-16 21:03:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(QuotaSection): update button styles and text for refresh functionality

Browse Source
This commit is contained in:
Supra4E8C
2026-03-28 02:20:02 +08:00
Unverified
parent 3f2078a45b
commit d23daddc0b
5 changed files with 114 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/quota/QuotaSection.tsx
+12 -4
View File
@@ -257,15 +257,21 @@ export function QuotaSection<TState extends QuotaStatusState, TData>({
<div className={styles.headerActions}>
<div className={styles.viewModeToggle}>
<Button
variant={effectiveViewMode === 'paged' ? 'primary' : 'secondary'}
variant="secondary"
size="sm"
className={`${styles.viewModeButton} ${
effectiveViewMode === 'paged' ? styles.viewModeButtonActive : ''
}`}
onClick={() => setViewMode('paged')}
>
{t('auth_files.view_mode_paged')}
</Button>
<Button
variant={effectiveViewMode === 'all' ? 'primary' : 'secondary'}
variant="secondary"
size="sm"
className={`${styles.viewModeButton} ${
effectiveViewMode === 'all' ? styles.viewModeButtonActive : ''
}`}
onClick={() => {
if (filteredFiles.length > MAX_SHOW_ALL_THRESHOLD) {
setShowTooManyWarning(true);
@@ -280,13 +286,15 @@ export function QuotaSection<TState extends QuotaStatusState, TData>({
<Button
variant="secondary"
size="sm"
className={styles.refreshAllButton}
onClick={handleRefresh}
disabled={disabled || isRefreshing}
loading={isRefreshing}
title={t('quota_management.refresh_files_and_quota')}
aria-label={t('quota_management.refresh_files_and_quota')}
title={t('quota_management.refresh_all_credentials')}
aria-label={t('quota_management.refresh_all_credentials')}
>
{!isRefreshing && <IconRefreshCw size={16} />}
{t('quota_management.refresh_all_credentials')}
</Button>
</div>
}
src/i18n/locales/en.json
+2 -1
View File
@@ -1347,7 +1347,8 @@
"description": "Monitor OAuth quota status for Antigravity, Codex, and Gemini CLI credentials.",
"refresh_files": "Refresh auth files",
"refresh_files_and_quota": "Refresh files & quota",
"card_idle_hint": "Use the top \"Refresh files & quota\" button to fetch the latest quota data."
"refresh_all_credentials": "Refresh all credentials",
"card_idle_hint": "Use the top \"Refresh all credentials\" button to fetch the latest quota data."
},
"system_info": {
"title": "Management Center Info",
src/i18n/locales/ru.json
+2 -1
View File
@@ -1352,7 +1352,8 @@
"description": "Следите за статусом квот OAuth для учётных данных Antigravity, Codex и Gemini CLI.",
"refresh_files": "Обновить файлы авторизации",
"refresh_files_and_quota": "Обновить файлы и квоты",
"card_idle_hint": "Используйте кнопку «Обновить файлы и квоты» сверху, чтобы загрузить актуальные данные по квотам."
"refresh_all_credentials": "Обновить все учётные данные",
"card_idle_hint": "Используйте кнопку «Обновить все учётные данные» сверху, чтобы загрузить актуальные данные по квотам."
},
"system_info": {
"title": "Информация о центре управления",
src/i18n/locales/zh-CN.json
+2 -1
View File
@@ -1347,7 +1347,8 @@
"description": "集中查看 OAuth 额度与剩余情况",
"refresh_files": "刷新认证文件",
"refresh_files_and_quota": "刷新认证文件&额度",
"card_idle_hint": "请使用顶部“刷新认证文件&额度”按钮获取最新额度。"
"refresh_all_credentials": "刷新全部凭证",
"card_idle_hint": "请使用顶部“刷新全部凭证”按钮获取最新额度。"
},
"system_info": {
"title": "管理中心信息",
src/pages/QuotaPage.module.scss
+96 -2
View File
@@ -31,14 +31,22 @@
gap: $spacing-sm;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
min-width: 0;
:global(.btn-sm) {
:global(.btn.btn-sm) {
line-height: 16px;
min-width: 0;
}
:global(svg) {
display: block;
}
@include mobile {
width: 100%;
justify-content: stretch;
}
}
.titleWrapper {
@@ -146,9 +154,95 @@
}
.viewModeToggle {
display: flex;
display: inline-flex;
gap: $spacing-xs;
align-items: center;
padding: 3px;
border-radius: 999px;
background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
@include mobile {
flex: 1 1 auto;
width: 100%;
}
}
.viewModeButton:global(.btn.btn-sm) {
padding: 8px 14px;
border-radius: 999px;
border-color: transparent;
background: transparent;
color: var(--text-secondary);
box-shadow: none;
&:hover:not(:disabled) {
border-color: transparent;
background: color-mix(in srgb, var(--bg-hover) 72%, transparent);
color: var(--text-primary);
}
> span {
white-space: nowrap;
}
@include mobile {
flex: 1 1 0;
}
}
.viewModeButtonActive:global(.btn.btn-sm) {
background: var(--primary-color);
border-color: var(--primary-color);
color: var(--primary-contrast, #fff);
box-shadow: 0 8px 18px -14px rgba(0, 0, 0, 0.45);
&:hover:not(:disabled) {
background: var(--primary-hover);
border-color: var(--primary-hover);
color: var(--primary-contrast, #fff);
}
}
.refreshAllButton:global(.btn.btn-sm) {
padding-inline: 14px;
border-radius: 999px;
background: color-mix(in srgb, var(--primary-color) 12%, var(--bg-secondary));
border-color: color-mix(in srgb, var(--primary-color) 22%, var(--border-color));
color: var(--text-primary);
> span {
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
&:hover:not(:disabled) {
background: color-mix(in srgb, var(--primary-color) 16%, var(--bg-secondary));
border-color: color-mix(in srgb, var(--primary-color) 34%, var(--border-color));
}
@include mobile {
width: 100%;
justify-content: center;
}
}
:global([data-theme='dark']) .viewModeToggle {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
:global([data-theme='dark']) .refreshAllButton:global(.btn.btn-sm) {
background: color-mix(in srgb, var(--primary-color) 18%, var(--bg-secondary));
border-color: color-mix(in srgb, var(--primary-color) 32%, var(--border-color));
}
@include mobile {
.headerActions {
gap: $spacing-xs;
}
}
// 卡片渐变背景 — 基于 TYPE_COLORS light.bg 转 rgba