AIManage/src/layout/index.vue

<template>
  <el-container class="wh-full main-container">
    <el-header>
      <NavbarRight2 v-if="isNav2" />
      <NavbarRight v-else />
    </el-header>
    <el-container class="center-container">
      <el-aside width="200px">
        <Sidebar class="sidebar-container" />
      </el-aside>
      <el-main>
        <AppMain />
      </el-main>
    </el-container>
  </el-container>
</template>
<script setup lang="ts">
import { useAppStore, usePermissionStore } from "@/store";
import { DeviceEnum } from "@/enums/DeviceEnum";
import NavbarRight2 from './components/NavBar/components/NavbarRight2.vue'
const appStore = useAppStore();
const permissionStore = usePermissionStore();
const width = useWindowSize().width;
const WIDTH_DESKTOP = 992; // 响应式布局容器固定宽度  大屏（>=1200px） 中屏（>=992px） 小屏（>=768px）
const isMobile = computed(() => appStore.device === DeviceEnum.MOBILE);
const isOpenSidebar = computed(() => appStore.sidebar.opened);
let isNav2 = ref(false)
const activeTopMenuPath = computed(() => appStore.activeTopMenuPath); // 顶部菜单激活path

watch(
  () => activeTopMenuPath.value,
  (newVal) => {

    permissionStore.setMixLeftMenus(newVal);
  },
  {
    deep: true,
    immediate: true,
  }
);

watchEffect(() => {
  appStore.toggleDevice(
    width.value < WIDTH_DESKTOP ? DeviceEnum.MOBILE : DeviceEnum.DESKTOP
  );
  if (width.value >= WIDTH_DESKTOP) {
    appStore.openSideBar();
  } else {
    appStore.closeSideBar();
  }
});


onMounted(() => {
  isNav2.value = location.href.indexOf("/home/index2") >= 0
});

const route = useRoute();
watch(route, (a, b, c) => {
  isNav2.value = a.path == '/home/index2';
  if (isMobile.value && isOpenSidebar.value) {
    appStore.closeSideBar();
  }
});
</script>
<style lang="scss">
.main-container {
  background-color: #F3F8FB;

  .el-menu-item {
    &.is-active {
      background-color: #EEF3FB;
      border-right: solid 3px var(--el-color-primary);
    }
  }

  .el-header {
    background-color: #EEF7FE;
  }

  .center-container {
    padding-top: 12px;

    .el-aside {
      background-color: #fff;

      .el-scrollbar {
        padding: 12px;
      }

      .el-menu {
        border-right: none;
      }
    }

    .el-main {
      padding: 0px;
    }
  }
}

html.dark {
  .main-container {
    background-color: #1F263D;
    .router-link-active{
      background-color: #fff;
      .el-menu-item {
        background-color: #ffff !important;
        span.ml-1{
          font-weight: bold;
          color: #4F9EFA;
        }
      }
      svg{
        fill:#4F9EFA;
      }
    }
    .el-menu-item {
      background-color: #1F263D;
      &.is-active {
        background-color: #fff;
        span.ml-1{
          font-weight: bold;
          color: #4F9EFA;
        }
      }
    }
    .el-sub-menu.is-active{
      .el-sub-menu__title{
        background-color: #1F263D;
        }
    }

    .el-header {
      background-color: #1F263D;
    }

    .center-container {
      .el-aside {
        background-color: #1F263D;

      }

    }
  }
}
</style>
<style lang="scss" scoped>
.main-container {
  position: relative;
  min-height: 100%;
  transition: margin-left 0.28s;
}
</style>