From 28a2ebc0eb5defd52c17d0124c54ea215e4e8de9 Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sat, 24 Oct 2026 22:05:42 +0800
Subject: [PATCH] fix(usage): show every tab count and keep counts steady
 across filter changes

Tab counts were only queried for the active tab, so the model count stayed
blank until that tab was opened. Placeholder data was also hidden, so
switching apps made all three counts vanish and reappear, shifting the tab
bar. Query all three counts and keep the previous numbers until new data
arrives.
---
 src/components/usage/UsageDashboard.tsx        | 17 ++++++++---------
 tests/components/UsageDashboard.smoke.test.tsx |  4 ++--
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/usage/UsageDashboard.tsx b/src/components/usage/UsageDashboard.tsx
index d2b6cf767..27ab1e044 100644
--- a/src/components/usage/UsageDashboard.tsx
+++ b/src/components/usage/UsageDashboard.tsx
@@ -715,30 +715,29 @@ export function UsageDashboard({
   const scopedAppType = appType === "all" ? undefined : appType;
 
   // 页签上的计数：和各表格同样的查询参数，react-query 会合并成一次请求。
-  // 只查当前页签：其余页签显示上次查到的数（缓存），筛选变了、还没查过的就不显示
+  // 三个页签都查（只查当前页签时，没点过的页签一直没有数字）；换筛选时沿用上一份
+  // 数据直到新数到达，三个数字原地更新，不会先整体消失再冒出来把页签栏挤得抖一下
   const logCount = useRequestLogs({
     filters: { appType: scopedAppType, providerName, model, statusCode },
     range,
     page: 0,
     pageSize: logPageSize,
-    options: { ...refetch, enabled: tab === "logs" },
+    options: refetch,
   });
   const providerCount = useProviderStats(
     range,
     { appType, providerName, model },
-    { ...refetch, enabled: tab === "providers" },
+    refetch,
   );
   const modelCount = useModelStats(
     range,
     { appType, providerName, model },
-    { ...refetch, enabled: tab === "models" },
+    refetch,
   );
   const tabCount: Record<UsageTab, number | undefined> = {
-    logs: logCount.isPlaceholderData ? undefined : logCount.data?.total,
-    providers: providerCount.isPlaceholderData
-      ? undefined
-      : providerCount.data?.length,
-    models: modelCount.isPlaceholderData ? undefined : modelCount.data?.length,
+    logs: logCount.data?.total,
+    providers: providerCount.data?.length,
+    models: modelCount.data?.length,
   };
   const tabLabel: Record<UsageTab, string> = {
     logs: t("usage.requestLogs"),
diff --git a/tests/components/UsageDashboard.smoke.test.tsx b/tests/components/UsageDashboard.smoke.test.tsx
index e0ec1aef9..e71df15ba 100644
--- a/tests/components/UsageDashboard.smoke.test.tsx
+++ b/tests/components/UsageDashboard.smoke.test.tsx
@@ -187,12 +187,12 @@ describe("UsageDashboard (smoke)", () => {
       usageApiMock.getUsageSummaryByApp,
       usageApiMock.getUsageTrends,
       usageApiMock.getProviderStats,
+      usageApiMock.getModelStats,
       usageApiMock.getRequestLogs,
     ];
     const counts = queries.map((query) => query.mock.calls.length);
+    // 三个页签的计数都查，没打开的页签也有数字
     expect(counts.every((count) => count > 0)).toBe(true);
-    // 模型页签没打开：它的计数不查
-    expect(usageApiMock.getModelStats).not.toHaveBeenCalled();
     // 没有新用量：扫描不触发重查，只有「今天」这类范围每分钟重算一次
     await act(() => vi.advanceTimersByTimeAsync(59000));
     expect(queries.map((query) => query.mock.calls.length)).toEqual(counts);