mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-27 09:34:19 +08:00
refactor: refactor login page
This commit is contained in:
vben
@@ -1,228 +1,179 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<div class="opacity-0 login-mask lg:opacity-100"></div>
|
||||
<div class="justify-center login-form-wrap lg:justify-end">
|
||||
<div class="mx-6 login-form">
|
||||
<AppLocalePicker v-if="showLocale" class="login-form__locale" />
|
||||
<div class="px-2 py-10 login-form__content">
|
||||
<header>
|
||||
<img :src="logo" class="mr-4" />
|
||||
<h1>{{ title }}</h1>
|
||||
</header>
|
||||
<div :class="prefixCls" class="relative w-full h-full px-4">
|
||||
<AppLocalePicker
|
||||
class="absolute top-4 right-4 enter-x text-white xl:text-gray-600"
|
||||
:showText="false"
|
||||
/>
|
||||
|
||||
<a-form class="login-form__main" :model="formData" :rules="formRules" ref="formRef">
|
||||
<a-form-item name="account">
|
||||
<a-input size="large" v-model:value="formData.account" placeholder="username: vben" />
|
||||
</a-form-item>
|
||||
<a-form-item name="password">
|
||||
<a-input-password
|
||||
size="large"
|
||||
visibilityToggle
|
||||
v-model:value="formData.password"
|
||||
placeholder="password: 123456"
|
||||
/>
|
||||
</a-form-item>
|
||||
<span class="-enter-x xl:hidden">
|
||||
<AppLogo :alwaysShowTitle="true" />
|
||||
</span>
|
||||
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item>
|
||||
<!-- No logic, you need to deal with it yourself -->
|
||||
<a-checkbox v-model:checked="autoLogin" size="small">{{
|
||||
t('sys.login.autoLogin')
|
||||
}}</a-checkbox>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item :style="{ 'text-align': 'right' }">
|
||||
<!-- No logic, you need to deal with it yourself -->
|
||||
<a-button type="link" size="small">
|
||||
{{ t('sys.login.forgetPassword') }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="large"
|
||||
class="rounded-sm"
|
||||
:block="true"
|
||||
@click="login"
|
||||
:loading="formState.loading"
|
||||
>
|
||||
{{ t('sys.login.loginButton') }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div class="container relative h-full py-2 mx-auto sm:px-10">
|
||||
<div class="flex h-full">
|
||||
<div class="hidden xl:flex xl:flex-col xl:w-6/12 min-h-full mr-4 pl-4">
|
||||
<AppLogo class="-enter-x" />
|
||||
<div class="my-auto">
|
||||
<img
|
||||
:alt="title"
|
||||
src="../../../assets/svg/login-box-bg.svg"
|
||||
class="w-1/2 -mt-16 -enter-x"
|
||||
/>
|
||||
<div class="mt-10 font-medium text-white -enter-x">
|
||||
<span class="mt-4 text-3xl inline-block"> {{ t('sys.login.signInTitle') }}</span>
|
||||
</div>
|
||||
<div class="mt-5 text-md text-white font-normal dark:text-gray-500 -enter-x">
|
||||
{{ t('sys.login.signInDesc') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-full xl:h-auto flex py-5 xl:py-0 xl:my-0 w-full xl:w-6/12">
|
||||
<div
|
||||
class="my-auto mx-auto xl:ml-20 bg-white xl:bg-transparent px-5 py-8 sm:px-8 xl:p-0 rounded-md shadow-md xl:shadow-none w-full sm:w-3/4 lg:w-2/4 xl:w-auto enter-x relative"
|
||||
>
|
||||
<h2 class="font-bold text-2xl xl:text-3xl enter-x text-center xl:text-left mb-6">
|
||||
{{ getFormTitle }}
|
||||
</h2>
|
||||
<LoginForm v-show="getShowLogin" />
|
||||
<ForgetPasswordForm v-if="getShowResetPassword" />
|
||||
<RegisterForm v-if="getShowRegister" />
|
||||
<MobileForm v-if="getShowMobile" />
|
||||
<QrCodeForm v-if="getShowQrCode" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, ref, unref, toRaw } from 'vue';
|
||||
import { Checkbox, Form, Input, Row, Col } from 'ant-design-vue';
|
||||
import { defineComponent, computed } from 'vue';
|
||||
|
||||
import { Button } from '/@/components/Button';
|
||||
import { AppLogo } from '/@/components/Application';
|
||||
import { AppLocalePicker } from '/@/components/Application';
|
||||
import LoginForm from './LoginForm.vue';
|
||||
import ForgetPasswordForm from './ForgetPasswordForm.vue';
|
||||
import RegisterForm from './RegisterForm.vue';
|
||||
import MobileForm from './MobileForm.vue';
|
||||
import QrCodeForm from './QrCodeForm.vue';
|
||||
|
||||
import { userStore } from '/@/store/modules/user';
|
||||
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useGlobSetting, useProjectSetting } from '/@/hooks/setting';
|
||||
import logo from '/@/assets/images/logo.png';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { useShowLoginForm, useFormTitle } from './useLogin';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Login',
|
||||
components: {
|
||||
[Checkbox.name]: Checkbox,
|
||||
[Form.name]: Form,
|
||||
[Form.Item.name]: Form.Item,
|
||||
[Input.name]: Input,
|
||||
[Input.Password.name]: Input.Password,
|
||||
AButton: Button,
|
||||
AppLogo,
|
||||
LoginForm,
|
||||
ForgetPasswordForm,
|
||||
RegisterForm,
|
||||
MobileForm,
|
||||
QrCodeForm,
|
||||
AppLocalePicker,
|
||||
[Row.name]: Row,
|
||||
[Col.name]: Col,
|
||||
},
|
||||
setup() {
|
||||
const formRef = ref<any>(null);
|
||||
const autoLoginRef = ref(false);
|
||||
|
||||
const globSetting = useGlobSetting();
|
||||
const { getFormTitle } = useFormTitle();
|
||||
const { prefixCls } = useDesign('login');
|
||||
const { locale } = useProjectSetting();
|
||||
const { notification } = useMessage();
|
||||
const { t } = useI18n();
|
||||
|
||||
const formData = reactive({
|
||||
account: 'vben',
|
||||
password: '123456',
|
||||
});
|
||||
|
||||
const formState = reactive({
|
||||
loading: false,
|
||||
});
|
||||
|
||||
const formRules = reactive({
|
||||
account: [{ required: true, message: t('sys.login.accountPlaceholder'), trigger: 'blur' }],
|
||||
password: [
|
||||
{ required: true, message: t('sys.login.passwordPlaceholder'), trigger: 'blur' },
|
||||
],
|
||||
});
|
||||
|
||||
async function handleLogin() {
|
||||
const form = unref(formRef);
|
||||
if (!form) return;
|
||||
formState.loading = true;
|
||||
try {
|
||||
const data = await form.validate();
|
||||
const userInfo = await userStore.login(
|
||||
toRaw({
|
||||
password: data.password,
|
||||
username: data.account,
|
||||
})
|
||||
);
|
||||
if (userInfo) {
|
||||
notification.success({
|
||||
message: t('sys.login.loginSuccessTitle'),
|
||||
description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.realName}`,
|
||||
duration: 3,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
} finally {
|
||||
formState.loading = false;
|
||||
}
|
||||
}
|
||||
return {
|
||||
formRef,
|
||||
formData,
|
||||
formState,
|
||||
formRules,
|
||||
login: handleLogin,
|
||||
autoLogin: autoLoginRef,
|
||||
title: globSetting && globSetting.title,
|
||||
logo,
|
||||
t,
|
||||
showLocale: locale.show,
|
||||
prefixCls,
|
||||
title: computed(() => globSetting?.title ?? ''),
|
||||
showLocale: computed(() => locale.show),
|
||||
getFormTitle,
|
||||
...useShowLoginForm(),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.login-form__locale {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 14px;
|
||||
z-index: 1;
|
||||
}
|
||||
@prefix-cls: ~'@{namespace}-login';
|
||||
@logo-prefix-cls: ~'@{namespace}-app-logo';
|
||||
@countdown-prefix-cls: ~'@{namespace}-countdown-input';
|
||||
|
||||
.login {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
background: url(../../../assets/images/login/login-bg.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
&-mask {
|
||||
height: 100%;
|
||||
background: url(../../../assets/images/login/login-in.png) no-repeat;
|
||||
background-position: 30% 30%;
|
||||
background-size: 80% 80%;
|
||||
.@{prefix-cls} {
|
||||
@media (max-width: @screen-xl) {
|
||||
background: linear-gradient(180deg, #1c3faa, #1c3faa);
|
||||
}
|
||||
|
||||
&-form {
|
||||
position: relative;
|
||||
bottom: 60px;
|
||||
width: 400px;
|
||||
background: @white;
|
||||
border: 10px solid rgba(255, 255, 255, 0.5);
|
||||
border-width: 8px;
|
||||
border-radius: 4px;
|
||||
background-clip: padding-box;
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: -48%;
|
||||
background-image: url(/@/assets/svg/login-bg.svg);
|
||||
background-position: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 100%;
|
||||
content: '';
|
||||
@media (max-width: @screen-xl) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__main {
|
||||
margin: 30px auto 0 auto !important;
|
||||
.@{logo-prefix-cls} {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
height: 30px;
|
||||
|
||||
&__title {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
img {
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
.@{logo-prefix-cls} {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
width: 60%;
|
||||
height: 80px;
|
||||
|
||||
&__content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 60px 0 40px 0;
|
||||
border: 1px solid #999;
|
||||
border-radius: 2px;
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 0;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
&__title {
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 80%;
|
||||
img {
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-sign-in-way {
|
||||
.anticon {
|
||||
font-size: 22px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input:not([type='checkbox']) {
|
||||
min-width: 360px;
|
||||
@media (max-width: @screen-sm) {
|
||||
min-width: 240px;
|
||||
}
|
||||
}
|
||||
.@{countdown-prefix-cls} input {
|
||||
min-width: unset;
|
||||
}
|
||||
|
||||
.ant-divider-inner-text {
|
||||
font-size: 12px;
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user