@tmagic/editor 1.8.0-beta.1 → 1.8.0-beta.10

package/dist/es/editorProps.js

@@ -6,6 +6,7 @@ var defaultEditorProps = {
 	disabledMultiSelect: false,
 	alwaysMultiSelect: false,
 	disabledPageFragment: false,
+	disabledFlashTip: false,
 	disabledStageOverlay: false,
 	containerHighlightClassName: CONTAINER_HIGHLIGHT_CLASS_NAME,
 	containerHighlightDuration: 800,
@@ -15,6 +16,7 @@ var defaultEditorProps = {
 	disabledCodeBlock: false,
 	componentGroupList: () => [],
 	datasourceList: () => [],
+	historyListExtraTabs: () => [],
 	menu: () => ({
 		left: [],
 		right: []

package/dist/es/fields/Code.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import CodeEditor_default from "../layouts/CodeEditor.js";
-import { createBlock, defineComponent, openBlock } from "vue";
+import { computed, createBlock, defineComponent, openBlock } from "vue";
 //#region packages/editor/src/fields/Code.vue?vue&type=script&setup=true&lang.ts
-var Code_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsVsCode",
 	__name: "Code",
 	props: {
@@ -22,17 +22,31 @@ var Code_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 	emits: ["change"],
 	setup(__props, { emit: __emit }) {
 		const emit = __emit;
+		const props = __props;
+		/**
+		* 对比模式判定：
+		*
+		* - 当 `isCompare === true` 时，由父级 `MFormContainer` 统一渲染一次本字段（不再渲染前后两份独立组件），
+		*   并把 `model`（当前值）与 `lastValues`（历史值）一并传入；
+		* - 此时本字段切换到 monaco 自带的 diff 编辑器（左侧旧、右侧新），相比"两个独立 monaco 实例"更直观，
+		*   也避免了同一表单内重复实例化重型编辑器带来的开销。
+		*
+		* 仅当存在历史值（lastValues）且开启了对比模式时启用 diff，避免在 lastValues 缺失时退化为空对比。
+		*/
+		const diffMode = computed(() => Boolean(props.isCompare && props.lastValues));
 		const save = (v) => {
 			emit("change", v);
 		};
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(CodeEditor_default, {
 				height: __props.config.height,
-				"init-values": __props.model[__props.name],
+				type: diffMode.value ? "diff" : void 0,
+				"init-values": diffMode.value ? (__props.lastValues || {})[__props.name] : __props.model[__props.name],
+				"modified-values": diffMode.value ? __props.model[__props.name] : void 0,
 				language: __props.config.language,
 				options: {
 					...__props.config.options,
-					readOnly: __props.disabled
+					readOnly: diffMode.value ? true : __props.disabled
 				},
 				autosize: __props.config.autosize,
 				parse: __props.config.parse,
@@ -40,7 +54,9 @@ var Code_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCom
 				onSave: save
 			}, null, 8, [
 				"height",
+				"type",
 				"init-values",
+				"modified-values",
 				"language",
 				"options",
 				"autosize",

package/dist/es/fields/CodeLink.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
 import { getEditorConfig } from "../utils/config.js";
+import { serializeConfig } from "../utils/editor.js";
 import { computed, createBlock, defineComponent, openBlock, reactive, resolveComponent, watch } from "vue";
-import serialize from "serialize-javascript";
 //#region packages/editor/src/fields/CodeLink.vue?vue&type=script&setup=true&lang.ts
-var CodeLink_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeLink_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsCodeLink",
 	__name: "CodeLink",
 	props: {
@@ -39,10 +39,7 @@ var CodeLink_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
 		});
 		const modelValue = reactive({ form: { [props.name]: "" } });
 		watch(() => props.model[props.name], (value) => {
-			modelValue.form = { [props.name]: serialize(value, {
-				space: 2,
-				unsafe: true
-			}).replace(/"(\w+)":\s/g, "$1: ") };
+			modelValue.form = { [props.name]: serializeConfig(value) };
 		}, { immediate: true });
 		const changeHandler = (v) => {
 			if (!props.name || !props.model) return;

package/dist/es/fields/CodeSelect.vue_vue_type_script_setup_true_lang.js

@@ -5,7 +5,7 @@ import { HookCodeType, HookType } from "@tmagic/core";
 import { computed, createElementBlock, createVNode, defineComponent, normalizeClass, openBlock, unref, watch, withCtx } from "vue";
 import { isEmpty } from "lodash-es";
 //#region packages/editor/src/fields/CodeSelect.vue?vue&type=script&setup=true&lang.ts
-var CodeSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsCodeSelect",
 	__name: "CodeSelect",
 	props: {
@@ -25,6 +25,20 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 		const emit = __emit;
 		const { dataSourceService, codeBlockService } = useServices();
 		const props = __props;
+		/**
+		* 对比模式判定：
+		*
+		* code-select 仅是对内部「钩子列表」group-list 的包裹，本身不渲染叶子字段。父级 `MFormContainer`
+		* 已将其归入「自接管对比字段」（见 Container.vue 的 `SELF_DIFF_FIELD_TYPES`），即对比时只渲染一次
+		* 本组件，并把当前值 `model` 与历史值 `lastValues` 一并传入，由本组件把 `is-compare`/`lastValues`
+		* 透传给内部 MContainer，再由 group-list / code-select-col 等子级逐项展示前后差异。
+		*
+		* 注意：`model` 传入的是 `model[name]`（钩子值本身），因此 `lastValues` 也必须同层取 `lastValues[name]`，
+		* 否则前后值的嵌套层级不一致会导致对比错位。
+		*
+		* 仅当存在历史值时才启用对比，避免 lastValues 缺失时退化为「全部新增」的空对比。
+		*/
+		const isCompareMode = computed(() => Boolean(props.isCompare && props.lastValues));
 		const codeConfig = computed(() => ({
 			type: "group-list",
 			name: "hookData",
@@ -96,7 +110,8 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					size: __props.size,
 					prop: __props.prop,
 					disabled: __props.disabled,
-					lastValues: __props.lastValues,
+					"is-compare": isCompareMode.value,
+					"last-values": __props.lastValues?.[__props.name],
 					model: __props.model[__props.name],
 					onChange: changeHandler
 				}, null, 8, [
@@ -104,7 +119,8 @@ var CodeSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 					"size",
 					"prop",
 					"disabled",
-					"lastValues",
+					"is-compare",
+					"last-values",
 					"model"
 				])]),
 				_: 1

package/dist/es/fields/CodeSelectCol.vue_vue_type_script_setup_true_lang.js

@@ -2,7 +2,7 @@ import { SideItemKey } from "../type.js";
 import { useServices } from "../hooks/use-services.js";
 import Icon_default from "../components/Icon.js";
 import CodeParams_default from "../components/CodeParams.js";
-import { MSelect, createValues, filterFunction } from "@tmagic/form";
+import { MContainer, MSelect, createValues, filterFunction } from "@tmagic/form";
 import { TMagicButton } from "@tmagic/design";
 import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, openBlock, ref, unref, watch, withCtx } from "vue";
 import { isEmpty, map } from "lodash-es";
@@ -10,7 +10,7 @@ import { Edit, View } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/CodeSelectCol.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-fields-code-select-col" };
 var _hoisted_2 = { class: "code-select-container" };
-var CodeSelectCol_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CodeSelectCol_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsCodeSelectCol",
 	__name: "CodeSelectCol",
 	props: {
@@ -35,8 +35,20 @@ var CodeSelectCol_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 		const eventBus = inject("eventBus");
 		const emit = __emit;
 		const props = __props;
+		/**
+		* 对比模式判定：
+		*
+		* code-select-col 由「代码块下拉框 + 参数子表单」组成，属于复合字段。父级 `MFormContainer` 已将其
+		* 归入「自接管对比字段」（见 Container.vue 的 `SELF_DIFF_FIELD_TYPES`），即对比时只渲染一次本组件，
+		* 并把当前值 `model` 与历史值 `lastValues` 一并传入，由本组件把 `is-compare`/`lastValues` 透传给
+		* 内部的下拉框（MFormContainer）与参数表单（CodeParams），逐项展示前后差异。
+		*
+		* 仅当存在历史值时才启用对比，避免 lastValues 缺失时退化为「全部新增」的空对比。
+		*/
+		const isCompareMode = computed(() => Boolean(props.isCompare && props.lastValues));
 		const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
-		const hasCodeBlockSidePanel = computed(() => (uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.CODE_BLOCK));
+		const codeBlockSidePanel = computed(() => (uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.CODE_BLOCK));
+		const hasCodeBlockSidePanel = computed(() => codeBlockSidePanel.value);
 		/**
 		* 根据代码块id获取代码块参数配置
 		* @param codeId 代码块ID
@@ -91,13 +103,31 @@ var CodeSelectCol_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 			emit("change", props.model[props.name], eventData);
 		};
 		const editCode = (id) => {
+			const sideBarItem = codeBlockSidePanel.value;
+			if (sideBarItem) uiService.set("sideBarActiveTabName", sideBarItem.text || sideBarItem.$key || SideItemKey.CODE_BLOCK);
 			eventBus?.emit("edit-code", id);
 		};
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [
 				createElementVNode("div", _hoisted_2, [
 					createCommentVNode(" 代码块下拉框 "),
-					createVNode(unref(MSelect), {
+					createCommentVNode(" 对比模式下交由 MFormContainer 展示下拉框的前后差异（codeId 变化时高亮新旧代码块名），\n           普通模式仍直接渲染 MSelect 以保留选择 / 写值逻辑 "),
+					isCompareMode.value ? (openBlock(), createBlock(unref(MContainer), {
+						key: 0,
+						class: "select",
+						config: selectConfig,
+						model: __props.model,
+						"last-values": __props.lastValues,
+						"is-compare": true,
+						size: __props.size,
+						prop: __props.prop
+					}, null, 8, [
+						"model",
+						"last-values",
+						"size",
+						"prop"
+					])) : (openBlock(), createBlock(unref(MSelect), {
+						key: 1,
 						class: "select",
 						config: selectConfig,
 						name: __props.name,
@@ -110,10 +140,10 @@ var CodeSelectCol_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 						"model",
 						"size",
 						"prop"
-					]),
-					createCommentVNode(" 查看/编辑按钮 "),
-					__props.model[__props.name] && hasCodeBlockSidePanel.value ? (openBlock(), createBlock(unref(TMagicButton), {
-						key: 0,
+					])),
+					createCommentVNode(" 查看/编辑按钮：对比模式为只读，不展示 "),
+					!isCompareMode.value && __props.model[__props.name] && hasCodeBlockSidePanel.value ? (openBlock(), createBlock(unref(TMagicButton), {
+						key: 2,
 						class: "m-fields-select-action-button",
 						size: __props.size,
 						onClick: _cache[0] || (_cache[0] = ($event) => editCode(__props.model[__props.name]))
@@ -127,12 +157,16 @@ var CodeSelectCol_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
 					name: "params",
 					key: __props.model[__props.name],
 					model: __props.model,
+					"last-values": __props.lastValues,
+					"is-compare": isCompareMode.value,
 					size: __props.size,
 					disabled: __props.disabled,
 					"params-config": paramsConfig.value,
 					onChange: onParamsChangeHandler
 				}, null, 8, [
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled",
 					"params-config"

package/dist/es/fields/CondOpSelect.vue_vue_type_script_setup_true_lang.js

@@ -4,7 +4,7 @@ import { getFieldType } from "../utils/data-source/index.js";
 import { TMagicSelect, getDesignConfig } from "@tmagic/design";
 import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, openBlock, renderList, resolveDynamicComponent, unref, withCtx } from "vue";
 //#region packages/editor/src/fields/CondOpSelect.vue?vue&type=script&setup=true&lang.ts
-var CondOpSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var CondOpSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsCondOpSelect",
 	__name: "CondOpSelect",
 	props: {

package/dist/es/fields/DataSourceFieldSelect/FieldSelect.vue_vue_type_script_setup_true_lang.js

@@ -9,9 +9,9 @@ import { Fragment, computed, createBlock, createCommentVNode, createElementBlock
 import { Edit, View } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/DataSourceFieldSelect/FieldSelect.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-editor-data-source-field-select" };
-var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var FieldSelect_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "FieldSelect",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		value: {},
 		disabled: { type: Boolean },
 		checkStrictly: { type: Boolean },
@@ -23,7 +23,7 @@ var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		"modelValue": { default: [] },
 		"modelModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels(["change"], ["update:modelValue"]),
+	emits: /*@__PURE__*/ mergeModels(["change"], ["update:modelValue"]),
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
@@ -39,6 +39,8 @@ var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 		});
 		const valueIsKey = computed(() => props.value === "key");
 		const notEditable = computed(() => filterFunction(mForm, props.notEditable, props));
+		/** 对比模式下隐藏查看/编辑操作按钮，仅保留只读展示。 */
+		const isCompare = computed(() => Boolean(mForm?.isCompare));
 		const dataSourcesOptions = computed(() => dataSources.value.map((ds) => ({
 			text: ds.title || ds.id,
 			value: valueIsKey.value ? ds.id : `${DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX}${ds.id}`
@@ -87,9 +89,15 @@ var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 			modelValue.value = v;
 			emit("change", v);
 		};
-		const hasDataSourceSidePanel = computed(() => uiService.get("sideBarItems").find((item) => item.$key === SideItemKey.DATA_SOURCE));
+		const dataSourceSidePanel = computed(() => uiService.get("sideBarItems").find((item) => item.$key === SideItemKey.DATA_SOURCE));
+		const hasDataSourceSidePanel = computed(() => dataSourceSidePanel.value);
 		const editHandler = (id) => {
-			eventBus?.emit("edit-data-source", removeDataSourceFieldPrefix(id));
+			const sideBarItem = dataSourceSidePanel.value;
+			if (sideBarItem) uiService.set("sideBarActiveTabName", sideBarItem.text || sideBarItem.$key || SideItemKey.DATA_SOURCE);
+			const dataSourceId = removeDataSourceFieldPrefix(id);
+			const fieldPath = selectFieldsId.value;
+			if (fieldPath.length) eventBus?.emit("edit-data-source-field", dataSourceId, [...fieldPath]);
+			else eventBus?.emit("edit-data-source", dataSourceId);
 		};
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [__props.dataSourceId ? (openBlock(), createBlock(unref(TMagicCascader), {
@@ -166,7 +174,7 @@ var FieldSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
 				"size",
 				"options",
 				"props"
-			])), selectDataSourceId.value && hasDataSourceSidePanel.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
+			])), selectDataSourceId.value && hasDataSourceSidePanel.value && !isCompare.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
 				key: 3,
 				content: notEditable.value ? "查看" : "编辑"
 			}, {

package/dist/es/fields/DataSourceFieldSelect/Index.vue_vue_type_script_setup_true_lang.js

@@ -8,7 +8,7 @@ import { computed, createBlock, createCommentVNode, createElementBlock, createVN
 import { Coin } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/DataSourceFieldSelect/Index.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-fields-data-source-field-select" };
-var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var Index_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsDataSourceFieldSelect",
 	__name: "Index",
 	props: {
@@ -140,7 +140,7 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				"init-values",
 				"values",
 				"prop"
-			])), __props.config.fieldConfig && !disabledDataSource.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
+			])), __props.config.fieldConfig && !disabledDataSource.value && !unref(mForm)?.isCompare ? (openBlock(), createBlock(unref(TMagicTooltip), {
 				key: 2,
 				disabled: showDataSourceFieldSelect.value,
 				content: "选择数据源"
@@ -148,7 +148,7 @@ var Index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
 				default: withCtx(() => [createVNode(unref(TMagicButton), {
 					type: showDataSourceFieldSelect.value ? "primary" : "default",
 					size: __props.size,
-					disabled: __props.disabled || unref(mForm)?.isCompare,
+					disabled: __props.disabled,
 					onClick: onToggleDataSourceFieldSelectHandler
 				}, {
 					default: withCtx(() => [createVNode(Icon_default, { icon: unref(Coin) }, null, 8, ["icon"])]),

package/dist/es/fields/DataSourceFields.vue_vue_type_script_setup_true_lang.js

@@ -7,14 +7,17 @@ import { MFormBox } from "@tmagic/form";
 import { MagicTable } from "@tmagic/table";
 import { TMagicButton, tMagicMessage, tMagicMessageBox } from "@tmagic/design";
 import { getDefaultValueFromFields } from "@tmagic/utils";
-import { createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, inject, isRef, mergeModels, openBlock, ref, unref, useModel, withCtx } from "vue";
+import { computed, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, inject, isRef, mergeModels, onMounted, openBlock, provide, ref, unref, useModel, withCtx } from "vue";
 //#region packages/editor/src/fields/DataSourceFields.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-editor-data-source-fields" };
-var _hoisted_2 = { class: "m-editor-data-source-fields-footer" };
-var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var _hoisted_2 = {
+	key: 0,
+	class: "m-editor-data-source-fields-footer"
+};
+var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsDataSourceFields",
 	__name: "DataSourceFields",
-	props: /* @__PURE__ */ mergeModels({
+	props: /*@__PURE__*/ mergeModels({
 		config: {},
 		model: {},
 		initValues: {},
@@ -42,7 +45,7 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		},
 		"visible1Modifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels(["change"], [
+	emits: /*@__PURE__*/ mergeModels(["change"], [
 		"update:width",
 		"update:visible",
 		"update:visible1"
@@ -51,6 +54,9 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		const props = __props;
 		const emit = __emit;
 		const { uiService } = useServices();
+		const mForm = inject("mForm");
+		/** 对比模式下隐藏新增/编辑/删除等操作按钮，仅保留只读展示。 */
+		const isCompare = computed(() => Boolean(mForm?.isCompare));
 		const fieldValues = ref({});
 		const fieldTitle = ref("");
 		const width = useModel(__props, "width");
@@ -60,6 +66,15 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			calcBoxPosition();
 			addDialogVisible.value = true;
 		};
+		const editField = (row, index) => {
+			fieldValues.value = {
+				...row,
+				index
+			};
+			fieldTitle.value = `编辑${row.title}`;
+			calcBoxPosition();
+			addDialogVisible.value = true;
+		};
 		const fieldChange = ({ index, ...value }, data) => {
 			addDialogVisible.value = false;
 			if (index > -1) emit("change", value, {
@@ -111,13 +126,7 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				actions: [{
 					text: "编辑",
 					handler: (row, index) => {
-						fieldValues.value = {
-							...row,
-							index
-						};
-						fieldTitle.value = `编辑${row.title}`;
-						calcBoxPosition();
-						addDialogVisible.value = true;
+						editField(row, index);
 					}
 				}, {
 					text: "删除",
@@ -130,6 +139,8 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				}]
 			}
 		];
+		/** 对比模式下移除「操作」列（编辑/删除按钮），仅保留只读列。 */
+		const displayColumns = computed(() => isCompare.value ? fieldColumns.filter((col) => !col.actions) : fieldColumns);
 		const dataSourceFieldsConfig = [
 			{
 				name: "index",
@@ -302,14 +313,28 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 		const addFromJsonDialogVisible = useModel(__props, "visible1");
 		const { height: editorHeight } = useEditorContentHeight();
 		const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, inject("parentFloating", ref(null)));
+		/**
+		* 由 DataSourceConfigPanel 注入：打开数据源详情后需要直接打开的字段路径（字段名数组）。
+		* 当前层消费 path[0]，并把剩余路径下发给嵌套字段，实现逐层打开。
+		*/
+		const editingFieldPath = inject("editingDataSourceFieldPath", computed(() => []));
+		provide("editingDataSourceFieldPath", computed(() => editingFieldPath.value.slice(1)));
+		onMounted(() => {
+			const path = editingFieldPath.value;
+			if (!path.length) return;
+			const fields = props.model[props.name] || [];
+			const index = fields.findIndex((field) => field.name === path[0]);
+			if (index === -1) return;
+			editField(fields[index], index);
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [
 				createVNode(unref(MagicTable), {
 					data: __props.model[__props.name],
-					columns: fieldColumns,
+					columns: displayColumns.value,
 					border: true
-				}, null, 8, ["data"]),
-				createElementVNode("div", _hoisted_2, [createVNode(unref(TMagicButton), {
+				}, null, 8, ["data", "columns"]),
+				!isCompare.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(TMagicButton), {
 					size: "small",
 					disabled: __props.disabled,
 					plain: "",
@@ -326,7 +351,7 @@ var DataSourceFields_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				}, {
 					default: withCtx(() => [..._cache[9] || (_cache[9] = [createTextVNode("添加", -1)])]),
 					_: 1
-				}, 8, ["disabled"])]),
+				}, 8, ["disabled"])])) : createCommentVNode("v-if", true),
 				createVNode(FloatingBox_default, {
 					visible: addDialogVisible.value,
 					"onUpdate:visible": _cache[2] || (_cache[2] = ($event) => addDialogVisible.value = $event),

package/dist/es/fields/DataSourceInput.vue_vue_type_script_setup_true_lang.js

@@ -15,7 +15,7 @@ var _hoisted_2 = { style: {
 	"font-size": "10px",
 	"color": "rgba(0, 0, 0, 0.6)"
 } };
-var DataSourceInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var DataSourceInput_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsDataSourceInput",
 	__name: "DataSourceInput",
 	props: {
@@ -227,7 +227,7 @@ var DataSourceInput_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ *
 				onSelect: selectHandler
 			}), {
 				suffix: withCtx(() => [createVNode(Icon_default, { icon: unref(Coin) }, null, 8, ["icon"])]),
-				default: withCtx(({ item }) => [createElementVNode("div", _hoisted_1, [createElementVNode("div", null, toDisplayString(item.text), 1), createElementVNode("span", _hoisted_2, toDisplayString(item.value), 1)])]),
+				default: withCtx((slotProps) => [createElementVNode("div", _hoisted_1, [createElementVNode("div", null, toDisplayString(slotProps?.item?.text || ""), 1), createElementVNode("span", _hoisted_2, toDisplayString(slotProps?.item?.value || ""), 1)])]),
 				_: 1
 			}, 16, ["modelValue"])) : (openBlock(), createElementBlock("div", {
 				key: 2,

package/dist/es/fields/DataSourceMethodSelect.vue_vue_type_script_setup_true_name_true_lang.js

@@ -11,7 +11,7 @@ import { Edit, View } from "@element-plus/icons-vue";
 //#region packages/editor/src/fields/DataSourceMethodSelect.vue?vue&type=script&setup=true&name=true&lang.ts
 var _hoisted_1 = { class: "m-fields-data-source-method-select" };
 var _hoisted_2 = { class: "data-source-method-select-container" };
-var DataSourceMethodSelect_vue_vue_type_script_setup_true_name_true_lang_default = /* @__PURE__ */ defineComponent({
+var DataSourceMethodSelect_vue_vue_type_script_setup_true_name_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsDataSourceMethodSelect",
 	__name: "DataSourceMethodSelect",
 	props: {
@@ -36,8 +36,10 @@ var DataSourceMethodSelect_vue_vue_type_script_setup_true_name_true_lang_default
 		const eventBus = inject("eventBus");
 		const emit = __emit;
 		const props = __props;
-		const hasDataSourceSidePanel = computed(() => (uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE));
+		const dataSourceSidePanel = computed(() => (uiService.get("sideBarItems") || []).find((item) => item.$key === SideItemKey.DATA_SOURCE));
 		const notEditable = computed(() => filterFunction(mForm, props.config.notEditable, props));
+		/** 对比模式下隐藏查看/编辑操作按钮，仅保留只读展示。 */
+		const isCompare = computed(() => Boolean(mForm?.isCompare));
 		const dataSources = computed(() => dataSourceService.get("dataSources"));
 		const isCustomMethod = computed(() => {
 			const [id, name] = props.model[props.name];
@@ -122,9 +124,11 @@ var DataSourceMethodSelect_vue_vue_type_script_setup_true_name_true_lang_default
 			emit("change", props.model[props.name], eventData);
 		};
 		const editCodeHandler = () => {
-			const [id] = props.model[props.name];
+			const [id, methodName] = props.model[props.name];
 			if (!dataSourceService.getDataSourceById(id)) return;
-			eventBus?.emit("edit-data-source", id);
+			const sideBarItem = dataSourceSidePanel.value;
+			if (sideBarItem) uiService.set("sideBarActiveTabName", sideBarItem.text || sideBarItem.$key || SideItemKey.DATA_SOURCE);
+			eventBus?.emit("edit-data-source-method", id, methodName);
 		};
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("div", _hoisted_2, [createVNode(unref(MCascader), {
@@ -143,7 +147,7 @@ var DataSourceMethodSelect_vue_vue_type_script_setup_true_name_true_lang_default
 				"size",
 				"disabled",
 				"prop"
-			]), __props.model[__props.name] && isCustomMethod.value && hasDataSourceSidePanel.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
+			]), __props.model[__props.name] && isCustomMethod.value && dataSourceSidePanel.value && !isCompare.value ? (openBlock(), createBlock(unref(TMagicTooltip), {
 				key: 0,
 				content: notEditable.value ? "查看" : "编辑"
 			}, {

package/dist/es/fields/DataSourceMethods.vue_vue_type_script_setup_true_lang.js

@@ -1,12 +1,15 @@
 import CodeBlockEditor_default from "../components/CodeBlockEditor.js";
 import { MagicTable } from "@tmagic/table";
 import { TMagicButton, tMagicMessageBox } from "@tmagic/design";
-import { createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, openBlock, ref, unref, useTemplateRef, withCtx } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, createVNode, defineComponent, inject, nextTick, onMounted, openBlock, ref, unref, useTemplateRef, withCtx } from "vue";
 import { cloneDeep } from "lodash-es";
 //#region packages/editor/src/fields/DataSourceMethods.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = { class: "m-editor-data-source-methods" };
-var _hoisted_2 = { class: "m-editor-data-source-methods-footer" };
-var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var _hoisted_2 = {
+	key: 0,
+	class: "m-editor-data-source-methods-footer"
+};
+var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "MFieldsDataSourceMethods",
 	__name: "DataSourceMethods",
 	props: {
@@ -28,9 +31,25 @@ var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 	setup(__props, { emit: __emit }) {
 		const props = __props;
 		const emit = __emit;
+		const mForm = inject("mForm");
+		/** 对比模式下隐藏新增/编辑/删除等操作按钮，仅保留只读展示。 */
+		const isCompare = computed(() => Boolean(mForm?.isCompare));
 		const codeConfig = ref();
 		const codeBlockEditorRef = useTemplateRef("codeBlockEditor");
 		let editIndex = -1;
+		const editMethod = (method, index) => {
+			let codeContent = "({ params, dataSource, app }) => {\n  // place your code here\n}";
+			if (method.content) if (typeof method.content !== "string") codeContent = method.content.toString();
+			else codeContent = method.content;
+			codeConfig.value = {
+				...cloneDeep(method),
+				content: codeContent
+			};
+			editIndex = index;
+			nextTick(() => {
+				codeBlockEditorRef.value?.show();
+			});
+		};
 		const methodColumns = [
 			{
 				label: "名称",
@@ -55,17 +74,7 @@ var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				actions: [{
 					text: "编辑",
 					handler: (method, index) => {
-						let codeContent = "({ params, dataSource, app }) => {\n  // place your code here\n}";
-						if (method.content) if (typeof method.content !== "string") codeContent = method.content.toString();
-						else codeContent = method.content;
-						codeConfig.value = {
-							...cloneDeep(method),
-							content: codeContent
-						};
-						editIndex = index;
-						nextTick(() => {
-							codeBlockEditorRef.value?.show();
-						});
+						editMethod(method, index);
 					}
 				}, {
 					text: "删除",
@@ -78,6 +87,8 @@ var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				}]
 			}
 		];
+		/** 对比模式下移除「操作」列（编辑/删除按钮），仅保留只读列。 */
+		const displayColumns = computed(() => isCompare.value ? methodColumns.filter((col) => !col.actions) : methodColumns);
 		const createCodeHandler = () => {
 			codeConfig.value = {
 				name: "",
@@ -111,14 +122,24 @@ var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 			codeConfig.value = void 0;
 			codeBlockEditorRef.value?.hide();
 		};
+		/** 由 DataSourceConfigPanel 注入：打开数据源详情后需要直接打开的方法名 */
+		const editingMethodName = inject("editingDataSourceMethodName", computed(() => ""));
+		onMounted(() => {
+			const methodName = editingMethodName.value;
+			if (!methodName) return;
+			const methods = props.model[props.name] || [];
+			const index = methods.findIndex((method) => method.name === methodName);
+			if (index === -1) return;
+			editMethod(methods[index], index);
+		});
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1, [
 				createVNode(unref(MagicTable), {
 					data: __props.model[__props.name],
-					columns: methodColumns,
+					columns: displayColumns.value,
 					border: true
-				}, null, 8, ["data"]),
-				createElementVNode("div", _hoisted_2, [createVNode(unref(TMagicButton), {
+				}, null, 8, ["data", "columns"]),
+				!isCompare.value ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(unref(TMagicButton), {
 					size: "small",
 					type: "primary",
 					disabled: __props.disabled,
@@ -127,9 +148,9 @@ var DataSourceMethods_vue_vue_type_script_setup_true_lang_default = /* @__PURE__
 				}, {
 					default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("添加", -1)])]),
 					_: 1
-				}, 8, ["disabled"])]),
+				}, 8, ["disabled"])])) : createCommentVNode("v-if", true),
 				codeConfig.value ? (openBlock(), createBlock(CodeBlockEditor_default, {
-					key: 0,
+					key: 1,
 					ref: "codeBlockEditor",
 					disabled: __props.disabled,
 					content: codeConfig.value,