wms-naivevue/src/App.vue

<template>
  <NConfigProvider
    :date-locale="dateZhCN"
    :locale="zhCN"
    :theme="getDarkTheme"
    :theme-overrides="getThemeOverrides"
  >
    <AppProvider>
      <RouterView v-if="!isLock" />

      <transition v-if="isLock && $route.name !== 'login'" name="slide-up">
        <LockScreen />
      </transition>
    </AppProvider>
    <n-watermark
      v-if="getIsWaterMark"
      :content="proName"
      cross
      fullscreen
      :font-size="18"
      :line-height="16"
      :font-weight="500"
      font-color="rgba(200, 200, 200, 0.40)"
      :width="284"
      :height="284"
      :x-offset="12"
      :y-offset="60"
      :rotate="-15"
    />
  </NConfigProvider>
</template>

<script lang="ts" setup>
  import { computed, onMounted, onUnmounted } from 'vue';
  import { darkTheme, dateZhCN, zhCN } from 'naive-ui';
  import { LockScreen } from '@/components/Lockscreen';
  import { AppProvider } from '@/components/Application';
  import { useLockscreenStore } from '@/store/modules/lockscreen';
  import { useRoute } from 'vue-router';
  import { useDesignSettingStore } from '@/store/modules/designSetting';
  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
  import { lighten } from '@/utils';

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

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

  const proName = import.meta.env.VITE_GLOB_APP_TITLE;

  const { getIsWaterMark } = useProjectSetting();

  /**
   * @type import('naive-ui').GlobalThemeOverrides
   */
  const getThemeOverrides = computed(() => {
    const appTheme = designStore.appTheme;
    const lightenStr = lighten(designStore.appTheme, 6);
    return {
      common: {
        primaryColor: appTheme,
        primaryColorSuppl: appTheme,
        primaryColorHover: lightenStr,
        primaryColorPressed: lightenStr,
      },
      LoadingBar: {
        colorLoading: appTheme,
      },
      Layout: {
        colorEmbedded: '#f5f7f9',
      },
    };
  });

  const getDarkTheme = computed(() => (designStore.darkTheme ? darkTheme : undefined));

  let timer;

  const timekeeping = () => {
    clearInterval(timer);
    if (route.name == 'login' || 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>