cip-components/main/framework/top-left.vue

<template>
  <div class="main-framework--top-left">
    <header class="main-framework--top-left__header main-framework__header">
      <div style="display: flex; align-items: center">
        <div class="main-framework--top-left__name main-framework__name" >
          <slot name="name" :is-collapse="false"></slot>
        </div>
      </div>
      <div class="main-framework--top__nav" style="flex-shrink: 1; flex-grow: 2;"><slot name="headerNav"></slot></div>
      <div style="  flex-shrink: 0;display: flex;justify-content: space-between; height: 100%">
<!--        <div style="flex:1;width: 0;overflow: hidden;"><slot name="header-body"></slot></div>-->
        <slot name="header"></slot>
      </div>
    </header>
    <div class="main-framework--top-left__xx">
      <aside class="main-framework--top-left__aside main-framework__aside" :class="{'is-collapse':collapse}" v-if="!hideAside">
        <div class="main-framework--top-left__aside__nav" :class="{'is-expanded': hideAsideSwitch}">
          <el-scrollbar :key="collapse">
            <slot name="nav" :is-collapse="collapse"></slot>
          </el-scrollbar>
        </div>
        <div class="main-framework--top-left__aside__switch main-framework__aside__switch" v-if="!hideAsideSwitch">
          <i @click="toggleCollapse" class="fold-icon">
            <Component :is="collapse? 'UnFold': 'Fold'"></Component>
          </i>
        </div>
      </aside>
      <div class="main-framework--top-left__content">
        <div style="display: flex; flex-direction: column;flex-grow:2;height:0;">
          <div class="main-framework--top-left__tabs" v-show="withTabs === true">
            <slot name="tabs"></slot>
          </div>
          <main class="main-framework--top-left__main main-framework__main">
            <slot></slot>
          </main>
        </div>
        <footer class="main-framework--top-left__footer main-framework__footer" v-if="!hideFooter">
          <slot name="footer"></slot>
        </footer>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, defineComponent, onMounted, onBeforeUnmount, computed } from 'vue'
import { ElScrollbar } from 'element-plus'
import { UnFold, Fold } from './icons-vue'
import { isEmpty } from '@cip/utils/util'
export default defineComponent({
  name: 'MainFrameworkLeft2',
  components: { ElScrollbar, UnFold, Fold },
  props: {
    hideFooter: Boolean,
    layout: String,
    withTabs: Boolean,
    hideAside: Boolean,
    hideAsideSwitch: Boolean
  },
  setup () {
    const localCollapse = localStorage.getItem('isCollapse')
    const isCollapse = ref(localCollapse ? JSON.parse(localCollapse) : undefined)
    const toggleCollapse = () => {
      isCollapse.value = !collapse.value
      localStorage.setItem('isCollapse', isCollapse.value)
      window.removeEventListener('resize', autoAdaptation)
    }
    const autoCollapse = ref(false)
    const collapse = computed(() => {
      return isCollapse.value ?? autoCollapse.value
    })
    const autoAdaptation = () => {
      if (window.innerWidth <= 1400) {
        autoCollapse.value = true
      } else {
        autoCollapse.value = false
      }
    }
    onMounted(() => {
      if (isEmpty(isCollapse.value)) {
        autoAdaptation()
        window.addEventListener('resize', autoAdaptation)
      }
    })
    onBeforeUnmount(() => {
      window.removeEventListener('resize', autoAdaptation)
    })
    return {
      collapse,
      toggleCollapse
    }
  }
})
</script>
<style lang="less">
@footerHeight: 52px;
@sideWidth: 256px;
.main-framework--top-left{
  width: 100%;
  height: 100%;
  overflow: hidden;
  //display: flex;
  &__xx{
    height: calc(100% - var(--main-framework-header-height, 52px));
    display: flex;
  }
  &__aside{
    width: @sideWidth;
    flex-shrink: 0;
    height: 100%;
    transition: width 0.2s;
    &.is-collapse{
      width: 64px; // el-menu collapse的宽度
    }
    &__nav{
      padding-top: 16px;
      box-sizing: border-box;
      height: calc(100%  - @footerHeight);
      &.is-expanded {
        padding: 16px 0;
        height: 100%;
      }
    }
    &__switch{
      height: @footerHeight;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .fold-icon{
      //color: #fff;
      font-size: 20px;
      line-height: 1em;
      cursor: pointer;
    }
  }
  &__name{
    width: @sideWidth;
    height: var(--main-framework-header-height, 52px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
    box-sizing: border-box;
    flex-wrap: nowrap;
    white-space: nowrap;
    position: relative;
    z-index:1;
    flex-shrink: 0;
    &.is-collapse{
      padding: 0 8px;
      justify-content: center;
      overflow: hidden;
      width: 64px; // el-menu collapse的宽度
    }
  }
  &__header{
    height: var(--main-framework-header-height, 52px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    position: relative;
    z-index: 200;
  }
  &__main{
    width: 100%;
    height: 0;
    flex-grow: 2;
    box-sizing: border-box;
    //padding-top: 22px;
    overflow: auto;
  }
  &__tabs{
    flex-shrink: 0;
    padding: 0;
    //height: 52px;
    box-sizing: border-box;
  }
  &__breadcrumb{
    height: 42px;
    display: flex;
    align-items: center;
  }
  &__footer{
    height: @footerHeight;
  }
  &__content{
    position: relative;
    flex-grow: 2;
    width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
</style>