fix: #3286

src/components/layout/Aside.vue

@@ -39,28 +39,35 @@ function findMenu(path: string, menus: IMenuItem[]) {
     <nav class="menu">
       <ul>
         <li v-for="item in menus" :key="item.path" :class="{ 'is-active': item.path === currentMenu?.path }">
-          <el-tooltip :content="item.name" placement="right">
+          <div class="menu-item">
+            <template v-if="item.children">
+              <RouterLink :to="item.path">
+                <component :is="item.icon" class="menu-icon"></component>
+              </RouterLink>
+            </template>
+            <el-tooltip :content="item.name" placement="right" v-else>
               <RouterLink :to="item.path">
                 <component :is="item.icon" class="menu-icon"></component>
               </RouterLink>
             </el-tooltip>
-        </li>
-      </ul>
-    </nav>
-    <nav class="submenu" v-if="currentMenu?.children?.length">
-      <h1 class="submenu-title">{{ currentMenu.name }}</h1>
+          </div>
+          <nav class="submenu" v-if="item.children">
+            <h1 class="submenu-title">{{ item.name }}</h1>
             <ul>
               <li
-          v-for="item in currentMenu.children"
-          :key="item.path"
-          :class="{ 'is-active': item.path === currentSubmenu?.path }">
-          <RouterLink :to="item.path">
-            <component :is="item.icon" class="submenu-icon" v-if="item.icon"></component>
-            {{ item.name }}
+                v-for="submenu in item.children"
+                :key="submenu.path"
+                :class="{ 'is-active': submenu.path === currentSubmenu?.path }">
+                <RouterLink :to="submenu.path">
+                  <component :is="submenu.icon" class="submenu-icon" v-if="submenu.icon"></component>
+                  {{ submenu.name }}
                 </RouterLink>
               </li>
             </ul>
           </nav>
+        </li>
+      </ul>
+    </nav>
   </aside>
 </template>
 
@@ -70,18 +77,19 @@ function findMenu(path: string, menus: IMenuItem[]) {
   top: 0;
   display: flex;
   height: 100vh;
-  overflow-x: hidden;
-  overflow-y: auto;
+  // overflow-x: hidden;
+  // overflow-y: auto;
   box-sizing: content-box;
+  z-index: 2001;
   .menu {
     width: 60px;
     height: 100%;
     background: #fff;
     box-sizing: border-box;
-    overflow-y: auto;
-    overflow-x: hidden;
-    li {
-      margin: 8px;
+    > ul > li {
+      padding: 8px;
+    }
+    .menu-item {
       height: 44px;
       text-align: center;
       border-radius: 4px;
@@ -90,10 +98,10 @@ function findMenu(path: string, menus: IMenuItem[]) {
         display: flex;
         align-items: center;
         justify-content: center;
-      }
         svg {
           fill: var(--main-color);
         }
+      }
 
       &.is-active {
         background-color: var(--main-color);
@@ -102,8 +110,17 @@ function findMenu(path: string, menus: IMenuItem[]) {
         }
       }
     }
+    > ul > li:hover {
+      .submenu {
+        display: block;
+      }
+    }
   }
   .submenu {
+    display: none;
+    position: absolute;
+    left: 100%;
+    top: 0;
     width: 200px;
     height: 100vh;
     background: #efefef;