Refactor API requests and update global methods

components/kl-login/index.vue

@@ -23,7 +23,7 @@
             <el-form ref="formRef" :model="loginForm" :rules="rules" class="login-form">
               <template v-if="activeTab === 'account'">
                 <el-form-item prop="mobile">
-                  <el-input v-model="loginForm.mobile" placeholder="请输入用户名" :prefix-icon="User" class="w-322px!" />
+                  <el-input v-model="loginForm.mobile" placeholder="请输入用户名" :prefix-icon="User" class="w-[322px]!" />
                 </el-form-item>
                 <el-form-item prop="password">
                   <el-input v-model="loginForm.password" placeholder="请输入密码" :prefix-icon="Lock" type="password" />
@@ -33,7 +33,7 @@
               <!-- 验证码登录 -->
               <template v-else>
                 <el-form-item prop="phone">
-                  <el-input v-model="loginForm.phone" placeholder="请输入手机号" class="w-322px!" />
+                  <el-input v-model="loginForm.phone" placeholder="请输入手机号" class="w-[322px]!" />
                 </el-form-item>
                 <el-form-item prop="code">
                   <div class="verify-code-input">
@@ -89,7 +89,7 @@
   import REFRESHTOKEN from '~/utils/RefreshToken'
   import { handleLoginQQ, handleLoginWechat } from '~/utils/login'
   import useUserStore from '~/store/user'
-  const { $openRegister, $openLogin, $openLoginEmail } = useNuxtApp()
+  const app = useNuxtApp()
   const userStore = useUserStore()
 
   const props = defineProps({
@@ -157,7 +157,7 @@
   const handleRegister = () => {
     props.onClose()
     nextTick(() => {
-      // $openRegister()
+      app.$openRegister()
     })
   }
   // 发送验证码
@@ -262,7 +262,7 @@
   const handleLoginEmail = () => {
     props.onClose()
     nextTick(() => {
-        // $openLoginEmail()
+        app.$openLoginEmail()
     })
   }
 </script>

components/kl-nav-tab/index.vue

@@ -37,7 +37,7 @@
       </div>
       <div class="absolute right-[10px] flex items-center">
         <div class="h-[36px] w-[36px] border-rd-[50%] bg-[#F5F5F5] text-center line-height-[44px]">
-          <img v-if="!isLogin" src="~/assets/images/user.png" alt="" srcset="" class="h-[19px] w-[17px]" />
+          <img v-if="!isLogin" src="~/assets/images/user.png" alt="" srcset="" class="h-[19px] w-[17px] relative top-[7px] left-[10px]" />
           <img v-else :src="userStore.userInfoRes.avatar" alt="" srcset="" class="h-[19px] w-[17px] rd-[50%]" />
         </div>
         <span v-if="!isLogin" class="ml-[14px] cursor-pointer text-[14px] text-[#1A65FF] font-normal" @click="handleLogin">立即登录</span>
@@ -69,8 +69,7 @@
   import { Search } from '@element-plus/icons-vue'
   import useUserStore from '~/store/user'
   const userStore = useUserStore()
-  const { $openLogin } = useNuxtApp()
-
+  const app = useNuxtApp()
 
   const props = defineProps({
     active: {
@@ -174,7 +173,7 @@
     }
   }
   const handleLogin = () => {
-      // $openLogin()
+    app?.$openLogin() // 调用全局方法
   }
   const handleCommand = (command: string) => {
     if (command === '退出') {