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

@@ -110,34 +110,53 @@ 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">
+      <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">
           {/* 上次查询时间 */}
-        {lastQueriedAt && (
           <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>
-        )}
 
+          {/* 刷新按钮 */}
+          <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>
+
+        {/* 第二行：用量和剩余 */}
+        <div className="flex items-center gap-2">
           {/* 已用 */}
           {firstUsage.used !== undefined && (
-          <span className="inline-flex items-center gap-1 text-gray-600 dark:text-gray-300">
+            <div className="flex items-center gap-0.5">
-            <span className="text-muted-foreground">{t("usage.used")}</span>
+              <span className="text-gray-500 dark:text-gray-400">
-            <span className="tabular-nums font-medium">
+                {t("usage.used")}
+              </span>
+              <span className="tabular-nums text-gray-600 dark:text-gray-400 font-medium">
                 {firstUsage.used.toFixed(2)}
               </span>
-          </span>
+            </div>
           )}
 
           {/* 剩余 */}
           {firstUsage.remaining !== undefined && (
-          <span className="inline-flex items-center gap-1">
+            <div className="flex items-center gap-0.5">
-            <span className="text-muted-foreground">
+              <span className="text-gray-500 dark:text-gray-400">
                 {t("usage.remaining")}
               </span>
               <span
-              className={`font-semibold tabular-nums ${
+                className={`font-semibold tabular-nums ${isExpired
-                isExpired
                     ? "text-red-500 dark:text-red-400"
                     : firstUsage.remaining <
                       (firstUsage.total || firstUsage.remaining) * 0.1
@@ -147,7 +166,7 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
               >
                 {firstUsage.remaining.toFixed(2)}
               </span>
-          </span>
+            </div>
           )}
 
           {/* 单位 */}
@@ -156,16 +175,7 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
               {firstUsage.unit}
             </span>
           )}
-
+        </div>
-        {/* 刷新按钮 */}
-        <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>
     );
   }
@@ -300,8 +310,7 @@ const UsagePlanItem: React.FC<{ data: UsageData }> = ({ data }) => {
               {t("usage.remaining")}
             </span>
             <span
-              className={`font-semibold tabular-nums ${
+              className={`font-semibold tabular-nums ${isExpired
-                isExpired
                 ? "text-red-500 dark:text-red-400"
                 : remaining < (total || remaining) * 0.1
                   ? "text-orange-500 dark:text-orange-400"