皮肤切换问题初步修改

src/components/RightPanel/index.vue

+<template>
+  <div ref="rightPanel" class="rightPanel-container">
+    <div class="rightPanel-background" />
+    <div class="rightPanel">
+      <div class="rightPanel-items">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RightPanel',
+  props: {
+    clickNotClose: {
+      default: false,
+      type: Boolean
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.$store.state.settings.showSettings
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'showSettings',
+          value: val
+        })
+      }
+    }
+  },
+  watch: {
+    show(value) {
+      if (value && !this.clickNotClose) {
+        this.addEventClick()
+      }
+    }
+  },
+  mounted() {
+    this.insertToBody()
+    this.addEventClick()
+  },
+  beforeDestroy() {
+    const elx = this.$refs.rightPanel
+    elx.remove()
+  },
+  methods: {
+    addEventClick() {
+      window.addEventListener('click', this.closeSidebar)
+    },
+    closeSidebar(evt) {
+      const parent = evt.target.closest('.el-drawer__body')
+      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 lang="scss" scoped>
+.rightPanel-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
+  background: rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+
+.rightPanel {
+  width: 100%;
+  max-width: 260px;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  right: 0;
+  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
+  transition: all .25s cubic-bezier(.7, .3, .1, 1);
+  transform: translate(100%);
+  background: #fff;
+  z-index: 40000;
+}
+
+.handle-button {
+  width: 48px;
+  height: 48px;
+  position: absolute;
+  left: -48px;
+  text-align: center;
+  font-size: 24px;
+  border-radius: 6px 0 0 6px !important;
+  z-index: 0;
+  pointer-events: auto;
+  cursor: pointer;
+  color: #fff;
+  line-height: 48px;
+  i {
+    font-size: 24px;
+    line-height: 48px;
+  }
+}
+</style>

src/layout/components/Settings/index.vue

+<template>
+  <el-drawer size="280px" :visible="visible" :with-header="false" :append-to-body="true" :show-close="false">
+    <div class="drawer-container">
+      <div>
+        <div class="setting-drawer-content">
+          <div class="setting-drawer-title">
+            <h3 class="drawer-title">主题风格设置</h3>
+          </div>
+        </div>
+        <el-divider />
+        <el-form ref="form" :model="form" label-width="auto">
+          <el-form-item label="主题风格" prop="theme">
+            <el-select v-model="form.theme" style="width: 100%" placeholder="请选择主题风格">
+              <el-option
+                v-for="item in themeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-form>
+        <el-button size="small" type="primary" plain icon="el-icon-document-add" @click="saveSetting">保存配置</el-button>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<script>
+
+export default {
+  data() {
+    return {
+      theme: this.$store.state.settings.theme,
+      sideTheme: this.$store.state.settings.sideTheme,
+      form: {
+        theme: '1' // 主题风格
+      },
+      // 主题风格下拉
+      themeOptions: [
+        { value: '1', label: '风格1' },
+        { value: '2', label: '风格2' }
+      ]
+    }
+  },
+  computed: {
+    visible: {
+      get() {
+        return this.$store.state.settings.showSettings
+      }
+    }
+  },
+  watch: {
+    visible(val) {
+      this.form.theme = localStorage.getItem('theme') || '1'
+      console.log('this.form.theme', this.form.theme)
+    }
+  },
+  methods: {
+    /** 保存配置*/
+    saveSetting() {
+      localStorage.setItem('theme', this.form.theme)
+      this.$store.dispatch('settings/changeSetting', {
+        key: 'showSettings',
+        value: false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .setting-drawer-content {
+    .setting-drawer-title {
+      margin-bottom: 12px;
+      color: rgba(0, 0, 0, .85);
+      font-size: 14px;
+      line-height: 22px;
+      font-weight: bold;
+    }
+
+    .setting-drawer-block-checbox {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      margin-top: 10px;
+      margin-bottom: 20px;
+
+      .setting-drawer-block-checbox-item {
+        position: relative;
+        margin-right: 16px;
+        border-radius: 2px;
+        cursor: pointer;
+
+        img {
+          width: 48px;
+          height: 48px;
+        }
+
+        .setting-drawer-block-checbox-selectIcon {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 100%;
+          height: 100%;
+          padding-top: 15px;
+          padding-left: 24px;
+          color: #1890ff;
+          font-weight: 700;
+          font-size: 14px;
+        }
+      }
+    }
+  }
+
+  .drawer-container {
+    padding: 20px;
+    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/header.vue

@@ -51,6 +51,9 @@
               修改密码
             </router-link>
           </el-dropdown-item>
+          <el-dropdown-item @click.native="setting = true">
+            <span>布局设置</span>
+          </el-dropdown-item>
           <el-dropdown-item divided @click.native="logout">
             <span style="display:block;">退出</span>
           </el-dropdown-item>
@@ -62,7 +65,6 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { queryInAdhibitions } from '@/api/internal.js'
 import Hamburger from '@/components/Hamburger'
 export default {
   components: {
@@ -79,7 +81,18 @@ export default {
     ...mapGetters([
       'sidebar',
       'avatar'
-    ])
+    ]),
+    setting: {
+      get() {
+        return this.$store.state.settings.showSettings
+      },
+      set(val) {
+        this.$store.dispatch('settings/changeSetting', {
+          key: 'showSettings',
+          value: val
+        })
+      }
+    }
   },
   mounted() {
     // this.getInAdhibitions()

src/layout/index.vue

@@ -12,11 +12,16 @@
         <navbar />
       </div>
       <app-main />
+      <right-panel>
+        <settings />
+      </right-panel>
     </div>
   </div>
 </template>
 
 <script>
+import RightPanel from '@/components/RightPanel'
+import settings from '@/layout/components/Settings/index.vue'
 import { Navbar, Sidebar, AppMain, TagsView, Header } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 
@@ -27,7 +32,9 @@ export default {
     Sidebar,
     AppMain,
     TagsView,
-    Header
+    Header,
+    RightPanel,
+    settings
   },
   mixins: [ResizeMixin],
   computed: {

src/styles/index.scss

@@ -5,7 +5,12 @@
 @import './sidebar.scss';
 @import "./utils.scss";
 @import './btn.scss';
-
+//$value = localStorage.getItem('theme');
+//@if $value == '1' {
+//  @import './themeOne.scss';
+// } @else  {
+//  @import './themeTwo.scss';
+//}
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;

src/styles/themeOne.scss

+.userQueryBtn{
+  background-color: red!important;
+}

src/styles/themeTwo.scss

+.userQueryBtn{
+  background-color: blue!important;
+}

src/views/system/user/index.vue

@@ -29,7 +29,7 @@
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
+          <el-button class="userQueryBtn" type="primary" icon="el-icon-search" size="small" @click="handleQuery">查询</el-button>
           <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
         </el-form-item>
         <el-form-item style="float: right">