diff --git a/src/form/components/ColorPicker/index.tsx b/src/form/components/ColorPicker/index.tsx index 07bc39543646..6b1cfc8dc702 100644 --- a/src/form/components/ColorPicker/index.tsx +++ b/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 & { - popoverProps?: PopoverProps; - colors?: string[]; - }; +/** 使用宽松字段类型,避免 d.ts 生成时拉入 `@rc-component/color-picker` 导致 TS2742 */ +export type ProFormColorPickerProps = ProFormFieldItemProps< + Record +> & { + popoverProps?: PopoverProps; + colors?: string[]; +}; /** * 颜色选择组件 diff --git a/src/layout/components/SiderMenu/SiderMenu.tsx b/src/layout/components/SiderMenu/SiderMenu.tsx index ff983d1f4d3e..6c6c993e0d58 100644 --- a/src/layout/components/SiderMenu/SiderMenu.tsx +++ b/src/layout/components/SiderMenu/SiderMenu.tsx @@ -239,8 +239,8 @@ const SiderMenu: React.FC = (props) => { }, [isMobile, layout]); const baseClassName = `${resolvedPrefixCls}-sider`; - const linkMenuBaseClassName = `${resolvedPrefixCls}-base-menu-inline`; - useBaseMenuStyle(linkMenuBaseClassName, 'inline'); + const linkMenuBaseClassName = `${resolvedPrefixCls}-base-menu-sider`; + useBaseMenuStyle(linkMenuBaseClassName, 'vertical'); const siderCssVarsStyle = useMemo( () => getProLayoutSiderCssVarsStyle(), diff --git a/src/layout/components/SiderMenu/style/menu.ts b/src/layout/components/SiderMenu/style/menu.ts index 1c647240afe9..eaee7cd52fca 100644 --- a/src/layout/components/SiderMenu/style/menu.ts +++ b/src/layout/components/SiderMenu/style/menu.ts @@ -88,7 +88,7 @@ function layoutNavCssVars(surface: 'sider' | 'header'): Record { [navVar.itemRadius]: '6px', [navVar.itemGap]: '8px', [navVar.itemFontSize]: '14px', - [navVar.itemFontWeight]: '400', + [navVar.itemFontWeight]: '500', [navVar.itemPadBlock]: '6px', [navVar.itemPadInline]: `${padInline}px`, [navVar.stackGap]: `${stackGap}px`, @@ -305,10 +305,13 @@ const genProLayoutBaseMenuStyle: GenerateStyle = ( whiteSpace: 'nowrap', }, '&-collapsed': { - minWidth: v('itemHeight'), - height: v('itemHeight'), + width: 'fit-content', + maxWidth: '100%', + minWidth: v('iconBox'), + height: 'auto', flexDirection: 'column', - justifyContent: 'center', + justifyContent: 'flex-start', + alignItems: 'flex-start', [`${c}-item-icon`]: { width: v('iconBox'), height: v('iconBox'), @@ -317,7 +320,7 @@ const genProLayoutBaseMenuStyle: GenerateStyle = ( }, '&-collapsed-level-0': { flexDirection: 'column', - justifyContent: 'center', + justifyContent: 'flex-start', }, [`&${c}-group-item-title`]: { gap: v('itemGap'), @@ -330,10 +333,10 @@ const genProLayoutBaseMenuStyle: GenerateStyle = ( [`&${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', @@ -410,7 +413,7 @@ const genProLayoutBaseMenuStyle: GenerateStyle = ( paddingInlineEnd: 0, }, [`${c}-item-title`]: { - width: '100%', + width: 'fit-content', maxWidth: '100%', overflow: 'visible', }, @@ -418,13 +421,14 @@ const genProLayoutBaseMenuStyle: GenerateStyle = ( backgroundColor: v('colorBgSelected'), borderRadius: v('itemRadius'), }, - /** 侧栏收起:不展示分组标题,仅保留图标型菜单项 */ - [`${c}-group ${c}-group-title`]: { - display: 'none', - }, }, }, + /** 侧栏收起:不展示分组标题(完整选择器,避免嵌套编译差异) */ + [`${c}--collapsed ${c}-group ${c}-group-title`]: { + display: 'none', + }, + [`${c}:not(${c}--horizontal)`]: { display: 'flex', flexDirection: 'column', @@ -433,19 +437,6 @@ const genProLayoutBaseMenuStyle: GenerateStyle = ( 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', diff --git a/src/layout/components/SiderMenu/types.ts b/src/layout/components/SiderMenu/types.ts index ee451a9bcbbf..23f0e45ffbde 100644 --- a/src/layout/components/SiderMenu/types.ts +++ b/src/layout/components/SiderMenu/types.ts @@ -9,14 +9,9 @@ import type { } from './navMenuTypes'; /** - * 主导航渲染模式(与历史 antd Menu `mode` 命名对齐)。 + * 主导航渲染模式:顶栏 `horizontal`,侧栏 `vertical`(展开与收起均如此,收起时子菜单为弹出层)。 */ -export type MenuMode = - | 'vertical' - | 'vertical-left' - | 'vertical-right' - | 'horizontal' - | 'inline'; +export type MenuMode = 'vertical' | 'horizontal'; /** * 可合并到 `ProLayoutNavMenu` 根节点 `