替换成youchain
parent
6bd3ddb555
commit
25a98632d1
|
|
@ -1,201 +0,0 @@
|
||||||
.login-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: url(/@/assets/images/login/login-bg.png) no-repeat center;
|
|
||||||
background-size: cover;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
.box-item {
|
|
||||||
width: 444px;
|
|
||||||
height: 600px;
|
|
||||||
&.desc {
|
|
||||||
background: #ffffff;
|
|
||||||
border-radius: 12px 0px 0px 12px;
|
|
||||||
box-shadow: 0px 16px 73px 8px rgba(203, 203, 203, 0.2);
|
|
||||||
padding: 23px 25px;
|
|
||||||
}
|
|
||||||
&.login {
|
|
||||||
background: #ffffff;
|
|
||||||
border-radius: 0px 12px 12px 0px;
|
|
||||||
padding: 34px 42px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.login-qr {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 66px;
|
|
||||||
height: 66px;
|
|
||||||
}
|
|
||||||
.welcome {
|
|
||||||
background: url(/@/assets/images/login/left-bg1.png) no-repeat center;
|
|
||||||
background-size: cover;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0px 6px 20px 0px rgba(33,47,117,0.10);
|
|
||||||
padding-top: 35px;
|
|
||||||
p{
|
|
||||||
color: #333333;
|
|
||||||
line-height: 25px;
|
|
||||||
letter-spacing: 0.26px;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
|
||||||
.sub-welcome{
|
|
||||||
color: #333333;
|
|
||||||
line-height: 25px;
|
|
||||||
letter-spacing: 0.26px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.app-qr-box {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
margin-top: 20px;
|
|
||||||
.app-qr {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 50%;
|
|
||||||
> img {
|
|
||||||
width: 112px;
|
|
||||||
height: 112px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qr-desc {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 11px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
text-align: center;
|
|
||||||
color: #ffffff;
|
|
||||||
> img {
|
|
||||||
width: 15px;
|
|
||||||
height: 18px;
|
|
||||||
margin-right: 9px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.qr-desc-marquee {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 11px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
text-align: center;
|
|
||||||
color: #ffffff;
|
|
||||||
|
|
||||||
@keyframes marquee {
|
|
||||||
0% {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(-30%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.marquee {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
span {
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
white-space: nowrap;
|
|
||||||
animation: marquee 5s linear infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.login-title {
|
|
||||||
font-size: 20px;
|
|
||||||
text-align: center;
|
|
||||||
color: #1e1e1e;
|
|
||||||
margin-bottom: 35px;
|
|
||||||
}
|
|
||||||
.login-form {
|
|
||||||
.captcha-input {
|
|
||||||
width: 60%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.captcha-img {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-input,
|
|
||||||
.ant-input-affix-wrapper {
|
|
||||||
height: 44px;
|
|
||||||
border: 1px solid #ededed;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.code-btn{
|
|
||||||
height: 44px;
|
|
||||||
padding: 4px 5px;
|
|
||||||
width: 108px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.eye-box {
|
|
||||||
position: absolute;
|
|
||||||
right: 15px;
|
|
||||||
top: 10px;
|
|
||||||
.eye-icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.btn {
|
|
||||||
width: 350px;
|
|
||||||
height: 50px;
|
|
||||||
background: #1748FD;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 700;
|
|
||||||
text-align: center;
|
|
||||||
color: #ffffff;
|
|
||||||
line-height: 50px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.more {
|
|
||||||
margin-top: 30px;
|
|
||||||
.title-box {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
> p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.line {
|
|
||||||
width: 114px;
|
|
||||||
height: 1px;
|
|
||||||
background: #e6e6e6;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #a1aebe;
|
|
||||||
margin: 0 19px;
|
|
||||||
}
|
|
||||||
.login-type {
|
|
||||||
padding: 0 5px;
|
|
||||||
margin-top: 25px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
> img {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,246 +0,0 @@
|
||||||
<!--
|
|
||||||
* 登录
|
|
||||||
*
|
|
||||||
* @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>
|
|
||||||
</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="emailCode" v-if="emailCodeShowFlag">
|
|
||||||
<a-input-group compact>
|
|
||||||
<a-input style="width: calc(100% - 110px)" v-model:value="loginForm.emailCode" autocomplete="on" placeholder="请输入邮箱验证码" />
|
|
||||||
<a-button @click="sendSmsCode" class="code-btn" type="primary" :disabled="emailCodeButtonDisabled">
|
|
||||||
{{ emailCodeTips }}
|
|
||||||
</a-button>
|
|
||||||
</a-input-group>
|
|
||||||
</a-form-item>
|
|
||||||
<a-form-item name="password">
|
|
||||||
<a-input-password
|
|
||||||
v-model:value="loginForm.password"
|
|
||||||
autocomplete="on"
|
|
||||||
:type="showPassword ? 'text' : 'password'"
|
|
||||||
placeholder="请输入密码"
|
|
||||||
/>
|
|
||||||
</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="wechatIcon" />
|
|
||||||
<img :src="aliIcon" />
|
|
||||||
<img :src="douyinIcon" />
|
|
||||||
<img :src="qqIcon" />
|
|
||||||
<img :src="weiboIcon" />
|
|
||||||
<img :src="feishuIcon" />
|
|
||||||
<img :src="googleIcon" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
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 wechatIcon from '/@/assets/images/login/wechat-icon.png';
|
|
||||||
import aliIcon from '/@/assets/images/login/ali-icon.png';
|
|
||||||
import douyinIcon from '/@/assets/images/login/douyin-icon.png';
|
|
||||||
import qqIcon from '/@/assets/images/login/qq-icon.png';
|
|
||||||
import weiboIcon from '/@/assets/images/login/weibo-icon.png';
|
|
||||||
import feishuIcon from '/@/assets/images/login/feishu-icon.png';
|
|
||||||
import googleIcon from '/@/assets/images/login/google-icon.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';
|
|
||||||
import { useDictStore } from '/@/store/modules/system/dict.js';
|
|
||||||
import { dictApi } from '/@/api/support/dict-api.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);
|
|
||||||
stopRefreshCaptchaInterval();
|
|
||||||
localSave(LocalStorageKeyConst.USER_TOKEN, res.data.token ? res.data.token : '');
|
|
||||||
message.success('登录成功');
|
|
||||||
//更新用户信息到pinia
|
|
||||||
useUserStore().setUserLoginInfo(res.data);
|
|
||||||
// 初始化数据字典
|
|
||||||
const dictRes = await dictApi.getAllDictData();
|
|
||||||
useDictStore().initData(dictRes.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;
|
|
||||||
beginRefreshCaptchaInterval(captchaResult.data.expireSeconds);
|
|
||||||
} catch (e) {
|
|
||||||
console.log(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let refreshCaptchaInterval = null;
|
|
||||||
function beginRefreshCaptchaInterval(expireSeconds) {
|
|
||||||
if (refreshCaptchaInterval === null) {
|
|
||||||
refreshCaptchaInterval = setInterval(getCaptcha, (expireSeconds - 5) * 1000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function stopRefreshCaptchaInterval() {
|
|
||||||
if (refreshCaptchaInterval != null) {
|
|
||||||
clearInterval(refreshCaptchaInterval);
|
|
||||||
refreshCaptchaInterval = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getCaptcha();
|
|
||||||
getTwoFactorLoginFlag();
|
|
||||||
});
|
|
||||||
|
|
||||||
//--------------------- 邮箱验证码 ---------------------------------
|
|
||||||
|
|
||||||
const emailCodeShowFlag = ref(false);
|
|
||||||
let emailCodeTips = ref('获取邮箱验证码');
|
|
||||||
let emailCodeButtonDisabled = ref(false);
|
|
||||||
// 定时器
|
|
||||||
let countDownTimer = null;
|
|
||||||
// 开始倒计时
|
|
||||||
function runCountDown() {
|
|
||||||
emailCodeButtonDisabled.value = true;
|
|
||||||
let countDown = 60;
|
|
||||||
emailCodeTips.value = `${countDown}秒后重新获取`;
|
|
||||||
countDownTimer = setInterval(() => {
|
|
||||||
if (countDown > 1) {
|
|
||||||
countDown--;
|
|
||||||
emailCodeTips.value = `${countDown}秒后重新获取`;
|
|
||||||
} else {
|
|
||||||
clearInterval(countDownTimer);
|
|
||||||
emailCodeButtonDisabled.value = false;
|
|
||||||
emailCodeTips.value = '获取验证码';
|
|
||||||
}
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取双因子登录标识
|
|
||||||
async function getTwoFactorLoginFlag() {
|
|
||||||
try {
|
|
||||||
let result = await loginApi.getTwoFactorLoginFlag();
|
|
||||||
emailCodeShowFlag.value = result.data;
|
|
||||||
} catch (e) {
|
|
||||||
smartSentry.captureError(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 发送邮箱验证码
|
|
||||||
async function sendSmsCode() {
|
|
||||||
try {
|
|
||||||
SmartLoading.show();
|
|
||||||
let result = await loginApi.sendLoginEmailCode(loginForm.loginName);
|
|
||||||
message.success('验证码发送成功!请登录邮箱查看验证码~');
|
|
||||||
runCountDown();
|
|
||||||
} catch (e) {
|
|
||||||
smartSentry.captureError(e);
|
|
||||||
} finally {
|
|
||||||
SmartLoading.hide();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
@import './login.less';
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,208 +0,0 @@
|
||||||
.login-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: url(/@/assets/images/login/login-bg.png) no-repeat center;
|
|
||||||
background-size: cover;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
.box-item {
|
|
||||||
width: 460px;
|
|
||||||
height: 600px;
|
|
||||||
&.desc {
|
|
||||||
background: #ffffff;
|
|
||||||
border-radius: 12px 0px 0px 12px;
|
|
||||||
box-shadow: 0px 16px 73px 8px rgba(203, 203, 203, 0.2);
|
|
||||||
padding: 23px 25px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
&.login {
|
|
||||||
background: #ffffff;
|
|
||||||
border-radius: 0px 12px 12px 0px;
|
|
||||||
padding: 34px 42px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
.login-qr {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 66px;
|
|
||||||
height: 66px;
|
|
||||||
}
|
|
||||||
.welcome {
|
|
||||||
padding-top: 35px;
|
|
||||||
p{
|
|
||||||
color: #333333;
|
|
||||||
line-height: 25px;
|
|
||||||
letter-spacing: 0.26px;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
|
||||||
.sub-welcome{
|
|
||||||
padding: 10px;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 700;
|
|
||||||
text-align: center;
|
|
||||||
color: #ffffff;
|
|
||||||
line-height: 25px;
|
|
||||||
letter-spacing: 0.26px;
|
|
||||||
opacity: 0.96;
|
|
||||||
background: #1748fd;
|
|
||||||
border-radius: 22px 22px 2px 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.welcome-img{
|
|
||||||
width: 350px;
|
|
||||||
height: 350px;
|
|
||||||
}
|
|
||||||
.app-qr-box {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
margin-top: 20px;
|
|
||||||
.app-qr {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 50%;
|
|
||||||
> img {
|
|
||||||
width: 112px;
|
|
||||||
height: 112px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.qr-desc {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 11px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
text-align: center;
|
|
||||||
color: #ffffff;
|
|
||||||
> img {
|
|
||||||
width: 15px;
|
|
||||||
height: 18px;
|
|
||||||
margin-right: 9px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.qr-desc-marquee {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 11px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
text-align: center;
|
|
||||||
color: #ffffff;
|
|
||||||
|
|
||||||
@keyframes marquee {
|
|
||||||
0% {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateX(-30%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.marquee {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
span {
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
white-space: nowrap;
|
|
||||||
animation: marquee 5s linear infinite;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.login-title {
|
|
||||||
font-size: 20px;
|
|
||||||
text-align: center;
|
|
||||||
color: #1e1e1e;
|
|
||||||
margin-bottom: 35px;
|
|
||||||
}
|
|
||||||
.login-form {
|
|
||||||
.captcha-input {
|
|
||||||
width: 60%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.captcha-img {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-input,
|
|
||||||
.ant-input-affix-wrapper {
|
|
||||||
height: 44px;
|
|
||||||
border: 1px solid #ededed;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.code-btn{
|
|
||||||
height: 44px;
|
|
||||||
padding: 4px 5px;
|
|
||||||
width: 108px;
|
|
||||||
}
|
|
||||||
.eye-box {
|
|
||||||
position: absolute;
|
|
||||||
right: 15px;
|
|
||||||
top: 10px;
|
|
||||||
.eye-icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.btn {
|
|
||||||
width: 350px;
|
|
||||||
height: 50px;
|
|
||||||
background: #1748FD;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 700;
|
|
||||||
text-align: center;
|
|
||||||
color: #ffffff;
|
|
||||||
line-height: 50px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.more {
|
|
||||||
margin-top: 30px;
|
|
||||||
.title-box {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
> p {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.line {
|
|
||||||
width: 114px;
|
|
||||||
height: 1px;
|
|
||||||
background: #e6e6e6;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #a1aebe;
|
|
||||||
margin: 0 19px;
|
|
||||||
}
|
|
||||||
.login-type {
|
|
||||||
padding: 0 5px;
|
|
||||||
margin-top: 25px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
> img {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,249 +0,0 @@
|
||||||
<!--
|
|
||||||
* 登录
|
|
||||||
*
|
|
||||||
* @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="loginGif" />
|
|
||||||
</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="emailCode" v-if="emailCodeShowFlag">
|
|
||||||
<a-input-group compact>
|
|
||||||
<a-input style="width: calc(100% - 110px)" v-model:value="loginForm.emailCode" autocomplete="on" placeholder="请输入邮箱验证码" />
|
|
||||||
<a-button @click="sendSmsCode" class="code-btn" type="primary" :disabled="emailCodeButtonDisabled">
|
|
||||||
{{ emailCodeTips }}
|
|
||||||
</a-button>
|
|
||||||
</a-input-group>
|
|
||||||
</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="wechatIcon" />
|
|
||||||
<img :src="aliIcon" />
|
|
||||||
<img :src="douyinIcon" />
|
|
||||||
<img :src="qqIcon" />
|
|
||||||
<img :src="weiboIcon" />
|
|
||||||
<img :src="feishuIcon" />
|
|
||||||
<img :src="googleIcon" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
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 leftBg2 from '/@/assets/images/login/left-bg2.png';
|
|
||||||
import loginGif from '/@/assets/images/login/login.gif';
|
|
||||||
import wechatIcon from '/@/assets/images/login/wechat-icon.png';
|
|
||||||
import aliIcon from '/@/assets/images/login/ali-icon.png';
|
|
||||||
import douyinIcon from '/@/assets/images/login/douyin-icon.png';
|
|
||||||
import qqIcon from '/@/assets/images/login/qq-icon.png';
|
|
||||||
import weiboIcon from '/@/assets/images/login/weibo-icon.png';
|
|
||||||
import feishuIcon from '/@/assets/images/login/feishu-icon.png';
|
|
||||||
import googleIcon from '/@/assets/images/login/google-icon.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';
|
|
||||||
import { useDictStore } from '/@/store/modules/system/dict.js';
|
|
||||||
import { dictApi } from '/@/api/support/dict-api.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);
|
|
||||||
stopRefreshCaptchaInterval();
|
|
||||||
localSave(LocalStorageKeyConst.USER_TOKEN, res.data.token ? res.data.token : '');
|
|
||||||
message.success('登录成功');
|
|
||||||
//更新用户信息到pinia
|
|
||||||
useUserStore().setUserLoginInfo(res.data);
|
|
||||||
// 初始化数据字典
|
|
||||||
const dictRes = await dictApi.getAllDictData();
|
|
||||||
useDictStore().initData(dictRes.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;
|
|
||||||
beginRefreshCaptchaInterval(captchaResult.data.expireSeconds);
|
|
||||||
} catch (e) {
|
|
||||||
console.log(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let refreshCaptchaInterval = null;
|
|
||||||
function beginRefreshCaptchaInterval(expireSeconds) {
|
|
||||||
if (refreshCaptchaInterval === null) {
|
|
||||||
refreshCaptchaInterval = setInterval(getCaptcha, (expireSeconds - 5) * 1000);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function stopRefreshCaptchaInterval() {
|
|
||||||
if (refreshCaptchaInterval != null) {
|
|
||||||
clearInterval(refreshCaptchaInterval);
|
|
||||||
refreshCaptchaInterval = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getCaptcha();
|
|
||||||
getTwoFactorLoginFlag();
|
|
||||||
});
|
|
||||||
|
|
||||||
//--------------------- 邮箱验证码 ---------------------------------
|
|
||||||
|
|
||||||
const emailCodeShowFlag = ref(false);
|
|
||||||
let emailCodeTips = ref('获取邮箱验证码');
|
|
||||||
let emailCodeButtonDisabled = ref(false);
|
|
||||||
// 定时器
|
|
||||||
let countDownTimer = null;
|
|
||||||
// 开始倒计时
|
|
||||||
function runCountDown() {
|
|
||||||
emailCodeButtonDisabled.value = true;
|
|
||||||
let countDown = 60;
|
|
||||||
emailCodeTips.value = `${countDown}秒后重新获取`;
|
|
||||||
countDownTimer = setInterval(() => {
|
|
||||||
if (countDown > 1) {
|
|
||||||
countDown--;
|
|
||||||
emailCodeTips.value = `${countDown}秒后重新获取`;
|
|
||||||
} else {
|
|
||||||
clearInterval(countDownTimer);
|
|
||||||
emailCodeButtonDisabled.value = false;
|
|
||||||
emailCodeTips.value = '获取验证码';
|
|
||||||
}
|
|
||||||
}, 1000);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取双因子登录标识
|
|
||||||
async function getTwoFactorLoginFlag() {
|
|
||||||
try {
|
|
||||||
let result = await loginApi.getTwoFactorLoginFlag();
|
|
||||||
emailCodeShowFlag.value = result.data;
|
|
||||||
} catch (e) {
|
|
||||||
smartSentry.captureError(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 发送邮箱验证码
|
|
||||||
async function sendSmsCode() {
|
|
||||||
try {
|
|
||||||
SmartLoading.show();
|
|
||||||
let result = await loginApi.sendLoginEmailCode(loginForm.loginName);
|
|
||||||
message.success('验证码发送成功!请登录邮箱查看验证码~');
|
|
||||||
runCountDown();
|
|
||||||
} catch (e) {
|
|
||||||
smartSentry.captureError(e);
|
|
||||||
} finally {
|
|
||||||
SmartLoading.hide();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="less" scoped>
|
|
||||||
@import './login.less';
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in New Issue