From d23daddc0bcaf061c9bb2bb67d80156e90c273fb Mon Sep 17 00:00:00 2001 From: Supra4E8C Date: Sat, 28 Mar 2026 02:20:02 +0800 Subject: [PATCH] feat(QuotaSection): update button styles and text for refresh functionality --- src/components/quota/QuotaSection.tsx | 16 +++-- src/i18n/locales/en.json | 3 +- src/i18n/locales/ru.json | 3 +- src/i18n/locales/zh-CN.json | 3 +- src/pages/QuotaPage.module.scss | 98 ++++++++++++++++++++++++++- 5 files changed, 114 insertions(+), 9 deletions(-) diff --git a/src/components/quota/QuotaSection.tsx b/src/components/quota/QuotaSection.tsx index 2e65093..c424381 100644 --- a/src/components/quota/QuotaSection.tsx +++ b/src/components/quota/QuotaSection.tsx @@ -257,15 +257,21 @@ export function QuotaSection({
} diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json index 4bb65d4..0180caf 100644 --- a/src/i18n/locales/en.json +++ b/src/i18n/locales/en.json @@ -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", diff --git a/src/i18n/locales/ru.json b/src/i18n/locales/ru.json index 343b298..261c6de 100644 --- a/src/i18n/locales/ru.json +++ b/src/i18n/locales/ru.json @@ -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": "Информация о центре управления", diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json index fc09603..6017afd 100644 --- a/src/i18n/locales/zh-CN.json +++ b/src/i18n/locales/zh-CN.json @@ -1347,7 +1347,8 @@ "description": "集中查看 OAuth 额度与剩余情况", "refresh_files": "刷新认证文件", "refresh_files_and_quota": "刷新认证文件&额度", - "card_idle_hint": "请使用顶部“刷新认证文件&额度”按钮获取最新额度。" + "refresh_all_credentials": "刷新全部凭证", + "card_idle_hint": "请使用顶部“刷新全部凭证”按钮获取最新额度。" }, "system_info": { "title": "管理中心信息", diff --git a/src/pages/QuotaPage.module.scss b/src/pages/QuotaPage.module.scss index ccb0692..5a07dcd 100644 --- a/src/pages/QuotaPage.module.scss +++ b/src/pages/QuotaPage.module.scss @@ -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