修改左侧icon

src/views/home/components/Menu.vue

@@ -29,8 +29,9 @@
             )
           "
           :class="isCollapse ? 'stop-animation' : 'active-animation'"
-          >风机运行管理平台</span
         >
+          风机运行管理平台
+        </span>
       </div>
     </div>
     <el-menu
@@ -54,9 +55,9 @@
         >
           <template slot="title">
             <i class="el-icon-menu" v-if="isElPrefix(item.iconName)"></i>
-            <i v-else class="svnIcon"
-              ><svg-icon :icon-class="item.iconName"
-            /></i>
+            <i v-else class="svnIcon">
+              <svg-icon :icon-class="item.iconName" />
+            </i>
             <span>{{ item.name }}</span>
           </template>
           <el-menu-item
@@ -65,9 +66,9 @@
             :index="`/home/${item.path}/${child.path}?id=${child.id}&name=${child.name}`"
           >
             <i class="el-icon-menu" v-if="isElPrefix(child.iconName)"></i>
-            <i v-else class="svnIcon"
-              ><svg-icon :icon-class="child.iconName"
-            /></i>
+            <i v-else class="svnIcon">
+              <svg-icon :icon-class="child.iconName" />
+            </i>
             <span>{{ child.name }}</span>
           </el-menu-item>
         </el-submenu>
@@ -77,7 +78,9 @@
           v-else
         >
           <i class="el-icon-menu" v-if="isElPrefix(item.iconName)"></i>
-          <i v-else class="svnIcon"><svg-icon :icon-class="item.iconName" /></i>
+          <i v-else class="svnIcon">
+            <svg-icon :icon-class="item.iconName" />
+          </i>
           <span>{{ item.name }}</span>
         </el-menu-item>
       </template>
@@ -86,21 +89,25 @@
       <span
         v-show="isCollapse"
         class="el-icon-s-unfold icon"
-        @click="isCollapse = false"
-        >展开</span
+        @click="debouncedToggleCollapse(false)"
       >
+        展开
+      </span>
       <span
         v-show="!isCollapse"
         class="el-icon-s-fold icon"
-        @click="isCollapse = true"
-        >收起</span
+        @click="debouncedToggleCollapse(true)"
       >
+        收起
+      </span>
     </div>
   </el-aside>
 </template>
 
 <script>
+import debounce from "lodash/debounce";
 import { orgList } from "./mockData";
+
 export default {
   data() {
     return {
@@ -132,21 +139,24 @@ export default {
       ...this.$store.state.auth.dynamicRouter,
     ];
     console.log(this.routerList, "组件内dynamicRouter");
+
+    // Debounce the toggle collapse function to prevent rapid toggling
+    this.debouncedToggleCollapse = debounce(this.toggleCollapse, 300);
   },
   computed: {
-    currentMenuIndex() {
-      return this.$store.state.breadStore?.currentUrl?.routeUrl;
-    },
+    // currentMenuIndex() {
+    //   return this.$store.state.breadStore?.currentUrl?.routeUrl;
+    // },
   },
   watch: {
-    currentMenuIndex: {
-      deep: true,
-      handler(newVale, oldVal) {
-        if (newVale) {
-          this.$refs.menu.close(newVale);
-        }
-      },
-    },
+    // currentMenuIndex: {
+    //   deep: true,
+    //   handler(newVale, oldVal) {
+    //     if (newVale) {
+    //       this.$refs.menu.close(newVale);
+    //     }
+    //   },
+    // },
     keyObject: {
       deep: true,
       handler(newVale) {
@@ -190,16 +200,16 @@ export default {
         keyPath,
       };
     },
-    shrinkTree() {
-      this.$refs.menu.close(`/orgsPage?id=${orgList.id}&name=${orgList.name}`);
-    },
-    handleChangeRouter() {
-      this.activeIndex = true;
-      this.defaultActive = "";
-      this.$store.commit("breadStore/ADD_BREAD", []);
-      this.$refs.menu.close(`/orgsPage?id=${orgList.id}&name=${orgList.name}`);
-      this.$router.push("/");
-    },
+    // shrinkTree() {
+    //   this.$refs.menu.close(`/orgsPage?id=${orgList.id}&name=${orgList.name}`);
+    // },
+    // handleChangeRouter() {
+    //   this.activeIndex = true;
+    //   this.defaultActive = "";
+    //   this.$store.commit("breadStore/ADD_BREAD", []);
+    //   this.$refs.menu.close(`/orgsPage?id=${orgList.id}&name=${orgList.name}`);
+    //   this.$router.push("/");
+    // },
     handleChangeMenuUrl(item, key) {
       this.defaultActive = key;
       if (item) {
@@ -209,6 +219,9 @@ export default {
         path: key,
       });
     },
+    toggleCollapse(value) {
+      this.isCollapse = value;
+    },
   },
 };
 </script>
@@ -343,17 +356,38 @@ export default {
   justify-content: center !important;
 }
 
+// .foldBox {
+//   position: fixed;
+//   bottom: 10px;
+//   left: 20px;
+//   padding: 10px;
+
+//   .icon {
+//     cursor: pointer;
+//     color: #666;
+//     font-size: 14px;
+//   }
+// }
+/* 添加过渡效果 */
+.foldBox .icon {
+  transition: opacity 0.3s ease;
+}
+
+/* 菜单 icon 居中展示 */
 .foldBox {
-  position: fixed;
-  bottom: 10px;
-  left: 20px;
-  padding: 10px;
-
-  .icon {
-    cursor: pointer;
-    color: #666;
-    font-size: 14px;
-  }
+  display: flex;
+  align-items: center;
+}
+
+.foldBox .icon {
+  cursor: pointer;
+  color: #666;
+  font-size: 14px;
+  margin-right: 8px; /* 调整图标与文字之间的间距 */
+}
+
+.foldBox .icon:last-child {
+  margin-right: 0; /* 最后一个图标不设置右边距 */
 }
 
 ::v-deep .el-submenu__title {