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>

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;

packages/@core/shared/iconify/src/create-icon.ts

@@ -1,9 +1,14 @@
-import { h } from 'vue';
+import { defineComponent, h } from 'vue';
 
 import { Icon } from '@iconify/vue';
 
 function createIconifyIcon(icon: string) {
-  return h(Icon, { icon });
+  return defineComponent({
+    name: `SvgIcon-${icon}`,
+    setup(props, { attrs }) {
+      return () => h(Icon, { icon, ...props, ...attrs });
+    },
+  });
 }
 
 export { createIconifyIcon };

packages/@core/shared/iconify/src/material.ts

@@ -82,3 +82,5 @@ export const IcRoundMultipleStop = createIconifyIcon('ic:round-multiple-stop');
 export const IcRoundRefresh = createIconifyIcon('ic:round-refresh');
 
 export const IcRoundCreditScore = createIconifyIcon('ic:round-credit-score');
+
+export const IcRoundLock = createIconifyIcon('ic:round-lock');