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

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

@@ -1,9 +1,10 @@
 import { ComputedRef } from "vue";
 
 //#region src/components/AppPage/context.d.ts
-interface ProPageContext {
+interface ProAppPageContext {
+  /** 应用壳全局 loading 状态，供后代按需消费 */
   spinning: ComputedRef<boolean | undefined>;
 }
-declare const useAppPageContext: (injectDefaultValue?: ProPageContext) => ProPageContext, provideAppPageContext: (value: ProPageContext) => void;
+declare const provideAppPageContext: (ctx: ProAppPageContext) => ProAppPageContext, useAppPageContext: () => ProAppPageContext;
 //#endregion
-export { ProPageContext, provideAppPageContext, useAppPageContext };
+export { ProAppPageContext, provideAppPageContext, useAppPageContext };

package/dist/components/AppPage/context.js

@@ -1,7 +1,5 @@
-import { useContext } from "@gx-design-vue/context";
-
+import { createInjectionState } from "@vueuse/core";
 //#region src/components/AppPage/context.ts
-const { useInjectContext: useAppPageContext, provideContext: provideAppPageContext } = useContext("pro-page");
-
+const [provideAppPageContext, useAppPageContext] = createInjectionState((ctx) => ctx);
 //#endregion
-export { provideAppPageContext, useAppPageContext };
+export { provideAppPageContext, useAppPageContext };

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

@@ -1,73 +1,50 @@
-import * as vue384 from "vue";
+import { AppPageSpinning } from "../../interface.js";
 import { CSSProperties, PropType, SlotsType } from "vue";
-import * as _gx_design_vue_pro_utils9 from "@gx-design-vue/pro-utils";
-import * as ant_design_vue_es__util_type27 from "ant-design-vue/es/_util/type";
+import { CustomRender } from "@gx-design-vue/pro-utils";
+import { ConfigOptions } from "antdv-next/dist/message/interface";
+import { NotificationConfig } from "antdv-next/dist/notification/interface";
 
 //#region src/components/AppPage/index.d.ts
-declare const ProAppPage: vue384.DefineComponent<vue384.ExtractPropTypes<{
+/**
+ * GProAppPage —— 应用级顶层壳。
+ * 包裹整个应用内容（通常为 router-view），提供：
+ * ① 全局滚动容器；② 全局 loading 遮罩；
+ * ③ 经 GProApp context 向后代下发 emptyText / indicator（供 pro-table 等空态/加载态复用）。
+ */
+declare const ProAppPage: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  class: PropType<string>;
+  style: PropType<CSSProperties>;
+  prefixCls: PropType<string>;
   spinning: {
-    type: PropType<{
-      loading?: boolean;
-      style?: CSSProperties;
-      blur?: boolean;
-    }>;
+    type: PropType<AppPageSpinning>;
     default: () => {};
   };
-  class: {
-    type: StringConstructor;
-    default: any;
-  };
-  style: {
-    type: PropType<CSSProperties>;
-    default: any;
-  };
-  emptyText: {
-    type: PropType<_gx_design_vue_pro_utils9.WithFalse<_gx_design_vue_pro_utils9.CustomRender>>;
-    default: any;
-  };
   indicator: {
-    type: PropType<_gx_design_vue_pro_utils9.WithFalse<_gx_design_vue_pro_utils9.CustomRender>>;
+    type: PropType<CustomRender>;
     default: any;
   };
-}>, () => ant_design_vue_es__util_type27.VueNode, {}, {}, {}, vue384.ComponentOptionsMixin, vue384.ComponentOptionsMixin, {}, string, vue384.PublicProps, Readonly<vue384.ExtractPropTypes<{
+  message: PropType<ConfigOptions>;
+  notification: PropType<NotificationConfig>;
+}>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  class: PropType<string>;
+  style: PropType<CSSProperties>;
+  prefixCls: PropType<string>;
   spinning: {
-    type: PropType<{
-      loading?: boolean;
-      style?: CSSProperties;
-      blur?: boolean;
-    }>;
+    type: PropType<AppPageSpinning>;
     default: () => {};
   };
-  class: {
-    type: StringConstructor;
-    default: any;
-  };
-  style: {
-    type: PropType<CSSProperties>;
-    default: any;
-  };
-  emptyText: {
-    type: PropType<_gx_design_vue_pro_utils9.WithFalse<_gx_design_vue_pro_utils9.CustomRender>>;
-    default: any;
-  };
   indicator: {
-    type: PropType<_gx_design_vue_pro_utils9.WithFalse<_gx_design_vue_pro_utils9.CustomRender>>;
+    type: PropType<CustomRender>;
     default: any;
   };
+  message: PropType<ConfigOptions>;
+  notification: PropType<NotificationConfig>;
 }>> & Readonly<{}>, {
-  style: CSSProperties;
-  class: string;
-  spinning: {
-    loading?: boolean;
-    style?: CSSProperties;
-    blur?: boolean;
-  };
-  emptyText: _gx_design_vue_pro_utils9.CustomRender;
-  indicator: _gx_design_vue_pro_utils9.CustomRender;
+  indicator: CustomRender;
+  spinning: AppPageSpinning;
 }, SlotsType<{
   default: () => any;
-  emptyText: () => any;
   indicator: () => any;
-}>, {}, {}, string, vue384.ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 //#endregion
 export { ProAppPage as default };

package/dist/components/AppPage/index.js

@@ -1,71 +1,88 @@
-import { layout } from "../../utils/style/index.js";
 import { provideAppPageContext } from "./context.js";
-import { useStyle } from "./style.js";
+import style_default from "./style.js";
 import { computed, createVNode, defineComponent } from "vue";
-import { classNames, getPrefixCls, getSlotsProps } from "@gx-design-vue/pro-utils";
-import { useStyleTag } from "@vueuse/core";
-import { GProApp, proAppProps, proAppSlots } from "@gx-design-vue/pro-app";
-import { GIcon } from "@gx-design-vue/icon";
-import { GScrollbars } from "@gx-design-vue/scrollbar";
-
+import { useProConfigContext } from "@gx-design-vue/pro-provider";
+import { classNames, getSlotVNode } from "@gx-design-vue/pro-utils";
+import { App, Spin } from "antdv-next";
+import { useBaseConfig } from "antdv-next/config-provider/context";
+import useCSSVarCls from "antdv-next/config-provider/hooks/useCSSVarCls";
+import { GScrollbar } from "@gx-design-vue/scrollbar";
 //#region src/components/AppPage/index.tsx
+const SCROLLBAR_BAR_STYLE = {
+	x: { zIndex: 998 },
+	y: { zIndex: 998 }
+};
+const SCROLLBAR_VIEW_STYLE = {
+	position: "relative",
+	height: "100%",
+	minHeight: "100%"
+};
+/**
+* GProAppPage —— 应用级顶层壳。
+* 包裹整个应用内容（通常为 router-view），提供：
+* ① 全局滚动容器；② 全局 loading 遮罩；
+* ③ 经 GProApp context 向后代下发 emptyText / indicator（供 pro-table 等空态/加载态复用）。
+*/
 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
+		},
+		message: Object,
+		notification: Object
 	},
-	inheritAttrs: false,
 	slots: Object,
-	setup(props, { slots, attrs }) {
-		useStyleTag(layout);
-		const baseClass = getPrefixCls({
-			isPor: true,
-			suffixCls: "app-page"
-		});
-		const { hashId, wrapSSR } = useStyle(baseClass);
+	setup(props, { slots }) {
+		const { prefixCls } = useBaseConfig("pro-app-page", props);
+		const rootCls = useCSSVarCls(prefixCls);
+		const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
+		const configContext = useProConfigContext();
+		const loading = computed(() => props.spinning?.loading ?? false);
 		provideAppPageContext({ spinning: computed(() => props.spinning?.loading) });
-		return () => {
-			const slotsProps = getSlotsProps({
+		const resolvedIndicator = computed(() => {
+			const indicator = getSlotVNode({
 				slots,
-				props,
-				keys: proAppSlots,
-				render: true
+				key: "indicator",
+				props
 			});
-			return wrapSSR(createVNode(GProApp, {
-				"style": attrs.style,
-				"class": classNames(attrs.class, props.spinning?.loading && `${baseClass}-loading`, baseClass, hashId.value),
-				"indicator": slotsProps.indicator ?? createVNode(GIcon, {
-					"type": "spinning",
-					"spin": true,
-					"class": `${baseClass}-spin-dot ${hashId.value}`
-				}, null),
-				"emptyText": slotsProps.emptyText
-			}, { default: () => [createVNode(GScrollbars, {
-				"barStyle": {
-					x: { zIndex: 998 },
-					y: { zIndex: 998 }
-				},
-				"viewStyle": { position: "relative" }
-			}, { default: () => [slots.default?.()] }), props.spinning?.loading && createVNode("div", {
-				"class": classNames(`${baseClass}-blur`, hashId.value),
-				"style": {
-					zIndex: props.spinning?.blur ? 999 : void 0,
-					backgroundColor: props.spinning?.blur ? void 0 : "unset",
-					...props.spinning?.style || {}
-				}
-			}, [createVNode("div", { "class": classNames(`${baseClass}-spin`) }, [slotsProps.indicator ?? createVNode(GIcon, {
-				"type": "spinning",
-				"spin": true,
-				"class": `${baseClass}-spin-dot ${hashId.value}`
-			}, null)])])] }));
-		};
+			if (indicator) return indicator;
+			return typeof configContext?.indicator?.value === "function" ? configContext?.indicator?.value?.() : configContext?.indicator?.value || createVNode(Spin, { "class": `${prefixCls.value}-spin-dot` }, 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(App, {
+			"class": rootClassNames.value,
+			"style": props.style,
+			"message": props.message,
+			"notification": props.notification
+		}, { default: () => [createVNode(GScrollbar, {
+			"barStyle": SCROLLBAR_BAR_STYLE,
+			"viewStyle": SCROLLBAR_VIEW_STYLE
+		}, { default: () => [slots.default?.()] }), loading.value && createVNode("div", {
+			"class": classNames(`${prefixCls.value}-blur`),
+			"style": maskStyle.value
+		}, [createVNode("div", { "class": `${prefixCls.value}-spin` }, [resolvedIndicator.value])])] });
 	}
 });
-var AppPage_default = ProAppPage;
-
 //#endregion
-export { AppPage_default as default };
+export { ProAppPage as default };

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

@@ -1,10 +1,11 @@
-import * as vue391 from "vue";
-import * as ant_design_vue_es__util_type28 from "ant-design-vue/es/_util/type";
+import { ProFullToken } from "@gx-design-vue/pro-provider";
+import { CSSObject } from "@antdv-next/cssinjs";
+import { GenerateStyle } from "antdv-next/dist/theme/internal";
 
 //#region src/components/AppPage/style.d.ts
-declare function useStyle(componentCls: string): {
-  wrapSSR: (node: ant_design_vue_es__util_type28.VueNode) => ant_design_vue_es__util_type28.VueNode;
-  hashId: vue391.ComputedRef<string>;
-};
+type ComponentToken = Record<string, any>;
+/** GProAppPage 样式：应用壳容器 + loading 遮罩。 */
+declare const genAppPageStyle: GenerateStyle<ProFullToken<'ProAppPage'>, CSSObject>;
+declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
 //#endregion
-export { useStyle };
+export { ComponentToken, _default as default, genAppPageStyle };

package/dist/components/AppPage/style.js

@@ -1,10 +1,14 @@
-import { getAlphaColor, useStyle as useStyle$1 } from "@gx-design-vue/pro-provider";
-
+import { proGenStyleHooks } from "@gx-design-vue/pro-provider";
 //#region src/components/AppPage/style.ts
-const pageLoadingStyle = (token) => {
-	return { [token.componentCls]: {
+function withAlpha(color, alpha) {
+	return `color-mix(in srgb, ${color} ${alpha * 100}%, transparent)`;
+}
+/** GProAppPage 样式：应用壳容器 + loading 遮罩。 */
+const genAppPageStyle = (token) => {
+	const { componentCls, colorBgContainer, colorPrimary } = token;
+	return { [componentCls]: {
 		height: "100%",
-		[`&${token.componentCls}-loading`]: {
+		[`&${componentCls}-loading`]: {
 			position: "relative",
 			height: "100%",
 			overflow: "hidden"
@@ -15,26 +19,21 @@ const pageLoadingStyle = (token) => {
 			left: 0,
 			width: "100%",
 			height: "100%",
-			backgroundColor: getAlphaColor(token.colorBgContainer, .5),
-			[`& > ${token.componentCls}-spin`]: {
+			backgroundColor: withAlpha(colorBgContainer, .5),
+			[`& > ${componentCls}-spin`]: {
 				position: "absolute",
 				top: "50%",
 				left: "50%",
 				transform: "translate(-50%, -50%)",
-				[`& > ${token.componentCls}-spin-dot`]: {
+				[`${componentCls}-spin-dot,.anticon`]: {
 					fontSize: 32,
-					".gx-spin-icon": { animationDuration: "0.75s" }
+					[`${token.antCls}-spin-dot,.gx-spin-icon`]: { animationDuration: "0.75s" }
 				},
-				"> *": { color: token.colorPrimary }
+				"> *": { color: colorPrimary }
 			}
 		}
 	} };
 };
-function useStyle(componentCls) {
-	return useStyle$1("AppPage", (token) => {
-		return [pageLoadingStyle(token)];
-	}, componentCls);
-}
-
+var style_default = proGenStyleHooks("ProAppPage", genAppPageStyle);
 //#endregion
-export { useStyle };
+export { style_default as default, genAppPageStyle };

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

@@ -0,0 +1,19 @@
+import { LayoutBreadcrumbProps, LayoutBreadcrumbSlots } from "./interface.js";
+import { SlotsType } from "vue";
+
+//#region src/components/Breadcrumb/index.d.ts
+/**
+ * LayoutBreadcrumb —— 自定义面包屑组件。
+ *
+ * 直接从 layoutContext 读取面包屑路由链、查找表、导航函数和配置，
+ * 无需通过 props 透传数据。支持：
+ * - 图标展示（来自 meta.icon）
+ * - 首页图标（homeIcon 配置）
+ * - 下拉子菜单（有子节点的层级鼠标悬停展示）
+ * - 点击导航（非当前页层级可点击跳转）
+ */
+declare const Breadcrumb: import("vue").DefineSetupFnComponent<LayoutBreadcrumbProps, Record<string, never>, SlotsType<LayoutBreadcrumbSlots>, LayoutBreadcrumbProps & {
+  [x: `on${Capitalize<string>}`]: (...args: unknown[]) => any;
+}, import("vue").PublicProps>;
+//#endregion
+export { Breadcrumb as default };

package/dist/components/Breadcrumb/index.js

@@ -0,0 +1,129 @@
+import { useLayoutBase } from "../../hooks/useLayoutBase.js";
+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 { useRouter } from "vue-router";
+import { GIcon } from "@gx-design-vue/icon";
+//#region src/components/Breadcrumb/index.tsx
+/** 首页占位路由名 */
+const BREADCRUMB_HOME_KEY = "__breadcrumb_home__";
+/** 渲染默认面包屑项内容（图标 + 标题） */
+function renderBreadcrumbItemContent(prefixCls, route) {
+	const iconNode = renderMenuIcon(route.meta?.icon);
+	const isHomeItem = route.name === BREADCRUMB_HOME_KEY;
+	return createVNode(Fragment, null, [iconNode && createVNode("span", { "class": `${prefixCls}-item-icon` }, [iconNode]), !isHomeItem && createVNode("span", null, [route.meta?.title])]);
+}
+/**
+* LayoutBreadcrumb —— 自定义面包屑组件。
+*
+* 直接从 layoutContext 读取面包屑路由链、查找表、导航函数和配置，
+* 无需通过 props 透传数据。支持：
+* - 图标展示（来自 meta.icon）
+* - 首页图标（homeIcon 配置）
+* - 下拉子菜单（有子节点的层级鼠标悬停展示）
+* - 点击导航（非当前页层级可点击跳转）
+*/
+const Breadcrumb = /* @__PURE__ */ defineComponent((props, { slots }) => {
+	const { navigate, prefixCls, menuState, breadcrumbConfig } = useLayoutBase();
+	const router = useRouter();
+	const breadcrumbRoutes = computed(() => props.routes ?? menuState?.breadcrumbRoutes.value ?? []);
+	const homeIconConfig = computed(() => {
+		if (props.homeIcon !== void 0) return props.homeIcon;
+		return breadcrumbConfig ? breadcrumbConfig.value?.showHome : void 0;
+	});
+	const homePath = computed(() => {
+		if (props.homePath !== void 0) return props.homePath;
+		return breadcrumbConfig?.value?.homePath ?? "/";
+	});
+	const lookup = computed(() => menuState?.lookup.value);
+	const selectedKeys = computed(() => menuState?.selectedKeys.value ?? []);
+	const displayRoutes = computed(() => {
+		const routes = breadcrumbRoutes.value;
+		if (homeIconConfig.value && routes.length > 0) return [{
+			name: BREADCRUMB_HOME_KEY,
+			path: "/",
+			meta: {
+				title: "首页",
+				icon: "House"
+			}
+		}, ...routes];
+		return routes;
+	});
+	/**
+	* 获取某路由在完整菜单树中的可见子节点，用于构建 dropdown。
+	* 首页占位项本身没有子节点，不展示 dropdown。
+	*/
+	function getDropdownChildren(route) {
+		if (route.name === BREADCRUMB_HOME_KEY) {
+			const visibleTopMenus = (menuState?.headerMenus.value ?? menuState?.menus.value ?? []).filter((menu) => !menu.meta?.hideInMenu);
+			return visibleTopMenus.length ? visibleTopMenus : void 0;
+		}
+		const visibleChildren = ((lookup.value?.get(route.name))?.route)?.children?.filter((child) => !child.meta?.hideInMenu);
+		return visibleChildren?.length ? visibleChildren : void 0;
+	}
+	/** 点击面包屑项导航 */
+	function handleItemClick(route, isLast) {
+		if (isLast) return;
+		if (route.name === BREADCRUMB_HOME_KEY) {
+			const targetPath = homePath.value;
+			if (router.currentRoute.value.fullPath !== targetPath) router.push(targetPath);
+			return;
+		}
+		navigate?.(route.name);
+	}
+	/** 点击 dropdown 子菜单项导航 */
+	function handleDropdownMenuClick(menuRouteName) {
+		navigate?.(menuRouteName);
+	}
+	return () => {
+		const routes = displayRoutes.value;
+		if (routes.length === 0) return null;
+		const breadcrumbCls = `${prefixCls.value}-breadcrumb`;
+		return createVNode("nav", { "class": classNames(breadcrumbCls) }, [createVNode("ol", null, [routes.map((route, index) => {
+			const isLast = index === routes.length - 1;
+			const dropdownChildren = !isLast ? getDropdownChildren(route) : void 0;
+			const itemContent = slots.itemRender?.({
+				route,
+				index,
+				isLast
+			}) ?? renderBreadcrumbItemContent(breadcrumbCls, route);
+			const dropdownSelectedKeys = dropdownChildren ? dropdownChildren.filter((child) => selectedKeys.value.includes(child.name)).map((child) => child.name) : [];
+			return createVNode(Fragment, null, [createVNode("li", null, [dropdownChildren ? createVNode(Dropdown, { "menu": {
+				items: dropdownChildren.map((child) => ({
+					key: child.name,
+					label: child.meta?.title ?? child.name,
+					icon: renderMenuIcon(child.meta?.icon)
+				})),
+				selectedKeys: dropdownSelectedKeys,
+				onClick: ({ key }) => handleDropdownMenuClick(String(key))
+			} }, { default: () => [createVNode("span", {
+				"class": `${breadcrumbCls}-overlay-link`,
+				"onClick": route.name === BREADCRUMB_HOME_KEY ? () => handleItemClick(route, isLast) : void 0
+			}, [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("/")])]);
+		})])]);
+	};
+}, {
+	props: {
+		routes: {
+			type: Array,
+			required: false
+		},
+		homeIcon: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		homePath: {
+			type: String,
+			required: false
+		}
+	},
+	name: "LayoutBreadcrumb",
+	inheritAttrs: false
+});
+//#endregion
+export { Breadcrumb as default };

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

@@ -0,0 +1,33 @@
+import { LayoutMenuRoute } from "../../interface.js";
+import { WithFalse } from "@gx-design-vue/pro-utils";
+
+//#region src/components/Breadcrumb/interface.d.ts
+interface LayoutBreadcrumbProps {
+  /**
+   * 覆盖 context 的面包屑路由（脱离 ProLayout 独立使用时）。
+   * 默认从 layoutContext.menuState.breadcrumbRoutes 读取。
+   */
+  routes?: LayoutMenuRoute[];
+  /**
+   * 覆盖 context 的首页图标配置。
+   * 默认从 layoutContext.breadcrumb.homeIcon 读取。
+   * - `true`：只显示 lucide House 图标（不展示「首页」文字）
+   * - `false`：不显示首页项
+   */
+  homeIcon?: WithFalse<boolean>;
+  /**
+   * 覆盖 context 的首页点击跳转路径。
+   * 默认从 layoutContext.breadcrumbConfig.homePath 读取，缺省 '/'。
+   */
+  homePath?: string;
+}
+interface LayoutBreadcrumbSlots {
+  /** 自定义每个面包屑项的渲染 */
+  itemRender?: (props: {
+    route: LayoutMenuRoute;
+    index: number;
+    isLast: boolean;
+  }) => any;
+}
+//#endregion
+export { LayoutBreadcrumbProps, LayoutBreadcrumbSlots };

package/dist/components/Breadcrumb/interface.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,4 @@
+//#region src/components/CollapseButton/Arrow.d.ts
+declare function ArrowSvgIcon(): import("vue/jsx-runtime").JSX.Element;
+//#endregion
+export { ArrowSvgIcon };

package/dist/components/{SiderMenu → CollapseButton}/Arrow.js

@@ -1,6 +1,5 @@
 import { createVNode } from "vue";
-
-//#region src/components/SiderMenu/Arrow.tsx
+//#region src/components/CollapseButton/Arrow.tsx
 function ArrowSvgIcon() {
 	return createVNode("svg", {
 		"width": "1em",
@@ -10,6 +9,5 @@ function ArrowSvgIcon() {
 		"aria-hidden": "true"
 	}, [createVNode("path", { "d": "M6.432 7.967a.448.448 0 01-.318.133h-.228a.46.46 0 01-.318-.133L2.488 4.85a.305.305 0 010-.43l.427-.43a.293.293 0 01.42 0L6 6.687l2.665-2.699a.299.299 0 01.426 0l.42.431a.305.305 0 010 .43L6.432 7.967z" }, null)]);
 }
-
 //#endregion
-export { ArrowSvgIcon };
+export { ArrowSvgIcon };

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

@@ -0,0 +1,7 @@
+import { LayoutCollapseButtonEmits, LayoutCollapseButtonProps, LayoutCollapseButtonSlots } from "./interface.js";
+import { SlotsType } from "vue";
+
+//#region src/components/CollapseButton/index.d.ts
+declare const LayoutCollapseButton: import("vue").DefineSetupFnComponent<LayoutCollapseButtonProps, LayoutCollapseButtonEmits, SlotsType<LayoutCollapseButtonSlots>, LayoutCollapseButtonProps, import("vue").PublicProps>;
+//#endregion
+export { LayoutCollapseButton as default };

package/dist/components/CollapseButton/index.js

@@ -0,0 +1,45 @@
+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 { GIcon } from "@gx-design-vue/icon";
+//#region src/components/CollapseButton/index.tsx
+const LayoutCollapseButton = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
+	const { prefixCls, collapseConfig } = useLayoutBase();
+	const placement = computed(() => props.placement ?? collapseConfig?.value?.placement ?? "sider");
+	const collapseButtonClassNames = computed(() => classNames(`${prefixCls.value}-collapse-button`, `${prefixCls.value}-collapse-button-${placement.value}`, props.collapsed && `${prefixCls.value}-collapse-button-${placement.value}-collapsed`));
+	function handleClick(event) {
+		emit("click", event);
+	}
+	return () => {
+		return createVNode("div", {
+			"class": collapseButtonClassNames.value,
+			"role": "button",
+			"tabindex": 0,
+			"aria-label": props.collapsed ? "展开侧边栏" : "收起侧边栏",
+			"onClick": handleClick,
+			"onKeydown": (event) => {
+				if (event.key === "Enter" || event.key === " ") {
+					event.preventDefault();
+					handleClick(event);
+				}
+			}
+		}, [slots.icon?.({ collapsed: props.collapsed }) || placement.value === "sider" ? createVNode(ArrowSvgIcon, null, null) : createVNode(GIcon, { "type": props.collapsed ? "MenuUnfoldOutlined" : "MenuFoldOutlined" }, null)]);
+	};
+}, {
+	props: {
+		collapsed: {
+			type: Boolean,
+			required: true
+		},
+		placement: {
+			type: String,
+			required: false
+		}
+	},
+	emits: ["click"],
+	name: "LayoutCollapseButton",
+	inheritAttrs: false
+});
+//#endregion
+export { LayoutCollapseButton as default };

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

@@ -0,0 +1,19 @@
+//#region src/components/CollapseButton/interface.d.ts
+interface LayoutCollapseButtonEmits {
+  'click': (e: MouseEvent) => void;
+}
+interface LayoutCollapseButtonEmitsProps {
+  onClick?: LayoutCollapseButtonEmits['click'];
+}
+interface LayoutCollapseButtonProps extends LayoutCollapseButtonEmitsProps {
+  collapsed: boolean;
+  /** 折叠按钮位置：优先于 context 的 collapseConfig.placement */
+  placement?: 'sider' | 'header' | 'floating';
+}
+interface LayoutCollapseButtonSlots {
+  icon?: (props: {
+    collapsed: boolean;
+  }) => any;
+}
+//#endregion
+export { LayoutCollapseButtonEmits, LayoutCollapseButtonEmitsProps, LayoutCollapseButtonProps, LayoutCollapseButtonSlots };

package/dist/components/CollapseButton/interface.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+import { LayoutFooterProps, LayoutFooterSlots } from "./interface.js";
+import { EmptyEmits } from "../../interface.js";
+import { SlotsType } from "vue";
+
+//#region src/components/Footer/index.d.ts
+declare const LayoutFooter: import("vue").DefineSetupFnComponent<LayoutFooterProps, EmptyEmits, SlotsType<LayoutFooterSlots>, LayoutFooterProps & {
+  [x: `on${Capitalize<string>}`]: (...args: unknown[]) => any;
+}, import("vue").PublicProps>;
+//#endregion
+export { LayoutFooter as default };