From b60d15a3f3fc887f272ed295f12e0df97384c0b5 Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Thu, 12 Jun 2025 14:26:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E5=AF=BC=E8=88=AA=E5=8D=87?=
 =?UTF-8?q?=E7=BA=A7=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SliderMenu.vue | 195 +++++++++++++++++++-----------------------
 src/store/index.js            |   8 --
 src/style/theme/index.css     |   2 +
 3 files changed, 92 insertions(+), 113 deletions(-)

diff --git a/src/components/SliderMenu.vue b/src/components/SliderMenu.vue
index 8e6e316..8a5769c 100644
--- a/src/components/SliderMenu.vue
+++ b/src/components/SliderMenu.vue
@@ -1,36 +1,43 @@
 <template>
-      <transition name="menu-collapse">
-  <el-menu :default-active="activeMenu" class="el-menu-vertical-demo custom-menu"  @open="handleOpen"
-   @close="handleClose" @select="handleSelect" :collapse="isCollapse" :collapse-transition="true"
-    :default-openeds="['1', '2']">
-      <div style="height: 100%;padding: 0 0 20px;box-sizing: border-box;" >
+  <transition name="menu-collapse">
+    <!-- :default-active="activeMenu" -->
+    <el-menu class="el-menu-vertical-demo custom-menu" @open="handleOpen"
+    :default-active="currentMenuItem?.index"
+      @close="handleClose" @select="handleSelect" :collapse="isCollapse" :collapse-transition="true"
+      >
+      <div style="height: 100%;padding: 0 0 20px;box-sizing: border-box;">
         <div class="menu-top">
           <span v-show="!isCollapse">
             导航
           </span>
           <GuipToolTip :content="isCollapse ? '展开' : '收起'">
-            <img v-if="!isCollapse" class="point" src="../assets/menu-close.svg" @click="changeMenuStatus(true)" alt="" >
+            <img v-if="!isCollapse" class="point" src="../assets/menu-close.svg" @click="changeMenuStatus(true)" alt="">
             <img v-else class="point" src="../assets/menu-open.svg" @click="changeMenuStatus(false)" alt="">
           </GuipToolTip>
         </div>
-        <el-submenu v-for="item in menuData" :key="item.index" :index="item.index">
-          <template slot="title">
-            <SvgIcon1
-              :iconPath="require(`@/assets/menu/${item.icon}.svg`)"
-              defaultColor="#8A9099"
-              activeColor="#006AFF"
-              :isActive="item.index == activeMenu.substr(0,1) && isCollapse"
-              />
-            <span class="title_text" :index="item.index">{{ item.title }}</span>
-          </template>
+        <template v-for="item in menuData" >
+          <el-submenu v-if="item.children"  :key="item.index" :index="item.index">
+            <template slot="title">
+              <SvgIcon1 :iconPath="require(`@/assets/menu/${item.icon}.svg`)" defaultColor="#8A9099"
+                activeColor="#006AFF" :isActive="item.index == currentMenuItem?.index.substr(0,1) && isCollapse" />
+              <span class="title_text" >{{ item.title }}</span>
+            </template>
             <el-menu-item style="padding: 0 22px 0 32px;" v-for="subItem in item.children" :key="subItem.index"
-              :index="subItem.index">
+              :index="subItem.index" @click="handleSelect(subItem.index, [item.index, subItem.index], subItem)">
               {{ subItem.title }}
             </el-menu-item>
-        </el-submenu>
+          </el-submenu>
+          <el-menu-item v-else :index="item.index"  :key="item.index" @click="handleSelect(item.index, [item.index], item)">
+              <div class="flex">
+                <SvgIcon1 :iconPath="require(`@/assets/menu/${item.icon}.svg`)" defaultColor="#8A9099"
+                  activeColor="#006AFF" :isActive="item.index == currentMenuItem?.index" />
+                <span class="title_text" slot="title">{{ item.title }}</span>
+              </div>
+          </el-menu-item>
+        </template>
       </div>
-  </el-menu>
-</transition>
+    </el-menu>
+  </transition>
 
 </template>
 <script>
@@ -38,7 +45,7 @@ import SvgIcon1 from '@/components/SvgIcon1.vue';
 import GuipToolTip from '@/components/GuipToolTip.vue';
 export default {
   name: 'SliderMenu',
-  components:{
+  components: {
     SvgIcon1,
     GuipToolTip
   },
@@ -53,66 +60,74 @@ export default {
       isCollapse: false,
       activeMenu: '',
       routerList: [],
-      // menuData: [
-      //   {
-      //     index: '1',
-      //     title: '父级菜单1',
-      //     icon: 'el-icon-location',
-      //     children: [
-      //       { index: '1-1', title: '子级菜单1-1', path: '/' },
-      //       { index: '1-2', title: 'ui页面', path: '/ui' }
-      //     ]
-      //   },
-      //   {
-      //     index: '2',
-      //     title: '父级菜单2',
-      //     icon: 'el-icon-menu',
-      //     children: [
-      //       { index: '2-1', title: '子级菜单2-1', path: '/about' },
-      //       { index: '2-2', title: '加盟耶main', path: '/franchise' }
-      //     ]
-      //   }
-      // ]
+      currentMenuItem:'',
+      currentMenuParent:''
     };
   },
+  watch: {
+    "$route.path"() {
+      this.updateCurrentMenu();
+    },
+  },
   methods: {
     changeMenuStatus(flag) {
       this.isCollapse = flag;
     },
-    // handleSelect(index) {
-    //   this.activeMenu = index;
-    // },
     handleOpen(key, keyPath) {
-        console.log(key, keyPath);
-      },
-      handleClose(key, keyPath) {
-        console.log(key, keyPath);
-      },
-    handleSelect(index) {
-      this.activeMenu = index;
-      console.log(index,'---index');
-      // 找到被点击的 menu 项对应的 path
-      const allItems = this.menuData.flatMap(menu => menu.children);
-      const targetItem = allItems.find(item => item.index === index);
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    // handleSelect(index,indexPath) {
+    //   this.activeMenu = index;
+    //   console.log(index,indexPath, '---index');
+    //   // 找到被点击的 menu 项对应的 path
+    //   const allItems = this.menuData.flatMap(menu => menu.children);
+    //   const targetItem = allItems.find(item => item.index === index);
 
-      if (targetItem && this.$route.path !== targetItem.path) {
-        this.$router.push(targetItem.path);
+    //   if (targetItem && this.$route.path !== targetItem.path) {
+    //     this.$router.push(targetItem.path);
+    //   }
+    // },
+    handleSelect(index, indexPath, menuItem) {
+      if (menuItem.path && this.$route.path !== menuItem.path) {
+        this.$router.push(menuItem.path);
+      }
+    },
+    updateCurrentMenu() {
+      const result = this.findMenuItemByPath(this.menuData, this.$route.path);
+      this.currentMenuItem = result?.item;
+      console.log(this.currentMenuItem,'currentMenuItem==');
+    },
+    findMenuItemByPath(menuItems, targetPath, parent = null) {
+      for (const item of menuItems) {
+        if (item.path === targetPath) return { item, parent };
+        if (item.children?.length) {
+          const found = this.findMenuItemByPath(item.children, targetPath, item);
+          if (found) return found;
+        }
       }
+      return null;
     },
     handleMenuItemClick(item) {
       this.$router.push(item.path);
       this.activeMenu = item.index;
-    }
+    },
   },
   mounted() {
-    const allItems = this.menuData.flatMap(menu => menu.children.map(child => ({ ...child, parentIndex: menu.index })));
-    const current = allItems.find(item => item.path === this.$route.path);
-    this.activeMenu = current ? current.index : '';
-    this.defaultOpeneds = current ? [current.parentIndex] : [];
+    // console.log(this.$route.path,'this.$route.path----');
+    // const allItems = this.menuData.flatMap(menu =>menu.children ? menu.children?.map(child => ({ ...child, parentIndex: menu.index })) : menu.children);
+    // console.log(allItems,'=====');
+    // const current = allItems.find(item => item.path === this.$route.path);
+    // this.activeMenu = current ? current.index : '';
+    // this.defaultOpeneds = current ? [current.parentIndex] : [];
+    
     // this.routerList = this.$router.options.router;//配置路由
     // console.log(this.$route.path, this.$router.options.router, 'this.$route.path===');
     // // 初始化时设置默认激活的菜单项
     // this.activeMenu = this.$route.path;
+    this.updateCurrentMenu();
   }
 }
 </script>
@@ -128,51 +143,18 @@ export default {
   transform: translateX(-30px);
 }
 
-.el-menu--vertical{
-  .el-menu-item{
+.el-menu--vertical {
+  .el-menu-item {
     height: 40px;
     line-height: 40px;
+   
   }
-  .el-menu-item.is-active{
+
+  .el-menu-item.is-active {
     font-weight: bold;
   }
 }
-// .slide-fade-enter-active, .slide-fade-leave-active {
-//   transition: all 1.5s ease;
-// }
-// .slide-fade-enter, .slide-fade-leave-to {
-//   opacity: 0;
-//   transition: all 1.5s ease;
-//   transform: translateX(-10px);
-// }
-
-// .slide-enter-active, .slide-leave-active {
-//   transition: all 1.5s ease;
-//   max-height: 200px;
-// }
 
-/* 添加收起时的过渡效果 */
-// .el-menu--collapse .el-submenu .el-menu {
-//   transition: all 0.3s ease-in-out;
-//   overflow: hidden;
-// }
-
-// .el-menu--collapse .el-submenu > .el-menu {
-//   display: none;
-//   opacity: 0;
-//   transform: translateY(-10px);
-// }
-
-// .el-menu:not(.el-menu--collapse) .el-submenu > .el-menu {
-//   transition: all 0.3s ease-in-out;
-//   opacity: 1;
-//   transform: translateY(0);
-// }
-
-// .slide-enter, .slide-leave-to {
-//   opacity: 0;
-//   max-height: 0;
-// }
 .title_img {
   width: 16px;
   margin-right: 4px;
@@ -185,10 +167,12 @@ export default {
   display: block;
 
 }
-.el-menu--collapse .title_text{
+
+.el-menu--collapse .title_text {
   display: none;
 }
-.el-menu--collapse ::v-deep .el-submenu__icon-arrow{
+
+.el-menu--collapse ::v-deep .el-submenu__icon-arrow {
   display: none;
 }
 
@@ -221,7 +205,8 @@ export default {
   letter-spacing: 0.08em;
   justify-content: space-between;
   align-items: center;
-  img{
+
+  img {
     width: 14px;
     height: 14px;
 
@@ -278,6 +263,7 @@ export default {
   color: #006AFF;
   font-weight: bold;
 }
+
 // .el-submenu .el-menu {
 //   transition: all 0.3s ease;
 // }
@@ -294,5 +280,4 @@ export default {
 // .el-menu--collapse .el-submenu.is-opened > .el-menu {
 //   opacity: 0;
 //   height: 0;
-// }
-</style>
\ No newline at end of file
+// }</style>
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
index 401fd33..b23964e 100755
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -100,14 +100,6 @@ export default new Vuex.Store({
         path:'/',
         icon: 'Totalprofit',
       },
-      // {
-      //   name: '用户管理',
-      //   icon: 'el-icon-user',
-      //   children: [
-      //     { name: '用户列表', path: '/user/list' },
-      //     { name: '角色管理', path: '/user/role' }
-      //   ]
-      // },
       {
         index: '2',
         title: '父级菜单1',
diff --git a/src/style/theme/index.css b/src/style/theme/index.css
index d20537a..e674b75 100644
--- a/src/style/theme/index.css
+++ b/src/style/theme/index.css
@@ -5022,6 +5022,8 @@ border-color:#006AFF !important;
     height: 56px;
     line-height: 56px;
     font-size: 14px;
+    display: flex;
+    align-items: center;
     color: #1e2226;
     padding: 0 20px;
     list-style: none;