From 7822b48fcb7fdd961601f3e566fa95b43157ab61 Mon Sep 17 00:00:00 2001
From: From-wh <from-wh@hotmail.com>
Date: Fri, 31 Mar 2023 11:59:15 +0800
Subject: [PATCH] =?UTF-8?q?improve:=20=E4=BC=98=E5=8C=96=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 template/admin/src/layout/component/aside.vue | 16 +++++++-
 .../src/layout/component/columnsAside.vue     |  5 +++
 template/admin/src/layout/logo/index.vue      |  6 +++
 .../layout/navBars/breadcrumb/breadcrumb.vue  |  9 +++-
 .../src/layout/navBars/breadcrumb/setings.vue |  2 +-
 .../src/layout/navBars/breadcrumb/theme.js    |  3 ++
 template/admin/src/layout/navBars/index.vue   | 41 ++++++++++---------
 template/admin/src/store/module/menus.js      |  1 +
 8 files changed, 59 insertions(+), 24 deletions(-)

diff --git a/template/admin/src/layout/component/aside.vue b/template/admin/src/layout/component/aside.vue
index 90e30534a..bfe4de6c8 100644
--- a/template/admin/src/layout/component/aside.vue
+++ b/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) => {
diff --git a/template/admin/src/layout/component/columnsAside.vue b/template/admin/src/layout/component/columnsAside.vue
index 684e0d6fa..eb32dde3e 100644
--- a/template/admin/src/layout/component/columnsAside.vue
+++ b/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 {
diff --git a/template/admin/src/layout/logo/index.vue b/template/admin/src/layout/logo/index.vue
index 71519bd06..d610638a7 100644
--- a/template/admin/src/layout/logo/index.vue
+++ b/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;
     },
diff --git a/template/admin/src/layout/navBars/breadcrumb/breadcrumb.vue b/template/admin/src/layout/navBars/breadcrumb/breadcrumb.vue
index eff319031..a0b21196d 100644
--- a/template/admin/src/layout/navBars/breadcrumb/breadcrumb.vue
+++ b/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;
diff --git a/template/admin/src/layout/navBars/breadcrumb/setings.vue b/template/admin/src/layout/navBars/breadcrumb/setings.vue
index 6113153cc..6b4ace515 100644
--- a/template/admin/src/layout/navBars/breadcrumb/setings.vue
+++ b/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 {
diff --git a/template/admin/src/layout/navBars/breadcrumb/theme.js b/template/admin/src/layout/navBars/breadcrumb/theme.js
index 67a1791f7..4a1771d43 100644
--- a/template/admin/src/layout/navBars/breadcrumb/theme.js
+++ b/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',
diff --git a/template/admin/src/layout/navBars/index.vue b/template/admin/src/layout/navBars/index.vue
index 5a1ac7b09..63968910a 100644
--- a/template/admin/src/layout/navBars/index.vue
+++ b/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>
diff --git a/template/admin/src/store/module/menus.js b/template/admin/src/store/module/menus.js
index 86389a798..5db25bd7d 100644
--- a/template/admin/src/store/module/menus.js
+++ b/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;
     },
   },