github/lina
1
0
Fork 0
mirror of https://github.com/jumpserver/lina.git synced 2026-01-29 21:28:52 +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) {