feat(layout): 侧边栏增加个人中心功能

- 新增 Personal 组件用于侧边栏的个人中心功能
- 在 Sidebar 组件中引入 Personal 组件
-个人中心包含首页、关于和退出功能
- 优化侧边栏样式，增加底部填充和对齐方式

src/views/app/layout/components/Sidebar/Sidebar.vue

@@ -3,16 +3,21 @@
     <div class="sidebar-layout">
       <!-- Left side - Primary menu -->
       <div class="primary-menu">
-        <logo class="logo" v-if="showLogo" :collapse="isCollapse" />
-        <div
-          v-for="route in menuList"
-          :key="route.path"
-          class="primary-menu-item"
-          :class="{ active: activeParent === route.path }"
-          @click="selectParentMenu(route)"
-        >
-          <i v-if="route.meta && route.meta.icon" class="iconfont fs22" :class="route.meta.icon"></i>
-          <span class="menu-title">{{ route.meta ? route.meta.title : '' }}</span>
+        <div>
+          <logo class="logo" v-if="showLogo" :collapse="isCollapse" />
+          <div
+            v-for="route in menuList"
+            :key="route.path"
+            class="primary-menu-item"
+            :class="{ active: activeParent === route.path }"
+            @click="selectParentMenu(route)"
+          >
+            <i v-if="route.meta && route.meta.icon" class="iconfont fs22" :class="route.meta.icon"></i>
+            <span class="menu-title">{{ route.meta ? route.meta.title : '' }}</span>
+          </div>
+        </div>
+        <div>
+          <personal />
         </div>
       </div>
 
@@ -45,9 +50,10 @@
 import { mapGetters, mapActions } from 'vuex'
 import Logo from './Logo'
 import variables from '@/assets/sass/variables.scss'
+import Personal from '@/views/app/layout/components/Sidebar/personal.vue'
 
 export default {
-  components: { Logo },
+  components: { Personal, Logo },
   computed: {
     ...mapGetters(['sidebar', 'sidebarList']),
     routes() {
@@ -228,6 +234,8 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: space-between;
+  padding-bottom: 16px;
   .logo {
     margin-top: 30px;
     margin-bottom: 40px;

src/views/app/layout/components/Sidebar/personal.vue

@@ -0,0 +1,138 @@
+<template>
+  <div class="navbar">
+    <div class="right-menu" v-if="$store.state.settings.sidebarLogo">
+      <el-dropdown class="avatar-container" trigger="click" placement="top-start">
+        <div class="avatar-wrapper">
+          <el-avatar :size="size" :src="circleUrl" class="user-avatar" />
+          <!--          <i class="el-icon-caret-bottom" />-->
+        </div>
+        <el-dropdown-menu slot="dropdown" class="user-dropdown">
+          <router-link to="/">
+            <el-dropdown-item>
+              首页
+            </el-dropdown-item>
+          </router-link>
+          <a target="_blank" href="http://www.ebiz-interactive.com/">
+            <el-dropdown-item>关于</el-dropdown-item>
+          </a>
+          <el-dropdown-item divided>
+            <span style="display:block;" @click="logout">退出</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import url from '@/assets/images/active.png'
+
+export default {
+  components: {},
+  data() {
+    return {
+      circleUrl: url,
+      size: 40
+    }
+  },
+  computed: {
+    ...mapGetters(['sidebar', 'avatar'])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('app/toggleSideBar')
+    },
+    async logout() {
+      await this.$store.dispatch('user/logout')
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+  height: 50px;
+  overflow: hidden;
+  position: relative;
+
+  .hamburger-container {
+    line-height: 46px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+    transition: background 0.3s;
+    -webkit-tap-highlight-color: transparent;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.025);
+    }
+  }
+
+  .breadcrumb-container {
+    float: left;
+  }
+
+  .right-menu {
+    float: right;
+    height: 100%;
+    line-height: 50px;
+
+    &:focus {
+      outline: none;
+    }
+
+    .right-menu-item {
+      display: inline-block;
+      padding: 0 8px;
+      height: 100%;
+      font-size: 18px;
+      color: #5a5e66;
+      vertical-align: text-bottom;
+
+      &.hover-effect {
+        cursor: pointer;
+        transition: background 0.3s;
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.025);
+        }
+      }
+    }
+
+    .avatar-container {
+      //margin-right: 30px;
+
+      .avatar-wrapper {
+        margin-top: 5px;
+        position: relative;
+
+        .user-avatar {
+          cursor: pointer;
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+        }
+
+        .el-icon-caret-bottom {
+          cursor: pointer;
+          position: absolute;
+          right: -20px;
+          top: 25px;
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+.el-avatar {
+  background: none;
+}
+.el-dropdown-menu__item {
+  &:hover {
+    color: var(--color-primary);
+    background: none;
+  }
+}
+</style>