style(frontend): 全项目表格统一百分比布局并居中

apps/frontend/src/pages/admin/AdminAuditLogsPage.tsx

@@ -1,5 +1,6 @@
 import { ReloadOutlined, SearchOutlined } from '@ant-design/icons'
-import { Alert, Button, Card, Empty, Form, Input, Select, Space, Table, Typography } from 'antd'
+import { Alert, Button, Card, Empty, Form, Input, Select, Space, Typography } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'
@@ -203,7 +204,7 @@ export default function AdminAuditLogsPage() {
           ) : null}
 
           <Card>
-            <Table<AdminAuditLogItem>
+            <PercentTable<AdminAuditLogItem>
               rowKey="logId"
               loading={query.isLoading || query.isFetching}
               columns={columns}

apps/frontend/src/pages/admin/AdminDashboardPage.tsx

@@ -10,10 +10,10 @@ import {
   Skeleton,
   Space,
   Statistic,
-  Table,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useQuery } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
@@ -226,7 +226,7 @@ export default function AdminDashboardPage() {
           />
         ) : null}
 
-        <Table<AdminLoginLogItem>
+        <PercentTable<AdminLoginLogItem>
           rowKey="logId"
           loading={loginQuery.isLoading || loginQuery.isFetching}
           columns={columns}

apps/frontend/src/pages/admin/AdminDouyinMashidaCertificatePage.tsx

@@ -16,10 +16,10 @@ import {
   Popconfirm,
   Select,
   Space,
-  Table,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useEffect, useMemo, useRef, useState } from 'react'
 
@@ -377,7 +377,7 @@ export default function AdminDouyinMashidaCertificatePage() {
 
       <div className="kuaishou-industry-split">
         <Card title="本地券码" className="kuaishou-industry-voucher-card">
-          <Table
+          <PercentTable
             rowKey="id"
             size="middle"
             tableLayout="fixed"

apps/frontend/src/pages/admin/AdminFinancePage.tsx

@@ -10,10 +10,10 @@ import {
   Select,
   Space,
   Statistic,
-  Table,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useState } from 'react'
 
@@ -224,7 +224,7 @@ export default function AdminFinancePage() {
           </Button>
         }
       >
-        <Table<AdminFinanceDailyItem>
+        <PercentTable<AdminFinanceDailyItem>
           rowKey="date"
           loading={summaryQuery.isLoading}
           dataSource={daily}
@@ -252,7 +252,7 @@ export default function AdminFinancePage() {
           </Space>
         }
       >
-        <Table<AdminFinanceChannelDailyItem>
+        <PercentTable<AdminFinanceChannelDailyItem>
           rowKey={(row) => `${row.date}-${row.channel}-${row.category}`}
           loading={summaryQuery.isLoading}
           dataSource={channelDaily}
@@ -304,7 +304,7 @@ export default function AdminFinancePage() {
           </Space>
         }
       >
-        <Table<AdminFinanceTransaction>
+        <PercentTable<AdminFinanceTransaction>
           rowKey={(row) => `${row.category}-${row.sourceId}-${row.occurredAt}`}
           loading={transactionsQuery.isLoading}
           dataSource={transactionData?.items || []}

apps/frontend/src/pages/admin/AdminKuaishouIndustryPage.tsx

@@ -18,11 +18,11 @@ import {
   Popconfirm,
   Select,
   Space,
-  Table,
   Tabs,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType, TabsProps } from 'antd'
 import { useEffect, useMemo, useRef, useState } from 'react'
 
@@ -963,7 +963,7 @@ export default function AdminKuaishouIndustryPage() {
 
   function renderVoucherTable(scrollX?: number) {
     return (
-      <Table
+      <PercentTable
         rowKey="id"
         size="middle"
         tableLayout="fixed"
@@ -1297,7 +1297,7 @@ export default function AdminKuaishouIndustryPage() {
               查询售后
             </Button>
           </Space>
-          <Table
+          <PercentTable
             rowKey={(row) => String(row.refundId || row.oid || JSON.stringify(row))}
             columns={refundColumns}
             dataSource={refundRows}

apps/frontend/src/pages/admin/AdminManualFulfillmentPage.tsx

@@ -20,10 +20,10 @@ import {
   Modal,
   Space,
   Statistic,
-  Table,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useState } from 'react'
 
@@ -245,7 +245,7 @@ export default function AdminManualFulfillmentPage() {
       </Space>
 
       <Card bordered={false}>
-        <Table
+        <PercentTable
           rowKey="orderItemId"
           size="small"
           columns={columns}

apps/frontend/src/pages/admin/AdminOrderDetailPage.tsx

@@ -16,10 +16,10 @@ import {
   Modal,
   Skeleton,
   Space,
-  Table,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
@@ -318,7 +318,7 @@ export default function AdminOrderDetailPage() {
       </Card>
 
       <Card title="商品明细">
-        <Table<AdminOrderDetail['items'][number]>
+        <PercentTable<AdminOrderDetail['items'][number]>
           rowKey="orderItemId"
           pagination={false}
           dataSource={detail.items}
@@ -354,7 +354,7 @@ export default function AdminOrderDetailPage() {
       </Card>
 
       <Card title="任务">
-        <Table<AdminTaskListItem>
+        <PercentTable<AdminTaskListItem>
           rowKey="taskId"
           pagination={false}
           dataSource={detail.tasks}

apps/frontend/src/pages/admin/AdminOrdersPage.tsx

@@ -16,11 +16,11 @@ import {
   Segmented,
   Select,
   Space,
-  Table,
   Tag,
   Tooltip,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useQuery } from '@tanstack/react-query'
 import { useEffect, useMemo } from 'react'
@@ -503,7 +503,7 @@ export default function AdminOrdersPage() {
       </Card>
 
       <Card>
-        <Table<AdminOrderListItem>
+        <PercentTable<AdminOrderListItem>
           rowKey="orderId"
           loading={query.isLoading || query.isFetching}
           columns={columns}

apps/frontend/src/pages/admin/AdminSalesProfitPage.tsx

@@ -11,11 +11,11 @@ import {
   Select,
   Space,
   Statistic,
-  Table,
   Tabs,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useState } from 'react'
 
@@ -386,7 +386,7 @@ export default function AdminSalesProfitPage() {
               key: 'daily',
               label: '日报',
               children: (
-                <Table
+                <PercentTable
                   rowKey="statDate"
                   size="small"
                   columns={dailyColumns}
@@ -401,7 +401,7 @@ export default function AdminSalesProfitPage() {
               key: 'product',
               label: '商品',
               children: (
-                <Table
+                <PercentTable
                   rowKey={(row) => `${row.canonicalProductId || 'unmapped'}`}
                   size="small"
                   columns={productColumns}
@@ -416,7 +416,7 @@ export default function AdminSalesProfitPage() {
               key: 'fulfillment-mode',
               label: '履约方式',
               children: (
-                <Table
+                <PercentTable
                   rowKey="fulfillmentMode"
                   size="small"
                   columns={fulfillmentModeColumns}
@@ -431,7 +431,7 @@ export default function AdminSalesProfitPage() {
               key: 'facts',
               label: '事实明细',
               children: (
-                <Table
+                <PercentTable
                   rowKey="id"
                   size="small"
                   columns={factColumns}

apps/frontend/src/pages/admin/AdminTaskDetailPage.tsx

@@ -28,12 +28,12 @@ import {
   Skeleton,
   Space,
   Spin,
-  Table,
   Tabs,
   Tag,
   Tooltip,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useMutation, useQuery } from '@tanstack/react-query'
 import { useEffect, useMemo, useState } from 'react'
@@ -898,7 +898,7 @@ export default function AdminTaskDetailPage() {
             key: 'events',
             label: `事件流水 (${resolvedDetail.events.length})`,
             children: (
-              <Table<TaskEvent>
+              <PercentTable<TaskEvent>
                 rowKey="eventId"
                 pagination={false}
                 columns={eventColumns}
@@ -1757,7 +1757,7 @@ function KuaishouIndustryVoucherPanel({ voucher }: { voucher: KuaishouIndustryVo
       ) : null}
 
       {consumeDetails.length > 0 ? (
-        <Table<Record<string, unknown>>
+        <PercentTable<Record<string, unknown>>
           className="platform-section-gap"
           rowKey={(_, index) => String(index ?? 0)}
           pagination={false}
@@ -1905,7 +1905,7 @@ function KuaishouCloudPanel({
 
       {flow.rebind.history.length > 0 ? (
         <Card title="换绑记录">
-          <Table
+          <PercentTable
             rowKey={(row) => `${row.attempt}-${row.requestedAt || ''}`}
             pagination={false}
             dataSource={flow.rebind.history}
@@ -1969,7 +1969,7 @@ function RedeemResolutionPanel({
         </Descriptions.Item>
       </Descriptions>
 
-      <Table
+      <PercentTable
         className="platform-section-gap"
         rowKey={(row) => `${row.attempt}-${row.codeMasked}`}
         pagination={false}

apps/frontend/src/pages/admin/AdminTasksPage.tsx

@@ -19,11 +19,11 @@ import {
   Select,
   Space,
   Spin,
-  Table,
   Tag,
   Tooltip,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useQuery } from '@tanstack/react-query'
 import { useEffect, useMemo, useState } from 'react'
@@ -576,7 +576,7 @@ export default function AdminTasksPage() {
       ) : null}
 
       <Card>
-        <Table<AdminTaskListItem>
+        <PercentTable<AdminTaskListItem>
           rowKey="taskId"
           loading={query.isLoading || query.isFetching}
           columns={columns}

apps/frontend/src/pages/admin/AdminUsersPage.tsx

@@ -12,10 +12,10 @@ import {
   Select,
   Space,
   Switch,
-  Table,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { MenuProps, TableColumnsType } from 'antd'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useMemo, useState } from 'react'
@@ -675,7 +675,7 @@ export default function AdminUsersPage() {
           </Typography.Text>
         }
       >
-        <Table<AdminUserListItem>
+        <PercentTable<AdminUserListItem>
           rowKey="userId"
           loading={query.isLoading || query.isFetching}
           columns={columns}

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

@@ -5,7 +5,8 @@
  * 不写渠道映射，也不维护游戏分类。
  */
 import { ReloadOutlined, SyncOutlined } from '@ant-design/icons'
-import { Alert, App, Button, Card, Space, Switch, Table, Tag, Typography } from 'antd'
+import { Alert, App, Button, Card, Space, Switch, Tag, Typography } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
 
@@ -134,7 +135,7 @@ export function AffiliateSkuPanel() {
         style={{ marginBottom: 12 }}
         message="自动发货只按上游货源 SKU 配采购成本：订单项直接按 aff:<skuCode> 归一，不走渠道映射；这里不维护游戏分类和商品上下架，那些只属于接单平台。"
       />
-      <Table
+      <PercentTable
         tableLayout="fixed"
         rowKey="id"
         size="small"

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

@@ -15,10 +15,10 @@ import {
   Select,
   Space,
   Switch,
-  Table,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useQuery } from '@tanstack/react-query'
 import { useState } from 'react'
@@ -427,7 +427,7 @@ export function ChannelMappingPanel() {
           </Button>
           <Button onClick={() => setExpandedMappingProductIds([])}>收起全部</Button>
         </Space>
-        <Table<ChannelProductMappingGroup>
+        <PercentTable<ChannelProductMappingGroup>
           tableLayout="fixed"
           rowKey={(row) => String(row.canonicalProductId)}
           size="small"
@@ -445,7 +445,7 @@ export function ChannelMappingPanel() {
                 <Typography.Text type="secondary">
                   该标准商品下共有 {group.mappings.length} 条渠道映射
                 </Typography.Text>
-                <Table<ChannelProductMapping>
+                <PercentTable<ChannelProductMapping>
                   tableLayout="fixed"
                   rowKey="id"
                   size="small"

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

@@ -4,7 +4,8 @@
  * 异常表不再存履约载体，履约方式从 order_items.fulfillment_mode join 得到；
  * 前端按履约方式筛选时传 fulfillmentMode 参数。
  */
-import { App, Button, Card, Select, Space, Table, Tag, Typography } from 'antd'
+import { App, Button, Card, Select, Space, Tag, Typography } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useQuery } from '@tanstack/react-query'
 import { useState } from 'react'
@@ -160,7 +161,7 @@ export function CostExceptionPanel() {
         />
       }
     >
-      <Table
+      <PercentTable
         tableLayout="fixed"
         rowKey="id"
         size="small"

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

@@ -6,20 +6,8 @@
  * 通用成本模型（平台费 / 支付费 / 售后损失 / 其他）对所有履约方式生效。
  */
 import { PlusOutlined, SearchOutlined } from '@ant-design/icons'
-import {
-  Alert,
-  App,
-  Button,
-  Card,
-  Form,
-  Input,
-  Modal,
-  Select,
-  Space,
-  Table,
-  Tag,
-  Typography,
-} from 'antd'
+import { Alert, App, Button, Card, Form, Input, Modal, Select, Space, Tag, Typography } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useQuery } from '@tanstack/react-query'
 import { useState } from 'react'
@@ -244,7 +232,7 @@ export function CostItemPanel() {
             style={{ width: 260 }}
           />
         </Space>
-        <Table
+        <PercentTable
           tableLayout="fixed"
           rowKey="id"
           size="small"

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

@@ -3,18 +3,8 @@
  *
  * 履约方式直接读 order_items.fulfillment_mode，页面只做展示，不允许改判。
  */
-import {
-  App,
-  Alert,
-  Button,
-  Card,
-  Descriptions,
-  Empty,
-  InputNumber,
-  Space,
-  Table,
-  Typography,
-} from 'antd'
+import { App, Alert, Button, Card, Descriptions, Empty, InputNumber, Space, Typography } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import { useState } from 'react'
 
 import { createAdminCostSnapshot, previewAdminCost } from '@/services/admin'
@@ -150,7 +140,7 @@ export function CostPreviewPanel() {
             />
           ) : null}
 
-          <Table
+          <PercentTable
             tableLayout="fixed"
             rowKey={(row) => `${row.costItemId}-${row.costVersionId}`}
             size="small"

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

@@ -17,10 +17,10 @@ import {
   Modal,
   Select,
   Space,
-  Table,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useQuery } from '@tanstack/react-query'
 import { useState } from 'react'
@@ -402,7 +402,7 @@ export function CostVersionPanel() {
             style={{ width: 140 }}
           />
         </Space>
-        <Table
+        <PercentTable
           tableLayout="fixed"
           rowKey="id"
           size="small"

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

@@ -33,10 +33,10 @@ import {
   Select,
   Space,
   Statistic,
-  Table,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
@@ -382,7 +382,7 @@ export function ManualSkuConfigPanel() {
         </Button>
       </Space>
 
-      <Table
+      <PercentTable
         rowKey="id"
         size="small"
         columns={columns}

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

@@ -23,11 +23,11 @@ import {
   Select,
   Space,
   Switch,
-  Table,
   Tabs,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useState } from 'react'
@@ -559,7 +559,7 @@ export function ProductCatalogPanel() {
             style={{ width: 280 }}
           />
         </Space>
-        <Table
+        <PercentTable
           tableLayout="fixed"
           rowKey="id"
           size="small"

apps/frontend/src/pages/admin/fund/FundManagementView.tsx

@@ -24,11 +24,11 @@ import {
   Select,
   Space,
   Statistic,
-  Table,
   Tabs,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import dayjs from 'dayjs'
 import type { Dayjs } from 'dayjs'
@@ -1048,7 +1048,7 @@ export default function FundManagementView({ role }: { role: ManagementRole }) {
                   ) : null
                 }
               >
-                <Table<AdminFundAccount>
+                <PercentTable<AdminFundAccount>
                   rowKey="id"
                   size="small"
                   columns={buildAccountColumns('agent')}
@@ -1074,7 +1074,7 @@ export default function FundManagementView({ role }: { role: ManagementRole }) {
                   ) : null
                 }
               >
-                <Table<AdminFundAccount>
+                <PercentTable<AdminFundAccount>
                   rowKey="id"
                   size="small"
                   columns={buildAccountColumns('supervisor')}
@@ -1139,7 +1139,7 @@ export default function FundManagementView({ role }: { role: ManagementRole }) {
                     }}
                   />
                 </Space>
-                <Table<AdminFundExpense>
+                <PercentTable<AdminFundExpense>
                   rowKey="id"
                   size="small"
                   columns={expenseColumns}
@@ -1188,7 +1188,7 @@ export default function FundManagementView({ role }: { role: ManagementRole }) {
                     )}
                   />
                 </Space>
-                <Table<AdminFundReconciliation>
+                <PercentTable<AdminFundReconciliation>
                   rowKey="id"
                   size="small"
                   columns={reconciliationColumns}
@@ -1227,7 +1227,7 @@ export default function FundManagementView({ role }: { role: ManagementRole }) {
                           </Space>
                         }
                       >
-                        <Table<AdminFundAccount>
+                        <PercentTable<AdminFundAccount>
                           rowKey="id"
                           size="small"
                           columns={buildAccountColumns('supervisor')}
@@ -1262,7 +1262,7 @@ export default function FundManagementView({ role }: { role: ManagementRole }) {
                           </Space>
                         }
                       >
-                        <Table<AdminFundAccount>
+                        <PercentTable<AdminFundAccount>
                           rowKey="id"
                           size="small"
                           columns={buildAccountColumns('agent')}
@@ -1793,7 +1793,7 @@ export default function FundManagementView({ role }: { role: ManagementRole }) {
               </Descriptions.Item>
             </Descriptions>
             <Card title="资金流水" style={{ marginTop: 16 }}>
-              <Table<AdminFundEntry>
+              <PercentTable<AdminFundEntry>
                 rowKey="id"
                 size="small"
                 columns={detailEntryColumns}

apps/frontend/src/pages/admin/fund/FundSupportView.tsx

@@ -18,11 +18,11 @@ import {
   Select,
   Space,
   Statistic,
-  Table,
   Tabs,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import dayjs from 'dayjs'
 import { useState } from 'react'
@@ -497,7 +497,7 @@ export default function FundSupportView() {
               key: 'credit-entries',
               label: '积分流水',
               children: (
-                <Table<PlatformCreditEntry>
+                <PercentTable<PlatformCreditEntry>
                   rowKey="id"
                   size="small"
                   columns={creditEntryColumns}
@@ -514,7 +514,7 @@ export default function FundSupportView() {
               key: 'entries',
               label: '备用金流水',
               children: (
-                <Table<AdminFundEntry>
+                <PercentTable<AdminFundEntry>
                   rowKey="id"
                   size="small"
                   columns={entryColumns}
@@ -529,7 +529,7 @@ export default function FundSupportView() {
               key: 'expenses',
               label: '我的支出',
               children: (
-                <Table<AdminFundExpense>
+                <PercentTable<AdminFundExpense>
                   rowKey="id"
                   size="small"
                   columns={expenseColumns}

apps/frontend/src/pages/admin/fund/PlatformCreditPanel.tsx

@@ -24,10 +24,10 @@ import {
   Select,
   Space,
   Statistic,
-  Table,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useState } from 'react'
 
@@ -399,7 +399,7 @@ export function PlatformCreditPanel() {
       <Typography.Title level={5} style={{ margin: '8px 0 12px' }}>
         客服积分余额
       </Typography.Title>
-      <Table<PlatformCreditAccount>
+      <PercentTable<PlatformCreditAccount>
         rowKey="id"
         size="small"
         columns={accountColumns}
@@ -413,7 +413,7 @@ export function PlatformCreditPanel() {
       <Typography.Title level={5} style={{ margin: '24px 0 12px' }}>
         积分流水
       </Typography.Title>
-      <Table
+      <PercentTable
         rowKey="id"
         size="small"
         columns={entryColumns}

apps/frontend/src/pages/admin/panels/AfterSalesPanel.tsx

@@ -11,10 +11,10 @@ import {
   Modal,
   Select,
   Space,
-  Table,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import { forwardRef, useImperativeHandle, useState } from 'react'
 
 import ImageUpload from '@/components/files/ImageUpload'
@@ -195,7 +195,7 @@ const AfterSalesPanel = forwardRef<AfterSalesPanelHandle>(function AfterSalesPan
         }
         bordered={false}
       >
-        <Table<WorkerAfterSalesCase>
+        <PercentTable<WorkerAfterSalesCase>
           rowKey="caseId"
           loading={afterSalesCasesQuery.isLoading}
           dataSource={afterSalesCasesQuery.data?.data.items || []}

apps/frontend/src/pages/admin/panels/CancelRequestsPanel.tsx

@@ -1,6 +1,7 @@
 import { ReloadOutlined } from '@ant-design/icons'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { App, Button, Card, Form, Input, Modal, Space, Table, Tag, Typography } from 'antd'
+import { App, Button, Card, Form, Input, Modal, Space, Tag, Typography } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router'
@@ -147,7 +148,7 @@ export default function CancelRequestsPanel() {
         }
         bordered={false}
       >
-        <Table<WorkerCancelRequest>
+        <PercentTable<WorkerCancelRequest>
           rowKey="requestId"
           size="small"
           loading={requestsQuery.isLoading}

apps/frontend/src/pages/admin/panels/CategoriesPanel.tsx

@@ -11,11 +11,11 @@ import {
   Modal,
   Select,
   Space,
-  Table,
   Tag,
   Typography,
   Upload,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useMemo, useState } from 'react'
 
@@ -312,7 +312,7 @@ export default function CategoriesPanel() {
         </Form>
       </Card>
       <Card title="分类列表（树形层级）" bordered={false}>
-        <Table<WorkCategory>
+        <PercentTable<WorkCategory>
           rowKey="categoryId"
           loading={categoriesQuery.isLoading}
           dataSource={treeData}

apps/frontend/src/pages/admin/panels/ConsignmentInventoryPanel.tsx

@@ -18,11 +18,11 @@ import {
   Space,
   Statistic,
   Switch,
-  Table,
   Tag,
   Tooltip,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useState } from 'react'
 
@@ -839,7 +839,7 @@ export default function ConsignmentInventoryPanel() {
             }
           />
         ) : null}
-        <Table
+        <PercentTable
           rowKey="id"
           columns={columns}
           dataSource={items}

apps/frontend/src/pages/admin/panels/ConsignmentSubmissionsPanel.tsx

@@ -20,12 +20,12 @@ import {
   Row,
   Select,
   Space,
-  Table,
   Tag,
   Tooltip,
   Typography,
   App,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useState } from 'react'
 
@@ -457,7 +457,7 @@ export default function ConsignmentSubmissionsPanel() {
             }
           />
         ) : null}
-        <Table
+        <PercentTable
           rowKey="id"
           columns={submissionColumns}
           dataSource={submissions}

apps/frontend/src/pages/admin/panels/FeedbacksPanel.tsx

@@ -1,6 +1,7 @@
 import { ReloadOutlined } from '@ant-design/icons'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { App, Button, Card, Form, Input, Modal, Space, Table, Tag, Typography } from 'antd'
+import { App, Button, Card, Form, Input, Modal, Space, Tag, Typography } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router'
@@ -123,7 +124,7 @@ export default function FeedbacksPanel() {
         }
         bordered={false}
       >
-        <Table<WorkerOrderFeedback>
+        <PercentTable<WorkerOrderFeedback>
           rowKey="feedbackId"
           size="small"
           loading={feedbacksQuery.isLoading}

apps/frontend/src/pages/admin/panels/FinancePanel.tsx

@@ -13,10 +13,10 @@ import {
   Select,
   Space,
   Switch,
-  Table,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router'
@@ -585,7 +585,7 @@ export default function FinancePanel() {
           totalCount={financeRequestsQuery.data?.data.summary?.totalCount}
           totalAmount={financeRequestsQuery.data?.data.summary?.totalAmount}
         />
-        <Table<WorkerFinanceRequest>
+        <PercentTable<WorkerFinanceRequest>
           rowKey="requestId"
           loading={financeRequestsQuery.isLoading}
           dataSource={financeRequestsQuery.data?.data.items || []}

apps/frontend/src/pages/admin/panels/HallConfigPanel.tsx

@@ -11,10 +11,10 @@ import {
   InputNumber,
   Space,
   Switch,
-  Table,
   Tag,
   Upload,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import { useEffect, useMemo, useState } from 'react'
 
 import {
@@ -182,7 +182,7 @@ export default function HallConfigPanel() {
               一级分类限额将限制该游戏及旗下所有子分类的总单量；二级分类可单独设置细化限额。
             </span>
           </div>
-          <Table<WorkCategory>
+          <PercentTable<WorkCategory>
             rowKey="categoryId"
             size="small"
             pagination={false}

apps/frontend/src/pages/admin/panels/LeaderboardPanel.tsx

@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
-import { Card, Segmented, Space, Table, Tag, Typography } from 'antd'
+import { Card, Segmented, Space, Tag, Typography } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useState } from 'react'
 
@@ -134,7 +135,7 @@ export default function LeaderboardPanel() {
             : ''}
         </Typography.Text>
       </Space>
-      <Table<AdminWorkerLeaderboardEntry>
+      <PercentTable<AdminWorkerLeaderboardEntry>
         rowKey="workerId"
         columns={columns}
         dataSource={items}

apps/frontend/src/pages/admin/panels/LevelsPanel.tsx

@@ -9,10 +9,10 @@ import {
   Modal,
   Space,
   Switch,
-  Table,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useState } from 'react'
 
@@ -225,7 +225,7 @@ export default function LevelsPanel() {
         </Form>
       </Card>
       <Card title="等级列表" bordered={false}>
-        <Table<WorkerLevel>
+        <PercentTable<WorkerLevel>
           rowKey="levelId"
           loading={levelsQuery.isLoading}
           dataSource={levelsQuery.data?.data.items || []}

apps/frontend/src/pages/admin/panels/NotificationsPanel.tsx

@@ -1,5 +1,6 @@
 import { useQuery, useQueryClient } from '@tanstack/react-query'
-import { App, Alert, Button, Card, Space, Switch, Table, Typography } from 'antd'
+import { App, Alert, Button, Card, Space, Switch, Typography } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useEffect, useState } from 'react'
 
@@ -143,7 +144,7 @@ export default function NotificationsPanel() {
           message="配置仅影响保存后产生的通知"
           description="关闭后台待办后，声音播报会同步关闭；已创建的待办不会被隐藏或删除。"
         />
-        <Table
+        <PercentTable
           rowKey="key"
           columns={columns}
           dataSource={notificationEventRows}

apps/frontend/src/pages/admin/panels/ProductMatchPanel.tsx

@@ -18,11 +18,11 @@ import {
   Select,
   Space,
   Switch,
-  Table,
   Tabs,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router'
@@ -359,7 +359,7 @@ export default function ProductMatchPanel() {
                     发现新商品后，点击「绑定到模板」在接单模板页配置匹配
                   </Typography.Text>
                 </Space>
-                <Table<KuaishouMatchSource>
+                <PercentTable<KuaishouMatchSource>
                   rowKey={(row) =>
                     `${row.sellerId}-${row.relItemId}-${row.itemTitle}-${row.relSkuId}-${row.skuNick}`
                   }
@@ -660,7 +660,7 @@ export default function ProductMatchPanel() {
                     </Button>
                   </Popconfirm>
                 </div>
-                <Table<WorkProductMatchLog>
+                <PercentTable<WorkProductMatchLog>
                   rowKey="logId"
                   loading={logsQuery.isLoading}
                   columns={logColumns}

apps/frontend/src/pages/admin/panels/ProductRulesPanel.tsx

@@ -23,11 +23,11 @@ import {
   Select,
   Space,
   Switch,
-  Table,
   Tabs,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useNavigate, useSearchParams } from 'react-router'
@@ -1350,7 +1350,7 @@ export default function ProductRulesPanel() {
             </div>
           ) : null}
 
-          <Table<WorkProductRule>
+          <PercentTable<WorkProductRule>
             rowKey="ruleId"
             size="small"
             loading={rulesQuery.isLoading || mappingsQuery.isLoading}

apps/frontend/src/pages/admin/panels/RiskControlPanel.tsx

@@ -11,9 +11,9 @@ import {
   Select,
   Space,
   Switch,
-  Table,
   Tag,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { ColumnsType } from 'antd/es/table'
 import { useEffect, useState } from 'react'
 
@@ -381,7 +381,7 @@ export default function RiskControlPanel() {
           </Button>
         }
       >
-        <Table
+        <PercentTable
           rowKey="key"
           size="small"
           columns={trackerColumns}
@@ -427,7 +427,7 @@ export default function RiskControlPanel() {
           </Button>
         </Space>
 
-        <Table
+        <PercentTable
           rowKey="id"
           size="small"
           columns={eventColumns}

apps/frontend/src/pages/admin/panels/WorkOrdersPanel.tsx

@@ -32,11 +32,11 @@ import {
   Select,
   Space,
   Switch,
-  Table,
   Tabs,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useNavigate, useSearchParams } from 'react-router'
@@ -2076,7 +2076,7 @@ export default function WorkOrdersPanel() {
         }
         bordered={false}
       >
-        <Table<WorkOrder>
+        <PercentTable<WorkOrder>
           rowKey="workOrderId"
           loading={ordersQuery.isLoading}
           dataSource={ordersQuery.data?.data.items || []}
@@ -3139,7 +3139,7 @@ export default function WorkOrdersPanel() {
                       </div>
                     </Space>
                   ) : null}
-                  <Table<WorkOrderShare>
+                  <PercentTable<WorkOrderShare>
                     rowKey="shareId"
                     size="small"
                     dataSource={sharingShares}

apps/frontend/src/pages/admin/panels/WorkerDetailDrawer.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
-import { Card, Descriptions, Drawer, Select, Space, Table, Tabs, Tag, Typography } from 'antd'
+import { Card, Descriptions, Drawer, Select, Space, Tabs, Tag, Typography } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useQuery } from '@tanstack/react-query'
 
@@ -303,7 +304,7 @@ function UnfreezesSection({ workerId }: { workerId: number }) {
     },
   ]
   return (
-    <Table<WorkerDepositUnfreeze>
+    <PercentTable<WorkerDepositUnfreeze>
       rowKey="id"
       size="small"
       columns={columns}
@@ -398,7 +399,7 @@ function LedgersSection({ workerId }: { workerId: number }) {
           setPage(1)
         }}
       />
-      <Table<WorkerWalletLedger>
+      <PercentTable<WorkerWalletLedger>
         rowKey="ledgerId"
         size="small"
         columns={columns}
@@ -463,7 +464,7 @@ function OrdersSection({ workerId }: { workerId: number }) {
     },
   ]
   return (
-    <Table<WorkOrder>
+    <PercentTable<WorkOrder>
       rowKey="workOrderId"
       size="small"
       columns={columns}

apps/frontend/src/pages/admin/panels/WorkersPanel.tsx

@@ -13,11 +13,11 @@ import {
   Select,
   Space,
   Switch,
-  Table,
   Tag,
   Tooltip,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useEffect, useRef, useState } from 'react'
 import { useSearchParams } from 'react-router'
@@ -952,7 +952,7 @@ export default function WorkersPanel() {
               : '寄卖白名单已关闭：全部打手均可发布寄卖。下方开关仅在重新开启白名单后生效。'
           }
         />
-        <Table<WorkerUser>
+        <PercentTable<WorkerUser>
           rowKey="workerId"
           loading={workersQuery.isLoading}
           dataSource={workersQuery.data?.data.items || []}

apps/frontend/src/pages/admin/platform/AdminPlatformFulfillmentPage.tsx

@@ -18,7 +18,6 @@ import {
   Space,
   Spin,
   Switch,
-  Table,
   Tag,
   Typography,
 } from 'antd'

apps/frontend/src/pages/admin/platform/AdminPlatformShopsPage.tsx

@@ -19,11 +19,11 @@ import {
   Space,
   Spin,
   Switch,
-  Table,
   Tabs,
   Tag,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router'
@@ -1106,7 +1106,7 @@ function KuaishouIndustryPanel({
         {shops.length === 0 ? (
           <Empty description="暂无店铺授权" />
         ) : (
-          <Table<AdminKuaishouIndustryShopConfig>
+          <PercentTable<AdminKuaishouIndustryShopConfig>
             rowKey={(row, index) => buildIndustryShopRowKey(row, index || 0)}
             columns={shopColumns}
             dataSource={shops}
@@ -1694,7 +1694,7 @@ function AffiliateDashPlatformPanel() {
               <Typography.Text code>apps/backend/.../affiliate-dash/sku-mapping.ts</Typography.Text>
               ，与平台商品目录对齐。
             </Typography.Paragraph>
-            <Table<SkuMappingRow>
+            <PercentTable<SkuMappingRow>
               rowKey={(row) => row.productNo}
               size="small"
               pagination={{ pageSize: 10, showSizeChanger: false }}
@@ -1760,7 +1760,7 @@ function AffiliateDashPlatformPanel() {
                   </Typography.Text>
                 ) : null}
               </Space>
-              <Table<AdminAffiliateDashProductItem>
+              <PercentTable<AdminAffiliateDashProductItem>
                 rowKey="sku"
                 size="small"
                 loading={productsLoading}

apps/frontend/src/pages/admin/platform/PddPlatformPanel.tsx

@@ -39,11 +39,11 @@ import {
   Spin,
   Statistic,
   Switch,
-  Table,
   Tag,
   Tooltip,
   Typography,
 } from 'antd'
+import PercentTable from '@/components/common/PercentTable'
 import type { TableColumnsType } from 'antd'
 import { useEffect, useState } from 'react'
 
@@ -986,7 +986,7 @@ export function PddPlatformPanel() {
           </Button>
         }
       >
-        <Table
+        <PercentTable
           rowKey="shopId"
           columns={columns}
           dataSource={config.stores}