基础功能

对应的设置还在开发迭代中，效果图暂无。代码如下

<template>
  <div>
    <!--  svg 方式 -->
    <div v-if="system.logoType ==='svg'" class="logo-group-icon">
        // 此处调用
      <ibps-icon-svg :size="logoSize" :name="system.logo||'logo'" :title="system.name" class="ibps-pr-5" />
      <div v-if="!collapse" v-show="!collapse===!asideCollapse" class="logo-title ibps-ellipsis" style="width:140px">{{ $IBPS.$t(system.name) }}</div>
      <i v-if="subsystemList && subsystemList.length >1 " class="el-icon-arrow-down el-icon--right" />
    </div>
    <!-- 图片方式-->
    <div v-if="system.logoType ==='image'" class="logo-group-image">
      <img :src="collapse?logoIconOnly:logoIconAll" :class="['logo-group-image--'+(collapse?'collapse':'expand')]">
      <i v-if="subsystemList && subsystemList.length >1 " class="el-icon-arrow-down el-icon--right" />
    </div>
    <!--  park 方式  -->
    <div v-if="system.logoType ==='park'" class="logo-group-park">
      <icon-park :type="system.logo||'Deploy'" :size="logoSize" theme="filled" />
      <div v-if="!collapse" v-show="!collapse===!asideCollapse" class="logo-title ibps-ellipsis" style="width:140px">{{ $IBPS.$t(system.name) }}</div>
      <i v-if="subsystemList && subsystemList.length >1 " class="el-icon-arrow-down el-icon--right" />
    </div>
    <!--  icon 方式  -->
    <div v-else class="logo-group-icon">
      <ibps-icon :name="system.logo||'logo'" :size="logoSize" :title="system.name" class="ibps-pr-5" />
      <div v-if="!collapse" v-show="!collapse===!asideCollapse" class="logo-title ibps-ellipsis" style="width:140px">{{ $IBPS.$t(system.name) }}</div>
      <i v-if="subsystemList && subsystemList.length >1 " class="el-icon-arrow-down el-icon--right" />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    system: Object,
    asideCollapse: Boolean,
    subsystemList: Array,
    themeName: String
  },
  data() {
    return {
      collapse: true
    }
  },
  computed: {
    logoSize() {
      return this.asideCollapse ? 32 : 26
    },
    logoIconAll() {
      return `${this.$baseUrl}images/theme/${this.themeName}/all.png`
    },
    logoIconOnly() {
      return `${this.$baseUrl}images/theme/${this.themeName}/only.png`
    }
  },
  watch: {
    asideCollapse: {
      handler: function(val, oldVal) {
        if (val) {
          this.collapse = val
        } else {
          setTimeout(() => {
            this.collapse = val
          }, 200)
        }
      },
      immediate: true
    }
  }
}
</script>