agentui/src/layout/Sidebar.vue

<template>
  <div :class="{'has-logo':showLogo}" class="sidebar-wrapper">
    <div class="logo">
      <div class="logo-title">代理端管理系统</div>
    </div>
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :router="true"
        mode="vertical"
        :show-timeout="200"
        class="sidebar-el-menu"
      >
        <template v-for="item in permission_routes">
          <el-submenu v-if="item.children&&item.children.length>0" :index="item.path" :key="item.path">
            <template slot="title">
              <i :class="item.meta&&item.meta.icon||'el-icon-menu'" />
              <span>{{item.meta&&item.meta.title||''}}</span>
            </template>
            <template v-for="child in item.children">
              <el-menu-item :index="resolvePath(item.path, child.path)" :key="child.path">
                <span>{{child.meta&&child.meta.title||''}}</span>
              </el-menu-item>
            </template>
          </el-submenu>
          <el-menu-item v-else :index="item.path" :key="item.path">
            <i :class="item.meta&&item.meta.icon||'el-icon-menu'" />
            <span>{{item.meta&&item.meta.title||''}}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { constantRoutes } from '@/router'

export default {
  name: 'Sidebar',
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    permission_routes() {
      return constantRoutes.filter(item => !item.hidden)
    },
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    showLogo() {
      return this.sidebar.opened
    }
  },
  methods: {
    resolvePath(parentPath, childPath) {
      if (childPath.startsWith('/')) {
        return childPath
      }
      return parentPath + '/' + childPath
    }
  }
}
</script>

<style lang="scss" scoped>
.sidebar-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 210px;
  background: #001529;
  z-index: 100;
  transition: width 0.28s;

  &.collapsed {
    width: 54px;
  }
}

.logo {
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: #002140;

  .logo-title {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
  }
}

.sidebar-el-menu {
  border-right: none;
  height: calc(100% - 60px);

  .el-menu-item,
  .el-submenu__title {
    color: rgba(255, 255, 255, 0.7);
    height: 46px;
    line-height: 46px;
    margin: 0 4px;
    border-radius: 4px;

    &:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    &.is-active {
      background: #1890ff;
      color: #fff;
    }
  }
}
</style>