AIManage/src/layout/index.vue

<template>  
  <el-container class="wh-full main-container">
      <el-header><NavbarRight /></el-header>
      <el-container class="center-container">
        <el-aside width="240px">
          <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";
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);

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();
  }
});




const route = useRoute();
watch(route, () => {
  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: #fff;
  }
  .center-container{
    padding-top:12px;
    .el-aside{
      background-color: #fff;
      .el-scrollbar{
        padding:12px;
      }
      .el-menu{
        border-right:none;
      }
    }
    .el-main{
      padding:0px;
    }
  }
}
</style>
<style lang="scss" scoped>


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