⚡ Bolt: Lazy load socket.io-client

src/App.vue

@@ -2,8 +2,14 @@
   <v-app>
     <!-- 正常路由 -->
     <router-view v-slot="{ Component, route }">
-      <transition mode="out-in" name="md3">
-        <component :is="Component" :key="route.path" />
+      <transition
+        mode="out-in"
+        name="md3"
+      >
+        <component
+          :is="Component"
+          :key="route.path"
+        />
       </transition>
     </router-view>
     <global-message />

src/components/AppHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app-bar :elevation="2">
-    <template v-slot:prepend>
-      <v-app-bar-nav-icon></v-app-bar-nav-icon>
+    <template #prepend>
+      <v-app-bar-nav-icon />
     </template>
 
     <v-app-bar-title>作业</v-app-bar-title>

src/components/CacheManager.vue

@@ -2,48 +2,85 @@
   <v-card>
     <v-card-title class="d-flex align-center">
       <span>缓存管理</span>
-      <v-spacer></v-spacer>
-      <v-btn :loading="loading" color="error" @click="clearAllCaches">
+      <v-spacer />
+      <v-btn
+        :loading="loading"
+        color="error"
+        @click="clearAllCaches"
+      >
         清除所有缓存
       </v-btn>
-      <v-btn class="ml-2" icon @click="refreshCaches">
+      <v-btn
+        class="ml-2"
+        icon
+        @click="refreshCaches"
+      >
         <v-icon>mdi-refresh</v-icon>
       </v-btn>
     </v-card-title>
 
     <v-card-text>
-      <v-alert v-if="!serviceWorkerActive" class="mb-4" type="warning">
+      <v-alert
+        v-if="!serviceWorkerActive"
+        class="mb-4"
+        type="warning"
+      >
         Service Worker 未激活，缓存管理功能不可用。
       </v-alert>
 
-      <v-alert v-if="message" :type="messageType" class="mb-4">
+      <v-alert
+        v-if="message"
+        :type="messageType"
+        class="mb-4"
+      >
         {{ message }}
       </v-alert>
 
       <v-expansion-panels v-if="caches.length > 0">
-        <v-expansion-panel v-for="cache in caches" :key="cache.name">
+        <v-expansion-panel
+          v-for="cache in caches"
+          :key="cache.name"
+        >
           <v-expansion-panel-title>
             <div class="d-flex align-center">
               <span>{{ formatCacheName(cache.name) }}</span>
-              <v-chip class="ml-2" size="small">{{ cache.urls.length }} 个文件</v-chip>
+              <v-chip
+                class="ml-2"
+                size="small"
+              >
+                {{ cache.urls.length }} 个文件
+              </v-chip>
             </div>
           </v-expansion-panel-title>
           <v-expansion-panel-text>
             <div class="d-flex justify-end mb-2">
-              <v-btn :loading="loading" color="error" size="small" @click="clearCache(cache.name)">
+              <v-btn
+                :loading="loading"
+                color="error"
+                size="small"
+                @click="clearCache(cache.name)"
+              >
                 清除此缓存
               </v-btn>
             </div>
             <v-list lines="two">
-              <v-list-item v-for="(url, index) in cache.urls" :key="index">
+              <v-list-item
+                v-for="(url, index) in cache.urls"
+                :key="index"
+              >
                 <v-list-item-title class="text-truncate">
                   {{ getFileName(url) }}
                 </v-list-item-title>
                 <v-list-item-subtitle class="text-truncate">
                   {{ url }}
                 </v-list-item-subtitle>
-                <template v-slot:append>
-                  <v-btn color="error" icon size="small" @click="clearUrl(cache.name, url)">
+                <template #append>
+                  <v-btn
+                    color="error"
+                    icon
+                    size="small"
+                    @click="clearUrl(cache.name, url)"
+                  >
                     <v-icon>mdi-delete</v-icon>
                   </v-btn>
                 </template>
@@ -53,9 +90,15 @@
         </v-expansion-panel>
       </v-expansion-panels>
 
-      <v-skeleton-loader v-else-if="loading" type="article"/>
+      <v-skeleton-loader
+        v-else-if="loading"
+        type="article"
+      />
 
-      <v-alert v-else type="info">
+      <v-alert
+        v-else
+        type="info"
+      >
         没有找到缓存数据。
       </v-alert>
     </v-card-text>

src/components/ChatWidget.vue

@@ -447,7 +447,7 @@ export default {
       }
     },
   },
-  mounted() {
+  async mounted() {
     try {
       const stored = localStorage.getItem('chat.lastVisit')
       if (stored) this.lastVisit = stored
@@ -456,7 +456,7 @@ export default {
     }
 
     // Prepare socket
-    const s = getSocket()
+    const s = await getSocket()
     this.connected = !!s.connected
     this.socketId = s.id || ''
 
@@ -485,7 +485,7 @@ export default {
     }
 
     // Listen chat messages (旧接口兼容)
-    const offMessage = socketOn('chat:message', createSafeHandler((msg) => {
+    const offMessage = await socketOn('chat:message', createSafeHandler((msg) => {
       this.pushMessage(msg)
       this.addEvent({
         _id: `legacy-chat-${Date.now()}-${Math.random()}`,
@@ -497,9 +497,10 @@ export default {
         senderInfo: msg.senderInfo
       })
     }))
+    if (this.isDestroying) { if (offMessage) offMessage(); return }
 
     // Listen direct chat events (新的直接聊天事件)
-    const offDirectChat = socketOn('chat', createSafeHandler((eventData) => {
+    const offDirectChat = await socketOn('chat', createSafeHandler((eventData) => {
       if (eventData && eventData.content && eventData.content.text) {
         // 处理新格式的直接聊天事件
         const chatMsg = {
@@ -522,6 +523,11 @@ export default {
         })
       }
     }))
+    if (this.isDestroying) {
+        if (offMessage) offMessage();
+        if (offDirectChat) offDirectChat();
+        return;
+    }
 
     // Listen device events (通用事件接口 - 保留兼容)
     this.deviceEventHandler = createDeviceEventHandler({
@@ -554,10 +560,16 @@ export default {
       }),
       enableLegacySupport: true
     })
-    const offDeviceEvent = socketOn('device-event', this.deviceEventHandler)
+    const offDeviceEvent = await socketOn('device-event', this.deviceEventHandler)
+    if (this.isDestroying) {
+        if (offMessage) offMessage();
+        if (offDirectChat) offDirectChat();
+        if (offDeviceEvent) offDeviceEvent();
+        return;
+    }
 
     // 监听 KV 变化事件（支持新旧格式）
-    const offKvChanged = socketOn('kv-key-changed', createSafeHandler((eventData) => {
+    const offKvChanged = await socketOn('kv-key-changed', createSafeHandler((eventData) => {
       // 新格式：直接事件数据
       if (eventData.content && eventData.timestamp) {
         this.addEvent({
@@ -580,9 +592,16 @@ export default {
         })
       }
     }))
+    if (this.isDestroying) {
+        if (offMessage) offMessage();
+        if (offDirectChat) offDirectChat();
+        if (offDeviceEvent) offDeviceEvent();
+        if (offKvChanged) offKvChanged();
+        return;
+    }
 
     // 监听紧急通知事件
-    const offUrgentNotice = socketOn('urgent-notice', createSafeHandler((notificationData) => {
+    const offUrgentNotice = await socketOn('urgent-notice', createSafeHandler((notificationData) => {
       console.log('收到紧急通知:', notificationData)
 
       // 添加到事件列表
@@ -599,9 +618,17 @@ export default {
       // 立即显示紧急通知弹窗
       this.showUrgentNotification(notificationData)
     }))
+    if (this.isDestroying) {
+        if (offMessage) offMessage();
+        if (offDirectChat) offDirectChat();
+        if (offDeviceEvent) offDeviceEvent();
+        if (offKvChanged) offKvChanged();
+        if (offUrgentNotice) offUrgentNotice();
+        return;
+    }
 
     // 监听通知事件
-    const offNotification = socketOn('notification', createSafeHandler((notificationData) => {
+    const offNotification = await socketOn('notification', createSafeHandler((notificationData) => {
       console.log('收到通知事件:', notificationData)
 
       // 添加到事件列表
@@ -617,7 +644,18 @@ export default {
 
       // 立即显示通知弹窗
       this.showUrgentNotification(notificationData)
-    }))    // 保存清理函数
+    }))
+    if (this.isDestroying) {
+        if (offMessage) offMessage();
+        if (offDirectChat) offDirectChat();
+        if (offDeviceEvent) offDeviceEvent();
+        if (offKvChanged) offKvChanged();
+        if (offUrgentNotice) offUrgentNotice();
+        if (offNotification) offNotification();
+        return;
+    }
+
+    // 保存清理函数
     this.cleanupFunctions = [
       offMessage,
       offDirectChat,

src/components/EventSender.vue

@@ -19,7 +19,7 @@ export default {
      */
     async sendEvent(eventName, content = {}) {
       try {
-        sendEvent(eventName, content);
+        await sendEvent(eventName, content);
 
         this.$emit("sent", {
           eventName,