X-Financial/web/src/composables/useTopBarWorkbenchPopovers.js

import { onBeforeUnmount, onMounted, ref } from 'vue'

/** 工作台 TopBar 帮助气泡静态演示数据 */
export const TOPBAR_HELP_DEMO = {
  productName: 'Smart Expense Operations',
  version: 'v0.1.0',
  copyright: 'Copyright © 2024-2026 X-Financial. All Rights Reserved.',
  updatedAt: '2026-06-03'
}

export function useTopBarWorkbenchPopovers() {
  const notificationOpen = ref(false)
  const helpOpen = ref(false)
  const notificationWrapRef = ref(null)
  const helpWrapRef = ref(null)

  function toggleNotification() {
    const next = !notificationOpen.value
    notificationOpen.value = next
    if (next) {
      helpOpen.value = false
    }
  }

  function toggleHelp() {
    const next = !helpOpen.value
    helpOpen.value = next
    if (next) {
      notificationOpen.value = false
    }
  }

  function closeNotification() {
    notificationOpen.value = false
  }

  function closeHelp() {
    helpOpen.value = false
  }

  function isInsideWrap(wrapRef, target) {
    const root = wrapRef.value
    return Boolean(root && target instanceof Node && root.contains(target))
  }

  function handleTopBarPopoverOutside(event) {
    if (!notificationOpen.value && !helpOpen.value) {
      return
    }

    const target = event.target
    if (!(target instanceof Node)) {
      notificationOpen.value = false
      helpOpen.value = false
      return
    }

    if (notificationOpen.value && !isInsideWrap(notificationWrapRef, target)) {
      notificationOpen.value = false
    }

    if (helpOpen.value && !isInsideWrap(helpWrapRef, target)) {
      helpOpen.value = false
    }
  }

  onMounted(() => {
    if (typeof document !== 'undefined') {
      document.addEventListener('pointerdown', handleTopBarPopoverOutside, true)
    }
  })

  onBeforeUnmount(() => {
    if (typeof document !== 'undefined') {
      document.removeEventListener('pointerdown', handleTopBarPopoverOutside, true)
    }
  })

  return {
    notificationOpen,
    helpOpen,
    notificationWrapRef,
    helpWrapRef,
    topbarHelpDemo: TOPBAR_HELP_DEMO,
    toggleNotification,
    toggleHelp,
    closeNotification,
    closeHelp
  }
}