v3.0.0

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

@@ -12,12 +12,14 @@
   <div class="login-container">
     <div class="box-item desc">
       <div class="welcome">
-        <p>欢迎登录 SmartAdmin V2</p>
+        <p>欢迎登录 SmartAdmin V3</p>
         <p class="desc">
           SmartAdmin 是由 河南·洛阳
-          <a target="_blank" href="https://www.1024lab.net"
-            style="color: white; weight: bolder; font-size: 15px; text-decoration: underline">1024创新实验室（1024Lab）</a>
-          使用SpringBoot2.x 和 Vue3.2 Setup语法糖、 Composition Api (同时支持JavaScript和TypeScript双版本) ，开发出的一套简洁、易用的中后台解决方案！
+          <a target="_blank" href="https://www.1024lab.net" style="color: white; weight: bolder; font-size: 15px; text-decoration: underline"
+            >1024创新实验室（1024Lab）</a
+          >
+          基于SpringBoot + Sa-Token + Mybatis-Plus 和 Vue3 + Vite5 + Ant Design Vue 4 (同时支持JavaScript和TypeScript双版本)
+          以「高质量代码」为核心，「简洁、高效、安全」的快速开发平台。
           <br />
           <br />
           <span class="setence">
@@ -28,9 +30,8 @@
             保持谦逊，保持学习，热爱代码，更热爱生活 !<br />
             永远年轻，永远前行 !<br />
             <span class="author">
-              <a target="_blank" href="https://zhuoda.vip"
-                style="color: white;  font-size: 13px; text-decoration: underline">
-                1024创新实验室-主任：卓大 
+              <a target="_blank" href="https://zhuoda.vip" style="color: white; font-size: 13px; text-decoration: underline">
+                1024创新实验室-主任：卓大
               </a>
             </span>
           </span>
@@ -42,8 +43,12 @@
           <span class="qr-desc"> 加微信，骚扰卓大 :) </span>
         </div>
         <div class="app-qr">
-          <img :src="xiaozhen" />
-          <div class="qr-desc-marquee"><div class="marquee"><span>关注：小镇程序员，了解二三线城市程序员的代码与“钱途”，技术与生活，城市可能无法选择，但未来可以拼搏。</span></div></div>
+          <img :src="gzh" />
+          <div class="qr-desc-marquee">
+            <div class="marquee">
+              <span>关注：六边形工程师，分享：赚钱、代码、生活</span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -55,8 +60,12 @@
           <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="请输入密码" />
+          <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="请输入验证码" />
@@ -84,117 +93,124 @@
         </div>
       </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/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 { saveTokenToCookie } from '/@/utils/cookie-util';
+  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 { saveTokenToCookie } from '/@/utils/cookie-util';
 
-import gongzhonghao from '/@/assets/images/1024lab/1024lab-gzh.jpg';
-import zhuoda from '/@/assets/images/1024lab/zhuoda-wechat.jpg';
-import loginQR from '/@/assets/images/login/login-qr.png';
-import xiaozhen from '/@/assets/images/1024lab/xiaozhen-gzh.jpg';
+  import gongzhonghao from '/@/assets/images/1024lab/1024lab-gzh.jpg';
+  import zhuoda from '/@/assets/images/1024lab/zhuoda-wechat.jpg';
+  import loginQR from '/@/assets/images/login/login-qr.png';
+  import gzh from '/@/assets/images/1024lab/gzh.jpg';
 
-import aliLogin from '/@/assets/images/login/ali-icon.png';
-import googleLogin from '/@/assets/images/login/google-icon.png';
-import qqLogin from '/@/assets/images/login/qq-icon.png';
-import weiboLogin from '/@/assets/images/login/weibo-icon.png';
+  import aliLogin from '/@/assets/images/login/ali-icon.png';
+  import googleLogin from '/@/assets/images/login/google-icon.png';
+  import qqLogin from '/@/assets/images/login/qq-icon.png';
+  import weiboLogin from '/@/assets/images/login/weibo-icon.png';
 
-import { buildRoutes } from '/@/router/index';
-import { smartSentry } from '/@/lib/smart-sentry';
+  import { buildRoutes } from '/@/router/index';
+  import { smartSentry } from '/@/lib/smart-sentry';
+  import { encryptData } from '/@/lib/encrypt';
 
-//--------------------- 登录表单 ---------------------------------
+  //--------------------- 登录表单 ---------------------------------
 
-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();
-      const res = await loginApi.login(loginForm);
-      stopRefrestCaptchaInterval();
-      saveTokenToCookie(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 === 30001) {
-        loginForm.captchaCode = '';
-        getCaptcha();
-      }
-      smartSentry.captureError(e);
-    } finally {
-      SmartLoading.hide();
-    }
+  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);
 
-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);
+  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();
+        saveTokenToCookie(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();
+      }
+    });
   }
-}
 
-let refrestCaptchaInterval = null;
-function beginRefrestCaptchaInterval(expireSeconds) {
-  if (refrestCaptchaInterval === null) {
-    refrestCaptchaInterval = setInterval(getCaptcha, (expireSeconds - 5) * 1000);
+  //--------------------- 验证码 ---------------------------------
+
+  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);
+    }
   }
-}
 
-function stopRefrestCaptchaInterval() {
-  if (refrestCaptchaInterval != null) {
-    clearInterval(refrestCaptchaInterval);
-    refrestCaptchaInterval = null;
+  let refrestCaptchaInterval = null;
+  function beginRefrestCaptchaInterval(expireSeconds) {
+    if (refrestCaptchaInterval === null) {
+      refrestCaptchaInterval = setInterval(getCaptcha, (expireSeconds - 5) * 1000);
+    }
   }
-}
 
-onMounted(getCaptcha);
+  function stopRefrestCaptchaInterval() {
+    if (refrestCaptchaInterval != null) {
+      clearInterval(refrestCaptchaInterval);
+      refrestCaptchaInterval = null;
+    }
+  }
+
+  onMounted(getCaptcha);
 </script>
-<style lang="less" scoped>@import './login.less';</style>
+<style lang="less" scoped>
+  @import './login.less';
+</style>