qnc-webview-v3/src/layouts/GlobalLayout.vue

<template>
    <router-view />
    <van-popup v-model:show="showPopup" round @click-overlay="onClickOverlay">
        <div class="popup-content text-center p-8">
            <div v-if="currentNotify?.title" class="text-lg font-bold mb-4">{{ currentNotify.title }}</div>
            <div v-html="currentNotify?.content"></div>
            <div class="flex justify-center">
                <van-button type="primary" @click="onClosePopup" class="w-24">关闭</van-button>
            </div>
        </div>
    </van-popup>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'

// 响应式变量
const showPopup = ref(false)
const notify = ref([])
const currentNotify = ref(null)
const pendingNotifyQueue = ref([])
const shownNotificationKeys = ref(new Set())
const SESSION_KEY = 'qnc_webview_shown_notifications'

// 获取当前页面路径
const route = useRoute()

// 获取通知数据
onMounted(() => {
    loadShownNotificationKeys()
    getGlobalNotify()
})

// 获取通知数据
const getGlobalNotify = async () => {
    const { data, error } = await useApiFetch("/notification/list")
        .get()
        .json()

    if (data.value && !error.value && data.value.code === 200 && data.value.data) {
        notify.value = data.value.data.notifications ?? []
        checkNotification()
    }
}

/** 与后台「展示时间」一致：未配置或起止相同视为「全天」，任意时刻都算在范围内 */
const isWithinTimeRange = (startTime, endTime) => {
    const s = (startTime || '').trim()
    const e = (endTime || '').trim()
    if (!s && !e) return true
    if (s === e) return true

    const now = new Date()
    const currentMinutes = now.getHours() * 60 + now.getMinutes()
    const toMinutes = (t) => {
        const parts = t.split(':').map(Number)
        const h = parts[0] ?? 0
        const m = parts[1] ?? 0
        return h * 60 + m
    }
    const startMinutes = toMinutes(s)
    const endMinutes = toMinutes(e)

    if (endMinutes < startMinutes) {
        return currentMinutes >= startMinutes || currentMinutes <= endMinutes
    }
    return currentMinutes >= startMinutes && currentMinutes <= endMinutes
}

/** 当前路由是否与通知配置的页面一致 */
const matchesNotificationPage = (page) => {
    const p = (page || '').trim()
    const cur = route.path || ''
    if (p === cur) return true
    if (p === '/' && (cur === '/' || cur === '')) return true
    if (cur.startsWith('/app/') && p === cur.replace('/app/', '/')) return true
    if (p.startsWith('/app/') && cur === p.replace('/app/', '/')) return true
    return false
}

const buildNotificationKey = (notification) => {
    return [
        notification.title ?? '',
        notification.content ?? '',
        notification.notificationPage ?? '',
        notification.startDate ?? '',
        notification.endDate ?? '',
        notification.startTime ?? '',
        notification.endTime ?? ''
    ].join('|')
}

const loadShownNotificationKeys = () => {
    const raw = sessionStorage.getItem(SESSION_KEY)
    if (!raw) return
    try {
        const parsed = JSON.parse(raw)
        if (Array.isArray(parsed)) {
            shownNotificationKeys.value = new Set(parsed)
        }
    } catch {
        shownNotificationKeys.value = new Set()
    }
}

const saveShownNotificationKeys = () => {
    sessionStorage.setItem(SESSION_KEY, JSON.stringify([...shownNotificationKeys.value]))
}

const hasShownNotification = (notification) => {
    return shownNotificationKeys.value.has(buildNotificationKey(notification))
}

const markNotificationShown = (notification) => {
    shownNotificationKeys.value.add(buildNotificationKey(notification))
    saveShownNotificationKeys()
}

const showNextNotification = () => {
    const next = pendingNotifyQueue.value.shift()
    if (!next) {
        currentNotify.value = null
        showPopup.value = false
        return
    }
    currentNotify.value = next
    showPopup.value = true
    markNotificationShown(next)
}

// 检查通知并更新showPopup
const checkNotification = () => {
    if (showPopup.value) return

    const matchedNotifications = []
    for (let notification of notify.value) {
        const isTimeValid = isWithinTimeRange(notification.startTime, notification.endTime)
        const isPageValid = matchesNotificationPage(notification.notificationPage)
        const isShown = hasShownNotification(notification)

        if (isTimeValid && isPageValid && !isShown) {
            matchedNotifications.push(notification)
        }
    }

    pendingNotifyQueue.value = matchedNotifications
    showNextNotification()
}

// 监听路由变化
watch(() => route.path, () => {
    checkNotification()
})

// 关闭弹窗
const onClosePopup = () => {
    showNextNotification()
}

const onClickOverlay = () => {
    onClosePopup()
}
</script>

<style lang="scss" scoped></style>