fix: 锁屏页面重构

src/components/LockScreen/index.vue

@@ -4,35 +4,30 @@ import useI18n from '@/hooks/useI18n';
 import { message } from 'ant-design-vue/lib';
 import { getToken } from '@/plugins/auth-token';
 import useUserStore from '@/store/modules/user';
-import { localGet, localSet } from '@/utils/cache-local-utils';
+import useLockedStore from '@/store/modules/locked';
 import { getConfigKey } from '@/api/system/config';
-import { CACHE_LOCAL_LOCK } from '@/constants/cache-keys-constants';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { useRouter } from 'vue-router';
-
+const lockedStore = useLockedStore();
 const userStore = useUserStore();
 const router = useRouter();
 const { t } = useI18n();
-const isLocked = ref(false);
+
 const password = ref('');
 /**设置定时器ID */
 let timeoutDuration = 10 * 60 * 1000; // 设置超时时间为10分钟，单位为毫秒
-let timeoutId: any | null = null;
+let timeoutId: any = null;
 
+// 超时锁屏
 function resetTimeout() {
   if (timeoutId) {
     clearTimeout(timeoutId);
   }
   timeoutId = setTimeout(() => {
-    fnLock();
+    lockedStore.fnLock('lock', true);
   }, timeoutDuration);
 }
 
-function fnLock() {
-  isLocked.value = true;
-  localSet(CACHE_LOCAL_LOCK, `${isLocked.value}`);
-}
-
 /**解锁 */
 function handleUnlock() {
   let lockFrom: any = {};
@@ -42,8 +37,7 @@ function handleUnlock() {
     if (res.code === RESULT_CODE_SUCCESS) {
       message.success(t('components.LockScreen.validSucc'), 3);
       password.value = '';
-      isLocked.value = false;
-      localSet(CACHE_LOCAL_LOCK, `${isLocked.value}`);
+      lockedStore.fnLock('lock', false);
     } else {
       message.error(t('components.LockScreen.validError'), 3);
     }
@@ -52,6 +46,7 @@ function handleUnlock() {
 
 /**返回登录界面 */
 function backLogin() {
+  lockedStore.fnLock('lock', false);
   userStore.fnLogOut().finally(() => router.push({ name: 'Login' }));
 }
 
@@ -59,6 +54,7 @@ onMounted(() => {
   getConfigKey('sys.lockTime')
     .then(res => {
       if (res.code === RESULT_CODE_SUCCESS && res.data) {
+        lockedStore.lockTimeout = res.data;
         timeoutDuration = res.data * 1000;
       }
     })
@@ -69,9 +65,9 @@ onMounted(() => {
         window.addEventListener('mousemove', resetTimeout);
         window.addEventListener('keydown', resetTimeout);
       }
-      const lockStr = localGet(CACHE_LOCAL_LOCK) || '';
-      if (lockStr && getToken()) {
-        isLocked.value = Boolean(lockStr);
+      // 本地锁定同时是登录状态
+      if (lockedStore.isLocked && getToken()) {
+        lockedStore.fnLock('lock', true);
       }
     });
 });
@@ -84,14 +80,11 @@ onUnmounted(() => {
 });
 </script>
 <template>
-  <a-button type="text" @click="fnLock">
-    <template #icon><lock-outlined /></template>
-  </a-button>
-
   <a-modal
-    v-model:visible="isLocked"
+    v-model:visible="lockedStore.isLocked"
     get-container="#app"
     :footer="null"
+    :zIndex="1008"
     :closable="false"
     :keyboard="false"
     :centered="true"