feat: 重构锁屏功能
This commit is contained in:
TsMask
138
src/components/GlobalMask/index.vue
Normal file
138
src/components/GlobalMask/index.vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, computed } from 'vue';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import useMaskStore from '@/store/modules/mask';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useThrottleFn } from '@vueuse/core';
|
||||
import { getConfigKey } from '@/api/system/config';
|
||||
const maskStore = useMaskStore();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
/**显示遮罩 */
|
||||
const isVisible = computed(() => !['none', 'lock'].includes(maskStore.type));
|
||||
|
||||
// 等待指定的时间后触发事件的函数
|
||||
function idleTimeout(time: number, callback: Function) {
|
||||
if (time === 0) return;
|
||||
let timeoutId: any;
|
||||
|
||||
function resetTimer() {
|
||||
clearTimeout(timeoutId);
|
||||
timeoutId = setTimeout(callback, time);
|
||||
}
|
||||
|
||||
// 监听浏览器标签是否活动
|
||||
window.addEventListener('blur', useThrottleFn(resetTimer, 300));
|
||||
window.addEventListener('focus', useThrottleFn(resetTimer, 300));
|
||||
document.addEventListener('visibilitychange', useThrottleFn(resetTimer, 300));
|
||||
|
||||
// 初始化定时器
|
||||
resetTimer();
|
||||
}
|
||||
|
||||
/**组件实例挂载之后调用 */
|
||||
onMounted(() => {
|
||||
// 本地锁定类型设置;
|
||||
maskStore.handleMaskType(maskStore.type);
|
||||
getConfigKey('sys.lockTime')
|
||||
.then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS && res.data) {
|
||||
maskStore.lockTimeout = +res.data;
|
||||
}
|
||||
maskStore.handleMaskType(maskStore.type);
|
||||
// 是锁屏的调整到页面
|
||||
if (maskStore.type === 'lock') {
|
||||
maskStore.handleMaskType('lock');
|
||||
router.push({ name: 'LockScreen', query: { redirect: route.path } });
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
// 无操作x秒后跳转锁屏
|
||||
idleTimeout(maskStore.lockTimeout * 1000, () => {
|
||||
if (route.name === 'LockScreen') return;
|
||||
maskStore.handleMaskType('lock');
|
||||
router.push({ name: 'LockScreen', query: { redirect: route.path } });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
/**组件实例被卸载之后调用 */
|
||||
onUnmounted(() => {});
|
||||
</script>
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="isVisible"
|
||||
get-container="#app"
|
||||
:footer="null"
|
||||
:zIndex="1008"
|
||||
:closable="false"
|
||||
:keyboard="false"
|
||||
:centered="true"
|
||||
:maskClosable="false"
|
||||
:maskStyle="{
|
||||
backdropFilter: 'blur(10px)',
|
||||
WebkitBackdropFilter: 'blur(10px)',
|
||||
}"
|
||||
wrapClassName="lock-screen"
|
||||
:wrap-style="{
|
||||
background: 'rgba(0, 0, 0, 0.85)',
|
||||
}"
|
||||
>
|
||||
<!-- 锁屏-OMC重启升级 -->
|
||||
<div class="lock-screen_reload" v-if="maskStore.type === 'reload'">
|
||||
<LoadingOutlined style="font-size: 56px" />
|
||||
<div class="text">
|
||||
{{ t('components.LockScreen.backReload') }}
|
||||
</div>
|
||||
<div class="desc">
|
||||
{{ t('components.LockScreen.backReload2') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 锁屏-OMC系统重置 -->
|
||||
<div class="lock-screen_reload" v-if="maskStore.type === 'reset'">
|
||||
<LoadingOutlined style="font-size: 56px" />
|
||||
<div class="text">
|
||||
{{ t('components.LockScreen.systemReset') }}
|
||||
</div>
|
||||
<div class="desc">
|
||||
{{ t('components.LockScreen.systemReset2') }}
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.lock-screen_reload {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
|
||||
color: #fff;
|
||||
|
||||
& .text {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 4px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
& .desc {
|
||||
margin-top: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.lock-screen {
|
||||
.ant-modal-content {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,230 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, toRaw, onMounted, onUnmounted } from 'vue';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
import { message } from 'ant-design-vue/lib';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
import useLockedStore from '@/store/modules/locked';
|
||||
import { getConfigKey } from '@/api/system/config';
|
||||
import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { computed } from 'vue';
|
||||
const lockedStore = useLockedStore();
|
||||
const userStore = useUserStore();
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
|
||||
const password = ref('');
|
||||
/**设置定时器ID */
|
||||
let timeoutDuration = 10 * 60 * 1000; // 设置超时时间为10分钟，单位为毫秒
|
||||
let timeoutId: any = null;
|
||||
|
||||
// 超时锁屏
|
||||
function resetTimeout() {
|
||||
if (timeoutId) {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
timeoutId = setTimeout(() => {
|
||||
lockedStore.fnLock('lock');
|
||||
}, timeoutDuration);
|
||||
}
|
||||
|
||||
/**解锁 */
|
||||
function handleUnlock() {
|
||||
let lockFrom: any = {};
|
||||
lockFrom.username = userStore.userName;
|
||||
lockFrom.password = password.value;
|
||||
userStore.fnLogin(toRaw(lockFrom)).then(res => {
|
||||
if (res.code === RESULT_CODE_SUCCESS) {
|
||||
message.success(t('components.LockScreen.validSucc'), 3);
|
||||
password.value = '';
|
||||
lockedStore.fnLock('none');
|
||||
} else {
|
||||
message.error(t('components.LockScreen.validError'), 3);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**返回登录界面 */
|
||||
function backLogin() {
|
||||
lockedStore.fnLock('none');
|
||||
userStore.fnLogOut().finally(() => router.push({ name: 'Login' }));
|
||||
}
|
||||
|
||||
const isLocked = computed(() => lockedStore.type !== 'none');
|
||||
|
||||
onMounted(() => {
|
||||
// 本地锁定类型设置;
|
||||
lockedStore.fnLock(lockedStore.type);
|
||||
// getConfigKey('sys.lockTime')
|
||||
// .then(res => {
|
||||
// if (res.code === RESULT_CODE_SUCCESS && res.data) {
|
||||
// lockedStore.lockTimeout = res.data;
|
||||
// timeoutDuration = res.data * 1000;
|
||||
// }
|
||||
// // 本地锁定类型设置
|
||||
// lockedStore.fnLock(lockedStore.type);
|
||||
// })
|
||||
// .finally(() => {
|
||||
// if (timeoutDuration !== 0) {
|
||||
// resetTimeout();
|
||||
// // 监听用户的操作，重置超时时间
|
||||
// window.addEventListener('mousemove', resetTimeout);
|
||||
// window.addEventListener('keydown', resetTimeout);
|
||||
// }
|
||||
// });
|
||||
});
|
||||
|
||||
/**组件实例被卸载之后调用 */
|
||||
onUnmounted(() => {
|
||||
// if (timeoutId) {
|
||||
// clearTimeout(timeoutId);
|
||||
// }
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<a-modal
|
||||
v-model:visible="isLocked"
|
||||
get-container="#app"
|
||||
:footer="null"
|
||||
:zIndex="1008"
|
||||
:closable="false"
|
||||
:keyboard="false"
|
||||
:centered="true"
|
||||
:maskClosable="false"
|
||||
:maskStyle="{
|
||||
backdropFilter: 'blur(10px)',
|
||||
WebkitBackdropFilter: 'blur(10px)',
|
||||
}"
|
||||
wrapClassName="lock-screen"
|
||||
:wrap-style="{
|
||||
background: 'rgba(0, 0, 0, 0.85)',
|
||||
}"
|
||||
>
|
||||
<!-- 锁屏-登录 -->
|
||||
<div class="lock-screen_login" v-if="lockedStore.type === 'lock'">
|
||||
<div class="lock-screen_login-user">
|
||||
<a-avatar
|
||||
shape="circle"
|
||||
:size="100"
|
||||
:src="userStore.getAvatar"
|
||||
:alt="userStore.userName"
|
||||
></a-avatar>
|
||||
<span class="nick">
|
||||
{{ userStore.nickName }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="lock-screen_login-from">
|
||||
<a-input-group compact>
|
||||
<a-input
|
||||
type="password"
|
||||
v-model:value="password"
|
||||
:placeholder="t('components.LockScreen.inputPlacePwd')"
|
||||
:maxlength="32"
|
||||
style="width: calc(100% - 50px)"
|
||||
@keyup.enter="handleUnlock"
|
||||
/>
|
||||
<a-button type="primary" @click="handleUnlock">
|
||||
<LoginOutlined />
|
||||
</a-button>
|
||||
</a-input-group>
|
||||
<a-button type="text" class="logout" @click="backLogin">
|
||||
{{ t('components.LockScreen.backLogin') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 锁屏-OMC重启升级 -->
|
||||
<div class="lock-screen_reload" v-if="lockedStore.type === 'reload'">
|
||||
<LoadingOutlined style="font-size: 56px" />
|
||||
<div class="text">
|
||||
{{ t('components.LockScreen.backReload') }}
|
||||
</div>
|
||||
<div class="desc">
|
||||
{{ t('components.LockScreen.backReload2') }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 锁屏-OMC系统重置 -->
|
||||
<div class="lock-screen_reload" v-if="lockedStore.type === 'reset'">
|
||||
<LoadingOutlined style="font-size: 56px" />
|
||||
<div class="text">
|
||||
{{ t('components.LockScreen.systemReset') }}
|
||||
</div>
|
||||
<div class="desc">
|
||||
{{ t('components.LockScreen.systemReset2') }}
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.lock-screen_login {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
|
||||
&-user {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.nick {
|
||||
font-size: 28px;
|
||||
max-width: 164px;
|
||||
white-space: nowrap;
|
||||
text-align: start;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&-from {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
width: 256px;
|
||||
margin-top: 30px;
|
||||
|
||||
.logout {
|
||||
margin-top: 8px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
|
||||
&:hover {
|
||||
color: var(--ant-primary-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lock-screen_reload {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
|
||||
color: #fff;
|
||||
|
||||
& .text {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 4px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
& .desc {
|
||||
margin-top: 8px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less">
|
||||
.lock-screen {
|
||||
.ant-modal-content {
|
||||
background-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user