优化一些细节

src/assets/scss/common-dai.scss

@@ -478,7 +478,7 @@ img {
     bottom: 0;
     z-index: 1020;
     width: $sidebar--width + $sidebar--width-fold;
-    overflow: hidden;
+    // overflow: hidden;
     transition: width 0.3s;
     background-color: transparent;
 

src/views/main-sidebar-sub-menu.vue

@@ -15,7 +15,7 @@
         >
           <use :xlink:href="`#${menu.icon}`" />
         </svg>
-        <span>{{ menu.name }}</span>
+        <span :title="menu.name">{{ menu.name }}</span>
       </template>
       <sub-menu
         :root="false"
@@ -29,7 +29,7 @@
       <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
         <use :xlink:href="`#${menu.icon}`" />
       </svg>
-      <span>{{ menu.name }}</span>
+      <span :title="menu.name">{{ menu.name }}</span>
     </el-menu-item>
   </div>
 </template>
@@ -69,3 +69,11 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+@import "~@/assets/scss/c/function.scss";
+
+/deep/ .el-menu-item {
+  @include toe;
+}
+</style>

src/views/main-sidebar.vue

@@ -3,7 +3,7 @@
     <aside :class="['aui-sidebar', 'g-sd']">
       <div class="m-nav">
         <div class="nav">
-          <div class="nav-item" @click="toIndexPage">
+          <div class="nav-item" @click="toIndexPage" v-if="false">
             <span>全部菜单</span>
           </div>
 
@@ -15,7 +15,11 @@
             :key="menu.id"
             @click="gotoRouteHandle(menu.id, idx)"
           >
-            <svg class="icon-svg aui-sidebar__menu-icon" aria-hidden="true">
+            <svg
+              v-if="menu.icon"
+              class="icon-svg aui-sidebar__menu-icon"
+              aria-hidden="true"
+            >
               <use :xlink:href="`#${menu.icon}`" />
             </svg>
             <span>{{ menu.name }}</span>
@@ -27,6 +31,15 @@
         </div>
       </div>
 
+      <div
+        class="m-folder"
+        v-show="$store.state.sidebarActiveSubMenuList.length != 0"
+        @click="$store.state.sidebarFold = !$store.state.sidebarFold"
+      >
+        <i class="el-icon-s-fold" v-show="!$store.state.sidebarFold"></i>
+        <i class="el-icon-s-unfold" v-show="$store.state.sidebarFold"></i>
+      </div>
+
       <div
         class="aui-sidebar_wrap"
         v-show="$store.state.sidebarActiveSubMenuList.length != 0"
@@ -105,6 +118,25 @@ export default {
   display: flex;
 }
 
+/deep/ .m-folder {
+  position: absolute;
+  z-index: 100;
+  top: 50px;
+  right: -16px;
+  width: 32px;
+  height: 32px;
+  background: #ffffff;
+  box-shadow: 0px 5px 12px 4px rgba(0, 0, 0, 0.09),
+    0px 3px 6px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px -2px rgba(0, 0, 0, 0.16);
+  line-height: 32px;
+  font-size: 18px;
+  text-align: center;
+  color: #666;
+  border-radius: 100%;
+  overflow: hidden;
+  cursor: pointer;
+}
+
 /deep/ .m-nav {
   box-sizing: border-box;
   padding: 25px 0;
@@ -120,11 +152,11 @@ export default {
       padding: 11px 0 9px 0;
       cursor: pointer;
       .icon-svg {
-        font-size: 18px;
-        margin-bottom: 6px;
+        font-size: 22px;
       }
       span {
         display: block;
+        line-height: 30px;
       }
       &:hover,
       &.z-on {

src/views/main.vue

@@ -5,7 +5,9 @@
     :class="[
       'aui-wrapper',
       {
-        'aui-sidebar--fold': $store.state.sidebarActiveSubMenuList.length == 0,
+        'aui-sidebar--fold':
+          $store.state.sidebarActiveSubMenuList.length == 0 ||
+          $store.state.sidebarFold,
       },
       {
         'aui-sidebar--noside': $store.state.inIframe,