Defer layout realtime notification startup

web/apps/web-ele/src/layouts/basic.vue

@@ -1,7 +1,19 @@
 <script lang="ts" setup>
 import type { ChatMessage } from '#/api/core/chat';
+import type {
+  AnnouncementItem,
+  NotificationItem,
+} from '#/composables/useNotification';
+import type { WatchStopHandle } from 'vue';
 
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import {
+  computed,
+  defineAsyncComponent,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+} from 'vue';
 import { useRouter } from 'vue-router';
 
 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
@@ -11,29 +23,26 @@ import { $t } from '@vben/locales';
 import { preferences } from '@vben/preferences';
 import { useAccessStore, useUserStore } from '@vben/stores';
 
-import NotificationPopup from '#/components/notification/NotificationPopup.vue';
 import { getFileUrl } from '#/composables/useFileUrl';
-import { useNotification } from '#/composables/useNotification';
 import { useAuthStore } from '#/store';
-import LoginForm from '#/views/_core/authentication/login.vue';
-import { useChat } from '#/views/_core/chat/composables/useChat';
 
-// 使用消息通知 composable
+const LoginForm = defineAsyncComponent(
-const {
+  () => import('#/views/_core/authentication/login.vue'),
-  notifications,
+);
-  messageUnreadCount,
+const NotificationPopup = defineAsyncComponent(
-  announcements,
+  () => import('#/components/notification/NotificationPopup.vue'),
-  announcementUnreadCount,
+);
-  activeTab,
+
-  showDot,
+const notifications = ref<NotificationItem[]>([]);
-  markAsRead,
+const messageUnreadCount = ref(0);
-  markAnnouncementAsRead,
+const announcements = ref<AnnouncementItem[]>([]);
-  markAllAsRead,
+const announcementUnreadCount = ref(0);
-  clearReadMessages,
+const activeTab = ref<'announcement' | 'chat' | 'message'>('message');
-  viewAllMessages,
+const showDot = computed(
-  init: initNotification,
+  () => messageUnreadCount.value + announcementUnreadCount.value > 0,
-  cleanup: cleanupNotification,
+);
-} = useNotification();
+const unreadChatMessages = ref<ChatMessage[]>([]);
+const chatTotalUnread = ref(0);
 
 const userStore = useUserStore();
 const authStore = useAuthStore();
@@ -42,28 +51,93 @@ const { destroyWatermark, updateWatermark } = useWatermark();
 
 // 初始化消息通知
 const router = useRouter();
-const {
+let notificationApi: any = null;
-  connectChat,
+let chatApi: any = null;
-  disconnectChat,
+let layoutActive = false;
-  loadConversations,
+let stopRealtimeWatches: WatchStopHandle[] = [];
-  loadUnreadChatMessages,
-  unreadChatMessages,
-  totalUnread: chatTotalUnread,
-} = useChat();
 
 onMounted(() => {
-  initNotification();
+  layoutActive = true;
-  // 全局初始化聊天 WebSocket，确保任何页面都能收到消息通知
+  initRealtimeFeatures();
-  connectChat();
-  loadConversations();
-  loadUnreadChatMessages();
 });
 
 onUnmounted(() => {
-  cleanupNotification();
+  layoutActive = false;
-  disconnectChat();
+  stopRealtimeWatches.forEach((stop) => stop());
+  stopRealtimeWatches = [];
+  notificationApi?.cleanup();
+  chatApi?.disconnectChat();
 });
 
+async function initRealtimeFeatures() {
+  const [notificationModule, chatModule] = await Promise.all([
+    import('#/composables/useNotification'),
+    import('#/views/_core/chat/composables/useChat'),
+  ]);
+
+  if (!layoutActive) return;
+
+  notificationApi = notificationModule.useNotification();
+  chatApi = chatModule.useChat();
+
+  stopRealtimeWatches = [
+    watch(
+      notificationApi.notifications,
+      (value) => {
+        notifications.value = value;
+      },
+      { immediate: true },
+    ),
+    watch(
+      notificationApi.messageUnreadCount,
+      (value) => {
+        messageUnreadCount.value = value;
+      },
+      { immediate: true },
+    ),
+    watch(
+      notificationApi.announcements,
+      (value) => {
+        announcements.value = value;
+      },
+      { immediate: true },
+    ),
+    watch(
+      notificationApi.announcementUnreadCount,
+      (value) => {
+        announcementUnreadCount.value = value;
+      },
+      { immediate: true },
+    ),
+    watch(
+      notificationApi.activeTab,
+      (value) => {
+        activeTab.value = value;
+      },
+      { immediate: true },
+    ),
+    watch(
+      chatApi.unreadChatMessages,
+      (value) => {
+        unreadChatMessages.value = value;
+      },
+      { immediate: true },
+    ),
+    watch(
+      chatApi.totalUnread,
+      (value) => {
+        chatTotalUnread.value = value;
+      },
+      { immediate: true },
+    ),
+  ];
+
+  notificationApi.init();
+  chatApi.connectChat();
+  chatApi.loadConversations();
+  chatApi.loadUnreadChatMessages();
+}
+
 const menus = computed(() => [
   // {
   //   handler: () => {
@@ -120,27 +194,30 @@ async function handleLogout() {
 }
 
 function handleNoticeClear() {
-  clearReadMessages();
+  notificationApi?.clearReadMessages();
 }
 
 function handleMakeAll() {
-  markAllAsRead();
+  notificationApi?.markAllAsRead();
 }
 
 function handleNoticeRead(item: any) {
-  markAsRead(item);
+  notificationApi?.markAsRead(item);
 }
 
 function handleAnnouncementRead(item: any) {
-  markAnnouncementAsRead(item);
+  notificationApi?.markAnnouncementAsRead(item);
 }
 
 function handleViewAll() {
-  viewAllMessages();
+  notificationApi?.viewAllMessages();
 }
 
 function handleTabChange(tab: 'announcement' | 'chat' | 'message') {
   activeTab.value = tab;
+  if (notificationApi) {
+    notificationApi.activeTab.value = tab;
+  }
 }
 
 function handleChatClick(msg: ChatMessage) {