1

src/components/admin-frame/Header.vue

@@ -12,7 +12,8 @@
           </el-col>
           <el-col :span="12" class="right">
             <i class="el-icon-user-solid"></i>
-            <span>{{ user.name || '游客' }}</span>
+            <!-- <span>{{ user.name || '游客' }}</span> -->
+            <span>游客</span>
             <el-button type="danger" size="mini" @click="logout">退出登录</el-button>
           </el-col>
         </el-col>

src/components/admin-frame/Home.vue

@@ -4,7 +4,20 @@
       <el-header style="padding:0"><v-head></v-head></el-header>
       <el-container>
         <el-aside width="200px"><v-sidebar></v-sidebar></el-aside>
-        <el-main>Main</el-main>
+        <el-main>
+          <div class="content-box" :class="{ 'content-collapse': collapse }">
+            <v-tags></v-tags>
+            <el-col :span="24" class="content">
+              <transition name="move" mode="out-in">
+                <el-row>
+                  <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
+                  <el-col :span="24" class="container" style="padding:15px"><router-view></router-view></el-col>
+                </el-row>
+              </transition>
+              <el-backtop target=".content"></el-backtop>
+            </el-col>
+          </div>
+        </el-main>
       </el-container>
     </el-container>
   </div>
@@ -13,15 +26,33 @@
 <script>
 import vHead from './Header.vue';
 import vSidebar from './Sidebar.vue';
+import vTags from './Tags.vue';
+import breadcrumb from './breadcrumb.vue';
+import bus from './bus';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
   name: 'Home',
   props: {},
-  components: { vHead, vSidebar },
+  components: { vHead, vSidebar, vTags, breadcrumb },
   data: function() {
-    return {};
+    return {
+      collapse: false,
+      tagsList: [],
+    };
+  },
+  created() {
+    bus.$on('collapse-content', msg => {
+      this.collapse = msg;
+    });
+    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
+    bus.$on('tags', msg => {
+      let arr = [];
+      for (let i = 0, len = msg.length; i < len; i++) {
+        msg[i].name && arr.push(msg[i].name);
+      }
+      this.tagsList = arr;
+    });
   },
-  created() {},
   methods: {},
   computed: {
     ...mapState(['user']),

src/components/admin-frame/Sidebar.vue

@@ -44,6 +44,7 @@
 </template>
 
 <script>
+const { system, userMenu } = require('../../layout/deploy/menu');
 import { mapState, createNamespacedHelpers } from 'vuex';
 import _ from 'lodash';
 import bus from './bus';
@@ -54,7 +55,7 @@ export default {
   data: function() {
     return {
       collapse: false,
-      items: [{ icon: 'icon-shouye', index: '/adminCenter/homeIndex', title: '系统首页' }],
+      items: system,
     };
   },
   created() {
@@ -66,8 +67,7 @@ export default {
   methods: {
     getMenu() {
       let list = _.cloneDeep(this.items);
-      let data = [{ icon: 'icon-ceshi', index: '/adminCenter/test/index', title: '测试页面' }];
-      list.push(...data);
+      list.push(...userMenu);
       this.$set(this, `items`, _.uniqBy(list, 'index'));
     },
   },

src/components/admin-frame/Tags.vue

@@ -1,37 +1,73 @@
 <template>
-  <div class="tags" v-if="showTags">
-    <ul>
-      <li class="tags-li" v-for="(item, index) in tagsList" :class="{ active: isActive(item.path) }" :key="index">
-        <router-link :to="item.path" class="tags-li-title">
-          {{ item.title }}
-        </router-link>
-        <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>
-      </li>
-    </ul>
-    <div class="tags-close-box">
-      <el-dropdown @command="handleTags">
-        <el-button size="mini" type="primary"> 标签选项<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
-        <el-dropdown-menu size="small" slot="dropdown">
-          <el-dropdown-item command="other">关闭其他</el-dropdown-item>
-          <el-dropdown-item command="all">关闭所有</el-dropdown-item>
-        </el-dropdown-menu>
-      </el-dropdown>
-    </div>
+  <div id="Tags">
+    <el-row v-if="showTags">
+      <el-col :span="24" class="main">
+        <el-col :span="24" class="one">
+          <el-col :span="23" class="left">
+            <ul>
+              <li class="tags-li" v-for="(item, index) in tagsList" :class="{ active: isActive(item.path) }" :key="index">
+                <router-link :to="item.path" class="tags-li-title">
+                  {{ item.title }}
+                </router-link>
+                <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>
+              </li>
+            </ul>
+          </el-col>
+          <el-col :span="1" class="right">
+            <el-dropdown @command="handleTags">
+              <el-button size="mini" type="primary"> 标签选项<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
+              <el-dropdown-menu size="small" slot="dropdown">
+                <el-dropdown-item command="other">关闭其他</el-dropdown-item>
+                <el-dropdown-item command="all">关闭所有</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 import bus from './bus';
+import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
-  data() {
+  name: 'Tags',
+  props: {},
+  components: {},
+  data: function() {
     return {
       tagsList: [],
     };
   },
+  created() {
+    this.setTags(this.$route);
+    // 监听关闭当前页面的标签页
+    bus.$on('close_current_tags', () => {
+      for (let i = 0, len = this.tagsList.length; i < len; i++) {
+        const item = this.tagsList[i];
+        if (item.path === this.$route.fullPath) {
+          if (i < len - 1) {
+            this.$router.push(this.tagsList[i + 1].path);
+          } else if (i > 0) {
+            this.$router.push(this.tagsList[i - 1].path);
+          } else {
+            this.$router.push('/');
+          }
+          this.tagsList.splice(i, 1);
+          break;
+        }
+      }
+    });
+  },
   methods: {
     isActive(path) {
       return path === this.$route.fullPath;
     },
+    // 打开标签
+    handleTags(command) {
+      command === 'other' ? this.closeOther() : this.closeAll();
+    },
     // 关闭单个标签
     closeTags(index) {
       const delItem = this.tagsList.splice(index, 1)[0];
@@ -39,13 +75,13 @@ export default {
       if (item) {
         delItem.path === this.$route.fullPath && this.$router.push(item.path);
       } else {
-        this.$router.push('/');
+        this.$router.push('/adminCenter/homeIndex');
       }
     },
     // 关闭全部标签
     closeAll() {
       this.tagsList = [];
-      this.$router.push('/');
+      this.$router.push('/adminCenter/homeIndex');
     },
     // 关闭其他标签
     closeOther() {
@@ -71,111 +107,93 @@ export default {
       }
       bus.$emit('tags', this.tagsList);
     },
-    handleTags(command) {
-      command === 'other' ? this.closeOther() : this.closeAll();
-    },
   },
   computed: {
+    ...mapState(['user']),
     showTags() {
       return this.tagsList.length > 0;
     },
   },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
   watch: {
     $route(newValue, oldValue) {
       this.setTags(newValue);
     },
   },
-  created() {
-    this.setTags(this.$route);
-    // 监听关闭当前页面的标签页
-    bus.$on('close_current_tags', () => {
-      for (let i = 0, len = this.tagsList.length; i < len; i++) {
-        const item = this.tagsList[i];
-        if (item.path === this.$route.fullPath) {
-          if (i < len - 1) {
-            this.$router.push(this.tagsList[i + 1].path);
-          } else if (i > 0) {
-            this.$router.push(this.tagsList[i - 1].path);
-          } else {
-            this.$router.push('/');
-          }
-          this.tagsList.splice(i, 1);
-          break;
-        }
-      }
-    });
-  },
 };
 </script>
 
-<style>
-.tags {
-  position: relative;
-  height: 30px;
-  overflow: hidden;
-  background: #fff;
-  padding-right: 120px;
-  box-shadow: 0 5px 10px #ddd;
-}
-
-.tags ul {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-}
-
-.tags-li {
-  float: left;
-  margin: 3px 5px 2px 3px;
-  border-radius: 3px;
-  font-size: 12px;
-  overflow: hidden;
-  cursor: pointer;
-  height: 23px;
-  line-height: 23px;
-  border: 1px solid #e9eaec;
-  background: #fff;
-  padding: 0 5px 0 12px;
-  vertical-align: middle;
-  color: #666;
-  -webkit-transition: all 0.3s ease-in;
-  -moz-transition: all 0.3s ease-in;
-  transition: all 0.3s ease-in;
-}
-
-.tags-li:not(.active):hover {
-  background: #f8f8f8;
-}
-
-.tags-li.active {
-  color: #fff;
-}
-
-.tags-li-title {
-  float: left;
-  max-width: 80px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  margin-right: 5px;
-  color: #666;
-}
-
-.tags-li.active .tags-li-title {
-  color: #fff;
-}
-
-.tags-close-box {
-  position: absolute;
-  right: 0;
-  top: 0;
-  box-sizing: border-box;
-  padding-top: 1px;
-  text-align: center;
-  width: 110px;
-  height: 30px;
-  background: #fff;
-  box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
-  z-index: 10;
+<style lang="less" scoped>
+.main {
+  .one {
+    position: relative;
+    height: 30px;
+    overflow: hidden;
+    background: #fff;
+    padding-right: 120px;
+    box-shadow: 0 5px 10px #ddd;
+    .left {
+      ul {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+      }
+      .tags-li {
+        float: left;
+        margin: 3px 5px 2px 3px;
+        border-radius: 3px;
+        font-size: 12px;
+        overflow: hidden;
+        cursor: pointer;
+        height: 23px;
+        line-height: 23px;
+        border: 1px solid #e9eaec;
+        background: #fff;
+        padding: 0 5px 0 12px;
+        vertical-align: middle;
+        color: #666;
+        -webkit-transition: all 0.3s ease-in;
+        -moz-transition: all 0.3s ease-in;
+        transition: all 0.3s ease-in;
+      }
+      .tags-li:not(.active):hover {
+        background: #f8f8f8;
+      }
+      .tags-li.active {
+        color: #fff;
+      }
+      .tags-li-title {
+        float: left;
+        max-width: 80px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        margin-right: 5px;
+        color: #666;
+      }
+      .tags-li.active .tags-li-title {
+        color: #fff;
+      }
+      .tags-li.active {
+        border: 1px solid #409eff;
+        background-color: #409eff;
+      }
+    }
+    .right {
+      position: absolute;
+      right: 0;
+      top: 0;
+      box-sizing: border-box;
+      padding-top: 1px;
+      text-align: center;
+      width: 110px;
+      height: 30px;
+      background: #fff;
+      box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
+      z-index: 10;
+    }
+  }
 }
 </style>

src/components/admin-frame/备份/Tags copy.vue

@@ -0,0 +1,181 @@
+<template>
+  <div class="tags" v-if="showTags">
+    <ul>
+      <li class="tags-li" v-for="(item, index) in tagsList" :class="{ active: isActive(item.path) }" :key="index">
+        <router-link :to="item.path" class="tags-li-title">
+          {{ item.title }}
+        </router-link>
+        <span class="tags-li-icon" @click="closeTags(index)"><i class="el-icon-close"></i></span>
+      </li>
+    </ul>
+    <div class="tags-close-box">
+      <el-dropdown @command="handleTags">
+        <el-button size="mini" type="primary"> 标签选项<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
+        <el-dropdown-menu size="small" slot="dropdown">
+          <el-dropdown-item command="other">关闭其他</el-dropdown-item>
+          <el-dropdown-item command="all">关闭所有</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+import bus from './bus';
+export default {
+  data() {
+    return {
+      tagsList: [],
+    };
+  },
+  methods: {
+    isActive(path) {
+      return path === this.$route.fullPath;
+    },
+    // 关闭单个标签
+    closeTags(index) {
+      const delItem = this.tagsList.splice(index, 1)[0];
+      const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
+      if (item) {
+        delItem.path === this.$route.fullPath && this.$router.push(item.path);
+      } else {
+        this.$router.push('/');
+      }
+    },
+    // 关闭全部标签
+    closeAll() {
+      this.tagsList = [];
+      this.$router.push('/');
+    },
+    // 关闭其他标签
+    closeOther() {
+      const curItem = this.tagsList.filter(item => {
+        return item.path === this.$route.fullPath;
+      });
+      this.tagsList = curItem;
+    },
+    // 设置标签
+    setTags(route) {
+      const isExist = this.tagsList.some(item => {
+        return item.path === route.fullPath;
+      });
+      if (!isExist) {
+        if (this.tagsList.length >= 8) {
+          this.tagsList.shift();
+        }
+        this.tagsList.push({
+          title: route.meta.title,
+          path: route.fullPath,
+          name: route.matched[1].components.default.name,
+        });
+      }
+      bus.$emit('tags', this.tagsList);
+    },
+    handleTags(command) {
+      command === 'other' ? this.closeOther() : this.closeAll();
+    },
+  },
+  computed: {
+    showTags() {
+      return this.tagsList.length > 0;
+    },
+  },
+  watch: {
+    $route(newValue, oldValue) {
+      this.setTags(newValue);
+    },
+  },
+  created() {
+    this.setTags(this.$route);
+    // 监听关闭当前页面的标签页
+    bus.$on('close_current_tags', () => {
+      for (let i = 0, len = this.tagsList.length; i < len; i++) {
+        const item = this.tagsList[i];
+        if (item.path === this.$route.fullPath) {
+          if (i < len - 1) {
+            this.$router.push(this.tagsList[i + 1].path);
+          } else if (i > 0) {
+            this.$router.push(this.tagsList[i - 1].path);
+          } else {
+            this.$router.push('/');
+          }
+          this.tagsList.splice(i, 1);
+          break;
+        }
+      }
+    });
+  },
+};
+</script>
+
+<style>
+.tags {
+  position: relative;
+  height: 30px;
+  overflow: hidden;
+  background: #fff;
+  padding-right: 120px;
+  box-shadow: 0 5px 10px #ddd;
+}
+
+.tags ul {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}
+
+.tags-li {
+  float: left;
+  margin: 3px 5px 2px 3px;
+  border-radius: 3px;
+  font-size: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  height: 23px;
+  line-height: 23px;
+  border: 1px solid #e9eaec;
+  background: #fff;
+  padding: 0 5px 0 12px;
+  vertical-align: middle;
+  color: #666;
+  -webkit-transition: all 0.3s ease-in;
+  -moz-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+}
+
+.tags-li:not(.active):hover {
+  background: #f8f8f8;
+}
+
+.tags-li.active {
+  color: #fff;
+}
+
+.tags-li-title {
+  float: left;
+  max-width: 80px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  margin-right: 5px;
+  color: #666;
+}
+
+.tags-li.active .tags-li-title {
+  color: #fff;
+}
+
+.tags-close-box {
+  position: absolute;
+  right: 0;
+  top: 0;
+  box-sizing: border-box;
+  padding-top: 1px;
+  text-align: center;
+  width: 110px;
+  height: 30px;
+  background: #fff;
+  box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+}
+</style>

src/layout/deploy/menu.js

@@ -0,0 +1,14 @@
+export const system = [
+  {
+    icon: 'icon-shouye',
+    index: '/adminCenter/homeIndex',
+    title: '系统首页',
+  },
+];
+export const userMenu = [
+  {
+    icon: 'icon-ceshi',
+    index: '/adminCenter/test/index',
+    title: '测试页面',
+  },
+];