fix(lock): automatic screen lock does not work

Author: anncwb

CHANGELOG.zh_CN.md

@@ -17,6 +17,7 @@
 - 修复黑暗主题刷新闪烁的白屏
 - 修复标签页关闭其他功能失效问题
 - 修复表单已知问题
+- 修复自动锁屏失效
 
 ## 2.3.0 (2021-04-10)
 

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <ConfigProvider v-bind="lockEvent" :locale="getAntdLocale">
+  <ConfigProvider :locale="getAntdLocale">
     <AppProvider>
       <RouterView />
     </AppProvider>
@@ -11,7 +11,6 @@
   import { ConfigProvider } from 'ant-design-vue';
   import { AppProvider } from '/@/components/Application';
 
-  import { useLockPage } from '/@/hooks/web/useLockPage';
   import { useTitle } from '/@/hooks/web/useTitle';
   import { useLocale } from '/@/locales/useLocale';
 
@@ -24,10 +23,7 @@
       // support Multi-language
       const { getAntdLocale } = useLocale();
 
-      // Create a lock screen monitor
-      const lockEvent = useLockPage();
-
-      return { getAntdLocale, lockEvent };
+      return { getAntdLocale };
     },
   });
 </script>

src/layouts/default/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Layout :class="prefixCls">
+  <Layout :class="prefixCls" v-bind="lockEvents">
     <LayoutFeatures />
     <LayoutHeader fixed v-if="getShowFullHeaderRef" />
     <Layout :class="layoutClass">
@@ -26,6 +26,7 @@
   import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
   import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
   import { useDesign } from '/@/hooks/web/useDesign';
+  import { useLockPage } from '/@/hooks/web/useLockPage';
 
   import { useAppInject } from '/@/hooks/web/useAppInject';
 
@@ -45,6 +46,10 @@
       const { getIsMobile } = useAppInject();
       const { getShowFullHeaderRef } = useHeaderSetting();
       const { getShowSidebar, getIsMixSidebar } = useMenuSetting();
+
+      // Create a lock screen monitor
+      const lockEvents = useLockPage();
+
       const layoutClass = computed(() => ({ 'ant-layout-has-sider': unref(getIsMixSidebar) }));
 
       return {
@@ -54,6 +59,7 @@
         getIsMobile,
         getIsMixSidebar,
         layoutClass,
+        lockEvents,
       };
     },
   });

src/main.ts

@@ -26,7 +26,7 @@ if (import.meta.env.DEV) {
 (async () => {
   const app = createApp(App);
 
-  // Configure vuex store
+  // Configure store
   setupStore(app);
 
   // Initialize internal system configuration
@@ -55,8 +55,4 @@ if (import.meta.env.DEV) {
   await router.isReady();
 
   app.mount('#app', true);
-
-  if (import.meta.env.DEV) {
-    window.__APP__ = app;
-  }
 })();

types/global.d.ts

@@ -16,10 +16,10 @@ declare global {
     };
     lastBuildTime: string;
   };
-  declare interface Window {
-    // Global vue app instance
-    __APP__: App<Element>;
-  }
+  // declare interface Window {
+  //   // Global vue app instance
+  //   __APP__: App<Element>;
+  // }
 
   // vue
   declare type PropType<T> = VuePropType<T>;