feat: 系统管理左侧菜单栏采用统一可拖拽组件

frontend/src/layout/components/AppMain.vue

@@ -2,9 +2,7 @@
   <section class="app-main">
     <transition name="fade-transform" mode="out-in">
       <el-main class="ms-main-container">
-        <!-- <keep-alive> -->
         <router-view :key="key" />
-        <!-- </keep-alive> -->
       </el-main>
     </transition>
   </section>
@@ -26,11 +24,11 @@ export default {
 
     .app-main {
         /* topbar 56  */
-        min-height: calc(100vh - 56px);
-        width: 100%;
-        height: 100%;
-        position: relative;
-        overflow: hidden;
+        // min-height: calc(100vh - 56px);
+        // width: 100%;
+        // height: 100%;
+         // position: relative;
+        // overflow: hidden;
     }
 
     .fixed-header + .app-main {

frontend/src/layout/components/Sidebar/index.vue

@@ -1,20 +1,18 @@
 <template>
   <div :class="{'has-logo':showLogo}">
     <logo v-if="showLogo" :collapse="isCollapse" />
-    <el-scrollbar wrap-class="scrollbar-wrapper">
-      <el-menu
-        :default-active="activeMenu"
-        :collapse="isCollapse"
-        :background-color="variables.menuBg"
+    <el-menu
+      :default-active="activeMenu"
+      :collapse="isCollapse"
+      :background-color="variables.menuBg"
 
-        :unique-opened="false"
-        :active-text-color="variables.menuActiveText"
-        :collapse-transition="false"
-        mode="vertical"
-      >
-        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
-      </el-menu>
-    </el-scrollbar>
+      :unique-opened="false"
+      :active-text-color="variables.menuActiveText"
+      :collapse-transition="false"
+      mode="vertical"
+    >
+      <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
+    </el-menu>
   </div>
 </template>
 
@@ -23,7 +21,6 @@ import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
-
 export default {
   components: { SidebarItem, Logo },
   computed: {

frontend/src/layout/index.vue

@@ -2,35 +2,43 @@
   <div :class="classObj" class="app-wrapper">
     <licbar />
     <topbar />
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
-    <div :class="{sidebarHide: sidebar.hide}" class="main-container">
-      <div :class="{'fixed-header':fixedHeader}">
-        <!-- <navbar /> -->
-      </div>
+
+    <de-container style="padding-top: 56px;">
+      <de-aside-container v-if="!sidebar.hide">
+        <sidebar class="sidebar-container" />
+      </de-aside-container>
+
+      <de-main-container class="la-main-container">
+        <app-main />
+      </de-main-container>
+    </de-container>
+
+    <!-- <de-main-container>
       <app-main />
-      <right-panel v-if="showSettings">
-        <settings />
-      </right-panel>
-    </div>
+    </de-main-container> -->
+
+    <!-- <div :class="{sidebarHide: sidebar.hide}" class="main-container">
+      <app-main />
+    </div> -->
   </div>
 </template>
 
 <script>
-import RightPanel from '@/components/RightPanel'
-import { Sidebar, Settings, AppMain, Topbar, Licbar } from './components'
-// import { Sidebar, Settings, AppMain, Topbar } from './components'
+import { Sidebar, AppMain, Topbar, Licbar } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
-
+import DeMainContainer from '@/components/dataease/DeMainContainer'
+import DeContainer from '@/components/dataease/DeContainer'
+import DeAsideContainer from '@/components/dataease/DeAsideContainer'
 export default {
   name: 'Layout',
   components: {
-    RightPanel,
     Sidebar,
-    Settings,
     AppMain,
     Topbar,
-    Licbar
+    Licbar,
+    DeMainContainer,
+    DeContainer,
+    DeAsideContainer
   },
   mixins: [ResizeMixin],
   computed: {
@@ -70,8 +78,8 @@ export default {
   .app-wrapper {
     @include clearfix;
     position: relative;
-    // height: 100%;
-    height: $contentHeight;
+    height: 100%;
+    // height: $contentHeight;
     width: 100%;
     &.mobile.openSidebar{
       position: fixed;
@@ -104,4 +112,8 @@ export default {
   .mobile .fixed-header {
     width: 100%;
   }
+
+  .la-main-container {
+      padding: 0px !important;
+  }
 </style>

frontend/src/styles/sidebar.scss

@@ -13,9 +13,9 @@
   }
   .sidebar-container {
     transition: width 0.28s;
-    width: $sideBarWidth !important;
+    // width: $sideBarWidth !important;
     background-color: $menuBg;
-    // height: 100%;
+     // width: 260px;
     height: $contentHeight;
     position: fixed;
     font-size: 0px;
@@ -25,7 +25,9 @@
     left: 0;
     z-index: 999;
     overflow: hidden;
-    border-right: 1px solid rgba(0, 0, 0, 0.12);
+    // min-width: 260px;
+    // max-width: 400px;
+    // border-right: 1px solid rgba(0, 0, 0, 0.12);
 
     // reset element-ui css
     .horizontal-collapse-transition {