lw-cdp-ui 1.1.53 → 1.1.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,79 +1,101 @@
|
|
|
1
1
|
<template>
|
|
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
|
-
|
|
2
|
+
<el-form ref="form"
|
|
3
|
+
label-width="120px"
|
|
4
|
+
label-position="left"
|
|
5
|
+
style="padding:0 20px;">
|
|
6
|
+
<!-- <el-alert title="以下配置可实时预览，开发者可在 config/index.js 中配置默认值，非常不建议在生产环境下开放布局设置" type="error" :closable="false"></el-alert> -->
|
|
7
|
+
<el-divider></el-divider>
|
|
8
|
+
<el-form-item :label="$t('user.nightmode')">
|
|
9
|
+
<el-switch v-model="dark"
|
|
10
|
+
active-value="dark"
|
|
11
|
+
inactive-value="default"></el-switch>
|
|
12
|
+
</el-form-item>
|
|
13
|
+
<el-divider></el-divider>
|
|
14
|
+
<el-form-item :label="$t('user.color')">
|
|
15
|
+
<el-color-picker v-model="colorPrimary"
|
|
16
|
+
:predefine="colorList">></el-color-picker>
|
|
17
|
+
</el-form-item>
|
|
18
|
+
<el-divider></el-divider>
|
|
19
|
+
<el-form-item :label="$t('user.layout')">
|
|
20
|
+
<el-select v-model="layout"
|
|
21
|
+
placeholder="请选择">
|
|
22
|
+
<el-option label="默认"
|
|
23
|
+
value="default"></el-option>
|
|
24
|
+
<el-option label="通栏"
|
|
25
|
+
value="header"></el-option>
|
|
26
|
+
<el-option label="经典"
|
|
27
|
+
value="menu"></el-option>
|
|
28
|
+
<el-option label="功能坞"
|
|
29
|
+
value="dock"></el-option>
|
|
30
|
+
</el-select>
|
|
31
|
+
</el-form-item>
|
|
32
|
+
<el-form-item :label="$t('user.menu')">
|
|
33
|
+
<el-switch v-model="menuIsCollapse"></el-switch>
|
|
34
|
+
</el-form-item>
|
|
35
|
+
<el-form-item :label="$t('user.tag')">
|
|
36
|
+
<el-switch v-model="layoutTags"></el-switch>
|
|
37
|
+
</el-form-item>
|
|
38
|
+
<el-divider></el-divider>
|
|
39
|
+
<el-form-item :label="$t('user.lang')">
|
|
40
|
+
<Lang />
|
|
41
|
+
</el-form-item>
|
|
42
|
+
|
|
43
|
+
</el-form>
|
|
33
44
|
</template>
|
|
34
45
|
|
|
35
46
|
<script>
|
|
36
|
-
|
|
37
|
-
|
|
47
|
+
import colorTool from '@/utils/color'
|
|
48
|
+
import Lang from './lang.vue'
|
|
49
|
+
|
|
50
|
+
export default {
|
|
51
|
+
components: { Lang },
|
|
52
|
+
data() {
|
|
53
|
+
return {
|
|
54
|
+
layout: this.$store.state.global.layout,
|
|
55
|
+
menuIsCollapse: this.$store.state.global.menuIsCollapse,
|
|
56
|
+
layoutTags: this.$store.state.global.layoutTags,
|
|
57
|
+
dark: this.$tool.data.get('APP_THEME'),
|
|
58
|
+
colorList: ['#409EFF', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
|
|
59
|
+
colorPrimary: this.$tool.data.get('APP_COLOR') || this.$config.COLOR || '#409EFF'
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
watch: {
|
|
63
|
+
layout(val) {
|
|
64
|
+
this.$store.commit("SET_layout", val)
|
|
65
|
+
},
|
|
66
|
+
menuIsCollapse(val) {
|
|
67
|
+
this.$store.commit("TOGGLE_menuIsCollapse")
|
|
68
|
+
if (val) {
|
|
69
|
+
this.$tool.data.set("APP_menuIsCollapse", 'true');
|
|
70
|
+
} else {
|
|
71
|
+
this.$tool.data.remove("APP_menuIsCollapse");
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
layoutTags(val) {
|
|
75
|
+
this.$store.commit("TOGGLE_layoutTags")
|
|
76
|
+
if (val) {
|
|
77
|
+
this.$tool.data.remove("APP_LAYOUTTAGS");
|
|
78
|
+
} else {
|
|
79
|
+
this.$tool.data.set("APP_LAYOUTTAGS", 'hide');
|
|
80
|
+
}
|
|
38
81
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
this.$store.commit("TOGGLE_menuIsCollapse")
|
|
57
|
-
},
|
|
58
|
-
layoutTags(){
|
|
59
|
-
this.$store.commit("TOGGLE_layoutTags")
|
|
60
|
-
},
|
|
61
|
-
dark(val){
|
|
62
|
-
document.body.setAttribute('data-theme', val)
|
|
63
|
-
this.$tool.data.set("APP_THEME", val);
|
|
64
|
-
},
|
|
65
|
-
colorPrimary(val){
|
|
66
|
-
document.documentElement.style.setProperty('--el-color-primary', val);
|
|
67
|
-
for (let i = 1; i <= 9; i++) {
|
|
68
|
-
document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(val,i/10));
|
|
69
|
-
}
|
|
70
|
-
for (let i = 1; i <= 9; i++) {
|
|
71
|
-
document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(val,i/10));
|
|
72
|
-
}
|
|
73
|
-
this.$tool.data.set("APP_COLOR", val);
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
}
|
|
82
|
+
},
|
|
83
|
+
dark(val) {
|
|
84
|
+
document.body.setAttribute('data-theme', val)
|
|
85
|
+
this.$tool.data.set("APP_THEME", val);
|
|
86
|
+
},
|
|
87
|
+
colorPrimary(val) {
|
|
88
|
+
document.documentElement.style.setProperty('--el-color-primary', val);
|
|
89
|
+
for (let i = 1; i <= 9; i++) {
|
|
90
|
+
document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(val, i / 10));
|
|
91
|
+
}
|
|
92
|
+
for (let i = 1; i <= 9; i++) {
|
|
93
|
+
document.documentElement.style.setProperty(`--el-color-primary-dark-${i}`, colorTool.darken(val, i / 10));
|
|
94
|
+
}
|
|
95
|
+
this.$tool.data.set("APP_COLOR", val);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
77
99
|
</script>
|
|
78
100
|
|
|
79
101
|
<style>
|
|
@@ -345,6 +345,14 @@ export default {
|
|
|
345
345
|
this.changeMenu = true
|
|
346
346
|
this.menu = this.filterUrl(menu)
|
|
347
347
|
})
|
|
348
|
+
|
|
349
|
+
// 处理标签状态
|
|
350
|
+
let isHideTab = this.$tool.data.get("APP_LAYOUTTAGS")
|
|
351
|
+
if (isHideTab) {
|
|
352
|
+
this.$store.state.global.layoutTags = false
|
|
353
|
+
}
|
|
354
|
+
let isMenuIsCollapse = this.$tool.data.get("APP_menuIsCollapse")
|
|
355
|
+
this.$store.state.global.menuIsCollapse = !!isMenuIsCollapse
|
|
348
356
|
},
|
|
349
357
|
async created() {
|
|
350
358
|
// 标识当前项目
|