@gx-design-vue/pro-layout 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/ProLayout.js

@@ -13,7 +13,7 @@ import { normalizeSectionConfig } from "./utils/config.js";
 import { computed, createVNode, defineComponent, mergeDefaults, ref } from "vue";
 import { ThemeContext, useThemeContext } from "@gx-design-vue/context";
 import { GProConfigProvider, useProToken } from "@gx-design-vue/pro-provider";
-import { classNames, getSlot, getSlotsProps } from "@gx-design-vue/pro-utils";
+import { classNames, getSlotsProps } from "@gx-design-vue/pro-utils";
 import { useDark, useMediaQuery, useVModel } from "@vueuse/core";
 import { ConfigProvider, Layout } from "antdv-next";
 import { useBaseConfig } from "antdv-next/config-provider/context";
@@ -112,18 +112,39 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 		}
 		if (target.path && router.currentRoute.value.fullPath !== target.path) router.push(target.path);
 	}
+	const logoConfig = computed(() => normalizeSectionConfig(props.logo, DEFAULT_LAYOUT_CONFIG.logo));
+	const collapseConfig = computed(() => normalizeSectionConfig(props.collapse, DEFAULT_LAYOUT_CONFIG.collapse));
+	const footerConfig = computed(() => normalizeSectionConfig(props.footerConfig, DEFAULT_LAYOUT_CONFIG.footerConfig));
+	const breadcrumbConfig = computed(() => normalizeSectionConfig(props.breadcrumb, DEFAULT_LAYOUT_CONFIG.breadcrumb));
+	const pageContainerConfig = computed(() => ({
+		...DEFAULT_LAYOUT_CONFIG.pageContainerConfig,
+		...props.pageContainer || {}
+	}));
 	const tabsConf = computed(() => normalizeSectionConfig(props.tabsConfig, DEFAULT_LAYOUT_CONFIG.tabsConfig));
 	const tabsStateConfig = computed(() => tabsConf.value ?? {});
+	const tabsModel = useVModel(props, "tabs", emit, {
+		passive: true,
+		defaultValue: []
+	});
+	const collapsedWidth = computed(() => collapseConfig.value?.width ?? DEFAULT_LAYOUT_CONFIG.collapse.width);
+	/** Sider 实际渲染宽度：0 表示不可见，否则 = 折叠/展开的真实宽度 */
+	const siderWidth = computed(() => {
+		const width = props.sider?.width ?? DEFAULT_LAYOUT_CONFIG.sider.width;
+		if (!width) return 0;
+		if (contentFullscreen.value) return 0;
+		if (![
+			"side",
+			"mix",
+			"wide"
+		].includes(layout.value ?? "")) return 0;
+		if (props.sider?.hideWhenEmpty && menuState.siderMenus.value.length === 0) return 0;
+		return collapsed.value ? collapsedWidth.value : width;
+	});
 	const tabsState = useTabsState({
-		tabs: useVModel(props, "tabs", emit, {
-			passive: true,
-			defaultValue: []
-		}),
+		tabs: tabsModel,
 		config: tabsStateConfig,
 		flatMenus: menuState.flatMenus,
-		collapsed,
-		siderWidth: props.sider?.width ?? DEFAULT_LAYOUT_CONFIG.sider.width,
-		collapseWidth: props.collapseConfig ? props.collapseConfig.width ?? DEFAULT_LAYOUT_CONFIG.collapseConfig.width : DEFAULT_LAYOUT_CONFIG.collapseConfig.width,
+		siderWidth,
 		isMobile: computed(() => isMobile.value),
 		contentFullscreen,
 		onTabsChange: (val) => {
@@ -163,14 +184,6 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 	function handleLogoClick() {
 		emit("logoClick");
 	}
-	const logoConfig = computed(() => normalizeSectionConfig(props.logoConfig, DEFAULT_LAYOUT_CONFIG.logoConfig));
-	const collapseConfig = computed(() => normalizeSectionConfig(props.collapseConfig, DEFAULT_LAYOUT_CONFIG.collapseConfig));
-	const footerConfig = computed(() => normalizeSectionConfig(props.footerConfig, DEFAULT_LAYOUT_CONFIG.footerConfig));
-	const breadcrumbConfig = computed(() => normalizeSectionConfig(props.breadcrumbConfig, DEFAULT_LAYOUT_CONFIG.breadcrumbConfig));
-	const pageContainerConfig = computed(() => ({
-		...DEFAULT_LAYOUT_CONFIG.pageContainerConfig,
-		...props.pageContainerConfig || {}
-	}));
 	const showHeader = computed(() => !contentFullscreen.value && layout.value !== "simple" && props.header?.height !== 0);
 	const showSider = computed(() => !contentFullscreen.value && [
 		"side",
@@ -194,6 +207,8 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 		})),
 		menuState,
 		logoConfig,
+		siderWidth,
+		collapsedWidth,
 		breadcrumbConfig,
 		pageContainerConfig,
 		watermark: computed(() => props.watermark),
@@ -227,17 +242,7 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 			keys: LAYOUT_SLOT_KEYS,
 			render: false
 		});
-		const normalized = Object.fromEntries(Object.entries(merged).map(([key, value]) => [key, typeof value === "function" ? value : () => value]));
-		if (slots.logo) normalized.logo = slots.logo;
-		if (props.collapseConfig) {
-			const collapseIconSlot = getSlot({
-				slots,
-				props: { collapseIcon: props.collapseConfig.icon },
-				key: "collapseIcon"
-			});
-			if (collapseIconSlot) normalized.collapseIcon = collapseIconSlot;
-		}
-		return normalized;
+		return Object.fromEntries(Object.entries(merged).map(([key, value]) => [key, typeof value === "function" ? value : () => value]));
 	}
 	return () => {
 		if (props.pure) return slots.default?.();
@@ -253,12 +258,17 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 			"showSider": showSider.value,
 			"proClasses": props.proClasses,
 			"proStyles": props.proStyles
-		}, { default: () => [showSider.value && createVNode(LayoutSider$1, {
+		}, { default: () => [showSider.value && siderWidth.value && createVNode(LayoutSider$1, {
 			"onSelect": handleSelect,
 			"onOpenChange": handleOpenChange,
 			"onLogoClick": handleLogoClick,
 			"onUpdate:collapsed": handleCollapsedUpdate
-		}, layoutSlots), createVNode("div", {
+		}, {
+			...layoutSlots,
+			logo: slots.logo,
+			collapse: slots.collapse,
+			collapseIcon: slots.collapseIcon
+		}), createVNode("div", {
 			"style": { position: "relative" },
 			"class": `${prefixCls.value}-container`,
 			"data-testid": "pro-layout-container"
@@ -267,7 +277,13 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 				"onLogoClick": handleLogoClick,
 				"onUpdate:collapsed": handleCollapsedUpdate,
 				"onSelect": handleSelect
-			}, layoutSlots),
+			}, {
+				...layoutSlots,
+				logo: slots.logo,
+				collapse: slots.collapse,
+				breadcrumb: slots.breadcrumb,
+				collapseIcon: slots.collapseIcon
+			}),
 			tabsConf.value && createVNode(LayoutTabs, {
 				"config": tabsConf.value,
 				"onReloadPage": () => emit("reloadPage"),
@@ -364,7 +380,7 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 			type: Object,
 			required: false
 		},
-		breadcrumbConfig: {
+		breadcrumb: {
 			type: [Object, Boolean],
 			required: false,
 			default: void 0
@@ -374,17 +390,17 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 			required: false,
 			default: void 0
 		},
-		logoConfig: {
+		logo: {
 			type: [Object, Boolean],
 			required: false,
 			default: void 0
 		},
-		collapseConfig: {
+		collapse: {
 			type: [Object, Boolean],
 			required: false,
 			default: void 0
 		},
-		pageContainerConfig: {
+		pageContainer: {
 			type: Object,
 			required: false
 		},
@@ -399,12 +415,11 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 		headerRightExtra: {
 			type: [
 				Function,
-				Object,
 				String,
 				Number,
-				Boolean,
 				null,
-				Array
+				Object,
+				Boolean
 			],
 			required: false,
 			default: void 0
@@ -420,12 +435,11 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 		siderExtra: {
 			type: [
 				Function,
-				Object,
 				String,
 				Number,
-				Boolean,
 				null,
-				Array
+				Object,
+				Boolean
 			],
 			required: false,
 			default: void 0
@@ -446,10 +460,6 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 			type: Function,
 			required: false
 		},
-		breadcrumb: {
-			type: Function,
-			required: false
-		},
 		tabBarItem: {
 			type: Function,
 			required: false
@@ -457,12 +467,11 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 		footer: {
 			type: [
 				Function,
-				Object,
 				String,
 				Number,
-				Boolean,
 				null,
-				Array
+				Object,
+				Boolean
 			],
 			required: false,
 			default: void 0
@@ -470,12 +479,11 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 		copyright: {
 			type: [
 				Function,
-				Object,
 				String,
 				Number,
-				Boolean,
 				null,
-				Array
+				Object,
+				Boolean
 			],
 			required: false,
 			default: void 0

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

@@ -1,7 +1,7 @@
 import { AppPageSpinning } from "../../interface.js";
 import * as _$vue from "vue";
 import { CSSProperties, PropType, SlotsType } from "vue";
-import * as _$_gx_design_vue_pro_utils0 from "@gx-design-vue/pro-utils";
+import { CustomRender } from "@gx-design-vue/pro-utils";
 import * as _$vue_jsx_runtime0 from "vue/jsx-runtime";
 
 //#region src/components/AppPage/index.d.ts
@@ -12,65 +12,34 @@ import * as _$vue_jsx_runtime0 from "vue/jsx-runtime";
  * ③ 经 GProApp context 向后代下发 emptyText / indicator（供 pro-table 等空态/加载态复用）。
  */
 declare const ProAppPage: _$vue.DefineComponent<_$vue.ExtractPropTypes<{
+  class: PropType<string>;
+  style: PropType<CSSProperties>;
+  prefixCls: PropType<string>;
   spinning: {
     type: PropType<AppPageSpinning>;
     default: () => {};
   };
-  class: {
-    type: StringConstructor;
-    default: any;
-  };
-  prefixCls: {
-    type: StringConstructor;
-    default: any;
-  };
-  style: {
-    type: PropType<CSSProperties>;
-    default: any;
-  };
-  emptyText: {
-    type: PropType<_$_gx_design_vue_pro_utils0.WithFalse<_$_gx_design_vue_pro_utils0.CustomRender>>;
-    default: any;
-  };
   indicator: {
-    type: PropType<_$_gx_design_vue_pro_utils0.WithFalse<_$_gx_design_vue_pro_utils0.CustomRender>>;
+    type: PropType<CustomRender>;
     default: any;
   };
 }>, () => _$vue_jsx_runtime0.JSX.Element, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<_$vue.ExtractPropTypes<{
+  class: PropType<string>;
+  style: PropType<CSSProperties>;
+  prefixCls: PropType<string>;
   spinning: {
     type: PropType<AppPageSpinning>;
     default: () => {};
   };
-  class: {
-    type: StringConstructor;
-    default: any;
-  };
-  prefixCls: {
-    type: StringConstructor;
-    default: any;
-  };
-  style: {
-    type: PropType<CSSProperties>;
-    default: any;
-  };
-  emptyText: {
-    type: PropType<_$_gx_design_vue_pro_utils0.WithFalse<_$_gx_design_vue_pro_utils0.CustomRender>>;
-    default: any;
-  };
   indicator: {
-    type: PropType<_$_gx_design_vue_pro_utils0.WithFalse<_$_gx_design_vue_pro_utils0.CustomRender>>;
+    type: PropType<CustomRender>;
     default: any;
   };
 }>> & Readonly<{}>, {
-  emptyText: _$_gx_design_vue_pro_utils0.CustomRender;
-  indicator: _$_gx_design_vue_pro_utils0.CustomRender;
-  prefixCls: string;
+  indicator: CustomRender;
   spinning: AppPageSpinning;
-  class: string;
-  style: CSSProperties;
 }, SlotsType<{
   default: () => any;
-  emptyText: () => any;
   indicator: () => any;
 }>, {}, {}, string, _$vue.ComponentProvideOptions, true, {}, any>;
 //#endregion

package/dist/components/AppPage/index.js

@@ -1,13 +1,11 @@
-import { APP_PAGE_SLOT_KEYS } from "../../interface.js";
 import { provideAppPageContext } from "./context.js";
 import style_default from "./style.js";
 import { computed, createVNode, defineComponent } from "vue";
-import { classNames } from "@gx-design-vue/pro-utils";
+import { useProConfigContext } from "@gx-design-vue/pro-provider";
+import { classNames, getSlotVNode } from "@gx-design-vue/pro-utils";
 import { useBaseConfig } from "antdv-next/config-provider/context";
 import useCSSVarCls from "antdv-next/config-provider/hooks/useCSSVarCls";
 import { GIcon } from "@gx-design-vue/icon";
-import { GProApp, proAppProps } from "@gx-design-vue/pro-app";
-import { useSlotsProps } from "@gx-design-vue/pro-hooks";
 import { GScrollbar } from "@gx-design-vue/scrollbar";
 //#region src/components/AppPage/index.tsx
 const SCROLLBAR_BAR_STYLE = {
@@ -29,10 +27,22 @@ const ProAppPage = /* @__PURE__ */ defineComponent({
 	name: "GProAppPage",
 	inheritAttrs: false,
 	props: {
-		...proAppProps,
+		class: String,
+		style: Object,
+		prefixCls: String,
 		spinning: {
 			type: Object,
 			default: () => ({})
+		},
+		indicator: {
+			type: [
+				Object,
+				Function,
+				Boolean,
+				Array,
+				String
+			],
+			default: void 0
 		}
 	},
 	slots: Object,
@@ -40,37 +50,38 @@ const ProAppPage = /* @__PURE__ */ defineComponent({
 		const { prefixCls } = useBaseConfig("pro-app-page", props);
 		const rootCls = useCSSVarCls(prefixCls);
 		const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
-		const slotRenders = useSlotsProps({
-			slots,
-			props,
-			keys: APP_PAGE_SLOT_KEYS,
-			render: true
-		});
+		const configContext = useProConfigContext();
 		const loading = computed(() => props.spinning?.loading ?? false);
 		provideAppPageContext({ spinning: computed(() => props.spinning?.loading) });
-		const resolvedIndicator = computed(() => slotRenders.value.indicator ?? createVNode(GIcon, {
-			"type": "Spinning",
-			"spin": true,
-			"class": `${prefixCls.value}-spin-dot ${hashId.value}`
-		}, null));
+		const resolvedIndicator = computed(() => {
+			const indicator = getSlotVNode({
+				slots,
+				key: "indicator",
+				props
+			});
+			if (indicator) return indicator;
+			return typeof configContext?.indicator?.value === "function" ? configContext?.indicator?.value?.() : configContext?.indicator?.value || createVNode(GIcon, {
+				"type": "Spinning",
+				"spin": true,
+				"class": `${prefixCls.value}-spin-dot ${hashId.value}`
+			}, null);
+		});
 		const rootClassNames = computed(() => classNames(prefixCls.value, hashId.value, cssVarCls.value, rootCls.value, loading.value && `${prefixCls.value}-loading`, props.class));
 		const maskStyle = computed(() => ({
 			zIndex: props.spinning?.blur ? 999 : void 0,
 			backgroundColor: props.spinning?.blur ? void 0 : "unset",
 			...props.spinning?.style || {}
 		}));
-		return () => createVNode(GProApp, {
+		return () => createVNode("div", {
 			"class": rootClassNames.value,
-			"style": props.style,
-			"emptyText": slotRenders.value.emptyText,
-			"indicator": resolvedIndicator.value
-		}, { default: () => [createVNode(GScrollbar, {
+			"style": props.style
+		}, [createVNode(GScrollbar, {
 			"barStyle": SCROLLBAR_BAR_STYLE,
 			"viewStyle": SCROLLBAR_VIEW_STYLE
 		}, { default: () => [slots.default?.()] }), loading.value && createVNode("div", {
 			"class": classNames(`${prefixCls.value}-blur`, hashId.value),
 			"style": maskStyle.value
-		}, [createVNode("div", { "class": `${prefixCls.value}-spin` }, [resolvedIndicator.value])])] });
+		}, [createVNode("div", { "class": `${prefixCls.value}-spin` }, [resolvedIndicator.value])])]);
 	}
 });
 //#endregion

package/dist/components/Breadcrumb/index.js

@@ -1,31 +1,15 @@
 import { useLayoutBase } from "../../hooks/useLayoutBase.js";
-import { Fragment, computed, createTextVNode, createVNode, defineComponent, isVNode } from "vue";
-import { classNames, isImg, isString, isUrl } from "@gx-design-vue/pro-utils";
+import { renderMenuIcon } from "../Menu/iconRender.js";
+import { Fragment, computed, createTextVNode, createVNode, defineComponent } from "vue";
+import { classNames } from "@gx-design-vue/pro-utils";
 import { Dropdown } from "antdv-next";
-import { DownOutlined } from "@antdv-next/icons";
 import { GIcon } from "@gx-design-vue/icon";
 //#region src/components/Breadcrumb/index.tsx
 /** 首页占位路由名 */
 const BREADCRUMB_HOME_KEY = "__breadcrumb_home__";
-/**
-* 渲染面包屑图标：兼容 VNode / 组件 / 图片地址 / 图标名。
-* 复用 LayoutMenu 的 renderMenuIcon 模式。
-*/
-function renderBreadcrumbIcon(icon) {
-	if (!icon) return null;
-	if (isVNode(icon)) return icon;
-	if (isString(icon)) {
-		if (isUrl(icon) || isImg(icon)) return createVNode("img", {
-			"src": icon,
-			"alt": "icon"
-		}, null);
-		return createVNode(GIcon, { "type": icon }, null);
-	}
-	return null;
-}
 /** 渲染默认面包屑项内容（图标 + 标题） */
 function renderBreadcrumbItemContent(prefixCls, route) {
-	const iconNode = renderBreadcrumbIcon(route.meta?.icon);
+	const iconNode = renderMenuIcon(route.meta?.icon);
 	return createVNode(Fragment, null, [iconNode && createVNode("span", { "class": `${prefixCls}-item-icon` }, [iconNode]), createVNode("span", null, [route.meta?.title])]);
 }
 /**
@@ -94,11 +78,11 @@ const Breadcrumb = /* @__PURE__ */ defineComponent((props, { slots }) => {
 				items: dropdownChildren.map((child) => ({
 					key: child.name,
 					label: child.meta?.title ?? child.name,
-					icon: renderBreadcrumbIcon(child.meta?.icon)
+					icon: renderMenuIcon(child.meta?.icon)
 				})),
 				selectedKeys: dropdownSelectedKeys,
 				onClick: ({ key }) => handleDropdownMenuClick(String(key))
-			} }, { default: () => [createVNode("span", { "class": `${breadcrumbCls}-overlay-link` }, [itemContent, createVNode(DownOutlined, null, null)])] }) : createVNode("span", {
+			} }, { default: () => [createVNode("span", { "class": `${breadcrumbCls}-overlay-link` }, [itemContent, createVNode(GIcon, { "type": "DownOutlined" }, null)])] }) : createVNode("span", {
 				"class": classNames(`${breadcrumbCls}-link`, isLast && `${breadcrumbCls}-link-last`),
 				"onClick": () => handleItemClick(route, isLast)
 			}, [itemContent])]), !isLast && createVNode("li", { "class": `${breadcrumbCls}-separator` }, [createTextVNode("/")])]);

package/dist/components/CollapseButton/index.js

@@ -1,7 +1,8 @@
 import { useLayoutBase } from "../../hooks/useLayoutBase.js";
+import { ArrowSvgIcon } from "./Arrow.js";
 import { computed, createVNode, defineComponent } from "vue";
 import { classNames } from "@gx-design-vue/pro-utils";
-import { MenuFoldOutlined, MenuUnfoldOutlined } from "@antdv-next/icons";
+import { GIcon } from "@gx-design-vue/icon";
 //#region src/components/CollapseButton/index.tsx
 const LayoutCollapseButton = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
 	const { prefixCls, collapseConfig } = useLayoutBase();
@@ -11,7 +12,6 @@ const LayoutCollapseButton = /* @__PURE__ */ defineComponent((props, { emit, slo
 		emit("click", event);
 	}
 	return () => {
-		if (slots.default) return slots.default();
 		return createVNode("div", {
 			"class": collapseButtonClassNames.value,
 			"role": "button",
@@ -24,7 +24,7 @@ const LayoutCollapseButton = /* @__PURE__ */ defineComponent((props, { emit, slo
 					handleClick(event);
 				}
 			}
-		}, [collapseConfig?.value ? slots.icon?.({ collapsed: props.collapsed }) : props.collapsed ? createVNode(MenuUnfoldOutlined, null, null) : createVNode(MenuFoldOutlined, null, null)]);
+		}, [slots.icon?.({ collapsed: props.collapsed }) || placement.value === "sider" ? createVNode(ArrowSvgIcon, null, null) : createVNode(GIcon, { "type": props.collapsed ? "MenuUnfoldOutlined" : "MenuFoldOutlined" }, null)]);
 	};
 }, {
 	props: {

package/dist/components/CollapseButton/interface.d.ts

@@ -14,7 +14,6 @@ interface LayoutCollapseButtonSlots {
   icon?: (props: {
     collapsed: boolean;
   }) => any;
-  default?: () => any;
 }
 //#endregion
 export { LayoutCollapseButtonEmits, LayoutCollapseButtonEmitsProps, LayoutCollapseButtonProps, LayoutCollapseButtonSlots };

package/dist/components/Footer/index.js

@@ -41,12 +41,11 @@ const LayoutFooter = /* @__PURE__ */ defineComponent((props, { slots }) => {
 		footer: {
 			type: [
 				Function,
-				Object,
 				String,
 				Number,
-				Boolean,
 				null,
-				Array
+				Object,
+				Boolean
 			],
 			required: false,
 			default: void 0
@@ -54,12 +53,11 @@ const LayoutFooter = /* @__PURE__ */ defineComponent((props, { slots }) => {
 		copyrightRender: {
 			type: [
 				Function,
-				Object,
 				String,
 				Number,
-				Boolean,
 				null,
-				Array
+				Object,
+				Boolean
 			],
 			required: false,
 			default: void 0

package/dist/components/FooterToolbar/index.js

@@ -66,12 +66,11 @@ const GFooterToolbar = /* @__PURE__ */ defineComponent((props, { slots }) => {
 		extra: {
 			type: [
 				Function,
-				Object,
 				String,
 				Number,
-				Boolean,
 				null,
-				Array
+				Object,
+				Boolean
 			],
 			required: false,
 			default: void 0

package/dist/components/Header/index.js

@@ -63,7 +63,8 @@ const Header = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
 			items,
 			routes
 		};
-		const customBreadcrumb = breadcrumbRender.value?.(slotProps) ?? slots.breadcrumb?.(slotProps);
+		const breadcrumb = slots.breadcrumb || breadcrumbConfig.value?.render;
+		const customBreadcrumb = breadcrumbRender.value?.(slotProps) ?? breadcrumb?.(slotProps);
 		if (customBreadcrumb) return createVNode("div", {
 			"class": classNames(`${prefixCls.value}-header-breadcrumb`, proClasses.value.breadcrumb),
 			"style": proStyles.value.breadcrumb
@@ -76,6 +77,9 @@ const Header = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
 	}
 	return () => {
 		const showHeaderMenu = ["top", "mix"].includes(layout.value ?? "");
+		const logoRender = slots.logo || logoConfig.value?.render;
+		const collapseRender = slots.collapse || collapseConfig.value?.render;
+		const collapseIconRender = slots.collapseIcon || collapseConfig.value?.icon;
 		return createVNode(Fragment, null, [header.value?.fixed && createVNode(LayoutHeader, { "style": {
 			background: "transparent",
 			lineHeight: unit(header.value?.height),
@@ -88,14 +92,14 @@ const Header = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
 			}
 		}, { default: () => [createVNode("div", { "class": `${prefixCls.value}-header-main` }, [
 			createVNode("div", { "class": `${prefixCls.value}-header-main-left` }, [
-				showLogo.value && (slots.logo?.({
+				showLogo.value && logoConfig.value && (typeof logoRender === "function" ? logoRender?.({
 					collapsed: collapsed.value,
 					title: logoTitle.value
-				}) ?? (logoConfig.value ? createVNode(LayoutLogo, { "onClick": handleLogoClick }, null) : null)),
-				collapseConfig.value && collapseConfig.value.placement === "header" && (slots.collapseButton?.({ collapsed: collapsed.value }) ?? createVNode(LayoutCollapseButton, {
+				}) : createVNode(LayoutLogo, { "onClick": handleLogoClick }, slots)),
+				collapseConfig.value && collapseConfig.value.placement === "header" && (collapseRender?.({ collapsed: collapsed.value }) ?? createVNode(LayoutCollapseButton, {
 					"collapsed": collapsed.value,
 					"onClick": handleToggleCollapsed
-				}, { icon: collapseConfig.value.icon })),
+				}, { icon: collapseIconRender })),
 				renderBreadcrumb()
 			]),
 			slots.headerContent?.({

package/dist/components/Header/interface.d.ts

@@ -20,6 +20,12 @@ interface LayoutHeaderSlots {
     collapsed: boolean;
     title?: string;
   }) => any;
+  collapse?: (props: {
+    collapsed: boolean;
+  }) => any;
+  collapseIcon?: (props: {
+    collapsed: boolean;
+  }) => any;
   breadcrumb?: (props: LayoutBreadcrumbSlotProps) => any;
   headerContent?: (props: LayoutHeaderSlotProps) => any;
   headerRight?: (props: LayoutHeaderSlotProps) => any;

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

@@ -4,7 +4,7 @@ import { SlotsType } from "vue";
 import { CustomRender } from "@gx-design-vue/pro-utils";
 
 //#region src/components/Logo/index.d.ts
-declare function defaultRenderLogo(logo?: CustomRender | false): CustomRender;
+declare function defaultRenderLogo(logo?: CustomRender | false): any;
 declare const LayoutLogo: _$vue.DefineSetupFnComponent<LayoutLogoEmitsProps, LayoutLogoEmits, SlotsType<LayoutLogoSlots>, LayoutLogoEmitsProps, _$vue.PublicProps>;
 //#endregion
 export { LayoutLogo as default, defaultRenderLogo };

package/dist/components/Logo/index.js

@@ -18,7 +18,7 @@ const LayoutLogo = /* @__PURE__ */ defineComponent((_props, { emit, slots }) =>
 		if (!logoConfig?.value) return "";
 		return logoConfig?.value.title;
 	});
-	const logoSource = computed(() => !logoConfig?.value ? false : logoConfig?.value.logo);
+	const logoSource = computed(() => logoConfig?.value.image);
 	const hideTitle = computed(() => collapsed.value && ["side", "simple"].includes(layout.value ?? ""));
 	const showLogo = computed(() => !collapsed.value || !!collapsedWidth.value);
 	const logoClassNames = computed(() => classNames(`${prefixCls.value}-logo`, proClasses.value.logo, {
@@ -29,15 +29,13 @@ const LayoutLogo = /* @__PURE__ */ defineComponent((_props, { emit, slots }) =>
 		emit("click");
 	}
 	return () => {
-		if (slots.default) return slots.default();
-		const logo = slots.logo ? slots.logo() : defaultRenderLogo(logoSource.value);
-		const hasLogo = logo !== null && logo !== void 0 && logo !== false;
+		const image = slots.image ? slots.image() : defaultRenderLogo(logoSource.value);
 		const titleDom = title.value && !hideTitle.value ? createVNode("h1", null, [title.value]) : null;
 		return createVNode("div", {
 			"class": logoClassNames.value,
 			"style": proStyles.value.logo,
 			"onClick": handleClick
-		}, [createVNode("a", null, [showLogo.value && hasLogo && createVNode("span", {
+		}, [createVNode("a", null, [showLogo.value && image && createVNode("span", {
 			"class": proClasses.value.logoImage,
 			"style": {
 				display: "inline-flex",
@@ -45,7 +43,7 @@ const LayoutLogo = /* @__PURE__ */ defineComponent((_props, { emit, slots }) =>
 				fontSize: 22,
 				...proStyles.value.logoImage
 			}
-		}, [logo]), titleDom])]);
+		}, [image]), titleDom])]);
 	};
 }, {
 	props: { onClick: {

package/dist/components/Logo/interface.d.ts

@@ -7,8 +7,7 @@ interface LayoutLogoEmitsProps {
 }
 type LayoutLogoProps = LayoutLogoEmitsProps;
 interface LayoutLogoSlots {
-  logo?: () => any;
-  default?: () => any;
+  image?: () => any;
 }
 //#endregion
 export { LayoutLogoEmits, LayoutLogoEmitsProps, LayoutLogoProps, LayoutLogoSlots };