refactor(lock-page): refactor lock page

src/layouts/default/index.tsx

@@ -6,7 +6,7 @@ import LayoutHeader from './header/LayoutHeader';
 
 import LayoutContent from './content';
 import LayoutFooter from './footer';
-import LayoutLockPage from './lock';
+import LayoutLockPage from './lock/index.vue';
 import LayoutSideBar from './sider';
 import SettingBtn from './setting/index.vue';
 import LayoutMultipleHeader from './header/LayoutMultipleHeader';

src/layouts/default/lock/LockAction.tsx

@@ -7,9 +7,9 @@ import { BasicForm, useForm } from '/@/components/Form/index';
 
 import headerImg from '/@/assets/images/header.jpg';
 
-import { appStore } from '/@/store/modules/app';
 import { userStore } from '/@/store/modules/user';
 import { useI18n } from '/@/hooks/web/useI18n';
+import { lockStore } from '/@/store/modules/lock';
 
 const prefixCls = 'lock-modal';
 export default defineComponent({
@@ -30,24 +30,16 @@ export default defineComponent({
       ],
     });
 
-    async function lock(valid = true) {
-      let password: string | undefined = '';
+    async function lock() {
+      const values = (await validateFields()) as any;
+      const password: string | undefined = values.password;
+      closeModal();
 
-      try {
-        if (!valid) {
-          password = undefined;
-        } else {
-          const values = (await validateFields()) as any;
-          password = values.password;
-        }
-        closeModal();
-
-        appStore.commitLockInfoState({
-          isLock: true,
-          pwd: password,
-        });
-        await resetFields();
-      } catch (error) {}
+      lockStore.commitLockInfoState({
+        isLock: true,
+        pwd: password,
+      });
+      await resetFields();
     }
 
     return () => (
@@ -71,9 +63,6 @@ export default defineComponent({
               <Button type="primary" block class="mt-2" onClick={lock}>
                 {() => t('layout.header.lockScreenBtn')}
               </Button>
-              <Button block class="mt-2" onClick={lock.bind(null, false)}>
-                {() => t('layout.header.notLockScreenPassword')}
-              </Button>
             </div>
           </div>
         )}

src/layouts/default/lock/index.tsx

@@ -1,17 +0,0 @@
-import { defineComponent, unref, computed } from 'vue';
-import { appStore } from '/@/store/modules/app';
-import LockPage from '/@/views/sys/lock/index.vue';
-
-export default defineComponent({
-  name: 'LayoutLockPage',
-  setup() {
-    const getIsLockRef = computed(() => {
-      const { getLockInfo } = appStore;
-      const { isLock } = getLockInfo;
-      return isLock;
-    });
-    return () => {
-      return unref(getIsLockRef) ? <LockPage /> : null;
-    };
-  },
-});

src/layouts/default/lock/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <transition name="fade-bottom">
+    <LockPage v-if="getIsLock" />
+  </transition>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import LockPage from '/@/views/sys/lock/index.vue';
+  import { getIsLock } from '/@/hooks/web/useLockPage';
+  export default defineComponent({
+    name: 'LayoutLockPage',
+    components: { LockPage },
+    setup() {
+      return { getIsLock };
+    },
+  });
+</script>