mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-06-16 21:03:58 +08:00
feat(quota): add card refresh actions
This commit is contained in:
@@ -5,6 +5,8 @@
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import type { ReactElement, ReactNode } from 'react';
|
||||
import type { TFunction } from 'i18next';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { IconRefreshCw } from '@/components/ui/icons';
|
||||
import type { AuthFileItem, ResolvedTheme, ThemeColors } from '@/types';
|
||||
import { TYPE_COLORS } from '@/utils/quota';
|
||||
import styles from '@/pages/QuotaPage.module.scss';
|
||||
@@ -89,6 +91,7 @@ export function QuotaCard<TState extends QuotaStatusState>({
|
||||
resolvedTheme === 'dark' && typeColorSet.dark ? typeColorSet.dark : typeColorSet.light;
|
||||
|
||||
const quotaStatus = quota?.status ?? 'idle';
|
||||
const quotaLoading = quotaStatus === 'loading';
|
||||
const quotaErrorMessage = resolveQuotaErrorMessage(
|
||||
t,
|
||||
quota?.errorStatus,
|
||||
@@ -121,7 +124,7 @@ export function QuotaCard<TState extends QuotaStatusState>({
|
||||
</div>
|
||||
|
||||
<div className={styles.quotaSection}>
|
||||
{quotaStatus === 'loading' ? (
|
||||
{quotaLoading ? (
|
||||
<div className={styles.quotaMessage}>{t(`${i18nPrefix}.loading`)}</div>
|
||||
) : quotaStatus === 'idle' ? (
|
||||
onRefresh ? (
|
||||
@@ -148,6 +151,24 @@ export function QuotaCard<TState extends QuotaStatusState>({
|
||||
<div className={styles.quotaMessage}>{t(idleMessageKey)}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{onRefresh && (
|
||||
<div className={styles.quotaCardActions}>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
className={styles.quotaRefreshButton}
|
||||
onClick={onRefresh}
|
||||
disabled={!canRefresh || quotaLoading}
|
||||
loading={quotaLoading}
|
||||
title={t('auth_files.quota_refresh_hint')}
|
||||
>
|
||||
{!quotaLoading && <IconRefreshCw size={14} />}
|
||||
{t('auth_files.quota_refresh_single')}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -368,6 +368,8 @@
|
||||
"prefix_proxy_invalid_json": "This auth file is not a JSON object, so fields cannot be edited.",
|
||||
"prefix_proxy_html_challenge": "Downloaded content is an HTML challenge page, not an auth JSON object. Re-authenticate or replace this auth file before editing fields.",
|
||||
"prefix_proxy_saved_success": "Updated auth file \"{{name}}\" successfully",
|
||||
"quota_refresh_single": "Refresh quota",
|
||||
"quota_refresh_hint": "Refresh quota only for this credential",
|
||||
"quota_refresh_success": "Quota refreshed for \"{{name}}\"",
|
||||
"quota_refresh_failed": "Failed to refresh quota for \"{{name}}\": {{message}}"
|
||||
},
|
||||
|
||||
@@ -368,6 +368,8 @@
|
||||
"prefix_proxy_invalid_json": "该认证文件不是 JSON 对象,无法编辑字段。",
|
||||
"prefix_proxy_html_challenge": "下载到的是 HTML 验证页面,不是认证 JSON 对象。请重新认证或替换该认证文件后再编辑字段。",
|
||||
"prefix_proxy_saved_success": "已更新认证文件 \"{{name}}\"",
|
||||
"quota_refresh_single": "刷新额度",
|
||||
"quota_refresh_hint": "仅刷新该认证文件的额度",
|
||||
"quota_refresh_success": "已刷新 \"{{name}}\" 的额度",
|
||||
"quota_refresh_failed": "刷新 \"{{name}}\" 的额度失败:{{message}}"
|
||||
},
|
||||
|
||||
@@ -368,6 +368,8 @@
|
||||
"prefix_proxy_invalid_json": "該驗證檔案不是 JSON 物件,無法編輯欄位。",
|
||||
"prefix_proxy_html_challenge": "下載到的是 HTML 驗證頁面,不是驗證 JSON 物件。請重新驗證或替換該驗證檔案後再編輯欄位。",
|
||||
"prefix_proxy_saved_success": "已更新驗證檔案「{{name}}」",
|
||||
"quota_refresh_single": "重新整理配額",
|
||||
"quota_refresh_hint": "僅重新整理該驗證檔案的配額",
|
||||
"quota_refresh_success": "已重新整理「{{name}}」的配額",
|
||||
"quota_refresh_failed": "重新整理「{{name}}」的配額失敗:{{message}}"
|
||||
},
|
||||
|
||||
@@ -392,6 +392,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
.quotaCardActions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: $spacing-xs;
|
||||
}
|
||||
|
||||
.quotaRefreshButton:global(.btn.btn-sm) {
|
||||
border-radius: 999px;
|
||||
padding-inline: 12px;
|
||||
|
||||
> span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.quotaError {
|
||||
font-size: 12px;
|
||||
color: var(--danger-color);
|
||||
|
||||
Reference in New Issue
Block a user