feat: 新增 ZenMux Token Plan 供应商，支持手动凭证与 USD 额度富展示 (#2709)

* feat(Token plan): 增加 ZenMux 支持

* chore: format code with prettier

* chore: format code with cargo fmt

---------

Co-authored-by: 明桓 <jihaodong.jhd@oceanbase.com>
Co-authored-by: Jason <farion1231@gmail.com>

src/components/UsageFooter.tsx

@@ -19,10 +19,26 @@ interface UsageFooterProps {
 
 /** UsageData → QuotaTier 转换（Token Plan 使用） */
 function toQuotaTier(data: UsageData): QuotaTier {
+  const extra = data.extra;
+  if (extra && extra.startsWith("{")) {
+    try {
+      const parsed = JSON.parse(extra);
+      return {
+        name: data.planName || "",
+        utilization: data.used || 0,
+        resetsAt: parsed.resetsAt || null,
+        usedValueUsd: parsed.usedValueUsd ?? null,
+        maxValueUsd: parsed.maxValueUsd ?? null,
+        planLabel: parsed.planLabel ?? null,
+      };
+    } catch {
+      // fall through to plain string
+    }
+  }
   return {
     name: data.planName || "",
     utilization: data.used || 0,
-    resetsAt: data.extra || null,
+    resetsAt: extra || null,
   };
 }
 
@@ -147,9 +163,22 @@ const UsageFooter: React.FC<UsageFooterProps> = ({
         </div>
         {/* 第二行：tier 徽章（复用官方订阅的 TierBadge） */}
         <div className="flex items-center gap-2">
-          {usageDataList.map((data, index) => (
-            <TierBadge key={index} tier={toQuotaTier(data)} t={t} />
-          ))}
+          {(() => {
+            const tiers = usageDataList.map((d) => toQuotaTier(d));
+            const planLabel = tiers[0]?.planLabel;
+            return (
+              <>
+                {planLabel && (
+                  <span className="font-semibold text-muted-foreground">
+                    💰 {planLabel}
+                  </span>
+                )}
+                {tiers.map((tier, index) => (
+                  <TierBadge key={index} tier={tier} t={t} />
+                ))}
+              </>
+            );
+          })()}
         </div>
       </div>
     );