From e2fd349070147c57f9400fa9a413260b7707bda2 Mon Sep 17 00:00:00 2001 From: WuYihui <1402389435@qq.com> Date: Wed, 10 May 2023 10:12:31 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=94=81=E5=B1=8F?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + src/components/UserInfo/src/UserInfo.vue | 42 +++ .../UserInfo/src/components/LockDialog.vue | 102 +++++++ .../UserInfo/src/components/LockPage.vue | 270 ++++++++++++++++++ .../UserInfo/src/components/useNow.ts | 60 ++++ src/locales/en.ts | 10 + src/locales/zh-CN.ts | 10 + src/store/index.ts | 3 + src/store/modules/lock.ts | 51 ++++ src/utils/dateUtil.ts | 17 ++ types/global.d.ts | 3 + 11 files changed, 570 insertions(+) create mode 100644 src/components/UserInfo/src/components/LockDialog.vue create mode 100644 src/components/UserInfo/src/components/LockPage.vue create mode 100644 src/components/UserInfo/src/components/useNow.ts create mode 100644 src/store/modules/lock.ts create mode 100644 src/utils/dateUtil.ts diff --git a/package.json b/package.json index a38230e17..23f74c845 100644 --- a/package.json +++ b/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", diff --git a/src/components/UserInfo/src/UserInfo.vue b/src/components/UserInfo/src/UserInfo.vue index 641fe01c9..db3408cc9 100644 --- a/src/components/UserInfo/src/UserInfo.vue +++ b/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(false) + +// 锁定屏幕 +const lockScreen = () => { + dialogVisible.value = true +} + const toDocument = () => { window.open('https://element-plus-admin-doc.cn/') } @@ -59,9 +74,36 @@ const toDocument = () => {
{{ t('common.document') }}
+
{{ t('lock.lockScreen') }}
+ +
{{ t('common.loginOut') }}
 + + + + + + + + + diff --git a/src/components/UserInfo/src/components/LockDialog.vue b/src/components/UserInfo/src/components/LockDialog.vue new file mode 100644 index 000000000..e7355a7a9 --- /dev/null +++ b/src/components/UserInfo/src/components/LockDialog.vue @@ -0,0 +1,102 @@ + + + + + diff --git a/src/components/UserInfo/src/components/LockPage.vue b/src/components/UserInfo/src/components/LockPage.vue new file mode 100644 index 000000000..9a191d158 --- /dev/null +++ b/src/components/UserInfo/src/components/LockPage.vue @@ -0,0 +1,270 @@ + + + + + diff --git a/src/components/UserInfo/src/components/useNow.ts b/src/components/UserInfo/src/components/useNow.ts new file mode 100644 index 000000000..107959655 --- /dev/null +++ b/src/components/UserInfo/src/components/useNow.ts @@ -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 + } +} diff --git a/src/locales/en.ts b/src/locales/en.ts index 26a9a02bc..15256759f 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -42,6 +42,16 @@ export default { delNoData: 'Please select the data to delete', delSuccess: 'Deleted successfully' }, + lock: { + lockScreen: 'Lock screen', + lock: 'Lock', + lockPassword: 'Lock screen password', + unlock: 'Click to unlock', + backToLogin: 'Back to login', + entrySystem: 'Entry the system', + placeholder: 'Please enter the lock screen password', + message: 'Lock screen password error' + }, error: { noPermission: `Sorry, you don't have permission to access this page.`, pageError: 'Sorry, the page you visited does not exist.', diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts index 165e268ef..b1b5da5bb 100644 --- a/src/locales/zh-CN.ts +++ b/src/locales/zh-CN.ts @@ -42,6 +42,16 @@ export default { delNoData: '请选择需要删除的数据', delSuccess: '删除成功' }, + lock: { + lockScreen: '锁定屏幕', + lock: '锁定', + lockPassword: '锁屏密码', + unlock: '点击解锁', + backToLogin: '返回登录', + entrySystem: '进入系统', + placeholder: '请输入锁屏密码', + message: '锁屏密码错误' + }, error: { noPermission: `抱歉，您无权访问此页面。`, pageError: '抱歉，您访问的页面不存在。', diff --git a/src/store/index.ts b/src/store/index.ts index 65964ea8f..735e7849d 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,8 +1,11 @@ import type { App } from 'vue' import { createPinia } from 'pinia' +import piniaPersist from 'pinia-plugin-persist' const store = createPinia() +store.use(piniaPersist) + export const setupStore = (app: App) => { app.use(store) } diff --git a/src/store/modules/lock.ts b/src/store/modules/lock.ts new file mode 100644 index 000000000..da6c22073 --- /dev/null +++ b/src/store/modules/lock.ts @@ -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) +} diff --git a/src/utils/dateUtil.ts b/src/utils/dateUtil.ts new file mode 100644 index 000000000..36b87e34a --- /dev/null +++ b/src/utils/dateUtil.ts @@ -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 diff --git a/types/global.d.ts b/types/global.d.ts index 7314557c5..bd0b1cabf 100644 --- a/types/global.d.ts +++ b/types/global.d.ts @@ -14,6 +14,9 @@ declare global { declare type LocaleType = 'zh-CN' | 'en' + declare type TimeoutHandle = ReturnType + declare type IntervalHandle = ReturnType + declare type AxiosHeaders = | 'application/json' | 'application/x-www-form-urlencoded'