refactor: 添加MQTT连接和token监听功能

app.vue

@@ -7,4 +7,27 @@
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import refreshToken from '~/utils/RefreshToken'
+  import useUserStore from '~/stores/user'
+  const userStore = useUserStore()
+
+  onMounted(() => {
+    if (!userStore.mqttClient && userStore.userInfoRes.id) {
+      // 判断建立连接没 刷新会走这儿
+      userStore.connectMqtt()
+    }
+
+    // 浏览器打开新的tab页，防止数据不一致
+    document.addEventListener('visibilitychange', () => {
+      if (userStore.token !== refreshToken.getToken().token) {
+        location.reload()
+      }
+    })
+  })
+
+  onUnmounted(() => {
+    // 断开连接
+    userStore.mqttClient?.disconnect()
+  })
+</script>

components/kl-quick-menu/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="fixed-button-group">
     <div class="button-item" @click="handleVip">
-      <el-badge :is-dot="readCount" class="item">
+      <el-badge class="item">
         <el-icon class="icon-item !color-[#10c55b]"><Trophy /></el-icon>
       </el-badge>
       <span class="button-text">VIP</span>