feat: 重构锁屏功能

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" 
-      :locale="(fnLocale as any)"
+      :iconfont-url="scriptUrl"
+      :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 { useRouter } from 'vue-router';
+import { useRoute, 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({
-    title: t('common.tipTitle'),
-    content: t('loayouts.rightContent.lockTip'),
-    onOk() {
-      lockedStore.fnLock('lock');
-    },
-  });
+  lockConfirm.value = true;
+  lockPasswd.value = '';
+  maskStore.lockPasswd = '';
+}
+
+/**锁屏确认跳转锁屏页面 */
+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">