@gx-design-vue/pro-layout 0.1.0-alpha.0

package/dist/components/AppPage/style.js

@@ -0,0 +1,40 @@
+import { getAlphaColor, useStyle as useStyle$1 } from "@gx-design-vue/pro-provider";
+
+//#region src/components/AppPage/style.ts
+const pageLoadingStyle = (token) => {
+	return { [token.componentCls]: {
+		height: "100%",
+		[`&${token.componentCls}-loading`]: {
+			position: "relative",
+			height: "100%",
+			overflow: "hidden"
+		},
+		"&-blur": {
+			position: "absolute",
+			top: 0,
+			left: 0,
+			width: "100%",
+			height: "100%",
+			backgroundColor: getAlphaColor(token.colorBgContainer, .5),
+			[`& > ${token.componentCls}-spin`]: {
+				position: "absolute",
+				top: "50%",
+				left: "50%",
+				transform: "translate(-50%, -50%)",
+				[`& > ${token.componentCls}-spin-dot`]: {
+					fontSize: 32,
+					".gx-spin-icon": { animationDuration: "0.75s" }
+				},
+				"> *": { color: token.colorPrimary }
+			}
+		}
+	} };
+};
+function useStyle(componentCls) {
+	return useStyle$1("AppPage", (token) => {
+		return [pageLoadingStyle(token)];
+	}, componentCls);
+}
+
+//#endregion
+export { useStyle };

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

@@ -0,0 +1,255 @@
+import { AppRouteModule } from "../../types/RouteTypings.js";
+import { BaseMenuProps, MenuClassNamesType, MenuSemanticName, MenuStylesType, ProLayoutMenuFunProps } from "../../types/MenuTypings.js";
+import { MenuItemRender, MenuTextRender, SubMenuItemRender } from "../../types/SlotsTypings.js";
+import { ProLayoutConfig, ProLayoutType } from "../../config/index.js";
+import "../../index.js";
+import * as vue97 from "vue";
+import { CSSProperties, FunctionalComponent } from "vue";
+import { ProTokenType } from "@gx-design-vue/pro-provider";
+import { CustomRender } from "@gx-design-vue/pro-utils";
+import * as ant_design_vue0 from "ant-design-vue";
+import * as ant_design_vue_es_menu_src_interface0 from "ant-design-vue/es/menu/src/interface";
+import * as ant_design_vue_es__util_type15 from "ant-design-vue/es/_util/type";
+import * as ant_design_vue_es__util_transition0 from "ant-design-vue/es/_util/transition";
+import * as ant_design_vue_es__util_EventInterface0 from "ant-design-vue/es/_util/EventInterface";
+
+//#region src/components/BaseMenu/index.d.ts
+interface LazyIconProps {
+  icon: CustomRender;
+  iconPrefix?: string;
+  className?: string;
+  style?: CSSProperties;
+  hashId?: string;
+  iconfontUrl?: string;
+}
+declare const LazyIcon: FunctionalComponent<LazyIconProps>;
+type MenuUtilProps = Partial<BaseMenuProps> & {
+  token?: ProTokenType;
+  menuRenderType?: 'header' | 'sider';
+  baseClassName: string;
+  hashId: string;
+  iconPrefixes?: string;
+  prefixCls?: string;
+  iconfontUrl?: string;
+  selectedKeys?: string[];
+  isMobile?: boolean;
+  layout?: ProLayoutType;
+  collapsed?: boolean;
+  inlineIndent?: number;
+  extraInlineIndent?: number;
+  onCollapse?: (value: boolean) => void;
+};
+declare const _default: vue97.DefineComponent<vue97.ExtractPropTypes<{
+  class: {
+    type: vue97.PropType<string>;
+  };
+  classNames: {
+    type: vue97.PropType<MenuClassNamesType>;
+    default: () => {};
+  };
+  styles: {
+    type: vue97.PropType<MenuStylesType>;
+    default: () => {};
+  };
+  type: {
+    type: vue97.PropType<BaseMenuProps["type"]>;
+  };
+  menuRenderType: {
+    type: vue97.PropType<"header" | "sider">;
+  };
+  style: {
+    type: vue97.PropType<CSSProperties>;
+    default: () => {};
+  };
+  iconfontUrl: {
+    type: vue97.PropType<ProLayoutConfig["iconfontUrl"]>;
+    default: string;
+  };
+  mode: {
+    type: vue97.PropType<BaseMenuProps["mode"]>;
+    default: string;
+  };
+  menuData: {
+    type: vue97.PropType<BaseMenuProps["menuData"]>;
+    default: () => any[];
+  };
+  menuProps: {
+    type: vue97.PropType<BaseMenuProps["menuProps"]>;
+    default: () => any;
+  };
+  onClick: vue97.PropType<BaseMenuProps["onClick"]>;
+  onOpenKeys: {
+    type: vue97.PropType<BaseMenuProps["onOpenKeys"]>;
+  };
+  onSelect: {
+    type: vue97.PropType<BaseMenuProps["onSelect"]>;
+  };
+  menuItemRender: {
+    type: vue97.PropType<BaseMenuProps["menuItemRender"]>;
+    default: () => any;
+  };
+  menuTextRender: {
+    type: vue97.PropType<BaseMenuProps["menuTextRender"]>;
+    default: () => any;
+  };
+  subMenuItemRender: {
+    type: vue97.PropType<BaseMenuProps["subMenuItemRender"]>;
+    default: () => any;
+  };
+  openKeys: {
+    type: vue97.PropType<ProLayoutMenuFunProps["openKeys"]>;
+    default: () => any[];
+  };
+  selectedKeys: {
+    type: vue97.PropType<ProLayoutMenuFunProps["selectedKeys"]>;
+    default: () => any[];
+  };
+}>, () => ant_design_vue_es__util_type15.VueNode, {}, {}, {}, vue97.ComponentOptionsMixin, vue97.ComponentOptionsMixin, {}, string, vue97.PublicProps, Readonly<vue97.ExtractPropTypes<{
+  class: {
+    type: vue97.PropType<string>;
+  };
+  classNames: {
+    type: vue97.PropType<MenuClassNamesType>;
+    default: () => {};
+  };
+  styles: {
+    type: vue97.PropType<MenuStylesType>;
+    default: () => {};
+  };
+  type: {
+    type: vue97.PropType<BaseMenuProps["type"]>;
+  };
+  menuRenderType: {
+    type: vue97.PropType<"header" | "sider">;
+  };
+  style: {
+    type: vue97.PropType<CSSProperties>;
+    default: () => {};
+  };
+  iconfontUrl: {
+    type: vue97.PropType<ProLayoutConfig["iconfontUrl"]>;
+    default: string;
+  };
+  mode: {
+    type: vue97.PropType<BaseMenuProps["mode"]>;
+    default: string;
+  };
+  menuData: {
+    type: vue97.PropType<BaseMenuProps["menuData"]>;
+    default: () => any[];
+  };
+  menuProps: {
+    type: vue97.PropType<BaseMenuProps["menuProps"]>;
+    default: () => any;
+  };
+  onClick: vue97.PropType<BaseMenuProps["onClick"]>;
+  onOpenKeys: {
+    type: vue97.PropType<BaseMenuProps["onOpenKeys"]>;
+  };
+  onSelect: {
+    type: vue97.PropType<BaseMenuProps["onSelect"]>;
+  };
+  menuItemRender: {
+    type: vue97.PropType<BaseMenuProps["menuItemRender"]>;
+    default: () => any;
+  };
+  menuTextRender: {
+    type: vue97.PropType<BaseMenuProps["menuTextRender"]>;
+    default: () => any;
+  };
+  subMenuItemRender: {
+    type: vue97.PropType<BaseMenuProps["subMenuItemRender"]>;
+    default: () => any;
+  };
+  openKeys: {
+    type: vue97.PropType<ProLayoutMenuFunProps["openKeys"]>;
+    default: () => any[];
+  };
+  selectedKeys: {
+    type: vue97.PropType<ProLayoutMenuFunProps["selectedKeys"]>;
+    default: () => any[];
+  };
+}>> & Readonly<{}>, {
+  styles: Partial<Record<MenuSemanticName, CSSProperties>>;
+  classNames: Partial<Record<MenuSemanticName, string>>;
+  openKeys: string[];
+  selectedKeys: string[];
+  menuItemRender: MenuItemRender;
+  menuTextRender: MenuTextRender;
+  subMenuItemRender: SubMenuItemRender;
+  menuProps: Partial<vue97.ExtractPropTypes<{
+    id: StringConstructor;
+    prefixCls: StringConstructor;
+    items: vue97.PropType<ant_design_vue0.ItemType[]>;
+    disabled: BooleanConstructor;
+    inlineCollapsed: BooleanConstructor;
+    disabledOverflow: BooleanConstructor;
+    forceSubMenuRender: BooleanConstructor;
+    openKeys: vue97.PropType<ant_design_vue_es__util_type15.Key[]>;
+    selectedKeys: vue97.PropType<ant_design_vue_es__util_type15.Key[]>;
+    activeKey: StringConstructor;
+    selectable: {
+      type: BooleanConstructor;
+      default: boolean;
+    };
+    multiple: {
+      type: BooleanConstructor;
+      default: boolean;
+    };
+    tabindex: {
+      type: (StringConstructor | NumberConstructor)[];
+    };
+    motion: vue97.PropType<ant_design_vue_es__util_transition0.CSSMotionProps>;
+    role: StringConstructor;
+    theme: {
+      type: vue97.PropType<ant_design_vue0.MenuTheme>;
+      default: string;
+    };
+    mode: {
+      type: vue97.PropType<ant_design_vue0.MenuMode>;
+      default: string;
+    };
+    inlineIndent: {
+      type: NumberConstructor;
+      default: number;
+    };
+    subMenuOpenDelay: {
+      type: NumberConstructor;
+      default: number;
+    };
+    subMenuCloseDelay: {
+      type: NumberConstructor;
+      default: number;
+    };
+    builtinPlacements: {
+      type: vue97.PropType<ant_design_vue_es_menu_src_interface0.BuiltinPlacements>;
+    };
+    triggerSubMenuAction: {
+      type: vue97.PropType<ant_design_vue_es_menu_src_interface0.TriggerSubMenuAction>;
+      default: string;
+    };
+    getPopupContainer: vue97.PropType<(node: HTMLElement) => HTMLElement>;
+    expandIcon: vue97.PropType<(p?: {
+      [key: string]: any;
+      isOpen: boolean;
+    }) => any>;
+    onOpenChange: vue97.PropType<(keys: ant_design_vue_es__util_type15.Key[]) => void>;
+    onSelect: vue97.PropType<ant_design_vue_es_menu_src_interface0.SelectEventHandler>;
+    onDeselect: vue97.PropType<ant_design_vue_es_menu_src_interface0.SelectEventHandler>;
+    onClick: vue97.PropType<ant_design_vue_es_menu_src_interface0.MenuClickEventHandler>;
+    onFocus: vue97.PropType<ant_design_vue_es__util_EventInterface0.FocusEventHandler>;
+    onBlur: vue97.PropType<ant_design_vue_es__util_EventInterface0.FocusEventHandler>;
+    onMousedown: vue97.PropType<ant_design_vue_es__util_EventInterface0.MouseEventHandler>;
+    'onUpdate:openKeys': vue97.PropType<(keys: ant_design_vue_es__util_type15.Key[]) => void>;
+    'onUpdate:selectedKeys': vue97.PropType<(keys: ant_design_vue_es__util_type15.Key[]) => void>;
+    'onUpdate:activeKey': vue97.PropType<(key: ant_design_vue_es__util_type15.Key) => void>;
+  }>> & {
+    extraInlineIndent?: number;
+  };
+  style: CSSProperties;
+  iconfontUrl: string;
+  mode: ant_design_vue0.MenuMode;
+  menuData: AppRouteModule[];
+}, {}, {}, {}, string, vue97.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { LazyIcon, LazyIconProps, MenuUtilProps, _default as default };

package/dist/components/BaseMenu/index.js

@@ -0,0 +1,381 @@
+import { useProLayoutContext } from "../../Context/index.js";
+import { convertCSSPropertiesToString } from "../../utils/style/index.js";
+import { defaultSettings } from "../../config/index.js";
+import { baseMenuProps } from "./props.js";
+import { ProBaseMenuStyle } from "./style.js";
+import { cloneVNode, computed, createVNode, defineComponent, isVNode, mergeProps, resolveComponent, watch } from "vue";
+import { useMemo, useState } from "@gx-design-vue/pro-hooks";
+import { unit, useProConfigContext, useProStyle } from "@gx-design-vue/pro-provider";
+import { classNames as classNames$1, getPrefixCls, isImg, isString, isUrl } from "@gx-design-vue/pro-utils";
+import { useStyleTag } from "@vueuse/core";
+import { Menu } from "ant-design-vue";
+import { omit } from "es-toolkit";
+import { createFromIconfontCN } from "@ant-design/icons-vue";
+import { useRouter } from "vue-router";
+
+//#region src/components/BaseMenu/index.tsx
+const LazyIcon = (props) => {
+	const { icon, iconPrefix = "", iconfontUrl, hashId, style } = props;
+	const className = classNames$1(props.className, iconPrefix, hashId);
+	/**
+	* 如果没有icon在收起的时候用首字母代替
+	*/
+	const defaultIcon = createVNode("span", {
+		"class": classNames$1(className),
+		"style": { display: "none" }
+	}, [createVNode("span", { "class": "anticon" }, null)]);
+	if (!icon) return defaultIcon;
+	const renderImg = (src) => createVNode("img", {
+		"src": src,
+		"alt": "icon",
+		"class": classNames$1(props.className ? `${props.className}-image` : "", className),
+		"style": style
+	}, null);
+	const renderIconFont = (type) => {
+		const IconFont = createFromIconfontCN({ scriptUrl: iconfontUrl || defaultSettings.iconfontUrl });
+		return iconfontUrl ? createVNode(IconFont, {
+			"type": type,
+			"class": className,
+			"style": style
+		}, null) : createVNode("span", {
+			"class": className,
+			"style": style
+		}, null);
+	};
+	const renderVNodeIcon = () => cloneVNode(icon, {
+		class: className,
+		style
+	});
+	const renderByString = (str) => {
+		if (isUrl(str) || isImg(str)) return renderImg(str);
+		if (iconPrefix === "iconfont") return renderIconFont(str);
+		const DynamicIcon = resolveComponent(str);
+		return typeof DynamicIcon === "function" && createVNode(DynamicIcon, null, null) || defaultIcon;
+	};
+	if (typeof icon === "string") return icon !== "" ? renderByString(icon) : defaultIcon;
+	if (isVNode(icon)) return renderVNodeIcon();
+	return defaultIcon;
+};
+let IconFont = createFromIconfontCN({ scriptUrl: defaultSettings.iconfontUrl });
+function getIcon({ icon, style, iconPrefixes = "icon-", className, hashId }) {
+	if (typeof icon === "string" && icon !== "") {
+		if (isUrl(icon) || isImg(icon)) return createVNode("img", {
+			"key": icon,
+			"src": icon,
+			"alt": "icon",
+			"style": style,
+			"class": classNames$1(`${className}-image`, hashId)
+		}, null);
+		if (icon.startsWith(iconPrefixes)) return createVNode(IconFont, {
+			"type": icon,
+			"style": style
+		}, null);
+	}
+	return icon;
+}
+function getMenuTitleSymbol(title) {
+	if (title && typeof title === "string") return title.substring(0, 1).toUpperCase();
+	return null;
+}
+var MenuUtil = class {
+	constructor(props) {
+		this.props = props;
+	}
+	getNavMenuItems = (menusData = [], level, noGroupLevel) => menusData.filter((item) => !item.meta?.hideInMenu).map((item) => this.getSubMenuOrItem(item, level, noGroupLevel)).filter((item) => item).flat(1);
+	/** Get SubMenu or Item */
+	getSubMenuOrItem = (item, level, noGroupLevel) => {
+		const { menuRenderType, subMenuItemRender, baseClassName, iconPrefixes, styles, classNames } = this.props;
+		const collapsed = menuRenderType === "sider" ? this.props.collapsed : false;
+		const name = this.getIntlName(item);
+		const inlineIndentCount = menuRenderType === "sider" ? item.meta?.inlineIndent ?? level * (this.props.extraInlineIndent ?? 10) : 0;
+		const children = item?.children;
+		const hidden = item?.meta?.hideInMenu;
+		const rightContent = item?.meta?.rightContent;
+		const hasDivider = item?.meta?.divider;
+		const isSubMenu = Array.isArray(children) && children.length > 0 && !hidden;
+		const emptyChilds = children?.every((child) => child.meta?.hideInMenu);
+		if (isSubMenu && !emptyChilds) {
+			const shouldHasIcon = collapsed || menuRenderType === "header" ? level === 0 : item.meta?.icon || level === 0;
+			const hasImageIcon = typeof item.meta?.icon === "string" ? isUrl(item.meta?.icon) || isImg(item.meta?.icon) : false;
+			const iconDom = getIcon({
+				icon: item.meta?.icon,
+				style: item.meta?.styles?.itemIcon,
+				iconPrefixes,
+				className: classNames$1(`${baseClassName}-item`, item.meta?.classNames?.itemIcon),
+				hashId: this.props?.hashId
+			});
+			/**
+			* 如果没有icon在收起的时候用首字母代替
+			*/
+			const defaultIcon = collapsed && shouldHasIcon ? getMenuTitleSymbol(item.meta?.title) : null;
+			const defaultTitle = createVNode("div", {
+				"class": classNames$1(classNames?.menuItemTitle, `${baseClassName}-item-title`, this.props?.hashId, {
+					[`${baseClassName}-item-title-collapsed`]: collapsed,
+					[`${baseClassName}-item-title-collapsed-level-${noGroupLevel}`]: collapsed
+				}, item.meta?.classNames?.itemTitle),
+				"style": {
+					paddingInlineStart: collapsed ? 0 : level === 0 ? void 0 : unit(inlineIndentCount),
+					...styles?.menuItemTitle || {},
+					...item.meta?.styles?.itemTitle || {}
+				}
+			}, [
+				shouldHasIcon && iconDom ? !collapsed || level === 0 ? createVNode("span", {
+					"class": classNames$1(`${baseClassName}-item-icon`, this.props?.hashId, classNames?.menuItemIcon, item.meta?.classNames?.itemIcon),
+					"style": {
+						...styles?.menuItemIcon,
+						...hasImageIcon ? {} : item.meta?.styles?.itemIcon || {}
+					}
+				}, [iconDom]) : defaultIcon : defaultIcon,
+				createVNode("span", {
+					"class": classNames$1(`${baseClassName}-item-text`, this.props?.hashId, { [`${baseClassName}-item-text-has-icon`]: shouldHasIcon && (iconDom || defaultIcon) }, classNames?.menuItemTitleText, item.meta?.classNames?.itemTitle),
+					"style": {
+						...styles?.menuItemTitleText || {},
+						...item.meta?.styles?.itemTitle || {}
+					}
+				}, [name]),
+				rightContent && typeof rightContent === "function" ? createVNode("div", {
+					"class": classNames$1(`${baseClassName}-item-right-content`, this.props.hashId, item.meta?.classNames?.itemRight),
+					"style": item.meta?.styles?.itemRight
+				}, [rightContent(item.meta)]) : null
+			]);
+			const title = subMenuItemRender ? subMenuItemRender({
+				item,
+				children: defaultTitle,
+				menuProps: this.props
+			}) : defaultTitle;
+			const childrenList = this.getNavMenuItems(children, level + 1, level === 0 && collapsed ? level : level + 1);
+			return [hasDivider && menuRenderType === "sider" ? { type: "divider" } : void 0, {
+				key: item.name,
+				label: title,
+				children: childrenList,
+				style: {
+					...styles?.subMenu || {},
+					...item.meta?.styles?.subMenu || {}
+				},
+				disabled: item.meta?.disabled,
+				class: classNames$1(classNames?.subMenu, {
+					[`${baseClassName}-submenu`]: true,
+					[`${baseClassName}-submenu-has-icon`]: shouldHasIcon && iconDom
+				}, item.meta?.classNames?.subMenu),
+				popupClassName: classNames$1(classNames?.subMenuPopup, `${baseClassName}-submenu-popup`, `${baseClassName}-submenu-popup-${this.props?.menuRenderType}`, this.props?.hashId, item.meta?.classNames?.subMenuPopup)
+			}].filter(Boolean);
+		}
+		return [hasDivider && menuRenderType === "sider" ? { type: "divider" } : void 0, {
+			class: classNames$1(`${baseClassName}-item`, classNames?.menuItem, item.meta?.classNames?.item),
+			style: {
+				...styles?.menuItem || {},
+				...item.meta?.styles?.item || {}
+			},
+			key: item.name,
+			disabled: item.meta?.disabled,
+			label: this.getMenuItemPath(item, level, noGroupLevel)
+		}].filter(Boolean);
+	};
+	getIntlName = (item) => {
+		const meta = { ...item.meta };
+		const finalName = meta.title;
+		if (this.props.menuTextRender) return this.props.menuTextRender({
+			item,
+			defaultText: meta.title,
+			menuProps: this.props
+		});
+		return finalName;
+	};
+	/**
+	* 判断是否是http链接.返回 Link 或 a Judge whether it is http link.return a or Link
+	*
+	* @memberof SiderMenu
+	*/
+	getMenuItemPath = (item, level, noGroupLevel) => {
+		const itemPath = this.conversionPath(item.path || "/");
+		const { isMobile, menuRenderType, onCollapse, menuItemRender, iconPrefixes, classNames, styles, baseClassName } = this.props;
+		const menuItemTitle = this.getIntlName(item);
+		const collapsed = menuRenderType === "sider" ? this.props.collapsed : false;
+		const hasIcon = item.meta?.icon || level === 0;
+		const rightContent = item.meta?.rightContent;
+		const hasImageIcon = typeof item.meta?.icon === "string" ? isUrl(item.meta?.icon) || isImg(item.meta?.icon) : false;
+		const inlineIndentCount = menuRenderType === "sider" ? item.meta?.inlineIndent ?? level * (this.props.extraInlineIndent ?? 10) : 0;
+		const icon = !hasIcon ? null : getIcon({
+			icon: item.meta?.icon,
+			style: item.meta?.styles?.itemIcon,
+			iconPrefixes,
+			className: `${baseClassName}-item`,
+			hashId: this.props?.hashId
+		});
+		const defaultIcon = collapsed && hasIcon ? getMenuTitleSymbol(item.meta?.title) : null;
+		const isHttpUrl = item.meta?.linkStatus === 1 && isUrl(item.meta?.link);
+		const defaultItem = createVNode("div", {
+			"key": itemPath,
+			"class": classNames$1(classNames?.menuItemTitle, `${baseClassName}-item-title`, this.props?.hashId, {
+				[`${baseClassName}-item-link`]: isHttpUrl,
+				[`${baseClassName}-item-title-collapsed`]: collapsed,
+				[`${baseClassName}-item-title-collapsed-level-${noGroupLevel}`]: collapsed
+			}, item.meta?.classNames?.itemTitle),
+			"style": {
+				paddingInlineStart: collapsed ? 0 : unit(inlineIndentCount),
+				...styles?.menuItemTitle || {},
+				...item.meta?.styles?.itemTitle || {}
+			}
+		}, [
+			createVNode("span", {
+				"class": classNames$1(`${baseClassName}-item-icon ${this.props?.hashId}`, classNames?.menuItemIcon),
+				"style": {
+					display: defaultIcon === null && !icon ? "none" : "",
+					...styles?.menuItemIcon,
+					...hasImageIcon ? {} : item.meta?.styles?.itemIcon || {}
+				}
+			}, [icon || createVNode("span", { "class": "anticon" }, [defaultIcon])]),
+			createVNode("span", {
+				"class": classNames$1(classNames?.menuItemTitleText, `${baseClassName}-item-text`, this.props?.hashId, { [`${baseClassName}-item-text-has-icon`]: hasIcon && (icon || defaultIcon) }, item.meta?.classNames?.itemTitleText),
+				"style": {
+					...styles?.menuItemTitleText || {},
+					...item.meta?.styles?.itemTitleText || {}
+				}
+			}, [menuItemTitle]),
+			rightContent && typeof rightContent === "function" && !collapsed ? createVNode("div", {
+				"class": classNames$1(`${baseClassName}-item-right-content`, this.props.hashId, item.meta?.classNames?.itemRight),
+				"style": item.meta?.styles?.itemRight
+			}, [rightContent(item.meta)]) : null
+		]);
+		if (menuItemRender) return menuItemRender({
+			item: {
+				...item,
+				isUrl: isHttpUrl,
+				itemPath,
+				isMobile,
+				replace: itemPath === location.pathname,
+				onClick: () => onCollapse && onCollapse(true),
+				children: void 0
+			},
+			defaultDom: defaultItem,
+			menuProps: this.props
+		});
+		return defaultItem;
+	};
+	conversionPath = (path) => {
+		if (path && path.indexOf("http") === 0) return path;
+		return `/${path || ""}`.replace(/\/+/g, "/");
+	};
+};
+var BaseMenu_default = /* @__PURE__ */ defineComponent({
+	name: "BaseMenu",
+	props: baseMenuProps,
+	setup(props) {
+		const router = useRouter();
+		const { dark, token } = useProConfigContext();
+		const layoutContext = useProLayoutContext();
+		const baseClassName = (layoutContext?.getPrefixCls || getPrefixCls)({
+			isPor: true,
+			suffixCls: `base-menu`
+		});
+		const { wrapSSR, hashId } = useProStyle("ProBaseMenu", [ProBaseMenuStyle], baseClassName);
+		const [openKeys, setOpenKeys] = useState(props.openKeys || []);
+		const [selectedKeys, setSelectedKeys] = useState(props.selectedKeys || []);
+		const menuUtils = useMemo(() => {
+			return new MenuUtil({
+				...props,
+				layout: layoutContext?.settings?.value?.layout,
+				isMobile: layoutContext?.isMobile?.value,
+				collapsed: layoutContext?.collapsedEffect?.value,
+				token: token.value,
+				menuRenderType: props.menuRenderType,
+				baseClassName,
+				inlineIndent: props.menuProps?.inlineIndent,
+				extraInlineIndent: props.menuProps?.extraInlineIndent,
+				iconfontUrl: props.iconfontUrl,
+				hashId: hashId.value,
+				onCollapse: (value) => {
+					if (layoutContext) layoutContext.collapsed.value = value;
+				}
+			});
+		}, [
+			() => hashId.value,
+			() => token.value,
+			() => props.menuData,
+			() => props.iconfontUrl,
+			() => props.styles,
+			() => props.classNames,
+			() => props.menuProps?.inlineIndent,
+			() => props.menuProps?.extraInlineIndent,
+			() => layoutContext?.isMobile?.value,
+			() => layoutContext?.collapsedEffect?.value,
+			() => layoutContext?.settings?.value?.layout
+		]);
+		useStyleTag(computed(() => {
+			const tooltip = ".ant-tooltip-inner";
+			const menuClass = `.${baseClassName}`;
+			const menuItemClass = `.${baseClassName}-item`;
+			const menuSubmenuClass = `.${baseClassName}-submenu`;
+			const menuItemSelectClass = `${token.value.antCls}-menu-item-selected`;
+			return `
+        ${tooltip} ${menuItemClass}-title ${menuItemClass}-image {
+          display: none;
+        }
+        ${menuClass} ${menuSubmenuClass}>${`${token.value.antCls}-menu-submenu-title`} {
+          ${convertCSSPropertiesToString(props.styles.subMenuTitle)}
+        }
+        ${menuClass} ${menuItemClass}${menuItemSelectClass} {
+          ${convertCSSPropertiesToString(props.styles.menuItemSelect)}
+        }
+      `;
+		}));
+		watch(() => props.openKeys, (val) => setOpenKeys(val));
+		watch(() => props.selectedKeys, (val) => setSelectedKeys(val));
+		watch(() => props.iconfontUrl, () => {
+			if (props.iconfontUrl) IconFont = createFromIconfontCN({ scriptUrl: props.iconfontUrl });
+		}, { immediate: true });
+		return () => {
+			if (props.menuData && props.menuData?.length < 1) return null;
+			return wrapSSR(createVNode(Menu, mergeProps({
+				"key": layoutContext?.collapsedEffect?.value ? "Menu1" : "Menu",
+				"mode": props.mode,
+				"inlineIndent": 16,
+				"theme": dark.value ? "dark" : "light",
+				"openKeys": openKeys.value,
+				"selectedKeys": selectedKeys.value,
+				"style": {
+					backgroundColor: "transparent",
+					border: "none",
+					...props.style
+				},
+				"class": classNames$1(props.class, hashId, baseClassName, {
+					[`${baseClassName}-inline`]: props.mode === "inline",
+					[`${baseClassName}-horizontal`]: props.mode === "horizontal",
+					[`${baseClassName}-collapsed`]: props.menuRenderType === "sider" ? layoutContext?.collapsedEffect?.value : false
+				}),
+				"items": menuUtils.value.getNavMenuItems(props.menuData, 0, 0)
+			}, omit(props.menuProps, [
+				"onOpenChange",
+				"onSelect",
+				"onClick",
+				"items"
+			]), {
+				"onOpenChange": (_openKeys) => {
+					if (layoutContext?.collapsedEffect?.value) return;
+					setOpenKeys(_openKeys);
+					props.onOpenKeys && props.onOpenKeys(_openKeys);
+				},
+				"onSelect": (info) => {
+					props.onSelect && props.onSelect(info);
+					setSelectedKeys(info.selectedKeys);
+				},
+				"onClick": (e) => {
+					if (props.onClick) props.onClick(e);
+					else {
+						const row = layoutContext?.menu?.value?.flatMenus?.find((item) => item.name === e.key);
+						if (row) {
+							const toPath = isString(row.redirect) ? row.redirect : row.path || "";
+							const target = row.meta?.link || "";
+							const hasUrl = isUrl(target);
+							if (router.currentRoute.value?.fullPath !== toPath) if (hasUrl && target && row.meta?.linkStatus === 1) window.open(target);
+							else router.push({ path: toPath });
+						}
+					}
+				}
+			}), null));
+		};
+	}
+});
+
+//#endregion
+export { LazyIcon, BaseMenu_default as default };