novel-app/RuoYi-App/App.vue

<template>
  <div id="app">
    <!-- 顶部菜单栏 -->
    <div v-if="showHeader" class="app-header">
      <router-link to="/">首页</router-link>
      <router-link to="/pages/novel/list">小说列表</router-link>
      <router-link to="/pages/author/apply">作者申请</router-link>
      <router-link to="/pages/search/index">搜索</router-link>
    </div>
    
    <!-- 主内容区 -->
    <router-view v-if="isRouterAlive" />
    
    <!-- 使用自定义TabBar组件 -->
    <CustomTabbar v-if="showTabBar" />
  </div>
</template>

<script>
import CustomTabbar from '@/components/custom-tabbar/index.vue';

export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload
    }
  },
  components: { CustomTabbar },
  data() {
    return {
      // 确保所有属性都在这里定义
      isRouterAlive: true,
      showTabBar: false,
      showHeader: false,
      isMounted: false, // 添加组件挂载状态标志
      tabBarPages: [
        '/pages/index/index',
        '/pages/novel/list',
        '/pages/bookshelf/index',
        '/pages/me/index'
      ],
      hideMenuRoutes: [
        '/login',
        '/register',
        '/forgot-password',
        '/novel/reader'
      ]
    }
  },
  mounted() {
    this.isMounted = true;
    this.checkRouteAuth();
    this.initTheme();
    this.initStoreState();
    this.safeUpdateMenuVisibility();
  },
  beforeDestroy() {
    this.isMounted = false;
  },
  watch: {
    // 安全监听路由变化
    '$route': {
      immediate: true,
      handler(newRoute) {
        if (this.isMounted && newRoute && newRoute.path) {
          this.safeUpdateMenuVisibility();
        }
      }
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
        this.safeUpdateMenuVisibility();
      });
    },
    
    safeUpdateMenuVisibility() {
      // 确保组件已挂载且路由对象存在
      if (!this.isMounted || !this.$route || !this.$route.path) return;
      
      const currentPath = this.$route.path;
      
      // 检查是否显示底部TabBar
      this.showTabBar = this.tabBarPages.some(path => 
        currentPath.includes(path) || currentPath === path
      );
      
      // 检查是否显示顶部菜单
      this.showHeader = !this.hideMenuRoutes.some(route => 
        currentPath.includes(route) || currentPath === route
      );
    },
    
    initStoreState() {
      const token = uni.getStorageSync('token') || '';
      const readingProgress = uni.getStorageSync('readingProgress') || 1;
      
      // 确保 store 存在
      if (this.$store) {
        this.$store.commit('SET_TOKEN', token);
        this.$store.commit('SET_READING_PROGRESS', readingProgress);
      }
      
      console.log('App launched, store:', this.$store ? this.$store.state : '未初始化');
    },
    
    initTheme() {
      // 主题初始化逻辑
      console.log('主题初始化完成');
      
      // 设置默认主题
      const themeName = uni.getStorageSync('selectedTheme') || 'aydzBlue';
      
      // 应用主题变量
      const themes = {
        aydzBlue: {
          '--primary-color': '#2a5caa',
          '--bg-color': '#e6f7ff',
          '--text-color': '#1a3353',
          '--card-bg': '#d0e8ff',
          '--header-bg': '#2a5caa'
        },
        default: {
          '--primary-color': '#1890ff',
          '--bg-color': '#f8f9fa',
          '--text-color': '#333',
          '--card-bg': '#ffffff'
        }
      };
      
      const theme = themes[themeName] || themes.default;
      
      // 应用主题变量
      Object.keys(theme).forEach(key => {
        document.documentElement.style.setProperty(key, theme[key]);
      });
    },
    
    checkRouteAuth() {
      // 简单的路由权限检查
      if (!this.$route || !this.$route.path) return;
      
      const authRequiredRoutes = [
        '/pages/author/apply',
        '/pages/bookshelf/index',
        '/pages/me/index'
      ];
      
      if (authRequiredRoutes.some(route => this.$route.path.includes(route))) {
        if (!this.$store.getters.token) {
          uni.showToast({ title: '请先登录', icon: 'none' });
          this.$router.push('/pages/login');
        }
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/index.scss';

/* 全局样式修复 */
#app {
  min-height: 100vh;
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* 确保菜单不被其他元素覆盖 */
.custom-tabbar {
  z-index: 99999 !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

/* 修复页面内容被遮挡的问题 */
.page-content {
  padding-bottom: 140rpx !important;
}

/* 确保tabbar显示 */
uni-tabbar {
  display: flex !important;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

/* 修复高度问题 */
uni-tabbar .uni-tabbar {
  height: 50px !important;
}

/* 页面内容区域 */
.page-content {
  padding-bottom: 60px !important;
}

.app-header {
  background: var(--header-bg, #2a5caa);
  padding: 10px;
  display: flex;
  justify-content: space-around;
  position: sticky;
  top: 0;
  z-index: 1000;
  
  a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    
    &.router-link-exact-active {
      color: #ffcc00;
      border-bottom: 2px solid #ffcc00;
    }
  }
}
</style>