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>