Feature/pro layout

package.json

@@ -14,6 +14,7 @@
     "test:ci": "npm run lint && npm run test:unit"
   },
   "dependencies": {
+    "@zt8989/element-pro-layout": "^0.1.1",
     "axios": "0.18.1",
     "core-js": "3.6.5",
     "element-ui": "2.13.2",

src/layout/BasicLayout.vue

@@ -0,0 +1,149 @@
+<template>
+  <pro-layout
+    :menus="$router.options.routes"
+    :collapsed="!sidebar.opened"
+    :theme="theme"
+    :layout="layout"
+    :content-width="contentWidth"
+    :auto-hide-header="autoHideHeader"
+    :media-query="query"
+    :is-mobile="isMobile"
+    :handle-media-query="handleMediaQuery"
+    :handle-collapse="handleCollapse"
+    :without-animation="sidebar.withoutAnimation"
+    :fixed-header="fixedHeader"
+    :show-logo="showLogo"
+  >
+    <template v-slot:rightContentRender>
+      <div class="right-menu">
+        <el-dropdown class="avatar-container" trigger="click">
+          <div class="avatar-wrapper">
+            <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+            <i class="el-icon-caret-bottom" />
+          </div>
+          <el-dropdown-menu slot="dropdown" class="user-dropdown">
+            <router-link to="/">
+              <el-dropdown-item>
+                Home
+              </el-dropdown-item>
+            </router-link>
+            <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
+              <el-dropdown-item>Github</el-dropdown-item>
+            </a>
+            <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
+              <el-dropdown-item>Docs</el-dropdown-item>
+            </a>
+            <el-dropdown-item divided @click.native="logout">
+              <span style="display:block;">Log Out</span>
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </template>
+    <router-view />
+  </pro-layout>
+</template>
+
+<script>
+import ProLayout from '@zt8989/element-pro-layout'
+import { mapGetters } from 'vuex'
+
+export default {
+  components: { ProLayout },
+  data() {
+    return {
+      menus: [],
+      collapsed: false,
+      autoHideHeader: false,
+      query: {},
+      layout: 'sidemenu',
+      contentWidth: 'Fluid',
+      theme: 'dark'
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'avatar'
+    ]),
+    device() {
+      return this.$store.state.app.device
+    },
+    isMobile() {
+      return this.device === 'mobile'
+    },
+    fixedHeader() {
+      return this.$store.state.settings.fixedHeader
+    },
+    showLogo() {
+      return this.$store.state.settings.sidebarLogo
+    }
+  },
+  methods: {
+    handleMediaQuery(isMobile) {
+      this.$store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
+    },
+    handleCollapse(payload) {
+      this.$store.dispatch('app/toggleSideBar', payload)
+    },
+    async logout() {
+      await this.$store.dispatch('user/logout')
+      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .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 .3s;
+
+        &:hover {
+          background: rgba(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;
+        }
+      }
+    }
+  }
+</style>