feat: 新增锁屏功能
WuYihui
3 years ago
parent
46ac7f88c9
commit
e2fd349070
@ -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>
|
||||||
@ -0,0 +1,270 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { ElInput, ElButton } from 'element-plus'
|
||||||
|
import { resetRouter } from '@/router'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { useCache } from '@/hooks/web/useCache'
|
||||||
|
import { useLockStore } from '@/store/modules/lock'
|
||||||
|
import { useI18n } from '@/hooks/web/useI18n'
|
||||||
|
import { useNow } from './useNow'
|
||||||
|
import { useDesign } from '@/hooks/web/useDesign'
|
||||||
|
import { Icon } from '@/components/Icon'
|
||||||
|
import { loginOutApi } from '@/api/login'
|
||||||
|
import { useTagsViewStore } from '@/store/modules/tagsView'
|
||||||
|
|
||||||
|
const tagsViewStore = useTagsViewStore()
|
||||||
|
|
||||||
|
const { wsCache } = useCache()
|
||||||
|
|
||||||
|
const { replace } = useRouter()
|
||||||
|
|
||||||
|
const password = ref('')
|
||||||
|
const loading = ref(false)
|
||||||
|
const errMsg = ref(false)
|
||||||
|
const showDate = ref(true)
|
||||||
|
|
||||||
|
const { getPrefixCls } = useDesign()
|
||||||
|
const prefixCls = getPrefixCls('lock-page')
|
||||||
|
|
||||||
|
const lockStore = useLockStore()
|
||||||
|
|
||||||
|
const { hour, month, minute, meridiem, year, day, week } = useNow(true)
|
||||||
|
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
// 解锁
|
||||||
|
async function unLock() {
|
||||||
|
if (!password.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let pwd = password.value
|
||||||
|
try {
|
||||||
|
loading.value = true
|
||||||
|
const res = await lockStore.unLock(pwd)
|
||||||
|
errMsg.value = !res
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 返回登录
|
||||||
|
async function goLogin() {
|
||||||
|
const res = await loginOutApi().catch(() => {})
|
||||||
|
if (res) {
|
||||||
|
wsCache.clear()
|
||||||
|
tagsViewStore.delAllViews()
|
||||||
|
resetRouter() // 重置静态路由表
|
||||||
|
lockStore.resetLockInfo()
|
||||||
|
replace('/login')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleShowForm(show = false) {
|
||||||
|
showDate.value = show
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:class="prefixCls"
|
||||||
|
class="fixed inset-0 flex h-screen w-screen bg-black items-center justify-center"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
:class="`${prefixCls}__unlock`"
|
||||||
|
class="absolute top-0 left-1/2 flex pt-5 h-16 items-center justify-center sm:text-md xl:text-xl text-white flex-col cursor-pointer transform translate-x-1/2"
|
||||||
|
@click="handleShowForm(false)"
|
||||||
|
v-show="showDate"
|
||||||
|
>
|
||||||
|
<Icon icon="ep:lock" />
|
||||||
|
<span>{{ t('lock.unlock') }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex w-screen h-screen justify-center items-center">
|
||||||
|
<div :class="`${prefixCls}__hour`" class="relative mr-5 md:mr-20 w-2/5 h-2/5 md:h-4/5">
|
||||||
|
<span>{{ hour }}</span>
|
||||||
|
<span class="meridiem absolute left-5 top-5 text-md xl:text-xl" v-show="showDate">
|
||||||
|
{{ meridiem }}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div :class="`${prefixCls}__minute w-2/5 h-2/5 md:h-4/5 `">
|
||||||
|
<span> {{ minute }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<transition name="fade-slide">
|
||||||
|
<div :class="`${prefixCls}-entry`" v-show="!showDate">
|
||||||
|
<div :class="`${prefixCls}-entry-content`">
|
||||||
|
<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(--logo-title-text-color)]">Archer</span>
|
||||||
|
</div>
|
||||||
|
<ElInput
|
||||||
|
type="password"
|
||||||
|
:placeholder="t('lock.placeholder')"
|
||||||
|
class="enter-x"
|
||||||
|
v-model="password"
|
||||||
|
/>
|
||||||
|
<span :class="`text-14px ${prefixCls}-entry__err-msg enter-x`" v-if="errMsg">
|
||||||
|
{{ t('lock.message') }}
|
||||||
|
</span>
|
||||||
|
<div :class="`${prefixCls}-entry__footer enter-x`">
|
||||||
|
<ElButton
|
||||||
|
type="primary"
|
||||||
|
size="small"
|
||||||
|
class="mt-2 mr-2 enter-x"
|
||||||
|
link
|
||||||
|
:disabled="loading"
|
||||||
|
@click="handleShowForm(true)"
|
||||||
|
>
|
||||||
|
{{ t('common.back') }}
|
||||||
|
</ElButton>
|
||||||
|
<ElButton
|
||||||
|
type="primary"
|
||||||
|
size="small"
|
||||||
|
class="mt-2 mr-2 enter-x"
|
||||||
|
link
|
||||||
|
:disabled="loading"
|
||||||
|
@click="goLogin"
|
||||||
|
>
|
||||||
|
{{ t('lock.backToLogin') }}
|
||||||
|
</ElButton>
|
||||||
|
<ElButton
|
||||||
|
type="primary"
|
||||||
|
class="mt-2"
|
||||||
|
size="small"
|
||||||
|
link
|
||||||
|
@click="unLock()"
|
||||||
|
:disabled="loading"
|
||||||
|
>
|
||||||
|
{{ t('lock.entrySystem') }}
|
||||||
|
</ElButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
|
||||||
|
<div class="absolute bottom-5 w-full text-gray-300 xl:text-xl 2xl:text-3xl text-center enter-y">
|
||||||
|
<div class="text-5xl mb-4 enter-x" v-show="!showDate">
|
||||||
|
{{ hour }}:{{ minute }} <span class="text-3xl">{{ meridiem }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-2xl">{{ year }}/{{ month }}/{{ day }} {{ week }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@prefix-cls: ~'@{namespace}-lock-page';
|
||||||
|
|
||||||
|
// Small screen / tablet
|
||||||
|
@screen-sm: 576px;
|
||||||
|
|
||||||
|
// Medium screen / desktop
|
||||||
|
@screen-md: 768px;
|
||||||
|
|
||||||
|
// Large screen / wide desktop
|
||||||
|
@screen-lg: 992px;
|
||||||
|
|
||||||
|
// Extra large screen / full hd
|
||||||
|
@screen-xl: 1200px;
|
||||||
|
|
||||||
|
// Extra extra large screen / large desktop
|
||||||
|
@screen-2xl: 1600px;
|
||||||
|
|
||||||
|
@error-color: #ed6f6f;
|
||||||
|
|
||||||
|
.@{prefix-cls} {
|
||||||
|
z-index: 3000;
|
||||||
|
|
||||||
|
&__unlock {
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__hour,
|
||||||
|
&__minute {
|
||||||
|
display: flex;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #bababa;
|
||||||
|
background-color: #141313;
|
||||||
|
border-radius: 30px;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
@media screen and (max-width: @screen-md) {
|
||||||
|
span:not(.meridiem) {
|
||||||
|
font-size: 160px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: @screen-md) {
|
||||||
|
span:not(.meridiem) {
|
||||||
|
font-size: 160px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: @screen-sm) {
|
||||||
|
span:not(.meridiem) {
|
||||||
|
font-size: 90px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: @screen-lg) {
|
||||||
|
span:not(.meridiem) {
|
||||||
|
font-size: 220px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: @screen-xl) {
|
||||||
|
span:not(.meridiem) {
|
||||||
|
font-size: 260px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media screen and (min-width: @screen-2xl) {
|
||||||
|
span:not(.meridiem) {
|
||||||
|
font-size: 320px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-entry {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgb(0 0 0 / 50%);
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&-content {
|
||||||
|
width: 260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__header {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&-img {
|
||||||
|
width: 70px;
|
||||||
|
margin: 0 auto;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-name {
|
||||||
|
margin-top: 5px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #bababa;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__err-msg {
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 10px;
|
||||||
|
color: @error-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,60 @@
|
|||||||
|
import { dateUtil } from '@/utils/dateUtil'
|
||||||
|
import { reactive, toRefs } from 'vue'
|
||||||
|
import { tryOnMounted, tryOnUnmounted } from '@vueuse/core'
|
||||||
|
|
||||||
|
export function useNow(immediate = true) {
|
||||||
|
let timer: IntervalHandle
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
year: 0,
|
||||||
|
month: 0,
|
||||||
|
week: '',
|
||||||
|
day: 0,
|
||||||
|
hour: '',
|
||||||
|
minute: '',
|
||||||
|
second: 0,
|
||||||
|
meridiem: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
const update = () => {
|
||||||
|
const now = dateUtil()
|
||||||
|
|
||||||
|
const h = now.format('HH')
|
||||||
|
const m = now.format('mm')
|
||||||
|
const s = now.get('s')
|
||||||
|
|
||||||
|
state.year = now.get('y')
|
||||||
|
state.month = now.get('M') + 1
|
||||||
|
state.week = '星期' + ['日', '一', '二', '三', '四', '五', '六'][now.day()]
|
||||||
|
state.day = now.get('date')
|
||||||
|
state.hour = h
|
||||||
|
state.minute = m
|
||||||
|
state.second = s
|
||||||
|
|
||||||
|
state.meridiem = now.format('A')
|
||||||
|
}
|
||||||
|
|
||||||
|
function start() {
|
||||||
|
update()
|
||||||
|
clearInterval(timer)
|
||||||
|
timer = setInterval(() => update(), 1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
function stop() {
|
||||||
|
clearInterval(timer)
|
||||||
|
}
|
||||||
|
|
||||||
|
tryOnMounted(() => {
|
||||||
|
immediate && start()
|
||||||
|
})
|
||||||
|
|
||||||
|
tryOnUnmounted(() => {
|
||||||
|
stop()
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
start,
|
||||||
|
stop
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,51 @@
|
|||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import { store } from '../index'
|
||||||
|
|
||||||
|
interface lockInfo {
|
||||||
|
isLock?: boolean
|
||||||
|
password?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LockState {
|
||||||
|
lockInfo: lockInfo
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useLockStore = defineStore('lock', {
|
||||||
|
state: (): LockState => {
|
||||||
|
return {
|
||||||
|
lockInfo: {
|
||||||
|
// isLock: false, // 是否锁定屏幕
|
||||||
|
// password: '' // 锁屏密码
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getters: {
|
||||||
|
getLockInfo(): lockInfo {
|
||||||
|
return this.lockInfo
|
||||||
|
}
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
setLockInfo(lockInfo: lockInfo) {
|
||||||
|
this.lockInfo = lockInfo
|
||||||
|
},
|
||||||
|
resetLockInfo() {
|
||||||
|
this.lockInfo = {}
|
||||||
|
},
|
||||||
|
unLock(password: string) {
|
||||||
|
if (this.lockInfo?.password === password) {
|
||||||
|
this.resetLockInfo()
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
persist: {
|
||||||
|
enabled: true,
|
||||||
|
strategies: [{ key: 'lock', storage: localStorage }]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export const useLockStoreWithOut = () => {
|
||||||
|
return useLockStore(store)
|
||||||
|
}
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
/**
|
||||||
|
* Independent time operation tool to facilitate subsequent switch to dayjs
|
||||||
|
*/
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
|
||||||
|
const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss'
|
||||||
|
const DATE_FORMAT = 'YYYY-MM-DD'
|
||||||
|
|
||||||
|
export function formatToDateTime(date?: dayjs.ConfigType, format = DATE_TIME_FORMAT): string {
|
||||||
|
return dayjs(date).format(format)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatToDate(date?: dayjs.ConfigType, format = DATE_FORMAT): string {
|
||||||
|
return dayjs(date).format(format)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const dateUtil = dayjs
|
||||||
Loading…
Reference in New Issue