add settings (#1707)

src/layout/components/AppMain.vue

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

src/layout/components/Navbar.vue

@@ -92,9 +92,16 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+.hasTagsView {
+  .navbar {
+    border-bottom: none;
+  }
+}
+
 .navbar {
   height: 50px;
   overflow: hidden;
+  box-shadow: 0 1px 4px rgba(0,21,41,.08);
 
   .hamburger-container {
     line-height: 46px;
@@ -150,6 +157,7 @@ export default {
       .avatar-wrapper {
         margin-top: 5px;
         position: relative;
+
         .user-avatar {
           cursor: pointer;
           width: 40px;

src/layout/components/Settings/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="drawer-container">
+    <div>
+      <h3 class="drawer-title">
+        系统布局配置
+      </h3>
+
+      <div class="drawer-item">
+        <span>开启  Tags-View</span>
+        <el-switch v-model="tagsView" class="drawer-switch" />
+      </div>
+
+      <!-- <div class="drawer-item">
+        <span>显示 Logo</span>
+        <el-switch v-model="sidebarLogo" class="drawer-switch" />
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      sidebarLogo: true
+    }
+  },
+  computed: {
+    tagsView: {
+      get() {
+        return this.$store.state.settings.tagsView
+      },
+      set(val) {
+        this.$store.dispatch('changeSetting', {
+          key: 'tagsView',
+          value: val
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.drawer-container {
+  padding: 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+
+  .drawer-title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-size: 14px;
+    line-height: 22px;
+  }
+
+  .drawer-item {
+    color: rgba(0, 0, 0, .65);
+    font-size: 14px;
+    padding: 12px 0;
+  }
+
+  .drawer-switch {
+    float: right
+  }
+}
+</style>

src/layout/components/index.js

@@ -2,3 +2,4 @@ export { default as Navbar } from './Navbar'
 export { default as Sidebar } from './Sidebar/index.vue'
 export { default as TagsView } from './TagsView/index.vue'
 export { default as AppMain } from './AppMain'
+export { default as Settings } from './Settings'