perf: 代码优化 views/login

src/views/login/index.vue

@@ -2,13 +2,15 @@
 import { reactive, ref } from "vue"
 import { useRouter } from "vue-router"
 import { useUserStore } from "@/store/modules/user"
-import { User, Lock, Key, Picture, Loading } from "@element-plus/icons-vue"
-import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
 import { type FormInstance, FormRules } from "element-plus"
+import { User, Lock, Key, Picture, Loading } from "@element-plus/icons-vue"
 import { getLoginCodeApi } from "@/api/login"
 import { type LoginRequestData } from "@/api/login/types/login"
+import ThemeSwitch from "@/components/ThemeSwitch/index.vue"
 
 const router = useRouter()
+
+/** 登录表单元素的引用 */
 const loginFormRef = ref<FormInstance | null>(null)
 
 /** 登录按钮 Loading */
@@ -16,7 +18,7 @@ const loading = ref(false)
 /** 验证码图片 URL */
 const codeUrl = ref("")
 /** 登录表单数据 */
-const loginForm: LoginRequestData = reactive({
+const loginFormData: LoginRequestData = reactive({
   username: "admin",
   password: "12345678",
   code: ""
@@ -32,34 +34,30 @@ const loginFormRules: FormRules = {
 }
 /** 登录逻辑 */
 const handleLogin = () => {
-  loginFormRef.value?.validate((valid: boolean) => {
+  loginFormRef.value?.validate((valid: boolean, fields) => {
     if (valid) {
       loading.value = true
       useUserStore()
-        .login({
-          username: loginForm.username,
-          password: loginForm.password,
-          code: loginForm.code
-        })
+        .login(loginFormData)
         .then(() => {
           router.push({ path: "/" })
         })
         .catch(() => {
           createCode()
-          loginForm.password = ""
+          loginFormData.password = ""
         })
         .finally(() => {
           loading.value = false
         })
     } else {
-      return false
+      console.error("表单校验不通过", fields)
     }
   })
 }
 /** 创建验证码 */
 const createCode = () => {
   // 先清空验证码的输入
-  loginForm.code = ""
+  loginFormData.code = ""
   // 获取验证码
   codeUrl.value = ""
   getLoginCodeApi().then((res) => {
@@ -79,10 +77,10 @@ createCode()
         <img src="@/assets/layout/logo-text-2.png" />
       </div>
       <div class="content">
-        <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" @keyup.enter="handleLogin">
+        <el-form ref="loginFormRef" :model="loginFormData" :rules="loginFormRules" @keyup.enter="handleLogin">
           <el-form-item prop="username">
             <el-input
-              v-model.trim="loginForm.username"
+              v-model.trim="loginFormData.username"
               placeholder="用户名"
               type="text"
               tabindex="1"
@@ -92,7 +90,7 @@ createCode()
           </el-form-item>
           <el-form-item prop="password">
             <el-input
-              v-model.trim="loginForm.password"
+              v-model.trim="loginFormData.password"
               placeholder="密码"
               type="password"
               tabindex="2"
@@ -103,7 +101,7 @@ createCode()
           </el-form-item>
           <el-form-item prop="code">
             <el-input
-              v-model.trim="loginForm.code"
+              v-model.trim="loginFormData.code"
               placeholder="验证码"
               type="text"
               tabindex="3"
@@ -114,16 +112,20 @@ createCode()
               <template #append>
                 <el-image :src="codeUrl" @click="createCode" draggable="false">
                   <template #placeholder>
-                    <el-icon><Picture /></el-icon>
+                    <el-icon>
+                      <Picture />
+                    </el-icon>
                   </template>
                   <template #error>
-                    <el-icon><Loading /></el-icon>
+                    <el-icon>
+                      <Loading />
+                    </el-icon>
                   </template>
                 </el-image>
               </template>
             </el-input>
           </el-form-item>
-          <el-button :loading="loading" type="primary" size="large" @click.prevent="handleLogin"> 登 录 </el-button>
+          <el-button :loading="loading" type="primary" size="large" @click.prevent="handleLogin">登 录</el-button>
         </el-form>
       </div>
     </div>