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

package/dist/ProLayout.js

@@ -1,371 +1,502 @@
-import { defaultContextKey, provideProLayoutContext } from "./Context/index.js";
-import GlobalFooter_default from "./components/GlobalFooter/index.js";
-import { useProLayoutMenuContext } from "./hooks/menu/context.js";
-import { calculateCss, getCssVarOrUnit } from "./utils/style/index.js";
-import "./utils/index.js";
-import { defaultSettings } from "./config/index.js";
-import { compatibleStyle, genProLayoutStyle } from "./style/index.js";
-import GlobalHeader_default from "./components/GlobalHeader/index.js";
-import SiderMenu_default from "./components/SiderMenu/index.js";
-import { provideProLayoutExposeContext } from "./Context/expose.js";
-import { basicLayoutProps } from "./props/index.js";
-import { defaultSlots, headerSlots, siderMenuSlots } from "./types/SlotsTypings.js";
-import { WrapContent, baseWrapContentKeys } from "./WrapContent.js";
-import { Fragment, computed, createVNode, defineComponent, mergeProps, reactive, ref, toRefs, watch } from "vue";
+import { useInjectLayoutContext, useProvideLayoutContext } from "./context/index.js";
+import LayoutFooter$1 from "./components/Footer/index.js";
+import Header from "./components/Header/index.js";
+import LayoutSider$1 from "./components/Sider/index.js";
+import LayoutTabs from "./components/Tabs/index.js";
+import WrapContent from "./components/WrapContent/index.js";
+import { DEFAULT_LAYOUT_CONFIG } from "./defaultConfig.js";
+import { useMenu } from "./hooks/useMenu.js";
+import { useTabsState } from "./hooks/useTabs.js";
+import { LAYOUT_SLOT_KEYS } from "./interface.js";
+import style_default from "./style/index.js";
+import { normalizeSectionConfig } from "./utils/config.js";
+import { computed, createVNode, defineComponent, mergeDefaults, ref } from "vue";
 import { ThemeContext, useThemeContext } from "@gx-design-vue/context";
-import { useMediaQuery, useSlotsProps, useState } from "@gx-design-vue/pro-hooks";
-import { GProConfigProvider, useProConfigContext, useProStyle } from "@gx-design-vue/pro-provider";
-import { classNames, deepMerge, getLevelData, getPrefixCls, getRandomNumber, getSlot, getSlotVNode, getSlotsProps } from "@gx-design-vue/pro-utils";
-import { useDark } from "@vueuse/core";
-import { ConfigProvider, Layout } from "ant-design-vue";
-import { omit, pick } from "es-toolkit";
-
+import { GProConfigProvider, useProToken } from "@gx-design-vue/pro-provider";
+import { classNames, getSlot, getSlotsProps } from "@gx-design-vue/pro-utils";
+import { useDark, useMediaQuery, useVModel } from "@vueuse/core";
+import { ConfigProvider, Layout } from "antdv-next";
+import { useBaseConfig } from "antdv-next/config-provider/context";
+import useCSSVarCls from "antdv-next/config-provider/hooks/useCSSVarCls";
+import { useRouter } from "vue-router";
 //#region src/ProLayout.tsx
-const { Content } = Layout;
-const BaseProLayout = /* @__PURE__ */ defineComponent({
-	name: "BaseProLayout",
-	inheritAttrs: false,
+const InnerLayout = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const parentCtx = useInjectLayoutContext();
+	const { proLayoutToken } = useProToken();
+	const { prefixCls } = useBaseConfig("pro-layout");
+	const rootCls = useCSSVarCls(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	useProvideLayoutContext({
+		...parentCtx,
+		hashId,
+		cssVarCls,
+		rootCls
+	});
+	return () => createVNode("div", {
+		"class": classNames(prefixCls.value, `${prefixCls.value}-${props.layout}`, hashId.value, cssVarCls.value, rootCls.value, props.proClasses?.root),
+		"style": props.proStyles?.root,
+		"data-layout": props.layout
+	}, [proLayoutToken.value?.bgLayout && createVNode("div", { "class": `${prefixCls.value}-bg-list` }, null), createVNode(Layout, { "style": {
+		minHeight: "100%",
+		flexDirection: props.showSider ? "row" : void 0
+	} }, { default: () => [slots.default?.()] })]);
+}, {
 	props: {
-		...basicLayoutProps,
-		onCollapse: Function
+		layout: {
+			type: String,
+			required: true
+		},
+		showSider: {
+			type: Boolean,
+			required: true
+		},
+		proClasses: {
+			type: Object,
+			required: false
+		},
+		proStyles: {
+			type: Object,
+			required: false
+		}
 	},
-	slots: Object,
-	setup(props, { slots }) {
-		const baseClassName = getPrefixCls({
-			suffixCls: "basic-layout",
-			isPor: true
-		});
-		const { wrapSSR, hashId } = useProStyle("ProLayout", [compatibleStyle, genProLayoutStyle], baseClassName);
-		const { theme, resolvedTheme } = useThemeContext();
-		const [hasFooterToolbar, setHasFooterToolbar] = useState(false);
-		const colSize = useMediaQuery();
-		const layoutMenuContext = useProLayoutMenuContext();
-		const slotsProps = useSlotsProps({
+	name: "InnerLayout"
+});
+const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots }) => {
+	const router = useRouter();
+	const themeValue = useThemeContext();
+	const mergeToken = computed(() => {
+		const token = props.token || {};
+		if (!token.headerHeightLayoutHeader) token.headerHeightLayoutHeader = DEFAULT_LAYOUT_CONFIG.header.height;
+		return {
+			...token,
+			layoutKey: `${isDark.value ? "dark" : "light"}:${props.layout}`
+		};
+	});
+	const layout = computed(() => props.layout ?? "side");
+	const isMobile = useMediaQuery("(max-width: 768px)");
+	const collapsed = useVModel(props, "collapsed", emit, {
+		passive: true,
+		defaultValue: false
+	});
+	const isDark = useDark();
+	const theme = useVModel(props, "theme", emit, {
+		passive: true,
+		defaultValue: themeValue?.theme?.value ?? "system"
+	});
+	const { menuState } = useMenu({
+		menus: () => props.menus,
+		selectedKeys: () => props.selectedKeys,
+		openKeys: () => props.openKeys,
+		config: () => props.menu ?? {},
+		layout: () => layout.value,
+		isMobile: () => isMobile.value
+	});
+	const selectedKeysModel = useVModel(props, "selectedKeys", emit, {
+		passive: true,
+		defaultValue: []
+	});
+	const openKeysModel = useVModel(props, "openKeys", emit, {
+		passive: true,
+		defaultValue: []
+	});
+	const contentFullscreen = ref(false);
+	const renderRouterView = ref(true);
+	const hasFooterToolbar = ref(false);
+	const breadcrumbRender = ref(null);
+	const zIndex = ref(100);
+	function navigate(name) {
+		const target = menuState.resolveRoute(name);
+		if (target.type === "external" && target.link) {
+			window.open(target.link);
+			return;
+		}
+		if (target.path && router.currentRoute.value.fullPath !== target.path) router.push(target.path);
+	}
+	const tabsConf = computed(() => normalizeSectionConfig(props.tabsConfig, DEFAULT_LAYOUT_CONFIG.tabsConfig));
+	const tabsStateConfig = computed(() => tabsConf.value ?? {});
+	const tabsState = useTabsState({
+		tabs: useVModel(props, "tabs", emit, {
+			passive: true,
+			defaultValue: []
+		}),
+		config: tabsStateConfig,
+		flatMenus: menuState.flatMenus,
+		collapsed,
+		siderWidth: props.sider?.width ?? DEFAULT_LAYOUT_CONFIG.sider.width,
+		collapseWidth: props.collapseConfig ? props.collapseConfig.width ?? DEFAULT_LAYOUT_CONFIG.collapseConfig.width : DEFAULT_LAYOUT_CONFIG.collapseConfig.width,
+		isMobile: computed(() => isMobile.value),
+		contentFullscreen,
+		onTabsChange: (val) => {
+			emit("tabsChange", val);
+		},
+		onUpdateTabs: (val) => {
+			emit("update:tabs", val);
+		},
+		onReloadPage: () => {
+			emit("reloadPage");
+			renderRouterView.value = false;
+			setTimeout(() => {
+				renderRouterView.value = true;
+			}, 200);
+		},
+		onContentFullscreenChange: (val) => {
+			emit("contentFullscreenChange", val);
+		}
+	});
+	function handleSelect(info) {
+		menuState.selectedKeys.value = info.keys;
+		selectedKeysModel.value = info.keys;
+		emit("select", info);
+		emit("update:selectedKeys", info.keys);
+		navigate(info.key);
+	}
+	function handleOpenChange(keys) {
+		menuState.openKeys.value = keys;
+		openKeysModel.value = keys;
+		emit("openChange", keys);
+		emit("update:openKeys", keys);
+	}
+	function handleCollapsedUpdate(value) {
+		collapsed.value = value;
+		emit("update:collapsed", value);
+	}
+	function handleLogoClick() {
+		emit("logoClick");
+	}
+	const logoConfig = computed(() => normalizeSectionConfig(props.logoConfig, DEFAULT_LAYOUT_CONFIG.logoConfig));
+	const collapseConfig = computed(() => normalizeSectionConfig(props.collapseConfig, DEFAULT_LAYOUT_CONFIG.collapseConfig));
+	const footerConfig = computed(() => normalizeSectionConfig(props.footerConfig, DEFAULT_LAYOUT_CONFIG.footerConfig));
+	const breadcrumbConfig = computed(() => normalizeSectionConfig(props.breadcrumbConfig, DEFAULT_LAYOUT_CONFIG.breadcrumbConfig));
+	const pageContainerConfig = computed(() => ({
+		...DEFAULT_LAYOUT_CONFIG.pageContainerConfig,
+		...props.pageContainerConfig || {}
+	}));
+	const showHeader = computed(() => !contentFullscreen.value && layout.value !== "simple" && props.header?.height !== 0);
+	const showSider = computed(() => !contentFullscreen.value && [
+		"side",
+		"mix",
+		"wide"
+	].includes(layout.value ?? "") && props.sider?.width !== 0);
+	const showFooter = computed(() => !contentFullscreen.value && layout.value !== "simple" && footerConfig.value !== null);
+	const { prefixCls } = useBaseConfig("pro-layout");
+	function getPrefixCls(suffixCls) {
+		return [prefixCls.value, suffixCls].filter(Boolean).join("-");
+	}
+	useProvideLayoutContext({
+		layout,
+		header: computed(() => ({
+			...DEFAULT_LAYOUT_CONFIG.header,
+			...props.header || {}
+		})),
+		sider: computed(() => ({
+			...DEFAULT_LAYOUT_CONFIG.sider,
+			...props.sider || {}
+		})),
+		menuState,
+		logoConfig,
+		breadcrumbConfig,
+		pageContainerConfig,
+		watermark: computed(() => props.watermark),
+		proStyles: computed(() => props.proStyles ?? {}),
+		proClasses: computed(() => props.proClasses ?? {}),
+		collapsed,
+		collapseConfig,
+		isMobile: computed(() => isMobile.value),
+		contentFullscreen,
+		renderRouterView,
+		zIndex,
+		currentMeta: menuState.currentMeta,
+		prefixCls,
+		hashId: ref(""),
+		cssVarCls: computed(() => ""),
+		rootCls: computed(() => ""),
+		breadcrumbRender,
+		hasFooterToolbar,
+		getPrefixCls,
+		setHasFooterToolbar: (value) => {
+			hasFooterToolbar.value = value;
+		},
+		navigate,
+		tabsState
+	});
+	expose({ tabs: tabsState.tabsController });
+	function resolveLayoutSlots() {
+		const merged = getSlotsProps({
 			slots,
 			props,
-			keys: defaultSlots,
-			render: true
-		});
-		const { token } = useProConfigContext();
-		const currentMeta = ref();
-		const collapsed = ref(!!props.collapsedProps?.value);
-		const renderRouterView = ref(true);
-		const fullScreenOnTabsHide = ref(false);
-		const contentFullScreen = ref(false);
-		const breadcrumbRender = ref();
-		const layoutChangKey = ref(getRandomNumber().uuid(10));
-		const genLayoutStyle = reactive({ position: "relative" });
-		const layoutProps = computed(() => {
-			let siderWidth = 0;
-			if (contentFullScreen.value) siderWidth = 0;
-			else if (props.settings.siderWidth === 0) siderWidth = 0;
-			else {
-				const wideSiderWidth = props.settings.layout === "wide" ? 208 : defaultSettings.siderWidth;
-				siderWidth = getCssVarOrUnit(props.settings.siderWidth || wideSiderWidth);
-			}
-			return {
-				isWide: props.settings.layout === "wide",
-				headerHeight: props.settings.headerHeight === 0 ? 0 : getCssVarOrUnit(props.settings.headerHeight || defaultSettings.headerHeight),
-				siderWidth,
-				hasSilder: props.settings.layout === "mix" || props.settings.layout === "side" || props.settings.layout === "wide" || false
-			};
-		});
-		const collapsedProps = computed(() => {
-			return deepMerge({
-				position: "fixed",
-				width: 64
-			}, props.collapsedProps || {});
+			keys: LAYOUT_SLOT_KEYS,
+			render: false
 		});
-		const menu = computed(() => {
-			const menuData = props.route || layoutMenuContext?.menuData?.value || [];
-			const flatMenus = layoutMenuContext?.flatMenus?.value ?? getLevelData(menuData);
-			return {
-				...props.menu,
-				menuData,
-				flatMenus,
-				key: theme.value,
-				baseTheme: resolvedTheme.value,
-				mixSiderMenus: menuData.find((item) => item.name === props.selectedKeys[0])?.children || []
-			};
-		});
-		const isMobile = computed(() => (colSize.value === "sm" || colSize.value === "xs") && !props.disableMobile && !layoutProps.value.isWide);
-		const breadcrumb = computed(() => ({
-			...props.breadcrumb,
-			position: props.breadcrumb?.position ?? "header",
-			visible: props.breadcrumb?.visible ?? true,
-			homeIcon: props.breadcrumb?.homeIcon ?? true,
-			breadcrumbRender: getSlot({
+		const normalized = Object.fromEntries(Object.entries(merged).map(([key, value]) => [key, typeof value === "function" ? value : () => value]));
+		if (slots.logo) normalized.logo = slots.logo;
+		if (props.collapseConfig) {
+			const collapseIconSlot = getSlot({
 				slots,
-				props: { breadcrumbRender: props.pageContainer?.breadcrumbRender },
-				key: "breadcrumbRender"
-			})
-		}));
-		watch(() => props.collapsedProps?.value, (value) => {
-			collapsed.value = !!value;
-		});
-		watch(() => collapsed.value, (value) => {
-			props.onCollapse?.(value);
-		});
-		watch(() => props.settings.layout, ([layout]) => {
-			if (layout === "wide" || layout === "simple") contentFullScreen.value = false;
-			layoutChangKey.value = getRandomNumber().uuid(10);
-		});
-		watch(() => layoutProps.value.isWide, (wide) => {
-			if (wide) {
-				const metaViewport = document.querySelector("meta[name=\"viewport\"]");
-				if (metaViewport) metaViewport.content = "";
-			}
-		}, { immediate: true });
-		watch(contentFullScreen, (val) => {
-			props.onContentFullScreenChange?.(val);
-		});
-		watch(() => props.isChildrenLayout, () => {
-			const contentStyle = props.styles?.content;
-			if (props.isChildrenLayout || contentStyle && contentStyle.minHeight) genLayoutStyle.minHeight = 0;
-		}, {
-			immediate: true,
-			deep: true
-		});
-		function getCommonLayoutSlots() {
-			return getSlotsProps({
-				slots,
-				props,
-				keys: [
-					"menuItemRender",
-					"menuTextRender",
-					"subMenuItemRender",
-					"collapsedIconRender",
-					"collapsedButtonRender"
-				]
+				props: { collapseIcon: props.collapseConfig.icon },
+				key: "collapseIcon"
 			});
+			if (collapseIconSlot) normalized.collapseIcon = collapseIconSlot;
 		}
-		const GlobalHeaderRender = () => {
-			if (props.headerRender === false || props.pure || props.settings.layout === "simple" || !layoutProps.value.headerHeight || layoutProps.value.headerHeight === 0) return null;
-			const slotPropsFn = getSlotsProps({
-				slots,
-				props,
-				keys: [
-					"logoRender",
-					"headerRender",
-					"headerContentRender",
-					"rightContentRender"
-				]
-			});
-			return createVNode(GlobalHeader_default, mergeProps(props, getSlotsProps({
-				slots,
-				props,
-				keys: headerSlots,
-				render: true
-			}), getCommonLayoutSlots(), {
-				"logoRender": slotPropsFn.logoRender,
-				"headerRender": slotPropsFn.headerRender,
-				"rightContentRender": slotPropsFn.rightContentRender,
-				"headerContentRender": slotPropsFn.headerContentRender
-			}), null);
-		};
-		const GlobalSilderMenuRender = () => {
-			if (!layoutProps.value.siderWidth || layoutProps.value.siderWidth === 0) return null;
-			const defaultSilderMenuSlots = getSlotsProps({
-				slots,
-				props,
-				keys: siderMenuSlots,
-				render: true
-			});
-			const slotsPropsFn = getSlotsProps({
-				slots,
-				props,
-				keys: [
-					"logoRender",
-					"menuHeaderRender",
-					"menuFooterRender",
-					"menuContentRender"
-				]
-			});
-			return createVNode(SiderMenu_default, mergeProps(props, defaultSilderMenuSlots, getCommonLayoutSlots(), {
-				"isMobile": isMobile.value,
-				"logoRender": slotsPropsFn.logoRender,
-				"siderWidth": layoutProps.value.siderWidth,
-				"menuHeaderRender": slotsPropsFn.menuHeaderRender,
-				"menuFooterRender": slotsPropsFn.menuFooterRender,
-				"menuContentRender": slotsPropsFn.menuContentRender
-			}), null);
-		};
-		const GlobalFooterRender = () => {
-			const footerRender = getSlot({
-				slots,
-				props,
-				key: "footerRender",
-				render: false
-			});
-			return createVNode(Fragment, null, [footerRender === false ? null : typeof footerRender === "function" ? footerRender(props) : footerRender || createVNode(GlobalFooter_default, {
-				"copyright": slotsProps.value.copyrightRender,
-				"links": props.footerLinks
-			}, null), hasFooterToolbar.value && createVNode("div", {
-				"class": `${baseClassName}-has-footer`,
-				"style": {
-					height: "64px",
-					marginBlockStart: token.value.marginMD
+		return normalized;
+	}
+	return () => {
+		if (props.pure) return slots.default?.();
+		const layoutSlots = resolveLayoutSlots();
+		return createVNode(ConfigProvider, { "theme": props.colorPrimary ? { token: { colorPrimary: props.colorPrimary } } : void 0 }, { default: () => [createVNode(GProConfigProvider, {
+			"dark": isDark.value,
+			"theme": { token: mergeToken.value }
+		}, { default: () => [createVNode(ThemeContext, {
+			"theme": theme.value,
+			"onChange": (value) => theme.value = value
+		}, { default: () => [createVNode(InnerLayout, {
+			"layout": layout.value,
+			"showSider": showSider.value,
+			"proClasses": props.proClasses,
+			"proStyles": props.proStyles
+		}, { default: () => [showSider.value && createVNode(LayoutSider$1, {
+			"onSelect": handleSelect,
+			"onOpenChange": handleOpenChange,
+			"onLogoClick": handleLogoClick,
+			"onUpdate:collapsed": handleCollapsedUpdate
+		}, layoutSlots), createVNode("div", {
+			"style": { position: "relative" },
+			"class": `${prefixCls.value}-container`,
+			"data-testid": "pro-layout-container"
+		}, [
+			showHeader.value && createVNode(Header, {
+				"onLogoClick": handleLogoClick,
+				"onUpdate:collapsed": handleCollapsedUpdate,
+				"onSelect": handleSelect
+			}, layoutSlots),
+			tabsConf.value && createVNode(LayoutTabs, {
+				"config": tabsConf.value,
+				"onReloadPage": () => emit("reloadPage"),
+				"onContentFullscreenChange": (val) => {
+					contentFullscreen.value = val;
+					emit("contentFullscreenChange", val);
 				}
-			}, null)]);
-		};
-		provideProLayoutContext({
-			...pick(toRefs(props), defaultContextKey),
-			collapsedProps,
-			getPrefixCls,
-			collapsed,
-			collapsedEffect: computed(() => {
-				if (collapsedProps.value?.width) return collapsed.value;
-				return false;
+			}, { tabBarItem: layoutSlots.tabBarItem }),
+			createVNode(WrapContent, { "loading": props.loading }, {
+				default: () => [slots.default?.()],
+				...layoutSlots
 			}),
-			settings: computed(() => props.settings),
-			menu,
-			currentMeta,
-			contentFullScreen,
-			layoutProps,
-			isMobile,
-			renderRouterView,
-			breadcrumb,
-			fullScreenOnTabsHide,
-			breadcrumbRender,
-			hasFooterToolbar,
-			setHasFooterToolbar,
-			pageHeaderRender: computed(() => getSlotVNode({
-				slots,
-				props: { pageHeaderRender: props.pageContainer?.pageHeaderRender },
-				key: "pageHeaderRender"
-			}))
-		});
-		return () => {
-			const rootStyle = {
-				minWidth: layoutProps.value.isWide ? getCssVarOrUnit(props.settings.wideWidth) : void 0,
-				minHeight: props.settings.layout === "simple" ? `calc(100vh - ${getCssVarOrUnit(props.settings.headerHeight)})` : void 0,
-				...props.styles?.root || {}
-			};
-			return wrapSSR(createVNode(Fragment, null, [props.pure ? slots.default?.() : createVNode("div", {
-				"id": props.id,
-				"class": classNames({
-					[`${hashId.value}`]: true,
-					[`${props.classNames?.root}`]: !!props.classNames?.root,
-					[`${baseClassName}`]: true,
-					[`${baseClassName}-${props.settings.layout}`]: true
-				}),
-				"style": rootStyle
-			}, [
-				token.value.layout?.bgLayout ? createVNode("div", { "class": classNames(`${baseClassName}-bg-list`, hashId.value) }, null) : null,
-				createVNode(Layout, { "style": layoutProps.value.isWide ? {
-					width: getCssVarOrUnit(props.settings.wideWidth),
-					paddingTop: calculateCss(layoutProps.value.headerHeight, 20),
-					margin: layoutProps.value.isWide ? "0 auto" : void 0
-				} : void 0 }, { default: () => [GlobalSilderMenuRender(), createVNode(Layout, { "style": genLayoutStyle }, { default: () => [
-					GlobalHeaderRender(),
-					createVNode(WrapContent, mergeProps(pick(props, baseWrapContentKeys), {
-						"tabsRoute": {
-							...props.tabsRoute,
-							itemRender: slots.tabsRouteItemRender || props.tabsRoute?.itemRender
-						},
-						"hashId": hashId.value,
-						"prefixCls": baseClassName
-					}), { default: () => [createVNode(Content, { "class": classNames(`${baseClassName}-content`, hashId.value) }, { default: () => [slots.default?.()] })] }),
-					!layoutProps.value.isWide && GlobalFooterRender()
-				] })] }),
-				layoutProps.value.isWide && GlobalFooterRender()
-			])]));
-		};
-	}
-});
-var ProLayout_default = /* @__PURE__ */ defineComponent({
+			showFooter.value && createVNode(LayoutFooter$1, {
+				"links": footerConfig.value.links,
+				"copyright": footerConfig.value.copyright
+			}, {
+				footer: layoutSlots.footer,
+				copyright: layoutSlots.copyright
+			})
+		])] })] })] })] });
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		layout: {
+			type: String,
+			required: false
+		},
+		colorPrimary: {
+			type: String,
+			required: false
+		},
+		menus: {
+			type: Array,
+			required: false
+		},
+		pure: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		loading: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		collapsed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		theme: {
+			type: String,
+			required: false
+		},
+		selectedKeys: {
+			type: Array,
+			required: false
+		},
+		openKeys: {
+			type: Array,
+			required: false
+		},
+		tabs: {
+			type: Array,
+			required: false
+		},
+		token: { required: false },
+		proStyles: {
+			type: Object,
+			required: false
+		},
+		proClasses: {
+			type: Object,
+			required: false
+		},
+		watermark: {
+			type: Object,
+			required: false
+		},
+		header: {
+			type: Object,
+			required: false
+		},
+		sider: {
+			type: Object,
+			required: false
+		},
+		footerConfig: {
+			type: [Object, Boolean],
+			required: false,
+			default: void 0
+		},
+		menu: {
+			type: Object,
+			required: false
+		},
+		breadcrumbConfig: {
+			type: [Object, Boolean],
+			required: false,
+			default: void 0
+		},
+		tabsConfig: {
+			type: [Object, Boolean],
+			required: false,
+			default: void 0
+		},
+		logoConfig: {
+			type: [Object, Boolean],
+			required: false,
+			default: void 0
+		},
+		collapseConfig: {
+			type: [Object, Boolean],
+			required: false,
+			default: void 0
+		},
+		pageContainerConfig: {
+			type: Object,
+			required: false
+		},
+		headerContent: {
+			type: Function,
+			required: false
+		},
+		headerRight: {
+			type: Function,
+			required: false
+		},
+		headerRightExtra: {
+			type: [
+				Function,
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		siderHeader: {
+			type: Function,
+			required: false
+		},
+		siderFooter: {
+			type: Function,
+			required: false
+		},
+		siderExtra: {
+			type: [
+				Function,
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		collapseButton: {
+			type: Function,
+			required: false
+		},
+		menuItemIcon: {
+			type: Function,
+			required: false
+		},
+		menuItemLabel: {
+			type: Function,
+			required: false
+		},
+		menuItemExtra: {
+			type: Function,
+			required: false
+		},
+		breadcrumb: {
+			type: Function,
+			required: false
+		},
+		tabBarItem: {
+			type: Function,
+			required: false
+		},
+		footer: {
+			type: [
+				Function,
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		copyright: {
+			type: [
+				Function,
+				Object,
+				String,
+				Number,
+				Boolean,
+				null,
+				Array
+			],
+			required: false,
+			default: void 0
+		}
+	}, DEFAULT_LAYOUT_CONFIG),
+	emits: [
+		"update:collapsed",
+		"update:theme",
+		"update:selectedKeys",
+		"update:openKeys",
+		"update:tabs",
+		"select",
+		"openChange",
+		"darkChange",
+		"logoClick",
+		"reloadPage",
+		"tabsChange",
+		"contentFullscreenChange"
+	],
 	name: "GProLayout",
-	compatConfig: { MODE: 3 },
-	inheritAttrs: false,
-	props: basicLayoutProps,
-	emits: {
-		select: (_value) => true,
-		"update:selected-keys": (_value) => true,
-		openKeys: (_value) => true,
-		"update:open-keys": (_value) => true,
-		collapse: (_value) => true,
-		reloadPage: () => true,
-		logoClick: () => true,
-		tabsChange: (tabs) => tabs.length > 0,
-		"update:tabs": (tabs) => tabs.length > 0,
-		themeChange: (_value) => true,
-		darkChange: (_value) => true,
-		"update:theme": (_value) => true,
-		contentFullScreenChange: (_value) => true
-	},
-	slots: Object,
-	setup(props, { slots, emit, expose }) {
-		const themeValue = useThemeContext();
-		const tabsRouteRef = ref();
-		const [theme, setTheme] = useState(props.theme ?? themeValue?.theme?.value ?? "system");
-		watch(() => props.theme, (value) => {
-			if (value) theme.value = value;
-		});
-		const isDark = useDark();
-		const mergeToken = computed(() => {
-			let token = props.token || {};
-			if (!token.layout?.header?.heightLayoutHeader) {
-				const height = props.settings.headerHeight === 0 ? defaultSettings.headerHeight : getCssVarOrUnit(props.settings.headerHeight || defaultSettings.headerHeight);
-				token = deepMerge(token, { layout: { header: { heightLayoutHeader: height } } });
-			}
-			return deepMerge(token, { layout: { key: `${isDark.value ? "dark" : "light"}:${props.settings.layout}` } });
-		});
-		const onCollapse = (collapsed) => {
-			emit("collapse", collapsed);
-			if (props.collapsedProps?.onCollapse) props.collapsedProps.onCollapse(collapsed);
-		};
-		const onOpenKeys = (openKeys) => {
-			emit("update:open-keys", openKeys);
-			emit("openKeys", openKeys);
-		};
-		const onSelect = (selectedKeys) => {
-			emit("update:selected-keys", selectedKeys);
-			emit("select", selectedKeys);
-		};
-		const onTabsChange = (tabs) => {
-			emit("update:tabs", tabs);
-			emit("tabsChange", tabs);
-		};
-		const onContentFullScreenChange = (value) => {
-			emit("contentFullScreenChange", value);
-		};
-		provideProLayoutExposeContext({ tabsRouteRef });
-		expose({ tabsRouteRef });
-		return () => {
-			const omitProps = [
-				"onSelect",
-				"onOpenKeys",
-				"onCollapse",
-				"onTabsChange",
-				"onDarkChange",
-				"theme",
-				"onContentFullScreenChange",
-				"onThemeChange"
-			];
-			return createVNode(ConfigProvider, null, { default: () => [createVNode(GProConfigProvider, {
-				"token": mergeToken.value,
-				"dark": isDark.value,
-				"cssVar": props.cssVar
-			}, { default: () => [createVNode(ThemeContext, {
-				"theme": theme.value,
-				"onChange": (val) => {
-					setTheme(val);
-					emit("themeChange", val);
-					emit("update:theme", val);
-				},
-				"onChangeBase": () => {
-					props.onDarkChange?.(isDark.value);
-				}
-			}, { default: () => [createVNode(BaseProLayout, mergeProps(omit(props, omitProps), {
-				"onSelect": onSelect,
-				"onOpenKeys": onOpenKeys,
-				"onCollapse": onCollapse,
-				"onTabsChange": onTabsChange,
-				"onContentFullScreenChange": onContentFullScreenChange
-			}), slots)] })] })] });
-		};
-	}
+	inheritAttrs: false
 });
-
 //#endregion
-export { ProLayout_default as default };
+export { GProLayout as default };