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

package/dist/components/PageContainer/index.js

@@ -1,222 +1,310 @@
-import { useProLayoutContext } from "../../Context/index.js";
-import { useProLayoutExposeContext } from "../../Context/expose.js";
-import { pageContainerProps } from "./props.js";
-import { usePageContent } from "../../hooks/layout/usePageContent.js";
+import { useLayoutBase } from "../../hooks/useLayoutBase.js";
 import { useAppPageContext } from "../AppPage/context.js";
-import FooterToolbar_default from "../FooterToolbar/index.js";
-import PageHeader_default from "./PageHeader.js";
-import { useStyle as useStyle$1 } from "./style/index.js";
-import { Fragment, computed, createVNode, defineComponent, isVNode, mergeProps, onDeactivated, onUnmounted, unref, watch } from "vue";
-import { onMountedOrActivated } from "@gx-design-vue/pro-hooks";
+import GFooterToolbar from "../FooterToolbar/index.js";
+import PageHeader from "./PageHeader.js";
+import style_default from "./style.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode, mergeProps, onScopeDispose, watch, watchEffect } from "vue";
 import { unit } from "@gx-design-vue/pro-provider";
-import { classNames, getPrefixCls, getSlot, getSlotVNode, isBoolean } from "@gx-design-vue/pro-utils";
-import { Card, Spin } from "ant-design-vue";
-import { useRouter } from "vue-router";
-import { useProAppContext } from "@gx-design-vue/pro-app";
-import { GPorWatermark } from "@gx-design-vue/pro-watermark";
-
+import { classNames } from "@gx-design-vue/pro-utils";
+import { Card, Spin, Watermark } from "antdv-next";
+import { useBaseConfig } from "antdv-next/config-provider/context";
+import useCSSVarCls from "antdv-next/config-provider/hooks/useCSSVarCls";
+import { useSlotsProps } from "@gx-design-vue/pro-hooks";
 //#region src/components/PageContainer/index.tsx
+/** 页头区域用到的非作用域 slot（breadcrumb 为作用域 slot，单独处理） */
 function _isSlot(s) {
 	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
-const defaultSpinning = { type: "default" };
-const GProPageContainer = /* @__PURE__ */ defineComponent({
-	inheritAttrs: false,
-	name: "GProPageContainer",
-	props: pageContainerProps,
-	slots: Object,
-	emits: ["contentFullScreenChange"],
-	setup(props, { slots, expose }) {
-		const router = useRouter();
-		const appContext = useProAppContext();
-		const appPageContext = useAppPageContext();
-		const layoutContext = useProLayoutContext();
-		const exposeContext = useProLayoutExposeContext();
-		const fitPageHeight = usePageContent();
-		const getPrefixClsFn = layoutContext?.getPrefixCls || getPrefixCls;
-		const proPageContainerClass = getPrefixClsFn({
-			suffixCls: "page-container",
-			isPor: true
-		});
-		const gridPrefixCls = getPrefixClsFn({
-			suffixCls: "grid-content",
-			isPor: true
-		});
-		const layoutPageProps = computed(() => layoutContext?.pageContainer?.value || {});
-		const waterMarkProps = computed(() => {
-			const propsWaterMark = isBoolean(props.waterMarkProps) ? {} : props.waterMarkProps || {};
-			return {
-				...isBoolean(layoutContext?.waterMarkProps?.value) ? {} : layoutContext?.waterMarkProps?.value || {},
-				...propsWaterMark
-			};
-		});
-		const cardProps = computed(() => props.pageCardProps || layoutPageProps.value?.pageCardProps);
-		const pageHeaderStyle = computed(() => props.pageHeaderStyle || layoutPageProps.value?.pageHeaderStyle);
-		const contentStyle = computed(() => props.pageContentStyle || layoutPageProps.value?.pageContentStyle);
-		const pageChildrenContentClass = computed(() => props.pageChildrenContentClass || layoutPageProps.value?.pageChildrenContentClass || "");
-		const pageChildrenContentStyleRef = computed(() => props.pageChildrenContentStyle || layoutPageProps.value?.pageChildrenContentStyle || {});
-		const contentWide = computed(() => layoutContext?.layoutProps?.value?.isWide);
-		const usePageCardRef = computed(() => isBoolean(props.usePageCard) ? props.usePageCard : isBoolean(layoutPageProps.value?.usePageCard) ? layoutPageProps.value?.usePageCard : true);
-		const contentWidth = computed(() => {
-			return unit(props.contentWidth ?? layoutPageProps.value?.contentWidth);
-		});
-		const spinning = computed(() => {
-			const loading = isBoolean(props.loading) ? props.loading : !!props.loading?.spinning;
-			return appPageContext?.spinning?.value ? false : loading;
-		});
-		const loadingProps = computed(() => {
-			const layoutLoading = layoutPageProps.value?.loadingProps;
-			if (typeof props.loading === "boolean") return layoutLoading ?? defaultSpinning;
-			return {
-				...layoutLoading,
-				...props.loading || {}
-			};
-		});
-		const showPageHeader = computed(() => {
-			const pageHeaderContentRender = getSlotVNode({
-				slots,
-				props,
-				key: "pageHeaderContentRender"
-			});
-			const breadcrumb = layoutContext?.breadcrumb?.value || {};
-			const routers = breadcrumb.routes || [];
-			if (contentWide.value) return false;
-			if (breadcrumb?.position === "pageHeader") return routers.length > 0 || pageHeaderContentRender;
-			return pageHeaderContentRender;
-		});
-		const fitPageStyle = computed(() => {
-			if (props.height) return {
-				[props.height === "min" ? "min-height" : props.height === "max" ? "max-height" : "height"]: fitPageHeight.value,
-				overflow: props.height !== "min" ? "hidden" : void 0
-			};
-			return {};
-		});
-		function setContextCurrentMeta() {
-			const tabs = exposeContext.tabsRouteRef?.value;
-			if (layoutContext) layoutContext.currentMeta.value = { title: props.title };
-			if (tabs) tabs.update(router.currentRoute.value, {
-				type: "merge",
-				params: { meta: { title: props.title } }
-			});
-		}
-		watch([() => props.title, () => exposeContext.tabsRouteRef?.value], ([title, tabs]) => {
-			if (tabs && title) setContextCurrentMeta();
-		});
-		watch([() => props.breadcrumbRender, () => layoutContext?.breadcrumb?.value?.position], () => {
-			setContextBreadcrumb();
-		}, { deep: true });
-		onMountedOrActivated(() => {
-			if (layoutContext && layoutContext.fullScreenOnTabsHide) layoutContext.fullScreenOnTabsHide.value = !!props.fullScreenOnTabsHide;
-			setContextBreadcrumb();
-			if (props.title) setContextCurrentMeta();
-		});
-		onUnmounted(() => {
-			if (layoutContext) {
-				layoutContext.currentMeta.value = void 0;
-				layoutContext.breadcrumbRender.value = void 0;
-			}
-		});
-		onDeactivated(() => {
-			if (layoutContext) {
-				layoutContext.currentMeta.value = void 0;
-				layoutContext.breadcrumbRender.value = void 0;
-			}
-		});
-		function setContextBreadcrumb() {
-			const breadcrumbRender = getSlot({
-				slots,
-				props,
-				key: "breadcrumbRender"
-			});
-			if (layoutContext) layoutContext.breadcrumbRender.value = breadcrumbRender;
-		}
-		const { wrapSSR, hashId } = useStyle$1(proPageContainerClass);
-		watch(() => layoutContext?.contentFullScreen?.value, (val) => {
-			props.onContentFullScreenChange?.(val);
-		});
-		const contentDom = () => {
-			const pageChildrenExtraRender = getSlotVNode({
-				slots,
-				props,
-				key: "pageChildrenExtraRender"
-			});
-			const className = classNames(`${proPageContainerClass}-children-container`, hashId.value, pageChildrenContentClass.value);
-			return createVNode("div", {
-				"class": className,
-				"style": { ...pageChildrenContentStyleRef.value }
-			}, [spinning.value && createVNode("div", { "class": classNames(`${proPageContainerClass}-spinning`, hashId.value) }, [createVNode(Spin, {
-				"indicator": appContext?.indicator?.value,
-				"tip": loadingProps.value?.tip
-			}, null)]), createVNode("div", { "class": classNames(`${proPageContainerClass}-spinning-content`, hashId.value, spinning.value && loadingProps.value.type ? `${proPageContainerClass}-spinning-content-${loadingProps.value.type}` : "") }, [pageChildrenExtraRender, usePageCardRef.value ? createVNode(Card, mergeProps({ "bordered": false }, cardProps.value || {}, {
-				"style": {
-					...cardProps.value?.style || {},
-					...fitPageStyle.value
-				},
-				"bodyStyle": {
-					...cardProps.value?.bodyStyle || {},
-					...fitPageStyle.value
-				}
-			}), { default: () => [slots.default?.()] }) : createVNode("div", {
-				"class": cardProps.value?.class,
-				"style": {
-					...cardProps.value?.style || {},
-					...fitPageStyle.value
-				}
-			}, [slots.default?.()])])]);
+const HEADER_RENDER_KEYS = [
+	"header",
+	"headerContent",
+	"extra"
+];
+const FOOTER_RENDER_KEYS = ["footer"];
+/**
+* GPageContainer —— 页面容器：页头（面包屑 + 标题 + 操作）+ 内容卡片 + loading 遮罩 + 水印。
+* 可独立使用；置于 `GProLayout` 内时通过 layout context 读取面包屑数据与全屏态。
+*/
+const ProPageContainer = /* @__PURE__ */ defineComponent((props, { slots, emit }) => {
+	const { prefixCls } = useBaseConfig("pro-page-container", props);
+	const rootCls = useCSSVarCls(prefixCls);
+	const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+	const { watermark, menuState, breadcrumbRender, contentFullscreen, breadcrumbConfig: breadcrumbContext, pageContainerConfig } = useLayoutBase();
+	const appPageContext = useAppPageContext();
+	const headerSlots = useSlotsProps({
+		slots,
+		props,
+		keys: HEADER_RENDER_KEYS,
+		render: true
+	});
+	const footerSlots = useSlotsProps({
+		slots,
+		props,
+		keys: FOOTER_RENDER_KEYS,
+		render: true
+	});
+	const mergedContentWidth = computed(() => props.contentWidth ?? pageContainerConfig?.value?.contentWidth);
+	const mergedCard = computed(() => props.card !== void 0 ? props.card : pageContainerConfig?.value?.card);
+	const mergedHeight = computed(() => props.height ?? pageContainerConfig?.value?.height);
+	const mergedAffixFooter = computed(() => props.affixFooter ?? pageContainerConfig?.value?.affixFooter ?? false);
+	const mergedLoading = computed(() => props.loading ?? pageContainerConfig?.value?.loading ?? false);
+	const loadingState = computed(() => {
+		const loading = mergedLoading.value;
+		if (loading == null || loading === false) return {
+			spinning: false,
+			blur: false,
+			tip: void 0
 		};
-		const renderContentDom = () => {
-			if (props.waterMarkProps !== false && layoutContext?.waterMarkProps?.value !== false) {
-				let _slot;
-				return createVNode(GPorWatermark, unref(waterMarkProps.value), _isSlot(_slot = contentDom()) ? _slot : { default: () => [_slot] });
-			}
-			return contentDom();
+		if (loading === true) return {
+			spinning: true,
+			blur: false,
+			tip: void 0
 		};
-		const GridContent = () => {
-			return createVNode(Fragment, null, [createVNode("div", {
-				"class": [gridPrefixCls, hashId.value],
-				"style": {
-					width: contentWidth.value,
-					marginInline: contentWidth.value && "auto"
-				}
-			}, [createVNode("div", {
-				"class": `${gridPrefixCls}-children ${hashId.value}`,
-				"style": contentStyle.value
-			}, [renderContentDom()])])]);
+		return {
+			spinning: true,
+			blur: !!loading.blur,
+			tip: loading.tip
 		};
-		expose({ changeContentFullScreen: (val) => {
-			if (layoutContext) layoutContext.contentFullScreen.value = val;
-		} });
-		return () => {
-			const footer = getSlotVNode({
-				slots,
-				props,
-				key: "footer"
-			});
-			const pageHeaderRender = getSlotVNode({
-				slots,
-				props,
-				key: "pageHeaderRender"
-			}) || layoutContext?.pageHeaderRender?.value;
-			const pageHeaderContentRender = getSlotVNode({
-				slots,
-				props,
-				key: "pageHeaderContentRender"
-			});
-			return wrapSSR(createVNode("div", {
-				"class": classNames(layoutContext?.classNames?.value?.content, hashId.value, proPageContainerClass, props.class),
-				"style": {
-					...props.style,
-					...layoutContext?.styles?.value?.content || {}
-				}
-			}, [createVNode(Fragment, null, [pageHeaderRender !== false && showPageHeader.value && (pageHeaderRender || createVNode(PageHeader_default, {
-				"style": pageHeaderStyle?.value,
-				"content": pageHeaderContentRender,
-				"close": props.fullScreenOnTabsHide
-			}, null)), GridContent()]), footer && createVNode(FooterToolbar_default, props.footerToolBarProps || {}, _isSlot(footer) ? footer : { default: () => [footer] })]));
+	});
+	const spinning = computed(() => appPageContext?.spinning?.value ? false : loadingState.value.spinning);
+	const cardEnabled = computed(() => mergedCard.value !== false);
+	const cardConfig = computed(() => mergedCard.value && mergedCard.value !== true ? mergedCard.value : {});
+	const heightClass = computed(() => {
+		if (mergedHeight.value === "fit") return `${prefixCls.value}-height-fit`;
+		if (mergedHeight.value === "full") return `${prefixCls.value}-height-full`;
+		return "";
+	});
+	const breadcrumbConfig = computed(() => {
+		if (props.breadcrumbConfig === false) return null;
+		const contextValue = breadcrumbContext?.value;
+		if (!contextValue) return null;
+		return {
+			placement: "pageHeader",
+			...props.breadcrumbConfig ?? contextValue
 		};
+	});
+	const breadcrumbItems = computed(() => menuState?.breadcrumbItems.value ?? []);
+	const breadcrumbRoutes = computed(() => menuState?.breadcrumbRoutes.value ?? []);
+	watchEffect(() => {
+		if (!breadcrumbRender) return;
+		const placement = !breadcrumbConfig.value ? void 0 : breadcrumbConfig.value.placement;
+		const breadcrumb = slots.breadcrumb && breadcrumbConfig.value?.render;
+		if (placement === "header" && breadcrumb) breadcrumbRender.value = (slotProps) => breadcrumb?.(slotProps);
+		else breadcrumbRender.value = null;
+	});
+	onScopeDispose(() => {
+		if (breadcrumbRender) breadcrumbRender.value = null;
+	});
+	if (contentFullscreen) watch(contentFullscreen, (value) => emit("fullscreenChange", value));
+	function regionClass(name, ...extra) {
+		const semantic = props.proClasses?.[name];
+		return classNames(`${prefixCls.value}-${name}`, semantic, ...extra);
 	}
+	function renderHeader() {
+		if (props.header === false) return null;
+		if (headerSlots.value.header) return headerSlots.value.header;
+		return createVNode(PageHeader, {
+			"prefixCls": prefixCls.value,
+			"title": props.title,
+			"breadcrumbConfig": breadcrumbConfig.value,
+			"breadcrumbItems": breadcrumbItems.value,
+			"breadcrumbRoutes": breadcrumbRoutes.value,
+			"proStyles": props.proStyles,
+			"proClasses": props.proClasses
+		}, {
+			headerContent: slots.headerContent,
+			extra: slots.extra,
+			breadcrumb: breadcrumbRender?.value
+		});
+	}
+	function renderBody() {
+		const innerClass = classNames(`${prefixCls.value}-content-inner`, spinning.value && (loadingState.value.blur ? `${prefixCls.value}-content-blur` : `${prefixCls.value}-content-mask`), props.proClasses?.body);
+		const cardClass = regionClass("card");
+		const cardNode = cardEnabled.value ? createVNode(Card, mergeProps({
+			variant: "borderless",
+			...cardConfig.value
+		}, {
+			"classes": {
+				...cardConfig.value.classes || {},
+				root: classNames(cardConfig.value.classes?.root, cardClass),
+				body: classNames(cardConfig.value.classes?.body, regionClass("card-body"))
+			},
+			"styles": {
+				...cardConfig.value.styles || {},
+				root: {
+					...cardConfig.value.styles?.root || {},
+					...props.proStyles?.card || {}
+				}
+			}
+		}), { default: () => [slots.default?.()] }) : createVNode("div", {
+			"class": cardClass,
+			"style": props.proStyles?.card
+		}, [slots.default?.()]);
+		return createVNode("div", {
+			"class": regionClass("content"),
+			"style": props.proStyles?.content
+		}, [spinning.value && createVNode("div", { "class": `${prefixCls.value}-spinning` }, [createVNode(Spin, {
+			"spinning": true,
+			"tip": loadingState.value.tip
+		}, null)]), createVNode("div", {
+			"class": innerClass,
+			"style": props.proStyles?.body
+		}, [cardNode])]);
+	}
+	function renderContent() {
+		if (props.watermark || watermark?.value) {
+			let _slot;
+			return createVNode(Watermark, mergeProps({
+				...watermark?.value,
+				...props.watermark
+			}, { "class": `${prefixCls.value}-watermark` }), _isSlot(_slot = renderBody()) ? _slot : { default: () => [_slot] });
+		}
+		return renderBody();
+	}
+	function renderFooter() {
+		const footerNode = footerSlots.value.footer;
+		if (!footerNode) return null;
+		if (mergedAffixFooter.value) return createVNode(GFooterToolbar, {
+			"teleport": true,
+			"proClasses": { root: props.proClasses?.footer },
+			"proStyles": { root: props.proStyles?.footer }
+		}, _isSlot(footerNode) ? footerNode : { default: () => [footerNode] });
+		return createVNode("div", {
+			"class": regionClass("footer"),
+			"style": props.proStyles?.footer
+		}, [footerNode]);
+	}
+	function renderContentWidthWrapper(children) {
+		if (!mergedContentWidth.value) return children;
+		return createVNode("div", { "style": {
+			maxWidth: unit(mergedContentWidth.value),
+			marginInline: "auto",
+			width: "100%"
+		} }, [children]);
+	}
+	return () => {
+		return createVNode("div", {
+			"class": classNames(prefixCls.value, hashId.value, cssVarCls.value, rootCls.value, heightClass.value, props.proClasses?.root, props.class),
+			"style": {
+				...props.proStyles?.root,
+				...props.style
+			}
+		}, [renderContentWidthWrapper(createVNode(Fragment, null, [
+			renderHeader(),
+			renderContent(),
+			renderFooter()
+		]))]);
+	};
+}, {
+	props: {
+		class: {
+			type: String,
+			required: false
+		},
+		style: {
+			type: Object,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		loading: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		height: {
+			type: String,
+			required: false
+		},
+		card: {
+			type: [Boolean, Object],
+			required: false,
+			default: void 0
+		},
+		breadcrumbConfig: {
+			type: [Object, Boolean],
+			required: false,
+			default: void 0
+		},
+		watermark: {
+			type: Object,
+			required: false
+		},
+		affixFooter: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		contentWidth: {
+			type: [Number, String],
+			required: false
+		},
+		proStyles: {
+			type: Object,
+			required: false
+		},
+		proClasses: {
+			type: Object,
+			required: false
+		},
+		header: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		headerContent: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		extra: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		footer: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		}
+	},
+	emits: ["fullscreenChange"],
+	name: "GProPageContainer",
+	inheritAttrs: false
 });
-var PageContainer_default = GProPageContainer;
-
 //#endregion
-export { PageContainer_default as default };
+export { ProPageContainer as default };

package/dist/components/PageContainer/style.d.ts

@@ -0,0 +1,5 @@
+//#region src/components/PageContainer/style.d.ts
+type ComponentToken = Record<string, any>;
+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 };

package/dist/components/PageContainer/style.js

@@ -0,0 +1,142 @@
+import { proGenStyleHooks } from "@gx-design-vue/pro-provider";
+//#region src/components/PageContainer/style.ts
+/** 页头区域样式：breadcrumb / heading / title / extra / close */
+const genPageHeaderStyle = (token) => {
+	const { componentCls } = token;
+	return { [componentCls]: {
+		"&-header": {
+			background: token.colorBgContainer,
+			paddingInline: token.paddingLG,
+			paddingBlock: token.paddingSM,
+			borderBlockEnd: `${token.lineWidth} solid ${token.colorSplit}`,
+			"&-top": {
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between"
+			},
+			"&-heading": {
+				display: "flex",
+				alignItems: "center",
+				gap: token.marginXS,
+				marginBlockStart: token.marginXS
+			}
+		},
+		"&-title": {
+			margin: 0,
+			color: token.colorTextHeading,
+			fontWeight: token.fontWeightStrong,
+			fontSize: token.fontSizeHeading4
+		},
+		"&-extra": {
+			marginInlineStart: "auto",
+			display: "flex",
+			alignItems: "center",
+			gap: token.marginXS
+		},
+		"&-breadcrumb": { minWidth: 0 },
+		"&-close": {
+			color: token.colorTextDescription,
+			fontWeight: token.fontWeightStrong,
+			textDecoration: "none",
+			background: "transparent",
+			borderRadius: token.borderRadiusSM,
+			padding: token.paddingXXS,
+			cursor: "pointer",
+			transition: `color ${token.motionDurationMid}, background-color ${token.motionDurationMid}`,
+			"&-icon": {
+				display: "block",
+				fontSize: token.fontSizeLG
+			},
+			"&:hover": {
+				color: token.colorIconHover,
+				backgroundColor: token.wireframe ? "transparent" : token.colorFillContent
+			},
+			"&:active": { backgroundColor: token.wireframe ? "transparent" : token.colorFillContentHover }
+		}
+	} };
+};
+/** 内容区域样式：content / card / spinning / footer / height */
+const genPageContentStyle = (token) => {
+	const { componentCls } = token;
+	const watermarkCls = `${componentCls}-watermark`;
+	return { [componentCls]: {
+		position: "relative",
+		display: "flex",
+		flexDirection: "column",
+		"&-height-fit": {
+			flex: "1 0 auto",
+			minHeight: "100%",
+			[`${componentCls}-content`]: { flex: "1 0 auto" },
+			[`${componentCls}-content-inner, & > ${watermarkCls}`]: { flex: "1 0 auto" },
+			[`${componentCls}-card`]: { flex: "1 0 auto" }
+		},
+		"&-height-full": {
+			flex: 1,
+			minHeight: 0,
+			height: "100%",
+			overflow: "hidden",
+			[`${componentCls}-content`]: {
+				flex: "1 1 auto",
+				minHeight: 0
+			},
+			[`${componentCls}-content-inner, & > ${watermarkCls}`]: {
+				flex: "1 1 auto",
+				minHeight: 0
+			},
+			[`${componentCls}-card`]: {
+				flex: "1 1 auto",
+				minHeight: 0,
+				overflow: "hidden",
+				display: "flex",
+				flexDirection: "column"
+			}
+		},
+		"&-content": {
+			position: "relative",
+			display: "flex",
+			flexDirection: "column",
+			"&-inner": {
+				position: "relative",
+				padding: token.pageContainerPadding,
+				margin: token.pageContainerMargin,
+				display: "flex",
+				flexDirection: "column"
+			}
+		},
+		[`& > ${watermarkCls}`]: {
+			display: "flex",
+			flexDirection: "column"
+		},
+		"&-card": {},
+		"&-footer": {
+			flexShrink: 0,
+			paddingBlock: token.paddingSM,
+			paddingInline: token.paddingLG,
+			background: token.colorBgContainer,
+			borderBlockStart: `1px solid ${token.colorSplit}`
+		},
+		"&-spinning": {
+			position: "absolute",
+			top: 0,
+			left: 0,
+			zIndex: 10,
+			display: "flex",
+			width: "100%",
+			height: "100%",
+			alignItems: "center",
+			justifyContent: "center",
+			borderRadius: token.borderRadiusLG
+		},
+		"&-content-blur": {
+			filter: "blur(2px)",
+			pointerEvents: "none"
+		},
+		"&-content-mask": {
+			opacity: .5,
+			pointerEvents: "none"
+		}
+	} };
+};
+var style_default = proGenStyleHooks("ProPageContainer", (token) => [genPageHeaderStyle(token), genPageContentStyle(token)]);
+//#endregion
+export { style_default as default };