feature: add fixedHeader settings

src/layout/components/AppMain.vue

@@ -22,7 +22,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style rel="stylesheet/scss" lang="scss" scoped>
 .app-main {
   /*50= navbar  50  */
   min-height: calc(100vh - 50px);
@@ -31,9 +31,19 @@ export default {
   overflow: hidden;
 }
 
-.hasTagsView .app-main {
-  /*84 = navbar + tags-view = 50 + 34 */
-  min-height: calc(100vh - 84px);
+.fixed-header+.app-main {
+  margin-top: 50px;
+}
+
+.hasTagsView {
+  .app-main {
+    /*84 = navbar + tags-view = 50 + 34 */
+    min-height: calc(100vh - 84px);
+  }
+
+  .fixed-header+.app-main {
+    margin-top: 80px;
+  }
 }
 </style>
 

src/layout/components/Navbar.vue

@@ -95,6 +95,8 @@ export default {
 .navbar {
   height: 50px;
   overflow: hidden;
+  position: relative;
+  background: #fff;
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
 
   .hamburger-container {

src/layout/components/Settings/index.vue

@@ -5,15 +5,21 @@
         系统布局配置
       </h3>
 
+      <div class="drawer-item">
+        <span>主题色</span>
+        <theme-picker style="float: right;height: 26px;margin: -3px 5px 0 0;" />
+      </div>
+
       <div class="drawer-item">
         <span>开启 Tags-View</span>
         <el-switch v-model="tagsView" class="drawer-switch" />
       </div>
 
       <div class="drawer-item">
-        <span>主题色</span>
-        <theme-picker style="float: right;height: 26px;margin: -3px 5px 0 0;" />
+        <span>固定 Header</span>
+        <el-switch v-model="fixedHeader" class="drawer-switch" />
       </div>
+
     </div>
   </div>
 </template>
@@ -29,6 +35,17 @@ export default {
     }
   },
   computed: {
+    fixedHeader: {
+      get() {
+        return this.$store.state.settings.fixedHeader
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'fixedHeader',
+          value: val
+        })
+      }
+    },
     tagsView: {
       get() {
         return this.$store.state.settings.tagsView