smsb-web-develop/src/layout/components/Sidebar/index.vue

<template>
  <div class="c-sidebar">
    <div class="c-sidebar__header">
      <router-link
        tag="img"
        class="u-pointer"
        src="/logo.png"
        to="/"
      />
    </div>
    <el-scrollbar
      class="c-sidebar__menu"
      wrap-class="c-sidebar__wrapper"
    >
      <el-menu
        mode="vertical"
        :default-active="activeMenu"
        text-color="#a5aec7"
        active-text-color="#fff"
        :unique-opened="false"
        :collapse-transition="false"
      >
        <sidebar-item
          v-for="route in routers"
          :key="route.path"
          :item="route"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import path from 'path'
import { mapGetters } from 'vuex'
import SidebarItem from './SidebarItem'

function resolve (...args) {
  return path.resolve(...args)
}

function filterRoutes (routes, basePath) {
  const res = []

  routes.forEach(route => {
    if (route.hidden) {
      return
    }
    const { name, meta = {} } = route
    const path = basePath ? resolve(basePath, route.path) : route.path
    let children = route.children
    if (children) {
      children = filterRoutes(children, path)
      if (!children.length) {
        return
      }
      if (children.length === 1) {
        const { path: cpath, name: cname, meta: cmeta = {} } = children[0]
        res.push({ path: resolve(path, cpath), name: cname, meta: { ...meta, ...cmeta } })
        return
      }
      res.push({ path, name, meta, children })
    } else {
      res.push({ path, name, meta })
    }
  })

  return res
}

export default {
  name: 'Sidebar',
  components: { SidebarItem },
  computed: {
    ...mapGetters(['permissionRoutes']),
    routers () {
      // 暂时只考虑两层
      return filterRoutes(this.permissionRoutes)
    },
    activeMenu () {
      const path = this.$route.matched[1]?.path
      return path?.replace(/\/$/, '')
    }
  }
}
</script>

<style lang="scss" scoped>
.c-sidebar {
  display: inline-flex;
  flex-direction: column;
  width: 240px;
  background-color: #fff;
  box-shadow: 1px 0 4px rgba(0, 21, 41, 0.08);
  z-index: 9;

  &__header {
    flex: none;
    padding: 32px 0 24px;
    text-align: center;
  }

  &__menu {
    flex: 1 1 auto;
    min-height: 0.5;

    ::v-deep {
      .c-sidebar__wrapper {
        margin-right: -7px !important;
        overflow-x: hidden;
      }

      .el-scrollbar__bar {
        display: none;
      }

      .el-menu {
        width: 100%;
      }

      .el-menu-item,
      .el-submenu__title {
        display: flex;
        align-items: center;
      }

      .nest-menu .el-menu-item {
        padding-left: 48px !important;
      }

      .el-menu-item,
      .el-submenu__title,
      .el-icon-arrow-down {
        font-weight: bold;
      }

      .el-menu-item.is-active {
        color: #fff !important;
        background-color: $blue !important;
      }

      .is-active > .el-submenu__title,
      .is-active > .el-submenu__title > .el-icon-arrow-down {
        color: $blue !important;
      }

      .svg-icon {
        margin-right: 8px;
        color: inherit;
        font-size: 20px;
      }

      .sub-el-icon {
        color: inherit;
        width: 20px;
        height: 22px;
        margin-right: 8px;
      }
    }
  }
}
</style>