From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/layout/components/UserInfo/src/components/LockDialog.vue | 98 +++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 98 insertions(+), 0 deletions(-)
diff --git a/src/layout/components/UserInfo/src/components/LockDialog.vue b/src/layout/components/UserInfo/src/components/LockDialog.vue
new file mode 100644
index 0000000..7257be1
--- /dev/null
+++ b/src/layout/components/UserInfo/src/components/LockDialog.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { useValidator } from '@/hooks/web/useValidator'
+import { useDesign } from '@/hooks/web/useDesign'
+import { useLockStore } from '@/store/modules/lock'
+import avatarImg from '@/assets/imgs/avatar.gif'
+import { useUserStore } from '@/store/modules/user'
+
+const { getPrefixCls } = useDesign()
+const prefixCls = getPrefixCls('lock-dialog')
+
+const { required } = useValidator()
+
+const { t } = useI18n()
+
+const lockStore = useLockStore()
+
+const props = defineProps({
+ modelValue: {
+ type: Boolean
+ }
+})
+
+const userStore = useUserStore()
+const avatar = computed(() => userStore.user.avatar || avatarImg)
+const userName = computed(() => userStore.user.nickname ?? 'Admin')
+
+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 formData = ref({
+ password: undefined
+})
+const formRules = reactive({
+ password: [required()]
+})
+
+const formRef = ref() // 琛ㄥ崟 Ref
+const handleLock = async () => {
+ // 鏍￠獙琛ㄥ崟
+ if (!formRef) return
+ const valid = await formRef.value.validate()
+ if (!valid) return
+ // 鎻愪氦璇锋眰
+ dialogVisible.value = false
+ lockStore.setLockInfo({
+ ...formData.value,
+ isLock: true
+ })
+}
+</script>
+
+<template>
+ <Dialog
+ v-model="dialogVisible"
+ width="500px"
+ max-height="170px"
+ :class="prefixCls"
+ :title="dialogTitle"
+ >
+ <div class="flex flex-col items-center">
+ <img :src="avatar" alt="" class="w-70px h-70px rounded-[50%]" />
+ <span class="text-14px my-10px text-[var(--top-header-text-color)]">
+ {{ userName }}
+ </span>
+ </div>
+ <el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
+ <el-form-item :label="t('lock.lockPassword')" prop="password">
+ <el-input
+ type="password"
+ v-model="formData.password"
+ :placeholder="'璇疯緭鍏�' + t('lock.lockPassword')"
+ clearable
+ show-password
+ />
+ </el-form-item>
+ </el-form>
+ <template #footer>
+ <ElButton type="primary" @click="handleLock">{{ t('lock.lock') }}</ElButton>
+ </template>
+ </Dialog>
+</template>
+
+<style lang="scss" scoped>
+:global(.v-lock-dialog) {
+ @media (max-width: 767px) {
+ max-width: calc(100vw - 16px);
+ }
+}
+</style>
--
Gitblit v1.8.0