cyber/src/App.vue

<template>
    <NavBar v-if="store.state.navBar.display"/>
    <div class="main-container" :style="{marginTop: store.state.navBar.display ? '60px' : '0'}">
      <router-view />
    </div>

    <LoadingSpinner v-if="store.state.loading.isLoading"/>
</template>

<script setup>
import {onMounted, watch} from 'vue'
import {useStore} from 'vuex'
import NavBar from "./components/NavBar.vue";
import LoadingSpinner from "./components/LoadingSpinner.vue";
import AuthService from "../services/auth.js";

const store = useStore()

// 根据主题更新 body 上的类
const updateGlobalTheme = (theme) => {
  // if (!(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  //   document.body.classList.add('theme-light')
  //   document.documentElement.classList.remove('dark');
  //   return;
  // }
  if (theme === 'light') {
    document.body.classList.add('theme-light');
    document.documentElement.classList.remove('dark');
  } else {
    document.body.classList.remove('theme-light');
    document.documentElement.classList.add('dark');
  }
}

// 挂载时根据 store 中的主题状态更新全局样式
onMounted(async () => {
  updateGlobalTheme(store.state.theme);
  if (await AuthService.getToken()) {
    await AuthService.setSelfInfo();
  } else {
    AuthService.logout();
  }
})

// 监听 Vuex 主题状态的变化，更新全局样式
watch(
    () => store.state.theme,
    (newTheme) => {
      updateGlobalTheme(newTheme)
    }
)
</script>
<style>
#app {
  display: flex;
  flex-direction: row;
  align-content: center;
}
.main-container {
  flex: 1;
  flex-direction: column;
  display: flex;
  width: 100%;
  align-items: center;
  align-content: center;
}
</style>