Skip to content

Commit 0d25d29

Browse files
icssoaicssoa
committed
优化
1 parent f4ea403 commit 0d25d29

File tree

6 files changed

+129
-74
lines changed

6 files changed

+129
-74
lines changed

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

+3-50
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,4 @@
1-
import store from "@/store";
2-
import { iconfontUrl, app } from "@/config/env";
3-
import { createLink } from "../utils";
4-
import { colorPrimary } from "@/assets/css/common.scss";
1+
import { iconList } from "./theme";
2+
import "./resize";
53

6-
if (app.theme) {
7-
const { url, color } = app.theme;
8-
9-
if (url) {
10-
createLink(url, "theme-style");
11-
}
12-
13-
document
14-
.getElementsByTagName("body")[0]
15-
.style.setProperty("--color-primary", color || colorPrimary);
16-
}
17-
18-
if (iconfontUrl) {
19-
createLink(iconfontUrl);
20-
}
21-
22-
const req = require.context("@/icons/svg/", false, /\.svg$/);
23-
24-
req.keys().map(req);
25-
26-
export function iconList() {
27-
return req
28-
.keys()
29-
.map(req)
30-
.map(e => e.default.id)
31-
.filter(e => e.includes("icon"))
32-
.sort();
33-
}
34-
35-
export const resize = () => {
36-
if (document.body.clientWidth < 1000) {
37-
store.commit("COLLAPSE_MENU", true);
38-
store.commit("UPDATE_APP", {
39-
conf: {
40-
showAMenu: false
41-
}
42-
});
43-
}
44-
45-
store.commit("SET_BROWSER");
46-
};
47-
48-
window.onload = () => {
49-
window.addEventListener("resize", resize);
50-
resize();
51-
};
4+
export { iconList };

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

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import store from "@/store";
2+
3+
const lock = {
4+
menuCollapse: null,
5+
showAMenu: null
6+
};
7+
8+
function resize() {
9+
const { browser, menuCollapse, app } = store.getters;
10+
11+
if (browser.isMini) {
12+
// 小屏幕下隐藏一级菜单
13+
if (lock.showAMenu === null) {
14+
lock.showAMenu = app.conf.showAMenu;
15+
store.commit("UPDATE_APP", {
16+
conf: {
17+
showAMenu: false
18+
}
19+
});
20+
}
21+
22+
// 小屏幕下收起左侧菜单
23+
if (lock.menuCollapse === null) {
24+
lock.menuCollapse = menuCollapse;
25+
store.commit("COLLAPSE_MENU", true);
26+
}
27+
} else {
28+
// 大屏幕下显示一级菜单
29+
if (lock.showAMenu !== null) {
30+
store.commit("UPDATE_APP", {
31+
conf: {
32+
showAMenu: lock.showAMenu
33+
}
34+
});
35+
lock.showAMenu = null;
36+
}
37+
38+
// 大屏幕下展开左侧菜单
39+
if (lock.menuCollapse !== null) {
40+
store.commit("COLLAPSE_MENU", lock.menuCollapse);
41+
lock.menuCollapse = null;
42+
}
43+
}
44+
45+
store.commit("SET_BROWSER");
46+
}
47+
48+
window.onload = function() {
49+
window.addEventListener("resize", resize);
50+
resize();
51+
};

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

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { iconfontUrl, app } from "@/config/env";
2+
import { createLink } from "../utils";
3+
import { colorPrimary } from "@/assets/css/common.scss";
4+
5+
// 主题初始化
6+
7+
if (app.theme) {
8+
const { url, color } = app.theme;
9+
10+
if (url) {
11+
createLink(url, "theme-style");
12+
}
13+
14+
document
15+
.getElementsByTagName("body")[0]
16+
.style.setProperty("--color-primary", color || colorPrimary);
17+
}
18+
19+
// 字体图标库加载
20+
21+
if (iconfontUrl) {
22+
createLink(iconfontUrl);
23+
}
24+
25+
// svg 图标加载
26+
27+
const req = require.context("@/icons/svg/", false, /\.svg$/);
28+
29+
req.keys().map(req);
30+
31+
function iconList() {
32+
return req
33+
.keys()
34+
.map(req)
35+
.map(e => e.default.id)
36+
.filter(e => e.includes("icon"))
37+
.sort();
38+
}
39+
40+
export { iconList };

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

+21-4
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,28 @@ export default {
3636
},
3737
3838
mounted() {
39-
this.menuGroup.forEach((e, i) => {
40-
if (this.$route.path.includes(e.path) && e.path != "/") {
41-
this.index = String(i);
42-
this.SET_MENU_LIST(i);
39+
const deep = (e, i) => {
40+
switch (e.type) {
41+
case 0:
42+
e.children.forEach(e => {
43+
deep(e, i);
44+
});
45+
break;
46+
case 1:
47+
if (this.$route.path.includes(e.path)) {
48+
this.index = String(i);
49+
this.SET_MENU_LIST(i);
50+
}
51+
break;
52+
53+
case 2:
54+
default:
55+
break;
4356
}
57+
};
58+
59+
this.menuGroup.forEach((e, i) => {
60+
deep(e, i);
4461
});
4562
},
4663

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

+12-18
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<template>
22
<div class="cl-route-nav">
3-
<p class="title">
3+
<p class="title" v-if="browser.isMini">
44
{{ lastName }}
55
</p>
66

7-
<el-breadcrumb>
8-
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
9-
<el-breadcrumb-item v-for="(item, index) in list" :key="index">{{
10-
(item.meta && item.meta.label) || item.name
11-
}}</el-breadcrumb-item>
12-
</el-breadcrumb>
7+
<template v-else>
8+
<el-breadcrumb>
9+
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
10+
<el-breadcrumb-item v-for="(item, index) in list" :key="index">{{
11+
(item.meta && item.meta.label) || item.name
12+
}}</el-breadcrumb-item>
13+
</el-breadcrumb>
14+
</template>
1315
</div>
1416
</template>
1517

@@ -66,7 +68,7 @@ export default {
6668
},
6769
6870
computed: {
69-
...mapGetters(["menuGroup"]),
71+
...mapGetters(["menuGroup", "browser"]),
7072
7173
lastName() {
7274
return _.last(this.list).name;
@@ -77,6 +79,8 @@ export default {
7779

7880
<style lang="scss" scoped>
7981
.cl-route-nav {
82+
white-space: nowrap;
83+
8084
/deep/.el-breadcrumb {
8185
margin: 0 10px;
8286
@@ -94,15 +98,5 @@ export default {
9498
font-weight: 500;
9599
margin-left: 5px;
96100
}
97-
98-
@media only screen and (max-width: 768px) {
99-
.title {
100-
display: block;
101-
}
102-
103-
/deep/.el-breadcrumb {
104-
display: none;
105-
}
106-
}
107101
}
108102
</style>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import views from "./views";
55
import store from "./store";
66
import service from "./service";
77
import directives, { checkPerm } from "./directives";
8-
import { iconList, resize } from "./common";
8+
import { iconList } from "./common";
99
import "./static/css/index.scss";
1010

11-
export { iconList, checkPerm, resize };
11+
export { iconList, checkPerm };
1212
export default { components, filters, pages, views, store, service, directives };

0 commit comments

Comments
 (0)