feat: redesign quota summary for v0.3.0

frontend/tests/settings-layout.spec.ts

@@ -91,6 +91,14 @@ test("shows every account as a collapsible summary on the overview", async ({
           windowDurationMinutes: 300,
           resetsAt: 1_900_000_000,
         },
+        {
+          limitId: "secondary",
+          limitName: "周限额",
+          windowType: "weekly",
+          usedPercent: 20,
+          windowDurationMinutes: 10_080,
+          resetsAt: 1_900_604_800,
+        },
       ],
       currentCycle: {
         limitId: "codex",
@@ -122,7 +130,16 @@ test("shows every account as a collapsible summary on the overview", async ({
         planType: "team",
         connected: true,
       },
-      limits: [],
+      limits: [
+        {
+          limitId: "secondary",
+          limitName: "周限额",
+          windowType: "weekly",
+          usedPercent: 40,
+          windowDurationMinutes: 10_080,
+          resetsAt: 1_900_604_800,
+        },
+      ],
       summary: {},
       usage: [],
       fetchedAt: 0,
@@ -163,9 +180,29 @@ test("shows every account as a collapsible summary on the overview", async ({
   await page.goto("/");
   await expect(page.locator(".account-overview")).toHaveCount(2);
   await expect.poll(() => requestedDashboards.size).toBe(2);
-  await expect(page.getByText("最低 65% 剩余")).toBeVisible();
-  await expect(page.getByText("本周期 123.5K Tokens")).toBeVisible();
-  await expect(page.getByText("限额暂无")).toBeVisible();
+  const firstSummary = page
+    .locator('[data-account-id="1"]')
+    .locator(".account-summary-limits");
+  await expect(firstSummary.locator('[data-window-kind="hour"]')).toContainText(
+    "5 小时额度65%剩余",
+  );
+  await expect(firstSummary.locator('[data-window-kind="week"]')).toContainText(
+    "周额度80%剩余",
+  );
+  await expect(
+    firstSummary.locator(".account-summary-limit-reset"),
+  ).toHaveCount(2);
+  expect(
+    await firstSummary.evaluate(
+      (element) => element.scrollWidth <= element.clientWidth,
+    ),
+  ).toBe(true);
+  const weeklyOnlySummary = page
+    .locator('[data-account-id="2"]')
+    .locator(".account-summary-limits.single");
+  await expect(weeklyOnlySummary).toContainText("周额度60%剩余");
+  await expect(weeklyOnlySummary).toHaveCSS("justify-content", "center");
+  await expect(page.getByText("本周期 123.5K Tokens")).toHaveCount(0);
   await expect(page.getByRole("button", { name: "刷新全部" })).toHaveCount(0);
   await expect(page.locator(".account-detail")).toHaveCount(0);
   await expect(page.locator(".account-select")).toHaveCount(0);
@@ -286,14 +323,14 @@ test("shows the build version in the authenticated brand", async ({ page }) => {
 test("keeps the authenticated brand on one line with a release version", async ({
   page,
 }) => {
-  await openSettings(page, "0.2.0");
+  await openSettings(page, "0.3.0");
   const brand = page.locator(
     (page.viewportSize()?.width ?? 0) <= 800
       ? ".mobile-topbar .logo"
       : "aside .logo",
   );
   await expect(brand).toContainText("Codex Helper");
-  await expect(brand.locator(".version-badge")).toHaveText("v0.2.0");
+  await expect(brand.locator(".version-badge")).toHaveText("v0.3.0");
   const centers = await brand
     .locator("svg, .brand-name, .version-badge")
     .evaluateAll((elements) =>