@antdv-vue/pro-layout 0.0.0-stage → 2.0.3

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

@@ -0,0 +1,146 @@
+import { PureSettings } from "../../defaultSettings.js";
+import { AppItemProps, AppListProps } from "../AppsLogoComponents/typing.js";
+import { MenuDataItem, MessageDescriptor } from "../../typing.js";
+import { AvatarPropsType } from "./ActionsContent.js";
+import { PrivateSiderMenuProps } from "../SiderMenu/SiderMenu.js";
+import { ActionsRender, AppListRender, HeaderContentRender, HeaderTitleRender, MenuHeaderRender, MenuRender, SlotsRenderType } from "../../RenderTypings.js";
+import * as _$vue from "vue";
+import { Events, ShallowRef } from "vue";
+import { ProTokenType } from "@antdv-vue/pro-provider";
+import { MenuProps } from "antdv-next";
+import { VueNode } from "antdv-next/dist/_util/type";
+import { CustomSlotsType } from "@v-c/util/dist/type";
+
+//#region src/components/GlobalHeader/index.d.ts
+type GlobalHeaderProps = {
+  collapsed?: boolean;
+  onCollapse?: (collapsed: boolean) => void;
+  isMobile?: boolean; /** 品牌logo的标识 */
+  logo?: VueNode;
+  /**
+   * @name menuRender 虽然叫menuRender，但是其实是整个 SiderMenu 面板的渲染函数
+   *
+   * @example 收起时完成不展示菜单 menuRender={(props,defaultDom)=> props.collapsed ? null : defaultDom}
+   * @example 不展示菜单 menuRender={false}
+   */
+  menuRender?: MenuRender | false;
+  /**
+   * @name menuProps 要给菜单的props, 参考ant-menu的属性
+   */
+  menuProps?: MenuProps;
+  prefixCls?: string; /** 相关品牌的列表 */
+  appList?: AppListProps; /** 相关品牌的列表项 点击事件，当事件存在时，appList 内配置的 url 不在自动跳转 */
+  itemClick?: (item: AppItemProps, popoverRef: ShallowRef<HTMLSpanElement | null>) => void;
+  menuData?: MenuDataItem[];
+  /**
+   * @name onMenuHeaderClick 菜单顶部logo 和 title 区域的点击事件
+   *
+   * @example 点击跳转到首页 onMenuHeaderClick={()=>{ router.push('/') }}
+   */
+  onMenuHeaderClick?: (e: Events['onClick']) => void;
+  menuHeaderRender?: MenuHeaderRender | false;
+  headerTitleRender?: HeaderTitleRender | false;
+  token?: ProTokenType['layout'];
+  /**
+   * @name headerContentRender 顶部区域的渲染，包含内部的 menu
+   *
+   * @example headerContentRender={(props) => <div>管理控制台 </div>}
+   */
+  headerContentRender?: HeaderContentRender | false;
+  /**
+   * @name actionsRender Layout的操作功能列表，不同的 layout 会放到不同的位置
+   */
+  actionsRender?: ActionsRender | false; /** 头像的设置 */
+  avatarProps?: AvatarPropsType;
+  formatMessage?: (message: MessageDescriptor) => string | undefined; /** 相关品牌的列表自定义渲染 */
+  appListRender?: AppListRender | false;
+} & Partial<PureSettings>;
+declare const GlobalHeader: _$vue.DefineSetupFnComponent<{
+  collapsed?: boolean;
+  onCollapse?: (collapsed: boolean) => void;
+  isMobile?: boolean; /** 品牌logo的标识 */
+  logo?: VueNode;
+  /**
+   * @name menuRender 虽然叫menuRender，但是其实是整个 SiderMenu 面板的渲染函数
+   *
+   * @example 收起时完成不展示菜单 menuRender={(props,defaultDom)=> props.collapsed ? null : defaultDom}
+   * @example 不展示菜单 menuRender={false}
+   */
+  menuRender?: MenuRender | false;
+  /**
+   * @name menuProps 要给菜单的props, 参考ant-menu的属性
+   */
+  menuProps?: MenuProps;
+  prefixCls?: string; /** 相关品牌的列表 */
+  appList?: AppListProps; /** 相关品牌的列表项 点击事件，当事件存在时，appList 内配置的 url 不在自动跳转 */
+  itemClick?: (item: AppItemProps, popoverRef: ShallowRef<HTMLSpanElement | null>) => void;
+  menuData?: MenuDataItem[];
+  /**
+   * @name onMenuHeaderClick 菜单顶部logo 和 title 区域的点击事件
+   *
+   * @example 点击跳转到首页 onMenuHeaderClick={()=>{ router.push('/') }}
+   */
+  onMenuHeaderClick?: (e: Events["onClick"]) => void;
+  menuHeaderRender?: MenuHeaderRender | false;
+  headerTitleRender?: HeaderTitleRender | false;
+  token?: ProTokenType["layout"];
+  /**
+   * @name headerContentRender 顶部区域的渲染，包含内部的 menu
+   *
+   * @example headerContentRender={(props) => <div>管理控制台 </div>}
+   */
+  headerContentRender?: HeaderContentRender | false;
+  /**
+   * @name actionsRender Layout的操作功能列表，不同的 layout 会放到不同的位置
+   */
+  actionsRender?: ActionsRender | false; /** 头像的设置 */
+  avatarProps?: AvatarPropsType;
+  formatMessage?: (message: MessageDescriptor) => string | undefined; /** 相关品牌的列表自定义渲染 */
+  appListRender?: AppListRender | false;
+} & Partial<PureSettings> & PrivateSiderMenuProps, {}, CustomSlotsType<Pick<SlotsRenderType, "appListRender" | "menuHeaderRender" | "actionsRender" | "menuRender" | "headerTitleRender"> & {
+  default: () => VueNode[];
+}>, {
+  collapsed?: boolean;
+  onCollapse?: (collapsed: boolean) => void;
+  isMobile?: boolean; /** 品牌logo的标识 */
+  logo?: VueNode;
+  /**
+   * @name menuRender 虽然叫menuRender，但是其实是整个 SiderMenu 面板的渲染函数
+   *
+   * @example 收起时完成不展示菜单 menuRender={(props,defaultDom)=> props.collapsed ? null : defaultDom}
+   * @example 不展示菜单 menuRender={false}
+   */
+  menuRender?: MenuRender | false;
+  /**
+   * @name menuProps 要给菜单的props, 参考ant-menu的属性
+   */
+  menuProps?: MenuProps;
+  prefixCls?: string; /** 相关品牌的列表 */
+  appList?: AppListProps; /** 相关品牌的列表项 点击事件，当事件存在时，appList 内配置的 url 不在自动跳转 */
+  itemClick?: (item: AppItemProps, popoverRef: ShallowRef<HTMLSpanElement | null>) => void;
+  menuData?: MenuDataItem[];
+  /**
+   * @name onMenuHeaderClick 菜单顶部logo 和 title 区域的点击事件
+   *
+   * @example 点击跳转到首页 onMenuHeaderClick={()=>{ router.push('/') }}
+   */
+  onMenuHeaderClick?: (e: Events["onClick"]) => void;
+  menuHeaderRender?: MenuHeaderRender | false;
+  headerTitleRender?: HeaderTitleRender | false;
+  token?: ProTokenType["layout"];
+  /**
+   * @name headerContentRender 顶部区域的渲染，包含内部的 menu
+   *
+   * @example headerContentRender={(props) => <div>管理控制台 </div>}
+   */
+  headerContentRender?: HeaderContentRender | false;
+  /**
+   * @name actionsRender Layout的操作功能列表，不同的 layout 会放到不同的位置
+   */
+  actionsRender?: ActionsRender | false; /** 头像的设置 */
+  avatarProps?: AvatarPropsType;
+  formatMessage?: (message: MessageDescriptor) => string | undefined; /** 相关品牌的列表自定义渲染 */
+  appListRender?: AppListRender | false;
+} & Partial<PureSettings> & PrivateSiderMenuProps & {}, _$vue.PublicProps>;
+//#endregion
+export { GlobalHeaderProps, GlobalHeader as default };

package/dist/components/GlobalHeader/index.js

@@ -0,0 +1,289 @@
+import { clearMenuItem } from "../../utils/index.js";
+import defaultSettings from "../../defaultSettings.js";
+import { defaultRenderLogo } from "../AppsLogoComponents/DefaultContent.js";
+import AppsLogoComponents from "../AppsLogoComponents/index.js";
+import CollapsedIcon from "../CollapsedIcon/index.js";
+import { renderLogoAndTitle } from "../SiderMenu/SiderMenu.js";
+import ActionsContent from "./ActionsContent.js";
+import TopNavHeader from "../TopNavHeader/index.js";
+import style_default from "./style/index.js";
+import { Fragment, computed, createVNode, defineComponent, mergeDefaults, mergeProps } from "vue";
+import { useProConfig } from "@antdv-vue/pro-provider";
+import { getSlot } from "@antdv-vue/pro-utils";
+import { classNames } from "@v-c/util";
+import { useConfig } from "antdv-next/config-provider/context";
+//#region src/components/GlobalHeader/index.tsx
+function renderLogo(menuHeaderRender, logoDom, props) {
+	if (menuHeaderRender === false) return null;
+	if (menuHeaderRender) return menuHeaderRender({
+		logo: logoDom,
+		title: null,
+		props
+	});
+	return logoDom;
+}
+const GlobalHeader = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const config = useConfig();
+	const proProvide = useProConfig();
+	const baseClassName = computed(() => `${props.prefixCls || config.value.getPrefixCls("pro")}-global-header`);
+	const [hashId, cssVarCls] = style_default(baseClassName);
+	const showCollapsed = computed(() => {
+		const { matchMenuKeys = [] } = props;
+		let { menuData = [] } = props;
+		if (matchMenuKeys.length) menuData = menuData?.find((item) => item.key === matchMenuKeys[0])?.children || [];
+		else menuData = [];
+		if (!menuData.length) return false;
+		return true;
+	});
+	return () => {
+		const { navTheme, layout, isMobile, onCollapse, avatarProps, onMenuHeaderClick, logo, menuData = [], splitMenus, collapsed } = props;
+		const menuHeaderRender = getSlot(slots, props, "menuHeaderRender");
+		const actionsRender = getSlot(slots, props, "actionsRender");
+		const headerTitleRender = getSlot(slots, props, "headerTitleRender");
+		const menuRender = getSlot(slots, props, "menuRender");
+		const appListRender = getSlot(slots, props, "appListRender");
+		if (layout === "mix" && !isMobile && splitMenus) return createVNode(TopNavHeader, mergeProps(attrs, props, {
+			"menuHeaderRender": menuHeaderRender,
+			"actionsRender": actionsRender,
+			"headerTitleRender": headerTitleRender,
+			"menuRender": menuRender,
+			"appListRender": appListRender,
+			"mode": "horizontal",
+			"splitMenus": false,
+			"menuData": clearMenuItem(menuData.map((item) => ({
+				...item,
+				children: void 0
+			})))
+		}), null);
+		const logoClassNames = classNames(`${baseClassName.value}-logo`, hashId?.value, cssVarCls?.value, {
+			[`${baseClassName.value}-logo-rtl`]: config.value.direction === "rtl",
+			[`${baseClassName.value}-logo-mix`]: layout === "mix",
+			[`${baseClassName.value}-logo-mobile`]: isMobile
+		});
+		const logoDom = createVNode("span", {
+			"class": logoClassNames,
+			"key": "logo"
+		}, [createVNode("a", null, [defaultRenderLogo(logo)])]);
+		return createVNode("div", { "class": classNames(attrs.class, baseClassName.value, hashId?.value, cssVarCls?.value, {
+			[`${baseClassName.value}-light`]: navTheme === "light" || ["side", "left"].includes(layout) || isMobile,
+			[`${baseClassName.value}-dark`]: navTheme === "dark" && !["side", "left"].includes(layout) && !isMobile,
+			[`${baseClassName.value}-realDark`]: navTheme === "realDark" && !["top", "mix"].includes(layout)
+		}) }, [
+			isMobile && renderLogo(menuHeaderRender, logoDom, props),
+			layout === "mix" && !isMobile && menuHeaderRender !== false && createVNode(Fragment, null, [createVNode(AppsLogoComponents, mergeProps(props, { "appListRender": appListRender }), null), createVNode("div", {
+				"class": logoClassNames,
+				"onClick": onMenuHeaderClick
+			}, [renderLogoAndTitle({
+				...props,
+				headerTitleRender,
+				menuHeaderRender,
+				collapsed: false
+			}, "headerTitleRender")])]),
+			(isMobile || layout === "side" || layout === "left" && showCollapsed.value) && menuRender !== false ? createVNode("span", {
+				"class": classNames(`${baseClassName.value}-collapsed-button`, hashId?.value, cssVarCls?.value),
+				"style": { marginInlineStart: `${proProvide.value.token.marginXS}px` },
+				"onClick": () => {
+					onCollapse?.(!collapsed);
+				}
+			}, [createVNode(CollapsedIcon, {
+				"collapsed": collapsed,
+				"tabIndex": -1
+			}, null)]) : null,
+			createVNode("div", { "style": { flex: 1 } }, [slots.default?.()]),
+			(actionsRender || avatarProps) && createVNode(ActionsContent, mergeProps(props, {
+				"actionsRender": actionsRender,
+				"prefixCls": baseClassName.value
+			}), null)
+		]);
+	};
+}, {
+	props: /* @__PURE__ */ mergeDefaults({
+		collapsed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		onCollapse: {
+			type: Function,
+			required: false
+		},
+		isMobile: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		logo: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		menuRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		menuProps: {
+			type: Object,
+			required: false
+		},
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		appList: {
+			type: Array,
+			required: false
+		},
+		itemClick: {
+			type: Function,
+			required: false
+		},
+		menuData: {
+			type: Array,
+			required: false
+		},
+		onMenuHeaderClick: {
+			type: Function,
+			required: false
+		},
+		menuHeaderRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		headerTitleRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		token: {
+			type: Object,
+			required: false
+		},
+		headerContentRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		actionsRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		avatarProps: {
+			type: [Object, Boolean],
+			required: false,
+			default: void 0
+		},
+		formatMessage: {
+			type: Function,
+			required: false
+		},
+		appListRender: {
+			type: [Function, Boolean],
+			required: false,
+			default: void 0
+		},
+		navTheme: {
+			type: String,
+			required: false
+		},
+		layout: {
+			type: String,
+			required: false
+		},
+		contentWidth: {
+			type: String,
+			required: false
+		},
+		compact: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		fixedHeader: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		fixedSiderbar: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		menu: {
+			type: Object,
+			required: false
+		},
+		title: {
+			type: [String, Boolean],
+			required: false,
+			default: void 0
+		},
+		iconfontUrl: {
+			type: String,
+			required: false
+		},
+		colorPrimary: {
+			type: String,
+			required: false
+		},
+		colorWeak: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		splitMenus: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		suppressSiderWhenMenuEmpty: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		siderMenuType: {
+			type: String,
+			required: false
+		},
+		fixedMultiTab: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		multiTab: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		matchMenuKeys: {
+			type: Array,
+			required: false
+		},
+		originCollapsed: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		menuRenderType: {
+			type: String,
+			required: false
+		},
+		stylish: {
+			type: Function,
+			required: false
+		}
+	}, defaultSettings),
+	name: "GlobalHeader",
+	inheritAttrs: false
+});
+//#endregion
+export { GlobalHeader as default };

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

@@ -0,0 +1,8 @@
+import * as _$vue from "vue";
+import { ProAliasCssVarToken } from "@antdv-vue/pro-provider";
+
+//#region src/components/GlobalHeader/style/index.d.ts
+interface GlobalHeaderToken extends ProAliasCssVarToken {}
+declare const _default: (prefixCls: _$vue.Ref<string>, rootCls?: _$vue.Ref<string | undefined>) => readonly [_$vue.Ref<string, string>, _$vue.ComputedRef<string | undefined>];
+//#endregion
+export { GlobalHeaderToken, _default as default };

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

@@ -0,0 +1,62 @@
+import { useStyle } from "@antdv-vue/pro-provider";
+import { mergeToken } from "@antdv-next/cssinjs";
+//#region src/components/GlobalHeader/style/index.ts
+const genGlobalHeaderStyle = (token) => {
+	return { [token.componentCls]: {
+		position: "relative",
+		display: "flex",
+		alignItems: "center",
+		paddingBlock: 0,
+		paddingInline: 16,
+		height: token.proLayoutHeaderHeightLayoutHeader || 56,
+		boxSizing: "border-box",
+		"&-light": {
+			backgroundColor: token.proLayoutHeaderColorBgHeader || token.colorBgContainer,
+			boxShadow: "0 1px 4px rgba(0,21,41,.08)"
+		},
+		"&-realDark": { boxShadow: "0 1px 4px  rgba(13,13,13, 0.65)" },
+		"&-dark": { [`${token.componentCls}-logo`]: { h1: { color: "rgba(255,255,255,0.85)" } } },
+		"> a": { height: "100%" },
+		[`${token.proComponentsCls}-layout-apps-icon`]: { marginInlineEnd: 16 },
+		"&-collapsed-button": {
+			minHeight: 22,
+			color: token?.proLayoutHeaderColorHeaderTitle,
+			fontSize: 18
+		},
+		"&-logo": {
+			position: "relative",
+			marginInlineEnd: 16,
+			a: {
+				display: "flex",
+				alignItems: "center",
+				height: "100%",
+				minHeight: 22,
+				fontSize: 20
+			},
+			svg: { fontSize: 28 },
+			img: { height: 28 },
+			h1: {
+				marginBlock: 0,
+				marginInlineEnd: 0,
+				marginInlineStart: 12,
+				fontWeight: "600",
+				color: token.proLayoutHeaderColorHeaderTitle || token.colorTextHeading,
+				fontSize: 16,
+				lineHeight: "24px"
+			},
+			"&-mix": {
+				display: "flex",
+				alignItems: "center"
+			}
+		},
+		"&-logo-mobile": {
+			minWidth: 24,
+			marginInlineEnd: 0
+		}
+	} };
+};
+var style_default = useStyle("ProLayoutGlobalHeader", (token) => {
+	return [genGlobalHeaderStyle(mergeToken(token, {}))];
+});
+//#endregion
+export { style_default as default };

package/dist/components/GlobalHeader/style/rightContentStyle.d.ts

@@ -0,0 +1,8 @@
+import * as _$vue from "vue";
+import { ProAliasCssVarToken } from "@antdv-vue/pro-provider";
+
+//#region src/components/GlobalHeader/style/rightContentStyle.d.ts
+interface ProLayoutRightContentToken extends ProAliasCssVarToken {}
+declare const _default: (prefixCls: _$vue.Ref<string>, rootCls?: _$vue.Ref<string | undefined>) => readonly [_$vue.Ref<string, string>, _$vue.ComputedRef<string | undefined>];
+//#endregion
+export { ProLayoutRightContentToken, _default as default };

package/dist/components/GlobalHeader/style/rightContentStyle.js

@@ -0,0 +1,99 @@
+import { useStyle } from "@antdv-vue/pro-provider";
+import { mergeToken } from "@antdv-next/cssinjs";
+//#region src/components/GlobalHeader/style/rightContentStyle.ts
+const genTopNavHeaderStyle = (token) => {
+	return {
+		[`${token.proComponentsCls}-layout-header`]: { [`${token.proComponentsCls}-top-nav-header,${token.proComponentsCls}-global-header`]: { "&-dark": { [token.componentCls]: { "&-header-actions": {
+			"&-item": {
+				color: "rgba(255,255,255,0.65)",
+				"> *": {
+					color: "rgba(255,255,255,0.65)",
+					"&:hover": { color: "rgba(255,255,255, 1)" }
+				}
+			},
+			"&-avatar": {
+				color: "rgba(255,255,255,0.65)",
+				"> span": {
+					color: "rgba(255,255,255,0.65)",
+					"&:hover": {
+						color: "rgba(255,255,255, 1)",
+						backgroundColor: "rgba(255,255,255, 0.03)"
+					}
+				}
+			}
+		} } } } },
+		[`${token.proComponentsCls}-layout-header`]: {
+			[`${token.proComponentsCls}-top-nav-header`]: { "&-actions": { "&-avatar": { paddingInlineEnd: token.padding } } },
+			[`${token.proComponentsCls}-top-nav-header,${token.proComponentsCls}-global-header`]: { "&-dark": { [token.componentCls]: { "&-actions": {
+				"&-item": {
+					color: "rgba(255,255,255,0.65)",
+					"> *": {
+						color: "rgba(255,255,255,0.65)",
+						"&:hover": { color: "rgba(255,255,255, 1)" }
+					}
+				},
+				"&-avatar": {
+					color: "rgba(255,255,255,0.65)",
+					"> span": { color: "rgba(255,255,255,0.65)" }
+				}
+			} } } }
+		},
+		[token.componentCls]: { "&-actions": {
+			display: "flex",
+			height: "100%",
+			alignItems: "center",
+			"&-item": {
+				display: "inline-flex",
+				alignItems: "center",
+				justifyContent: "center",
+				paddingBlock: 0,
+				paddingInline: 2,
+				height: "inherit",
+				lineHeight: "inherit",
+				color: token.proLayoutHeaderColorTextRightActionsItem,
+				fontSize: "16px",
+				cursor: "pointer",
+				borderRadius: token.borderRadius,
+				"> *": {
+					paddingInline: 6,
+					paddingBlock: 6,
+					borderRadius: token.borderRadius,
+					height: "inherit",
+					color: token.proLayoutHeaderColorTextRightActionsItem,
+					cursor: "pointer",
+					display: "flex",
+					alignItems: "center",
+					lineHeight: "100%",
+					"&:hover": { backgroundColor: token.proLayoutHeaderColorBgRightActionsItemHover }
+				}
+			},
+			"&-avatar": {
+				display: "inline-flex",
+				alignItems: "center",
+				justifyContent: "center",
+				height: "inherit",
+				lineHeight: "inherit",
+				paddingInlineStart: token.padding,
+				cursor: "pointer",
+				color: token.proLayoutHeaderColorTextRightActionsItem,
+				"> span": {
+					height: "inherit",
+					color: token.proLayoutHeaderColorTextRightActionsItem,
+					paddingInline: 8,
+					paddingBlock: 8,
+					cursor: "pointer",
+					display: "flex",
+					alignItems: "center",
+					lineHeight: "100%",
+					borderRadius: token.borderRadius,
+					"&:hover": { backgroundColor: token.proLayoutHeaderColorBgRightActionsItemHover }
+				}
+			}
+		} }
+	};
+};
+var rightContentStyle_default = useStyle("ProLayoutRightContent", (token) => {
+	return [genTopNavHeaderStyle(mergeToken(token, {}))];
+});
+//#endregion
+export { rightContentStyle_default as default };

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

@@ -0,0 +1,19 @@
+import { PureSettings } from "../../defaultSettings.js";
+import * as _$vue from "vue";
+import { VueNode } from "@antdv-vue/pro-utils";
+import { CustomSlotsType } from "@v-c/util/dist/type";
+
+//#region src/components/GridContent/index.d.ts
+interface GridContentProps {
+  prefixCls?: string;
+  contentWidth?: PureSettings['contentWidth'];
+}
+/**
+ * This component can support contentWidth so you don't need to calculate the width
+ * contentWidth=Fixed, width will is 1200
+ */
+declare const GridContent: _$vue.DefineSetupFnComponent<GridContentProps, {}, CustomSlotsType<{
+  default: () => VueNode;
+}>, GridContentProps & {}, _$vue.PublicProps>;
+//#endregion
+export { GridContentProps, GridContent as default };

package/dist/components/GridContent/index.js

@@ -0,0 +1,40 @@
+import { useRouteContext } from "../../context/RouteContext.js";
+import style_default from "./style/index.js";
+import { computed, createVNode, defineComponent } from "vue";
+import { classNames } from "@v-c/util";
+import { useConfig } from "antdv-next/config-provider/context";
+//#region src/components/GridContent/index.tsx
+/**
+* This component can support contentWidth so you don't need to calculate the width
+* contentWidth=Fixed, width will is 1200
+*/
+const GridContent = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const routeContext = useRouteContext();
+	const config = useConfig();
+	const prefixCls = computed(() => props.prefixCls || config.value.getPrefixCls("pro"));
+	const contentWidth = computed(() => props.contentWidth || routeContext.value.contentWidth);
+	const baseClassName = computed(() => `${prefixCls.value}-grid-content`);
+	const [hashId, cssVarCls] = style_default(baseClassName);
+	const isWide = computed(() => contentWidth.value === "Fixed" && routeContext.value.layout === "top");
+	return () => {
+		return createVNode("div", {
+			"class": classNames(baseClassName.value, hashId?.value, cssVarCls?.value, attrs.class, { [`${baseClassName.value}-wide`]: isWide.value }),
+			"style": attrs.style
+		}, [createVNode("div", { "class": classNames(`${prefixCls.value}-grid-content-children`, hashId?.value, cssVarCls?.value) }, [slots.default?.()])]);
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		contentWidth: {
+			type: String,
+			required: false
+		}
+	},
+	name: "GridContent",
+	inheritAttrs: false
+});
+//#endregion
+export { GridContent as default };

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

@@ -0,0 +1,8 @@
+import * as _$vue from "vue";
+import { ProAliasCssVarToken } from "@antdv-vue/pro-provider";
+
+//#region src/components/GridContent/style/index.d.ts
+interface GridContentToken extends ProAliasCssVarToken {}
+declare const _default: (prefixCls: _$vue.Ref<string>, rootCls?: _$vue.Ref<string | undefined>) => readonly [_$vue.Ref<string, string>, _$vue.ComputedRef<string | undefined>];
+//#endregion
+export { GridContentToken, _default as default };