Browse Source

主题色功能bug修复

main
pixel 3 years ago
parent
commit
2054ab0f8a
  1. 18
      web/src/store/module/user.js
  2. 2
      web/src/view/layout/aside/historyComponent/history.vue
  3. 24
      web/src/view/layout/aside/index.vue
  4. 8
      web/src/view/layout/setting/index.vue

18
web/src/store/module/user.js

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

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

@ -16,7 +16,7 @@
:tab="item" :tab="item"
class="gva-tab" 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-tab-pane>
</el-tabs> </el-tabs>

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

@ -6,9 +6,9 @@
:collapse="isCollapse" :collapse="isCollapse"
:collapse-transition="true" :collapse-transition="true"
:default-active="active" :default-active="active"
:background-color="backgroundColor"
:background-color="sideMode"
:active-text-color="activeColor" :active-text-color="activeColor"
:text-color="textColor"
:text-color="baseColor"
class="el-menu-vertical" class="el-menu-vertical"
unique-opened unique-opened
@select="selectMenuItem" @select="selectMenuItem"
@ -38,25 +38,7 @@ export default {
}, },
computed: { computed: {
...mapGetters('router', ['asyncRouters']), ...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: { watch: {
$route() { $route() {

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

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

Loading…
Cancel
Save