add tagsView option

src/settings.js

@@ -1,27 +1,33 @@
 export default {
   /**
-   * @property {string} en | zh
+   * @type {string} en | zh
    * @description User first visited, default language
    */
   language: 'en',
 
   /**
-   * @property {string} medium | small | mini
+   * @type {string} medium | small | mini
    * @description User first visited, default size
    */
   size: 'medium',
 
   /**
-   * @property {string} hash | history
+   * @type {string} hash | history
    * @description vue-router mode
    */
   routerMode: 'hash',
 
   /**
-   * @property {string} fade-transform | fade
+   * @type {string} fade-transform | fade
    * @description Page transition animation
    */
-  viewsTransition: 'fade-transform'
+  viewsTransition: 'fade-transform',
+
+  /**
+   * @type {boolean} true | false
+   * @description Need tagsView
+   */
+  tagsView: true
 
   // permission: true,
   // i18n: true

src/store/modules/app.js

@@ -10,7 +10,8 @@ const app = {
     device: 'desktop',
     language: Cookies.get('language') || settings.language,
     size: Cookies.get('size') || settings.size,
-    viewsTransition: Cookies.get('viewsTransition') || settings.viewsTransition
+    viewsTransition: Cookies.get('viewsTransition') || settings.viewsTransition,
+    needTagsView: Cookies.get('needTagsView') || settings.tagsView
   },
   mutations: {
     TOGGLE_SIDEBAR: state => {
@@ -41,6 +42,10 @@ const app = {
     SET_VIEWS_TRANSITION: (state, viewsTransition) => {
       state.viewsTransition = viewsTransition
       Cookies.set('viewsTransition', viewsTransition)
+    },
+    SET_TAGS_VIEW: (state, needTagsView) => {
+      state.needTagsView = needTagsView
+      Cookies.set('needTagsView', needTagsView)
     }
   },
   actions: {
@@ -61,6 +66,9 @@ const app = {
     },
     setViewsTransition({ commit }, viewsTransition) {
       commit('SET_VIEWS_TRANSITION', viewsTransition)
+    },
+    setTagsView({ commit }, needTagsView) {
+      commit('SET_TAGS_VIEW', needTagsView)
     }
   }
 }

src/views/layout/Layout.vue

@@ -2,9 +2,9 @@
   <div :class="classObj" class="app-wrapper">
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
     <sidebar class="sidebar-container"/>
-    <div class="main-container">
+    <div :class="{hasTagsView:needTagsView}" class="main-container">
       <navbar/>
-      <tags-view/>
+      <tags-view v-if="needTagsView"/>
       <app-main/>
     </div>
   </div>
@@ -37,6 +37,9 @@ export default {
         withoutAnimation: this.sidebar.withoutAnimation,
         mobile: this.device === 'mobile'
       }
+    },
+    needTagsView() {
+      return this.$store.state.app.needTagsView
     }
   },
   methods: {

src/views/layout/components/AppMain.vue

@@ -26,12 +26,19 @@ export default {
 </script>
 
 <style scoped>
-.app-main {
+ /* height
-  /*84 = navbar + tags-view = 50 +34 */
+  * navbar: 50
-  min-height: calc(100vh - 84px);
+  * tags-view: 34
-  width: 100%;
+ */
-  position: relative;
+ .hasTagsView .app-main {
-  overflow: hidden;
+   min-height: calc(100vh - 84px);
-}
+ }
+
+ .app-main {
+   min-height: calc(100vh - 50px);
+   width: 100%;
+   position: relative;
+   overflow: hidden;
+ }
 </style>
 

src/views/layout/components/Navbar.vue

@@ -90,10 +90,16 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+.hasTagsView{
+  .navbar{
+    border-bottom: none;
+  }
+}
 .navbar {
   height: 50px;
   line-height: 50px;
   border-radius: 0px !important;
+  border-bottom: 1px solid #e6e6e6;
   .hamburger-container {
     line-height: 58px;
     height: 50px;