重写AppLockSreen组件

2025-04-05 19:42:07 +08:00 · 2023-06-20 16:33:47 +08:00 · 2023-06-20 16:33:47 +08:00 · 2a64d07a42
commit 2a64d07a42
parent 4e6f70280c
12 changed files with 392 additions and 280 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -10,6 +10,7 @@
 - 更新了 router permission 方法（路由守卫）
 - 补充了一些模块文档
 - 搜索支持以菜单模块的 icon 进行渲染，如果为空则以 icon table 默认填充
+- 重写锁屏功能，现在将锁屏逻辑与解锁逻辑拆分为两个组件

 ### Fixes

--- a/README.md
+++ b/README.md
@ -36,7 +36,8 @@
 - 锁屏
 - 自动化路由
 - 带有拓展功能的表格
- 封装 `axios` 自动取消重复请求
+- 封装 `axios` 自动取消重复请求，暴露拦截器注册器
+- 全局菜单搜索
 - 动态菜单（多级菜单）
 - 主题色切换
 - 错误页
@ -58,6 +59,7 @@
 > 该项目模板采用 `vue3.x` `vite4.x` `pinia` `tsx` 进行开发。
 > 使用 `naive ui` 作为组件库。
 > 预设了最佳构建体验的配置与常用搬砖工具。意在提供一个简洁、快速上手的模板。
+> 该模板不支持移动端设备。

 ## 提示

--- a/src/components/AppComponents/AppLockScreen/appLockVar.ts
+++ b/src/components/AppComponents/AppLockScreen/appLockVar.ts
@ -0,0 +1,36 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-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
--- a/src/components/AppComponents/AppLockScreen/components/LockScreen/index.tsx
+++ b/src/components/AppComponents/AppLockScreen/components/LockScreen/index.tsx
@ -0,0 +1,91 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-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<FormInst | null>(null)
+    const inputInstRef = ref<InputInst | null>(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 (
+      <div class="app-lock-screen__input">
+        <AppAvatar vertical align="center" avatarSize={52} />
+        <NForm
+          ref="formInstRef"
+          model={this.lockCondition}
+          rules={rules}
+          labelPlacement="left"
+        >
+          <NFormItem path="lockPassword">
+            <NInput
+              ref="inputInstRef"
+              v-model:value={this.lockCondition.lockPassword}
+              type="password"
+              placeholder="请输入锁屏密码"
+              clearable
+              minlength={6}
+              maxlength={12}
+            />
+          </NFormItem>
+          <NButton type="primary" onClick={this.lockScreen.bind(this)}>
+            锁屏
+          </NButton>
+        </NForm>
+      </div>
+    )
+  },
+})
+
+export default LockScreen
--- a/src/components/AppComponents/AppLockScreen/components/UnlockScreen/index.tsx
+++ b/src/components/AppComponents/AppLockScreen/components/UnlockScreen/index.tsx
@ -0,0 +1,145 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-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<FormInst | null>(null)
+    const inputInstRef = ref<InputInst | null>(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 (
+      <div class="app-lock-screen__unlock">
+        <div class="app-lock-screen__unlock__content">
+          <div class="app-lock-screen__unlock__content-bg">
+            <div class="left">{this.HH_MM?.split(':')[0]}</div>
+            <div class="right">{this.HH_MM?.split(':')[1]}</div>
+          </div>
+          <div class="app-lock-screen__unlock__content-avatar">
+            <AppAvatar vertical align="center" avatarSize={52} />
+          </div>
+          <div class="app-lock-screen__unlock__content-input">
+            <NForm ref="formRef" model={this.lockCondition} rules={rules}>
+              <NFormItem path="lockPassword">
+                <NInput
+                  ref="inputInstRef"
+                  v-model:value={this.lockCondition.lockPassword}
+                  type="password"
+                  placeholder="请输入解锁密码"
+                  clearable
+                  minlength={6}
+                  maxlength={12}
+                />
+              </NFormItem>
+              <NSpace justify="space-between">
+                <NButton
+                  type="primary"
+                  text
+                  onClick={this.backToSignin.bind(this)}
+                >
+                  返回登陆
+                </NButton>
+                <NButton
+                  type="primary"
+                  text
+                  onClick={this.unlockScreen.bind(this)}
+                >
+                  进入系统
+                </NButton>
+              </NSpace>
+            </NForm>
+          </div>
+          <div class="app-lock-screen__unlock__content-date">
+            <div class="current-date">
+              {this.HH_MM}&nbsp;<span>{this.AM_PM}</span>
+            </div>
+            <div class="current-year">
+              {this.YY_MM_DD}&nbsp;<span>{this.DDD}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  },
+})
+
+export default UnlockScreen
--- a/src/components/AppComponents/AppLockScreen/hook.ts
+++ b/src/components/AppComponents/AppLockScreen/hook.ts
@ -0,0 +1,38 @@
+/**
+ *
+ * @author Ray <https://github.com/XiaoDaiGua-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<InputInst | null>) => {
+  nextTick(() => {
+    inputInstRef.value?.focus()
+  })
+}
--- 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;
+        }
+      }
    }
  }
 }
--- 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<FormInst>()
-    const inputInstRef = ref<InputInst>()
-
    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 ? (
-          /** 输入界面 */
-          <div class="lock-screen__input">
-            <AppAvatar vertical align="center" avatarSize={52} />
-            <NForm
-              ref="formRef"
-              model={this.lockCondition}
-              rules={this.rules}
-              labelPlacement="left"
-              style={{
-                margin: '24px 0',
-              }}
-            >
-              <NFormItem path="pwd">
-                <NInput
-                  v-model:value={this.lockCondition.pwd}
-                  type="password"
-                  placeholder="请输入锁屏密码"
-                  clearable
-                  minlength={6}
-                  maxlength={12}
-                  ref="inputInstRef"
-                />
-              </NFormItem>
-              <NButton
-                type="primary"
-                onClick={this.handleLockScreen.bind(this)}
-                style={{
-                  width: '100%',
-                }}
-              >
-                锁屏
-              </NButton>
-            </NForm>
-          </div>
-        ) : (
-          /** 锁屏界面 */
-          <div class="lock-screen">
-            <div class="lock-screen__content">
-              <div class="lock-screen__content-bg">
-                <div class="left">{this.HH_MM?.split(':')[0]}</div>
-                <div class="right">{this.HH_MM?.split(':')[1]}</div>
-              </div>
-              <div class="lock-screen__content-avatar">
-                <AppAvatar vertical align="center" avatarSize={52} />
-              </div>
-              <div class="lock-screen__content-input">
-                <NForm
-                  ref="formRef"
-                  model={this.lockCondition}
-                  rules={this.rules}
-                >
-                  <NFormItem path="pwd">
-                    <NInput
-                      v-model:value={this.lockCondition.pwd}
-                      type="password"
-                      placeholder="请输入解锁密码"
-                      clearable
-                      minlength={6}
-                      maxlength={12}
-                      ref="inputInstRef"
-                    />
-                  </NFormItem>
-                  <NSpace justify="space-between">
-                    <NButton
-                      type="primary"
-                      text
-                      onClick={this.handleBackToSignin.bind(this)}
-                    >
-                      返回登陆
-                    </NButton>
-                    <NButton
-                      type="primary"
-                      text
-                      onClick={this.handleUnlockScreen.bind(this)}
-                    >
-                      进入系统
-                    </NButton>
-                  </NSpace>
-                </NForm>
-              </div>
-              <div class="lock-screen__content-date">
-                <div class="current-date">
-                  {this.HH_MM}&nbsp;<span>{this.AM_PM}</span>
-                </div>
-                <div class="current-year">
-                  {this.YY_MM_DD}&nbsp;<span>{this.DDD}</span>
-                </div>
-              </div>
-            </div>
-          </div>
-        )}
+        <div class="app-lock-screen__content">
+          {!this.getLockAppScreen() ? <LockScreen /> : <UnlockScreen />}
+        </div>
      </NModal>
    )
  },
 })

-export default LockScreen
+export default AppLockScreen
--- 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()
--- 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() ? (
          <NLayout class="layout-full" hasSider>
            <Menu />
            <NLayout class="layout__view-container__layout">
--- 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)

--- 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<Element>) => {
+export const setupStore = async (app: App<Element>) => {
  const store = createPinia()

  app.use(store)