Skip to content

Commit ed784aa

Browse files
sendyasendya
committed
update setting drawer
1 parent 3c1ba24 commit ed784aa

File tree

8 files changed

+118
-48
lines changed

8 files changed

+118
-48
lines changed

‎src/components/layout/LayoutMain.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
<a-layout-footer style="padding: 0px">
3838
<layout-footer/>
3939
</a-layout-footer>
40+
4041
</a-layout>
4142

4243
<setting-drawer></setting-drawer>
@@ -47,7 +48,7 @@
4748
import SiderMenu from '@/components/menu/SiderMenu'
4849
import LayoutHeader from './LayoutHeader'
4950
import LayoutFooter from './LayoutFooter'
50-
import SettingDrawer from '@/components/tools/SettingDrawer'
51+
import SettingDrawer from '@/components/setting/SettingDrawer'
5152
import { triggerResize } from '@/utils/util'
5253
import { mapState, mapActions } from 'vuex'
5354

‎src/components/tools/SettingDrawer.vue renamed to ‎src/components/setting/SettingDrawer.vue

+33-11
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,21 @@
5555

5656
</div>
5757
</div>
58+
59+
<a-divider />
60+
<div :style="{ marginBottom: '24px' }">
61+
<h3 class="setting-drawer-index-title">其他设置</h3>
62+
<div>
63+
<a-list :split="false">
64+
<a-list-item>
65+
<a-switch slot="actions" size="small" :defaultChecked="colorWeak" @change="onColorWeak" />
66+
<a-list-item-meta>
67+
<div slot="title">色弱模式</div>
68+
</a-list-item-meta>
69+
</a-list-item>
70+
</a-list>
71+
</div>
72+
</div>
5873
<a-divider />
5974
<div :style="{ marginBottom: '24px' }">
6075
<a-alert type="warning">
@@ -75,13 +90,15 @@
7590

7691
<script>
7792
import DetailList from '@/components/tools/DetailList'
93+
import SettingItem from '@/components/setting/SettingItem'
7894
import config from '@/defaultConfig'
79-
import { updateTheme, colorList } from '@/components/tools/setting'
95+
import { updateTheme, updateColorWeak, colorList } from '@/components/tools/setting'
8096
import { mapState } from 'vuex'
8197
8298
export default {
8399
components: {
84-
DetailList
100+
DetailList,
101+
SettingItem
85102
},
86103
data() {
87104
return {
@@ -93,17 +110,24 @@
93110
...mapState({
94111
navTheme: state => state.app.theme,
95112
primaryColor: state => state.app.color,
113+
colorWeak: state => state.app.weak,
96114
})
97115
},
98116
mounted () {
99117
const vm = this
118+
/*this.$nextTick(() => {
119+
vm.visible = false
120+
})*/
100121
setTimeout(() => {
101122
vm.visible = false
102-
}, 1)
123+
}, 16)
103124
// 当主题色不是默认色时，才进行主题编译
104125
if (this.primaryColor !== config.primaryColor) {
105126
updateTheme(this.primaryColor)
106127
}
128+
if (this.colorWeak !== config.colorWeak) {
129+
updateColorWeak(this.colorWeak)
130+
}
107131
},
108132
methods: {
109133
showDrawer() {
@@ -115,10 +139,14 @@
115139
toggle() {
116140
this.visible = !this.visible
117141
},
118-
changeMenuTheme(theme) {
142+
onColorWeak (checked) {
143+
this.$store.dispatch('ToggleWeak', checked)
144+
updateColorWeak(checked)
145+
},
146+
changeMenuTheme (theme) {
119147
this.$store.dispatch('ToggleTheme', theme)
120148
},
121-
changeColor(color) {
149+
changeColor (color) {
122150
if (this.primaryColor !== color) {
123151
this.$store.dispatch('ToggleColor', color)
124152
updateTheme(color)
@@ -132,12 +160,6 @@
132160
133161
.setting-drawer-index-content {
134162
135-
.setting-drawer-index-title {
136-
font-size: 14px;
137-
color: rgba(0, 0, 0, .85);
138-
line-height: 22px;
139-
margin-bottom: 12px;
140-
}
141163
.setting-drawer-index-blockChecbox {
142164
display: flex;
143165

‎src/components/setting/SettingItem.vue

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template>
2+
<div class="setting-drawer-index-item">
3+
<h3 class="setting-drawer-index-title">{{ title }}</h3>
4+
<slot></slot>
5+
<a-divider v-if="divider"/>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
name: "SettingItem",
12+
props: {
13+
title: {
14+
type: String,
15+
default: ''
16+
},
17+
divider: {
18+
type: Boolean,
19+
default: false
20+
}
21+
}
22+
}
23+
</script>
24+
25+
<style lang="scss" scoped>
26+
27+
.setting-drawer-index-item {
28+
margin-bottom: 24px;
29+
30+
.setting-drawer-index-title {
31+
font-size: 14px;
32+
color: rgba(0, 0, 0, .85);
33+
line-height: 22px;
34+
margin-bottom: 12px;
35+
}
36+
37+
}
38+
</style>

‎src/components/tools/setting.js

+29-28
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,33 @@ import { message } from 'ant-design-vue/es';
33

44
let lessNodesAppended;
55

6+
const colorList = [
7+
{
8+
key: '薄暮', color: '#F5222D',
9+
},
10+
{
11+
key: '火山', color: '#FA541C',
12+
},
13+
{
14+
key: '日暮', color: '#FAAD14',
15+
},
16+
{
17+
key: '明青', color: '#13C2C2',
18+
},
19+
{
20+
key: '极光绿', color: '#52C41A',
21+
},
22+
{
23+
key: '拂晓蓝（默认）', color: '#1890FF',
24+
},
25+
{
26+
key: '极客蓝', color: '#2F54EB',
27+
},
28+
{
29+
key: '酱紫', color: '#722ED1',
30+
},
31+
];
32+
633
const updateTheme = primaryColor => {
734
// Don't compile less in production!
835
/* if (process.env.NODE_ENV === 'production') {
@@ -61,34 +88,8 @@ const updateTheme = primaryColor => {
6188
};
6289

6390
const updateColorWeak = colorWeak => {
64-
document.body.className = colorWeak ? 'colorWeak' : '';
91+
// document.body.className = colorWeak ? 'colorWeak' : '';
92+
colorWeak ? document.body.classList.add('colorWeak') : document.body.classList.remove('colorWeak')
6593
};
6694

67-
const colorList = [
68-
{
69-
key: '薄暮', color: '#F5222D',
70-
},
71-
{
72-
key: '火山', color: '#FA541C',
73-
},
74-
{
75-
key: '日暮', color: '#FAAD14',
76-
},
77-
{
78-
key: '明青', color: '#13C2C2',
79-
},
80-
{
81-
key: '极光绿', color: '#52C41A',
82-
},
83-
{
84-
key: '拂晓蓝（默认）', color: '#1890FF',
85-
},
86-
{
87-
key: '极客蓝', color: '#2F54EB',
88-
},
89-
{
90-
key: '酱紫', color: '#722ED1',
91-
},
92-
];
93-
9495
export { updateTheme, colorList, updateColorWeak }

‎src/main.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import 'ant-design-vue/dist/antd.less'; // or 'ant-design-vue/dist/antd.less'
1313
import '@/permission' // permission control
1414
import '@/utils/filter' // base filter
1515

16-
import { ACCESS_TOKEN, DEFAULT_COLOR, DEFAULT_THEME, SIDEBAR_TYPE } from "@/store/mutation-types"
16+
import { ACCESS_TOKEN, DEFAULT_COLOR, DEFAULT_THEME, DEFAULT_COLOR_WEAK, SIDEBAR_TYPE } from "@/store/mutation-types"
1717
import config from '@/defaultConfig'
1818

1919
Vue.config.productionTip = false
@@ -29,6 +29,7 @@ new Vue({
2929
mounted () {
3030
store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, false))
3131
store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
32+
store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
3233
store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
3334
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
3435
},

‎src/store/modules/app.js

+10-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Vue from 'vue'
2-
import {SIDEBAR_TYPE, DEFAULT_THEME, DEFAULT_COLOR} from "@/store/mutation-types"
2+
import { SIDEBAR_TYPE, DEFAULT_THEME, DEFAULT_COLOR, DEFAULT_COLOR_WEAK } from "@/store/mutation-types"
33

44
const app = {
55
state: {
@@ -9,7 +9,8 @@ const app = {
99
},
1010
device: 'desktop',
1111
theme: '',
12-
color: null
12+
color: null,
13+
weak: false
1314
},
1415
mutations: {
1516
SET_SIDEBAR_TYPE: (state, type) => {
@@ -32,6 +33,10 @@ const app = {
3233
TOGGLE_COLOR: (state, color) => {
3334
Vue.ls.set(DEFAULT_COLOR, color)
3435
state.color = color
36+
},
37+
TOGGLE_WEAK: (state, flag) => {
38+
Vue.ls.set(DEFAULT_COLOR_WEAK, flag)
39+
state.weak = flag
3540
}
3641
},
3742
actions: {
@@ -49,6 +54,9 @@ const app = {
4954
},
5055
ToggleColor({ commit }, color) {
5156
commit('TOGGLE_COLOR', color)
57+
},
58+
ToggleWeak({ commit }, weakFlag) {
59+
commit('TOGGLE_WEAK', weakFlag)
5260
}
5361
}
5462
}

‎src/store/mutation-types.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export const ACCESS_TOKEN = 'Access-Token'
22
export const SIDEBAR_TYPE = 'SIDEBAR_TYPE'
33
export const DEFAULT_THEME = 'DEFAULT_THEME'
4-
export const DEFAULT_COLOR = 'DEFAULT_COLOR'
4+
export const DEFAULT_COLOR = 'DEFAULT_COLOR'
5+
export const DEFAULT_COLOR_WEAK = 'DEFAULT_COLOR_WEAK'

‎src/views/Login.vue

+2-4
Original file line numberDiff line numberDiff line change
@@ -122,15 +122,13 @@
122122
}
123123
},
124124
created () {
125-
/*
126125
this.$http.get('/auth/2step-code')
127126
.then(res => {
128-
this.requiredTwoStepCaptcha = res.result
127+
this.requiredTwoStepCaptcha = res.result.stepCode
129128
}).catch(err => {
130129
console.log('2step-code:', err)
131130
})
132-
*/
133-
this.requiredTwoStepCaptcha = true
131+
// this.requiredTwoStepCaptcha = true
134132
135133
},
136134
methods: {

0 commit comments

Comments
 (0)