From 5cff73bcafc27a36f111949d33f463dd2bb52571 Mon Sep 17 00:00:00 2001
From: vben <anncwb@126.com>
Date: Thu, 22 Oct 2020 22:39:40 +0800
Subject: [PATCH] fix: fix the problem of collapsed display when the menu has
 no child nodes

---
 src/components/Menu/src/index.less       | 10 ++--
 src/layouts/default/LayoutBreadcrumb.tsx | 58 ++++++++++++------------
 2 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/src/components/Menu/src/index.less b/src/components/Menu/src/index.less
index e6fcec7c7..74fce6c21 100644
--- a/src/components/Menu/src/index.less
+++ b/src/components/Menu/src/index.less
@@ -248,15 +248,15 @@
     }
 
     &.ant-menu-inline-collapsed {
-      .ant-menu-submenu-selected,
-      .ant-menu-item-selected {
-        .active-style();
-      }
-
       .ant-menu-item-selected {
         background: unset !important;
         box-shadow: none;
       }
+
+      .ant-menu-submenu-selected,
+      .ant-menu-item-selected {
+        .active-style();
+      }
     }
   }
 
diff --git a/src/layouts/default/LayoutBreadcrumb.tsx b/src/layouts/default/LayoutBreadcrumb.tsx
index 3655eedcc..06a1653ce 100644
--- a/src/layouts/default/LayoutBreadcrumb.tsx
+++ b/src/layouts/default/LayoutBreadcrumb.tsx
@@ -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>
     );
   },
 });