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

package/dist/components/Menu/index.js

@@ -1,156 +1,622 @@
 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 } from "vue";
+import { buildHeaderProMenuTokens, buildSiderProMenuTokens } from "../../utils/themeComponents.js";
+import { PRO_MENU_SLOT_KEYS } from "./interface.js";
+import { useMenuOverflow } from "./overflow.js";
+import style_default from "./style/index.js";
+import { Transition, computed, createTextVNode, createVNode, defineComponent, isVNode, mergeProps, nextTick, onBeforeUnmount, ref, vShow, watch, withDirectives } from "vue";
 import { useProToken } from "@gx-design-vue/pro-provider";
 import { classNames, getSlotsProps } from "@gx-design-vue/pro-utils";
-import { ConfigProvider, Menu } from "antdv-next";
+import { ConfigProvider, Popover, Tooltip } from "antdv-next";
+import { useBaseConfig } from "antdv-next/config-provider/context";
+import useCSSVarCls from "antdv-next/config-provider/hooks/useCSSVarCls";
+import { omit } from "es-toolkit";
 //#region src/components/Menu/index.tsx
-/** 取菜单项首字母（折叠态无图标时的兜底展示）。 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const DEFAULT_INLINE_INDENT = 24;
+const POPUP_CLOSE_DELAY = 120;
+/** horizontal 模式溢出「...」submenu 的合成 key */
+const OVERFLOW_MENU_KEY = "__overflow__";
+/** horizontal 模式溢出隐藏态：脱离文档流（不挤占可见项）但保留 offsetWidth 可测（参考 @v-c/overflow Item） */
+const OVERFLOW_HIDDEN_STYLE = {
+	opacity: 0,
+	position: "absolute",
+	height: 0,
+	overflow: "hidden",
+	pointerEvents: "none"
+};
+const SIDER_POPUP_BUILTIN_PLACEMENTS = { rightTop: {
+	points: ["tl", "tr"],
+	offset: [0, 0],
+	overflow: {
+		adjustX: true,
+		adjustY: true
+	},
+	autoArrow: false
+} };
+const SIDER_NESTED_POPUP_BUILTIN_PLACEMENTS = { rightTop: {
+	points: ["tl", "tr"],
+	offset: [-4, 0],
+	overflow: {
+		adjustX: true,
+		adjustY: true
+	},
+	autoArrow: false
+} };
+/** horizontal 模式一级子菜单向下展开（bottomLeft），参考 vue-components placements.ts */
+const HEADER_POPUP_BUILTIN_PLACEMENTS = { bottomLeft: {
+	points: ["tl", "bl"],
+	offset: [0, 0],
+	overflow: {
+		adjustX: true,
+		adjustY: true
+	},
+	autoArrow: false
+} };
+let hasProMenuInitialAutoScrolled = false;
+function isPathPrefix(prefix, path) {
+	return prefix.length <= path.length && prefix.every((key, index) => key === path[index]);
+}
+function isSamePath(path, target) {
+	return path.length === target.length && isPathPrefix(path, target);
+}
+function getPathKey(path) {
+	return path.join("\0");
+}
 function getMenuTitleSymbol(title) {
 	return title ? title.charAt(0).toUpperCase() : null;
 }
-/**
-* 将携带 `route` 的菜单项扁平为 `key → route`，供 `select` 事件回填 `LayoutSelectInfo.route`。
-*/
-function flattenItemRoutes(items) {
-	const routeByKey = /* @__PURE__ */ new Map();
-	function walk(list) {
-		for (const item of list) {
-			const route = item.route;
-			if (route && item.key != null) routeByKey.set(String(item.key), route);
-			if (Array.isArray(item.children)) walk(item.children);
-		}
-	}
-	walk(items);
-	return routeByKey;
+function getVisibleChildren(route) {
+	return route.children?.filter((child) => !child.meta?.hideInMenu) ?? [];
+}
+function hasSelectedDescendant(route, selectedKeys) {
+	if (selectedKeys.has(route.name)) return true;
+	return getVisibleChildren(route).some((child) => hasSelectedDescendant(child, selectedKeys));
+}
+function toMenuRenderItem(route, type) {
+	return {
+		key: route.name,
+		label: route.meta?.title,
+		icon: route.meta?.icon,
+		disabled: route.meta?.disabled,
+		title: route.meta?.title,
+		type,
+		route
+	};
+}
+function getMenuRenderItemIcon(item, route) {
+	return item.icon ?? route.meta?.icon;
+}
+function resetCollapseStyle(el) {
+	el.style.maxHeight = "";
+	el.style.overflow = el.dataset.oldOverflow ?? "";
 }
 /**
-* LayoutMenu —— 自洽的布局菜单组件。
-*
-* 直接吃路由分支 `menus`，内部经 `buildMenuItems` 转 antdv-next 菜单项；
-* 视觉定制通过 `menuItemIcon`/`menuItemLabel`/`menuItemExtra`（prop 或同名 slot，prop 优先）
-* 注入 antdv-next 的 `iconRender`/`labelRender`/`extraRender`。可脱离 GProLayout 独立使用。
+* Vue 3 <Transition> 在 JSX 中只认 onXxx 前缀的 props。
+* 参考 Vue 源码 getTransitionRawProps —— 只收集 key.startsWith('on') 的函数。
 */
-const LayoutMenu = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
-	const { prefixCls, hashId, cssVarCls, rootCls, proClasses, proStyles, collapsed } = useLayoutBase(props);
+const collapseTransitionHooks = {
+	onBeforeEnter(el) {
+		const target = el;
+		target.dataset.oldOverflow = target.style.overflow;
+		target.style.maxHeight = "0";
+		target.style.overflow = "hidden";
+	},
+	onEnter(el) {
+		const target = el;
+		requestAnimationFrame(() => {
+			target.style.maxHeight = target.scrollHeight === 0 ? "0" : `${target.scrollHeight}px`;
+			target.style.overflow = "hidden";
+		});
+	},
+	onAfterEnter(el) {
+		resetCollapseStyle(el);
+	},
+	onEnterCancelled(el) {
+		resetCollapseStyle(el);
+	},
+	onBeforeLeave(el) {
+		const target = el;
+		target.dataset.oldOverflow = target.style.overflow;
+		target.style.maxHeight = `${target.scrollHeight}px`;
+		target.style.overflow = "hidden";
+	},
+	onLeave(el) {
+		const target = el;
+		if (target.scrollHeight !== 0) target.style.maxHeight = "0";
+	},
+	onAfterLeave(el) {
+		resetCollapseStyle(el);
+	},
+	onLeaveCancelled(el) {
+		resetCollapseStyle(el);
+	}
+};
+const ProMenuContent = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
+	const { proClasses, proStyles, collapsed } = useLayoutBase(props);
+	const { prefixCls } = useBaseConfig("pro-menu", props);
+	const rootCls = useCSSVarCls(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
 	const { proLayoutToken } = useProToken();
 	const mode = computed(() => props.mode ?? (props.placement === "header" ? "horizontal" : "inline"));
-	const menuThemeTokens = computed(() => props.placement === "header" ? buildHeaderMenuTokens(proLayoutToken.value) : buildSiderMenuTokens(proLayoutToken.value));
-	const menuClassNames = computed(() => classNames(`${prefixCls.value}-menu`, `${prefixCls.value}-menu-${props.placement ?? "sider"}`, cssVarCls.value, rootCls.value, proClasses.value.menu, props.class));
-	const menuPopupClassName = computed(() => classNames(`${prefixCls.value}-menu-popup`, hashId.value, cssVarCls.value, rootCls.value));
-	const inlineCollapsed = computed(() => props.placement === "sider" && mode.value === "inline" && collapsed.value);
-	/**
-	* 收起态时不要把 openKeys 受控给底层 Menu：
-	* - 让 UI 库在 collapsed / hover popup 场景自行维护临时展开态
-	* - 避免它把 openKeys 清空后写回上层状态，导致再次展开时丢失原展开菜单
-	*/
-	const mergedOpenKeys = computed(() => inlineCollapsed.value ? void 0 : props.openKeys);
-	const menuItems = computed(() => buildMenuItems(props.menus ?? []));
-	const routeByKey = computed(() => flattenItemRoutes(menuItems.value));
+	const isHorizontal = computed(() => mode.value === "horizontal");
+	const inlineCollapsed = computed(() => !isHorizontal.value && collapsed.value);
+	const popupOpenPath = ref([]);
+	const menuRef = ref();
+	const overflow = useMenuOverflow({
+		enabled: isHorizontal,
+		totalCount: computed(() => (props.menus ?? []).filter((route) => !route.meta?.hideInMenu).length)
+	});
+	const hasInitialScrolled = ref(false);
+	const popupCloseTimers = /* @__PURE__ */ new Map();
+	const pendingPopupCloseKeys = /* @__PURE__ */ new Set();
+	let initialScrollFrame;
+	const selectedKeySet = computed(() => new Set(props.selectedKeys ?? []));
+	const openKeySet = computed(() => new Set(props.openKeys ?? []));
 	const customRenders = computed(() => getSlotsProps({
 		slots,
 		props,
-		keys: LAYOUT_MENU_SLOT_KEYS,
+		keys: PRO_MENU_SLOT_KEYS,
 		render: false
 	}));
-	function getRouteFromItem(item) {
-		return item.route;
+	const menuClassNames = computed(() => classNames(`${prefixCls.value}`, `${prefixCls.value}-root`, proClasses.value.menu, hashId.value, cssVarCls.value, rootCls.value, {
+		[`${prefixCls.value}-collapsed`]: inlineCollapsed.value,
+		[`${prefixCls.value}-inline`]: !isHorizontal.value,
+		[`${prefixCls.value}-horizontal`]: isHorizontal.value
+	}, props.class));
+	const popupClassName = computed(() => classNames(`${prefixCls.value}-popover`, hashId.value, cssVarCls.value, rootCls.value));
+	function isPopupInteraction(ctx) {
+		return inlineCollapsed.value || ctx.popup;
+	}
+	function getPopupPath(route, ctx) {
+		return ctx.popup ? [...ctx.popupPath, route.name] : [route.name];
+	}
+	function isPopupPathOpen(path) {
+		return isPathPrefix(path, popupOpenPath.value);
+	}
+	function isSubMenuOpen(route, ctx) {
+		if (ctx.popup) return isPopupPathOpen(getPopupPath(route, ctx));
+		if (inlineCollapsed.value && ctx.depth === 0) return isPopupPathOpen([route.name]);
+		return openKeySet.value.has(route.name);
+	}
+	function getInlineIndent(route, ctx) {
+		return route.meta?.inlineIndent ?? ctx.inlineIndent;
+	}
+	function getItemStyle(route, ctx) {
+		const indent = getInlineIndent(route, ctx);
+		return {
+			"--pro-menu-level": ctx.depth,
+			"--pro-menu-indent": `${indent}px`
+		};
+	}
+	function emitOpenKeys(nextKeys) {
+		emit("openChange", nextKeys);
+		emit("update:openKeys", nextKeys);
+	}
+	function cancelPopupClose(path) {
+		(path ? Array.from({ length: path.length }, (_, index) => getPathKey(path.slice(0, index + 1))) : Array.from(popupCloseTimers.keys())).forEach((key) => {
+			const timer = popupCloseTimers.get(key);
+			if (timer !== void 0) {
+				clearTimeout(timer);
+				popupCloseTimers.delete(key);
+			}
+			pendingPopupCloseKeys.delete(key);
+		});
+	}
+	function openPopupPath(path) {
+		cancelPopupClose(path);
+		popupOpenPath.value = path;
+	}
+	function closePopupPath(path) {
+		const key = getPathKey(path);
+		pendingPopupCloseKeys.delete(key);
+		if (isSamePath(path, popupOpenPath.value)) {
+			const nextPath = path.slice(0, -1);
+			popupOpenPath.value = nextPath;
+			const nextKey = getPathKey(nextPath);
+			if (nextPath.length > 0 && pendingPopupCloseKeys.has(nextKey)) closePopupPath(nextPath);
+			return;
+		}
+		if (isPathPrefix(path, popupOpenPath.value)) pendingPopupCloseKeys.add(key);
+	}
+	function schedulePopupPathClose(path) {
+		const key = getPathKey(path);
+		cancelPopupClose(path);
+		const timer = setTimeout(() => {
+			popupCloseTimers.delete(key);
+			closePopupPath(path);
+		}, POPUP_CLOSE_DELAY);
+		popupCloseTimers.set(key, timer);
+	}
+	function clearPopupPath() {
+		cancelPopupClose();
+		pendingPopupCloseKeys.clear();
+		popupOpenPath.value = [];
 	}
-	const iconRender = (item) => {
-		const route = getRouteFromItem(item);
-		if (customRenders.value.menuItemIcon && route) return customRenders.value.menuItemIcon({
+	function handleSubMenuClick(route, ctx) {
+		if (route.meta?.disabled) return;
+		if (isPopupInteraction(ctx)) {
+			openPopupPath(getPopupPath(route, ctx));
+			return;
+		}
+		emitOpenKeys(openKeySet.value.has(route.name) ? (props.openKeys ?? []).filter((key) => key !== route.name) : [...props.openKeys ?? [], route.name]);
+	}
+	function handleItemClick(route, ctx) {
+		if (route.meta?.disabled) return;
+		const keyPath = [route.name, ...ctx.parentKeys].filter(Boolean);
+		const selectedKeys = [route.name];
+		emit("select", {
+			key: route.name,
+			keys: selectedKeys,
+			keyPath,
+			route
+		});
+		emit("update:selectedKeys", selectedKeys);
+		if (ctx.popup) clearPopupPath();
+	}
+	function handleKeydown(event, action) {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		action();
+	}
+	function scrollSelectedIntoView() {
+		if (hasInitialScrolled.value || hasProMenuInitialAutoScrolled || inlineCollapsed.value) return;
+		const menuEl = menuRef.value;
+		if (!menuEl) return;
+		const scrollContainer = props.getScrollContainer?.() ?? menuEl.closest(`.${prefixCls.value}-container`);
+		const selectedItem = menuEl.querySelector(`.${prefixCls.value}-item-selected`);
+		if (!scrollContainer || !selectedItem) return;
+		hasInitialScrolled.value = true;
+		hasProMenuInitialAutoScrolled = true;
+		const containerRect = scrollContainer.getBoundingClientRect();
+		const selectedRect = selectedItem.getBoundingClientRect();
+		if (selectedRect.top >= containerRect.top && selectedRect.bottom <= containerRect.bottom) return;
+		const nextTop = selectedRect.top - containerRect.top + scrollContainer.scrollTop - scrollContainer.clientHeight / 2 + selectedItem.offsetHeight / 2;
+		scrollContainer.scrollTo({
+			top: Math.max(0, nextTop),
+			behavior: "auto"
+		});
+	}
+	function scheduleInitialScroll() {
+		if (hasInitialScrolled.value || hasProMenuInitialAutoScrolled) return;
+		nextTick(() => {
+			if (hasInitialScrolled.value || hasProMenuInitialAutoScrolled) return;
+			if (initialScrollFrame !== void 0) cancelAnimationFrame(initialScrollFrame);
+			initialScrollFrame = requestAnimationFrame(() => {
+				initialScrollFrame = void 0;
+				scrollSelectedIntoView();
+			});
+		});
+	}
+	watch(() => [
+		props.menus?.length ?? 0,
+		props.selectedKeys?.join("|") ?? "",
+		props.openKeys?.join("|") ?? ""
+	], scheduleInitialScroll, {
+		immediate: true,
+		flush: "post"
+	});
+	onBeforeUnmount(() => {
+		if (initialScrollFrame !== void 0) cancelAnimationFrame(initialScrollFrame);
+		cancelPopupClose();
+	});
+	function renderIcon(route, item, firstLevelCollapsed) {
+		if (customRenders.value.menuItemIcon) return customRenders.value.menuItemIcon({
 			item,
 			route
 		});
-		const icon = renderMenuIcon(item.icon ?? route?.meta?.icon);
-		const iconNode = !icon && collapsed.value ? getMenuTitleSymbol(route?.meta?.title) : icon;
+		const icon = renderMenuIcon(getMenuRenderItemIcon(item, route));
+		const iconNode = !icon && firstLevelCollapsed ? getMenuTitleSymbol(route.meta?.title) : icon;
 		if (!iconNode) return null;
-		const iconClass = route?.meta?.classNames?.itemIcon;
-		const iconStyle = route?.meta?.styles?.itemIcon;
-		if (iconClass || iconStyle) return createVNode("span", {
-			"class": iconClass,
-			"style": iconStyle
+		return createVNode("span", {
+			"class": classNames(`${prefixCls.value}-icon`, route.meta?.classNames?.itemIcon),
+			"style": route.meta?.styles?.itemIcon
 		}, [iconNode]);
-		return iconNode;
-	};
-	const labelRender = (item) => {
-		const route = getRouteFromItem(item);
-		if (customRenders.value.menuItemLabel && route) return customRenders.value.menuItemLabel({
+	}
+	function renderLabel(route, item) {
+		const label = customRenders.value.menuItemLabel ? customRenders.value.menuItemLabel({
 			item,
 			route
-		});
-		const titleClass = route?.meta?.classNames?.itemTitle;
-		const titleStyle = route?.meta?.styles?.itemTitle;
-		const textClass = route?.meta?.classNames?.itemTitleText;
-		const textStyle = route?.meta?.styles?.itemTitleText;
-		const label = textClass || textStyle ? createVNode("span", {
-			"class": textClass,
-			"style": textStyle
+		}) : route.meta?.classNames?.itemTitleText || route.meta?.styles?.itemTitleText ? createVNode("span", {
+			"class": route.meta?.classNames?.itemTitleText,
+			"style": route.meta?.styles?.itemTitleText
 		}, [item.label]) : item.label;
-		if (titleClass || titleStyle) return createVNode("span", {
-			"class": titleClass,
-			"style": titleStyle
+		return createVNode("span", {
+			"class": classNames(`${prefixCls.value}-title`, route.meta?.classNames?.itemTitle),
+			"style": route.meta?.styles?.itemTitle
 		}, [label]);
-		return label;
-	};
-	const extraRender = (item) => {
-		const route = getRouteFromItem(item);
-		if (customRenders.value.menuItemExtra && route) return customRenders.value.menuItemExtra({
+	}
+	function renderExtra(route, item) {
+		if (customRenders.value.menuItemExtra) return customRenders.value.menuItemExtra({
 			item,
 			route
 		});
-		if (route?.meta?.rightContent) {
-			const extra = route.meta.rightContent(route.meta);
-			if (extra == null || extra === false) return null;
-			return createVNode("span", {
-				"class": route.meta.classNames?.itemRight,
-				"style": route.meta.styles?.itemRight
-			}, [extra]);
+		if (!route.meta?.rightContent) return null;
+		const extra = route.meta.rightContent(route.meta);
+		if (extra == null || extra === false) return null;
+		return createVNode("span", {
+			"class": classNames(`${prefixCls.value}-extra`, route.meta.classNames?.itemRight),
+			"style": route.meta.styles?.itemRight
+		}, [extra]);
+	}
+	function renderMenuItem(route, ctx) {
+		const item = toMenuRenderItem(route, "item");
+		const firstLevelCollapsed = inlineCollapsed.value && !ctx.popup && ctx.depth === 0;
+		const selected = selectedKeySet.value.has(route.name);
+		const disabled = !!route.meta?.disabled;
+		const showCollapsedTooltip = firstLevelCollapsed && !!route.meta?.title;
+		const itemNode = createVNode("div", {
+			"class": classNames(`${prefixCls.value}-item`, route.meta?.classNames?.item, {
+				[`${prefixCls.value}-item-selected`]: selected,
+				[`${prefixCls.value}-item-disabled`]: disabled,
+				[`${prefixCls.value}-item-collapsed`]: firstLevelCollapsed
+			}),
+			"style": {
+				...getItemStyle(route, ctx),
+				...route.meta?.styles?.item
+			},
+			"role": "menuitem",
+			"tabindex": disabled ? -1 : 0,
+			"onClick": () => handleItemClick(route, ctx),
+			"onKeydown": (event) => handleKeydown(event, () => handleItemClick(route, ctx))
+		}, [
+			renderIcon(route, item, firstLevelCollapsed),
+			!firstLevelCollapsed && renderLabel(route, item),
+			!firstLevelCollapsed && renderExtra(route, item)
+		]);
+		return createVNode("li", {
+			"key": route.name,
+			"class": `${prefixCls.value}-node`,
+			"data-overflow-item": ctx.overflowTopLevel ? "" : void 0,
+			"style": ctx.overflowHidden ? OVERFLOW_HIDDEN_STYLE : void 0,
+			"role": "none"
+		}, [showCollapsedTooltip ? createVNode(Tooltip, {
+			"title": route.meta?.title,
+			"placement": "right",
+			"classes": { root: `${prefixCls.value}-inline-collapsed-tooltip` }
+		}, _isSlot(itemNode) ? itemNode : { default: () => [itemNode] }) : itemNode]);
+	}
+	function renderSubMenuTitle(route, ctx, opened, active) {
+		const item = toMenuRenderItem(route, "submenu");
+		const firstLevelCollapsed = inlineCollapsed.value && !ctx.popup && ctx.depth === 0;
+		const disabled = !!route.meta?.disabled;
+		return createVNode("div", {
+			"class": classNames(`${prefixCls.value}-item`, `${prefixCls.value}-submenu-title`, {
+				[`${prefixCls.value}-item-open`]: opened,
+				[`${prefixCls.value}-item-active`]: active,
+				[`${prefixCls.value}-item-disabled`]: disabled,
+				[`${prefixCls.value}-item-collapsed`]: firstLevelCollapsed,
+				[`${prefixCls.value}-submenu-title-popup`]: ctx.popup
+			}),
+			"style": getItemStyle(route, ctx),
+			"role": "menuitem",
+			"aria-expanded": opened,
+			"tabindex": disabled ? -1 : 0,
+			"title": firstLevelCollapsed ? route.meta?.title : void 0,
+			"onClick": () => handleSubMenuClick(route, ctx),
+			"onKeydown": (event) => handleKeydown(event, () => handleSubMenuClick(route, ctx))
+		}, [
+			renderIcon(route, item, firstLevelCollapsed),
+			!firstLevelCollapsed && renderLabel(route, item),
+			!firstLevelCollapsed && renderExtra(route, item),
+			!firstLevelCollapsed && createVNode("i", { "class": `${prefixCls.value}-arrow` }, null)
+		]);
+	}
+	function renderSubMenu(route, children, ctx) {
+		let _slot;
+		const opened = isSubMenuOpen(route, ctx);
+		const active = hasSelectedDescendant(route, selectedKeySet.value);
+		const disabled = !!route.meta?.disabled;
+		const titleNode = renderSubMenuTitle(route, ctx, opened, active);
+		const popupPlacement = ctx.horizontal && ctx.depth === 0 && !ctx.popup ? "bottomLeft" : "rightTop";
+		const popupBuiltinPlacements = popupPlacement === "bottomLeft" ? HEADER_POPUP_BUILTIN_PLACEMENTS : ctx.popup ? SIDER_NESTED_POPUP_BUILTIN_PLACEMENTS : SIDER_POPUP_BUILTIN_PLACEMENTS;
+		const usePopup = ctx.popup || !ctx.popup && ctx.depth === 0 && (inlineCollapsed.value || ctx.horizontal);
+		const nextCtx = {
+			depth: ctx.depth + 1,
+			parentKeys: [route.name, ...ctx.parentKeys],
+			popup: ctx.popup,
+			popupPath: ctx.popupPath,
+			inlineIndent: getInlineIndent(route, ctx),
+			horizontal: ctx.horizontal
+		};
+		if (usePopup) {
+			const popupPath = getPopupPath(route, ctx);
+			const popoverOpen = isPopupPathOpen(popupPath);
+			return createVNode("li", {
+				"key": route.name,
+				"class": classNames(`${prefixCls.value}-node`, `${prefixCls.value}-submenu`, route.meta?.classNames?.subMenu, {
+					[`${prefixCls.value}-submenu-open`]: popoverOpen,
+					[`${prefixCls.value}-submenu-active`]: active
+				}),
+				"data-overflow-item": ctx.overflowTopLevel ? "" : void 0,
+				"style": {
+					...ctx.overflowHidden ? OVERFLOW_HIDDEN_STYLE : null,
+					...route.meta?.styles?.subMenu
+				},
+				"role": "none"
+			}, [createVNode(Popover, {
+				"trigger": "hover",
+				"placement": popupPlacement,
+				"builtinPlacements": popupBuiltinPlacements,
+				"arrow": false,
+				"open": popoverOpen,
+				"classes": {
+					root: classNames(popupClassName.value, `${prefixCls.value}-submenu-placement-${popupPlacement}`, `${prefixCls.value}-${ctx.horizontal ? "horizontal" : "inline"}-popover`, { [`${prefixCls.value}-submenu-placement-nested`]: ctx.popup }, route.meta?.classNames?.subMenuPopup),
+					container: `${prefixCls.value}-popover-container`,
+					content: `${prefixCls.value}-popover-content`
+				},
+				"onOpenChange": (open) => {
+					if (disabled) return;
+					if (open) openPopupPath(popupPath);
+					else schedulePopupPathClose(popupPath);
+				}
+			}, {
+				default: () => [titleNode],
+				content: () => createVNode("div", { "class": `${prefixCls.value}-submenu-popup` }, [renderMenuList(children, {
+					depth: 0,
+					parentKeys: [route.name, ...ctx.parentKeys],
+					popup: true,
+					popupPath,
+					inlineIndent: getInlineIndent(route, ctx),
+					horizontal: ctx.horizontal
+				})])
+			})]);
 		}
-		return null;
-	};
+		return createVNode("li", {
+			"key": route.name,
+			"class": classNames(`${prefixCls.value}-node`, `${prefixCls.value}-submenu`, route.meta?.classNames?.subMenu, {
+				[`${prefixCls.value}-submenu-open`]: opened,
+				[`${prefixCls.value}-submenu-active`]: active
+			}),
+			"style": route.meta?.styles?.subMenu,
+			"role": "none"
+		}, [titleNode, createVNode(Transition, mergeProps({ "name": `${prefixCls.value}-collapse` }, collapseTransitionHooks), _isSlot(_slot = withDirectives(renderMenuList(children, nextCtx), [[vShow, opened]])) ? _slot : { default: () => [_slot] })]);
+	}
+	function renderGroup(route, children, ctx) {
+		const item = toMenuRenderItem(route, "group");
+		return createVNode("li", {
+			"key": route.name,
+			"class": classNames(`${prefixCls.value}-group`, route.meta?.classNames?.subMenu),
+			"style": route.meta?.styles?.subMenu,
+			"role": "presentation"
+		}, [createVNode("div", {
+			"class": `${prefixCls.value}-group-title`,
+			"style": getItemStyle(route, ctx)
+		}, [renderLabel(route, item)]), renderMenuList(children, {
+			depth: ctx.depth + 1,
+			parentKeys: [route.name, ...ctx.parentKeys],
+			popup: ctx.popup,
+			popupPath: ctx.popupPath,
+			inlineIndent: getInlineIndent(route, ctx),
+			horizontal: ctx.horizontal
+		})]);
+	}
+	function renderRoute(route, ctx) {
+		if (route.meta?.hideInMenu) return null;
+		const children = getVisibleChildren(route);
+		const divider = route.meta?.divider ? createVNode("li", {
+			"key": `${route.name}-divider`,
+			"class": `${prefixCls.value}-divider`,
+			"role": "separator"
+		}, null) : null;
+		const node = children.length > 0 ? route.meta?.menuItemType === "group" ? renderGroup(route, children, ctx) : renderSubMenu(route, children, ctx) : renderMenuItem(route, ctx);
+		return divider ? [divider, node] : node;
+	}
+	function renderMenuList(menus, ctx) {
+		return createVNode("ul", {
+			"class": classNames(`${prefixCls.value}`, {
+				[`${prefixCls.value}-inline`]: !ctx.horizontal,
+				[`${prefixCls.value}-horizontal`]: ctx.horizontal && !ctx.popup,
+				[`${prefixCls.value}-sub`]: ctx.depth > 0 || ctx.popup,
+				[`${prefixCls.value}-popup-list`]: ctx.popup,
+				[`${prefixCls.value}-${ctx.horizontal ? "horizontal" : "inline"}-popup-list`]: ctx.popup
+			}),
+			"role": ctx.popup ? "menu" : void 0
+		}, [menus.map((route) => renderRoute(route, ctx))]);
+	}
+	/** horizontal 模式溢出「...」触发器，popup 内容为被收起的一级项 */
+	function renderOverflowRest(allRoutes) {
+		const hiddenRoutes = overflow.hiddenIndexes.value.map((index) => allRoutes[index]).filter(Boolean);
+		if (hiddenRoutes.length === 0) return null;
+		const restActive = hiddenRoutes.some((route) => selectedKeySet.value.has(route.name) || hasSelectedDescendant(route, selectedKeySet.value));
+		const popupPath = [OVERFLOW_MENU_KEY];
+		const popoverOpen = isPopupPathOpen(popupPath);
+		return createVNode("li", {
+			"key": OVERFLOW_MENU_KEY,
+			"class": classNames(`${prefixCls.value}-node`, `${prefixCls.value}-submenu`, {
+				[`${prefixCls.value}-submenu-open`]: popoverOpen,
+				[`${prefixCls.value}-submenu-active`]: restActive
+			}),
+			"data-overflow-rest": "",
+			"role": "none"
+		}, [createVNode(Popover, {
+			"trigger": "hover",
+			"placement": "bottomLeft",
+			"builtinPlacements": HEADER_POPUP_BUILTIN_PLACEMENTS,
+			"arrow": false,
+			"open": popoverOpen,
+			"classes": {
+				root: classNames(popupClassName.value, `${prefixCls.value}-submenu-placement-bottomLeft`, `${prefixCls.value}-horizontal-popover`),
+				container: `${prefixCls.value}-popover-container`,
+				content: `${prefixCls.value}-popover-content`
+			},
+			"onOpenChange": (open) => {
+				if (open) openPopupPath(popupPath);
+				else schedulePopupPathClose(popupPath);
+			}
+		}, {
+			default: () => [createVNode("div", {
+				"class": classNames(`${prefixCls.value}-item`, `${prefixCls.value}-submenu-title`, { [`${prefixCls.value}-item-active`]: restActive }),
+				"role": "menuitem",
+				"tabindex": 0
+			}, [createVNode("span", { "class": `${prefixCls.value}-title` }, [createTextVNode("···")])])],
+			content: () => createVNode("div", { "class": `${prefixCls.value}-submenu-popup` }, [renderMenuList(hiddenRoutes, {
+				depth: 0,
+				parentKeys: [],
+				popup: true,
+				popupPath,
+				inlineIndent: DEFAULT_INLINE_INDENT,
+				horizontal: true
+			})])
+		})]);
+	}
 	return () => {
-		const items = menuItems.value;
-		if (items.length === 0) return null;
-		return createVNode(ConfigProvider, { "theme": { components: { Menu: menuThemeTokens.value } } }, { default: () => [createVNode(Menu, {
+		const menus = props.menus ?? [];
+		if (menus.length === 0) return null;
+		if (!isHorizontal.value) return createVNode("ul", {
+			"ref": menuRef,
 			"class": menuClassNames.value,
 			"style": {
 				...props.style,
 				...proStyles.value.menu
 			},
-			"classes": { popup: { root: menuPopupClassName.value } },
-			"mode": mode.value,
-			"theme": props.theme,
-			"items": items,
-			"selectedKeys": props.selectedKeys,
-			"openKeys": mergedOpenKeys.value,
-			"inlineCollapsed": inlineCollapsed.value,
-			"iconRender": iconRender,
-			"labelRender": labelRender,
-			"extraRender": extraRender,
-			"onSelect": (info) => {
-				const key = String(info.key);
-				const route = routeByKey.value.get(key);
-				emit("select", {
-					key,
-					keys: info.selectedKeys,
-					keyPath: info.keyPath,
-					route
-				});
-				emit("update:selectedKeys", info.selectedKeys);
+			"role": "menu",
+			"data-pro-menu-token-key": proLayoutToken.value.key
+		}, [menus.map((route) => renderRoute(route, {
+			depth: 0,
+			parentKeys: [],
+			popup: false,
+			popupPath: [],
+			inlineIndent: DEFAULT_INLINE_INDENT,
+			horizontal: false
+		}))]);
+		const visibleMenus = menus.filter((route) => !route.meta?.hideInMenu);
+		return createVNode("ul", {
+			"ref": overflow.containerRef,
+			"class": classNames(menuClassNames.value, `${prefixCls.value}-overflow`),
+			"style": {
+				...props.style,
+				...proStyles.value.menu
 			},
-			"onOpenChange": (openKeys) => {
-				if (inlineCollapsed.value) return;
-				emit("openChange", openKeys);
-				emit("update:openKeys", openKeys);
-			}
-		}, null)] });
+			"role": "menubar",
+			"data-pro-menu-token-key": proLayoutToken.value.key
+		}, [visibleMenus.map((route, index) => renderRoute(route, {
+			depth: 0,
+			parentKeys: [],
+			popup: false,
+			popupPath: [],
+			inlineIndent: DEFAULT_INLINE_INDENT,
+			horizontal: true,
+			overflowTopLevel: true,
+			overflowHidden: overflow.isItemHidden(index)
+		})), overflow.restVisible.value && renderOverflowRest(visibleMenus)]);
 	};
 }, {
 	props: {
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		placement: {
+			type: String,
+			required: false
+		},
+		getScrollContainer: {
+			type: Function,
+			required: false
+		},
 		class: {
 			type: String,
 			required: false
@@ -159,9 +625,99 @@ const LayoutMenu = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
 			type: Object,
 			required: false
 		},
+		menus: {
+			type: Array,
+			required: false
+		},
+		selectedKeys: {
+			type: Array,
+			required: false
+		},
+		openKeys: {
+			type: Array,
+			required: false
+		},
+		theme: {
+			type: String,
+			required: false
+		},
+		mode: {
+			type: String,
+			required: false
+		},
+		collapsed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		proClasses: {
+			type: Object,
+			required: false
+		},
+		proStyles: {
+			type: Object,
+			required: false
+		},
+		menuItemIcon: {
+			type: Function,
+			required: false
+		},
+		menuItemLabel: {
+			type: Function,
+			required: false
+		},
+		menuItemExtra: {
+			type: Function,
+			required: false
+		}
+	},
+	emits: [
+		"select",
+		"openChange",
+		"update:selectedKeys",
+		"update:openKeys"
+	],
+	name: "ProMenuContent",
+	inheritAttrs: false
+});
+const ProMenu = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
+	const { token, proLayoutToken } = useProToken();
+	const mode = computed(() => props.mode ?? (props.placement === "header" ? "horizontal" : "inline"));
+	const isHorizontal = computed(() => mode.value === "horizontal");
+	const proMenuTokens = computed(() => isHorizontal.value ? buildHeaderProMenuTokens(proLayoutToken.value, token.value.Menu) : buildSiderProMenuTokens(proLayoutToken.value, token.value.Menu));
+	return () => createVNode(ConfigProvider, { "theme": { components: { ProMenu: proMenuTokens.value } } }, { default: () => [createVNode(ProMenuContent, mergeProps(omit(props, [
+		"onSelect",
+		"onOpenChange",
+		"onUpdate:selectedKeys",
+		"onUpdate:openKeys"
+	]), {
+		"onSelect": (info) => emit("select", info),
+		"onOpenChange": (keys) => emit("openChange", keys)
+	}, {
+		"onUpdate:selectedKeys": (keys) => emit("update:selectedKeys", keys),
+		"onUpdate:openKeys": (keys) => emit("update:openKeys", keys)
+	}), slots)] });
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: false
+		},
 		placement: {
 			type: String,
-			required: true
+			required: false
+		},
+		getScrollContainer: {
+			type: Function,
+			required: false
+		},
+		class: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
 		},
 		menus: {
 			type: Array,
@@ -215,8 +771,8 @@ const LayoutMenu = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
 		"update:selectedKeys",
 		"update:openKeys"
 	],
-	name: "LayoutMenu",
+	name: "ProMenu",
 	inheritAttrs: false
 });
 //#endregion
-export { LayoutMenu as default };
+export { ProMenu as default };