91 lines
2.1 KiB
JavaScript
91 lines
2.1 KiB
JavaScript
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
|
|
}
|
|
}
|