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

package/dist/es/fields/StyleSetter/pro/Position.vue_vue_type_script_setup_true_lang.js

@@ -1,5 +1,5 @@
-import { MContainer, defineFormItem } from "@tmagic/form";
-import { createBlock, defineComponent, openBlock, unref } from "vue";
+import { MContainer, defineFormConfig } from "@tmagic/form";
+import { Fragment, createBlock, createElementBlock, defineComponent, openBlock, renderList, unref } from "vue";
 //#region packages/editor/src/fields/StyleSetter/pro/Position.vue?vue&type=script&setup=true&lang.ts
 var Position_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Position",
@@ -8,7 +8,8 @@ var Position_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 		lastValues: {},
 		isCompare: { type: Boolean },
 		disabled: { type: Boolean },
-		size: {}
+		size: {},
+		prop: {}
 	},
 	emits: ["change", "addDiffCount"],
 	setup(__props, { emit: __emit }) {
@@ -21,7 +22,7 @@ var Position_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 			fixed: "固定定位",
 			sticky: "粘性定位"
 		};
-		const config = defineFormItem({ items: [
+		const formConfig = defineFormConfig([
 			{
 				name: "position",
 				text: "定位",
@@ -74,29 +75,34 @@ var Position_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineC
 				type: "data-source-field-select",
 				fieldConfig: { type: "text" }
 			}
-		] });
+		]);
 		const change = (value, eventData) => {
 			emit("change", value, eventData);
 		};
 		const onAddDiffCount = () => emit("addDiffCount");
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(MContainer), {
-				config: unref(config),
-				model: __props.values,
-				"last-values": __props.lastValues,
-				"is-compare": __props.isCompare,
-				size: __props.size,
-				disabled: __props.disabled,
-				onChange: change,
-				onAddDiffCount
-			}, null, 8, [
-				"config",
-				"model",
-				"last-values",
-				"is-compare",
-				"size",
-				"disabled"
-			]);
+			return openBlock(true), createElementBlock(Fragment, null, renderList(unref(formConfig), (item, index) => {
+				return openBlock(), createBlock(unref(MContainer), {
+					prop: __props.prop,
+					key: index,
+					config: item,
+					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
+					size: __props.size,
+					disabled: __props.disabled,
+					onChange: change,
+					onAddDiffCount
+				}, null, 8, [
+					"prop",
+					"config",
+					"model",
+					"last-values",
+					"is-compare",
+					"size",
+					"disabled"
+				]);
+			}), 128);
 		};
 	}
 });

package/dist/es/fields/StyleSetter/pro/Transform.vue_vue_type_script_setup_true_lang.js

@@ -8,12 +8,13 @@ var Transform_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		lastValues: {},
 		isCompare: { type: Boolean },
 		disabled: { type: Boolean },
-		size: {}
+		size: {},
+		prop: {}
 	},
 	emits: ["change", "addDiffCount"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
-		const config = defineFormItem({ items: [{
+		const config = defineFormItem({
 			name: "transform",
 			items: [{
 				name: "rotate",
@@ -32,13 +33,14 @@ var Transform_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				dataSourceFieldType: ["string", "number"],
 				fieldConfig: { type: "text" }
 			}]
-		}] });
+		});
 		const change = (value, eventData) => {
 			emit("change", value, eventData);
 		};
 		const onAddDiffCount = () => emit("addDiffCount");
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(MContainer), {
+				prop: __props.prop,
 				config: unref(config),
 				model: __props.values,
 				"last-values": __props.lastValues,
@@ -48,6 +50,7 @@ var Transform_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				onChange: change,
 				onAddDiffCount
 			}, null, 8, [
+				"prop",
 				"config",
 				"model",
 				"last-values",

package/dist/es/fields/UISelect.js

@@ -1,5 +1,4 @@
 import UISelect_vue_vue_type_script_setup_true_lang_default from "./UISelect.vue_vue_type_script_setup_true_lang.js";
-/* empty css                                         */
 //#region packages/editor/src/fields/UISelect.vue
 var UISelect_default = UISelect_vue_vue_type_script_setup_true_lang_default;
 //#endregion

package/dist/es/hooks/use-compare-form.js

@@ -0,0 +1,119 @@
+import { getCodeBlockFormConfig } from "../utils/code-block.js";
+import { removeStyleDisplayConfig } from "../utils/props.js";
+import { computed, inject, provide, ref, useTemplateRef, watch, watchEffect } from "vue";
+//#region packages/editor/src/hooks/use-compare-form.ts
+/**
+* CompareForm / ViewForm 共用逻辑：
+* - 按 `category`(node / data-source / code-block) 加载 FormConfig（支持自定义 `loadConfig`）；
+* - 代码块 `content` 归一化为字符串；
+* - 外层容器固定高度 + 内部滚动的 `wrapperStyle`；
+* - 将 services / stage 注入 MForm.formState，保证 filterFunction 上下文一致。
+*
+* 两个组件的差异仅在于是否做新旧值对比，这部分逻辑保留在各自组件中。
+*/
+var useCompareForm = (props) => {
+	provide("services", props.services);
+	const config = ref([]);
+	/** vs-code 编辑器的 monaco 配置项，沿用 Editor 顶层 provide('codeOptions', ...) 的注入。 */
+	const codeOptions = 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 = computed(() => {
+		if (props.category === "code-block") return normalizeCodeBlockValue(props.value);
+		return props.value || {};
+	});
+	/**
+	* 外层包裹层的样式：当传入 `height` 时启用固定高度 + 内部滚动，
+	* 这样滚动条会出现在组件内部，避免父容器（如 Dialog）自身也产生滚动。
+	*/
+	const wrapperStyle = 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();
+	};
+	watch([
+		() => props.category,
+		() => props.type,
+		() => props.dataSourceType,
+		() => props.loadConfig
+	], () => {
+		loadConfig();
+	}, { immediate: true });
+	const formRef = 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') 的最新值。
+	*/
+	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
+export { useCompareForm };

package/dist/es/index.js

@@ -1,8 +1,10 @@
 import { CODE_DRAFT_STORAGE_KEY, CodeDeleteErrorType, ColumnLayout, DragType, KeyBindingCommand, Keys, LayerOffset, Layout, SideItemKey, canUsePluginMethods } from "./type.js";
 import { useCodeBlockEdit } from "./hooks/use-code-block-edit.js";
-import { advancedTabConfig, arrayOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, numberOptions, styleTabConfig } from "./utils/props.js";
-import props_default from "./services/props.js";
 import { getEditorConfig, setEditorConfig } from "./utils/config.js";
+import { getCodeBlockFormConfig } from "./utils/code-block.js";
+import { advancedTabConfig, arrayOptions, booleanOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, getCondOpOptionsByFieldType, numberOptions, removeStyleDisplayConfig, styleTabConfig, validatePropsForm } from "./utils/props.js";
+import { useCompareForm } from "./hooks/use-compare-form.js";
+import props_default from "./services/props.js";
 import { UndoRedo } from "./utils/undo-redo.js";
 import { createStackStep, describeRevertStep, deserializeStacks, detectStackOpType, detectTargetId, detectTargetName, getLastPushedHistoryIds, getOrCreateStack, markStackSaved, mergeSteps, serializeStacks, undoFloor } from "./utils/history.js";
 import { idbDelete, idbGet, idbSet, isIndexedDBSupported, openIndexedDB } from "./utils/indexed-db.js";
@@ -23,11 +25,15 @@ import { useFilter } from "./hooks/use-filter.js";
 import { useGetSo } from "./hooks/use-getso.js";
 import { useNextFloatBoxPosition } from "./hooks/use-next-float-box-position.js";
 import { useNodeStatus } from "./hooks/use-node-status.js";
-import { getCodeBlockFormConfig } from "./utils/code-block.js";
 import { debug, error, info, log, warn } from "./utils/logger.js";
-import { getCascaderOptionsFromFields, getDisplayField, getFieldType, getFormConfig, getFormValue } from "./utils/data-source/index.js";
+import { getCascaderOptionsFromFields, getDisplayField, getFieldType, getFormConfig, getFormValue, resolveFieldByPath } from "./utils/data-source/index.js";
 import { IdleTask } from "./utils/dep/idle-task.js";
 import { ScrollViewer } from "./utils/scroll-viewer.js";
+import codeBlock_default from "./services/codeBlock.js";
+import dataSource_default from "./services/dataSource.js";
+import { ALL_COND_OPS, editorTypeMatchRules } from "./utils/type-match-rules.js";
+import events_default from "./services/events.js";
+import { EVENT_NAME_VALUE_SEPARATOR, collectEventNameOptionValues, getCompActionAllowedValues, getCompActionOptions, getEventNameAllowedValues, getEventNameOptions, isEventNameCheckStrictly, normalizeCompActionValue } from "./utils/event.js";
 import monaco_editor_default from "./utils/monaco-editor.js";
 import Resizer_default from "./components/Resizer.js";
 import SplitView_default from "./components/SplitView.js";
@@ -49,13 +55,11 @@ import CodeBlockList_default from "./layouts/sidebar/code-block/CodeBlockList.js
 import CodeBlockListPanel_default from "./layouts/sidebar/code-block/CodeBlockListPanel.js";
 import DataSourceAddButton_default from "./layouts/sidebar/data-source/DataSourceAddButton.js";
 import DataSourceConfigPanel_default from "./layouts/sidebar/data-source/DataSourceConfigPanel.js";
+import LayerNodeContent_default from "./layouts/sidebar/layer/LayerNodeContent.js";
 import LayerPanel_default from "./layouts/sidebar/layer/LayerPanel.js";
 import ComponentListPanel_default from "./layouts/sidebar/ComponentListPanel.js";
-import codeBlock_default from "./services/codeBlock.js";
 import componentList_default from "./services/componentList.js";
-import dataSource_default from "./services/dataSource.js";
 import dep_default from "./services/dep.js";
-import events_default from "./services/events.js";
 import keybinding_default from "./services/keybinding.js";
 import stageOverlay_default from "./services/stageOverlay.js";
 import Editor_default from "./Editor.js";
@@ -71,6 +75,7 @@ import Index_default from "./fields/DataSourceFieldSelect/Index.js";
 import EventSelect_default from "./fields/EventSelect.js";
 import KeyValue_default from "./fields/KeyValue.js";
 import CompareForm_default from "./components/CompareForm.js";
+import ViewForm_default from "./components/ViewForm.js";
 import HistoryDiffDialog_default from "./layouts/history-list/HistoryDiffDialog.js";
 import PageFragmentSelect_default from "./fields/PageFragmentSelect.js";
 import DisplayConds_default from "./fields/DisplayConds.js";
@@ -87,4 +92,4 @@ export * from "@tmagic/table";
 export * from "@tmagic/stage";
 export * from "@tmagic/design";
 export * from "@tmagic/utils";
-export { CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, CodeBlockEditor_default as CodeBlockEditor, CodeBlockList_default as CodeBlockList, CodeBlockListPanel_default as CodeBlockListPanel, CodeDeleteErrorType, CodeSelect_default as CodeSelect, CodeSelectCol_default as CodeSelectCol, ColumnLayout, CompareForm_default as CompareForm, ComponentListPanel_default as ComponentListPanel, CondOpSelect_default as CondOpSelect, ContentMenu_default as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, DataSourceAddButton_default as DataSourceAddButton, DataSourceConfigPanel_default as DataSourceConfigPanel, Index_default as DataSourceFieldSelect, DataSourceFields_default as DataSourceFields, DataSourceInput_default as DataSourceInput, DataSourceMethodSelect_default as DataSourceMethodSelect, DataSourceMethods_default as DataSourceMethods, DataSourceMocks_default as DataSourceMocks, DataSourceSelect_default as DataSourceSelect, DepTargetType, DisplayConds_default as DisplayConds, DragType, EventSelect_default as EventSelect, Fixed2Other, FloatingBox_default as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, HistoryDiffDialog_default as HistoryDiffDialog, Bucket_default as HistoryListBucket, BucketTab_default as HistoryListBucketTab, Icon_default as Icon, IdleTask, KeyBindingCommand, KeyValue_default as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerOffset, LayerPanel_default as LayerPanel, Layout, SplitView_default as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, PageFragmentSelect_default as PageFragmentSelect, FormPanel_default as PropsFormPanel, PropsPanel_default as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, Resizer_default as Resizer, ScrollViewer, SideItemKey, SplitView_default as SplitView, StageCore, Index_default$1 as StyleSetter, CodeEditor_default as TMagicCodeEditor, Editor_default as TMagicEditor, ToolButton_default as ToolButton, Tree_default as Tree, TreeNode_default as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, advancedTabConfig, arrayOptions, beforePaste, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, canUsePluginMethods, change2Fixed, classifyDragSources, codeBlock_default as codeBlockService, collectRelatedNodes, componentList_default as componentListService, confirmHistoryAction, createStackStep, dataSource_default as dataSourceService, debug, plugin_default as default, defaultIsExpandable, dep_default as depService, describeRevertStep, describeStepForRevert, deserializeStacks, designPlugin, detectStackOpType, detectTargetId, detectTargetName, displayTabConfig, editorNodeMergeCustomizer, editor_default as editorService, eqOptions, error, eventTabConfig, events_default as eventsService, fillConfig, fixNodeLeft, fixNodePosition, formPlugin, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getCodeBlockFormConfig, getDefaultConfig, getDisplayField, getEditorConfig, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getLastPushedHistoryIds, getNodeIndex, getOrCreateStack, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, idbDelete, idbGet, idbSet, info, isIncludeDataSource, isIndexedDBSupported, keybinding_default as keybindingService, monaco_editor_default as loadMonaco, log, markStackSaved, mergeSteps, moveItemsInContainer, numberOptions, openIndexedDB, props_default as propsService, resolveSelectedNode, serializeConfig, serializeStacks, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, toggleFixedPosition, ui_default as uiService, undoFloor, updateStatus, useCodeBlockEdit, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useHistoryRevert, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, warn };
+export { ALL_COND_OPS, CODE_DRAFT_STORAGE_KEY, COPY_CODE_STORAGE_KEY, COPY_DS_STORAGE_KEY, COPY_STORAGE_KEY, CodeBlockEditor_default as CodeBlockEditor, CodeBlockList_default as CodeBlockList, CodeBlockListPanel_default as CodeBlockListPanel, CodeDeleteErrorType, CodeSelect_default as CodeSelect, CodeSelectCol_default as CodeSelectCol, ColumnLayout, CompareForm_default as CompareForm, ComponentListPanel_default as ComponentListPanel, CondOpSelect_default as CondOpSelect, ContentMenu_default as ContentMenu, DEFAULT_LEFT_COLUMN_WIDTH, DEFAULT_RIGHT_COLUMN_WIDTH, DataSourceAddButton_default as DataSourceAddButton, DataSourceConfigPanel_default as DataSourceConfigPanel, Index_default as DataSourceFieldSelect, DataSourceFields_default as DataSourceFields, DataSourceInput_default as DataSourceInput, DataSourceMethodSelect_default as DataSourceMethodSelect, DataSourceMethods_default as DataSourceMethods, DataSourceMocks_default as DataSourceMocks, DataSourceSelect_default as DataSourceSelect, DepTargetType, DisplayConds_default as DisplayConds, DragType, EVENT_NAME_VALUE_SEPARATOR, EventSelect_default as EventSelect, Fixed2Other, FloatingBox_default as FloatingBox, H_GUIDE_LINE_STORAGE_KEY, HistoryDiffDialog_default as HistoryDiffDialog, Bucket_default as HistoryListBucket, BucketTab_default as HistoryListBucketTab, Icon_default as Icon, IdleTask, KeyBindingCommand, KeyValue_default as KeyValue, Keys, LEFT_COLUMN_WIDTH_STORAGE_KEY, LayerNodeContent_default as LayerNodeContent, LayerOffset, LayerPanel_default as LayerPanel, Layout, SplitView_default as LayoutContainer, MIN_CENTER_COLUMN_WIDTH, MIN_LEFT_COLUMN_WIDTH, MIN_RIGHT_COLUMN_WIDTH, PROPS_PANEL_WIDTH_STORAGE_KEY, PageFragmentSelect_default as PageFragmentSelect, FormPanel_default as PropsFormPanel, PropsPanel_default as PropsPanel, RIGHT_COLUMN_WIDTH_STORAGE_KEY, Resizer_default as Resizer, ScrollViewer, SideItemKey, SplitView_default as SplitView, StageCore, Index_default$1 as StyleSetter, CodeEditor_default as TMagicCodeEditor, Editor_default as TMagicEditor, ToolButton_default as ToolButton, Tree_default as Tree, TreeNode_default as TreeNode, UI_SELECT_MODE_EVENT_NAME, UndoRedo, V_GUIDE_LINE_STORAGE_KEY, ViewForm_default as ViewForm, advancedTabConfig, arrayOptions, beforePaste, booleanOptions, buildChangeRecords, calcAlignCenterStyle, calcLayerTargetIndex, calcMoveStyle, canUsePluginMethods, change2Fixed, classifyDragSources, codeBlock_default as codeBlockService, collectEventNameOptionValues, collectRelatedNodes, componentList_default as componentListService, confirmHistoryAction, createStackStep, dataSource_default as dataSourceService, debug, plugin_default as default, defaultIsExpandable, dep_default as depService, describeRevertStep, describeStepForRevert, deserializeStacks, designPlugin, detectStackOpType, detectTargetId, detectTargetName, displayTabConfig, editorNodeMergeCustomizer, editor_default as editorService, editorTypeMatchRules, eqOptions, error, eventTabConfig, events_default as eventsService, fillConfig, fixNodeLeft, fixNodePosition, formPlugin, generatePageName, generatePageNameByApp, getAddParent, getCascaderOptionsFromFields, getCodeBlockFormConfig, getCompActionAllowedValues, getCompActionOptions, getCondOpOptionsByFieldType, getDefaultConfig, getDisplayField, getEditorConfig, getEventNameAllowedValues, getEventNameOptions, getFieldType, getFormConfig, getFormValue, getGuideLineFromCache, getInitPositionStyle, getLastPushedHistoryIds, getNodeIndex, getOrCreateStack, getPageFragmentList, getPageList, getPageNameList, getPositionInContainer, getRelativeStyle, history_default as historyService, idbDelete, idbGet, idbSet, info, isEventNameCheckStrictly, isIncludeDataSource, isIndexedDBSupported, keybinding_default as keybindingService, monaco_editor_default as loadMonaco, log, markStackSaved, mergeSteps, moveItemsInContainer, normalizeCompActionValue, numberOptions, openIndexedDB, props_default as propsService, removeStyleDisplayConfig, resolveFieldByPath, resolveSelectedNode, serializeConfig, serializeStacks, setChildrenLayout, setEditorConfig, setLayout, stageOverlay_default as stageOverlayService, storage_default as storageService, styleTabConfig, tablePlugin, toggleFixedPosition, ui_default as uiService, undoFloor, updateStatus, useCodeBlockEdit, useCompareForm, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useHistoryRevert, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, validatePropsForm, warn };

package/dist/es/layouts/CodeEditor.vue_vue_type_script_setup_true_lang.js

@@ -110,6 +110,7 @@ var CodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 		const values = ref("");
 		const loading = ref(false);
 		const codeEditorEl = useTemplateRef("codeEditor");
+		let destroyed = false;
 		const resizeObserver = new globalThis.ResizeObserver(throttle(() => {
 			vsEditor?.layout();
 			vsDiffEditor?.layout();
@@ -150,11 +151,17 @@ var CodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				emit("save", props.parse ? parseCode(newValue, props.language) : newValue);
 			}
 		};
+		const isEditorElValid = () => !destroyed && !!codeEditorEl.value && codeEditorEl.value.isConnected;
 		const init = async () => {
-			if (!codeEditorEl.value) return;
-			if (codeEditorEl.value.clientHeight === 0) await nextTick();
+			if (!isEditorElValid()) return;
+			if (codeEditorEl.value.clientHeight === 0) {
+				await nextTick();
+				if (!isEditorElValid()) return;
+			}
 			cachedExtraHeight = null;
 			monaco = await monaco_editor_default();
+			if (!isEditorElValid()) return;
+			const editorEl = codeEditorEl.value;
 			const options = {
 				value: values.value,
 				language: props.language,
@@ -163,19 +170,26 @@ var CodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 				...props.options
 			};
 			if (props.type === "diff") {
-				vsDiffEditor = await getEditorConfig("customCreateMonacoDiffEditor")(monaco, codeEditorEl.value, options);
+				vsDiffEditor = await getEditorConfig("customCreateMonacoDiffEditor")(monaco, editorEl, options);
 				vsDiffEditor.getModifiedEditor().onDidChangeModelContent(() => {
 					if (props.autosize) setAutoHeight(getEditorValue());
 				});
 			} else {
-				vsEditor = await getEditorConfig("customCreateMonacoEditor")(monaco, codeEditorEl.value, options);
+				vsEditor = await getEditorConfig("customCreateMonacoEditor")(monaco, editorEl, options);
 				vsEditor.onDidChangeModelContent(() => {
 					if (props.autosize) setAutoHeight(getEditorValue());
 				});
 			}
+			if (destroyed) {
+				vsEditor?.dispose();
+				vsDiffEditor?.dispose();
+				vsEditor = null;
+				vsDiffEditor = null;
+				return;
+			}
 			setEditorValue(props.initValues, props.modifiedValues);
 			emit("initd", vsEditor);
-			codeEditorEl.value.addEventListener("keydown", handleKeyDown);
+			editorEl.addEventListener("keydown", handleKeyDown);
 			if (props.type !== "diff" && props.autoSave) vsEditor?.onDidBlurEditorWidget(() => {
 				const newValue = getEditorValue();
 				if (values.value !== newValue) {
@@ -183,7 +197,7 @@ var CodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 					emit("save", props.parse ? parseCode(newValue, props.language) : newValue);
 				}
 			});
-			resizeObserver.observe(codeEditorEl.value);
+			resizeObserver.observe(editorEl);
 		};
 		watch(() => props.initValues, (v, preV) => {
 			if (v !== preV) setEditorValue(props.initValues, props.modifiedValues);
@@ -205,6 +219,7 @@ var CodeEditor_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defin
 			loading.value = false;
 		});
 		onBeforeUnmount(() => {
+			destroyed = true;
 			resizeObserver.disconnect();
 			vsEditor?.dispose();
 			vsDiffEditor?.dispose();

package/dist/es/layouts/Framework.vue_vue_type_script_setup_true_lang.js

@@ -33,6 +33,9 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		const pageLength = computed(() => editorService.get("pageLength") || 0);
 		const showSrc = computed(() => uiService.get("showSrc"));
 		const columnWidth = computed(() => uiService.get("columnWidth"));
+		const minLeftColumnWidth = computed(() => uiService.get("minLeftColumnWidth"));
+		const minCenterColumnWidth = computed(() => uiService.get("minCenterColumnWidth"));
+		const minRightColumnWidth = computed(() => uiService.get("minRightColumnWidth"));
 		watch(pageLength, () => {
 			splitViewRef.value?.updateWidth();
 		});
@@ -76,13 +79,13 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				renderSlot(_ctx.$slots, "header"),
 				renderSlot(_ctx.$slots, "nav"),
 				renderSlot(_ctx.$slots, "content-before"),
-				showSrc.value ? renderSlot(_ctx.$slots, "src-code", { key: 0 }, () => [createVNode(CodeEditor_default, {
+				showSrc.value ? renderSlot(_ctx.$slots, "src-code", {}, () => [createVNode(CodeEditor_default, {
 					class: "m-editor-content",
 					"editor-custom-type": "m-editor-content",
 					"init-values": root.value,
 					options: unref(codeOptions),
 					onSave: saveCode
-				}, null, 8, ["init-values", "options"])]) : createCommentVNode("v-if", true),
+				}, null, 8, ["init-values", "options"])], void 0, 0) : createCommentVNode("v-if", true),
 				withDirectives(createVNode(SplitView_default, {
 					ref: "splitView",
 					class: "m-editor-content",
@@ -91,13 +94,13 @@ var Framework_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 					"right-class": "m-editor-framework-right",
 					left: __props.hideSidebar ? void 0 : columnWidth.value.left,
 					right: columnWidth.value.right,
-					"min-left": __props.hideSidebar ? 0 : unref(200),
-					"min-right": unref(300),
-					"min-center": unref(400),
+					"min-left": __props.hideSidebar ? 0 : minLeftColumnWidth.value,
+					"min-right": minRightColumnWidth.value,
+					"min-center": minCenterColumnWidth.value,
 					width: frameworkRect.value.width,
 					onChange: columnWidthChange
 				}, createSlots({
-					center: withCtx(() => [page.value ? renderSlot(_ctx.$slots, "workspace", { key: 0 }) : renderSlot(_ctx.$slots, "empty", { key: 1 }, () => [createVNode(AddPageBox_default, { "disabled-page-fragment": __props.disabledPageFragment }, null, 8, ["disabled-page-fragment"])]), renderSlot(_ctx.$slots, "page-bar", {}, () => [createVNode(PageBar_default, {
+					center: withCtx(() => [page.value ? renderSlot(_ctx.$slots, "workspace", {}, void 0, void 0, 0) : renderSlot(_ctx.$slots, "empty", {}, () => [createVNode(AddPageBox_default, { "disabled-page-fragment": __props.disabledPageFragment }, null, 8, ["disabled-page-fragment"])], void 0, 1), renderSlot(_ctx.$slots, "page-bar", {}, () => [createVNode(PageBar_default, {
 						"disabled-page-fragment": __props.disabledPageFragment,
 						"page-bar-sort-options": __props.pageBarSortOptions,
 						"filter-function": __props.pageFilterFunction

package/dist/es/layouts/history-list/HistoryDiffDialog.vue_vue_type_script_setup_true_lang.js

@@ -28,6 +28,7 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 		extendState: {},
 		loadConfig: {},
 		width: { default: "900px" },
+		size: {},
 		isConfirm: { type: Boolean },
 		onConfirm: {},
 		selfDiffFieldTypes: {},
@@ -258,6 +259,7 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 						"load-config": __props.loadConfig,
 						"self-diff-field-types": __props.selfDiffFieldTypes,
 						services: props.services,
+						size: props.size,
 						height: "70vh"
 					}, null, 8, [
 						"category",
@@ -269,7 +271,8 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 						"extend-state",
 						"load-config",
 						"self-diff-field-types",
-						"services"
+						"services",
+						"size"
 					])) : (openBlock(), createBlock(CodeEditor_default, {
 						key: 2,
 						type: "diff",

package/dist/es/layouts/history-list/composables.js

@@ -181,4 +181,4 @@ var confirmHistoryAction = async (message) => {
 	}
 };
 //#endregion
-export { confirmHistoryAction, describePageGroup, describePageStep, describeStep, formatHistoryFullTime, formatHistoryTime, isHistoryGroupExpanded, isPageStepRevertable, isSingleDiffStepRevertable, opLabel, sourceLabel, toRowGroup };
+export { confirmHistoryAction, describePageGroup, describePageStep, describeStep, formatHistoryFullTime, formatHistoryTime, groupOperator, groupSource, groupTimestamp, isHistoryGroupExpanded, isPageStepRevertable, isSingleDiffStepRevertable, opLabel, sourceLabel, toRowGroup };

package/dist/es/layouts/history-list/useHistoryRevert.js

@@ -48,6 +48,7 @@ var mountHistoryDiffDialog = async (options) => {
 		selfDiffFieldTypes: options.selfDiffFieldTypes,
 		compareFormState: options.compareFormState,
 		width: options.width,
+		size: options.size ?? options.services?.uiService?.get("propsPanelSize"),
 		onClose: options.onClose
 	});
 	if (options.appContext) Object.assign(app._context, options.appContext);
@@ -148,7 +149,8 @@ var useHistoryRevert = (options = {}, services) => {
 			extendState,
 			services,
 			...extra,
-			width: extra?.width ?? dialogWidth
+			width: extra?.width ?? dialogWidth,
+			size: extra?.size
 		});
 		return confirmRevert();
 	};
@@ -275,7 +277,8 @@ var useHistoryRevert = (options = {}, services) => {
 		if (!await runRevert(revertOptions.diffPayload ?? null, {
 			loadConfig: revertOptions.loadConfig,
 			selfDiffFieldTypes: revertOptions.selfDiffFieldTypes,
-			width: revertOptions.width
+			width: revertOptions.width,
+			size: revertOptions.size
 		})) return null;
 		return await revertOptions.revert();
 	};
@@ -289,7 +292,8 @@ var useHistoryRevert = (options = {}, services) => {
 			extendState,
 			services,
 			...extra,
-			width: extra?.width ?? dialogWidth
+			width: extra?.width ?? dialogWidth,
+			size: extra?.size
 		});
 	};
 	return {

package/dist/es/layouts/props-panel/FormPanel.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,12 @@
+import { validatePropsForm } from "../../utils/props.js";
 import { useServices } from "../../hooks/use-services.js";
 import { useEditorContentHeight } from "../../hooks/use-editor-content-height.js";
 import Icon_default from "../../components/Icon.js";
 import CodeEditor_default from "../CodeEditor.js";
+import { ENABLE_PROPS_FORM_VALIDATE } from "../../editorProps.js";
 import { MForm } from "@tmagic/form";
-import { TMagicButton, TMagicScrollbar } from "@tmagic/design";
+import { TMagicButton, TMagicScrollbar, tMagicMessage } from "@tmagic/design";
+import { filterXSS } from "@tmagic/utils";
 import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, getCurrentInstance, inject, normalizeClass, onMounted, onUnmounted, openBlock, ref, renderSlot, unref, useTemplateRef, watchEffect, withCtx } from "vue";
 import { Document } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/props-panel/FormPanel.vue?vue&type=script&setup=true&lang.ts
@@ -30,6 +33,7 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const enablePropsFormValidate = inject(ENABLE_PROPS_FORM_VALIDATE, false);
 		const services = useServices();
 		const { editorService, uiService } = services;
 		const codeOptions = inject("codeOptions", {});
@@ -53,16 +57,50 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 		});
 		const submit = async (v, eventData) => {
 			try {
-				emit("submit", await configFormRef.value?.submitForm(), eventData);
+				const values = await configFormRef.value?.submitForm();
+				emit("submit", values, eventData);
 			} catch (e) {
-				emit("submit-error", e);
+				if (enablePropsFormValidate) emit("submit", v, eventData, e);
+				else emit("submit-error", e);
 			}
 		};
 		const errorHandler = (e) => {
 			emit("form-error", e);
 		};
-		const saveCode = (values) => {
-			emit("submit", props.codeValueKey ? { [props.codeValueKey]: values } : values);
+		/**
+		* 将校验错误文案安全地转为用于弹窗展示的 HTML。
+		*
+		* 文案形如 `字段 -> 主文案\n\n建议`，多条以结构性 `<br>` 拼接。为在保留换行排版的同时
+		* 避免 `${value}`/字段名中可能夹带的 HTML 造成 XSS：先按结构性 `<br>` 拆分，对每段做 HTML
+		* 转义后再把段内换行 `\n` 替换为 `<br>`，最后用 `<br>` 拼回。
+		*/
+		const formatValidateErrorHtml = (error) => error.split(/<br\s*\/?>/i).map((segment) => filterXSS(segment).replaceAll("\n", "<br>")).join("<br>");
+		const saveCode = async (values) => {
+			const newValues = props.codeValueKey ? { [props.codeValueKey]: values } : values;
+			if (!enablePropsFormValidate) {
+				emit("submit", newValues);
+				return;
+			}
+			try {
+				const error = await validatePropsForm({
+					config: props.config,
+					values: newValues,
+					appContext: internalInstance?.appContext ?? null,
+					services,
+					stage: stage.value,
+					typeMatchValid: true,
+					extendState: props.extendState
+				});
+				if (error) tMagicMessage({
+					type: "error",
+					message: formatValidateErrorHtml(error),
+					dangerouslyUseHTMLString: true
+				});
+				emit("submit", newValues, void 0, error ? new Error(error) : void 0);
+			} catch (e) {
+				console.log("validateForm error", e);
+				emit("submit", newValues);
+			}
 		};
 		__expose({
 			configForm: configFormRef,
@@ -81,6 +119,7 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 						size: propsPanelSize.value,
 						"init-values": __props.values,
 						config: __props.config,
+						"type-match-valid": true,
 						"extend-state": __props.extendState,
 						onChange: submit,
 						onError: errorHandler