优化物品规则分页加载

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

@@ -33,6 +33,7 @@ import {
   saveAdminWorkProductRule,
 } from '@/services/admin'
 import type { CollectField, WorkProductRule } from '@/types/worker-platform'
+import { ADMIN_DEFAULT_PAGE_SIZE, buildAdminTablePagination } from '@/utils/admin-pagination'
 import { formatMoney } from './shared'
 
 export default function ProductRulesPanel() {
@@ -41,37 +42,40 @@ export default function ProductRulesPanel() {
   const [form] = Form.useForm()
 
   const [editingRule, setEditingRule] = useState<WorkProductRule | null>(null)
+  const [keywordInput, setKeywordInput] = useState('')
   const [keyword, setKeyword] = useState('')
   const [categoryId, setCategoryId] = useState<number | undefined>()
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState(ADMIN_DEFAULT_PAGE_SIZE)
 
   const rulesQuery = useQuery({
-    queryKey: ['admin-worker-platform-product-rules'],
-    queryFn: () => fetchAdminWorkProductRules(),
+    queryKey: ['admin-worker-platform-product-rules', keyword, categoryId, page, pageSize],
+    queryFn: () =>
+      fetchAdminWorkProductRules({
+        keyword,
+        categoryId,
+        page,
+        pageSize,
+      }),
   })
   const categoriesQuery = useQuery({
     queryKey: ['admin-worker-platform-categories'],
     queryFn: () => fetchAdminWorkCategories(),
   })
 
-  const allRules = rulesQuery.data?.data.items || []
+  const rules = rulesQuery.data?.data.items || []
+  const rulesPagination = rulesQuery.data?.data.pagination
+  const categoryCounts = new Map(
+    (rulesQuery.data?.data.categoryCounts || []).map((item) => [
+      item.categoryId === null ? 'uncategorized' : String(item.categoryId),
+      item.total,
+    ]),
+  )
 
-  const filteredRules = allRules.filter((rule) => {
-    if (categoryId && Number(rule.categoryId || 0) !== categoryId) return false
-    const keywordText = keyword.trim().toLowerCase()
-    if (!keywordText) return true
-    return [
-      rule.ruleKey,
-      rule.productName,
-      rule.skuCode,
-      rule.provider,
-      rule.shopId,
-      rule.categoryName,
-    ].some((value) =>
-      String(value || '')
-        .toLowerCase()
-        .includes(keywordText),
-    )
-  })
+  function searchRules(value = keywordInput) {
+    setKeyword(value.trim())
+    setPage(1)
+  }
 
   function resetRuleForm() {
     setEditingRule(null)
@@ -448,18 +452,7 @@ export default function ProductRulesPanel() {
               <Form.Item
                 label="规则标识"
                 name="ruleKey"
-                rules={[
-                  { required: true, message: '请输入规则标识' },
-                  {
-                    validator: (_, value) => {
-                      const key = String(value || '').trim()
-                      if (!editingRule && allRules.some((rule) => rule.ruleKey === key)) {
-                        return Promise.reject(new Error('标识已存在'))
-                      }
-                      return Promise.resolve()
-                    },
-                  },
-                ]}
+                rules={[{ required: true, message: '请输入规则标识' }]}
               >
                 <Input placeholder="skin-training" disabled={Boolean(editingRule)} />
               </Form.Item>
@@ -652,7 +645,7 @@ export default function ProductRulesPanel() {
                 物品规则列表
               </Typography.Text>
               <Tag color="blue" style={{ margin: 0 }}>
-                {filteredRules.length} 条规则
+                {rulesPagination?.total || 0} 条规则
               </Tag>
             </Space>
           }
@@ -662,8 +655,13 @@ export default function ProductRulesPanel() {
                 allowClear
                 placeholder="搜索规则/商品/SKU/店铺"
                 style={{ width: 200 }}
-                value={keyword}
-                onChange={(event) => setKeyword(event.target.value)}
+                value={keywordInput}
+                onChange={(event) => {
+                  const value = event.target.value
+                  setKeywordInput(value)
+                  if (!value) searchRules('')
+                }}
+                onSearch={searchRules}
               />
               <Button
                 icon={<ReloadOutlined />}
@@ -683,13 +681,14 @@ export default function ProductRulesPanel() {
           <div className="product-rules-category-tabs-bar">
             <Tabs
               activeKey={categoryId ? String(categoryId) : 'all'}
-              onChange={(key) => setCategoryId(key === 'all' ? undefined : Number(key))}
+              onChange={(key) => {
+                setCategoryId(key === 'all' ? undefined : Number(key))
+                setPage(1)
+              }}
               items={[
-                { key: 'all', label: `全部 (${allRules.length})` },
+                { key: 'all', label: `全部 (${rulesPagination?.total || 0})` },
                 ...(categoriesQuery.data?.data.items || []).map((item) => {
-                  const count = allRules.filter(
-                    (r) => Number(r.categoryId || 0) === item.categoryId,
-                  ).length
+                  const count = categoryCounts.get(String(item.categoryId)) || 0
                   return {
                     key: String(item.categoryId),
                     label: `${item.name}${count ? ` (${count})` : ''}`,
@@ -702,9 +701,8 @@ export default function ProductRulesPanel() {
           <Table<WorkProductRule>
             rowKey="ruleId"
             loading={rulesQuery.isLoading}
-            dataSource={filteredRules}
+            dataSource={rules}
             columns={columns}
-            pagination={false}
             rowClassName={(row) =>
               editingRule?.ruleId === row.ruleId ? 'product-rule-row-active' : ''
             }
@@ -712,6 +710,15 @@ export default function ProductRulesPanel() {
               onClick: () => editRule(row),
               title: '点击编辑此规则',
             })}
+            pagination={buildAdminTablePagination({
+              current: rulesPagination?.page || page,
+              pageSize: rulesPagination?.pageSize || pageSize,
+              total: rulesPagination?.total || 0,
+              onChange: (nextPage, nextPageSize) => {
+                setPage(nextPage)
+                setPageSize(nextPageSize)
+              },
+            })}
           />
         </Card>
       </div>

apps/frontend/src/services/admin/worker-platform.ts

@@ -78,7 +78,11 @@ export function fetchAdminWorkerUsers(params?: Record<string, unknown>) {
 }
 
 export function fetchAdminWorkProductRules(params?: Record<string, unknown>) {
-  return apiGet<{ items: WorkProductRule[] }>('/api/v1/admin/worker-platform/product-rules', params)
+  return apiGet<{
+    items: WorkProductRule[]
+    pagination: { page: number; pageSize: number; total: number }
+    categoryCounts: Array<{ categoryId: number | null; total: number }>
+  }>('/api/v1/admin/worker-platform/product-rules', params)
 }
 
 export function saveAdminWorkProductRule(payload: {