minnan-collect-web/src/App.vue

<template>
  <a-config-provider
    :locale="zhCN"
    :theme="{
      token: {
        colorPrimary: '#bd4b36',
      },
    }"
    :componentSize="'large'"
  >
    <NavBar />
    <main>
      <RouterView v-slot="{ Component }">
        <KeepAlive>
          <component :is="Component" v-if="route.meta.keepAlive" />
        </KeepAlive>
        <component :is="Component" v-if="!route.meta.keepAlive" />
      </RouterView>
    </main>
    <FooterSmall />
  </a-config-provider>
</template>

<script setup lang="ts">
import { onMounted, watch } from 'vue';
import { RouterView, useRoute } from 'vue-router'
import { useAuthStore } from './stores/auth';
import NavBar from './components/NavBar.vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import { useRedirectLoginPage } from './common/LoginPageRedirect';
import FooterSmall from './components/FooterSmall.vue';

const authStore = useAuthStore();
const { checkAndRedirectLoginPage } = useRedirectLoginPage();

onMounted(async () => {
  await authStore.loadLoginState();
  checkAndRedirectLoginPage();
});

const route = useRoute();

watch(route, () => {
  window.scrollTo({
    top: 0,
    behavior: 'instant'
  });
  checkAndRedirectLoginPage();
});
</script>

<style>
@import "bootstrap/dist/css/bootstrap.css";
@import "bootstrap/dist/css/bootstrap-grid.css";
@import "bootstrap/dist/css/bootstrap-utilities.css";
@import "./assets/scss/main.scss";
@import "vue3-carousel/carousel.css";
@import "@vuemap/vue-amap/dist/style.css";
@import "@imengyu/vue-scroll-rect/lib/vue-scroll-rect.css";
</style>