feat: show available reset credits

frontend/src/main.tsx

@@ -24,6 +24,7 @@ import {
   MoreHorizontal,
   Settings,
   Sun,
+  Ticket,
   Trash2,
   TrendingUp,
   Zap,
@@ -714,6 +715,21 @@ function AccountDashboardDetails({
           value={dashboard.stale ? "数据可能已过期" : "数据已更新"}
         />
       </div>
+      {!publicView &&
+        dashboard.resetCredits &&
+        dashboard.resetCredits.availableCount > 0 && (
+          <div className="reset-credits" data-testid="reset-credits">
+            <Ticket />
+            <div className="reset-credits-main">
+              <small>重置卡</small>
+              <b>可用 {dashboard.resetCredits.availableCount} 张</b>
+            </div>
+            <div className="reset-credits-expiry">
+              <small>到期时间</small>
+              <b>{formatResetCreditExpiry(dashboard.resetCredits.expiresAt)}</b>
+            </div>
+          </div>
+        )}
       <div className="limits">
         {dashboard.limits.map((limit, index) => (
           <LimitCard
@@ -1646,6 +1662,8 @@ const num = (v?: number | null) =>
       }).format(v);
 const cycleTimestamp = (value: number) =>
   new Date(value * 1000).toLocaleString();
+const formatResetCreditExpiry = (values: number[]) =>
+  values.length ? values.map(cycleTimestamp).join("、") : "服务端未提供";
 const cycleDuration = (minutes: number) =>
   minutes % (24 * 60) === 0
     ? `${minutes / (24 * 60)} 天窗口`

frontend/src/styles.css

@@ -499,6 +499,44 @@ header p {
   white-space: nowrap;
   font-size: 13px;
 }
+.reset-credits {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 14px;
+  padding: 12px 14px;
+  border: 1px solid color-mix(in srgb, var(--accent2) 30%, var(--border));
+  border-radius: 12px;
+  background: color-mix(in srgb, var(--accent2) 7%, var(--panel));
+}
+.reset-credits > svg {
+  flex: none;
+  width: 20px;
+  color: var(--accent2);
+}
+.reset-credits-main,
+.reset-credits-expiry {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+.reset-credits-main small,
+.reset-credits-expiry small {
+  color: var(--muted);
+  font-size: 12px;
+}
+.reset-credits-main b,
+.reset-credits-expiry b {
+  font-size: 13px;
+}
+.reset-credits-expiry {
+  margin-left: auto;
+  text-align: right;
+}
+.reset-credits-expiry b {
+  overflow-wrap: anywhere;
+}
 .account-detail-state {
   display: flex;
   min-height: 170px;
@@ -1041,6 +1079,13 @@ a {
   .account-info-grid {
     grid-template-columns: 1fr 1fr;
   }
+  .reset-credits {
+    align-items: flex-start;
+  }
+  .reset-credits-expiry {
+    margin-left: 0;
+    text-align: left;
+  }
   .account {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;

frontend/src/types.test.ts

@@ -47,6 +47,22 @@ describe("API decoders", () => {
     expect(value.currentCycle?.totalTokens).toBe(123_456);
   });
 
+  it("解码可用重置卡及到期时间", () => {
+    const value = decodeDashboard({
+      accountId: 1,
+      displayName: "个人账号",
+      account: { email: null, planType: "plus", connected: true },
+      limits: [],
+      resetCredits: { availableCount: 2, expiresAt: [1_784_246_400] },
+      summary: {},
+      usage: [],
+      fetchedAt: 1_900_000_000,
+      stale: false,
+    });
+    expect(value.resetCredits?.availableCount).toBe(2);
+    expect(value.resetCredits?.expiresAt).toEqual([1_784_246_400]);
+  });
+
   it("拒绝未知主题", () => {
     expect(() =>
       decodeGeneral({

frontend/src/types.ts

@@ -57,6 +57,10 @@ export interface TokenCycle {
   resetsAt: number;
   totalTokens: number;
 }
+export interface ResetCreditsSummary {
+  availableCount: number;
+  expiresAt: number[];
+}
 export interface Dashboard {
   accountId: number;
   displayName: string;
@@ -76,6 +80,7 @@ export interface Dashboard {
   usage: Point[];
   fetchedAt: number;
   stale: boolean;
+  resetCredits?: ResetCreditsSummary;
   lastError?: string;
 }
 export interface GeneralSettings {
@@ -178,6 +183,14 @@ const decodeTokenCycle: Decoder<TokenCycle> = (value) => {
     totalTokens: number(x.totalTokens, "totalTokens"),
   };
 };
+const decodeResetCredits: Decoder<ResetCreditsSummary> = (value) => {
+  const x = record(value, "resetCredits");
+  if (!Array.isArray(x.expiresAt)) throw new Error("expiresAt格式无效");
+  return {
+    availableCount: number(x.availableCount, "availableCount"),
+    expiresAt: x.expiresAt.map((v, index) => number(v, `expiresAt[${index}]`)),
+  };
+};
 export const decodeDashboard: Decoder<Dashboard> = (value) => {
   const x = record(value, "Dashboard"),
     account = record(x.account, "account"),
@@ -209,6 +222,9 @@ export const decodeDashboard: Decoder<Dashboard> = (value) => {
     ...(x.currentCycle == null
       ? {}
       : { currentCycle: decodeTokenCycle(x.currentCycle) }),
+    ...(x.resetCredits == null
+      ? {}
+      : { resetCredits: decodeResetCredits(x.resetCredits) }),
     summary: {
       lifetimeTokens: optionalNumber(summary.lifetimeTokens, "lifetimeTokens"),
       peakDailyTokens: optionalNumber(