优化菜单收起展开状态

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cool-admin-vue",
-	"version": "3.1.5",
+	"version": "3.1.6",
 	"scripts": {
 		"serve": "vue-cli-service serve",
 		"build": "vue-cli-service build",

src/cool/modules/base/components/menu/topbar.vue

@@ -7,7 +7,7 @@
 			@select="onSelect"
 		>
 			<el-menu-item v-for="(item, index) in list" :index="`${index}`" :key="index">
-				<icon-svg v-if="item.icon" :name="item.icon"></icon-svg>
+				<icon-svg v-if="item.icon" :name="item.icon" :size="18"></icon-svg>
 				<span>{{ item.name }}</span>
 			</el-menu-item>
 		</el-menu>
@@ -76,6 +76,8 @@ export default {
 
 <style lang="scss" scoped>
 .cl-menu-topbar {
+	margin-right: 10px;
+
 	/deep/.el-menu {
 		height: 50px;
 		background: transparent;
@@ -83,12 +85,12 @@ export default {
 		overflow: hidden;
 
 		.el-menu-item {
-			height: 50px;
 			display: flex;
 			align-items: center;
-			background: transparent;
+			height: 50px;
 			border-bottom: 0;
-			padding: 0 30px;
+			padding: 0 20px;
+			background: transparent;
 
 			span {
 				font-size: 12px;
@@ -97,13 +99,10 @@ export default {
 			}
 
 			&.is-active {
-				background: rgba(255, 255, 255, 0.13);
 				color: $color-primary;
 			}
 
 			/deep/.icon-svg {
-				height: 18px;
-				width: 18px;
 				margin-right: 5px;
 			}
 		}

src/cool/modules/base/components/route-nav/index.vue

@@ -82,10 +82,8 @@ export default {
 	white-space: nowrap;
 
 	/deep/.el-breadcrumb {
-		margin: 0 10px;
-
 		&__inner {
-			font-size: 12px;
+			font-size: 13px;
 			padding: 0 10px;
 			font-weight: normal;
 			letter-spacing: 1px;
@@ -93,8 +91,7 @@ export default {
 	}
 
 	.title {
-		display: none;
+		font-size: 14px;
-		font-size: 15px;
 		font-weight: 500;
 		margin-left: 5px;
 	}

src/cool/modules/demo/views/demo.vue

@@ -1,26 +1,18 @@
 <template>
 	<el-scrollbar>
 		<div class="demo">
-			<div class="list">
+			<el-row :gutter="10">
-				<div
+				<el-col
-					class="item"
+					v-for="(item, index) in list"
-					:style="{
-						width: `calc(${100 / cols}% - 10px)`
-					}"
-					:ref="`col-${index + 1}`"
-					v-for="(item, index) in layout"
 					:key="index"
+					:xs="24"
+					:sm="12"
+					:md="8"
+					:lg="6"
 				>
-					<transition-group name="fade">
+					<component :is="item"></component>
-						<component
+				</el-col>
-							:ref="item2"
+			</el-row>
-							:is="item2"
-							:key="item2 + index2"
-							v-for="(item2, index2) in item"
-						></component>
-					</transition-group>
-				</div>
-			</div>
 		</div>
 	</el-scrollbar>
 </template>
@@ -58,93 +50,16 @@ export default {
 				"b-cl-context-menu",
 				"b-error-page",
 				"b-cl-editor-quill"
-			],
+			]
-			cols: 4,
-			layout: [[], [], [], []]
 		};
-	},
-
-	mounted() {
-		const width = document.body.clientWidth;
-
-		if (width < 768) {
-			this.cols = 1;
-		} else if (width < 1000) {
-			this.cols = 2;
-		} else if (width < 1500) {
-			this.cols = 3;
-		} else {
-			this.cols = 4;
-		}
-
-		this.append();
-	},
-
-	methods: {
-		getHeight(name) {
-			return this.$refs[name][0].offsetHeight;
-		},
-
-		selectCol() {
-			let arr = new Array(this.cols).fill(1);
-
-			for (let i = 0; i < this.cols; i++) {
-				arr[i] = this.getHeight(`col-${i + 1}`);
-			}
-
-			let min = Math.min.apply(this, arr);
-
-			return arr.indexOf(min);
-		},
-
-		append(index = 0) {
-			const i = this.selectCol();
-			const item = this.list[index];
-
-			if (!item) {
-				return false;
-			}
-
-			this.layout[i].push(item);
-
-			this.$nextTick(() => {
-				setTimeout(() => {
-					this.append(index + 1);
-				}, 100);
-			});
-		}
 	}
 };
 </script>
 
 <style lang="scss">
-.fade-enter-active,
-.fade-leave-active {
-	transition: all 0.5s ease;
-}
-
-.fade-enter,
-.fade-leave-active {
-	opacity: 0;
-}
-
 .demo {
 	overflow: hidden;
 
-	.list {
-		margin: 0 -5px;
-	}
-
-	.item {
-		width: calc(25% - 10px);
-		margin: 0 5px;
-		float: left;
-
-		&:last-child {
-			margin-right: 0;
-		}
-	}
-
 	.scope {
 		background-color: #fff;
 		border-radius: 3px;
@@ -170,6 +85,8 @@ export default {
 
 		.c {
 			padding: 10px;
+			height: 50px;
+			box-sizing: border-box;
 
 			&._svg {
 				.icon-svg {

src/pages/layout/index.vue

@@ -1,20 +1,25 @@
 <template>
 	<div class="page-layout" :class="{ collapse: menuCollapse }">
+		<!-- 遮罩层 -->
 		<div class="page-layout__mask" @click="COLLAPSE_MENU(true)"></div>
 
 		<div class="page-layout__left">
+			<!-- 侧栏 -->
 			<slider></slider>
 		</div>
 
 		<div class="page-layout__right">
+			<!-- 顶栏 -->
 			<div class="page-layout__topbar">
 				<topbar></topbar>
 			</div>
 
+			<!-- 页面进程 -->
 			<div class="page-layout__process" v-if="app.conf.showProcess">
 				<cl-process />
 			</div>
 
+			<!-- 页面视图 -->
 			<div class="page-layout__container">
 				<div class="page-layout__view">
 					<keep-alive>

src/pages/layout/topbar.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="app-topbar">
 		<div class="app-topbar__collapse" @click="collapse">
-			<icon-svg name="icon-menu"></icon-svg>
+			<i :class="[menuCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']"></i>
 		</div>
 
 		<!-- 一级菜单 -->
@@ -97,9 +97,9 @@ export default {
 		cursor: pointer;
 		margin-right: 10px;
 
-		.icon-svg {
+		i {
-			height: 22px;
+			font-size: 22px;
-			width: 22px;
+			color: #666;
 		}
 	}