389 lines
9.6 KiB
Vue
389 lines
9.6 KiB
Vue
<script lang="ts" setup>
|
|
import svgLight from '@/assets/svg/light.svg';
|
|
import svgDark from '@/assets/svg/dark.svg';
|
|
import { message } from 'ant-design-vue/es';
|
|
import { reactive, onMounted, computed, toRaw } from 'vue';
|
|
import useUserStore from '@/store/modules/user';
|
|
import useAppStore from '@/store/modules/app';
|
|
import { getCaptchaImage } from '@/api/login';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import useI18n from '@/hooks/useI18n';
|
|
import useLayoutStore from '@/store/modules/layout';
|
|
import { viewTransitionTheme } from 'antdv-pro-layout';
|
|
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
|
import { parseUrlPath } from '@/plugins/file-static-url';
|
|
const { t, changeLocale, optionsLocale } = useI18n();
|
|
const layoutStore = useLayoutStore();
|
|
const appStore = useAppStore();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
let state = reactive({
|
|
/**表单属性 */
|
|
from: {
|
|
/**账号 */
|
|
username: '',
|
|
/**密码 */
|
|
password: '',
|
|
/**验证码 */
|
|
code: '',
|
|
/**验证码uuid */
|
|
uuid: '',
|
|
},
|
|
/**表单提交点击状态 */
|
|
fromClick: false,
|
|
/**验证码状态 */
|
|
captcha: {
|
|
/**验证码开关 */
|
|
enabled: false,
|
|
/**验证码图片地址 */
|
|
codeImg: '',
|
|
},
|
|
/**验证码点击状态 */
|
|
captchaClick: false,
|
|
});
|
|
|
|
/**表单验证通过 */
|
|
function fnFinish() {
|
|
state.fromClick = true;
|
|
// 发送请求
|
|
useUserStore()
|
|
.fnLogin(toRaw(state.from))
|
|
.then(res => {
|
|
if (res.code === RESULT_CODE_SUCCESS) {
|
|
message.success(t('views.login.loginSuccess'), 1);
|
|
/**登录后重定向页面 */
|
|
const redirectPath = route.query?.redirect || '/index';
|
|
router.push({ path: redirectPath as string });
|
|
} else {
|
|
message.error(`${res.msg}`, 3);
|
|
}
|
|
})
|
|
.finally(() => {
|
|
state.fromClick = false;
|
|
// 刷新验证码
|
|
if (state.captcha.enabled) {
|
|
state.from.code = '';
|
|
fnGetCaptcha();
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 获取验证码
|
|
*/
|
|
function fnGetCaptcha() {
|
|
if (state.captchaClick) return;
|
|
state.captchaClick = true;
|
|
getCaptchaImage().then(res => {
|
|
state.captchaClick = false;
|
|
if (res.code != 1) {
|
|
message.warning(`${res.msg}`, 3);
|
|
return;
|
|
}
|
|
state.captcha.enabled = Boolean(res.captchaEnabled);
|
|
if (state.captcha.enabled) {
|
|
state.captcha.codeImg = res.img;
|
|
state.from.uuid = res.uuid;
|
|
}
|
|
});
|
|
}
|
|
|
|
// 判断是否有背景地址
|
|
const calcBG = computed(() => {
|
|
const bgURL = parseUrlPath(appStore.loginBackground);
|
|
if (bgURL && bgURL !== '#') {
|
|
return {
|
|
backgroundImage: `url('${bgURL}')`,
|
|
backgroundPosition: 'center',
|
|
backgroundSize: 'cover',
|
|
};
|
|
}
|
|
return undefined;
|
|
});
|
|
|
|
/**
|
|
* 国际化翻译转换
|
|
*/
|
|
function fnLocale() {
|
|
let title = route.meta.title as string;
|
|
if (title.indexOf('router.') !== -1) {
|
|
title = t(title);
|
|
}
|
|
appStore.setTitle(title);
|
|
}
|
|
|
|
/**改变主题色 */
|
|
function fnClickTheme(e: any) {
|
|
viewTransitionTheme(isDarkMode => {
|
|
layoutStore.changeConf('theme', isDarkMode ? 'light' : 'dark');
|
|
}, e);
|
|
}
|
|
|
|
onMounted(() => {
|
|
fnLocale();
|
|
fnGetCaptcha();
|
|
});
|
|
|
|
/**改变多语言 */
|
|
function fnChangeLocale(e: any) {
|
|
changeLocale(e.key);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container" :style="calcBG">
|
|
<section v-show="!calcBG">
|
|
<div class="animation animation1"></div>
|
|
<div class="animation animation2"></div>
|
|
<div class="animation animation3"></div>
|
|
<div class="animation animation4"></div>
|
|
<div class="animation animation5"></div>
|
|
</section>
|
|
|
|
<a-card :bordered="false" class="login-card">
|
|
<div class="title">
|
|
{{ t('common.title') }}
|
|
</div>
|
|
<a-form :model="state.from" name="stateFrom" @finish="fnFinish">
|
|
<a-form-item
|
|
name="username"
|
|
:rules="[
|
|
{
|
|
required: true,
|
|
min: 2,
|
|
max: 30,
|
|
message: t('valid.userNamePlease'),
|
|
},
|
|
]"
|
|
>
|
|
<a-input
|
|
v-model:value="state.from.username"
|
|
size="large"
|
|
:placeholder="t('valid.userNameHit')"
|
|
:maxlength="30"
|
|
>
|
|
<template #prefix>
|
|
<UserOutlined class="prefix-icon" />
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
|
|
<a-form-item
|
|
name="password"
|
|
:rules="[
|
|
{
|
|
required: true,
|
|
min: 6,
|
|
max: 26,
|
|
message: t('valid.passwordPlease'),
|
|
},
|
|
]"
|
|
>
|
|
<a-input-password
|
|
v-model:value="state.from.password"
|
|
size="large"
|
|
:placeholder="t('valid.passwordHit')"
|
|
:maxlength="26"
|
|
>
|
|
<template #prefix>
|
|
<LockOutlined class="prefix-icon" />
|
|
</template>
|
|
</a-input-password>
|
|
</a-form-item>
|
|
|
|
<a-row v-if="state.captcha.enabled">
|
|
<a-col :span="16">
|
|
<a-form-item
|
|
name="code"
|
|
:rules="[
|
|
{
|
|
required: true,
|
|
min: 1,
|
|
message: t('valid.codePlease'),
|
|
},
|
|
]"
|
|
>
|
|
<a-input
|
|
v-model:value="state.from.code"
|
|
size="large"
|
|
:placeholder="t('valid.codeHit')"
|
|
:maxlength="6"
|
|
>
|
|
<template #prefix>
|
|
<RobotOutlined class="prefix-icon" />
|
|
</template>
|
|
</a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="8">
|
|
<a-image
|
|
:alt="t('valid.codeHit')"
|
|
style="cursor: pointer; border-radius: 2px"
|
|
width="100px"
|
|
height="40px"
|
|
:preview="false"
|
|
:src="state.captcha.codeImg"
|
|
@click="fnGetCaptcha"
|
|
/>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-row
|
|
justify="space-between"
|
|
align="middle"
|
|
style="margin-bottom: 16px"
|
|
>
|
|
<a-col :span="12" v-if="appStore.registerUser">
|
|
<a-button
|
|
type="link"
|
|
target="_self"
|
|
:title="t('views.login.registerBtn')"
|
|
@click="() => router.push({ name: 'Register' })"
|
|
>
|
|
{{ t('views.login.registerBtn') }}
|
|
</a-button>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<a-button
|
|
block
|
|
type="primary"
|
|
size="large"
|
|
html-type="submit"
|
|
:loading="state.fromClick"
|
|
>
|
|
{{ t('views.login.loginBtn') }}
|
|
</a-button>
|
|
|
|
<a-row justify="end" align="middle" style="margin-top: 18px">
|
|
<a-col :span="3">
|
|
<a-tooltip placement="bottomRight">
|
|
<template #title>{{ t('loayouts.rightContent.theme') }}</template>
|
|
<a-button type="text" @click="fnClickTheme">
|
|
<template #icon>
|
|
<img
|
|
v-if="layoutStore.proConfig.theme === 'dark'"
|
|
:src="svgDark"
|
|
class="theme-icon"
|
|
/>
|
|
<img v-else :src="svgLight" class="theme-icon" />
|
|
</template>
|
|
</a-button>
|
|
</a-tooltip>
|
|
</a-col>
|
|
<a-col :span="3" v-if="appStore.i18nOpen">
|
|
<a-dropdown trigger="click" placement="bottomRight">
|
|
<a-button type="text">
|
|
<template #icon> <TranslationOutlined /> </template>
|
|
</a-button>
|
|
<template #overlay>
|
|
<a-menu @click="fnChangeLocale">
|
|
<a-menu-item v-for="opt in optionsLocale" :key="opt.value">
|
|
{{ opt.label }}
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</a-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="less" scoped>
|
|
.container {
|
|
position: relative;
|
|
width: 100%;
|
|
min-height: 100%;
|
|
padding-top: 164px;
|
|
|
|
// background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
|
|
|
|
background-image: url(@/assets/background_light.jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
|
|
.animation {
|
|
position: absolute;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background-color: #1be1f6;
|
|
|
|
&.animation1 {
|
|
left: 15%;
|
|
top: 70%;
|
|
animation: slashStar 2s ease-in-out 0.3s infinite;
|
|
}
|
|
&.animation2 {
|
|
left: 34%;
|
|
top: 35%;
|
|
animation: slashStar 2s ease-in-out 1.2s infinite;
|
|
}
|
|
&.animation3 {
|
|
left: 10%;
|
|
top: 8%;
|
|
animation: slashStar 2s ease-in-out 0.5s infinite;
|
|
}
|
|
&.animation4 {
|
|
left: 68%;
|
|
top: 68%;
|
|
animation: slashStar 2s ease-in-out 0.8s infinite;
|
|
}
|
|
&.animation5 {
|
|
left: 87%;
|
|
top: 30%;
|
|
animation: slashStar 2s ease-in-out 1.5s infinite;
|
|
}
|
|
}
|
|
@keyframes slashStar {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-theme='dark'] .container {
|
|
background-image: url(@/assets/background_dark.jpg);
|
|
background-color: #141414;
|
|
}
|
|
|
|
.login-card {
|
|
width: 368px;
|
|
min-width: 260px;
|
|
margin: 0 auto;
|
|
margin-left: 60%;
|
|
border-radius: 6px;
|
|
|
|
& .title {
|
|
text-align: left;
|
|
margin-bottom: 18px;
|
|
color: #141414;
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
}
|
|
& .prefix-icon {
|
|
color: #8c8c8c;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
[data-theme='dark'] .login-card {
|
|
& .title {
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
.login-card {
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
</style>
|