cloudflare_temp_email/frontend/src/App.vue

<script setup>
import { darkTheme, NGlobalStyle, zhCN } from 'naive-ui'
import { computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { useGlobalState } from './store'
import { useIsMobile } from './utils/composables'
import Header from './views/Header.vue';
import Footer from './views/Footer.vue';


const { localeCache, isDark, loading, useSideMargin } = useGlobalState()
const theme = computed(() => isDark.value ? darkTheme : null)
const localeConfig = computed(() => localeCache.value == 'zh' ? zhCN : null)
const isMobile = useIsMobile()
const showSideMargin = computed(() => !isMobile.value && !useSideMargin.value);

const { locale } = useI18n({
  useScope: 'global',
});
locale.value = localeCache.value;

onMounted(async () => {
  const token = import.meta.env.VITE_CF_WEB_ANALY_TOKEN;

  const exist = document.querySelector('script[src="https://static.cloudflareinsights.com/beacon.min.js"]') !== null
  if (token && !exist) {
    const script = document.createElement('script');
    script.defer = true;
    script.src = 'https://static.cloudflareinsights.com/beacon.min.js';
    script.dataset.cfBeacon = `{ token: ${token} }`;
    document.body.appendChild(script);
  }

});
</script>

<template>
  <n-config-provider :locale="localeConfig" :theme="theme">
    <n-global-style />
    <n-spin description="loading..." :show="loading">
      <n-message-provider>
        <n-grid x-gap="12" :cols="12">
          <n-gi v-if="!showSideMargin" span="1"></n-gi>
          <n-gi :span="showSideMargin ? 12 : 10">
            <div class="main">
              <n-space vertical>
                <n-layout style="min-height: 80vh;">
                  <Header />
                  <router-view></router-view>
                </n-layout>
                <Footer />
              </n-space>
            </div>
          </n-gi>
          <n-gi v-if="!showSideMargin" span="1"></n-gi>
        </n-grid>
        <n-back-top />
      </n-message-provider>
    </n-spin>
  </n-config-provider>
</template>


<style>
.n-switch {
  margin-left: 10px;
  margin-right: 10px;
}
</style>

<style scoped>
.side {
  height: 100vh;
}

.main {
  height: 100vh;
  text-align: center;
}

.n-grid {
  height: 100%;
}

.n-gi {
  height: 100%;
}

.n-space {
  height: 100%;
}
</style>