diff --git a/packages/layout/src/components/SiderMenu/BaseMenu.tsx b/packages/layout/src/components/SiderMenu/BaseMenu.tsx index adb05c494db4..fb1c1df67a60 100644 --- a/packages/layout/src/components/SiderMenu/BaseMenu.tsx +++ b/packages/layout/src/components/SiderMenu/BaseMenu.tsx @@ -354,7 +354,7 @@ class MenuUtil { } = this.props; // if local is true formatMessage all name。 - const name = this.getIntlName(item); + const menuItemTitle = this.getIntlName(item); const { baseClassName, menu, collapsed } = this.props; const isGroup = menu?.type === 'group'; /** Menu 第一级可以有icon,或者 isGroup 时第二级别也要有 */ @@ -366,47 +366,45 @@ class MenuUtil { iconPrefixes, `${baseClassName}-icon ${this.props?.hashId}`, ); - const defaultIcon = collapsed && hasIcon ? getMenuTitleSymbol(name) : null; + + // 如果没有 icon 在收起的时候用首字母代替 + const defaultIcon = + collapsed && hasIcon ? getMenuTitleSymbol(menuItemTitle) : null; + let defaultItem = ( - -
+ {icon || {defaultIcon}} + + - - {icon || {defaultIcon}} - - - {name} - -
-
+ {menuItemTitle} + + ); const isHttpUrl = isUrl(itemPath); @@ -447,7 +445,7 @@ class MenuUtil { }, )} > - {name} + {menuItemTitle} ); @@ -462,9 +460,25 @@ class MenuUtil { onClick: () => onCollapse && onCollapse(true), children: undefined, }; - return menuItemRender(renderItemProps, defaultItem, this.props); + return ( + + {menuItemRender(renderItemProps, defaultItem, this.props)} + + ); } - return defaultItem; + return ( + + {defaultItem} + + ); }; conversionPath = (path: string) => { diff --git a/packages/layout/src/components/SiderMenu/style/menu.ts b/packages/layout/src/components/SiderMenu/style/menu.ts index 6dcb7908ecf3..dde01c70aee4 100644 --- a/packages/layout/src/components/SiderMenu/style/menu.ts +++ b/packages/layout/src/components/SiderMenu/style/menu.ts @@ -37,6 +37,10 @@ const genProLayoutBaseMenuStyle: GenerateStyle = ( width: '100%', }, }, + [`${token.componentCls}-item-icon`]: { + display: 'flex', + alignItems: 'center', + }, [`&&-collapsed`]: { [`${token.antCls}-menu-item, ${token.antCls}-menu-item-group > ${token.antCls}-menu-item-group-list > ${token.antCls}-menu-item, diff --git a/tests/layout/__snapshots__/index.test.tsx.snap b/tests/layout/__snapshots__/index.test.tsx.snap index e28ffcd4a565..b8d70935fc03 100644 --- a/tests/layout/__snapshots__/index.test.tsx.snap +++ b/tests/layout/__snapshots__/index.test.tsx.snap @@ -1500,7 +1500,7 @@ exports[`BasicLayout 🥩 mix layout hideInMenu render right 1`] = ` class="ant-pro-base-menu-inline-item-title" >