优化

src/cool/modules/base/common/index.js

@@ -1,51 +1,4 @@
-import store from "@/store";
-import { iconfontUrl, app } from "@/config/env";
-import { createLink } from "../utils";
-import { colorPrimary } from "@/assets/css/common.scss";
+import { iconList } from "./theme";
+import "./resize";
 
-if (app.theme) {
-	const { url, color } = app.theme;
-
-	if (url) {
-		createLink(url, "theme-style");
-	}
-
-	document
-		.getElementsByTagName("body")[0]
-		.style.setProperty("--color-primary", color || colorPrimary);
-}
-
-if (iconfontUrl) {
-	createLink(iconfontUrl);
-}
-
-const req = require.context("@/icons/svg/", false, /\.svg$/);
-
-req.keys().map(req);
-
-export function iconList() {
-	return req
-		.keys()
-		.map(req)
-		.map(e => e.default.id)
-		.filter(e => e.includes("icon"))
-		.sort();
-}
-
-export const resize = () => {
-	if (document.body.clientWidth < 1000) {
-		store.commit("COLLAPSE_MENU", true);
-		store.commit("UPDATE_APP", {
-			conf: {
-				showAMenu: false
-			}
-		});
-	}
-
-	store.commit("SET_BROWSER");
-};
-
-window.onload = () => {
-	window.addEventListener("resize", resize);
-	resize();
-};
+export { iconList };

src/cool/modules/base/common/resize.js

@@ -0,0 +1,51 @@
+import store from "@/store";
+
+const lock = {
+	menuCollapse: null,
+	showAMenu: null
+};
+
+function resize() {
+	const { browser, menuCollapse, app } = store.getters;
+
+	if (browser.isMini) {
+		// 小屏幕下隐藏一级菜单
+		if (lock.showAMenu === null) {
+			lock.showAMenu = app.conf.showAMenu;
+			store.commit("UPDATE_APP", {
+				conf: {
+					showAMenu: false
+				}
+			});
+		}
+
+		// 小屏幕下收起左侧菜单
+		if (lock.menuCollapse === null) {
+			lock.menuCollapse = menuCollapse;
+			store.commit("COLLAPSE_MENU", true);
+		}
+	} else {
+		// 大屏幕下显示一级菜单
+		if (lock.showAMenu !== null) {
+			store.commit("UPDATE_APP", {
+				conf: {
+					showAMenu: lock.showAMenu
+				}
+			});
+			lock.showAMenu = null;
+		}
+
+		// 大屏幕下展开左侧菜单
+		if (lock.menuCollapse !== null) {
+			store.commit("COLLAPSE_MENU", lock.menuCollapse);
+			lock.menuCollapse = null;
+		}
+	}
+
+	store.commit("SET_BROWSER");
+}
+
+window.onload = function() {
+	window.addEventListener("resize", resize);
+	resize();
+};

src/cool/modules/base/common/theme.js

@@ -0,0 +1,40 @@
+import { iconfontUrl, app } from "@/config/env";
+import { createLink } from "../utils";
+import { colorPrimary } from "@/assets/css/common.scss";
+
+// 主题初始化
+
+if (app.theme) {
+	const { url, color } = app.theme;
+
+	if (url) {
+		createLink(url, "theme-style");
+	}
+
+	document
+		.getElementsByTagName("body")[0]
+		.style.setProperty("--color-primary", color || colorPrimary);
+}
+
+// 字体图标库加载
+
+if (iconfontUrl) {
+	createLink(iconfontUrl);
+}
+
+// svg 图标加载
+
+const req = require.context("@/icons/svg/", false, /\.svg$/);
+
+req.keys().map(req);
+
+function iconList() {
+	return req
+		.keys()
+		.map(req)
+		.map(e => e.default.id)
+		.filter(e => e.includes("icon"))
+		.sort();
+}
+
+export { iconList };

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

@@ -36,11 +36,28 @@ export default {
 	},
 
 	mounted() {
-		this.menuGroup.forEach((e, i) => {
-			if (this.$route.path.includes(e.path) && e.path != "/") {
+		const deep = (e, i) => {
+			switch (e.type) {
+				case 0:
+					e.children.forEach(e => {
+						deep(e, i);
+					});
+					break;
+				case 1:
+					if (this.$route.path.includes(e.path)) {
 						this.index = String(i);
 						this.SET_MENU_LIST(i);
 					}
+					break;
+
+				case 2:
+				default:
+					break;
+			}
+		};
+
+		this.menuGroup.forEach((e, i) => {
+			deep(e, i);
 		});
 	},
 

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

@@ -1,15 +1,17 @@
 <template>
 	<div class="cl-route-nav">
-		<p class="title">
+		<p class="title" v-if="browser.isMini">
 			{{ lastName }}
 		</p>
 
+		<template v-else>
 			<el-breadcrumb>
 				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
 				<el-breadcrumb-item v-for="(item, index) in list" :key="index">{{
 					(item.meta && item.meta.label) || item.name
 				}}</el-breadcrumb-item>
 			</el-breadcrumb>
+		</template>
 	</div>
 </template>
 
@@ -66,7 +68,7 @@ export default {
 	},
 
 	computed: {
-		...mapGetters(["menuGroup"]),
+		...mapGetters(["menuGroup", "browser"]),
 
 		lastName() {
 			return _.last(this.list).name;
@@ -77,6 +79,8 @@ export default {
 
 <style lang="scss" scoped>
 .cl-route-nav {
+	white-space: nowrap;
+
 	/deep/.el-breadcrumb {
 		margin: 0 10px;
 
@@ -94,15 +98,5 @@ export default {
 		font-weight: 500;
 		margin-left: 5px;
 	}
-
-	@media only screen and (max-width: 768px) {
-		.title {
-			display: block;
-		}
-
-		/deep/.el-breadcrumb {
-			display: none;
-		}
-	}
 }
 </style>

src/cool/modules/base/index.js

@@ -5,8 +5,8 @@ import views from "./views";
 import store from "./store";
 import service from "./service";
 import directives, { checkPerm } from "./directives";
-import { iconList, resize } from "./common";
+import { iconList } from "./common";
 import "./static/css/index.scss";
 
-export { iconList, checkPerm, resize };
+export { iconList, checkPerm };
 export default { components, filters, pages, views, store, service, directives };