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.
This commit is contained in:
Jason committed 2026-10-24 22:56:15 +08:00
1 parent 5f6426400a
commit 28a2ebc0eb
2 files changed
+10 -11

No files matched your search

+8 -9
View File
@@ -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"),
@@ -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);