diff --git a/src/cool/modules/base/common/index.js b/src/cool/modules/base/common/index.js index 02a0f3c..0223f1f 100644 --- a/src/cool/modules/base/common/index.js +++ b/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 }; diff --git a/src/cool/modules/base/common/resize.js b/src/cool/modules/base/common/resize.js new file mode 100644 index 0000000..3307de7 --- /dev/null +++ b/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(); +}; diff --git a/src/cool/modules/base/common/theme.js b/src/cool/modules/base/common/theme.js new file mode 100644 index 0000000..9cdf38d --- /dev/null +++ b/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 }; diff --git a/src/cool/modules/base/components/menu/topbar.vue b/src/cool/modules/base/components/menu/topbar.vue index 4d02a28..b6fb71b 100644 --- a/src/cool/modules/base/components/menu/topbar.vue +++ b/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 != "/") { - this.index = String(i); - this.SET_MENU_LIST(i); + 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); }); }, diff --git a/src/cool/modules/base/components/route-nav/index.vue b/src/cool/modules/base/components/route-nav/index.vue index fd19d8d..ad087a7 100644 --- a/src/cool/modules/base/components/route-nav/index.vue +++ b/src/cool/modules/base/components/route-nav/index.vue @@ -1,15 +1,17 @@ @@ -66,7 +68,7 @@ export default { }, computed: { - ...mapGetters(["menuGroup"]), + ...mapGetters(["menuGroup", "browser"]), lastName() { return _.last(this.list).name; @@ -77,6 +79,8 @@ export default { diff --git a/src/cool/modules/base/index.js b/src/cool/modules/base/index.js index d9ee612..0ab89dc 100644 --- a/src/cool/modules/base/index.js +++ b/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 };