feat: add the ability to lock the screen (#30)

* feat: 锁屏功能

* feat: 锁屏样式调整

* feat: complete the lock-screen screen and support shortcut keys and preference configuration

---------

Co-authored-by: vince <vince292007@gmail.com>

apps/web-antd/src/store/index.ts

@@ -2,7 +2,7 @@ import type { InitStoreOptions } from '@vben-core/stores';
 
 import type { App } from 'vue';
 
-import { initStore } from '@vben-core/stores';
+import { initStore, storeToRefs } from '@vben-core/stores';
 
 /**
  * @zh_CN 初始化pinia
@@ -13,7 +13,7 @@ async function setupStore(app: App, options: InitStoreOptions) {
   app.use(pinia);
 }
 
-export { setupStore };
+export { setupStore, storeToRefs };
 
 export { useAccessStore } from './modules/access';
 export { useAppStore } from './modules/app';

apps/web-antd/src/store/modules/app.ts

@@ -4,19 +4,35 @@ import { defineStore } from 'pinia';
 
 import { useAccessStore } from './access';
 
-export const useAppStore = defineStore('app', () => {
-  const accessStore = useAccessStore();
-  const coreTabbarStore = useCoreTabbarStore();
+interface AppState {
+  isLockScreen: boolean;
+  lockScreenPassword?: string;
+}
 
-  /**
-   * 重置所有状态
-   */
-  async function resetAppState() {
-    accessStore.reset();
-    coreTabbarStore.$reset();
-  }
+export const useAppStore = defineStore('app', {
+  actions: {
+    lockScreen(password: string) {
+      this.isLockScreen = true;
+      this.lockScreenPassword = password;
+    },
 
-  return {
-    resetAppState,
-  };
+    resetAppState() {
+      const accessStore = useAccessStore();
+      const coreTabbarStore = useCoreTabbarStore();
+      accessStore.reset();
+      coreTabbarStore.$reset();
+    },
+
+    unlockScreen() {
+      this.isLockScreen = false;
+      this.lockScreenPassword = undefined;
+    },
+  },
+  persist: {
+    paths: ['isLockScreen', 'lockScreenPassword'],
+  },
+  state: (): AppState => ({
+    isLockScreen: false,
+    lockScreenPassword: undefined,
+  }),
 });