dvcp_v2_webapp/ui/packages/layout/AiList.vue

<template>
  <div class="ai-list" :class="listClass">
    <div class="ai-list__title" v-if="$slots.title">
      <slot name="title"></slot>
    </div>
    <div class="ai-list__tabs" v-if="$slots.tabs">
      <slot name="tabs"></slot>
    </div>
    <el-row type="flex" class="ai-list__blank" v-else-if="$scopedSlots.blank" :class="{hasLeft:$scopedSlots.left}">
      <div class="ai-list__content--left" v-if="$scopedSlots.left">
        <slot name="left"/>
      </div>
      <div class="fill">
        <slot name="blank"/>
      </div>
    </el-row>
    <div class="ai-list__content" v-else :class="contentClass">
      <div class="ai-list__content--wrapper">
        <slot name="custom" v-if="!!$slots.custom"/>
        <template v-else>
          <div class="ai-list__content--left" v-if="$slots.left">
            <slot name="left"></slot>
          </div>
          <div class="ai-list__content--right" :style="{width: !$slots.left ? '100%' : 'auto' }">
            <div class="ai-list__content--right-wrapper" :style="{minHeight: $slots.left ? '100%' : 'auto' }">
              <slot name="content"></slot>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AiList',
  props: {
    isTabs: {
      type: Boolean,
      default: false
    }
  },

  computed: {

    listClass() {
      if (this.$slots.left || this.$slots.tabs) {
        return 'ai-left__list'
      }

      if (this.isTabs) {
        return 'ai-left__list ai-list__notab'
      }

      if (!this.isTabs && !this.$slots.tabs && !this.$slots.left) {
        return 'ai-list__single'
      }

      return ''
    },

    contentClass() {
      if (this.isTabs) {
        return 'ai-list__tab--content'
      }

      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
//全局tab  css
:deep( .ai-list__tabs ) {
  margin-top: 0 !important;

  .el-tabs__item {
    position: relative;
    width: auto !important;;
    padding: 0 16px !important;
  }

  .el-tabs__item.is-active {
    color: #222;
  }

  .el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #D8DCE3;
  }

  .el-tabs__active-bar {
    // left: -16px;
    // width: 50%!important;
  }

  .el-tabs__nav {
    border-radius: 0 !important;
  }

  .el-tabs__header {
    padding: 0;
    margin: 0 !important;
  }

  .el-tab-pane {
    overflow-y: auto;
  }
}

.ai-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  overflow: hidden;
  background: #f3f6f9;

  &.ai-list__single {
    height: 100%;
    padding: 0;

    .ai-list__title {
      margin: 0 20px;
    }

    .ai-list__content {
      flex: 1;
      padding: 20px 20px 20px;
      overflow: hidden;
    }

    .ai-list__content--wrapper {
      height: 100%;
      margin: 0 !important;
      overflow: hidden;
    }

    .ai-list__content--right-wrapper {
      // margin: 0 20px;
      padding: 20px 20px !important;
    }
  }

  div {
    box-sizing: border-box;
  }

  .ai-list__tabs {
    flex: 1;
    overflow: hidden;

    :deep( .el-tabs__item ) {
      min-width: 80px;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      color: #222;
      text-align: center;
      border-bottom: 1px solid transparent !important;
    }

    :deep(.el-tabs__header ) {
      margin: 0;
    }

    :deep(.el-tabs ) {
      height: 100%;
    }

    :deep(.el-tabs__content ) {
      height: calc(100% - 32px);
      background: #f3f6f9;

      & > div {
        height: 100%;
      }
    }
  }

  .ai-list__content {
    .ai-list__content--wrapper {
      display: flex;
      margin: 20px 0;
    }
  }

  .ai-list__content--left {
    display: flex;
    flex-shrink: 0;
    margin-right: 20px;
    padding-left: 1px;
    height: 100%;
    box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
    min-width: 264px;
    max-width: 50%;
  }

  .ai-list__content--right {
    flex: 1;
    overflow-y: auto;

    .ai-list__content--right-wrapper {
      padding: 12px 16px 12px;
      background: #FFFFFF;
      border-radius: 2px;
      box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
    }
  }

  .ai-list__tab--content {
    height: 100% !important;

    & > div {
      overflow-y: auto !important;
    }
  }

  &.ai-list__notab {
    padding: 0;
  }

  .ai-list__blank {
    flex: 1;
    padding: 16px;
    box-sizing: border-box;
    height: calc(100% - 50px);


    &.hasLeft {
      padding: 16px 0;
    }

    & > .fill {
      height: 100%;
      overflow: auto;
    }
  }
}

.ai-left__list {
  height: 100%;
  background: #f3f6f9;
  overflow: hidden;

  .ai-list__content {
    flex: 1;
    overflow: hidden;

    .ai-list__content--wrapper {
      height: calc(100% - 32px);
    }

    .ai-list__content--right {
      // margin-left: 11px;
      overflow: auto;
    }
  }
}
</style>