feat: 重构锁屏功能

src/components/GlobalMask/index.vue

@@ -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>

src/components/LockScreen/index.vue

@@ -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>

src/constants/cache-keys-constants.ts

@@ -10,8 +10,11 @@ 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';
+export const CACHE_LOCAL_MASK = 'cache:local:mask';
+
+/**本地缓存-锁屏密码 */
+export const CACHE_LOCAL_LOCK_PASSWD = 'cache:local:lock:passwd';
 
 /**数据缓存表-表格排序 */
 export const CACHE_DB_TABLE_DND = 'tbl_dnd';

src/i18n/locales/en-US.ts

@@ -130,7 +130,7 @@ export default {
       onlyAllow:'Only supports upload file formats',
     },
     LockScreen: {
-      inputPlacePwd:'Please enter login password',
+      inputPlacePwd:'Please enter the lock screen password',
       validSucc:'Validation Passed',
       validError:'Validation Failure',
       backLogin:'Logout to Relogin',
@@ -186,7 +186,9 @@ export default {
     },
     rightContent: {
       lock: "Lock Screen",
-      lockTip: "Confirmed to perform a lock screen?",
+      lockTip: "Confirmation of the lock screen?",
+      lockPasswd: "Unlock Password",
+      lockPasswdTip: "No password can be set",
       helpDoc: "System User Documentation",
       fullscreen: "Full Screen",
       logout: "Logout",

src/i18n/locales/zh-CN.ts

@@ -130,7 +130,7 @@ export default {
       onlyAllow:'只支持上传文件格式',
     },
     LockScreen: {
-      inputPlacePwd:'请输入登录密码',
+      inputPlacePwd:'请输入锁屏密码',
       validSucc:'校验通过',
       validError:'校验失败',
       backLogin:'退出并重新登录',
@@ -187,6 +187,8 @@ export default {
     rightContent: {
       lock: "锁屏",
       lockTip: "确认要进行锁屏吗？",
+      lockPasswd: "解锁密码",
+      lockPasswdTip: "可不设置密码",
       helpDoc: "系统使用文档",
       fullscreen: "全屏显示",
       logout: "退出登录",

src/layouts/BasicLayout.vue

@@ -8,6 +8,7 @@ import {
 } from 'antdv-pro-layout';
 import RightContent from './components/RightContent.vue';
 import Tabs from './components/Tabs.vue';
+import GlobalMask from '@/components/GlobalMask/index.vue';
 import { scriptUrl } from '@/assets/js/icon_font_8d5l8fzk5b87iudi';
 import { computed, reactive, watch, onMounted, onUnmounted } from 'vue';
 import useLayoutStore from '@/store/modules/layout';
@@ -21,6 +22,7 @@ const { proConfig, waterMarkContent } = useLayoutStore();
 import useI18n from '@/hooks/useI18n';
 import { getServerTime } from '@/api';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+
 import { parseDateToStr } from '@/utils/date-utils';
 import { parseUrlPath } from '@/plugins/file-static-url';
 const { t, currentLocale } = useI18n();
@@ -224,10 +226,10 @@ onUnmounted(() => {
       v-model:selectedKeys="layoutState.selectedKeys"
       v-model:openKeys="layoutState.openKeys"
       :menu-data="menuData"
-      :breadcrumb="{ routes: breadcrumb } as any" 
+      :breadcrumb="{ routes: breadcrumb }"
       v-bind="proConfig"
-      :iconfont-url="scriptUrl" 
+      :iconfont-url="scriptUrl"
-      :locale="(fnLocale as any)"
+      :locale="fnLocale"
     >
       <!--插槽-菜单头-->
       <template #menuHeaderRender>
@@ -298,9 +300,6 @@ onUnmounted(() => {
         </transition>
       </RouterView>
 
-      <!-- 锁屏遮罩 -->
-      <LockScreen />
-
       <!--插槽-内容底部-->
       <template #footerRender="{ width }">
         <footer class="footer">
@@ -327,6 +326,9 @@ onUnmounted(() => {
         </footer>
       </template>
     </ProLayout>
+
+    <!-- 全局遮罩 -->
+    <GlobalMask />
   </WaterMark>
 </template>
 

src/layouts/components/RightContent.vue

@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import { MenuInfo } from 'ant-design-vue/lib/menu/src/interface';
-import Modal from 'ant-design-vue/lib/modal/Modal';
+import { useRoute, useRouter } from 'vue-router';
-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 useLockedStore from '@/store/modules/locked';
+import useMaskStore from '@/store/modules/mask';
 import { hasPermissions } from '@/plugins/auth-user';
+import { ref } from 'vue';
 const { isFullscreen, toggle } = useFullscreen();
 const { t, changeLocale, optionsLocale } = useI18n();
-const lockedStore = useLockedStore();
+const maskStore = useMaskStore();
 const userStore = useUserStore();
 const appStore = useAppStore();
+const route = useRoute();
 const router = useRouter();
 
 /**头像展开项点击 */
@@ -31,15 +32,24 @@ function fnClick({ key }: MenuInfo) {
   }
 }
 
+/**锁屏确认 */
+const lockConfirm = ref<boolean>(false);
+/**锁屏密码 */
+const lockPasswd = ref<string>('');
+
 /**锁屏按钮提示 */
 function fnClickLock() {
-  Modal.confirm({
+  lockConfirm.value = true;
-    title: t('common.tipTitle'),
+  lockPasswd.value = '';
-    content: t('loayouts.rightContent.lockTip'),
+  maskStore.lockPasswd = '';
-    onOk() {
+}
-      lockedStore.fnLock('lock');
+
-    },
+/**锁屏确认跳转锁屏页面 */
-  });
+function fnClickLockToPage() {
+  lockConfirm.value = false;
+  maskStore.lockPasswd = lockPasswd.value;
+  maskStore.handleMaskType('lock');
+  router.push({ name: 'LockScreen', query: { redirect: route.path } });
 }
 
 /**告警数按钮提示跳转 */
@@ -78,13 +88,38 @@ function fnChangeLocale(e: any) {
       </template>
     </a-button>
 
-    <a-tooltip placement="bottom" v-if="false">
+    <!-- 锁屏操作 -->
+    <a-tooltip placement="bottom">
       <template #title>{{ t('loayouts.rightContent.lock') }}</template>
-      <a-button type="text" style="color: inherit" @click="fnClickLock">
+      <a-button type="text" style="color: inherit" @click="fnClickLock()">
         <template #icon>
           <LockOutlined />
         </template>
       </a-button>
+      <a-modal
+        :width="400"
+        :mask-closable="false"
+        v-model:visible="lockConfirm"
+        :title="t('loayouts.rightContent.lockTip')"
+        @ok="fnClickLockToPage()"
+      >
+        <a-space>
+          {{ t('loayouts.rightContent.lockPasswd') }}：
+          <a-input-password
+            v-model:value="lockPasswd"
+            :placeholder="t('common.inputPlease')"
+          >
+            <template #prefix>
+              <a-tooltip
+                :title="t('loayouts.rightContent.lockPasswdTip')"
+                placement="topLeft"
+              >
+                <UnlockOutlined />
+              </a-tooltip>
+            </template>
+          </a-input-password>
+        </a-space>
+      </a-modal>
     </a-tooltip>
 
     <a-tooltip placement="bottom">

src/plugins/auth-token.ts

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

src/store/modules/locked.ts

@@ -1,59 +0,0 @@
-import { getSysConf } from '@/api';
-import { CACHE_LOCAL_LOCK } from '@/constants/cache-keys-constants';
-import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import { localGet, localSet } from '@/utils/cache-local-utils';
-import { defineStore } from 'pinia';
-
-/**锁屏信息类型 */
-type Locked = {
-  /**锁屏类型 */
-  type: 'none' | 'lock' | 'reload' | 'reset';
-  /**lock 超时锁屏时间，秒*/
-  lockTimeout: number;
-};
-
-const useLockedStore = defineStore('locked', {
-  state: (): Locked => ({
-    type: (localGet(CACHE_LOCAL_LOCK) || 'none') as Locked['type'],
-    lockTimeout: 0,
-  }),
-  getters: {},
-  actions: {
-    // 重启等待-轮询
-    async relaodWait() {
-      try {
-        const res = await getSysConf();
-        if (res.code === RESULT_CODE_SUCCESS && res.data) {
-          // 延迟5秒
-          setTimeout(() => {
-            this.fnLock('none');
-            window.location.reload();
-          }, 2_000);
-        } else {
-          // 延迟5秒
-          setTimeout(() => {
-            this.relaodWait();
-          }, 5_000);
-        }
-      } catch (error) {
-        // 延迟5秒
-        setTimeout(() => {
-          this.relaodWait();
-        }, 5_000);
-      }
-    },
-    // 设置锁定
-    async fnLock(type: Locked['type']) {
-      this.type = type;
-      localSet(CACHE_LOCAL_LOCK, type);
-      if (type === 'reload') {
-        // 延迟5秒
-        setTimeout(() => {
-          this.relaodWait();
-        }, 5_000);
-      }
-    },
-  },
-});
-
-export default useLockedStore;

src/store/modules/mask.ts

@@ -0,0 +1,70 @@
+import { getSysConf } from '@/api';
+import {
+  CACHE_LOCAL_LOCK_PASSWD,
+  CACHE_LOCAL_MASK,
+} from '@/constants/cache-keys-constants';
+import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
+import { localGet, localRemove, localSet } from '@/utils/cache-local-utils';
+import { defineStore } from 'pinia';
+
+/**全局遮罩信息类型 */
+type MaskStateType = {
+  /**锁屏类型 */
+  type: 'none' | 'lock' | 'reload' | 'reset';
+  /**lock 锁屏密码*/
+  lockPasswd: string;
+  /**lock 超时锁屏时间，秒*/
+  lockTimeout: number;
+};
+
+const useMaskStore = defineStore('mask', {
+  state: (): MaskStateType => ({
+    type: (localGet(CACHE_LOCAL_MASK) || 'none') as MaskStateType['type'],
+    lockPasswd: localGet(CACHE_LOCAL_LOCK_PASSWD) || '',
+    lockTimeout: 0,
+  }),
+  getters: {},
+  actions: {
+    // 检查服务等待-轮询
+    async checkServiceWait() {
+      try {
+        const res = await getSysConf();
+        if (res.code === RESULT_CODE_SUCCESS && res.data) {
+          // 延迟5秒
+          setTimeout(() => {
+            this.handleMaskType('none');
+            window.location.reload();
+          }, 2_000);
+        } else {
+          // 延迟5秒
+          setTimeout(() => {
+            this.checkServiceWait();
+          }, 5_000);
+        }
+      } catch (error) {
+        // 延迟5秒
+        setTimeout(() => {
+          this.checkServiceWait();
+        }, 5_000);
+      }
+    },
+    // 设置遮罩类型
+    async handleMaskType(type: MaskStateType['type']) {
+      this.type = type;
+      localSet(CACHE_LOCAL_MASK, type);
+      if (type === 'reload') {
+        // 延迟5秒
+        setTimeout(() => {
+          this.checkServiceWait();
+        }, 5_000);
+      }
+      if (type === 'lock') {
+        localSet(CACHE_LOCAL_LOCK_PASSWD, this.lockPasswd);
+      } else {
+        localRemove(CACHE_LOCAL_LOCK_PASSWD);
+      }
+    },
+  },
+});
+
+export default useMaskStore;

src/views/configManage/neManage/index.vue

@@ -26,8 +26,8 @@ import TableColumnsDnd from '@/components/TableColumnsDnd/index.vue';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
 import { NE_TYPE_LIST } from '@/constants/ne-constants';
 import useNeInfoStore from '@/store/modules/neinfo';
-import useLockedStore from '@/store/modules/locked';
+import useMaskStore from '@/store/modules/mask';
-const lockedStore = useLockedStore();
+const maskStore = useMaskStore();
 const { t } = useI18n();
 
 /**表格所需option */
@@ -550,7 +550,7 @@ function fnRecordRestart(row: Record<string, any>) {
           if (res.code === RESULT_CODE_SUCCESS) {
             // OMC自升级
             if (row.neType.toLowerCase() === 'omc') {
-              lockedStore.fnLock('reload');
+              maskStore.handleMaskType('reload');
               return;
             }
             message.success({

src/views/configManage/softwareManage/index.vue

@@ -23,8 +23,8 @@ import useI18n from '@/hooks/useI18n';
 import useNeInfoStore from '@/store/modules/neinfo';
 import { FileType } from 'ant-design-vue/lib/upload/interface';
 import { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
-import useLockedStore from '@/store/modules/locked';
+import useMaskStore from '@/store/modules/mask';
-const lockedStore = useLockedStore();
+const maskStore = useMaskStore();
 const { t } = useI18n();
 
 /**查询参数 */
@@ -299,7 +299,7 @@ function fnFileModalOk() {
           if (type === 'run' && from.neType.toLowerCase() === 'omc') {
             if (res.code === RESULT_CODE_SUCCESS) {
               fnFileModalCancel();
-              lockedStore.fnLock('reload');
+              maskStore.handleMaskType('reload');
             } else {
               message.error({
                 content: `${fileModalState.title} ${res.msg}`,

src/views/ne/neInfo/hooks/useNeOptions.ts

@@ -4,12 +4,12 @@ import useI18n from '@/hooks/useI18n';
 import { useRouter } from 'vue-router';
 import { updateNeConfigReload } from '@/api/configManage/configParam';
 import { serviceNeAction } from '@/api/ne/neInfo';
-import useLockedStore from '@/store/modules/locked';
+import useMaskStore from '@/store/modules/mask';
 
 export default function useNeOptions() {
   const router = useRouter();
   const { t } = useI18n();
-  const lockedStore = useLockedStore();
+  const maskStore = useMaskStore();
 
   /**
    * 网元启动
@@ -60,7 +60,7 @@ export default function useNeOptions() {
               // OMC自升级
               if (row.neType.toUpperCase() === 'OMC') {
                 if (res.code === RESULT_CODE_SUCCESS) {
-                  lockedStore.fnLock('reload');
+                  maskStore.handleMaskType('reload');
                 } else {
                   message.error({
                     content: `${res.msg}`,

src/views/ne/neVersion/index.vue

@@ -16,8 +16,8 @@ import { listNeVersion, operateNeVersion } from '@/api/ne/neVersion';
 import { parseDateToStr } from '@/utils/date-utils';
 import useI18n from '@/hooks/useI18n';
 import useDictStore from '@/store/modules/dict';
-import useLockedStore from '@/store/modules/locked';
+import useMaskStore from '@/store/modules/mask';
-const lockedStore = useLockedStore();
+const maskStore = useMaskStore();
 const { t } = useI18n();
 const { getDict } = useDictStore();
 
@@ -338,7 +338,7 @@ function fnRecordVersion(
             // OMC自升级
             if (row.neType.toUpperCase() === 'OMC') {
               if (res.code === RESULT_CODE_SUCCESS) {
-                lockedStore.fnLock('reload');
+                maskStore.handleMaskType('reload');
               } else {
                 message.error(t('views.ne.neVersion.upgradeFail'), 3);
               }

src/views/system/setting/components/system-reset.vue

@@ -3,9 +3,9 @@ import { message } from 'ant-design-vue/lib';
 import { reactive } from 'vue';
 import useI18n from '@/hooks/useI18n';
 import { RESULT_CODE_SUCCESS } from '@/constants/result-constants';
-import useLockedStore from '@/store/modules/locked';
 import { bootloaderReset } from '@/api/system/quick-start/bootloader';
-const lockedStore = useLockedStore();
+import useMaskStore from '@/store/modules/mask';
+const maskStore = useMaskStore();
 const { t } = useI18n();
 
 type StateType = {
@@ -36,13 +36,13 @@ function fnModalVisible() {
 /**对话框提交确认 */
 function fnModalOk() {
   // 发送请求
-  lockedStore.fnLock('reset');
+  maskStore.handleMaskType('reset');
   bootloaderReset().then(res => {
     if (res.code === RESULT_CODE_SUCCESS) {
       fnModalCancel();
-      lockedStore.fnLock('reload');
+      maskStore.handleMaskType('reload');
     } else {
-      lockedStore.fnLock('none');
+      maskStore.handleMaskType('none');
       message.error(res.msg, 3);
       clearInterval(state.timer);
       state.timer = null;

src/views/tool/lockScreen/index.vue

@@ -1,28 +1,17 @@
 <script lang="ts" setup>
 import useAppStore from '@/store/modules/app';
+import useUserStore from '@/store/modules/user';
+import useMaskStore from '@/store/modules/mask';
 import useI18n from '@/hooks/useI18n';
-import { onMounted, ref, computed } from 'vue';
+import { onMounted, ref } from 'vue';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
-import { VuePDF, usePDF } from '@tato30/vue-pdf';
+import { message } from 'ant-design-vue/lib';
-import '@tato30/vue-pdf/style.css';
+const { t } = useI18n();
-import saveAs from 'file-saver';
+const userStore = useUserStore();
-import { parseUrlPath } from '@/plugins/file-static-url';
-const { t, currentLocale } = useI18n();
 const appStore = useAppStore();
+const maskStore = useMaskStore();
 const route = useRoute();
-
+const router = useRouter();
-// 文档地址
-const docUrl = computed(() => {
-  let url = parseUrlPath(appStore.helpDoc);
-  if (url.indexOf('{language}') === -1) {
-    return url;
-  }
-  // 语言参数替换
-  const local = (route.query.language as string) ?? currentLocale.value;
-  const lang = local.split('_')[0];
-  return url.replace('{language}', lang);
-});
-const { pdf, pages } = usePDF(docUrl.value);
 
 /**
  * 国际化翻译转换
@@ -35,186 +24,176 @@ function fnLocale() {
   appStore.setTitle(title);
 }
 
-// annotation层
+const password = ref('');
-function fnAnnotation(obj: any) {
-  const page = obj.data?.referencedPage;
-  if (page && typeof page === 'number') {
-    viewPage.value = page;
-  }
-}
 
-/**视图页数 */
+/**解锁 */
-const viewPage = ref<number>(1);
+function handleUnlock() {
-function fnToPage(value: number) {
+  if (maskStore.lockPasswd === password.value) {
-  if (viewPage.value === value) return;
+    message.success(t('components.LockScreen.validSucc'), 3);
-  viewPage.value = value;
+    password.value = '';
-}
+    maskStore.handleMaskType('none');
-
+    const redirectPath = route.query?.redirect || '/index';
-/**视图缩放 */
+    router.push({ path: redirectPath as string });
-const viewScale = ref<number>(1);
-function fnScaleView(value: number) {
-  viewScale.value += value;
-  if (viewScale.value <= 0.25) {
-    viewScale.value = 0.25;
-    return;
-  }
-  if (viewScale.value > 2) {
-    viewScale.value = 2;
-    return;
-  }
-}
-
-/**文件下载 */
-function fnDownload() {
-  const url = docUrl.value;
-  fetch(url)
-    .then(response => response.blob())
-    .then(blob => {
-      saveAs(blob, t('views.tool.help.fileName'));
-    })
-    .catch(error => {
-      console.error('Error:', error);
-    });
-}
-
-/**系统使用手册跳转 */
-function fnClickHelpDoc() {
-  // 浏览器支持 PDF 预览
-  if (navigator.pdfViewerEnabled) {
-    window.open(docUrl.value, '_blank');
   } else {
-    // 浏览器不支持 PDF 预览
+    message.error(t('components.LockScreen.validError'), 3);
-    alert(t('views.tool.help.pdfViewerErr'));
   }
 }
 
+/**返回登录界面 */
+function handleBackLogin() {
+  maskStore.handleMaskType('none');
+  const redirectPath = route.query?.redirect || '/index';
+  userStore
+    .fnLogOut()
+    .finally(() =>
+      router.push({ name: 'Login', query: { redirect: redirectPath } })
+    );
+}
+
 onMounted(() => {
   fnLocale();
 });
 </script>
 
 <template>
-  <a-row>
+  <div class="container">
-    <a-col :span="24" class="header">
+    <section>
-      <a-space :size="12" align="center">
+      <div class="animation animation1"></div>
-        <div class="header-scale">
+      <div class="animation animation2"></div>
-          <a-button type="default" shape="circle" @click="fnScaleView(-0.25)">
+      <div class="animation animation3"></div>
-            <template #icon><ZoomOutOutlined /></template>
+      <div class="animation animation4"></div>
-          </a-button>
+      <div class="animation animation5"></div>
-          <span>{{ viewScale * 100 }}%</span>
+    </section>
-          <a-button type="default" shape="circle" @click="fnScaleView(0.25)">
-            <template #icon><ZoomInOutlined /></template>
-          </a-button>
-        </div>
-      </a-space>
-      <a-space :size="12" align="center">
-        <a-button type="default" @click="fnClickHelpDoc()">
-          <template #icon><ToTopOutlined /> </template>
-          {{ t('views.tool.help.pdfViewer') }}
-        </a-button>
-        <a-button type="primary" @click="fnDownload()">
-          <template #icon><DownloadOutlined /></template>
-          {{ t('views.tool.help.download') }}
-        </a-button>
-      </a-space>
-    </a-col>
-    <a-col :span="4" class="left">
-      <template v-for="page in pages" :key="page">
-        <div
-          class="left-view"
-          :class="{ 'left-view_action': page === viewPage }"
-          @click="fnToPage(page)"
-        >
-          <VuePDF :pdf="pdf" :page="page" :scale="0.2" text-layer />
-          <div>{{ page }}</div>
-        </div>
-      </template>
-    </a-col>
-    <a-col :span="20" class="right">
-      <div class="right-view">
-        <a-spin size="large" style="margin: 50%" v-if="pages === 0" />
-        <VuePDF
-          v-else
-          :pdf="pdf"
-          :page="viewPage"
-          :scale="viewScale"
-          annotation-layer
-          :annotations-filter="['Link']"
-          @annotation="fnAnnotation"
-        >
-          <a-spin size="large" style="margin: 50%" />
-        </VuePDF>
-      </div>
-    </a-col>
-  </a-row>
 
-  <!-- <a-spin style="margin: 0 50%" v-if="docUrl === '#'" /> -->
+    <!-- 锁屏-登录 -->
-  <!-- <div :style="'height:' + height" v-else>
+    <div class="lock-screen_login">
-    <iframe
+      <div class="lock-screen_login-user">
-      :src="docUrl"
+        <a-avatar
-      frameborder="no"
+          shape="circle"
-      style="width: 100%; height: 100%"
+          :size="100"
-      scrolling="auto"
+          :src="userStore.getAvatar"
-    ></iframe>
+          :alt="userStore.userName"
-  </div> -->
+        ></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="handleBackLogin">
+          {{ t('components.LockScreen.backLogin') }}
+        </a-button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style lang="less" scoped>
-.header {
+.lock-screen_login {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
-  padding: 12px 24px;
+  justify-content: center;
-  background-color: #323639;
+  align-items: center;
-  color: white;
+  background-color: transparent;
-  &-scale {
+
-    background: rgba(0, 0, 0, 0.24);
+  &-user {
-    border-radius: 10px;
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
-    flex-direction: row;
+    justify-content: center;
-    width: 140px;
     align-items: center;
-    & > span {
+    .nick {
-      font-weight: 600;
+      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);
+      }
     }
   }
 }
 
-.left {
+.container {
-  overflow-y: auto;
+  position: relative;
-  height: calc(100vh - 56px);
+  width: 100%;
-  padding: 20px 0;
+  min-height: 100%;
-  display: flex;
+  padding-top: 164px;
-  justify-content: flex-start;
-  flex-direction: column;
-  align-items: center;
-  background-color: #323639;
 
-  &-view {
+  background: url('@/assets/black_dot.png') 0% 0% / 14px 14px repeat;
-    text-align: center;
+
-    width: 160px;
+  // background-image: url(@/assets/background.jpg);
-    padding: 10px 20px;
+  // background-repeat: no-repeat;
-    border: 4px transparent solid;
+  // background-size: cover;
-    border-radius: 4px;
+  // background-position: center center;
-    margin-bottom: 10px;
+
-    color: white;
+  .animation {
-    transform: border;
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #1be1f6;
+
+    &.animation1 {
+      left: 15%;
+      top: 70%;
+      animation: slashStar 2s ease-in-out 0.3s infinite;
+    }
+    &.animation2 {
+      left: 34%;
+      top: 35%;
+      animation: slashStar 2s ease-in-out 1.2s infinite;
+    }
+    &.animation3 {
+      left: 10%;
+      top: 8%;
+      animation: slashStar 2s ease-in-out 0.5s infinite;
+    }
+    &.animation4 {
+      left: 68%;
+      top: 68%;
+      animation: slashStar 2s ease-in-out 0.8s infinite;
+    }
+    &.animation5 {
+      left: 87%;
+      top: 30%;
+      animation: slashStar 2s ease-in-out 1.5s infinite;
+    }
   }
-
+  @keyframes slashStar {
-  &-view_action {
+    0% {
-    border: 4px #8ab4f8 solid;
+      opacity: 1;
-  }
+    }
-}
+    100% {
-
+      opacity: 0;
-.right {
+    }
-  overflow-y: auto;
-  height: calc(100vh - 56px);
-  background-color: #525659;
-
-  &-view {
-    display: flex;
-    justify-content: center;
-    margin: 0 auto;
   }
 }
 </style>