admin/cc-switch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(usage): improve footer layout with two-row design

Browse Source 
Reorganize usage footer for better readability and space efficiency.
- Split into two rows: update time + refresh button (row 1), usage stats (row 2)
- Move refresh button to top row next to update time
- Remove card background for cleaner look
- Add fallback text when never updated
- Improve spacing and alignment
- Format template literals for consistency
This commit is contained in:
YoVinchen
2025-11-22 18:44:35 +08:00
parent 86255fe106
commit a39b1d8698
1 changed files with 65 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/components/UsageFooter.tsx
View File

@@ -110,62 +110,72 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
const isExpired = firstUsage.isValid === false;
return (
<div className="inline-flex items-center gap-3 text-xs whitespace-nowrap flex-shrink-0 rounded-lg border border-border-default bg-card px-3 py-2 shadow-sm">
{/* 上次查询时间 */}
{lastQueriedAt && (
<div className="flex flex-col items-end gap-1 text-xs whitespace-nowrap flex-shrink-0">
{/* 第一行：更新时间和刷新按钮 */}
<div className="flex items-center gap-2 justify-end">
{/* 上次查询时间 */}
<span className="text-[10px] text-gray-400 dark:text-gray-500 flex items-center gap-1">
<Clock size={10} />
{formatRelativeTime(lastQueriedAt, now, t)}
{lastQueriedAt
? formatRelativeTime(lastQueriedAt, now, t)
: t("usage.never", { defaultValue: "从未更新" })}
</span>
)}
{/* 已用 */}
{firstUsage.used !== undefined && (
<span className="inline-flex items-center gap-1 text-gray-600 dark:text-gray-300">
<span className="text-muted-foreground">{t("usage.used")}</span>
<span className="tabular-nums font-medium">
{firstUsage.used.toFixed(2)}
</span>
</span>
)}
{/* 刷新按钮 */}
<button
onClick={(e) => {
e.stopPropagation();
refetch();
}}
disabled={loading}
className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors disabled:opacity-50 flex-shrink-0 text-gray-400 dark:text-gray-500"
title={t("usage.refreshUsage")}
>
<RefreshCw size={12} className={loading ? "animate-spin" : ""} />
</button>
</div>
{/* 剩余 */}
{firstUsage.remaining !== undefined && (
<span className="inline-flex items-center gap-1">
<span className="text-muted-foreground">
{t("usage.remaining")}
</span>
<span
className={`font-semibold tabular-nums ${
isExpired
? "text-red-500 dark:text-red-400"
: firstUsage.remaining <
{/* 第二行：用量和剩余 */}
<div className="flex items-center gap-2">
{/* 已用 */}
{firstUsage.used !== undefined && (
<div className="flex items-center gap-0.5">
<span className="text-gray-500 dark:text-gray-400">
{t("usage.used")}
</span>
<span className="tabular-nums text-gray-600 dark:text-gray-400 font-medium">
{firstUsage.used.toFixed(2)}
</span>
</div>
)}
{/* 剩余 */}
{firstUsage.remaining !== undefined && (
<div className="flex items-center gap-0.5">
<span className="text-gray-500 dark:text-gray-400">
{t("usage.remaining")}
</span>
<span
className={`font-semibold tabular-nums ${isExpired
? "text-red-500 dark:text-red-400"
: firstUsage.remaining <
(firstUsage.total || firstUsage.remaining) * 0.1
? "text-orange-500 dark:text-orange-400"
: "text-green-600 dark:text-green-400"
}`}
>
{firstUsage.remaining.toFixed(2)}
? "text-orange-500 dark:text-orange-400"
: "text-green-600 dark:text-green-400"
}`}
>
{firstUsage.remaining.toFixed(2)}
</span>
</div>
)}
{/* 单位 */}
{firstUsage.unit && (
<span className="text-gray-500 dark:text-gray-400">
{firstUsage.unit}
</span>
</span>
)}
{/* 单位 */}
{firstUsage.unit && (
<span className="text-gray-500 dark:text-gray-400">
{firstUsage.unit}
</span>
)}
{/* 刷新按钮 */}
<button
onClick={() => refetch()}
disabled={loading}
className="p-1 rounded hover:bg-muted transition-colors disabled:opacity-50 flex-shrink-0"
title={t("usage.refreshUsage")}
>
<RefreshCw size={12} className={loading ? "animate-spin" : ""} />
</button>
)}
</div>
</div>
);
}
@@ -300,13 +310,12 @@ const UsagePlanItem: React.FC<{ data: UsageData }> = ({ data }) => {
{t("usage.remaining")}
</span>
<span
className={`font-semibold tabular-nums ${
isExpired
? "text-red-500 dark:text-red-400"
: remaining < (total || remaining) * 0.1
? "text-orange-500 dark:text-orange-400"
: "text-green-600 dark:text-green-400"
}`}
className={`font-semibold tabular-nums ${isExpired
? "text-red-500 dark:text-red-400"
: remaining < (total || remaining) * 0.1
? "text-orange-500 dark:text-orange-400"
: "text-green-600 dark:text-green-400"
}`}
>
{remaining.toFixed(2)}
</span>