From 9d06607ebb5bd19ee7bdf1bc9aad536dcdd27e4d Mon Sep 17 00:00:00 2001
From: zhangdi <15053473693@163.com>
Date: Mon, 8 Sep 2025 17:27:21 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/index/sidebar/index.vue | 270 +++++++++++++++++--------------
 1 file changed, 153 insertions(+), 117 deletions(-)

diff --git a/src/page/index/sidebar/index.vue b/src/page/index/sidebar/index.vue
index c35608f..d7f4ee7 100644
--- a/src/page/index/sidebar/index.vue
+++ b/src/page/index/sidebar/index.vue
@@ -1,7 +1,9 @@
 <template>
   <el-menu unique-opened :default-active="activeMenu" :mode="setting.sidebar" :collapse="isCollapse"
     v-if="setting.styleRadio == '1'">
-    <sidebar-item :menu="menu"></sidebar-item>
+    <el-input v-model="input1" class="w-50 m-2" size="large" placeholder="请输入" suffix-icon="Search"
+      style="width:90%;margin-left:5%;" clearable />
+    <sidebar-item :menu="filteredMenu"></sidebar-item>
   </el-menu>
 
   <el-menu unique-opened :default-active="activeMenu" :mode="setting.sidebar" :collapse="isCollapse"
@@ -11,28 +13,30 @@
 
   <left-menu :menulist="menu" v-if="setting.styleRadio == '2'"></left-menu>
   <leftMenuSec :menulist="menu" v-if="setting.styleRadio == '5'"></leftMenuSec>
-  <div class="left_menu_box" :class="leftMenu[selectIndex].children ? 'right_box' : ''" style="display: flex;height: 100%;background: #fff;" 
-  v-if="setting.styleRadio == '3'">
+  <div class="left_menu_box" :class="leftMenu[selectIndex].children ? 'right_box' : ''"
+    style="display: flex;height: 100%;background: #fff;" v-if="setting.styleRadio == '3'">
     <div :class="leftMenu.find(item => item.children) ? 'children' : 'no_child'">
       <!-- <div class="top_title">{{ this.menu.find(item => item.id == this.leftMenu[selectIndex].parentId).name }}</div> -->
-      <div class="left_menu" @click="clickItem(item, index)" v-for="(item, index) in leftMenu" :key="item.id" @mouseenter="mouseEnter(item,index)" 
-        :class="index == selectIndex ? 'active' : ''">
+      <div class="left_menu" @click="clickItem(item, index)" v-for="(item, index) in leftMenu" :key="item.id"
+        @mouseenter="mouseEnter(item, index)" :class="index == selectIndex ? 'active' : ''">
         <div class="left_menu_item">
-                  <i :class="item.source" ></i>
-                  <span class="name_text">{{ item.name.substring(0,4) }}</span>
-              </div>
+          <i :class="item.source"></i>
+          <span class="name_text">{{ item.name.substring(0, 4) }}</span>
+        </div>
       </div>
     </div>
-    <div style="flex: 1;height: 100%;background: #fff;" v-show="leftMenu[selectIndex].children" @mouseleave="mouseleave(leftMenu[selectIndex])">
+    <div style="flex: 1;height: 100%;background: #fff;" v-show="leftMenu[selectIndex].children"
+      @mouseleave="mouseleave(leftMenu[selectIndex])">
       <div
         v-if="leftMenu && leftMenu.length != 0 && leftMenu[selectIndex].children && leftMenu[selectIndex].children.length != 0">
         <div class="left_top">{{ leftMenu[selectIndex].name }} </div>
-        <div class="right_menu" v-for="item in leftMenu[selectIndex].children" :key="item.id" @mouseenter="mounseEnter(item)"  @mouseleave="mounseLeave(leftMenu[selectIndex],item)">
+        <div class="right_menu" v-for="item in leftMenu[selectIndex].children" :key="item.id"
+          @mouseenter="mounseEnter(item)" @mouseleave="mounseLeave(leftMenu[selectIndex], item)">
           <div class="right_menu_item">
             <el-popover placement="right-start" :show-arrow="false" :offset="0" :hide-after='0'
               popper-class="log-popover"
               popper-style="visibility: visible;width:auto;border:none;  transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;"
-              @hide="hidePopover(leftMenu[selectIndex],item)">
+              @hide="hidePopover(leftMenu[selectIndex], item)">
               <template #reference>
                 <div class="right_menu_item_box" @click='clickPage(item)'>
                   <div>{{ item.name }}</div>
@@ -41,17 +45,21 @@
                   </el-icon>
                 </div>
               </template>
-              <template #default >
-                <div class="third_box" v-if="item.children && item.children.length != 0 && !item.children.find(item1 => item1.children)">
-                  <div class="third_box_item" v-for="third in item.children" :key="third.id" @click="handleClick(third)">
+              <template #default>
+                <div class="third_box"
+                  v-if="item.children && item.children.length != 0 && !item.children.find(item1 => item1.children)">
+                  <div class="third_box_item" v-for="third in item.children" :key="third.id"
+                    @click="handleClick(third)">
                     {{ third.name }}
                   </div>
                 </div>
-                <div class="four_box" v-if="item.children && item.children.length != 0 && item.children.find(item1 => item1.children)">
+                <div class="four_box"
+                  v-if="item.children && item.children.length != 0 && item.children.find(item1 => item1.children)">
                   <div class="four_box_item" v-for="third in item.children" :key="third.id">
-                    <div class="third_name"  @click="handleClick(third)"><span></span>{{ third.name }}</div>
+                    <div class="third_name" @click="handleClick(third)"><span></span>{{ third.name }}</div>
                     <div class="four_con_box" v-if="third.children">
-                      <div class="four_con_item" v-for="four in third.children" :key="four.id"  @click="handleClick(four)">
+                      <div class="four_con_item" v-for="four in third.children" :key="four.id"
+                        @click="handleClick(four)">
                         {{ four.name }}
                       </div>
                     </div>
@@ -66,21 +74,22 @@
   </div>
   <div v-if="setting.styleRadio == '6'" class="left_menu_box six">
     <div class="left_menu six_menu">
-      <div class="left_menu_item" v-for="(item,index) in menu" :key="item.id" @click="clickMenu(item,index)" :class="activeIndex == index ? 'hover' : ''">
+      <div class="left_menu_item" v-for="(item, index) in menu" :key="item.id" @click="clickMenu(item, index)"
+        :class="activeIndex == index ? 'hover' : ''">
         <i :class="item.source" style="font-size: 20px;"></i>
-        <span class="name_text">{{ item.name.substring(0,2) }}</span>
+        <span class="name_text">{{ item.name.substring(0, 2) }}</span>
       </div>
     </div>
     <div style="flex: 1;height: 100%;" v-show="menu[activeIndex].children" @mouseleave="mouseleave(menu[activeIndex])">
-      <div
-        v-if="menu && menu.length != 0 && menu[activeIndex].children && menu[activeIndex].children.length != 0">
+      <div v-if="menu && menu.length != 0 && menu[activeIndex].children && menu[activeIndex].children.length != 0">
         <div class="left_top">{{ menu[activeIndex].name }} </div>
-        <div class="right_menu" v-for="item in menu[activeIndex].children" :key="item.id" @mouseenter="mounseEnter(item)"  @mouseleave="mounseLeave(menu[activeIndex],item)">
+        <div class="right_menu" v-for="item in menu[activeIndex].children" :key="item.id"
+          @mouseenter="mounseEnter(item)" @mouseleave="mounseLeave(menu[activeIndex], item)">
           <div class="right_menu_item">
             <el-popover placement="right-start" :show-arrow="false" :offset="0" :hide-after='0'
               popper-class="log-popover"
               popper-style="visibility: visible;width:auto;border:none;  transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;"
-              @hide="hidePopover(menu[activeIndex],item)">
+              @hide="hidePopover(menu[activeIndex], item)">
               <template #reference>
                 <div class="right_menu_item_box" @click='clickPage(item)'>
                   <div class="second_name">{{ item.name }}</div>
@@ -89,17 +98,21 @@
                   </el-icon>
                 </div>
               </template>
-              <template #default >
-                <div class="third_box" v-if="item.children && item.children.length != 0 && !item.children.find(item1 => item1.children)">
-                  <div class="third_box_item" v-for="third in item.children" :key="third.id" @click="handleClick(third)">
+              <template #default>
+                <div class="third_box"
+                  v-if="item.children && item.children.length != 0 && !item.children.find(item1 => item1.children)">
+                  <div class="third_box_item" v-for="third in item.children" :key="third.id"
+                    @click="handleClick(third)">
                     {{ third.name }}
                   </div>
                 </div>
-                <div class="four_box" v-if="item.children && item.children.length != 0 && item.children.find(item1 => item1.children)">
+                <div class="four_box"
+                  v-if="item.children && item.children.length != 0 && item.children.find(item1 => item1.children)">
                   <div class="four_box_item" v-for="third in item.children" :key="third.id">
-                    <div class="third_name"  @click="handleClick(third)"><span></span>{{ third.name }}</div>
+                    <div class="third_name" @click="handleClick(third)"><span></span>{{ third.name }}</div>
                     <div class="four_con_box" v-if="third.children">
-                      <div class="four_con_item" v-for="four in third.children" :key="four.id"  @click="handleClick(four)">
+                      <div class="four_con_item" v-for="four in third.children" :key="four.id"
+                        @click="handleClick(four)">
                         {{ four.name }}
                       </div>
                     </div>
@@ -123,12 +136,13 @@ import leftMenuSec from './leftMenu_sec.vue'
 
 export default {
   name: 'sidebar',
-  components: { sidebarItem, leftMenu,leftMenuSec },
+  components: { sidebarItem, leftMenu, leftMenuSec },
   data() {
     return {
       isCollapse: false,
-      showRight:false,
-      activeIndex:0,
+      showRight: false,
+      activeIndex: 0,
+      input1: '',
       // selectIndex:0
     }
   },
@@ -143,19 +157,41 @@ export default {
       }
       return path;
     },
+    filteredMenu(){
+     return this.input1 ? this.searchMenu(this.menu, this.input1) : this.menu; // 如果搜索文本为空，则返回原始数据；否则返回过滤后的数据。
+    },
   },
   mounted() {
-    console.log('left--------------------------',this.leftMenu)
-    console.log('menu--------------------------',this.menu)
-    console.log('selectIndex--------------------------',this.selectIndex)
-    if(this.setting.styleRadio=='3'){
+
+    console.log('menu--------------------------', this.menu)
+    console.log('selectIndex--------------------------', this.selectIndex)
+    if (this.setting.styleRadio == '3') {
       this.index.openMenu2();
-    }else{
+    } else {
       this.index.openMenu2();
     }
   },
   methods: {
-    clickMenu(item,index){
+    menuInput(value) {
+      console.log(999, value)
+      console.log('menu--------------------------', this.searchMenu(this.menu, value), this.menu)
+      this.menu = this.searchMenu(this.menu, value)
+    },
+    searchMenu(items, searchText) {
+      const result = [];
+      items.forEach(item => {
+        if (item.name.includes(searchText)) {
+          result.push(item); // 直接匹配的项加入结果数组
+        } else if (item.children && item.children.length > 0) { // 递归查找子菜单项
+          const childrenResult = this.searchMenu(item.children, searchText); // 递归调用
+          if (childrenResult.length > 0) { // 如果子菜单中有匹配项，则合并到结果数组中
+            result.push({ ...item, children: childrenResult }); // 保留父节点并加入匹配的子节点
+          }
+        }
+      });
+      return result;
+    },
+    clickMenu(item, index) {
       this.activeIndex = index
     },
     clickItem(item, index) {
@@ -178,57 +214,57 @@ export default {
         this.$store.commit('SET_SELECTED_INDEX', item.parentId + '');
       }
     },
-    mouseEnter(item,index){
+    mouseEnter(item, index) {
       this.$store.commit('SET_SELECT_INDEX', index);
-      if(item.children){
+      if (item.children) {
         this.showRight = true
-      }else{
+      } else {
         this.showRight = false
       }
     },
-    hidePopover(item,item1){
-      console.log('33333333333333333333333',item1)
-      if(item1.children){
-        if(item.id != this.selectedIndex){
+    hidePopover(item, item1) {
+      console.log('33333333333333333333333', item1)
+      if (item1.children) {
+        if (item.id != this.selectedIndex) {
           let tmp = this.leftMenu.find(item => item.id == this.selectedIndex)
           let tmpIndex = this.leftMenu.findIndex(item => item.id == this.selectedIndex)
           this.$store.commit('SET_SELECT_INDEX', tmpIndex == -1 ? 0 : tmpIndex);
         }
       }
-      
+
     },
-    mouseleave(item){
-      console.log('item-------------------',item)
-      if(item.children.find(item1 => item1.children)){
+    mouseleave(item) {
+      console.log('item-------------------', item)
+      if (item.children.find(item1 => item1.children)) {
         console.log('111111111111111111')
-      }else{
-         if(item.id != this.selectedIndex){
+      } else {
+        if (item.id != this.selectedIndex) {
           let tmp = this.leftMenu.find(item => item.id == this.selectedIndex)
           let tmpIndex = this.leftMenu.findIndex(item => item.id == this.selectedIndex)
           this.$store.commit('SET_SELECT_INDEX', tmpIndex == -1 ? 0 : tmpIndex);
         }
       }
     },
-    mounseLeave(item,item1){
+    mounseLeave(item, item1) {
       console.log('222222222222222222222222222')
       // console.log('item----------------------',item)
       // console.log('item1----------------------',item1)
       // console.log('tmp-------------------',item.children.find(item1 => item1.children))
       // if(!item1.children){
-        // if(item.id != this.selectedIndex){
-        //   let tmp = this.leftMenu.find(item => item.id == this.selectedIndex)
-        //   let tmpIndex = this.leftMenu.findIndex(item => item.id == this.selectedIndex)
-        //   this.$store.commit('SET_SELECT_INDEX', tmpIndex == -1 ? 0 : tmpIndex);
-        // }
+      // if(item.id != this.selectedIndex){
+      //   let tmp = this.leftMenu.find(item => item.id == this.selectedIndex)
+      //   let tmpIndex = this.leftMenu.findIndex(item => item.id == this.selectedIndex)
+      //   this.$store.commit('SET_SELECT_INDEX', tmpIndex == -1 ? 0 : tmpIndex);
+      // }
       // }
     },
-    mounseEnter(item){
-      console.log('item0000000000000000000000000',item)
+    mounseEnter(item) {
+      console.log('item0000000000000000000000000', item)
       this.showRight = true
     },
-    handleClick(item){
-      console.log('item000000000000000000000000',item)
-      if(!item.children){
+    handleClick(item) {
+      console.log('item000000000000000000000000', item)
+      if (!item.children) {
         this.$router.push({
           path: item.path,
           query: item.query,
@@ -237,30 +273,29 @@ export default {
     }
   },
 
- 
+
 
 };
 </script>
 <style lang="scss" scoped>
-.left_menu_box_six{
-  
-}
+.left_menu_box_six {}
 
-.left_menu_box{
+.left_menu_box {
   width: 70px !important;
 
-  &.right_box{
+  &.right_box {
     width: 200px !important;
     background: #fff;
   }
 
-  &.six{
+  &.six {
     width: 215px !important;
     background: #f7fafc !important;
     display: flex;
     height: 100%;
   }
 }
+
 .no_child {
   width: 70px;
 }
@@ -269,21 +304,22 @@ export default {
   width: 70px;
   height: 100%;
 
-  &:hover{
+  &:hover {
     transition: all .5s;
     box-shadow: 5px 5px 30px #afaeae;
   }
 }
-.top_title{
+
+.top_title {
   font-size: 14px;
-    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
-    font-weight: 700;
-    text-align: center;
-    height: 48px;
-    display: flex;
-    color: #5a6f82;
-    align-items: center;
-    justify-content: center;
+  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
+  font-weight: 700;
+  text-align: center;
+  height: 48px;
+  display: flex;
+  color: #5a6f82;
+  align-items: center;
+  justify-content: center;
 }
 
 .left_menu {
@@ -301,7 +337,7 @@ export default {
     color: #fff;
   }
 
-  &.six_menu{
+  &.six_menu {
     display: flex;
     height: 100%;
     flex-direction: column;
@@ -309,12 +345,12 @@ export default {
     width: 60px;
     color: #0066ff;
 
-    &:hover{
+    &:hover {
       transition: all .5s;
       box-shadow: 5px 5px 30px #afaeae;
     }
   }
-  
+
 
   .left_menu_item {
     cursor: pointer;
@@ -334,13 +370,13 @@ export default {
     overflow: hidden;
     text-overflow: ellipsis;
 
-    .img_box{
+    .img_box {
       width: 14px;
       height: 14px;
       background: url('@/assets/right_pull.png');
     }
 
-    .name_text{
+    .name_text {
       font-size: 12px;
       font-family: Microsoft YaHei-Regular, Microsoft YaHei;
       font-weight: 500;
@@ -358,20 +394,20 @@ export default {
       background: #0066ff;
       color: #fff;
 
-      .img_box{
+      .img_box {
         width: 14px;
         height: 14px;
         background: url('@/assets/right_pull_white.png');
       }
     }
 
-    
+
 
     &:hover {
       background: #0066ff;
       color: #fff;
 
-      .img_box{
+      .img_box {
         width: 14px;
         height: 14px;
         background: url('@/assets/right_pull_white.png');
@@ -384,14 +420,14 @@ export default {
 
 .left_top {
   font-size: 14px;
-    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
-    font-weight: 700;
-    text-align: center;
-    height: 48px;
-    display: flex;
-    color: #5a6f82;
-    align-items: center;
-    justify-content: center;
+  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
+  font-weight: 700;
+  text-align: center;
+  height: 48px;
+  display: flex;
+  color: #5a6f82;
+  align-items: center;
+  justify-content: center;
 }
 
 .right_menu {
@@ -428,7 +464,7 @@ export default {
       align-items: center;
       color: #333;
 
-      .second_name{
+      .second_name {
         width: 100%;
         height: 46px;
         font-size: 14px;
@@ -452,7 +488,6 @@ export default {
   }
 
 }
-
 </style>
 <style lang="scss">
 .third_box {
@@ -479,7 +514,7 @@ export default {
     white-space: nowrap;
     box-sizing: border-box;
 
-    &:hover{
+    &:hover {
       background: #0066ff;
       color: #fff;
     }
@@ -490,10 +525,10 @@ export default {
   border: none;
 }
 
-.four_box{
+.four_box {
   display: flex;
 
-  .four_box_item{
+  .four_box_item {
     display: flex;
     flex-direction: column;
     // line-height: 46px;
@@ -501,37 +536,38 @@ export default {
     padding-left: 15px;
     padding-top: 15px;
     cursor: pointer;
-    
-    .third_name{
+
+    .third_name {
       line-height: 46px;
       display: flex;
       align-items: center;
 
-      span{
+      span {
         width: 3px;
         height: 15px;
         margin-right: 5px;
         display: inline-block;
-        background:#0066ff ;
+        background: #0066ff;
       }
 
     }
-    .four_con_box{
-        display: flex;
-        flex-direction: column;
-        
-        
-        .four_con_item{
-          line-height: 46px;
-          padding-left: 10px;
-
-          &:hover{
-            background: #0066ff;
-            color: #fff;
-          }
 
+    .four_con_box {
+      display: flex;
+      flex-direction: column;
+
+
+      .four_con_item {
+        line-height: 46px;
+        padding-left: 10px;
+
+        &:hover {
+          background: #0066ff;
+          color: #fff;
         }
+
       }
+    }
   }
 }
 </style>