匹配日志支持结果状态关键词与日期筛选及服务端分页

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

@@ -1,4 +1,4 @@
-import { PlayCircleOutlined, ReloadOutlined } from '@ant-design/icons'
+import { PlayCircleOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import {
   App,
@@ -20,6 +20,8 @@ import { useState } from 'react'
 import { useNavigate } from 'react-router'
 
 import JsonPreview from '@/components/admin/JsonPreview'
+import { AdminRangePicker } from '@/components/admin/AdminDatePicker'
+import dayjs, { ADMIN_DATE_FORMAT } from '@/lib/dayjs'
 import {
   fetchAdminKuaishouIndustryShops,
   fetchAdminKuaishouMatchSources,
@@ -31,6 +33,7 @@ import {
 import type { KuaishouMatchSource, WorkProductMatchLog } from '@/types/worker-platform'
 import type { AdminKuaishouIndustryShopOption } from '@/types/admin'
 import { formatAdminDateTime } from '@/utils/admin-time'
+import { ADMIN_DEFAULT_PAGE_SIZE, buildAdminTablePagination } from '@/utils/admin-pagination'
 
 export default function ProductMatchPanel() {
   const { message } = App.useApp()
@@ -42,6 +45,11 @@ export default function ProductMatchPanel() {
   >(null)
   const [selectedLog, setSelectedLog] = useState<WorkProductMatchLog | null>(null)
   const [activeTab, setActiveTab] = useState('sources')
+  const [logStatus, setLogStatus] = useState('')
+  const [logKeywordInput, setLogKeywordInput] = useState('')
+  const [logKeyword, setLogKeyword] = useState('')
+  const [logCreatedRange, setLogCreatedRange] = useState<[string, string] | null>(null)
+  const [logPage, setLogPage] = useState(1)
 
   const shopsQuery = useQuery({
     queryKey: ['admin-kuaishou-industry-shops', 'product-match'],
@@ -52,8 +60,22 @@ export default function ProductMatchPanel() {
     queryFn: () => fetchAdminKuaishouMatchSources(200),
   })
   const logsQuery = useQuery({
-    queryKey: ['admin-worker-platform-product-match-logs'],
-    queryFn: () => fetchAdminWorkProductMatchLogs(100),
+    queryKey: [
+      'admin-worker-platform-product-match-logs',
+      logStatus,
+      logKeyword,
+      logCreatedRange,
+      logPage,
+    ],
+    queryFn: () =>
+      fetchAdminWorkProductMatchLogs({
+        matchStatus: logStatus || undefined,
+        keyword: logKeyword || undefined,
+        createdFrom: logCreatedRange?.[0],
+        createdTo: logCreatedRange?.[1],
+        page: logPage,
+        pageSize: ADMIN_DEFAULT_PAGE_SIZE,
+      }),
   })
   const matchConfigQuery = useQuery({
     queryKey: ['admin-worker-platform-product-match-config'],
@@ -62,6 +84,7 @@ export default function ProductMatchPanel() {
 
   const sources = sourcesQuery.data?.data.items || []
   const logs = logsQuery.data?.data.items || []
+  const logsPagination = logsQuery.data?.data.pagination
   const shops = shopsQuery.data?.data.shops || []
   const matchConfig = matchConfigQuery.data?.data
   const shopNameBySellerId = createShopNameBySellerId(shops)
@@ -305,10 +328,62 @@ export default function ProductMatchPanel() {
           },
           {
             key: 'logs',
-            label: `匹配日志 (${logs.length})`,
+            label: `匹配日志 (共 ${logsPagination?.total ?? 0} 条)`,
             children: (
               <div className="page-stack">
-                <Space>
+                <Space wrap>
+                  <Select
+                    allowClear
+                    value={logStatus || undefined}
+                    style={{ width: 130 }}
+                    placeholder="全部结果"
+                    options={[
+                      { value: 'matched', label: '命中' },
+                      { value: 'unmatched', label: '未命中' },
+                      { value: 'ambiguous', label: '冲突' },
+                    ]}
+                    onChange={(value) => {
+                      setLogStatus(value || '')
+                      setLogPage(1)
+                    }}
+                  />
+                  <Input
+                    allowClear
+                    value={logKeywordInput}
+                    style={{ width: 240 }}
+                    placeholder="商品名 / 商品ID / SKU / 店铺ID"
+                    onChange={(event) => setLogKeywordInput(event.target.value)}
+                    onPressEnter={() => {
+                      setLogKeyword(logKeywordInput.trim())
+                      setLogPage(1)
+                    }}
+                  />
+                  <AdminRangePicker
+                    value={
+                      logCreatedRange
+                        ? [dayjs(logCreatedRange[0]), dayjs(logCreatedRange[1])]
+                        : null
+                    }
+                    onChange={(dates) => {
+                      const [start, end] = dates || []
+                      setLogCreatedRange(
+                        start && end
+                          ? [start.format(ADMIN_DATE_FORMAT), end.format(ADMIN_DATE_FORMAT)]
+                          : null,
+                      )
+                      setLogPage(1)
+                    }}
+                  />
+                  <Button
+                    type="primary"
+                    icon={<SearchOutlined />}
+                    onClick={() => {
+                      setLogKeyword(logKeywordInput.trim())
+                      setLogPage(1)
+                    }}
+                  >
+                    查询
+                  </Button>
                   <Button
                     icon={<ReloadOutlined />}
                     loading={logsQuery.isFetching}
@@ -317,7 +392,7 @@ export default function ProductMatchPanel() {
                     刷新
                   </Button>
                   <Typography.Text type="secondary">
-                    仅记录包含快手发码上下文的真实匹配
+                    日志全量保留，可按结果、关键词与日期筛选
                   </Typography.Text>
                 </Space>
                 <Table<WorkProductMatchLog>
@@ -325,7 +400,12 @@ export default function ProductMatchPanel() {
                   loading={logsQuery.isLoading}
                   columns={logColumns}
                   dataSource={logs}
-                  pagination={{ pageSize: 20, showSizeChanger: false }}
+                  pagination={buildAdminTablePagination({
+                    page: logPage,
+                    pageSize: ADMIN_DEFAULT_PAGE_SIZE,
+                    total: logsPagination?.total || 0,
+                    onChange: setLogPage,
+                  })}
                   size="small"
                 />
               </div>

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

@@ -332,12 +332,10 @@ export function testAdminKuaishouProductMatch(rawPayload: string) {
   }>('/api/v1/admin/worker-platform/product-match-test', { rawPayload })
 }
 
-export function fetchAdminWorkProductMatchLogs(limit = 100) {
-  return apiGet<{ items: WorkProductMatchLog[] }>(
+export function fetchAdminWorkProductMatchLogs(params?: Record<string, unknown>) {
+  return apiGet<WorkerListResponse<WorkProductMatchLog>>(
     '/api/v1/admin/worker-platform/product-match-logs',
-    {
-      limit,
-    },
+    params,
   )
 }