@gx-design-vue/pro-layout 0.1.0-alpha.0

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

@@ -0,0 +1,164 @@
+import { BaseMenuProps, ProLayoutMenuFunProps } from "../../types/MenuTypings.js";
+import { CollapsedButtonRender, CollapsedIconRender, DefaultRender, HeaderContentRender, HeaderRender, LogoRender, MenuItemRender, MenuTextRender, RightContentRender, SubMenuItemRender } from "../../types/SlotsTypings.js";
+import { CommonLogoProps } from "../LogoContent/props.js";
+import { HeaderLayoutProps } from "../../types/typings.js";
+import { headerProps } from "./props.js";
+import * as vue321 from "vue";
+import { ExtractPropTypes } from "vue";
+import * as _gx_design_vue_pro_utils18 from "@gx-design-vue/pro-utils";
+import * as ant_design_vue_es__util_type28 from "ant-design-vue/es/_util/type";
+
+//#region src/components/GlobalHeader/DefaultHeader.d.ts
+type DefaultHeaderProps = Partial<ExtractPropTypes<typeof headerProps>>;
+declare const DefaultHeader: vue321.DefineComponent<ExtractPropTypes<{
+  collapsedButtonRender: {
+    type: vue321.PropType<CollapsedButtonRender>;
+    default: () => any;
+  };
+  collapsedIconRender: {
+    type: vue321.PropType<CollapsedIconRender>;
+    default: () => any;
+  };
+  autoHideHeader: vue321.PropType<HeaderLayoutProps["autoHideHeader"]>;
+  headerMainWidth: {
+    type: vue321.PropType<HeaderLayoutProps["headerMainWidth"]>;
+    default: any;
+  };
+  headerRender: {
+    type: vue321.PropType<HeaderRender>;
+    default: () => any;
+  };
+  headerContentRender: {
+    type: vue321.PropType<HeaderContentRender>;
+    default: () => any;
+  };
+  appsLogoComponents: {
+    type: vue321.PropType<DefaultRender>;
+    default: () => any;
+  };
+  extraRightDropdownRender: {
+    type: vue321.PropType<DefaultRender>;
+    default: () => any;
+  };
+  rightContentRender: {
+    type: vue321.PropType<RightContentRender>;
+    default: () => any;
+  };
+  onOpenKeys: {
+    type: vue321.PropType<ProLayoutMenuFunProps["onOpenKeys"]>;
+  };
+  onSelect: {
+    type: vue321.PropType<ProLayoutMenuFunProps["onSelect"]>;
+  };
+  menuItemRender: {
+    type: vue321.PropType<BaseMenuProps["menuItemRender"]>;
+    default: () => any;
+  };
+  menuTextRender: {
+    type: vue321.PropType<BaseMenuProps["menuTextRender"]>;
+    default: () => any;
+  };
+  subMenuItemRender: {
+    type: vue321.PropType<BaseMenuProps["subMenuItemRender"]>;
+    default: () => any;
+  };
+  class: vue321.PropType<string>;
+  style: vue321.PropType<vue321.CSSProperties>;
+  logo: {
+    type: vue321.PropType<CommonLogoProps["logo"]>;
+    default: () => any;
+  };
+  logoStyle: {
+    type: vue321.PropType<CommonLogoProps["logoStyle"]>;
+    default: () => any;
+  };
+  logoRender: {
+    type: vue321.PropType<CommonLogoProps["logoRender"]>;
+    default: () => any;
+  };
+  onLogoClick: vue321.PropType<CommonLogoProps["onLogoClick"]>;
+}>, () => ant_design_vue_es__util_type28.VueNode, {}, {}, {}, vue321.ComponentOptionsMixin, vue321.ComponentOptionsMixin, {}, string, vue321.PublicProps, Readonly<ExtractPropTypes<{
+  collapsedButtonRender: {
+    type: vue321.PropType<CollapsedButtonRender>;
+    default: () => any;
+  };
+  collapsedIconRender: {
+    type: vue321.PropType<CollapsedIconRender>;
+    default: () => any;
+  };
+  autoHideHeader: vue321.PropType<HeaderLayoutProps["autoHideHeader"]>;
+  headerMainWidth: {
+    type: vue321.PropType<HeaderLayoutProps["headerMainWidth"]>;
+    default: any;
+  };
+  headerRender: {
+    type: vue321.PropType<HeaderRender>;
+    default: () => any;
+  };
+  headerContentRender: {
+    type: vue321.PropType<HeaderContentRender>;
+    default: () => any;
+  };
+  appsLogoComponents: {
+    type: vue321.PropType<DefaultRender>;
+    default: () => any;
+  };
+  extraRightDropdownRender: {
+    type: vue321.PropType<DefaultRender>;
+    default: () => any;
+  };
+  rightContentRender: {
+    type: vue321.PropType<RightContentRender>;
+    default: () => any;
+  };
+  onOpenKeys: {
+    type: vue321.PropType<ProLayoutMenuFunProps["onOpenKeys"]>;
+  };
+  onSelect: {
+    type: vue321.PropType<ProLayoutMenuFunProps["onSelect"]>;
+  };
+  menuItemRender: {
+    type: vue321.PropType<BaseMenuProps["menuItemRender"]>;
+    default: () => any;
+  };
+  menuTextRender: {
+    type: vue321.PropType<BaseMenuProps["menuTextRender"]>;
+    default: () => any;
+  };
+  subMenuItemRender: {
+    type: vue321.PropType<BaseMenuProps["subMenuItemRender"]>;
+    default: () => any;
+  };
+  class: vue321.PropType<string>;
+  style: vue321.PropType<vue321.CSSProperties>;
+  logo: {
+    type: vue321.PropType<CommonLogoProps["logo"]>;
+    default: () => any;
+  };
+  logoStyle: {
+    type: vue321.PropType<CommonLogoProps["logoStyle"]>;
+    default: () => any;
+  };
+  logoRender: {
+    type: vue321.PropType<CommonLogoProps["logoRender"]>;
+    default: () => any;
+  };
+  onLogoClick: vue321.PropType<CommonLogoProps["onLogoClick"]>;
+}>> & Readonly<{}>, {
+  logo: _gx_design_vue_pro_utils18.CustomRender;
+  logoStyle: vue321.CSSProperties;
+  logoRender: LogoRender;
+  menuItemRender: MenuItemRender;
+  menuTextRender: MenuTextRender;
+  subMenuItemRender: SubMenuItemRender;
+  headerMainWidth: number;
+  collapsedIconRender: CollapsedIconRender;
+  collapsedButtonRender: CollapsedButtonRender;
+  headerRender: HeaderRender;
+  headerContentRender: HeaderContentRender;
+  appsLogoComponents: DefaultRender;
+  extraRightDropdownRender: DefaultRender;
+  rightContentRender: RightContentRender;
+}, {}, {}, {}, string, vue321.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { DefaultHeaderProps, DefaultHeader as default };

package/dist/components/GlobalHeader/DefaultHeader.js

@@ -0,0 +1,149 @@
+import { useProLayoutContext } from "../../Context/index.js";
+import { commonCollapsedProps } from "../../props/collapsedProps.js";
+import { useProLayoutMenuContext } from "../../hooks/menu/context.js";
+import { getMatchedList } from "../../utils/menu.js";
+import { getCssVarOrUnit } from "../../utils/style/index.js";
+import "../../utils/index.js";
+import BaseMenu_default from "../BaseMenu/index.js";
+import BreadCrumb_default from "../BreadCrumb/index.js";
+import { defaultRenderCollapsedButton, renderCollapsedButton } from "../CollapsedIcon/index.js";
+import LogoContent_default, { logoDom, renderLogo } from "../LogoContent/index.js";
+import { genLogoContentStyle } from "../LogoContent/style.js";
+import { headerProps } from "./props.js";
+import { genProDefaultHeaderStyle } from "./style/defaultHeader.js";
+import { Fragment, computed, createVNode, defineComponent, mergeProps, toRaw } from "vue";
+import { unit, useProConfigContext, useProStyle } from "@gx-design-vue/pro-provider";
+import { classNames as classNames$1, cloneDeep } from "@gx-design-vue/pro-utils";
+import { ConfigProvider } from "ant-design-vue";
+import { useRouter } from "vue-router";
+
+//#region src/components/GlobalHeader/DefaultHeader.tsx
+const headerMainLayouts = [
+	"mix",
+	"top",
+	"wide"
+];
+const DefaultHeader = /* @__PURE__ */ defineComponent({
+	name: "DefaultHeader",
+	props: {
+		...headerProps,
+		...commonCollapsedProps
+	},
+	inheritAttrs: false,
+	setup(props) {
+		const router = useRouter();
+		const layoutMenuContext = useProLayoutMenuContext();
+		const { token } = useProConfigContext();
+		const { styles, classNames, getPrefixCls, collapsed, collapsedProps, settings, isMobile, openKeys, selectedKeys, menu, breadcrumb } = useProLayoutContext();
+		const baseClassName = getPrefixCls({
+			suffixCls: "global-header",
+			isPor: true
+		});
+		const { wrapSSR, hashId } = useProStyle("ProDefaultHeader", [genProDefaultHeaderStyle, genLogoContentStyle], baseClassName);
+		const className = computed(() => {
+			return {
+				[`${hashId.value}`]: true,
+				[`${baseClassName}`]: true,
+				[`${baseClassName}-${settings.value.layout}`]: true
+			};
+		});
+		const menuData = computed(() => {
+			return settings.value.splitMenus && settings.value.layout === "mix" ? menu.value.menuData.map((item) => ({
+				...item,
+				children: []
+			})) : settings.value.layout === "top" ? menu.value.menuData : [];
+		});
+		const handleChangeKeys = (type, keys, key) => {
+			const currentRoute = router?.currentRoute?.value;
+			const autoMatched = settings.value.layout === "mix";
+			const matchedMenu = layoutMenuContext?.matchedMenu?.value || getMatchedList({
+				menuMap: layoutMenuContext.menuMap.value,
+				flatMenus: menu.value.flatMenus
+			}, currentRoute?.name);
+			if (props.onSelect && type === "select") {
+				const name = menuData.value.find((r) => r.name === key)?.redirect;
+				props.onSelect(autoMatched && name ? matchedMenu.map((item) => item.name) : keys);
+			}
+			if (props.onOpenKeys && type === "openKeys") props.onOpenKeys(autoMatched ? matchedMenu.filter((item) => item.name !== currentRoute?.name).map((item) => item.name) : keys);
+		};
+		const onCollapse = () => collapsed.value = !collapsed.value;
+		const HeaderContent = () => {
+			return createVNode(Fragment, null, [props.headerContentRender !== false && typeof props.headerContentRender === "function" ? createVNode("div", { "style": { flex: 1 } }, [props.headerContentRender?.(props)]) : createVNode("div", {
+				"style": { flex: 1 },
+				"class": [`${baseClassName}-menu`, hashId.value]
+			}, [menuData.value?.length > 0 && createVNode(ConfigProvider, { "theme": {
+				components: {
+					Layout: {
+						colorBgHeader: "transparent",
+						colorBgBody: "transparent"
+					},
+					Menu: {
+						radiusItem: token.value.layout?.header?.borderRadius || token.value.borderRadius,
+						colorItemBg: token.value.layout?.header?.colorBgHeader || "transparent",
+						colorSubItemBg: token.value.layout?.header?.colorBgHeader || "transparent",
+						colorItemBgSelected: token.value.layout?.header?.colorBgMenuItemSelected || token.value?.colorBgTextHover,
+						colorItemText: token.value.layout?.header?.colorTextMenu || token.value?.colorTextSecondary,
+						colorItemTextHover: token.value.layout?.header?.colorTextMenuActive || "rgba(0, 0, 0, 0.85)",
+						colorItemTextSelected: token.value.layout?.header?.colorTextMenuSelected || "rgba(0, 0, 0, 1)"
+					}
+				},
+				token: { colorBgElevated: token.value.layout?.header?.colorBgHeader || "transparent" }
+			} }, { default: () => [createVNode(BaseMenu_default, {
+				"key": "header-base-menu",
+				"class": classNames$1(`${baseClassName}-menu ${hashId.value}`, classNames.value?.menu),
+				"styles": styles.value,
+				"classNames": classNames.value,
+				"type": menu.value?.type,
+				"mode": "horizontal",
+				"menuRenderType": "header",
+				"style": styles.value?.menu,
+				"menuProps": menu.value?.menuProps,
+				"menuData": cloneDeep(toRaw(menuData.value)),
+				"iconfontUrl": settings.value?.iconfontUrl,
+				"openKeys": openKeys.value,
+				"selectedKeys": selectedKeys.value,
+				"menuTextRender": props.menuTextRender,
+				"menuItemRender": props.menuItemRender,
+				"subMenuItemRender": props.subMenuItemRender,
+				"onClick": menu.value?.menuProps?.onClick,
+				"onSelect": (info) => handleChangeKeys("select", info.selectedKeys, info.key),
+				"onOpenKeys": (keys) => handleChangeKeys("openKeys", keys)
+			}, null)] })]), settings.value.layout !== "simple" && (props.rightContentRender && typeof props.rightContentRender === "function" ? props.rightContentRender(props) : createVNode(Fragment, null, null))]);
+		};
+		return () => {
+			const collapsedButtonRender = renderCollapsedButton(props.collapsedButtonRender || collapsedProps.value?.collapsedButtonRender, collapsed.value, defaultRenderCollapsedButton({
+				collapsed: collapsed.value,
+				iconRender: props.collapsedIconRender || collapsedProps.value?.collapsedIconRender
+			}));
+			return wrapSSR(createVNode("div", { "class": className.value }, [isMobile.value ? createVNode(Fragment, null, [
+				renderLogo(props.logoRender, logoDom(classNames$1([
+					`${baseClassName}-logo`,
+					isMobile.value && `${baseClassName}-logo-mobile`,
+					hashId.value
+				]), props)),
+				collapsedProps.value?.collapsedButtonRender !== false && createVNode("span", {
+					"class": `${baseClassName}-collapsed-button ${hashId.value}`,
+					"onClick": onCollapse
+				}, [collapsedButtonRender]),
+				HeaderContent()
+			]) : createVNode("div", {
+				"class": `${baseClassName}-main ${hashId.value}`,
+				"style": { width: props.headerMainWidth || props.headerMainWidth === 0 ? unit(props.headerMainWidth) : settings.value.layout === "wide" ? getCssVarOrUnit(settings.value.wideWidth) : void 0 }
+			}, [createVNode("div", { "class": `${baseClassName}-main-left ${hashId.value}` }, [
+				headerMainLayouts.includes(settings.value.layout) && createVNode(Fragment, null, [settings.value.layout !== "wide" && props.appsLogoComponents && createVNode(Fragment, null, [typeof props.appsLogoComponents === "function" ? props.appsLogoComponents?.() : props.appsLogoComponents]), createVNode(LogoContent_default, mergeProps({
+					"hashId": hashId.value,
+					"baseClassName": baseClassName
+				}, props, { "title": settings.value.title }), null)]),
+				collapsedProps.value?.position === "header" && collapsedProps.value?.collapsedButtonRender !== false && (settings.value.layout !== "mix" ? menu.value.menuData : menu.value.mixSiderMenus).length > 0 && createVNode("div", {
+					"class": `${baseClassName}-collapsed-button ${hashId.value}`,
+					"onClick": onCollapse
+				}, [collapsedButtonRender]),
+				breadcrumb.value?.position === "header" && breadcrumb.value?.visible && createVNode(BreadCrumb_default, null, null)
+			]), HeaderContent()])]));
+		};
+	}
+});
+var DefaultHeader_default = DefaultHeader;
+
+//#endregion
+export { DefaultHeader_default as default };

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

@@ -0,0 +1,164 @@
+import { BaseMenuProps, ProLayoutMenuFunProps } from "../../types/MenuTypings.js";
+import { CollapsedButtonRender, CollapsedIconRender, DefaultRender, HeaderContentRender, HeaderRender, LogoRender, MenuItemRender, MenuTextRender, RightContentRender, SubMenuItemRender } from "../../types/SlotsTypings.js";
+import { CommonLogoProps } from "../LogoContent/props.js";
+import { HeaderLayoutProps } from "../../types/typings.js";
+import { headerProps } from "./props.js";
+import * as vue246 from "vue";
+import { ExtractPropTypes } from "vue";
+import * as _gx_design_vue_pro_utils17 from "@gx-design-vue/pro-utils";
+import * as ant_design_vue_es__util_type26 from "ant-design-vue/es/_util/type";
+
+//#region src/components/GlobalHeader/index.d.ts
+type GlobalHeaderProps = Partial<ExtractPropTypes<typeof headerProps>>;
+declare const _default: vue246.DefineComponent<ExtractPropTypes<{
+  collapsedButtonRender: {
+    type: vue246.PropType<CollapsedButtonRender>;
+    default: () => any;
+  };
+  collapsedIconRender: {
+    type: vue246.PropType<CollapsedIconRender>;
+    default: () => any;
+  };
+  autoHideHeader: vue246.PropType<HeaderLayoutProps["autoHideHeader"]>;
+  headerMainWidth: {
+    type: vue246.PropType<HeaderLayoutProps["headerMainWidth"]>;
+    default: any;
+  };
+  headerRender: {
+    type: vue246.PropType<HeaderRender>;
+    default: () => any;
+  };
+  headerContentRender: {
+    type: vue246.PropType<HeaderContentRender>;
+    default: () => any;
+  };
+  appsLogoComponents: {
+    type: vue246.PropType<DefaultRender>;
+    default: () => any;
+  };
+  extraRightDropdownRender: {
+    type: vue246.PropType<DefaultRender>;
+    default: () => any;
+  };
+  rightContentRender: {
+    type: vue246.PropType<RightContentRender>;
+    default: () => any;
+  };
+  onOpenKeys: {
+    type: vue246.PropType<ProLayoutMenuFunProps["onOpenKeys"]>;
+  };
+  onSelect: {
+    type: vue246.PropType<ProLayoutMenuFunProps["onSelect"]>;
+  };
+  menuItemRender: {
+    type: vue246.PropType<BaseMenuProps["menuItemRender"]>;
+    default: () => any;
+  };
+  menuTextRender: {
+    type: vue246.PropType<BaseMenuProps["menuTextRender"]>;
+    default: () => any;
+  };
+  subMenuItemRender: {
+    type: vue246.PropType<BaseMenuProps["subMenuItemRender"]>;
+    default: () => any;
+  };
+  class: vue246.PropType<string>;
+  style: vue246.PropType<vue246.CSSProperties>;
+  logo: {
+    type: vue246.PropType<CommonLogoProps["logo"]>;
+    default: () => any;
+  };
+  logoStyle: {
+    type: vue246.PropType<CommonLogoProps["logoStyle"]>;
+    default: () => any;
+  };
+  logoRender: {
+    type: vue246.PropType<CommonLogoProps["logoRender"]>;
+    default: () => any;
+  };
+  onLogoClick: vue246.PropType<CommonLogoProps["onLogoClick"]>;
+}>, () => ant_design_vue_es__util_type26.VueNode, {}, {}, {}, vue246.ComponentOptionsMixin, vue246.ComponentOptionsMixin, {}, string, vue246.PublicProps, Readonly<ExtractPropTypes<{
+  collapsedButtonRender: {
+    type: vue246.PropType<CollapsedButtonRender>;
+    default: () => any;
+  };
+  collapsedIconRender: {
+    type: vue246.PropType<CollapsedIconRender>;
+    default: () => any;
+  };
+  autoHideHeader: vue246.PropType<HeaderLayoutProps["autoHideHeader"]>;
+  headerMainWidth: {
+    type: vue246.PropType<HeaderLayoutProps["headerMainWidth"]>;
+    default: any;
+  };
+  headerRender: {
+    type: vue246.PropType<HeaderRender>;
+    default: () => any;
+  };
+  headerContentRender: {
+    type: vue246.PropType<HeaderContentRender>;
+    default: () => any;
+  };
+  appsLogoComponents: {
+    type: vue246.PropType<DefaultRender>;
+    default: () => any;
+  };
+  extraRightDropdownRender: {
+    type: vue246.PropType<DefaultRender>;
+    default: () => any;
+  };
+  rightContentRender: {
+    type: vue246.PropType<RightContentRender>;
+    default: () => any;
+  };
+  onOpenKeys: {
+    type: vue246.PropType<ProLayoutMenuFunProps["onOpenKeys"]>;
+  };
+  onSelect: {
+    type: vue246.PropType<ProLayoutMenuFunProps["onSelect"]>;
+  };
+  menuItemRender: {
+    type: vue246.PropType<BaseMenuProps["menuItemRender"]>;
+    default: () => any;
+  };
+  menuTextRender: {
+    type: vue246.PropType<BaseMenuProps["menuTextRender"]>;
+    default: () => any;
+  };
+  subMenuItemRender: {
+    type: vue246.PropType<BaseMenuProps["subMenuItemRender"]>;
+    default: () => any;
+  };
+  class: vue246.PropType<string>;
+  style: vue246.PropType<vue246.CSSProperties>;
+  logo: {
+    type: vue246.PropType<CommonLogoProps["logo"]>;
+    default: () => any;
+  };
+  logoStyle: {
+    type: vue246.PropType<CommonLogoProps["logoStyle"]>;
+    default: () => any;
+  };
+  logoRender: {
+    type: vue246.PropType<CommonLogoProps["logoRender"]>;
+    default: () => any;
+  };
+  onLogoClick: vue246.PropType<CommonLogoProps["onLogoClick"]>;
+}>> & Readonly<{}>, {
+  logo: _gx_design_vue_pro_utils17.CustomRender;
+  logoStyle: vue246.CSSProperties;
+  logoRender: LogoRender;
+  menuItemRender: MenuItemRender;
+  menuTextRender: MenuTextRender;
+  subMenuItemRender: SubMenuItemRender;
+  headerMainWidth: number;
+  collapsedIconRender: CollapsedIconRender;
+  collapsedButtonRender: CollapsedButtonRender;
+  headerRender: HeaderRender;
+  headerContentRender: HeaderContentRender;
+  appsLogoComponents: DefaultRender;
+  extraRightDropdownRender: DefaultRender;
+  rightContentRender: RightContentRender;
+}, {}, {}, {}, string, vue246.ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { GlobalHeaderProps, _default as default };

package/dist/components/GlobalHeader/index.js

@@ -0,0 +1,78 @@
+import { useProLayoutContext } from "../../Context/index.js";
+import { commonCollapsedProps } from "../../props/collapsedProps.js";
+import { headerProps } from "./props.js";
+import DefaultHeader_default from "./DefaultHeader.js";
+import { genProHeaderStyle } from "./style/header.js";
+import { Fragment, computed, createVNode, defineComponent, isVNode } from "vue";
+import { unit, useProStyle } from "@gx-design-vue/pro-provider";
+import { Layout } from "ant-design-vue";
+
+//#region src/components/GlobalHeader/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+const { Header } = Layout;
+var GlobalHeader_default = /* @__PURE__ */ defineComponent({
+	name: "GlobalHeader",
+	inheritAttrs: false,
+	props: {
+		...headerProps,
+		...commonCollapsedProps
+	},
+	setup(props) {
+		const { styles, classNames, collapsed, collapsedEffect, collapsedProps, getPrefixCls, contentFullScreen, settings, zIndex, isMobile, layoutProps } = useProLayoutContext();
+		const baseClassName = getPrefixCls({
+			suffixCls: "layout-header",
+			isPor: true
+		});
+		const needFixedHeader = computed(() => settings.value.fixedHeader);
+		const hasSilder = computed(() => settings.value.layout === "side" || settings.value.layout === "simple");
+		const { wrapSSR, hashId } = useProStyle("ProLayoutHeader", [genProHeaderStyle], baseClassName);
+		const className = computed(() => {
+			return {
+				[`${hashId.value}`]: true,
+				[`${baseClassName}`]: true,
+				[`${classNames.value.header}`]: classNames.value.header,
+				[`${baseClassName}-fixed-header`]: needFixedHeader.value
+			};
+		});
+		const needSettingWidth = computed(() => needFixedHeader.value && !isMobile.value);
+		const width = computed(() => {
+			if (collapsedProps.value?.width === 0 && collapsed.value) return "100%";
+			const width = collapsedEffect.value ? collapsedProps.value?.width : layoutProps.value.siderWidth;
+			return hasSilder.value && needSettingWidth.value ? collapsedEffect.value ? width ? `calc(100% - ${unit(width)})` : "100%" : width ? `calc(100% - ${unit(width)})` : "100%" : "100%";
+		});
+		const right = computed(() => needFixedHeader.value ? 0 : void 0);
+		const renderContent = () => {
+			const defaultDom = createVNode(DefaultHeader_default, props, null);
+			if (props.headerRender) return props.headerRender({
+				props,
+				defaultDom
+			});
+			return defaultDom;
+		};
+		return () => {
+			let _slot;
+			return wrapSSR(createVNode(Fragment, null, [needFixedHeader.value && createVNode(Header, { "style": {
+				height: `${layoutProps.value.headerHeight}`,
+				lineHeight: `${layoutProps.value.headerHeight}`,
+				background: "transparent",
+				marginTop: contentFullScreen.value ? `-${layoutProps.value.headerHeight}` : void 0
+			} }, null), createVNode(Header, {
+				"class": className.value,
+				"style": {
+					height: `${layoutProps.value.headerHeight}`,
+					lineHeight: `${layoutProps.value.headerHeight}`,
+					width: width.value,
+					zIndex: hasSilder.value ? zIndex.value : zIndex.value + 1,
+					right: right.value,
+					marginTop: contentFullScreen.value ? `-${layoutProps.value.headerHeight}` : void 0,
+					...styles.value?.header || {}
+				}
+			}, _isSlot(_slot = renderContent()) ? _slot : { default: () => [_slot] })]));
+		};
+	}
+});
+
+//#endregion
+export { GlobalHeader_default as default };

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

@@ -0,0 +1,70 @@
+import { BaseMenuProps, ProLayoutMenuFunProps } from "../../types/MenuTypings.js";
+import { DefaultRender, HeaderContentRender, HeaderRender, RightContentRender } from "../../types/SlotsTypings.js";
+import { CommonLogoProps } from "../LogoContent/props.js";
+import { HeaderLayoutProps } from "../../types/typings.js";
+import * as vue245 from "vue";
+import { PropType } from "vue";
+
+//#region src/components/GlobalHeader/props.d.ts
+declare const headerProps: {
+  autoHideHeader: PropType<HeaderLayoutProps["autoHideHeader"]>;
+  headerMainWidth: {
+    type: PropType<HeaderLayoutProps["headerMainWidth"]>;
+    default: any;
+  };
+  headerRender: {
+    type: PropType<HeaderRender>;
+    default: () => any;
+  };
+  headerContentRender: {
+    type: PropType<HeaderContentRender>;
+    default: () => any;
+  };
+  appsLogoComponents: {
+    type: PropType<DefaultRender>;
+    default: () => any;
+  };
+  extraRightDropdownRender: {
+    type: PropType<DefaultRender>;
+    default: () => any;
+  };
+  rightContentRender: {
+    type: PropType<RightContentRender>;
+    default: () => any;
+  };
+  onOpenKeys: {
+    type: PropType<ProLayoutMenuFunProps["onOpenKeys"]>;
+  };
+  onSelect: {
+    type: PropType<ProLayoutMenuFunProps["onSelect"]>;
+  };
+  menuItemRender: {
+    type: PropType<BaseMenuProps["menuItemRender"]>;
+    default: () => any;
+  };
+  menuTextRender: {
+    type: PropType<BaseMenuProps["menuTextRender"]>;
+    default: () => any;
+  };
+  subMenuItemRender: {
+    type: PropType<BaseMenuProps["subMenuItemRender"]>;
+    default: () => any;
+  };
+  class: PropType<string>;
+  style: PropType<vue245.CSSProperties>;
+  logo: {
+    type: PropType<CommonLogoProps["logo"]>;
+    default: () => any;
+  };
+  logoStyle: {
+    type: PropType<CommonLogoProps["logoStyle"]>;
+    default: () => any;
+  };
+  logoRender: {
+    type: PropType<CommonLogoProps["logoRender"]>;
+    default: () => any;
+  };
+  onLogoClick: PropType<CommonLogoProps["onLogoClick"]>;
+};
+//#endregion
+export { headerProps };

package/dist/components/GlobalHeader/props.js

@@ -0,0 +1,56 @@
+import { commonMenuFunProps } from "../BaseMenu/props.js";
+import { commonLogoProps } from "../LogoContent/props.js";
+
+//#region src/components/GlobalHeader/props.ts
+const headerProps = {
+	...commonLogoProps,
+	...commonMenuFunProps,
+	autoHideHeader: Boolean,
+	headerMainWidth: {
+		type: [Number, String],
+		default: void 0
+	},
+	headerRender: {
+		type: [
+			Object,
+			Function,
+			Boolean
+		],
+		default: () => void 0
+	},
+	headerContentRender: {
+		type: [
+			Object,
+			Function,
+			Boolean
+		],
+		default: () => void 0
+	},
+	appsLogoComponents: {
+		type: [
+			Object,
+			Function,
+			Boolean
+		],
+		default: () => void 0
+	},
+	extraRightDropdownRender: {
+		type: [
+			Object,
+			Function,
+			Boolean
+		],
+		default: () => void 0
+	},
+	rightContentRender: {
+		type: [
+			Object,
+			Function,
+			Boolean
+		],
+		default: () => void 0
+	}
+};
+
+//#endregion
+export { headerProps };

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

@@ -0,0 +1,6 @@
+import { GenerateStyle } from "@gx-design-vue/pro-provider";
+
+//#region src/components/GlobalHeader/style/defaultHeader.d.ts
+declare const genProDefaultHeaderStyle: GenerateStyle;
+//#endregion
+export { genProDefaultHeaderStyle };