fix: collapsed menu DOM and submenu indicators

src/form/components/ColorPicker/index.tsx

@@ -1,15 +1,17 @@
-import type { PopoverProps, ColorPickerProps } from 'antd';
+import type { PopoverProps } from 'antd';
 import React from 'react';
 import { FieldColorPicker } from '../../../field';
 import { ProConfigProvider } from '../../../provider';
 import type { ProFormFieldItemProps } from '../../typing';
 import ProFromField from '../Field';
 
-export type ProFormColorPickerProps =
-  ProFormFieldItemProps<ColorPickerProps> & {
-    popoverProps?: PopoverProps;
-    colors?: string[];
-  };
+/** 使用宽松字段类型，避免 d.ts 生成时拉入 `@rc-component/color-picker` 导致 TS2742 */
+export type ProFormColorPickerProps = ProFormFieldItemProps<
+  Record<string, unknown>
+> & {
+  popoverProps?: PopoverProps;
+  colors?: string[];
+};
 
 /**
  * 颜色选择组件

src/layout/components/SiderMenu/BaseMenu.tsx

@@ -3,6 +3,8 @@ import { useControlledState } from '@rc-component/util';
 import { ConfigProvider, Skeleton, Tooltip } from 'antd';
 import { clsx } from 'clsx';
 import React, {
+  cloneElement,
+  isValidElement,
   useCallback,
   useContext,
   useEffect,
@@ -55,6 +57,34 @@ const MenuItemTooltip = (props: {
     return props.children as React.JSX.Element;
   }
 
+  /** 展开或过渡中：不包 Tooltip，避免多一层触发器 DOM */
+  if (!props.collapsed) {
+    return <>{props.children}</>;
+  }
+
+  const simpleTitle =
+    typeof props.title === 'string' || typeof props.title === 'number';
+
+  if (simpleTitle && isValidElement(props.children)) {
+    const t = String(props.title);
+    return cloneElement(props.children, {
+      title: t,
+      'aria-label': t,
+    } as React.HTMLAttributes<HTMLElement>);
+  }
+
+  if (simpleTitle) {
+    return (
+      <span
+        data-pro-layout-menu-item-title-wrap
+        title={String(props.title)}
+        aria-label={String(props.title)}
+      >
+        {props.children}
+      </span>
+    );
+  }
+
   return (
     <Tooltip
       title={props.title}

src/layout/components/SiderMenu/ProLayoutNavMenu.tsx

@@ -1,3 +1,4 @@
+import { DownOutlined, RightOutlined } from '@ant-design/icons';
 import { clsx } from 'clsx';
 import type { CSSProperties, HTMLAttributes } from 'react';
 import React, {
@@ -17,6 +18,50 @@ const MENU_INDENT_PX = 16;
 
 const keyToString = (key: string | number) => String(key);
 
+type SubmenuExpandVariant = 'inline' | 'popup-horizontal' | 'popup-vertical';
+
+function getSubmenuExpandVariant(ctx: {
+  popupMode: boolean;
+  mode: MenuMode;
+}): SubmenuExpandVariant {
+  if (!ctx.popupMode) return 'inline';
+  return ctx.mode === 'horizontal' ? 'popup-horizontal' : 'popup-vertical';
+}
+
+function renderSubmenuTitleContent(
+  ctx: Pick<
+    ProLayoutNavMenuRenderContext,
+    'baseClassName' | 'hashId' | 'mode' | 'popupMode'
+  >,
+  isOpen: boolean,
+  label: React.ReactNode,
+) {
+  const { baseClassName, hashId } = ctx;
+  const variant = getSubmenuExpandVariant(ctx);
+  const Icon =
+    variant === 'popup-horizontal' ? DownOutlined : RightOutlined;
+  return (
+    <>
+      <span className={clsx(`${baseClassName}-submenu-title-inner`, hashId)}>
+        {label}
+      </span>
+      <span
+        className={clsx(`${baseClassName}-submenu-expand-icon`, hashId, {
+          [`${baseClassName}-submenu-expand-icon--open`]: isOpen,
+          [`${baseClassName}-submenu-expand-icon--inline`]: variant === 'inline',
+          [`${baseClassName}-submenu-expand-icon--popup-horizontal`]:
+            variant === 'popup-horizontal',
+          [`${baseClassName}-submenu-expand-icon--popup-vertical`]:
+            variant === 'popup-vertical',
+        })}
+        aria-hidden
+      >
+        <Icon />
+      </span>
+    </>
+  );
+}
+
 export type ProLayoutNavMenuProps = {
   baseClassName: string;
   hashId: string;
@@ -183,7 +228,7 @@ function renderPopup(
     isOpen && typeof document !== 'undefined' ? (
       createPortal(
         <ul
-          ref={popupPanelRef}
+          ref={popupPanelRef as React.Ref<HTMLUListElement>}
           id={`${rootId}-popup-${node.key}`}
           role="menu"
           aria-labelledby={`${rootId}-submenu-${node.key}`}
@@ -238,7 +283,7 @@ function renderPopup(
           }
         }}
       >
-        {node.label}
+        {renderSubmenuTitleContent(ctx, isOpen, node.label)}
       </button>
       {popupPanel}
     </React.Fragment>
@@ -279,7 +324,7 @@ function renderInlineSubmenu(
           }
         }}
       >
-        {node.label}
+        {renderSubmenuTitleContent(ctx, isOpen, node.label)}
       </button>
       {isOpen ? (
         <ul

src/layout/components/SiderMenu/style/menu.ts

@@ -1,3 +1,4 @@
+import type { CSSInterpolation } from '@ant-design/cssinjs';
 import type { CSSProperties } from 'react';
 import type { GenerateStyle } from '../../../../provider';
 import { useStyle as useAntdStyle } from '../../../../provider';
@@ -86,7 +87,7 @@ function layoutNavCssVars(surface: 'sider' | 'header'): Record<string, string> {
       [navVar.itemHeight]: `${itemH}px`,
       [navVar.itemRadius]: '6px',
       [navVar.itemGap]: '8px',
-      [navVar.itemFontSize]: 'calc(var(--ant-font-size) + 1px)',
+      [navVar.itemFontSize]: '14px',
       [navVar.itemFontWeight]: '500',
       [navVar.itemPadBlock]: '6px',
       [navVar.itemPadInline]: `${padInline}px`,
@@ -184,8 +185,27 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
       [`${c}-item`]: {
         listStyle: 'none',
         ...rowItem,
-        /** 标题区（icon+文案）直接作为子节点，省一层 wrapper */
-        [`> *`]: {
+        /** 只对标题根节点拉伸，避免 Tooltip 等外包层占满一行导致收起态比图标大 */
+        [`> ${c}-item-title`]: {
+          flex: 1,
+          minWidth: 0,
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: v('itemGap'),
+        },
+        /** `menuItemRender` 常见为 `<Link><defaultDom/></Link>` */
+        [`> a`]: {
+          flex: 1,
+          minWidth: 0,
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: v('itemGap'),
+          color: 'inherit',
+          textDecoration: 'none',
+        },
+        [`> [data-pro-layout-menu-item-title-wrap]`]: {
           flex: 1,
           minWidth: 0,
           display: 'flex',
@@ -217,15 +237,47 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
       [`${c}-submenu-title`]: {
         ...rowItem,
         font: 'inherit',
-        /** 子菜单标题内联 DOM（与 leaf 一致） */
-        [`> *`]: {
+        /** 文案区（含 icon+文本）；右侧为展开指示器 */
+        [`${c}-submenu-title-inner`]: {
           flex: 1,
           minWidth: 0,
           display: 'flex',
           flexDirection: 'row',
           alignItems: 'center',
           gap: v('itemGap'),
+          [`> *`]: {
+            flex: 1,
+            minWidth: 0,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: v('itemGap'),
+          },
         },
+        [`${c}-submenu-expand-icon`]: {
+          display: 'inline-flex',
+          flexShrink: 0,
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginInlineStart: 'auto',
+          color: v('colorIcon'),
+          fontSize: 10,
+          lineHeight: 0,
+          transition: 'transform 0.2s ease',
+          '& > span': { lineHeight: 0 },
+        },
+        [`${c}-submenu-expand-icon${c}-submenu-expand-icon--popup-horizontal${c}-submenu-expand-icon--open`]:
+          {
+            transform: 'rotate(180deg)',
+          },
+        [`${c}-submenu-expand-icon${c}-submenu-expand-icon--inline${c}-submenu-expand-icon--open`]:
+          {
+            transform: 'rotate(90deg)',
+          },
+        [`${c}-submenu-expand-icon${c}-submenu-expand-icon--popup-vertical${c}-submenu-expand-icon--open`]:
+          {
+            transform: 'rotate(90deg)',
+          },
         '&:hover': {
           backgroundColor: v('colorBgHover'),
           color: v('colorTextHover'),
@@ -304,10 +356,13 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
           whiteSpace: 'nowrap',
         },
         '&-collapsed': {
-          minWidth: v('itemHeight'),
+          width: 'fit-content',
+          maxWidth: '100%',
+          minWidth: v('iconBox'),
           height: v('itemHeight'),
           flexDirection: 'column',
-          justifyContent: 'center',
+          justifyContent: 'flex-start',
+          alignItems: 'flex-start',
           [`${c}-item-icon`]: {
             width: v('iconBox'),
             height: v('iconBox'),
@@ -316,7 +371,7 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
         },
         '&-collapsed-level-0': {
           flexDirection: 'column',
-          justifyContent: 'center',
+          justifyContent: 'flex-start',
         },
         [`&${c}-group-item-title`]: {
           gap: v('itemGap'),
@@ -329,10 +384,10 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
           [`&${c}-item-title-collapsed`]: {
             display: 'flex',
             flexDirection: 'column',
-            alignItems: 'center',
+            alignItems: 'flex-start',
             [`${c}-item-text`]: {
               display: 'inline',
-              textAlign: 'center',
+              textAlign: 'start',
               fontSize: 'calc(var(--ant-font-size, 14px) - 1px)',
               maxHeight: 12,
               lineHeight: '12px',
@@ -409,7 +464,7 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
           paddingInlineEnd: 0,
         },
         [`${c}-item-title`]: {
-          width: '100%',
+          width: 'fit-content',
           maxWidth: '100%',
           overflow: 'visible',
         },
@@ -432,19 +487,6 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
       gap: v('stackGap'),
     },
 
-    /** vertical（侧栏收起）下标题区收窄为 20px 宽，便于在窄侧栏内居中 */
-    ...(mode === 'vertical'
-      ? {
-          [`&--collapsed ${c}-item-title-collapsed`]: {
-            width: 20,
-            minWidth: 20,
-            maxWidth: 20,
-            marginInline: 'auto',
-            alignSelf: 'center',
-          },
-        }
-      : {}),
-
     [`${c}--horizontal`]: {
       display: 'flex',
       flexDirection: 'row',
@@ -489,7 +531,7 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
     },
 
     [`${c}-link`]: { display: 'block' },
-  };
+  } as CSSInterpolation;
 };
 
 export function useStyle(prefixCls: string, mode: MenuMode | undefined) {