优化登录页和专题页
parent
2686145a5c
commit
4bf0b4097f
|
|
@ -12,7 +12,7 @@ VITE_BUILD_COMPRESS = 'none'
|
|||
|
||||
# Basic interface address SPA
|
||||
# 天空地项目
|
||||
VITE_GLOB_API_URL=http://192.168.10.163:9040
|
||||
VITE_GLOB_API_URL=http://175.27.168.120:6001
|
||||
|
||||
VITE_GLOB_INFO_IMAGE_URL=http://120.222.154.48:6050
|
||||
|
||||
|
|
@ -26,9 +26,11 @@ VITE_GLOB_API_URL_PREFIX=
|
|||
|
||||
VITE_GLOB_APP_TITLE = 兰陵县自然资源和规划局信息化系统
|
||||
|
||||
VITE_GLOB_APP_EN_TITLE = The Information System of Lanling County Natural Resources and Planning Bureau
|
||||
|
||||
VITE_GLOB_APP_LOGO = /logo.png
|
||||
|
||||
VITE_GLOB_APP_MANAGEMENT_UNIT = 管理单位：临沂市自然资源和规划局
|
||||
VITE_GLOB_APP_MANAGEMENT_UNIT = 管理单位：兰陵县自然资源和规划局
|
||||
|
||||
VITE_GLOB_APP_TECHINICAL_SUPPORT = 技术⽀持：山东慧创信息科技有限公司
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 418 B |
Binary file not shown.
|
Before Width: | Height: | Size: 802 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 312 B |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 445 B |
Binary file not shown.
|
Before Width: | Height: | Size: 703 B |
|
|
@ -95,11 +95,11 @@
|
|||
"mobile": "手机号码"
|
||||
},
|
||||
"subject": {
|
||||
"header_title": "临沂市自然资源综合监管平台",
|
||||
"header_title": "兰陵县自然资源和规划局信息化系统",
|
||||
"header_admin": "，欢迎进入！",
|
||||
"header_logout": "退出系统",
|
||||
"bottom_copyright": "管理单位：临沂市自然资源和规划局",
|
||||
"bottom_copyright_lindidiaocha": "版权所有：临沂市自然资源和规划局",
|
||||
"bottom_copyright": "管理单位：兰陵县自然资源和规划局",
|
||||
"bottom_copyright_lindidiaocha": "版权所有：兰陵县自然资源和规划局",
|
||||
"bottom_support": "技术⽀持：山东慧创信息科技有限公司",
|
||||
"bottom_version": "系统版本：V1.0"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,8 +36,7 @@ export const RootRoute: AppRouteRecordRaw = {
|
|||
export const LoginRoute: AppRouteRecordRaw = {
|
||||
path: '/login',
|
||||
name: 'Login',
|
||||
// component: () => import('@/views/sys/login/Login.vue'),
|
||||
component: () => import('@/views/sys/login_lindidiaocha/Login.vue'),
|
||||
component: () => import('@/views/sys/login/Login.vue'),
|
||||
meta: {
|
||||
title: t('routes.basic.login'),
|
||||
},
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ export function getAppEnvConfig() {
|
|||
: (window[ENV_NAME] as unknown as GlobEnvConfig);
|
||||
const {
|
||||
VITE_GLOB_APP_TITLE,
|
||||
VITE_GLOB_APP_EN_TITLE,
|
||||
VITE_GLOB_API_URL_PREFIX,
|
||||
VITE_GLOB_UPLOAD_URL,
|
||||
VITE_GLOB_APP_LOGO,
|
||||
|
|
@ -51,6 +52,7 @@ export function getAppEnvConfig() {
|
|||
}
|
||||
return {
|
||||
VITE_GLOB_APP_TITLE,
|
||||
VITE_GLOB_APP_EN_TITLE,
|
||||
VITE_GLOB_API_URL,
|
||||
VITE_GLOB_API_URL_PREFIX,
|
||||
VITE_GLOB_UPLOAD_URL,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<template v-if="getShow">
|
||||
<LoginFormTitle class="enter-x" />
|
||||
<Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
|
||||
<FormItem name="account" class="enter-x">
|
||||
<Input
|
||||
|
|
@ -21,8 +20,8 @@
|
|||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem class="enter-x">
|
||||
<Button type="primary" size="large" block @click="handleReset" :loading="loading">
|
||||
<FormItem>
|
||||
<Button class="logon" size="large" block @click="handleReset" :loading="loading">
|
||||
{{ t('common.resetText') }}
|
||||
</Button>
|
||||
<Button size="large" block class="mt-4" @click="handleBackLogin">
|
||||
|
|
@ -62,3 +61,23 @@
|
|||
await form.resetFields();
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.logon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
background: #2f80c5;
|
||||
border-radius: 6px;
|
||||
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
|
||||
&:hover {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,64 +1,118 @@
|
|||
<template>
|
||||
<div :class="prefixCls" class="relative w-full h-full px-4">
|
||||
<div class="flex items-center absolute right-4 top-4">
|
||||
<AppDarkModeToggle class="enter-x mr-2" v-if="!sessionTimeout" />
|
||||
<AppLocalePicker
|
||||
class="text-white enter-x xl:text-gray-600"
|
||||
:show-text="false"
|
||||
v-if="!sessionTimeout && showLocale"
|
||||
<div class="login" style="background-color: #f0f0f0; width: 100%; height: 100%">
|
||||
<div
|
||||
class="title"
|
||||
:style="{
|
||||
top: `calc(${25}% - (${230 * bi}px))`,
|
||||
left: `${143 * bi}px`,
|
||||
height: `${99 * bi}px`,
|
||||
}"
|
||||
>
|
||||
<img
|
||||
src="/login/logo.png"
|
||||
:style="{
|
||||
width: `${99 * bi}px`,
|
||||
marginRight: `${28 * bi}px`,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span class="-enter-x xl:hidden">
|
||||
<AppLogo :alwaysShowTitle="true" />
|
||||
</span>
|
||||
|
||||
<div class="container relative h-full py-2 mx-auto sm:px-10">
|
||||
<div class="flex h-full">
|
||||
<div class="hidden min-h-full pl-4 mr-4 xl:flex xl:flex-col xl:w-6/12">
|
||||
<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="inline-block mt-4 text-3xl"> {{ t('sys.login.signInTitle') }}</span>
|
||||
</div> -->
|
||||
<div class="mt-5 font-normal text-white dark:text-gray-500 -enter-x">
|
||||
{{ t('sys.login.signInDesc') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-full h-full py-5 xl:h-auto xl:py-0 xl:my-0 xl:w-6/12">
|
||||
<div
|
||||
:class="`${prefixCls}-form`"
|
||||
class="relative w-full px-5 py-8 mx-auto my-auto rounded-md shadow-md xl:ml-16 xl:bg-transparent sm:px-8 xl:p-4 xl:shadow-none sm:w-3/4 lg:w-2/4 xl:w-auto enter-x"
|
||||
>
|
||||
<LoginForm />
|
||||
<ForgetPasswordForm />
|
||||
<RegisterForm />
|
||||
<MobileForm />
|
||||
<QrCodeForm />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="title_span"
|
||||
:style="{
|
||||
top: `${22 * bi}px`,
|
||||
}"
|
||||
>
|
||||
<a-col>
|
||||
<a-row>
|
||||
<span
|
||||
class="title_CN"
|
||||
:style="{
|
||||
fontSize: `${50 * bi}px`,
|
||||
height: `${50 * bi}px`,
|
||||
}"
|
||||
>
|
||||
{{ VITE_GLOB_APP_TITLE }}
|
||||
</span>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<span
|
||||
class="title_EN"
|
||||
:style="{
|
||||
fontSize: `${22 * bi}px`,
|
||||
height: `${22 * bi}px`,
|
||||
top: `${10 * bi}px`,
|
||||
opacity: `${0.3 * bi}`,
|
||||
}"
|
||||
>
|
||||
{{ VITE_GLOB_APP_EN_TITLE }}
|
||||
</span>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg">
|
||||
<div
|
||||
class="bg_login"
|
||||
:style="{
|
||||
height: `${isRegister ? 600 * bi : 400 * bi}px`,
|
||||
width: `${294.1 * bi}px`,
|
||||
}"
|
||||
>
|
||||
<LoginForm :bi="bi" />
|
||||
<ForgetPasswordForm />
|
||||
<RegisterForm />
|
||||
<MobileForm />
|
||||
<QrCodeForm />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="bottom"
|
||||
:style="{
|
||||
width: `${628 * bi}px`,
|
||||
height: `${18 * bi}px`,
|
||||
fontSize: `${18 * bi}px`,
|
||||
borderRadius: `${5 * bi}px`,
|
||||
bottom: `${26 * bi}px`,
|
||||
left: `calc(${50}% - (${(628 / 2) * bi}px))`,
|
||||
}"
|
||||
>
|
||||
{{
|
||||
VITE_GLOB_APP_MANAGEMENT_UNIT
|
||||
? VITE_GLOB_APP_MANAGEMENT_UNIT
|
||||
: t('sys.subject.bottom_copyright_lindidiaocha')
|
||||
}}
|
||||
|
||||
{{
|
||||
VITE_GLOB_APP_TECHINICAL_SUPPORT
|
||||
? VITE_GLOB_APP_TECHINICAL_SUPPORT
|
||||
: t('sys.subject.bottom_support')
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { AppDarkModeToggle, AppLocalePicker, AppLogo } from '@/components/Application';
|
||||
import { useGlobSetting } from '@/hooks/setting';
|
||||
import { useDesign } from '@/hooks/web/useDesign';
|
||||
import { useI18n } from '@/hooks/web/useI18n';
|
||||
import { useLocaleStore } from '@/store/modules/locale';
|
||||
import { computed } from 'vue';
|
||||
import ForgetPasswordForm from './ForgetPasswordForm.vue';
|
||||
import LoginForm from './LoginForm.vue';
|
||||
import MobileForm from './MobileForm.vue';
|
||||
import QrCodeForm from './QrCodeForm.vue';
|
||||
import RegisterForm from './RegisterForm.vue';
|
||||
import { LoginStateEnum, useLoginState } from './useLogin';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
|
||||
const { getLoginState } = useLoginState();
|
||||
const {
|
||||
VITE_GLOB_APP_MANAGEMENT_UNIT,
|
||||
VITE_GLOB_APP_TECHINICAL_SUPPORT,
|
||||
VITE_GLOB_APP_TITLE,
|
||||
VITE_GLOB_APP_EN_TITLE,
|
||||
} = getAppEnvConfig();
|
||||
|
||||
const isRegister = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
|
||||
|
||||
defineProps({
|
||||
sessionTimeout: {
|
||||
|
|
@ -72,141 +126,112 @@
|
|||
const localeStore = useLocaleStore();
|
||||
const showLocale = localeStore.getShowPicker;
|
||||
const title = computed(() => globSetting?.title ?? '');
|
||||
|
||||
// 分辨率
|
||||
const viewportWidth = ref(window.innerWidth);
|
||||
const referenceWidth = 1920;
|
||||
const updateWindowSize = () => {
|
||||
viewportWidth.value = window.innerWidth;
|
||||
};
|
||||
const bi = computed(() => {
|
||||
return viewportWidth.value / referenceWidth;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', updateWindowSize);
|
||||
updateWindowSize(); // 初始化视口尺寸
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', updateWindowSize);
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'@{namespace}-login';
|
||||
@logo-prefix-cls: ~'@{namespace}-app-logo';
|
||||
@countdown-prefix-cls: ~'@{namespace}-countdown-input';
|
||||
@dark-bg: #293146;
|
||||
.login {
|
||||
// 页面不能被选中
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE/Edge */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
.@{prefix-cls} {
|
||||
background-color: @dark-bg;
|
||||
.title {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
// left: 143px;
|
||||
// height: 99px;
|
||||
|
||||
&::before {
|
||||
background-image: url('@/assets/svg/login-bg-dark.svg');
|
||||
}
|
||||
// img {
|
||||
// width: 99px;
|
||||
// margin-right: 28px;
|
||||
// }
|
||||
|
||||
.ant-input,
|
||||
.ant-input-password {
|
||||
background-color: #232a3b;
|
||||
}
|
||||
&_span {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
// top: 22px;
|
||||
}
|
||||
|
||||
.ant-btn:not(.ant-btn-link, .ant-btn-primary) {
|
||||
border: 1px solid #4a5569;
|
||||
}
|
||||
|
||||
&-form {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.app-iconify {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ant-divider-inner-text {
|
||||
color: @text-color-secondary;
|
||||
}
|
||||
&_CN {
|
||||
width: 100%;
|
||||
// height: 50px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 900;
|
||||
// font-size: 50px;
|
||||
color: #131313;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
&_EN {
|
||||
position: relative;
|
||||
// top: 10px;
|
||||
width: 100%;
|
||||
// height: 22px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 300;
|
||||
// font-size: 22px;
|
||||
color: #131313;
|
||||
text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix-cls} {
|
||||
min-height: 100%;
|
||||
overflow: hidden;
|
||||
.bg {
|
||||
position: relative;
|
||||
top: 50px;
|
||||
width: 100%;
|
||||
height: calc(100% - 280px);
|
||||
background-image: url('/login/bg.png');
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
/* stylelint-disable-next-line media-query-no-invalid */
|
||||
@media (max-width: @screen-xl) {
|
||||
background-color: #293146;
|
||||
|
||||
.@{prefix-cls}-form {
|
||||
background-color: #fff;
|
||||
}
|
||||
&_login {
|
||||
position: relative;
|
||||
left: calc(70%);
|
||||
// width: 294.1px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-left: -48%;
|
||||
background-image: url('@/assets/svg/login-bg.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 100%;
|
||||
background-size: auto 100%;
|
||||
/* stylelint-disable-next-line media-query-no-invalid */
|
||||
@media (max-width: @screen-xl) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
width: 628px;
|
||||
height: 18px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
border-radius: 5px;
|
||||
|
||||
.@{logo-prefix-cls} {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
bottom: 26px;
|
||||
|
||||
&__title {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
.@{logo-prefix-cls} {
|
||||
display: flex;
|
||||
width: 60%;
|
||||
height: 80px;
|
||||
|
||||
&__title {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-sign-in-way {
|
||||
.anticon {
|
||||
color: #888;
|
||||
font-size: 22px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input:not([type='checkbox']) {
|
||||
min-width: 360px;
|
||||
/* stylelint-disable-next-line media-query-no-invalid */
|
||||
@media (max-width: @screen-xl) {
|
||||
min-width: 320px;
|
||||
}
|
||||
/* stylelint-disable-next-line media-query-no-invalid */
|
||||
@media (max-width: @screen-lg) {
|
||||
min-width: 260px;
|
||||
}
|
||||
/* stylelint-disable-next-line media-query-no-invalid */
|
||||
@media (max-width: @screen-md) {
|
||||
min-width: 240px;
|
||||
}
|
||||
/* stylelint-disable-next-line media-query-no-invalid */
|
||||
@media (max-width: @screen-sm) {
|
||||
min-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
.@{countdown-prefix-cls} input {
|
||||
min-width: unset;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
left: calc(50% - 628px / 2);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
<template>
|
||||
<LoginFormTitle v-show="getShow" class="enter-x" />
|
||||
<Form
|
||||
<LoginFormTitle
|
||||
class="login_title"
|
||||
:style="{
|
||||
fontSize: `${22 * props.bi}px`,
|
||||
height: `${68 * props.bi}px`,
|
||||
}"
|
||||
/>
|
||||
<a-form
|
||||
class="p-4 enter-x"
|
||||
:model="formData"
|
||||
:rules="getFormRules"
|
||||
|
|
@ -8,82 +14,157 @@
|
|||
v-show="getShow"
|
||||
@keypress.enter="handleLogin"
|
||||
>
|
||||
<FormItem name="account" class="enter-x">
|
||||
<FormItem name="account">
|
||||
<Input
|
||||
size="large"
|
||||
v-model:value="formData.account"
|
||||
:placeholder="t('sys.login.userName')"
|
||||
placeholder="请输入账户名"
|
||||
class="fix-auto-fill"
|
||||
/>
|
||||
:style="{
|
||||
height: `${38.5 * props.bi}px`,
|
||||
fontSize: `${15 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
<template #prefix>
|
||||
<img
|
||||
src="/login/account.png"
|
||||
:style="{
|
||||
height: `${22 * props.bi}px`,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</Input>
|
||||
</FormItem>
|
||||
<FormItem name="password" class="enter-x">
|
||||
<FormItem name="password">
|
||||
<InputPassword
|
||||
size="large"
|
||||
visibilityToggle
|
||||
v-model:value="formData.password"
|
||||
:placeholder="t('sys.login.password')"
|
||||
/>
|
||||
placeholder="密码"
|
||||
:style="{
|
||||
height: `${38.5 * props.bi}px`,
|
||||
fontSize: `${15 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
<template #prefix>
|
||||
<img
|
||||
src="/login/password.png"
|
||||
:style="{
|
||||
height: `${15 * props.bi}px`,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</InputPassword>
|
||||
</FormItem>
|
||||
|
||||
<ARow class="enter-x">
|
||||
<ARow>
|
||||
<ACol :span="12">
|
||||
<FormItem>
|
||||
<!-- No logic, you need to deal with it yourself -->
|
||||
<Checkbox v-model:checked="rememberMe" size="small">
|
||||
<a-form-item
|
||||
:style="{
|
||||
'text-align': 'left',
|
||||
fontSize: `${15 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
<Checkbox
|
||||
v-model:checked="rememberMe"
|
||||
size="small"
|
||||
:style="{
|
||||
height: `${23.5 * props.bi}px`,
|
||||
fontSize: `${15 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
{{ t('sys.login.rememberMe') }}
|
||||
</Checkbox>
|
||||
</FormItem>
|
||||
</a-form-item>
|
||||
</ACol>
|
||||
<ACol :span="12">
|
||||
<FormItem :style="{ 'text-align': 'right' }">
|
||||
<!-- No logic, you need to deal with it yourself -->
|
||||
<!-- <ACol :span="12">
|
||||
<FormItem
|
||||
:style="{
|
||||
'text-align': 'right',
|
||||
}"
|
||||
>
|
||||
<Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">
|
||||
{{ t('sys.login.forgetPassword') }}
|
||||
</Button>
|
||||
</FormItem>
|
||||
</ACol>
|
||||
</ACol> -->
|
||||
</ARow>
|
||||
|
||||
<FormItem class="enter-x">
|
||||
<Button type="primary" size="large" block @click="handleLogin" :loading="loading">
|
||||
{{ t('sys.login.loginButton') }}
|
||||
<a-form-item>
|
||||
<a-button
|
||||
size="large"
|
||||
block
|
||||
@click="handleLogin"
|
||||
:loading="loading"
|
||||
class="logon"
|
||||
:style="{
|
||||
fontSize: `${20 * props.bi}px`,
|
||||
height: `${40 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
立即登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div
|
||||
class="bottom"
|
||||
v-if="getShow"
|
||||
:style="{
|
||||
fontSize: `${20 * props.bi}px`,
|
||||
height: `${50 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
<!-- <Button type="link" block size="small" @click="setLoginState(LoginStateEnum.REGISTER)">
|
||||
<template #icon>
|
||||
<img
|
||||
src="/login/register.png"
|
||||
:style="{
|
||||
height: `${29 * props.bi}px`,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<span
|
||||
:style="{
|
||||
fontSize: `${14 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
用户注册
|
||||
</span>
|
||||
</Button>
|
||||
<span>|</span> -->
|
||||
<a-popover v-model:open="visible" trigger="click">
|
||||
<template #content>
|
||||
<a-qrcode error-level="H" :value="qrcodeValue" />
|
||||
</template>
|
||||
<Button
|
||||
type="link"
|
||||
block
|
||||
size="small"
|
||||
:style="{
|
||||
fontSize: `${14 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
<template #icon>
|
||||
<img
|
||||
src="/login/download.png"
|
||||
:style="{
|
||||
height: `${20 * props.bi}px`,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<span
|
||||
:style="{
|
||||
fontSize: `${14 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
下载APP
|
||||
</span>
|
||||
</Button>
|
||||
<!-- <Button size="large" class="mt-4 enter-x" block @click="handleRegister">
|
||||
{{ t('sys.login.registerButton') }}
|
||||
</Button> -->
|
||||
</FormItem>
|
||||
<!-- <ARow class="enter-x" :gutter="[16, 16]">
|
||||
<ACol :md="8" :xs="24">
|
||||
<Button block @click="setLoginState(LoginStateEnum.MOBILE)">
|
||||
{{ t('sys.login.mobileSignInFormTitle') }}
|
||||
</Button>
|
||||
</ACol>
|
||||
<ACol :md="8" :xs="24">
|
||||
<Button block @click="setLoginState(LoginStateEnum.QR_CODE)">
|
||||
{{ t('sys.login.qrSignInFormTitle') }}
|
||||
</Button>
|
||||
</ACol>
|
||||
<ACol :md="8" :xs="24">
|
||||
<Button block @click="setLoginState(LoginStateEnum.REGISTER)">
|
||||
{{ t('sys.login.registerButton') }}
|
||||
</Button>
|
||||
</ACol>
|
||||
</ARow> -->
|
||||
|
||||
<!-- <Divider class="enter-x">{{ t('sys.login.otherSignIn') }}</Divider> -->
|
||||
|
||||
<!-- <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">
|
||||
<GithubFilled />
|
||||
<WechatFilled />
|
||||
<AlipayCircleFilled />
|
||||
<GoogleCircleFilled />
|
||||
<TwitterCircleFilled />
|
||||
</div> -->
|
||||
</Form>
|
||||
</a-popover>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, unref, computed } from 'vue';
|
||||
|
||||
import { reactive, ref, unref, computed, onMounted } from 'vue';
|
||||
import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue';
|
||||
// import {
|
||||
// GithubFilled,
|
||||
|
|
@ -93,15 +174,24 @@
|
|||
// TwitterCircleFilled,
|
||||
// } from '@ant-design/icons-vue';
|
||||
import LoginFormTitle from './LoginFormTitle.vue';
|
||||
|
||||
import { useI18n } from '@/hooks/web/useI18n';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
|
||||
import { useDesign } from '@/hooks/web/useDesign';
|
||||
import { fun_GetUpdateFiles } from '@/api/demo/version';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
//import { onKeyStroke } from '@vueuse/core';
|
||||
|
||||
const props = defineProps(['bi']);
|
||||
|
||||
function computedFormItem() {
|
||||
const elements = document.querySelectorAll('.ant-form-item');
|
||||
elements.forEach((element) => {
|
||||
element.style.marginBottom = `${24 * props.bi}px`; // 修改 margin-bottom
|
||||
});
|
||||
}
|
||||
|
||||
const ACol = Col;
|
||||
const ARow = Row;
|
||||
const FormItem = Form.Item;
|
||||
|
|
@ -117,6 +207,8 @@
|
|||
const formRef = ref();
|
||||
const loading = ref(false);
|
||||
const rememberMe = ref(false);
|
||||
const visible = ref(false);
|
||||
const qrcodeValue = ref();
|
||||
|
||||
const formData = reactive({
|
||||
// account: 'vben',
|
||||
|
|
@ -144,9 +236,11 @@
|
|||
console.log(userInfo);
|
||||
localStorage.setItem('fireUserLoginName', userInfo.name);
|
||||
if (userInfo) {
|
||||
localStorage.setItem('userid', userInfo.id);
|
||||
notification.success({
|
||||
message: t('sys.login.loginSuccessTitle'),
|
||||
description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.name}`,
|
||||
|
||||
duration: 3,
|
||||
});
|
||||
}
|
||||
|
|
@ -160,4 +254,69 @@
|
|||
loading.value = false;
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
fun_GetUpdateFiles({ project: 'drone_enforcement' }).then((res) => {
|
||||
const { VITE_GLOB_UPLOAD_URL } = getAppEnvConfig();
|
||||
console.log(res);
|
||||
qrcodeValue.value = `${VITE_GLOB_UPLOAD_URL}/${res.filepath}`;
|
||||
});
|
||||
computedFormItem();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.login_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
// height: 68px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 900;
|
||||
// font-size: 22px;
|
||||
color: #131313;
|
||||
}
|
||||
.logon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
background: #2f80c5;
|
||||
border-radius: 6px;
|
||||
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
// font-size: 15px;
|
||||
color: #ffffff;
|
||||
|
||||
&:hover {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
// height: 50px;
|
||||
width: 100%;
|
||||
background: #eaf2f9;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
Button {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<h2 class="mb-3 text-2xl font-bold text-center xl:text-3xl enter-x xl:text-left">
|
||||
<div class="login_title">
|
||||
{{ getFormTitle }}
|
||||
</h2>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, unref } from 'vue';
|
||||
|
|
@ -14,8 +14,8 @@
|
|||
|
||||
const getFormTitle = computed(() => {
|
||||
const titleObj = {
|
||||
[LoginStateEnum.RESET_PASSWORD]: t('sys.login.forgetFormTitle'),
|
||||
[LoginStateEnum.LOGIN]: t('sys.login.signInFormTitle'),
|
||||
[LoginStateEnum.RESET_PASSWORD]: '重置密码',
|
||||
[LoginStateEnum.LOGIN]: '用户登录',
|
||||
[LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
|
||||
[LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
|
||||
[LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'),
|
||||
|
|
@ -23,3 +23,17 @@
|
|||
return titleObj[unref(getLoginState)];
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.login_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
height: 68px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 900;
|
||||
font-size: 22px;
|
||||
color: #131313;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div v-if="getShow">
|
||||
<LoginFormTitle class="enter-x" />
|
||||
<Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
|
||||
<FormItem name="account" class="enter-x">
|
||||
<Input
|
||||
|
|
@ -49,14 +48,7 @@
|
|||
</Checkbox>
|
||||
</FormItem>
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
class="enter-x"
|
||||
size="large"
|
||||
block
|
||||
@click="handleRegister"
|
||||
:loading="loading"
|
||||
>
|
||||
<Button class="logon" size="large" block @click="handleRegister" :loading="loading">
|
||||
{{ t('sys.login.registerButton') }}
|
||||
</Button>
|
||||
<Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
|
||||
|
|
@ -102,3 +94,23 @@
|
|||
console.log(data);
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.logon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
background: #2f80c5;
|
||||
border-radius: 6px;
|
||||
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
|
||||
&:hover {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,83 +0,0 @@
|
|||
<template>
|
||||
<template v-if="getShow">
|
||||
<Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
|
||||
<FormItem name="account" class="enter-x">
|
||||
<Input
|
||||
size="large"
|
||||
v-model:value="formData.account"
|
||||
:placeholder="t('sys.login.userName')"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem name="mobile" class="enter-x">
|
||||
<Input size="large" v-model:value="formData.mobile" :placeholder="t('sys.login.mobile')" />
|
||||
</FormItem>
|
||||
<FormItem name="sms" class="enter-x">
|
||||
<CountdownInput
|
||||
size="large"
|
||||
v-model:value="formData.sms"
|
||||
:placeholder="t('sys.login.smsCode')"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem>
|
||||
<Button class="logon" size="large" block @click="handleReset" :loading="loading">
|
||||
{{ t('common.resetText') }}
|
||||
</Button>
|
||||
<Button size="large" block class="mt-4" @click="handleBackLogin">
|
||||
{{ t('sys.login.backSignIn') }}
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</template>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, computed, unref } from 'vue';
|
||||
import LoginFormTitle from './LoginFormTitle.vue';
|
||||
import { Form, Input, Button } from 'ant-design-vue';
|
||||
import { CountdownInput } from '@/components/CountDown';
|
||||
import { useI18n } from '@/hooks/web/useI18n';
|
||||
import { useLoginState, useFormRules, LoginStateEnum } from './useLogin';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const { t } = useI18n();
|
||||
const { handleBackLogin, getLoginState } = useLoginState();
|
||||
const { getFormRules } = useFormRules();
|
||||
|
||||
const formRef = ref();
|
||||
const loading = ref(false);
|
||||
|
||||
const formData = reactive({
|
||||
account: '',
|
||||
mobile: '',
|
||||
sms: '',
|
||||
});
|
||||
|
||||
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.RESET_PASSWORD);
|
||||
|
||||
async function handleReset() {
|
||||
const form = unref(formRef);
|
||||
if (!form) return;
|
||||
await form.resetFields();
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.logon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
background: #2f80c5;
|
||||
border-radius: 6px;
|
||||
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
|
||||
&:hover {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,231 +0,0 @@
|
|||
<template>
|
||||
<div class="login" style="background-color: #f0f0f0; width: 100%; height: 100%">
|
||||
<div
|
||||
class="title"
|
||||
:style="{
|
||||
top: `calc(${25}% - (${230 * bi}px))`,
|
||||
left: `${143 * bi}px`,
|
||||
height: `${99 * bi}px`,
|
||||
}"
|
||||
>
|
||||
<img
|
||||
src="/login_lindidiaocha/logo.png"
|
||||
:style="{
|
||||
width: `${99 * bi}px`,
|
||||
marginRight: `${28 * bi}px`,
|
||||
}"
|
||||
/>
|
||||
<div
|
||||
class="title_span"
|
||||
:style="{
|
||||
top: `${22 * bi}px`,
|
||||
}"
|
||||
>
|
||||
<a-col>
|
||||
<a-row>
|
||||
<span
|
||||
class="title_CN"
|
||||
:style="{
|
||||
fontSize: `${50 * bi}px`,
|
||||
height: `${50 * bi}px`,
|
||||
}"
|
||||
>
|
||||
临沂市自然资源综合监管平台
|
||||
</span>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<span
|
||||
class="title_EN"
|
||||
:style="{
|
||||
fontSize: `${22 * bi}px`,
|
||||
height: `${22 * bi}px`,
|
||||
top: `${10 * bi}px`,
|
||||
opacity: `${0.3 * bi}`,
|
||||
}"
|
||||
>
|
||||
Linyi City Natural Resources Comprehensive Supervision Platform
|
||||
</span>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg">
|
||||
<div
|
||||
class="bg_login"
|
||||
:style="{
|
||||
height: `${isRegister ? 600 * bi : 400 * bi}px`,
|
||||
width: `${294.1 * bi}px`,
|
||||
}"
|
||||
>
|
||||
<LoginForm :bi="bi" />
|
||||
<ForgetPasswordForm />
|
||||
<RegisterForm />
|
||||
<MobileForm />
|
||||
<QrCodeForm />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="bottom"
|
||||
:style="{
|
||||
width: `${628 * bi}px`,
|
||||
height: `${18 * bi}px`,
|
||||
fontSize: `${18 * bi}px`,
|
||||
borderRadius: `${5 * bi}px`,
|
||||
bottom: `${26 * bi}px`,
|
||||
left: `calc(${50}% - (${(628 / 2) * bi}px))`,
|
||||
}"
|
||||
>
|
||||
{{
|
||||
VITE_GLOB_APP_MANAGEMENT_UNIT
|
||||
? VITE_GLOB_APP_MANAGEMENT_UNIT
|
||||
: t('sys.subject.bottom_copyright_lindidiaocha')
|
||||
}}
|
||||
|
||||
{{
|
||||
VITE_GLOB_APP_TECHINICAL_SUPPORT
|
||||
? VITE_GLOB_APP_TECHINICAL_SUPPORT
|
||||
: t('sys.subject.bottom_support')
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, unref, computed, onMounted, onUnmounted } from 'vue';
|
||||
import { AppDarkModeToggle, AppLocalePicker, AppLogo } from '@/components/Application';
|
||||
import { useGlobSetting } from '@/hooks/setting';
|
||||
import { useDesign } from '@/hooks/web/useDesign';
|
||||
import { useI18n } from '@/hooks/web/useI18n';
|
||||
import { useLocaleStore } from '@/store/modules/locale';
|
||||
import ForgetPasswordForm from './ForgetPasswordForm.vue';
|
||||
import LoginForm from './LoginForm.vue';
|
||||
import MobileForm from './MobileForm.vue';
|
||||
import QrCodeForm from './QrCodeForm.vue';
|
||||
import RegisterForm from './RegisterForm.vue';
|
||||
import { LoginStateEnum, useLoginState } from './useLogin';
|
||||
const { getLoginState } = useLoginState();
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
const { VITE_GLOB_APP_MANAGEMENT_UNIT, VITE_GLOB_APP_TECHINICAL_SUPPORT } = getAppEnvConfig();
|
||||
|
||||
const isRegister = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
|
||||
|
||||
defineProps({
|
||||
sessionTimeout: {
|
||||
type: Boolean,
|
||||
},
|
||||
});
|
||||
|
||||
const globSetting = useGlobSetting();
|
||||
const { prefixCls } = useDesign('login');
|
||||
const { t } = useI18n();
|
||||
const localeStore = useLocaleStore();
|
||||
const showLocale = localeStore.getShowPicker;
|
||||
const title = computed(() => globSetting?.title ?? '');
|
||||
|
||||
// 分辨率
|
||||
const viewportWidth = ref(window.innerWidth);
|
||||
const referenceWidth = 1920;
|
||||
const updateWindowSize = () => {
|
||||
viewportWidth.value = window.innerWidth;
|
||||
};
|
||||
const bi = computed(() => {
|
||||
return viewportWidth.value / referenceWidth;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('resize', updateWindowSize);
|
||||
updateWindowSize(); // 初始化视口尺寸
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', updateWindowSize);
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
.login {
|
||||
// 页面不能被选中
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE/Edge */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
// left: 143px;
|
||||
// height: 99px;
|
||||
|
||||
// img {
|
||||
// width: 99px;
|
||||
// margin-right: 28px;
|
||||
// }
|
||||
|
||||
&_span {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
// top: 22px;
|
||||
}
|
||||
|
||||
&_CN {
|
||||
width: 100%;
|
||||
// height: 50px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 900;
|
||||
// font-size: 50px;
|
||||
color: #131313;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
&_EN {
|
||||
position: relative;
|
||||
// top: 10px;
|
||||
width: 100%;
|
||||
// height: 22px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 300;
|
||||
// font-size: 22px;
|
||||
color: #131313;
|
||||
text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.bg {
|
||||
position: relative;
|
||||
top: 50px;
|
||||
width: 100%;
|
||||
height: calc(100% - 280px);
|
||||
background-image: url('/login_lindidiaocha/bg.png');
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
&_login {
|
||||
position: relative;
|
||||
left: calc(70%);
|
||||
// width: 294.1px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 628px;
|
||||
height: 18px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
border-radius: 5px;
|
||||
|
||||
position: absolute;
|
||||
bottom: 26px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
left: calc(50% - 628px / 2);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,322 +0,0 @@
|
|||
<template>
|
||||
<LoginFormTitle
|
||||
class="login_title"
|
||||
:style="{
|
||||
fontSize: `${22 * props.bi}px`,
|
||||
height: `${68 * props.bi}px`,
|
||||
}"
|
||||
/>
|
||||
<a-form
|
||||
class="p-4 enter-x"
|
||||
:model="formData"
|
||||
:rules="getFormRules"
|
||||
ref="formRef"
|
||||
v-show="getShow"
|
||||
@keypress.enter="handleLogin"
|
||||
>
|
||||
<FormItem name="account">
|
||||
<Input
|
||||
size="large"
|
||||
v-model:value="formData.account"
|
||||
placeholder="请输入账户名"
|
||||
class="fix-auto-fill"
|
||||
:style="{
|
||||
height: `${38.5 * props.bi}px`,
|
||||
fontSize: `${15 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
<template #prefix>
|
||||
<img
|
||||
src="/login_lindidiaocha/account.png"
|
||||
:style="{
|
||||
height: `${22 * props.bi}px`,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</Input>
|
||||
</FormItem>
|
||||
<FormItem name="password">
|
||||
<InputPassword
|
||||
size="large"
|
||||
visibilityToggle
|
||||
v-model:value="formData.password"
|
||||
placeholder="密码"
|
||||
:style="{
|
||||
height: `${38.5 * props.bi}px`,
|
||||
fontSize: `${15 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
<template #prefix>
|
||||
<img
|
||||
src="/login_lindidiaocha/password.png"
|
||||
:style="{
|
||||
height: `${15 * props.bi}px`,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
</InputPassword>
|
||||
</FormItem>
|
||||
|
||||
<ARow>
|
||||
<ACol :span="12">
|
||||
<a-form-item
|
||||
:style="{
|
||||
'text-align': 'left',
|
||||
fontSize: `${15 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
<Checkbox
|
||||
v-model:checked="rememberMe"
|
||||
size="small"
|
||||
:style="{
|
||||
height: `${23.5 * props.bi}px`,
|
||||
fontSize: `${15 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
{{ t('sys.login.rememberMe') }}
|
||||
</Checkbox>
|
||||
</a-form-item>
|
||||
</ACol>
|
||||
<!-- <ACol :span="12">
|
||||
<FormItem
|
||||
:style="{
|
||||
'text-align': 'right',
|
||||
}"
|
||||
>
|
||||
<Button type="link" size="small" @click="setLoginState(LoginStateEnum.RESET_PASSWORD)">
|
||||
{{ t('sys.login.forgetPassword') }}
|
||||
</Button>
|
||||
</FormItem>
|
||||
</ACol> -->
|
||||
</ARow>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
size="large"
|
||||
block
|
||||
@click="handleLogin"
|
||||
:loading="loading"
|
||||
class="logon"
|
||||
:style="{
|
||||
fontSize: `${20 * props.bi}px`,
|
||||
height: `${40 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
立即登录
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
<div
|
||||
class="bottom"
|
||||
v-if="getShow"
|
||||
:style="{
|
||||
fontSize: `${20 * props.bi}px`,
|
||||
height: `${50 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
<!-- <Button type="link" block size="small" @click="setLoginState(LoginStateEnum.REGISTER)">
|
||||
<template #icon>
|
||||
<img
|
||||
src="/login_lindidiaocha/register.png"
|
||||
:style="{
|
||||
height: `${29 * props.bi}px`,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<span
|
||||
:style="{
|
||||
fontSize: `${14 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
用户注册
|
||||
</span>
|
||||
</Button>
|
||||
<span>|</span> -->
|
||||
<a-popover v-model:open="visible" trigger="click">
|
||||
<template #content>
|
||||
<a-qrcode error-level="H" :value="qrcodeValue" />
|
||||
</template>
|
||||
<Button
|
||||
type="link"
|
||||
block
|
||||
size="small"
|
||||
:style="{
|
||||
fontSize: `${14 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
<template #icon>
|
||||
<img
|
||||
src="/login_lindidiaocha/download.png"
|
||||
:style="{
|
||||
height: `${20 * props.bi}px`,
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
<span
|
||||
:style="{
|
||||
fontSize: `${14 * props.bi}px`,
|
||||
}"
|
||||
>
|
||||
下载APP
|
||||
</span>
|
||||
</Button>
|
||||
</a-popover>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, unref, computed, onMounted } from 'vue';
|
||||
import { Checkbox, Form, Input, Row, Col, Button, Divider } from 'ant-design-vue';
|
||||
// import {
|
||||
// GithubFilled,
|
||||
// WechatFilled,
|
||||
// AlipayCircleFilled,
|
||||
// GoogleCircleFilled,
|
||||
// TwitterCircleFilled,
|
||||
// } from '@ant-design/icons-vue';
|
||||
import LoginFormTitle from './LoginFormTitle.vue';
|
||||
import { useI18n } from '@/hooks/web/useI18n';
|
||||
import { useMessage } from '@/hooks/web/useMessage';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { LoginStateEnum, useLoginState, useFormRules, useFormValid } from './useLogin';
|
||||
import { useDesign } from '@/hooks/web/useDesign';
|
||||
import { fun_GetUpdateFiles } from '@/api/demo/version';
|
||||
import { getAppEnvConfig } from '@/utils/env';
|
||||
//import { onKeyStroke } from '@vueuse/core';
|
||||
|
||||
const props = defineProps(['bi']);
|
||||
|
||||
function computedFormItem() {
|
||||
const elements = document.querySelectorAll('.ant-form-item');
|
||||
elements.forEach((element) => {
|
||||
element.style.marginBottom = `${24 * props.bi}px`; // 修改 margin-bottom
|
||||
});
|
||||
}
|
||||
|
||||
const ACol = Col;
|
||||
const ARow = Row;
|
||||
const FormItem = Form.Item;
|
||||
const InputPassword = Input.Password;
|
||||
const { t } = useI18n();
|
||||
const { notification, createErrorModal } = useMessage();
|
||||
const { prefixCls } = useDesign('login');
|
||||
const userStore = useUserStore();
|
||||
|
||||
const { setLoginState, getLoginState } = useLoginState();
|
||||
const { getFormRules } = useFormRules();
|
||||
|
||||
const formRef = ref();
|
||||
const loading = ref(false);
|
||||
const rememberMe = ref(false);
|
||||
const visible = ref(false);
|
||||
const qrcodeValue = ref();
|
||||
|
||||
const formData = reactive({
|
||||
// account: 'vben',
|
||||
// password: '123456',
|
||||
account: '',
|
||||
password: '',
|
||||
});
|
||||
|
||||
const { validForm } = useFormValid(formRef);
|
||||
|
||||
//onKeyStroke('Enter', handleLogin);
|
||||
|
||||
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);
|
||||
|
||||
async function handleLogin() {
|
||||
const data = await validForm();
|
||||
if (!data) return;
|
||||
try {
|
||||
loading.value = true;
|
||||
const userInfo = await userStore.login({
|
||||
password: data.password,
|
||||
account: data.account,
|
||||
mode: 'none', //不要默认的错误提示
|
||||
});
|
||||
console.log(userInfo);
|
||||
localStorage.setItem('fireUserLoginName', userInfo.name);
|
||||
if (userInfo) {
|
||||
localStorage.setItem('userid', userInfo.id);
|
||||
notification.success({
|
||||
message: t('sys.login.loginSuccessTitle'),
|
||||
description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.name}`,
|
||||
|
||||
duration: 3,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
createErrorModal({
|
||||
title: t('sys.api.errorTip'),
|
||||
content: (error as unknown as Error).message || t('sys.api.networkExceptionMsg'),
|
||||
getContainer: () => document.body.querySelector(`.${prefixCls}`) || document.body,
|
||||
});
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
fun_GetUpdateFiles({ project: 'drone_enforcement' }).then((res) => {
|
||||
const { VITE_GLOB_UPLOAD_URL } = getAppEnvConfig();
|
||||
console.log(res);
|
||||
qrcodeValue.value = `${VITE_GLOB_UPLOAD_URL}/${res.filepath}`;
|
||||
});
|
||||
computedFormItem();
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.login_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
// height: 68px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 900;
|
||||
// font-size: 22px;
|
||||
color: #131313;
|
||||
}
|
||||
.logon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
background: #2f80c5;
|
||||
border-radius: 6px;
|
||||
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
// font-size: 15px;
|
||||
color: #ffffff;
|
||||
|
||||
&:hover {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
// height: 50px;
|
||||
width: 100%;
|
||||
background: #eaf2f9;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
Button {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<template>
|
||||
<div class="login_title">
|
||||
{{ getFormTitle }}
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, unref } from 'vue';
|
||||
import { useI18n } from '@/hooks/web/useI18n';
|
||||
import { LoginStateEnum, useLoginState } from './useLogin';
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const { getLoginState } = useLoginState();
|
||||
|
||||
const getFormTitle = computed(() => {
|
||||
const titleObj = {
|
||||
[LoginStateEnum.RESET_PASSWORD]: '重置密码',
|
||||
[LoginStateEnum.LOGIN]: '用户登录',
|
||||
[LoginStateEnum.REGISTER]: t('sys.login.signUpFormTitle'),
|
||||
[LoginStateEnum.MOBILE]: t('sys.login.mobileSignInFormTitle'),
|
||||
[LoginStateEnum.QR_CODE]: t('sys.login.qrSignInFormTitle'),
|
||||
};
|
||||
return titleObj[unref(getLoginState)];
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.login_title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
height: 68px;
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 900;
|
||||
font-size: 22px;
|
||||
color: #131313;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
<template>
|
||||
<div v-if="getShow">
|
||||
<LoginFormTitle class="enter-x" />
|
||||
<Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
|
||||
<FormItem name="mobile" class="enter-x">
|
||||
<Input
|
||||
size="large"
|
||||
v-model:value="formData.mobile"
|
||||
:placeholder="t('sys.login.mobile')"
|
||||
class="fix-auto-fill"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem name="sms" class="enter-x">
|
||||
<CountdownInput
|
||||
size="large"
|
||||
class="fix-auto-fill"
|
||||
v-model:value="formData.sms"
|
||||
:placeholder="t('sys.login.smsCode')"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem class="enter-x">
|
||||
<Button type="primary" size="large" block @click="handleLogin" :loading="loading">
|
||||
{{ t('sys.login.loginButton') }}
|
||||
</Button>
|
||||
<Button size="large" block class="mt-4" @click="handleBackLogin">
|
||||
{{ t('sys.login.backSignIn') }}
|
||||
</Button>
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, computed, unref } from 'vue';
|
||||
import { Form, Input, Button } from 'ant-design-vue';
|
||||
import { CountdownInput } from '@/components/CountDown';
|
||||
import LoginFormTitle from './LoginFormTitle.vue';
|
||||
import { useI18n } from '@/hooks/web/useI18n';
|
||||
import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const { t } = useI18n();
|
||||
const { handleBackLogin, getLoginState } = useLoginState();
|
||||
const { getFormRules } = useFormRules();
|
||||
|
||||
const formRef = ref();
|
||||
const loading = ref(false);
|
||||
|
||||
const formData = reactive({
|
||||
mobile: '',
|
||||
sms: '',
|
||||
});
|
||||
|
||||
const { validForm } = useFormValid(formRef);
|
||||
|
||||
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.MOBILE);
|
||||
|
||||
async function handleLogin() {
|
||||
const data = await validForm();
|
||||
if (!data) return;
|
||||
console.log(data);
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
<template>
|
||||
<div v-if="getShow">
|
||||
<LoginFormTitle class="enter-x" />
|
||||
<div class="enter-x min-w-64 min-h-64">
|
||||
<QrCode
|
||||
:value="qrCodeUrl"
|
||||
class="enter-x flex justify-center xl:justify-start"
|
||||
:width="280"
|
||||
/>
|
||||
<Divider class="enter-x">{{ t('sys.login.scanSign') }}</Divider>
|
||||
<Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
|
||||
{{ t('sys.login.backSignIn') }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, unref } from 'vue';
|
||||
import LoginFormTitle from './LoginFormTitle.vue';
|
||||
import { Button, Divider } from 'ant-design-vue';
|
||||
import { QrCode } from '@/components/Qrcode';
|
||||
import { useI18n } from '@/hooks/web/useI18n';
|
||||
import { useLoginState, LoginStateEnum } from './useLogin';
|
||||
|
||||
const qrCodeUrl = 'https://vben.vvbin.cn/login';
|
||||
|
||||
const { t } = useI18n();
|
||||
const { handleBackLogin, getLoginState } = useLoginState();
|
||||
|
||||
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.QR_CODE);
|
||||
</script>
|
||||
|
|
@ -1,116 +0,0 @@
|
|||
<template>
|
||||
<div v-if="getShow">
|
||||
<Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
|
||||
<FormItem name="account" class="enter-x">
|
||||
<Input
|
||||
class="fix-auto-fill"
|
||||
size="large"
|
||||
v-model:value="formData.account"
|
||||
:placeholder="t('sys.login.userName')"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem name="mobile" class="enter-x">
|
||||
<Input
|
||||
size="large"
|
||||
v-model:value="formData.mobile"
|
||||
:placeholder="t('sys.login.mobile')"
|
||||
class="fix-auto-fill"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem name="sms" class="enter-x">
|
||||
<CountdownInput
|
||||
size="large"
|
||||
class="fix-auto-fill"
|
||||
v-model:value="formData.sms"
|
||||
:placeholder="t('sys.login.smsCode')"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem name="password" class="enter-x">
|
||||
<StrengthMeter
|
||||
size="large"
|
||||
v-model:value="formData.password"
|
||||
:placeholder="t('sys.login.password')"
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem name="confirmPassword" class="enter-x">
|
||||
<InputPassword
|
||||
size="large"
|
||||
visibilityToggle
|
||||
v-model:value="formData.confirmPassword"
|
||||
:placeholder="t('sys.login.confirmPassword')"
|
||||
/>
|
||||
</FormItem>
|
||||
|
||||
<FormItem class="enter-x" name="policy">
|
||||
<!-- No logic, you need to deal with it yourself -->
|
||||
<Checkbox v-model:checked="formData.policy" size="small">
|
||||
{{ t('sys.login.policy') }}
|
||||
</Checkbox>
|
||||
</FormItem>
|
||||
|
||||
<Button class="logon" size="large" block @click="handleRegister" :loading="loading">
|
||||
{{ t('sys.login.registerButton') }}
|
||||
</Button>
|
||||
<Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">
|
||||
{{ t('sys.login.backSignIn') }}
|
||||
</Button>
|
||||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, unref, computed } from 'vue';
|
||||
import LoginFormTitle from './LoginFormTitle.vue';
|
||||
import { Form, Input, Button, Checkbox } from 'ant-design-vue';
|
||||
import { StrengthMeter } from '@/components/StrengthMeter';
|
||||
import { CountdownInput } from '@/components/CountDown';
|
||||
import { useI18n } from '@/hooks/web/useI18n';
|
||||
import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from './useLogin';
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const InputPassword = Input.Password;
|
||||
const { t } = useI18n();
|
||||
const { handleBackLogin, getLoginState } = useLoginState();
|
||||
|
||||
const formRef = ref();
|
||||
const loading = ref(false);
|
||||
|
||||
const formData = reactive({
|
||||
account: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
mobile: '',
|
||||
sms: '',
|
||||
policy: false,
|
||||
});
|
||||
|
||||
const { getFormRules } = useFormRules(formData);
|
||||
const { validForm } = useFormValid(formRef);
|
||||
|
||||
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
|
||||
|
||||
async function handleRegister() {
|
||||
const data = await validForm();
|
||||
if (!data) return;
|
||||
console.log(data);
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.logon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
background: #2f80c5;
|
||||
border-radius: 6px;
|
||||
|
||||
font-family: Alibaba PuHuiTi;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
color: #ffffff;
|
||||
|
||||
&:hover {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
<template>
|
||||
<transition>
|
||||
<div :class="prefixCls" v-if="true">
|
||||
<Login sessionTimeout />
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue';
|
||||
import Login from './Login.vue';
|
||||
import { useDesign } from '@/hooks/web/useDesign';
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
import { usePermissionStore } from '@/store/modules/permission';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { PermissionModeEnum } from '@/enums/appEnum';
|
||||
import { type Nullable } from '@vben/types';
|
||||
|
||||
const { prefixCls } = useDesign('st-login');
|
||||
const userStore = useUserStore();
|
||||
const permissionStore = usePermissionStore();
|
||||
const appStore = useAppStore();
|
||||
const userId = ref<Nullable<number | string>>(0);
|
||||
|
||||
const isBackMode = () => {
|
||||
return appStore.getProjectConfig.permissionMode === PermissionModeEnum.BACK;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
// 记录当前的UserId
|
||||
userId.value = userStore.getUserInfo?.userId;
|
||||
console.log('Mounted', userStore.getUserInfo);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (userId.value && userId.value !== userStore.getUserInfo.userId) {
|
||||
// 登录的不是同一个用户，刷新整个页面以便丢弃之前用户的页面状态
|
||||
document.location.reload();
|
||||
} else if (isBackMode() && permissionStore.getLastBuildMenuTime === 0) {
|
||||
// 后台权限模式下，没有成功加载过菜单，就重新加载整个页面。这通常发生在会话过期后按F5刷新整个页面后载入了本模块这种场景
|
||||
document.location.reload();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@prefix-cls: ~'@{namespace}-st-login';
|
||||
|
||||
.@{prefix-cls} {
|
||||
position: fixed;
|
||||
z-index: 9999999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: @component-background;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
import type { FormInstance } from 'ant-design-vue/lib/form/Form';
|
||||
import type {
|
||||
RuleObject,
|
||||
NamePath,
|
||||
Rule as ValidationRule,
|
||||
} from 'ant-design-vue/lib/form/interface';
|
||||
import { ref, computed, unref, Ref } from 'vue';
|
||||
import { useI18n } from '@/hooks/web/useI18n';
|
||||
|
||||
export enum LoginStateEnum {
|
||||
LOGIN,
|
||||
REGISTER,
|
||||
RESET_PASSWORD,
|
||||
MOBILE,
|
||||
QR_CODE,
|
||||
}
|
||||
|
||||
const currentState = ref(LoginStateEnum.LOGIN);
|
||||
|
||||
// 这里也可以优化
|
||||
// import { createGlobalState } from '@vueuse/core'
|
||||
|
||||
export function useLoginState() {
|
||||
function setLoginState(state: LoginStateEnum) {
|
||||
currentState.value = state;
|
||||
}
|
||||
|
||||
const getLoginState = computed(() => currentState.value);
|
||||
|
||||
function handleBackLogin() {
|
||||
setLoginState(LoginStateEnum.LOGIN);
|
||||
}
|
||||
|
||||
return { setLoginState, getLoginState, handleBackLogin };
|
||||
}
|
||||
|
||||
export function useFormValid<T extends Object = any>(formRef: Ref<FormInstance>) {
|
||||
const validate = computed(() => {
|
||||
const form = unref(formRef);
|
||||
return form?.validate ?? ((_nameList?: NamePath) => Promise.resolve());
|
||||
});
|
||||
|
||||
async function validForm() {
|
||||
const form = unref(formRef);
|
||||
if (!form) return;
|
||||
const data = await form.validate();
|
||||
return data as T;
|
||||
}
|
||||
|
||||
return { validate, validForm };
|
||||
}
|
||||
|
||||
export function useFormRules(formData?: Recordable) {
|
||||
const { t } = useI18n();
|
||||
|
||||
const getAccountFormRule = computed(() => createRule(t('sys.login.accountPlaceholder')));
|
||||
const getPasswordFormRule = computed(() => createRule(t('sys.login.passwordPlaceholder')));
|
||||
const getSmsFormRule = computed(() => createRule(t('sys.login.smsPlaceholder')));
|
||||
const getMobileFormRule = computed(() => createRule(t('sys.login.mobilePlaceholder')));
|
||||
|
||||
const validatePolicy = async (_: RuleObject, value: boolean) => {
|
||||
return !value ? Promise.reject(t('sys.login.policyPlaceholder')) : Promise.resolve();
|
||||
};
|
||||
|
||||
const validateConfirmPassword = (password: string) => {
|
||||
return async (_: RuleObject, value: string) => {
|
||||
if (!value) {
|
||||
return Promise.reject(t('sys.login.passwordPlaceholder'));
|
||||
}
|
||||
if (value !== password) {
|
||||
return Promise.reject(t('sys.login.diffPwd'));
|
||||
}
|
||||
return Promise.resolve();
|
||||
};
|
||||
};
|
||||
|
||||
const getFormRules = computed((): { [k: string]: ValidationRule | ValidationRule[] } => {
|
||||
const accountFormRule = unref(getAccountFormRule);
|
||||
const passwordFormRule = unref(getPasswordFormRule);
|
||||
const smsFormRule = unref(getSmsFormRule);
|
||||
const mobileFormRule = unref(getMobileFormRule);
|
||||
|
||||
const mobileRule = {
|
||||
sms: smsFormRule,
|
||||
mobile: mobileFormRule,
|
||||
};
|
||||
switch (unref(currentState)) {
|
||||
// register form rules
|
||||
case LoginStateEnum.REGISTER:
|
||||
return {
|
||||
account: accountFormRule,
|
||||
password: passwordFormRule,
|
||||
confirmPassword: [
|
||||
{ validator: validateConfirmPassword(formData?.password), trigger: 'change' },
|
||||
],
|
||||
policy: [{ validator: validatePolicy, trigger: 'change' }],
|
||||
...mobileRule,
|
||||
};
|
||||
|
||||
// reset password form rules
|
||||
case LoginStateEnum.RESET_PASSWORD:
|
||||
return {
|
||||
account: accountFormRule,
|
||||
...mobileRule,
|
||||
};
|
||||
|
||||
// mobile form rules
|
||||
case LoginStateEnum.MOBILE:
|
||||
return mobileRule;
|
||||
|
||||
// login form rules
|
||||
default:
|
||||
return {
|
||||
account: accountFormRule,
|
||||
password: passwordFormRule,
|
||||
};
|
||||
}
|
||||
});
|
||||
return { getFormRules };
|
||||
}
|
||||
|
||||
function createRule(message: string): ValidationRule[] {
|
||||
return [
|
||||
{
|
||||
required: true,
|
||||
message,
|
||||
trigger: 'change',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
|
@ -153,6 +153,7 @@ export interface GlobConfig {
|
|||
export interface GlobEnvConfig {
|
||||
// Site title
|
||||
VITE_GLOB_APP_TITLE: string;
|
||||
VITE_GLOB_APP_EN_TITLE: string;
|
||||
// Service interface url
|
||||
VITE_GLOB_API_URL: string;
|
||||
// Service interface url prefix
|
||||
|
|
|
|||
Loading…
Reference in New Issue