v3.1.0 1、【新增】9种登录背景图和样式; 2、【新增】全局字体大小切换; 3、【新增】主题颜色切换; 4、【新增】移除cookie保存token，改为使用localStorage; 5、【优化】升级 ant design vue 到最新版本;

smart-admin-web/javascript-ant-design-vue3/src/views/system/login3/login.vue

@@ -0,0 +1,176 @@
+<!--
+  * 登录
+  * 
+  * @Author:    1024创新实验室-主任：卓大 
+  * @Date:      2022-09-12 22:34:00 
+  * @Wechat:    zhuda1024 
+  * @Email:     lab1024@163.com 
+  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012 
+  *
+-->
+<template>
+  <div class="login-container">
+    <div class="box-item desc">
+      <div class="welcome">
+        <p>欢迎登录 SmartAdmin V3</p>
+        <p class="sub-welcome">高质量代码的快速开发平台</p>
+      </div>
+      <img class="welcome-img" src="/@/assets/images/login/left-bg2.png" />
+    </div>
+    <div class="box-item login">
+      <img class="login-qr" :src="loginQR" />
+      <div class="login-title">账号登录</div>
+      <a-form ref="formRef" class="login-form" :model="loginForm" :rules="rules">
+        <a-form-item name="loginName">
+          <a-input v-model:value.trim="loginForm.loginName" placeholder="请输入用户名" />
+        </a-form-item>
+        <a-form-item name="password">
+          <a-input-password
+            v-model:value="loginForm.password"
+            autocomplete="on"
+            :type="showPassword ? 'text' : 'password'"
+            placeholder="请输入密码：至少三种字符，最小 8 位"
+          />
+        </a-form-item>
+        <a-form-item name="captchaCode">
+          <a-input class="captcha-input" v-model:value.trim="loginForm.captchaCode" placeholder="请输入验证码" />
+          <img class="captcha-img" :src="captchaBase64Image" @click="getCaptcha" />
+        </a-form-item>
+        <a-form-item>
+          <a-checkbox v-model:checked="rememberPwd">记住密码</a-checkbox>
+          <span> ( 账号：admin, 密码：123456)</span>
+        </a-form-item>
+        <a-form-item>
+          <div class="btn" @click="onLogin">登录</div>
+        </a-form-item>
+      </a-form>
+      <div class="more">
+        <div class="title-box">
+          <p class="line"></p>
+          <p class="title">其他方式登录</p>
+          <p class="line"></p>
+        </div>
+        <div class="login-type">
+          <img src="/@/assets/images/login/wechat-icon.png" />
+          <img src="/@/assets/images/login/ali-icon.png" />
+          <img src="/@/assets/images/login/douyin-icon.png" />
+          <img src="/@/assets/images/login/qq-icon.png" />
+          <img src="/@/assets/images/login/weibo-icon.png" />
+          <img src="/@/assets/images/login/feishu-icon.png" />
+          <img src="/@/assets/images/login/google-icon.png" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+  import { message } from 'ant-design-vue';
+  import { onMounted, onUnmounted, reactive, ref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { loginApi } from '/@/api/system/login-api';
+  import { SmartLoading } from '/@/components/framework/smart-loading';
+  import { LOGIN_DEVICE_ENUM } from '/@/constants/system/login-device-const';
+  import { useUserStore } from '/@/store/modules/system/user';
+  import loginQR from '/@/assets/images/login/login-qr.png';
+
+  import { buildRoutes } from '/@/router/index';
+  import { smartSentry } from '/@/lib/smart-sentry';
+  import { encryptData } from '/@/lib/encrypt';
+  import { localSave } from '/@/utils/local-util.js';
+  import LocalStorageKeyConst from '/@/constants/local-storage-key-const.js';
+
+  //--------------------- 登录表单 ---------------------------------
+
+  const loginForm = reactive({
+    loginName: 'admin',
+    password: '',
+    captchaCode: '',
+    captchaUuid: '',
+    loginDevice: LOGIN_DEVICE_ENUM.PC.value,
+  });
+  const rules = {
+    loginName: [{ required: true, message: '用户名不能为空' }],
+    password: [{ required: true, message: '密码不能为空' }],
+    captchaCode: [{ required: true, message: '验证码不能为空' }],
+  };
+
+  const showPassword = ref(false);
+  const router = useRouter();
+  const formRef = ref();
+  const rememberPwd = ref(false);
+
+  onMounted(() => {
+    document.onkeyup = (e) => {
+      if (e.keyCode == 13) {
+        onLogin();
+      }
+    };
+  });
+
+  onUnmounted(() => {
+    document.onkeyup = null;
+  });
+
+  //登录
+  async function onLogin() {
+    formRef.value.validate().then(async () => {
+      try {
+        SmartLoading.show();
+        // 密码加密
+        let encryptPasswordForm = Object.assign({}, loginForm, {
+          password: encryptData(loginForm.password),
+        });
+        const res = await loginApi.login(encryptPasswordForm);
+        stopRefrestCaptchaInterval();
+        localSave(LocalStorageKeyConst.USER_TOKEN, res.data.token ? res.data.token : '');
+        message.success('登录成功');
+        //更新用户信息到pinia
+        useUserStore().setUserLoginInfo(res.data);
+        //构建系统的路由
+        buildRoutes();
+        router.push('/home');
+      } catch (e) {
+        if (e.data && e.data.code !== 0) {
+          loginForm.captchaCode = '';
+          getCaptcha();
+        }
+        smartSentry.captureError(e);
+      } finally {
+        SmartLoading.hide();
+      }
+    });
+  }
+
+  //--------------------- 验证码 ---------------------------------
+
+  const captchaBase64Image = ref('');
+  async function getCaptcha() {
+    try {
+      let captchaResult = await loginApi.getCaptcha();
+      captchaBase64Image.value = captchaResult.data.captchaBase64Image;
+      loginForm.captchaUuid = captchaResult.data.captchaUuid;
+      beginRefrestCaptchaInterval(captchaResult.data.expireSeconds);
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  let refrestCaptchaInterval = null;
+  function beginRefrestCaptchaInterval(expireSeconds) {
+    if (refrestCaptchaInterval === null) {
+      refrestCaptchaInterval = setInterval(getCaptcha, (expireSeconds - 5) * 1000);
+    }
+  }
+
+  function stopRefrestCaptchaInterval() {
+    if (refrestCaptchaInterval != null) {
+      clearInterval(refrestCaptchaInterval);
+      refrestCaptchaInterval = null;
+    }
+  }
+
+  onMounted(getCaptcha);
+</script>
+<style lang="less" scoped>
+  @import './login.less';
+</style>