Skip to content

D
dsk-operate-sys-cscec
Commit 7ff0e5de authored by tianhongyang's avatar tianhongyang
Browse files
Options

🎈 perf(菜单样式统一UI):

parent 0d952d0e
Hide whitespace changes
Inline Side-by-side
Showing with 119 additions and 97 deletions
dsk-operate-ui/src/assets/styles/sidebar.scss
View file @ 7ff0e5de
......@@ -99,8 +99,10 @@
margin-right: 8px;
}
.el-submenu__icon-arrow {
top: 54%;
right: 5px;
top: 50%;
transform: translateY(-50%);
margin-top: 0px;
right: 8px;
color: #d8d8d8;
}
......@@ -121,7 +123,7 @@
min-width: 128px;
font-size: 12px;
color: #fff !important;
padding-left: 24px !important;
padding-left: 24px;
}
.el-menu--inline .nest-menu .el-menu-item .svg-icon {
display: none;
......@@ -328,6 +330,42 @@
transition: none;
}
}
// 重置导航栏菜单样式
.el-menu {
.secondary-menu {
.secondary-menu-item {
&.el-submenu {
& > {
.el-menu--inline {
padding: 0px;
.secondary-menu-item-sub {
.el-menu-item {
font-size: 14px;
padding-left: 32px !important;
}
& > .secondary-menu-item {
.el-submenu__title {
padding-left: 32px !important;
}
& > .el-menu--inline {
.secondary-menu-item-sub {
.el-menu-item {
font-size: 12px;
padding-left: 40px !important;
}
}
}
}
}
}
}
}
}
}
}
}
// when menu collapsed
......
dsk-operate-ui/src/layout/components/Sidebar/SidebarItem.vue
View file @ 7ff0e5de
......@@ -9,12 +9,12 @@
</el-menu-item>
</app-link>
</template>
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body class="secondary-menu-item">
<template slot="title">
<item v-if="item.meta" :icon="sideIcon(item)" :title="item.meta.title" />
</template>
<sidebar-item v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path,child.query)"
:active-menu="activeMenu" class="nest-menu" />
:active-menu="activeMenu" class="nest-menu secondary-menu-item-sub" />
</el-submenu>
</template>
<!-- 收起 -->
......
dsk-operate-ui/src/layout/components/Sidebar/index.vue
View file @ 7ff0e5de
<template>
<div :class="{'has-logo':showLogo}" @mouseenter="sideEnter" @mouseleave="sideLeave" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu
:default-active="activeMenu"
:collapse="isCollapse"
:background-color="variables.menuBg"
:text-color="variables.menuText"
:unique-opened="true"
:active-text-color="settings.theme"
:collapse-transition="false"
mode="vertical"
>
<sidebar-item
v-for="(route, index) in hidechildren"
:key="route.path + index"
:is-collapse="isCollapse"
:active-menu="activeMenu"
:item="route"
:base-path="route.path"
:class="route.fixed&&route.fixed.isFixed?'sideFoot':''"
:style="route.fixed&&route.fixed.isFixed?{'bottom': route.fixed.number*50+'px'}: bottomMenu&&index==routes.length-bottomMenu-2?{'padding-bottom': bottomMenu*50+'px'}:''"
/>
</el-menu>
</el-scrollbar>
<div v-show="isExpand" class="side-expand" @click="toggleSideBar">
<img :src="isCollapse?require('@/assets/images/sidebar_right.png'):require('@/assets/images/sidebar_left.png')">
</div>
<div :class="{'has-logo':showLogo}" @mouseenter="sideEnter" @mouseleave="sideLeave"
:style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg" :text-color="variables.menuText"
:unique-opened="true" :active-text-color="settings.theme" :collapse-transition="false" mode="vertical">
<sidebar-item v-for="(route, index) in hidechildren" :key="route.path + index" :is-collapse="isCollapse" :active-menu="activeMenu"
:item="route" :base-path="route.path" :class="route.fixed&&route.fixed.isFixed?'sideFoot':''"
:style="route.fixed&&route.fixed.isFixed?{'bottom': route.fixed.number*50+'px'}: bottomMenu&&index==routes.length-bottomMenu-2?{'padding-bottom': bottomMenu*50+'px'}:''" class="secondary-menu"/>
</el-menu>
</el-scrollbar>
<div v-show="isExpand" class="side-expand" @click="toggleSideBar">
<img :src="isCollapse?require('@/assets/images/sidebar_right.png'):require('@/assets/images/sidebar_left.png')">
</div>
</div>
</template>
<script>
......@@ -40,69 +24,69 @@ import variables from "@/assets/styles/variables.scss";
export default {
components: { SidebarItem, Logo },
data() {
return {
isExpand: false
}
},
computed: {
...mapState(["settings"]),
...mapGetters(["sidebarRouters", "sidebar"]),
hidechildren(){
return this.sidebarRouters.map(item=>{
if(item.children?.length){
item.children = item.children.filter(i=>{
if (typeof (i.hidden) == 'boolean' && i.hidden == false || i.path == "index"){
return i
}
})
}
return item
})
},
activeMenu() {
const route = this.$route;
const { meta, path } = route;
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu;
components: { SidebarItem, Logo },
data() {
return {
isExpand: false
};
},
computed: {
...mapState(["settings"]),
...mapGetters(["sidebarRouters", "sidebar"]),
hidechildren() {
return this.sidebarRouters.map(item => {
if (item.children?.length) {
item.children = item.children.filter(i => {
if (typeof (i.hidden) == 'boolean' && i.hidden == false || i.path == "index") {
return i;
}
return path;
},
device() {
return this.$store.state.app.device
},
bottomMenu() {
const routeArr = this.$router.options.routes
const navFixed = routeArr.filter(item => item.fixed && item.fixed.isFixed)
return navFixed.length
},
showLogo() {
return this.$store.state.settings.sidebarLogo;
},
variables() {
return variables;
},
isCollapse() {
return !this.sidebar.opened;
},
});
}
return item;
});
},
activeMenu() {
const route = this.$route;
const { meta, path } = route;
// if set path, the sidebar will highlight the path you set
if (meta.activeMenu) {
return meta.activeMenu;
}
return path;
},
device() {
return this.$store.state.app.device;
},
bottomMenu() {
const routeArr = this.$router.options.routes;
const navFixed = routeArr.filter(item => item.fixed && item.fixed.isFixed);
return navFixed.length;
},
showLogo() {
return this.$store.state.settings.sidebarLogo;
},
variables() {
return variables;
},
isCollapse() {
return !this.sidebar.opened;
},
},
methods: {
toggleSideBar() {
this.$emit('handleBar', this.isCollapse ? '-96' : '96'); // 96为展开宽度和收起宽度之差
this.$store.dispatch('app/toggleSideBar');
},
sideEnter() {
if (this.device !== 'mobile') {
this.isExpand = true;
}
},
sideLeave() {
if (this.device !== 'mobile') {
this.isExpand = false;
}
},
methods: {
toggleSideBar(){
this.$emit('handleBar', this.isCollapse ? '-96' : '96'); // 96为展开宽度和收起宽度之差
this.$store.dispatch('app/toggleSideBar');
},
sideEnter(){
if (this.device !== 'mobile') {
this.isExpand = true;
}
},
sideLeave(){
if (this.device !== 'mobile') {
this.isExpand = false;
}
},
},
},
};
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment