novel-front-pc/src/App.vue

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