@gx-design-vue/pro-layout 0.1.0-alpha.24 → 0.1.0-alpha.25

package/dist/ProLayout.js

@@ -12,7 +12,7 @@ import style_default from "./style/index.js";
 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 { GProConfigProvider, unit, useProToken } from "@gx-design-vue/pro-provider";
 import { classNames, getSlotsProps } from "@gx-design-vue/pro-utils";
 import { useDark, useMediaQuery, useVModel } from "@vueuse/core";
 import { ConfigProvider, Layout } from "antdv-next";
@@ -32,14 +32,29 @@ const InnerLayout = /* @__PURE__ */ defineComponent((props, { slots }) => {
 		cssVarCls,
 		rootCls
 	});
+	const isWide = computed(() => props.layout === "wide" && !!props.wideContentWidth);
+	const rootStyle = computed(() => ({
+		...props.proStyles?.root,
+		minWidth: isWide.value ? unit(props.wideContentWidth) : void 0
+	}));
+	const headerHeight = computed(() => parentCtx?.header?.value?.height);
+	const layoutStyle = computed(() => {
+		const base = {
+			minHeight: "100%",
+			flexDirection: props.showSider ? "row" : void 0
+		};
+		if (isWide.value) {
+			base.width = unit(props.wideContentWidth);
+			base.margin = "0 auto";
+			if (headerHeight.value) base.paddingBlockStart = `calc(${unit(headerHeight.value)} + 20px)`;
+		}
+		return base;
+	});
 	return () => createVNode("div", {
 		"class": classNames(prefixCls.value, `${prefixCls.value}-${props.layout}`, hashId.value, cssVarCls.value, rootCls.value, props.proClasses?.root),
-		"style": props.proStyles?.root,
+		"style": rootStyle.value,
 		"data-layout": props.layout
-	}, [proLayoutToken.value?.bgLayout && createVNode("div", { "class": `${prefixCls.value}-bg-list` }, null), createVNode(Layout, { "style": {
-		minHeight: "100%",
-		flexDirection: props.showSider ? "row" : void 0
-	} }, { default: () => [slots.default?.()] })]);
+	}, [proLayoutToken.value?.bgLayout && createVNode("div", { "class": `${prefixCls.value}-bg-list` }, null), createVNode(Layout, { "style": layoutStyle.value }, { default: () => [slots.default?.()] })]);
 }, {
 	props: {
 		layout: {
@@ -50,6 +65,10 @@ const InnerLayout = /* @__PURE__ */ defineComponent((props, { slots }) => {
 			type: Boolean,
 			required: true
 		},
+		wideContentWidth: {
+			type: [Number, String],
+			required: false
+		},
 		proClasses: {
 			type: Object,
 			required: false
@@ -73,7 +92,9 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 		};
 	});
 	const layout = computed(() => props.layout ?? "side");
-	const isMobile = useMediaQuery("(max-width: 768px)");
+	const isMobileRaw = useMediaQuery("(max-width: 768px)");
+	/** wide 模式禁用移动端行为 */
+	const isMobile = computed(() => layout.value !== "wide" && isMobileRaw.value);
 	const collapsed = useVModel(props, "collapsed", emit, {
 		passive: true,
 		defaultValue: false
@@ -120,6 +141,12 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 		...DEFAULT_LAYOUT_CONFIG.pageContainer,
 		...props.pageContainer || {}
 	}));
+	/** wide 模式整体内容宽度：取 contentWidth，无值/0 默认 1300 */
+	const wideContentWidth = computed(() => {
+		if (layout.value !== "wide") return void 0;
+		const contentWidth = pageContainerConfig.value.contentWidth;
+		return !contentWidth ? 1300 : contentWidth;
+	});
 	const tabsConf = computed(() => normalizeSectionConfig(props.tabsConfig, DEFAULT_LAYOUT_CONFIG.tabsConfig));
 	const tabsStateConfig = computed(() => tabsConf.value ?? {});
 	const collapsedWidth = computed(() => collapseConfig.value?.width ?? DEFAULT_LAYOUT_CONFIG.collapse.width);
@@ -229,7 +256,8 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 		tabsHeight,
 		setTabsHeight: (value) => {
 			tabsHeight.value = value;
-		}
+		},
+		wideContentWidth
 	});
 	expose({ tabs: tabsState.tabsController });
 	function resolveLayoutSlots() {
@@ -253,6 +281,7 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 		}, { default: () => [createVNode(InnerLayout, {
 			"layout": layout.value,
 			"showSider": showSider.value,
+			"wideContentWidth": wideContentWidth.value,
 			"proClasses": props.proClasses,
 			"proStyles": props.proStyles
 		}, { default: () => [showSider.value && siderWidth.value && createVNode(LayoutSider$1, {
@@ -281,7 +310,7 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 				breadcrumb: slots.breadcrumb,
 				collapseIcon: slots.collapseIcon
 			}),
-			tabsConf.value && createVNode(LayoutTabs, {
+			tabsConf.value && layout.value !== "wide" && createVNode(LayoutTabs, {
 				"config": tabsConf.value,
 				"onReloadPage": () => emit("reloadPage"),
 				"onContentFullscreenChange": (val) => {
@@ -293,14 +322,20 @@ const GProLayout = /* @__PURE__ */ defineComponent((props, { emit, expose, slots
 				default: () => [slots.default?.()],
 				...layoutSlots
 			}),
-			showFooter.value && createVNode(LayoutFooter$1, {
+			!wideContentWidth.value && showFooter.value && createVNode(LayoutFooter$1, {
 				"links": footerConfig.value.links,
 				"copyright": footerConfig.value.copyright
 			}, {
 				footer: layoutSlots.footer,
 				copyright: layoutSlots.copyright
 			})
-		])] })] })] })] });
+		])] }), wideContentWidth.value && showFooter.value && createVNode(LayoutFooter$1, {
+			"links": footerConfig.value.links,
+			"copyright": footerConfig.value.copyright
+		}, {
+			footer: layoutSlots.footer,
+			copyright: layoutSlots.copyright
+		})] })] })] });
 	};
 }, {
 	props: /*@__PURE__*/ mergeDefaults({

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

@@ -40,8 +40,8 @@ declare const ProAppPage: import("vue").DefineComponent<import("vue").ExtractPro
   message: PropType<ConfigOptions>;
   notification: PropType<NotificationConfig>;
 }>> & Readonly<{}>, {
-  indicator: CustomRender;
   spinning: AppPageSpinning;
+  indicator: CustomRender;
 }, SlotsType<{
   default: () => any;
   indicator: () => any;

package/dist/components/Header/index.js

@@ -10,20 +10,20 @@ import { useWindowScroll } from "@vueuse/core";
 import { LayoutHeader } from "antdv-next";
 //#region src/components/Header/index.tsx
 const Header = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
-	const { header, siderWidth, layout, menuState, prefixCls, collapseConfig, collapsed, isMobile, logoConfig, logoTitle, selectedKeys, openKeys, proClasses, proStyles, breadcrumbRender, breadcrumbConfig } = useLayoutBase(props);
+	const { header, siderWidth, wideContentWidth, layout, menuState, prefixCls, collapseConfig, collapsed, isMobile, logoConfig, logoTitle, selectedKeys, openKeys, proClasses, proStyles, breadcrumbRender, breadcrumbConfig } = useLayoutBase(props);
 	const headerMenus = computed(() => menuState?.headerMenus.value ?? []);
 	const breadcrumbItems = computed(() => menuState?.breadcrumbItems.value ?? []);
 	const breadcrumbRoutes = computed(() => menuState?.breadcrumbRoutes.value ?? []);
-	const showLogo = computed(() => ["top"].includes(layout.value ?? "") || [
-		"side",
-		"mix",
-		"wide"
-	].includes(layout.value ?? "") && !siderWidth.value);
+	const showLogo = computed(() => ["top", "wide"].includes(layout.value ?? "") || ["side", "mix"].includes(layout.value ?? "") && !siderWidth.value);
 	const headerStyle = computed(() => {
 		const style = {};
-		if (header.value?.fixed && siderWidth.value && !isMobile.value) style.width = `calc(100% - ${unit(siderWidth.value)})`;
+		if (header.value?.fixed && siderWidth.value && !isMobile.value && layout.value !== "wide") style.width = `calc(100% - ${unit(siderWidth.value)})`;
 		return style;
 	});
+	/** wide 模式 header-main 宽度约束 */
+	const headerMainStyle = computed(() => {
+		if (wideContentWidth?.value) return { width: unit(wideContentWidth.value) };
+	});
 	const headerHidden = ref(false);
 	if (typeof window !== "undefined") {
 		const { y: scrollY } = useWindowScroll();
@@ -75,7 +75,7 @@ const Header = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
 		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": {
+		return createVNode(Fragment, null, [layout.value !== "wide" && header.value?.fixed && createVNode(LayoutHeader, { "style": {
 			background: "transparent",
 			lineHeight: unit(header.value?.height),
 			height: unit(header.value?.height)
@@ -85,7 +85,10 @@ const Header = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
 				...headerStyle.value,
 				...proStyles.value.header
 			}
-		}, { default: () => [createVNode("div", { "class": `${prefixCls.value}-header-main` }, [
+		}, { default: () => [createVNode("div", {
+			"class": `${prefixCls.value}-header-main`,
+			"style": headerMainStyle.value
+		}, [
 			createVNode("div", { "class": `${prefixCls.value}-header-main-left` }, [
 				showLogo.value && logoConfig.value && (typeof logoRender === "function" ? logoRender?.({
 					collapsed: collapsed.value,

package/dist/components/Sider/index.js

@@ -14,6 +14,18 @@ function _isSlot(s) {
 }
 const LayoutSider = /* @__PURE__ */ defineComponent((props, { emit, slots }) => {
 	const { sider, header, layout, menuState, prefixCls, cssVarCls, rootCls, collapseConfig, collapsed, isMobile, logoConfig, logoTitle, selectedKeys, openKeys, proClasses, proStyles, siderWidth, collapsedWidth } = useLayoutBase(props);
+	/** wide 模式 sider sticky 定位样式 */
+	const wideSiderStyle = computed(() => {
+		if (layout.value !== "wide") return void 0;
+		const headerHeight = unit(header.value?.height);
+		return {
+			top: `calc(${headerHeight} + 20px)`,
+			height: `calc(100vh - ${headerHeight} - 20px)`,
+			zIndex: 100
+		};
+	});
+	/** wide 模式下 sider 使用 sticky 而非 fixed */
+	const isWide = computed(() => layout.value === "wide");
 	/** GScrollbar 组件引用，用于获取滚动容器 DOM */
 	const scrollbarRef = shallowRef();
 	/** 滚动阴影状态：上下边缘是否可继续滚动 */
@@ -36,7 +48,7 @@ const LayoutSider = /* @__PURE__ */ defineComponent((props, { emit, slots }) =>
 	useResizeObserver(scrollbarWrapEl, () => updateScrollShadow());
 	useResizeObserver(scrollbarViewEl, () => updateScrollShadow());
 	const siderMenus = computed(() => menuState?.siderMenus.value ?? []);
-	const siderClassNames = computed(() => classNames(`${prefixCls.value}-sider`, proClasses.value.sider, { [`${prefixCls.value}-sider-fixed`]: sider.value?.fixed }));
+	const siderClassNames = computed(() => classNames(`${prefixCls.value}-sider`, proClasses.value.sider, { [`${prefixCls.value}-sider-fixed`]: !isWide.value && sider.value?.fixed }));
 	const siderChildrenClassNames = computed(() => classNames(`${prefixCls.value}-sider-children`, proClasses.value.siderChildren));
 	const siderHeaderClassNames = computed(() => classNames(`${prefixCls.value}-sider-header`, proClasses.value.siderHeader));
 	const siderFooterClassNames = computed(() => classNames(`${prefixCls.value}-sider-footer`, proClasses.value.siderFooter));
@@ -63,11 +75,7 @@ const LayoutSider = /* @__PURE__ */ defineComponent((props, { emit, slots }) =>
 		const collapseRender = slots.collapse || collapseConfig.value?.render;
 		const collapseIconRender = slots.collapseIcon || collapseConfig.value?.icon;
 		return createVNode(Fragment, null, [
-			[
-				"side",
-				"mix",
-				"wide"
-			].includes(layout.value ?? "") && logoConfig.value && createVNode("div", {
+			["side", "mix"].includes(layout.value ?? "") && logoConfig.value && createVNode("div", {
 				"class": siderHeaderClassNames.value,
 				"style": {
 					...proStyles.value.siderHeader,
@@ -108,7 +116,7 @@ const LayoutSider = /* @__PURE__ */ defineComponent((props, { emit, slots }) =>
 				collapsed: collapsed.value,
 				isMobile: isMobile.value
 			})]),
-			collapseConfig.value && collapseConfig.value.placement === "sider" && (collapseRender?.({ collapsed: collapsed.value }) ?? createVNode(LayoutCollapseButton, {
+			layout.value !== "wide" && collapseConfig.value && collapseConfig.value.placement === "sider" && (collapseRender?.({ collapsed: collapsed.value }) ?? createVNode(LayoutCollapseButton, {
 				"collapsed": collapsed.value,
 				"onClick": handleToggleCollapsed
 			}, { icon: collapseIconRender }))
@@ -147,7 +155,7 @@ const LayoutSider = /* @__PURE__ */ defineComponent((props, { emit, slots }) =>
 				"onClose": () => emit("update:collapsed", true)
 			}, _isSlot(_slot = renderSiderChildren()) ? _slot : { default: () => [_slot] });
 		}
-		return createVNode(Fragment, null, [sider.value?.fixed && createVNode("div", { "style": {
+		return createVNode(Fragment, null, [!isWide.value && sider.value?.fixed && createVNode("div", { "style": {
 			width: `${unit(siderWidth.value)}`,
 			overflow: "hidden",
 			flex: `0 0 ${unit(siderWidth.value)}`,
@@ -161,7 +169,10 @@ const LayoutSider = /* @__PURE__ */ defineComponent((props, { emit, slots }) =>
 			"collapsedWidth": collapsedWidth.value,
 			"breakpoint": breakpoint ?? void 0,
 			"class": siderClassNames.value,
-			"style": proStyles.value.sider,
+			"style": {
+				...proStyles.value.sider,
+				...wideSiderStyle.value
+			},
 			"onCollapse": handleSiderCollapse,
 			"onBreakpoint": handleBreakpoint
 		}, _isSlot(_slot2 = renderSiderChildren()) ? _slot2 : { default: () => [_slot2] })]);

package/dist/context/index.d.ts

@@ -47,6 +47,7 @@ interface LayoutContextProps {
   /** 导航到指定菜单名 */
   navigate: (name: string) => void;
   tabsState?: UseTabsStateReturn;
+  wideContentWidth: ComputedRef<number | string | undefined>;
 }
 declare const useProvideLayoutContext: (ctx: LayoutContextProps) => LayoutContextProps, useInjectLayoutContext: () => LayoutContextProps;
 //#endregion

package/dist/hooks/useLayoutBase.d.ts

@@ -13,7 +13,7 @@ declare function useLayoutBase(props?: {
   collapsed?: boolean;
 }): {
   layoutContext: LayoutContextProps;
-  layout: import("vue").ComputedRef<"side" | "top" | "mix" | "wide" | "simple">;
+  layout: import("vue").ComputedRef<"top" | "side" | "mix" | "wide" | "simple">;
   sider: import("vue").ComputedRef<Required<LayoutSiderConfig>>;
   header: import("vue").ComputedRef<Required<LayoutHeaderConfig>>;
   zIndex: import("vue").Ref<number, number>;
@@ -42,13 +42,13 @@ declare function useLayoutBase(props?: {
     sider?: string;
     breadcrumb?: string;
     logo?: string;
-    root?: string;
-    siderChildren?: string;
+    content?: string;
     siderHeader?: string;
     siderFooter?: string;
-    logoImage?: string;
-    content?: string;
     footer?: string;
+    root?: string;
+    siderChildren?: string;
+    logoImage?: string;
     menu?: string;
     tabs?: string;
   }>;
@@ -57,19 +57,20 @@ declare function useLayoutBase(props?: {
     sider?: import("vue").CSSProperties;
     breadcrumb?: import("vue").CSSProperties;
     logo?: import("vue").CSSProperties;
-    root?: import("vue").CSSProperties;
-    siderChildren?: import("vue").CSSProperties;
+    content?: import("vue").CSSProperties;
     siderHeader?: import("vue").CSSProperties;
     siderFooter?: import("vue").CSSProperties;
-    logoImage?: import("vue").CSSProperties;
-    content?: import("vue").CSSProperties;
     footer?: import("vue").CSSProperties;
+    root?: import("vue").CSSProperties;
+    siderChildren?: import("vue").CSSProperties;
+    logoImage?: import("vue").CSSProperties;
     menu?: import("vue").CSSProperties;
     tabs?: import("vue").CSSProperties;
   }>;
   breadcrumbRender: import("vue").Ref<(props: LayoutBreadcrumbSlotProps) => any, (props: LayoutBreadcrumbSlotProps) => any>;
   breadcrumbConfig: import("vue").ComputedRef<LayoutBreadcrumbConfig>;
   pageContainerConfig: import("vue").ComputedRef<LayoutPageContainerConfig>;
+  wideContentWidth: import("vue").ComputedRef<string | number>;
   hasFooterToolbar: import("vue").ComputedRef<boolean>;
   navigate: (name: string) => void;
   setHasFooterToolbar: (value: boolean) => void;

package/dist/hooks/useLayoutBase.js

@@ -24,6 +24,7 @@ function useLayoutBase(props) {
 	const breadcrumbRender = layoutContext?.breadcrumbRender;
 	const breadcrumbConfig = layoutContext?.breadcrumbConfig;
 	const pageContainerConfig = layoutContext?.pageContainerConfig;
+	const wideContentWidth = layoutContext?.wideContentWidth;
 	const collapseConfig = layoutContext?.collapseConfig;
 	const contentFullscreen = layoutContext?.contentFullscreen;
 	const renderRouterView = layoutContext?.renderRouterView;
@@ -77,6 +78,7 @@ function useLayoutBase(props) {
 		breadcrumbRender,
 		breadcrumbConfig,
 		pageContainerConfig,
+		wideContentWidth,
 		hasFooterToolbar,
 		navigate,
 		setHasFooterToolbar