@gx-design-vue/pro-layout 0.1.0-alpha.6 → 0.1.0-alpha.7

package/dist/ProLayout.js

@@ -13,7 +13,7 @@ import { normalizeSectionConfig } from "./utils/config.js";
 import { computed, createVNode, defineComponent, mergeDefaults, ref } from "vue";
 import { ThemeContext, useThemeContext } from "@gx-design-vue/context";
 import { GProConfigProvider, useProToken } from "@gx-design-vue/pro-provider";
-import { classNames, getSlot, getSlotsProps } from "@gx-design-vue/pro-utils";
+import { classNames, getSlotsProps } from "@gx-design-vue/pro-utils";
 import { useDark, useMediaQuery, useVModel } from "@vueuse/core";
 import { ConfigProvider, Layout } from "antdv-next";
 import { useBaseConfig } from "antdv-next/config-provider/context";
@@ -112,18 +112,39 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 		}
 		if (target.path && router.currentRoute.value.fullPath !== target.path) router.push(target.path);
 	}
+	const logoConfig = computed(() => normalizeSectionConfig(props.logo, DEFAULT_LAYOUT_CONFIG.logo));
+	const collapseConfig = computed(() => normalizeSectionConfig(props.collapse, DEFAULT_LAYOUT_CONFIG.collapse));
+	const footerConfig = computed(() => normalizeSectionConfig(props.footerConfig, DEFAULT_LAYOUT_CONFIG.footerConfig));
+	const breadcrumbConfig = computed(() => normalizeSectionConfig(props.breadcrumb, DEFAULT_LAYOUT_CONFIG.breadcrumb));
+	const pageContainerConfig = computed(() => ({
+		...DEFAULT_LAYOUT_CONFIG.pageContainerConfig,
+		...props.pageContainer || {}
+	}));
 	const tabsConf = computed(() => normalizeSectionConfig(props.tabsConfig, DEFAULT_LAYOUT_CONFIG.tabsConfig));
 	const tabsStateConfig = computed(() => tabsConf.value ?? {});
+	const tabsModel = useVModel(props, "tabs", emit, {
+		passive: true,
+		defaultValue: []
+	});
+	const collapsedWidth = computed(() => collapseConfig.value?.width ?? DEFAULT_LAYOUT_CONFIG.collapse.width);
+	/** Sider 实际渲染宽度：0 表示不可见，否则 = 折叠/展开的真实宽度 */
+	const siderWidth = computed(() => {
+		const width = props.sider?.width ?? DEFAULT_LAYOUT_CONFIG.sider.width;
+		if (!width) return 0;
+		if (contentFullscreen.value) return 0;
+		if (![
+			"side",
+			"mix",
+			"wide"
+		].includes(layout.value ?? "")) return 0;
+		if (props.sider?.hideWhenEmpty && menuState.siderMenus.value.length === 0) return 0;
+		return collapsed.value ? collapsedWidth.value : width;
+	});
 	const tabsState = useTabsState({
-		tabs: useVModel(props, "tabs", emit, {
-			passive: true,
-			defaultValue: []
-		}),
+		tabs: tabsModel,
 		config: tabsStateConfig,
 		flatMenus: menuState.flatMenus,
-		collapsed,
-		siderWidth: props.sider?.width ?? DEFAULT_LAYOUT_CONFIG.sider.width,
-		collapseWidth: props.collapseConfig ? props.collapseConfig.width ?? DEFAULT_LAYOUT_CONFIG.collapseConfig.width : DEFAULT_LAYOUT_CONFIG.collapseConfig.width,
+		siderWidth,
 		isMobile: computed(() => isMobile.value),
 		contentFullscreen,
 		onTabsChange: (val) => {
@@ -163,14 +184,6 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 	function handleLogoClick() {
 		emit("logoClick");
 	}
-	const logoConfig = computed(() => normalizeSectionConfig(props.logoConfig, DEFAULT_LAYOUT_CONFIG.logoConfig));
-	const collapseConfig = computed(() => normalizeSectionConfig(props.collapseConfig, DEFAULT_LAYOUT_CONFIG.collapseConfig));
-	const footerConfig = computed(() => normalizeSectionConfig(props.footerConfig, DEFAULT_LAYOUT_CONFIG.footerConfig));
-	const breadcrumbConfig = computed(() => normalizeSectionConfig(props.breadcrumbConfig, DEFAULT_LAYOUT_CONFIG.breadcrumbConfig));
-	const pageContainerConfig = computed(() => ({
-		...DEFAULT_LAYOUT_CONFIG.pageContainerConfig,
-		...props.pageContainerConfig || {}
-	}));
 	const showHeader = computed(() => !contentFullscreen.value && layout.value !== "simple" && props.header?.height !== 0);
 	const showSider = computed(() => !contentFullscreen.value && [
 		"side",
@@ -194,6 +207,8 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 		})),
 		menuState,
 		logoConfig,
+		siderWidth,
+		collapsedWidth,
 		breadcrumbConfig,
 		pageContainerConfig,
 		watermark: computed(() => props.watermark),
@@ -227,17 +242,7 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 			keys: LAYOUT_SLOT_KEYS,
 			render: false
 		});
-		const normalized = Object.fromEntries(Object.entries(merged).map(([key, value]) => [key, typeof value === "function" ? value : () => value]));
-		if (slots.logo) normalized.logo = slots.logo;
-		if (props.collapseConfig) {
-			const collapseIconSlot = getSlot({
-				slots,
-				props: { collapseIcon: props.collapseConfig.icon },
-				key: "collapseIcon"
-			});
-			if (collapseIconSlot) normalized.collapseIcon = collapseIconSlot;
-		}
-		return normalized;
+		return Object.fromEntries(Object.entries(merged).map(([key, value]) => [key, typeof value === "function" ? value : () => value]));
 	}
 	return () => {
 		if (props.pure) return slots.default?.();
@@ -253,12 +258,17 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 			"showSider": showSider.value,
 			"proClasses": props.proClasses,
 			"proStyles": props.proStyles
-		}, { default: () => [showSider.value && createVNode(LayoutSider$1, {
+		}, { default: () => [showSider.value && siderWidth.value && createVNode(LayoutSider$1, {
 			"onSelect": handleSelect,
 			"onOpenChange": handleOpenChange,
 			"onLogoClick": handleLogoClick,
 			"onUpdate:collapsed": handleCollapsedUpdate
-		}, layoutSlots), createVNode("div", {
+		}, {
+			...layoutSlots,
+			logo: slots.logo,
+			collapse: slots.collapse,
+			collapseIcon: slots.collapseIcon
+		}), createVNode("div", {
 			"style": { position: "relative" },
 			"class": `${prefixCls.value}-container`,
 			"data-testid": "pro-layout-container"
@@ -267,7 +277,13 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 				"onLogoClick": handleLogoClick,
 				"onUpdate:collapsed": handleCollapsedUpdate,
 				"onSelect": handleSelect
-			}, layoutSlots),
+			}, {
+				...layoutSlots,
+				logo: slots.logo,
+				collapse: slots.collapse,
+				breadcrumb: slots.breadcrumb,
+				collapseIcon: slots.collapseIcon
+			}),
 			tabsConf.value && createVNode(LayoutTabs, {
 				"config": tabsConf.value,
 				"onReloadPage": () => emit("reloadPage"),
@@ -364,7 +380,7 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 			type: Object,
 			required: false
 		},
-		breadcrumbConfig: {
+		breadcrumb: {
 			type: [Object, Boolean],
 			required: false,
 			default: void 0
@@ -374,17 +390,17 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 			required: false,
 			default: void 0
 		},
-		logoConfig: {
+		logo: {
 			type: [Object, Boolean],
 			required: false,
 			default: void 0
 		},
-		collapseConfig: {
+		collapse: {
 			type: [Object, Boolean],
 			required: false,
 			default: void 0
 		},
-		pageContainerConfig: {
+		pageContainer: {
 			type: Object,
 			required: false
 		},
@@ -444,10 +460,6 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 			type: Function,
 			required: false
 		},
-		breadcrumb: {
-			type: Function,
-			required: false
-		},
 		tabBarItem: {
 			type: Function,
 			required: false

package/dist/components/Breadcrumb/index.js

@@ -1,31 +1,15 @@
 import { useLayoutBase } from "../../hooks/useLayoutBase.js";
-import { Fragment, computed, createTextVNode, createVNode, defineComponent, isVNode } from "vue";
-import { classNames, isImg, isString, isUrl } from "@gx-design-vue/pro-utils";
+import { renderMenuIcon } from "../Menu/iconRender.js";
+import { Fragment, computed, createTextVNode, createVNode, defineComponent } from "vue";
+import { classNames } from "@gx-design-vue/pro-utils";
 import { Dropdown } from "antdv-next";
-import { DownOutlined } from "@antdv-next/icons";
 import { GIcon } from "@gx-design-vue/icon";
 //#region src/components/Breadcrumb/index.tsx
 /** 首页占位路由名 */
 const BREADCRUMB_HOME_KEY = "__breadcrumb_home__";
-/**
-* 渲染面包屑图标：兼容 VNode / 组件 / 图片地址 / 图标名。
-* 复用 LayoutMenu 的 renderMenuIcon 模式。
-*/
-function renderBreadcrumbIcon(icon) {
-	if (!icon) return null;
-	if (isVNode(icon)) return icon;
-	if (isString(icon)) {
-		if (isUrl(icon) || isImg(icon)) return createVNode("img", {
-			"src": icon,
-			"alt": "icon"
-		}, null);
-		return createVNode(GIcon, { "type": icon }, null);
-	}
-	return null;
-}
 /** 渲染默认面包屑项内容（图标 + 标题） */
 function renderBreadcrumbItemContent(prefixCls, route) {
-	const iconNode = renderBreadcrumbIcon(route.meta?.icon);
+	const iconNode = renderMenuIcon(route.meta?.icon);
 	return createVNode(Fragment, null, [iconNode && createVNode("span", { "class": `${prefixCls}-item-icon` }, [iconNode]), createVNode("span", null, [route.meta?.title])]);
 }
 /**
@@ -94,11 +78,11 @@ const Breadcrumb = /* @__PURE__ */ defineComponent((props, { slots }) => {
 				items: dropdownChildren.map((child) => ({
 					key: child.name,
 					label: child.meta?.title ?? child.name,
-					icon: renderBreadcrumbIcon(child.meta?.icon)
+					icon: renderMenuIcon(child.meta?.icon)
 				})),
 				selectedKeys: dropdownSelectedKeys,
 				onClick: ({ key }) => handleDropdownMenuClick(String(key))
-			} }, { default: () => [createVNode("span", { "class": `${breadcrumbCls}-overlay-link` }, [itemContent, createVNode(DownOutlined, null, null)])] }) : createVNode("span", {
+			} }, { default: () => [createVNode("span", { "class": `${breadcrumbCls}-overlay-link` }, [itemContent, createVNode(GIcon, { "type": "DownOutlined" }, null)])] }) : createVNode("span", {
 				"class": classNames(`${breadcrumbCls}-link`, isLast && `${breadcrumbCls}-link-last`),
 				"onClick": () => handleItemClick(route, isLast)
 			}, [itemContent])]), !isLast && createVNode("li", { "class": `${breadcrumbCls}-separator` }, [createTextVNode("/")])]);

package/dist/components/CollapseButton/index.js

@@ -1,7 +1,8 @@
 import { useLayoutBase } from "../../hooks/useLayoutBase.js";
+import { ArrowSvgIcon } from "./Arrow.js";
 import { computed, createVNode, defineComponent } from "vue";
 import { classNames } from "@gx-design-vue/pro-utils";
-import { MenuFoldOutlined, MenuUnfoldOutlined } from "@antdv-next/icons";
+import { GIcon } from "@gx-design-vue/icon";
 //#region src/components/CollapseButton/index.tsx
 const LayoutCollapseButton = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
 	const { prefixCls, collapseConfig } = useLayoutBase();
@@ -11,7 +12,6 @@ const LayoutCollapseButton = /* @__PURE__ */ defineComponent((props, { emit, slo
 		emit("click", event);
 	}
 	return () => {
-		if (slots.default) return slots.default();
 		return createVNode("div", {
 			"class": collapseButtonClassNames.value,
 			"role": "button",
@@ -24,7 +24,7 @@ const LayoutCollapseButton = /* @__PURE__ */ defineComponent((props, { emit, slo
 					handleClick(event);
 				}
 			}
-		}, [collapseConfig?.value ? slots.icon?.({ collapsed: props.collapsed }) : props.collapsed ? createVNode(MenuUnfoldOutlined, null, null) : createVNode(MenuFoldOutlined, null, null)]);
+		}, [slots.icon?.({ collapsed: props.collapsed }) || placement.value === "sider" ? createVNode(ArrowSvgIcon, null, null) : createVNode(GIcon, { "type": props.collapsed ? "MenuUnfoldOutlined" : "MenuFoldOutlined" }, null)]);
 	};
 }, {
 	props: {

package/dist/components/CollapseButton/interface.d.ts

@@ -14,7 +14,6 @@ interface LayoutCollapseButtonSlots {
   icon?: (props: {
     collapsed: boolean;
   }) => any;
-  default?: () => any;
 }
 //#endregion
 export { LayoutCollapseButtonEmits, LayoutCollapseButtonEmitsProps, LayoutCollapseButtonProps, LayoutCollapseButtonSlots };

package/dist/components/Header/index.js

@@ -63,7 +63,8 @@ const Header = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
 			items,
 			routes
 		};
-		const customBreadcrumb = breadcrumbRender.value?.(slotProps) ?? slots.breadcrumb?.(slotProps);
+		const breadcrumb = slots.breadcrumb || breadcrumbConfig.value?.render;
+		const customBreadcrumb = breadcrumbRender.value?.(slotProps) ?? breadcrumb?.(slotProps);
 		if (customBreadcrumb) return createVNode("div", {
 			"class": classNames(`${prefixCls.value}-header-breadcrumb`, proClasses.value.breadcrumb),
 			"style": proStyles.value.breadcrumb
@@ -76,6 +77,9 @@ const Header = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
 	}
 	return () => {
 		const showHeaderMenu = ["top", "mix"].includes(layout.value ?? "");
+		const logoRender = slots.logo || logoConfig.value?.render;
+		const collapseRender = slots.collapse || collapseConfig.value?.render;
+		const collapseIconRender = slots.collapseIcon || collapseConfig.value?.icon;
 		return createVNode(Fragment, null, [header.value?.fixed && createVNode(LayoutHeader, { "style": {
 			background: "transparent",
 			lineHeight: unit(header.value?.height),
@@ -88,14 +92,14 @@ const Header = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
 			}
 		}, { default: () => [createVNode("div", { "class": `${prefixCls.value}-header-main` }, [
 			createVNode("div", { "class": `${prefixCls.value}-header-main-left` }, [
-				showLogo.value && (slots.logo?.({
+				showLogo.value && logoConfig.value && (typeof logoRender === "function" ? logoRender?.({
 					collapsed: collapsed.value,
 					title: logoTitle.value
-				}) ?? (logoConfig.value ? createVNode(LayoutLogo, { "onClick": handleLogoClick }, null) : null)),
-				collapseConfig.value && collapseConfig.value.placement === "header" && (slots.collapseButton?.({ collapsed: collapsed.value }) ?? createVNode(LayoutCollapseButton, {
+				}) : createVNode(LayoutLogo, { "onClick": handleLogoClick }, slots)),
+				collapseConfig.value && collapseConfig.value.placement === "header" && (collapseRender?.({ collapsed: collapsed.value }) ?? createVNode(LayoutCollapseButton, {
 					"collapsed": collapsed.value,
 					"onClick": handleToggleCollapsed
-				}, { icon: collapseConfig.value.icon })),
+				}, { icon: collapseIconRender })),
 				renderBreadcrumb()
 			]),
 			slots.headerContent?.({

package/dist/components/Header/interface.d.ts

@@ -20,6 +20,12 @@ interface LayoutHeaderSlots {
     collapsed: boolean;
     title?: string;
   }) => any;
+  collapse?: (props: {
+    collapsed: boolean;
+  }) => any;
+  collapseIcon?: (props: {
+    collapsed: boolean;
+  }) => any;
   breadcrumb?: (props: LayoutBreadcrumbSlotProps) => any;
   headerContent?: (props: LayoutHeaderSlotProps) => any;
   headerRight?: (props: LayoutHeaderSlotProps) => any;

package/dist/components/Logo/index.d.ts

@@ -4,7 +4,7 @@ import { SlotsType } from "vue";
 import { CustomRender } from "@gx-design-vue/pro-utils";
 
 //#region src/components/Logo/index.d.ts
-declare function defaultRenderLogo(logo?: CustomRender | false): CustomRender;
+declare function defaultRenderLogo(logo?: CustomRender | false): any;
 declare const LayoutLogo: _$vue.DefineSetupFnComponent<LayoutLogoEmitsProps, LayoutLogoEmits, SlotsType<LayoutLogoSlots>, LayoutLogoEmitsProps, _$vue.PublicProps>;
 //#endregion
 export { LayoutLogo as default, defaultRenderLogo };

package/dist/components/Logo/index.js

@@ -18,7 +18,7 @@ const LayoutLogo = /* @__PURE__ */ defineComponent((_props, { emit, slots }) =>
 		if (!logoConfig?.value) return "";
 		return logoConfig?.value.title;
 	});
-	const logoSource = computed(() => !logoConfig?.value ? false : logoConfig?.value.logo);
+	const logoSource = computed(() => logoConfig?.value.image);
 	const hideTitle = computed(() => collapsed.value && ["side", "simple"].includes(layout.value ?? ""));
 	const showLogo = computed(() => !collapsed.value || !!collapsedWidth.value);
 	const logoClassNames = computed(() => classNames(`${prefixCls.value}-logo`, proClasses.value.logo, {
@@ -29,15 +29,13 @@ const LayoutLogo = /* @__PURE__ */ defineComponent((_props, { emit, slots }) =>
 		emit("click");
 	}
 	return () => {
-		if (slots.default) return slots.default();
-		const logo = slots.logo ? slots.logo() : defaultRenderLogo(logoSource.value);
-		const hasLogo = logo !== null && logo !== void 0 && logo !== false;
+		const image = slots.image ? slots.image() : defaultRenderLogo(logoSource.value);
 		const titleDom = title.value && !hideTitle.value ? createVNode("h1", null, [title.value]) : null;
 		return createVNode("div", {
 			"class": logoClassNames.value,
 			"style": proStyles.value.logo,
 			"onClick": handleClick
-		}, [createVNode("a", null, [showLogo.value && hasLogo && createVNode("span", {
+		}, [createVNode("a", null, [showLogo.value && image && createVNode("span", {
 			"class": proClasses.value.logoImage,
 			"style": {
 				display: "inline-flex",
@@ -45,7 +43,7 @@ const LayoutLogo = /* @__PURE__ */ defineComponent((_props, { emit, slots }) =>
 				fontSize: 22,
 				...proStyles.value.logoImage
 			}
-		}, [logo]), titleDom])]);
+		}, [image]), titleDom])]);
 	};
 }, {
 	props: { onClick: {

package/dist/components/Logo/interface.d.ts

@@ -7,8 +7,7 @@ interface LayoutLogoEmitsProps {
 }
 type LayoutLogoProps = LayoutLogoEmitsProps;
 interface LayoutLogoSlots {
-  logo?: () => any;
-  default?: () => any;
+  image?: () => any;
 }
 //#endregion
 export { LayoutLogoEmits, LayoutLogoEmitsProps, LayoutLogoProps, LayoutLogoSlots };

package/dist/components/{Sider → Menu}/SiderMenu.d.ts

@@ -1,10 +1,10 @@
-import { LayoutMenuEmits, LayoutMenuSlots } from "../Menu/interface.js";
+import { LayoutMenuEmits, LayoutMenuSlots } from "./interface.js";
 import { LayoutClassNamesType, LayoutMenuItemSlotProps, LayoutMenuRoute, LayoutStylesType } from "../../interface.js";
 import * as _$vue from "vue";
 import { CSSProperties, SlotsType } from "vue";
 import { CustomRender } from "@gx-design-vue/pro-utils";
 
-//#region src/components/Sider/SiderMenu.d.ts
+//#region src/components/Menu/SiderMenu.d.ts
 interface SiderMenuProps {
   class?: string;
   prefixCls?: string;
@@ -15,6 +15,8 @@ interface SiderMenuProps {
   collapsed?: boolean;
   proClasses?: LayoutClassNamesType;
   proStyles?: LayoutStylesType;
+  /** 由外部（如 Sider）传入，用于获取包裹 SiderMenu 的滚动容器 DOM 引用 */
+  getScrollContainer?: () => HTMLElement | undefined;
   menuItemIcon?: (slotProps: LayoutMenuItemSlotProps) => CustomRender;
   menuItemLabel?: (slotProps: LayoutMenuItemSlotProps) => CustomRender;
   menuItemExtra?: (slotProps: LayoutMenuItemSlotProps) => CustomRender;

package/dist/components/{Sider → Menu}/SiderMenu.js

@@ -1,16 +1,16 @@
 import { useLayoutBase } from "../../hooks/useLayoutBase.js";
+import { renderMenuIcon } from "./iconRender.js";
 import { buildSiderProMenuTokens } from "../../utils/themeComponents.js";
-import { LAYOUT_MENU_SLOT_KEYS } from "../Menu/interface.js";
-import style_default from "./style.js";
-import { Transition, computed, createVNode, defineComponent, h, isVNode, mergeProps, nextTick, onBeforeUnmount, ref, vShow, watch, withDirectives } from "vue";
+import { LAYOUT_MENU_SLOT_KEYS } from "./interface.js";
+import siderMenu_default from "./style/siderMenu.js";
+import { Transition, computed, createVNode, defineComponent, isVNode, mergeProps, nextTick, onBeforeUnmount, ref, vShow, watch, withDirectives } from "vue";
 import { useProToken } from "@gx-design-vue/pro-provider";
-import { classNames, getSlotsProps, isImg, isString, isUrl } from "@gx-design-vue/pro-utils";
+import { classNames, getSlotsProps } from "@gx-design-vue/pro-utils";
 import { ConfigProvider, Popover } from "antdv-next";
 import { useBaseConfig } from "antdv-next/config-provider/context";
 import useCSSVarCls from "antdv-next/config-provider/hooks/useCSSVarCls";
-import { GIcon } from "@gx-design-vue/icon";
 import { omit } from "es-toolkit";
-//#region src/components/Sider/SiderMenu.tsx
+//#region src/components/Menu/SiderMenu.tsx
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
@@ -47,19 +47,6 @@ function getPathKey(path) {
 function getMenuTitleSymbol(title) {
 	return title ? title.charAt(0).toUpperCase() : null;
 }
-function renderMenuIcon(icon) {
-	if (!icon) return null;
-	if (isVNode(icon)) return icon;
-	if (isString(icon)) {
-		if (isUrl(icon) || isImg(icon)) return createVNode("img", {
-			"src": icon,
-			"alt": "icon"
-		}, null);
-		return createVNode(GIcon, { "type": icon }, null);
-	}
-	if (typeof icon === "function" || typeof icon === "object") return h(icon);
-	return null;
-}
 function getVisibleChildren(route) {
 	return route.children?.filter((child) => !child.meta?.hideInMenu) ?? [];
 }
@@ -130,7 +117,7 @@ const SiderMenuContent = /* @__PURE__ */ defineComponent((props, { emit, slots }
 	const { proClasses, proStyles, collapsed } = useLayoutBase(props);
 	const { prefixCls } = useBaseConfig("pro-sider-menu", props);
 	const rootCls = useCSSVarCls(prefixCls);
-	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const [hashId, cssVarCls] = siderMenu_default(prefixCls, rootCls);
 	const { proLayoutToken } = useProToken();
 	const popupOpenPath = ref([]);
 	const menuRef = ref();
@@ -146,7 +133,7 @@ const SiderMenuContent = /* @__PURE__ */ defineComponent((props, { emit, slots }
 		keys: LAYOUT_MENU_SLOT_KEYS,
 		render: false
 	}));
-	const menuClassNames = computed(() => classNames(`${prefixCls.value}`, proClasses.value.menu, hashId.value, cssVarCls.value, rootCls.value, { [`${prefixCls.value}-collapsed`]: collapsed.value }, props.class));
+	const menuClassNames = computed(() => classNames(`${prefixCls.value}`, `${prefixCls.value}-root`, proClasses.value.menu, hashId.value, cssVarCls.value, rootCls.value, { [`${prefixCls.value}-collapsed`]: collapsed.value }, props.class));
 	const popupClassName = computed(() => classNames(`${prefixCls.value}-popover`, hashId.value, cssVarCls.value, rootCls.value));
 	function isPopupInteraction(ctx) {
 		return collapsed.value || ctx.popup;
@@ -246,7 +233,7 @@ const SiderMenuContent = /* @__PURE__ */ defineComponent((props, { emit, slots }
 		if (hasInitialScrolled.value || hasSiderMenuInitialAutoScrolled || collapsed.value) return;
 		const menuEl = menuRef.value;
 		if (!menuEl) return;
-		const scrollContainer = menuEl.closest(`.${prefixCls.value}-container`);
+		const scrollContainer = props.getScrollContainer?.() ?? menuEl.closest(`.${prefixCls.value}-container`);
 		const selectedItem = menuEl.querySelector(`.${prefixCls.value}-item-selected`);
 		if (!scrollContainer || !selectedItem) return;
 		hasInitialScrolled.value = true;
@@ -376,10 +363,7 @@ const SiderMenuContent = /* @__PURE__ */ defineComponent((props, { emit, slots }
 			renderIcon(route, item, firstLevelCollapsed),
 			!firstLevelCollapsed && renderLabel(route, item),
 			!firstLevelCollapsed && renderExtra(route, item),
-			!firstLevelCollapsed && createVNode("span", {
-				"class": `${prefixCls.value}-arrow`,
-				"aria-hidden": "true"
-			}, null)
+			!firstLevelCollapsed && createVNode("i", { "class": `${prefixCls.value}-arrow` }, null)
 		]);
 	}
 	function renderSubMenu(route, children, ctx) {
@@ -540,6 +524,10 @@ const SiderMenuContent = /* @__PURE__ */ defineComponent((props, { emit, slots }
 			type: Object,
 			required: false
 		},
+		getScrollContainer: {
+			type: Function,
+			required: false
+		},
 		menuItemIcon: {
 			type: Function,
 			required: false
@@ -632,6 +620,10 @@ const SiderMenu = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
 			type: Object,
 			required: false
 		},
+		getScrollContainer: {
+			type: Function,
+			required: false
+		},
 		menuItemIcon: {
 			type: Function,
 			required: false

package/dist/components/Menu/iconRender.d.ts

@@ -0,0 +1,10 @@
+import { VNode } from "vue";
+
+//#region src/components/Menu/iconRender.d.ts
+/**
+ * 渲染菜单/面包屑图标：兼容 VNode / 组件 / 图片地址 / 图标名。
+ * 被 LayoutMenu、SiderMenu、Breadcrumb 等组件共用。
+ */
+declare function renderMenuIcon(icon: any): VNode | string | null;
+//#endregion
+export { renderMenuIcon };

package/dist/components/Menu/iconRender.js

@@ -0,0 +1,23 @@
+import { createVNode, h, isVNode } from "vue";
+import { isImg, isString, isUrl } from "@gx-design-vue/pro-utils";
+import { GIcon } from "@gx-design-vue/icon";
+//#region src/components/Menu/iconRender.tsx
+/**
+* 渲染菜单/面包屑图标：兼容 VNode / 组件 / 图片地址 / 图标名。
+* 被 LayoutMenu、SiderMenu、Breadcrumb 等组件共用。
+*/
+function renderMenuIcon(icon) {
+	if (!icon) return null;
+	if (isVNode(icon)) return icon;
+	if (isString(icon)) {
+		if (isUrl(icon) || isImg(icon)) return createVNode("img", {
+			"src": icon,
+			"alt": "icon"
+		}, null);
+		return createVNode(GIcon, { "type": icon }, null);
+	}
+	if (typeof icon === "function" || typeof icon === "object") return h(icon);
+	return null;
+}
+//#endregion
+export { renderMenuIcon };

package/dist/components/Menu/index.js

@@ -1,31 +1,17 @@
 import { useLayoutBase } from "../../hooks/useLayoutBase.js";
+import { renderMenuIcon } from "./iconRender.js";
 import { buildHeaderMenuTokens, buildSiderMenuTokens } from "../../utils/themeComponents.js";
 import { buildMenuItems } from "./convert.js";
 import { LAYOUT_MENU_SLOT_KEYS } from "./interface.js";
-import { computed, createVNode, defineComponent, h, isVNode } from "vue";
+import { computed, createVNode, defineComponent } from "vue";
 import { useProToken } from "@gx-design-vue/pro-provider";
-import { classNames, getSlotsProps, isImg, isString, isUrl } from "@gx-design-vue/pro-utils";
+import { classNames, getSlotsProps } from "@gx-design-vue/pro-utils";
 import { ConfigProvider, Menu } from "antdv-next";
-import { GIcon } from "@gx-design-vue/icon";
 //#region src/components/Menu/index.tsx
 /** 取菜单项首字母（折叠态无图标时的兜底展示）。 */
 function getMenuTitleSymbol(title) {
 	return title ? title.charAt(0).toUpperCase() : null;
 }
-/** 渲染菜单图标：兼容 VNode / 组件 / 图片地址 / 图标名。 */
-function renderMenuIcon(icon) {
-	if (!icon) return null;
-	if (isVNode(icon)) return icon;
-	if (isString(icon)) {
-		if (isUrl(icon) || isImg(icon)) return createVNode("img", {
-			"src": icon,
-			"alt": "icon"
-		}, null);
-		return createVNode(GIcon, { "type": icon }, null);
-	}
-	if (typeof icon === "function" || typeof icon === "object") return h(icon);
-	return null;
-}
 /**
 * 将携带 `route` 的菜单项扁平为 `key → route`，供 `select` 事件回填 `LayoutSelectInfo.route`。
 */

package/dist/components/{Sider/style.d.ts → Menu/style/siderMenu.d.ts}

@@ -2,7 +2,7 @@ import * as _$vue from "vue";
 import { CSSProperties } from "vue";
 import { GetDefaultToken } from "antdv-next/dist/theme/internal";
 
-//#region src/components/Sider/style.d.ts
+//#region src/components/Menu/style/siderMenu.d.ts
 /** Component only token. Which will handle additional calculation of alias token */
 interface ComponentToken {
   /**

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

@@ -1,6 +1,6 @@
 import { proGenStyleHooks, setAlpha } from "@gx-design-vue/pro-provider";
 import { unit as unit$1 } from "@antdv-next/cssinjs";
-//#region src/components/Sider/style.ts
+//#region src/components/Menu/style/siderMenu.ts
 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;
@@ -103,15 +103,16 @@ const genSiderMenuStyle = (token) => {
 	return {
 		[`${componentCls}`]: {
 			boxSizing: "border-box",
-			width: "100%",
 			margin: 0,
 			padding: 0,
 			color: token.siderColorTextMenu || token.itemColor,
 			fontSize: token.fontSize,
-			lineHeight: token.lineHeight,
+			lineHeight: 0,
 			listStyle: "none",
+			overflow: "hidden",
 			background: token.siderColorMenuBackground || token.itemBg || "transparent",
 			outline: "none",
+			transition: `width ${token.motionDurationSlow} cubic-bezier(0.2, 0, 0, 1) 0s`,
 			"ul, ol": {
 				margin: 0,
 				padding: 0,
@@ -263,7 +264,6 @@ const genSiderMenuStyle = (token) => {
 				top: "50%",
 				insetInlineEnd: token.margin,
 				width: siderMenuArrowSize,
-				height: siderMenuArrowSize,
 				color: "currentcolor",
 				transform: "translateY(-50%)",
 				transition: ["transform", "opacity"].map((prop) => `${prop} ${token.motionDurationSlow}`).join(","),
@@ -363,6 +363,6 @@ const genSiderMenuStyle = (token) => {
 		}
 	};
 };
-var style_default = proGenStyleHooks("ProSiderMenu", genSiderMenuStyle, prepareComponentToken);
+var siderMenu_default = proGenStyleHooks("ProSiderMenu", genSiderMenuStyle, prepareComponentToken);
 //#endregion
-export { style_default as default, prepareComponentToken };
+export { siderMenu_default as default, prepareComponentToken };

package/dist/components/PageContainer/PageHeader.d.ts

@@ -1,7 +1,6 @@
 import { BreadcrumbItemType, LayoutBreadcrumbConfig, LayoutBreadcrumbSlotProps, LayoutMenuRoute, PageContainerClassNamesType, PageContainerStylesType } from "../../interface.js";
 import * as _$vue from "vue";
 import { SlotsType } from "vue";
-import { CustomRender } from "@gx-design-vue/pro-utils";
 
 //#region src/components/PageContainer/PageHeader.d.ts
 interface PageHeaderProps {
@@ -14,8 +13,6 @@ interface PageHeaderProps {
   /** 面包屑数据 */
   breadcrumbItems: BreadcrumbItemType[];
   breadcrumbRoutes: LayoutMenuRoute[];
-  /** 自定义面包屑渲染 */
-  breadcrumb?: (slotProps: LayoutBreadcrumbSlotProps) => CustomRender;
   /** 语义样式 */
   proStyles?: PageContainerStylesType;
   proClasses?: PageContainerClassNamesType;