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"

src/hooks/useLoading.ts

@@ -1,16 +0,0 @@
-import { ref, inject, provide } from 'vue';
-
-const INJECT_LOADING_KEY = Symbol('loading_store');
-
-export const createLoading = (v = false) => {
-  const loading = ref<boolean>(v);
-  const change = (bool: boolean) => {
-    loading.value = bool;
-  };
-  provide(INJECT_LOADING_KEY, loading);
-  return [loading, change];
-};
-
-export const useLoading = () => {
-  return inject(INJECT_LOADING_KEY);
-};

src/i18n/locales/en-US.ts

@@ -169,6 +169,8 @@ export default {
       helpDoc: 'Doc',
     },
     rightContent: {
+      lock: "Lock Screen",
+      lockTip: "Confirmed to perform a lock screen?",
       helpDoc: "System User Documentation",
       fullscreen: "Full Screen",
       logout: "Logout",
@@ -230,7 +232,7 @@ export default {
       tabPane2: 'Login with phone number',
       registerBtn: 'Register an account',
       loginBtn: 'Sign In',
-      loginSuccess: 'Login successful',
+      loginSuccess: 'Login Successful',
       loginMethod: 'Other login methods:',
       loginMethodWX: 'WeChat Scan Login',
       loginMethodQQ: 'QQ Scan Code Login',

src/i18n/locales/zh-CN.ts

@@ -169,6 +169,8 @@ export default {
       helpDoc: '使用手册',
     },
     rightContent: {
+      lock: "锁屏",
+      lockTip: "确认要进行锁屏吗？",
       helpDoc: "系统使用文档",
       fullscreen: "全屏显示",
       logout: "退出登录",

src/layouts/BasicLayout.vue

@@ -308,6 +308,9 @@ document.addEventListener('visibilitychange', function () {
         </transition>
       </RouterView>
 
+      <!-- 锁屏遮罩 -->
+      <LockScreen />
+
       <!--插槽-内容底部-->
       <template #footerRender="{ width }">
         <footer class="footer">

src/layouts/components/RightContent.vue

@@ -1,14 +1,16 @@
 <script setup lang="ts">
 import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
+import Modal from 'ant-design-vue/lib/modal/Modal';
 import { useRouter } from 'vue-router';
 import { useFullscreen } from '@vueuse/core';
 import useI18n from '@/hooks/useI18n';
 import useAppStore from '@/store/modules/app';
 import useUserStore from '@/store/modules/user';
 import useAlarmStore from '@/store/modules/alarm';
-import LockScreen from '@/components/LockScreen/index.vue';
+import useLockedStore from '@/store/modules/locked';
 const { isFullscreen, toggle } = useFullscreen();
 const { t, changeLocale, optionsLocale } = useI18n();
+const lockedStore = useLockedStore();
 const userStore = useUserStore();
 const appStore = useAppStore();
 const router = useRouter();
@@ -28,6 +30,17 @@ function fnClick({ key }: MenuInfo) {
   }
 }
 
+/**锁屏按钮提示 */
+function fnClickLock() {
+  Modal.confirm({
+    title: t('common.tipTitle'),
+    content: t('loayouts.rightContent.lockTip'),
+    onOk() {
+      lockedStore.fnLock('lock', true);
+    },
+  });
+}
+
 /**告警数按钮提示跳转 */
 function fnClickAlarm() {
   router.push({ name: 'ActiveAlarm_2088' });
@@ -62,7 +75,16 @@ function fnChangeLocale(e: any) {
         </a-badge>
       </template>
     </a-button>
-    <LockScreen />
+
+    <a-tooltip placement="bottom">
+      <template #title>{{ t('loayouts.rightContent.lock') }}</template>
+      <a-button type="text" @click="fnClickLock">
+        <template #icon>
+          <LockOutlined />
+        </template>
+      </a-button>
+    </a-tooltip>
+
     <a-tooltip placement="bottom">
       <template #title>{{ t('loayouts.rightContent.helpDoc') }}</template>
       <a-button type="text" @click="fnClickHelpDoc()">

src/plugins/auth-token.ts

@@ -1,6 +1,6 @@
 import Cookies from 'js-cookie';
 import { TOKEN_COOKIE } from '@/constants/token-constants';
-import { localRemove } from '@/utils/cache-local-utils';
+import { localRemove, localSet } from '@/utils/cache-local-utils';
 import { CACHE_LOCAL_LOCK } from '@/constants/cache-keys-constants';
 
 /**获取cookis中Token字符串 */
@@ -11,6 +11,7 @@ export function getToken(): string {
 /**设置cookis中Token字符串 */
 export function setToken(token: string): void {
   Cookies.set(TOKEN_COOKIE, token);
+  localSet(CACHE_LOCAL_LOCK, 'false');
 }
 
 /**移除cookis中Token字符串,localStorage中锁屏字符串 */

src/store/modules/locked.ts

@@ -0,0 +1,32 @@
+import { CACHE_LOCAL_LOCK } from '@/constants/cache-keys-constants';
+import { localGet, localSet } from '@/utils/cache-local-utils';
+import { defineStore } from 'pinia';
+
+/**锁屏信息类型 */
+type Locked = {
+  /**锁定状态 */
+  isLocked: boolean;
+  /**锁屏类型 */
+  lockType: 'lock' | 'reload' | 'upgrade';
+  /**超时锁屏时间，秒*/
+  lockTimeout: number;
+};
+
+const useLockedStore = defineStore('locked', {
+  state: (): Locked => ({
+    isLocked: localGet(CACHE_LOCAL_LOCK) === 'true',
+    lockType: 'lock',
+    lockTimeout: 0,
+  }),
+  getters: {},
+  actions: {
+    // 设置锁定
+    async fnLock(type: 'lock' | 'reload' | 'upgrade', v: boolean) {
+      this.lockType = type;
+      this.isLocked = v;
+      localSet(CACHE_LOCAL_LOCK, `${v}`);
+    },
+  },
+});
+
+export default useLockedStore;