From 24cf79956f5078f5c68320036c2af01f5cb36fe9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=9F=E8=B4=A4?= <qixian.cs@antgroup.com>
Date: Mon, 23 Oct 2023 15:57:36 +0800
Subject: [PATCH] fix(layout): fix layout menu align error

---
 packages/layout/src/ProLayout.tsx                     | 4 +++-
 packages/layout/src/components/Help/ProHelpPanel.tsx  | 2 +-
 packages/layout/src/components/SiderMenu/BaseMenu.tsx | 7 +++++--
 packages/layout/src/components/TopNavHeader/index.tsx | 3 ++-
 tests/layout/index.test.tsx                           | 2 +-
 5 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/layout/src/ProLayout.tsx b/packages/layout/src/ProLayout.tsx
index 6fb99194507d..38dd46c2ae0b 100644
--- a/packages/layout/src/ProLayout.tsx
+++ b/packages/layout/src/ProLayout.tsx
@@ -721,7 +721,9 @@ const BaseProLayout: React.FC<ProLayoutProps> = (props) => {
    * 使用number是因为多标签页的时候有多个 PageContainer，只有有任意一个就应该展示这个className
    */
   const [hasPageContainer, setHasPageContainer] = useState(0);
+
   useDocumentTitle(pageTitleInfo, props.title || false);
+
   const bgImgStyleList = useMemo(() => {
     if (bgLayoutImgList && bgLayoutImgList.length > 0) {
       return bgLayoutImgList.map((item, index) => {
@@ -789,7 +791,7 @@ const BaseProLayout: React.FC<ProLayoutProps> = (props) => {
                       token.layout?.sider?.colorMenuBackground || 'transparent',
                     colorSubItemBg:
                       token.layout?.sider?.colorMenuBackground || 'transparent',
-                    radiusItem: 4,
+                    radiusItem: token.borderRadius,
                     controlHeightLG:
                       token.layout?.sider?.menuHeight || token?.controlHeightLG,
                     colorItemBgSelected:
diff --git a/packages/layout/src/components/Help/ProHelpPanel.tsx b/packages/layout/src/components/Help/ProHelpPanel.tsx
index 6724399a809d..eb59cb337668 100644
--- a/packages/layout/src/components/Help/ProHelpPanel.tsx
+++ b/packages/layout/src/components/Help/ProHelpPanel.tsx
@@ -231,7 +231,7 @@ export const ProHelpPanel: React.FC<ProHelpPanelProps> = ({
                     lineHeight: 1.2,
                     controlHeightLG: 26,
                     fontSize: 12,
-                    radiusItem: 4,
+                    radiusItem: token.borderRadius,
                     colorActiveBarWidth: 0,
                     colorActiveBarBorderSize: 0,
                     colorItemBgSelected:
diff --git a/packages/layout/src/components/SiderMenu/BaseMenu.tsx b/packages/layout/src/components/SiderMenu/BaseMenu.tsx
index ca50e196f324..e1beae3ad5e9 100644
--- a/packages/layout/src/components/SiderMenu/BaseMenu.tsx
+++ b/packages/layout/src/components/SiderMenu/BaseMenu.tsx
@@ -277,8 +277,6 @@ class MenuUtil {
         ? subMenuItemRender({ ...item, isUrl: false }, defaultTitle, this.props)
         : defaultTitle;
 
-      const childrenList = this.getNavMenuItems(children, level + 1);
-
       // 如果收起来，没有子菜单了，就不需要展示 group，所以 level 不增加
       if (
         isGroup &&
@@ -289,6 +287,11 @@ class MenuUtil {
         return this.getNavMenuItems(children, level);
       }
 
+      const childrenList = this.getNavMenuItems(
+        children,
+        isGroup && level === 0 ? level : level + 1,
+      );
+
       return [
         {
           type: menuType,
diff --git a/packages/layout/src/components/TopNavHeader/index.tsx b/packages/layout/src/components/TopNavHeader/index.tsx
index 6df3f9097090..8e8b49ae236e 100644
--- a/packages/layout/src/components/TopNavHeader/index.tsx
+++ b/packages/layout/src/components/TopNavHeader/index.tsx
@@ -68,7 +68,7 @@ const TopNavHeader: React.FC<TopNavHeaderProps> = (
                   token.layout?.header?.colorBgHeader || 'transparent',
                 colorSubItemBg:
                   token.layout?.header?.colorBgHeader || 'transparent',
-                radiusItem: 4,
+                radiusItem: token.borderRadius,
                 colorItemBgSelected:
                   token.layout?.header?.colorBgMenuItemSelected ||
                   token?.colorBgTextHover,
@@ -139,6 +139,7 @@ const TopNavHeader: React.FC<TopNavHeaderProps> = (
     token.layout?.header?.colorTextMenuActive,
     token.layout?.header?.colorTextMenuSelected,
     token.layout?.header?.colorBgMenuElevated,
+    token.borderRadius,
     token?.colorBgTextHover,
     token?.colorTextSecondary,
     token?.colorText,
diff --git a/tests/layout/index.test.tsx b/tests/layout/index.test.tsx
index 383f8699de2c..248784b05815 100644
--- a/tests/layout/index.test.tsx
+++ b/tests/layout/index.test.tsx
@@ -407,7 +407,7 @@ describe('BasicLayout', () => {
     await waitForWaitTime(100);
     expect(
       wrapper.baseElement.querySelectorAll('.ant-menu-item-group-title').length,
-    ).toBe(2);
+    ).toBe(3);
     expect(
       wrapper.baseElement.querySelectorAll('.ant-pro-sider-actions-collapsed')
         .length,