mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-27 19:29:04 +08:00
refactor(lock-page): refactor lock page
This commit is contained in:
vben
@@ -1,85 +1,108 @@
|
||||
<template>
|
||||
<div class="lock-page">
|
||||
<div class="lock-page__entry">
|
||||
<div class="lock-page__header">
|
||||
<img src="../../../assets/images/header.jpg" class="lock-page__header-img" />
|
||||
<p class="lock-page__header-name">{{ realName }}</p>
|
||||
<div :class="prefixCls">
|
||||
<div :class="`${prefixCls}__unlock`" @click="handleShowForm(false)" v-show="showDate">
|
||||
<LockOutlined />
|
||||
<span>{{ t('sys.lock.unlock') }}</span>
|
||||
</div>
|
||||
|
||||
<div :class="`${prefixCls}__date`">
|
||||
<div :class="`${prefixCls}__hour`">
|
||||
{{ hour }}
|
||||
<span class="meridiem" v-show="showDate">{{ meridiem }}</span>
|
||||
</div>
|
||||
<BasicForm @register="register" v-if="!getIsNotPwd" />
|
||||
<Alert v-if="errMsgRef" type="error" :message="t('alert')" banner />
|
||||
<div class="lock-page__footer">
|
||||
<a-button type="default" class="mt-2 mr-2" @click="goLogin" v-if="!getIsNotPwd">
|
||||
{{ t('sys.lock.backToLogin') }}
|
||||
</a-button>
|
||||
<a-button type="primary" class="mt-2" @click="unLock(!getIsNotPwd)" :loading="loadingRef">
|
||||
{{ t('sys.lock.entry') }}
|
||||
</a-button>
|
||||
<div :class="`${prefixCls}__minute`">{{ minute }} </div>
|
||||
</div>
|
||||
<transition name="fade-slide">
|
||||
<div :class="`${prefixCls}-entry`" v-show="!showDate">
|
||||
<div :class="`${prefixCls}-entry-content`">
|
||||
<div :class="`${prefixCls}-entry__header`">
|
||||
<img src="/@/assets/images/header.jpg" :class="`${prefixCls}-entry__header-img`" />
|
||||
<p :class="`${prefixCls}-entry__header-name`">{{ realName }}</p>
|
||||
</div>
|
||||
<InputPassword :placeholder="t('sys.lock.placeholder')" v-model:value="password" />
|
||||
<span :class="`${prefixCls}-entry__err-msg`" v-if="errMsgRef">
|
||||
{{ t('sys.lock.alert') }}
|
||||
</span>
|
||||
<div :class="`${prefixCls}-entry__footer`">
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
class="mt-2 mr-2"
|
||||
:disabled="loadingRef"
|
||||
@click="handleShowForm(true)"
|
||||
>
|
||||
{{ t('sys.lock.back') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
type="link"
|
||||
size="small"
|
||||
class="mt-2 mr-2"
|
||||
:disabled="loadingRef"
|
||||
@click="goLogin"
|
||||
>
|
||||
{{ t('sys.lock.backToLogin') }}
|
||||
</a-button>
|
||||
<a-button class="mt-2" type="link" size="small" @click="unLock()" :loading="loadingRef">
|
||||
{{ t('sys.lock.entry') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<div :class="`${prefixCls}__footer-date`">
|
||||
<div class="time" v-show="!showDate">
|
||||
{{ hour }}:{{ minute }} <span class="meridiem">{{ meridiem }}</span>
|
||||
</div>
|
||||
<div class="date"> {{ year }}/{{ month }}/{{ day }} {{ week }} </div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, computed } from 'vue';
|
||||
import { Alert } from 'ant-design-vue';
|
||||
|
||||
import { BasicForm, useForm } from '/@/components/Form';
|
||||
import { Alert, Input } from 'ant-design-vue';
|
||||
|
||||
import { userStore } from '/@/store/modules/user';
|
||||
import { appStore } from '/@/store/modules/app';
|
||||
import { lockStore } from '/@/store/modules/lock';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
|
||||
import { useNow } from './useNow';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
|
||||
import { LockOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LockPage',
|
||||
components: { Alert, BasicForm },
|
||||
components: { Alert, LockOutlined, InputPassword: Input.Password },
|
||||
|
||||
setup() {
|
||||
const passwordRef = ref('');
|
||||
const loadingRef = ref(false);
|
||||
const errMsgRef = ref(false);
|
||||
const showDate = ref(true);
|
||||
|
||||
const { prefixCls } = useDesign('lock-page');
|
||||
|
||||
const { start, stop, ...state } = useNow(true);
|
||||
|
||||
const { t } = useI18n();
|
||||
const [register, { validateFields }] = useForm({
|
||||
showActionButtonGroup: false,
|
||||
schemas: [
|
||||
{
|
||||
field: 'password',
|
||||
label: '',
|
||||
component: 'InputPassword',
|
||||
componentProps: {
|
||||
style: { width: '100%' },
|
||||
placeholder: t('sys.lock.placeholder'),
|
||||
},
|
||||
rules: [{ required: true }],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const realName = computed(() => {
|
||||
const { realName } = userStore.getUserInfoState || {};
|
||||
return realName;
|
||||
});
|
||||
|
||||
const getIsNotPwd = computed(() => {
|
||||
if (!appStore.getLockInfo) {
|
||||
return true;
|
||||
}
|
||||
return appStore.getLockInfo.pwd === undefined;
|
||||
});
|
||||
|
||||
/**
|
||||
* @description: unLock
|
||||
*/
|
||||
async function unLock(valid = true) {
|
||||
let password = '';
|
||||
if (valid) {
|
||||
try {
|
||||
const values = (await validateFields()) as any;
|
||||
password = values.password;
|
||||
} catch (error) {
|
||||
return;
|
||||
}
|
||||
async function unLock() {
|
||||
if (!passwordRef.value) {
|
||||
return;
|
||||
}
|
||||
let password = passwordRef.value;
|
||||
try {
|
||||
loadingRef.value = true;
|
||||
const res = await appStore.unLockAction({ password, valid });
|
||||
const res = await lockStore.unLockAction({ password });
|
||||
errMsgRef.value = !res;
|
||||
} finally {
|
||||
loadingRef.value = false;
|
||||
@@ -88,67 +111,190 @@
|
||||
|
||||
function goLogin() {
|
||||
userStore.loginOut(true);
|
||||
appStore.resetLockInfo();
|
||||
lockStore.resetLockInfo();
|
||||
}
|
||||
|
||||
function handleShowForm(show = false) {
|
||||
showDate.value = show;
|
||||
}
|
||||
|
||||
return {
|
||||
register,
|
||||
getIsNotPwd,
|
||||
goLogin,
|
||||
realName,
|
||||
unLock,
|
||||
errMsgRef,
|
||||
loadingRef,
|
||||
t,
|
||||
prefixCls,
|
||||
showDate,
|
||||
password: passwordRef,
|
||||
handleShowForm,
|
||||
...state,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import (reference) '../../../design/index.less';
|
||||
@prefix-cls: ~'@{namespace}-lock-page';
|
||||
|
||||
.lock-page {
|
||||
.@{prefix-cls} {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 999999;
|
||||
z-index: 3000;
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: url(../../../assets/images/lock-page.jpg) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// background: rgba(23, 27, 41);
|
||||
background: #000;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
justify-content: center;
|
||||
|
||||
&__entry {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
// height: 260px;
|
||||
padding: 80px 50px 50px 50px;
|
||||
margin-right: 50px;
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
&__header {
|
||||
&__unlock {
|
||||
position: absolute;
|
||||
top: -35px;
|
||||
left: calc(50% - 45px);
|
||||
width: auto;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
height: 50px;
|
||||
padding-top: 20px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transform: translate(-50%, 0);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&-img {
|
||||
width: 70px;
|
||||
border-radius: 50%;
|
||||
&__date {
|
||||
display: flex;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&__hour {
|
||||
position: relative;
|
||||
margin-right: 80px;
|
||||
|
||||
.meridiem {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
font-size: 26px;
|
||||
}
|
||||
|
||||
&-name {
|
||||
margin-top: 5px;
|
||||
@media (max-width: @screen-xs) {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer {
|
||||
text-align: center;
|
||||
&__hour,
|
||||
&__minute {
|
||||
display: flex;
|
||||
width: 40%;
|
||||
height: 74%;
|
||||
// font-size: 50em;
|
||||
font-weight: 700;
|
||||
color: #bababa;
|
||||
background: #141313;
|
||||
border-radius: 30px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// .respond-to(large-only, { font-size: 25em;});
|
||||
// .respond-to(large-only, { font-size: 30em;});
|
||||
@media (min-width: @screen-xxxl-min) {
|
||||
font-size: 46em;
|
||||
}
|
||||
@media (min-width: @screen-xl-max) and (max-width: @screen-xxl-max) {
|
||||
font-size: 38em;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-lg-max) and (max-width: @screen-xl-max) {
|
||||
font-size: 30em;
|
||||
}
|
||||
@media (min-width: @screen-md-max) and (max-width: @screen-lg-max) {
|
||||
font-size: 23em;
|
||||
}
|
||||
@media (min-width: @screen-sm-max) and (max-width: @screen-md-max) {
|
||||
font-size: 19em;
|
||||
}
|
||||
@media (min-width: @screen-xs-max) and (max-width: @screen-sm-max) {
|
||||
font-size: 13em;
|
||||
}
|
||||
@media (max-width: @screen-xs) {
|
||||
height: 50%;
|
||||
font-size: 6em;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
&__footer-date {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 50%;
|
||||
font-family: helvetica;
|
||||
color: #bababa;
|
||||
transform: translate(-50%, 0);
|
||||
|
||||
.time {
|
||||
font-size: 50px;
|
||||
|
||||
.meridiem {
|
||||
font-size: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
&-entry {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(10px);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&-content {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
&__header {
|
||||
text-align: center;
|
||||
|
||||
&-img {
|
||||
width: 70px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&-name {
|
||||
margin-top: 5px;
|
||||
font-weight: 500;
|
||||
color: #bababa;
|
||||
}
|
||||
}
|
||||
|
||||
&__err-msg {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
color: @error-color;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
63
src/views/sys/lock/useNow.ts
Normal file
63
src/views/sys/lock/useNow.ts
Normal file
@@ -0,0 +1,63 @@
|
||||
import moment from 'moment';
|
||||
import { reactive, toRefs } from 'vue';
|
||||
import { tryOnMounted, tryOnUnmounted } from '/@/utils/helper/vueHelper';
|
||||
import { useLocaleSetting } from '/@/hooks/setting/useLocaleSetting';
|
||||
|
||||
export function useNow(immediate = true) {
|
||||
const { getLang } = useLocaleSetting();
|
||||
const localData = moment.localeData(getLang.value);
|
||||
let timer: IntervalHandle;
|
||||
|
||||
const state = reactive({
|
||||
year: 0,
|
||||
month: 0,
|
||||
week: '',
|
||||
day: 0,
|
||||
hour: '',
|
||||
minute: '',
|
||||
second: 0,
|
||||
meridiem: '',
|
||||
});
|
||||
|
||||
const update = () => {
|
||||
const now = moment();
|
||||
|
||||
const h = now.format('HH');
|
||||
const m = now.format('mm');
|
||||
const s = now.get('s');
|
||||
|
||||
state.year = now.get('y');
|
||||
state.month = now.get('M');
|
||||
state.week = localData.weekdays()[now.day()];
|
||||
state.day = now.get('D');
|
||||
state.hour = h;
|
||||
state.minute = m;
|
||||
state.second = s;
|
||||
|
||||
state.meridiem = localData.meridiem(Number(h), Number(h), true);
|
||||
};
|
||||
|
||||
function start() {
|
||||
update();
|
||||
clearInterval(timer);
|
||||
timer = setInterval(() => update(), 1000);
|
||||
}
|
||||
|
||||
function stop() {
|
||||
clearInterval(timer);
|
||||
}
|
||||
|
||||
tryOnMounted(() => {
|
||||
immediate && start();
|
||||
});
|
||||
|
||||
tryOnUnmounted(() => {
|
||||
stop();
|
||||
});
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
start,
|
||||
stop,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user