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

package/dist/components/PageContainer/style/stylish.d.ts

@@ -0,0 +1,13 @@
+import * as _$vue from "vue";
+import { ComputedRef } from "vue";
+import { GenerateStyle, ProAliasCssVarToken } from "@antdv-vue/pro-provider";
+
+//#region src/components/PageContainer/style/stylish.d.ts
+interface stylishToken extends ProAliasCssVarToken {}
+declare function useStylish(prefixCls: ComputedRef<string>, {
+  stylish
+}: {
+  stylish?: ComputedRef<GenerateStyle<stylishToken>>;
+}): readonly [_$vue.Ref<string, string>, ComputedRef<string | undefined>];
+//#endregion
+export { stylishToken, useStylish };

package/dist/components/PageContainer/style/stylish.js

@@ -0,0 +1,12 @@
+import { useStyle } from "@antdv-vue/pro-provider";
+import { mergeToken } from "@antdv-next/cssinjs";
+//#region src/components/PageContainer/style/stylish.ts
+function useStylish(prefixCls, { stylish }) {
+	return useStyle("ProLayoutPageContainerStylish", (token) => {
+		const stylishToken = mergeToken(token, {});
+		if (!stylish?.value) return [];
+		return [{ [`div${stylishToken.componentCls}`]: stylish.value?.(stylishToken) }];
+	})(prefixCls);
+}
+//#endregion
+export { useStylish };

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

@@ -0,0 +1,37 @@
+import { BreadcrumbRender } from "../../RenderTypings.js";
+import * as _$vue from "vue";
+import { VNode } from "vue";
+import { AvatarProps, BreadcrumbProps, TagProps } from "antdv-next";
+import { VueNode } from "antdv-next/dist/_util/type";
+import { CustomSlotsType } from "@v-c/util/dist/type";
+import { MouseEventHandler } from "@v-c/util/dist/EventInterface";
+
+//#region src/components/PageHeader/index.d.ts
+interface PageHeaderProps {
+  prefixCls?: string;
+  ghost?: boolean;
+  breadcrumbRender?: BreadcrumbRender;
+  avatar?: AvatarProps & {
+    class?: string;
+  };
+  backIcon?: VueNode;
+  breadcrumb?: BreadcrumbProps;
+  extra?: VueNode | VNode | VNode[];
+  footer?: VueNode;
+  subTitle?: VueNode;
+  tags?: VueNode | VNode<TagProps>;
+  title?: VueNode;
+  onBack?: MouseEventHandler;
+}
+declare const PageHeader: _$vue.DefineSetupFnComponent<PageHeaderProps, {}, CustomSlotsType<{
+  extra?: () => VueNode;
+  footer?: () => VueNode;
+  subTitle?: () => VueNode;
+  title?: () => VueNode;
+  tags?: () => VueNode;
+  backIcon?: () => VueNode;
+  default?: () => VueNode;
+  breadcrumbRender?: BreadcrumbRender;
+}>, PageHeaderProps & {}, _$vue.PublicProps>;
+//#endregion
+export { PageHeaderProps, PageHeader as default };

package/dist/components/PageHeader/index.js

@@ -0,0 +1,221 @@
+import style_default from "./style/index.js";
+import { computed, createVNode, defineComponent, isVNode, mergeProps, onBeforeUnmount, shallowRef } from "vue";
+import { classNames } from "@v-c/util";
+import { Avatar, Breadcrumb, Space } from "antdv-next";
+import { useConfig } from "antdv-next/config-provider/context";
+import { ArrowLeftOutlined, ArrowRightOutlined } from "@antdv-next/icons";
+import ResizeObserver from "@v-c/resize-observer";
+//#region src/components/PageHeader/index.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+function useDestroyed() {
+	const destroyed = shallowRef(false);
+	onBeforeUnmount(() => {
+		destroyed.value = true;
+	});
+	return destroyed;
+}
+function renderBreadcrumb(breadcrumb, prefixCls) {
+	if (!breadcrumb.items?.length) return null;
+	return createVNode(Breadcrumb, mergeProps(breadcrumb, { "class": classNames(`${prefixCls}-breadcrumb`, breadcrumb.class) }), null);
+}
+function getBackIcon(props, direction = "ltr") {
+	if (props.backIcon !== void 0) return props.backIcon;
+	return direction === "rtl" ? createVNode(ArrowRightOutlined, null, null) : createVNode(ArrowLeftOutlined, null, null);
+}
+function renderBack(prefixCls, hashId, cssVarCls, backIcon, onBack) {
+	if (!backIcon || !onBack) return null;
+	return createVNode("div", { "class": classNames(`${prefixCls}-back`, hashId, cssVarCls) }, [createVNode("div", {
+		"role": "button",
+		"onClick": (e) => onBack?.(e),
+		"class": classNames(`${prefixCls}-back-button`, hashId, cssVarCls),
+		"aria-label": "back"
+	}, [backIcon])]);
+}
+function renderTitle(prefixCls, props, direction = "ltr", hashId, cssVarCls) {
+	const { title, avatar, subTitle, tags, extra, onBack } = props;
+	const headingPrefixCls = `${prefixCls}-heading`;
+	const hasHeading = title || subTitle || tags || extra;
+	if (!hasHeading) return null;
+	const backIconDom = renderBack(prefixCls, hashId, cssVarCls, getBackIcon(props, direction), onBack);
+	const hasTitle = backIconDom || avatar || hasHeading;
+	return createVNode("div", { "class": classNames(headingPrefixCls, hashId, cssVarCls) }, [hasTitle && createVNode("div", { "class": classNames(`${headingPrefixCls}-left`, hashId, cssVarCls) }, [
+		backIconDom,
+		avatar && createVNode(Avatar, mergeProps(avatar, { "class": classNames(`${headingPrefixCls}-avatar`, hashId, cssVarCls, avatar.class) }), null),
+		title && createVNode("span", {
+			"class": classNames(`${headingPrefixCls}-title`, hashId, cssVarCls),
+			"title": typeof title === "string" ? title : void 0
+		}, [title]),
+		subTitle && createVNode("span", {
+			"class": classNames(`${headingPrefixCls}-sub-title`, hashId, cssVarCls),
+			"title": typeof subTitle === "string" ? subTitle : void 0
+		}, [subTitle]),
+		tags && createVNode("span", { "class": classNames(`${headingPrefixCls}-tags `, hashId, cssVarCls) }, [tags])
+	]), extra && createVNode("span", { "class": classNames(`${headingPrefixCls}-extra`, hashId, cssVarCls) }, [createVNode(Space, null, _isSlot(extra) ? extra : { default: () => [extra] })])]);
+}
+function renderChildren(prefixCls, children, hashId, cssVarCls) {
+	return createVNode("div", { "class": classNames(`${prefixCls}-content`, hashId, cssVarCls) }, [children]);
+}
+function renderFooter(prefixCls, footer, hashId, cssVarCls) {
+	if (footer) return createVNode("div", { "class": classNames(`${prefixCls}-footer`, hashId, cssVarCls) }, [footer]);
+	return null;
+}
+const PageHeader = /* @__PURE__ */ defineComponent((props, { slots, attrs }) => {
+	const config = useConfig();
+	const prefixCls = computed(() => props.prefixCls || config.value.getPrefixCls("pro"));
+	const baseClassName = computed(() => `${prefixCls.value}-page-header`);
+	const [hashId, cssVarCls] = style_default(baseClassName);
+	const compact = shallowRef(false);
+	const isDestroyed = useDestroyed();
+	const onResize = ({ width }) => {
+		if (!isDestroyed.value) compact.value = width < 768;
+	};
+	const getDefaultBreadcrumbDom = () => {
+		const { breadcrumb } = props;
+		if (breadcrumb?.items) return renderBreadcrumb(breadcrumb, baseClassName.value);
+		return null;
+	};
+	return () => {
+		const { breadcrumb, breadcrumbRender = slots.breadcrumbRender, ghost, footer } = props;
+		const isBreadcrumbComponent = breadcrumb && "props" in breadcrumb;
+		const defaultBreadcrumbDom = getDefaultBreadcrumbDom();
+		const breadcrumbRenderDomFromProps = breadcrumbRender?.({
+			...props,
+			prefixCls: baseClassName.value
+		}, defaultBreadcrumbDom) ?? defaultBreadcrumbDom;
+		const breadcrumbDom = isBreadcrumbComponent ? breadcrumb : breadcrumbRenderDomFromProps;
+		const className = classNames(baseClassName.value, {
+			[`${baseClassName.value}-has-breadcrumb`]: !!breadcrumbDom,
+			[`${baseClassName.value}-has-footer`]: !!footer,
+			[`${baseClassName.value}-ghost`]: ghost,
+			[`${baseClassName.value}-rtl`]: config.value.direction === "rtl",
+			[`${baseClassName.value}-compact`]: compact.value
+		}, attrs.class, hashId?.value, cssVarCls?.value);
+		const title = renderTitle(baseClassName.value, {
+			...props,
+			title: slots.title?.() || props.title,
+			subTitle: slots.subTitle?.() || props.subTitle,
+			extra: slots.extra?.() || props.extra,
+			tags: slots.tags?.() || props.tags,
+			backIcon: slots.backIcon?.() || props.backIcon
+		}, config.value.direction, hashId?.value, cssVarCls?.value);
+		const childDom = slots.default?.() && renderChildren(baseClassName.value, slots.default?.(), hashId?.value, cssVarCls?.value);
+		const footerDom = renderFooter(baseClassName.value, slots.footer?.() || footer, hashId?.value, cssVarCls?.value);
+		if (!breadcrumbDom && !title && !footerDom && !childDom) return createVNode("div", { "class": classNames(`${baseClassName.value}-no-children`, hashId.value, cssVarCls.value) }, null);
+		return createVNode(ResizeObserver, { "onResize": onResize }, { default: () => [createVNode("div", {
+			"class": className,
+			"style": attrs.style
+		}, [
+			breadcrumbDom,
+			title,
+			childDom,
+			footerDom
+		])] });
+	};
+}, {
+	props: {
+		prefixCls: {
+			type: String,
+			required: false
+		},
+		ghost: {
+			type: Boolean,
+			required: false,
+			default: void 0
+		},
+		breadcrumbRender: {
+			type: Function,
+			required: false
+		},
+		avatar: {
+			type: Object,
+			required: false
+		},
+		backIcon: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		breadcrumb: {
+			type: Object,
+			required: false
+		},
+		extra: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean,
+				Array
+			],
+			required: false,
+			default: void 0
+		},
+		footer: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		subTitle: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		tags: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		title: {
+			type: [
+				Function,
+				String,
+				Number,
+				null,
+				Object,
+				Boolean
+			],
+			required: false,
+			default: void 0
+		},
+		onBack: {
+			type: Function,
+			required: false
+		}
+	},
+	name: "PageHeader",
+	inheritAttrs: false
+});
+//#endregion
+export { PageHeader as default };

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

@@ -0,0 +1,17 @@
+import * as _$vue from "vue";
+import { ProAliasCssVarToken } from "@antdv-vue/pro-provider";
+
+//#region src/components/PageHeader/style/index.d.ts
+interface PageHeaderToken extends ProAliasCssVarToken {
+  pageHeaderPadding: number;
+  pageHeaderPaddingVertical: number;
+  pageHeaderBgGhost: string;
+  pageHeaderPaddingBreadCrumb: number;
+  pageHeaderColorBack: string;
+  pageHeaderFontSizeHeaderTitle: number | string;
+  pageHeaderFontSizeHeaderSubTitle: number;
+  pageHeaderPaddingContentPadding: number;
+}
+declare const _default: (prefixCls: _$vue.Ref<string>, rootCls?: _$vue.Ref<string | undefined>) => readonly [_$vue.Ref<string, string>, _$vue.ComputedRef<string | undefined>];
+//#endregion
+export { PageHeaderToken, _default as default };

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

@@ -0,0 +1,132 @@
+import { operationUnit, resetComponent, useStyle } from "@antdv-vue/pro-provider";
+import { mergeToken } from "@antdv-next/cssinjs";
+//#region src/components/PageHeader/style/index.ts
+function textOverflowEllipsis() {
+	return {
+		overflow: "hidden",
+		whiteSpace: "nowrap",
+		textOverflow: "ellipsis"
+	};
+}
+const genPageHeaderStyle = (token) => {
+	return { [token.componentCls]: {
+		...resetComponent?.(token),
+		position: "relative",
+		backgroundColor: token.colorBgContainer,
+		paddingBlock: token.calc(token.pageHeaderPaddingVertical).add(2).equal(),
+		paddingInline: token.pageHeaderPadding,
+		"&&-ghost": { backgroundColor: token.pageHeaderBgGhost },
+		"&-no-children": { height: token.proLayoutPageContainerPaddingBlockPageContainerContent },
+		"&&-has-breadcrumb": { paddingBlockStart: token.pageHeaderPaddingBreadCrumb },
+		"&&-has-footer": { paddingBlockEnd: 0 },
+		"& &-back": {
+			marginInlineEnd: token.margin,
+			fontSize: 16,
+			lineHeight: 1,
+			"&-button": {
+				fontSize: 16,
+				...operationUnit?.(token),
+				color: token.pageHeaderColorBack,
+				cursor: "pointer"
+			},
+			[`${token.componentCls}-rlt &`]: {
+				float: "right",
+				marginInlineEnd: 0,
+				marginInlineStart: 0
+			}
+		},
+		[`& ant-divider-vertical`]: {
+			height: 14,
+			marginBlock: 0,
+			marginInline: token.marginSM,
+			verticalAlign: "middle"
+		},
+		[`& &-breadcrumb + &-heading`]: { marginBlockStart: token.marginXS },
+		"& &-heading": {
+			display: "flex",
+			justifyContent: "space-between",
+			"&-left": {
+				display: "flex",
+				alignItems: "center",
+				marginBlock: token.calc(token.marginXS).div(2).equal(),
+				marginInlineEnd: 0,
+				marginInlineStart: 0,
+				overflow: "hidden"
+			},
+			"&-title": {
+				marginInlineEnd: token.marginSM,
+				marginBlockEnd: 0,
+				color: token.colorTextHeading,
+				fontWeight: 600,
+				fontSize: token.pageHeaderFontSizeHeaderTitle,
+				lineHeight: token.controlHeight,
+				...textOverflowEllipsis(),
+				[`${token.componentCls}-rlt &`]: {
+					marginInlineEnd: 0,
+					marginInlineStart: token.marginSM
+				}
+			},
+			"&-avatar": {
+				marginInlineEnd: token.marginSM,
+				[`${token.componentCls}-rlt &`]: {
+					float: "right",
+					marginInlineEnd: 0,
+					marginInlineStart: token.marginSM
+				}
+			},
+			"&-tags": { [`${token.componentCls}-rlt &`]: { float: "right" } },
+			"&-sub-title": {
+				marginInlineEnd: token.marginSM,
+				color: token.colorTextSecondary,
+				fontSize: token.pageHeaderFontSizeHeaderSubTitle,
+				lineHeight: token.lineHeight,
+				...textOverflowEllipsis(),
+				[`${token.componentCls}-rlt &`]: {
+					float: "right",
+					marginInlineEnd: 0,
+					marginInlineStart: 12
+				}
+			},
+			"&-extra": {
+				marginBlock: token.marginXS / 2,
+				marginInlineEnd: 0,
+				marginInlineStart: 0,
+				whiteSpace: "nowrap",
+				"> *": {
+					"white-space": "unset",
+					[`${token.componentCls}-rlt &`]: {
+						marginInlineEnd: token.marginSM,
+						marginInlineStart: 0
+					}
+				},
+				[`${token.componentCls}-rlt &`]: { float: "left" },
+				"*:first-child": { [`${token.componentCls}-rlt &`]: { marginInlineEnd: 0 } }
+			}
+		},
+		"&-content": { paddingBlockStart: token.pageHeaderPaddingContentPadding },
+		"&-footer": {
+			marginBlockStart: token.margin,
+			[`${token.antCls}-tabs-nav:before`]: { borderBlockEnd: 0 }
+		},
+		"&-compact &-heading": { flexWrap: "wrap" },
+		"&-wide": {
+			maxWidth: 1152,
+			margin: "0 auto"
+		},
+		"&-rtl": { direction: "rtl" }
+	} };
+};
+var style_default = useStyle("ProPageHeader", (token) => {
+	return [genPageHeaderStyle(mergeToken(token, {
+		pageHeaderBgGhost: "transparent",
+		pageHeaderPadding: token.paddingLG,
+		pageHeaderPaddingVertical: token.paddingMD,
+		pageHeaderPaddingBreadCrumb: token.paddingSM,
+		pageHeaderColorBack: token.colorTextHeading,
+		pageHeaderFontSizeHeaderTitle: token.fontSizeHeading4,
+		pageHeaderFontSizeHeaderSubTitle: 14,
+		pageHeaderPaddingContentPadding: token.paddingSM
+	}))];
+});
+//#endregion
+export { style_default as default };

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

@@ -0,0 +1,9 @@
+import { FunctionalComponent } from "vue";
+import { SpinProps } from "antdv-next";
+
+//#region src/components/PageLoading/index.d.ts
+declare const PageLoading: FunctionalComponent<SpinProps & {
+  [key: string]: any;
+}>;
+//#endregion
+export { PageLoading as default };

package/dist/components/PageLoading/index.js

@@ -0,0 +1,15 @@
+import { createVNode, mergeProps } from "vue";
+import { Spin } from "antdv-next";
+//#region src/components/PageLoading/index.tsx
+const PageLoading = ({ isLoading, pastDelay, timedOut, error, retry, ...reset }) => createVNode("div", { "style": {
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	height: "100%",
+	width: "100%",
+	textAlign: "center"
+} }, [createVNode(Spin, mergeProps({ "size": "large" }, reset), null)]);
+PageLoading.displayName = "PageLoading";
+PageLoading.inheritAttrs = false;
+//#endregion
+export { PageLoading as default };

package/dist/components/SettingDrawer/BlockCheckbox.d.ts

@@ -0,0 +1,18 @@
+import { FunctionalComponent, VNode } from "vue";
+
+//#region src/components/SettingDrawer/BlockCheckbox.d.ts
+declare const BlockCheckbox: FunctionalComponent<{
+  list?: {
+    title: string;
+    key: string;
+    icon?: VNode;
+  }[];
+  prefixCls?: string;
+  value?: string;
+  hashId?: string;
+  cssVarCls?: string;
+  configType?: string;
+  onChange?: (value: string) => void;
+}>;
+//#endregion
+export { BlockCheckbox as default };

package/dist/components/SettingDrawer/BlockCheckbox.js

@@ -0,0 +1,25 @@
+import { createVNode } from "vue";
+import { classNames } from "@v-c/util";
+import { Tooltip } from "antdv-next";
+import { CheckOutlined } from "@antdv-next/icons";
+//#region src/components/SettingDrawer/BlockCheckbox.tsx
+const BlockCheckbox = (props) => {
+	const baseClassName = `${props.prefixCls}-block-checkbox`;
+	return createVNode("div", { "class": classNames(baseClassName, props.hashId, props.cssVarCls) }, [(props.list || []).map((item) => createVNode(Tooltip, {
+		"title": item.title,
+		"key": item.key
+	}, { default: () => [createVNode("div", {
+		"class": classNames(props.hashId, props.cssVarCls, `${baseClassName}-item`, `${baseClassName}-item-${item.key}`, `${baseClassName}-${props.configType}-item`),
+		"onClick": () => props.onChange?.(item.key)
+	}, [
+		item.key === "left" && createVNode("div", { "class": classNames(`${baseClassName}-item-left-inner`, props.hashId, props.cssVarCls) }, null),
+		createVNode(CheckOutlined, {
+			"class": classNames(`${baseClassName}-selectIcon`, props.hashId, props.cssVarCls),
+			"style": { display: props.value === item.key ? "block" : "none" }
+		}, null),
+		item?.icon ? createVNode("div", { "class": classNames(`${baseClassName}-icon`, props.hashId, props.cssVarCls) }, [item.icon]) : null
+	])] }))]);
+};
+BlockCheckbox.inheritAttrs = false;
+//#endregion
+export { BlockCheckbox as default };

package/dist/components/SettingDrawer/LayoutChange.d.ts

@@ -0,0 +1,28 @@
+import { PureSettings } from "../../defaultSettings.js";
+import { MessageDescriptor } from "../../typing.js";
+import { FunctionalComponent } from "vue";
+import { VueNode } from "@v-c/util";
+import * as _$vue_jsx_runtime0 from "vue/jsx-runtime";
+
+//#region src/components/SettingDrawer/LayoutChange.d.ts
+interface SettingItemProps {
+  title?: VueNode;
+  action: VueNode;
+  disabled?: boolean;
+  disabledReason?: VueNode;
+}
+declare function getFormatMessage(): ((data: {
+  id: string;
+  defaultMessage?: string;
+}) => string | undefined);
+declare function renderLayoutSettingItem(item: SettingItemProps): _$vue_jsx_runtime0.JSX.Element;
+declare const LayoutSetting: FunctionalComponent<{
+  settings: Partial<PureSettings>;
+  changeSetting: (key: string, value: any) => void;
+  hashId: string;
+  cssVarCls: string;
+  prefixCls: string;
+  formatMessage: (data: MessageDescriptor) => string | undefined;
+}>;
+//#endregion
+export { LayoutSetting, SettingItemProps, getFormatMessage, renderLayoutSettingItem };

package/dist/components/SettingDrawer/LayoutChange.js

@@ -0,0 +1,127 @@
+import defaultSettings from "../../defaultSettings.js";
+import { gLocaleObject } from "../../locales/index.js";
+import { cloneVNode, createVNode, isVNode } from "vue";
+import { classNames } from "@v-c/util";
+import { Flex, Listy, Select, Switch, Tooltip } from "antdv-next";
+//#region src/components/SettingDrawer/LayoutChange.tsx
+function getFormatMessage() {
+	return ({ id, defaultMessage }) => {
+		return gLocaleObject()[id] || defaultMessage;
+	};
+}
+function renderLayoutSettingItem(item) {
+	let action = "";
+	if (isVNode(item.action)) action = cloneVNode(item.action, { disabled: item.disabled });
+	return createVNode(Tooltip, {
+		"title": item.disabled ? item.disabledReason : void 0,
+		"placement": "left"
+	}, { default: () => [createVNode(Flex, {
+		"gap": "middle",
+		"align": "center",
+		"justify": "space-between"
+	}, { default: () => [createVNode("span", { "style": { opacity: item.disabled ? .5 : 1 } }, [item.title]), action] })] });
+}
+const LayoutSetting = ({ settings = {}, prefixCls, formatMessage, changeSetting, cssVarCls, hashId }) => {
+	const { compact, contentWidth, splitMenus, fixedHeader, layout, fixedSiderbar } = settings || defaultSettings;
+	return createVNode(Listy, {
+		"class": classNames(`${prefixCls}-list`, hashId, cssVarCls),
+		"rowKey": (item) => item.title,
+		"styles": { item: {
+			borderBottom: 0,
+			paddingInlineStart: 0,
+			paddingInlineEnd: 0
+		} },
+		"itemRender": (item) => renderLayoutSettingItem(item),
+		"items": [
+			{
+				title: formatMessage({
+					id: "app.setting.content-width",
+					defaultMessage: "内容区域宽度"
+				}),
+				action: createVNode(Select, {
+					"value": contentWidth || "Fixed",
+					"size": "small",
+					"variant": "filled",
+					"class": classNames(`content-width`, hashId, cssVarCls),
+					"onSelect": (value) => changeSetting("contentWidth", value),
+					"style": { width: "80px" },
+					"options": [layout !== "top" ? void 0 : {
+						value: "Fixed",
+						label: formatMessage({
+							id: "app.setting.content-width.fixed",
+							defaultMessage: "固定"
+						})
+					}, {
+						value: "Fluid",
+						label: formatMessage({
+							id: "app.setting.content-width.fluid",
+							defaultMessage: "流式"
+						})
+					}].filter(Boolean)
+				}, null)
+			},
+			{
+				title: formatMessage({
+					id: "app.setting.theme.mode.compact",
+					defaultMessage: "紧凑模式"
+				}),
+				action: createVNode(Switch, {
+					"size": "small",
+					"class": "compact-mode",
+					"checked": !!compact,
+					"onChange": (checked) => changeSetting("compact", checked)
+				}, null)
+			},
+			{
+				title: formatMessage({
+					id: "app.setting.fixedheader",
+					defaultMessage: "固定头部"
+				}),
+				disabled: layout === "mix",
+				disabledReason: formatMessage({
+					id: "app.setting.fixedheader.hint",
+					defaultMessage: "混合模式必须开启固定 Header"
+				}),
+				action: createVNode(Switch, {
+					"size": "small",
+					"class": "fixed-header",
+					"checked": !!fixedHeader,
+					"onChange": (checked) => changeSetting("fixedHeader", checked)
+				}, null)
+			},
+			{
+				title: formatMessage({
+					id: "app.setting.fixedsidebar",
+					defaultMessage: "固定侧边菜单"
+				}),
+				disabled: layout === "top",
+				disabledReason: formatMessage({
+					id: "app.setting.fixedsidebar.hint",
+					defaultMessage: "侧边菜单布局时可配置"
+				}),
+				action: createVNode(Switch, {
+					"size": "small",
+					"class": "fix-sidebar",
+					"checked": !!fixedSiderbar,
+					"onChange": (checked) => changeSetting("fixedSiderbar", checked)
+				}, null)
+			},
+			{
+				title: formatMessage({ id: "app.setting.splitMenus" }),
+				disabled: layout !== "mix",
+				disabledReason: formatMessage({
+					id: "app.setting.layout.mix.hint",
+					defaultMessage: "将菜单分割成Header和Side"
+				}),
+				action: createVNode(Switch, {
+					"size": "small",
+					"checked": !!splitMenus,
+					"class": "split-menus",
+					"onChange": (checked) => changeSetting("splitMenus", checked)
+				}, null)
+			}
+		]
+	}, null);
+};
+//#endregion
+export { LayoutSetting, getFormatMessage, renderLayoutSettingItem };

package/dist/components/SettingDrawer/RegionalChange.d.ts

@@ -0,0 +1,15 @@
+import { RenderSetting } from "../../defaultSettings.js";
+import { MessageDescriptor } from "../../typing.js";
+import { FunctionalComponent } from "vue";
+
+//#region src/components/SettingDrawer/RegionalChange.d.ts
+declare const RegionalSetting: FunctionalComponent<{
+  settings: Partial<RenderSetting>;
+  changeSetting: (key: string, value: any, hideLoading?: boolean) => void;
+  hashId: string;
+  cssVarCls: string;
+  prefixCls: string;
+  formatMessage: (data: MessageDescriptor) => string | undefined;
+}>;
+//#endregion
+export { RegionalSetting as default };