refactor(menu): added component. Solve the menu stuck problem

src/layouts/default/header/index.vue

@@ -142,7 +142,7 @@
       });
 
       const getLogoWidth = computed(() => {
-        if (!unref(getIsMixMode)) {
+        if (!unref(getIsMixMode) || unref(getIsMobile)) {
           return {};
         }
         const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);

src/layouts/default/menu/index.tsx

@@ -4,6 +4,7 @@ import type { PropType, CSSProperties } from 'vue';
 
 import { computed, defineComponent, unref, toRef } from 'vue';
 import { BasicMenu } from '/@/components/Menu';
+import { SimpleMenu } from '/@/components/SimpleMenu';
 import { AppLogo } from '/@/components/Application';
 
 import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
@@ -126,7 +127,18 @@ export default defineComponent({
     }
 
     function renderMenu() {
-      return (
+      const menus = unref(menusRef);
+      if (!menus || !menus.length) return null;
+      return !props.isHorizontal ? (
+        <SimpleMenu
+          items={menus}
+          theme={unref(getComputedMenuTheme)}
+          accordion={unref(getAccordion)}
+          collapse={unref(getCollapsed)}
+          collapsedShowTitle={unref(getCollapsedShowTitle)}
+          onMenuClick={handleMenuClick}
+        />
+      ) : (
         <BasicMenu
           beforeClickFn={beforeMenuClickFn}
           isHorizontal={props.isHorizontal}
@@ -135,7 +147,7 @@ export default defineComponent({
           showLogo={unref(getIsShowLogo)}
           mode={unref(getComputedMenuMode)}
           theme={unref(getComputedMenuTheme)}
-          items={unref(menusRef)}
+          items={menus}
           accordion={unref(getAccordion)}
           onMenuClick={handleMenuClick}
         />

src/layouts/default/menu/useLayoutMenu.ts

@@ -40,7 +40,12 @@ export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
     async ([path]: [string, MenuSplitTyeEnum]) => {
       if (unref(splitNotLeft) || unref(getIsMobile)) return;
 
-      const parentPath = await getCurrentParentPath(path);
+      const { meta } = unref(currentRoute);
+      const currentActiveMenu = meta.currentActiveMenu;
+      let parentPath = await getCurrentParentPath(path);
+      if (!parentPath) {
+        parentPath = await getCurrentParentPath(currentActiveMenu);
+      }
       parentPath && throttleHandleSplitLeftMenu(parentPath);
     },
     {
@@ -67,11 +72,15 @@ export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
 
   // Handle left menu split
   async function handleSplitLeftMenu(parentPath: string) {
+    console.log('======================');
+    console.log(unref(getSplitLeft));
+    console.log('======================');
     if (unref(getSplitLeft) || unref(getIsMobile)) return;
 
     // spilt mode left
     const children = await getChildrenMenus(parentPath);
-    if (!children) {
+
+    if (!children || !children.length) {
       setMenuSetting({ hidden: true });
       menusRef.value = [];
       return;

src/layouts/default/sider/MixSider.vue

@@ -61,9 +61,7 @@
         />
       </div>
       <ScrollContainer :class="`${prefixCls}-menu-list__content`">
-        <BasicMenu
-          :isHorizontal="false"
-          mode="inline"
+        <SimpleMenu
           :items="chilrenMenus"
           :theme="getMenuTheme"
           mixSider
@@ -85,7 +83,7 @@
 
   import { defineComponent, onMounted, ref, computed, unref } from 'vue';
 
-  import { BasicMenu, MenuTag } from '/@/components/Menu';
+  import { MenuTag } from '/@/components/Menu';
   import { ScrollContainer } from '/@/components/Container';
   import Icon from '/@/components/Icon';
   import { AppLogo } from '/@/components/Application';
@@ -103,13 +101,14 @@
   import clickOutside from '/@/directives/clickOutside';
   import { getShallowMenus, getChildrenMenus, getCurrentParentPath } from '/@/router/menus';
   import { listenerLastChangeTab } from '/@/logics/mitt/tabChange';
+  import { SimpleMenu } from '/@/components/SimpleMenu';
 
   export default defineComponent({
     name: 'LayoutMixSider',
     components: {
       ScrollContainer,
       AppLogo,
-      BasicMenu,
+      SimpleMenu,
       MenuTag,
       Icon,
       Trigger,
@@ -335,6 +334,7 @@
 <style lang="less">
   @prefix-cls: ~'@{namespace}-layout-mix-sider';
   @tag-prefix-cls: ~'@{namespace}-basic-menu-item-tag';
+  @menu-prefix-cls: ~'@{namespace}-menu';
   @width: 80px;
   .@{prefix-cls} {
     position: fixed;
@@ -351,6 +351,10 @@
       right: 2px;
     }
 
+    .@{menu-prefix-cls} {
+      width: 100% !important;
+    }
+
     &-dom {
       height: 100%;
       overflow: hidden;
@@ -392,6 +396,10 @@
         }
       }
       .@{prefix-cls}-menu-list {
+        &__content {
+          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
+        }
+
         &__title {
           .pushpin {
             color: rgba(0, 0, 0, 0.35);
@@ -578,10 +586,10 @@
 
     &-drag-bar {
       position: absolute;
-      top: 0;
-      right: -3px;
-      width: 3px;
-      height: 100%;
+      top: 50px;
+      right: -1px;
+      width: 1px;
+      height: calc(100% - 50px);
       cursor: ew-resize;
       background: #f8f8f9;
       border-top: none;