新增界面超时或手动 锁定功能

src/components/LockScreen/index.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { ref, toRaw, onMounted, onUnmounted } from 'vue';
+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, localRemove } from '@/utils/cache-local-utils';
+import { getConfigKey } from '@/api/system/config';
+import { CACHE_LOCAL_LOCK } from '@/constants/cache-keys-constants';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+
+const { t } = useI18n();
+const isLocked = ref(false);
+const password = ref('');
+/**设置定时器ID */
+let timeoutDuration = 10 * 60 * 1000; // 设置超时时间为10分钟，单位为毫秒
+let timeoutId: any | null = null;
+
+function resetTimeout() {
+  if (timeoutId) {
+    clearTimeout(timeoutId);
+  }
+  timeoutId = setTimeout(() => {
+    fnLock();
+  }, timeoutDuration);
+}
+
+function fnLock() {
+  isLocked.value = true;
+  localSet(CACHE_LOCAL_LOCK, `${isLocked.value}`);
+}
+
+/**解锁 */
+function handleUnlock() {
+  let lockFrom: any = {};
+  lockFrom.username = useUserStore().userName;
+  lockFrom.password = password.value;
+  useUserStore()
+    .fnLogin(toRaw(lockFrom))
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS) {
+        message.success(t('components.LockScreen.validSucc'), 3);
+        password.value = '';
+        isLocked.value = false;
+        localSet(CACHE_LOCAL_LOCK, `${isLocked.value}`);
+
+      } else {
+        message.error(t('components.LockScreen.validError'), 3);
+      }
+    });
+}
+
+onMounted(() => {
+  getConfigKey('sys.lockTime')
+    .then(res => {
+      if (res.code === RESULT_CODE_SUCCESS && res.data) {
+        timeoutDuration = res.data;
+      }
+    })
+    .finally(() => {
+      resetTimeout();
+      if (localGet(CACHE_LOCAL_LOCK) && getToken()) {
+        isLocked.value = localGet(CACHE_LOCAL_LOCK) === 'false' ? false : true;
+      }
+    });
+});
+
+/**组件实例被卸载之后调用 */
+onUnmounted(() => {
+  if (timeoutId) {
+    clearTimeout(timeoutId);
+  }
+  localRemove(CACHE_LOCAL_LOCK);
+});
+
+// 监听用户的操作，重置超时时间
+window.addEventListener('mousemove', resetTimeout);
+window.addEventListener('keydown', resetTimeout);
+</script>
+<template>
+  <a-button type="text" @click="fnLock">
+    <template #icon><lock-outlined /></template>
+  </a-button>
+
+  <template v-if="isLocked">
+    <div class="lock-screen">
+      <div class="lock-screen-content">
+        <h1><lock-filled style="font-size: 50px" /></h1>
+        <a-input
+          type="password"
+          v-model:value="password"
+          placeholder="Enter your password"
+        />
+        <a-button @click="handleUnlock">
+          <template #icon><right-circle-filled /></template>
+        </a-button>
+      </div>
+    </div>
+  </template>
+</template>
+
+<style lang="less" scoped>
+.lock-screen-content {
+  text-align: center;
+  background-color: rgba(255, 255, 255, 0.8);
+  padding: 20px;
+  border-radius: 10px;
+}
+.lock-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  z-index: 9999;
+  backdrop-filter: blur(10px); /* 添加模糊效果 */
+}
+.lock-screen-content input {
+  margin: 10px 0;
+  padding: 5px;
+  width: 200px;
+}
+.lock-screen button {
+  margin-left: 5px;
+  padding: 5px 10px;
+  font-size: 12px;
+  margin-right: 12px;
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+</style>

src/constants/cache-keys-constants.ts

@@ -9,3 +9,6 @@ export const CACHE_LOCAL_PRIMARY_COLOR = 'cache:local:primaryColor';
 
 /**本地缓存-多语言 */
 export const CACHE_LOCAL_I18N = 'cache:local:i18n';
+
+/**本地缓存-锁屏设置 */
+export const CACHE_LOCAL_LOCK = 'cache:local:Lock';

src/layouts/components/RightContent.vue

@@ -6,6 +6,7 @@ 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';
 const { isFullscreen, toggle } = useFullscreen();
 const { t, changeLocale, optionsLocale } = useI18n();
 const userStore = useUserStore();
@@ -61,7 +62,7 @@ function fnChangeLocale(e: any) {
         </a-badge>
       </template>
     </a-button>
-
+    <LockScreen />
     <a-tooltip placement="bottom">
       <template #title>{{ t('loayouts.rightContent.helpDoc') }}</template>
       <a-button type="text" @click="fnClickHelpDoc()">