refactor: refine layout directory structure

src/views/layout/components/AppMain.vue

@@ -0,0 +1,18 @@
+<template>
+	<section class="app-main" style="min-height: 100%">
+		<transition name="fade" mode="out-in">
+			<router-view :key="key"></router-view>
+		</transition>
+	</section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
+    }
+  }
+}
+</script>

src/views/layout/components/Levelbar.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-breadcrumb class="app-levelbar" separator="/">
+    <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path">
+      <span v-if='item.redirect==="noredirect"||index==levelList.length-1' class="no-redirect">{{item.name}}</span>
+      <router-link v-else :to="item.redirect||item.path">{{item.name}}</router-link>
+    </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+
+<script>
+export default {
+  created() {
+    this.getBreadcrumb()
+  },
+  data() {
+    return {
+      levelList: null
+    }
+  },
+  methods: {
+    getBreadcrumb() {
+      let matched = this.$route.matched.filter(item => item.name)
+      const first = matched[0]
+      if (first && (first.name !== '首页' || first.path !== '')) {
+        matched = [{ name: '首页', path: '/' }].concat(matched)
+      }
+      this.levelList = matched
+    }
+  },
+  watch: {
+    $route() {
+      this.getBreadcrumb()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .app-levelbar.el-breadcrumb {
+    display: inline-block;
+    font-size: 14px;
+    line-height: 50px;
+    margin-left: 10px;
+    .no-redirect {
+      color: #97a8be;
+      cursor: text;
+    }
+  }
+</style>

src/views/layout/components/Navbar.vue

@@ -0,0 +1,117 @@
+<template>
+	<el-menu class="navbar" mode="horizontal">
+		<hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
+		<levelbar></levelbar>
+		<error-log v-if="log.length>0" class="errLog-container" :logsList="log"></error-log>
+		<screenfull class='screenfull'></screenfull>
+		<el-dropdown class="avatar-container" trigger="click">
+			<div class="avatar-wrapper">
+				<img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
+				<i class="el-icon-caret-bottom"></i>
+			</div>
+			<el-dropdown-menu class="user-dropdown" slot="dropdown">
+				<router-link class='inlineBlock' to="/">
+					<el-dropdown-item>
+						首页
+					</el-dropdown-item>
+				</router-link>
+				<a target='_blank' href="https://github.com/PanJiaChen/vue-element-admin/">
+					<el-dropdown-item>
+						项目地址
+					</el-dropdown-item>
+				</a>
+				<el-dropdown-item divided><span @click="logout" style="display:block;">退出登录</span></el-dropdown-item>
+			</el-dropdown-menu>
+		</el-dropdown>
+	</el-menu>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import Levelbar from './Levelbar'
+import Hamburger from 'components/Hamburger'
+import Screenfull from 'components/Screenfull'
+import ErrorLog from 'components/ErrLog'
+import errLogStore from 'store/errLog'
+
+export default {
+  components: {
+    Levelbar,
+    Hamburger,
+    ErrorLog,
+    Screenfull
+  },
+  data() {
+    return {
+      log: errLogStore.state.errLog
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'sidebar',
+      'name',
+      'avatar'
+    ])
+  },
+  methods: {
+    toggleSideBar() {
+      this.$store.dispatch('ToggleSideBar')
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload()// 为了重新实例化vue-router对象 避免bug
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+	.navbar {
+			height: 50px;
+			line-height: 50px;
+			border-radius: 0px !important;
+			.hamburger-container {
+					line-height: 58px;
+					height: 50px;
+					float: left;
+					padding: 0 10px;
+			}
+			.errLog-container {
+					display: inline-block;
+					position: absolute;
+					right: 150px;
+			}
+			.screenfull {
+					position: absolute;
+					right: 90px;
+					top: 16px;
+					color: red;
+			}
+			.avatar-container {
+					height: 50px;
+					display: inline-block;
+					position: absolute;
+					right: 35px;
+					.avatar-wrapper {
+							cursor: pointer;
+							margin-top: 5px;
+							position: relative;
+							.user-avatar {
+									width: 40px;
+									height: 40px;
+									border-radius: 10px;
+							}
+							.el-icon-caret-bottom {
+									position: absolute;
+									right: -20px;
+									top: 25px;
+									font-size: 12px;
+							}
+					}
+			}
+	}
+</style>
+
+
+

src/views/layout/components/Sidebar.vue

@@ -0,0 +1,23 @@
+<template>
+    <el-menu mode="vertical" theme="dark" unique-opened :default-active="$route.path" :collapse="isCollapse">
+      <sidebar-item :routes='permission_routers'></sidebar-item>
+    </el-menu>
+</template>
+
+
+<script>
+import { mapGetters } from 'vuex'
+import SidebarItem from './SidebarItem'
+export default {
+  components: { SidebarItem },
+  computed: {
+    ...mapGetters([
+      'permission_routers',
+      'sidebar'
+    ]),
+    isCollapse() {
+      return !this.sidebar.opened
+    }
+  }
+}
+</script>

src/views/layout/components/SidebarItem.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class='menu-wrapper'>
+    <template v-for="item in routes">
+
+      <router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
+        <el-menu-item :index="item.path+'/'+item.children[0].path" class='submenu-title-noDropdown'>
+          <icon-svg v-if='item.icon' :icon-class="item.icon"></icon-svg><span>{{item.children[0].name}}</span>
+        </el-menu-item>
+      </router-link>
+
+      <el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
+        <template slot="title">
+          <icon-svg v-if='item.icon' :icon-class="item.icon"></icon-svg><span>{{item.name}}</span>
+        </template>
+        <template v-for="child in item.children" v-if='!child.hidden'>
+
+          <sidebar-item class='nest-menu' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
+
+          <router-link v-else :to="item.path+'/'+child.path">
+            <el-menu-item :index="item.path+'/'+child.path">
+              <icon-svg v-if='child.icon' :icon-class="child.icon"></icon-svg><span>{{child.name}}</span>
+            </el-menu-item>
+          </router-link>
+
+        </template>
+
+      </el-submenu>
+
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SidebarItem',
+  props: {
+    routes: {
+      type: Array
+    }
+  }
+}
+</script>
+

src/views/layout/components/TabsView.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class='tabs-view-container'>
+    <router-link class="tabs-view" v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path">
+      <el-tag :closable="true" :type="isActive(tag.path)?'primary':''" @close='closeViewTabs(tag,$event)'>
+        {{tag.name}}
+      </el-tag>
+    </router-link>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    visitedViews() {
+      return this.$store.state.app.visitedViews.slice(-6)
+    }
+  },
+  methods: {
+    closeViewTabs(view, $event) {
+      this.$store.dispatch('delVisitedViews', view).then((views) => {
+        if (this.isActive(view.path)) {
+          const latestView = views.slice(-1)[0]
+          if (latestView) {
+            this.$router.push(latestView.path)
+          } else {
+            this.$router.push('/')
+          }
+        }
+      })
+      $event.preventDefault()
+    },
+    generateRoute() {
+      if (this.$route.matched[this.$route.matched.length - 1].name) {
+        return this.$route.matched[this.$route.matched.length - 1]
+      }
+      this.$route.matched[0].path = '/'
+      return this.$route.matched[0]
+    },
+    addViewTabs() {
+      this.$store.dispatch('addVisitedViews', this.generateRoute())
+    },
+    isActive(path) {
+      return path === this.$route.path
+    }
+  },
+  watch: {
+    $route() {
+      this.addViewTabs()
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  .tabs-view-container {
+    display: inline-block;
+    vertical-align: top;
+    margin-left: 10px;
+    .tabs-view {
+      margin-left: 10px;
+    }
+  }
+</style>

src/views/layout/components/index.js

@@ -0,0 +1,4 @@
+export { default as Navbar } from './Navbar'
+export { default as Sidebar } from './Sidebar'
+export { default as TabsView } from './TabsView'
+export { default as AppMain } from './AppMain'