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

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

@@ -0,0 +1,292 @@
+import { unit } from "@antdv-next/cssinjs";
+//#region src/components/Menu/style/inline.ts
+/**
+* Inline 模式样式。
+*
+* 只处理 inline 模式结构、状态和侧边栏 token 映射。
+*/
+const genInlineStyle = (token) => {
+	const { componentCls, antCls } = token;
+	const iconSize = unit(token.menuItemIconSize || token.iconSize || token.fontSize);
+	const collapsedIconSize = unit(token.collapsedIconSize || token.fontSizeLG);
+	const siderMenuItemHeight = token.siderMenuItemHeight || token.itemHeight || token.controlHeight;
+	const siderMenuItemMarginInline = token.siderMenuItemMarginInline ?? token.itemMarginInline ?? token.marginXXS;
+	const siderMenuItemMarginBlock = token.itemMarginBlock ?? token.marginXXS;
+	const siderMenuBasePadding = token.itemPaddingInline ?? token.paddingSM;
+	const siderMenuArrowSize = token.calc(token.fontSize).div(7).mul(5).equal();
+	const siderMenuArrowOffset = token.calc(siderMenuArrowSize).mul(.25).equal();
+	const siderMenuPaddingWithArrow = token.calc(siderMenuArrowSize).add(token.padding).add(token.marginXS).equal();
+	const siderMenuTitleGap = token.iconMarginInlineEnd ?? token.marginSM;
+	const activeBarWidth = token.activeBarWidth ?? 0;
+	const itemWidth = token.itemWidth || `calc(100% - ${unit(token.calc(siderMenuItemMarginInline).mul(2).equal())})`;
+	return {
+		[`${componentCls}-inline-collapsed-tooltip`]: {
+			pointerEvents: "none",
+			[`${componentCls}-icon, ${antCls}-icon`]: { display: "none" }
+		},
+		[`${componentCls}-inline`]: {
+			boxSizing: "border-box",
+			margin: 0,
+			padding: 0,
+			color: token.siderColorTextMenu || token.itemColor,
+			fontSize: token.fontSize,
+			lineHeight: 0,
+			listStyle: "none",
+			overflow: "hidden",
+			background: token.siderColorMenuBackground || token.itemBg || "transparent",
+			outline: "none",
+			transition: `width ${token.motionDurationSlow} cubic-bezier(0.2, 0, 0, 1) 0s`,
+			"ul, ol": {
+				margin: 0,
+				padding: 0,
+				listStyle: "none"
+			},
+			[`&${componentCls}-sub`]: {
+				/**
+				* overflow: hidden 创建 BFC，阻止父子 margin 折叠。
+				* 确保动画期间 scrollHeight 与最终渲染高度一致，
+				* 避免 afterEnter 清除 maxHeight 时产生高度跳变（抖动）。
+				*/
+				overflow: "hidden",
+				background: token.siderColorMenuBackground || token.subMenuItemBg
+			},
+			[`&${componentCls}-popup-list`]: {
+				minWidth: token.dropdownWidth,
+				maxWidth: token.dropdownWidth,
+				maxHeight: `calc(100vh - ${unit(token.calc(token.controlHeightLG).mul(2.5).equal())})`,
+				padding: 0,
+				overflow: "hidden auto",
+				borderInlineEnd: 0,
+				background: token.siderColorBgMenuItemCollapsedElevated || token.popupBg
+			},
+			[`${componentCls}-node`]: {
+				margin: 0,
+				padding: 0,
+				listStyle: "none"
+			},
+			[`${componentCls}-item`]: {
+				position: "relative",
+				display: "flex",
+				alignItems: "center",
+				boxSizing: "border-box",
+				width: itemWidth,
+				height: siderMenuItemHeight,
+				minHeight: siderMenuItemHeight,
+				marginBlock: siderMenuItemMarginBlock,
+				marginInline: siderMenuItemMarginInline,
+				paddingInlineStart: `calc(${unit(siderMenuBasePadding)} + var(--pro-menu-level, 0) * var(--pro-menu-indent, 24px))`,
+				paddingInlineEnd: siderMenuBasePadding,
+				overflow: "hidden",
+				color: token.siderColorTextMenu || token.itemColor,
+				lineHeight: unit(siderMenuItemHeight),
+				whiteSpace: "nowrap",
+				textOverflow: "ellipsis",
+				cursor: "pointer",
+				borderRadius: token.siderBorderRadius ?? token.itemBorderRadius,
+				transition: [
+					`border-color ${token.motionDurationSlow}`,
+					`color ${token.motionDurationSlow}`,
+					`background-color ${token.motionDurationSlow}`,
+					`padding ${token.motionDurationFast} ${token.motionEaseOut}`
+				].join(","),
+				"&::after": {
+					position: "absolute",
+					insetBlock: 0,
+					insetInlineEnd: 0,
+					borderInlineEnd: `${unit(activeBarWidth)} solid ${token.itemSelectedColor}`,
+					transform: "scaleY(0.0001)",
+					opacity: 0,
+					transition: ["transform", "opacity"].map((prop) => `${prop} ${token.motionDurationMid} ${token.motionEaseOut}`).join(","),
+					content: "\"\""
+				},
+				[`&:not(${componentCls}-item-selected):not(${componentCls}-item-active):hover`]: {
+					color: token.siderColorTextMenuItemHover || token.itemHoverColor,
+					backgroundColor: token.siderColorBgMenuItemHover || token.itemHoverBg
+				},
+				[`&:not(${componentCls}-item-selected):not(${componentCls}-item-active):active`]: { backgroundColor: token.siderColorBgMenuItemActive || token.itemActiveBg },
+				"&:focus-visible": {
+					outline: `${unit(token.lineWidthFocus)} solid ${token.colorPrimaryBorder}`,
+					outlineOffset: 1
+				},
+				[`&${componentCls}-item-active`]: { color: token.siderColorTextSubMenuSelected || token.siderColorTextMenuSelected || token.subMenuItemSelectedColor },
+				[`&${componentCls}-item-selected`]: {
+					color: token.siderColorTextMenuSelected || token.itemSelectedColor,
+					backgroundColor: token.siderColorBgMenuItemSelected || token.itemSelectedBg,
+					"&::after": {
+						transform: "scaleY(1)",
+						opacity: 1,
+						transition: ["transform", "opacity"].map((prop) => `${prop} ${token.motionDurationMid} ${token.motionEaseInOut}`).join(",")
+					}
+				},
+				[`&${componentCls}-item-disabled`]: {
+					color: `${token.itemDisabledColor || token.colorTextDisabled} !important`,
+					background: "none !important",
+					cursor: "not-allowed",
+					"&::after": { borderColor: "transparent !important" }
+				},
+				[`&${componentCls}-item-collapsed`]: {
+					justifyContent: "center",
+					paddingInline: `calc(50% - ${iconSize} / 2 - ${unit(siderMenuItemMarginInline)})`,
+					textOverflow: "clip"
+				},
+				"> *": { flex: "none" }
+			},
+			[`${componentCls}-submenu-title`]: {
+				paddingInlineEnd: siderMenuPaddingWithArrow,
+				[`&:not(${componentCls}-item-selected):not(${componentCls}-item-active):not(${componentCls}-item-disabled):hover`]: {
+					color: token.siderColorTextMenuItemHover || token.itemHoverColor,
+					backgroundColor: token.siderColorBgMenuItemHover || token.itemHoverBg
+				},
+				[`&:not(${componentCls}-item-selected):not(${componentCls}-item-active):not(${componentCls}-item-disabled):active`]: { backgroundColor: token.siderColorBgMenuItemActive || token.itemActiveBg }
+			},
+			[`${componentCls}-submenu-active > ${componentCls}-submenu-title`]: { color: token.siderColorTextSubMenuSelected || token.siderColorTextMenuSelected || token.subMenuItemSelectedColor },
+			[`${componentCls}-icon`]: {
+				display: "inline-flex",
+				flex: "none",
+				alignItems: "center",
+				justifyContent: "center",
+				minWidth: iconSize,
+				height: iconSize,
+				marginInlineEnd: siderMenuTitleGap,
+				color: "currentcolor",
+				fontSize: iconSize,
+				lineHeight: iconSize,
+				transition: [
+					`font-size ${token.motionDurationMid} ${token.motionEaseOut}`,
+					`margin ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+					`color ${token.motionDurationSlow}`
+				].join(","),
+				img: {
+					width: iconSize,
+					height: iconSize,
+					objectFit: "contain"
+				}
+			},
+			[`${componentCls}-item-collapsed ${componentCls}-icon`]: {
+				marginInlineEnd: 0,
+				fontSize: collapsedIconSize
+			},
+			[`${componentCls}-title`]: {
+				flex: "auto",
+				minWidth: 0,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap",
+				transition: [
+					`opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`,
+					`margin ${token.motionDurationSlow}`,
+					`color ${token.motionDurationSlow}`
+				].join(",")
+			},
+			[`${componentCls}-extra`]: {
+				flex: "none",
+				marginInlineStart: "auto",
+				paddingInlineStart: token.padding,
+				color: token.siderColorTextMenuSecondary || token.groupTitleColor || token.colorTextDescription
+			},
+			[`${componentCls}-arrow`]: {
+				position: "absolute",
+				top: "50%",
+				insetInlineEnd: token.margin,
+				width: siderMenuArrowSize,
+				color: "currentcolor",
+				transform: "translateY(-50%)",
+				transition: ["transform", "opacity"].map((prop) => `${prop} ${token.motionDurationSlow}`).join(","),
+				"&::before, &::after": {
+					position: "absolute",
+					width: token.calc(siderMenuArrowSize).mul(.6).equal(),
+					height: token.calc(siderMenuArrowSize).mul(.15).equal(),
+					backgroundColor: "currentcolor",
+					borderRadius: token.borderRadius,
+					transition: [
+						"background-color",
+						"transform",
+						"top",
+						"color"
+					].map((prop) => `${prop} ${token.motionDurationSlow} ${token.motionEaseInOut}`).join(","),
+					content: "\"\""
+				},
+				"&::before": { transform: `rotate(-45deg) translateX(${unit(siderMenuArrowOffset)})` },
+				"&::after": { transform: `rotate(45deg) translateX(${unit(token.calc(siderMenuArrowOffset).mul(-1).equal())})` }
+			},
+			[`${componentCls}-item-open ${componentCls}-arrow`]: {
+				transform: `translateY(${unit(token.calc(siderMenuArrowSize).mul(.2).mul(-1).equal())})`,
+				"&::before": { transform: `rotate(45deg) translateX(${unit(siderMenuArrowOffset)})` },
+				"&::after": { transform: `rotate(-45deg) translateX(${unit(token.calc(siderMenuArrowOffset).mul(-1).equal())})` }
+			},
+			[`${componentCls}-submenu-title-popup ${componentCls}-arrow`]: {
+				transform: "translateY(-50%)",
+				"&::before": { transform: `rotate(45deg) translateY(${unit(token.calc(siderMenuArrowOffset).mul(-1).equal())})` },
+				"&::after": { transform: `rotate(-45deg) translateY(${unit(siderMenuArrowOffset)})` }
+			},
+			[`${componentCls}-group-title`]: {
+				boxSizing: "border-box",
+				paddingBlock: token.paddingXXS,
+				paddingInlineStart: `calc(${unit(siderMenuBasePadding)} + var(--pro-menu-level, 0) * var(--pro-menu-indent, 24px))`,
+				paddingInlineEnd: token.padding,
+				color: token.siderColorTextMenuTitle || token.groupTitleColor || token.colorTextLabel,
+				fontSize: token.groupTitleFontSize || token.fontSizeSM,
+				lineHeight: token.groupTitleLineHeight || token.lineHeightSM
+			},
+			[`${componentCls}-divider`]: {
+				overflow: "hidden",
+				lineHeight: 0,
+				borderColor: token.colorSplit,
+				borderStyle: token.lineType,
+				borderWidth: 0,
+				borderTopWidth: token.lineWidth,
+				marginBlock: token.lineWidth,
+				marginInline: token.marginSM,
+				padding: 0
+			}
+		},
+		[`${componentCls}-inline-popover${antCls}-popover`]: {
+			borderRadius: token.borderRadiusLG,
+			boxShadow: "none",
+			transformOrigin: "0 0",
+			zIndex: token.zIndexPopup,
+			[`&${componentCls}-submenu-placement-rightTop`]: { paddingInlineStart: token.paddingXS },
+			[`&${componentCls}-submenu-placement-nested`]: { paddingInlineStart: token.marginXXS },
+			[`${antCls}-popover-container`]: {
+				padding: 0,
+				background: "transparent",
+				borderRadius: token.borderRadiusLG,
+				boxShadow: "none"
+			},
+			[`${antCls}-popover-content`]: {
+				padding: 0,
+				background: "transparent"
+			},
+			[`${componentCls}-popover-content,${componentCls}-popover-container`]: {
+				padding: 0,
+				background: "transparent"
+			},
+			[`${componentCls}-submenu-popup`]: {
+				position: "relative",
+				borderRadius: token.borderRadiusLG,
+				background: "transparent",
+				"&::before": {
+					position: "absolute",
+					inset: 0,
+					zIndex: -1,
+					width: "100%",
+					height: "100%",
+					opacity: 0,
+					content: "\"\""
+				},
+				[`> ${componentCls}`]: {
+					borderRadius: token.borderRadiusLG,
+					boxShadow: token.boxShadowSecondary,
+					backgroundColor: token.siderColorBgMenuItemCollapsedElevated || token.popupBg
+				}
+			},
+			[`${componentCls}-popup-list ${componentCls}-item, ${componentCls}-popup-list ${componentCls}-submenu-title`]: { borderRadius: token.subMenuItemBorderRadius }
+		},
+		[`${componentCls}-collapse-enter-active, ${componentCls}-collapse-leave-active`]: {
+			overflow: "hidden",
+			transition: `max-height ${token.motionDurationMid} ${token.motionEaseInOut}`
+		}
+	};
+};
+//#endregion
+export { genInlineStyle as default };

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

@@ -1,39 +1,33 @@
-import { DefaultRender } from "../../types/SlotsTypings.js";
-import * as vue46 from "vue";
-import { PropType } from "vue";
-import * as ant_design_vue_es__util_type2 from "ant-design-vue/es/_util/type";
+import { BreadcrumbItemType, LayoutBreadcrumbConfig, LayoutBreadcrumbSlotProps, LayoutMenuRoute, PageContainerClassNamesType, PageContainerStylesType } from "../../interface.js";
+import { SlotsType } from "vue";
 
 //#region src/components/PageContainer/PageHeader.d.ts
-declare const _default: vue46.DefineComponent<vue46.ExtractPropTypes<{
-  close: {
-    type: PropType<boolean>;
-    default: any;
-  };
-  style: {
-    type: PropType<vue46.CSSProperties>;
-    default: () => any;
-  };
-  content: {
-    type: PropType<DefaultRender>;
-    default: () => any;
-  };
-}>, () => ant_design_vue_es__util_type2.VueNode, {}, {}, {}, vue46.ComponentOptionsMixin, vue46.ComponentOptionsMixin, {}, string, vue46.PublicProps, Readonly<vue46.ExtractPropTypes<{
-  close: {
-    type: PropType<boolean>;
-    default: any;
-  };
-  style: {
-    type: PropType<vue46.CSSProperties>;
-    default: () => any;
-  };
-  content: {
-    type: PropType<DefaultRender>;
-    default: () => any;
-  };
-}>> & Readonly<{}>, {
-  content: DefaultRender;
-  style: vue46.CSSProperties;
-  close: boolean;
-}, {}, {}, {}, string, vue46.ComponentProvideOptions, true, {}, any>;
+interface PageHeaderProps {
+  /** PageContainer 传入的 prefixCls，用于生成 class 名 */
+  prefixCls: string;
+  /** 标题 */
+  title?: string;
+  /** 面包屑配置 */
+  breadcrumbConfig: LayoutBreadcrumbConfig | null;
+  /** 面包屑数据 */
+  breadcrumbItems: BreadcrumbItemType[];
+  breadcrumbRoutes: LayoutMenuRoute[];
+  /** 语义样式 */
+  proStyles?: PageContainerStylesType;
+  proClasses?: PageContainerClassNamesType;
+}
+interface PageHeaderSlots {
+  headerContent?: () => any;
+  extra?: () => any;
+  breadcrumb?: (props: LayoutBreadcrumbSlotProps) => any;
+}
+/**
+ * PageHeader —— PageContainer 内部的页头子组件。
+ * 负责渲染：面包屑行 + 标题行（标题 + headerContent + extra）+ 全屏关闭按钮。
+ * 所有渲染所需数据通过 props 传入，不自行读取 layout context。
+ */
+declare const PageHeader: import("vue").DefineSetupFnComponent<PageHeaderProps, Record<string, never>, SlotsType<PageHeaderSlots>, PageHeaderProps & {
+  [x: `on${Capitalize<string>}`]: (...args: unknown[]) => any;
+}, import("vue").PublicProps>;
 //#endregion
-export { _default as default };
+export { PageHeader as default };

package/dist/components/PageContainer/PageHeader.js

@@ -1,53 +1,87 @@
-import { useProLayoutContext } from "../../Context/index.js";
-import BreadCrumb_default from "../BreadCrumb/index.js";
-import { pageContainerProps } from "./props.js";
-import { ProLayoutPageHeader } from "./style/pageHeader.js";
+import Breadcrumb from "../Breadcrumb/index.js";
 import { createVNode, defineComponent } from "vue";
-import { useProStyle } from "@gx-design-vue/pro-provider";
-import { classNames, getPrefixCls } from "@gx-design-vue/pro-utils";
-import { CloseOutlined } from "@ant-design/icons-vue";
-
+import { classNames } from "@gx-design-vue/pro-utils";
 //#region src/components/PageContainer/PageHeader.tsx
-var PageHeader_default = /* @__PURE__ */ defineComponent({
-	name: "ProPageHeader",
+/**
+* PageHeader —— PageContainer 内部的页头子组件。
+* 负责渲染：面包屑行 + 标题行（标题 + headerContent + extra）+ 全屏关闭按钮。
+* 所有渲染所需数据通过 props 传入，不自行读取 layout context。
+*/
+const PageHeader = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	function renderBreadcrumb() {
+		if (!props.breadcrumbConfig) return null;
+		const items = props.breadcrumbItems;
+		const routes = props.breadcrumbRoutes;
+		const prefixCls = props.prefixCls;
+		if (slots.breadcrumb) return createVNode("div", {
+			"class": classNames(`${prefixCls}-breadcrumb`, props.proClasses?.breadcrumb),
+			"style": props.proStyles?.breadcrumb
+		}, [slots.breadcrumb?.({
+			items,
+			routes
+		})]);
+		if (routes.length === 0) return null;
+		return createVNode("div", {
+			"class": classNames(`${prefixCls}-breadcrumb`, props.proClasses?.breadcrumb),
+			"style": props.proStyles?.breadcrumb
+		}, [createVNode(Breadcrumb, null, null)]);
+	}
+	return () => {
+		const breadcrumbNode = (!props.breadcrumbConfig ? void 0 : props.breadcrumbConfig.placement) === "pageHeader" ? renderBreadcrumb() : null;
+		const headerContentNode = slots.headerContent?.();
+		const extraNode = slots.extra?.();
+		const hasTop = breadcrumbNode;
+		const hasHeading = props.title || headerContentNode || extraNode;
+		if (!hasTop && !hasHeading) return null;
+		const prefixCls = props.prefixCls;
+		return createVNode("div", {
+			"class": classNames(`${prefixCls}-header`, props.proClasses?.header),
+			"style": props.proStyles?.header
+		}, [hasTop && createVNode("div", { "class": `${prefixCls}-header-top` }, [breadcrumbNode]), hasHeading && createVNode("div", { "class": `${prefixCls}-header-heading` }, [
+			props.title && createVNode("h4", {
+				"class": classNames(`${prefixCls}-title`, props.proClasses?.title),
+				"style": props.proStyles?.title
+			}, [props.title]),
+			headerContentNode,
+			extraNode && createVNode("div", {
+				"class": classNames(`${prefixCls}-extra`, props.proClasses?.extra),
+				"style": props.proStyles?.extra
+			}, [extraNode])
+		])]);
+	};
+}, {
 	props: {
-		close: {
-			type: Boolean,
-			default: void 0
+		prefixCls: {
+			type: String,
+			required: true
+		},
+		title: {
+			type: String,
+			required: false
+		},
+		breadcrumbConfig: {
+			type: [Object, null],
+			required: true
+		},
+		breadcrumbItems: {
+			type: Array,
+			required: true
 		},
-		style: pageContainerProps.pageHeaderStyle,
-		content: pageContainerProps.pageHeaderContentRender
+		breadcrumbRoutes: {
+			type: Array,
+			required: true
+		},
+		proStyles: {
+			type: Object,
+			required: false
+		},
+		proClasses: {
+			type: Object,
+			required: false
+		}
 	},
-	setup(props) {
-		const layoutContext = useProLayoutContext();
-		const baseClassName = (layoutContext?.getPrefixCls || getPrefixCls)({
-			isPor: true,
-			suffixCls: "page-header"
-		});
-		const { wrapSSR, hashId } = useProStyle("ProPageHeader", [ProLayoutPageHeader], baseClassName);
-		return () => {
-			const hasBreadcrumb = layoutContext?.breadcrumb?.value?.position === "pageHeader";
-			return wrapSSR(createVNode("div", {
-				"class": [
-					`${baseClassName}`,
-					hashId.value,
-					hasBreadcrumb && `${baseClassName}-has-breadcrumb`
-				],
-				"style": props.style
-			}, [layoutContext?.breadcrumb?.value?.position === "pageHeader" && layoutContext?.breadcrumb?.value?.visible && createVNode("div", { "class": classNames(`${baseClassName}-top`, hashId.value) }, [createVNode(BreadCrumb_default, null, null), layoutContext?.contentFullScreen?.value && props.close && createVNode("div", {
-				"class": [`${baseClassName}-close`, hashId.value],
-				"onClick": () => {
-					if (layoutContext) layoutContext.contentFullScreen.value = false;
-				}
-			}, [createVNode(CloseOutlined, { "class": [`${baseClassName}-close-x`, hashId.value] }, null)])]), props.content && createVNode("div", { "class": [`${baseClassName}-content`, hashId.value] }, [props.content, layoutContext?.contentFullScreen?.value && props.close && layoutContext?.breadcrumb?.value?.position !== "pageHeader" && createVNode("div", {
-				"class": [`${baseClassName}-close`, hashId.value],
-				"onClick": () => {
-					if (layoutContext) layoutContext.contentFullScreen.value = false;
-				}
-			}, [createVNode(CloseOutlined, { "class": [`${baseClassName}-close-x`, hashId.value] }, null)])])]));
-		};
-	}
+	name: "ProPageHeader",
+	inheritAttrs: false
 });
-
 //#endregion
-export { PageHeader_default as default };
+export { PageHeader as default };