refactor: ♻️ 登录表单类型报错问题修复和登录样式调整为外部样式表

src/styles/login.scss

@@ -0,0 +1,84 @@
+.login-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  background: url("@/assets/images/login-background-light.jpg") no-repeat center
+    right;
+
+  .top-bar {
+    position: absolute;
+    top: 1rem;
+    left: 1rem;
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  .lang-select {
+    margin-left: 0.5rem;
+    cursor: pointer;
+  }
+
+  .login-card {
+    width: 400px;
+    background: transparent;
+    border: none;
+    border-radius: 4%;
+
+    @media (width <= 640px) {
+      width: 340px;
+    }
+
+    .input-wrapper {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+
+    .captcha-image {
+      height: 48px;
+      cursor: pointer;
+      border-top-right-radius: 6px;
+      border-bottom-right-radius: 6px;
+    }
+  }
+
+  .icp-info {
+    position: absolute;
+    bottom: 4px;
+    font-size: 12px;
+    text-align: center;
+  }
+
+  .el-form-item {
+    background: var(--el-input-bg-color);
+    border: 1px solid var(--el-border-color);
+    border-radius: 5px;
+  }
+
+  .el-input {
+    .el-input__wrapper {
+      padding: 0;
+      background-color: transparent;
+      box-shadow: none;
+
+      &.is-focus,
+      &:hover {
+        box-shadow: none !important;
+      }
+
+      input:-webkit-autofill {
+        /* 通过延时渲染背景色变相去除背景颜色 */
+        transition: background-color 1000s ease-in-out 0s;
+      }
+    }
+  }
+}
+
+html.dark .login-container {
+  background: url("@/assets/images/login-background-dark.jpg") no-repeat center
+    right;
+}

src/views/login/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login-container">
-    <!-- 顶部 -->
+    <!-- 顶部工具栏 -->
-    <div class="absolute-lt flex-x-end p-3 w-full">
+    <div class="top-bar">
       <el-switch
         v-model="isDark"
         inline-prompt
@@ -9,10 +9,10 @@
         inactive-icon="Sunny"
         @change="toggleTheme"
       />
-      <lang-select class="ml-2 cursor-pointer" />
+      <lang-select class="lang-select" />
     </div>
     <!-- 登录表单 -->
-    <el-card class="!border-none !bg-transparent !rounded-4% w-100 <sm:w-85">
+    <el-card class="login-card">
       <div class="text-center relative">
         <h2>{{ defaultSettings.title }}</h2>
         <el-tag class="ml-2 absolute-rt">{{ defaultSettings.version }}</el-tag>
@@ -26,7 +26,7 @@
       >
         <!-- 用户名 -->
         <el-form-item prop="username">
-          <div class="flex-y-center w-full">
+          <div class="input-wrapper">
             <svg-icon icon-class="user" class="mx-2" />
             <el-input
               ref="username"
@@ -46,7 +46,7 @@
           placement="right"
         >
           <el-form-item prop="password">
-            <div class="flex-y-center w-full">
+            <div class="input-wrapper">
               <svg-icon icon-class="lock" class="mx-2" />
               <el-input
                 v-model="loginData.password"
@@ -54,7 +54,7 @@
                 type="password"
                 name="password"
                 @keyup="checkCapslock"
-                @keyup.enter="handleLogin"
+                @keyup.enter="handleLoginSubmit"
                 size="large"
                 class="h-[48px] pr-2"
                 show-password
@@ -65,7 +65,7 @@
 
         <!-- 验证码 -->
         <el-form-item prop="captchaCode">
-          <div class="flex-y-center w-full">
+          <div class="input-wrapper">
             <svg-icon icon-class="captcha" class="mx-2" />
             <el-input
               v-model="loginData.captchaCode"
@@ -73,13 +73,13 @@
               size="large"
               class="flex-1"
               :placeholder="$t('login.captchaCode')"
-              @keyup.enter="handleLogin"
+              @keyup.enter="handleLoginSubmit"
             />
 
             <el-image
               @click="getCaptcha"
               :src="captchaBase64"
-              class="rounded-tr-md rounded-br-md cursor-pointer h-[48px]"
+              class="captcha-image"
             />
           </div>
         </el-form-item>
@@ -90,7 +90,7 @@
           type="primary"
           size="large"
           class="w-full"
-          @click.prevent="handleLogin"
+          @click.prevent="handleLoginSubmit"
           >{{ $t("login.login") }}
         </el-button>
 
@@ -103,7 +103,7 @@
     </el-card>
 
     <!-- ICP备案 -->
-    <div class="absolute bottom-1 text-[10px] text-center" v-show="icpVisible">
+    <div class="icp-info" v-show="icpVisible">
       <p>
         Copyright © 2021 - 2024 youlai.tech All Rights Reserved. 有来技术
         版权所有
@@ -114,34 +114,48 @@
 </template>
 
 <script setup lang="ts">
+// 外部库和依赖
+import { LocationQuery, useRoute } from "vue-router";
+
+// 内部依赖
 import { useSettingsStore, useUserStore } from "@/store";
 import AuthAPI, { LoginData } from "@/api/auth";
-import type { FormInstance } from "element-plus";
-import { LocationQuery, useRoute } from "vue-router";
 import router from "@/router";
 import defaultSettings from "@/settings";
 import { ThemeEnum } from "@/enums/ThemeEnum";
 
+// 类型定义
+import type { FormInstance } from "element-plus";
+
+// 导入 login.scss 文件
+import "@/styles/login.scss";
+
+// 使用导入的依赖和库
 const userStore = useUserStore();
 const settingsStore = useSettingsStore();
 const route = useRoute();
-
+// 窗口高度
-// Internationalization
+const { height } = useWindowSize();
+// 国际化 Internationalization
 const { t } = useI18n();
 
-// Reactive states
+// 是否暗黑模式
 const isDark = ref(settingsStore.theme === ThemeEnum.DARK);
+// 是否显示 ICP 备案信息
 const icpVisible = ref(true);
-const loading = ref(false); // 按钮loading
+// 按钮 loading 状态
-const isCapslock = ref(false); // 是否大写锁定
+const loading = ref(false);
-const captchaBase64 = ref(); // 验证码图片Base64字符串
+// 是否大写锁定
-const loginFormRef = ref<FormInstance>(); // 登录表单ref
+const isCapslock = ref(false);
-const { height } = useWindowSize();
+// 验证码图片Base64字符串
+const captchaBase64 = ref();
+// 登录表单ref
+const loginFormRef = ref<FormInstance>();
 
 const loginData = ref<LoginData>({
   username: "admin",
   password: "123456",
-});
+} as LoginData);
 
 const loginRules = computed(() => {
   return {
@@ -182,8 +196,8 @@ function getCaptcha() {
   });
 }
 
-// 登录
+/** 登录表单提交 */
-function handleLogin() {
+function handleLoginSubmit() {
   loginFormRef.value?.validate((valid: boolean) => {
     if (valid) {
       loading.value = true;
@@ -203,7 +217,7 @@ function handleLogin() {
   });
 }
 
-// 解析 redirect 字符串 为 path 和  queryParams
+/** 解析 redirect 字符串 为 path 和  queryParams */
 function parseRedirect(): {
   path: string;
   queryParams: Record<string, string>;
@@ -251,43 +265,4 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-html.dark .login-container {
-  background: url("@/assets/images/login-bg-dark.jpg") no-repeat center right;
-}
-
-.login-container {
-  overflow-y: auto;
-  background: url("@/assets/images/login-bg.jpg") no-repeat center right;
-
-  @apply wh-full flex-center;
-
-  .login-form {
-    padding: 30px 10px;
-  }
-}
-
-.el-form-item {
-  background: var(--el-input-bg-color);
-  border: 1px solid var(--el-border-color);
-  border-radius: 5px;
-}
-
-:deep(.el-input) {
-  .el-input__wrapper {
-    padding: 0;
-    background-color: transparent;
-    box-shadow: none;
-
-    &.is-focus,
-    &:hover {
-      box-shadow: none !important;
-    }
-
-    input:-webkit-autofill {
-      /* 通过延时渲染背景色变相去除背景颜色 */
-      transition: background-color 1000s ease-in-out 0s;
-    }
-  }
-}
-</style>