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

package/dist/components/Tabs/style/index.d.ts

@@ -0,0 +1,35 @@
+import { GetDefaultToken } from "antdv-next/dist/theme/internal";
+
+//#region src/components/Tabs/style/index.d.ts
+/**
+ * InnerTabs 组件级 Token —— 仅承载尺寸相关字段；
+ * 卡片配色复用全局扁平 token `tabsColor*`（见 pro-provider/theme），保持与 layout 主题一致。
+ */
+interface ComponentToken {
+  /** 单个页签高度 */
+  itemHeight: number | string;
+  /** 页签横向内边距 */
+  itemPaddingInline: number | string;
+  /** 页签纵向内边距 */
+  itemPaddingBlock: number | string;
+  /** 页签间距 */
+  itemGap: number | string;
+  /** 页签圆角 */
+  itemBorderRadius: number | string;
+  /** 标题字号 */
+  titleFontSize: number;
+  /** 标题最大宽度（超出省略） */
+  titleMaxWidth: number | string;
+  /** 关闭按钮尺寸 */
+  closeIconSize: number | string;
+  /** 关闭按钮命中区域尺寸 */
+  closeIconBoxSize: number | string;
+  /** 导航栏纵向内边距 */
+  navPaddingBlock: number | string;
+  /** 导航栏横向内边距 */
+  navPaddingInline: number | string;
+}
+declare const prepareComponentToken: GetDefaultToken<'InnerTabs'>;
+declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
+//#endregion
+export { ComponentToken, _default as default, prepareComponentToken };

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

@@ -0,0 +1,161 @@
+import { proGenStyleHooks } from "@gx-design-vue/pro-provider";
+import { unit as unit$1 } from "@antdv-next/cssinjs";
+//#region src/components/Tabs/style/index.ts
+const prepareComponentToken = (token) => ({
+	itemHeight: token.controlHeightSM,
+	itemPaddingInline: token.paddingXS,
+	itemPaddingBlock: 2,
+	itemGap: token.marginXS,
+	itemBorderRadius: token.borderRadiusSM,
+	titleFontSize: token.fontSizeSM,
+	titleMaxWidth: 120,
+	closeIconSize: token.fontSizeSM,
+	closeIconBoxSize: token.controlHeightXS,
+	navPaddingBlock: token.paddingXXS,
+	navPaddingInline: token.paddingSM
+});
+/**
+* InnerTabs 样式：横向卡片式页签条（default / active 双态），无底部 ink-bar。
+* 颜色取自扁平 token `tabsColor*`；mask-image 溢出淡出由组件内联 style 动态控制。
+*/
+const genInnerTabsStyle = (token) => {
+	const { componentCls } = token;
+	return { [componentCls]: {
+		display: "flex",
+		minWidth: 0,
+		[`${componentCls}-nav`]: {
+			position: "relative",
+			display: "flex",
+			flex: "1 1 auto",
+			minWidth: 0,
+			alignItems: "center",
+			paddingBlock: token.navPaddingBlock
+		},
+		[`${componentCls}-nav-wrap`]: {
+			position: "relative",
+			flex: "1 1 auto",
+			minWidth: 0,
+			marginBlock: token.calc(token.marginXXS).mul(-1).equal(),
+			paddingBlock: token.marginXXS,
+			overflowX: "auto",
+			overflowY: "hidden",
+			overflowAnchor: "none",
+			whiteSpace: "nowrap",
+			scrollbarWidth: "none",
+			msOverflowStyle: "none",
+			"&::-webkit-scrollbar": { display: "none" }
+		},
+		[`${componentCls}-nav-list`]: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: token.itemGap,
+			overflowAnchor: "none"
+		},
+		[`${componentCls}-tab`]: {
+			display: "inline-flex",
+			alignItems: "center",
+			flex: "none",
+			boxSizing: "border-box",
+			height: token.itemHeight,
+			paddingInline: token.itemPaddingInline,
+			paddingBlock: token.itemPaddingBlock,
+			fontSize: token.titleFontSize,
+			lineHeight: 1,
+			color: token.tabsColorText,
+			backgroundColor: token.tabsColorBgContainer,
+			border: `${unit$1(token.lineWidth)} ${token.lineType} ${token.tabsColorBorder}`,
+			borderRadius: token.itemBorderRadius,
+			cursor: "pointer",
+			userSelect: "none",
+			transition: [
+				`color ${token.motionDurationMid} ${token.motionEaseInOut}`,
+				`background-color ${token.motionDurationMid} ${token.motionEaseInOut}`,
+				`border-color ${token.motionDurationMid} ${token.motionEaseInOut}`,
+				`box-shadow ${token.motionDurationMid} ${token.motionEaseInOut}`
+			].join(", "),
+			"&:hover": {
+				borderColor: token.tabsColorBorderHover,
+				backgroundColor: token.tabsColorBgContainerHover
+			},
+			[`&${componentCls}-tab-active`]: {
+				color: token.tabsColorTextActive,
+				borderColor: token.tabsColorBorderActive,
+				backgroundColor: token.tabsColorBgContainerActive,
+				"&:hover": {
+					color: token.tabsColorTextActive,
+					borderColor: token.tabsColorBorderActive,
+					backgroundColor: token.tabsColorBgContainerActive
+				}
+			},
+			[`&${componentCls}-tab-disabled`]: {
+				color: token.colorTextDisabled,
+				cursor: "not-allowed"
+			},
+			[`&${componentCls}-tab-dragging`]: {
+				zIndex: 1,
+				cursor: "grabbing",
+				color: token.tabsColorText,
+				backgroundColor: token.colorBgElevated,
+				borderColor: token.tabsColorBorderHover,
+				boxShadow: token.boxShadowSecondary,
+				opacity: 1,
+				transition: "none"
+			}
+		},
+		[`${componentCls}-tab${componentCls}-tab-active`]: {
+			color: token.tabsColorTextActive,
+			borderColor: token.tabsColorBorderActive,
+			".ant-pro-layout-tabs-title-text": { color: token.tabsColorTextActive },
+			".ant-pro-layout-tabs-title-close": { color: token.tabsColorCloseIconActive }
+		},
+		[`${componentCls}-tab${componentCls}-tab-active:hover`]: {
+			color: token.tabsColorTextActive,
+			borderColor: token.tabsColorBorderActive
+		},
+		[`${componentCls}-tab-btn`]: {
+			display: "inline-block",
+			maxWidth: token.titleMaxWidth,
+			overflow: "hidden",
+			whiteSpace: "nowrap",
+			textOverflow: "ellipsis",
+			verticalAlign: "middle",
+			transition: `color ${token.motionDurationMid}`
+		},
+		[`${componentCls}-tab-close, ${componentCls}-tab-remove`]: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			flex: "0 0 auto",
+			width: token.closeIconBoxSize,
+			height: token.closeIconBoxSize,
+			marginInlineStart: token.marginXXS,
+			padding: 0,
+			fontSize: token.closeIconSize,
+			lineHeight: 1,
+			color: token.tabsColorCloseIcon,
+			borderRadius: token.borderRadiusSM,
+			cursor: "pointer",
+			transition: `all ${token.motionDurationMid}`,
+			"&:hover": {
+				color: token.tabsColorCloseIconHover,
+				backgroundColor: token.tabsColorCloseBgHover
+			}
+		},
+		[`${componentCls}-tab-active ${componentCls}-tab-close, ${componentCls}-tab-active ${componentCls}-tab-remove`]: {
+			color: token.tabsColorCloseIconActive,
+			"&:hover": {
+				color: token.tabsColorCloseIconActive,
+				backgroundColor: token.tabsColorCloseBgActiveHover
+			}
+		},
+		[`${componentCls}-extra`]: {
+			display: "inline-flex",
+			flex: "none",
+			alignItems: "center",
+			marginInlineStart: token.marginSM
+		}
+	} };
+};
+var style_default = proGenStyleHooks("InnerTabs", genInnerTabsStyle, prepareComponentToken);
+//#endregion
+export { style_default as default, prepareComponentToken };

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

@@ -0,0 +1,9 @@
+import { LayoutContentEmits, LayoutContentProps, LayoutContentSlots } from "./interface.js";
+import { SlotsType } from "vue";
+
+//#region src/components/WrapContent/index.d.ts
+declare const WrapContent: import("vue").DefineSetupFnComponent<LayoutContentProps, LayoutContentEmits, SlotsType<LayoutContentSlots>, LayoutContentProps & {
+  [x: `on${Capitalize<string>}`]: (...args: unknown[]) => any;
+}, import("vue").PublicProps>;
+//#endregion
+export { WrapContent as default };

package/dist/components/WrapContent/index.js

@@ -0,0 +1,26 @@
+import { useLayoutBase } from "../../hooks/useLayoutBase.js";
+import { computed, createVNode, defineComponent } from "vue";
+import { classNames } from "@gx-design-vue/pro-utils";
+import { LayoutContent, Spin } from "antdv-next";
+//#region src/components/WrapContent/index.tsx
+const WrapContent = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const { prefixCls, hasFooterToolbar, proClasses, proStyles } = useLayoutBase();
+	const contentClassNames = computed(() => classNames(`${prefixCls.value}-content`, proClasses.value.content, { [`${prefixCls.value}-content-has-footer-toolbar`]: hasFooterToolbar.value }));
+	return () => createVNode(LayoutContent, {
+		"class": contentClassNames.value,
+		"style": proStyles.value.content
+	}, { default: () => [createVNode("div", { "class": `${prefixCls.value}-content-inner` }, [props.loading != null && props.loading !== false && createVNode(Spin, {
+		"spinning": true,
+		"tip": void 0
+	}, null), slots.default?.()])] });
+}, {
+	props: { loading: {
+		type: Boolean,
+		required: false,
+		default: void 0
+	} },
+	name: "WrapContent",
+	inheritAttrs: false
+});
+//#endregion
+export { WrapContent as default };

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

@@ -0,0 +1,15 @@
+import { LayoutBreadcrumbSlotProps } from "../../interface.js";
+
+//#region src/components/WrapContent/interface.d.ts
+type LayoutContentEmits = Record<string, never>;
+interface LayoutContentEmitsProps {}
+interface LayoutContentProps {
+  loading?: boolean;
+}
+interface LayoutContentSlots {
+  default?: () => any;
+  /** 面包屑整块自定义（存在时整块替换默认面包屑） */
+  breadcrumb?: (props: LayoutBreadcrumbSlotProps) => any;
+}
+//#endregion
+export { LayoutContentEmits, LayoutContentEmitsProps, LayoutContentProps, LayoutContentSlots };

package/dist/components/WrapContent/interface.js

@@ -0,0 +1 @@
+export {};

package/dist/context/index.d.ts

@@ -0,0 +1,53 @@
+import { GProLayoutProps, GProLayoutSlots, LayoutBreadcrumbConfig, LayoutClassNamesType, LayoutCollapseConfig, LayoutHeaderConfig, LayoutLogoConfig, LayoutPageContainerConfig, LayoutSiderConfig, LayoutStylesType, Meta } from "../interface.js";
+import { LayoutMenuState } from "../hooks/useMenu.js";
+import { UseTabsStateReturn } from "../hooks/useTabs.js";
+import { ComputedRef, Ref } from "vue";
+import { WatermarkProps } from "antdv-next";
+
+//#region src/context/index.d.ts
+/**
+ * 布局上下文：由 `GProLayout` 计算后单向下发给内部组件 inject。
+ * 容器组件（如 GPageContainer）只读，不再反向修改。
+ */
+interface LayoutContextProps {
+  layout: ComputedRef<GProLayoutProps['layout']>;
+  header: ComputedRef<Required<LayoutHeaderConfig>>;
+  sider: ComputedRef<Required<LayoutSiderConfig>>;
+  logoConfig: ComputedRef<LayoutLogoConfig | null>;
+  siderWidth: ComputedRef<LayoutSiderConfig['width']>;
+  collapsedWidth: ComputedRef<LayoutCollapseConfig['width']>;
+  menuState: LayoutMenuState;
+  watermark: ComputedRef<WatermarkProps>;
+  breadcrumbConfig: ComputedRef<LayoutBreadcrumbConfig | null>;
+  pageContainerConfig: ComputedRef<LayoutPageContainerConfig>;
+  proStyles: ComputedRef<LayoutStylesType>;
+  proClasses: ComputedRef<LayoutClassNamesType>;
+  collapsed: Ref<boolean>;
+  collapseConfig: ComputedRef<LayoutCollapseConfig | null>;
+  isMobile: ComputedRef<boolean>;
+  contentFullscreen: Ref<boolean>;
+  renderRouterView: Ref<boolean>;
+  zIndex: Ref<number>;
+  currentMeta: ComputedRef<Meta>;
+  prefixCls: ComputedRef<string>;
+  hashId: Ref<string>;
+  cssVarCls: ComputedRef<string>;
+  rootCls: ComputedRef<string>;
+  hasFooterToolbar: Ref<boolean>;
+  tabsHeight: Ref<number>;
+  setTabsHeight: (value: number) => void;
+  /**
+   * PageContainer 级别的面包屑 slot 覆盖。
+   * 当 position='header' 时，PageContainer 的 breadcrumb slot 通过此 ref 传到 Header。
+   * Header 读取优先级：breadcrumbSlotOverride > ProLayout slot > 默认 Breadcrumb 组件。
+   */
+  breadcrumbRender: Ref<GProLayoutSlots['breadcrumb'] | null>;
+  getPrefixCls: (suffixCls?: string) => string;
+  setHasFooterToolbar: (value: boolean) => void;
+  /** 导航到指定菜单名 */
+  navigate: (name: string) => void;
+  tabsState?: UseTabsStateReturn;
+}
+declare const useProvideLayoutContext: (ctx: LayoutContextProps) => LayoutContextProps, useInjectLayoutContext: () => LayoutContextProps;
+//#endregion
+export { LayoutContextProps, useInjectLayoutContext, useProvideLayoutContext };

package/dist/context/index.js

@@ -0,0 +1,5 @@
+import { createInjectionState } from "@vueuse/core";
+//#region src/context/index.ts
+const [useProvideLayoutContext, useInjectLayoutContext] = createInjectionState((ctx) => ctx);
+//#endregion
+export { useInjectLayoutContext, useProvideLayoutContext };

package/dist/defaultConfig.d.ts

@@ -0,0 +1,10 @@
+import { GProLayoutProps } from "./interface.js";
+
+//#region src/defaultConfig.d.ts
+type LayoutDefaultConfigSection<K extends keyof GProLayoutProps> = Partial<Exclude<NonNullable<GProLayoutProps[K]>, false>>;
+type LayoutDefaultConfig = { [K in keyof Pick<GProLayoutProps, 'header' | 'sider' | 'footerConfig' | 'breadcrumb' | 'tabsConfig' | 'collapse' | 'logo' | 'pageContainer'>]: LayoutDefaultConfigSection<K> } & {
+  layout: GProLayoutProps['layout'];
+};
+declare const DEFAULT_LAYOUT_CONFIG: LayoutDefaultConfig;
+//#endregion
+export { DEFAULT_LAYOUT_CONFIG };

package/dist/defaultConfig.js

@@ -0,0 +1,38 @@
+//#region src/defaultConfig.ts
+const DEFAULT_LAYOUT_CONFIG = {
+	layout: "side",
+	header: {
+		height: 48,
+		fixed: true,
+		autoHide: false,
+		mainWidth: "100%"
+	},
+	sider: {
+		width: 215,
+		fixed: true,
+		breakpoint: false
+	},
+	footerConfig: {
+		links: [],
+		copyright: ""
+	},
+	breadcrumb: {
+		placement: "header",
+		showHome: true,
+		homePath: "/"
+	},
+	tabsConfig: {
+		type: "button",
+		fixed: true,
+		persistent: true,
+		fullscreenOnHide: false
+	},
+	collapse: {
+		width: 64,
+		placement: "sider"
+	},
+	logo: { title: "Antdv Next Pro" },
+	pageContainer: {}
+};
+//#endregion
+export { DEFAULT_LAYOUT_CONFIG };

package/dist/hooks/useLayoutBase.d.ts

@@ -0,0 +1,78 @@
+import { LayoutBreadcrumbConfig, LayoutBreadcrumbSlotProps, LayoutCollapseConfig, LayoutHeaderConfig, LayoutLogoConfig, LayoutPageContainerConfig, LayoutSiderConfig } from "../interface.js";
+import { LayoutMenuState } from "./useMenu.js";
+import { UseTabsStateReturn } from "./useTabs.js";
+import { LayoutContextProps } from "../context/index.js";
+//#region src/hooks/useLayoutBase.d.ts
+/**
+ * 从 LayoutContext 提取 Header / Sider 等子组件共享的基础响应式状态，
+ * 避免在每个组件中重复相同的解构与 computed 声明。
+ */
+declare function useLayoutBase(props?: {
+  proClasses?: Record<string, any>;
+  proStyles?: Record<string, any>;
+  collapsed?: boolean;
+}): {
+  layoutContext: LayoutContextProps;
+  layout: import("vue").ComputedRef<"top" | "side" | "mix" | "wide" | "simple">;
+  sider: import("vue").ComputedRef<Required<LayoutSiderConfig>>;
+  header: import("vue").ComputedRef<Required<LayoutHeaderConfig>>;
+  zIndex: import("vue").Ref<number, number>;
+  watermark: import("vue").ComputedRef<import("antdv-next").WatermarkProps>;
+  tabsState: UseTabsStateReturn;
+  tabsHeight: import("vue").Ref<number, number>;
+  setTabsHeight: (value: number) => void;
+  prefixCls: import("vue").ComputedRef<string>;
+  hashId: import("vue").Ref<string, string>;
+  cssVarCls: import("vue").ComputedRef<string>;
+  rootCls: import("vue").ComputedRef<string>;
+  menuState: LayoutMenuState;
+  siderWidth: import("vue").ComputedRef<string | number>;
+  collapsedWidth: import("vue").ComputedRef<number>;
+  collapseConfig: import("vue").ComputedRef<LayoutCollapseConfig>;
+  contentFullscreen: import("vue").Ref<boolean, boolean>;
+  renderRouterView: import("vue").Ref<boolean, boolean>;
+  collapsed: import("vue").ComputedRef<boolean>;
+  isMobile: import("vue").ComputedRef<boolean>;
+  logoConfig: import("vue").ComputedRef<LayoutLogoConfig>;
+  logoTitle: import("vue").ComputedRef<string>;
+  selectedKeys: import("vue").ComputedRef<string[]>;
+  openKeys: import("vue").ComputedRef<string[]>;
+  proClasses: import("vue").ComputedRef<{
+    siderHeader?: string;
+    siderFooter?: string;
+    footer?: string;
+    header?: string;
+    breadcrumb?: string;
+    sider?: string;
+    logo?: string;
+    content?: string;
+    root?: string;
+    siderChildren?: string;
+    logoImage?: string;
+    menu?: string;
+    tabs?: string;
+  }>;
+  proStyles: import("vue").ComputedRef<{
+    siderHeader?: import("vue").CSSProperties;
+    siderFooter?: import("vue").CSSProperties;
+    footer?: import("vue").CSSProperties;
+    header?: import("vue").CSSProperties;
+    breadcrumb?: import("vue").CSSProperties;
+    sider?: import("vue").CSSProperties;
+    logo?: import("vue").CSSProperties;
+    content?: import("vue").CSSProperties;
+    root?: import("vue").CSSProperties;
+    siderChildren?: import("vue").CSSProperties;
+    logoImage?: import("vue").CSSProperties;
+    menu?: import("vue").CSSProperties;
+    tabs?: import("vue").CSSProperties;
+  }>;
+  breadcrumbRender: import("vue").Ref<(props: LayoutBreadcrumbSlotProps) => any, (props: LayoutBreadcrumbSlotProps) => any>;
+  breadcrumbConfig: import("vue").ComputedRef<LayoutBreadcrumbConfig>;
+  pageContainerConfig: import("vue").ComputedRef<LayoutPageContainerConfig>;
+  hasFooterToolbar: import("vue").ComputedRef<boolean>;
+  navigate: (name: string) => void;
+  setHasFooterToolbar: (value: boolean) => void;
+};
+//#endregion
+export { useLayoutBase };

package/dist/hooks/useLayoutBase.js

@@ -0,0 +1,86 @@
+import { useInjectLayoutContext } from "../context/index.js";
+import { computed } from "vue";
+//#region src/hooks/useLayoutBase.ts
+/**
+* 从 LayoutContext 提取 Header / Sider 等子组件共享的基础响应式状态，
+* 避免在每个组件中重复相同的解构与 computed 声明。
+*/
+function useLayoutBase(props) {
+	const layoutContext = useInjectLayoutContext();
+	const sider = layoutContext?.sider;
+	const header = layoutContext?.header;
+	const zIndex = layoutContext?.zIndex;
+	const prefixCls = layoutContext?.prefixCls;
+	const hashId = layoutContext?.hashId;
+	const cssVarCls = layoutContext?.cssVarCls;
+	const rootCls = layoutContext?.rootCls;
+	const watermark = layoutContext?.watermark;
+	const menuState = layoutContext?.menuState;
+	const tabsState = layoutContext?.tabsState;
+	const tabsHeight = layoutContext?.tabsHeight;
+	const setTabsHeight = layoutContext?.setTabsHeight;
+	const siderWidth = layoutContext?.siderWidth;
+	const collapsedWidth = layoutContext?.collapsedWidth;
+	const breadcrumbRender = layoutContext?.breadcrumbRender;
+	const breadcrumbConfig = layoutContext?.breadcrumbConfig;
+	const pageContainerConfig = layoutContext?.pageContainerConfig;
+	const collapseConfig = layoutContext?.collapseConfig;
+	const contentFullscreen = layoutContext?.contentFullscreen;
+	const renderRouterView = layoutContext?.renderRouterView;
+	const navigate = layoutContext?.navigate;
+	const setHasFooterToolbar = layoutContext?.setHasFooterToolbar;
+	const layout = computed(() => layoutContext?.layout.value);
+	const collapsed = computed(() => props?.collapsed ?? layoutContext?.collapsed.value ?? false);
+	const isMobile = computed(() => layoutContext?.isMobile.value ?? false);
+	const logoConfig = computed(() => layoutContext?.logoConfig.value);
+	const logoTitle = computed(() => {
+		if (!logoConfig.value) return void 0;
+		return logoConfig.value.title;
+	});
+	const selectedKeys = computed(() => layoutContext?.menuState?.selectedKeys.value ?? []);
+	const openKeys = computed(() => layoutContext?.menuState?.openKeys.value ?? []);
+	const hasFooterToolbar = computed(() => layoutContext?.hasFooterToolbar?.value ?? false);
+	return {
+		layoutContext,
+		layout,
+		sider,
+		header,
+		zIndex,
+		watermark,
+		tabsState,
+		tabsHeight,
+		setTabsHeight,
+		prefixCls,
+		hashId,
+		cssVarCls,
+		rootCls,
+		menuState,
+		siderWidth,
+		collapsedWidth,
+		collapseConfig,
+		contentFullscreen,
+		renderRouterView,
+		collapsed,
+		isMobile,
+		logoConfig,
+		logoTitle,
+		selectedKeys,
+		openKeys,
+		proClasses: computed(() => ({
+			...layoutContext?.proClasses.value ?? {},
+			...props?.proClasses ?? {}
+		})),
+		proStyles: computed(() => ({
+			...layoutContext?.proStyles.value ?? {},
+			...props?.proStyles ?? {}
+		})),
+		breadcrumbRender,
+		breadcrumbConfig,
+		pageContainerConfig,
+		hasFooterToolbar,
+		navigate,
+		setHasFooterToolbar
+	};
+}
+//#endregion
+export { useLayoutBase };

package/dist/hooks/useMenu.d.ts

@@ -0,0 +1,77 @@
+import { BreadcrumbItemType, GProLayoutProps, LayoutMenuConfig, LayoutMenuRoute, Meta } from "../interface.js";
+import { MenuLookupEntry, MenuMetaPatch, MenuRoutePatch, MenuTreeMutationOptions, ResolveRouteResult } from "../utils/menu.js";
+import { ComputedRef, MaybeRefOrGetter, ShallowRef } from "vue";
+
+//#region src/hooks/useMenu.d.ts
+interface UseLayoutMenuOptions {
+  /** 菜单数据源；不传则回退 vue-router 的路由表 */
+  menus?: MaybeRefOrGetter<LayoutMenuRoute[] | undefined>;
+  /** 外部受控选中菜单；不传则由当前路由链自动推导 */
+  selectedKeys?: MaybeRefOrGetter<string[] | undefined>;
+  /** 外部受控展开菜单；不传则由当前路由链自动推导 */
+  openKeys?: MaybeRefOrGetter<string[] | undefined>;
+  /** 菜单配置（autoClose 等） */
+  config: MaybeRefOrGetter<LayoutMenuConfig>;
+  /** 布局模式；`mix` 模式强制分割头部/侧边菜单 */
+  layout?: MaybeRefOrGetter<GProLayoutProps['layout']>;
+  /** 移动端；移动端关闭菜单分割 */
+  isMobile?: MaybeRefOrGetter<boolean>;
+  /** 当前选中菜单名，默认取 `useRoute().name` */
+  currentName?: () => string | undefined;
+}
+interface LayoutMenuState {
+  /** 完整菜单路由树（清洗 + 排序后） */
+  menus: ShallowRef<LayoutMenuRoute[]>;
+  /** 扁平菜单列表（markRaw） */
+  flatMenus: ComputedRef<LayoutMenuRoute[]>;
+  /** 选中项（可写，导航时按匹配链同步） */
+  selectedKeys: ShallowRef<string[]>;
+  /** 展开项（可写，支持 v-model 与 autoClose） */
+  openKeys: ShallowRef<string[]>;
+  /** 面包屑路由 */
+  breadcrumbRoutes: ComputedRef<LayoutMenuRoute[]>;
+  /** 面包屑数据项 */
+  breadcrumbItems: ComputedRef<BreadcrumbItemType[]>;
+  /** 当前路由 meta */
+  currentMeta: ComputedRef<Meta>;
+  /** 头部菜单路由分支（mix 时为顶层、剥子级） */
+  headerMenus: ComputedRef<LayoutMenuRoute[]>;
+  /** 侧边菜单路由分支（mix 时为激活顶层的子级） */
+  siderMenus: ComputedRef<LayoutMenuRoute[]>;
+  /** 解析点击菜单后的跳转目标 */
+  resolveRoute: (name: string) => ResolveRouteResult;
+  /** name 查找表（供构造 LayoutSelectInfo.route） */
+  lookup: ComputedRef<Map<string, MenuLookupEntry>>;
+  /** 整体替换菜单树 */
+  setMenus: (menus: LayoutMenuRoute[]) => void;
+  /** 原地变更后的兜底刷新，会重新清洗排序 */
+  refreshMenus: () => void;
+  /** 批量提交菜单更新，避免多次重建索引 */
+  batchMenus: (updater: (menus: LayoutMenuRoute[]) => LayoutMenuRoute[], options?: MenuTreeMutationOptions) => void;
+  /** 追加菜单；不传 parentName 时追加到顶层 */
+  addMenu: (menu: LayoutMenuRoute, parentName?: string, index?: number) => void;
+  /** 按 name 更新菜单节点 */
+  updateMenu: (name: string, updater: MenuRoutePatch | ((route: LayoutMenuRoute) => LayoutMenuRoute), options?: MenuTreeMutationOptions) => void;
+  /** 按 name 更新 meta，适合标题 / 图标 / 样式 / 隐藏状态 */
+  setMenuMeta: (name: string, updater: MenuMetaPatch | ((meta: Meta) => Meta), options?: MenuTreeMutationOptions) => void;
+  /** 显示菜单 */
+  showMenu: (name: string) => void;
+  /** 隐藏菜单 */
+  hideMenu: (name: string) => void;
+  /** 删除菜单及其子树 */
+  removeMenu: (name: string) => void;
+}
+interface UseLayoutMenuReturn {
+  menuState: LayoutMenuState;
+}
+/**
+ * 菜单组合式：以 shallowRef 菜单树为总状态，派生选中 / 展开 / 面包屑 / 查找索引。
+ *
+ * 关键响应式（根治旧实现卡顿 / 内存问题）：
+ * - `menus` / `selectedKeys` / `openKeys` 均为 shallowRef，可由 context 主动控制；
+ * - `lookup` 内携带 path，深层菜单更新走 O(1) 查找 + O(depth) 局部克隆；
+ * - 派生索引仅在 `menus` 根引用变化时重建，无 deep watch、无全量 cloneDeep。
+ */
+declare function useMenu(options: UseLayoutMenuOptions): UseLayoutMenuReturn;
+//#endregion
+export { LayoutMenuState, UseLayoutMenuOptions, UseLayoutMenuReturn, useMenu };