You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.4 KiB
89 lines
2.4 KiB
<template>
|
|
<div id="app" :style="{ backgroundColor: route.path.includes('chapter') ? '#e9e4d8' : '#f5f5f5' }">
|
|
<AuthProvider>
|
|
<AuthorApplicationProvider>
|
|
<router-view />
|
|
</AuthorApplicationProvider>
|
|
</AuthProvider>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { onMounted, watch } from 'vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { routerEvents } from '@/router';
|
|
import { useMainStore } from './store';
|
|
import AuthProvider from '@/components/auth/AuthProvider.vue';
|
|
import AuthorApplicationProvider from '@/components/auth/AuthorApplicationProvider.vue';
|
|
|
|
export default {
|
|
name: 'App',
|
|
components: {
|
|
AuthProvider,
|
|
AuthorApplicationProvider
|
|
},
|
|
setup() {
|
|
const route = useRoute();
|
|
const store = useMainStore();
|
|
|
|
// 立即初始化全局变量，确保路由守卫可以使用
|
|
window.$store = store;
|
|
window.routerEvents = routerEvents;
|
|
|
|
// 监听路由变化，检查是否需要触发登录弹窗
|
|
onMounted(() => {
|
|
// 立即初始化登录状态，确保在路由守卫执行前已经正确恢复用户状态
|
|
store.initializeAuth();
|
|
|
|
// 如果有触发登录的事件，执行它
|
|
if (typeof routerEvents.triggerLogin === 'function') {
|
|
routerEvents.triggerLogin();
|
|
routerEvents.triggerLogin = null;
|
|
}
|
|
|
|
// 输出调试信息
|
|
if (window.$debug?.logUserState) {
|
|
window.$debug.logUserState();
|
|
}
|
|
});
|
|
|
|
// 每次路由变化时也检查一次
|
|
watch(route, () => {
|
|
if (typeof routerEvents.triggerLogin === 'function') {
|
|
routerEvents.triggerLogin();
|
|
routerEvents.triggerLogin = null;
|
|
}
|
|
});
|
|
|
|
return {
|
|
route
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@use '@/assets/styles/global.scss';
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
|
|
}
|
|
|
|
#app {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
padding: 20px;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|