Skip to content

Commit 4344504

Browse files
author
奇淼（piexlmax
authored
侧边栏样式调整 (flipped-aurora#1102)
* 添加侧边栏样式,增加变量配置,方便自定义主题 * 控制侧边栏二层传递样式
1 parent 435735f commit 4344504

File tree

5 files changed

+208
-28
lines changed

5 files changed

+208
-28
lines changed

‎web/src/style/main.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -596,7 +596,16 @@ li {
596596
}
597597
}
598598
.aside {
599+
.el-menu--collapse {
600+
>.el-menu-item{
601+
padding: 0 15px !important;
602+
603+
}
604+
}
599605
.el-sub-menu {
606+
.el-menu-item{
607+
padding: 0 20px;
608+
}
600609
.el-menu {
601610
.is-active {
602611
// 关闭三级菜单二级菜单样式

‎web/src/view/layout/aside/asideComponent/asyncSubmenu.vue

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,49 @@ export default {
1717
</script>
1818

1919
<script setup>
20-
defineProps({
20+
import { ref, watch } from 'vue'
21+
const props = defineProps({
2122
routerInfo: {
2223
default: function() {
2324
return null
2425
},
2526
type: Object
27+
},
28+
isCollapse: {
29+
default: function() {
30+
return false
31+
},
32+
type: Boolean
33+
},
34+
theme: {
35+
default: function() {
36+
return {}
37+
},
38+
type: Object
2639
}
2740
})
41+
42+
// const activeBackground = ref(props.theme.activeBackground)
43+
// const activeText = ref(props.theme.activeText)
44+
const normalText = ref(props.theme.normalText)
45+
// const hoverBackground = ref(props.theme.hoverBackground)
46+
// const hoverText = ref(props.theme.hoverText)
47+
48+
watch(() => props.theme, () => {
49+
// activeBackground.value = props.theme.activeBackground
50+
// activeText.value = props.theme.activeText
51+
normalText.value = props.theme.normalText
52+
// hoverBackground.value = props.theme.hoverBackground
53+
// hoverText.value = props.theme.hoverText
54+
})
55+
2856
</script>
57+
58+
<style lang="scss" scoped>
59+
.el-sub-menu{
60+
::v-deep(.el-sub-menu__title){
61+
color: v-bind(normalText);
62+
}
63+
}
64+
65+
</style>

‎web/src/view/layout/aside/asideComponent/index.vue

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
11
<template>
2-
<component :is="menuComponent" v-if="!routerInfo.hidden" :router-info="routerInfo">
2+
<component
3+
:is="menuComponent"
4+
v-if="!routerInfo.hidden"
5+
:is-collapse="isCollapse"
6+
:theme="theme"
7+
:router-info="routerInfo"
8+
>
39
<template v-if="routerInfo.children&&routerInfo.children.length">
4-
<AsideComponent v-for="item in routerInfo.children" :key="item.name" :router-info="item" />
10+
<AsideComponent
11+
v-for="item in routerInfo.children"
12+
:key="item.name"
13+
:is-collapse="false"
14+
:router-info="item"
15+
:theme="theme"
16+
/>
517
</template>
618
</component>
719
</template>
@@ -21,6 +33,18 @@ const props = defineProps({
2133
type: Object,
2234
default: () => null,
2335
},
36+
isCollapse: {
37+
default: function() {
38+
return false
39+
},
40+
type: Boolean
41+
},
42+
theme: {
43+
default: function() {
44+
return {}
45+
},
46+
type: Object
47+
}
2448
})
2549
2650
const menuComponent = computed(() => {

‎web/src/view/layout/aside/asideComponent/menuItem.vue

Lines changed: 96 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,24 @@
11
<template>
22
<el-menu-item :index="routerInfo.name">
3-
<el-icon v-if="routerInfo.meta.icon">
4-
<component :is="routerInfo.meta.icon" />
5-
</el-icon>
6-
<template #title>
7-
<span class="gva-menu-item-title">{{ routerInfo.meta.title }}</span>
3+
<template v-if="isCollapse">
4+
<el-tooltip
5+
class="box-item"
6+
effect="light"
7+
:content="routerInfo.meta.title"
8+
placement="right"
9+
>
10+
<el-icon v-if="routerInfo.meta.icon">
11+
<component :is="routerInfo.meta.icon" />
12+
</el-icon>
13+
</el-tooltip>
14+
</template>
15+
<template v-else>
16+
<div class="gva-menu-item">
17+
<el-icon v-if="routerInfo.meta.icon">
18+
<component :is="routerInfo.meta.icon" />
19+
</el-icon>
20+
<span class="gva-menu-item-title">{{ routerInfo.meta.title }}</span>
21+
</div>
822
</template>
923
</el-menu-item>
1024
</template>
@@ -16,18 +30,91 @@ export default {
1630
</script>
1731

1832
<script setup>
19-
defineProps({
33+
import { ref, watch } from 'vue'
34+
35+
const props = defineProps({
2036
routerInfo: {
2137
default: function() {
2238
return null
2339
},
2440
type: Object
41+
},
42+
isCollapse: {
43+
default: function() {
44+
return false
45+
},
46+
type: Boolean
47+
},
48+
theme: {
49+
default: function() {
50+
return {}
51+
},
52+
type: Object
2553
}
2654
})
55+
56+
const activeBackground = ref(props.theme.activeBackground)
57+
const activeText = ref(props.theme.activeText)
58+
const normalText = ref(props.theme.normalText)
59+
const hoverBackground = ref(props.theme.hoverBackground)
60+
const hoverText = ref(props.theme.hoverText)
61+
62+
watch(() => props.theme, () => {
63+
activeBackground.value = props.theme.activeBackground
64+
activeText.value = props.theme.activeText
65+
normalText.value = props.theme.normalText
66+
hoverBackground.value = props.theme.hoverBackground
67+
hoverText.value = props.theme.hoverText
68+
})
69+
2770
</script>
2871

2972
<style lang="scss" scoped>
30-
// .gva-menu-item-title {
31-
// min-width: 160px;
32-
// }
73+
74+
.gva-menu-item{
75+
width: 100%;
76+
flex:1;
77+
height: 44px;
78+
display: flex;
79+
justify-content: flex-start;
80+
align-items: center;
81+
82+
.gva-menu-item-title {
83+
flex:1;
84+
}
85+
}
86+
87+
.el-menu--collapse{
88+
.el-menu-item.is-active{
89+
color: v-bind(activeBackground);
90+
}
91+
}
92+
93+
.el-menu-item{
94+
color: v-bind(normalText);
95+
}
96+
97+
.el-menu-item.is-active{
98+
.gva-menu-item{
99+
background: v-bind(activeBackground) !important;
100+
border-radius: 4px;
101+
box-shadow: 0 0 2px 1px v-bind(activeBackground) !important;
102+
i{
103+
color: v-bind(activeText);
104+
}
105+
span{
106+
color: v-bind(activeText);
107+
}
108+
}
109+
}
110+
111+
.el-menu-item:hover{
112+
.gva-menu-item{
113+
background: v-bind(hoverBackground);
114+
border-radius: 4px;
115+
box-shadow: 0 0 2px 1px v-bind(hoverBackground);
116+
color: v-bind(hoverText);
117+
}
118+
}
119+
33120
</style>

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

Lines changed: 39 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,8 @@
1010
:collapse="isCollapse"
1111
:collapse-transition="false"
1212
:default-active="active"
13-
:background-color="userStore.sideMode"
14-
:active-text-color="userStore.activeColor"
15-
:text-color="userStore.baseColor"
13+
:background-color="theme.background"
14+
:active-text-color="theme.active"
1615
class="el-menu-vertical"
1716
unique-opened
1817
@select="selectMenuItem"
@@ -21,7 +20,9 @@
2120
<aside-component
2221
v-if="!item.hidden"
2322
:key="item.name"
23+
:is-collapse="isCollapse"
2424
:router-info="item"
25+
:theme="theme"
2526
/>
2627
</template>
2728
</el-menu>
@@ -50,11 +51,44 @@ const router = useRouter()
5051
const userStore = useUserStore()
5152
const routerStore = useRouterStore()
5253
54+
const theme = ref({})
55+
56+
const getTheme = () => {
57+
switch (userStore.sideMode) {
58+
case '#fff':
59+
theme.value = {
60+
background: '#fff',
61+
activeBackground: '#4D70FF',
62+
activeText: '#fff',
63+
normalText: '#333',
64+
hoverBackground: 'rgba(64, 158, 255, 0.08)',
65+
hoverText: '#333',
66+
}
67+
break
68+
case '#191a23':
69+
theme.value = {
70+
background: '#191a23',
71+
activeBackground: '#4D70FF',
72+
activeText: '#fff',
73+
normalText: '#fff',
74+
hoverBackground: 'rgba(64, 158, 255, 0.08)',
75+
hoverText: '#fff',
76+
}
77+
break
78+
}
79+
}
80+
81+
getTheme()
82+
5383
const active = ref('')
54-
watch(route, () => {
84+
watch(() => route, () => {
5585
active.value = route.name
5686
})
5787
88+
watch(() => userStore.sideMode, () => {
89+
getTheme()
90+
})
91+
5892
const isCollapse = ref(false)
5993
const initPage = () => {
6094
active.value = route.name
@@ -95,21 +129,10 @@ const selectMenuItem = (index, _, ele, aaa) => {
95129
</script>
96130
97131
<style lang="scss">
98-
.el-sub-menu__title,
99-
.el-menu-item {
100-
i {
101-
color: inherit !important;
102-
}
103-
}
104132
105133
.el-sub-menu__title:hover,
106134
.el-menu-item:hover {
107-
i {
108-
color: inherit !important;
109-
}
110-
span {
111-
color: inherit !important;
112-
}
135+
background: transparent;
113136
}
114137
115138
.el-scrollbar {

0 commit comments

Comments
 (0)