侧边栏增加是否固定按钮

src/App.vue

@@ -5,7 +5,7 @@
     :style="{
       width: `${style.width}px`,
       height: `${style.height}px`,
-      transform: `${style.transform}`
+      transform: `${style.transform}`,
     }"
   >
     <div v-if="isLogined" class="main">
@@ -29,7 +29,7 @@
       </div>
       <div
         class="menu-body"
-        :class="{ hover: isShowMenu }"
+        :class="{ hover: isFixed ? true : isShowMenu }"
         @mouseenter="showMenu"
         @mouseleave="hideMenu"
         v-show="
@@ -77,14 +77,7 @@
           </el-sub-menu>
         </el-menu>
       </div>
-      <div
-        class="main-body"
-        :style="
-          $store.state.themeName === 'light' && hideMenus === '0'
-            ? 'margin-left: 75px; max-width  : calc(100vw - 54px - 25px);'
-            : ''
-        "
-      >
+      <div class="main-body" :style="{ paddingLeft: isFixed ? '52px' : 0 }">
         <router-view />
       </div>
     </div>
@@ -144,6 +137,9 @@ export default {
     isLogined() {
       return this.$store.state.user?.loginState;
     },
+    isFixed() {
+      return this.$store.state.isFixed;
+    },
   },
   created() {
     let that = this;
@@ -198,7 +194,7 @@ export default {
       //   if (d > 1) {
       //     f = 18;
       //   }
-      return { x: w, y: h,  };
+      return { x: w, y: h };
     },
     setScale() {
       let scale = this.getScale();
@@ -211,14 +207,18 @@ export default {
       this.root = data.id;
     },
     showMenu() {
-      this.isShowMenu = true;
-      this.memuCloseTimeout && clearTimeout(this.memuCloseTimeout);
+      if (!this.isFixed) {
+        this.isShowMenu = true;
+        this.memuCloseTimeout && clearTimeout(this.memuCloseTimeout);
+      }
     },
     hideMenu() {
-      const that = this;
-      this.memuCloseTimeout = setTimeout(function () {
-        that.isShowMenu = false;
-      }, 500);
+      if (!this.isFixed) {
+        const that = this;
+        this.memuCloseTimeout = setTimeout(function () {
+          that.isShowMenu = false;
+        }, 500);
+      }
     },
     login() {
       this.$store.commit("user/SET_LOGINSTATE", true);
@@ -361,6 +361,11 @@ body {
   }
   .menu-body {
     position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+
     flex: 0 0 @menuWidth;
     width: @menuWidth;
     height: calc(100% - @headerHeight);

src/assets/icon/svg/fixed.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1694767267389" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13836" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M771.798516 586.270988c-6.897306 8.296759-17.293245 12.894963-27.989067 12.894963h-0.299882l-175.931277-1.199532-55.178446 422.834831-0.399844 3.19875-0.399844-3.19875-55.178446-422.834831-175.931277 1.199532h-0.299882c-10.795783 0-21.191722-4.598204-27.989067-12.894963-6.897306-8.39672-8.796564-18.292854-8.596642-27.28934 0.399844-13.094885 5.697774-25.590004 14.394377-35.386177l61.87583-69.872706c15.393987-17.393206 24.790316-39.284654 26.589613-62.475596l20.292074-250.402187c0.599766-7.796954-2.199141-15.593909-7.796955-21.091761l-38.584927-38.584927c-19.692308-16.693479-21.891449-33.58688-17.79305-47.581414 5.897696-20.092152 24.690355-33.58688 45.582194-33.58688h0.199922l163.236236 0.499805h0.799688l163.236236-0.499805h0.199922c20.891839 0 39.684498 13.494729 45.582194 33.58688 4.098399 13.994533 1.899258 30.887934-17.79305 47.581414L664.940258 119.753221c-5.597813 5.597813-8.39672 13.294807-7.796955 21.091761L677.435377 391.247169c1.899258 23.190941 11.195627 45.08239 26.589613 62.475596l61.87583 69.872706c8.696603 9.796173 13.894572 22.291292 14.394377 35.386177 0.299883 8.996486-1.599375 18.89262-8.496681 27.28934z" p-id="13837"></path></svg>

src/assets/icon/svg/unfixed.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1694767156110" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10952" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1017.302616 364.657556c-7.597032 13.994533-21.691527 25.490043-47.381491 25.490043-2.499024 0-5.098009-0.099961-7.796955-0.299883h-65.07458c-9.39633 0-18.292854 4.098399-24.390472 11.295587L678.335025 629.654041c-17.992971 21.091761-28.588832 47.481453-30.288168 75.170637l-6.697384 111.25654c-0.99961 15.593909-6.997267 30.588052-17.693089 41.9836-7.397111 7.896915-17.293245 14.594299-30.288168 15.793831-1.299492 0.099961-2.598985 0.199922-3.798517 0.199922-11.49551 0-22.491214-4.798126-30.688012-12.994924l-0.199922-0.199922-147.542366-149.541585L7.597032 1021.700898l-2.998828 2.299102 2.299102-2.998829 310.378758-403.542366-149.441624-147.542366-0.199922-0.199922c-9.096447-9.096447-13.994533-21.691527-12.795002-34.486529 1.199531-12.894963 7.996876-22.891058 15.79383-30.288168 11.395549-10.695822 26.389692-16.79344 41.983601-17.693089l111.25654-6.697384c27.689184-1.699336 54.078875-12.295197 75.170636-30.288169L627.4549 155.939086c7.197189-6.097618 11.295588-14.994143 11.295588-24.390472V66.474034c-2.499024-30.688012 9.796173-46.781726 25.19016-55.178446 8.296759-4.498243 17.393206-6.697384 26.389692-6.697384 14.794221 0 29.488481 5.897696 40.384225 16.79344l0.099961 0.099961 137.246388 138.245997 0.699726 0.699727 138.245998 137.346349 0.099961 0.099961c17.693089 17.693089 22.191332 44.882468 10.196017 66.773917z" p-id="10953"></path></svg>

src/store/index.js

@@ -13,6 +13,7 @@ const state = {
   menuData: [],
   windturbineMap: {},
   moudleName: localStorage.getItem("ModuleName") || "",
+  isFixed: JSON.parse(localStorage.getItem("isFixed")) || false,
 };
 
 //改变状态的方法`
@@ -20,6 +21,10 @@ const mutations = {
   loadingStore(state, tag) {
     state.loading = tag;
   },
+  changeIsFixed(state, isFixed) {
+    state.isFixed = isFixed;
+    localStorage.setItem("isFixed", isFixed);
+  },
   changeTheme(state, tag) {
     state.themeName = tag;
   },

src/views/layout/Menu.vue

@@ -81,6 +81,14 @@
       </li>
     </ul>
   </div>
+  <div
+    class="icon-fixed svg-icon"
+    :class="fixed ? 'svg-icon-green' : 'svg-icon-gray'"
+    @click="handleClickFixed"
+  >
+    <SvgIcon svgid="svg-unfixed" v-if="fixed == false"></SvgIcon>
+    <SvgIcon svgid="svg-fixed" v-if="fixed == true"></SvgIcon>
+  </div>
 </template>
 <script>
 import SvgIcon from "@com/coms/icon/svg-icon.vue";
@@ -576,9 +584,14 @@ export default {
       parentIndex: null,
       subMenu: [],
       subIndex: null,
+      fixed: false,
     };
   },
   methods: {
+    handleClickFixed() {
+      this.fixed = !this.fixed;
+      this.$store.commit("changeIsFixed", this.fixed);
+    },
     fillterMenuRoutes,
     click(index) {
       this.activeIndex = index;
@@ -668,8 +681,21 @@ export default {
         return [];
       }
     },
+    isFixed() {
+      return JSON.parse(localStorage.getItem("isFixed"));
+    },
   },
   watch: {
+    isFixed: {
+      handler(val) {
+        if (!val) {
+          this.$store.commit("changeIsFixed", false);
+        } else {
+          this.fixed = val;
+        }
+      },
+      immediate: true,
+    },
     // 监听路由
     $route: {
       handler: function (val, oldVal) {
@@ -802,4 +828,7 @@ export default {
     color: rgba(255, 255, 255, 50%);
   }
 }
+.icon-fixed {
+  padding-bottom: 20px;
+}
 </style>