From a39b1d8698075d294b32025631d548aeda070279 Mon Sep 17 00:00:00 2001
From: YoVinchen <gzh298255@gmail.com>
Date: Sat, 22 Nov 2025 18:44:35 +0800
Subject: [PATCH] refactor(usage): improve footer layout with two-row design

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
---
 src/components/UsageFooter.tsx | 121 ++++++++++++++++++---------------
 1 file changed, 65 insertions(+), 56 deletions(-)

diff --git a/src/components/UsageFooter.tsx b/src/components/UsageFooter.tsx
index 1909901..6f103bd 100644
--- a/src/components/UsageFooter.tsx
+++ b/src/components/UsageFooter.tsx
@@ -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>