CameraMachine/frontend/src/App.vue

<template>
    <router-view v-slot="{ Component }">
      <keep-alive :include="keepAliveIncludes">
        <component :is="Component" />
      </keep-alive>
    </router-view>

    <Login v-if="useUserInfoStore.loginShow" v-model:dialogVisible="useUserInfoStore.loginShow" />

    <!-- 全局唯一的设备状态弹窗，避免多页面同时挂载时重复弹出 -->
    <DeviceStatusDialog />

</template>
<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router'
import { onMounted, onUnmounted } from 'vue'
import Login from '@/components/login/index.vue';
import DeviceStatusDialog from '@/components/device-status-dialog/index.vue';
import useUserInfo from "@/stores/modules/user";
import useDeviceStatusStore from '@/stores/modules/deviceStatus';
const useUserInfoStore = useUserInfo();
const deviceStatusStore = useDeviceStatusStore();

import { listenerOnline } from '@/composables/online';
listenerOnline();

const router = useRouter()
const route = useRoute()

/* keep alive 的路由名称 */
const keepAliveIncludes = router
    .getRoutes()
    .filter((router) => router.meta?.keepAlive)
    .map((router) => router.name as string)

/* 监听企业过期事件 */
const handleCompanyExpired = (event: CustomEvent) => {
  const { message } = event.detail
  console.log('企业过期事件触发:', message)

  // 如果当前不在过期页面，进行跳转
  if (route.path !== '/photography/expired') {
    console.log('跳转到过期页面')
    router.replace('/photography/expired')
  }
}

onMounted(() => {
  window.addEventListener('companyExpired', handleCompanyExpired as EventListener)
  // 在 App 级别初始化设备状态监听，整个会话只初始化一次
  deviceStatusStore.initListener();
})

onUnmounted(() => {
  window.removeEventListener('companyExpired', handleCompanyExpired as EventListener)
  deviceStatusStore.cleanup();
})



</script>


<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>