Browse Source

主题色功能bug修复

pixel 3 years ago
parent
commit
2054ab0f8a

+ 20 - 2
web/src/store/module/user.js

@@ -118,13 +118,31 @@ export const user = {
     token(state) {
       return state.token
     },
-    sideMode(state) {
+    mode(state) {
       return state.userInfo.sideMode
     },
+    sideMode(state) {
+      if (state.userInfo.sideMode === 'dark') {
+        return '#191a23'
+      } else if (state.userInfo.sideMode === 'light') {
+        return '#fff'
+      } else {
+        return state.userInfo.sideMode
+      }
+    },
     baseColor(state) {
-      return state.userInfo.baseColor
+      if (state.userInfo.sideMode === 'dark') {
+        return '#fff'
+      } else if (state.userInfo.sideMode === 'light') {
+        return '#191a23'
+      } else {
+        return state.userInfo.baseColor
+      }
     },
     activeColor(state) {
+      if (state.userInfo.sideMode === 'dark' || state.userInfo.sideMode === 'light') {
+        return '#1890ff'
+      }
       return state.userInfo.activeColor
     }
 

+ 1 - 1
web/src/view/layout/aside/historyComponent/history.vue

@@ -16,7 +16,7 @@
         :tab="item"
         class="gva-tab"
       >
-        <span slot="label" :style="{color: activeColor}"><i class="dot" :style="{backgroundColor:activeValue===name(item)?activeColor:'#ddd'}" /> {{ item.meta.title }}</span>
+        <span slot="label" :style="{color: activeValue===name(item)?activeColor:'#333'}"><i class="dot" :style="{backgroundColor:activeValue===name(item)?activeColor:'#ddd'}" /> {{ item.meta.title }}</span>
       </el-tab-pane>
     </el-tabs>
 

+ 3 - 21
web/src/view/layout/aside/index.vue

@@ -6,9 +6,9 @@
           :collapse="isCollapse"
           :collapse-transition="true"
           :default-active="active"
-          :background-color="backgroundColor"
+          :background-color="sideMode"
           :active-text-color="activeColor"
-          :text-color="textColor"
+          :text-color="baseColor"
           class="el-menu-vertical"
           unique-opened
           @select="selectMenuItem"
@@ -38,25 +38,7 @@ export default {
   },
   computed: {
     ...mapGetters('router', ['asyncRouters']),
-    ...mapGetters('user', ['baseColor', 'activeColor', 'sideMode']),
-    backgroundColor() {
-      if (this.sideMode === 'dark') {
-        return '#191a23'
-      } else if (this.sideMode === 'light') {
-        return '#fff'
-      } else {
-        return this.sideMode
-      }
-    },
-    textColor() {
-      if (this.$store.getters['user/sideMode'] === 'dark') {
-        return '#fff'
-      } else if (this.$store.getters['user/sideMode'] === 'light') {
-        return '#191a23'
-      } else {
-        return this.baseColor
-      }
-    }
+    ...mapGetters('user', ['baseColor', 'activeColor', 'sideMode'])
   },
   watch: {
     $route() {

+ 4 - 4
web/src/view/layout/setting/index.vue

@@ -9,15 +9,15 @@
     >
       <div class="setting_body">
         <div class="setting_card">
-          <div class="setting_title">侧边栏主题</div>
+          <div class="setting_title">侧边栏主题 (注:自定义请先配置背景色)</div>
           <div class="setting_content">
             <div class="theme-box">
               <div class="item" @click="changeMode('light')">
-                <i v-if="sideMode === 'light'" class="el-icon-check check" />
+                <i v-if="mode === 'light'" class="el-icon-check check" />
                 <img src="https://gw.alipayobjects.com/zos/antfincdn/NQ%24zoisaD2/jpRkZQMyYRryryPNtyIC.svg">
               </div>
               <div class="item" @click="changeMode('dark')">
-                <i v-if="sideMode === 'dark'" class="el-icon-check check" />
+                <i v-if="mode === 'dark'" class="el-icon-check check" />
                 <img src="https://gw.alipayobjects.com/zos/antfincdn/XwFOFbLkSM/LCkqqYNmvBEbokSDscrm.svg">
               </div>
             </div>
@@ -53,7 +53,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters('user', ['sideMode', 'baseColor', 'activeColor'])
+    ...mapGetters('user', ['sideMode', 'baseColor', 'activeColor', 'mode'])
   },
   methods: {
     handleClose() {