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

package/dist/tmagic-editor.umd.cjs

@@ -5052,6 +5052,545 @@
 		};
 	};
 	//#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/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",
+					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();
+					} }]
+				}
+			]
+		};
+		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 }]
+			}]
+		};
+		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("复制失败");
+						});
+					}
+				}
+			});
+			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];
+		};
+		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]";
@@ -5161,326 +5700,9 @@
 		}
 	};
 	//#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("复制失败");
-					});
-				}
-			}
-		});
-		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];
-	};
-	/**
-	* 对一份「组件属性表单配置 + 值」做一次独立的校验，**不复用也不污染页面上正在展示的表单**。
-	*
-	* 内部基于 `@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 +5925,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 +6351,7 @@
 	};
 	//#endregion
 	//#region packages/editor/src/services/history.ts
+	init_config();
 	var canUsePluginMethods$7 = { sync: [
 		"push",
 		"undo",
@@ -9014,125 +9226,7 @@
 		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/utils/logger.ts
-	init_code_block();
 	var log = (...args) => {
 		if (process.env.NODE_ENV === "development") console.log("magic editor: ", ...args);
 	};
@@ -10600,6 +10694,8 @@
 	var dataSource_default = new DataSource();
 	//#endregion
 	//#region packages/editor/src/utils/type-match-rules.ts
+	init_use_compare_form();
+	init_props();
 	/**
 	* 将值格式化为可读的参考示例字符串。
 	*/
@@ -13182,59 +13278,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 +13321,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 +13329,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 +13349,7 @@
 						"init-values",
 						"last-values",
 						"label-width",
+						"extend-state",
 						"self-diff-field-types",
 						"size"
 					])) : (0, vue.createCommentVNode)("v-if", true)], 4);
@@ -14744,6 +14732,7 @@
 	//#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 FormPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ (0, vue.defineComponent)({
@@ -14942,6 +14931,7 @@
 	//#endregion
 	//#region packages/editor/src/layouts/props-panel/PropsPanel.vue?vue&type=script&setup=true&lang.ts
 	init_Icon();
+	init_props();
 	var _hoisted_1$53 = {
 		ref: "propsPanel",
 		class: "m-editor-props-panel"
@@ -22885,6 +22875,64 @@
 	//#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();
@@ -23146,6 +23194,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",
@@ -25067,6 +25116,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;
@@ -25162,6 +25212,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 +25234,7 @@
 	exports.undoFloor = undoFloor;
 	exports.updateStatus = updateStatus;
 	exports.useCodeBlockEdit = useCodeBlockEdit;
+	exports.useCompareForm = useCompareForm;
 	exports.useEditorContentHeight = useEditorContentHeight;
 	exports.useFilter = useFilter;
 	exports.useFloatBox = useFloatBox;