fix: 修复移动端我的订单卡片与搜索栏Flex样式异常

apps/frontend/src/pages/worker/WorkerHallPage.tsx

@@ -1,4 +1,4 @@
-import { ClockCircleOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/icons'
+import { ClockCircleOutlined, ReloadOutlined, SearchOutlined, TrophyOutlined } from '@ant-design/icons'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import {
   Alert,
@@ -6,6 +6,7 @@ import {
   Button,
   Card,
   Descriptions,
+  Drawer,
   Empty,
   Input,
   InputNumber,
@@ -23,6 +24,7 @@ import { useEffect, useState } from 'react'
 
 import {
   fetchWorkerHallOrders,
+  fetchWorkerHallLeaderboard,
   fetchWorkerMyOrders,
   fetchWorkerProfile,
   grabWorkerOrder,
@@ -47,6 +49,7 @@ export default function WorkerHallPage() {
   const [pageSize, setPageSize] = useState(20)
   const [grabbingId, setGrabbingId] = useState(0)
   const [sharingOrder, setSharingOrder] = useState<WorkOrder | null>(null)
+  const [leaderboardOpen, setLeaderboardOpen] = useState(false)
   const [sharingQuantity, setSharingQuantity] = useState(1)
   const [submittingSharing, setSubmittingSharing] = useState(false)
   const [autoRefresh, setAutoRefresh] = useState(loadAutoRefreshPreference)
@@ -105,6 +108,14 @@ export default function WorkerHallPage() {
     retry: false,
   })
 
+  const leaderboardQuery = useQuery({
+    queryKey: ['worker-hall-leaderboard'],
+    queryFn: () => fetchWorkerHallLeaderboard(),
+    enabled: leaderboardOpen,
+    staleTime: 30_000,
+    retry: false,
+  })
+
   const orders = ordersQuery.data?.data.items || []
   const pagination = ordersQuery.data?.data.pagination
   const categories = ordersQuery.data?.data.categories || []
@@ -125,6 +136,7 @@ export default function WorkerHallPage() {
       queryClient.invalidateQueries({ queryKey: ['worker-profile'] }),
       queryClient.invalidateQueries({ queryKey: ['worker-my-orders'] }),
       queryClient.invalidateQueries({ queryKey: ['worker-my-orders-overview'] }),
+      queryClient.invalidateQueries({ queryKey: ['worker-hall-leaderboard'] }),
     ])
   }
 
@@ -219,6 +231,15 @@ export default function WorkerHallPage() {
             </div>
 
             <div className="worker-hall-mobile-top-actions">
+              <Tooltip title="接单排行榜">
+                <Button
+                  aria-label="接单排行榜"
+                  size="small"
+                  shape="circle"
+                  icon={<TrophyOutlined />}
+                  onClick={() => setLeaderboardOpen(true)}
+                />
+              </Tooltip>
               <div className="worker-hall-mobile-autorefresh-switch">
                 <span className="worker-hall-mobile-autorefresh-text">自动刷新</span>
                 <Switch
@@ -442,6 +463,13 @@ export default function WorkerHallPage() {
             <div className="worker-page-head-title-row">
               <Typography.Title level={3}>抢单大厅</Typography.Title>
               <div className="worker-hall-head-controls">
+                <Tooltip title="接单排行榜">
+                  <Button
+                    aria-label="接单排行榜"
+                    icon={<TrophyOutlined />}
+                    onClick={() => setLeaderboardOpen(true)}
+                  />
+                </Tooltip>
                 <Tooltip
                   title={
                     autoRefresh
@@ -727,6 +755,77 @@ export default function WorkerHallPage() {
           </Space>
         ) : null}
       </Modal>
+
+      <Drawer
+        title={
+          <Space size={8}>
+            <TrophyOutlined className="worker-hall-leaderboard-title-icon" />
+            <span>接单排行榜</span>
+          </Space>
+        }
+        open={leaderboardOpen}
+        placement="right"
+        width={isMobile ? '88vw' : 360}
+        onClose={() => setLeaderboardOpen(false)}
+      >
+        <div className="worker-hall-leaderboard">
+          <Typography.Text type="secondary" className="worker-hall-leaderboard-caption">
+            按累计验收完成数量排行
+          </Typography.Text>
+          {leaderboardQuery.isLoading ? (
+            <div className="worker-hall-leaderboard-loading">
+              <Spin />
+            </div>
+          ) : leaderboardQuery.error ? (
+            <Typography.Text type="danger">
+              {leaderboardQuery.error instanceof Error
+                ? leaderboardQuery.error.message
+                : '排行榜读取失败'}
+            </Typography.Text>
+          ) : (leaderboardQuery.data?.data.items.length || 0) > 0 ? (
+            <div className="worker-hall-leaderboard-list">
+              {leaderboardQuery.data?.data.items.map((entry) => (
+                <div
+                  key={entry.workerId}
+                  className={`worker-hall-leaderboard-row ${
+                    entry.workerId === worker?.workerId ? 'is-current' : ''
+                  }`}
+                >
+                  <span className={`worker-hall-leaderboard-rank rank-${Math.min(entry.rank, 3)}`}>
+                    {entry.rank}
+                  </span>
+                  <div className="worker-hall-leaderboard-worker">
+                    <Typography.Text strong ellipsis>
+                      {entry.displayName || '未命名打手'}
+                    </Typography.Text>
+                    <Typography.Text type="secondary" ellipsis>
+                      {entry.levelName || '未设置等级'}
+                    </Typography.Text>
+                  </div>
+                  <Typography.Text strong className="worker-hall-leaderboard-count">
+                    {entry.acceptedOrderCount} 单
+                  </Typography.Text>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description="暂无完成订单" />
+          )}
+          {leaderboardQuery.data ? (
+            <div className="worker-hall-leaderboard-current">
+              <Typography.Text type="secondary">我的排名</Typography.Text>
+              <Typography.Text strong>
+                {leaderboardQuery.data.data.current.rank
+                  ? `第 ${leaderboardQuery.data.data.current.rank} 名`
+                  : '暂未上榜'}
+              </Typography.Text>
+              <Typography.Text type="secondary">
+                已完成 {leaderboardQuery.data.data.current.acceptedOrderCount} 单
+              </Typography.Text>
+            </div>
+          ) : null}
+        </div>
+      </Drawer>
     </>
   )
 }