Update login components and styling

components/kl-login/index.vue

@@ -3,7 +3,7 @@
     <div v-if="visible" class="popup-overlay">
       <div class="popup-content">
         <div class="login-container relative">
-          <el-icon class="absolute right-0 top-0 cursor-pointer" @click="onClose()"><Close /></el-icon>
+          <el-icon class="absolute right-[0px] top-[0px] cursor-pointer" @click="onClose()"><Close /></el-icon>
           <!-- 左侧插图 -->
           <div class="login-left">
             <img src="~/assets/images/login-illustration.png" alt="login" class="login-img" />

components/kl-nav-tab/index.vue

@@ -67,6 +67,7 @@
   import { top } from '~/api/home/index'
   import type { ProjectDrawStatisticAppRespVO } from '~/api/home/type'
   import { Search } from '@element-plus/icons-vue'
+  import refreshToken from "~/utils/RefreshToken";
   import useUserStore from '~/store/user'
   const userStore = useUserStore()
   const app = useNuxtApp()
@@ -88,6 +89,8 @@
 
   // 是否登录
   const isLogin = computed(() => {
+    console.log('userStore.token', refreshToken.getToken());
+    
     return !!userStore.token
   })
 

pages/home/components/LoginForm.vue

@@ -1,75 +1,75 @@
 <template>
   <div class="login-container flex flex-col justify-between">
-    <div class="ma-auto mt-25px w-100% flex flex-col items-center">
+    <div class="ma-auto mt-[25px] w-[100%] flex flex-col items-center">
       <el-image
         :src="userStore.userInfoRes.avatar || 'https://tuxixi.oss-cn-chengdu.aliyuncs.com/avater.png'"
         alt=""
         srcset=""
-        class="h-69px w-69px rd-50%"
+        class="h-[69px] w-[69px] rd-[50%]"
         :class="{ 'cursor-pointer': isLogin }"
         fit="cover"
         @click="handleUserInfo"
       />
-      <div class="mt-10px text-16px text-[#333333] font-normal">
-        <img v-if="userStore.userInfoRes.vipLevel === 1" src="~/assets/svg/vip.svg" alt="" class="relative top-12px" />
-        <img v-if="userStore.userInfoRes.vipLevel === 2" src="~/assets/svg/svip.svg" alt="" class="relative top-12px" />
+      <div class="mt-[10px] text-[16px] text-[#333333] font-normal">
+        <img v-if="userStore.userInfoRes.vipLevel === 1" src="~/assets/svg/vip.svg" alt="" class="relative top-[12px]" />
+        <img v-if="userStore.userInfoRes.vipLevel === 2" src="~/assets/svg/svip.svg" alt="" class="relative top-[12px]" />
         Hi，{{ userStore.userInfoRes.nickname || '欢迎访问~' }}
       </div>
     </div>
-    <div v-if="isLogin" class="mt-20px flex flex-col gap-20px px-20px text-14px text-[#333333] font-normal">
+    <div v-if="isLogin" class="mt-[20px] flex flex-col gap-[20px] px-[20px] text-[14px] text-[#333333] font-normal">
       <div class="flex items-center justify-between">
         <div class="flex items-center">
           <img src="~/assets/images/cad_0 (1).png" alt="" srcset="" />
-          <span class="title ml-4px" :title="`${userStaticInfo?.pointCount}`">我的积分: {{ userStaticInfo?.pointCount || 0 }}</span>
+          <span class="title ml-[4px]" :title="`${userStaticInfo?.pointCount}`">我的积分: {{ userStaticInfo?.pointCount || 0 }}</span>
         </div>
         <div class="flex items-center">
           <img src="~/assets/images/cad_0 (2).png" alt="" srcset="" />
-          <span class="title ml-4px" :title="`${userStaticInfo?.followCount}`">我的收藏: {{ userStaticInfo?.followCount || 0 }}</span>
+          <span class="title ml-[4px]" :title="`${userStaticInfo?.followCount}`">我的收藏: {{ userStaticInfo?.followCount || 0 }}</span>
         </div>
       </div>
       <div class="flex items-center justify-between">
         <div class="flex items-center">
           <img src="~/assets/images/cad_0 (3).png" alt="" srcset="" />
-          <span class="title ml-4px" :title="`${userStaticInfo?.projectCount}`">我的发布: {{ userStaticInfo?.projectCount || 0 }}</span>
+          <span class="title ml-[4px]" :title="`${userStaticInfo?.projectCount}`">我的发布: {{ userStaticInfo?.projectCount || 0 }}</span>
         </div>
         <div class="flex items-center">
           <img src="~/assets/images/cad_0 (4).png" alt="" srcset="" />
-          <span class="title ml-4px" :title="`${userStaticInfo?.downloadCount}`">我的下载: {{ userStaticInfo?.downloadCount || 0 }}</span>
+          <span class="title ml-[4px]" :title="`${userStaticInfo?.downloadCount}`">我的下载: {{ userStaticInfo?.downloadCount || 0 }}</span>
         </div>
       </div>
     </div>
-    <div v-if="!isLogin" class="mt-48px box-border flex justify-between px-18px">
+    <div v-if="!isLogin" class="mt-[48px] box-border flex justify-between px-[18px]">
       <div
-        class="h-37px w-101px cursor-pointer border border-[#1A65FF] rounded-2px border-solid bg-[#1A65FF] text-center text-14px text-[#FFFFFF] font-normal line-height-37px"
+        class="h-[37px] w-[101px] cursor-pointer border border-[#1A65FF] rounded-[2px] border-solid bg-[#1A65FF] text-center text-[14px] text-[#FFFFFF] font-normal line-height-[37px]"
         @click="handleLogin"
         >立即登录</div
       >
       <div
-        class="h-37px w-101px cursor-pointer border border-[#DDDDDD] rounded-2px border-solid text-center text-14px text-[#333333] font-normal line-height-37px"
+        class="h-[37px] w-[101px] cursor-pointer border border-[#DDDDDD] rounded-[2px] border-solid text-center text-[14px] text-[#333333] font-normal line-height-[37px]"
         @click="handleRegister"
         >免费注册</div
       >
     </div>
-    <div v-else class="mt-30px box-border flex justify-between px-18px">
+    <div v-else class="mt-[30px] box-border flex justify-between px-[18px]">
       <div
-        class="h-37px w-101px cursor-pointer border border-[#1A65FF] rounded-2px border-solid bg-[#1A65FF] text-center text-14px text-[#FFFFFF] font-normal line-height-37px"
+        class="h-[37px] w-[101px] cursor-pointer border border-[#1A65FF] rounded-[2px] border-solid bg-[#1A65FF] text-center text-[14px] text-[#FFFFFF] font-normal line-height-[37px]"
         @click="handleDrawe"
         >发布图纸</div
       >
       <div
-        class="h-37px w-101px cursor-pointer border border-[#DDDDDD] rounded-2px border-solid text-center text-14px text-[#333333] font-normal line-height-37px"
+        class="h-[37px] w-[101px] cursor-pointer border border-[#DDDDDD] rounded-[2px] border-solid text-center text-[14px] text-[#333333] font-normal line-height-[37px]"
         @click="handleLoginOut"
         >退出登录</div
       >
     </div>
-    <div v-if="!isLogin" class="mt-30px flex justify-between px-20px">
+    <div v-if="!isLogin" class="mt-[30px] flex justify-between px-[20px]">
       <img src="~/assets/images/qq-v2.png" alt="QQ登录" class="social-icon" @click="handleLoginQQ" />
       <img src="~/assets/images/weixin-v2.png" alt="微信登录" class="social-icon" @click="handleLoginWechat" />
       <img src="~/assets/images/email-v2.png" alt="邮箱登录" class="social-icon" @click="handleLoginEmail" />
       <img src="~/assets/images/phone-v2.png" alt="手机登录" class="social-icon" @click="handleLoginPhone" />
     </div>
 
-    <div class="sign-bonus mt-18px" @click="handleSign">
+    <div class="sign-bonus mt-[18px]" @click="handleSign">
       <img src="~/assets/images/sign.png" alt="签到奖励" class="bonus-image" />
     </div>
   </div>
@@ -83,7 +83,7 @@
   import { getUserStatistics } from '~/api/personal-center/index'
   import useUserStore from '~/store/user'
   const userStore = useUserStore()
-  const instance = getCurrentInstance()
+  const app = useNuxtApp()
 
   // 是否登录
   const isLogin = computed(() => {
@@ -102,27 +102,19 @@
   }
 
   const handleLogin = () => {
-    if (instance) {
-      // instance.appContext.config.globalProperties.$openLogin()
-    }
+      app.$openLogin()
   }
 
   const handleRegister = () => {
-    if (instance) {
-      // instance.appContext.config.globalProperties.$openRegister()
-    }
+      app.$openRegister()
   }
 
   const handleLoginPhone = () => {
-    if (instance) {
-      // instance.appContext.config.globalProperties.$openLogin('verify')
-    }
+      app.$openLogin('verify')
   }
 
   const handleLoginEmail = () => {
-    if (instance) {
-      // instance.appContext.config.globalProperties.$openLoginEmail()
-    }
+      app.$openLoginEmail()
   }
 
   const handleUserInfo = () => {

store/user.ts

@@ -4,9 +4,9 @@ import { getUserInfo } from "~/api/common/index";
 import type { AppMemberUserInfoRespVO } from "~/api/common/types";
 import MQTTClient from "~/utils/mqttClient";
 import { socialLoginByCode } from "~/api/pay";
-const app = useNuxtApp();
 
 export default defineStore("useUserStore", {
+  
   state: () => ({
     token: refreshToken.getToken().token || "",
     refreshToken: refreshToken.getToken().refreshToken || "",
@@ -18,7 +18,7 @@ export default defineStore("useUserStore", {
   }),
   actions: {
     setToken(token: string) {
-      this.token = token;
+      this.token = token;      
     },
     setRefreshToken(refreshToken: string) {
       this.refreshToken = refreshToken;
@@ -32,7 +32,7 @@ export default defineStore("useUserStore", {
     logout() {
       refreshToken.removeToken();
       if (self === top) {
-        navigateTo("/index");
+        navigateTo("/");
       } else {
         window.top?.postMessage({ event: "logout" }, "*");
       }
@@ -49,19 +49,20 @@ export default defineStore("useUserStore", {
     // 建立连接mqtt
     async connectMqtt() {
       if (process.client) {
-        // this.mqttClient = new MQTTClient("wss://www.tuxixi.net/mqtt", {
-        //   clientId: this.userInfoRes.id,
-        // });
-        // await this.mqttClient.connect();
-        // await this.mqttClient?.subscribe(
-        //   `zbjk_message_single/${this.userInfoRes.id}`
-        // );
-        // await this.mqttClient?.subscribe(
-        //   `zbjk_message_kefu/${this.userInfoRes.id}`
-        // );
+        this.mqttClient = new MQTTClient("wss://www.tuxixi.net/mqtt", {
+          clientId: this.userInfoRes.id,
+        });
+        await this.mqttClient.connect();
+        await this.mqttClient?.subscribe(
+          `zbjk_message_single/${this.userInfoRes.id}`
+        );
+        await this.mqttClient?.subscribe(
+          `zbjk_message_kefu/${this.userInfoRes.id}`
+        );
       }
     },
     async getToken(row: any) {
+      const app = useNuxtApp();
       try {
         // 验证state
         if (