@gx-design-vue/pro-layout 0.1.0-alpha.20 → 0.1.0-alpha.21

package/dist/components/Menu/style/index.js

@@ -0,0 +1,147 @@
+import genBaseStyle from "./base.js";
+import genHorizontalStyle from "./horizontal.js";
+import genInlineStyle from "./inline.js";
+import { proGenStyleHooks, setAlpha } from "@gx-design-vue/pro-provider";
+import { unit as unit$1 } from "@antdv-next/cssinjs";
+import { mergeToken } from "antdv-next/dist/theme/internal";
+//#region src/components/Menu/style/index.ts
+function hasActiveBarWidth(activeBarWidth) {
+	if (activeBarWidth == null) return false;
+	if (typeof activeBarWidth === "number") return activeBarWidth !== 0;
+	const width = activeBarWidth.trim();
+	if (!width) return false;
+	const numericWidth = Number.parseFloat(width);
+	return Number.isNaN(numericWidth) || numericWidth !== 0;
+}
+const prepareComponentToken = (token) => {
+	const { colorPrimary, colorError, colorTextDisabled, colorErrorBg, colorText, colorTextDescription, colorBgContainer, colorFillAlter, colorFillContent, lineWidth, lineWidthBold, controlItemBgActive, colorBgTextHover, controlHeightLG, lineHeight, colorBgElevated, marginXXS, padding, fontSize, controlHeightSM, fontSizeLG, colorTextLightSolid, colorErrorHover } = token;
+	const activeBarWidth = token.activeBarWidth ?? 0;
+	const activeBarBorderWidth = token.activeBarBorderWidth ?? lineWidth;
+	const itemMarginInline = token.itemMarginInline ?? token.marginXXS;
+	const colorTextDark = setAlpha(colorTextLightSolid, .65);
+	return {
+		dropdownWidth: 160,
+		zIndexPopup: token.zIndexPopupBase + 50,
+		radiusItem: token.borderRadiusLG,
+		itemBorderRadius: token.borderRadiusLG,
+		radiusSubMenuItem: token.borderRadiusSM,
+		subMenuItemBorderRadius: token.borderRadiusSM,
+		colorItemText: colorText,
+		itemColor: colorText,
+		colorItemTextHover: colorText,
+		itemHoverColor: colorText,
+		colorItemTextHoverHorizontal: colorPrimary,
+		horizontalItemHoverColor: colorPrimary,
+		colorGroupTitle: colorTextDescription,
+		groupTitleColor: colorTextDescription,
+		colorItemTextSelected: colorPrimary,
+		itemSelectedColor: colorPrimary,
+		subMenuItemSelectedColor: colorPrimary,
+		colorItemTextSelectedHorizontal: colorPrimary,
+		horizontalItemSelectedColor: colorPrimary,
+		colorItemBg: colorBgContainer,
+		itemBg: colorBgContainer,
+		colorItemBgHover: colorBgTextHover,
+		itemHoverBg: colorBgTextHover,
+		colorItemBgActive: colorFillContent,
+		itemActiveBg: controlItemBgActive,
+		colorSubItemBg: colorFillAlter,
+		subMenuItemBg: colorFillAlter,
+		colorItemBgSelected: controlItemBgActive,
+		itemSelectedBg: controlItemBgActive,
+		colorItemBgSelectedHorizontal: "transparent",
+		horizontalItemSelectedBg: "transparent",
+		colorActiveBarWidth: 0,
+		activeBarWidth,
+		colorActiveBarHeight: lineWidthBold,
+		activeBarHeight: lineWidthBold,
+		colorActiveBarBorderSize: lineWidth,
+		activeBarBorderWidth,
+		colorItemTextDisabled: colorTextDisabled,
+		itemDisabledColor: colorTextDisabled,
+		colorDangerItemText: colorError,
+		dangerItemColor: colorError,
+		colorDangerItemTextHover: colorError,
+		dangerItemHoverColor: colorError,
+		colorDangerItemTextSelected: colorError,
+		dangerItemSelectedColor: colorError,
+		colorDangerItemBgActive: colorErrorBg,
+		dangerItemActiveBg: colorErrorBg,
+		colorDangerItemBgSelected: colorErrorBg,
+		dangerItemSelectedBg: colorErrorBg,
+		itemMarginInline,
+		horizontalItemHoverBg: "transparent",
+		itemHeight: controlHeightLG,
+		groupTitleLineHeight: lineHeight,
+		collapsedWidth: controlHeightLG * 2,
+		popupBg: colorBgElevated,
+		itemMarginBlock: marginXXS,
+		itemPaddingInline: padding,
+		iconSize: fontSize,
+		iconMarginInlineEnd: controlHeightSM - fontSize,
+		collapsedIconSize: fontSizeLG,
+		groupTitleFontSize: fontSize,
+		darkItemDisabledColor: setAlpha(colorTextLightSolid, .25),
+		darkItemColor: colorTextDark,
+		darkDangerItemColor: colorError,
+		darkItemBg: "#001529",
+		darkPopupBg: "#001529",
+		darkSubMenuItemBg: "#000c17",
+		darkItemSelectedColor: colorTextLightSolid,
+		darkItemSelectedBg: colorPrimary,
+		darkDangerItemSelectedBg: colorError,
+		darkItemHoverBg: "transparent",
+		darkGroupTitleColor: colorTextDark,
+		darkItemHoverColor: colorTextLightSolid,
+		darkDangerItemHoverColor: colorErrorHover,
+		darkDangerItemSelectedColor: colorTextLightSolid,
+		darkDangerItemActiveBg: colorError,
+		horizontalLineHeight: `${controlHeightLG * 1.15}px`,
+		horizontalItemBorderRadius: 0,
+		itemWidth: hasActiveBarWidth(activeBarWidth) ? `calc(100% + ${unit$1(activeBarBorderWidth)})` : `calc(100% - ${itemMarginInline * 2}px)`
+	};
+};
+const genMenuStyle = (token) => {
+	const menuArrowSize = token.calc(token.fontSize).div(7).mul(5).equal();
+	const menuToken = mergeToken(token, {
+		menuArrowSize,
+		menuHorizontalHeight: token.calc(token.controlHeightLG).mul(1.15).equal(),
+		menuArrowOffset: token.calc(menuArrowSize).mul(.25).equal(),
+		menuSubMenuBg: token.colorBgElevated
+	});
+	return [
+		genBaseStyle(menuToken),
+		genInlineStyle(menuToken),
+		genHorizontalStyle(menuToken)
+	];
+};
+var style_default = proGenStyleHooks("ProMenu", genMenuStyle, prepareComponentToken, {
+	deprecatedTokens: [
+		["colorGroupTitle", "groupTitleColor"],
+		["radiusItem", "itemBorderRadius"],
+		["radiusSubMenuItem", "subMenuItemBorderRadius"],
+		["colorItemText", "itemColor"],
+		["colorItemTextHover", "itemHoverColor"],
+		["colorItemTextHoverHorizontal", "horizontalItemHoverColor"],
+		["colorItemTextSelected", "itemSelectedColor"],
+		["colorItemTextSelectedHorizontal", "horizontalItemSelectedColor"],
+		["colorItemTextDisabled", "itemDisabledColor"],
+		["colorDangerItemText", "dangerItemColor"],
+		["colorDangerItemTextHover", "dangerItemHoverColor"],
+		["colorDangerItemTextSelected", "dangerItemSelectedColor"],
+		["colorDangerItemBgActive", "dangerItemActiveBg"],
+		["colorDangerItemBgSelected", "dangerItemSelectedBg"],
+		["colorItemBg", "itemBg"],
+		["colorItemBgHover", "itemHoverBg"],
+		["colorSubItemBg", "subMenuItemBg"],
+		["colorItemBgActive", "itemActiveBg"],
+		["colorItemBgSelectedHorizontal", "horizontalItemSelectedBg"],
+		["colorActiveBarWidth", "activeBarWidth"],
+		["colorActiveBarHeight", "activeBarHeight"],
+		["colorActiveBarBorderSize", "activeBarBorderWidth"],
+		["colorItemBgSelected", "itemSelectedBg"]
+	],
+	unitless: { groupTitleLineHeight: true }
+});
+//#endregion
+export { style_default as default, prepareComponentToken };

package/dist/components/Menu/style/inline.d.ts

@@ -0,0 +1,13 @@
+import { MenuToken } from "./index.js";
+import { CSSObject } from "@antdv-next/cssinjs";
+import { GenerateStyle } from "antdv-next/dist/theme/internal";
+
+//#region src/components/Menu/style/inline.d.ts
+/**
+ * Inline 模式样式。
+ *
+ * 只处理 inline 模式结构、状态和侧边栏 token 映射。
+ */
+declare const genInlineStyle: GenerateStyle<MenuToken, CSSObject>;
+//#endregion
+export { genInlineStyle as default };

package/dist/components/Menu/style/{siderMenu.js → inline.js}

@@ -1,103 +1,14 @@
-import { proGenStyleHooks, setAlpha } from "@gx-design-vue/pro-provider";
-import { unit as unit$1 } from "@antdv-next/cssinjs";
-//#region src/components/Menu/style/siderMenu.ts
-function hasActiveBarWidth(activeBarWidth) {
-	if (activeBarWidth == null) return false;
-	if (typeof activeBarWidth === "number") return activeBarWidth !== 0;
-	const width = activeBarWidth.trim();
-	if (!width) return false;
-	const numericWidth = Number.parseFloat(width);
-	return Number.isNaN(numericWidth) || numericWidth !== 0;
-}
-const prepareComponentToken = (token) => {
-	const { colorPrimary, colorError, colorTextDisabled, colorErrorBg, colorText, colorTextDescription, colorBgContainer, colorFillAlter, colorFillContent, lineWidth, lineWidthBold, controlItemBgActive, colorBgTextHover, controlHeightLG, lineHeight, colorBgElevated, marginXXS, padding, fontSize, controlHeightSM, fontSizeLG, colorTextLightSolid, colorErrorHover } = token;
-	const activeBarWidth = token.activeBarWidth ?? 0;
-	const activeBarBorderWidth = token.activeBarBorderWidth ?? lineWidth;
-	const itemMarginInline = token.itemMarginInline ?? token.marginXXS;
-	const colorTextDark = setAlpha(colorTextLightSolid, .65);
-	return {
-		dropdownWidth: 160,
-		zIndexPopup: token.zIndexPopupBase + 50,
-		radiusItem: token.borderRadiusLG,
-		itemBorderRadius: token.borderRadiusLG,
-		radiusSubMenuItem: token.borderRadiusSM,
-		subMenuItemBorderRadius: token.borderRadiusSM,
-		colorItemText: colorText,
-		itemColor: colorText,
-		colorItemTextHover: colorText,
-		itemHoverColor: colorText,
-		colorGroupTitle: colorTextDescription,
-		groupTitleColor: colorTextDescription,
-		colorItemTextSelected: colorPrimary,
-		itemSelectedColor: colorPrimary,
-		subMenuItemSelectedColor: colorPrimary,
-		colorItemBg: colorBgContainer,
-		itemBg: colorBgContainer,
-		colorItemBgHover: colorBgTextHover,
-		itemHoverBg: colorBgTextHover,
-		colorItemBgActive: colorFillContent,
-		itemActiveBg: controlItemBgActive,
-		colorSubItemBg: colorFillAlter,
-		subMenuItemBg: colorFillAlter,
-		colorItemBgSelected: controlItemBgActive,
-		itemSelectedBg: controlItemBgActive,
-		colorActiveBarWidth: 0,
-		activeBarWidth,
-		colorActiveBarHeight: lineWidthBold,
-		activeBarHeight: lineWidthBold,
-		colorActiveBarBorderSize: lineWidth,
-		activeBarBorderWidth,
-		colorItemTextDisabled: colorTextDisabled,
-		itemDisabledColor: colorTextDisabled,
-		colorDangerItemText: colorError,
-		dangerItemColor: colorError,
-		colorDangerItemTextHover: colorError,
-		dangerItemHoverColor: colorError,
-		colorDangerItemTextSelected: colorError,
-		dangerItemSelectedColor: colorError,
-		colorDangerItemBgActive: colorErrorBg,
-		dangerItemActiveBg: colorErrorBg,
-		colorDangerItemBgSelected: colorErrorBg,
-		dangerItemSelectedBg: colorErrorBg,
-		itemMarginInline,
-		itemHeight: controlHeightLG,
-		groupTitleLineHeight: lineHeight,
-		collapsedWidth: controlHeightLG * 2,
-		popupBg: colorBgElevated,
-		itemMarginBlock: marginXXS,
-		itemPaddingInline: padding,
-		iconSize: fontSize,
-		iconMarginInlineEnd: controlHeightSM - fontSize,
-		collapsedIconSize: fontSizeLG,
-		groupTitleFontSize: fontSize,
-		darkItemDisabledColor: setAlpha(colorTextLightSolid, .25),
-		darkItemColor: colorTextDark,
-		darkDangerItemColor: colorError,
-		darkItemBg: "#001529",
-		darkPopupBg: "#001529",
-		darkSubMenuItemBg: "#000c17",
-		darkItemSelectedColor: colorTextLightSolid,
-		darkItemSelectedBg: colorPrimary,
-		darkDangerItemSelectedBg: colorError,
-		darkItemHoverBg: "transparent",
-		darkGroupTitleColor: colorTextDark,
-		darkItemHoverColor: colorTextLightSolid,
-		darkDangerItemHoverColor: colorErrorHover,
-		darkDangerItemSelectedColor: colorTextLightSolid,
-		darkDangerItemActiveBg: colorError,
-		itemWidth: hasActiveBarWidth(activeBarWidth) ? `calc(100% + ${unit$1(activeBarBorderWidth)})` : `calc(100% - ${itemMarginInline * 2}px)`
-	};
-};
+import { unit } from "@antdv-next/cssinjs";
+//#region src/components/Menu/style/inline.ts
 /**
-* SiderMenu 自写菜单样式。
+* Inline 模式样式。
 *
-* 该文件只服务 `components/Sider/SiderMenu.tsx`，避免和 antdv-next `Menu`
-* 的结构修补样式混在一起。
+* 只处理 inline 模式结构、状态和侧边栏 token 映射。
 */
-const genSiderMenuStyle = (token) => {
+const genInlineStyle = (token) => {
 	const { componentCls, antCls } = token;
-	const iconSize = unit$1(token.menuItemIconSize || token.iconSize || token.fontSize);
-	const collapsedIconSize = unit$1(token.collapsedIconSize || token.fontSizeLG);
+	const iconSize = unit(token.menuItemIconSize || token.iconSize || token.fontSize);
+	const collapsedIconSize = unit(token.collapsedIconSize || token.fontSizeLG);
 	const siderMenuItemHeight = token.siderMenuItemHeight || token.itemHeight || token.controlHeight;
 	const siderMenuItemMarginInline = token.siderMenuItemMarginInline ?? token.itemMarginInline ?? token.marginXXS;
 	const siderMenuItemMarginBlock = token.itemMarginBlock ?? token.marginXXS;
@@ -107,9 +18,13 @@ const genSiderMenuStyle = (token) => {
 	const siderMenuPaddingWithArrow = token.calc(siderMenuArrowSize).add(token.padding).add(token.marginXS).equal();
 	const siderMenuTitleGap = token.iconMarginInlineEnd ?? token.marginSM;
 	const activeBarWidth = token.activeBarWidth ?? 0;
-	const itemWidth = token.itemWidth || `calc(100% - ${unit$1(token.calc(siderMenuItemMarginInline).mul(2).equal())})`;
+	const itemWidth = token.itemWidth || `calc(100% - ${unit(token.calc(siderMenuItemMarginInline).mul(2).equal())})`;
 	return {
-		[`${componentCls}`]: {
+		[`${componentCls}-inline-collapsed-tooltip`]: {
+			pointerEvents: "none",
+			[`${componentCls}-icon, ${antCls}-icon`]: { display: "none" }
+		},
+		[`${componentCls}-inline`]: {
 			boxSizing: "border-box",
 			margin: 0,
 			padding: 0,
@@ -138,7 +53,7 @@ const genSiderMenuStyle = (token) => {
 			[`&${componentCls}-popup-list`]: {
 				minWidth: token.dropdownWidth,
 				maxWidth: token.dropdownWidth,
-				maxHeight: `calc(100vh - ${unit$1(token.calc(token.controlHeightLG).mul(2.5).equal())})`,
+				maxHeight: `calc(100vh - ${unit(token.calc(token.controlHeightLG).mul(2.5).equal())})`,
 				padding: 0,
 				overflow: "hidden auto",
 				borderInlineEnd: 0,
@@ -159,11 +74,11 @@ const genSiderMenuStyle = (token) => {
 				minHeight: siderMenuItemHeight,
 				marginBlock: siderMenuItemMarginBlock,
 				marginInline: siderMenuItemMarginInline,
-				paddingInlineStart: `calc(${unit$1(siderMenuBasePadding)} + var(--pro-layout-sider-menu-level, 0) * var(--pro-layout-sider-menu-indent, 24px))`,
+				paddingInlineStart: `calc(${unit(siderMenuBasePadding)} + var(--pro-menu-level, 0) * var(--pro-menu-indent, 24px))`,
 				paddingInlineEnd: siderMenuBasePadding,
 				overflow: "hidden",
 				color: token.siderColorTextMenu || token.itemColor,
-				lineHeight: unit$1(siderMenuItemHeight),
+				lineHeight: unit(siderMenuItemHeight),
 				whiteSpace: "nowrap",
 				textOverflow: "ellipsis",
 				cursor: "pointer",
@@ -178,7 +93,7 @@ const genSiderMenuStyle = (token) => {
 					position: "absolute",
 					insetBlock: 0,
 					insetInlineEnd: 0,
-					borderInlineEnd: `${unit$1(activeBarWidth)} solid ${token.itemSelectedColor}`,
+					borderInlineEnd: `${unit(activeBarWidth)} solid ${token.itemSelectedColor}`,
 					transform: "scaleY(0.0001)",
 					opacity: 0,
 					transition: ["transform", "opacity"].map((prop) => `${prop} ${token.motionDurationMid} ${token.motionEaseOut}`).join(","),
@@ -190,7 +105,7 @@ const genSiderMenuStyle = (token) => {
 				},
 				[`&:not(${componentCls}-item-selected):not(${componentCls}-item-active):active`]: { backgroundColor: token.siderColorBgMenuItemActive || token.itemActiveBg },
 				"&:focus-visible": {
-					outline: `${unit$1(token.lineWidthFocus)} solid ${token.colorPrimaryBorder}`,
+					outline: `${unit(token.lineWidthFocus)} solid ${token.colorPrimaryBorder}`,
 					outlineOffset: 1
 				},
 				[`&${componentCls}-item-active`]: { color: token.siderColorTextSubMenuSelected || token.siderColorTextMenuSelected || token.subMenuItemSelectedColor },
@@ -211,7 +126,7 @@ const genSiderMenuStyle = (token) => {
 				},
 				[`&${componentCls}-item-collapsed`]: {
 					justifyContent: "center",
-					paddingInline: `calc(50% - ${iconSize} / 2 - ${unit$1(siderMenuItemMarginInline)})`,
+					paddingInline: `calc(50% - ${iconSize} / 2 - ${unit(siderMenuItemMarginInline)})`,
 					textOverflow: "clip"
 				},
 				"> *": { flex: "none" }
@@ -291,23 +206,23 @@ const genSiderMenuStyle = (token) => {
 					].map((prop) => `${prop} ${token.motionDurationSlow} ${token.motionEaseInOut}`).join(","),
 					content: "\"\""
 				},
-				"&::before": { transform: `rotate(-45deg) translateX(${unit$1(siderMenuArrowOffset)})` },
-				"&::after": { transform: `rotate(45deg) translateX(${unit$1(token.calc(siderMenuArrowOffset).mul(-1).equal())})` }
+				"&::before": { transform: `rotate(-45deg) translateX(${unit(siderMenuArrowOffset)})` },
+				"&::after": { transform: `rotate(45deg) translateX(${unit(token.calc(siderMenuArrowOffset).mul(-1).equal())})` }
 			},
 			[`${componentCls}-item-open ${componentCls}-arrow`]: {
-				transform: `translateY(${unit$1(token.calc(siderMenuArrowSize).mul(.2).mul(-1).equal())})`,
-				"&::before": { transform: `rotate(45deg) translateX(${unit$1(siderMenuArrowOffset)})` },
-				"&::after": { transform: `rotate(-45deg) translateX(${unit$1(token.calc(siderMenuArrowOffset).mul(-1).equal())})` }
+				transform: `translateY(${unit(token.calc(siderMenuArrowSize).mul(.2).mul(-1).equal())})`,
+				"&::before": { transform: `rotate(45deg) translateX(${unit(siderMenuArrowOffset)})` },
+				"&::after": { transform: `rotate(-45deg) translateX(${unit(token.calc(siderMenuArrowOffset).mul(-1).equal())})` }
 			},
 			[`${componentCls}-submenu-title-popup ${componentCls}-arrow`]: {
 				transform: "translateY(-50%)",
-				"&::before": { transform: `rotate(45deg) translateY(${unit$1(token.calc(siderMenuArrowOffset).mul(-1).equal())})` },
-				"&::after": { transform: `rotate(-45deg) translateY(${unit$1(siderMenuArrowOffset)})` }
+				"&::before": { transform: `rotate(45deg) translateY(${unit(token.calc(siderMenuArrowOffset).mul(-1).equal())})` },
+				"&::after": { transform: `rotate(-45deg) translateY(${unit(siderMenuArrowOffset)})` }
 			},
 			[`${componentCls}-group-title`]: {
 				boxSizing: "border-box",
 				paddingBlock: token.paddingXXS,
-				paddingInlineStart: `calc(${unit$1(siderMenuBasePadding)} + var(--pro-layout-sider-menu-level, 0) * var(--pro-layout-sider-menu-indent, 24px))`,
+				paddingInlineStart: `calc(${unit(siderMenuBasePadding)} + var(--pro-menu-level, 0) * var(--pro-menu-indent, 24px))`,
 				paddingInlineEnd: token.padding,
 				color: token.siderColorTextMenuTitle || token.groupTitleColor || token.colorTextLabel,
 				fontSize: token.groupTitleFontSize || token.fontSizeSM,
@@ -325,7 +240,7 @@ const genSiderMenuStyle = (token) => {
 				padding: 0
 			}
 		},
-		[`${componentCls}-popover${antCls}-popover`]: {
+		[`${componentCls}-inline-popover${antCls}-popover`]: {
 			borderRadius: token.borderRadiusLG,
 			boxShadow: "none",
 			transformOrigin: "0 0",
@@ -373,6 +288,5 @@ const genSiderMenuStyle = (token) => {
 		}
 	};
 };
-var siderMenu_default = proGenStyleHooks("ProSiderMenu", genSiderMenuStyle, prepareComponentToken);
 //#endregion
-export { siderMenu_default as default, prepareComponentToken };
+export { genInlineStyle as default };

package/dist/components/PageContainer/index.js

@@ -154,10 +154,10 @@ const ProPageContainer = /* @__PURE__ */ defineComponent((props, { slots, emit }
 	function renderContent() {
 		if (props.watermark || watermark?.value) {
 			let _slot;
-			return createVNode(Watermark, {
+			return createVNode(Watermark, mergeProps({
 				...watermark?.value,
 				...props.watermark
-			}, _isSlot(_slot = renderBody()) ? _slot : { default: () => [_slot] });
+			}, { "class": `${prefixCls.value}-watermark` }), _isSlot(_slot = renderBody()) ? _slot : { default: () => [_slot] });
 		}
 		return renderBody();
 	}

package/dist/components/PageContainer/style.js

@@ -57,7 +57,8 @@ const genPageHeaderStyle = (token) => {
 };
 /** 内容区域样式：content / card / spinning / footer / height */
 const genPageContentStyle = (token) => {
-	const { componentCls, antCls } = token;
+	const { componentCls } = token;
+	const watermarkCls = `${componentCls}-watermark`;
 	return { [componentCls]: {
 		position: "relative",
 		display: "flex",
@@ -66,7 +67,7 @@ const genPageContentStyle = (token) => {
 			flex: "1 0 auto",
 			minHeight: "100%",
 			[`${componentCls}-content`]: { flex: "1 0 auto" },
-			[`${componentCls}-content-inner, ${componentCls}-content > ${antCls}-watermark`]: { flex: "1 0 auto" },
+			[`${componentCls}-content-inner, & > ${watermarkCls}`]: { flex: "1 0 auto" },
 			[`${componentCls}-card`]: { flex: "1 0 auto" }
 		},
 		"&-height-full": {
@@ -78,7 +79,7 @@ const genPageContentStyle = (token) => {
 				flex: "1 1 auto",
 				minHeight: 0
 			},
-			[`${componentCls}-content-inner, ${componentCls}-content > ${antCls}-watermark`]: {
+			[`${componentCls}-content-inner, & > ${watermarkCls}`]: {
 				flex: "1 1 auto",
 				minHeight: 0
 			},
@@ -97,13 +98,15 @@ const genPageContentStyle = (token) => {
 			"&-inner": {
 				position: "relative",
 				padding: token.pageContainerPadding,
-				margin: token.pageContainerMargin
-			},
-			[`&-inner, & > ${antCls}-watermark`]: {
+				margin: token.pageContainerMargin,
 				display: "flex",
 				flexDirection: "column"
 			}
 		},
+		[`& > ${watermarkCls}`]: {
+			display: "flex",
+			flexDirection: "column"
+		},
 		"&-card": {},
 		"&-footer": {
 			flexShrink: 0,

package/dist/components/Sider/index.js

@@ -1,10 +1,11 @@
 import { useLayoutBase } from "../../hooks/useLayoutBase.js";
 import LayoutCollapseButton from "../CollapseButton/index.js";
 import LayoutLogo from "../Logo/index.js";
-import SiderMenu from "../Menu/SiderMenu.js";
-import { Fragment, computed, createVNode, defineComponent, isVNode, nextTick, onMounted, reactive, shallowRef, watch } from "vue";
+import ProMenu from "../Menu/index.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, nextTick, onMounted, reactive, shallowRef } from "vue";
 import { unit } from "@gx-design-vue/pro-provider";
 import { classNames } from "@gx-design-vue/pro-utils";
+import { useResizeObserver } from "@vueuse/core";
 import { Drawer, LayoutSider as LayoutSider$1 } from "antdv-next";
 import { GScrollbar } from "@gx-design-vue/scrollbar";
 //#region src/components/Sider/index.tsx
@@ -12,7 +13,7 @@ function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
 const LayoutSider = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
-	const { sider, layout, menuState, prefixCls, cssVarCls, rootCls, collapseConfig, collapsed, isMobile, logoConfig, logoTitle, selectedKeys, openKeys, proClasses, proStyles, siderWidth, collapsedWidth } = useLayoutBase(props);
+	const { sider, header, layout, menuState, prefixCls, cssVarCls, rootCls, collapseConfig, collapsed, isMobile, logoConfig, logoTitle, selectedKeys, openKeys, proClasses, proStyles, siderWidth, collapsedWidth } = useLayoutBase(props);
 	/** GScrollbar 组件引用，用于获取滚动容器 DOM */
 	const scrollbarRef = shallowRef();
 	/** 滚动阴影状态：上下边缘是否可继续滚动 */
@@ -30,11 +31,11 @@ const LayoutSider = /* @__PURE__ */ defineComponent((props, { emit, slots }) =>
 	onMounted(() => {
 		nextTick(() => updateScrollShadow());
 	});
-	watch(openKeys, () => {
-		nextTick(() => updateScrollShadow());
-	});
+	const scrollbarWrapEl = computed(() => scrollbarRef.value?.wrapRef);
+	const scrollbarViewEl = computed(() => scrollbarWrapEl.value?.firstElementChild);
+	useResizeObserver(scrollbarWrapEl, () => updateScrollShadow());
+	useResizeObserver(scrollbarViewEl, () => updateScrollShadow());
 	const siderMenus = computed(() => menuState?.siderMenus.value ?? []);
-	const hideWhenEmpty = computed(() => sider.value?.hideWhenEmpty && siderMenus.value.length === 0);
 	const siderClassNames = computed(() => classNames(`${prefixCls.value}-sider`, proClasses.value.sider, { [`${prefixCls.value}-sider-fixed`]: sider.value?.fixed }));
 	const siderChildrenClassNames = computed(() => classNames(`${prefixCls.value}-sider-children`, proClasses.value.siderChildren));
 	const siderHeaderClassNames = computed(() => classNames(`${prefixCls.value}-sider-header`, proClasses.value.siderHeader));
@@ -62,9 +63,16 @@ const LayoutSider = /* @__PURE__ */ defineComponent((props, { emit, slots }) =>
 		const collapseRender = slots.collapse || collapseConfig.value?.render;
 		const collapseIconRender = slots.collapseIcon || collapseConfig.value?.icon;
 		return createVNode(Fragment, null, [
-			layout.value === "side" && logoConfig.value && createVNode("div", {
+			[
+				"side",
+				"mix",
+				"wide"
+			].includes(layout.value ?? "") && logoConfig.value && createVNode("div", {
 				"class": siderHeaderClassNames.value,
-				"style": proStyles.value.siderHeader
+				"style": {
+					...proStyles.value.siderHeader,
+					...["mix", "wide"].includes(layout.value ?? "") && header.value?.height ? { height: unit(header.value.height) } : {}
+				}
 			}, [typeof logoRender === "function" ? logoRender?.({
 				collapsed: collapsed.value,
 				title: logoTitle.value
@@ -80,7 +88,7 @@ const LayoutSider = /* @__PURE__ */ defineComponent((props, { emit, slots }) =>
 				"onScroll": updateScrollShadow,
 				"data-top-shadow": scrollShadow.showTop,
 				"data-bottom-shadow": scrollShadow.showBottom
-			}, { default: () => [createVNode(SiderMenu, {
+			}, { default: () => [createVNode(ProMenu, {
 				"menus": siderMenus.value,
 				"selectedKeys": selectedKeys.value,
 				"openKeys": openKeys.value,
@@ -114,7 +122,6 @@ const LayoutSider = /* @__PURE__ */ defineComponent((props, { emit, slots }) =>
 	}
 	return () => {
 		let _slot2;
-		if (hideWhenEmpty.value) return null;
 		const breakpoint = sider.value?.breakpoint || void 0;
 		if (isMobile.value) {
 			let _slot;

package/dist/defaultConfig.js

@@ -10,8 +10,7 @@ const DEFAULT_LAYOUT_CONFIG = {
 	sider: {
 		width: 215,
 		fixed: true,
-		breakpoint: false,
-		hideWhenEmpty: false
+		breakpoint: false
 	},
 	footerConfig: {
 		links: [],

package/dist/hooks/useLayoutBase.d.ts

@@ -13,7 +13,7 @@ declare function useLayoutBase(props?: {
   collapsed?: boolean;
 }): {
   layoutContext: LayoutContextProps;
-  layout: import("vue").ComputedRef<"side" | "top" | "mix" | "wide" | "simple">;
+  layout: import("vue").ComputedRef<"top" | "side" | "mix" | "wide" | "simple">;
   sider: import("vue").ComputedRef<Required<LayoutSiderConfig>>;
   header: import("vue").ComputedRef<Required<LayoutHeaderConfig>>;
   zIndex: import("vue").Ref<number, number>;
@@ -38,34 +38,34 @@ declare function useLayoutBase(props?: {
   selectedKeys: import("vue").ComputedRef<string[]>;
   openKeys: import("vue").ComputedRef<string[]>;
   proClasses: import("vue").ComputedRef<{
-    root?: string;
-    header?: string;
-    sider?: string;
-    siderChildren?: string;
     siderHeader?: string;
     siderFooter?: string;
+    footer?: string;
+    header?: string;
+    breadcrumb?: string;
+    sider?: string;
     logo?: string;
-    logoImage?: string;
     content?: string;
-    footer?: string;
+    root?: string;
+    siderChildren?: string;
+    logoImage?: string;
     menu?: string;
     tabs?: string;
-    breadcrumb?: string;
   }>;
   proStyles: import("vue").ComputedRef<{
-    root?: import("vue").CSSProperties;
-    header?: import("vue").CSSProperties;
-    sider?: import("vue").CSSProperties;
-    siderChildren?: import("vue").CSSProperties;
     siderHeader?: import("vue").CSSProperties;
     siderFooter?: import("vue").CSSProperties;
+    footer?: import("vue").CSSProperties;
+    header?: import("vue").CSSProperties;
+    breadcrumb?: import("vue").CSSProperties;
+    sider?: import("vue").CSSProperties;
     logo?: import("vue").CSSProperties;
-    logoImage?: import("vue").CSSProperties;
     content?: import("vue").CSSProperties;
-    footer?: import("vue").CSSProperties;
+    root?: import("vue").CSSProperties;
+    siderChildren?: import("vue").CSSProperties;
+    logoImage?: import("vue").CSSProperties;
     menu?: import("vue").CSSProperties;
     tabs?: import("vue").CSSProperties;
-    breadcrumb?: import("vue").CSSProperties;
   }>;
   breadcrumbRender: import("vue").Ref<(props: LayoutBreadcrumbSlotProps) => any, (props: LayoutBreadcrumbSlotProps) => any>;
   breadcrumbConfig: import("vue").ComputedRef<LayoutBreadcrumbConfig>;

package/dist/hooks/useMenu.d.ts

@@ -10,11 +10,11 @@ interface UseLayoutMenuOptions {
   selectedKeys?: MaybeRefOrGetter<string[] | undefined>;
   /** 外部受控展开菜单；不传则由当前路由链自动推导 */
   openKeys?: MaybeRefOrGetter<string[] | undefined>;
-  /** 菜单配置（autoClose / splitMenus 等） */
+  /** 菜单配置（autoClose 等） */
   config: MaybeRefOrGetter<LayoutMenuConfig>;
-  /** 布局模式；splitMenus 仅 `mix` 生效 */
+  /** 布局模式；`mix` 模式强制分割头部/侧边菜单 */
   layout?: MaybeRefOrGetter<GProLayoutProps['layout']>;
-  /** 移动端；移动端关闭 splitMenus 分割 */
+  /** 移动端；移动端关闭菜单分割 */
   isMobile?: MaybeRefOrGetter<boolean>;
   /** 当前选中菜单名，默认取 `useRoute().name` */
   currentName?: () => string | undefined;
@@ -34,9 +34,9 @@ interface LayoutMenuState {
   breadcrumbItems: ComputedRef<BreadcrumbItemType[]>;
   /** 当前路由 meta */
   currentMeta: ComputedRef<Meta>;
-  /** 头部菜单路由分支（mix+splitMenus 时为顶层、剥子级） */
+  /** 头部菜单路由分支（mix 时为顶层、剥子级） */
   headerMenus: ComputedRef<LayoutMenuRoute[]>;
-  /** 侧边菜单路由分支（mix+splitMenus 时为激活顶层的子级） */
+  /** 侧边菜单路由分支（mix 时为激活顶层的子级） */
   siderMenus: ComputedRef<LayoutMenuRoute[]>;
   /** 解析点击菜单后的跳转目标 */
   resolveRoute: (name: string) => ResolveRouteResult;

package/dist/hooks/useMenu.js

@@ -33,7 +33,7 @@ function useMenu(options) {
 	const currentMeta = computed(() => lookup.value.get(currentName.value ?? "")?.route.meta ?? {});
 	const breadcrumbRoutes = computed(() => buildBreadcrumbRoutes(matchedChain.value, { current: lookup.value.get(currentName.value ?? "")?.route }));
 	const breadcrumbItems = computed(() => toBreadcrumbItems(breadcrumbRoutes.value));
-	const splitActive = computed(() => toValue(options.layout) === "mix" && !toValue(options.isMobile) && !!toValue(options.config).splitMenus);
+	const splitActive = computed(() => toValue(options.layout) === "mix" && !toValue(options.isMobile));
 	const topName = computed(() => matchedChain.value[0]?.name);
 	const headerMenus = computed(() => splitActive.value ? menus.value.map((menu) => ({
 		...menu,