github/CRMEB
1
0
Fork 0
mirror of https://github.com/crmeb/CRMEB.git synced 2026-10-31 06:50:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve: 优化菜单

Browse Source
This commit is contained in:
From-wh 2023-03-31 11:59:15 +08:00
parent ae5c23279d
commit 7822b48fcb
8 changed files with 59 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
template/admin/src/layout/component/aside.vue
View File

@ -1,7 +1,11 @@
<template>
<el-aside class="layout-aside" :class="setCollapseWidth" v-if="clientWidth > 1000">
<!-- <Logo v-if="setShowLogo && menuList.length" /> -->
<el-divider v-if="menuList.length && !getThemeConfig.isCollapse" content-position="center">{{ catName }}</el-divider>
<Logo v-if="setShowLogo && menuList.length && $store.state.themeConfig.themeConfig.layout !== 'columns'" />
<el-divider
v-if="menuList.length && !getThemeConfig.isCollapse && $store.state.themeConfig.themeConfig.layout == 'columns'"
content-position="center"
>{{ catName }}</el-divider
>
<el-scrollbar class="flex-auto" ref="layoutAsideRef">
<Vertical :menuList="menuList" :class="setCollapseWidth" />
</el-scrollbar>
@ -31,6 +35,13 @@ export default {
},
computed: {
// 设置左侧菜单的具体宽度
// menuList() {
// this.$store.state.menus.childMenuList.length > 0
// ? (this.$store.state.themeConfig.themeConfig.isCollapse = false)
// : (this.$store.state.themeConfig.themeConfig.isCollapse = true);
// console.log(this.$store.state.menus.childMenuList, 'this.$store.state.menus.childMenuList');
// return this.$store.state.menus.childMenuList;
// },
setCollapseWidth() {
let { layout, isCollapse } = this.$store.state.themeConfig.themeConfig;
let asideBrColor = '';
@ -63,6 +74,7 @@ export default {
},
},
created() {
console.log(this.$store.state.menus, 'this.$store.state.menus');
this.initMenuFixed(document.body.clientWidth);
this.setFilterRoutes();
this.bus.$on('setSendColumnsChildren', (res) => {

5
template/admin/src/layout/component/columnsAside.vue
View File

@ -108,6 +108,8 @@ export default {
const resData = this.setSendChildren(getHeaderName(this.$route, this.columnsAsideList));
if (!resData.children) {
this.bus.$emit('setSendColumnsChildren', []);
this.$store.commit('menus/childMenuList', []);
this.$store.state.themeConfig.themeConfig.isCollapse = true;
return false;
}
@ -118,6 +120,7 @@ export default {
? (this.$store.state.themeConfig.themeConfig.isCollapse = false)
: (this.$store.state.themeConfig.themeConfig.isCollapse = true);
this.bus.$emit('setSendColumnsChildren', resData?.children || []);
this.$store.commit('menus/childMenuList', resData?.children || []);
},
// 传送当前子级数据到菜单中
setSendChildren(path) {
@ -187,6 +190,7 @@ export default {
this.onColumnsAsideDown(resData.item[0].k);
this.bus.$emit('oneCatName', resData.item[0].title);
this.bus.$emit('setSendColumnsChildren', asideList || []);
this.$store.commit('menus/childMenuList', asideList || []);
},
deep: true,
},
@ -199,6 +203,7 @@ export default {
width: 70px;
height: 100%;
background: var(--prev-bg-columnsMenuBar);
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
ul {
position: relative;
li {

6
template/admin/src/layout/logo/index.vue
View File

@ -39,6 +39,12 @@ export default {
methods: {
// logo 点击实现菜单展开/收起
onThemeConfigChange() {
if (
this.$store.state.themeConfig.themeConfig.layout == 'columns' &&
!this.$store.state.menus.childMenuList.length &&
this.$store.state.themeConfig.themeConfig.isCollapse
)
return;
if (this.$store.state.themeConfig.themeConfig.layout === 'transverse') return false;
this.$store.state.themeConfig.themeConfig.isCollapse = !this.$store.state.themeConfig.themeConfig.isCollapse;
},

9
template/admin/src/layout/navBars/breadcrumb/breadcrumb.vue
View File

@ -101,6 +101,13 @@ export default {
},
// breadcrumb icon 点击菜单展开与收起
onThemeConfigChange() {
if (
this.$store.state.themeConfig.themeConfig.layout == 'columns' &&
!this.$store.state.menus.childMenuList.length &&
this.$store.state.themeConfig.themeConfig.isCollapse
) {
return;
}
this.$store.state.themeConfig.themeConfig.isCollapse = !this.$store.state.themeConfig.themeConfig.isCollapse;
this.setLocalThemeConfig();
},
@ -175,7 +182,7 @@ export default {
<style scoped lang="scss">
.layout-navbars-breadcrumb {
flex: 1;
// flex: 1;
height: inherit;
display: flex;
align-items: center;

2
template/admin/src/layout/navBars/breadcrumb/setings.vue
View File

@ -584,7 +584,7 @@ export default {
border-radius: 2px;
}
.el-aside {
background-color: var(--prev-color-primary);
background-color: var(--prev-tag-active-color);
border-radius: 2px;
}
.el-header {

3
template/admin/src/layout/navBars/breadcrumb/theme.js
View File

@ -82,6 +82,7 @@ export const themeList = {
'--prev-bg-columnsMenuBarColor': '#515a6e',
'--prev-bg-columnsMenuActiveColor': '#fff',
'--prev-color-primary-light-9': '#f0eefe',
'--prev-tag-active-color': '#6954f0',
},
'theme-7': {
'--prev-bg-menuBar': '#282c34',
@ -94,6 +95,7 @@ export const themeList = {
'--prev-bg-columnsMenuBar': '#282c34',
'--prev-bg-columnsMenuBarColor': '#fff',
'--prev-bg-columnsMenuActiveColor': '#fff',
'--prev-tag-active-color': '#f34d37',
},
'theme-8': {
'--prev-bg-menuBar': '#ffffff',
@ -107,6 +109,7 @@ export const themeList = {
'--prev-bg-columnsMenuBarColor': '#515a6e',
'--prev-bg-columnsMenuActiveColor': '#fff',
'--prev-color-primary-light-9': '#feedeb',
'--prev-tag-active-color': '#f34d37',
},
'theme-9': {
'--prev-bg-menuBar': '#ffffff',

41
template/admin/src/layout/navBars/index.vue
View File

@ -1,34 +1,35 @@
<template>
<div class="layout-navbars-container">
<BreadcrumbIndex />
<TagsView v-if="setShowTagsView" />
</div>
<div class="layout-navbars-container">
<BreadcrumbIndex />
<TagsView v-if="setShowTagsView" />
</div>
</template>
<script>
import BreadcrumbIndex from '@/layout/navBars/breadcrumb/index.vue';
import TagsView from '@/layout/navBars/tagsView/tagsView.vue';
export default {
name: 'layoutNavBars',
components: { BreadcrumbIndex, TagsView },
data() {
return {};
},
computed: {
// 设置是否显示 tagsView
setShowTagsView() {
let { layout, isTagsview } = this.$store.state.themeConfig.themeConfig;
return layout !== 'classic' && isTagsview;
},
},
name: 'layoutNavBars',
components: { BreadcrumbIndex, TagsView },
data() {
return {};
},
computed: {
// 设置是否显示 tagsView
setShowTagsView() {
let { layout, isTagsview } = this.$store.state.themeConfig.themeConfig;
return layout !== 'classic' && isTagsview;
},
},
};
</script>
<style scoped lang="scss">
.layout-navbars-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
</style>

1
template/admin/src/store/module/menus.js
View File

@ -38,6 +38,7 @@ export default {
state.openMenus = openList;
},
childMenuList(state, list) {
console.log('bbbbb')
state.childMenuList = list;
},
},