优化订单打手信息展示

apps/frontend/src/components/WorkOrderEventTimeline.tsx

@@ -1,11 +1,13 @@
-import { ClockCircleOutlined } from '@ant-design/icons'
+import { ClockCircleOutlined, LinkOutlined } from '@ant-design/icons'
 import { useQuery } from '@tanstack/react-query'
-import { Empty, Skeleton, Tag, Timeline, Tooltip, Typography } from 'antd'
+import { Empty, Skeleton, Space, Tag, Timeline, Tooltip, Typography } from 'antd'
+import { useNavigate } from 'react-router'
 import dayjs from '@/lib/dayjs'
 
 import { fetchAdminWorkOrderEvents } from '@/services/admin'
 import { fetchWorkerMyOrderEvents } from '@/services/worker'
 import type { WorkOrderEvent } from '@/types/worker-platform'
+import { getAdminRole } from '@/utils/admin-auth'
 
 type EventNodeStyle = {
   /** 节点标题（主文案） */
@@ -279,6 +281,8 @@ export default function WorkOrderEventTimeline({
   orderId: number
   viewer: 'admin' | 'worker'
 }) {
+  const navigate = useNavigate()
+  const canNavigateToWorker = viewer === 'admin' && getAdminRole() !== 'support'
   const eventsQuery = useQuery({
     queryKey: ['work-order-events', viewer, orderId],
     queryFn: () =>
@@ -324,19 +328,42 @@ export default function WorkOrderEventTimeline({
             </Typography.Text>
           ) : null}
           <div className="work-order-event-actor">
-            <Tag
-              color={
-                event.actorType === 'system'
-                  ? 'default'
-                  : event.actorType === 'worker'
-                    ? 'blue'
-                    : event.actorType === 'admin'
-                      ? 'green'
-                      : 'default'
-              }
-            >
-              {event.actorName || event.actorType}
-            </Tag>
+            {event.worker ? (
+              <Space size={[4, 4]} wrap>
+                <Tag
+                  color="blue"
+                  className={canNavigateToWorker ? 'work-order-event-worker-link' : undefined}
+                  onClick={() => {
+                    if (!canNavigateToWorker) return
+                    void navigate(
+                      `/admin/worker-platform?tab=workers&workerId=${event.worker?.workerId}`,
+                    )
+                  }}
+                >
+                  {event.worker.displayName} #{event.worker.workerId}
+                  {canNavigateToWorker ? <LinkOutlined /> : null}
+                </Tag>
+                <Typography.Text type="secondary" className="work-order-event-worker-meta">
+                  {event.worker.username} ·{' '}
+                  {event.worker.workerType === 'internal' ? '内部' : '外部'} ·{' '}
+                  {event.worker.levelName} · {formatWorkerStatus(event.worker.status)}
+                </Typography.Text>
+              </Space>
+            ) : (
+              <Tag
+                color={
+                  event.actorType === 'system'
+                    ? 'default'
+                    : event.actorType === 'worker'
+                      ? 'blue'
+                      : event.actorType === 'admin'
+                        ? 'green'
+                        : 'default'
+                }
+              >
+                {event.actorName || event.actorType}
+              </Tag>
+            )}
           </div>
         </div>
       ),
@@ -345,3 +372,13 @@ export default function WorkOrderEventTimeline({
 
   return <Timeline items={items} className="work-order-event-timeline" />
 }
+
+function formatWorkerStatus(status: string) {
+  const labels: Record<string, string> = {
+    active: '已启用',
+    pending_review: '待审核',
+    rejected: '已冻结',
+    disabled: '已停用',
+  }
+  return labels[status] || status || '未知状态'
+}