@tmagic/editor 1.8.0-manmanyu.9 → 1.8.0

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

@@ -1,4 +1,3 @@
-import { useServices } from "../../hooks/use-services.js";
 import CodeEditor_default from "../CodeEditor.js";
 import CompareForm_default from "../../components/CompareForm.js";
 import { TMagicButton, TMagicDialog, TMagicRadioButton, TMagicRadioGroup, TMagicTag } from "@tmagic/design";
@@ -21,14 +20,14 @@ var _hoisted_7 = {
 	key: 0,
 	class: "m-editor-history-diff-dialog-tip"
 };
-var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorHistoryDiffDialog",
 	__name: "HistoryDiffDialog",
 	props: {
-		services: { default: () => useServices() },
-		extendState: {},
+		services: {},
 		loadConfig: {},
 		width: { default: "900px" },
+		size: {},
 		isConfirm: { type: Boolean },
 		onConfirm: {},
 		selfDiffFieldTypes: {}
@@ -65,6 +64,20 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		};
 		const dialogTitle = computed(() => props.onConfirm ? "确认回滚" : "查看修改差异");
 		const hasCurrent = computed(() => payload.value?.currentValue !== void 0 && payload.value?.currentValue !== null);
+		/** 是否存在该步「修改后的值」：不存在（如仅删除）时「与修改前对比」无意义，置灰禁用。 */
+		const hasValue = computed(() => payload.value?.value !== void 0 && payload.value?.value !== null);
+		/** 指定模式当前是否可用：before 依赖「修改后的值」，current 依赖「当前值」。 */
+		const isModeAvailable = (m) => m === "current" ? hasCurrent.value : hasValue.value;
+		/**
+		* 计算 open 时的初始对比模式：
+		* - 调用方通过 payload.mode 指定且该模式可用时，优先使用指定模式；
+		* - 否则没有「修改后的值」但有当前值时（「与修改前对比」不可用），默认进入「与当前对比」；
+		* - 其余情况默认「与修改前对比」。
+		*/
+		const resolveInitialMode = (specified) => {
+			if (specified && isModeAvailable(specified)) return specified;
+			return !hasValue.value && hasCurrent.value ? "current" : "before";
+		};
 		/** 左侧（旧/参照）值 */
 		const leftValue = computed(() => {
 			if (!payload.value) return {};
@@ -107,7 +120,7 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		});
 		const open = (p) => {
 			payload.value = p;
-			mode.value = "before";
+			mode.value = resolveInitialMode(p.mode);
 			viewMode.value = "form";
 			visible.value = true;
 		};
@@ -199,10 +212,13 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						size: "small",
 						class: "m-editor-history-diff-dialog-mode"
 					}, {
-						default: withCtx(() => [createVNode(unref(TMagicRadioButton), { value: "before" }, {
+						default: withCtx(() => [createVNode(unref(TMagicRadioButton), {
+							value: "before",
+							disabled: !hasValue.value
+						}, {
 							default: withCtx(() => [..._cache[7] || (_cache[7] = [createTextVNode("与修改前对比", -1)])]),
 							_: 1
-						}), createVNode(unref(TMagicRadioButton), {
+						}, 8, ["disabled"]), createVNode(unref(TMagicRadioButton), {
 							value: "current",
 							disabled: !hasCurrent.value
 						}, {
@@ -236,10 +252,10 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						"data-source-type": payload.value.dataSourceType,
 						value: rightValue.value,
 						"last-value": leftValue.value,
-						"extend-state": __props.extendState,
 						"load-config": __props.loadConfig,
 						"self-diff-field-types": __props.selfDiffFieldTypes,
 						services: props.services,
+						size: props.size,
 						height: "70vh"
 					}, null, 8, [
 						"category",
@@ -247,10 +263,10 @@ var HistoryDiffDialog_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						"data-source-type",
 						"value",
 						"last-value",
-						"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/HistoryListPanel.vue_vue_type_script_setup_true_lang.js

@@ -10,7 +10,7 @@ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock
 import { Clock, Close } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/history-list/HistoryListPanel.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-editor-history-list" };
-var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorHistoryListPanel",
 	__name: "HistoryListPanel",
 	setup(__props) {
@@ -62,12 +62,6 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		watch([disabledDataSource, disabledCodeBlock], ([dsDisabled, cbDisabled]) => {
 			if (activeTab.value === "data-source" && dsDisabled || activeTab.value === "code-block" && cbDisabled) activeTab.value = "page";
 		});
-		/**
-		* 通过 inject 拿到 Editor 顶层注入的 `extendFormState`，转交给 HistoryDiffDialog
-		* 内部的 CompareForm，使差异对比表单的 filterFunction 能拿到完整的业务上下文。
-		* 未提供时为 undefined，CompareForm/MForm 会跳过 extendState 处理。
-		*/
-		const extendFormState = inject("extendFormState", void 0);
 		const { expanded, toggleGroup, pageGroups, dataSourceGroups, codeBlockGroups, pageGroupsDisplay, dataSourceGroupsByTarget, codeBlockGroupsByTarget } = useHistoryList();
 		/**
 		* 当前活动页的「加载/初始」标记记录（设置 root 时生成），透传给 PageTab 的底部初始行展示。
@@ -149,9 +143,9 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		/**
 		* 「单步回滚」与「查看差异」的完整逻辑收敛到 useHistoryRevert，面板与业务方共用：
 		* 二者均由 useHistoryRevert 内部按需动态挂载 HistoryDiffDialog，
-		* 业务方亦可直接 import useHistoryRevert(services) 调用，无需自行挂载任何弹窗。
+		* 业务方亦可直接 import useHistoryRevert(options, services) 调用，无需自行挂载任何弹窗。
 		*/
-		const { onPageRevert, onDataSourceRevert, onCodeBlockRevert, onPageDiff, onDataSourceDiff, onCodeBlockDiff } = useHistoryRevert(services, { extendState: extendFormState });
+		const { onPageRevert, onDataSourceRevert, onCodeBlockRevert, onPageDiff, onDataSourceDiff, onCodeBlockDiff } = useHistoryRevert({}, services);
 		/**
 		* 把内存中（已清空对应类别后的）历史状态重新写回 IndexedDB，
 		* 使本地持久化的那份与内存保持一致——即「连同本地保存的一并删除」。
@@ -227,7 +221,8 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 					default: withCtx(() => [
 						(openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), normalizeProps(guardReactiveProps(unref(tabPaneComponent)?.props({
 							name: "page",
-							label: `${pageName.value} (${unref(pageGroups).length})`
+							label: `${pageName.value} (${unref(pageGroups).length})`,
+							lazy: true
 						}) || {})), {
 							default: withCtx(() => [createVNode(PageTab_default, {
 								list: unref(pageGroupsDisplay),
@@ -252,7 +247,8 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						}, 16)),
 						!disabledDataSource.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), normalizeProps(mergeProps({ key: 0 }, unref(tabPaneComponent)?.props({
 							name: "data-source",
-							label: `${dataSourceName.value} (${unref(dataSourceGroups).length})`
+							label: `${dataSourceName.value} (${unref(dataSourceGroups).length})`,
+							lazy: true
 						}) || {})), {
 							default: withCtx(() => [createVNode(BucketTab_default, {
 								config: dataSourceConfig.value,
@@ -276,7 +272,8 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						}, 16)) : createCommentVNode("v-if", true),
 						!disabledCodeBlock.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), normalizeProps(mergeProps({ key: 1 }, unref(tabPaneComponent)?.props({
 							name: "code-block",
-							label: `${codeBlockName.value} (${unref(codeBlockGroups).length})`
+							label: `${codeBlockName.value} (${unref(codeBlockGroups).length})`,
+							lazy: true
 						}) || {})), {
 							default: withCtx(() => [createVNode(BucketTab_default, {
 								config: codeBlockConfig.value,
@@ -301,7 +298,8 @@ var HistoryListPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 						(openBlock(true), createElementBlock(Fragment, null, renderList(unref(extraTabs), (tab) => {
 							return openBlock(), createBlock(resolveDynamicComponent(unref(tabPaneComponent)?.component || "el-tab-pane"), mergeProps({ key: tab.name }, { ref_for: true }, unref(tabPaneComponent)?.props({
 								name: tab.name,
-								label: resolveTabLabel(tab)
+								label: resolveTabLabel(tab),
+								lazy: true
 							}) || {}), {
 								default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(tab.component), mergeProps({ ref_for: true }, tab.props || {}, toHandlers(tab.listeners || {})), null, 16))]),
 								_: 2

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

@@ -13,7 +13,7 @@ var _hoisted_4 = {
 	class: "m-editor-history-list-item-actions"
 };
 var _hoisted_5 = ["title"];
-var InitialRow_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var InitialRow_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorHistoryListInitialRow",
 	__name: "InitialRow",
 	props: {

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

@@ -13,7 +13,7 @@ var _hoisted_2 = {
 	class: "m-editor-history-list-toolbar"
 };
 var _hoisted_3 = { class: "m-editor-history-list-ul" };
-var PageTab_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var PageTab_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorHistoryListPageTab",
 	__name: "PageTab",
 	props: {

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

@@ -43,9 +43,10 @@ var mountHistoryDiffDialog = async (options) => {
 	const app = createApp(historyDiffDialog, {
 		services: options.services,
 		isConfirm: options.isConfirm,
-		extendState: options.extendState,
 		loadConfig: options.loadConfig,
 		selfDiffFieldTypes: options.selfDiffFieldTypes,
+		width: options.width,
+		size: options.size ?? options.services?.uiService?.get("propsPanelSize"),
 		onClose: options.onClose
 	});
 	if (options.appContext) Object.assign(app._context, options.appContext);
@@ -59,6 +60,7 @@ var mountHistoryDiffDialog = async (options) => {
 		}, 300);
 	};
 	return {
+		app,
 		instance,
 		destroy
 	};
@@ -116,15 +118,14 @@ var viewHistoryDiffDialog = async (payload, options) => {
 * ```ts
 * import { useHistoryRevert } from '@tmagic/editor';
 *
-* const { onPageRevert, onPageDiff } = useHistoryRevert(editorRef.value); // editorRef.value 即 Editor 暴露的 services
+* const { onPageRevert, onPageDiff } = useHistoryRevert({}, editorRef.value); // editorRef.value 即 Editor 暴露的 services
 * await onPageRevert(index); // 弹出差异 / 二次确认弹窗后回滚
 * onPageDiff(index); // 弹出只读差异弹窗查看前后值差异
 * ```
 */
-var useHistoryRevert = (services, options = {}) => {
-	const { editorService, dataSourceService, codeBlockService, historyService } = services;
+var useHistoryRevert = (options = {}, services) => {
 	const appContext = options.appContext ?? getCurrentInstance()?.appContext ?? null;
-	const { extendState } = options;
+	const { dialogWidth } = options;
 	/** 目标数据已被删除、无法回滚时的统一提示。 */
 	const showRevertTargetMissing = () => {
 		tMagicMessage.error("回滚失败：该记录对应的数据已被删除");
@@ -134,7 +135,7 @@ var useHistoryRevert = (services, options = {}) => {
 	* 不弹差异弹窗，改用一个普通确认框替代「确定回滚」按钮，避免点击后无任何提示直接执行。
 	* 用户取消时返回 false，调用方据此中止回滚。
 	*/
-	const confirmRevert = () => confirmHistoryAction("确定回滚该步骤吗？回滚会将该操作作为一条新记录反向应用（新增将被删除、删除将被还原），不影响后续历史记录。");
+	const confirmRevert = () => confirmHistoryAction("确定回滚该步骤吗？");
 	/**
 	* 「回滚」统一确认入口：可差异对比的步骤动态挂载 HistoryDiffDialog 走差异确认弹窗，
 	* 无法对比的步骤（add / remove / 多节点更新）回退到普通二次确认框。
@@ -143,30 +144,31 @@ var useHistoryRevert = (services, options = {}) => {
 	const runRevert = (payload, extra) => {
 		if (payload) return confirmRevertWithDiffDialog(payload, {
 			appContext,
-			extendState,
 			services,
-			...extra
+			...extra,
+			width: extra?.width ?? dialogWidth,
+			size: extra?.size
 		});
 		return confirmRevert();
 	};
 	const buildPageDiffPayload = (index) => buildDiffPayload({
 		category: "node",
-		groups: () => historyService.getHistoryGroups("page", editorService.get("page")?.id),
-		getCurrent: (id) => editorService.getNodeById(id),
+		groups: () => services?.historyService.getHistoryGroups("page", services?.editorService.get("page")?.id) ?? [],
+		getCurrent: (id) => services?.editorService.getNodeById(id),
 		resolveType: (n, o) => n.type || o.type || "",
 		resolveLabel: (n, o) => n.name || o.name || n.type || o.type || ""
 	}, index);
 	const buildDataSourceDiffPayload = (id, index) => buildDiffPayload({
 		category: "data-source",
-		groups: () => historyService.getHistoryGroups("dataSource"),
-		getCurrent: (id) => dataSourceService.getDataSourceById(`${id}`),
+		groups: () => services?.historyService.getHistoryGroups("dataSource") ?? [],
+		getCurrent: (id) => services?.dataSourceService.getDataSourceById(`${id}`),
 		resolveType: (n, o) => n.type || o.type || "base",
 		resolveLabel: (n, o, id) => n.title || o.title || `${id}`
 	}, index, id);
 	const buildCodeBlockDiffPayload = (id, index) => buildDiffPayload({
 		category: "code-block",
-		groups: () => historyService.getHistoryGroups("codeBlock"),
-		getCurrent: (id) => codeBlockService.getCodeContentById(id),
+		groups: () => services?.historyService.getHistoryGroups("codeBlock") ?? [],
+		getCurrent: (id) => services?.codeBlockService.getCodeContentById(id),
 		resolveLabel: (n, o, id) => n.name || o.name || `${id}`
 	}, index, id);
 	/**
@@ -176,45 +178,45 @@ var useHistoryRevert = (services, options = {}) => {
 	* add（回滚即删除）即使目标已不在，也已达成「删除」目的，不视为失败。
 	*/
 	const isPageRevertTargetMissing = (index) => {
-		const step = historyService.getStepList("page", editorService.get("page")?.id)[index]?.step;
+		const step = services?.historyService.getStepList("page", services?.editorService.get("page")?.id)[index]?.step;
 		if (!step) return false;
 		if (step.opType === "update") return (step.diff ?? []).some((item) => {
 			const id = item.newSchema?.id ?? item.oldSchema?.id;
-			return id !== void 0 && !editorService.getNodeById(id, false);
+			return id !== void 0 && !services?.editorService.getNodeById(id, false);
 		});
-		if (step.opType === "remove") return (step.diff ?? []).some((item) => item.parentId !== void 0 && !editorService.getNodeById(item.parentId, false));
+		if (step.opType === "remove") return (step.diff ?? []).some((item) => item.parentId !== void 0 && !services?.editorService.getNodeById(item.parentId, false));
 		return false;
 	};
 	/** 数据源 update 步骤回滚时，对应数据源必须仍存在（已删除则无处写回旧值）。 */
 	const isDataSourceRevertTargetMissing = (id, index) => {
-		const step = historyService.getStepList("dataSource", id)[index]?.step;
-		return Boolean(step?.opType === "update" && !dataSourceService.getDataSourceById(`${id}`));
+		const step = services?.historyService.getStepList("dataSource", id)[index]?.step;
+		return Boolean(step?.opType === "update" && !services?.dataSourceService.getDataSourceById(`${id}`));
 	};
 	/** 代码块 update 步骤回滚时，对应代码块必须仍存在（已删除则无处写回旧值）。 */
 	const isCodeBlockRevertTargetMissing = (id, index) => {
-		const step = historyService.getStepList("codeBlock", id)[index]?.step;
-		return Boolean(step?.opType === "update" && !codeBlockService.getCodeContentById(id));
+		const step = services?.historyService.getStepList("codeBlock", id)[index]?.step;
+		return Boolean(step?.opType === "update" && !services?.codeBlockService.getCodeContentById(id));
 	};
 	const onPageRevert = (index) => {
 		if (isPageRevertTargetMissing(index)) {
 			showRevertTargetMissing();
 			return Promise.resolve(null);
 		}
-		return runRevert(buildPageDiffPayload(index)).then((result) => result ? editorService.revertPageStep(index) : null);
+		return runRevert(buildPageDiffPayload(index), {}).then((result) => result ? services?.editorService.revertPageStep(index) : null);
 	};
 	const onDataSourceRevert = (id, index) => {
 		if (isDataSourceRevertTargetMissing(id, index)) {
 			showRevertTargetMissing();
 			return Promise.resolve(null);
 		}
-		return runRevert(buildDataSourceDiffPayload(id, index)).then((result) => result ? dataSourceService.revert(id, index) : null);
+		return runRevert(buildDataSourceDiffPayload(id, index)).then((result) => result ? services?.dataSourceService.revert(id, index) : null);
 	};
 	const onCodeBlockRevert = (id, index) => {
 		if (isCodeBlockRevertTargetMissing(id, index)) {
 			showRevertTargetMissing();
 			return Promise.resolve(null);
 		}
-		return runRevert(buildCodeBlockDiffPayload(id, index)).then((result) => result ? codeBlockService.revert(id, index) : null);
+		return runRevert(buildCodeBlockDiffPayload(id, index)).then((result) => result ? services?.codeBlockService.revert(id, index) : null);
 	};
 	/**
 	* 「查看差异」：可差异对比的步骤（单实体 update）动态挂载只读 HistoryDiffDialog 展示前后值差异，
@@ -224,24 +226,24 @@ var useHistoryRevert = (services, options = {}) => {
 		const payload = buildPageDiffPayload(index);
 		if (payload) return viewHistoryDiffDialog(payload, {
 			appContext,
-			extendState,
-			services
+			services,
+			width: dialogWidth
 		});
 	};
 	const onDataSourceDiff = (id, index) => {
 		const payload = buildDataSourceDiffPayload(id, index);
 		if (payload) return viewHistoryDiffDialog(payload, {
 			appContext,
-			extendState,
-			services
+			services,
+			width: dialogWidth
 		});
 	};
 	const onCodeBlockDiff = (id, index) => {
 		const payload = buildCodeBlockDiffPayload(id, index);
 		if (payload) return viewHistoryDiffDialog(payload, {
 			appContext,
-			extendState,
-			services
+			services,
+			width: dialogWidth
 		});
 	};
 	/**
@@ -267,7 +269,9 @@ var useHistoryRevert = (services, options = {}) => {
 		}
 		if (!await runRevert(revertOptions.diffPayload ?? null, {
 			loadConfig: revertOptions.loadConfig,
-			selfDiffFieldTypes: revertOptions.selfDiffFieldTypes
+			selfDiffFieldTypes: revertOptions.selfDiffFieldTypes,
+			width: revertOptions.width,
+			size: revertOptions.size
 		})) return null;
 		return await revertOptions.revert();
 	};
@@ -278,9 +282,10 @@ var useHistoryRevert = (services, options = {}) => {
 	const viewDiff = (payload, extra) => {
 		if (payload) return viewHistoryDiffDialog(payload, {
 			appContext,
-			extendState,
 			services,
-			...extra
+			...extra,
+			width: extra?.width ?? dialogWidth,
+			size: extra?.size
 		});
 	};
 	return {

package/dist/es/layouts/page-bar/AddButton.vue_vue_type_script_setup_true_lang.js

@@ -16,7 +16,7 @@ var _hoisted_2 = {
 	key: 1,
 	style: { "width": "21px" }
 };
-var AddButton_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var AddButton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorPageBarAddButton",
 	__name: "AddButton",
 	setup(__props) {

package/dist/es/layouts/page-bar/PageBar.vue_vue_type_script_setup_true_lang.js

@@ -13,7 +13,7 @@ var _hoisted_1 = { class: "m-editor-page-bar-tabs" };
 var _hoisted_2 = ["data-page-id", "onClick"];
 var _hoisted_3 = { class: "m-editor-page-bar-title" };
 var _hoisted_4 = ["title"];
-var PageBar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var PageBar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorPageBar",
 	__name: "PageBar",
 	props: {

package/dist/es/layouts/page-bar/PageBarScrollContainer.vue_vue_type_script_setup_true_lang.js

@@ -13,7 +13,7 @@ var _hoisted_2 = {
 	class: "m-editor-page-bar-items",
 	ref: "itemsContainer"
 };
-var PageBarScrollContainer_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var PageBarScrollContainer_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorPageBarScrollContainer",
 	__name: "PageBarScrollContainer",
 	props: {

package/dist/es/layouts/page-bar/PageList.vue_vue_type_script_setup_true_lang.js

@@ -11,7 +11,7 @@ var _hoisted_1 = {
 };
 var _hoisted_2 = { class: "page-bar-popover-wrapper" };
 var _hoisted_3 = { class: "page-bar-popover-inner" };
-var PageList_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var PageList_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorPageList",
 	__name: "PageList",
 	props: { list: {} },

package/dist/es/layouts/page-bar/Search.vue_vue_type_script_setup_true_lang.js

@@ -5,13 +5,13 @@ import { Teleport, createBlock, createCommentVNode, createElementBlock, createVN
 import { Search } from "@element-plus/icons-vue";
 //#region packages/editor/src/layouts/page-bar/Search.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { 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__ */ defineComponent({
+var Search_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "Search",
 	props: {
 		"query": {},
 		"queryModifiers": {}
 	},
-	emits: /* @__PURE__ */ mergeModels(["search"], ["update:query"]),
+	emits: /*@__PURE__*/ mergeModels(["search"], ["update:query"]),
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
 		const query = useModel(__props, "query");

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

@@ -1,14 +1,17 @@
+import { useEditorFormContext } from "../../hooks/use-form-context.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 { MForm } from "@tmagic/form";
-import { TMagicButton, TMagicScrollbar } from "@tmagic/design";
-import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, getCurrentInstance, inject, normalizeClass, onMounted, onUnmounted, openBlock, ref, renderSlot, unref, useTemplateRef, watchEffect, withCtx } from "vue";
+import { ENABLE_PROPS_FORM_VALIDATE } from "../../editorProps.js";
+import { MForm, validateForm } from "@tmagic/form";
+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, 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
 var _hoisted_1 = { class: "m-editor-props-form-panel" };
-var FormPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FormPanel_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MEditorFormPanel",
 	__name: "FormPanel",
 	props: {
@@ -17,8 +20,7 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		disabledShowSrc: { type: Boolean },
 		labelWidth: {},
 		codeValueKey: {},
-		labelPosition: {},
-		extendState: { type: Function }
+		labelPosition: {}
 	},
 	emits: [
 		"submit",
@@ -30,20 +32,15 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 	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 { uiService } = services;
 		const codeOptions = inject("codeOptions", {});
 		const showSrc = ref(false);
 		const propsPanelSize = computed(() => uiService.get("propsPanelSize") || "small");
 		const { height: editorContentHeight } = useEditorContentHeight();
-		const stage = computed(() => editorService.get("stage"));
+		const formContext = useEditorFormContext(() => services);
 		const configFormRef = useTemplateRef("configForm");
-		watchEffect(() => {
-			if (configFormRef.value) {
-				configFormRef.value.formState.stage = stage.value;
-				configFormRef.value.formState.services = services;
-			}
-		});
 		const internalInstance = getCurrentInstance();
 		onMounted(() => {
 			emit("mounted", internalInstance?.proxy);
@@ -53,16 +50,47 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 		});
 		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 validateForm({
+					config: props.config,
+					typeMatchValid: true,
+					initValues: newValues,
+					context: formContext.value
+				});
+				if (error) tMagicMessage({
+					type: "error",
+					message: formatValidateErrorHtml(error),
+					dangerouslyUseHTMLString: true
+				});
+				emit("submit", newValues, void 0, error ? new Error(error) : void 0);
+			} catch (e) {
+				console.error("validateForm error", e);
+				emit("submit", newValues, void 0, e instanceof Error ? e : new Error(String(e)));
+			}
 		};
 		__expose({
 			configForm: configFormRef,
@@ -81,7 +109,9 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 						size: propsPanelSize.value,
 						"init-values": __props.values,
 						config: __props.config,
-						"extend-state": __props.extendState,
+						"type-match-valid": true,
+						context: unref(formContext),
+						"validate-on-init": true,
 						onChange: submit,
 						onError: errorHandler
 					}, null, 8, [
@@ -92,7 +122,7 @@ var FormPanel_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defi
 						"size",
 						"init-values",
 						"config",
-						"extend-state"
+						"context"
 					])]),
 					_: 1
 				}),