fix: fix the problem of collapsed display when the menu has no child nodes

vben
1 parent 88de82c4
Showing 2 changed files with 32 additions and 34 deletions
src/components/Menu/src/index.less
src/layouts/default/LayoutBreadcrumb.tsx
@@ -248,14 +248,14 @@
     }
  
     &.ant-menu-inline-collapsed {
-      .ant-menu-submenu-selected,
       .ant-menu-item-selected {
-        .active-style();
+        background: unset !important;
+        box-shadow: none;
       }
  
+      .ant-menu-submenu-selected,
       .ant-menu-item-selected {
-        background: unset !important;
-        box-shadow: none;
+        .active-style();
       }
     }
   }
@@ -46,11 +46,13 @@ export default defineComponent({
       if (homeRoute.name === firstItem.name) return false;
       return homeRoute;
     }
+
     function pathCompile(path: string) {
       const { params } = unref(currentRoute);
       const toPath = compile(path);
       return toPath(params);
     }
+
     function handleItemClick(item: AppRouteRecordRaw) {
       const { redirect, path, meta } = item;
       if (meta.disabledRedirect) return;
@@ -71,37 +73,33 @@ export default defineComponent({
     );
  
     return () => (
-      <>
-        <Breadcrumb class="layout-breadcrumb">
-          {() => (
-            <>
-              <TransitionGroup name="breadcrumb">
-                {() => {
-                  return unref(itemList).map((item) => {
-                    const isLink = !!item.redirect && !item.meta.disabledRedirect;
-                    return (
-                      <BreadcrumbItem
-                        key={item.path}
-                        isLink={isLink}
-                        onClick={handleItemClick.bind(null, item)}
-                      >
-                        {() => (
-                          <>
-                            {props.showIcon && item.meta.icon && item.meta.icon.trim() !== '' && (
-                              <Icon icon={item.meta.icon} class="icon mr-1 mb-1" />
-                            )}
-                            {item.meta.title}
-                          </>
+      <Breadcrumb class="layout-breadcrumb">
+        {() => (
+          <TransitionGroup name="breadcrumb">
+            {() => {
+              return unref(itemList).map((item) => {
+                const isLink = !!item.redirect && !item.meta.disabledRedirect;
+                return (
+                  <BreadcrumbItem
+                    key={item.path}
+                    isLink={isLink}
+                    onClick={handleItemClick.bind(null, item)}
+                  >
+                    {() => (
+                      <>
+                        {props.showIcon && item.meta.icon && item.meta.icon.trim() !== '' && (
+                          <Icon icon={item.meta.icon} class="icon mr-1 mb-1" />
                         )}
-                      </BreadcrumbItem>
-                    );
-                  });
-                }}
-              </TransitionGroup>
-            </>
-          )}
-        </Breadcrumb>
-      </>
+                        {item.meta.title}
+                      </>
+                    )}
+                  </BreadcrumbItem>
+                );
+              });
+            }}
+          </TransitionGroup>
+        )}
+      </Breadcrumb>
     );
   },
 });