|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<template>
<div class="setting-drawer">
<a-drawer
width="300"
placement="right"
:closable="false"
@close="onClose"
:visible="visible"
style="height: 100%;overflow: auto;"
>
<div class="setting-drawer-index-content">
<div :style="{ marginBottom: '24px' }">
<h3 class="setting-drawer-index-title">整体风格设置</h3>
<div class="setting-drawer-index-blockChecbox">
<a-tooltip>
<template slot="title">
暗色菜单风格
</template>
<div class="setting-drawer-index-item" @click="handleMenuTheme('dark')">
<img src="https://gw.alipayobjects.com/zos/rmsportal/LCkqqYNmvBEbokSDscrm.svg" alt="dark">
<div class="setting-drawer-index-selectIcon" v-if="navTheme === 'dark'">
<a-icon type="check"/>
</div>
</div>
</a-tooltip>
<a-tooltip>
<template slot="title">
亮色菜单风格
</template>
<div class="setting-drawer-index-item" @click="handleMenuTheme('light')">
<img src="https://gw.alipayobjects.com/zos/rmsportal/jpRkZQMyYRryryPNtyIC.svg" alt="light">
<div class="setting-drawer-index-selectIcon" v-if="navTheme !== 'dark'">
<a-icon type="check"/>
</div>
</div>
</a-tooltip>
</div>
</div>
<div :style="{ marginBottom: '24px' }">
<h3 class="setting-drawer-index-title">主题色</h3>
<div style="height: 20px">
<a-tooltip class="setting-drawer-theme-color-colorBlock" v-for="(item, index) in colorList" :key="index">
<template slot="title">
{{ item.key }}
</template>
<a-tag :color="item.color" @click="changeColor(item.color)">
<a-icon type="check" v-if="item.color === primaryColor"></a-icon>
</a-tag>
</a-tooltip>
</div>
</div>
|
|
58
|
<a-divider/>
|
|
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
<div :style="{ marginBottom: '24px' }">
<h3 class="setting-drawer-index-title">导航模式</h3>
<div class="setting-drawer-index-blockChecbox">
<a-tooltip>
<template slot="title">
侧边栏导航
</template>
<div class="setting-drawer-index-item" @click="handleLayout('sidemenu')">
<img src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" alt="sidemenu">
<div class="setting-drawer-index-selectIcon" v-if="layoutMode === 'sidemenu'">
<a-icon type="check"/>
</div>
</div>
</a-tooltip>
<a-tooltip>
<template slot="title">
顶部栏导航
</template>
<div class="setting-drawer-index-item" @click="handleLayout('topmenu')">
<img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="topmenu">
<div class="setting-drawer-index-selectIcon" v-if="layoutMode !== 'sidemenu'">
<a-icon type="check"/>
</div>
</div>
</a-tooltip>
</div>
<div :style="{ marginTop: '24px' }">
<a-list :split="false">
<a-list-item>
<a-tooltip slot="actions">
<template slot="title">
该设定仅 [顶部栏导航] 时有效
</template>
|
|
95
96
|
<a-select size="small" style="width: 80px;" :defaultValue="contentWidth"
@change="handleContentWidthChange">
|
|
97
98
99
100
101
102
103
104
105
|
<a-select-option value="Fixed">固定</a-select-option>
<a-select-option value="Fluid" v-if="layoutMode !== 'sidemenu'">流式</a-select-option>
</a-select>
</a-tooltip>
<a-list-item-meta>
<div slot="title">内容区域宽度</div>
</a-list-item-meta>
</a-list-item>
<a-list-item>
|
|
106
|
<a-switch slot="actions" size="small" :defaultChecked="fixedHeader" @change="handleFixedHeader"/>
|
|
107
108
109
110
111
|
<a-list-item-meta>
<div slot="title">固定 Header</div>
</a-list-item-meta>
</a-list-item>
<a-list-item>
|
|
112
113
|
<a-switch slot="actions" size="small" :disabled="!fixedHeader" :defaultChecked="autoHideHeader"
@change="handleFixedHeaderHidden"/>
|
|
114
|
<a-list-item-meta>
|
|
115
116
|
<div slot="title" :style="{ textDecoration: !fixedHeader ? 'line-through' : 'unset' }">下滑时隐藏 Header
</div>
|
|
117
118
119
|
</a-list-item-meta>
</a-list-item>
<a-list-item>
|
|
120
121
|
<a-switch slot="actions" size="small" :disabled="(layoutMode === 'topmenu')" :checked="dataFixSiderbar"
@change="handleFixSiderbar"/>
|
|
122
|
<a-list-item-meta>
|
|
123
124
125
|
<div slot="title" :style="{ textDecoration: layoutMode === 'topmenu' ? 'line-through' : 'unset' }">
固定侧边菜单
</div>
|
|
126
127
128
129
130
|
</a-list-item-meta>
</a-list-item>
</a-list>
</div>
</div>
|
|
131
|
<a-divider/>
|
|
132
133
134
135
136
137
|
<div :style="{ marginBottom: '24px' }">
<h3 class="setting-drawer-index-title">其他设置</h3>
<div>
<a-list :split="false">
<a-list-item>
|
|
138
|
<a-switch slot="actions" size="small" :defaultChecked="colorWeak" @change="onColorWeak"/>
|
|
139
140
141
142
143
|
<a-list-item-meta>
<div slot="title">色弱模式</div>
</a-list-item-meta>
</a-list-item>
<a-list-item>
|
|
144
|
<a-switch slot="actions" size="small" :defaultChecked="multipage" @change="onMultipageWeak"/>
|
|
145
146
147
148
149
150
151
|
<a-list-item-meta>
<div slot="title">多页签模式</div>
</a-list-item-meta>
</a-list-item>
</a-list>
</div>
</div>
|
|
152
|
<a-divider/>
|
|
153
154
155
156
157
158
159
160
161
162
|
<div :style="{ marginBottom: '24px' }">
<a-alert type="warning">
<span slot="message">
配置栏只在开发环境用于预览,生产环境不会展现,请手动修改配置文件
<a href="https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultSettings.js" target="_blank">src/defaultSettings.js</a>
</span>
</a-alert>
</div>
</div>
<div class="setting-drawer-index-handle" @click="toggle" v-if="visible">
|
|
163
164
165
|
<!-- <a-icon type="setting" v-if="!visible"/>-->
<!-- <a-icon type="close" v-else/>-->
<a-icon type="close"/>
|
|
166
167
168
169
170
171
|
</div>
</a-drawer>
</div>
</template>
<script>
|
|
172
173
174
175
176
177
|
import DetailList from '@/components/tools/DetailList'
import SettingItem from '@/components/setting/SettingItem'
import config from '@/defaultSettings'
import {updateTheme, updateColorWeak, colorList} from '@/components/tools/setting'
import {mixin, mixinDevice} from '@/utils/mixin.js'
import {triggerWindowResizeEvent} from '@/utils/util'
|
|
178
|
|
|
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
|
export default {
components: {
DetailList,
SettingItem
},
mixins: [mixin, mixinDevice],
data() {
return {
visible: false,
colorList,
dataFixSiderbar: false
}
},
mounted() {
// 当主题色不是默认色时,才进行主题编译
if (this.primaryColor !== config.primaryColor) {
updateTheme(this.primaryColor)
}
if (this.colorWeak !== config.colorWeak) {
updateColorWeak(this.colorWeak)
}
if (this.multipage !== config.multipage) {
this.$store.dispatch('ToggleMultipage', this.multipage)
|
|
202
|
}
|
|
203
204
205
206
|
},
methods: {
showDrawer() {
this.visible = true
|
|
207
|
},
|
|
208
209
|
onClose() {
this.visible = false
|
|
210
|
},
|
|
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
|
toggle() {
this.visible = !this.visible
},
onColorWeak(checked) {
this.$store.dispatch('ToggleWeak', checked)
updateColorWeak(checked)
},
onMultipageWeak(checked) {
this.$store.dispatch('ToggleMultipage', checked)
},
handleMenuTheme(theme) {
this.$store.dispatch('ToggleTheme', theme)
},
handleLayout(mode) {
this.$store.dispatch('ToggleLayoutMode', mode)
// 因为顶部菜单不能固定左侧菜单栏,所以强制关闭
this.handleFixSiderbar(false)
// 触发窗口resize事件
triggerWindowResizeEvent()
},
handleContentWidthChange(type) {
this.$store.dispatch('ToggleContentWidth', type)
},
changeColor(color) {
if (this.primaryColor !== color) {
this.$store.dispatch('ToggleColor', color)
updateTheme(color)
|
|
238
239
|
}
},
|
|
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
|
handleFixedHeader(fixed) {
this.$store.dispatch('ToggleFixedHeader', fixed)
},
handleFixedHeaderHidden(autoHidden) {
this.$store.dispatch('ToggleFixedHeaderHidden', autoHidden)
},
handleFixSiderbar(fixed) {
if (this.layoutMode === 'topmenu') {
fixed = false
}
this.dataFixSiderbar = fixed
this.$store.dispatch('ToggleFixSiderbar', fixed)
}
},
}
|
|
255
256
257
258
|
</script>
<style lang="less" scoped>
|
|
259
|
.setting-drawer-index-content {
|
|
260
|
|
|
261
262
|
.setting-drawer-index-blockChecbox {
display: flex;
|
|
263
|
|
|
264
265
266
267
268
|
.setting-drawer-index-item {
margin-right: 16px;
position: relative;
border-radius: 4px;
cursor: pointer;
|
|
269
|
|
|
270
271
|
img {
width: 48px;
|
|
272
273
|
}
|
|
274
275
276
277
278
279
280
281
282
|
.setting-drawer-index-selectIcon {
position: absolute;
top: 0;
right: 0;
width: 100%;
padding-top: 15px;
padding-left: 24px;
height: 100%;
color: #1890ff;
|
|
283
|
font-size: 14px;
|
|
284
|
font-weight: 700;
|
|
285
286
287
288
|
}
}
}
|
|
289
290
291
292
293
|
.setting-drawer-theme-color-colorBlock {
width: 20px;
height: 20px;
border-radius: 2px;
float: left;
|
|
294
|
cursor: pointer;
|
|
295
296
297
|
margin-right: 8px;
padding-left: 0px;
padding-right: 0px;
|
|
298
|
text-align: center;
|
|
299
300
|
color: #fff;
font-weight: 700;
|
|
301
302
|
i {
|
|
303
|
font-size: 14px;
|
|
304
305
|
}
}
|
|
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
|
}
.setting-drawer-index-handle {
position: absolute;
top: 240px;
background: #1890ff;
width: 48px;
height: 48px;
right: 300px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
pointer-events: auto;
z-index: 1001;
text-align: center;
font-size: 16px;
border-radius: 4px 0 0 4px;
i {
color: rgb(255, 255, 255);
font-size: 20px;
}
}
|
|
330
|
</style>
|