perf(cost-center): 优化总览刷新查询与加载占位

apps/frontend/src/pages/admin/cost-center/CostCenterShell.tsx

@@ -22,7 +22,7 @@ import {
   Tag,
   Typography,
 } from 'antd'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { keepPreviousData, useIsFetching, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useEffect } from 'react'
 
 import FinanceSubNav from '@/components/admin/FinanceSubNav'
@@ -97,6 +97,7 @@ export default function CostCenterShell() {
   const overviewQuery = useQuery({
     queryKey: ['admin-cost-center-overview', scope],
     queryFn: () => fetchAdminCostCenterOverview({ scope }),
+    placeholderData: keepPreviousData,
   })
   const optionsQuery = useQuery({
     queryKey: ['admin-cost-center-options'],
@@ -105,6 +106,9 @@ export default function CostCenterShell() {
 
   const overview = overviewQuery.data?.data
   const options = optionsQuery.data?.data
+  const costCenterFetching = useIsFetching({
+    predicate: (query) => String(query.queryKey[0] ?? '').startsWith('admin-cost-center'),
+  })
 
   function refreshAll() {
     // 按前缀失效：新增一个 admin-cost-center-* 查询不需要再回来改这里。
@@ -145,7 +149,7 @@ export default function CostCenterShell() {
             size="small"
             icon={<ReloadOutlined />}
             onClick={refreshAll}
-            loading={overviewQuery.isFetching}
+            loading={costCenterFetching > 0}
           >
             刷新
           </Button>
@@ -162,7 +166,7 @@ export default function CostCenterShell() {
           ].map(([label, value]) => (
             <Col xs={12} md={8} xl={4} key={label}>
               <Card>
-                <Statistic title={label} value={value as number} />
+                <Statistic title={label} value={overview ? (value as number) : '—'} />
               </Card>
             </Col>
           ))}
@@ -179,11 +183,13 @@ export default function CostCenterShell() {
                   <Space size={4}>
                     <span>{item.label}</span>
                     <Tag>
-                      {Number(
-                        item.key === 'all'
-                          ? (overview?.productTotalCount ?? overview?.productCount ?? 0)
-                          : (overview?.productSourceCounts?.[item.key] ?? 0),
-                      )}
+                      {overview
+                        ? Number(
+                            item.key === 'all'
+                              ? (overview.productTotalCount ?? overview.productCount ?? 0)
+                              : (overview.productSourceCounts?.[item.key] ?? 0),
+                          )
+                        : '—'}
                     </Tag>
                   </Space>
                 ),

apps/frontend/src/pages/admin/cost-center/ProductCatalogPanel.tsx

@@ -34,7 +34,7 @@ import {
 } from 'antd'
 import type { TableColumnsType } from 'antd'
 import PercentTable from '@/components/common/PercentTable'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { keepPreviousData, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useEffect, useRef, useState } from 'react'
 import type { Dayjs } from 'dayjs'
 
@@ -152,6 +152,7 @@ export function ProductCatalogPanel() {
         page: productPage,
         pageSize: productPageSize,
       }),
+    placeholderData: keepPreviousData,
   })
 
   const products = productsQuery.data?.data.items || []
@@ -901,7 +902,7 @@ export function ProductCatalogPanel() {
           size="small"
           columns={productColumns}
           dataSource={products}
-          loading={productsQuery.isLoading}
+          loading={productsQuery.isFetching}
           rowClassName={(row) => (row.mappingCount > 0 ? 'product-rule-row-mapped' : '')}
           scroll={{ x: 1180 }}
           pagination={buildAdminTablePagination({