优化订单打手信息展示

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

@@ -15,7 +15,8 @@ import {
   Typography,
 } from 'antd'
 import type { TableColumnsType } from 'antd'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
+import { useSearchParams } from 'react-router'
 
 import {
   creditAdminWorkerWallet,
@@ -50,10 +51,12 @@ type FreezeWorkerFormValues = {
 export default function WorkersPanel() {
   const { message, modal } = App.useApp()
   const queryClient = useQueryClient()
+  const [searchParams, setSearchParams] = useSearchParams()
   const [status, setStatus] = useState('')
   const [keywordInput, setKeywordInput] = useState('')
   const [keyword, setKeyword] = useState('')
   const [workerType, setWorkerType] = useState('')
+  const [targetWorkerId, setTargetWorkerId] = useState(0)
   const [page, setPage] = useState(1)
   const [pageSize, setPageSize] = useState(ADMIN_DEFAULT_PAGE_SIZE)
   const [creditWorker, setCreditWorker] = useState<WorkerUser | null>(null)
@@ -74,9 +77,39 @@ export default function WorkersPanel() {
     (account) => account.accountChannel === 'alipay',
   )
 
+  useEffect(() => {
+    const workerId = Number(searchParams.get('workerId') || 0)
+    if (!Number.isInteger(workerId) || workerId <= 0) {
+      setTargetWorkerId(0)
+      return
+    }
+    setTargetWorkerId(workerId)
+    setKeywordInput('')
+    setKeyword('')
+    setStatus('')
+    setWorkerType('')
+    setPage(1)
+  }, [searchParams])
+
   const workersQuery = useQuery({
-    queryKey: ['admin-worker-platform-workers', status, keyword, workerType, page, pageSize],
-    queryFn: () => fetchAdminWorkerUsers({ status, keyword, workerType, page, pageSize }),
+    queryKey: [
+      'admin-worker-platform-workers',
+      status,
+      keyword,
+      workerType,
+      targetWorkerId,
+      page,
+      pageSize,
+    ],
+    queryFn: () =>
+      fetchAdminWorkerUsers({
+        status,
+        keyword,
+        workerType,
+        workerId: targetWorkerId || undefined,
+        page,
+        pageSize,
+      }),
   })
   const levelsQuery = useQuery({
     queryKey: ['admin-worker-platform-levels'],
@@ -105,7 +138,15 @@ export default function WorkersPanel() {
     setKeyword('')
     setStatus('')
     setWorkerType('')
+    setTargetWorkerId(0)
     setPage(1)
+    setSearchParams(
+      (current) => {
+        current.delete('workerId')
+        return current
+      },
+      { replace: true },
+    )
   }
 
   async function review(worker: WorkerUser, nextStatus: string) {
@@ -431,6 +472,9 @@ export default function WorkersPanel() {
       }
       bordered={false}
     >
+      {targetWorkerId ? (
+        <Typography.Text type="secondary">已定位打手 #{targetWorkerId}</Typography.Text>
+      ) : null}
       <Table<WorkerUser>
         rowKey="workerId"
         loading={workersQuery.isLoading}