折叠

birt

2025-04-13 9888eb4278a2c74f8533b468bba958cfffb7b125

 zhitan-vue/src/layout/index.vue

@@ -9,7 +9,7 @@
              <img v-if="sideTheme === 'theme-dark'" :src="systemInfo.leftLogo" class="sidebar-logo" />
              <img v-else :src="systemInfo.leftLogo" class="sidebar-logo" />
            </div>
            <div class="name" v-if="sidebar.opened" :style="{ color: '#fff' }">
            <div class="name" v-if="sidebar.opened" :style="{ color: sideTheme === 'theme-dark' ? '#fff' : '#333' }">
              {{ title }}
            </div>
          </div>
@@ -86,13 +86,13 @@

// 跳转到报警页面
function goToAlarm() {
  router.push('/alarm/list')
  router.push('/alarmmanage/measuremen?modelCode=BJGL')
}

// 打开AI大模型对话框
function openAIModel() {
  // 这里可以实现打开AI对话框的逻辑
  console.log('打开AI大模型对话框')
  // 跳转到指定的URL
  window.open('https://deepseek.tan-zhonghe.com/chat', '_blank')
}

const classObj = computed(() => ({
@@ -119,21 +119,25 @@

// 监听路由变化，处理首页的侧边栏显示
watchEffect(() => {
  // 检查是否是首页路由
  if (route.path === '/index' || route.path === '/') {
  // 检查是否是首页路由，但排除/index/index子路由
  if ((route.path === '/index' || route.path === '/') && route.path !== '/index/index') {
    // 首页路由，确保侧边栏不隐藏，但状态是折叠的
    appStore.showCollapsedSidebar()
    appStore.toggleSideBarHide(false) // 改为不隐藏侧边栏
  } else if (route.meta && route.meta.showSidebar === false) {
    // 如果路由明确指定隐藏侧边栏
    appStore.toggleSideBarHide(true)
  } else {
    // 其他路由，确保侧边栏可见
    appStore.toggleSideBarHide(false)
  }
})

// 组件挂载时，确保首页侧边栏状态正确
onMounted(() => {
  // 如果当前是首页，确保侧边栏是折叠的而不是隐藏的
  if (route.path === '/index' || route.path === '/') {
    appStore.showCollapsedSidebar()
  // 如果当前是首页，确保侧边栏可见
  if (route.path === '/index/index') {
    appStore.toggleSideBarHide(false)
    appStore.sidebar.opened = true
  }
})

@@ -351,47 +355,12 @@
}

.themeDark {
  .navbar-container {
    background: #1a235d;
    border-bottom: 2px solid #110f2e;
  }
  
  .navbar {
    background: transparent !important;
    background: #002866 !important;
  }
  
  .sidebar-container {
    background-color: #002866 !important;
  }
}

.themeLight {
  .navbar-container {
    background: #3883FA;
  }
  
  .navbar {
    background: transparent !important;
    
    .left {
      .sidebar-logo-container {
        .name {
          color: #fff !important;
        }
      }
    }
    
    .right {
      .right-menu {
        .right-menu-item {
          color: #fff;
          
          .right-menu-icon {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>