github/lina
1
0
Fork 0
mirror of https://github.com/jumpserver/lina.git synced 2026-01-15 14:24:39 +00:00
Code Issues Projects Releases Wiki Activity

perf: 优化菜单

Browse Source
This commit is contained in:
ibuler
2024-04-19 19:13:34 +08:00
parent c9b1d2fb5b
commit 71ca5a87f1
5 changed files with 66 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/layout/components/NavHeader/ViewSwitcher.vue
View File

@@ -19,6 +19,7 @@
:key="view.name"
:index="view.name"
>
<span class="outline" />
<svg-icon :icon-class="view.meta.icon" class="icons" />
<span slot="title" class="icons-title">{{ view.meta.title }}</span>
</el-menu-item>
@@ -189,6 +190,23 @@ export default {
color: #606266 !important;
}
.el-menu-item {
&.is-active {
font-weight: bold;
color: var(--menu-text-active);
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 3px;
background-color: var(--menu-text-active);
}
}
}
.icons {
vertical-align: middle !important;
font-size: 16px;
@@ -200,15 +218,9 @@ export default {
.icons-title {
display: inline-block;
font-size: 14px;
}
.el-menu-item.is-active {
font-weight: bold;
color: var(--menu-text-active);
border-left: 4px solid var(--menu-text-active);
}
.menu-main.mobile-view-switch >>> .el-submenu__icon-arrow {
right: 10px;
.menu-main.mobile-view-switch >>> .el-submenu__icon-arrow {
right: 10px;
}
}
</style>

13
src/layout/components/NavLeft/SidebarItem.vue
View File

@@ -6,8 +6,16 @@
!item.alwaysShow"
>
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :class="{'submenu-title-noDropdown':!isNest}" :index="resolvePath(onlyOneChild.path)" class="submenu-item">
<item :children="item.children" :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="getItemTitle(onlyOneChild)" />
<el-menu-item
:class="{'submenu-title-noDropdown':!isNest}"
:index="resolvePath(onlyOneChild.path)"
class="submenu-item"
>
<item
:children="item.children"
:icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)"
:title="getItemTitle(onlyOneChild)"
/>
</el-menu-item>
</app-link>
</template>
@@ -17,7 +25,6 @@
ref="subMenu"
:index="resolvePath(item.path)"
class="el-submenu-sidebar submenu-item"
default-active="1"
popper-append-to-body
>
<template slot="title">

42
src/layout/components/NavLeft/index.vue
View File

@@ -11,10 +11,12 @@
trigger="hover"
>
<span slot="reference" style="width: 100%">
<span v-show="!isCollapse" style="margin-left: 5px;">
<span class="icon-zone">
<svg-icon class="icon" icon-class="switch" />
</span>
<span v-show="!isCollapse" class="view-title">
{{ isRouteMeta.title || '' }}
</span>
<svg-icon class="icon" icon-class="switch" />
</span>
<ViewSwitcher mode="vertical" @view-change="handleViewChange" />
</el-popover>
@@ -121,7 +123,7 @@ export default {
}
},
mounted() {
this.setViewIconAttention()
// this.setViewIconAttention()
this.setLeastMenuOpen()
},
methods: {
@@ -178,12 +180,20 @@ export default {
.collapsed {
text-align: left;
.nav-title {
&:hover {
background-color: var(--menu-hover);
}
.switch-view .icon {
margin-left: 0;
.switch-view {
.icon-zone {
float: none;
padding: 0;
}
.switch-view .icon {
margin-left: 0;
}
}
}
}
@@ -209,13 +219,17 @@ export default {
line-height: 10px;
border-radius: 3px;
.icon {
margin-left: 60px;
margin-right: 0 !important;
.icon-zone {
float: right;
padding: 4px;
&:hover {
color: var(--color-primary);
}
.icon {
margin-right: 0 !important;
}
}
}
}
@@ -271,6 +285,12 @@ export default {
display: none;
}
.view-title {
margin-left: 5px;
width: calc(100% - 10px);
display: inline-block
}
$mobileHeight: 40px;
.active-mobile {
@@ -299,12 +319,12 @@ export default {
.mobile-view-switch {
&>>> .el-menu-item.is-active {
color: var(--menu-text-active)!important;
.svg-icon {
color: var(--menu-text-active)!important;
.svg-icon {
color: var(--menu-text-active)!important;
}
}
}
}
}
@media screen and (max-width: 992px) {

18
src/styles/menu.scss
View File

@@ -9,17 +9,6 @@
font-weight: 600;
}
.el-submenu-sidebar.el-submenu.is-opened {
//box-shadow: 0 0 8px rgb(0 0 0 / 10%);
//* {
// background-color: #f6f6f6 !important;
//}
border-top: solid 1px #f3f3f4;
//border-bottom: solid 1px #f3f3f4;
}
.el-submenu, .el-menu-item.submenu-title-noDropdown {
background-color: $menuBg;
border-top: solid 1px $menuBg;
@@ -112,10 +101,6 @@
}
li.is-active {
//* {
// background-color: var(--menu-hover) !important;
//}
border-left: 4px solid var(--menu-text-active);
}
@@ -126,9 +111,6 @@
.el-submenu.is-opened {
background-color: $subMenuBg;
.el-submenu__title {
}
& .nest-menu {
background-color: $subMenuBg;
}

8
yarn.lock
View File

@@ -776,9 +776,9 @@
"to-fast-properties" "^2.0.0"
"@fontsource/open-sans@^5.0.24":
"integrity" "sha512-bIF+87vxfOPTyvnBKS+rCPmz/m66um3zCk1UdPv8RGBgwu6MMxwED0jpcbvyFSkfy0ApcdjfkDSAhlFTm/pgiw=="
"resolved" "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-5.0.24.tgz"
"version" "5.0.24"
"integrity" "sha512-tFTqx2TE9srmM3pMEHldw0lTglqhKwFX6PVDEL0OF9xNT0x5W9brsezFHhV/U36pQV9So7S0vo4yVpnLzBBQew=="
"resolved" "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-5.0.27.tgz"
"version" "5.0.27"
"@gar/promisify@^1.0.1":
"integrity" "sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw=="
@@ -2344,7 +2344,7 @@
"axios@0.21.1":
"integrity" "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA=="
"resolved" "https://registry.npmmirror.com/axios/-/axios-0.21.1.tgz"
"resolved" "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz"
"version" "0.21.1"
dependencies:
"follow-redirects" "^1.10.0"