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

package/dist/es/components/CodeBlockEditor.vue_vue_type_script_setup_true_lang.js

@@ -1,9 +1,9 @@
 import { getEditorConfig } from "../utils/config.js";
+import { getCodeBlockFormConfig } from "../utils/code-block.js";
 import { useServices } from "../hooks/use-services.js";
 import { useWindowRect } from "../hooks/use-window-rect.js";
 import { useEditorContentHeight } from "../hooks/use-editor-content-height.js";
 import { useNextFloatBoxPosition } from "../hooks/use-next-float-box-position.js";
-import { getCodeBlockFormConfig } from "../utils/code-block.js";
 import CodeEditor_default from "../layouts/CodeEditor.js";
 import FloatingBox_default from "./FloatingBox.js";
 import { MFormBox } from "@tmagic/form";

package/dist/es/components/CompareForm.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
-import { getCodeBlockFormConfig } from "../utils/code-block.js";
+import { useCompareForm } from "../hooks/use-compare-form.js";
 import { MForm } from "@tmagic/form";
 import { HookType } from "@tmagic/core";
-import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, inject, normalizeStyle, openBlock, provide, ref, unref, useTemplateRef, watch, watchEffect } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeStyle, openBlock, unref } from "vue";
 import { isEqual } from "lodash-es";
 //#region packages/editor/src/components/CompareForm.vue?vue&type=script&setup=true&lang.ts
 var CompareForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -9,59 +9,27 @@ var CompareForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 	__name: "CompareForm",
 	props: {
 		value: {},
-		lastValue: {},
 		type: {},
 		category: { default: "node" },
 		dataSourceType: {},
 		labelWidth: { default: "120px" },
 		height: {},
-		extendState: {
-			type: Function,
-			default: (state) => state
-		},
+		extendState: {},
 		baseFormState: {},
-		selfDiffFieldTypes: {},
 		size: {},
 		loadConfig: {},
-		services: {}
+		services: {},
+		lastValue: {},
+		selfDiffFieldTypes: {}
 	},
 	setup(__props, { expose: __expose }) {
 		const props = __props;
-		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 || {};
-		});
+		const { config, currentValues, wrapperStyle, mergedExtendState, loadConfig, formRef, normalizeCodeBlockValue } = useCompareForm(props);
 		const lastValuesProcessed = computed(() => {
 			if (props.category === "code-block") return normalizeCodeBlockValue(props.lastValue);
 			return props.lastValue || {};
 		});
 		/**
-		* 外层包裹层的样式：当传入 `height` 时启用固定高度 + 内部滚动，
-		* 这样滚动条会出现在 CompareForm 内部，避免父容器（如 Dialog）自身也产生滚动。
-		*/
-		const wrapperStyle = computed(() => {
-			if (!props.height) return void 0;
-			return {
-				height: props.height,
-				overflow: "auto"
-			};
-		});
-		/**
 		* `code-select` 字段在历史数据中存在两种"语义为空"的形态：
 		* - 字符串 `''`（旧数据 / 用户从未配置过钩子）；
 		* - `{ hookType: HookType.CODE, hookData: [] }`（CodeSelect.vue 在挂载时
@@ -84,83 +52,6 @@ var CompareForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 			}
 			return !isEqual(curValue, lastValue);
 		};
-		const removeStyleDisplayConfig = (formConfig) => formConfig.map((item) => {
-			if (!("type" in item)) return item;
-			if (item?.type !== "tab" || !Array.isArray(item.items)) return item;
-			return {
-				...item,
-				items: item.items.map((tabPane) => {
-					if (tabPane?.title !== "样式" || !Array.isArray(tabPane.items)) return tabPane;
-					return {
-						...tabPane,
-						display: true
-					};
-				})
-			};
-		});
-		const mergedExtendState = (state) => {
-			return props.extendState(props.baseFormState || state);
-		};
-		/**
-		* 内置的默认 FormConfig 加载逻辑：按 `category` 从对应 service / 工具取配置。
-		* 作为 ctx.defaultLoadConfig 透传给自定义 `loadConfig`，方便复用与二次加工。
-		*/
-		const defaultLoadConfig = async () => {
-			if (!props.services) return [];
-			switch (props.category) {
-				case "node":
-					if (!props.type) return [];
-					return removeStyleDisplayConfig(await props.services.propsService.getPropsConfig(props.type, { node: props.value }));
-				case "data-source": return props.services.dataSourceService.getFormConfig(props.type || "base").map((item) => "type" in item && item.type === "tab" ? {
-					...item,
-					active: "fields"
-				} : item);
-				case "code-block": return getCodeBlockFormConfig({
-					paramColConfig: props.services.codeBlockService.getParamsColConfig(),
-					isDataSource: () => Boolean(props.dataSourceType),
-					dataSourceType: () => props.dataSourceType,
-					codeOptions,
-					editable: false
-				});
-				default: return [];
-			}
-		};
-		const loadConfig = async () => {
-			if (props.loadConfig) {
-				config.value = await props.loadConfig({
-					category: props.category,
-					type: props.type,
-					dataSourceType: props.dataSourceType,
-					defaultLoadConfig
-				});
-				return;
-			}
-			config.value = await defaultLoadConfig();
-		};
-		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;
-			}
-		});
 		__expose({
 			form: formRef,
 			config,
@@ -169,18 +60,18 @@ var CompareForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				class: "m-editor-compare-form-wrapper",
-				style: normalizeStyle(wrapperStyle.value)
-			}, [config.value.length ? (openBlock(), createBlock(unref(MForm), {
+				style: normalizeStyle(unref(wrapperStyle))
+			}, [unref(config).length ? (openBlock(), createBlock(unref(MForm), {
 				key: 0,
 				ref: "form",
 				class: "m-editor-compare-form",
-				config: config.value,
-				"init-values": currentValues.value,
+				config: unref(config),
+				"init-values": unref(currentValues),
 				"last-values": lastValuesProcessed.value,
 				"is-compare": true,
 				disabled: true,
 				"label-width": __props.labelWidth,
-				"extend-state": mergedExtendState,
+				"extend-state": unref(mergedExtendState),
 				"show-diff": showDiff,
 				"self-diff-field-types": __props.selfDiffFieldTypes,
 				size: __props.size
@@ -189,6 +80,7 @@ var CompareForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defi
 				"init-values",
 				"last-values",
 				"label-width",
+				"extend-state",
 				"self-diff-field-types",
 				"size"
 			])) : createCommentVNode("v-if", true)], 4);

package/dist/es/components/ViewForm.js

@@ -0,0 +1,5 @@
+import ViewForm_vue_vue_type_script_setup_true_lang_default from "./ViewForm.vue_vue_type_script_setup_true_lang.js";
+//#region packages/editor/src/components/ViewForm.vue
+var ViewForm_default = ViewForm_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { ViewForm_default as default };

package/dist/es/components/ViewForm.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,58 @@
+import { useCompareForm } from "../hooks/use-compare-form.js";
+import { MForm } from "@tmagic/form";
+import { createBlock, createCommentVNode, createElementBlock, defineComponent, normalizeStyle, openBlock, unref } from "vue";
+//#region packages/editor/src/components/ViewForm.vue?vue&type=script&setup=true&lang.ts
+var ViewForm_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	name: "MEditorViewForm",
+	__name: "ViewForm",
+	props: {
+		value: {},
+		type: {},
+		category: { default: "node" },
+		dataSourceType: {},
+		labelWidth: { default: "120px" },
+		height: {},
+		extendState: {},
+		baseFormState: {},
+		size: {},
+		loadConfig: {},
+		services: {},
+		disabled: {
+			type: Boolean,
+			default: true
+		}
+	},
+	setup(__props, { expose: __expose }) {
+		const { config, currentValues, wrapperStyle, mergedExtendState, loadConfig, formRef } = useCompareForm(__props);
+		__expose({
+			form: formRef,
+			config,
+			reload: loadConfig
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: "m-editor-view-form-wrapper",
+				style: normalizeStyle(unref(wrapperStyle))
+			}, [unref(config).length ? (openBlock(), createBlock(unref(MForm), {
+				key: 0,
+				ref: "form",
+				class: "m-editor-view-form",
+				config: unref(config),
+				"init-values": unref(currentValues),
+				disabled: __props.disabled,
+				"label-width": __props.labelWidth,
+				"extend-state": unref(mergedExtendState),
+				size: __props.size
+			}, null, 8, [
+				"config",
+				"init-values",
+				"disabled",
+				"label-width",
+				"extend-state",
+				"size"
+			])) : createCommentVNode("v-if", true)], 4);
+		};
+	}
+});
+//#endregion
+export { ViewForm_vue_vue_type_script_setup_true_lang_default as default };

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, booleanOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, getCondOpOptionsByFieldType, numberOptions, styleTabConfig, validatePropsForm } 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,7 +25,6 @@ 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, resolveFieldByPath } from "./utils/data-source/index.js";
 import { IdleTask } from "./utils/dep/idle-task.js";
@@ -74,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";
@@ -90,4 +92,4 @@ export * from "@tmagic/table";
 export * from "@tmagic/stage";
 export * from "@tmagic/design";
 export * from "@tmagic/utils";
-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, 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, 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, useEditorContentHeight, useFilter, useFloatBox, useGetSo, useHistoryRevert, useNextFloatBoxPosition, useNodeStatus, useServices, useStage, useWindowRect, validatePropsForm, 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/services/codeBlock.js

@@ -1,6 +1,6 @@
 import { CODE_DRAFT_STORAGE_KEY } from "../type.js";
-import BaseService from "./BaseService.js";
 import { getEditorConfig } from "../utils/config.js";
+import BaseService from "./BaseService.js";
 import { createStackStep, describeRevertStep, getLastPushedHistoryIds } from "../utils/history.js";
 import history_default from "./history.js";
 import storage_default, { Protocol } from "./storage.js";

package/dist/es/services/history.js

@@ -1,5 +1,5 @@
-import BaseService from "./BaseService.js";
 import { getEditorConfig } from "../utils/config.js";
+import BaseService from "./BaseService.js";
 import { UndoRedo } from "../utils/undo-redo.js";
 import { deserializeStacks, getOrCreateStack, markStackSaved, mergeSteps, serializeStacks, undoFloor } from "../utils/history.js";
 import { idbGet, idbSet } from "../utils/indexed-db.js";

package/dist/es/services/props.js

@@ -1,5 +1,5 @@
-import BaseService from "./BaseService.js";
 import { fillConfig } from "../utils/props.js";
+import BaseService from "./BaseService.js";
 import editor_default from "./editor.js";
 import { getNodePath, getValueByKeyPath, guid, setValueByKeyPath, toLine } from "@tmagic/utils";
 import { Target, Watcher } from "@tmagic/core";

package/dist/es/services/storage.js

@@ -1,5 +1,5 @@
-import BaseService from "./BaseService.js";
 import { getEditorConfig } from "../utils/config.js";
+import BaseService from "./BaseService.js";
 import serialize from "serialize-javascript";
 //#region packages/editor/src/services/storage.ts
 var Protocol = /* @__PURE__ */ function(Protocol) {

package/dist/es/utils/props.js

@@ -276,6 +276,31 @@ var fillConfig = (config = [], { labelWidth = "80px", disabledDataSource = false
 	return [tabConfig];
 };
 /**
+* 将属性表单配置中「样式」tab-pane 的 `display` 强制置为 `true`。
+*
+* `propsService.getPropsConfig` 返回的样式 tab 默认带有
+* `display: ({ services }) => !(services?.uiService?.get('showStylePanel') ?? true)`，
+* 在对比 / 只读展示场景（CompareForm / ViewForm）下并不需要跟随 uiService 状态隐藏，
+* 这里统一放开，保证样式 tab 始终可见。
+*
+* @param formConfig 组件属性表单配置
+* @returns 处理后的表单配置（不修改入参，返回浅拷贝）
+*/
+var removeStyleDisplayConfig = (formConfig) => formConfig.map((item) => {
+	if (!("type" in item)) return item;
+	if (item?.type !== "tab" || !Array.isArray(item.items)) return item;
+	return {
+		...item,
+		items: item.items.map((tabPane) => {
+			if (tabPane?.title !== "样式" || !Array.isArray(tabPane.items)) return tabPane;
+			return {
+				...tabPane,
+				display: true
+			};
+		})
+	};
+});
+/**
 * 对一份「组件属性表单配置 + 值」做一次独立的校验，**不复用也不污染页面上正在展示的表单**。
 *
 * 内部基于 `@tmagic/form` 的 `validateForm` 另建一个独立的 MForm 实例完成校验，并统一处理
@@ -319,4 +344,4 @@ var validatePropsForm = ({ config, values, appContext = null, services, stage, e
 	})
 });
 //#endregion
-export { advancedTabConfig, arrayOptions, booleanOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, getCondOpOptionsByFieldType, numberOptions, styleTabConfig, validatePropsForm };
+export { advancedTabConfig, arrayOptions, booleanOptions, displayTabConfig, eqOptions, eventTabConfig, fillConfig, getCondOpOptionsByFieldType, numberOptions, removeStyleDisplayConfig, styleTabConfig, validatePropsForm };