student-client-v3/src/App.vue

<script setup lang="ts">
import {
  NConfigProvider,
  NMessageProvider,
  useDialog,
  useMessage,
} from "naive-ui";
import { zhCN, dateZhCN } from "naive-ui";
import { defineComponent, watchEffect } from "vue";
import { useStore, setStore, store } from "./store/store";
import themeOverrides from "./themeOverrides";

setStore(useStore());

const spinning = $computed(() => store.hasGlobalMask);

const DummyComp = defineComponent({
  setup() {
    /** @ts-expect-error 特殊处理，其他地方是可以直接用$message的 */
    window.$message = useMessage();
    /** @ts-expect-error 特殊处理，其他地方是可以直接用$dialog的 */
    window.$dialog = useDialog();
  },
  render() {
    return null;
  },
});

watchEffect(() => {
  const bodyScrollProp = spinning ? "hidden" : "auto";
  document.body.style.overflow = bodyScrollProp;
});
</script>

<template>
  <n-message-provider :duration="10000">
    <n-dialog-provider>
      <n-config-provider
        :locale="zhCN"
        :dateLocale="dateZhCN"
        :themeOverrides="themeOverrides"
      >
        <router-view />
        <DummyComp />
      </n-config-provider>
    </n-dialog-provider>
  </n-message-provider>
  <div
    v-if="spinning"
    style="position: absolute; top: 0; left: 0; width: 100vw; height: 100vh"
  >
    <n-spin :show="spinning" size="large" class="global-mask fade-in"> </n-spin>
  </div>
</template>

<style>
.global-mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  /* 不知道为啥在窗口宽度小于#app min-width 的时候，遮罩层覆盖不全。要控制body的overflow。 */
  min-width: var(--app-min-width);
  overflow: hidden;
  display: flex;
  place-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 6000;
}
.fade-in {
  opacity: 0;
  animation-name: fadeInOpacity;
  animation-delay: 1.5s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 60s;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  100% {
    opacity: 0.7;
  }
}
</style>