zb-admin/src/layout/index.vue

<template>
  <div class="g-container-layout" :class="classObj">
<!--    <Mobile/>-->
<!--    <LayoutVertical v-if="device === 'mobile'"/>-->
<!--    <component :is="LayoutComponents[themeConfig.mode]" v-else/>-->
<!--    <Theme />-->
    <LayoutColumns/>
  </div>
</template>

<script lang="ts" setup>
  import { computed,watch } from 'vue'
  import Theme from '@/components/Theme/index.vue'
  import Mobile from './components/Mobile/index.vue'
  import {useSettingStore} from "@/store/modules/setting"
  import { useResizeHandler } from './hooks/useResizeHandler'
  import LayoutVertical from './LayoutVertical/index.vue'
  import LayoutHorizontal from './LayoutHorizontal/index.vue'
  import LayoutColumns from './LayoutColumns/index.vue'

  const SettingStore = useSettingStore()
  const themeConfig = computed(() => SettingStore.themeConfig)
  const LayoutComponents = {
    horizontal: LayoutHorizontal,
    vertical: LayoutVertical,
    columns: LayoutColumns,
  };

  // 是否折叠
  const isCollapse = computed(() => {
    return !SettingStore.isCollapse
  })
  let { device } = useResizeHandler()

  watch(()=>device.value,(val)=>{
    let vertical = val==='mobile'?'vertical':themeConfig.value.mode
    const body = document.body as HTMLElement;
    body.setAttribute("class", `layout-${vertical}`);
  },{
    immediate:true
  })


  // 当屏幕切换的时候进行变换
  const classObj = computed(() => {
    return {
      hideSidebar: !SettingStore.isCollapse,
      openSidebar: SettingStore.isCollapse,
      withoutAnimation: SettingStore.withoutAnimation,
      mobile: device.value === 'mobile',
    }
  })

</script>

<style lang="scss" scoped>
  .g-container-layout {
    height: 100%;
    width: 100%;
    .main-container {
      display: flex;
      flex: 1;
      box-sizing: border-box;
      flex-direction: column;
    }
    &.mobile.openSidebar {
      position: fixed;
      top: 0;
    }
  }
  .sidebar-container {
    display: flex;
    flex-direction: column;
  }
  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 90;
  }
</style>