feat:加一个网站发布公告会弹出来点确定我已知晓的弹窗;mock数据自动匹配接单模板;本地访问模式修改

2026-10-25 12:27:32 +08:00
parent 0d3dd3eacd
commit a7a8634a96
12 changed files with 403 additions and 6 deletions
@@ -0,0 +1,76 @@
+import { SoundOutlined } from '@ant-design/icons'
+import { useQuery } from '@tanstack/react-query'
+import { Button, Modal, Typography } from 'antd'
+import { useEffect, useState } from 'react'
+
+import { fetchWorkerAnnouncement } from '@/services/worker'
+import {
+  readAnnouncementAck,
+  resolveAnnouncementVersion,
+  shouldShowAnnouncementPopup,
+  writeAnnouncementAck,
+} from '@/utils/announcement-ack'
+
+/**
+ * 打手端公告弹窗。
+ *
+ * 后台「打手端滚动公告」一改动正文，就会在打手端下次进入时弹出；必须点「我已知晓」
+ * 才能关闭（遮罩/ESC 不生效）。确认结果按公告内容指纹记在 localStorage，
+ * 同一份公告只弹一次，改了正文会重新弹。
+ */
+export default function WorkerAnnouncementPopup() {
+  const [acknowledgedVersion, setAcknowledgedVersion] = useState(() => readAnnouncementAck())
+  const [open, setOpen] = useState(false)
+
+  const announcementQuery = useQuery({
+    queryKey: ['worker-announcement'],
+    queryFn: fetchWorkerAnnouncement,
+    retry: false,
+    // 全局默认 staleTime: Infinity，公告需要在下一次进入页面时重新拉取
+    staleTime: 5 * 60_000,
+  })
+  const announcement = announcementQuery.data?.data
+  const content = String(announcement?.content || '').trim()
+
+  useEffect(() => {
+    const shouldShow = shouldShowAnnouncementPopup({
+      enabled: announcement?.enabled,
+      content,
+      acknowledgedVersion,
+    })
+    if (shouldShow) setOpen(true)
+  }, [announcement?.enabled, content, acknowledgedVersion])
+
+  function acknowledge() {
+    const version = resolveAnnouncementVersion(content)
+    writeAnnouncementAck(version)
+    setAcknowledgedVersion(version)
+    setOpen(false)
+  }
+
+  return (
+    <Modal
+      open={open}
+      title={
+        <span className="worker-announcement-popup-title">
+          <SoundOutlined /> 公告
+        </span>
+      }
+      closable={false}
+      maskClosable={false}
+      keyboard={false}
+      centered
+      width={460}
+      className="worker-announcement-popup"
+      footer={
+        <Button type="primary" block onClick={acknowledge}>
+          我已知晓
+        </Button>
+      }
+    >
+      <Typography.Paragraph className="worker-announcement-popup-content">
+        {content}
+      </Typography.Paragraph>
+    </Modal>
+  )
+}