n20-common-lib 2.3.21 → 2.3.22
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.
- package/package.json +1 -1
- package/src/assets/css/cl-layout-aside.scss +4 -2
- package/src/assets/css/cl-layout-content.scss +2 -5
- package/src/assets/css/cl-layout-tabs.scss +9 -13
- package/src/assets/css/cl-layout.scss +3 -3
- package/src/components/Layout/AsideNav/index.vue +53 -68
- package/src/components/Layout/indexN.vue +3 -2
- package/src/assets/icon/td-N.svg +0 -1
- package/src/assets/icon/td-Y.svg +0 -1
package/package.json
CHANGED
|
@@ -32,6 +32,9 @@ $--hover-bg-color: #303d59;
|
|
|
32
32
|
.open-collapsed-btn {
|
|
33
33
|
padding-left: 10px;
|
|
34
34
|
padding-right: 10px;
|
|
35
|
+
.rotate-icon {
|
|
36
|
+
transform: rotate(180deg);
|
|
37
|
+
}
|
|
35
38
|
}
|
|
36
39
|
}
|
|
37
40
|
|
|
@@ -51,8 +54,7 @@ $--hover-bg-color: #303d59;
|
|
|
51
54
|
box-sizing: border-box;
|
|
52
55
|
position: sticky;
|
|
53
56
|
bottom: 0;
|
|
54
|
-
|
|
55
|
-
text-align: right;
|
|
57
|
+
left: 0;
|
|
56
58
|
z-index: 1;
|
|
57
59
|
|
|
58
60
|
width: 100%;
|
|
@@ -1,19 +1,16 @@
|
|
|
1
1
|
.content-box {
|
|
2
2
|
box-sizing: border-box;
|
|
3
3
|
margin: 10px;
|
|
4
|
-
margin-top: 0;
|
|
5
4
|
padding: 12px;
|
|
6
|
-
border-
|
|
7
|
-
border-bottom-right-radius: 6px;
|
|
5
|
+
border-radius: 6px;
|
|
8
6
|
height: var(--client-height);
|
|
9
7
|
background: $--color-white;
|
|
10
8
|
overflow: auto;
|
|
11
9
|
|
|
12
10
|
&.element-doc {
|
|
13
11
|
margin: 10px;
|
|
14
|
-
margin-top: 0;
|
|
15
12
|
padding: 10px;
|
|
16
|
-
height:
|
|
13
|
+
height: var(--client-height);
|
|
17
14
|
overflow: auto;
|
|
18
15
|
}
|
|
19
16
|
}
|
|
@@ -20,31 +20,27 @@ $--item-hover-padding: 12px;
|
|
|
20
20
|
padding-left: $--item-hover-padding !important;
|
|
21
21
|
padding-right: $--item-hover-padding !important;
|
|
22
22
|
margin-right: $--item-margin;
|
|
23
|
-
border-
|
|
24
|
-
|
|
25
|
-
background: $--button-default-border-color;
|
|
23
|
+
border-radius: $--item-radius;
|
|
24
|
+
background: $--color-white;
|
|
26
25
|
border: none !important;
|
|
27
26
|
font-weight: $--font-weight-primary;
|
|
28
27
|
&:first-child {
|
|
29
|
-
margin-left:
|
|
28
|
+
margin-left: $--layou-margin;
|
|
30
29
|
.el-icon-close {
|
|
31
30
|
display: none;
|
|
32
31
|
}
|
|
33
32
|
}
|
|
34
33
|
&:last-child {
|
|
35
|
-
margin-right:
|
|
34
|
+
margin-right: $--layou-margin;
|
|
36
35
|
}
|
|
37
36
|
|
|
38
|
-
&:hover {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
font-weight: 600;
|
|
42
|
-
}
|
|
37
|
+
// &:hover {
|
|
38
|
+
// background: #f4f5f8;
|
|
39
|
+
// }
|
|
43
40
|
|
|
44
41
|
&.is-active {
|
|
45
|
-
color: $--color-
|
|
46
|
-
background: $--color-
|
|
47
|
-
font-weight: 600;
|
|
42
|
+
color: $--color-white;
|
|
43
|
+
background: $--color-primary;
|
|
48
44
|
}
|
|
49
45
|
|
|
50
46
|
&:focus.is-active.is-focus {
|
|
@@ -3,8 +3,8 @@ $--aside-width: 208px;
|
|
|
3
3
|
$--aside-height: 40px;
|
|
4
4
|
$--aside-collapse-width: 50px;
|
|
5
5
|
$--header-height: 48px;
|
|
6
|
-
$--tabsnav-height:
|
|
7
|
-
$--layou-margin:
|
|
6
|
+
$--tabsnav-height: 46px;
|
|
7
|
+
$--layou-margin: 10px;
|
|
8
8
|
|
|
9
9
|
body {
|
|
10
10
|
background: $--body-background;
|
|
@@ -82,7 +82,7 @@ body {
|
|
|
82
82
|
.content-wrap {
|
|
83
83
|
box-sizing: border-box;
|
|
84
84
|
position: fixed !important;
|
|
85
|
-
top: $--header-height + $--tabsnav-height;
|
|
85
|
+
top: $--header-height + $--tabsnav-height - $--layou-margin;
|
|
86
86
|
left: $--aside-width;
|
|
87
87
|
right: 0;
|
|
88
88
|
bottom: 0;
|
|
@@ -1,58 +1,53 @@
|
|
|
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
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
</template>
|
|
2
|
+
<el-menu
|
|
3
|
+
id="layout-sider"
|
|
4
|
+
:key="menuKey"
|
|
5
|
+
class="layout-aside flex-column"
|
|
6
|
+
:class="{ 'is-collapse': collapse }"
|
|
7
|
+
:collapse="collapse"
|
|
8
|
+
:default-active="activeNav"
|
|
9
|
+
:background-color="backgroundColor"
|
|
10
|
+
:text-color="textColor"
|
|
11
|
+
:active-text-color="activeTextColor"
|
|
12
|
+
:unique-opened="true"
|
|
13
|
+
>
|
|
14
|
+
<template v-for="(omenus, o) in menus">
|
|
15
|
+
<template v-for="(itemA, a) in omenus.menu">
|
|
16
|
+
<!-- 一级菜单 -->
|
|
17
|
+
<MenuItem v-if="!itemA.children" :key="`${o}-${a}`" :item="itemA" @click="linkFn" />
|
|
18
|
+
<el-submenu v-else :key="itemA.title" :index="itemA.title" popper-class="nav-menu-pop menu_a">
|
|
19
|
+
<SubmenuTitle slot="title" :item="itemA" />
|
|
20
|
+
<MenuItem v-if="collapse" class="collapse-submenu-title" :item="{ title: itemA.title, i18n: itemA.i18n }" />
|
|
21
|
+
<template v-for="(itemB, b) in itemA.children">
|
|
22
|
+
<!-- 二级菜单 -->
|
|
23
|
+
<MenuItem v-if="!itemB.children" :key="b" :item="itemB" @click="linkFn" />
|
|
24
|
+
<el-submenu v-else :key="itemB.title" :index="itemB.title" popper-class="nav-menu-pop">
|
|
25
|
+
<SubmenuTitle slot="title" :item="itemB" />
|
|
26
|
+
<template v-for="(itemC, c) in itemB.children">
|
|
27
|
+
<!-- 三级菜单 -->
|
|
28
|
+
<MenuItem v-if="!itemC.children" :key="c" :item="itemC" @click="linkFn" />
|
|
29
|
+
<el-submenu v-else :key="itemC.title" :index="itemC.title" popper-class="nav-menu-pop">
|
|
30
|
+
<SubmenuTitle slot="title" :item="itemC" />
|
|
31
|
+
<template v-for="(itemD, d) in itemC.children">
|
|
32
|
+
<!-- 四级菜单 -->
|
|
33
|
+
<MenuItem :key="d" :item="itemD" @click="linkFn" />
|
|
34
|
+
</template>
|
|
35
|
+
</el-submenu>
|
|
36
|
+
</template>
|
|
37
|
+
</el-submenu>
|
|
38
|
+
</template>
|
|
39
|
+
</el-submenu>
|
|
41
40
|
</template>
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
</div>
|
|
53
|
-
<component :is="'style'" v-if="extendStyle">{{ extendStyle }}</component>
|
|
54
|
-
</el-menu>
|
|
55
|
-
</div>
|
|
41
|
+
</template>
|
|
42
|
+
<span class="flex-item"></span>
|
|
43
|
+
<div class="open-collapsed-btn">
|
|
44
|
+
<span
|
|
45
|
+
:class="collapse ? 'n20-icon-caidanshouqi f-s-l rotate-icon' : 'n20-icon-caidanshouqi f-s-l'"
|
|
46
|
+
@click="setCollapse"
|
|
47
|
+
></span>
|
|
48
|
+
</div>
|
|
49
|
+
<component :is="'style'" v-if="extendStyle">{{ extendStyle }}</component>
|
|
50
|
+
</el-menu>
|
|
56
51
|
</template>
|
|
57
52
|
|
|
58
53
|
<script>
|
|
@@ -72,7 +67,7 @@ export default {
|
|
|
72
67
|
},
|
|
73
68
|
collapse: {
|
|
74
69
|
type: Boolean,
|
|
75
|
-
default:
|
|
70
|
+
default: false
|
|
76
71
|
}
|
|
77
72
|
},
|
|
78
73
|
data() {
|
|
@@ -81,8 +76,7 @@ export default {
|
|
|
81
76
|
textColor: '#fefefea6',
|
|
82
77
|
activeTextColor: '#ffffff',
|
|
83
78
|
extendStyle: undefined,
|
|
84
|
-
menuKey: 0
|
|
85
|
-
gdIcon: false
|
|
79
|
+
menuKey: 0
|
|
86
80
|
}
|
|
87
81
|
},
|
|
88
82
|
watch: {
|
|
@@ -94,25 +88,16 @@ export default {
|
|
|
94
88
|
getJsonc('/server-config.jsonc').then(({ _asideMenu }) => {
|
|
95
89
|
this.setConfig(_asideMenu)
|
|
96
90
|
})
|
|
97
|
-
console.log(window.localStorage.getItem('aside-nav-GD'))
|
|
98
|
-
this.gdIcon = window.localStorage.getItem('aside-nav-GD') === 'true'
|
|
99
91
|
},
|
|
100
92
|
methods: {
|
|
101
|
-
handleMouseEnter() {
|
|
102
|
-
this.$emit('update:collapse', false)
|
|
103
|
-
},
|
|
104
|
-
handleMouseLeave() {
|
|
105
|
-
if (this.gdIcon) return false
|
|
106
|
-
this.$emit('update:collapse', true)
|
|
107
|
-
},
|
|
108
93
|
linkFn(menu, base) {
|
|
109
94
|
if (!menu.href) {
|
|
110
95
|
this.$emit('menu-click', menu, base)
|
|
111
96
|
}
|
|
112
97
|
},
|
|
113
|
-
|
|
114
|
-
this.
|
|
115
|
-
window.localStorage.setItem('aside-nav-
|
|
98
|
+
setCollapse() {
|
|
99
|
+
this.$emit('update:collapse', !this.collapse)
|
|
100
|
+
window.localStorage.setItem('aside-nav-collapse', !this.collapse)
|
|
116
101
|
},
|
|
117
102
|
setConfig(AM) {
|
|
118
103
|
if (AM) {
|
|
@@ -101,7 +101,8 @@ export default {
|
|
|
101
101
|
tabsH,
|
|
102
102
|
clientM,
|
|
103
103
|
clientHeight: document.documentElement.offsetHeight - headerH - tabsH - 2 * clientM,
|
|
104
|
-
collapse: window.localStorage.getItem('aside-nav-
|
|
104
|
+
collapse: window.localStorage.getItem('aside-nav-collapse') === 'true',
|
|
105
|
+
|
|
105
106
|
menusC: [],
|
|
106
107
|
menuList: [],
|
|
107
108
|
tabList: [],
|
|
@@ -183,7 +184,7 @@ export default {
|
|
|
183
184
|
}
|
|
184
185
|
},
|
|
185
186
|
getCollapse() {
|
|
186
|
-
this.collapse = window.localStorage.getItem('aside-nav-
|
|
187
|
+
this.collapse = window.localStorage.getItem('aside-nav-collapse') === 'true'
|
|
187
188
|
},
|
|
188
189
|
contentChange(dom) {
|
|
189
190
|
this.clientHeight = dom.clientHeight - 2 * this.clientM
|
package/src/assets/icon/td-N.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688469672059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1821" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M878.3 392.1L631.9 145.7c-6.5-6.5-15-9.7-23.5-9.7s-17 3.2-23.5 9.7L423.8 306.9c-12.2-1.4-24.5-2-36.8-2-73.2 0-146.4 24.1-206.5 72.3-15.4 12.3-16.7 35.4-2.7 49.4l181.7 181.7-215.4 215.2c-2.6 2.6-4.3 6.1-4.6 9.8l-3.4 37.2c-0.9 9.4 6.6 17.4 15.9 17.4 0.5 0 1 0 1.5-0.1l37.2-3.4c3.7-0.3 7.2-2 9.8-4.6l215.4-215.4 181.7 181.7c6.5 6.5 15 9.7 23.5 9.7 9.7 0 19.3-4.2 25.9-12.4 56.3-70.3 79.7-158.3 70.2-243.4l161.1-161.1c12.9-12.8 12.9-33.8 0-46.8zM666.2 549.3l-24.5 24.5 3.8 34.4c3.7 33.7 1 67.2-8.2 99.7-5.4 19-12.8 37.1-22.2 54.2L262 408.8c12.9-7.1 26.3-13.1 40.3-17.9 27.2-9.4 55.7-14.1 84.7-14.1 9.6 0 19.3 0.5 28.9 1.6l34.4 3.8 24.5-24.5L608.5 224 800 415.5 666.2 549.3z" p-id="1822" fill="#ffffff"></path></svg>
|
package/src/assets/icon/td-Y.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1688469639350" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1622" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M557.728 688v288.384H466.24V688H227.52c-9.6 0-18.048-3.712-24.96-11.264A37.824 37.824 0 0 1 192 649.984c0-48.768 14.432-92.704 43.584-131.84 29.12-38.976 61.92-58.56 98.56-58.56V200.512c-19.296 0-35.84-7.552-50.048-22.656a76.16 76.16 0 0 1-21.12-53.6c0-20.672 7.04-38.4 21.12-53.6 13.984-14.976 30.72-22.656 50.048-22.656h355.584c19.296 0 35.84 7.552 50.048 22.656 13.984 15.104 21.152 32.928 21.152 53.6 0 20.672-7.04 38.4-21.12 53.6-14.112 15.232-30.784 22.656-50.08 22.656v258.944c36.64 0 69.568 19.584 98.56 58.56A215.424 215.424 0 0 1 832 649.984c0 10.272-3.456 19.328-10.528 26.752-7.04 7.424-15.36 11.264-24.96 11.264H557.76z" fill="#ffffff" p-id="1623"></path></svg>
|