fix(layout): fix layout menu align error

ant-design · Oct 23, 2023 · 24cf799 · 24cf799
1 parent 478c333
commit 24cf799
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,