reactor:优化锁频;

src/layout/lockScreen/index.vue

@@ -1,7 +1,11 @@
 <template>
 	<div v-show="state.isShowLockScreen">
 		<div class="layout-lock-screen-mask"></div>
-		<div class="layout-lock-screen-img" :class="{ 'layout-lock-screen-filter': state.isShowLoockLogin }"></div>
+		<div
+			class="layout-lock-screen-img"
+			:class="{ 'layout-lock-screen-filter': state.isShowLockLogin }"
+			:style="{ backgroundImage: `url(${themeConfig.loginImage})` }"
+		></div>
 		<div class="layout-lock-screen">
 			<div
 				class="layout-lock-screen-date"
@@ -15,9 +19,9 @@
 			>
 				<div class="layout-lock-screen-date-box">
 					<div class="layout-lock-screen-date-box-time">
-						{{ state.time.hm }}:<span>{{ state.time.s }}</span>
+						{{ formatDate(now, 'HH:MM:SS') }}
 					</div>
-					<div class="layout-lock-screen-date-box-info">{{ state.time.mdq }}</div>
+					<div class="layout-lock-screen-date-box-info">{{ formatDate(now, 'YYYY-mm-dd WWW') }}</div>
 				</div>
 				<div class="layout-lock-screen-date-top">
 					<SvgIcon name="ele-Top" />
@@ -25,31 +29,28 @@
 				</div>
 			</div>
 			<transition name="el-zoom-in-center">
-				<div v-show="state.isShowLoockLogin" class="layout-lock-screen-login">
+				<div v-show="state.isShowLockLogin" class="layout-lock-screen-login">
 					<div class="layout-lock-screen-login-box">
 						<div class="layout-lock-screen-login-box-name">{{ userInfos.name }}</div>
+
 						<div class="layout-lock-screen-login-box-value">
 							<el-input
 								placeholder="请填写密码"
 								ref="layoutLockScreenInputRef"
 								v-model="state.lockScreenPassword"
 								@keyup.enter.native.stop="onLockScreenSubmit()"
-                clearable
+								clearable
 							>
 								<template #append>
 									<el-button @click="onLockScreenSubmit">
-										<el-icon class="el-input__icon">
-											<ele-Right />
-										</el-icon>
+										<SvgIcon name="ele-Right" class="el-input__icon" />
 									</el-button>
 								</template>
 							</el-input>
 						</div>
 					</div>
 					<div class="layout-lock-screen-login-icon">
-						<!-- <SvgIcon name="ele-Microphone" :size="20" />
-						<SvgIcon name="ele-AlarmClock" :size="20" /> -->
-						<SvgIcon name="ele-SwitchButton" size="20px" @click="fogetPwd" />
+						<SvgIcon name="ele-SwitchButton" size="20px" @click="forgetPwd" />
 					</div>
 				</div>
 			</transition>
@@ -58,54 +59,42 @@
 </template>
 
 <script setup lang="ts" name="layoutLockScreen">
-import { nextTick, onMounted, onBeforeUnmount, reactive, ref } from 'vue';
-import {formatDate} from '@/utils/formatTime';
-import {Cookie, Local, Session} from '@/utils/storage';
-import {storeToRefs} from 'pinia';
-import {useThemeConfig} from '@/stores/themeConfig';
-import {useUserInfo} from '@/stores/userInfo';
-import {ElMessage, ElMessageBox} from 'element-plus';
+import { nextTick, onMounted, reactive, ref } from 'vue';
+import { formatDate } from '@/utils/formatTime';
+import { Cookie, Local, Session } from '@/utils/storage';
+import { storeToRefs } from 'pinia';
+import { useThemeConfig } from '@/stores/themeConfig';
+import { useUserInfo } from '@/stores/userInfo';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { useNow } from '@vueuse/core';
 
 // 定义接口来定义对象的类型
 interface LockScreenState {
 	transparency: number;
 	downClientY: number;
 	moveDifference: number;
-	isShowLoockLogin: boolean;
+	isShowLockLogin: boolean;
 	isFlags: boolean;
 	querySelectorEl: HTMLElement | string;
-	time: {
-		hm: string;
-		s: string;
-		mdq: string;
-	};
-	setIntervalTime: number;
 	isShowLockScreen: boolean;
-	isShowLockScreenIntervalTime: number;
 	lockScreenPassword: string;
 }
 
 // 定义变量内容
+const now = useNow(); // 获取当前时间
 const layoutLockScreenInputRef = ref<RefType>();
 const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
 const storesUserInfo = useUserInfo();
-const {userInfos} = storeToRefs(storesUserInfo);
+const { userInfos } = storeToRefs(storesUserInfo);
 const state = reactive<LockScreenState>({
 	transparency: 1,
 	downClientY: 0,
 	moveDifference: 0,
-	isShowLoockLogin: false,
+	isShowLockLogin: false,
 	isFlags: false,
 	querySelectorEl: '',
-	time: {
-		hm: '',
-		s: '',
-		mdq: '',
-	},
-	setIntervalTime: 0,
 	isShowLockScreen: false,
-	isShowLockScreenIntervalTime: 0,
 	lockScreenPassword: '',
 });
 // 鼠标按下
@@ -117,14 +106,14 @@ const onDown = (down: any) => {
 const onMove = (move: any) => {
 	if (state.isFlags) {
 		const el = <HTMLElement>state.querySelectorEl;
-		const opacitys = (state.transparency -= 1 / 200);
+		const opacity = (state.transparency -= 1 / 200);
 		if (move.touches) {
 			state.moveDifference = move.touches[0].clientY - state.downClientY;
 		} else {
 			state.moveDifference = move.clientY - state.downClientY;
 		}
 		if (state.moveDifference >= 0) return false;
-		el.setAttribute('style', `top:${state.moveDifference}px;cursor:pointer;opacity:${opacitys};`);
+		el.setAttribute('style', `top:${state.moveDifference}px;cursor:pointer;opacity:${opacity};`);
 		if (state.moveDifference < -400) {
 			el.setAttribute('style', `top:${-el.clientHeight}px;cursor:pointer;transition:all 0.3s ease;`);
 			state.moveDifference = -el.clientHeight;
@@ -133,7 +122,7 @@ const onMove = (move: any) => {
 			}, 300);
 		}
 		if (state.moveDifference === -el.clientHeight) {
-			state.isShowLoockLogin = true;
+			state.isShowLockLogin = true;
 			layoutLockScreenInputRef.value.focus();
 		}
 	}
@@ -153,23 +142,10 @@ const initGetElement = () => {
 		state.querySelectorEl = layoutLockScreenDateRef.value;
 	});
 };
-// 时间初始化
-const initTime = () => {
-	state.time.hm = formatDate(new Date(), 'HH:MM');
-	state.time.s = formatDate(new Date(), 'SS');
-	state.time.mdq = formatDate(new Date(), 'mm月dd日，WWW');
-};
-// 时间初始化定时器
-const initSetTime = () => {
-	initTime();
-	state.setIntervalTime = window.setInterval(() => {
-		initTime();
-	}, 1000);
-};
 // 锁屏时间定时器
 const initLockScreen = () => {
-  state.isShowLockScreen = true;
-  setLocalThemeConfig();
+	state.isShowLockScreen = true;
+	setLocalThemeConfig();
 };
 // 存储布局配置
 const setLocalThemeConfig = () => {
@@ -181,14 +157,14 @@ const onLockScreenSubmit = () => {
 	if (Session.get('lockPwd') != state.lockScreenPassword) {
 		ElMessage({
 			message: '锁屏密码错误，请重试',
-			type: 'warning',
+			type: 'error',
 		});
 		return;
 	}
-  themeConfig.value.isLockScreen = false;
-  Local.set('themeConfig', themeConfig.value);
+	themeConfig.value.isLockScreen = false;
+	Local.set('themeConfig', themeConfig.value);
 };
-const fogetPwd = () => {
+const forgetPwd = () => {
 	ElMessageBox.confirm(`忘记密码重新进入系统，是否继续?`, '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
@@ -201,8 +177,8 @@ const fogetPwd = () => {
 			setLocalThemeConfig();
 			// 清除缓存/token等
 			Session.clear();
-      Cookie.clear();
-      Local.clear();
+			Cookie.clear();
+			Local.clear();
 			window.location.reload();
 		})
 		.catch(() => {});
@@ -210,15 +186,8 @@ const fogetPwd = () => {
 // 页面加载时
 onMounted(() => {
 	initGetElement();
-	initSetTime();
 	initLockScreen();
 });
-// 页面卸载时
-onBeforeUnmount(() => {
-	window.clearInterval(state.setIntervalTime);
-	window.clearInterval(state.isShowLockScreenIntervalTime);
-});
-const bgImg = themeConfig.value.loginImage;
 </script>
 
 <style scoped lang="scss">
@@ -242,8 +211,7 @@ const bgImg = themeConfig.value.loginImage;
 
 .layout-lock-screen-img {
 	@extend .layout-lock-screen-fixed;
-  background-image: v-bind(bgImg);
-  background-size: calc(100vw + 1px) calc(100vh + 1px);
+	background-size: calc(100vw + 1px) calc(100vh + 1px);
 	z-index: 99;
 }
 
@@ -389,16 +357,4 @@ const bgImg = themeConfig.value.loginImage;
 	}
 }
 
-:deep(.el-input-group__append) {
-	background: var(--el-color-white);
-	padding: 0px 15px;
-}
-
-:deep(.el-input__inner) {
-	border-right-color: var(--el-border-color-extra-light);
-
-	&:hover {
-		border-color: var(--el-border-color-extra-light);
-	}
-}
 </style>