sideMenu响应式收缩

ruoyi-ui/src/assets/styles/sidebar.scss

@@ -1,19 +1,17 @@
-
 #app {
-
   .main-container {
     height: 100%;
-    transition: margin-left .28s;
+    transition: margin-left 0.28s;
     margin-left: $base-sidebar-width;
     position: relative;
   }
 
   .sidebarHide {
-    margin-left: 0!important;
+    margin-left: 0 !important;
   }
 
   .sidebar-container {
-    -webkit-transition: width .28s;
+    -webkit-transition: width 0.28s;
     transition: width 0.28s;
     width: $base-sidebar-width !important;
     background-color: $base-menu-background;
@@ -25,12 +23,13 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    -webkit-box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
 
     // reset element-ui css
     .horizontal-collapse-transition {
-      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
+      transition: 0s width ease-in-out, 0s padding-left ease-in-out,
+        0s padding-right ease-in-out;
     }
 
     .scrollbar-wrapper {
@@ -71,7 +70,8 @@
       width: 100% !important;
     }
 
-    .el-menu-item, .el-submenu__title {
+    .el-menu-item,
+    .el-submenu__title {
       overflow: hidden !important;
       // text-overflow: ellipsis !important;
       white-space: nowrap !important;
@@ -89,7 +89,7 @@
       color: $base-menu-color-active !important;
     }
 
-    & .nest-menu .el-submenu>.el-submenu__title,
+    & .nest-menu .el-submenu > .el-submenu__title,
     & .el-submenu .el-menu-item {
       min-width: $base-sidebar-width !important;
 
@@ -98,7 +98,7 @@
       }
     }
 
-    & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
+    & .theme-dark .nest-menu .el-submenu > .el-submenu__title,
     & .theme-dark .el-submenu .el-menu-item {
       background-color: $base-sub-menu-background !important;
 
@@ -133,20 +133,19 @@
       overflow: hidden;
       position: fixed;
 
-      &>.el-submenu__title {
+      & > .el-submenu__title {
         padding: 0 !important;
 
         .svg-icon {
           margin-left: 20px;
         }
-
       }
     }
 
     .el-menu--collapse {
       .el-submenu {
-        &>.el-submenu__title {
-          &>span {
+        & > .el-submenu__title {
+          & > span {
             height: 0;
             width: 0;
             overflow: hidden;
@@ -165,11 +164,11 @@
   // mobile responsive
   .mobile {
     .main-container {
-      margin-left: 0px;
+      margin-left: 50px;
     }
 
     .sidebar-container {
-      transition: transform .28s;
+      transition: transform 0.28s;
       width: $base-sidebar-width !important;
     }
 
@@ -183,7 +182,6 @@
   }
 
   .withoutAnimation {
-
     .main-container,
     .sidebar-container {
       transition: none;
@@ -193,13 +191,13 @@
 
 // when menu collapsed
 .el-menu--vertical {
-  &>.el-menu {
+  & > .el-menu {
     .svg-icon {
       margin-right: 16px;
     }
   }
 
-  .nest-menu .el-submenu>.el-submenu__title,
+  .nest-menu .el-submenu > .el-submenu__title,
   .el-menu-item {
     &:hover {
       // you can use $subMenuHover
@@ -208,7 +206,7 @@
   }
 
   // the scroll bar appears when the subMenu is too long
-  >.el-menu--popup {
+  > .el-menu--popup {
     max-height: 100vh;
     overflow-y: auto;
 
@@ -226,4 +224,3 @@
     }
   }
 }
-

ruoyi-ui/src/layout/components/Sidebar/Logo.vue

@@ -1,52 +1,80 @@
 <template>
-  
-  <div class="sidebar-logo-container" :class="{ 'collapse': collapse }"
-    :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
-
+  <div
+    class="sidebar-logo-container"
+    :class="{ collapse: collapse }"
+    :style="{
+      backgroundColor:
+        sideTheme === 'theme-dark'
+          ? variables.menuBackground
+          : variables.menuLightBackground,
+    }"
+  >
     <!-- <transition name="sidebarLogoFade">
-      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
+      <router-link
+        v-if="collapse"
+        key="collapse"
+        class="sidebar-logo-link"
+        to="/"
+      >
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 v-else class="sidebar-title"
-          :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{
-            title }} </h1>
+        <h1
+          v-else
+          class="sidebar-title"
+          :style="{
+            color:
+              sideTheme === 'theme-dark'
+                ? variables.logoTitleColor
+                : variables.logoLightTitleColor,
+          }"
+        >
+          {{ title }}
+        </h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
         <img v-if="logo" :src="logo" class="sidebar-logo" />
-        <h1 class="sidebar-title"
-          :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{
-            title }} </h1>
+        <h1
+          class="sidebar-title"
+          :style="{
+            color:
+              sideTheme === 'theme-dark'
+                ? variables.logoTitleColor
+                : variables.logoLightTitleColor,
+          }"
+        >
+          {{ title }}
+        </h1>
       </router-link>
     </transition> -->
   </div>
 </template>
 
 <script>
-import logoImg from '@/assets/logo/logo.png'//图片地址
-import variables from '@/assets/styles/variables.scss'
+import logoImg from "@/assets/logo/logo.png"; //图片地址
+import variables from "@/assets/styles/variables.scss";
 
 export default {
-  name: 'SidebarLogo',
+  name: "SidebarLogo",
   props: {
     collapse: {
       type: Boolean,
-      required: true
-    }
+      required: true,
+    },
   },
   computed: {
     variables() {
       return variables;
     },
     sideTheme() {
-      return this.$store.state.settings.sideTheme
-    }
+      return this.$store.state.settings.sideTheme;
+    },
   },
   data() {
     return {
-      title: '后台管理系统',//文案
-      logo: logoImg
-    }
-  }
-}
+      title: "后台管理系统", //文案
+      logo: logoImg,
+    };
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -96,4 +124,5 @@ export default {
       margin-right: 0px;
     }
   }
-}</style>
+}
+</style>

ruoyi-ui/src/layout/components/Sidebar/index.vue

@@ -26,6 +26,7 @@
         :unique-opened="true"
         :active-text-color="settings.theme"
         :collapse-transition="false"
+        class="el-menu-vertical-demo"
         mode="vertical"
         menu-trigger="click"
       >
@@ -47,11 +48,12 @@ import Logo from "./Logo";
 import SidebarItem from "./SidebarItem";
 import variables from "@/assets/styles/variables.scss";
 
+const WIDTH = 992;
 export default {
   components: { SidebarItem, Logo },
   data() {
     return {
-      isCollapse: false,
+      // isCollapse: false,
     };
   },
   computed: {
@@ -72,28 +74,42 @@ export default {
     variables() {
       return variables;
     },
-    // isCollapse() {
-    //   // return !this.sidebar.opened;
-    //   // return true
-    //   return false;
-    // },
+    isCollapse() {
+      return !this.sidebar.opened;
+      // return true
+      // return false;
+    },
   },
   methods: {
     onLayoutResize() {
-      console.log("resize");
-      const clientWidth = document.documentElement.clientWidth;
-      if (clientWidth < 1000) {
+      // const clientWidth = document.documentElement.clientWidth;
+      const rect = document.body.getBoundingClientRect();
+      if (rect.width - 1 < WIDTH) {
+        // this.$store.dispatch("app/closeSideBar", { withoutAnimation: true });
+
         this.isCollapse = true;
       } else {
         this.isCollapse = false;
       }
+      console.log(this.isCollapse);
     },
   },
   mounted() {
-    window.addEventListener("resize", this.onLayoutResize);
+    // window.addEventListener("resize", this.onLayoutResize);
   },
-  onUnmounted() {
-    window.removeEventListener("resize");
+  beforeDestroy() {
+    // window.removeEventListener("resize", this.onLayoutResize);
   },
 };
 </script>
+
+<style lang="scss">
+// :deep(.el-menu-vertical-demo:not(.el-menu--collapse)) {
+//   width: 200px;
+//   min-height: 400px;
+// }
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 200px;
+  min-height: 400px;
+}
+</style>

ruoyi-ui/src/layout/index.vue

@@ -49,7 +49,7 @@
       <sidebar
         v-if="!sidebar.hide"
         class="sidebar-container"
-        style="background-color: #222653"
+        :style="sidebar.opened ? '' : 'width:50px !important'"
       />
       <div
         :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
@@ -162,6 +162,9 @@ export default {
 .el-dropdown-menu {
   z-index: 10000 !important;
 }
+.sidebar-container {
+  background-color: #222653 !important;
+}
 
 /* .main-container{
   position: relative;

ruoyi-ui/src/layout/mixin/ResizeHandler.js

@@ -1,5 +1,5 @@
 import store from '@/store'
-
+import { mapGetters, mapState } from "vuex";
 const { body } = document
 const WIDTH = 992 // refer to Bootstrap's responsive design
 
@@ -11,6 +11,9 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapGetters(["sidebarRouters", "sidebar"]),
+  },
   beforeMount() {
     window.addEventListener('resize', this.$_resizeHandler)
   },
@@ -33,11 +36,14 @@ export default {
     },
     $_resizeHandler() {
       if (!document.hidden) {
+
         const isMobile = this.$_isMobile()
         store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
 
         if (isMobile) {
           store.dispatch('app/closeSideBar', { withoutAnimation: true })
+        } else {
+          store.dispatch('app/openSideBar', { withoutAnimation: true })
         }
       }
     }

ruoyi-ui/src/store/modules/app.js

@@ -2,7 +2,8 @@ import Cookies from 'js-cookie'
 
 const state = {
   sidebar: {
-    opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+    // opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
+    opened: true,
     withoutAnimation: false,
     hide: false
   },
@@ -28,6 +29,11 @@ const mutations = {
     state.sidebar.opened = false
     state.sidebar.withoutAnimation = withoutAnimation
   },
+  OPEN_SIDEBAR: (state, withoutAnimation) => {
+    Cookies.set('sidebarStatus', 1)
+    state.sidebar.opened = true
+    state.sidebar.withoutAnimation = withoutAnimation
+  },
   TOGGLE_DEVICE: (state, device) => {
     state.device = device
   },
@@ -47,6 +53,9 @@ const actions = {
   closeSideBar({ commit }, { withoutAnimation }) {
     commit('CLOSE_SIDEBAR', withoutAnimation)
   },
+  openSideBar({ commit }, { withoutAnimation }) {
+    commit('OPEN_SIDEBAR', withoutAnimation)
+  },
   toggleDevice({ commit }, device) {
     commit('TOGGLE_DEVICE', device)
   },

ruoyi-ui/src/views/tableMange/index.vue

@@ -962,6 +962,12 @@ export default {
         // }
       }
     },
+    // 更新路由
+    reloadRouter() {
+      this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
+        this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表
+      });
+    },
 
     // 预览结果回调
     async previewHandle() {
@@ -1133,9 +1139,7 @@ export default {
               let result = await updateMenu(payLoad);
               if (result.code == 200) {
                 this.$message.success("更新成功");
-                this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
-                  this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表
-                });
+                this.reloadRouter();
               } else {
                 this.$message.warning("更新失败");
               }
@@ -1160,9 +1164,7 @@ export default {
               let result = await addMenu(payLoad);
               if (result.code == 200) {
                 this.$message.success("创建成功");
-                this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
-                  this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表
-                });
+                this.reloadRouter();
               } else {
                 this.$message.warning("创建失败");
               }