Guarp
af2ba6b1a3
完成稿件管理逻辑； 新增博客编辑器； 新增博客； 新增请求测试小工具； 修改sweetheart样式； 打包用户头像组件； 新增导航栏隐藏功能； 新增3D打枪小游戏；
67 lines
1.7 KiB
Vue
67 lines
1.7 KiB
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> |