💄 调整部分layout

- 默认布局菜单增加logo
- 菜单缩进操作按钮位置更改为菜单底部
- 通栏、经典、功能坞头部不再跟随主题颜色
- 面包屑导航增加显示路由图标

src/layout/components/topbar.vue

@@ -1,13 +1,10 @@
 <template>
 	<div class="adminui-topbar">
 		<div class="left-panel">
-			<div class="menu-collapse hidden-sm-and-down" @click="$store.commit('TOGGLE_menuIsCollapse')">
-				<el-icon><el-icon-fold /></el-icon>
-			</div>
 			<el-breadcrumb separator-icon="el-icon-arrow-right" class="hidden-sm-and-down">
 				<transition-group name="breadcrumb" mode="out-in">
 					<template v-for="item in breadList" :key="item.title" >
-						<el-breadcrumb-item v-if="item.path!='/' &&  !item.meta.hiddenBreadcrumb" :key="item.meta.title">{{item.meta.title}}</el-breadcrumb-item>
+						<el-breadcrumb-item v-if="item.path!='/' &&  !item.meta.hiddenBreadcrumb" :key="item.meta.title"><el-icon class="icon" v-if="item.meta.icon"><component :is="item.meta.icon" /></el-icon>{{item.meta.title}}</el-breadcrumb-item>
 					</template>
 				</transition-group>
 			</el-breadcrumb>
@@ -44,6 +41,8 @@
 </script>
 
 <style scoped>
+	.el-breadcrumb {margin-left: 15px;}
+	.el-breadcrumb .el-breadcrumb__inner .icon {font-size: 14px;margin-right: 5px;float: left;}
 	.breadcrumb-enter-active,.breadcrumb-leave-active {transition: all 0.3s;}
 	.breadcrumb-enter-from,.breadcrumb-leave-active {opacity: 0;transform: translateX(20px);}
 	.breadcrumb-leave-active {position: absolute;}

src/layout/index.vue

@@ -30,6 +30,9 @@
 						</el-menu>
 					</el-scrollbar>
 				</div>
+				<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
+					<el-icon><el-icon-expand v-if="menuIsCollapse"/><el-icon-fold v-else /></el-icon>
+				</div>
 			</div>
 			<Side-m v-if="ismobile"></Side-m>
 			<div class="aminui-body el-container">
@@ -69,6 +72,9 @@
 						</el-menu>
 					</el-scrollbar>
 				</div>
+				<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
+					<el-icon><el-icon-expand v-if="menuIsCollapse"/><el-icon-fold v-else /></el-icon>
+				</div>
 			</div>
 			<Side-m v-if="ismobile"></Side-m>
 			<div class="aminui-body el-container">
@@ -123,6 +129,11 @@
 	<template v-else>
 		<section class="aminui-wrapper">
 			<div v-if="!ismobile" class="aminui-side-split">
+				<div class="aminui-side-split-top">
+					<router-link :to="$CONFIG.DASHBOARD_URL">
+						<img class="logo" :title="$CONFIG.APP_NAME" src="img/logo-r.png">
+					</router-link>
+				</div>
 				<div class="adminui-side-split-scroll">
 					<el-scrollbar>
 						<ul>
@@ -146,6 +157,9 @@
 						</el-menu>
 					</el-scrollbar>
 				</div>
+				<div class="adminui-side-bottom" @click="$store.commit('TOGGLE_menuIsCollapse')">
+					<el-icon><el-icon-expand v-if="menuIsCollapse"/><el-icon-fold v-else /></el-icon>
+				</div>
 			</div>
 			<Side-m v-if="ismobile"></Side-m>
 			<div class="aminui-body el-container">

src/style/app.scss

@@ -47,8 +47,11 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 .adminui-header-menu .el-menu .el-menu-item.is-active {color: #fff!important;background: var(--el-color-primary-light-2);border-bottom-color:transparent;}
 
 /* 左侧菜单 */
-.aminui-side-split {width:65px;flex-shrink:0;background: #222b45;}
+.aminui-side-split {width:65px;flex-shrink:0;background: #222b45;display: flex;flex-flow: column;}
-.adminui-side-split-scroll {overflow: auto;overflow-x:hidden;height: 100%;}
+.aminui-side-split-top {height: 49px;}
+.aminui-side-split-top a {display: inline-block;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
+.aminui-side-split-top .logo {height:30px;vertical-align: bottom;}
+.adminui-side-split-scroll {overflow: auto;overflow-x:hidden;height: 100%;flex: 1;}
 .aminui-side-split li {cursor: pointer;width: 65px;height: 65px;color: #fff;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;}
 .aminui-side-split li i {font-size: 18px;}
 .aminui-side-split li p {margin-top:5px;}
@@ -64,6 +67,9 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 .adminui-side-top {border-bottom: 1px solid #ebeef5;height:50px;line-height: 50px;}
 .adminui-side-top h2 {padding:0 20px;font-size: 17px;color: #3c4a54;}
 .adminui-side-scroll {overflow: auto;overflow-x:hidden;flex: 1;}
+.adminui-side-bottom {border-top: 1px solid #ebeef5;height:35px;cursor: pointer;display: flex;align-items: center;justify-content: center;}
+.adminui-side-bottom i {font-size: 16px;}
+.adminui-side-bottom:hover {color: var(--el-color-primary);}
 .aminui-side.isCollapse {width: 64px;}
 
 /* 右侧内容 */
@@ -76,10 +82,6 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 .right-panel-search {display: flex;align-items: center;}
 .right-panel-search > * + * {margin-left:10px;}
 
-.adminui-topbar .menu-collapse {height: 50px;width: 60px;padding: 0 20px;display: flex;align-items: center;cursor: pointer;}
-.adminui-topbar .menu-collapse i {font-size: 16px;}
-.adminui-topbar .menu-collapse:hover {background-image: linear-gradient(90deg, #d9ecff, transparent);}
-
 .adminui-tags {height:35px;background: #fff;border-bottom: 1px solid #e6e6e6;}
 .adminui-tags ul {display: flex;overflow: hidden;}
 .adminui-tags li {cursor: pointer;display: inline-block;float: left;height:34px;line-height: 34px;position: relative;flex-shrink: 0;}
@@ -101,4 +103,4 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
 }
 .main-maximize-exit {display: none;position: fixed;z-index: 3000;top:-20px;left:50%;margin-left: -20px;border-radius: 50%;width: 40px;height: 40px;cursor: pointer;background: rgba(0,0,0,0.2);text-align: center;}
 .main-maximize-exit i {font-size: 14px;margin-top: 22px;color: #fff;}
-.main-maximize-exit:hover {background: rgba(0,0,0,0.4);}
+.main-maximize-exit:hover {background: rgba(0,0,0,0.4);}

src/style/fix.scss

@@ -48,7 +48,7 @@
 .el-button--text:focus, .el-button--text:hover {color: var(--el-color-primary-light-2);border-color: transparent;background-color: transparent;}
 .aminui-side .el-menu-item.is-active {background: var(--el-color-primary-light-9);color: var(--el-color-primary)!important;}
 
-.adminui-header {background-color: var(--el-color-primary);}
+
 .aminui-side-split li.active {background-color: var(--el-color-primary);}
 .adminui-tags li:hover {background-color: var(--el-color-primary-light-9);}
 .adminui-tags li.active {background-color: var(--el-color-primary)!important;}

src/style/theme/dark.scss

@@ -116,6 +116,7 @@
 	.aminui-side {background: $--card-background;border-color: $--border-color;}
 	.adminui-side-top {border-color: $--border-color;}
 	.adminui-side-top h2 {color: $--text-color;}
+	.adminui-side-bottom {border-color: $--border-color;}
 	.adminui-main {background: $--background;}
 	.adminui-topbar {background: $--card-background;border-color: $--border-color;color: $--text-color;}
 	.adminui-topbar .menu-collapse:hover {background-image: linear-gradient(90deg, $--background, transparent);}