diff --git a/src/components/UsageFooter.tsx b/src/components/UsageFooter.tsx index fda2811..51b378c 100644 --- a/src/components/UsageFooter.tsx +++ b/src/components/UsageFooter.tsx @@ -11,6 +11,7 @@ interface UsageFooterProps { appId: AppId; usageEnabled: boolean; // 是否启用了用量查询 isCurrent: boolean; // 是否为当前激活的供应商 + inline?: boolean; // 是否内联显示(在按钮左侧) } const UsageFooter: React.FC = ({ @@ -19,6 +20,7 @@ const UsageFooter: React.FC = ({ appId, usageEnabled, isCurrent, + inline = false, }) => { const { t } = useTranslation(); @@ -56,6 +58,25 @@ const UsageFooter: React.FC = ({ // 错误状态 if (!usage.success) { + if (inline) { + return ( +
+
+ + {t("usage.queryFailed")} +
+ +
+ ); + } + return (
@@ -83,6 +104,80 @@ const UsageFooter: React.FC = ({ // 无数据时不显示 if (usageDataList.length === 0) return null; + // 内联模式:仅显示第一个套餐的核心数据(分上下两行) + if (inline) { + const firstUsage = usageDataList[0]; + const isExpired = firstUsage.isValid === false; + + return ( +
+ {/* 第一行:刷新时间 + 刷新按钮 */} +
+ {/* 上次查询时间 */} + {lastQueriedAt && ( + + + {formatRelativeTime(lastQueriedAt, now, t)} + + )} + + {/* 刷新按钮 */} + +
+ + {/* 第二行:已用 + 剩余 + 单位 */} +
+ {/* 已用 */} + {firstUsage.used !== undefined && ( +
+ + {t("usage.used")} + + + {firstUsage.used.toFixed(2)} + +
+ )} + + {/* 剩余 */} + {firstUsage.remaining !== undefined && ( +
+ + {t("usage.remaining")} + + + {firstUsage.remaining.toFixed(2)} + +
+ )} + + {/* 单位 */} + {firstUsage.unit && ( + + {firstUsage.unit} + + )} +
+
+ ); + } + return (
{/* 标题行:包含刷新按钮和自动查询时间 */} @@ -104,10 +199,7 @@ const UsageFooter: React.FC = ({ className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors disabled:opacity-50" title={t("usage.refreshUsage")} > - +
diff --git a/src/components/providers/ProviderCard.tsx b/src/components/providers/ProviderCard.tsx index cb930ba..2dca35c 100644 --- a/src/components/providers/ProviderCard.tsx +++ b/src/components/providers/ProviderCard.tsx @@ -170,22 +170,25 @@ export function ProviderCard({
- onSwitch(provider)} - onEdit={() => onEdit(provider)} - onConfigureUsage={() => onConfigureUsage(provider)} - onDelete={() => onDelete(provider)} - /> - +
+ - + onSwitch(provider)} + onEdit={() => onEdit(provider)} + onConfigureUsage={() => onConfigureUsage(provider)} + onDelete={() => onDelete(provider)} + /> +
+ ); } diff --git a/src/i18n/locales/zh.json b/src/i18n/locales/zh.json index 5e8ad65..0174a57 100644 --- a/src/i18n/locales/zh.json +++ b/src/i18n/locales/zh.json @@ -337,7 +337,7 @@ "planUsage": "套餐用量", "invalid": "已失效", "total": "总:", - "used": "使用:", + "used": "已使用:", "remaining": "剩余:", "justNow": "刚刚", "minutesAgo": "{{count}} 分钟前",