KCGL/inventory-web/src/components/PendingTransferNotifier/index.vue

<template>
  <!-- 无渲染组件：只负责全局待办强提醒，不产生任何 DOM -->
</template>

<script setup lang="ts">
/**
 * 借库转交 · 全局待办强提醒
 *
 * 解决的问题：双向握手引入后，发起方提交了转交，接收人若不去借还记录页主动
 * 查看，就完全处于盲区 —— 物品在系统里挂着「待接收」，责任悬空。
 *
 * ★ 为什么用 ElMessageBox 而不是 ElNotification：
 *   Notification 缩在右上角，在仓库作业现场极易被忽略。改为**中央 Modal +
 *   遮罩**，强制打断注意力，符合蓝领作业现场的触达要求。
 *
 * ★ 为什么挂在 Layout 而非登录页：
 *   Layout 只在已登录区域渲染，天然保证「有 token 才查」；
 *   且它是路由切换时**常驻**的组件（AppMain 换页不会卸载它），
 *   轮询定时器不会被反复创建销毁。
 *
 * ★ 防骚扰 + 防叠加（三道）：
 *   1) 会话级去重：sessionStorage 记「上次已提醒过的数量」，只有数量**变化**
 *      才再弹。用 sessionStorage 而非 Pinia —— 后者刷新即重置，会反复轰炸。
 *   2) 模块级标志 reminderOpen：同一时刻只允许一个提醒弹窗。
 *   3) DOM 探测：按标题找屏幕上是否已有同名弹窗（覆盖标志失效的极端情况，
 *      例如 HMR 后旧实例残留的弹窗）。两道都过才弹。
 *
 * ★ 记录时机很关键：**只有真正弹出后才写 sessionStorage**。
 *   若先记录再因并发防护跳过，这条提醒会被永久吞掉（数量没变，下次不再弹）。
 *
 * ★ 错误一律静默：待办提醒是锦上添花，绝不能因为接口抖动就弹错误框刷屏。
 */
import { onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { getPendingTransferCount } from '@/api/transaction'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

const SS_KEY = 'pendingTransferNotifiedCount'
const REMINDER_TITLE = '待办通知：借库转交'
// 轮询间隔：需求只要求「初始化时查一次」，但那样已打开的页面永远收不到提醒
// （SPA 只在首次进入时初始化）。加一轮低频轮询才能真正做到「第一时间响应」；
// 有上面的去重逻辑兜底，轮询不会造成重复打扰。不需要的话删掉定时器即可。
const POLL_MS = 2 * 60 * 1000

// ★ 模块级而非组件级：即便组件被重复挂载（HMR、多 Layout 实例），
//   也能保证同一时刻只有一个提醒弹窗。
let reminderOpen = false

let timer: ReturnType<typeof setInterval> | null = null

// 按标题探测屏幕上是否已有同一个提醒弹窗
const isReminderOnScreen = (): boolean => {
  if (reminderOpen) return true
  try {
    return Array.from(document.querySelectorAll('.el-message-box__title'))
      .some(el => (el.textContent || '').includes(REMINDER_TITLE))
  } catch {
    return false
  }
}

/**
 * 弹出强提醒。
 * @returns 是否**真的弹出了** —— 调用方据此决定要不要记 sessionStorage，
 *          避免「记了却没弹」把提醒永久吞掉。
 */
const showReminder = (count: number): boolean => {
  if (isReminderOnScreen()) return false      // 已有提醒在屏 → 绝不叠加
  reminderOpen = true                          // 同步置位，挡住同一轮内的竞态

  ElMessageBox.confirm(
    `您有 ${count} 件物品等待接收确认，请及时处理。`,
    REMINDER_TITLE,
    {
      confirmButtonText: '去处理',
      cancelButtonText: '稍后处理',
      type: 'warning',
      // 强提醒：点遮罩不关（避免误触即消失），但保留右上角关闭按钮与 Esc，
      // 用户始终有明确的退出路径。
      closeOnClickModal: false,
      closeOnPressEscape: true,
      showClose: true,
      // 取消与关闭行为一致（都只是收起弹窗），无需区分
      distinguishCancelAndClose: false,
    }
  )
    .then(() => {
      router.push('/operation/records')        // 【去处理】
    })
    .catch(() => {
      // 【稍后处理】/ 关闭：仅收起弹窗，不阻断用户当前工作
    })
    .finally(() => {
      reminderOpen = false
    })

  return true
}

const check = async () => {
  if (!userStore.token) return
  let count = 0
  try {
    const res: any = await getPendingTransferCount()
    count = Number(res?.count ?? res?.data?.count ?? 0)
  } catch {
    return          // 静默：不打扰用户，也不刷屏报错
  }

  if (!count) {
    // 已处理完：清掉记录，下次再来新转交能重新提醒
    sessionStorage.removeItem(SS_KEY)
    return
  }

  const notified = Number(sessionStorage.getItem(SS_KEY) || 0)
  if (count === notified) return    // 数量没变 → 本会话已提醒过，不再轰炸

  // ★ 先弹，弹成功了才记账。反过来会把提醒永久吞掉。
  if (showReminder(count)) {
    sessionStorage.setItem(SS_KEY, String(count))
  }
  // 没弹出（已有弹窗在屏）时不记账：留给下一轮轮询重试
}

onMounted(() => {
  check()
  timer = setInterval(check, POLL_MS)
})

onUnmounted(() => {
  if (timer) clearInterval(timer)
  timer = null
  // 组件卸载时若弹窗还开着，一并收掉，避免遮罩残留挡住界面
  if (reminderOpen) {
    try { ElMessageBox.close() } catch { /* 忽略 */ }
    reminderOpen = false
  }
})
</script>