delete alert style

src/views/login.vue

@@ -1,112 +1,126 @@
 <template>
-    <div class="login">
-        <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
-            <h3 class="title">若依后台管理系统</h3>
-            <el-form-item prop="tenant">
-                <el-input
-                        v-model="loginForm.tenant"
-                        auto-complete="off"
-                        placeholder="租户"
-                        size="large"
-                        type="text"
-                >
-                    <template #prefix>
-                        <svg-icon class="el-input__icon input-icon" icon-class="user"/>
-                    </template>
-                </el-input>
-            </el-form-item>
-            <el-form-item prop="username">
-                <el-input
-                        v-model="loginForm.username"
-                        auto-complete="off"
-                        placeholder="账号"
-                        size="large"
-                        type="text"
-                >
-                    <template #prefix>
-                        <svg-icon class="el-input__icon input-icon" icon-class="user"/>
-                    </template>
-                </el-input>
-            </el-form-item>
-            <el-form-item prop="password">
-                <el-input
-                        v-model="loginForm.password"
-                        auto-complete="off"
-                        placeholder="密码"
-                        size="large"
-                        type="password"
-                        @keyup.enter="handleLogin"
-                >
-                    <template #prefix>
-                        <svg-icon class="el-input__icon input-icon" icon-class="password"/>
-                    </template>
-                </el-input>
-            </el-form-item>
-            <el-form-item v-if="captchaEnabled" prop="code">
-                <el-input
-                        v-model="loginForm.code"
-                        auto-complete="off"
-                        placeholder="验证码"
-                        size="large"
-                        style="width: 63%"
-                        @keyup.enter="handleLogin"
-                >
-                    <template #prefix>
-                        <svg-icon class="el-input__icon input-icon" icon-class="validCode"/>
-                    </template>
-                </el-input>
-                <div class="login-code">
-                    <img :src="codeUrl" class="login-code-img" @click="getCode"/>
-                </div>
-            </el-form-item>
-            <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-            <el-form-item style="width:100%;">
-                <el-button
-                        :loading="loading"
-                        size="large"
-                        style="width:100%;"
-                        type="primary"
-                        @click.prevent="handleLogin"
-                >
-                    <span v-if="!loading">登 录</span>
-                    <span v-else>登 录 中...</span>
-                </el-button>
-                <div v-if="register" style="float: right;">
-                    <router-link :to="'/register'" class="link-type">立即注册</router-link>
-                </div>
-            </el-form-item>
-        </el-form>
-        <!--  底部  -->
-        <div class="el-login-footer">
-            <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
+  <div class="login">
+    <el-form
+      ref="loginRef"
+      :model="loginForm"
+      :rules="loginRules"
+      class="login-form"
+    >
+      <h3 class="title">若依后台管理系统</h3>
+      <el-form-item prop="tenant">
+        <el-input
+          v-model="loginForm.tenant"
+          auto-complete="off"
+          placeholder="租户"
+          size="large"
+          type="text"
+        >
+          <template #prefix>
+            <svg-icon class="el-input__icon input-icon" icon-class="user" />
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="username">
+        <el-input
+          v-model="loginForm.username"
+          auto-complete="off"
+          placeholder="账号"
+          size="large"
+          type="text"
+        >
+          <template #prefix>
+            <svg-icon class="el-input__icon input-icon" icon-class="user" />
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="loginForm.password"
+          auto-complete="off"
+          placeholder="密码"
+          size="large"
+          type="password"
+          @keyup.enter="handleLogin"
+        >
+          <template #prefix>
+            <svg-icon class="el-input__icon input-icon" icon-class="password" />
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item v-if="captchaEnabled" prop="code">
+        <el-input
+          v-model="loginForm.code"
+          auto-complete="off"
+          placeholder="验证码"
+          size="large"
+          style="width: 63%"
+          @keyup.enter="handleLogin"
+        >
+          <template #prefix>
+            <svg-icon
+              class="el-input__icon input-icon"
+              icon-class="validCode"
+            />
+          </template>
+        </el-input>
+        <div class="login-code">
+          <img :src="codeUrl" class="login-code-img" @click="getCode" />
         </div>
+      </el-form-item>
+      <el-checkbox
+        v-model="loginForm.rememberMe"
+        style="margin: 0px 0px 25px 0px"
+        >记住密码</el-checkbox
+      >
+      <el-form-item style="width: 100%">
+        <el-button
+          :loading="loading"
+          size="large"
+          style="width: 100%"
+          type="primary"
+          @click.prevent="handleLogin"
+        >
+          <span v-if="!loading">登 录</span>
+          <span v-else>登 录 中...</span>
+        </el-button>
+        <div v-if="register" style="float: right">
+          <router-link :to="'/register'" class="link-type"
+            >立即注册</router-link
+          >
+        </div>
+      </el-form-item>
+    </el-form>
+    <!--  底部  -->
+    <div class="el-login-footer">
+      <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
     </div>
+  </div>
 </template>
 
 <script setup>
-import {getCodeImg} from "@/api/login";
+import { getCodeImg } from "@/api/login";
 import Cookies from "js-cookie";
-import {decrypt, encrypt} from "@/utils/jsencrypt";
-import useUserStore from '@/store/modules/user'
+import { decrypt, encrypt } from "@/utils/jsencrypt";
+import useUserStore from "@/store/modules/user";
 
-const userStore = useUserStore()
+const userStore = useUserStore();
 const router = useRouter();
-const {proxy} = getCurrentInstance();
+const { proxy } = getCurrentInstance();
 
 const loginForm = ref({
-    tenant: "",
-    username: "admin",
-    password: "admin123",
-    rememberMe: false,
-    code: "",
-    uuid: ""
+  tenant: "",
+  username: "admin",
+  password: "admin123",
+  rememberMe: false,
+  code: "",
+  uuid: "",
 });
 
 const loginRules = {
-    tenant: [{required: true, trigger: "blur", message: "请输入租户"}],
-    username: [{required: true, trigger: "blur", message: "请输入您的账号"}],
-    password: [{required: true, trigger: "blur", message: "请输入您的密码"}],
-    code: [{required: true, trigger: "change", message: "请输入验证码"}]
+  tenant: [{ required: true, trigger: "blur", message: "请输入租户" }],
+  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
+  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
+  code: [{ required: true, trigger: "change", message: "请输入验证码" }],
 };
 
 const codeUrl = ref("");
@@ -118,62 +132,69 @@ const register = ref(false);
 const redirect = ref(undefined);
 
 function handleLogin() {
-    proxy.$refs.loginRef.validate(valid => {
-        if (valid) {
-            loading.value = true;
-            // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
-            if (loginForm.value.rememberMe) {
-                Cookies.set("tenant", loginForm.value.tenant, {expires: 30});
-                Cookies.set("username", loginForm.value.username, {expires: 30});
-                Cookies.set("password", encrypt(loginForm.value.password), {expires: 30});
-                Cookies.set("rememberMe", loginForm.value.rememberMe, {expires: 30});
-            } else {
-                // 否则移除
-                Cookies.remove("tenant");
-                Cookies.remove("username");
-                Cookies.remove("password");
-                Cookies.remove("rememberMe");
-            }
-            // 调用action的登录方法
-            userStore.login(loginForm.value).then(() => {
-                router.push({path: redirect.value || "/"});
-            }).catch(() => {
-                loading.value = false;
-                // 重新获取验证码
-                if (captchaEnabled.value) {
-                    getCode();
-                }
-            });
-        }
-    });
+  proxy.$refs.loginRef.validate((valid) => {
+    if (valid) {
+      loading.value = true;
+      // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
+      if (loginForm.value.rememberMe) {
+        Cookies.set("tenant", loginForm.value.tenant, { expires: 30 });
+        Cookies.set("username", loginForm.value.username, { expires: 30 });
+        Cookies.set("password", encrypt(loginForm.value.password), {
+          expires: 30,
+        });
+        Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
+      } else {
+        // 否则移除
+        Cookies.remove("tenant");
+        Cookies.remove("username");
+        Cookies.remove("password");
+        Cookies.remove("rememberMe");
+      }
+      // 调用action的登录方法
+      userStore
+        .login(loginForm.value)
+        .then(() => {
+          router.push({ path: redirect.value || "/" });
+        })
+        .catch(() => {
+          loading.value = false;
+          // 重新获取验证码
+          if (captchaEnabled.value) {
+            getCode();
+          }
+        });
+    }
+  });
 }
 
 function getCode() {
-    getCodeImg().then(res => {
-        captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
-        if (captchaEnabled.value) {
-            codeUrl.value = "data:image/gif;base64," + res.img;
-            loginForm.value.uuid = res.uuid;
-        }
-    });
+  getCodeImg().then((res) => {
+    captchaEnabled.value =
+      res.captchaEnabled === undefined ? true : res.captchaEnabled;
+    if (captchaEnabled.value) {
+      codeUrl.value = "data:image/gif;base64," + res.img;
+      loginForm.value.uuid = res.uuid;
+    }
+  });
 }
 
 function getCookie() {
-    const username = Cookies.get("username");
-    const password = Cookies.get("password");
-    const rememberMe = Cookies.get("rememberMe");
-    loginForm.value = {
-        username: username === undefined ? loginForm.value.username : username,
-        password: password === undefined ? loginForm.value.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
-    };
+  const username = Cookies.get("username");
+  const password = Cookies.get("password");
+  const rememberMe = Cookies.get("rememberMe");
+  loginForm.value = {
+    username: username === undefined ? loginForm.value.username : username,
+    password:
+      password === undefined ? loginForm.value.password : decrypt(password),
+    rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+  };
 }
 
 getCode();
 getCookie();
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .login {
   display: flex;
   justify-content: center;