minnan-collect-web/src/App.vue

<template>
  <a-config-provider
    :locale="zhCN"
    :theme="{
      token: {
        colorPrimary: '#bd4b36',
      },
    }"
    :componentSize="'large'"
  >
    <NavBar v-if="!isInMiniProgram" />
    <main>
      <RouterView v-slot="{ Component }">
        <KeepAlive :include="keepAliveStore.cachedViews">
          <component :is="Component" :key="route.name" />
        </KeepAlive>
      </RouterView>
    </main>
    <FooterSmall v-if="!isInMiniProgram" />
  </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 { useKeepAliveStore } from './stores/keepAlive';
import { useRedirectLoginPage } from './common/LoginPageRedirect';
import { useAppConfiguration } from './api/system/useAppConfiguration';
import NavBar from './components/NavBar.vue';
import zhCN from "ant-design-vue/es/locale/zh_CN";
import FooterSmall from './components/FooterSmall.vue';
import { isInMiniProgram } from './composeables/MiniProgramIng.ts';

const authStore = useAuthStore();
const keepAliveStore = useKeepAliveStore();
const { checkAndRedirectLoginPage } = useRedirectLoginPage();
const { loadAppConfiguration } = useAppConfiguration();

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

const route = useRoute();

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

<style>
@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>