sl-sfy-safety/src/App.vue

<template>
  <el-config-provider size="default" :zIndex="zIndex">
    <AppProvider>
      <RouterView v-if="!isLock" />
      <transition v-if="isLock && $route.name !== LoginName" name="slide-up">
        <LockScreen />
      </transition>
    </AppProvider>
  </el-config-provider>
</template>

<script lang="ts" setup>
  import { computed, onMounted, onUnmounted, ref } from 'vue';
  import { ElConfigProvider } from 'element-plus';
  import { LockScreen } from '@/components/Lockscreen';
  import { AppProvider } from '@/components/Application';
  import { useLockscreenStore } from '@/store/modules/lockscreen';
  import { useRoute } from 'vue-router';
  import { PageEnum } from '@/enums/pageEnum';

  const route = useRoute();
  const useLockscreen = useLockscreenStore();

  const isLock = computed(() => useLockscreen.isLock);
  const lockTime = computed(() => useLockscreen.lockTime);

  const zIndex = ref(3000);

  const LoginName = PageEnum.BASE_LOGIN_NAME;

  let timer;

  const timekeeping = () => {
    clearInterval(timer);
    if (route.name === LoginName || isLock.value) return;
    // 设置不锁屏
    useLockscreen.setLock(false);
    // 重置锁屏时间
    useLockscreen.setLockTime();
    timer = setInterval(() => {
      // 锁屏倒计时递减
      useLockscreen.setLockTime(lockTime.value - 1);
      if (lockTime.value <= 0) {
        // 设置锁屏
        useLockscreen.setLock(true);
        return clearInterval(timer);
      }
    }, 1000);
  };

  onMounted(() => {
    document.addEventListener('mousedown', timekeeping);
  });

  onUnmounted(() => {
    document.removeEventListener('mousedown', timekeeping);
  });
</script>

<style lang="scss">
  #nprogress .bar {
    background: var(--el-color-primary);
  }
</style>