前端新增修改侧边栏主题风格

web/src/view/layout/aside/index.vue

@@ -6,9 +6,10 @@
           :collapse="isCollapse"
           :collapse-transition="true"
           :default-active="active"
-          active-text-color="#fff"
+          :active-text-color="$store.getters['user/getSideMode'] === 'dark' ? '#1890ff' : '#1890ff'"
+          :background-color="$store.getters['user/getSideMode'] === 'dark' ? '#191a23 ' : '#fff'"
           class="el-menu-vertical"
-          text-color="rgb(191, 203, 217)"
+          text-color="#999"
           unique-opened
           @select="selectMenuItem"
         >

web/src/view/layout/index.vue

@@ -3,9 +3,9 @@
     <el-container :class="[isSider?'openside':'hideside',isMobile ? 'mobile': '']">
       <el-row :class="[isShadowBg?'shadowBg':'']" @click.native="changeShadow()" />
       <el-aside class="main-cont main-left">
-        <div class="tilte">
+        <div class="tilte" :class="$store.getters['user/getSideMode']">
           <img alt class="logoimg" :src="$GIN_VUE_ADMIN.appLogo">
-          <h2 v-if="isSider" class="tit-text">{{ $GIN_VUE_ADMIN.appName }}</h2>
+          <h2 v-if="isSider" class="tit-text" :class="$store.getters['user/getSideMode']">{{ $GIN_VUE_ADMIN.appName }}</h2>
         </div>
         <Aside class="aside" />
       </el-aside>
@@ -74,6 +74,7 @@
           <router-view v-if="!$route.meta.keepAlive && reloadFlag" v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box" />
         </transition>
         <BottomInfo />
+        <setting />
       </el-main>
     </el-container>
 
@@ -88,6 +89,7 @@ import Search from '@/view/layout/search/search'
 import BottomInfo from '@/view/layout/bottomInfo/bottomInfo'
 import { mapGetters, mapActions } from 'vuex'
 import CustomPic from '@/components/customPic'
+import Setting from './setting'
 export default {
   name: 'Layout',
   components: {
@@ -96,7 +98,8 @@ export default {
     Screenfull,
     Search,
     BottomInfo,
-    CustomPic
+    CustomPic,
+    Setting
   },
   data() {
     return {
@@ -339,4 +342,12 @@ export default {
 // 	justify-content: center;
 // 	align-items: center;
 // }
+.dark{
+  background-color: #191a23 !important;
+  color: #fff !important;
+}
+.light{
+  background-color: #fff !important;
+  color: #000 !important;
+}
 </style>

web/src/view/layout/setting/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <el-button type="primary" class="drawer-container" icon="el-icon-setting" @click="showSettingDrawar" />
+    <el-drawer
+        title="系统配置"
+        :visible.sync="drawer"
+        :direction="direction"
+        :before-close="handleClose"
+    >
+      <div class="setting_body">
+        <div class="setting_card">
+          <div class="setting_title">侧边栏主题</div>
+          <div class="setting_content">
+            <div class="item" @click="chageMode('light')">
+              <i v-if="sideMode === 'light'" class="el-icon-check check" />
+              <img src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg">
+            </div>
+            <div class="item" @click="chageMode('dark')">
+              <i v-if="sideMode === 'dark'" class="el-icon-check check" />
+              <img src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg">
+            </div>
+          </div>
+        </div>
+<!--        <div class="setting_card">-->
+<!--          <div class="setting_title">主题色</div>-->
+<!--          <div class="">-->
+<!--            <theme-change style="width: 30px;height: 30px;margin-top: 20px" @change="themeChange" />-->
+<!--          </div>-->
+<!--        </div>-->
+      </div>
+    </el-drawer>
+
+  </div>
+</template>
+
+<script>
+import themeChange from '@/components/themeChange'
+export default {
+  data() {
+    return {
+      drawer: false,
+      direction: 'rtl',
+      sideMode: 'dark'
+    }
+  },
+  components: {
+    themeChange
+  },
+  methods: {
+    handleClose() {
+      this.drawer = false
+    },
+    showSettingDrawar() {
+      this.drawer = true
+    },
+    chageMode(e) {
+      this.sideMode = e
+      this.$store.dispatch('user/changeSideMode',e)
+    },
+    themeChange(val) {
+      this.$store.dispatch('user/changeTheme', val)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.drawer-container {
+  position: absolute;
+  right: 0;
+  top: 20%;
+  height: 40px;
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+  color: #fff;
+  border-radius: 4px 0 0 4px;
+  cursor: pointer;
+  -webkit-box-shadow: inset 0 0 6px rgb(0 ,0 ,0, 10%);
+}
+.setting_body{
+  padding: 20px;
+  .setting_card{
+    margin-bottom: 20px;
+  }
+  .setting_content{
+    margin-top: 20px;
+    display: flex;
+    .item{
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .check{
+        position: absolute;
+        font-size: 20px;
+        color: #00afff;
+      }
+      img{
+        margin-right: 20px;
+      }
+    }
+  }
+}
+
+</style>