@tmagic/editor 1.8.0-beta.12 → 1.8.0-beta.14

package/dist/tmagic-editor.umd.cjs

@@ -5052,6 +5052,561 @@
 		};
 	};
 	//#endregion
+	//#region packages/editor/src/utils/config.ts
+	var $TMAGIC_EDITOR, isGlobalFlat, setEditorConfig, getEditorConfig;
+	var init_config = __esmMin((() => {
+		$TMAGIC_EDITOR = {};
+		isGlobalFlat = (0, vue.ref)(false);
+		setEditorConfig = (option) => {
+			$TMAGIC_EDITOR = option;
+			isGlobalFlat.value = option.flat ?? false;
+		};
+		getEditorConfig = (key) => $TMAGIC_EDITOR[key];
+	}));
+	//#endregion
+	//#region packages/editor/src/utils/code-block.ts
+	var defaultParamColConfig, getCodeBlockFormConfig;
+	var init_code_block = __esmMin((() => {
+		init_config();
+		defaultParamColConfig = () => (0, _tmagic_form.defineFormItem)({
+			type: "row",
+			label: "参数类型",
+			items: [{
+				text: "参数类型",
+				labelWidth: "70px",
+				type: "select",
+				name: "type",
+				options: [
+					{
+						text: "数字",
+						label: "数字",
+						value: "number"
+					},
+					{
+						text: "字符串",
+						label: "字符串",
+						value: "text"
+					},
+					{
+						text: "组件",
+						label: "组件",
+						value: "ui-select"
+					}
+				]
+			}]
+		});
+		getCodeBlockFormConfig = (options = {}) => {
+			const { paramColConfig, isDataSource, dataSourceType, codeOptions = {}, editable = true } = options;
+			return (0, _tmagic_form.defineFormConfig)([
+				{
+					text: "名称",
+					name: "name",
+					...editable ? { rules: [{
+						required: true,
+						message: "请输入名称",
+						trigger: "blur"
+					}] } : {}
+				},
+				{
+					text: "描述",
+					name: "desc"
+				},
+				{
+					text: "执行时机",
+					name: "timing",
+					type: "select",
+					options: () => {
+						const list = [{
+							text: "初始化前",
+							value: "beforeInit"
+						}, {
+							text: "初始化后",
+							value: "afterInit"
+						}];
+						if (dataSourceType?.() !== "base") {
+							list.push({
+								text: "请求前",
+								value: "beforeRequest"
+							});
+							list.push({
+								text: "请求后",
+								value: "afterRequest"
+							});
+						}
+						return list;
+					},
+					display: () => Boolean(isDataSource?.())
+				},
+				{
+					type: "table",
+					border: true,
+					text: "参数",
+					enableFullscreen: false,
+					enableToggleMode: false,
+					name: "params",
+					dropSort: false,
+					items: [
+						{
+							type: "text",
+							label: "参数名",
+							name: "name"
+						},
+						{
+							type: "text",
+							label: "描述",
+							name: "extra"
+						},
+						paramColConfig || defaultParamColConfig()
+					]
+				},
+				{
+					name: "content",
+					type: "vs-code",
+					options: codeOptions,
+					autosize: {
+						minRows: 10,
+						maxRows: 30
+					},
+					...editable ? { onChange: (_formState, code) => {
+						try {
+							getEditorConfig("parseDSL")(code);
+							return code;
+						} catch (error) {
+							_tmagic_design.tMagicMessage.error(error.message);
+							throw error;
+						}
+					} } : {}
+				}
+			]);
+		};
+	}));
+	//#endregion
+	//#region packages/editor/src/utils/props.ts
+	var arrayOptions, eqOptions, numberOptions, booleanOptions, getCondOpOptionsByFieldType, styleTabConfig, eventTabConfig, advancedTabConfig, displayTabConfig, fillConfig, removeStyleDisplayConfig, validatePropsForm;
+	var init_props = __esmMin((() => {
+		arrayOptions = [{
+			text: "包含",
+			value: "include"
+		}, {
+			text: "不包含",
+			value: "not_include"
+		}];
+		eqOptions = [{
+			text: "等于",
+			value: "="
+		}, {
+			text: "不等于",
+			value: "!="
+		}];
+		numberOptions = [
+			{
+				text: "大于",
+				value: ">"
+			},
+			{
+				text: "大于等于",
+				value: ">="
+			},
+			{
+				text: "小于",
+				value: "<"
+			},
+			{
+				text: "小于等于",
+				value: "<="
+			},
+			{
+				text: "在范围内",
+				value: "between"
+			},
+			{
+				text: "不在范围内",
+				value: "not_between"
+			}
+		];
+		booleanOptions = [{
+			text: "是",
+			value: "is"
+		}, {
+			text: "不是",
+			value: "not"
+		}];
+		getCondOpOptionsByFieldType = (type) => {
+			if (type === "array") return arrayOptions;
+			if (type === "boolean" || type === "null") return booleanOptions;
+			if (type === "number") return [...eqOptions, ...numberOptions];
+			if (type === "string") return [...arrayOptions, ...eqOptions];
+			return [
+				...arrayOptions,
+				...eqOptions,
+				...numberOptions
+			];
+		};
+		styleTabConfig = {
+			title: "样式",
+			lazy: true,
+			display: ({ services }) => !(services?.uiService?.get("showStylePanel") ?? true),
+			items: [{
+				name: "style",
+				labelWidth: "100px",
+				type: "style-setter",
+				items: [{ names: [
+					"display",
+					"flexDirection",
+					"justifyContent",
+					"alignItems",
+					"flexWrap",
+					"marginTop",
+					"marginRight",
+					"marginBottom",
+					"marginLeft",
+					"paddingTop",
+					"paddingRight",
+					"paddingBottom",
+					"paddingLeft",
+					"width",
+					"height",
+					"overflow",
+					"fontSize",
+					"lineHeight",
+					"fontWeight",
+					"color",
+					"textAlign",
+					"backgroundColor",
+					"backgroundImage",
+					"backgroundSize",
+					"backgroundPosition",
+					"backgroundRepeat",
+					"position",
+					"zIndex",
+					"top",
+					"right",
+					"bottom",
+					"left",
+					"borderRadius",
+					"borderTopWidth",
+					"borderTopStyle",
+					"borderTopColor",
+					"borderRightColor",
+					"borderRightWidth",
+					"borderRightStyle",
+					"borderRightColor",
+					"borderBottomWidth",
+					"borderBottomStyle",
+					"borderBottomColor",
+					"borderLeftStyle",
+					"borderLeftWidth",
+					"borderLeftColor",
+					"borderWidth",
+					"borderStyle",
+					"borderColor",
+					"opacity"
+				] }, {
+					name: "transform",
+					defaultValue: () => ({})
+				}]
+			}]
+		};
+		eventTabConfig = {
+			title: "事件",
+			lazy: true,
+			items: [{
+				name: "events",
+				src: "component",
+				labelWidth: "100px",
+				type: "event-select",
+				rules: [{ typeMatch: true }]
+			}]
+		};
+		advancedTabConfig = {
+			title: "高级",
+			lazy: true,
+			items: [
+				{
+					name: _tmagic_core.NODE_DISABLE_CODE_BLOCK_KEY,
+					text: "禁用代码块",
+					type: "switch",
+					labelPosition: "left",
+					defaultValue: false,
+					extra: "开启后，配置的代码块将不会被执行"
+				},
+				{
+					name: _tmagic_core.NODE_DISABLE_DATA_SOURCE_KEY,
+					text: "禁用数据源",
+					type: "switch",
+					labelPosition: "left",
+					defaultValue: false,
+					extra: "开启后，组件内配置的数据源相关配置将不会被编译，显隐条件将失效"
+				},
+				{
+					name: "created",
+					text: "Created",
+					labelPosition: "top",
+					type: "code-select",
+					titleExtra: "组件初始化时执行",
+					rules: [{
+						typeMatch: true,
+						trigger: "change"
+					}, { validator: ({ value, callback }) => {
+						if (value && value.hookType !== _tmagic_core.HookType.CODE) return callback("hookType 必须是 code");
+						callback();
+					} }]
+				},
+				{
+					name: "mounted",
+					text: "Mounted",
+					labelPosition: "top",
+					type: "code-select",
+					titleExtra: "组件挂载到dom时执行",
+					rules: [{
+						typeMatch: true,
+						trigger: "change"
+					}, { validator: ({ value, callback }) => {
+						if (value && value.hookType !== _tmagic_core.HookType.CODE) return callback("hookType 必须是 code");
+						callback();
+					} }]
+				},
+				{
+					name: "display",
+					text: "Display",
+					titleExtra: "控制组件是否渲染，关系的代码块返回值为false时不渲染",
+					labelPosition: "top",
+					type: "code-select",
+					rules: [{
+						typeMatch: true,
+						trigger: "change"
+					}, { validator: ({ value, callback }) => {
+						if (value && value.hookType !== _tmagic_core.HookType.CODE) return callback("hookType 必须是 code");
+						callback();
+					} }]
+				}
+			]
+		};
+		displayTabConfig = {
+			title: "显示条件",
+			display: (_state, { model }) => model.type !== "page",
+			items: [
+				{
+					name: _tmagic_core.NODE_CONDS_RESULT_KEY,
+					type: "select",
+					text: "条件成立时",
+					defaultValue: false,
+					options: [{
+						text: "显示",
+						value: false
+					}, {
+						text: "隐藏",
+						value: true
+					}],
+					extra: (_state, { model }) => `条件成立时${model[_tmagic_core.NODE_CONDS_RESULT_KEY] ? "隐藏" : "显示"}，不成立时${model[_tmagic_core.NODE_CONDS_RESULT_KEY] ? "显示" : "隐藏"}；<br />同一条件组内的所有条件配置同时成立时表示该条件组成立，任意一个条件组成立时表示条件成立(条件组内为且的关系，条件组间为或的关系)；<br />条件为空时表示成立；`
+				},
+				{
+					text: "条件组配置",
+					static: true,
+					className: "display-conds-title"
+				},
+				{
+					type: "display-conds",
+					name: _tmagic_core.NODE_CONDS_KEY,
+					titlePrefix: "条件组",
+					fixed: "right",
+					operateColWidth: 112,
+					defaultValue: [],
+					rules: [{ typeMatch: true }]
+				}
+			]
+		};
+		fillConfig = (config = [], { labelWidth = "80px", disabledDataSource = false, disabledCodeBlock = false } = {}) => {
+			const propsConfig = [];
+			if (!config.find((item) => "name" in item && item.name === "type")) propsConfig.push({
+				text: "type",
+				name: "type",
+				type: "hidden"
+			});
+			if (!config.find((item) => "name" in item && item.name === "id")) propsConfig.push({
+				name: "id",
+				text: "ID",
+				type: "text",
+				static: true,
+				append: {
+					type: "icon",
+					text: "https://vip.image.video.qpic.cn/vupload/20260615/36cf7e1781493669935.svg",
+					extra: "复制",
+					handler: (vm, { model }) => {
+						navigator.clipboard.writeText(`${model.id}`).then(() => {
+							_tmagic_design.tMagicMessage.success("已复制");
+						}).catch(() => {
+							_tmagic_design.tMagicMessage.error("复制失败");
+						});
+					}
+				}
+			});
+			if (!config.find((item) => "name" in item && item.name === "name")) propsConfig.push({
+				name: "name",
+				text: "组件名称"
+			});
+			const noCodeAdvancedTabItems = advancedTabConfig.items.filter((item) => "type" in item && item.type !== "code-select");
+			if (noCodeAdvancedTabItems.length > 0 && disabledCodeBlock) advancedTabConfig.items = noCodeAdvancedTabItems;
+			const tabConfig = {
+				type: "tab",
+				labelWidth,
+				className: "magic-right-panel-tabs-top",
+				items: [
+					{
+						title: "属性",
+						items: [...propsConfig, ...config]
+					},
+					{ ...styleTabConfig },
+					{ ...eventTabConfig }
+				]
+			};
+			if (!disabledCodeBlock) tabConfig.items.push({ ...advancedTabConfig });
+			else if (noCodeAdvancedTabItems.length > 0) tabConfig.items.push({ ...advancedTabConfig });
+			if (!disabledDataSource) tabConfig.items.push({ ...displayTabConfig });
+			return [tabConfig];
+		};
+		removeStyleDisplayConfig = (formConfig) => formConfig.map((item) => {
+			if (!("type" in item)) return item;
+			if (item?.type !== "tab" || !Array.isArray(item.items)) return item;
+			return {
+				...item,
+				items: item.items.map((tabPane) => {
+					if (tabPane?.title !== "样式" || !Array.isArray(tabPane.items)) return tabPane;
+					return {
+						...tabPane,
+						display: true
+					};
+				})
+			};
+		});
+		validatePropsForm = ({ config, values, appContext = null, services, stage, extendState, debug, typeMatchValid }) => (0, _tmagic_form.validateForm)({
+			config,
+			debug,
+			typeMatchValid,
+			initValues: values,
+			appContext: appContext ? {
+				...appContext,
+				provides: { services }
+			} : null,
+			extendState: async (state) => ({
+				...await extendState?.(state) || {},
+				stage,
+				services
+			})
+		});
+	}));
+	//#endregion
+	//#region packages/editor/src/hooks/use-compare-form.ts
+	var useCompareForm;
+	var init_use_compare_form = __esmMin((() => {
+		init_code_block();
+		init_props();
+		useCompareForm = (props) => {
+			(0, vue.provide)("services", props.services);
+			const config = (0, vue.ref)([]);
+			/** vs-code 编辑器的 monaco 配置项，沿用 Editor 顶层 provide('codeOptions', ...) 的注入。 */
+			const codeOptions = (0, vue.inject)("codeOptions", {});
+			/** 将代码块的 content 字段统一成字符串，便于在表单 / 对比中展示 */
+			const normalizeCodeBlockValue = (v) => {
+				if (!v) return {};
+				const next = { ...v };
+				if (next.content && typeof next.content !== "string") try {
+					next.content = next.content.toString();
+				} catch {
+					next.content = "";
+				}
+				return next;
+			};
+			const currentValues = (0, vue.computed)(() => {
+				if (props.category === "code-block") return normalizeCodeBlockValue(props.value);
+				return props.value || {};
+			});
+			/**
+			* 外层包裹层的样式：当传入 `height` 时启用固定高度 + 内部滚动，
+			* 这样滚动条会出现在组件内部，避免父容器（如 Dialog）自身也产生滚动。
+			*/
+			const wrapperStyle = (0, vue.computed)(() => {
+				if (!props.height) return void 0;
+				return {
+					height: props.height,
+					overflow: "auto"
+				};
+			});
+			const mergedExtendState = (state) => {
+				return (props.extendState ?? ((s) => s))(props.baseFormState || state);
+			};
+			/**
+			* 内置的默认 FormConfig 加载逻辑：按 `category` 从对应 service / 工具取配置。
+			* 作为 ctx.defaultLoadConfig 透传给自定义 `loadConfig`，方便复用与二次加工。
+			*/
+			const defaultLoadConfig = async () => {
+				if (!props.services) return [];
+				switch (props.category) {
+					case "node":
+						if (!props.type) return [];
+						return removeStyleDisplayConfig(await props.services.propsService.getPropsConfig(props.type, { node: props.value }));
+					case "data-source": return props.services.dataSourceService.getFormConfig(props.type || "base").map((item) => "type" in item && item.type === "tab" ? {
+						...item,
+						active: "fields"
+					} : item);
+					case "code-block": return getCodeBlockFormConfig({
+						paramColConfig: props.services.codeBlockService.getParamsColConfig(),
+						isDataSource: () => Boolean(props.dataSourceType),
+						dataSourceType: () => props.dataSourceType,
+						codeOptions,
+						editable: false
+					});
+					default: return [];
+				}
+			};
+			const loadConfig = async () => {
+				if (props.loadConfig) {
+					config.value = await props.loadConfig({
+						category: props.category,
+						type: props.type,
+						dataSourceType: props.dataSourceType,
+						defaultLoadConfig
+					});
+					return;
+				}
+				config.value = await defaultLoadConfig();
+			};
+			(0, vue.watch)([
+				() => props.category,
+				() => props.type,
+				() => props.dataSourceType,
+				() => props.loadConfig
+			], () => {
+				loadConfig();
+			}, { immediate: true });
+			const formRef = (0, vue.useTemplateRef)("form");
+			/**
+			* 把 services / stage 注入 MForm 的 formState，避免 propsService 注入的表单配置中
+			* 形如 `display: ({ services }) => services.uiService.get(...)` 的 filterFunction
+			* 在执行时拿不到 `formState.services` 而报错。
+			*
+			* 与 props-panel/FormPanel.vue 中的注入方式保持一致：
+			* - services：整个 useServices() 返回的服务集合；
+			* - stage：当前 editorService.get('stage') 的最新值。
+			*/
+			(0, vue.watchEffect)(() => {
+				if (formRef.value && props.services) {
+					formRef.value.formState.stage = props.services.editorService.get("stage");
+					formRef.value.formState.services = props.services;
+				}
+			});
+			return {
+				config,
+				currentValues,
+				wrapperStyle,
+				mergedExtendState,
+				loadConfig,
+				formRef,
+				normalizeCodeBlockValue
+			};
+		};
+	}));
+	//#endregion
 	//#region packages/editor/src/services/BaseService.ts
 	var methodName = (prefix, name) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
 	var isError = (error) => Object.prototype.toString.call(error) === "[object Error]";
@@ -5140,347 +5695,30 @@
 					return promise;
 				} : (...args) => doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName) });
 			});
-		}
-		usePlugin(options) {
-			for (const [methodName, method] of Object.entries(options)) if (typeof method === "function" && !this.pluginOptionsList[methodName].includes(method)) this.pluginOptionsList[methodName].push(method);
-		}
-		removePlugin(options) {
-			for (const [methodName, method] of Object.entries(options)) if (Array.isArray(this.pluginOptionsList[methodName])) this.pluginOptionsList[methodName] = this.pluginOptionsList[methodName].filter((item) => item !== method);
-		}
-		removeAllPlugins() {
-			for (const key of Object.keys(this.pluginOptionsList)) this.pluginOptionsList[key] = [];
-		}
-		async doTask() {
-			this.doingTask = true;
-			let task = this.taskList.shift();
-			while (task) {
-				await task();
-				task = this.taskList.shift();
-			}
-			this.doingTask = false;
-		}
-	};
-	//#endregion
-	//#region packages/editor/src/utils/props.ts
-	var arrayOptions = [{
-		text: "包含",
-		value: "include"
-	}, {
-		text: "不包含",
-		value: "not_include"
-	}];
-	var eqOptions = [{
-		text: "等于",
-		value: "="
-	}, {
-		text: "不等于",
-		value: "!="
-	}];
-	var numberOptions = [
-		{
-			text: "大于",
-			value: ">"
-		},
-		{
-			text: "大于等于",
-			value: ">="
-		},
-		{
-			text: "小于",
-			value: "<"
-		},
-		{
-			text: "小于等于",
-			value: "<="
-		},
-		{
-			text: "在范围内",
-			value: "between"
-		},
-		{
-			text: "不在范围内",
-			value: "not_between"
-		}
-	];
-	var booleanOptions = [{
-		text: "是",
-		value: "is"
-	}, {
-		text: "不是",
-		value: "not"
-	}];
-	/** 按字段类型返回条件运算符选项（UI 与 typeMatch 校验共用） */
-	var getCondOpOptionsByFieldType = (type) => {
-		if (type === "array") return arrayOptions;
-		if (type === "boolean" || type === "null") return booleanOptions;
-		if (type === "number") return [...eqOptions, ...numberOptions];
-		if (type === "string") return [...arrayOptions, ...eqOptions];
-		return [
-			...arrayOptions,
-			...eqOptions,
-			...numberOptions
-		];
-	};
-	var styleTabConfig = {
-		title: "样式",
-		lazy: true,
-		display: ({ services }) => !(services?.uiService?.get("showStylePanel") ?? true),
-		items: [{
-			name: "style",
-			labelWidth: "100px",
-			type: "style-setter",
-			items: [{ names: [
-				"display",
-				"flexDirection",
-				"justifyContent",
-				"alignItems",
-				"flexWrap",
-				"marginTop",
-				"marginRight",
-				"marginBottom",
-				"marginLeft",
-				"paddingTop",
-				"paddingRight",
-				"paddingBottom",
-				"paddingLeft",
-				"width",
-				"height",
-				"overflow",
-				"fontSize",
-				"lineHeight",
-				"fontWeight",
-				"color",
-				"textAlign",
-				"backgroundColor",
-				"backgroundImage",
-				"backgroundSize",
-				"backgroundPosition",
-				"backgroundRepeat",
-				"position",
-				"zIndex",
-				"top",
-				"right",
-				"bottom",
-				"left",
-				"borderRadius",
-				"borderTopWidth",
-				"borderTopStyle",
-				"borderTopColor",
-				"borderRightColor",
-				"borderRightWidth",
-				"borderRightStyle",
-				"borderRightColor",
-				"borderBottomWidth",
-				"borderBottomStyle",
-				"borderBottomColor",
-				"borderLeftStyle",
-				"borderLeftWidth",
-				"borderLeftColor",
-				"borderWidth",
-				"borderStyle",
-				"borderColor",
-				"opacity"
-			] }, {
-				name: "transform",
-				defaultValue: () => ({})
-			}]
-		}]
-	};
-	var eventTabConfig = {
-		title: "事件",
-		lazy: true,
-		items: [{
-			name: "events",
-			src: "component",
-			labelWidth: "100px",
-			type: "event-select",
-			rules: [{ typeMatch: true }]
-		}]
-	};
-	var advancedTabConfig = {
-		title: "高级",
-		lazy: true,
-		items: [
-			{
-				name: _tmagic_core.NODE_DISABLE_CODE_BLOCK_KEY,
-				text: "禁用代码块",
-				type: "switch",
-				defaultValue: false,
-				extra: "开启后，配置的代码块将不会被执行"
-			},
-			{
-				name: _tmagic_core.NODE_DISABLE_DATA_SOURCE_KEY,
-				text: "禁用数据源",
-				type: "switch",
-				defaultValue: false,
-				extra: "开启后，组件内配置的数据源相关配置将不会被编译，显隐条件将失效"
-			},
-			{
-				name: "created",
-				text: "created",
-				labelPosition: "top",
-				type: "code-select",
-				extra: "组件初始化时执行",
-				rules: [{
-					typeMatch: true,
-					trigger: "change"
-				}, { validator: ({ value, callback }) => {
-					if (value && value.hookType !== _tmagic_core.HookType.CODE) return callback("hookType 必须是 code");
-					callback();
-				} }]
-			},
-			{
-				name: "mounted",
-				text: "mounted",
-				labelPosition: "top",
-				type: "code-select",
-				extra: "组件挂载到dom时执行",
-				rules: [{
-					typeMatch: true,
-					trigger: "change"
-				}, { validator: ({ value, callback }) => {
-					if (value && value.hookType !== _tmagic_core.HookType.CODE) return callback("hookType 必须是 code");
-					callback();
-				} }]
-			},
-			{
-				name: "display",
-				text: "display",
-				extra: "控制组件是否渲染，关系的代码块返回值为false时不渲染",
-				labelPosition: "top",
-				type: "code-select",
-				rules: [{
-					typeMatch: true,
-					trigger: "change"
-				}, { validator: ({ value, callback }) => {
-					if (value && value.hookType !== _tmagic_core.HookType.CODE) return callback("hookType 必须是 code");
-					callback();
-				} }]
-			}
-		]
-	};
-	var displayTabConfig = {
-		title: "显示条件",
-		display: (_state, { model }) => model.type !== "page",
-		items: [{
-			name: _tmagic_core.NODE_CONDS_RESULT_KEY,
-			type: "select",
-			text: "条件成立时",
-			defaultValue: false,
-			options: [{
-				text: "显示",
-				value: false
-			}, {
-				text: "隐藏",
-				value: true
-			}],
-			extra: (_state, { model }) => `条件成立时${model[_tmagic_core.NODE_CONDS_RESULT_KEY] ? "隐藏" : "显示"}，不成立时${model[_tmagic_core.NODE_CONDS_RESULT_KEY] ? "显示" : "隐藏"}；<br />同一条件组内的所有条件配置同时成立时表示该条件组成立，任意一个条件组成立时表示条件成立(条件组内为且的关系，条件组间为或的关系)；<br />条件为空时表示成立；`
-		}, {
-			type: "display-conds",
-			name: _tmagic_core.NODE_CONDS_KEY,
-			titlePrefix: "条件组",
-			defaultValue: [],
-			rules: [{ typeMatch: true }]
-		}]
-	};
-	/**
-	* 统一为组件属性表单加上事件、高级、样式配置
-	* @param config 组件属性配置
-	* @returns Object
-	*/
-	var fillConfig = (config = [], { labelWidth = "80px", disabledDataSource = false, disabledCodeBlock = false } = {}) => {
-		const propsConfig = [];
-		if (!config.find((item) => "name" in item && item.name === "type")) propsConfig.push({
-			text: "type",
-			name: "type",
-			type: "hidden"
-		});
-		if (!config.find((item) => "name" in item && item.name === "id")) propsConfig.push({
-			name: "id",
-			text: "ID",
-			type: "text",
-			disabled: true,
-			append: {
-				type: "button",
-				text: "复制",
-				handler: (vm, { model }) => {
-					navigator.clipboard.writeText(`${model.id}`).then(() => {
-						_tmagic_design.tMagicMessage.success("已复制");
-					}).catch(() => {
-						_tmagic_design.tMagicMessage.error("复制失败");
-					});
-				}
+		}
+		usePlugin(options) {
+			for (const [methodName, method] of Object.entries(options)) if (typeof method === "function" && !this.pluginOptionsList[methodName].includes(method)) this.pluginOptionsList[methodName].push(method);
+		}
+		removePlugin(options) {
+			for (const [methodName, method] of Object.entries(options)) if (Array.isArray(this.pluginOptionsList[methodName])) this.pluginOptionsList[methodName] = this.pluginOptionsList[methodName].filter((item) => item !== method);
+		}
+		removeAllPlugins() {
+			for (const key of Object.keys(this.pluginOptionsList)) this.pluginOptionsList[key] = [];
+		}
+		async doTask() {
+			this.doingTask = true;
+			let task = this.taskList.shift();
+			while (task) {
+				await task();
+				task = this.taskList.shift();
 			}
-		});
-		if (!config.find((item) => "name" in item && item.name === "name")) propsConfig.push({
-			name: "name",
-			text: "组件名称"
-		});
-		const noCodeAdvancedTabItems = advancedTabConfig.items.filter((item) => "type" in item && item.type !== "code-select");
-		if (noCodeAdvancedTabItems.length > 0 && disabledCodeBlock) advancedTabConfig.items = noCodeAdvancedTabItems;
-		const tabConfig = {
-			type: "tab",
-			labelWidth,
-			items: [
-				{
-					title: "属性",
-					items: [...propsConfig, ...config]
-				},
-				{ ...styleTabConfig },
-				{ ...eventTabConfig }
-			]
-		};
-		if (!disabledCodeBlock) tabConfig.items.push({ ...advancedTabConfig });
-		else if (noCodeAdvancedTabItems.length > 0) tabConfig.items.push({ ...advancedTabConfig });
-		if (!disabledDataSource) tabConfig.items.push({ ...displayTabConfig });
-		return [tabConfig];
+			this.doingTask = false;
+		}
 	};
-	/**
-	* 对一份「组件属性表单配置 + 值」做一次独立的校验，**不复用也不污染页面上正在展示的表单**。
-	*
-	* 内部基于 `@tmagic/form` 的 `validateForm` 另建一个独立的 MForm 实例完成校验，并统一处理
-	* 编辑器场景所需的上下文注入：将当前组件实例的 provides 合入 appContext，并向 formState 注入
-	* stage / services 及外部扩展状态，保证校验规则依赖的上下文可用。
-	*
-	* 常用于源码编辑器保存后，对最新配置做一次校验，并将校验结果（错误信息）随提交一并抛给上层记录，
-	* 使源码保存的错误状态与表单编辑保持一致。
-	*
-	* @returns 校验通过返回空字符串 `''`，否则返回以 `<br>` 拼接的错误文案。
-	*   仅在初始化超时或挂载失败等异常情况下才会 reject。
-	*
-	* @example
-	* ```ts
-	* const error = await validatePropsForm({
-	*   config,
-	*   values,
-	*   appContext: getCurrentInstance()?.appContext,
-	*   services,
-	*   stage: editorService.get('stage'),
-	*   extendState,
-	* });
-	* if (error) {
-	*   // 配置不合法，error 为错误文案
-	* }
-	* ```
-	*/
-	var validatePropsForm = ({ config, values, appContext = null, services, stage, extendState, debug, typeMatchValid }) => (0, _tmagic_form.validateForm)({
-		config,
-		debug,
-		typeMatchValid,
-		initValues: values,
-		appContext: appContext ? {
-			...appContext,
-			provides: { services }
-		} : null,
-		extendState: async (state) => ({
-			...await extendState?.(state) || {},
-			stage,
-			services
-		})
-	});
 	//#endregion
 	//#region packages/editor/src/services/props.ts
 	init_lodash();
+	init_props();
 	var canUsePluginMethods$8 = {
 		async: [
 			"setPropsConfig",
@@ -5703,18 +5941,7 @@
 	};
 	var props_default = new Props();
 	//#endregion
-	//#region packages/editor/src/utils/config.ts
-	var $TMAGIC_EDITOR, setEditorConfig, getEditorConfig;
-	var init_config = __esmMin((() => {
-		$TMAGIC_EDITOR = {};
-		setEditorConfig = (option) => {
-			$TMAGIC_EDITOR = option;
-		};
-		getEditorConfig = (key) => $TMAGIC_EDITOR[key];
-	}));
-	//#endregion
 	//#region packages/editor/src/utils/undo-redo.ts
-	init_config();
 	init_lodash();
 	var UndoRedo = class UndoRedo {
 		/**
@@ -6140,6 +6367,7 @@
 	};
 	//#endregion
 	//#region packages/editor/src/services/history.ts
+	init_config();
 	var canUsePluginMethods$7 = { sync: [
 		"push",
 		"undo",
@@ -7469,7 +7697,9 @@
 				data: newNodes.map((node) => ({
 					node,
 					page: this.getPageOfNode(node.id)
-				}))
+				})),
+				historySource,
+				doNotPushHistory
 			});
 			return Array.isArray(addNode) ? newNodes : newNodes[0];
 		}
@@ -7570,7 +7800,9 @@
 			this.emit("remove", nodes);
 			this.emit("change", {
 				type: "remove",
-				data: changeItems
+				data: changeItems,
+				historySource,
+				doNotPushHistory
 			});
 		}
 		async doUpdate(config, { changeRecords = [], historySource } = {}) {
@@ -7663,7 +7895,9 @@
 				data: updateData.map((node) => ({
 					node,
 					page: this.getPageOfNode(node.newNode.id)
-				}))
+				})),
+				historySource,
+				doNotPushHistory
 			});
 			return Array.isArray(config) ? updateData.map((item) => item.newNode) : updateData[0].newNode;
 		}
@@ -7836,7 +8070,9 @@
 					node,
 					page: this.getPageOfNode(node.id)
 				}],
-				offset
+				offset,
+				historySource,
+				doNotPushHistory
 			});
 		}
 		/**
@@ -7974,7 +8210,9 @@
 					page: this.getPageOfNode(node.id)
 				})),
 				targetIndex,
-				targetParent
+				targetParent,
+				historySource,
+				doNotPushHistory
 			});
 		}
 		/**
@@ -8423,10 +8661,12 @@
 		/**
 		* 应用历史操作（撤销 / 重做）
 		*
-		* 所有 DSL 修改都走 `editor.add / remove / update`，并通过 `doNotPushHistory` 阻止再次入栈、
-		* `doNotSelect / doNotSwitchPage` 让选区由方法末尾的统一逻辑兜底。
+		* 删除 / 更新类修改走 `editor.remove / update`，并通过 `doNotPushHistory` 阻止再次入栈、
+		* `doNotSelect / doNotSwitchPage` 让选区由方法末尾的统一逻辑兜底；
+		* 「重新插回节点」（撤销 remove / 重做 add）需按 step 记录的 parentId / index 精确还原，
+		* 不走 this.add，由手工 splice + stage.add 完成后补发等价的 add / change 事件（见 emitHistoryInsertEvents）。
 		*
-		* 注意：这些公开方法会发出 add / remove / update 事件，业务侧若需要区分"用户操作"与"撤销重做触发"，
+		* 注意：这些路径都会发出 add / remove / update / change 事件，业务侧若需要区分"用户操作"与"撤销重做触发"，
 		* 请监听 `history-change` 事件配合判断。
 		*
 		* @param step 操作记录
@@ -8440,7 +8680,8 @@
 			const commonOpts = {
 				doNotSelect: true,
 				doNotSwitchPage: true,
-				doNotPushHistory: true
+				doNotPushHistory: true,
+				historySource: step.source
 			};
 			switch (step.opType) {
 				case "add": {
@@ -8452,12 +8693,15 @@
 					}
 					else {
 						const sorted = [...items].sort((a, b) => (a.index ?? 0) - (b.index ?? 0));
+						const addedNodes = [];
 						for (const { newSchema, parentId, index } of sorted) {
 							if (!newSchema || parentId === void 0) continue;
 							const parent = this.getNodeById(parentId, false);
 							if (parent?.items) {
-								if (typeof index === "number" && index >= 0 && index < parent.items.length) parent.items.splice(index, 0, cloneDeep$1(newSchema));
-								else parent.items.push(cloneDeep$1(newSchema));
+								const addedNode = cloneDeep$1(newSchema);
+								if (typeof index === "number" && index >= 0 && index < parent.items.length) parent.items.splice(index, 0, addedNode);
+								else parent.items.push(addedNode);
+								addedNodes.push(addedNode);
 								await stage?.add({
 									config: cloneDeep$1(newSchema),
 									parent: cloneDeep$1(parent),
@@ -8466,6 +8710,7 @@
 								});
 							}
 						}
+						this.emitHistoryInsertEvents(addedNodes, step.source);
 					}
 					break;
 				}
@@ -8473,11 +8718,14 @@
 					const items = step.diff ?? [];
 					if (reverse) {
 						const sorted = [...items].sort((a, b) => (a.index ?? 0) - (b.index ?? 0));
+						const addedNodes = [];
 						for (const { oldSchema, parentId, index } of sorted) {
 							if (!oldSchema || parentId === void 0) continue;
 							const parent = this.getNodeById(parentId, false);
 							if (parent?.items) {
-								parent.items.splice(index ?? parent.items.length, 0, cloneDeep$1(oldSchema));
+								const addedNode = cloneDeep$1(oldSchema);
+								parent.items.splice(index ?? parent.items.length, 0, addedNode);
+								addedNodes.push(addedNode);
 								await stage?.add({
 									config: cloneDeep$1(oldSchema),
 									parent: cloneDeep$1(parent),
@@ -8486,6 +8734,7 @@
 								});
 							}
 						}
+						this.emitHistoryInsertEvents(addedNodes, step.source);
 					} else for (const { oldSchema } of items) {
 						if (!oldSchema) continue;
 						const existing = this.getNodeById(oldSchema.id, false);
@@ -8512,7 +8761,10 @@
 						}
 						return cloneDeep$1(reverse ? oldNode : newNode);
 					});
-					if (configs.length) await this.update(configs, { doNotPushHistory: true });
+					if (configs.length) await this.update(configs, {
+						doNotPushHistory: true,
+						historySource: step.source
+					});
 					break;
 				}
 			}
@@ -8536,6 +8788,23 @@
 		selectedConfigExceptionHandler(config) {
 			return resolveSelectedNode(config, (id) => this.getNodeInfo(id), this.state.root?.id);
 		}
+		/**
+		* 撤销 remove / 重做 add 通过手工 splice 按 step 记录的 parentId / index 精确还原节点（不走 this.add，原因见调用处注释），
+		* 这里补齐与 this.add 等价的 add / change 事件，保证撤销/重做路径的事件行为与正向操作一致。
+		*/
+		emitHistoryInsertEvents(nodes, source) {
+			if (!nodes.length) return;
+			this.emit("add", nodes);
+			this.emit("change", {
+				type: "add",
+				data: nodes.map((node) => ({
+					node,
+					page: this.getPageOfNode(node.id)
+				})),
+				historySource: source,
+				doNotPushHistory: true
+			});
+		}
 	};
 	var editor_default = new Editor();
 	//#endregion
@@ -8545,9 +8814,9 @@
 	var LEFT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorLeftColumnWidthData";
 	var RIGHT_COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorRightColumnWidthData";
 	var PROPS_PANEL_WIDTH_STORAGE_KEY = "$MagicEditorPropsPanelWidthData";
-	var DEFAULT_LEFT_COLUMN_WIDTH = 310;
+	var DEFAULT_LEFT_COLUMN_WIDTH = 345;
 	var DEFAULT_RIGHT_COLUMN_WIDTH = 480;
-	var MIN_LEFT_COLUMN_WIDTH = 200;
+	var MIN_LEFT_COLUMN_WIDTH = 345;
 	var MIN_CENTER_COLUMN_WIDTH = 400;
 	var MIN_RIGHT_COLUMN_WIDTH = 300;
 	var H_GUIDE_LINE_STORAGE_KEY = "$MagicStageHorizontalGuidelinesData";
@@ -8568,11 +8837,11 @@
 			height: 817
 		},
 		columnWidth: {
-			left: storage_default.getItem("$MagicEditorLeftColumnWidthData", { protocol: Protocol.NUMBER }) || 310,
+			left: 0,
 			center: 0,
-			right: storage_default.getItem("$MagicEditorRightColumnWidthData", { protocol: Protocol.NUMBER }) || 480
+			right: 0
 		},
-		minLeftColumnWidth: 200,
+		minLeftColumnWidth: 345,
 		minCenterColumnWidth: 400,
 		minRightColumnWidth: 300,
 		showGuides: true,
@@ -8597,6 +8866,8 @@
 			top: 0
 		}
 	});
+	state.columnWidth.left = Math.max(storage_default.getItem("$MagicEditorLeftColumnWidthData", { protocol: Protocol.NUMBER }) || 345, state.minLeftColumnWidth);
+	state.columnWidth.right = Math.max(storage_default.getItem("$MagicEditorRightColumnWidthData", { protocol: Protocol.NUMBER }) || 480, state.minRightColumnWidth);
 	var canUsePluginMethods$5 = {
 		async: ["zoom", "calcZoom"],
 		sync: []
@@ -8937,202 +9208,84 @@
 				filter(text);
 			}
 		};
-	};
-	//#endregion
-	//#region packages/editor/src/hooks/use-getso.ts
-	var useGetSo = (target, emit) => {
-		let getso;
-		const isDragging = (0, vue.ref)(false);
-		(0, vue.onMounted)(() => {
-			if (!target.value) return;
-			getso = new gesto.default(target.value, {
-				container: window,
-				pinchOutside: true
-			}).on("drag", (e) => {
-				if (!target.value) return;
-				emit("change", e);
-			}).on("dragStart", () => {
-				isDragging.value = true;
-			}).on("dragEnd", () => {
-				isDragging.value = false;
-			});
-		});
-		(0, vue.onBeforeUnmount)(() => {
-			getso?.unset();
-			isDragging.value = false;
-		});
-		return { isDragging };
-	};
-	//#endregion
-	//#region packages/editor/src/hooks/use-next-float-box-position.ts
-	var useNextFloatBoxPosition = (uiService, parent) => {
-		const boxPosition = (0, vue.ref)({
-			left: 0,
-			top: 0
-		});
-		const calcBoxPosition = () => {
-			const columnWidth = uiService.get("columnWidth");
-			const navMenuRect = uiService.get("navMenuRect");
-			let left = columnWidth.left ?? 0;
-			if (parent?.value) {
-				const rect = parent.value.getBoundingClientRect();
-				left = rect.left + rect.width;
-			}
-			boxPosition.value = {
-				left,
-				top: navMenuRect.top + navMenuRect.height
-			};
-		};
-		return {
-			boxPosition,
-			calcBoxPosition
-		};
-	};
-	//#endregion
-	//#region packages/editor/src/hooks/use-node-status.ts
-	var createPageNodeStatus$1 = (nodeData, initialLayerNodeStatus) => {
-		const map = /* @__PURE__ */ new Map();
-		nodeData.forEach((node) => (0, _tmagic_utils.traverseNode)(node, (node) => {
-			map.set(node.id, initialLayerNodeStatus?.get(node.id) || {
-				visible: true,
-				expand: false,
-				selected: false,
-				draggable: false
-			});
-		}));
-		return map;
-	};
-	var useNodeStatus = (nodeData) => {
-		/** 所有页面的节点状态 */
-		const nodeStatusMap = (0, vue.ref)(/* @__PURE__ */ new Map());
-		(0, vue.watch)(nodeData, (nodeData) => {
-			nodeStatusMap.value = createPageNodeStatus$1(nodeData, nodeStatusMap.value);
-		}, {
-			immediate: true,
-			deep: true
-		});
-		return { nodeStatusMap };
-	};
-	//#endregion
-	//#region packages/editor/src/utils/code-block.ts
-	var defaultParamColConfig, getCodeBlockFormConfig;
-	var init_code_block = __esmMin((() => {
-		init_config();
-		defaultParamColConfig = () => (0, _tmagic_form.defineFormItem)({
-			type: "row",
-			label: "参数类型",
-			items: [{
-				text: "参数类型",
-				labelWidth: "70px",
-				type: "select",
-				name: "type",
-				options: [
-					{
-						text: "数字",
-						label: "数字",
-						value: "number"
-					},
-					{
-						text: "字符串",
-						label: "字符串",
-						value: "text"
-					},
-					{
-						text: "组件",
-						label: "组件",
-						value: "ui-select"
-					}
-				]
-			}]
-		});
-		getCodeBlockFormConfig = (options = {}) => {
-			const { paramColConfig, isDataSource, dataSourceType, codeOptions = {}, editable = true } = options;
-			return (0, _tmagic_form.defineFormConfig)([
-				{
-					text: "名称",
-					name: "name",
-					...editable ? { rules: [{
-						required: true,
-						message: "请输入名称",
-						trigger: "blur"
-					}] } : {}
-				},
-				{
-					text: "描述",
-					name: "desc"
-				},
-				{
-					text: "执行时机",
-					name: "timing",
-					type: "select",
-					options: () => {
-						const list = [{
-							text: "初始化前",
-							value: "beforeInit"
-						}, {
-							text: "初始化后",
-							value: "afterInit"
-						}];
-						if (dataSourceType?.() !== "base") {
-							list.push({
-								text: "请求前",
-								value: "beforeRequest"
-							});
-							list.push({
-								text: "请求后",
-								value: "afterRequest"
-							});
-						}
-						return list;
-					},
-					display: () => Boolean(isDataSource?.())
-				},
-				{
-					type: "table",
-					border: true,
-					text: "参数",
-					enableFullscreen: false,
-					enableToggleMode: false,
-					name: "params",
-					dropSort: false,
-					items: [
-						{
-							type: "text",
-							label: "参数名",
-							name: "name"
-						},
-						{
-							type: "text",
-							label: "描述",
-							name: "extra"
-						},
-						paramColConfig || defaultParamColConfig()
-					]
-				},
-				{
-					name: "content",
-					type: "vs-code",
-					options: codeOptions,
-					autosize: {
-						minRows: 10,
-						maxRows: 30
-					},
-					...editable ? { onChange: (_formState, code) => {
-						try {
-							getEditorConfig("parseDSL")(code);
-							return code;
-						} catch (error) {
-							_tmagic_design.tMagicMessage.error(error.message);
-							throw error;
-						}
-					} } : {}
-				}
-			]);
-		};
-	}));
+	};
+	//#endregion
+	//#region packages/editor/src/hooks/use-getso.ts
+	var useGetSo = (target, emit) => {
+		let getso;
+		const isDragging = (0, vue.ref)(false);
+		(0, vue.onMounted)(() => {
+			if (!target.value) return;
+			getso = new gesto.default(target.value, {
+				container: window,
+				pinchOutside: true
+			}).on("drag", (e) => {
+				if (!target.value) return;
+				emit("change", e);
+			}).on("dragStart", () => {
+				isDragging.value = true;
+			}).on("dragEnd", () => {
+				isDragging.value = false;
+			});
+		});
+		(0, vue.onBeforeUnmount)(() => {
+			getso?.unset();
+			isDragging.value = false;
+		});
+		return { isDragging };
+	};
+	//#endregion
+	//#region packages/editor/src/hooks/use-next-float-box-position.ts
+	var useNextFloatBoxPosition = (uiService, parent) => {
+		const boxPosition = (0, vue.ref)({
+			left: 0,
+			top: 0
+		});
+		const calcBoxPosition = () => {
+			const columnWidth = uiService.get("columnWidth");
+			const navMenuRect = uiService.get("navMenuRect");
+			let left = columnWidth.left ?? 0;
+			if (parent?.value) {
+				const rect = parent.value.getBoundingClientRect();
+				left = rect.left + rect.width;
+			}
+			boxPosition.value = {
+				left,
+				top: navMenuRect.top + navMenuRect.height
+			};
+		};
+		return {
+			boxPosition,
+			calcBoxPosition
+		};
+	};
+	//#endregion
+	//#region packages/editor/src/hooks/use-node-status.ts
+	var createPageNodeStatus$1 = (nodeData, initialLayerNodeStatus) => {
+		const map = /* @__PURE__ */ new Map();
+		nodeData.forEach((node) => (0, _tmagic_utils.traverseNode)(node, (node) => {
+			map.set(node.id, initialLayerNodeStatus?.get(node.id) || {
+				visible: true,
+				expand: false,
+				selected: false,
+				draggable: false
+			});
+		}));
+		return map;
+	};
+	var useNodeStatus = (nodeData) => {
+		/** 所有页面的节点状态 */
+		const nodeStatusMap = (0, vue.ref)(/* @__PURE__ */ new Map());
+		(0, vue.watch)(nodeData, (nodeData) => {
+			nodeStatusMap.value = createPageNodeStatus$1(nodeData, nodeStatusMap.value);
+		}, {
+			immediate: true,
+			deep: true
+		});
+		return { nodeStatusMap };
+	};
 	//#endregion
 	//#region packages/editor/src/utils/logger.ts
-	init_code_block();
 	var log = (...args) => {
 		if (process.env.NODE_ENV === "development") console.log("magic editor: ", ...args);
 	};
@@ -10600,6 +10753,8 @@
 	var dataSource_default = new DataSource();
 	//#endregion
 	//#region packages/editor/src/utils/type-match-rules.ts
+	init_use_compare_form();
+	init_props();
 	/**
 	* 将值格式化为可读的参考示例字符串。
 	*/
@@ -11313,9 +11468,9 @@
 	var SplitView_default = SplitView_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/components/Icon.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$72, Icon_vue_vue_type_script_setup_true_lang_default;
+	var _hoisted_1$76, Icon_vue_vue_type_script_setup_true_lang_default;
 	var init_Icon_vue_vue_type_script_setup_true_lang = __esmMin((() => {
-		_hoisted_1$72 = ["src"];
+		_hoisted_1$76 = ["src"];
 		Icon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 			name: "MEditorIcon",
 			__name: "Icon",
@@ -11333,7 +11488,7 @@
 						key: 1,
 						class: "magic-editor-icon"
 					}, {
-						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("img", { src: __props.icon }, null, 8, _hoisted_1$72)]),
+						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("img", { src: __props.icon }, null, 8, _hoisted_1$76)]),
 						_: 1
 					})) : typeof __props.icon === "string" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("i", {
 						key: 2,
@@ -11360,7 +11515,7 @@
 	//#endregion
 	//#region packages/editor/src/components/ToolButton.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
-	var _hoisted_1$71 = {
+	var _hoisted_1$75 = {
 		key: 1,
 		class: "menu-item-text"
 	};
@@ -11423,7 +11578,7 @@
 				}, [__props.data.type === "divider" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicDivider), {
 					key: 0,
 					direction: __props.data.direction || "vertical"
-				}, null, 8, ["direction"])) : __props.data.type === "text" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$71, (0, vue.toDisplayString)(__props.data.text), 1)) : __props.data.type === "button" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [__props.data.tooltip ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
+				}, null, 8, ["direction"])) : __props.data.type === "text" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$75, (0, vue.toDisplayString)(__props.data.text), 1)) : __props.data.type === "button" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 2 }, [__props.data.tooltip ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
 					key: 0,
 					effect: "dark",
 					placement: "bottom-start",
@@ -11494,7 +11649,7 @@
 	//#region packages/editor/src/layouts/page-bar/AddButton.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
 	init_editor();
-	var _hoisted_1$70 = {
+	var _hoisted_1$74 = {
 		key: 0,
 		id: "m-editor-page-bar-add-icon",
 		class: "m-editor-page-bar-item m-editor-page-bar-item-icon"
@@ -11520,7 +11675,7 @@
 				editorService.add(pageConfig);
 			};
 			return (_ctx, _cache) => {
-				return showAddPageButton.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$70, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicPopover), { "popper-class": "data-source-list-panel-add-menu" }, {
+				return showAddPageButton.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$74, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicPopover), { "popper-class": "data-source-list-panel-add-menu" }, {
 					reference: (0, vue.withCtx)(() => [(0, vue.createVNode)(Icon_default, { icon: (0, vue.unref)(_element_plus_icons_vue.Plus) }, null, 8, ["icon"])]),
 					default: (0, vue.withCtx)(() => [(0, vue.createVNode)(ToolButton_default, { data: {
 						type: "button",
@@ -11546,7 +11701,7 @@
 	//#endregion
 	//#region packages/editor/src/layouts/page-bar/PageBarScrollContainer.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
-	var _hoisted_1$69 = {
+	var _hoisted_1$73 = {
 		class: "m-editor-page-bar",
 		ref: "pageBar"
 	};
@@ -11640,7 +11795,7 @@
 				}
 			});
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$69, [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$73, [
 					(0, vue.renderSlot)(_ctx.$slots, "prepend"),
 					__props.length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$29, [(0, vue.renderSlot)(_ctx.$slots, "default")], 512)) : (0, vue.createCommentVNode)("v-if", true),
 					canScroll.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -11662,13 +11817,13 @@
 	var PageBarScrollContainer_default = PageBarScrollContainer_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/page-bar/PageList.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$68 = {
+	var _hoisted_1$72 = {
 		key: 0,
 		id: "m-editor-page-bar-list-icon",
 		class: "m-editor-page-bar-item m-editor-page-bar-item-icon"
 	};
 	var _hoisted_2$28 = { class: "page-bar-popover-wrapper" };
-	var _hoisted_3$13 = { class: "page-bar-popover-inner" };
+	var _hoisted_3$14 = { class: "page-bar-popover-inner" };
 	var PageList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MEditorPageList",
 		__name: "PageList",
@@ -11681,7 +11836,7 @@
 				await editorService.select(id);
 			};
 			return (_ctx, _cache) => {
-				return showPageListButton.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$68, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicPopover), {
+				return showPageListButton.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$72, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicPopover), {
 					"popper-class": "page-bar-popover",
 					placement: "top",
 					trigger: "hover",
@@ -11692,7 +11847,7 @@
 						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_element_plus_icons_vue.Files))]),
 						_: 1
 					})]),
-					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_2$28, [(0, vue.createElementVNode)("div", _hoisted_3$13, [(0, vue.renderSlot)(_ctx.$slots, "page-list-popover", { list: __props.list }, () => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.list, (item, index) => {
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_2$28, [(0, vue.createElementVNode)("div", _hoisted_3$14, [(0, vue.renderSlot)(_ctx.$slots, "page-list-popover", { list: __props.list }, () => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.list, (item, index) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)(ToolButton_default, {
 							data: {
 								type: "button",
@@ -11714,7 +11869,7 @@
 	//#endregion
 	//#region packages/editor/src/layouts/page-bar/Search.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
-	var _hoisted_1$67 = { class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-search" };
+	var _hoisted_1$71 = { class: "m-editor-page-bar-item m-editor-page-bar-item-icon m-editor-page-bar-search" };
 	var Search_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		__name: "Search",
 		props: {
@@ -11747,7 +11902,7 @@
 				emit("search", values);
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$67, [(0, vue.createVNode)(Icon_default, {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$71, [(0, vue.createVNode)(Icon_default, {
 					icon: (0, vue.unref)(_element_plus_icons_vue.Search),
 					onClick: _cache[0] || (_cache[0] = ($event) => visible.value = !visible.value),
 					class: (0, vue.normalizeClass)({ "icon-active": visible.value })
@@ -11771,10 +11926,10 @@
 	var Search_default = Search_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/page-bar/PageBar.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$66 = { class: "m-editor-page-bar-tabs" };
+	var _hoisted_1$70 = { class: "m-editor-page-bar-tabs" };
 	var _hoisted_2$27 = ["data-page-id", "onClick"];
-	var _hoisted_3$12 = { class: "m-editor-page-bar-title" };
-	var _hoisted_4$9 = ["title"];
+	var _hoisted_3$13 = { class: "m-editor-page-bar-title" };
+	var _hoisted_4$10 = ["title"];
 	var PageBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MEditorPageBar",
 		__name: "PageBar",
@@ -11840,7 +11995,7 @@
 				}
 			});
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$66, [(0, vue.createVNode)(PageBarScrollContainer_default, {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$70, [(0, vue.createVNode)(PageBarScrollContainer_default, {
 					ref: "pageBarScrollContainer",
 					"page-bar-sort-options": __props.pageBarSortOptions,
 					length: list.value.length
@@ -11864,7 +12019,7 @@
 							key: item.id,
 							"data-page-id": item.id,
 							onClick: ($event) => switchPage(item.id)
-						}, [(0, vue.createElementVNode)("div", _hoisted_3$12, [(0, vue.renderSlot)(_ctx.$slots, "page-bar-title", { page: item }, () => [(0, vue.createElementVNode)("span", { title: item.name }, (0, vue.toDisplayString)(item.name || item.id), 9, _hoisted_4$9)])]), (0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicPopover), {
+						}, [(0, vue.createElementVNode)("div", _hoisted_3$13, [(0, vue.renderSlot)(_ctx.$slots, "page-bar-title", { page: item }, () => [(0, vue.createElementVNode)("span", { title: item.name }, (0, vue.toDisplayString)(item.name || item.id), 9, _hoisted_4$10)])]), (0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicPopover), {
 							"popper-class": "page-bar-popover",
 							placement: "top",
 							trigger: "hover",
@@ -11902,7 +12057,7 @@
 	//#region packages/editor/src/layouts/AddPageBox.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
 	init_editor();
-	var _hoisted_1$65 = { class: "m-editor-empty-panel" };
+	var _hoisted_1$69 = { class: "m-editor-empty-panel" };
 	var _hoisted_2$26 = { class: "m-editor-empty-content" };
 	var AddPageBox_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MEditorAddPageBox",
@@ -11920,7 +12075,7 @@
 				});
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$65, [(0, vue.createElementVNode)("div", _hoisted_2$26, [(0, vue.createElementVNode)("div", {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$69, [(0, vue.createElementVNode)("div", _hoisted_2$26, [(0, vue.createElementVNode)("div", {
 					class: "m-editor-empty-button",
 					onClick: _cache[0] || (_cache[0] = ($event) => clickHandler((0, vue.unref)(_tmagic_core.NodeType).PAGE))
 				}, [(0, vue.createElementVNode)("div", null, [(0, vue.createVNode)(Icon_default, { icon: (0, vue.unref)(_element_plus_icons_vue.Plus) }, null, 8, ["icon"])]), _cache[2] || (_cache[2] = (0, vue.createElementVNode)("p", null, "新增页面", -1))]), !__props.disabledPageFragment ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -11936,14 +12091,14 @@
 	var AddPageBox_default = AddPageBox_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/CodeEditor.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$64, _hoisted_2$25, CodeEditor_vue_vue_type_script_setup_true_lang_default;
+	var _hoisted_1$68, _hoisted_2$25, CodeEditor_vue_vue_type_script_setup_true_lang_default;
 	var init_CodeEditor_vue_vue_type_script_setup_true_lang = __esmMin((() => {
 		init_lodash();
 		init_Icon();
 		init_config();
 		init_editor();
 		init_monaco_editor();
-		_hoisted_1$64 = { class: "magic-code-editor" };
+		_hoisted_1$68 = { class: "magic-code-editor" };
 		_hoisted_2$25 = {
 			ref: "codeEditor",
 			class: "magic-code-editor-content"
@@ -12196,7 +12351,7 @@
 					}
 				});
 				return (_ctx, _cache) => {
-					return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$64, [((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, {
+					return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$68, [((0, vue.openBlock)(), (0, vue.createBlock)(vue.Teleport, {
 						to: "body",
 						disabled: !fullScreen.value
 					}, [(0, vue.createElementVNode)("div", {
@@ -12231,11 +12386,6 @@
 	//#region packages/editor/src/layouts/Framework.vue?vue&type=script&setup=true&lang.ts
 	init_config();
 	init_CodeEditor();
-	var _hoisted_1$63 = {
-		class: "m-editor",
-		ref: "content",
-		style: { "min-width": "900px" }
-	};
 	var Framework_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MEditorFramework",
 		__name: "Framework",
@@ -12243,7 +12393,8 @@
 			disabledPageFragment: { type: Boolean },
 			pageBarSortOptions: {},
 			pageFilterFunction: { type: Function },
-			hideSidebar: { type: Boolean }
+			hideSidebar: { type: Boolean },
+			theme: {}
 		},
 		setup(__props) {
 			const props = __props;
@@ -12265,7 +12416,7 @@
 			(0, vue.watch)(() => uiService.get("hideSlideBar"), (hideSlideBar) => {
 				uiService.set("columnWidth", {
 					...columnWidth.value,
-					left: hideSlideBar ? 0 : storageService.getItem("$MagicEditorLeftColumnWidthData", { protocol: Protocol.NUMBER }) || 310
+					left: hideSlideBar ? 0 : storageService.getItem("$MagicEditorLeftColumnWidthData", { protocol: Protocol.NUMBER }) || 345
 				});
 			});
 			const columnWidthChange = (columnW) => {
@@ -12298,7 +12449,15 @@
 				}
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$63, [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					ref: "content",
+					class: (0, vue.normalizeClass)([
+						"m-editor",
+						__props.theme ? `m-editor--${__props.theme}` : "",
+						__props.theme ? `m-theme--${__props.theme}` : ""
+					]),
+					style: { "min-width": "900px" }
+				}, [
 					(0, vue.renderSlot)(_ctx.$slots, "header"),
 					(0, vue.renderSlot)(_ctx.$slots, "nav"),
 					(0, vue.renderSlot)(_ctx.$slots, "content-before"),
@@ -12357,7 +12516,7 @@
 					]), [[vue.vShow, !showSrc.value]]),
 					(0, vue.renderSlot)(_ctx.$slots, "content-after"),
 					(0, vue.renderSlot)(_ctx.$slots, "footer")
-				], 512);
+				], 2);
 			};
 		}
 	});
@@ -12547,15 +12706,15 @@
 	};
 	//#endregion
 	//#region packages/editor/src/layouts/history-list/GroupRow.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$62 = ["title"];
+	var _hoisted_1$67 = ["title"];
 	var _hoisted_2$24 = ["title"];
-	var _hoisted_3$11 = { class: "m-editor-history-list-item-desc" };
-	var _hoisted_4$8 = {
+	var _hoisted_3$12 = { class: "m-editor-history-list-item-desc" };
+	var _hoisted_4$9 = {
 		key: 0,
 		class: "m-editor-history-list-item-saved",
 		title: "该记录为最近一次保存的状态"
 	};
-	var _hoisted_5$4 = {
+	var _hoisted_5$5 = {
 		key: 1,
 		class: "m-editor-history-list-item-actions"
 	};
@@ -12715,9 +12874,9 @@
 						title: headIndexTitle.value
 					}, (0, vue.toDisplayString)(headIndexLabel.value), 9, _hoisted_2$24),
 					(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(["m-editor-history-list-item-op", `op-${__props.group.opType}`]) }, (0, vue.toDisplayString)((0, vue.unref)(opLabel)(__props.group.opType)), 3),
-					(0, vue.createElementVNode)("span", _hoisted_3$11, (0, vue.toDisplayString)(__props.group.desc), 1),
-					headSaved.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4$8, "已保存")) : (0, vue.createCommentVNode)("v-if", true),
-					!merged.value && (headRevertable.value || headDiffable.value || canHeadGoto.value) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5$4, [
+					(0, vue.createElementVNode)("span", _hoisted_3$12, (0, vue.toDisplayString)(__props.group.desc), 1),
+					headSaved.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4$9, "已保存")) : (0, vue.createCommentVNode)("v-if", true),
+					!merged.value && (headRevertable.value || headDiffable.value || canHeadGoto.value) ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_5$5, [
 						headRevertable.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 							key: 0,
 							class: "m-editor-history-list-item-revert",
@@ -12757,7 +12916,7 @@
 						key: 6,
 						class: (0, vue.normalizeClass)(["m-editor-history-list-group-toggle", { "is-expanded": __props.expanded }])
 					}, "▾", 2)) : (0, vue.createCommentVNode)("v-if", true)
-				], 10, _hoisted_1$62), merged.value && __props.expanded ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("ul", _hoisted_10, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(subStepsDisplay.value, (s) => {
+				], 10, _hoisted_1$67), merged.value && __props.expanded ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("ul", _hoisted_10, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(subStepsDisplay.value, (s) => {
 					return (0, vue.openBlock)(), (0, vue.createElementBlock)("li", {
 						key: s.index,
 						class: (0, vue.normalizeClass)({
@@ -12816,18 +12975,18 @@
 	var GroupRow_default = GroupRow_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/history-list/InitialRow.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$61 = ["title"];
+	var _hoisted_1$66 = ["title"];
 	var _hoisted_2$23 = { class: "m-editor-history-list-item-desc" };
-	var _hoisted_3$10 = {
+	var _hoisted_3$11 = {
 		key: 0,
 		class: "m-editor-history-list-item-saved",
 		title: "该记录为最近一次保存的状态"
 	};
-	var _hoisted_4$7 = {
+	var _hoisted_4$8 = {
 		key: 1,
 		class: "m-editor-history-list-item-actions"
 	};
-	var _hoisted_5$3 = ["title"];
+	var _hoisted_5$4 = ["title"];
 	var InitialRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MEditorHistoryListInitialRow",
 		__name: "InitialRow",
@@ -12879,8 +13038,8 @@
 					}, "#0", -1)),
 					_cache[1] || (_cache[1] = (0, vue.createElementVNode)("span", { class: "m-editor-history-list-item-op op-initial" }, "初始", -1)),
 					(0, vue.createElementVNode)("span", _hoisted_2$23, (0, vue.toDisplayString)(desc.value), 1),
-					saved.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$10, "已保存")) : (0, vue.createCommentVNode)("v-if", true),
-					__props.gotoEnabled && !__props.isCurrent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4$7, [(0, vue.createElementVNode)("span", {
+					saved.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$11, "已保存")) : (0, vue.createCommentVNode)("v-if", true),
+					__props.gotoEnabled && !__props.isCurrent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_4$8, [(0, vue.createElementVNode)("span", {
 						class: "m-editor-history-list-item-goto",
 						title: "回到该记录",
 						onClick: (0, vue.withModifiers)(onClick, ["stop"])
@@ -12889,8 +13048,8 @@
 						key: 2,
 						class: "m-editor-history-list-item-time",
 						title: timeTitle.value
-					}, (0, vue.toDisplayString)(time.value), 9, _hoisted_5$3)) : (0, vue.createCommentVNode)("v-if", true)
-				], 10, _hoisted_1$61);
+					}, (0, vue.toDisplayString)(time.value), 9, _hoisted_5$4)) : (0, vue.createCommentVNode)("v-if", true)
+				], 10, _hoisted_1$66);
 			};
 		}
 	});
@@ -12899,10 +13058,10 @@
 	var InitialRow_default = InitialRow_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/history-list/Bucket.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$60 = { class: "m-editor-history-list-bucket" };
+	var _hoisted_1$65 = { class: "m-editor-history-list-bucket" };
 	var _hoisted_2$22 = { class: "m-editor-history-list-bucket-title" };
-	var _hoisted_3$9 = { class: "m-editor-history-list-bucket-count" };
-	var _hoisted_4$6 = { class: "m-editor-history-list-ul" };
+	var _hoisted_3$10 = { class: "m-editor-history-list-bucket-count" };
+	var _hoisted_4$7 = { class: "m-editor-history-list-ul" };
 	var Bucket_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MEditorHistoryListBucket",
 		__name: "Bucket",
@@ -12931,11 +13090,11 @@
 			/** 该 bucket 是否处于初始状态（栈 cursor=0），等价于全部 group 都未 applied。 */
 			const isInitial = (0, vue.computed)(() => props.groups.length > 0 && props.groups.every((g) => !g.applied));
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$60, [(0, vue.createElementVNode)("div", _hoisted_2$22, [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$65, [(0, vue.createElementVNode)("div", _hoisted_2$22, [
 					(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(__props.config.title), 1),
 					(0, vue.createElementVNode)("code", null, (0, vue.toDisplayString)(String(__props.bucketId)), 1),
-					(0, vue.createElementVNode)("span", _hoisted_3$9, (0, vue.toDisplayString)(__props.groups.length) + " 组", 1)
-				]), (0, vue.createElementVNode)("ul", _hoisted_4$6, [
+					(0, vue.createElementVNode)("span", _hoisted_3$10, (0, vue.toDisplayString)(__props.groups.length) + " 组", 1)
+				]), (0, vue.createElementVNode)("ul", _hoisted_4$7, [
 					((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.groups, (group) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)(GroupRow_default, {
 							key: rowKey(group),
@@ -12968,7 +13127,7 @@
 	var Bucket_default = Bucket_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/history-list/BucketTab.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$59 = {
+	var _hoisted_1$64 = {
 		key: 0,
 		class: "m-editor-history-list-empty"
 	};
@@ -12976,7 +13135,7 @@
 		key: 0,
 		class: "m-editor-history-list-toolbar"
 	};
-	var _hoisted_3$8 = ["title"];
+	var _hoisted_3$9 = ["title"];
 	var BucketTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MEditorHistoryListBucketTab",
 		__name: "BucketTab",
@@ -12995,11 +13154,11 @@
 		],
 		setup(__props) {
 			return (_ctx, _cache) => {
-				return !__props.buckets.length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$59, "暂无操作记录")) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [__props.config.showClear !== false ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$21, [(0, vue.createElementVNode)("span", {
+				return !__props.buckets.length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$64, "暂无操作记录")) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [__props.config.showClear !== false ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$21, [(0, vue.createElementVNode)("span", {
 					class: "m-editor-history-list-clear",
 					title: `清空${__props.config.title}的历史记录`,
 					onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("clear"))
-				}, "清空", 8, _hoisted_3$8)])) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicScrollbar), { "max-height": "360px" }, {
+				}, "清空", 8, _hoisted_3$9)])) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicScrollbar), { "max-height": "360px" }, {
 					default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.buckets, (bucket) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)(Bucket_default, {
 							key: `${__props.config.prefix}-${bucket.id}`,
@@ -13029,7 +13188,7 @@
 	var BucketTab_default = BucketTab_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/history-list/PageTab.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$58 = {
+	var _hoisted_1$63 = {
 		key: 0,
 		class: "m-editor-history-list-empty"
 	};
@@ -13037,7 +13196,7 @@
 		key: 0,
 		class: "m-editor-history-list-toolbar"
 	};
-	var _hoisted_3$7 = { class: "m-editor-history-list-ul" };
+	var _hoisted_3$8 = { class: "m-editor-history-list-ul" };
 	var PageTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MEditorHistoryListPageTab",
 		__name: "PageTab",
@@ -13085,12 +13244,12 @@
 			*/
 			const isInitial = (0, vue.computed)(() => props.list.every((g) => !g.applied));
 			return (_ctx, _cache) => {
-				return !__props.list.length && !__props.marker ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$58, "暂无操作记录")) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [__props.list.length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$20, [(0, vue.createElementVNode)("span", {
+				return !__props.list.length && !__props.marker ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$63, "暂无操作记录")) : ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, [__props.list.length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$20, [(0, vue.createElementVNode)("span", {
 					class: "m-editor-history-list-clear",
 					title: "清空当前页面的历史记录",
 					onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("clear"))
 				}, "清空")])) : (0, vue.createCommentVNode)("v-if", true), (0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicScrollbar), { "max-height": "360px" }, {
-					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("ul", _hoisted_3$7, [
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("ul", _hoisted_3$8, [
 						((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.list, (group) => {
 							return (0, vue.openBlock)(), (0, vue.createBlock)(GroupRow_default, {
 								key: rowKey(group),
@@ -13182,59 +13341,27 @@
 			__name: "CompareForm",
 			props: {
 				value: {},
-				lastValue: {},
 				type: {},
 				category: { default: "node" },
 				dataSourceType: {},
 				labelWidth: { default: "120px" },
 				height: {},
-				extendState: {
-					type: Function,
-					default: (state) => state
-				},
+				extendState: {},
 				baseFormState: {},
-				selfDiffFieldTypes: {},
 				size: {},
 				loadConfig: {},
-				services: {}
+				services: {},
+				lastValue: {},
+				selfDiffFieldTypes: {}
 			},
 			setup(__props, { expose: __expose }) {
 				const props = __props;
-				(0, vue.provide)("services", props.services);
-				const config = (0, vue.ref)([]);
-				/** vs-code 编辑器的 monaco 配置项，沿用 Editor 顶层 provide('codeOptions', ...) 的注入。 */
-				const codeOptions = (0, vue.inject)("codeOptions", {});
-				/** 将代码块的 content 字段统一成字符串，便于在表单/对比中展示 */
-				const normalizeCodeBlockValue = (v) => {
-					if (!v) return {};
-					const next = { ...v };
-					if (next.content && typeof next.content !== "string") try {
-						next.content = next.content.toString();
-					} catch {
-						next.content = "";
-					}
-					return next;
-				};
-				const currentValues = (0, vue.computed)(() => {
-					if (props.category === "code-block") return normalizeCodeBlockValue(props.value);
-					return props.value || {};
-				});
+				const { config, currentValues, wrapperStyle, mergedExtendState, loadConfig, formRef, normalizeCodeBlockValue } = useCompareForm(props);
 				const lastValuesProcessed = (0, vue.computed)(() => {
 					if (props.category === "code-block") return normalizeCodeBlockValue(props.lastValue);
 					return props.lastValue || {};
 				});
 				/**
-				* 外层包裹层的样式：当传入 `height` 时启用固定高度 + 内部滚动，
-				* 这样滚动条会出现在 CompareForm 内部，避免父容器（如 Dialog）自身也产生滚动。
-				*/
-				const wrapperStyle = (0, vue.computed)(() => {
-					if (!props.height) return void 0;
-					return {
-						height: props.height,
-						overflow: "auto"
-					};
-				});
-				/**
 				* `code-select` 字段在历史数据中存在两种"语义为空"的形态：
 				* - 字符串 `''`（旧数据 / 用户从未配置过钩子）；
 				* - `{ hookType: HookType.CODE, hookData: [] }`（CodeSelect.vue 在挂载时
@@ -13257,83 +13384,6 @@
 					}
 					return !isEqual(curValue, lastValue);
 				};
-				const removeStyleDisplayConfig = (formConfig) => formConfig.map((item) => {
-					if (!("type" in item)) return item;
-					if (item?.type !== "tab" || !Array.isArray(item.items)) return item;
-					return {
-						...item,
-						items: item.items.map((tabPane) => {
-							if (tabPane?.title !== "样式" || !Array.isArray(tabPane.items)) return tabPane;
-							return {
-								...tabPane,
-								display: true
-							};
-						})
-					};
-				});
-				const mergedExtendState = (state) => {
-					return props.extendState(props.baseFormState || state);
-				};
-				/**
-				* 内置的默认 FormConfig 加载逻辑：按 `category` 从对应 service / 工具取配置。
-				* 作为 ctx.defaultLoadConfig 透传给自定义 `loadConfig`，方便复用与二次加工。
-				*/
-				const defaultLoadConfig = async () => {
-					if (!props.services) return [];
-					switch (props.category) {
-						case "node":
-							if (!props.type) return [];
-							return removeStyleDisplayConfig(await props.services.propsService.getPropsConfig(props.type, { node: props.value }));
-						case "data-source": return props.services.dataSourceService.getFormConfig(props.type || "base").map((item) => "type" in item && item.type === "tab" ? {
-							...item,
-							active: "fields"
-						} : item);
-						case "code-block": return getCodeBlockFormConfig({
-							paramColConfig: props.services.codeBlockService.getParamsColConfig(),
-							isDataSource: () => Boolean(props.dataSourceType),
-							dataSourceType: () => props.dataSourceType,
-							codeOptions,
-							editable: false
-						});
-						default: return [];
-					}
-				};
-				const loadConfig = async () => {
-					if (props.loadConfig) {
-						config.value = await props.loadConfig({
-							category: props.category,
-							type: props.type,
-							dataSourceType: props.dataSourceType,
-							defaultLoadConfig
-						});
-						return;
-					}
-					config.value = await defaultLoadConfig();
-				};
-				(0, vue.watch)([
-					() => props.category,
-					() => props.type,
-					() => props.dataSourceType,
-					() => props.loadConfig
-				], () => {
-					loadConfig();
-				}, { immediate: true });
-				const formRef = (0, vue.useTemplateRef)("form");
-				/**
-				* 把 services / stage 注入 MForm 的 formState，避免 propsService 注入的表单配置中
-				* 形如 `display: ({ services }) => services.uiService.get(...)` 的 filterFunction
-				* 在执行时拿不到 `formState.services` 而报错。
-				*
-				* 与 props-panel/FormPanel.vue 中的注入方式保持一致：
-				* - services：整个 useServices() 返回的服务集合；
-				* - stage：当前 editorService.get('stage') 的最新值。
-				*/
-				(0, vue.watchEffect)(() => {
-					if (formRef.value && props.services) {
-						formRef.value.formState.stage = props.services.editorService.get("stage");
-						formRef.value.formState.services = props.services;
-					}
-				});
 				__expose({
 					form: formRef,
 					config,
@@ -13342,18 +13392,18 @@
 				return (_ctx, _cache) => {
 					return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 						class: "m-editor-compare-form-wrapper",
-						style: (0, vue.normalizeStyle)(wrapperStyle.value)
-					}, [config.value.length ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_form.MForm), {
+						style: (0, vue.normalizeStyle)((0, vue.unref)(wrapperStyle))
+					}, [(0, vue.unref)(config).length ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_form.MForm), {
 						key: 0,
 						ref: "form",
 						class: "m-editor-compare-form",
-						config: config.value,
-						"init-values": currentValues.value,
+						config: (0, vue.unref)(config),
+						"init-values": (0, vue.unref)(currentValues),
 						"last-values": lastValuesProcessed.value,
 						"is-compare": true,
 						disabled: true,
 						"label-width": __props.labelWidth,
-						"extend-state": mergedExtendState,
+						"extend-state": (0, vue.unref)(mergedExtendState),
 						"show-diff": showDiff,
 						"self-diff-field-types": __props.selfDiffFieldTypes,
 						size: __props.size
@@ -13362,6 +13412,7 @@
 						"init-values",
 						"last-values",
 						"label-width",
+						"extend-state",
 						"self-diff-field-types",
 						"size"
 					])) : (0, vue.createCommentVNode)("v-if", true)], 4);
@@ -13379,12 +13430,12 @@
 	}));
 	//#endregion
 	//#region packages/editor/src/layouts/history-list/HistoryDiffDialog.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$57, _hoisted_2$19, _hoisted_3$6, _hoisted_4$5, _hoisted_5$2, _hoisted_6$2, _hoisted_7, HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default;
+	var _hoisted_1$62, _hoisted_2$19, _hoisted_3$7, _hoisted_4$6, _hoisted_5$3, _hoisted_6$2, _hoisted_7, HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default;
 	var init_HistoryDiffDialog_vue_vue_type_script_setup_true_lang = __esmMin((() => {
 		init_lodash();
 		init_CompareForm();
 		init_CodeEditor();
-		_hoisted_1$57 = {
+		_hoisted_1$62 = {
 			key: 0,
 			class: "m-editor-history-diff-dialog-body"
 		};
@@ -13392,9 +13443,9 @@
 			key: 0,
 			class: "m-editor-history-diff-dialog-notice"
 		};
-		_hoisted_3$6 = { class: "m-editor-history-diff-dialog-header" };
-		_hoisted_4$5 = { class: "m-editor-history-diff-dialog-target" };
-		_hoisted_5$2 = { class: "m-editor-history-diff-dialog-controls" };
+		_hoisted_3$7 = { class: "m-editor-history-diff-dialog-header" };
+		_hoisted_4$6 = { class: "m-editor-history-diff-dialog-target" };
+		_hoisted_5$3 = { class: "m-editor-history-diff-dialog-controls" };
 		_hoisted_6$2 = { class: "m-editor-history-diff-dialog-legend" };
 		_hoisted_7 = {
 			key: 0,
@@ -13572,9 +13623,9 @@
 							default: (0, vue.withCtx)(() => [..._cache[12] || (_cache[12] = [(0, vue.createTextVNode)("关闭", -1)])]),
 							_: 1
 						}))]),
-						default: (0, vue.withCtx)(() => [payload.value && visible.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$57, [
+						default: (0, vue.withCtx)(() => [payload.value && visible.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$62, [
 							__props.onConfirm ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$19, "仅回滚有差异的字段")) : (0, vue.createCommentVNode)("v-if", true),
-							(0, vue.createElementVNode)("div", _hoisted_3$6, [(0, vue.createElementVNode)("span", _hoisted_4$5, (0, vue.toDisplayString)(targetText.value), 1), (0, vue.createElementVNode)("div", _hoisted_5$2, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicRadioGroup), {
+							(0, vue.createElementVNode)("div", _hoisted_3$7, [(0, vue.createElementVNode)("span", _hoisted_4$6, (0, vue.toDisplayString)(targetText.value), 1), (0, vue.createElementVNode)("div", _hoisted_5$3, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicRadioGroup), {
 								modelValue: viewMode.value,
 								"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => viewMode.value = $event),
 								size: "small",
@@ -13999,7 +14050,7 @@
 	//#endregion
 	//#region packages/editor/src/layouts/history-list/HistoryListPanel.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
-	var _hoisted_1$56 = { class: "m-editor-history-list" };
+	var _hoisted_1$61 = { class: "m-editor-history-list" };
 	var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MEditorHistoryListPanel",
 		__name: "HistoryListPanel",
@@ -14198,7 +14249,7 @@
 						})]),
 						_: 1
 					})]),
-					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_1$56, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_1$61, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
 						effect: "dark",
 						placement: "top",
 						content: "关闭"
@@ -14318,7 +14369,7 @@
 	var HistoryListPanel_default = HistoryListPanel_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/NavMenuColumn.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$55 = { class: "m-editor-nav-menu-overflow-list" };
+	var _hoisted_1$60 = { class: "m-editor-nav-menu-overflow-list" };
 	var NavMenuColumn_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MEditorNavMenuColumn",
 		__name: "NavMenuColumn",
@@ -14501,7 +14552,7 @@
 						"bg",
 						"type"
 					])], 512)]),
-					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_1$55, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(overflowItems.value, (item, index) => {
+					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_1$60, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(overflowItems.value, (item, index) => {
 						return (0, vue.openBlock)(), (0, vue.createBlock)(ToolButton_default, {
 							data: item,
 							key: `o-${index}`
@@ -14744,8 +14795,9 @@
 	//#endregion
 	//#region packages/editor/src/layouts/props-panel/FormPanel.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
+	init_props();
 	init_CodeEditor();
-	var _hoisted_1$54 = { class: "m-editor-props-form-panel" };
+	var _hoisted_1$59 = { class: "m-editor-props-form-panel" };
 	var FormPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MEditorFormPanel",
 		__name: "FormPanel",
@@ -14842,7 +14894,7 @@
 				submit
 			});
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$54, [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$59, [
 					(0, vue.renderSlot)(_ctx.$slots, "props-form-panel-header"),
 					(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicScrollbar), null, {
 						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MForm), {
@@ -14942,7 +14994,8 @@
 	//#endregion
 	//#region packages/editor/src/layouts/props-panel/PropsPanel.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
-	var _hoisted_1$53 = {
+	init_props();
+	var _hoisted_1$58 = {
 		ref: "propsPanel",
 		class: "m-editor-props-panel"
 	};
@@ -14972,18 +15025,27 @@
 				tabPosition: "right",
 				items: styleTabConfig.items
 			}];
+			let initSeq = 0;
+			let mounted = true;
 			const init = async () => {
+				initSeq += 1;
+				const seq = initSeq;
 				if (!node.value) {
+					if (seq !== initSeq || !mounted) return;
 					curFormConfig.value = [];
 					return;
 				}
 				const type = node.value.type || (node.value.items ? "container" : "text");
-				curFormConfig.value = await propsService.getPropsConfig(type, { node: node.value });
+				const config = await propsService.getPropsConfig(type, { node: node.value });
+				if (seq !== initSeq || !mounted) return;
+				if (!node.value) return;
+				curFormConfig.value = config;
 				values.value = node.value;
 			};
 			(0, vue.watchEffect)(init);
 			propsService.on("props-configs-change", init);
 			(0, vue.onBeforeUnmount)(() => {
+				mounted = false;
 				propsService.off("props-configs-change", init);
 			});
 			const submit = async (v, eventData, error, source = "props") => {
@@ -15051,7 +15113,7 @@
 				submit
 			});
 			return (_ctx, _cache) => {
-				return (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$53, [
+				return (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$58, [
 					(0, vue.renderSlot)(_ctx.$slots, "props-panel-header"),
 					(0, vue.createVNode)(FormPanel_default, {
 						ref: "propertyFormPanel",
@@ -15122,7 +15184,7 @@
 	//#endregion
 	//#region packages/editor/src/components/FloatingBox.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
-	var _hoisted_1$52 = {
+	var _hoisted_1$57 = {
 		ref: "title",
 		class: "m-editor-float-box-title"
 	};
@@ -15161,6 +15223,11 @@
 			const props = __props;
 			const targetEl = (0, vue.useTemplateRef)("target");
 			const titleEl = (0, vue.useTemplateRef)("title");
+			/**
+			* 主题修饰类（来自最近的 `<MEditor>` / `<MForm>` 祖先 provide）。
+			* 挂在 `Teleport` 出去的浮动面板根节点上，让主题级 CSS 变量在 portal 节点上也能命中。
+			*/
+			const themeClass = (0, _tmagic_design.useThemeClass)();
 			const zIndex = (0, _tmagic_design.useZIndex)();
 			const curZIndex = (0, vue.ref)(0);
 			const titleHeight = (0, vue.ref)(0);
@@ -15297,14 +15364,14 @@
 					to: "body"
 				}, [(0, vue.createElementVNode)("div", (0, vue.mergeProps)({
 					ref: "target",
-					class: "m-editor-float-box"
+					class: ["m-editor-float-box", (0, vue.unref)(themeClass)]
 				}, _ctx.$attrs, {
 					style: {
 						...style.value,
 						zIndex: curZIndex.value
 					},
 					onMousedown: nextZIndex
-				}), [(0, vue.createElementVNode)("div", _hoisted_1$52, [(0, vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(__props.title), 1)]), (0, vue.createElementVNode)("div", null, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
+				}), [(0, vue.createElementVNode)("div", _hoisted_1$57, [(0, vue.renderSlot)(_ctx.$slots, "title", {}, () => [(0, vue.createElementVNode)("span", null, (0, vue.toDisplayString)(__props.title), 1)]), (0, vue.createElementVNode)("div", null, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
 					link: "",
 					size: "small",
 					onClick: closeHandler
@@ -15329,13 +15396,13 @@
 	init_CodeEditor();
 	init_code_block();
 	init_config();
-	var _hoisted_1$51 = { style: {
+	var _hoisted_1$56 = { style: {
 		"display": "flex",
 		"margin-bottom": "10px"
 	} };
 	var _hoisted_2$17 = { style: { "flex": "1" } };
-	var _hoisted_3$5 = { style: { "flex": "1" } };
-	var _hoisted_4$4 = { class: "dialog-footer" };
+	var _hoisted_3$6 = { style: { "flex": "1" } };
+	var _hoisted_4$5 = { class: "dialog-footer" };
 	var CodeBlockEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MEditorCodeBlockEditor",
 		__name: "CodeBlockEditor",
@@ -15519,7 +15586,7 @@
 						fullscreen: "",
 						"destroy-on-close": ""
 					}, {
-						footer: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", _hoisted_4$4, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
+						footer: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", _hoisted_4$5, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
 							size: "small",
 							onClick: _cache[4] || (_cache[4] = ($event) => difVisible.value = false)
 						}, {
@@ -15533,13 +15600,13 @@
 							default: (0, vue.withCtx)(() => [..._cache[10] || (_cache[10] = [(0, vue.createTextVNode)("确定", -1)])]),
 							_: 1
 						})])]),
-						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_1$51, [(0, vue.createElementVNode)("div", _hoisted_2$17, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicTag), {
+						default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_1$56, [(0, vue.createElementVNode)("div", _hoisted_2$17, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicTag), {
 							size: "small",
 							type: "danger"
 						}, {
 							default: (0, vue.withCtx)(() => [..._cache[7] || (_cache[7] = [(0, vue.createTextVNode)("修改前", -1)])]),
 							_: 1
-						})]), (0, vue.createElementVNode)("div", _hoisted_3$5, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicTag), {
+						})]), (0, vue.createElementVNode)("div", _hoisted_3$6, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicTag), {
 							size: "small",
 							type: "success"
 						}, {
@@ -15596,6 +15663,13 @@
 			const buttonRefs = (0, vue.useTemplateRef)("buttons");
 			const subMenuRef = (0, vue.useTemplateRef)("subMenu");
 			const visible = (0, vue.ref)(false);
+			/**
+			* 主题修饰类（来自最近的 `<MEditor>` / `<MForm>` 祖先 provide）。
+			* - 顶层 `ContentMenu` 渲染在编辑器子树中，加上去是冗余但无害；
+			* - 子菜单（递归 `<content-menu :is-sub-menu="true">` 被 `<teleport to="body">` 送到 body）
+			*   不在编辑器子树中，必须显式挂上主题类，主题级 CSS 变量才能命中。
+			*/
+			const themeClass = (0, _tmagic_design.useThemeClass)();
 			const subMenuData = (0, vue.ref)([]);
 			const zIndex = (0, _tmagic_design.useZIndex)();
 			const curZIndex = (0, vue.ref)(0);
@@ -15685,8 +15759,8 @@
 					persisted: ""
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.withDirectives)((0, vue.createElementVNode)("div", {
-						class: "magic-editor-content-menu",
 						ref: "menu",
+						class: (0, vue.normalizeClass)(["magic-editor-content-menu", (0, vue.unref)(themeClass)]),
 						style: (0, vue.normalizeStyle)(menuStyle.value),
 						onMouseenter: _cache[0] || (_cache[0] = ($event) => mouseenterHandler()),
 						onContextmenu: _cache[1] || (_cache[1] = (0, vue.withModifiers)(() => {}, ["prevent"]))
@@ -15717,7 +15791,7 @@
 							"is-sub-menu": true,
 							onHide: hide
 						}, null, 8, ["active", "menu-data"])) : (0, vue.createCommentVNode)("v-if", true)]))
-					], 36), [[vue.vShow, visible.value]])]),
+					], 38), [[vue.vShow, visible.value]])]),
 					_: 3
 				});
 			};
@@ -15768,7 +15842,7 @@
 	//#endregion
 	//#region packages/editor/src/components/TreeNode.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
-	var _hoisted_1$50 = [
+	var _hoisted_1$55 = [
 		"draggable",
 		"data-node-id",
 		"data-parent-id",
@@ -15776,8 +15850,8 @@
 		"data-is-container"
 	];
 	var _hoisted_2$16 = { class: "tree-node-label" };
-	var _hoisted_3$4 = { class: "tree-node-tool" };
-	var _hoisted_4$3 = {
+	var _hoisted_3$5 = { class: "tree-node-tool" };
+	var _hoisted_4$4 = {
 		key: 0,
 		class: "m-editor-tree-node-children"
 	};
@@ -15871,7 +15945,7 @@
 					class: "tree-node-content",
 					onClick: nodeClickHandler,
 					onDblclick: nodeDblclickHandler
-				}, [(0, vue.renderSlot)(_ctx.$slots, "tree-node-content", { data: __props.data }, () => [(0, vue.createElementVNode)("div", _hoisted_2$16, [(0, vue.renderSlot)(_ctx.$slots, "tree-node-label", { data: __props.data }, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(`${__props.data.name} (${__props.data.id})`), 1)])]), (0, vue.createElementVNode)("div", _hoisted_3$4, [(0, vue.renderSlot)(_ctx.$slots, "tree-node-tool", { data: __props.data })])])], 32)], 38), __props.isExpandable(__props.data, __props.nodeStatusMap) && expanded.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$3, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.data.items, (item) => {
+				}, [(0, vue.renderSlot)(_ctx.$slots, "tree-node-content", { data: __props.data }, () => [(0, vue.createElementVNode)("div", _hoisted_2$16, [(0, vue.renderSlot)(_ctx.$slots, "tree-node-label", { data: __props.data }, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(`${__props.data.name} (${__props.data.id})`), 1)])]), (0, vue.createElementVNode)("div", _hoisted_3$5, [(0, vue.renderSlot)(_ctx.$slots, "tree-node-tool", { data: __props.data })])])], 32)], 38), __props.isExpandable(__props.data, __props.nodeStatusMap) && expanded.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$4, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.data.items, (item) => {
 					return (0, vue.openBlock)(), (0, vue.createBlock)(_component_TreeNode, {
 						key: item.id,
 						data: item,
@@ -15893,7 +15967,7 @@
 						"indent",
 						"is-expandable"
 					]);
-				}), 128))])) : (0, vue.createCommentVNode)("v-if", true)], 40, _hoisted_1$50)), [[vue.vShow, visible.value]]);
+				}), 128))])) : (0, vue.createCommentVNode)("v-if", true)], 40, _hoisted_1$55)), [[vue.vShow, visible.value]]);
 			};
 		}
 	});
@@ -15902,7 +15976,7 @@
 	var TreeNode_default = TreeNode_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/components/Tree.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$49 = {
+	var _hoisted_1$54 = {
 		key: 1,
 		class: "m-editor-tree-empty"
 	};
@@ -15957,7 +16031,7 @@
 						"node-status-map",
 						"is-expandable"
 					]);
-				}), 128)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$49, [(0, vue.createElementVNode)("p", null, (0, vue.toDisplayString)(__props.emptyText), 1)]))], 32);
+				}), 128)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$54, [(0, vue.createElementVNode)("p", null, (0, vue.toDisplayString)(__props.emptyText), 1)]))], 32);
 			};
 		}
 	});
@@ -16193,7 +16267,7 @@
 	};
 	//#endregion
 	//#region packages/editor/src/layouts/sidebar/code-block/CodeBlockListPanel.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$48 = { class: "search-wrapper" };
+	var _hoisted_1$53 = { class: "search-wrapper" };
 	var CodeBlockListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MEditorCodeBlockListPanel",
 		__name: "CodeBlockListPanel",
@@ -16230,7 +16304,7 @@
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [
 					(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicScrollbar), { class: "m-editor-code-block-list m-editor-layer-panel" }, {
 						default: (0, vue.withCtx)(() => [
-							(0, vue.renderSlot)(_ctx.$slots, "code-block-panel-header", {}, () => [(0, vue.createElementVNode)("div", _hoisted_1$48, [
+							(0, vue.renderSlot)(_ctx.$slots, "code-block-panel-header", {}, () => [(0, vue.createElementVNode)("div", _hoisted_1$53, [
 								(0, vue.createVNode)(SearchInput_default, { onSearch: filterTextChangeHandler }),
 								editable.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicButton), {
 									key: 0,
@@ -16715,7 +16789,7 @@
 	//#endregion
 	//#region packages/editor/src/layouts/sidebar/data-source/DataSourceListPanel.vue?vue&type=script&setup=true&lang.ts
 	init_lodash();
-	var _hoisted_1$47 = { class: "search-wrapper" };
+	var _hoisted_1$52 = { class: "search-wrapper" };
 	var DataSourceListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MEditorDataSourceListPanel",
 		__name: "DataSourceListPanel",
@@ -16796,7 +16870,7 @@
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [
 					(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicScrollbar), { class: "data-source-list-panel m-editor-layer-panel" }, {
 						default: (0, vue.withCtx)(() => [
-							(0, vue.createElementVNode)("div", _hoisted_1$47, [
+							(0, vue.createElementVNode)("div", _hoisted_1$52, [
 								(0, vue.createVNode)(SearchInput_default, { onSearch: filterTextChangeHandler }),
 								(0, vue.unref)(editable) ? ((0, vue.openBlock)(), (0, vue.createBlock)(DataSourceAddButton_default, {
 									key: 0,
@@ -16861,7 +16935,7 @@
 	var DataSourceListPanel_default = DataSourceListPanel_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/icons/FolderMinusIcon.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$46 = {
+	var _hoisted_1$51 = {
 		width: "1em",
 		height: "1em",
 		viewBox: "0 0 16 16",
@@ -16874,7 +16948,7 @@
 		__name: "FolderMinusIcon",
 		setup(__props) {
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$46, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$51, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", {
 					"fill-rule": "evenodd",
 					d: "M9.828 4H2.19a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91H9v1H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31L.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181L15.546 8H14.54l.265-2.91A1 1 0 0 0 13.81 4H9.828zm-2.95-1.707L7.587 3H2.19c-.24 0-.47.042-.684.12L1.5 2.98a1 1 0 0 1 1-.98h3.672a1 1 0 0 1 .707.293z"
 				}, null, -1), (0, vue.createElementVNode)("path", {
@@ -17053,7 +17127,7 @@
 	//#endregion
 	//#region packages/editor/src/layouts/sidebar/layer/LayerNodeContent.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
-	var _hoisted_1$45 = { class: "m-editor-layer-node-label" };
+	var _hoisted_1$50 = { class: "m-editor-layer-node-label" };
 	var _hoisted_2$15 = ["innerHTML"];
 	var LayerNodeContent_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MEditorLayerNodeContent",
@@ -17077,7 +17151,7 @@
 			/** 合并属性表单与样式表单的错误文案（去掉建议，本身可能仍是含 <br> 的 HTML） */
 			const errorMessage = (0, vue.computed)(() => [stripSuggestion(invalidInfo.value?.props), stripSuggestion(invalidInfo.value?.style)].filter(Boolean).join("<br>"));
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", { class: (0, vue.normalizeClass)(["m-editor-layer-node-content", { "is-invalid": hasError.value }]) }, [(0, vue.createElementVNode)("span", _hoisted_1$45, (0, vue.toDisplayString)(label.value), 1), hasError.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("span", { class: (0, vue.normalizeClass)(["m-editor-layer-node-content", { "is-invalid": hasError.value }]) }, [(0, vue.createElementVNode)("span", _hoisted_1$50, (0, vue.toDisplayString)(label.value), 1), hasError.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
 					key: 0,
 					placement: "top"
 				}, {
@@ -17699,7 +17773,7 @@
 	//#region packages/editor/src/layouts/sidebar/ComponentListPanel.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
 	init_type();
-	var _hoisted_1$44 = ["onClick", "onDragstart"];
+	var _hoisted_1$49 = ["onClick", "onDragstart"];
 	var _hoisted_2$14 = ["title"];
 	var ComponentListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MEditorComponentListPanel",
@@ -17795,7 +17869,7 @@
 										}, {
 											default: (0, vue.withCtx)(() => [(0, vue.createVNode)(Icon_default, { icon: item.icon }, null, 8, ["icon"])]),
 											_: 2
-										}, 1032, ["disabled", "content"]), (0, vue.createElementVNode)("span", { title: item.text }, (0, vue.toDisplayString)(item.text), 9, _hoisted_2$14)])], 40, _hoisted_1$44);
+										}, 1032, ["disabled", "content"]), (0, vue.createElementVNode)("span", { title: item.text }, (0, vue.toDisplayString)(item.text), 9, _hoisted_2$14)])], 40, _hoisted_1$49);
 									}), 128))]),
 									_: 2
 								}, 1032, ["name"])) : (0, vue.createCommentVNode)("v-if", true)], 64);
@@ -17815,21 +17889,21 @@
 	//#region packages/editor/src/layouts/sidebar/Sidebar.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
 	init_type();
-	var _hoisted_1$43 = {
+	var _hoisted_1$48 = {
 		key: 0,
 		class: "m-editor-sidebar"
 	};
 	var _hoisted_2$13 = { class: "m-editor-sidebar-header" };
-	var _hoisted_3$3 = [
+	var _hoisted_3$4 = [
 		"draggable",
 		"onClick",
 		"onDragend"
 	];
-	var _hoisted_4$2 = {
+	var _hoisted_4$3 = {
 		key: 1,
 		class: "magic-editor-tab-panel-title"
 	};
-	var _hoisted_5$1 = {
+	var _hoisted_5$2 = {
 		key: 0,
 		class: "m-editor-sidebar-tips"
 	};
@@ -17886,7 +17960,7 @@
 					[SideItemKey.COMPONENT_LIST]: {
 						$key: SideItemKey.COMPONENT_LIST,
 						type: "component",
-						icon: _element_plus_icons_vue.Goods,
+						icon: _element_plus_icons_vue.Box,
 						text: "组件",
 						component: ComponentListPanel_default,
 						slots: {}
@@ -17894,7 +17968,7 @@
 					layer: {
 						$key: SideItemKey.LAYER,
 						type: "component",
-						icon: _element_plus_icons_vue.List,
+						icon: _element_plus_icons_vue.Finished,
 						text: "已选组件",
 						props: {
 							layerContentMenu: props.layerContentMenu,
@@ -17969,7 +18043,7 @@
 			};
 			__expose({ activeTabName });
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [__props.data.type === "tabs" && __props.data.items.length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$43, [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [__props.data.type === "tabs" && __props.data.items.length ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$48, [
 					(0, vue.createElementVNode)("div", _hoisted_2$13, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(sideBarItems.value, (config, index) => {
 						return (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 							class: (0, vue.normalizeClass)(["m-editor-sidebar-header-item", { "is-active": activeTabName.value === config.text }]),
@@ -17982,7 +18056,7 @@
 						}, [config.icon ? ((0, vue.openBlock)(), (0, vue.createBlock)(Icon_default, {
 							key: 0,
 							icon: config.icon
-						}, null, 8, ["icon"])) : (0, vue.createCommentVNode)("v-if", true), config.text ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$2, (0, vue.toDisplayString)(config.text), 1)) : (0, vue.createCommentVNode)("v-if", true)], 46, _hoisted_3$3)), [[vue.vShow, !(0, vue.unref)(floatBoxStates)[config.$key]?.status]]);
+						}, null, 8, ["icon"])) : (0, vue.createCommentVNode)("v-if", true), config.text ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$3, (0, vue.toDisplayString)(config.text), 1)) : (0, vue.createCommentVNode)("v-if", true)], 46, _hoisted_3$4)), [[vue.vShow, !(0, vue.unref)(floatBoxStates)[config.$key]?.status]]);
 					}), 128))]),
 					((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(sideBarItems.value, (config, index) => {
 						return (0, vue.withDirectives)(((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -18073,7 +18147,7 @@
 							`${index}`
 						].includes(activeTabName.value)]]);
 					}), 128)),
-					tipsBarVisible.value && collecting.value && taskLength.value > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_5$1, [(0, vue.createElementVNode)("span", null, "依赖收集中(剩余任务：" + (0, vue.toDisplayString)(taskLength.value) + ")", 1), (0, vue.createVNode)(Icon_default, {
+					tipsBarVisible.value && collecting.value && taskLength.value > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_5$2, [(0, vue.createElementVNode)("span", null, "依赖收集中(剩余任务：" + (0, vue.toDisplayString)(taskLength.value) + ")", 1), (0, vue.createVNode)(Icon_default, {
 						icon: (0, vue.unref)(_element_plus_icons_vue.Close),
 						class: "close-icon",
 						onClick: _cache[1] || (_cache[1] = (0, vue.withModifiers)(($event) => tipsBarVisible.value = false, ["stop"]))
@@ -18188,7 +18262,7 @@
 	var ScrollBar_default = ScrollBar_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/components/ScrollViewer.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$42 = {
+	var _hoisted_1$47 = {
 		class: "m-editor-scroll-viewer-container",
 		ref: "container"
 	};
@@ -18252,7 +18326,7 @@
 			};
 			__expose({ container: containerEl });
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$42, [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$47, [
 					(0, vue.createElementVNode)("div", {
 						ref: "target",
 						style: (0, vue.normalizeStyle)(style.value)
@@ -18378,7 +18452,7 @@
 	var NodeListMenu_default = NodeListMenu_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/workspace/viewer/StageOverlay.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$41 = {
+	var _hoisted_1$46 = {
 		key: 0,
 		class: "m-editor-stage-overlay"
 	};
@@ -18424,7 +18498,7 @@
 				stageOverlayService.closeOverlay();
 			};
 			return (_ctx, _cache) => {
-				return stageOverlayVisible.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$41, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicIcon), {
+				return stageOverlayVisible.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$46, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicIcon), {
 					class: "m-editor-stage-overlay-close",
 					size: "30",
 					onClick: closeOverlayHandler
@@ -18460,7 +18534,7 @@
 	var StageOverlay_default = StageOverlay_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/icons/CenterIcon.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$40 = {
+	var _hoisted_1$45 = {
 		viewBox: "0 0 24 24",
 		fill: "none",
 		xmlns: "http://www.w3.org/2000/svg"
@@ -18470,7 +18544,7 @@
 		__name: "CenterIcon",
 		setup(__props) {
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$40, [..._cache[0] || (_cache[0] = [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$45, [..._cache[0] || (_cache[0] = [
 					(0, vue.createElementVNode)("path", {
 						"fill-rule": "evenodd",
 						"clip-rule": "evenodd",
@@ -18900,7 +18974,7 @@
 	var Stage_default = Stage_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/workspace/Breadcrumb.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$39 = {
+	var _hoisted_1$44 = {
 		key: 0,
 		class: "m-editor-breadcrumb-ellipsis"
 	};
@@ -18986,7 +19060,7 @@
 					ref: containerRef,
 					class: "m-editor-breadcrumb"
 				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(displayPath.value, (item, index) => {
-					return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: item.isEllipsis ? `ellipsis-${index}` : item.id }, [item.isEllipsis ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$39, "...")) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
+					return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: item.isEllipsis ? `ellipsis-${index}` : item.id }, [item.isEllipsis ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$44, "...")) : ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicTooltip), {
 						key: 1,
 						content: item.name,
 						placement: "top",
@@ -19012,7 +19086,7 @@
 	var Breadcrumb_default = Breadcrumb_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/layouts/workspace/Workspace.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$38 = { class: "m-editor-workspace" };
+	var _hoisted_1$43 = { class: "m-editor-workspace" };
 	var Workspace_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MEditorWorkspace",
 		__name: "Workspace",
@@ -19029,7 +19103,7 @@
 			const { editorService } = useServices();
 			const page = (0, vue.computed)(() => editorService.get("page"));
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$38, [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$43, [
 					(0, vue.createVNode)(Breadcrumb_default),
 					(0, vue.renderSlot)(_ctx.$slots, "stage", {}, () => [page.value && ((0, vue.unref)(stageOptions)?.render || (0, vue.unref)(stageOptions)?.runtimeUrl) ? ((0, vue.openBlock)(), (0, vue.createBlock)(Stage_default, {
 						key: 0,
@@ -20003,6 +20077,8 @@
 		name: "MEditor",
 		__name: "Editor",
 		props: /*@__PURE__*/ (0, vue.mergeDefaults)({
+			isLargeStageContainer: { type: Boolean },
+			theme: {},
 			modelValue: {},
 			componentGroupList: {},
 			datasourceList: {},
@@ -20116,6 +20192,7 @@
 			* 与 PropsPanel 通过 `:extend-state` 显式传入的方式保持等价。
 			*/
 			(0, vue.provide)("extendFormState", props.extendFormState);
+			(0, vue.provide)("isLargeStageContainer", (0, vue.computed)(() => props.isLargeStageContainer));
 			/**
 			* 提供 PropsPanel 主属性表单的 formState getter，供历史差异弹窗复用，
 			* 让 CompareForm 与 PropsPanel 的 filterFunction 上下文保持一致。
@@ -20128,6 +20205,12 @@
 			*/
 			(0, vue.provide)("historyListExtraTabs", props.historyListExtraTabs);
 			(0, vue.provide)("eventBus", new events.EventEmitter());
+			/**
+			* 把当前主题以响应式 ref 形式 provide 给后代，供包含 `Teleport` 的组件
+			* （如 `TMagicPopover` / `FloatingBox` / `ContentMenu`）在传送目标上挂 `m-theme--<theme>`
+			* 类，让主题级 CSS 变量在 portal 节点上也能命中。详见 `@tmagic/design/theme.ts`。
+			*/
+			(0, vue.provide)(_tmagic_design.M_THEME_KEY, (0, vue.computed)(() => props.theme ?? ""));
 			const propsPanelMountedHandler = (e) => {
 				propsPanelRef.value = e;
 				emit("props-panel-mounted", e);
@@ -20151,7 +20234,8 @@
 					"disabled-page-fragment": __props.disabledPageFragment,
 					"page-bar-sort-options": __props.pageBarSortOptions,
 					"page-filter-function": __props.pageFilterFunction,
-					"hide-sidebar": __props.hideSidebar
+					"hide-sidebar": __props.hideSidebar,
+					theme: __props.theme
 				}, {
 					header: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "header")]),
 					nav: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "nav", { editorService: (0, vue.unref)(editor_default) }, () => [(0, vue.createVNode)(NavMenu_default, { data: __props.menu }, null, 8, ["data"])])]),
@@ -20232,7 +20316,8 @@
 					"disabled-page-fragment",
 					"page-bar-sort-options",
 					"page-filter-function",
-					"hide-sidebar"
+					"hide-sidebar",
+					"theme"
 				]);
 			};
 		}
@@ -20256,7 +20341,10 @@
 			disabled: { type: Boolean },
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
@@ -20277,11 +20365,21 @@
 			* 仅当存在历史值时才启用对比，避免 lastValues 缺失时退化为「全部新增」的空对比。
 			*/
 			const isCompareMode = (0, vue.computed)(() => Boolean(props.isCompare && props.lastValues));
+			const newHandler = () => {
+				const defaultCode = {
+					codeType: _tmagic_core.HookCodeType.CODE,
+					codeId: ""
+				};
+				const name = props.config.name || "";
+				const hookData = props.model[name]?.hookData || [];
+				emit("change", defaultCode, { modifyKey: `hookData.${hookData.length}` });
+			};
 			const codeConfig = (0, vue.computed)(() => ({
 				type: "group-list",
 				name: "hookData",
 				enableToggleMode: false,
 				expandAll: true,
+				addable: () => false,
 				title: (mForm, { model, index }) => {
 					if (model.codeType === _tmagic_core.HookCodeType.DATA_SOURCE_METHOD) {
 						if (Array.isArray(model.codeId)) {
@@ -20294,57 +20392,54 @@
 					if (codeContent) return codeContent.name;
 					return model.codeId || index;
 				},
-				items: [{
-					type: "row",
-					items: [
-						{
-							type: "select",
-							name: "codeType",
-							span: 6,
-							options: [{
-								value: _tmagic_core.HookCodeType.CODE,
-								text: "代码块"
-							}, {
-								value: _tmagic_core.HookCodeType.DATA_SOURCE_METHOD,
-								text: "数据源方法"
-							}],
-							rules: [{
-								typeMatch: true,
-								trigger: "change"
-							}],
-							defaultValue: _tmagic_core.HookCodeType.CODE,
-							onChange: (_mForm, v, { setModel }) => {
-								if (v === _tmagic_core.HookCodeType.DATA_SOURCE_METHOD) setModel("codeId", []);
-								else setModel("codeId", "");
-								return v;
-							}
-						},
-						{
-							type: "code-select-col",
-							name: "codeId",
-							span: 18,
-							labelWidth: 0,
-							display: (_mForm, { model }) => model.codeType !== _tmagic_core.HookCodeType.DATA_SOURCE_METHOD,
-							notEditable: () => !codeBlockService.getEditStatus(),
-							rules: [{
-								typeMatch: true,
-								trigger: "change"
-							}]
-						},
-						{
-							type: "data-source-method-select",
-							name: "codeId",
-							span: 18,
-							labelWidth: 0,
-							display: (_mForm, { model }) => model.codeType === _tmagic_core.HookCodeType.DATA_SOURCE_METHOD,
-							notEditable: () => !dataSourceService.get("editable"),
-							rules: [{
-								typeMatch: true,
-								trigger: "change"
-							}]
+				titlePrefix: props.config.name === void 0 ? void 0 : String(props.config.name),
+				items: [
+					{
+						text: "代码类型",
+						type: "select",
+						name: "codeType",
+						labelPosition: "right",
+						rules: [{
+							typeMatch: true,
+							trigger: "change"
+						}],
+						options: [{
+							value: _tmagic_core.HookCodeType.CODE,
+							text: "代码块"
+						}, {
+							value: _tmagic_core.HookCodeType.DATA_SOURCE_METHOD,
+							text: "数据源方法"
+						}],
+						defaultValue: _tmagic_core.HookCodeType.CODE,
+						onChange: (_mForm, v, { setModel }) => {
+							if (v === _tmagic_core.HookCodeType.DATA_SOURCE_METHOD) setModel("codeId", []);
+							else setModel("codeId", "");
+							return v;
 						}
-					]
-				}]
+					},
+					{
+						type: "code-select-col",
+						name: "codeId",
+						text: "代码块",
+						rules: [{
+							typeMatch: true,
+							trigger: "change"
+						}],
+						display: (_mForm, { model }) => model.codeType !== _tmagic_core.HookCodeType.DATA_SOURCE_METHOD,
+						notEditable: () => !codeBlockService.getEditStatus()
+					},
+					{
+						type: "data-source-method-select",
+						name: "codeId",
+						text: "数据源字段",
+						rules: [{
+							typeMatch: true,
+							trigger: "change"
+						}],
+						display: (_mForm, { model }) => model.codeType === _tmagic_core.HookCodeType.DATA_SOURCE_METHOD,
+						notEditable: () => !dataSourceService.get("editable")
+					}
+				]
 			}));
 			(0, vue.watch)(() => props.model[props.name], (value) => {
 				if (isEmpty(value)) props.model[props.name] = {
@@ -20354,10 +20449,11 @@
 			}, { immediate: true });
 			const changeHandler = (v, eventData) => emit("change", v, eventData);
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)(["m-fields-code-select", __props.config.className]) }, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicCard), null, {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)(["m-fields-code-select", __props.config.className]) }, [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicCard), { flat: __props.config.flat }, {
 					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MContainer), {
 						config: codeConfig.value,
 						size: __props.size,
+						class: "code-select-content",
 						prop: __props.prop,
 						disabled: __props.disabled,
 						"is-compare": isCompareMode.value,
@@ -20372,9 +20468,22 @@
 						"is-compare",
 						"last-values",
 						"model"
+					]), (0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
+						class: "create-button fullWidth",
+						icon: (0, vue.unref)(_element_plus_icons_vue.Plus),
+						size: __props.size,
+						disabled: __props.disabled,
+						onClick: _cache[0] || (_cache[0] = ($event) => newHandler())
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)("添加" + (0, vue.toDisplayString)(__props.config.text), 1)]),
+						_: 1
+					}, 8, [
+						"icon",
+						"size",
+						"disabled"
 					])]),
 					_: 1
-				})], 2);
+				}, 8, ["flat"])], 2);
 			};
 		}
 	});
@@ -20465,7 +20574,7 @@
 	init_lodash();
 	init_Icon();
 	init_type();
-	var _hoisted_1$37 = { class: "m-fields-code-select-col" };
+	var _hoisted_1$42 = { class: "m-fields-code-select-col" };
 	var _hoisted_2$11 = { class: "code-select-container" };
 	var CodeSelectCol_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MFieldsCodeSelectCol",
@@ -20483,7 +20592,10 @@
 			},
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
@@ -20529,6 +20641,7 @@
 				type: "select",
 				name: props.name,
 				disabled: props.disabled,
+				text: props.config.text,
 				options: () => {
 					if (codeDsl.value) return map(codeDsl.value, (value, key) => ({
 						text: `${value.name}（${key}）`,
@@ -20565,7 +20678,7 @@
 				eventBus?.emit("edit-code", id);
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$37, [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$42, [
 					(0, vue.createElementVNode)("div", _hoisted_2$11, [
 						(0, vue.createCommentVNode)(" 代码块下拉框 "),
 						(0, vue.createCommentVNode)(" 对比模式下交由 MFormContainer 展示下拉框的前后差异（codeId 变化时高亮新旧代码块名），\n           普通模式仍直接渲染 MSelect 以保留选择 / 写值逻辑 "),
@@ -20637,7 +20750,7 @@
 	var CodeSelectCol_default = CodeSelectCol_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/fields/DataSourceFields.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$36 = { class: "m-editor-data-source-fields" };
+	var _hoisted_1$41 = { class: "m-editor-data-source-fields" };
 	var _hoisted_2$10 = {
 		key: 0,
 		class: "m-editor-data-source-fields-footer"
@@ -20658,7 +20771,10 @@
 			},
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		}, {
 			"width": { default: 670 },
 			"widthModifiers": {},
@@ -20957,7 +21073,7 @@
 				editField(fields[index], index);
 			});
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$36, [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$41, [
 					(0, vue.createVNode)((0, vue.unref)(_tmagic_table.MagicTable), {
 						data: __props.model[__props.name],
 						columns: displayColumns.value,
@@ -21052,7 +21168,7 @@
 	//#endregion
 	//#region packages/editor/src/fields/DataSourceMocks.vue?vue&type=script&setup=true&lang.ts
 	init_CodeEditor();
-	var _hoisted_1$35 = { class: "m-editor-data-source-fields" };
+	var _hoisted_1$40 = { class: "m-editor-data-source-fields" };
 	var _hoisted_2$9 = {
 		key: 0,
 		class: "m-editor-data-source-fields-footer"
@@ -21073,7 +21189,10 @@
 			},
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		}, {
 			"width": { default: 670 },
 			"widthModifiers": {},
@@ -21258,7 +21377,7 @@
 			const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, (0, vue.inject)("parentFloating", (0, vue.ref)(null)));
 			const frameworkWidth = (0, vue.computed)(() => uiService.get("frameworkRect")?.width || 0);
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$35, [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$40, [
 					(0, vue.createVNode)((0, vue.unref)(_tmagic_table.MagicTable), {
 						data: __props.model[__props.name],
 						columns: displayColumns.value
@@ -21316,7 +21435,7 @@
 	//#endregion
 	//#region packages/editor/src/fields/DataSourceMethods.vue?vue&type=script&setup=true&lang.ts
 	init_lodash();
-	var _hoisted_1$34 = { class: "m-editor-data-source-methods" };
+	var _hoisted_1$39 = { class: "m-editor-data-source-methods" };
 	var _hoisted_2$8 = {
 		key: 0,
 		class: "m-editor-data-source-methods-footer"
@@ -21337,7 +21456,10 @@
 			},
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
@@ -21445,7 +21567,7 @@
 				editMethod(methods[index], index);
 			});
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$34, [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$39, [
 					(0, vue.createVNode)((0, vue.unref)(_tmagic_table.MagicTable), {
 						data: __props.model[__props.name],
 						columns: displayColumns.value,
@@ -21484,7 +21606,7 @@
 	//#endregion
 	//#region packages/editor/src/fields/DataSourceInput.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
-	var _hoisted_1$33 = { style: {
+	var _hoisted_1$38 = { style: {
 		"display": "flex",
 		"flex-direction": "column",
 		"line-height": "1.2em"
@@ -21509,7 +21631,10 @@
 			},
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
@@ -21693,7 +21818,7 @@
 					onSelect: selectHandler
 				}), {
 					suffix: (0, vue.withCtx)(() => [(0, vue.createVNode)(Icon_default, { icon: (0, vue.unref)(_element_plus_icons_vue.Coin) }, null, 8, ["icon"])]),
-					default: (0, vue.withCtx)((slotProps) => [(0, vue.createElementVNode)("div", _hoisted_1$33, [(0, vue.createElementVNode)("div", null, (0, vue.toDisplayString)(slotProps?.item?.text || ""), 1), (0, vue.createElementVNode)("span", _hoisted_2$7, (0, vue.toDisplayString)(slotProps?.item?.value || ""), 1)])]),
+					default: (0, vue.withCtx)((slotProps) => [(0, vue.createElementVNode)("div", _hoisted_1$38, [(0, vue.createElementVNode)("div", null, (0, vue.toDisplayString)(slotProps?.item?.text || ""), 1), (0, vue.createElementVNode)("span", _hoisted_2$7, (0, vue.toDisplayString)(slotProps?.item?.value || ""), 1)])]),
 					_: 1
 				}, 16, ["modelValue"])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 					key: 2,
@@ -21737,7 +21862,7 @@
 	//#region packages/editor/src/fields/DataSourceSelect.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
 	init_type();
-	var _hoisted_1$32 = { class: "m-fields-data-source-select" };
+	var _hoisted_1$37 = { class: "m-fields-data-source-select" };
 	var DataSourceSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MFieldsDataSourceSelect",
 		__name: "DataSourceSelect",
@@ -21754,7 +21879,10 @@
 			},
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
@@ -21796,7 +21924,7 @@
 				eventBus?.emit("edit-data-source", id);
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$32, [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MSelect), {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$37, [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MSelect), {
 					model: __props.model,
 					name: __props.name,
 					size: __props.size,
@@ -21837,7 +21965,7 @@
 	//#region packages/editor/src/fields/DataSourceMethodSelect.vue?vue&type=script&setup=true&name=true&lang.ts
 	init_Icon();
 	init_type();
-	var _hoisted_1$31 = { class: "m-fields-data-source-method-select" };
+	var _hoisted_1$36 = { class: "m-fields-data-source-method-select" };
 	var _hoisted_2$6 = { class: "data-source-method-select-container" };
 	var DataSourceMethodSelect_vue_vue_type_script_setup_true_name_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MFieldsDataSourceMethodSelect",
@@ -21855,7 +21983,10 @@
 			},
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
@@ -21959,7 +22090,7 @@
 				eventBus?.emit("edit-data-source-method", id, methodName);
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$31, [(0, vue.createElementVNode)("div", _hoisted_2$6, [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MCascader), {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$36, [(0, vue.createElementVNode)("div", _hoisted_2$6, [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MCascader), {
 					class: "select",
 					config: cascaderConfig.value,
 					model: __props.model,
@@ -22009,10 +22140,31 @@
 	//#region packages/editor/src/fields/DataSourceMethodSelect.vue
 	var DataSourceMethodSelect_default = DataSourceMethodSelect_vue_vue_type_script_setup_true_name_true_lang_default;
 	//#endregion
+	//#region \0plugin-vue:export-helper
+	var _plugin_vue_export_helper_default = (sfc, props) => {
+		const target = sfc.__vccOpts || sfc;
+		for (const [key, val] of props) target[key] = val;
+		return target;
+	};
+	//#endregion
+	//#region packages/editor/src/icons/DatasourceIcon.vue
+	var _sfc_main$26 = {};
+	var _hoisted_1$35 = {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor"
+	};
+	function _sfc_render$26(_ctx, _cache) {
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$35, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M6.25 9.723C4.392 9.6095 2.804 9.137 1.875 8.4775V9.7495C1.875 10.6165 3.7665 11.3365 6.25 11.4745V12.348C4.392 12.2345 2.804 11.763 1.875 11.102V12.3745H1V4.0625C1 2.371 3.742 1 7.125 1C10.507 1 13.249 2.371 13.249 4.0625V6.8255H12.374V5.6405C11.3025 6.5295 9.352 7.1245 7.1245 7.1245C4.897 7.1245 2.947 6.5295 1.8745 5.6405V7.1245C1.8745 7.9915 3.7665 8.712 6.2495 8.85L6.25 9.723ZM7.125 14.999C3.742 14.999 1 13.8245 1 12.3745H1.875C1.875 13.3415 4.225 14.124 7.125 14.124V14.999ZM7.125 6.2495C10.024 6.2495 12.3745 5.2695 12.3745 4.0625C12.3745 2.855 10.0245 1.875 7.1245 1.875C4.225 1.875 1.8745 2.855 1.8745 4.0625C1.8745 5.2695 4.2255 6.2495 7.125 6.2495ZM14.7385 11.9895L14.1295 11.6345C14.1635 11.4485 14.1855 11.2585 14.1855 11.062C14.1843 10.8697 14.1655 10.6779 14.1295 10.489L14.7385 10.134C14.988 9.987 15.073 9.667 14.929 9.416L14.409 8.507C14.3752 8.44726 14.3299 8.39483 14.2757 8.35275C14.2215 8.31066 14.1595 8.27977 14.0933 8.26186C14.027 8.24395 13.9579 8.23938 13.8898 8.24842C13.8218 8.25745 13.7563 8.27992 13.697 8.3145L13.081 8.6735C12.7931 8.42269 12.4616 8.22694 12.103 8.096V7.6495C12.103 7.36 11.8705 7.1245 11.5825 7.1245H10.5415C10.4728 7.12476 10.4049 7.13855 10.3415 7.16507C10.2782 7.1916 10.2206 7.23034 10.1723 7.2791C10.1239 7.32785 10.0856 7.38565 10.0595 7.4492C10.0335 7.51276 10.0202 7.58082 10.0205 7.6495V8.096C9.66186 8.22694 9.33035 8.42269 9.0425 8.6735L8.4265 8.3145C8.36725 8.27999 8.30174 8.2576 8.23377 8.2486C8.1658 8.23961 8.09672 8.24419 8.03053 8.2621C7.96435 8.28001 7.90238 8.31088 7.84821 8.35292C7.79405 8.39495 7.74877 8.44733 7.715 8.507L7.195 9.417C7.12576 9.53751 7.10688 9.68047 7.14246 9.81482C7.17804 9.94917 7.2652 10.0641 7.385 10.1345L7.9945 10.489C7.9585 10.6775 7.9395 10.8695 7.9385 11.062C7.9385 11.2585 7.96 11.4485 7.9945 11.635L7.3855 11.99C7.1355 12.1365 7.0505 12.4565 7.1945 12.7075L7.715 13.6165C7.74877 13.6762 7.79405 13.7285 7.84821 13.7706C7.90238 13.8126 7.96435 13.8435 8.03053 13.8614C8.09672 13.8793 8.1658 13.8839 8.23377 13.8749C8.30174 13.8659 8.36725 13.8435 8.4265 13.809L9.0425 13.4505C9.33023 13.7015 9.66178 13.8972 10.0205 14.028V14.474C10.0205 14.764 10.2535 14.999 10.5415 14.999H11.5825C11.7211 14.9983 11.8538 14.9427 11.9514 14.8442C12.049 14.7458 12.1035 14.6126 12.103 14.474V14.028C12.4616 13.8971 12.7931 13.7013 13.081 13.4505L13.697 13.809C13.7563 13.8434 13.8218 13.8657 13.8897 13.8746C13.9577 13.8835 14.0267 13.8789 14.0929 13.861C14.159 13.8431 14.221 13.8123 14.2751 13.7703C14.3293 13.7283 14.3746 13.6761 14.4085 13.6165L14.929 12.7065C14.998 12.586 15.0168 12.4431 14.9811 12.3089C14.9454 12.1746 14.8583 12.0599 14.7385 11.9895ZM14.092 12.5065L13.852 12.915C13.8193 12.9693 13.7667 13.0086 13.7054 13.0246C13.6441 13.0406 13.579 13.0319 13.524 13.0005L12.8575 12.623C12.5109 13.0069 12.0497 13.2688 11.5425 13.37V13.889C11.5425 14.0185 11.4345 14.124 11.3015 14.124H10.822C10.7907 14.1243 10.7597 14.1184 10.7308 14.1067C10.7018 14.0949 10.6754 14.0776 10.6531 14.0557C10.6308 14.0338 10.6131 14.0077 10.6009 13.9789C10.5887 13.9502 10.5823 13.9193 10.582 13.888V13.37C10.0746 13.2689 9.61328 13.007 9.2665 12.623L8.6 13C8.54495 13.0316 8.47971 13.0403 8.4183 13.0243C8.35688 13.0083 8.30418 12.9689 8.2715 12.9145L8.0315 12.506C8.01582 12.4792 8.00564 12.4496 8.00158 12.4189C7.99752 12.3881 7.99965 12.3569 8.00785 12.327C8.01605 12.297 8.03016 12.2691 8.04933 12.2447C8.0685 12.2203 8.09236 12.2 8.1195 12.185L8.789 11.805C8.70604 11.5658 8.66313 11.3146 8.662 11.0615C8.662 10.8005 8.709 10.552 8.7895 10.3175L8.1195 9.9375C8.09247 9.92244 8.06872 9.90213 8.04964 9.87777C8.03056 9.85341 8.01654 9.82549 8.00839 9.79564C8.00024 9.76579 7.99813 9.73461 8.00218 9.70394C8.00624 9.67326 8.01637 9.64371 8.032 9.617L8.272 9.208C8.30467 9.15373 8.35729 9.1144 8.41858 9.09843C8.47988 9.08245 8.54499 9.09109 8.6 9.1225L9.2665 9.5005C9.61315 9.11663 10.0743 8.85468 10.5815 8.7535V8.235C10.5815 8.105 10.689 8 10.822 8H11.302C11.4345 8 11.542 8.105 11.542 8.236V8.754C12.0492 8.85518 12.5104 9.11713 12.857 9.501L13.524 9.123C13.579 9.09159 13.6441 9.08295 13.7054 9.09893C13.7667 9.1149 13.8193 9.15423 13.852 9.2085L14.092 9.6175C14.1077 9.64423 14.1179 9.67383 14.122 9.70455C14.1261 9.73528 14.124 9.76652 14.1159 9.79643C14.1077 9.82634 14.0937 9.85431 14.0745 9.87871C14.0554 9.90311 14.0316 9.92344 14.0045 9.9385L13.335 10.3185C13.4135 10.5525 13.462 10.801 13.462 11.062C13.462 11.3225 13.4145 11.571 13.335 11.8055L14.0045 12.1855C14.0316 12.2006 14.0554 12.2209 14.0745 12.2453C14.0937 12.2697 14.1077 12.2977 14.1159 12.3276C14.124 12.3575 14.1261 12.3887 14.122 12.4194C14.1179 12.4502 14.1077 12.4798 14.092 12.5065ZM11.062 9.7495C10.7139 9.7495 10.3801 9.88778 10.1339 10.1339C9.88778 10.3801 9.7495 10.7139 9.7495 11.062C9.7495 11.4101 9.88778 11.7439 10.1339 11.9901C10.3801 12.2362 10.7139 12.3745 11.062 12.3745C11.4101 12.3745 11.7439 12.2362 11.9901 11.9901C12.2362 11.7439 12.3745 11.4101 12.3745 11.062C12.3745 10.7139 12.2362 10.3801 11.9901 10.1339C11.7439 9.88778 11.4101 9.7495 11.062 9.7495ZM11.062 11.4995C10.946 11.4995 10.8347 11.4534 10.7526 11.3714C10.6706 11.2893 10.6245 11.178 10.6245 11.062C10.6245 10.946 10.6706 10.8347 10.7526 10.7526C10.8347 10.6706 10.946 10.6245 11.062 10.6245C11.178 10.6245 11.2893 10.6706 11.3714 10.7526C11.4534 10.8347 11.4995 10.946 11.4995 11.062C11.4995 11.178 11.4534 11.2893 11.3714 11.3714C11.2893 11.4534 11.178 11.4995 11.062 11.4995Z" }, null, -1)])]);
+	}
+	var DatasourceIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$26, [["render", _sfc_render$26]]);
+	//#endregion
 	//#region packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
 	init_type();
-	var _hoisted_1$30 = { class: "m-editor-data-source-field-select" };
+	var _hoisted_1$34 = { class: "m-editor-data-source-field-select" };
 	var FieldSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		__name: "FieldSelect",
 		props: /*@__PURE__*/ (0, vue.mergeModels)({
@@ -22105,7 +22257,7 @@
 				else eventBus?.emit("edit-data-source", dataSourceId);
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$30, [__props.dataSourceId ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicCascader), {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$34, [__props.dataSourceId ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicCascader), {
 					key: 0,
 					"model-value": selectFieldsId.value,
 					clearable: "",
@@ -22202,7 +22354,6 @@
 	//#endregion
 	//#region packages/editor/src/fields/DataSourceFieldSelect/Index.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
-	var _hoisted_1$29 = { class: "m-fields-data-source-field-select" };
 	var Index_vue_vue_type_script_setup_true_lang_default$1 = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MFieldsDataSourceFieldSelect",
 		__name: "Index",
@@ -22219,13 +22370,17 @@
 			},
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
 			const emit = __emit;
 			const props = __props;
 			const showDataSourceFieldSelect = (0, vue.ref)(false);
+			const isSelectValid = (0, vue.computed)(() => !disabledDataSource.value && (showDataSourceFieldSelect.value || !props.config.fieldConfig));
 			(0, vue.watch)(() => props.model[props.name], (value) => {
 				if (Array.isArray(value) && typeof value[0] === "string" && value[0].startsWith(_tmagic_utils.DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)) showDataSourceFieldSelect.value = true;
 				else showDataSourceFieldSelect.value = false;
@@ -22295,7 +22450,7 @@
 				showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value;
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$29, [!disabledDataSource.value && (showDataSourceFieldSelect.value || !__props.config.fieldConfig) ? ((0, vue.openBlock)(), (0, vue.createBlock)(FieldSelect_default, {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", { class: (0, vue.normalizeClass)(["m-fields-data-source-field-select", { [`data-source-field-${type.value}`]: !isSelectValid.value }]) }, [isSelectValid.value ? ((0, vue.openBlock)(), (0, vue.createBlock)(FieldSelect_default, {
 					key: 0,
 					"model-value": __props.model[__props.name],
 					disabled: __props.disabled,
@@ -22346,7 +22501,7 @@
 						disabled: __props.disabled,
 						onClick: onToggleDataSourceFieldSelectHandler
 					}, {
-						default: (0, vue.withCtx)(() => [(0, vue.createVNode)(Icon_default, { icon: (0, vue.unref)(_element_plus_icons_vue.Coin) }, null, 8, ["icon"])]),
+						default: (0, vue.withCtx)(() => [(0, vue.createVNode)(Icon_default, { icon: DatasourceIcon_default })]),
 						_: 1
 					}, 8, [
 						"type",
@@ -22354,7 +22509,7 @@
 						"disabled"
 					])]),
 					_: 1
-				}, 8, ["disabled"])) : (0, vue.createCommentVNode)("v-if", true)]);
+				}, 8, ["disabled"])) : (0, vue.createCommentVNode)("v-if", true)], 2);
 			};
 		}
 	});
@@ -22364,11 +22519,14 @@
 	//#endregion
 	//#region packages/editor/src/fields/EventSelect.vue?vue&type=script&setup=true&lang.ts
 	init_lodash();
-	var _hoisted_1$28 = { class: "m-fields-event-select" };
+	var _hoisted_1$33 = { class: "m-fields-event-select" };
 	var _hoisted_2$5 = {
 		key: 1,
-		class: "fullWidth"
+		class: "fullWidth event-select-container"
 	};
+	var _hoisted_3$3 = { class: "event-select-header" };
+	var _hoisted_4$2 = { class: "event-item-header" };
+	var _hoisted_5$1 = { class: "event-item-title" };
 	var EventSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MFieldsEventSelect",
 		__name: "EventSelect",
@@ -22382,7 +22540,10 @@
 			disabled: { type: Boolean },
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
@@ -22392,12 +22553,12 @@
 			const eventNameConfig = (0, vue.computed)(() => {
 				return {
 					name: "name",
-					text: "事件",
+					text: "事件类型",
 					type: (mForm, { formValue }) => {
 						if (props.config.src !== "component" || formValue.type === "page-fragment-container" && formValue.pageFragmentId) return "cascader";
 						return "select";
 					},
-					labelWidth: "40px",
+					labelWidth: "70px",
 					checkStrictly: () => props.config.src !== "component",
 					valueSeparator: ".",
 					options: (_mForm, { formValue }) => getEventNameOptions(props.config.src, formValue),
@@ -22436,6 +22597,7 @@
 					name: "actionType",
 					text: "联动类型",
 					type: "select",
+					labelPosition: "left",
 					defaultValue: _tmagic_core.ActionType.COMP,
 					options: actionTypeOptions.value,
 					rules: [{
@@ -22453,6 +22615,7 @@
 					name: "to",
 					text: "联动组件",
 					type: "ui-select",
+					labelPosition: "left",
 					display: (_mForm, { model }) => model.actionType === _tmagic_core.ActionType.COMP,
 					onChange: (_MForm, _v, { setModel }) => {
 						setModel("method", "");
@@ -22468,6 +22631,7 @@
 				return {
 					name: "method",
 					text: "动作",
+					labelPosition: "left",
 					type: (mForm, { model }) => {
 						const to = editorService.getNodeById(model.to);
 						if (to && to.type === "page-fragment-container" && to.pageFragmentId) return "cascader";
@@ -22543,12 +22707,14 @@
 			}));
 			const actionsConfig = (0, vue.computed)(() => (0, _tmagic_form.defineFormItem)({
 				type: "panel",
+				labelPosition: "left",
 				items: [{
 					type: "group-list",
 					name: "actions",
 					expandAll: true,
 					enableToggleMode: false,
 					titlePrefix: "动作",
+					labelPosition: "left",
 					items: [
 						actionTypeConfig.value,
 						targetCompConfig.value,
@@ -22613,7 +22779,7 @@
 			};
 			const onChangeHandler = (v, eventData) => emit("change", props.model[props.name], eventData);
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$28, [isOldVersion.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_form.MTable), {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$33, [isOldVersion.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_form.MTable), {
 					key: 0,
 					name: "events",
 					size: __props.size,
@@ -22630,73 +22796,97 @@
 					"last-values",
 					"is-compare",
 					"config"
-				])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$5, [!isCompareMode.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicButton), {
-					key: 0,
-					class: "create-button",
-					type: "primary",
-					size: __props.size,
-					disabled: __props.disabled,
-					onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
-				}, {
-					default: (0, vue.withCtx)(() => [..._cache[1] || (_cache[1] = [(0, vue.createTextVNode)("添加事件", -1)])]),
-					_: 1
-				}, 8, ["size", "disabled"])) : (0, vue.createCommentVNode)("v-if", true), ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(displayList.value, (entry) => {
-					return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_form.MPanel), {
-						key: entry.index,
-						disabled: __props.disabled,
+				])) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$5, [
+					(0, vue.createElementVNode)("div", _hoisted_3$3, [_cache[3] || (_cache[3] = (0, vue.createElementVNode)("div", { class: "event-select-title" }, "事件配置", -1)), !isCompareMode.value && displayList.value.length > 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicButton), {
+						key: 0,
+						class: "create-button",
+						text: "",
+						type: "primary",
+						icon: (0, vue.unref)(_element_plus_icons_vue.Plus),
 						size: __props.size,
-						prop: `${__props.prop}.${entry.index}`,
-						config: actionsConfig.value,
-						model: entry.cardItem,
-						"last-values": entry.lastCardItem,
-						"is-compare": isCompareMode.value,
-						"label-width": __props.config.labelWidth || "100px",
-						onChange: onChangeHandler
+						disabled: __props.disabled,
+						onClick: _cache[0] || (_cache[0] = ($event) => addEvent())
 					}, {
-						header: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MContainer), {
-							class: "fullWidth",
-							config: eventNameConfig.value,
-							model: entry.cardItem,
-							"last-values": entry.lastCardItem,
-							"is-compare": isCompareMode.value,
+						default: (0, vue.withCtx)(() => [..._cache[2] || (_cache[2] = [(0, vue.createTextVNode)("添加事件", -1)])]),
+						_: 1
+					}, 8, [
+						"icon",
+						"size",
+						"disabled"
+					])) : (0, vue.createCommentVNode)("v-if", true)]),
+					((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(displayList.value, (entry) => {
+						return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_form.MPanel), {
+							key: entry.index,
 							disabled: __props.disabled,
 							size: __props.size,
 							prop: `${__props.prop}.${entry.index}`,
-							onChange: eventNameChangeHandler
-						}, null, 8, [
+							config: actionsConfig.value,
+							model: entry.cardItem,
+							"last-values": entry.lastCardItem,
+							"is-compare": isCompareMode.value,
+							"hide-expand": true,
+							"label-width": __props.config.labelWidth || "100px",
+							onChange: onChangeHandler
+						}, {
+							header: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", _hoisted_4$2, [
+								(0, vue.createElementVNode)("div", _hoisted_5$1, "事件" + (0, vue.toDisplayString)(Number(entry.index) + 1), 1),
+								(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MContainer), {
+									class: "fullWidth",
+									config: eventNameConfig.value,
+									model: entry.cardItem,
+									"last-values": entry.lastCardItem,
+									"is-compare": isCompareMode.value,
+									disabled: __props.disabled,
+									size: __props.size,
+									prop: `${__props.prop}.${entry.index}`,
+									onChange: eventNameChangeHandler
+								}, null, 8, [
+									"config",
+									"model",
+									"last-values",
+									"is-compare",
+									"disabled",
+									"size",
+									"prop"
+								]),
+								!isCompareMode.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicButton), {
+									key: 0,
+									class: "event-item-delete-button",
+									link: "",
+									icon: (0, vue.unref)(_element_plus_icons_vue.Delete),
+									disabled: __props.disabled,
+									size: __props.size,
+									onClick: ($event) => removeEvent(Number(entry.index))
+								}, null, 8, [
+									"icon",
+									"disabled",
+									"size",
+									"onClick"
+								])) : (0, vue.createCommentVNode)("v-if", true)
+							])]),
+							_: 2
+						}, 1032, [
+							"disabled",
+							"size",
+							"prop",
 							"config",
 							"model",
 							"last-values",
 							"is-compare",
-							"disabled",
-							"size",
-							"prop"
-						]), !isCompareMode.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicButton), {
-							key: 0,
-							style: { "color": "#f56c6c" },
-							link: "",
-							icon: (0, vue.unref)(_element_plus_icons_vue.Delete),
-							disabled: __props.disabled,
-							size: __props.size,
-							onClick: ($event) => removeEvent(Number(entry.index))
-						}, null, 8, [
-							"icon",
-							"disabled",
-							"size",
-							"onClick"
-						])) : (0, vue.createCommentVNode)("v-if", true)]),
-						_: 2
-					}, 1032, [
-						"disabled",
-						"size",
-						"prop",
-						"config",
-						"model",
-						"last-values",
-						"is-compare",
-						"label-width"
-					]);
-				}), 128))]))]);
+							"label-width"
+						]);
+					}), 128)),
+					!isCompareMode.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicButton), {
+						key: 0,
+						class: "create-button fullWidth",
+						icon: (0, vue.unref)(_element_plus_icons_vue.Plus),
+						disabled: __props.disabled,
+						onClick: _cache[1] || (_cache[1] = ($event) => addEvent())
+					}, {
+						default: (0, vue.withCtx)(() => [..._cache[4] || (_cache[4] = [(0, vue.createTextVNode)("添加事件", -1)])]),
+						_: 1
+					}, 8, ["icon", "disabled"])) : (0, vue.createCommentVNode)("v-if", true)
+				]))]);
 			};
 		}
 	});
@@ -22705,7 +22895,7 @@
 	var EventSelect_default = EventSelect_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/icons/CodeIcon.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$27 = {
+	var _hoisted_1$32 = {
 		viewBox: "0 0 32 32",
 		version: "1.1",
 		xmlns: "http://www.w3.org/2000/svg",
@@ -22716,7 +22906,7 @@
 		__name: "CodeIcon",
 		setup(__props) {
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$27, [..._cache[0] || (_cache[0] = [(0, vue.createStaticVNode)("<defs><rect id=\"path-1\" x=\"0\" y=\"0\" width=\"32\" height=\"32\"></rect></defs><g id=\"组件规范\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><g id=\"03图标\" transform=\"translate(-561.000000, -2356.000000)\"><g id=\"icon/line/Universal/code\" transform=\"translate(561.000000, 2356.000000)\"><g id=\"路径\"><mask id=\"mask-2\" fill=\"white\"><use xlink:href=\"#path-1\"></use></mask><use id=\"蒙版\" fill=\"#D8D8D8\" opacity=\"0\" xlink:href=\"#path-1\"></use><path d=\"M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z\" id=\"形状\" fill=\"#1D1F24\" mask=\"url(#mask-2)\"></path></g></g><g id=\"icon切图\" transform=\"translate(226.000000, 1782.000000)\"></g></g></g>", 2)])]);
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$32, [..._cache[0] || (_cache[0] = [(0, vue.createStaticVNode)("<defs><rect id=\"path-1\" x=\"0\" y=\"0\" width=\"32\" height=\"32\"></rect></defs><g id=\"组件规范\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><g id=\"03图标\" transform=\"translate(-561.000000, -2356.000000)\"><g id=\"icon/line/Universal/code\" transform=\"translate(561.000000, 2356.000000)\"><g id=\"路径\"><mask id=\"mask-2\" fill=\"white\"><use xlink:href=\"#path-1\"></use></mask><use id=\"蒙版\" fill=\"#D8D8D8\" opacity=\"0\" xlink:href=\"#path-1\"></use><path d=\"M21.9284587,7.9482233 L29.8079004,15.827665 C29.9055315,15.9252961 29.9055315,16.0835874 29.8079004,16.1812184 L21.9284587,24.0606602 C21.8308276,24.1582912 21.6725364,24.1582912 21.5749053,24.0606602 L20.3374684,22.8232233 C20.2419143,22.7276698 20.2398813,22.5740096 20.331369,22.4759832 L20.3374687,22.4696702 L26.8027181,16.0044417 L20.3374687,9.53921328 C20.2398372,9.44158265 20.2398369,9.2832914 20.3374679,9.18566017 L21.5749053,7.9482233 C21.6725364,7.85059223 21.8308276,7.85059223 21.9284587,7.9482233 Z M10.3999684,7.9482233 L11.6374053,9.18566017 C11.7329594,9.28121371 11.7349925,9.43487387 11.6435048,9.53290029 L11.637405,9.53921328 L5.17215562,16.0044417 L11.637405,22.4696702 C11.7329593,22.5652236 11.7349926,22.7188837 11.643505,22.8169103 L11.6374053,22.8232233 L10.3999684,24.0606602 C10.3023374,24.1582912 10.1440461,24.1582912 10.046415,24.0606602 L2.1669733,16.1812184 C2.06934223,16.0835874 2.06934223,15.9252961 2.1669733,15.827665 L10.046415,7.9482233 C10.1440461,7.85059223 10.3023374,7.85059223 10.3999684,7.9482233 Z M17.2612532,9.29310422 L18.9262468,9.83189578 C19.0576112,9.87440526 19.1296423,10.0153579 19.0871328,10.1467222 L15.0848232,22.514807 C15.0423138,22.6461714 14.9013612,22.7182025 14.7699968,22.675693 L13.1050032,22.1369014 C12.9736388,22.0943919 12.9016077,21.9534393 12.9441172,21.822075 L16.9464268,9.45399022 C16.9889362,9.32262585 17.1298888,9.25059474 17.2612532,9.29310422 Z\" id=\"形状\" fill=\"#1D1F24\" mask=\"url(#mask-2)\"></path></g></g><g id=\"icon切图\" transform=\"translate(226.000000, 1782.000000)\"></g></g></g>", 2)])]);
 			};
 		}
 	});
@@ -22726,7 +22916,7 @@
 	//#endregion
 	//#region packages/editor/src/fields/KeyValue.vue?vue&type=script&setup=true&lang.ts
 	init_CodeEditor();
-	var _hoisted_1$26 = { class: "m-fields-key-value" };
+	var _hoisted_1$31 = { class: "m-fields-key-value" };
 	var _hoisted_2$4 = { key: 0 };
 	var KeyValue_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MFieldsKeyValue",
@@ -22744,7 +22934,10 @@
 			},
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
@@ -22790,7 +22983,7 @@
 				emit("change", v);
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$26, [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$31, [
 					!showCode.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$4, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(records.value, (item, index) => {
 						return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 							class: "m-fields-key-value-item",
@@ -22885,10 +23078,68 @@
 	//#region packages/editor/src/fields/KeyValue.vue
 	var KeyValue_default = KeyValue_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
+	//#region packages/editor/src/components/ViewForm.vue?vue&type=script&setup=true&lang.ts
+	init_use_compare_form();
+	var ViewForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
+		name: "MEditorViewForm",
+		__name: "ViewForm",
+		props: {
+			value: {},
+			type: {},
+			category: { default: "node" },
+			dataSourceType: {},
+			labelWidth: { default: "120px" },
+			height: {},
+			extendState: {},
+			baseFormState: {},
+			size: {},
+			loadConfig: {},
+			services: {},
+			disabled: {
+				type: Boolean,
+				default: true
+			}
+		},
+		setup(__props, { expose: __expose }) {
+			const { config, currentValues, wrapperStyle, mergedExtendState, loadConfig, formRef } = useCompareForm(__props);
+			__expose({
+				form: formRef,
+				config,
+				reload: loadConfig
+			});
+			return (_ctx, _cache) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
+					class: "m-editor-view-form-wrapper",
+					style: (0, vue.normalizeStyle)((0, vue.unref)(wrapperStyle))
+				}, [(0, vue.unref)(config).length ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_form.MForm), {
+					key: 0,
+					ref: "form",
+					class: "m-editor-view-form",
+					config: (0, vue.unref)(config),
+					"init-values": (0, vue.unref)(currentValues),
+					disabled: __props.disabled,
+					"label-width": __props.labelWidth,
+					"extend-state": (0, vue.unref)(mergedExtendState),
+					size: __props.size
+				}, null, 8, [
+					"config",
+					"init-values",
+					"disabled",
+					"label-width",
+					"extend-state",
+					"size"
+				])) : (0, vue.createCommentVNode)("v-if", true)], 4);
+			};
+		}
+	});
+	//#endregion
+	//#region packages/editor/src/components/ViewForm.vue
+	var ViewForm_default = ViewForm_vue_vue_type_script_setup_true_lang_default;
+	//#endregion
 	//#region packages/editor/src/fields/PageFragmentSelect.vue?vue&type=script&setup=true&lang.ts
 	init_HistoryDiffDialog();
 	init_Icon();
-	var _hoisted_1$25 = { class: "m-fields-page-fragment-select" };
+	var _hoisted_1$30 = { class: "m-fields-page-fragment-select" };
 	var _hoisted_2$3 = { class: "page-fragment-select-container" };
 	var PageFragmentSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MFieldsPageFragmentSelect",
@@ -22906,7 +23157,10 @@
 			},
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
@@ -22931,7 +23185,7 @@
 				editorService.select(id);
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$25, [(0, vue.createElementVNode)("div", _hoisted_2$3, [
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$30, [(0, vue.createElementVNode)("div", _hoisted_2$3, [
 					(0, vue.createCommentVNode)(" 页面片下拉框 "),
 					(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MSelect), {
 						class: "select",
@@ -22981,7 +23235,10 @@
 			},
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
@@ -23005,11 +23262,14 @@
 				titlePrefix: props.config.titlePrefix,
 				expandAll: true,
 				enableToggleMode: false,
+				flat: props.config.flat,
 				items: [{
 					type: "table",
 					name: "cond",
-					operateColWidth: 80,
+					operateColWidth: props.config.operateColWidth,
 					enableToggleMode: false,
+					fixed: props.config.fixed,
+					flat: props.config.flat,
 					items: [
 						parentFields.value.length ? {
 							type: "cascader",
@@ -23146,6 +23406,7 @@
 	var DisplayConds_default = DisplayConds_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/fields/CondOpSelect.vue?vue&type=script&setup=true&lang.ts
+	init_props();
 	var CondOpSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MFieldsCondOpSelect",
 		__name: "CondOpSelect",
@@ -23159,7 +23420,10 @@
 			disabled: { type: Boolean },
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
@@ -23209,7 +23473,7 @@
 	var CondOpSelect_default = CondOpSelect_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/fields/StyleSetter/components/BackgroundPosition.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$24 = { class: "background-position-container" };
+	var _hoisted_1$29 = { class: "background-position-container" };
 	var _hoisted_2$2 = { class: "presets-value-list" };
 	var _hoisted_3$2 = { class: "custom-value" };
 	var BackgroundPosition_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
@@ -23224,7 +23488,10 @@
 			disabled: { type: Boolean },
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
@@ -23265,7 +23532,7 @@
 				emit("change", v);
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$24, [(0, vue.createElementVNode)("div", _hoisted_2$2, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(list), (item, index) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$29, [(0, vue.createElementVNode)("div", _hoisted_2$2, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)((0, vue.unref)(list), (item, index) => {
 					return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicButton), {
 						key: index,
 						link: "",
@@ -23304,65 +23571,110 @@
 	//#region packages/editor/src/fields/StyleSetter/components/BackgroundPosition.vue
 	var BackgroundPosition_default = BackgroundPosition_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
-	//#region \0plugin-vue:export-helper
-	var _plugin_vue_export_helper_default = (sfc, props) => {
-		const target = sfc.__vccOpts || sfc;
-		for (const [key, val] of props) target[key] = val;
-		return target;
-	};
-	//#endregion
 	//#region packages/editor/src/fields/StyleSetter/icons/background-repeat/Repeat.vue
-	var _sfc_main$20 = {};
-	var _hoisted_1$23 = {
+	var _sfc_main$25 = {};
+	var _hoisted_1$28 = {
 		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 1024 1024"
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor"
 	};
-	function _sfc_render$20(_ctx, _cache) {
-		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$23, [..._cache[0] || (_cache[0] = [(0, vue.createStaticVNode)("<path d=\"M884.736 102.4l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456C696.32 311.296 712.704 327.68 733.184 327.68l147.456 0c20.48 0 36.864-16.384 36.864-36.864L917.504 139.264C921.6 118.784 905.216 102.4 884.736 102.4zM884.736 290.816l-147.456 0L737.28 139.264l147.456 0L884.736 290.816z\"></path><path d=\"M884.736 696.32l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C921.6 712.704 905.216 696.32 884.736 696.32zM884.736 884.736l-147.456 0 0-147.456 147.456 0L884.736 884.736z\"></path><path d=\"M884.736 401.408l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C921.6 417.792 905.216 401.408 884.736 401.408zM884.736 585.728l-147.456 0 0-147.456 147.456 0L884.736 585.728z\"></path><path d=\"M585.728 401.408l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C622.592 417.792 606.208 401.408 585.728 401.408zM585.728 585.728l-147.456 0 0-147.456 147.456 0L585.728 585.728z\"></path><path d=\"M585.728 102.4l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864L622.592 139.264C622.592 118.784 606.208 102.4 585.728 102.4zM585.728 290.816l-147.456 0L438.272 139.264l147.456 0L585.728 290.816z\"></path><path d=\"M585.728 696.32l-147.456 0c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C622.592 712.704 606.208 696.32 585.728 696.32zM585.728 884.736l-147.456 0 0-147.456 147.456 0L585.728 884.736z\"></path><path d=\"M290.816 696.32 139.264 696.32c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C327.68 712.704 311.296 696.32 290.816 696.32zM290.816 884.736 139.264 884.736l0-147.456 147.456 0L286.72 884.736z\"></path><path d=\"M290.816 401.408 139.264 401.408c-20.48 0-36.864 16.384-36.864 36.864l0 147.456c0 20.48 16.384 36.864 36.864 36.864l147.456 0c20.48 0 36.864-16.384 36.864-36.864l0-147.456C327.68 417.792 311.296 401.408 290.816 401.408zM290.816 585.728 139.264 585.728l0-147.456 147.456 0L286.72 585.728z\"></path><path d=\"M290.816 102.4 139.264 102.4c-20.48 0-36.864 16.384-36.864 36.864l0 147.456C102.4 311.296 118.784 327.68 139.264 327.68l147.456 0C311.296 327.68 327.68 311.296 327.68 290.816L327.68 139.264C327.68 118.784 311.296 102.4 290.816 102.4zM290.816 290.816 139.264 290.816 139.264 139.264l147.456 0L286.72 290.816z\"></path>", 9)])]);
+	function _sfc_render$25(_ctx, _cache) {
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$28, [..._cache[0] || (_cache[0] = [(0, vue.createStaticVNode)("<rect x=\"13\" y=\"3\" width=\"2\" height=\"2\" rx=\"0.5\" transform=\"rotate(90 13 3)\" fill-opacity=\"0.3\"></rect><rect x=\"13\" y=\"7\" width=\"2\" height=\"2\" rx=\"0.5\" transform=\"rotate(90 13 7)\" fill-opacity=\"0.3\"></rect><rect x=\"13\" y=\"11\" width=\"2\" height=\"2\" rx=\"0.5\" transform=\"rotate(90 13 11)\" fill-opacity=\"0.3\"></rect><rect x=\"9\" y=\"3\" width=\"2\" height=\"2\" rx=\"0.5\" transform=\"rotate(90 9 3)\"></rect><rect x=\"9\" y=\"7\" width=\"2\" height=\"2\" rx=\"0.5\" transform=\"rotate(90 9 7)\"></rect><rect x=\"9\" y=\"11\" width=\"2\" height=\"2\" rx=\"0.5\" transform=\"rotate(90 9 11)\" fill-opacity=\"0.3\"></rect><rect x=\"5\" y=\"3\" width=\"2\" height=\"2\" rx=\"0.5\" transform=\"rotate(90 5 3)\"></rect><rect x=\"5\" y=\"7\" width=\"2\" height=\"2\" rx=\"0.5\" transform=\"rotate(90 5 7)\"></rect><rect x=\"5\" y=\"11\" width=\"2\" height=\"2\" rx=\"0.5\" transform=\"rotate(90 5 11)\" fill-opacity=\"0.3\"></rect>", 9)])]);
 	}
-	var Repeat_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$20, [["render", _sfc_render$20]]);
+	var Repeat_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$25, [["render", _sfc_render$25]]);
 	//#endregion
 	//#region packages/editor/src/fields/StyleSetter/icons/background-repeat/RepeatX.vue
-	var _sfc_main$19 = {};
-	var _hoisted_1$22 = {
+	var _sfc_main$24 = {};
+	var _hoisted_1$27 = {
 		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 1024 1024"
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor"
 	};
-	function _sfc_render$19(_ctx, _cache) {
-		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$22, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", {
-			d: "M796.444444 170.666667h-227.555555v682.666666h227.555555V170.666667z m-56.888888 625.777777h-113.777778V227.555556h113.777778v568.888888zM455.111111 170.666667H227.555556v682.666666h227.555555V170.666667zM398.222222 796.444444H284.444444V227.555556h113.777778v568.888888zM910.222222 56.888889h56.888889v910.222222h-56.888889zM56.888889 56.888889h56.888889v910.222222H56.888889z",
-			fill: "#333333"
-		}, null, -1)])]);
+	function _sfc_render$24(_ctx, _cache) {
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$27, [..._cache[0] || (_cache[0] = [
+			(0, vue.createElementVNode)("rect", {
+				x: "3",
+				y: "3",
+				width: "2",
+				height: "10",
+				rx: "1"
+			}, null, -1),
+			(0, vue.createElementVNode)("rect", {
+				x: "7",
+				y: "3",
+				width: "2",
+				height: "10",
+				rx: "1"
+			}, null, -1),
+			(0, vue.createElementVNode)("rect", {
+				x: "11",
+				y: "3",
+				width: "2",
+				height: "10",
+				rx: "1",
+				"fill-opacity": "0.3"
+			}, null, -1)
+		])]);
 	}
-	var RepeatX_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$19, [["render", _sfc_render$19]]);
+	var RepeatX_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$24, [["render", _sfc_render$24]]);
 	//#endregion
 	//#region packages/editor/src/fields/StyleSetter/icons/background-repeat/RepeatY.vue
-	var _sfc_main$18 = {};
-	var _hoisted_1$21 = {
+	var _sfc_main$23 = {};
+	var _hoisted_1$26 = {
 		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 1024 1024"
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor"
 	};
-	function _sfc_render$18(_ctx, _cache) {
-		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$21, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", {
-			d: "M170.666667 227.555556v227.555555h682.666666V227.555556H170.666667z m625.777777 56.888888v113.777778H227.555556V284.444444h568.888888zM170.666667 568.888889v227.555555h682.666666v-227.555555H170.666667z m625.777777 56.888889v113.777778H227.555556v-113.777778h568.888888zM56.888889 56.888889h910.222222v56.888889H56.888889zM56.888889 910.222222h910.222222v56.888889H56.888889z",
-			fill: "#333333"
-		}, null, -1)])]);
+	function _sfc_render$23(_ctx, _cache) {
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$26, [..._cache[0] || (_cache[0] = [
+			(0, vue.createElementVNode)("rect", {
+				x: "13",
+				y: "3",
+				width: "2",
+				height: "10",
+				rx: "1",
+				transform: "rotate(90 13 3)"
+			}, null, -1),
+			(0, vue.createElementVNode)("rect", {
+				x: "13",
+				y: "7",
+				width: "2",
+				height: "10",
+				rx: "1",
+				transform: "rotate(90 13 7)"
+			}, null, -1),
+			(0, vue.createElementVNode)("rect", {
+				x: "13",
+				y: "11",
+				width: "2",
+				height: "10",
+				rx: "1",
+				transform: "rotate(90 13 11)",
+				"fill-opacity": "0.3"
+			}, null, -1)
+		])]);
 	}
-	var RepeatY_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$18, [["render", _sfc_render$18]]);
+	var RepeatY_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$23, [["render", _sfc_render$23]]);
 	//#endregion
 	//#region packages/editor/src/fields/StyleSetter/icons/background-repeat/NoRepeat.vue
-	var _sfc_main$17 = {};
-	var _hoisted_1$20 = {
+	var _sfc_main$22 = {};
+	var _hoisted_1$25 = {
 		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 1024 1024"
+		width: "10",
+		height: "10",
+		viewBox: "0 0 10 10",
+		fill: "currentColor"
 	};
-	function _sfc_render$17(_ctx, _cache) {
-		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$20, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", {
-			d: "M912.526651 867.741144 555.540144 510.712681l356.986507-357.000833c11.171434-11.18576 11.171434-29.257348 0-40.443108-11.20111-11.18576-29.272697-11.18576-40.444131 0L515.096013 470.267527 158.096203 113.267716c-11.187807-11.159154-29.258371-11.159154-40.444131 0-11.186783 11.186783-11.186783 29.286 0 40.47176L474.623229 510.712681 117.623419 867.741144c-11.159154 11.172457-11.159154 29.216415 0 40.443108 11.18576 11.17348 29.284977 11.17348 40.47176 0l357.000833-357.027439 356.985484 357.027439c11.171434 11.17348 29.243021 11.17348 40.444131 0C923.698085 896.957559 923.725714 878.913601 912.526651 867.741144z",
-			fill: "#5D5D5D"
-		}, null, -1)])]);
+	function _sfc_render$22(_ctx, _cache) {
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$25, [..._cache[0] || (_cache[0] = [(0, vue.createStaticVNode)("<path d=\"M0 0.625C0 0.279822 0.248731 0 0.555556 0H9.44444C9.75127 0 10 0.279822 10 0.625C10 0.970178 9.75127 1.25 9.44444 1.25H0.555556C0.248731 1.25 0 0.970178 0 0.625Z\" fill-opacity=\"0.3\"></path><path d=\"M0 9.375C0 9.02982 0.248731 8.75 0.555556 8.75H9.44444C9.75127 8.75 10 9.02982 10 9.375C10 9.72018 9.75127 10 9.44444 10H0.555556C0.248731 10 0 9.72018 0 9.375Z\" fill-opacity=\"0.3\"></path><path d=\"M0.555556 4.375C0.248731 4.375 0 4.65482 0 5C0 5.34518 0.248731 5.625 0.555556 5.625H2.87307L3.42868 4.99994L2.87318 4.375H0.555556Z\" fill-opacity=\"0.3\"></path><path d=\"M9.44444 5.625H7.12699L6.57138 4.99994L7.12688 4.375H9.44444C9.75127 4.375 10 4.65482 10 5C10 5.34518 9.75127 5.625 9.44444 5.625Z\" fill-opacity=\"0.3\"></path><path transform=\"translate(0 2.6072)\" d=\"M3.30542 0.183058C3.52237 -0.0610194 3.87413 -0.0610194 4.09109 0.183058C4.30805 0.427136 4.30805 0.822864 4.09109 1.06694L2.91256 2.39279L4.0911 3.71865C4.30806 3.96273 4.30806 4.35846 4.0911 4.60253C3.87414 4.84661 3.52239 4.84661 3.30543 4.60253L2.12688 3.27667L0.948393 4.60248C0.731435 4.84655 0.379676 4.84655 0.162719 4.60248C-0.0542395 4.3584 -0.0542395 3.96267 0.162719 3.71859L1.34121 2.39279L0.162731 1.067C-0.0542269 0.822922 -0.0542268 0.427194 0.162731 0.183116C0.379689 -0.0609612 0.731447 -0.0609612 0.948405 0.183116L2.12688 1.50891L3.30542 0.183058Z\"></path>", 5)])]);
 	}
-	var NoRepeat_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$17, [["render", _sfc_render$17]]);
+	var NoRepeat_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$22, [["render", _sfc_render$22]]);
 	//#endregion
 	//#region packages/editor/src/fields/StyleSetter/pro/Background.vue?vue&type=script&setup=true&lang.ts
 	var Background_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
@@ -23373,6 +23685,7 @@
 			isCompare: { type: Boolean },
 			disabled: { type: Boolean },
 			size: {},
+			theme: {},
 			prop: {}
 		},
 		emits: ["change", "addDiffCount"],
@@ -23444,9 +23757,9 @@
 					labelWidth: "68px",
 					options: [
 						{
-							value: "repeat",
-							icon: (0, vue.markRaw)(Repeat_default),
-							tooltip: "垂直和水平方向重复 repeat"
+							value: "no-repeat",
+							icon: (0, vue.markRaw)(NoRepeat_default),
+							tooltip: "不重复 no-repeat"
 						},
 						{
 							value: "repeat-x",
@@ -23459,9 +23772,9 @@
 							tooltip: "垂直方向重复 repeat-y"
 						},
 						{
-							value: "no-repeat",
-							icon: (0, vue.markRaw)(NoRepeat_default),
-							tooltip: "不重复 no-repeat"
+							value: "repeat",
+							icon: (0, vue.markRaw)(Repeat_default),
+							tooltip: "垂直和水平方向重复 repeat"
 						}
 					]
 				},
@@ -23508,37 +23821,37 @@
 	var Background_default = Background_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/fields/StyleSetter/icons/text-align/Left.vue
-	var _sfc_main$16 = {};
-	var _hoisted_1$19 = {
+	var _sfc_main$21 = {};
+	var _hoisted_1$24 = {
 		xmlns: "http://www.w3.org/2000/svg",
 		viewBox: "0 0 1024 1024"
 	};
-	function _sfc_render$16(_ctx, _cache) {
-		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$19, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M128 810.666667h768v85.333333H128z m0-170.666667h512v85.333333H128z m0-170.666667h768v85.333334H128z m0-341.333333h768v85.333333H128z m0 170.666667h512v85.333333H128z" }, null, -1)])]);
+	function _sfc_render$21(_ctx, _cache) {
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$24, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M128 810.666667h768v85.333333H128z m0-170.666667h512v85.333333H128z m0-170.666667h768v85.333334H128z m0-341.333333h768v85.333333H128z m0 170.666667h512v85.333333H128z" }, null, -1)])]);
 	}
-	var Left_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$16, [["render", _sfc_render$16]]);
+	var Left_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$21, [["render", _sfc_render$21]]);
 	//#endregion
 	//#region packages/editor/src/fields/StyleSetter/icons/text-align/Center.vue
-	var _sfc_main$15 = {};
-	var _hoisted_1$18 = {
+	var _sfc_main$20 = {};
+	var _hoisted_1$23 = {
 		xmlns: "http://www.w3.org/2000/svg",
 		viewBox: "0 0 1024 1024"
 	};
-	function _sfc_render$15(_ctx, _cache) {
-		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$18, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M128 810.666667h768v85.333333H128z m128-170.666667h512v85.333333H256z m-128-170.666667h768v85.333334H128z m0-341.333333h768v85.333333H128z m128 170.666667h512v85.333333H256z" }, null, -1)])]);
+	function _sfc_render$20(_ctx, _cache) {
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$23, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M128 810.666667h768v85.333333H128z m128-170.666667h512v85.333333H256z m-128-170.666667h768v85.333334H128z m0-341.333333h768v85.333333H128z m128 170.666667h512v85.333333H256z" }, null, -1)])]);
 	}
-	var Center_default$1 = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$15, [["render", _sfc_render$15]]);
+	var Center_default$2 = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$20, [["render", _sfc_render$20]]);
 	//#endregion
 	//#region packages/editor/src/fields/StyleSetter/icons/text-align/Right.vue
-	var _sfc_main$14 = {};
-	var _hoisted_1$17 = {
+	var _sfc_main$19 = {};
+	var _hoisted_1$22 = {
 		xmlns: "http://www.w3.org/2000/svg",
 		viewBox: "0 0 1024 1024"
 	};
-	function _sfc_render$14(_ctx, _cache) {
-		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$17, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M128 128h768v85.333333H128z m0 682.666667h768v85.333333H128z m213.333333-170.666667h554.666667v85.333333H341.333333z m-213.333333-170.666667h768v85.333334H128z m213.333333-170.666666h554.666667v85.333333H341.333333z" }, null, -1)])]);
+	function _sfc_render$19(_ctx, _cache) {
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$22, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M128 128h768v85.333333H128z m0 682.666667h768v85.333333H128z m213.333333-170.666667h554.666667v85.333333H341.333333z m-213.333333-170.666667h768v85.333334H128z m213.333333-170.666666h554.666667v85.333333H341.333333z" }, null, -1)])]);
 	}
-	var Right_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$14, [["render", _sfc_render$14]]);
+	var Right_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$19, [["render", _sfc_render$19]]);
 	//#endregion
 	//#region packages/editor/src/fields/StyleSetter/pro/Font.vue?vue&type=script&setup=true&lang.ts
 	var Font_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
@@ -23601,17 +23914,20 @@
 						{
 							value: "left",
 							icon: (0, vue.markRaw)(Left_default),
-							tooltip: "左对齐 row"
+							tooltip: "左对齐 row",
+							text: "左对齐"
 						},
 						{
 							value: "center",
-							icon: (0, vue.markRaw)(Center_default$1),
-							tooltip: "居中对齐 center"
+							icon: (0, vue.markRaw)(Center_default$2),
+							tooltip: "居中对齐 center",
+							text: "居中对齐"
 						},
 						{
 							value: "right",
 							icon: (0, vue.markRaw)(Right_default),
-							tooltip: "右对齐 right"
+							tooltip: "右对齐 right",
+							text: "右对齐"
 						}
 					]
 				}
@@ -23651,7 +23967,7 @@
 	var Font_default = Font_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/fields/StyleSetter/components/Box.vue?vue&type=script&setup=true&lang.ts
-	var _hoisted_1$16 = { class: "layout-box-container" };
+	var _hoisted_1$21 = { class: "layout-box-container" };
 	var _hoisted_2$1 = {
 		key: 0,
 		class: "help-txt"
@@ -23715,7 +24031,7 @@
 				emit("change", event.target.value, { modifyKey: name });
 			};
 			return (_ctx, _cache) => {
-				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$16, [((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(list, (item, index) => {
+				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$21, [((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(list, (item, index) => {
 					return (0, vue.createElementVNode)("div", {
 						key: index,
 						class: (0, vue.normalizeClass)(item.class)
@@ -23734,6 +24050,184 @@
 	//#region packages/editor/src/fields/StyleSetter/components/Box.vue
 	var Box_default = Box_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
+	//#region packages/editor/src/fields/StyleSetter/icons/align-items/Center.vue
+	var _sfc_main$18 = {};
+	var _hoisted_1$20 = {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor"
+	};
+	function _sfc_render$18(_ctx, _cache) {
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$20, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M12 4C12.5523 4 13 4.44772 13 5V11C13 11.5523 12.5523 12 12 12H4C3.44772 12 3 11.5523 3 11V5C3 4.44772 3.44772 4 4 4H12ZM4.5 5C4.22386 5 4 5.22386 4 5.5V10.5C4 10.7761 4.22386 11 4.5 11H11.5C11.7761 11 12 10.7761 12 10.5V5.5C12 5.22386 11.7761 5 11.5 5H4.5Z" }, null, -1), (0, vue.createElementVNode)("rect", {
+			x: "13.75",
+			y: "7.75",
+			width: "0.5",
+			height: "11.5",
+			rx: "0.25",
+			transform: "rotate(90 13.75 7.75)",
+			stroke: "black",
+			"stroke-opacity": "0.3",
+			style: {
+				"stroke": "black",
+				"stroke-opacity": "0.3"
+			},
+			"stroke-width": "0.5"
+		}, null, -1)])]);
+	}
+	var Center_default$1 = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$18, [["render", _sfc_render$18]]);
+	//#endregion
+	//#region packages/editor/src/fields/StyleSetter/icons/align-items/FlexEnd.vue
+	var _sfc_main$17 = {};
+	var _hoisted_1$19 = {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor"
+	};
+	function _sfc_render$17(_ctx, _cache) {
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$19, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M12 3C12.5523 3 13 3.44772 13 4V10C13 10.5523 12.5523 11 12 11H4C3.44772 11 3 10.5523 3 10V4C3 3.44772 3.44772 3 4 3H12ZM4.5 4C4.22386 4 4 4.22386 4 4.5V9.5C4 9.77614 4.22386 10 4.5 10H11.5C11.7761 10 12 9.77614 12 9.5V4.5C12 4.22386 11.7761 4 11.5 4H4.5Z" }, null, -1), (0, vue.createElementVNode)("rect", {
+			x: "13.75",
+			y: "12.25",
+			width: "0.5",
+			height: "11.5",
+			rx: "0.25",
+			transform: "rotate(90 13.75 12.25)",
+			stroke: "black",
+			"stroke-opacity": "0.3",
+			style: {
+				"stroke": "black",
+				"stroke-opacity": "0.3"
+			},
+			"stroke-width": "0.5"
+		}, null, -1)])]);
+	}
+	var FlexEnd_default$1 = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$17, [["render", _sfc_render$17]]);
+	//#endregion
+	//#region packages/editor/src/fields/StyleSetter/icons/align-items/FlexStart.vue
+	var _sfc_main$16 = {};
+	var _hoisted_1$18 = {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor"
+	};
+	function _sfc_render$16(_ctx, _cache) {
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$18, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M12 5C12.5523 5 13 5.44772 13 6V12C13 12.5523 12.5523 13 12 13H4C3.44772 13 3 12.5523 3 12V6C3 5.44772 3.44772 5 4 5H12ZM4.5 6C4.22386 6 4 6.22386 4 6.5V11.5C4 11.7761 4.22386 12 4.5 12H11.5C11.7761 12 12 11.7761 12 11.5V6.5C12 6.22386 11.7761 6 11.5 6H4.5Z" }, null, -1), (0, vue.createElementVNode)("rect", {
+			x: "13.75",
+			y: "3.25",
+			width: "0.5",
+			height: "11.5",
+			rx: "0.25",
+			transform: "rotate(90 13.75 3.25)",
+			stroke: "white",
+			"stroke-opacity": "0.3",
+			style: {
+				"stroke": "white",
+				"stroke-opacity": "0.3"
+			},
+			"stroke-width": "0.5"
+		}, null, -1)])]);
+	}
+	var FlexStart_default$1 = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$16, [["render", _sfc_render$16]]);
+	//#endregion
+	//#region packages/editor/src/fields/StyleSetter/icons/align-items/SpaceAround.vue
+	var _sfc_main$15 = {};
+	var _hoisted_1$17 = {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor"
+	};
+	function _sfc_render$15(_ctx, _cache) {
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$17, [..._cache[0] || (_cache[0] = [
+			(0, vue.createElementVNode)("path", { d: "M12 8C12.5523 8 13 8.44772 13 9V12C13 12.5523 12.5523 13 12 13H4C3.44772 13 3 12.5523 3 12V9C3 8.44772 3.44772 8 4 8H12ZM4.5 9C4.22386 9 4 9.22386 4 9.5V11.5C4 11.7761 4.22386 12 4.5 12H11.5C11.7761 12 12 11.7761 12 11.5V9.5C12 9.22386 11.7761 9 11.5 9H4.5Z" }, null, -1),
+			(0, vue.createElementVNode)("path", { d: "M12 2C12.5523 2 13 2.44772 13 3V6C13 6.55228 12.5523 7 12 7H4C3.44772 7 3 6.55228 3 6V3C3 2.44772 3.44772 2 4 2H12ZM4.5 3C4.22386 3 4 3.22386 4 3.5V5.5C4 5.77614 4.22386 6 4.5 6H11.5C11.7761 6 12 5.77614 12 5.5V3.5C12 3.22386 11.7761 3 11.5 3H4.5Z" }, null, -1),
+			(0, vue.createElementVNode)("rect", {
+				x: "13.75",
+				y: "10.25",
+				width: "0.5",
+				height: "11.5",
+				rx: "0.25",
+				transform: "rotate(90 13.75 10.25)",
+				stroke: "black",
+				"stroke-opacity": "0.3",
+				style: {
+					"stroke": "black",
+					"stroke-opacity": "0.3"
+				},
+				"stroke-width": "0.5"
+			}, null, -1),
+			(0, vue.createElementVNode)("rect", {
+				x: "13.75",
+				y: "4.25",
+				width: "0.5",
+				height: "11.5",
+				rx: "0.25",
+				transform: "rotate(90 13.75 4.25)",
+				stroke: "black",
+				"stroke-opacity": "0.3",
+				style: {
+					"stroke": "black",
+					"stroke-opacity": "0.3"
+				},
+				"stroke-width": "0.5"
+			}, null, -1)
+		])]);
+	}
+	var SpaceAround_default$1 = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$15, [["render", _sfc_render$15]]);
+	//#endregion
+	//#region packages/editor/src/fields/StyleSetter/icons/align-items/SpaceBetween.vue
+	var _sfc_main$14 = {};
+	var _hoisted_1$16 = {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor"
+	};
+	function _sfc_render$14(_ctx, _cache) {
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$16, [..._cache[0] || (_cache[0] = [
+			(0, vue.createElementVNode)("path", { d: "M12 9C12.5523 9 13 9.44772 13 10V12C13 12.5523 12.5523 13 12 13H4C3.44772 13 3 12.5523 3 12V10C3 9.44772 3.44772 9 4 9H12ZM4.5 10C4.22386 10 4 10.2239 4 10.5V11.5C4 11.7761 4.22386 12 4.5 12H11.5C11.7761 12 12 11.7761 12 11.5V10.5C12 10.2239 11.7761 10 11.5 10H4.5Z" }, null, -1),
+			(0, vue.createElementVNode)("path", { d: "M12 3C12.5523 3 13 3.44772 13 4V6C13 6.55228 12.5523 7 12 7H4C3.44772 7 3 6.55228 3 6V4C3 3.44772 3.44772 3 4 3H12ZM4.5 4C4.22386 4 4 4.22386 4 4.5V5.5C4 5.77614 4.22386 6 4.5 6H11.5C11.7761 6 12 5.77614 12 5.5V4.5C12 4.22386 11.7761 4 11.5 4H4.5Z" }, null, -1),
+			(0, vue.createElementVNode)("rect", {
+				x: "13.75",
+				y: "14.25",
+				width: "0.5",
+				height: "11.5",
+				rx: "0.25",
+				transform: "rotate(90 13.75 14.25)",
+				stroke: "black",
+				"stroke-opacity": "0.3",
+				style: {
+					"stroke": "black",
+					"stroke-opacity": "0.3"
+				},
+				"stroke-width": "0.5"
+			}, null, -1),
+			(0, vue.createElementVNode)("rect", {
+				x: "13.75",
+				y: "1.25",
+				width: "0.5",
+				height: "11.5",
+				rx: "0.25",
+				transform: "rotate(90 13.75 1.25)",
+				stroke: "black",
+				"stroke-opacity": "0.3",
+				style: {
+					"stroke": "black",
+					"stroke-opacity": "0.3"
+				},
+				"stroke-width": "0.5"
+			}, null, -1)
+		])]);
+	}
+	var SpaceBetween_default$1 = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$14, [["render", _sfc_render$14]]);
+	//#endregion
 	//#region packages/editor/src/fields/StyleSetter/icons/display/Block.vue
 	var _sfc_main$13 = {};
 	var _hoisted_1$15 = {
@@ -23793,10 +24287,18 @@
 	var _sfc_main$8 = {};
 	var _hoisted_1$10 = {
 		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 1024 1024"
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor"
 	};
 	function _sfc_render$8(_ctx, _cache) {
-		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$10, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M896 320H128V0h768v320z m0 320H128v-256h768v256z m-128 192l-256 192-256-192 192-0.032V704h128v128h192z" }, null, -1)])]);
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$10, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M12 3C12.5523 3 13 3.44772 13 4V10C13 10.5523 12.5523 11 12 11H4C3.44772 11 3 10.5523 3 10V4C3 3.44772 3.44772 3 4 3H12ZM4.5 4C4.22386 4 4 4.22386 4 4.5V9.5C4 9.77614 4.22386 10 4.5 10H11.5C11.7761 10 12 9.77614 12 9.5V4.5C12 4.22386 11.7761 4 11.5 4H4.5Z" }, null, -1), (0, vue.createElementVNode)("path", {
+			"fill-rule": "evenodd",
+			"clip-rule": "evenodd",
+			d: "M11 12L8 15L5 12L11 12Z",
+			"fill-opacity": "0.3"
+		}, null, -1)])]);
 	}
 	var Column_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$8, [["render", _sfc_render$8]]);
 	//#endregion
@@ -23804,10 +24306,18 @@
 	var _sfc_main$7 = {};
 	var _hoisted_1$9 = {
 		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 1024 1024"
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor"
 	};
 	function _sfc_render$7(_ctx, _cache) {
-		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$9, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M896 704H128v320h768V704z m0-320H128v256h768v-256z m-128-192l-256-192-256 192 192 0.032V320h128V192h192z" }, null, -1)])]);
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$9, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M12 5C12.5523 5 13 5.44772 13 6V12C13 12.5523 12.5523 13 12 13H4C3.44772 13 3 12.5523 3 12V6C3 5.44772 3.44772 5 4 5H12ZM4.5 6C4.22386 6 4 6.22386 4 6.5V11.5C4 11.7761 4.22386 12 4.5 12H11.5C11.7761 12 12 11.7761 12 11.5V6.5C12 6.22386 11.7761 6 11.5 6H4.5Z" }, null, -1), (0, vue.createElementVNode)("path", {
+			"fill-rule": "evenodd",
+			"clip-rule": "evenodd",
+			d: "M5 4L8 1L11 4L5 4Z",
+			"fill-opacity": "0.3"
+		}, null, -1)])]);
 	}
 	var ColumnReverse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$7, [["render", _sfc_render$7]]);
 	//#endregion
@@ -23815,10 +24325,18 @@
 	var _sfc_main$6 = {};
 	var _hoisted_1$8 = {
 		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 1024 1024"
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor"
 	};
 	function _sfc_render$6(_ctx, _cache) {
-		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$8, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M320 128v768H0V128h320z m320 0v768h-256V128h256z m192 128l192 256-192 256-0.032-192H704v-128h128V256z" }, null, -1)])]);
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$8, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M10 4C10.5523 4 11 4.44772 11 5V11C11 11.5523 10.5523 12 10 12H2C1.44772 12 1 11.5523 1 11V5C1 4.44772 1.44772 4 2 4H10ZM2.5 5C2.22386 5 2 5.22386 2 5.5V10.5C2 10.7761 2.22386 11 2.5 11H9.5C9.77614 11 10 10.7761 10 10.5V5.5C10 5.22386 9.77614 5 9.5 5H2.5Z" }, null, -1), (0, vue.createElementVNode)("path", {
+			"fill-rule": "evenodd",
+			"clip-rule": "evenodd",
+			d: "M12 5L15 8L12 11L12 5Z",
+			"fill-opacity": "0.3"
+		}, null, -1)])]);
 	}
 	var Row_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$6, [["render", _sfc_render$6]]);
 	//#endregion
@@ -23826,10 +24344,18 @@
 	var _sfc_main$5 = {};
 	var _hoisted_1$7 = {
 		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 1024 1024"
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor"
 	};
 	function _sfc_render$5(_ctx, _cache) {
-		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$7, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M704 128v768h320V128H704zM384 128v768h256V128h-256zM192 256l-192 256 192 256 0.032-192H320v-128H192V256z" }, null, -1)])]);
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$7, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M14 4C14.5523 4 15 4.44772 15 5V11C15 11.5523 14.5523 12 14 12H6C5.44772 12 5 11.5523 5 11V5C5 4.44772 5.44772 4 6 4H14ZM6.5 5C6.22386 5 6 5.22386 6 5.5V10.5C6 10.7761 6.22386 11 6.5 11H13.5C13.7761 11 14 10.7761 14 10.5V5.5C14 5.22386 13.7761 5 13.5 5H6.5Z" }, null, -1), (0, vue.createElementVNode)("path", {
+			"fill-rule": "evenodd",
+			"clip-rule": "evenodd",
+			d: "M4 11L1 8L4 5L4 11Z",
+			"fill-opacity": "0.3"
+		}, null, -1)])]);
 	}
 	var RowReverse_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$5, [["render", _sfc_render$5]]);
 	//#endregion
@@ -23837,10 +24363,24 @@
 	var _sfc_main$4 = {};
 	var _hoisted_1$6 = {
 		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 1024 1024"
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor"
 	};
 	function _sfc_render$4(_ctx, _cache) {
-		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$6, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M480 1024V0h64v1024h-64z m128-64V64h320v896H608zM96 960V64h320v896H96z" }, null, -1)])]);
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$6, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M13 4C13.5523 4 14 4.44772 14 5V11C14 11.5523 13.5523 12 13 12H3C2.44772 12 2 11.5523 2 11V5C2 4.44772 2.44772 4 3 4H13ZM3.59082 5C3.31472 5.00005 3.09082 5.22389 3.09082 5.5V10.5C3.09082 10.7761 3.31472 11 3.59082 11H12.4092C12.6853 11 12.9092 10.7761 12.9092 10.5V5.5C12.9092 5.22389 12.6853 5.00005 12.4092 5H3.59082Z" }, null, -1), (0, vue.createElementVNode)("rect", {
+			x: "7.5",
+			y: "2",
+			width: "1",
+			height: "12",
+			rx: "0.5",
+			"fill-opacity": "0.3",
+			style: {
+				"fill": "black",
+				"fill-opacity": "0.3"
+			}
+		}, null, -1)])]);
 	}
 	var Center_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$4, [["render", _sfc_render$4]]);
 	//#endregion
@@ -23848,10 +24388,26 @@
 	var _sfc_main$3 = {};
 	var _hoisted_1$5 = {
 		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 1024 1024"
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor"
 	};
 	function _sfc_render$3(_ctx, _cache) {
-		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$5, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M416 160H96v704h320V160z m384 0H480v704h320V160z m128-160h-64v1024h64V0z" }, null, -1)])]);
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$5, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M11 4C11.5523 4 12 4.44772 12 5V11C12 11.5523 11.5523 12 11 12H2C1.44772 12 1 11.5523 1 11V5C1 4.44772 1.44772 4 2 4H11ZM2.5 5C2.22386 5 2 5.22386 2 5.5V10.5C2 10.7761 2.22386 11 2.5 11H10.5C10.7761 11 11 10.7761 11 10.5V5.5C11 5.22386 10.7761 5 10.5 5H2.5Z" }, null, -1), (0, vue.createElementVNode)("rect", {
+			x: "14.25",
+			y: "2.25",
+			width: "0.5",
+			height: "11.5",
+			rx: "0.25",
+			stroke: "black",
+			"stroke-opacity": "0.3",
+			style: {
+				"stroke": "black",
+				"stroke-opacity": "0.3"
+			},
+			"stroke-width": "0.5"
+		}, null, -1)])]);
 	}
 	var FlexEnd_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$3, [["render", _sfc_render$3]]);
 	//#endregion
@@ -23859,10 +24415,26 @@
 	var _sfc_main$2 = {};
 	var _hoisted_1$4 = {
 		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 1024 1024"
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor"
 	};
 	function _sfc_render$2(_ctx, _cache) {
-		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$4, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M608 160h320v704H608V160zM224 160h320v704H224V160zM96 0h64v1024H96V0z" }, null, -1)])]);
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$4, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M14 4C14.5523 4 15 4.44772 15 5V11C15 11.5523 14.5523 12 14 12H5C4.44772 12 4 11.5523 4 11V5C4 4.44772 4.44772 4 5 4H14ZM5.5 5C5.22386 5 5 5.22386 5 5.5V10.5C5 10.7761 5.22386 11 5.5 11H13.5C13.7761 11 14 10.7761 14 10.5V5.5C14 5.22386 13.7761 5 13.5 5H5.5Z" }, null, -1), (0, vue.createElementVNode)("rect", {
+			x: "1.25",
+			y: "2.25",
+			width: "0.5",
+			height: "11.5",
+			rx: "0.25",
+			stroke: "white",
+			"stroke-opacity": "0.3",
+			style: {
+				"stroke": "white",
+				"stroke-opacity": "0.3"
+			},
+			"stroke-width": "0.5"
+		}, null, -1)])]);
 	}
 	var FlexStart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$2, [["render", _sfc_render$2]]);
 	//#endregion
@@ -23870,10 +24442,44 @@
 	var _sfc_main$1 = {};
 	var _hoisted_1$3 = {
 		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 1024 1024"
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor"
 	};
 	function _sfc_render$1(_ctx, _cache) {
-		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$3, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M320 864H192v160H128v-160H0V160h128V0h64v160h128v704z m704 0h-128v160h-64v-160h-128V160h128V0h64v160h128v704z" }, null, -1)])]);
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$3, [..._cache[0] || (_cache[0] = [
+			(0, vue.createElementVNode)("path", { d: "M6 4C6.55228 4 7 4.44772 7 5V11C7 11.5523 6.55228 12 6 12H3C2.44772 12 2 11.5523 2 11V5C2 4.44772 2.44772 4 3 4H6ZM3.5 5C3.22386 5 3 5.22386 3 5.5V10.5C3 10.7761 3.22386 11 3.5 11H5.5C5.77614 11 6 10.7761 6 10.5V5.5C6 5.22386 5.77614 5 5.5 5H3.5Z" }, null, -1),
+			(0, vue.createElementVNode)("path", { d: "M13 4C13.5523 4 14 4.44772 14 5V11C14 11.5523 13.5523 12 13 12H10C9.44772 12 9 11.5523 9 11V5C9 4.44772 9.44772 4 10 4H13ZM10.5 5C10.2239 5 10 5.22386 10 5.5V10.5C10 10.7761 10.2239 11 10.5 11H12.5C12.7761 11 13 10.7761 13 10.5V5.5C13 5.22386 12.7761 5 12.5 5H10.5Z" }, null, -1),
+			(0, vue.createElementVNode)("rect", {
+				x: "11.25",
+				y: "2.25",
+				width: "0.5",
+				height: "11.5",
+				rx: "0.25",
+				stroke: "black",
+				"stroke-opacity": "0.3",
+				style: {
+					"stroke": "black",
+					"stroke-opacity": "0.3"
+				},
+				"stroke-width": "0.5"
+			}, null, -1),
+			(0, vue.createElementVNode)("rect", {
+				x: "4.25",
+				y: "2.25",
+				width: "0.5",
+				height: "11.5",
+				rx: "0.25",
+				stroke: "black",
+				"stroke-opacity": "0.3",
+				style: {
+					"stroke": "black",
+					"stroke-opacity": "0.3"
+				},
+				"stroke-width": "0.5"
+			}, null, -1)
+		])]);
 	}
 	var SpaceAround_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$1, [["render", _sfc_render$1]]);
 	//#endregion
@@ -23881,10 +24487,40 @@
 	var _sfc_main = {};
 	var _hoisted_1$2 = {
 		xmlns: "http://www.w3.org/2000/svg",
-		viewBox: "0 0 1024 1024"
+		width: "16",
+		height: "16",
+		viewBox: "0 0 16 16",
+		fill: "currentColor"
 	};
 	function _sfc_render(_ctx, _cache) {
-		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$2, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("path", { d: "M64 1024H0V0h64v1024z m384-160H128V160h320v704z m448 0H576V160h320v704z m128 160h-64V0h64v1024z" }, null, -1)])]);
+		return (0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_1$2, [..._cache[0] || (_cache[0] = [
+			(0, vue.createElementVNode)("path", { d: "M6 4C6.55228 4 7 4.44772 7 5V11C7 11.5523 6.55228 12 6 12H4C3.44772 12 3 11.5523 3 11V5C3 4.44772 3.44772 4 4 4H6ZM4.5 5C4.22386 5 4 5.22386 4 5.5V10.5C4 10.7761 4.22386 11 4.5 11H5.5C5.77614 11 6 10.7761 6 10.5V5.5C6 5.22386 5.77614 5 5.5 5H4.5Z" }, null, -1),
+			(0, vue.createElementVNode)("path", { d: "M12 4C12.5523 4 13 4.44772 13 5V11C13 11.5523 12.5523 12 12 12H10C9.44772 12 9 11.5523 9 11V5C9 4.44772 9.44772 4 10 4H12ZM10.5 5C10.2239 5 10 5.22386 10 5.5V10.5C10 10.7761 10.2239 11 10.5 11H11.5C11.7761 11 12 10.7761 12 10.5V5.5C12 5.22386 11.7761 5 11.5 5H10.5Z" }, null, -1),
+			(0, vue.createElementVNode)("rect", {
+				x: "14.25",
+				y: "2.25",
+				width: "0.5",
+				height: "11.5",
+				rx: "0.25",
+				stroke: "black",
+				"stroke-opacity": "0.3",
+				"stroke-width": "0.5"
+			}, null, -1),
+			(0, vue.createElementVNode)("rect", {
+				x: "1.25",
+				y: "2.25",
+				width: "0.5",
+				height: "11.5",
+				rx: "0.25",
+				stroke: "black",
+				"stroke-opacity": "0.3",
+				style: {
+					"stroke": "black",
+					"stroke-opacity": "0.3"
+				},
+				"stroke-width": "0.5"
+			}, null, -1)
+		])]);
 	}
 	var SpaceBetween_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render]]);
 	//#endregion
@@ -23897,18 +24533,22 @@
 			isCompare: { type: Boolean },
 			disabled: { type: Boolean },
 			size: {},
+			theme: {},
 			prop: {}
 		},
 		emits: ["change", "addDiffCount"],
 		setup(__props, { emit: __emit }) {
+			const props = __props;
 			const emit = __emit;
+			const displayTheme = (0, _tmagic_design.useTheme)(props);
 			const formConfig = (0, _tmagic_form.defineFormConfig)([
 				{
 					name: "display",
 					text: "模式",
 					type: "radioGroup",
 					childType: "button",
-					labelWidth: "68px",
+					labelWidth: "90px",
+					iconSize: "24px",
 					options: [
 						{
 							value: "inline",
@@ -23942,7 +24582,8 @@
 					text: "主轴方向",
 					type: "radioGroup",
 					childType: "button",
-					labelWidth: "68px",
+					labelWidth: "90px",
+					iconSize: "24px",
 					options: [
 						{
 							value: "row",
@@ -23972,7 +24613,8 @@
 					text: "主轴对齐",
 					type: "radioGroup",
 					childType: "button",
-					labelWidth: "68px",
+					labelWidth: "90px",
+					iconSize: "24px",
 					options: [
 						{
 							value: "flex-start",
@@ -24007,31 +24649,32 @@
 					text: "辅轴对齐",
 					type: "radioGroup",
 					childType: "button",
-					labelWidth: "68px",
+					labelWidth: "90px",
+					iconSize: "24px",
 					options: [
 						{
 							value: "flex-start",
-							icon: (0, vue.markRaw)(FlexStart_default),
+							icon: (0, vue.markRaw)(FlexStart_default$1),
 							tooltip: "左对齐 flex-start"
 						},
 						{
 							value: "flex-end",
-							icon: (0, vue.markRaw)(FlexEnd_default),
+							icon: (0, vue.markRaw)(FlexEnd_default$1),
 							tooltip: "右对齐 flex-end"
 						},
 						{
 							value: "center",
-							icon: (0, vue.markRaw)(Center_default),
+							icon: (0, vue.markRaw)(Center_default$1),
 							tooltip: "居中 center"
 						},
 						{
 							value: "space-between",
-							icon: (0, vue.markRaw)(SpaceBetween_default),
+							icon: (0, vue.markRaw)(SpaceBetween_default$1),
 							tooltip: "两端对齐 space-between"
 						},
 						{
 							value: "space-around",
-							icon: (0, vue.markRaw)(SpaceAround_default),
+							icon: (0, vue.markRaw)(SpaceAround_default$1),
 							tooltip: "横向平分 space-around"
 						}
 					],
@@ -24041,8 +24684,9 @@
 					name: "flexWrap",
 					text: "换行",
 					type: "radioGroup",
-					childType: "button",
-					labelWidth: "68px",
+					childType: displayTheme.value !== "magic-admin" ? "button" : "default",
+					labelWidth: "90px",
+					iconSize: "24px",
 					options: [
 						{
 							value: "nowrap",
@@ -24066,14 +24710,18 @@
 					type: "row",
 					items: [{
 						name: "width",
-						text: "宽度",
-						labelWidth: "68px",
+						text: "宽度（px）",
+						labelWidth: "90px",
 						type: "data-source-field-select",
 						fieldConfig: { type: "text" }
-					}, {
+					}]
+				},
+				{
+					type: "row",
+					items: [{
 						name: "height",
-						text: "高度",
-						labelWidth: "68px",
+						text: "高度（px）",
+						labelWidth: "90px",
 						type: "data-source-field-select",
 						fieldConfig: { type: "text" }
 					}]
@@ -24084,7 +24732,7 @@
 						type: "data-source-field-select",
 						text: "overflow",
 						name: "overflow",
-						labelWidth: "68px",
+						labelWidth: "90px",
 						checkStrictly: false,
 						dataSourceFieldType: ["string"],
 						fieldConfig: {
@@ -24122,11 +24770,15 @@
 								}
 							]
 						}
-					}, {
+					}]
+				},
+				{
+					type: "row",
+					items: [{
 						type: "data-source-field-select",
-						text: "透明度",
+						text: "透明度（%）",
 						name: "opacity",
-						labelWidth: "68px",
+						labelWidth: "90px",
 						dataSourceFieldType: ["string", "number"],
 						fieldConfig: { type: "text" }
 					}]
@@ -24374,7 +25026,7 @@
 							onClick: _cache[1] || (_cache[1] = ($event) => selectDirection("Left"))
 						}, null, 2),
 						(0, vue.createElementVNode)("div", {
-							class: (0, vue.normalizeClass)(["border-icon", {
+							class: (0, vue.normalizeClass)(["border-icon center", {
 								active: direction.value === "",
 								configured: isConfigured("")
 							}]),
@@ -24551,7 +25203,6 @@
 	var Transform_default = Transform_vue_vue_type_script_setup_true_lang_default;
 	//#endregion
 	//#region packages/editor/src/fields/StyleSetter/Index.vue?vue&type=script&setup=true&lang.ts
-	init_Icon();
 	var Index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
 		name: "MFieldsStyleSetter",
 		__name: "Index",
@@ -24565,7 +25216,10 @@
 			disabled: { type: Boolean },
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		},
 		emits: ["change", "addDiffCount"],
 		setup(__props, { emit: __emit }) {
@@ -24613,7 +25267,7 @@
 							key: index,
 							name: `${index}`
 						}, {
-							title: (0, vue.withCtx)(() => [(0, vue.createVNode)(Icon_default, { icon: (0, vue.unref)(_element_plus_icons_vue.Grid) }, null, 8, ["icon"]), (0, vue.createTextVNode)((0, vue.toDisplayString)(item.title), 1)]),
+							title: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.title), 1)]),
 							default: (0, vue.withCtx)(() => [item.component ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(item.component), {
 								key: 0,
 								values: __props.model[__props.name],
@@ -24662,7 +25316,10 @@
 			},
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
@@ -24731,7 +25388,10 @@
 			disabled: { type: Boolean },
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
@@ -24802,7 +25462,10 @@
 			disabled: { type: Boolean },
 			size: {},
 			lastValues: {},
-			isCompare: { type: Boolean }
+			isCompare: { type: Boolean },
+			text: {},
+			labelWidth: {},
+			labelPosition: {}
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
@@ -24948,7 +25611,8 @@
 	var defaultInstallOpt = {
 		parseDSL: (dsl) => eval(dsl),
 		customCreateMonacoEditor: (monaco, codeEditorEl, options) => monaco.editor.create(codeEditorEl, options),
-		customCreateMonacoDiffEditor: (monaco, codeEditorEl, options) => monaco.editor.createDiffEditor(codeEditorEl, options)
+		customCreateMonacoDiffEditor: (monaco, codeEditorEl, options) => monaco.editor.createDiffEditor(codeEditorEl, options),
+		flat: false
 	};
 	var plugin_default = { install: (app, opt) => {
 		const option = Object.assign(defaultInstallOpt, opt || {});
@@ -24982,6 +25646,7 @@
 	//#endregion
 	//#region packages/editor/src/index.ts
 	init_type();
+	init_config();
 	init_CodeEditor();
 	init_Icon();
 	init_CompareForm();
@@ -25067,6 +25732,7 @@
 	exports.UI_SELECT_MODE_EVENT_NAME = UI_SELECT_MODE_EVENT_NAME;
 	exports.UndoRedo = UndoRedo;
 	exports.V_GUIDE_LINE_STORAGE_KEY = V_GUIDE_LINE_STORAGE_KEY;
+	exports.ViewForm = ViewForm_default;
 	exports.advancedTabConfig = advancedTabConfig;
 	exports.arrayOptions = arrayOptions;
 	exports.beforePaste = beforePaste;
@@ -25150,6 +25816,7 @@
 	exports.idbSet = idbSet;
 	exports.info = info;
 	exports.isEventNameCheckStrictly = isEventNameCheckStrictly;
+	exports.isGlobalFlat = isGlobalFlat;
 	exports.isIncludeDataSource = isIncludeDataSource;
 	exports.isIndexedDBSupported = isIndexedDBSupported;
 	exports.keybindingService = keybinding_default;
@@ -25162,6 +25829,7 @@
 	exports.numberOptions = numberOptions;
 	exports.openIndexedDB = openIndexedDB;
 	exports.propsService = props_default;
+	exports.removeStyleDisplayConfig = removeStyleDisplayConfig;
 	exports.resolveFieldByPath = resolveFieldByPath;
 	exports.resolveSelectedNode = resolveSelectedNode;
 	exports.serializeConfig = serializeConfig;
@@ -25183,6 +25851,7 @@
 	exports.undoFloor = undoFloor;
 	exports.updateStatus = updateStatus;
 	exports.useCodeBlockEdit = useCodeBlockEdit;
+	exports.useCompareForm = useCompareForm;
 	exports.useEditorContentHeight = useEditorContentHeight;
 	exports.useFilter = useFilter;
 	exports.useFloatBox = useFloatBox;