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>

Author: Layczm

apps/web-antd/src/layouts/basic.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
-import { computed, ref, toRefs } from 'vue';
+import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { LOGIN_PATH } from '@vben/constants';
 import { IcRoundCreditScore, MdiDriveDocument, MdiGithub } from '@vben/icons';
 import {
   BasicLayout,
+  LockScreen,
   Notification,
   NotificationItem,
   UserDropdown,
@@ -16,7 +17,7 @@ import { preferences } from '@vben-core/preferences';
 
 import { $t } from '#/locales';
 import { resetRoutes } from '#/router';
-import { useAccessStore, useAppStore } from '#/store';
+import { storeToRefs, useAccessStore, useAppStore } from '#/store';
 
 const notifications = ref<NotificationItem[]>([
   {
@@ -85,11 +86,18 @@ const menus = computed(() => [
 
 const appStore = useAppStore();
 const accessStore = useAccessStore();
+
+const { isLockScreen, lockScreenPassword } = storeToRefs(appStore);
 const {
   loading: loginLoading,
   openLoginExpiredModal,
   userInfo,
-} = toRefs(accessStore);
+} = storeToRefs(accessStore);
+
+const avatar = computed(() => {
+  return userInfo.value?.avatar ?? preferences.app.defaultAvatar;
+});
+
 const router = useRouter();
 
 async function handleLogout() {
@@ -105,17 +113,22 @@ function handleNoticeClear() {
 function handleMakeAll() {
   notifications.value.forEach((item) => (item.isRead = true));
 }
+
+function handleLockScreen(password: string) {
+  appStore.lockScreen(password);
+}
 </script>
 
 <template>
   <BasicLayout @clear-preferences-and-logout="handleLogout">
     <template #user-dropdown>
       <UserDropdown
-        :avatar="userInfo?.avatar ?? preferences.app.defaultAvatar"
-        :menus="menus"
+        :avatar
+        :menus
         :text="userInfo?.realName"
         description="ann.vben@gmail.com"
         tag-text="Pro"
+        @lock-screen="handleLockScreen"
         @logout="handleLogout"
       />
     </template>
@@ -127,7 +140,7 @@ function handleMakeAll() {
         @make-all="handleMakeAll"
       />
     </template>
-    <template #dialog>
+    <template #extra>
       <AuthenticationLoginExpiredModal
         v-model:open="openLoginExpiredModal"
         :loading="loginLoading"
@@ -136,5 +149,14 @@ function handleMakeAll() {
         @submit="accessStore.authLogin"
       />
     </template>
+    <template #lock-screen>
+      <LockScreen
+        v-if="isLockScreen"
+        :avatar
+        :cached-password="lockScreenPassword"
+        @to-login="handleLogout"
+        @unlock="appStore.unlockScreen"
+      />
+    </template>
   </BasicLayout>
 </template>

apps/web-antd/src/router/routes/_essentials.ts

@@ -51,7 +51,7 @@ const essentialsRoutes: RouteRecordRaw[] = [
         component: () =>
           import('#/views/_essential/authentication/code-login.vue'),
         meta: {
-          title: $t('page.essentials.code-login'),
+          title: $t('page.essentials.codeLogin'),
         },
       },
       {

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,
+  }),
 });

packages/@core/forward/preferences/src/config.ts

@@ -3,7 +3,6 @@ import type { Preferences } from './types';
 const defaultPreferences: Preferences = {
   app: {
     accessMode: 'frontend',
-    aiAssistant: true,
     authPageLayout: 'panel-right',
     colorGrayMode: false,
     colorWeakMode: false,
@@ -55,6 +54,7 @@ const defaultPreferences: Preferences = {
   },
   shortcutKeys: {
     enable: true,
+    globalLockScreen: true,
     globalLogout: true,
     globalPreferences: true,
     globalSearch: true,
@@ -95,6 +95,7 @@ const defaultPreferences: Preferences = {
     fullscreen: true,
     globalSearch: true,
     languageToggle: true,
+    lockScreen: true,
     notification: true,
     sidebarToggle: true,
     themeToggle: true,

packages/@core/forward/preferences/src/types.ts

@@ -26,8 +26,6 @@ type AuthPageLayoutType = 'panel-center' | 'panel-left' | 'panel-right';
 interface AppPreferences {
   /** 权限模式 */
   accessMode: AccessModeType;
-  /** 是否开启vben助手 */
-  aiAssistant: boolean;
   /** 登录注册页面布局 */
   authPageLayout: AuthPageLayoutType;
   /** 是否开启灰色模式 */
@@ -136,6 +134,8 @@ interface SidebarPreferences {
 interface ShortcutKeyPreferences {
   /** 是否启用快捷键-全局 */
   enable: boolean;
+  /** 是否启用全局锁屏快捷键 */
+  globalLockScreen: boolean;
   /** 是否启用全局注销快捷键 */
   globalLogout: boolean;
   /** 是否启用全局偏好设置快捷键 */
@@ -194,6 +194,8 @@ interface WidgetPreferences {
   globalSearch: boolean;
   /** 是否启用语言切换部件 */
   languageToggle: boolean;
+  /** 是否开启锁屏功能 */
+  lockScreen: boolean;
   /** 是否显示通知部件 */
   notification: boolean;
   /** 是否显示侧边栏显示/隐藏部件 */

packages/@core/forward/preferences/src/use-preferences.ts

@@ -125,6 +125,11 @@ function usePreferences() {
     return enable && globalLogout;
   });
 
+  const globalLockScreenShortcutKey = computed(() => {
+    const { enable, globalLockScreen } = shortcutKeysPreferences.value;
+    return enable && globalLockScreen;
+  });
+
   /**
    * @zh_CN 是否启用全局偏好设置快捷键
    */
@@ -138,6 +143,7 @@ function usePreferences() {
     authPanelLeft,
     authPanelRight,
     diffPreference,
+    globalLockScreenShortcutKey,
     globalLogoutShortcutKey,
     globalPreferencesShortcutKey,
     globalSearchShortcutKey,

packages/@core/locales/src/langs/en-US.json

@@ -68,6 +68,16 @@
       "noResults": "No Search Results Found",
       "noRecent": "No Search History",
       "recent": "Search History"
+    },
+    "lockScreen": {
+      "title": "Lock Screen",
+      "screenButton": "Locking",
+      "password": "Password",
+      "placeholder": "Please enter password",
+      "unlock": "Click to unlock",
+      "errorPasswordTip": "Password error, please re-enter",
+      "backToLogin": "Back to login",
+      "entry": "Enter the system"
     }
   },
   "authentication": {
@@ -263,7 +273,8 @@
       "languageToggle": "Enable Language Toggle",
       "notification": "Enable Notification",
       "sidebarToggle": "Enable Sidebar Toggle",
-      "aiAssistant": "Enable AI Assistant"
+      "aiAssistant": "Enable AI Assistant",
+      "lockScreen": "Enable Lock Screen"
     }
   }
 }

packages/@core/locales/src/langs/zh-CN.json

@@ -68,6 +68,16 @@
       "noResults": "未找到搜索结果",
       "noRecent": "没有搜索历史",
       "recent": "搜索历史"
+    },
+    "lockScreen": {
+      "title": "锁定屏幕",
+      "screenButton": "锁定",
+      "password": "密码",
+      "placeholder": "请输入锁屏密码",
+      "unlock": "点击解锁",
+      "errorPasswordTip": "密码错误，请重新输入",
+      "backToLogin": "返回登录",
+      "entry": "进入系统"
     }
   },
   "authentication": {
@@ -263,7 +273,8 @@
       "languageToggle": "启用语言切换",
       "notification": "启用通知",
       "sidebarToggle": "启用侧边栏切换",
-      "aiAssistant": "启用 AI 助手"
+      "aiAssistant": "启用 AI 助手",
+      "lockScreen": "启用锁屏"
     }
   }
 }

packages/@core/shared/design/src/scss-bem/bem.scss

@@ -1,4 +1,4 @@
-@forward './constants.scss';
+@forward './constants';
 
 @mixin b($block) {
   $B: $namespace + '-' + $block !global;