improve: 优化菜单

template/admin/src/layout/component/aside.vue

@@ -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) => {

template/admin/src/layout/component/columnsAside.vue

@@ -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 {

template/admin/src/layout/logo/index.vue

@@ -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;
     },

template/admin/src/layout/navBars/breadcrumb/breadcrumb.vue

@@ -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;

template/admin/src/layout/navBars/breadcrumb/setings.vue

@@ -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 {

template/admin/src/layout/navBars/breadcrumb/theme.js

@@ -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',

template/admin/src/layout/navBars/index.vue

@@ -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>

template/admin/src/store/module/menus.js

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