统一后台 Table 分页:常开 10/20/50/100 条数切换

- 新增 admin-pagination 工具,标准列表与云触手记录分别配置
- 用户/审计等页补齐 showSizeChanger,避免 total≤50 时无法切换
- ConfigProvider 默认开启条数切换
This commit is contained in:
yml2213
2026-07-10 16:05:27 +08:00
parent 042574dea3
commit d61a04befa
10 changed files with 160 additions and 41 deletions
@@ -13,6 +13,11 @@ import type { AdminAuditLogItem } from '@/types/admin'
import { hasAdminRole } from '@/utils/admin-auth'
import { formatAuditAction, formatAuditTargetType } from '@/utils/admin-display'
import { adminAuditActionOptions, adminAuditTargetTypeOptions } from '@/utils/admin-options'
import {
ADMIN_DEFAULT_PAGE_SIZE,
buildAdminTablePagination,
resolveAdminPageSize,
} from '@/utils/admin-pagination'
import { formatAdminDateTime } from '@/utils/admin-time'
import { stringifyDisplayJson } from '@/utils/date-time'
@@ -27,7 +32,7 @@ export default function AdminAuditLogsPage() {
const isAdmin = hasAdminRole('admin')
const [searchParams, setSearchParams] = useSearchParams()
const page = Number(searchParams.get('page') || 1) || 1
const pageSize = Number(searchParams.get('pageSize') || 20) || 20
const pageSize = resolveAdminPageSize(searchParams.get('pageSize'), ADMIN_DEFAULT_PAGE_SIZE)
const filters = {
actorUsername: searchParams.get('actorUsername') || '',
action: searchParams.get('action') || '',
@@ -195,17 +200,16 @@ export default function AdminAuditLogsPage() {
dataSource={data?.items || []}
locale={{ emptyText: <Empty description="暂无审计记录" /> }}
scroll={{ x: 980 }}
pagination={{
pagination={buildAdminTablePagination({
current: data?.pagination.page || page,
pageSize: data?.pagination.pageSize || pageSize,
total: data?.pagination.total || 0,
showTotal: (total) => `${total}`,
onChange: (nextPage, nextPageSize) => {
setSearchParams(
cleanParams({ ...filters, page: nextPage, pageSize: nextPageSize }),
)
},
}}
})}
/>
</Card>
</>
@@ -31,6 +31,10 @@ import {
} from '@/services/admin'
import type { AdminCloudtentaclesDeliveryRecordItem } from '@/types/admin'
import { getAdminToken } from '@/utils/admin-auth'
import {
buildCloudtentaclesTablePagination,
CLOUDTENTACLES_DEFAULT_PAGE_SIZE,
} from '@/utils/admin-pagination'
import { formatAdminDateTime } from '@/utils/admin-time'
type RecordSourceOption = {
@@ -43,9 +47,6 @@ type RecordSourceOption = {
type DateRangeValue = [Dayjs | null, Dayjs | null] | null
const DEFAULT_PAGE_SIZE = 100
const PAGE_SIZE_OPTIONS = [100, 200, 500, 1000]
export default function AdminCloudtentaclesRecordsPage() {
const [loading, setLoading] = useState(false)
const [sourceLoading, setSourceLoading] = useState(false)
@@ -54,7 +55,7 @@ export default function AdminCloudtentaclesRecordsPage() {
const [platformOrderId, setPlatformOrderId] = useState('')
const [dateRange, setDateRange] = useState<DateRangeValue>(createDefaultDateRange())
const [page, setPage] = useState(1)
const [pageSize, setPageSize] = useState(DEFAULT_PAGE_SIZE)
const [pageSize, setPageSize] = useState(CLOUDTENTACLES_DEFAULT_PAGE_SIZE)
const [total, setTotal] = useState(0)
const [items, setItems] = useState<AdminCloudtentaclesDeliveryRecordItem[]>([])
const [sourceOptions, setSourceOptions] = useState<RecordSourceOption[]>([])
@@ -256,9 +257,9 @@ export default function AdminCloudtentaclesRecordsPage() {
setPlatformOrderId('')
setDateRange(nextDateRange)
setPage(1)
setPageSize(DEFAULT_PAGE_SIZE)
setPageSize(CLOUDTENTACLES_DEFAULT_PAGE_SIZE)
void loadRecords(1, {
pageSize: DEFAULT_PAGE_SIZE,
pageSize: CLOUDTENTACLES_DEFAULT_PAGE_SIZE,
platformOrderId: '',
dateRange: nextDateRange,
})
@@ -357,17 +358,14 @@ export default function AdminCloudtentaclesRecordsPage() {
dataSource={items}
size="small"
scroll={{ x: 1450 }}
pagination={{
pagination={buildCloudtentaclesTablePagination({
current: page,
pageSize,
total,
pageSizeOptions: PAGE_SIZE_OPTIONS,
showSizeChanger: true,
showTotal: (nextTotal) => `${nextTotal}`,
onChange: (nextPage, nextPageSize) => {
void loadRecords(nextPage, { pageSize: nextPageSize })
},
}}
})}
locale={{ emptyText: loading ? '发货记录加载中' : '当前筛选条件下暂无发货记录' }}
/>
</Card>
@@ -48,6 +48,11 @@ import type {
AdminKuaishouIndustryVoucherToolPayload,
} from '@/types/admin'
import { hasAdminRole } from '@/utils/admin-auth'
import {
ADMIN_DEFAULT_PAGE_SIZE,
buildAdminLocalTablePagination,
buildAdminTablePagination,
} from '@/utils/admin-pagination'
import { formatAdminDateTime } from '@/utils/admin-time'
import { stringifyDisplayJson } from '@/utils/date-time'
@@ -594,13 +599,12 @@ export default function AdminKuaishouIndustryPage() {
dataSource={vouchers}
loading={voucherLoading}
scroll={{ x: 1180 }}
pagination={{
pagination={buildAdminTablePagination({
current: voucherFilters.page,
pageSize: voucherFilters.pageSize,
total: voucherTotal,
showSizeChanger: true,
onChange: (page, pageSize) => loadVouchers({ page, pageSize }),
}}
})}
/>
</Card>
@@ -757,7 +761,7 @@ export default function AdminKuaishouIndustryPage() {
columns={refundColumns}
dataSource={refundRows}
scroll={{ x: 1120 }}
pagination={{ pageSize: 10 }}
pagination={buildAdminLocalTablePagination({ pageSize: ADMIN_DEFAULT_PAGE_SIZE })}
style={{ marginTop: 16 }}
/>
</Card>
@@ -10,6 +10,11 @@ import StatusTag from '@/components/admin/StatusTag'
import { fetchAdminOrders } from '@/services/admin'
import type { AdminOrderListItem } from '@/types/admin'
import { adminPayStatusOptions } from '@/utils/admin-options'
import {
ADMIN_DEFAULT_PAGE_SIZE,
buildAdminTablePagination,
resolveAdminPageSize,
} from '@/utils/admin-pagination'
import { formatAdminDateTime } from '@/utils/admin-time'
type OrderFilterForm = {
@@ -22,7 +27,7 @@ export default function AdminOrdersPage() {
const navigate = useNavigate()
const [searchParams, setSearchParams] = useSearchParams()
const page = Number(searchParams.get('page') || 1) || 1
const pageSize = Number(searchParams.get('pageSize') || 20) || 20
const pageSize = resolveAdminPageSize(searchParams.get('pageSize'), ADMIN_DEFAULT_PAGE_SIZE)
const filters = {
platformOrderId: searchParams.get('platformOrderId') || '',
payStatus: searchParams.get('payStatus') || '',
@@ -141,16 +146,14 @@ export default function AdminOrdersPage() {
columns={columns}
dataSource={data?.items || []}
scroll={{ x: 900 }}
pagination={{
pagination={buildAdminTablePagination({
current: data?.pagination.page || page,
pageSize: data?.pagination.pageSize || pageSize,
total: data?.pagination.total || 0,
showSizeChanger: true,
showTotal: (total) => `${total}`,
onChange: (nextPage, nextPageSize) => {
setSearchParams(cleanParams({ ...filters, page: nextPage, pageSize: nextPageSize }))
},
}}
})}
/>
</Card>
</section>
@@ -24,6 +24,11 @@ import {
import type { AdminTaskActionResponse, AdminTaskListItem } from '@/types/admin'
import { hasAdminRole } from '@/utils/admin-auth'
import { adminTaskStatusOptions } from '@/utils/admin-options'
import {
ADMIN_DEFAULT_PAGE_SIZE,
buildAdminTablePagination,
resolveAdminPageSize,
} from '@/utils/admin-pagination'
import { formatAdminDateTime } from '@/utils/admin-time'
type TaskFilterForm = {
@@ -50,7 +55,7 @@ export default function AdminTasksPage() {
const [actionLoadingId, setActionLoadingId] = useState<number | null>(null)
const [lastClaimUrl, setLastClaimUrl] = useState('')
const page = Number(searchParams.get('page') || 1) || 1
const pageSize = Number(searchParams.get('pageSize') || 20) || 20
const pageSize = resolveAdminPageSize(searchParams.get('pageSize'), ADMIN_DEFAULT_PAGE_SIZE)
const canManageTaskLifecycle = hasAdminRole('operator')
const canCloseTasks = hasAdminRole('support')
const filters = {
@@ -397,16 +402,14 @@ export default function AdminTasksPage() {
columns={columns}
dataSource={data?.items || []}
scroll={{ x: 1500 }}
pagination={{
pagination={buildAdminTablePagination({
current: data?.pagination.page || page,
pageSize: data?.pagination.pageSize || pageSize,
total: data?.pagination.total || 0,
showSizeChanger: true,
showTotal: (total) => `${total}`,
onChange: (nextPage, nextPageSize) => {
setSearchParams(cleanParams({ ...filters, page: nextPage, pageSize: nextPageSize }))
},
}}
})}
/>
</Card>
</section>
@@ -38,6 +38,11 @@ import {
import type { AdminRole, AdminUserListItem } from '@/types/admin'
import { getAdminUserId, hasAdminRole } from '@/utils/admin-auth'
import { adminUserRoleOptions, adminUserStatusOptions } from '@/utils/admin-options'
import {
ADMIN_DEFAULT_PAGE_SIZE,
buildAdminTablePagination,
resolveAdminPageSize,
} from '@/utils/admin-pagination'
import { formatAdminDateTime } from '@/utils/admin-time'
type UserFilterForm = {
@@ -68,7 +73,7 @@ export default function AdminUsersPage() {
const [creating, setCreating] = useState(false)
const [actionLoadingId, setActionLoadingId] = useState<number | null>(null)
const page = Number(searchParams.get('page') || 1) || 1
const pageSize = Number(searchParams.get('pageSize') || 20) || 20
const pageSize = resolveAdminPageSize(searchParams.get('pageSize'), ADMIN_DEFAULT_PAGE_SIZE)
const filters = {
username: searchParams.get('username') || '',
role: searchParams.get('role') || '',
@@ -407,15 +412,14 @@ export default function AdminUsersPage() {
dataSource={data?.items || []}
locale={{ emptyText: <Empty description="暂无用户" /> }}
scroll={{ x: 1060 }}
pagination={{
pagination={buildAdminTablePagination({
current: data?.pagination.page || page,
pageSize: data?.pagination.pageSize || pageSize,
total: data?.pagination.total || 0,
showTotal: (total) => `${total}`,
onChange: (nextPage, nextPageSize) => {
setSearchParams(cleanParams({ ...filters, page: nextPage, pageSize: nextPageSize }))
},
}}
})}
/>
</Card>
</section>
@@ -55,6 +55,7 @@ import type {
AdminKuaishouFeifeiProductRule,
} from '@/types/admin'
import { hasAdminRole } from '@/utils/admin-auth'
import { buildAdminLocalTablePagination } from '@/utils/admin-pagination'
type EditableOverrideRule = Omit<AdminCloudtentaclesOverrideRule, 'normalizedProductName'> & {
normalizedProductName?: string
@@ -666,7 +667,7 @@ function KuaishouFeifeiFulfillmentPanel() {
rowKey={(row) => row.id || `${row.productName}-${row.productCode}`}
columns={columns}
dataSource={rules}
pagination={{ pageSize: 20, showSizeChanger: true }}
pagination={buildAdminLocalTablePagination()}
scroll={{ x: 920, y: 520 }}
locale={{ emptyText: '暂无 kuaishou-feifei 商品映射' }}
className="platform-section-gap"
@@ -1170,7 +1171,7 @@ function KuaishouCloudFulfillmentPanel() {
),
},
]}
pagination={{ pageSize: 20, showSizeChanger: true }}
pagination={buildAdminLocalTablePagination()}
scroll={{ x: 1000, y: 420 }}
locale={{ emptyText: '当前账号暂无可展示商品' }}
/>
@@ -77,6 +77,11 @@ import type {
AdminScheduledJobsConfig,
} from '@/types/admin'
import { hasAdminRole } from '@/utils/admin-auth'
import {
ADMIN_DEFAULT_PAGE_SIZE,
buildAdminLocalTablePagination,
buildAdminTablePagination,
} from '@/utils/admin-pagination'
import { formatAdminDateTime } from '@/utils/admin-time'
type PlatformTab =
@@ -441,14 +446,12 @@ function NinetyonePanel({
columns={columns}
dataSource={data?.items || []}
scroll={{ x: 1200 }}
pagination={{
pagination={buildAdminTablePagination({
current: data?.page || 1,
pageSize: data?.pageSize || 20,
pageSize: data?.pageSize || ADMIN_DEFAULT_PAGE_SIZE,
total: data?.total || 0,
showSizeChanger: true,
showTotal: (total) => `${total}`,
onChange: (nextPage, nextPageSize) => loadOrders(nextPage, nextPageSize),
}}
})}
/>
</Card>
)
@@ -1469,7 +1472,7 @@ function KuaishouFeifeiPlatformPanel({
className="platform-section-gap"
rowKey={(row) => row.id || row.productCode || row.productName}
dataSource={source.productRules}
pagination={{ pageSize: 10, showSizeChanger: true }}
pagination={buildAdminLocalTablePagination()}
scroll={{ x: 980 }}
columns={[
{