From fd550545afd6b03d0d8d3785cea22488bffb24f0 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Wed, 13 Mar 2019 18:23:06 +0800
Subject: [PATCH 1/4] init right-panel

---
 src/components/RightPanel/index.vue | 141 ++++++++++++++++++++++++++++
 src/layout/Layout.vue               |  15 +--
 src/store/modules/app.js            |   3 +-
 src/utils/index.js                  |  13 +++
 4 files changed, 165 insertions(+), 7 deletions(-)
 create mode 100644 src/components/RightPanel/index.vue

diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
new file mode 100644
index 00000000000..80ef8709b9f
--- /dev/null
+++ b/src/components/RightPanel/index.vue
@@ -0,0 +1,141 @@
+<template>
+  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div class="handle-button" type="primary" circle @click="show=!show">
+        <i :class="show?'el-icon-close':'el-icon-setting'" />
+      </div>
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { addClass, removeClass } from '@/utils'
+
+export default {
+  name: 'RightPanel',
+  props: {
+    value: {
+      default: false,
+      type: Boolean
+    },
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    }
+  },
+  data() {
+    return {
+      show: false
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+      if (value) {
+        addClass(document.body, 'showRightPanel')
+      } else {
+        removeClass(document.body, 'showRightPanel')
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.rightPanel')
+      if (!parent) {
+        this.show = false
+        window.removeEventListener('click', this.closeSidebar)
+      }
+    },
+    insertToBody() {
+      const elx = this.$refs.rightPanel
+      const body = document.querySelector('body')
+      body.insertBefore(elx, body.firstChild)
+    }
+  }
+}
+</script>
+
+<style>
+.showRightPanel {
+  overflow: hidden;
+  position: relative;
+  width: calc(100% - 15px);
+}
+</style>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+ .rightPanel-background {
+   opacity: 0;
+   transition: opacity .3s ease;
+   background: rgba(0, 0, 0, .2);
+   width: 0;
+   height: 0;
+   position: fixed;
+   z-index: -1;
+ }
+
+ .rightPanel {
+   background: rgb(255, 255, 255);
+   z-index: 3000;
+   position: fixed;
+   height: 100vh;
+   width: 100%;
+   max-width: 260px;
+   top: 0px;
+   box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+   left: 0px;
+   transition: all .25s ease;
+   transform: translate(100%);
+   z-index: 40000;
+   left: auto;
+   right: 0px;
+ }
+
+ .show {
+
+   transition: all .25s ease;
+   .rightPanel-background {
+     z-index: 20000;
+     opacity: 1;
+     width: 100%;
+     height: 100%;
+   }
+
+   .rightPanel {
+     transform: translate(0);
+   }
+ }
+
+ .handle-button {
+   position: absolute;
+   left: -48px;
+   border-radius: 4px 0 0 4px !important;
+   top: 240px;
+   width: 48px;
+   height: 48px;
+   background: #1890ff;
+   cursor: pointer;
+   pointer-events: auto;
+   z-index: 0;
+   text-align: center;
+   color: #fff;
+   line-height: 48px;
+
+   i {
+     font-size: 24px;
+     line-height: 48px;
+   }
+ }
+</style>
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index 4d0eaa2b5cb..7c5d753bead 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -6,17 +6,21 @@
       <navbar />
       <tags-view />
       <app-main />
+      <right-panel v-if="showSettings" />
     </div>
   </div>
 </template>
 
 <script>
+import RightPanel from '@/components/RightPanel'
 import { Navbar, Sidebar, AppMain, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
+import { mapState } from 'vuex'
 
 export default {
   name: 'Layout',
   components: {
+    RightPanel,
     Navbar,
     Sidebar,
     AppMain,
@@ -24,12 +28,11 @@ export default {
   },
   mixins: [ResizeMixin],
   computed: {
-    sidebar() {
-      return this.$store.state.app.sidebar
-    },
-    device() {
-      return this.$store.state.app.device
-    },
+    ...mapState({
+      sidebar: state => state.app.sidebar,
+      device: state => state.app.device,
+      showSettings: state => state.app.showSettings
+    }),
     classObj() {
       return {
         hideSidebar: !this.sidebar.opened,
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index fba4b05c9d6..4565d9dbb55 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -8,7 +8,8 @@ const app = {
     },
     device: 'desktop',
     language: Cookies.get('language') || 'en',
-    size: Cookies.get('size') || 'medium'
+    size: Cookies.get('size') || 'medium',
+    showSettings: true
   },
   mutations: {
     TOGGLE_SIDEBAR: state => {
diff --git a/src/utils/index.js b/src/utils/index.js
index 263108b4e2e..2fcbba79454 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -299,3 +299,16 @@ export function createUniqueString() {
   const randomNum = parseInt((1 + Math.random()) * 65536) + ''
   return (+(randomNum + timestamp)).toString(32)
 }
+
+export function hasClass(ele, cls) {
+  return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
+}
+export function addClass(ele, cls) {
+  if (!hasClass(ele, cls)) ele.className += ' ' + cls
+}
+export function removeClass(ele, cls) {
+  if (hasClass(ele, cls)) {
+    const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
+    ele.className = ele.className.replace(reg, ' ')
+  }
+}

From 4414a25b7703cb03c99f1f8e5916f491de7bb634 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Thu, 14 Mar 2019 13:48:57 +0800
Subject: [PATCH 2/4] add tags-view control

---
 src/components/RightPanel/index.vue      |  8 +--
 src/layout/Layout.vue                    | 16 +++---
 src/layout/components/AppMain.vue        |  9 +++-
 src/layout/components/Navbar.vue         |  8 +++
 src/layout/components/Settings/index.vue | 68 ++++++++++++++++++++++++
 src/layout/components/index.js           |  1 +
 src/settings.js                          | 22 ++++++++
 src/store/index.js                       |  2 +
 src/store/modules/app.js                 |  3 +-
 src/store/modules/settings.js            | 23 ++++++++
 10 files changed, 144 insertions(+), 16 deletions(-)
 create mode 100644 src/layout/components/Settings/index.vue
 create mode 100644 src/settings.js
 create mode 100644 src/store/modules/settings.js

diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
index 80ef8709b9f..98d27df3ada 100644
--- a/src/components/RightPanel/index.vue
+++ b/src/components/RightPanel/index.vue
@@ -18,10 +18,6 @@ import { addClass, removeClass } from '@/utils'
 export default {
   name: 'RightPanel',
   props: {
-    value: {
-      default: false,
-      type: Boolean
-    },
     clickNotClose: {
       default: false,
       type: Boolean
@@ -29,7 +25,7 @@ export default {
   },
   data() {
     return {
-      show: false
+      show: true
     }
   },
   watch: {
@@ -52,7 +48,7 @@ export default {
       window.addEventListener('click', this.closeSidebar)
     },
     closeSidebar(evt) {
-      const parent = evt.target.closest('.rightPanel')
+      const parent = evt.target.closest('.rightPanel-container')
       if (!parent) {
         this.show = false
         window.removeEventListener('click', this.closeSidebar)
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
index 7c5d753bead..c0befd4be22 100644
--- a/src/layout/Layout.vue
+++ b/src/layout/Layout.vue
@@ -2,18 +2,20 @@
   <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 />
-      <right-panel v-if="showSettings" />
+      <right-panel v-if="showSettings">
+        <settings />
+      </right-panel>
     </div>
   </div>
 </template>
 
 <script>
 import RightPanel from '@/components/RightPanel'
-import { Navbar, Sidebar, AppMain, TagsView } from './components'
+import { Navbar, Sidebar, AppMain, TagsView, Settings } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 
@@ -24,14 +26,16 @@ export default {
     Navbar,
     Sidebar,
     AppMain,
-    TagsView
+    TagsView,
+    Settings
   },
   mixins: [ResizeMixin],
   computed: {
     ...mapState({
       sidebar: state => state.app.sidebar,
       device: state => state.app.device,
-      showSettings: state => state.app.showSettings
+      showSettings: state => state.settings.showSettings,
+      needTagsView: state => state.settings.tagsView
     }),
     classObj() {
       return {
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index 9ee5bd522dc..b7956f0c577 100644
--- a/src/layout/components/AppMain.vue
+++ b/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>
 
diff --git a/src/layout/components/Navbar.vue b/src/layout/components/Navbar.vue
index d5f4a7da4e2..50a380e7cd7 100644
--- a/src/layout/components/Navbar.vue
+++ b/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;
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
new file mode 100644
index 00000000000..65a5da9b7b8
--- /dev/null
+++ b/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>
diff --git a/src/layout/components/index.js b/src/layout/components/index.js
index 5262e113398..e9f79ddd7aa 100644
--- a/src/layout/components/index.js
+++ b/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'
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 00000000000..27e7e65a5a0
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,22 @@
+export default {
+
+  /**
+   * @type {boolean} true | false
+   * @description Whether show the settings right-panel
+   */
+  showSettings: true,
+
+  /**
+   * @type {boolean} true | false
+   * @description Whether need tagsView
+   */
+  tagsView: true,
+
+  /**
+   * @type {string | array} 'production' | ['production','development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to use it in dev, you can pass ['production','development']
+   */
+  errorLog: 'production'
+}
diff --git a/src/store/index.js b/src/store/index.js
index 24778fad11a..4842ea7e43a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -4,6 +4,7 @@ import app from './modules/app'
 import errorLog from './modules/errorLog'
 import permission from './modules/permission'
 import tagsView from './modules/tagsView'
+import settings from './modules/settings'
 import user from './modules/user'
 import getters from './getters'
 
@@ -15,6 +16,7 @@ const store = new Vuex.Store({
     errorLog,
     permission,
     tagsView,
+    settings,
     user
   },
   getters
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index 4565d9dbb55..fba4b05c9d6 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -8,8 +8,7 @@ const app = {
     },
     device: 'desktop',
     language: Cookies.get('language') || 'en',
-    size: Cookies.get('size') || 'medium',
-    showSettings: true
+    size: Cookies.get('size') || 'medium'
   },
   mutations: {
     TOGGLE_SIDEBAR: state => {
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
new file mode 100644
index 00000000000..d47505c468f
--- /dev/null
+++ b/src/store/modules/settings.js
@@ -0,0 +1,23 @@
+import defaultSettings from '@/settings'
+const { showSettings, tagsView } = defaultSettings
+
+const settings = {
+  state: {
+    showSettings: showSettings,
+    tagsView: tagsView
+  },
+  mutations: {
+    CHANGE_SETTING: (state, { key, value }) => {
+      if (state.hasOwnProperty(key)) {
+        state[key] = value
+      }
+    }
+  },
+  actions: {
+    changeSetting({ commit }, data) {
+      commit('CHANGE_SETTING', data)
+    }
+  }
+}
+
+export default settings

From 58663ba0063c8393ed4d30b6f8069d81680d57fd Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Thu, 14 Mar 2019 16:58:27 +0800
Subject: [PATCH 3/4] refine

---
 src/components/RightPanel/index.vue      | 11 +++++++----
 src/layout/components/Settings/index.vue |  4 ++--
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
index 98d27df3ada..dda0083763b 100644
--- a/src/components/RightPanel/index.vue
+++ b/src/components/RightPanel/index.vue
@@ -2,7 +2,7 @@
   <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
     <div class="rightPanel-background" />
     <div class="rightPanel">
-      <div class="handle-button" type="primary" circle @click="show=!show">
+      <div class="handle-button" :style="{'top':buttonTop+'px'}" type="primary" circle @click="show=!show">
         <i :class="show?'el-icon-close':'el-icon-setting'" />
       </div>
       <div class="rightPanel-items">
@@ -21,11 +21,15 @@ export default {
     clickNotClose: {
       default: false,
       type: Boolean
+    },
+    buttonTop: {
+      default: 240,
+      type: Number
     }
   },
   data() {
     return {
-      show: true
+      show: false
     }
   },
   watch: {
@@ -48,7 +52,7 @@ export default {
       window.addEventListener('click', this.closeSidebar)
     },
     closeSidebar(evt) {
-      const parent = evt.target.closest('.rightPanel-container')
+      const parent = evt.target.closest('.rightPanel')
       if (!parent) {
         this.show = false
         window.removeEventListener('click', this.closeSidebar)
@@ -118,7 +122,6 @@ export default {
    position: absolute;
    left: -48px;
    border-radius: 4px 0 0 4px !important;
-   top: 240px;
    width: 48px;
    height: 48px;
    background: #1890ff;
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 65a5da9b7b8..213f1189e68 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -10,10 +10,10 @@
         <el-switch v-model="tagsView" class="drawer-switch" />
       </div>
 
-      <div class="drawer-item">
+      <!-- <div class="drawer-item">
         <span>显示 Logo</span>
         <el-switch v-model="sidebarLogo" class="drawer-switch" />
-      </div>
+      </div> -->
     </div>
   </div>
 </template>

From b0ddd295b0549077018ebffea1aaa6d7775514b9 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Thu, 14 Mar 2019 17:10:42 +0800
Subject: [PATCH 4/4] refine css

---
 src/components/RightPanel/index.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/RightPanel/index.vue b/src/components/RightPanel/index.vue
index dda0083763b..77a9d0d9bce 100644
--- a/src/components/RightPanel/index.vue
+++ b/src/components/RightPanel/index.vue
@@ -78,7 +78,7 @@ export default {
 <style rel="stylesheet/scss" lang="scss" scoped>
  .rightPanel-background {
    opacity: 0;
-   transition: opacity .3s ease;
+   transition: opacity .3s cubic-bezier(.7,.3,.1,1);
    background: rgba(0, 0, 0, .2);
    width: 0;
    height: 0;
@@ -87,16 +87,16 @@ export default {
  }
 
  .rightPanel {
-   background: rgb(255, 255, 255);
+   background: #fff;
    z-index: 3000;
    position: fixed;
    height: 100vh;
    width: 100%;
    max-width: 260px;
    top: 0px;
+  left: 0px;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
-   left: 0px;
-   transition: all .25s ease;
+   transition: all .25s cubic-bezier(.7,.3,.1,1);
    transform: translate(100%);
    z-index: 40000;
    left: auto;
@@ -105,7 +105,7 @@ export default {
 
  .show {
 
-   transition: all .25s ease;
+   transition: all .3s cubic-bezier(.7,.3,.1,1);
    .rightPanel-background {
      z-index: 20000;
      opacity: 1;