witLock 屏幕锁定组件

witLock 是一个功能完整的屏幕锁定组件，提供手动锁屏和自动锁屏功能，支持密码解锁、壁纸切换和超时退出，用于保护系统安全。

用法实例

<template>
  <div class="app-container">
    <!-- 在右侧工具栏中使用 -->
    <div class="right-toolbar">
      <witLock />
    </div>
    
    <!-- 应用内容 -->
    <main>
      <!-- 页面主要内容 -->
    </main>
  </div>
</template>

<script lang="ts" setup>
// 无需额外配置，组件会自动集成到系统中
</script>

API

属性

属性名	类型	默认值	描述
无额外属性	-	-	组件无需外部配置属性，所有功能通过 store 管理

插槽

插槽名	描述
无可用插槽	-

事件

事件名	描述	参数
无自定义事件	-	-

功能说明

1. 手动锁屏

• 点击右侧工具栏的锁定图标即可手动锁定屏幕
• 锁定后显示锁定界面，需要输入密码解锁

2. 自动锁屏

• 根据系统配置的闲置时间自动锁定屏幕
• 可通过 systemConfigStore 中的 sys_config:login_switch_idle_lock_time 配置闲置时间

3. 超时退出

• 超过设定时间未操作自动退出登录
• 可通过 systemConfigStore 中的 sys_config:login_switch_idle_logout_time 配置超时时间

4. 密码解锁

• 支持使用账号密码或手机号解锁
• 密码验证使用 MD5 加密与用户密码比对
• 验证通过后自动解锁并重置密码输入框

5. 壁纸切换

• 提供多张预设壁纸可供选择
• 点击"切换壁纸"文字可随机更换锁定界面背景
• 支持自定义壁纸图片

6. 国际化支持

• 所有文本内容支持多语言切换
• 使用 translate 函数实现国际化

使用提示

TIP

1. 依赖管理：

   • 组件依赖 settingsStore、systemConfigStore 和 userStore 进行状态管理
   • 需确保这些 store 已正确配置和初始化

2. 配置说明：

   • 自动锁屏时间和超时退出时间通过系统配置管理
   • 可在系统配置中修改 sys_config:login_switch_idle_lock_time 和 sys_config:login_switch_idle_logout_time 参数

3. 样式定制：

   • 锁定界面支持响应式设计，适配不同屏幕尺寸
   • 可通过 CSS 变量自定义颜色、字体等样式

4. 安全性：

   • 密码验证使用 MD5 加密，提高安全性
   • 锁定状态下无法通过点击模态框或按 ESC 键关闭

5. 事件监听：

   • 组件自动监听鼠标移动、键盘按键和滚动事件来重置计时器
   • 页面卸载时会自动清理事件监听器

6. 壁纸管理：

   • 系统内置 11 张默认壁纸
   • 可通过替换 /assets/lock_images/ 目录下的图片自定义壁纸