前端新增可配置侧边栏风格，可以配置网页主题色

web/src/view/layout/aside/historyComponent/history.vue

@@ -9,11 +9,12 @@
       @tab-remove="removeTab"
     >
       <el-tab-pane
-        v-for="item in historys"
+        v-for="(item , index) in historys"
         :key="item.name + JSON.stringify(item.query)+JSON.stringify(item.params)"
         :label="item.meta.title"
         :name="item.name + JSON.stringify(item.query)+JSON.stringify(item.params)"
         :tab="item"
+        :style="'z-index:'+index"
       />
     </el-tabs>
 
@@ -23,6 +24,7 @@
       <li @click="closeLeft">关闭左侧</li>
       <li @click="closeRight">关闭右侧</li>
       <li @click="closeOther">关闭其他</li>
+      <li v-if="activeValue" @click="reload">重新加载</li>
     </ul>
   </div>
 </template>
@@ -257,6 +259,9 @@ export default {
         }
       }
       this.historys.splice(index, 1)
+    },
+    reload() {
+      this.$bus.$emit('reload')
     }
   }
 }
@@ -266,8 +271,9 @@ export default {
 .contextmenu {
   width: 100px;
   margin: 0;
-  border: 1px solid #ccc;
-  background: #fff;
+  border: 1px solid rgba(160, 156, 156, 0.2);
+  background: rgba(255,255,255,0.8);
+  backdrop-filter: blur(10px);
   z-index: 3000;
   position: absolute;
   list-style-type: none;
@@ -275,14 +281,23 @@ export default {
   border-radius: 4px;
   font-size: 14px;
   color: #333;
-  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 1px 1px 15px 0  rgba(0, 0, 0, 0.1);
 }
 .contextmenu li {
   margin: 0;
   padding: 7px 16px;
 }
 .contextmenu li:hover {
-  background: #f2f2f2;
+  color: #1890ff;
   cursor: pointer;
 }
+.el-tabs__item{
+  -webkit-mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
+  mask: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANoAAAAkBAMAAAAdqzmBAAAAMFBMVEVHcEwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlTPQ5AAAAD3RSTlMAr3DvEM8wgCBA379gj5//tJBPAAAAnUlEQVRIx2NgAAM27fj/tAO/xBsYkIHyf9qCT8iWMf6nNQhAsk2f5rYheY7Dnua2/U+A28ZEe8v+F9Ax2v7/F4DbxkUH2wzgtvHTwbYPo7aN2jZq26hto7aN2jZq25Cy7Qvctnw62PYNbls9HWz7S8/G6//PsI6H4396gAUQy1je08W2jxDbpv6nD4gB2uWp+J9eYPsEhv/0BPS1DQBvoBLVZ3BppgAAAABJRU5ErkJggg==);
+  -webkit-mask-size: 100% 100%;
+  &.is-closable:hover{
+    background: #dee1e6;
+  }
+}
+
 </style>

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

@@ -6,9 +6,9 @@
           :collapse="isCollapse"
           :collapse-transition="true"
           :default-active="active"
-          active-text-color="#fff"
           class="el-menu-vertical"
-          text-color="rgb(191, 203, 217)"
+          :background-color="$store.getters['app/getSIdeMode'] === 'light' ? '#fff' : '#111'"
+          text-color="#777"
           unique-opened
           @select="selectMenuItem"
         >
@@ -95,4 +95,15 @@ export default {
     vertical-align: middle;
   }
 }
+.el-menu-item {
+  background-color: #fff;
+  height: 44px;
+  line-height: 44px;
+  color: #000;
+  &.is-active{
+    background-color: #e6f7ff ;
+    border-right: 4px solid  ;
+    color: #1890ff ;
+  }
+}
 </style>

web/src/view/layout/index.vue

@@ -74,9 +74,9 @@
           <router-view v-if="!$route.meta.keepAlive && reloadFlag" v-loading="loadingFlag" element-loading-text="正在加载中" class="admin-box" />
         </transition>
         <BottomInfo />
+        <setting />
       </el-main>
     </el-container>
-
   </el-container>
 </template>
 
@@ -88,6 +88,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 +97,8 @@ export default {
     Screenfull,
     Search,
     BottomInfo,
-    CustomPic
+    CustomPic,
+    Setting
   },
   data() {
     return {

web/src/view/layout/search/search.vue

@@ -19,6 +19,8 @@
         </el-select>
       </div>
     </transition>
+
+
     <div
       :style="{display:'inline-block',float:'right',width:'31px',textAlign:'left',fontSize:'16px',paddingTop:'2px'}"
       class="user-box"
@@ -36,11 +38,13 @@ import { mapGetters } from 'vuex'
 
 export default {
   name: 'SearchComponent',
+
   data() {
     return {
       value: '',
       show: false,
-      reload: false
+      reload: false,
+      color: '#fff'
     }
   },
   computed: {
@@ -66,7 +70,8 @@ export default {
       setTimeout(() => {
         this.reload = false
       }, 500)
-    }
+    },
+
   }
 }
 </script>

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('app/changeSideMode')
+    },
+    themeChange(val) {
+      this.$store.dispatch('app/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>