重写AppLockSreen组件

CHANGELOG.md

@@ -10,6 +10,7 @@
 - 更新了 router permission 方法（路由守卫）
 - 补充了一些模块文档
 - 搜索支持以菜单模块的 icon 进行渲染，如果为空则以 icon table 默认填充
+- 重写锁屏功能，现在将锁屏逻辑与解锁逻辑拆分为两个组件
 
 ### Fixes
 

README.md

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

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

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

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

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()
+  })
+}

src/components/AppComponents/AppLockScreen/index.scss

@@ -1,19 +1,23 @@
-.lock-screen {
+.app-lock-screen__content {
-  position: fixed;
+  & .app-lock-screen__input {
-  left: 0;
+    & button[class*="n-button"] {
-  right: 0;
+      width: 100%;
-  top: 0;
+    }
-  bottom: 0;
-  background: black;
 
-  & .lock-screen__content {
+    & form[class*="n-form"] {
+      margin: 24px 0px;
+    }
+  }
+
+  & .app-lock-screen__unlock {
+    .app-lock-screen__unlock__content {
       position: relative;
       width: 100%;
       height: 100%;
       @include flexCenter;
       flex-direction: column;
 
-    & .lock-screen__content-bg {
+      & .app-lock-screen__unlock__content-bg {
         position: absolute;
         width: 100%;
         height: 100%;
@@ -33,19 +37,19 @@
         }
       }
 
-    & .lock-screen__content-avatar {
+      & .app-lock-screen__unlock__content-avatar {
         margin-top: 5px;
         color: #bababa;
         font-weight: 500;
         z-index: 1;
       }
 
-    & .lock-screen__content-input {
+      & .app-lock-screen__unlock__content-input {
         width: 260px;
         z-index: 1;
       }
 
-    & .lock-screen__content-date {
+      & .app-lock-screen__unlock__content-date {
         position: fixed;
         width: 100%;
         font-size: 3rem;
@@ -58,10 +62,7 @@
         & .current-date span {
           font-size: 1.5rem;
         }
-
+      }
-      // & .current-year span {
-      //   font-size: 0.75rem;
-      // }
     }
   }
 }

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 { NModal } from 'naive-ui'
-import AppAvatar from '@/components/AppComponents/AppAvatar/index'
+import LockScreen from './components/LockScreen'
+import UnlockScreen from './components/UnlockScreen'
 
-import { useSetting, useSignin } from '@/store'
+import { useSetting } from '@/store'
-import { getCache, setCache } from '@/utils/cache'
+import useAppLockScreen from '@/components/AppComponents/AppLockScreen/appLockVar'
-import dayjs from 'dayjs'
-import { APP_CATCH_KEY } from '@/appConfig/appConfig'
 
-import type { FormInst, InputInst } from 'naive-ui'
+const AppLockScreen = defineComponent({
-
+  name: 'AppLockScreen',
-const LockScreen = defineComponent({
-  name: 'LockScreen',
   setup() {
-    const formRef = ref<FormInst>()
-    const inputInstRef = ref<InputInst>()
-
     const settingStore = useSetting()
-    const signinStore = useSignin()
+    const { lockScreenSwitch } = storeToRefs(settingStore)
-    /** lockScreenSwitch 检测是否激活锁屏弹窗 */
-    const { lockScreenSwitch, lockScreenInputSwitch } =
-      storeToRefs(settingStore)
-    const { changeSwitcher } = settingStore
-    const { logout } = signinStore
 
-    const HH_MM_FORMAT = 'HH:mm'
+    const { getLockAppScreen } = useAppLockScreen()
-    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)
-    })
 
     return {
       lockScreenSwitch,
-      lockScreenInputSwitch,
+      getLockAppScreen,
-      rules,
-      ...toRefs(state),
-      isLock,
-      handleLockScreen,
-      formRef,
-      signin,
-      handleBackToSignin,
-      handleUnlockScreen,
-      inputInstRef,
-      handleModalUpdateShow,
     }
   },
   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="app-lock-screen__content">
-          /** 输入界面 */
+          {!this.getLockAppScreen() ? <LockScreen /> : <UnlockScreen />}
-          <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>
-        )}
       </NModal>
     )
   },
 })
 
-export default LockScreen
+export default AppLockScreen

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()

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, {
+    const { getLockAppScreen } = useAppLockScreen()
-      mergeDefaults: true,
-    })
     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">

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)
 

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)