大厅与后台工单列表改为精确补丁并支持抢单确认

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

@@ -1,6 +1,7 @@
 import {
   ClockCircleOutlined,
   PushpinOutlined,
+  QuestionCircleOutlined,
   ReloadOutlined,
   SearchOutlined,
   TrophyOutlined,
@@ -19,6 +20,7 @@ import {
   Modal,
   Space,
   Spin,
+  Switch,
   Tabs,
   Tag,
   Tooltip,
@@ -37,6 +39,10 @@ import {
 } from '@/services/worker'
 import type { WorkOrder, WorkerLeaderboardPeriod, WorkerUser } from '@/types/worker-platform'
 import { useIsMobile } from '@/utils/use-is-mobile'
+import {
+  isGrabConfirmEnabled,
+  setGrabConfirmEnabled as setGrabConfirmEnabledStorage,
+} from '@/utils/worker-grab-confirm'
 import {
   resolveHallDepositAmount,
   resolveHallProductName,
@@ -53,7 +59,7 @@ const HALL_PAGE_SIZE = 20
 
 export default function WorkerHallPage() {
   const isMobile = useIsMobile()
-  const { message } = App.useApp()
+  const { message, modal } = App.useApp()
   const queryClient = useQueryClient()
   const [keywordInput, setKeywordInput] = useState('')
   const [keyword, setKeyword] = useState('')
@@ -64,6 +70,7 @@ export default function WorkerHallPage() {
   const [leaderboardPeriod, setLeaderboardPeriod] = useState<WorkerLeaderboardPeriod>('all')
   const [sharingQuantity, setSharingQuantity] = useState(1)
   const [submittingSharing, setSubmittingSharing] = useState(false)
+  const [grabConfirmEnabled, setGrabConfirmEnabled] = useState(isGrabConfirmEnabled)
   const loadMoreRef = useRef<HTMLDivElement | null>(null)
 
   const ordersQuery = useInfiniteQuery({
@@ -163,6 +170,28 @@ export default function WorkerHallPage() {
     ])
   }
 
+  function toggleGrabConfirm(checked: boolean) {
+    setGrabConfirmEnabled(checked)
+    setGrabConfirmEnabledStorage(checked)
+  }
+
+  function requestGrab(order: WorkOrder) {
+    if (!grabConfirmEnabled) {
+      void submitGrab(order)
+      return
+    }
+    modal.confirm({
+      title: '确认抢单',
+      icon: <QuestionCircleOutlined />,
+      content: `确认抢下「${resolveHallProductName(order)}」？奖励 ${formatMoney(
+        resolveHallRewardAmount(order),
+      )}`,
+      okText: '确认抢单',
+      cancelText: '取消',
+      onOk: () => submitGrab(order),
+    })
+  }
+
   async function submitGrab(order: WorkOrder) {
     setGrabbingId(order.workOrderId)
     try {
@@ -267,6 +296,16 @@ export default function WorkerHallPage() {
             </div>
 
             <div className="worker-hall-mobile-top-actions">
+              <Tooltip title={`抢单确认已${grabConfirmEnabled ? '开启' : '关闭'}`}>
+                <Button
+                  aria-label="抢单确认开关"
+                  size="small"
+                  shape="circle"
+                  icon={<QuestionCircleOutlined />}
+                  type={grabConfirmEnabled ? 'primary' : 'default'}
+                  onClick={() => toggleGrabConfirm(!grabConfirmEnabled)}
+                />
+              </Tooltip>
               <Tooltip title="接单排行榜">
                 <Button
                   aria-label="接单排行榜"
@@ -468,7 +507,7 @@ export default function WorkerHallPage() {
                             className="worker-hall-mobile-grab-btn"
                             disabled={Boolean(disabledReason)}
                             loading={grabbingId === order.workOrderId}
-                            onClick={() => submitGrab(order)}
+                            onClick={() => requestGrab(order)}
                           >
                             {disabledReason || '立即抢单'}
                           </Button>
@@ -490,6 +529,16 @@ export default function WorkerHallPage() {
               <Typography.Title level={3}>抢单大厅</Typography.Title>
               <div className="worker-hall-page-actions">
                 <div className="worker-hall-head-controls">
+                  <Tooltip title="开启后点击抢单会先弹窗确认，防止误点">
+                    <span className="worker-hall-grab-confirm-toggle">
+                      抢单确认
+                      <Switch
+                        size="small"
+                        checked={grabConfirmEnabled}
+                        onChange={toggleGrabConfirm}
+                      />
+                    </span>
+                  </Tooltip>
                   <Button
                     icon={<ReloadOutlined />}
                     loading={
@@ -693,7 +742,7 @@ export default function WorkerHallPage() {
                                 size="large"
                                 disabled={Boolean(disabledReason)}
                                 loading={grabbingId === order.workOrderId}
-                                onClick={() => submitGrab(order)}
+                                onClick={() => requestGrab(order)}
                               >
                                 {disabledReason || '立即抢单'}
                               </Button>