feat: 新增锁屏功能

package.json

@@ -33,6 +33,7 @@
     "@zxcvbn-ts/core": "^3.0.0",
     "animate.css": "^4.1.1",
     "axios": "^1.4.0",
+    "dayjs": "^1.11.7",
     "echarts": "^5.4.2",
     "echarts-wordcloud": "^2.1.0",
     "element-plus": "2.3.4",
@@ -42,6 +43,7 @@
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.36",
+    "pinia-plugin-persist": "^1.0.0",
     "qrcode": "^1.5.3",
     "qs": "^6.11.1",
     "url": "^0.11.0",

src/components/UserInfo/src/UserInfo.vue

@@ -7,6 +7,14 @@ import { useRouter } from 'vue-router'
 import { loginOutApi } from '@/api/login'
 import { useDesign } from '@/hooks/web/useDesign'
 import { useTagsViewStore } from '@/store/modules/tagsView'
+import LockDialog from './components/LockDialog.vue'
+import { ref, computed } from 'vue'
+import LockPage from './components/LockPage.vue'
+import { useLockStore } from '@/store/modules/lock'
+
+const lockStore = useLockStore()
+
+const getIsLock = computed(() => lockStore.getLockInfo?.isLock ?? false)
 
 const tagsViewStore = useTagsViewStore()
 
@@ -38,6 +46,13 @@ const loginOut = () => {
     .catch(() => {})
 }
 
+const dialogVisible = ref<boolean>(false)
+
+// 锁定屏幕
+const lockScreen = () => {
+  dialogVisible.value = true
+}
+
 const toDocument = () => {
   window.open('https://element-plus-admin-doc.cn/')
 }
@@ -59,9 +74,36 @@ const toDocument = () => {
           <div @click="toDocument">{{ t('common.document') }}</div>
         </ElDropdownItem>
         <ElDropdownItem divided>
+          <div @click="lockScreen">{{ t('lock.lockScreen') }}</div>
+        </ElDropdownItem>
+        <ElDropdownItem>
           <div @click="loginOut">{{ t('common.loginOut') }}</div>
         </ElDropdownItem>
       </ElDropdownMenu>
     </template>
   </ElDropdown>
+
+  <LockDialog v-if="dialogVisible" v-model="dialogVisible" />
+  <teleport to="body">
+    <transition name="fade-bottom" mode="out-in">
+      <LockPage v-if="getIsLock" />
+    </transition>
+  </teleport>
 </template>
+
+<style scoped lang="less">
+.fade-bottom-enter-active,
+.fade-bottom-leave-active {
+  transition: opacity 0.25s, transform 0.3s;
+}
+
+.fade-bottom-enter-from {
+  opacity: 0;
+  transform: translateY(-10%);
+}
+
+.fade-bottom-leave-to {
+  opacity: 0;
+  transform: translateY(10%);
+}
+</style>

src/components/UserInfo/src/components/LockDialog.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { useI18n } from '@/hooks/web/useI18n'
+import { ref, unref } from 'vue'
+import { Dialog } from '@/components/Dialog'
+import { Form } from '@/components/Form'
+import { useForm } from '@/hooks/web/useForm'
+import { reactive, computed } from 'vue'
+import { useValidator } from '@/hooks/web/useValidator'
+import { FormSchema } from '@/types/form'
+import { ElButton } from 'element-plus'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useLockStore } from '@/store/modules/lock'
+
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('lock-dialog')
+
+const { required } = useValidator()
+
+const { t } = useI18n()
+
+const lockStore = useLockStore()
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const dialogVisible = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    console.log('set: ', val)
+    emit('update:modelValue', val)
+  }
+})
+
+const dialogTitle = ref(t('lock.lockScreen'))
+
+const rules = reactive({
+  password: [required()]
+})
+
+const schema: FormSchema[] = reactive([
+  {
+    label: t('lock.lockPassword'),
+    field: 'password',
+    component: 'Input',
+    componentProps: {
+      type: 'password',
+      showPassword: true
+    }
+  }
+])
+
+const { register, formRef, methods } = useForm({
+  schema
+})
+
+const { getFormData } = methods
+
+const handleLock = () => {
+  unref(formRef)?.validate(async (valid) => {
+    if (valid) {
+      dialogVisible.value = false
+      const formData = await getFormData()
+      lockStore.setLockInfo({
+        isLock: true,
+        ...formData
+      })
+    }
+  })
+}
+</script>
+
+<template>
+  <Dialog
+    v-model="dialogVisible"
+    width="500px"
+    max-height="170px"
+    :class="prefixCls"
+    :title="dialogTitle"
+  >
+    <div class="flex flex-col items-center">
+      <img src="@/assets/imgs/avatar.jpg" alt="" class="w-70px h-70px rounded-[50%]" />
+      <span class="text-14px my-10px text-[var(--top-header-text-color)]">Archer</span>
+    </div>
+    <Form :is-col="false" :rules="rules" @register="register" />
+    <template #footer>
+      <ElButton type="primary" @click="handleLock">{{ t('lock.lock') }}</ElButton>
+    </template>
+  </Dialog>
+</template>
+
+<style lang="less" scoped>
+:global(.v-lock-dialog) {
+  @media (max-width: 767px) {
+    max-width: calc(100vw - 16px);
+  }
+}
+</style>