merchant_feedov_web/src/App.vue

<template>
  <a-config-provider :locale="locale">
    <div class="public_local_loading" :class="{ 'hidden-loading': !systemStore.getLocalLoading }">
      <div class="public_local_loading_bg">
        <a-spin class="public_local_loading_logo" dot />
      </div>
    </div>
    <router-view v-if="isRouterActive" />
  </a-config-provider>
</template>

<script setup>
import { ref, onMounted, nextTick, provide } from "vue"
import { useDarkThemeHook, useLang } from '@/hooks'
import { useSystemStore } from '@/store/modules/systemStore'


const isRouterActive = ref(true)
// 全局语言
const { locale } = useLang()
const systemStore = useSystemStore()

// 暗黑主题
useDarkThemeHook()

provide('reloadRoutePage', () => {
  isRouterActive.value = false
  nextTick(() => {
    isRouterActive.value = true
  })
})


onMounted(async () => {
  const getLoadingNode = document.getElementById('Loading')
  const { body } = document
  if (getLoadingNode) {
    body.removeChild(getLoadingNode)
  }
})
</script>

<style lang="less">
body {
  overflow: hidden;
}

// 加载loading css
.public_local_loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;

  .public_local_loading_bg {
    width: 12rem;
    height: 12rem;
    position: sticky;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .public_local_loading_logo {
    font-size: 2rem;
    user-select: none;
  }
}

.hidden-loading.public_local_loading {
  opacity: 0;
  z-index: -10 !important;
  cursor: auto !important;
}

@keyframes r-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}
</style>