diff --git a/CHANGELOG.md b/CHANGELOG.md index 852a6886..abde5e4d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ - 更新了 router permission 方法（路由守卫） - 补充了一些模块文档 - 搜索支持以菜单模块的 icon 进行渲染，如果为空则以 icon table 默认填充 +- 重写锁屏功能，现在将锁屏逻辑与解锁逻辑拆分为两个组件 ### Fixes diff --git a/README.md b/README.md index 5e643bab..7392c68d 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,8 @@ - 锁屏 - 自动化路由 - 带有拓展功能的表格 -- 封装 `axios` 自动取消重复请求 +- 封装 `axios` 自动取消重复请求，暴露拦截器注册器 +- 全局菜单搜索 - 动态菜单（多级菜单） - 主题色切换 - 错误页 @@ -58,6 +59,7 @@ > 该项目模板采用 `vue3.x` `vite4.x` `pinia` `tsx` 进行开发。 > 使用 `naive ui` 作为组件库。 > 预设了最佳构建体验的配置与常用搬砖工具。意在提供一个简洁、快速上手的模板。 +> 该模板不支持移动端设备。 ## 提示 diff --git a/src/components/AppComponents/AppLockScreen/appLockVar.ts b/src/components/AppComponents/AppLockScreen/appLockVar.ts new file mode 100644 index 00000000..eb145d25 --- /dev/null +++ b/src/components/AppComponents/AppLockScreen/appLockVar.ts @@ -0,0 +1,36 @@ +/** + * + * @author Ray + * + * @date 2023-06-20 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** + * + * 统一管理是否处于锁屏状态 + * + * 可以根据后台接口进行替换该变量, 只要是一个响应式的变量值即可 + */ + +const appLockScreen = useStorage('isAppLockScreen', false, sessionStorage, { + mergeDefaults: true, +}) + +const useAppLockScreen = () => { + const setLockAppScreen = (bool: boolean) => { + appLockScreen.value = bool + } + + const getLockAppScreen = () => appLockScreen.value + + return { + setLockAppScreen, + getLockAppScreen, + } +} + +export default useAppLockScreen diff --git a/src/components/AppComponents/AppLockScreen/components/LockScreen/index.tsx b/src/components/AppComponents/AppLockScreen/components/LockScreen/index.tsx new file mode 100644 index 00000000..473d5042 --- /dev/null +++ b/src/components/AppComponents/AppLockScreen/components/LockScreen/index.tsx @@ -0,0 +1,91 @@ +/** + * + * @author Ray + * + * @date 2023-06-20 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** 锁屏界面 */ + +import { NInput, NForm, NFormItem, NButton, NSpace } from 'naive-ui' +import AppAvatar from '@/components/AppComponents/AppAvatar/index' + +import { useSetting } from '@/store' +import useAppLockScreen from '@/components/AppComponents/AppLockScreen/appLockVar' +import { + rules, + useCondition, + autoFouceInput, +} from '@/components/AppComponents/AppLockScreen/hook' + +import type { FormInst, InputInst } from 'naive-ui' + +const LockScreen = defineComponent({ + name: 'LockScreen', + setup() { + const formInstRef = ref(null) + const inputInstRef = ref(null) + + const { setLockAppScreen } = useAppLockScreen() + const { changeSwitcher } = useSetting() + + const state = reactive({ + lockCondition: useCondition(), + }) + + /** 锁屏 */ + const lockScreen = () => { + formInstRef.value?.validate((error) => { + if (!error) { + setLockAppScreen(true) + changeSwitcher(true, 'lockScreenSwitch') + + state.lockCondition = useCondition() + } + }) + } + + autoFouceInput(inputInstRef) + + return { + ...toRefs(state), + lockScreen, + formInstRef, + inputInstRef, + } + }, + render() { + return ( +
+ + + + + + + 锁屏 + + +
+ ) + }, +}) + +export default LockScreen diff --git a/src/components/AppComponents/AppLockScreen/components/UnlockScreen/index.tsx b/src/components/AppComponents/AppLockScreen/components/UnlockScreen/index.tsx new file mode 100644 index 00000000..b8d87bd7 --- /dev/null +++ b/src/components/AppComponents/AppLockScreen/components/UnlockScreen/index.tsx @@ -0,0 +1,145 @@ +/** + * + * @author Ray + * + * @date 2023-06-20 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +/** 解锁界面 */ + +import { NInput, NForm, NFormItem, NButton, NSpace } from 'naive-ui' +import AppAvatar from '@/components/AppComponents/AppAvatar/index' + +import dayjs from 'dayjs' +import { useSetting, useSignin } from '@/store' +import { + rules, + useCondition, + autoFouceInput, +} from '@/components/AppComponents/AppLockScreen/hook' +import useAppLockScreen from '@/components/AppComponents/AppLockScreen/appLockVar' + +import type { FormInst, InputInst } from 'naive-ui' + +const UnlockScreen = defineComponent({ + name: 'UnlockScreen', + setup() { + const formRef = ref(null) + const inputInstRef = ref(null) + + const { logout } = useSignin() + const { changeSwitcher } = useSetting() + const { setLockAppScreen } = useAppLockScreen() + + const HH_MM_FORMAT = 'HH:mm' + const AM_PM_FORMAT = 'A' + const YY_MM_DD_FORMAT = 'YY年MM月DD日' + const DDD_FORMAT = 'ddd' + + const state = reactive({ + lockCondition: useCondition(), + HH_MM: dayjs().format(HH_MM_FORMAT), + AM_PM: dayjs().locale('en').format(AM_PM_FORMAT), + YY_MM_DD: dayjs().format(YY_MM_DD_FORMAT), + DDD: dayjs().format(DDD_FORMAT), + }) + + /** 退出登陆并且回到登陆页 */ + const backToSignin = () => { + window.$dialog.warning({ + title: '警告', + content: '是否返回到登陆页?', + positiveText: '确定', + negativeText: '取消', + onPositiveClick: () => { + logout() + setTimeout(() => { + changeSwitcher(false, 'lockScreenSwitch') + }) + }, + }) + } + + /** 解锁 */ + const unlockScreen = () => { + formRef.value?.validate((error) => { + if (!error) { + setLockAppScreen(false) + changeSwitcher(false, 'lockScreenSwitch') + + state.lockCondition = useCondition() + } + }) + } + + autoFouceInput(inputInstRef) + + return { + ...toRefs(state), + backToSignin, + unlockScreen, + formRef, + inputInstRef, + } + }, + render() { + return ( +
+
+
+
{this.HH_MM?.split(':')[0]}
+
{this.HH_MM?.split(':')[1]}
+
+
+ +
+
+ + + + + + + 返回登陆 + + + 进入系统 + + + +
+
+
+ {this.HH_MM} {this.AM_PM} +
+
+ {this.YY_MM_DD} {this.DDD} +
+
+
+
+ ) + }, +}) + +export default UnlockScreen diff --git a/src/components/AppComponents/AppLockScreen/hook.ts b/src/components/AppComponents/AppLockScreen/hook.ts new file mode 100644 index 00000000..8db8c2e2 --- /dev/null +++ b/src/components/AppComponents/AppLockScreen/hook.ts @@ -0,0 +1,38 @@ +/** + * + * @author Ray + * + * @date 2023-06-20 + * + * @workspace ray-template + * + * @remark 今天也是元气满满撸代码的一天 + */ + +import type { InputInst } from 'naive-ui' +import type { Ref } from 'vue' + +/** 统一的校验锁屏密码校验规则 */ +export const rules = { + lockPassword: { + required: true, + message: '请输入正确格式密码', + min: 6, + max: 12, + trigger: ['input'], + }, +} + +/** 锁屏密码参数 */ +export const useCondition = () => { + return { + lockPassword: null, + } +} + +/** 自动获取焦点 */ +export const autoFouceInput = (inputInstRef: Ref) => { + nextTick(() => { + inputInstRef.value?.focus() + }) +} diff --git a/src/components/AppComponents/AppLockScreen/index.scss b/src/components/AppComponents/AppLockScreen/index.scss index e4bff73d..47777891 100644 --- a/src/components/AppComponents/AppLockScreen/index.scss +++ b/src/components/AppComponents/AppLockScreen/index.scss @@ -1,67 +1,68 @@ -.lock-screen { - position: fixed; - left: 0; - right: 0; - top: 0; - bottom: 0; - background: black; +.app-lock-screen__content { + & .app-lock-screen__input { + & button[class*="n-button"] { + width: 100%; + } - & .lock-screen__content { - position: relative; - width: 100%; - height: 100%; - @include flexCenter; - flex-direction: column; + & form[class*="n-form"] { + margin: 24px 0px; + } + } - & .lock-screen__content-bg { - position: absolute; + & .app-lock-screen__unlock { + .app-lock-screen__unlock__content { + position: relative; width: 100%; height: 100%; @include flexCenter; - font-size: 220px; - gap: 80px; - z-index: 0; + flex-direction: column; - & .left, - & .right { + & .app-lock-screen__unlock__content-bg { + position: absolute; + width: 100%; + height: 100%; @include flexCenter; - border-radius: 30px; - background-color: #141313; - font-weight: 700; - padding: 80px; - filter: blur(4px); - } - } + font-size: 220px; + gap: 80px; + z-index: 0; - & .lock-screen__content-avatar { - margin-top: 5px; - color: #bababa; - font-weight: 500; - z-index: 1; - } - - & .lock-screen__content-input { - width: 260px; - z-index: 1; - } - - & .lock-screen__content-date { - position: fixed; - width: 100%; - font-size: 3rem; - text-align: center; - font-weight: 500; - bottom: 24px; - z-index: 1; - - & .current-year, - & .current-date span { - font-size: 1.5rem; + & .left, + & .right { + @include flexCenter; + border-radius: 30px; + background-color: #141313; + font-weight: 700; + padding: 80px; + filter: blur(4px); + } } - // & .current-year span { - // font-size: 0.75rem; - // } + & .app-lock-screen__unlock__content-avatar { + margin-top: 5px; + color: #bababa; + font-weight: 500; + z-index: 1; + } + + & .app-lock-screen__unlock__content-input { + width: 260px; + z-index: 1; + } + + & .app-lock-screen__unlock__content-date { + position: fixed; + width: 100%; + font-size: 3rem; + text-align: center; + font-weight: 500; + bottom: 24px; + z-index: 1; + + & .current-year, + & .current-date span { + font-size: 1.5rem; + } + } } } } diff --git a/src/components/AppComponents/AppLockScreen/index.tsx b/src/components/AppComponents/AppLockScreen/index.tsx index 0bcd70ff..63ca1bb5 100644 --- a/src/components/AppComponents/AppLockScreen/index.tsx +++ b/src/components/AppComponents/AppLockScreen/index.tsx @@ -13,139 +13,28 @@ * * 这里没有做解锁密码校验, 只要符合校验规则值皆可 * 可以根据需求自行更改 - * - * @deprecated - * 后期该组件会进行破坏性更新, 请注意版本的更新 - * 会将该组件的锁屏、解锁操作拆分, 使其更加合理 */ import './index.scss' -import { NModal, NInput, NForm, NFormItem, NButton, NSpace } from 'naive-ui' -import AppAvatar from '@/components/AppComponents/AppAvatar/index' +import { NModal } from 'naive-ui' +import LockScreen from './components/LockScreen' +import UnlockScreen from './components/UnlockScreen' -import { useSetting, useSignin } from '@/store' -import { getCache, setCache } from '@/utils/cache' -import dayjs from 'dayjs' -import { APP_CATCH_KEY } from '@/appConfig/appConfig' +import { useSetting } from '@/store' +import useAppLockScreen from '@/components/AppComponents/AppLockScreen/appLockVar' -import type { FormInst, InputInst } from 'naive-ui' - -const LockScreen = defineComponent({ - name: 'LockScreen', +const AppLockScreen = defineComponent({ + name: 'AppLockScreen', setup() { - const formRef = ref() - const inputInstRef = ref() - const settingStore = useSetting() - const signinStore = useSignin() - /** lockScreenSwitch 检测是否激活锁屏弹窗 */ - const { lockScreenSwitch, lockScreenInputSwitch } = - storeToRefs(settingStore) - const { changeSwitcher } = settingStore - const { logout } = signinStore + const { lockScreenSwitch } = storeToRefs(settingStore) - const HH_MM_FORMAT = 'HH:mm' - const AM_PM_FORMAT = 'A' - const YY_MM_DD_FORMAT = 'YY年MM月DD日' - const DDD_FORMAT = 'ddd' - - const state = reactive({ - lockCondition: { - pwd: null, - }, - HH_MM: dayjs().format(HH_MM_FORMAT), - AM_PM: dayjs().locale('en').format(AM_PM_FORMAT), - YY_MM_DD: dayjs().format(YY_MM_DD_FORMAT), - DDD: dayjs().format(DDD_FORMAT), - }) - const rules = { - pwd: { - required: true, - message: '请输入正确格式密码', - min: 6, - max: 12, - trigger: ['input', 'blur'], - }, - } - /** 检测是否处于锁屏状态 */ - const isLock = useStorage('isLockScreen', false, sessionStorage, { - mergeDefaults: true, - }) - const signin = getCache(APP_CATCH_KEY.signin) - - const handleLockScreen = () => { - formRef.value?.validate((error) => { - if (!error) { - isLock.value = true - state.lockCondition.pwd = null - - setCache('lockScreenPassword', state.lockCondition.pwd) - changeSwitcher(true, 'lockScreenSwitch') - } - }) - } - - const dayInterval = setInterval(() => { - state.HH_MM = dayjs().format(HH_MM_FORMAT) - state.AM_PM = dayjs().format(AM_PM_FORMAT) - }, 60_000) - const yearInterval = setInterval(() => { - state.YY_MM_DD = dayjs().format(YY_MM_DD_FORMAT) - state.DDD = dayjs().format(DDD_FORMAT) - }, 86_400_000) - - const handleBackToSignin = () => { - window.$dialog.warning({ - title: '警告', - content: '是否返回到登陆页?', - positiveText: '确定', - negativeText: '取消', - onPositiveClick: () => { - logout() - setTimeout(() => { - changeSwitcher(false, 'lockScreenSwitch') - }) - }, - }) - } - - const handleUnlockScreen = () => { - formRef.value?.validate((error) => { - if (!error) { - isLock.value = false - state.lockCondition.pwd = null - - changeSwitcher(false, 'lockScreenSwitch') - } - }) - } - - /** 当弹窗出现后, 自动聚焦密码输入框 */ - const handleModalUpdateShow = () => { - nextTick(() => { - inputInstRef.value?.focus() - }) - } - - onBeforeUnmount(() => { - clearInterval(dayInterval) - clearInterval(yearInterval) - }) + const { getLockAppScreen } = useAppLockScreen() return { lockScreenSwitch, - lockScreenInputSwitch, - rules, - ...toRefs(state), - isLock, - handleLockScreen, - formRef, - signin, - handleBackToSignin, - handleUnlockScreen, - inputInstRef, - handleModalUpdateShow, + getLockAppScreen, } }, render() { @@ -156,105 +45,15 @@ const LockScreen = defineComponent({ show maskClosable={false} closeOnEsc={false} - preset={!this.isLock ? 'dialog' : undefined} + preset={!this.getLockAppScreen() ? 'dialog' : undefined} title="锁定屏幕" - onAfterEnter={this.handleModalUpdateShow.bind(this)} > - {!this.isLock ? ( - /** 输入界面 */ -
- - - - - - - 锁屏 - - -
- ) : ( - /** 锁屏界面 */ -
-
-
-
{this.HH_MM?.split(':')[0]}
-
{this.HH_MM?.split(':')[1]}
-
-
- -
-
- - - - - - - 返回登陆 - - - 进入系统 - - - -
-
-
- {this.HH_MM} {this.AM_PM} -
-
- {this.YY_MM_DD} {this.DDD} -
-
-
-
- )} +
+ {!this.getLockAppScreen() ? : } +
) }, }) -export default LockScreen +export default AppLockScreen diff --git a/src/layout/components/SiderBar/index.tsx b/src/layout/components/SiderBar/index.tsx index 114eb5a6..50d6f998 100644 --- a/src/layout/components/SiderBar/index.tsx +++ b/src/layout/components/SiderBar/index.tsx @@ -38,7 +38,7 @@ import type { IconEventMapOptions, IconEventMap } from './type' const SiderBar = defineComponent({ name: 'SiderBar', - setup(_, { expose }) { + setup() { const settingStore = useSetting() const { t } = useI18n() diff --git a/src/layout/index.tsx b/src/layout/index.tsx index 5e25f0d8..dbbbe72b 100644 --- a/src/layout/index.tsx +++ b/src/layout/index.tsx @@ -24,6 +24,7 @@ import { LAYOUT_CONTENT_REF, } from '@/appConfig/routerConfig' import { layoutHeaderCssVars } from '@/layout/layoutResize' +import useAppLockScreen from '@/components/AppComponents/AppLockScreen/appLockVar' const Layout = defineComponent({ name: 'RLayout', @@ -37,9 +38,7 @@ const Layout = defineComponent({ const { height: windowHeight } = useWindowSize() const { menuTagSwitch: modelMenuTagSwitch } = storeToRefs(settingStore) const { setupAppRoutes } = menuStore - const isLock = useStorage('isLockScreen', false, sessionStorage, { - mergeDefaults: true, - }) + const { getLockAppScreen } = useAppLockScreen() const cssVarsRef = layoutHeaderCssVars([ layoutSiderBarRef, layoutMenuTagRef, @@ -53,7 +52,7 @@ const Layout = defineComponent({ windowHeight, modelMenuTagSwitch, cssVarsRef, - isLock, + getLockAppScreen, LAYOUT_CONTENT_REF, layoutSiderBarRef, layoutMenuTagRef, @@ -65,7 +64,7 @@ const Layout = defineComponent({ class={['layout']} style={[`height: ${this.windowHeight}px`, this.cssVarsRef]} > - {!this.isLock ? ( + {!this.getLockAppScreen() ? ( diff --git a/src/main.ts b/src/main.ts index 9e1aa71b..05579fa0 100644 --- a/src/main.ts +++ b/src/main.ts @@ -21,7 +21,7 @@ const setupTemplate = async () => { await setupI18n(app) - setupStore(app) + await setupStore(app) setupRouter(app) @@ -43,7 +43,7 @@ const setupWujieTemplate = async () => { await setupI18n(instance) - setupStore(instance) + await setupStore(instance) setupRouter(instance) diff --git a/src/store/index.ts b/src/store/index.ts index c6c5deba..2028ee18 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -26,7 +26,7 @@ export { useKeepAlive } from './modules/keep-alive/index' import type { App } from 'vue' /** 设置并且注册 pinia */ -export const setupStore = (app: App) => { +export const setupStore = async (app: App) => { const store = createPinia() app.use(store)