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

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

@@ -0,0 +1,50 @@
+import { LayoutClassNamesType, LayoutMenuItemSlotProps, LayoutMenuRoute, LayoutSelectInfo, LayoutStylesType } from "../../interface.js";
+import { CSSProperties } from "vue";
+import { CustomRender } from "@gx-design-vue/pro-utils";
+
+//#region src/components/Menu/interface.d.ts
+interface ProMenuEmits {
+  'select': (info: LayoutSelectInfo) => void;
+  'openChange': (keys: string[]) => void;
+  'update:selectedKeys': (keys: string[]) => void;
+  'update:openKeys': (keys: string[]) => void;
+}
+interface ProMenuEmitsProps {
+  onSelect?: ProMenuEmits['select'];
+  onOpenChange?: ProMenuEmits['openChange'];
+  'onUpdate:selectedKeys'?: ProMenuEmits['update:selectedKeys'];
+  'onUpdate:openKeys'?: ProMenuEmits['update:openKeys'];
+}
+interface ProMenuProps extends ProMenuEmitsProps {
+  class?: string;
+  style?: CSSProperties;
+  /** 渲染位置：侧边 / 头部 */
+  placement: 'sider' | 'header';
+  /** 菜单路由分支（组件内部转 antdv-next 菜单项，无需外部预烤 items） */
+  menus?: LayoutMenuRoute[];
+  selectedKeys?: string[];
+  openKeys?: string[];
+  theme?: 'light' | 'dark';
+  mode?: 'inline' | 'horizontal' | 'vertical';
+  /** 折叠态（独立使用时由外部传入；缺省回退 LayoutContext） */
+  collapsed?: boolean;
+  /** 布局语义类名（当前消费 menu） */
+  proClasses?: LayoutClassNamesType;
+  /** 布局语义样式（当前消费 menu） */
+  proStyles?: LayoutStylesType;
+  /** 菜单项图标（等价 #menuItemIcon slot） */
+  menuItemIcon?: (slotProps: LayoutMenuItemSlotProps) => CustomRender;
+  /** 菜单项文本（等价 #menuItemLabel slot） */
+  menuItemLabel?: (slotProps: LayoutMenuItemSlotProps) => CustomRender;
+  /** 菜单项额外内容（等价 #menuItemExtra slot） */
+  menuItemExtra?: (slotProps: LayoutMenuItemSlotProps) => CustomRender;
+}
+interface ProMenuSlots {
+  menuItemIcon?: (props: LayoutMenuItemSlotProps) => any;
+  menuItemLabel?: (props: LayoutMenuItemSlotProps) => any;
+  menuItemExtra?: (props: LayoutMenuItemSlotProps) => any;
+}
+/** ProMenu 的 slot key 列表，供 `getSlotsProps` 合并「prop > slot」。 */
+declare const PRO_MENU_SLOT_KEYS: readonly ["menuItemIcon", "menuItemLabel", "menuItemExtra"];
+//#endregion
+export { PRO_MENU_SLOT_KEYS, ProMenuEmits, ProMenuEmitsProps, ProMenuProps, ProMenuSlots };

package/dist/components/Menu/interface.js

@@ -0,0 +1,9 @@
+//#region src/components/Menu/interface.ts
+/** ProMenu 的 slot key 列表，供 `getSlotsProps` 合并「prop > slot」。 */
+const PRO_MENU_SLOT_KEYS = [
+	"menuItemIcon",
+	"menuItemLabel",
+	"menuItemExtra"
+];
+//#endregion
+export { PRO_MENU_SLOT_KEYS };

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

@@ -0,0 +1,39 @@
+import { Ref } from "vue";
+
+//#region src/components/Menu/overflow.d.ts
+interface UseMenuOverflowOptions {
+  /** 是否启用溢出收起（仅 horizontal 模式） */
+  enabled: Ref<boolean>;
+  /** 一级菜单项总数（响应式） */
+  totalCount: Ref<number>;
+  /** 「...」触发器预估宽度（首次测量前的兜底） */
+  restWidth?: number;
+  /** 一级项 DOM 选择器（默认 [data-overflow-item]） */
+  itemSelector?: string;
+  /** 「...」触发器 DOM 选择器（默认 [data-overflow-rest]） */
+  restSelector?: string;
+}
+/**
+ * 轻量水平菜单溢出收起 hook（思路参考 @v-c/overflow）。
+ *
+ * 防闪烁策略（解决「右侧内容/面包屑异步渲染 → 容器宽度后变 → 省略号延迟出现」）：
+ *
+ * 1. 隐藏项样式由 Menu 的 li 负责，用 `position:absolute + opacity:0` 而非 `display:none` ——
+ *    元素脱离文档流（不挤占可见项）但 `offsetWidth` 仍可测，测量零延迟，无需临时改 style；
+ * 2. `lastVisibleIndex` 起步保守（0），首屏不「全显示」，靠 ResizeObserver 数据就绪后展开，
+ *    把闪烁方向从「全显示→收起」（刺眼）改为「少显示→展开」（温和）；
+ * 3. `restReady` 闸门：「...」触发器始终在 DOM（量宽度），但只有一次「所有项宽度就绪」的
+ *    完整计算确认溢出，`restReady` 才为 true，「...」才显示 —— 避免基于错误容器宽度的省略号跳变；
+ * 4. 不赌固定帧数：去掉 `nextTick + rAF(N帧)` buffer，ResizeObserver 是唯一权威触发源，
+ *    容器宽度变化（右侧内容异步渲染）会自动重算（自纠正）。
+ */
+declare function useMenuOverflow(options: UseMenuOverflowOptions): {
+  containerRef: Ref<HTMLElement, HTMLElement>;
+  recalc: () => void;
+  lastVisibleIndex: Ref<number, number>;
+  isItemHidden: (index: number) => boolean;
+  restVisible: import("vue").ComputedRef<boolean>;
+  hiddenIndexes: import("vue").ComputedRef<number[]>;
+};
+//#endregion
+export { useMenuOverflow };

package/dist/components/Menu/overflow.js

@@ -0,0 +1,81 @@
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { useResizeObserver } from "@vueuse/core";
+//#region src/components/Menu/overflow.ts
+/**
+* 轻量水平菜单溢出收起 hook（思路参考 @v-c/overflow）。
+*
+* 防闪烁策略（解决「右侧内容/面包屑异步渲染 → 容器宽度后变 → 省略号延迟出现」）：
+*
+* 1. 隐藏项样式由 Menu 的 li 负责，用 `position:absolute + opacity:0` 而非 `display:none` ——
+*    元素脱离文档流（不挤占可见项）但 `offsetWidth` 仍可测，测量零延迟，无需临时改 style；
+* 2. `lastVisibleIndex` 起步保守（0），首屏不「全显示」，靠 ResizeObserver 数据就绪后展开，
+*    把闪烁方向从「全显示→收起」（刺眼）改为「少显示→展开」（温和）；
+* 3. `restReady` 闸门：「...」触发器始终在 DOM（量宽度），但只有一次「所有项宽度就绪」的
+*    完整计算确认溢出，`restReady` 才为 true，「...」才显示 —— 避免基于错误容器宽度的省略号跳变；
+* 4. 不赌固定帧数：去掉 `nextTick + rAF(N帧)` buffer，ResizeObserver 是唯一权威触发源，
+*    容器宽度变化（右侧内容异步渲染）会自动重算（自纠正）。
+*/
+function useMenuOverflow(options) {
+	const { enabled, totalCount, restWidth = 48, itemSelector = "[data-overflow-item]", restSelector = "[data-overflow-rest]" } = options;
+	/** 绑定到水平菜单容器（ul） */
+	const containerRef = ref();
+	/** 最后一个可见项的下标；起步 0（只第 0 项可见），测量后展开。MAX_SAFE_INTEGER 表示全部可见 */
+	const lastVisibleIndex = ref(0);
+	/** 是否已完成一次「所有项宽度就绪」的完整计算；「...」文字在此前不显示 */
+	const restReady = ref(false);
+	let disposed = false;
+	function recalc() {
+		if (disposed) return;
+		if (!enabled.value) {
+			lastVisibleIndex.value = Number.MAX_SAFE_INTEGER;
+			restReady.value = false;
+			return;
+		}
+		const container = containerRef.value;
+		if (!container) return;
+		const containerWidth = container.clientWidth;
+		if (!containerWidth) return;
+		const items = Array.from(container.querySelectorAll(itemSelector));
+		let total = container.querySelector(restSelector)?.offsetWidth ?? restWidth;
+		let visible = 0;
+		let allMeasured = true;
+		for (const el of items) {
+			const itemWidth = el.offsetWidth;
+			if (!itemWidth) {
+				allMeasured = false;
+				break;
+			}
+			if (total + itemWidth > containerWidth) break;
+			total += itemWidth;
+			visible++;
+		}
+		if (!allMeasured) {
+			lastVisibleIndex.value = Math.max(visible - 1, 0);
+			return;
+		}
+		lastVisibleIndex.value = visible >= totalCount.value ? Number.MAX_SAFE_INTEGER : Math.max(visible - 1, 0);
+		restReady.value = visible < totalCount.value;
+	}
+	useResizeObserver(containerRef, recalc);
+	watch([enabled, totalCount], recalc, { flush: "post" });
+	onBeforeUnmount(() => {
+		disposed = true;
+	});
+	/** 某个下标的一级项是否被收起（隐藏） */
+	function isItemHidden(index) {
+		return enabled.value && index > lastVisibleIndex.value;
+	}
+	return {
+		containerRef,
+		recalc,
+		lastVisibleIndex,
+		isItemHidden,
+		restVisible: computed(() => enabled.value && restReady.value && lastVisibleIndex.value < totalCount.value - 1),
+		hiddenIndexes: computed(() => {
+			if (!enabled.value || lastVisibleIndex.value === Number.MAX_SAFE_INTEGER) return [];
+			return Array.from({ length: totalCount.value }, (_, index) => index).filter((index) => index > lastVisibleIndex.value);
+		})
+	};
+}
+//#endregion
+export { useMenuOverflow };

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

@@ -0,0 +1,12 @@
+import { MenuToken } from "./index.js";
+import { CSSObject } from "@antdv-next/cssinjs";
+import { GenerateStyle } from "antdv-next/dist/theme/internal";
+
+//#region src/components/Menu/style/base.d.ts
+/**
+ * Base 样式只放模式无关的结构约束。
+ * inline / horizontal 的颜色、尺寸、active bar 由各自文件覆盖。
+ */
+declare const genBaseStyle: GenerateStyle<MenuToken, CSSObject>;
+//#endregion
+export { genBaseStyle as default };

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

@@ -0,0 +1,36 @@
+//#region src/components/Menu/style/base.ts
+/**
+* Base 样式只放模式无关的结构约束。
+* inline / horizontal 的颜色、尺寸、active bar 由各自文件覆盖。
+*/
+const genBaseStyle = (token) => {
+	const { componentCls } = token;
+	return { [`${componentCls}`]: {
+		boxSizing: "border-box",
+		margin: 0,
+		padding: 0,
+		fontSize: token.fontSize,
+		lineHeight: 0,
+		listStyle: "none",
+		outline: "none",
+		"ul, ol": {
+			margin: 0,
+			padding: 0,
+			listStyle: "none"
+		},
+		[`${componentCls}-node`]: {
+			margin: 0,
+			padding: 0,
+			listStyle: "none"
+		},
+		[`${componentCls}-item`]: {
+			position: "relative",
+			boxSizing: "border-box",
+			cursor: "pointer"
+		},
+		[`${componentCls}-icon`]: { color: "currentcolor" },
+		[`${componentCls}-title`]: { minWidth: 0 }
+	} };
+};
+//#endregion
+export { genBaseStyle as default };

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

@@ -0,0 +1,19 @@
+import { MenuToken } from "./index.js";
+import { CSSObject } from "@antdv-next/cssinjs";
+import { GenerateStyle } from "antdv-next/dist/theme/internal";
+
+//#region src/components/Menu/style/horizontal.d.ts
+/**
+ * Horizontal 模式样式（水平菜单）。
+ *
+ * 不独立注册 token key，由 index.ts 用数组合并进 ProMenu 命名空间
+ * （对齐 antdv-next menu/style/index.ts 的 `[base, horizontal, vertical, theme]` 合并方式）。
+ *
+ * 选择器统一加 `${componentCls}-horizontal ` 前缀，仅作用于水平态，不污染 inline。
+ * active bar 复用 `::after` borderBottom 透明→选中色贴底，并显式重置 inline 右侧 bar 的
+ * transform/insetBlock/borderInlineEnd，避免与 inline `::after` 叠加。
+ * popup（子菜单下拉）在 horizontal popover / popup-list 分组内独立处理 header token。
+ */
+declare const genHorizontalStyle: GenerateStyle<MenuToken, CSSObject>;
+//#endregion
+export { genHorizontalStyle as default };

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

@@ -0,0 +1,303 @@
+import { unit } from "@antdv-next/cssinjs";
+//#region src/components/Menu/style/horizontal.ts
+/**
+* Horizontal 模式样式（水平菜单）。
+*
+* 不独立注册 token key，由 index.ts 用数组合并进 ProMenu 命名空间
+* （对齐 antdv-next menu/style/index.ts 的 `[base, horizontal, vertical, theme]` 合并方式）。
+*
+* 选择器统一加 `${componentCls}-horizontal ` 前缀，仅作用于水平态，不污染 inline。
+* active bar 复用 `::after` borderBottom 透明→选中色贴底，并显式重置 inline 右侧 bar 的
+* transform/insetBlock/borderInlineEnd，避免与 inline `::after` 叠加。
+* popup（子菜单下拉）在 horizontal popover / popup-list 分组内独立处理 header token。
+*/
+const genHorizontalStyle = (token) => {
+	const { antCls, componentCls } = token;
+	const iconSize = unit(token.iconSize || token.fontSize);
+	const headerMenuItemHeight = token.headerHeightLayoutHeader || token.itemHeight || token.controlHeightLG;
+	const headerMenuPaddingInline = token.itemPaddingInline ?? token.padding;
+	const activeBarHeight = unit(token.activeBarHeight);
+	const titleGap = token.iconMarginInlineEnd ?? token.marginSM;
+	const popupIconSize = unit(token.menuItemIconSize || token.iconSize || token.fontSize);
+	const popupItemHeight = token.itemHeight || token.controlHeight;
+	const popupMenuItemMarginInline = token.itemMarginInline ?? token.marginXXS;
+	const popupMenuItemMarginBlock = token.itemMarginBlock ?? token.marginXXS;
+	const popupMenuBasePadding = token.itemPaddingInline ?? token.padding;
+	const popupMenuArrowSize = token.calc(token.fontSize).div(7).mul(5).equal();
+	const popupMenuArrowOffset = token.calc(popupMenuArrowSize).mul(.25).equal();
+	const popupMenuPaddingWithArrow = token.calc(popupMenuArrowSize).add(token.padding).add(token.marginXS).equal();
+	const popupMenuTitleGap = token.iconMarginInlineEnd ?? token.marginSM;
+	const popupItemWidth = token.itemWidth || `calc(100% - ${unit(token.calc(popupMenuItemMarginInline).mul(2).equal())})`;
+	return {
+		[`${componentCls}`]: {
+			[`&${componentCls}-horizontal`]: {
+				display: "flex",
+				alignItems: "stretch",
+				flex: "auto",
+				minWidth: 0,
+				height: headerMenuItemHeight,
+				lineHeight: unit(headerMenuItemHeight),
+				border: 0,
+				borderBottom: `${unit(token.activeBarBorderWidth ?? token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
+				boxShadow: "none",
+				whiteSpace: "nowrap",
+				overflow: "hidden",
+				"&::after": {
+					display: "block",
+					clear: "both",
+					height: 0,
+					content: "\"\\20\""
+				}
+			},
+			[`&${componentCls}-overflow`]: {
+				display: "flex",
+				flex: "auto",
+				minWidth: 0,
+				height: "100%",
+				[`${componentCls}-item, ${componentCls}-submenu`]: { flex: "none" }
+			},
+			[`&${componentCls}-horizontal ${componentCls}-node`]: {
+				display: "inline-flex",
+				verticalAlign: "bottom",
+				margin: 0,
+				padding: 0,
+				listStyle: "none"
+			},
+			[`&${componentCls}-horizontal ${componentCls}-item, &${componentCls}-horizontal ${componentCls}-submenu-title`]: {
+				display: "inline-flex",
+				alignItems: "center",
+				height: "100%",
+				minHeight: 0,
+				marginBlock: 0,
+				marginInline: 0,
+				paddingInline: headerMenuPaddingInline,
+				lineHeight: unit(headerMenuItemHeight),
+				whiteSpace: "nowrap",
+				textOverflow: "ellipsis",
+				color: token.headerColorTextMenu || token.itemColor,
+				borderRadius: token.headerItemBorderRadius ?? token.horizontalItemBorderRadius,
+				"&::after": {
+					position: "absolute",
+					insetBlock: "auto",
+					insetBlockEnd: 0,
+					insetInline: headerMenuPaddingInline,
+					borderInlineEnd: "none",
+					borderBottom: `${activeBarHeight} solid transparent`,
+					transform: "none",
+					opacity: 1,
+					transition: `border-color ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+					content: "\"\""
+				},
+				[`&:not(${componentCls}-item-selected):not(${componentCls}-item-disabled):hover`]: {
+					color: token.headerColorTextMenuActive,
+					background: token.headerColorBgMenuItemHover || token.horizontalItemHoverBg,
+					"&::after": { borderBottomColor: token.headerColorTextMenuSelected }
+				},
+				[`&${componentCls}-item-active`]: {
+					color: token.headerColorTextSubMenuSelected,
+					"&::after": { borderBottomColor: token.headerColorTextMenuSelected }
+				},
+				[`&${componentCls}-item-selected`]: {
+					color: token.headerColorTextMenuSelected,
+					backgroundColor: token.headerColorBgMenuItemSelected,
+					"&::after": {
+						transform: "none",
+						opacity: 1,
+						borderBottomColor: token.headerColorTextMenuSelected
+					}
+				}
+			},
+			[`&${componentCls}-horizontal ${componentCls}-submenu-arrow, &${componentCls}-horizontal ${componentCls}-arrow`]: { display: "none" },
+			[`&${componentCls}-horizontal ${componentCls}-icon`]: {
+				display: "inline-flex",
+				flex: "none",
+				alignItems: "center",
+				justifyContent: "center",
+				minWidth: iconSize,
+				height: iconSize,
+				marginInlineEnd: titleGap,
+				color: "currentcolor",
+				fontSize: iconSize,
+				lineHeight: iconSize,
+				img: {
+					width: iconSize,
+					height: iconSize,
+					objectFit: "contain"
+				}
+			},
+			[`&${componentCls}-horizontal ${componentCls}-title`]: {
+				flex: "auto",
+				minWidth: 0,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			},
+			[`&${componentCls}-horizontal ${componentCls}-extra`]: {
+				flex: "none",
+				marginInlineStart: "auto",
+				paddingInlineStart: token.padding,
+				color: token.headerColorTextMenuSecondary || token.groupTitleColor
+			},
+			[`&${componentCls}-horizontal ${componentCls}-group-title`]: {
+				boxSizing: "border-box",
+				paddingBlock: token.paddingXXS,
+				paddingInlineStart: headerMenuPaddingInline,
+				paddingInlineEnd: token.padding,
+				color: token.headerColorTextMenuSecondary || token.groupTitleColor,
+				fontSize: token.groupTitleFontSize,
+				lineHeight: token.groupTitleLineHeight
+			},
+			[`&${componentCls}-horizontal ${componentCls}-divider`]: {
+				overflow: "hidden",
+				lineHeight: 0,
+				alignSelf: "center",
+				height: "60%",
+				marginInline: token.marginXS,
+				borderColor: token.colorSplit,
+				borderStyle: token.lineType,
+				borderWidth: 0,
+				borderInlineStartWidth: token.lineWidth,
+				borderTopWidth: 0,
+				padding: 0
+			}
+		},
+		[`${componentCls}-horizontal-popover${antCls}-popover`]: {
+			borderRadius: token.borderRadiusLG,
+			boxShadow: "none",
+			transformOrigin: "0 0",
+			zIndex: token.zIndexPopup,
+			[`&${componentCls}-submenu-placement-bottomLeft`]: { paddingBlockStart: token.paddingXS },
+			[`&${componentCls}-submenu-placement-nested`]: { paddingInlineStart: token.marginXXS },
+			[`${antCls}-popover-container, ${antCls}-popover-content, ${componentCls}-popover-content, ${componentCls}-popover-container`]: {
+				padding: 0,
+				background: "transparent",
+				borderRadius: token.borderRadiusLG,
+				boxShadow: "none"
+			},
+			[`${componentCls}-submenu-popup`]: {
+				position: "relative",
+				borderRadius: token.borderRadiusLG,
+				background: "transparent",
+				[`> ${componentCls}`]: {
+					borderRadius: token.borderRadiusLG,
+					boxShadow: token.boxShadowSecondary,
+					backgroundColor: token.headerColorBgMenuElevated || token.popupBg
+				}
+			}
+		},
+		[`${componentCls}-horizontal-popup-list`]: {
+			minWidth: token.dropdownWidth,
+			maxWidth: token.dropdownWidth,
+			maxHeight: `calc(100vh - ${unit(token.calc(token.controlHeightLG).mul(2.5).equal())})`,
+			padding: 0,
+			overflow: "hidden auto",
+			borderInlineEnd: 0,
+			color: token.headerColorTextMenu || token.itemColor,
+			background: token.headerColorBgMenuElevated || token.popupBg,
+			[`${componentCls}-item, ${componentCls}-submenu-title`]: {
+				position: "relative",
+				display: "flex",
+				alignItems: "center",
+				boxSizing: "border-box",
+				width: popupItemWidth,
+				height: popupItemHeight,
+				minHeight: popupItemHeight,
+				marginBlock: popupMenuItemMarginBlock,
+				marginInline: popupMenuItemMarginInline,
+				paddingInline: popupMenuBasePadding,
+				overflow: "hidden",
+				color: token.headerColorTextMenu || token.itemColor,
+				lineHeight: unit(popupItemHeight),
+				whiteSpace: "nowrap",
+				textOverflow: "ellipsis",
+				cursor: "pointer",
+				borderRadius: token.subMenuItemBorderRadius,
+				transition: [
+					`border-color ${token.motionDurationSlow}`,
+					`color ${token.motionDurationSlow}`,
+					`background-color ${token.motionDurationSlow}`,
+					`padding ${token.motionDurationFast} ${token.motionEaseOut}`
+				].join(","),
+				"> *": { flex: "none" }
+			},
+			[`${componentCls}-submenu-title`]: { paddingInlineEnd: popupMenuPaddingWithArrow },
+			[`${componentCls}-icon`]: {
+				display: "inline-flex",
+				flex: "none",
+				alignItems: "center",
+				justifyContent: "center",
+				minWidth: popupIconSize,
+				height: popupIconSize,
+				marginInlineEnd: popupMenuTitleGap,
+				color: "currentcolor",
+				fontSize: popupIconSize,
+				lineHeight: popupIconSize,
+				transition: [
+					`font-size ${token.motionDurationMid} ${token.motionEaseOut}`,
+					`margin ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+					`color ${token.motionDurationSlow}`
+				].join(","),
+				img: {
+					width: popupIconSize,
+					height: popupIconSize,
+					objectFit: "contain"
+				}
+			},
+			[`${componentCls}-title`]: {
+				flex: "auto",
+				minWidth: 0,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap",
+				transition: [
+					`opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+					`margin ${token.motionDurationSlow}`,
+					`color ${token.motionDurationSlow}`
+				].join(",")
+			},
+			[`${componentCls}-extra`]: {
+				flex: "none",
+				marginInlineStart: "auto",
+				paddingInlineStart: token.padding,
+				color: token.headerColorTextMenuSecondary || token.groupTitleColor
+			},
+			[`${componentCls}-arrow`]: {
+				position: "absolute",
+				top: "50%",
+				insetInlineEnd: token.margin,
+				width: popupMenuArrowSize,
+				color: "currentcolor",
+				transform: "translateY(-50%)",
+				transition: ["transform", "opacity"].map((prop) => `${prop} ${token.motionDurationSlow}`).join(","),
+				"&::before, &::after": {
+					position: "absolute",
+					width: token.calc(popupMenuArrowSize).mul(.6).equal(),
+					height: token.calc(popupMenuArrowSize).mul(.15).equal(),
+					backgroundColor: "currentcolor",
+					borderRadius: token.borderRadius,
+					transition: [
+						"background-color",
+						"transform",
+						"top",
+						"color"
+					].map((prop) => `${prop} ${token.motionDurationSlow} ${token.motionEaseInOut}`).join(","),
+					content: "\"\""
+				},
+				"&::before": { transform: `rotate(45deg) translateY(${unit(token.calc(popupMenuArrowOffset).mul(-1).equal())})` },
+				"&::after": { transform: `rotate(-45deg) translateY(${unit(popupMenuArrowOffset)})` }
+			},
+			[`${componentCls}-item:not(${componentCls}-item-selected):not(${componentCls}-item-active):hover,
+        ${componentCls}-submenu-title:not(${componentCls}-item-selected):not(${componentCls}-item-active):hover`]: {
+				color: token.headerColorTextMenuActive,
+				backgroundColor: token.headerColorBgMenuItemHover
+			},
+			[`${componentCls}-item-active, ${componentCls}-submenu-active > ${componentCls}-submenu-title`]: { color: token.headerColorTextSubMenuSelected || token.headerColorTextMenuSelected },
+			[`${componentCls}-item-selected`]: {
+				color: token.headerColorTextMenuSelected,
+				backgroundColor: token.headerColorBgMenuItemSelected
+			}
+		}
+	};
+};
+//#endregion
+export { genHorizontalStyle as default };