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

package/dist/tmagic-editor.umd.cjs

@@ -5397,7 +5397,7 @@
 	var serializeConfig = (config) => (0, serialize_javascript.default)(config, {
 		space: 2,
 		unsafe: true
-	}).replace(/"(\w+)":\s/g, "$1: ");
+	}).replace(/(^|\n)(\s*)"(\w+)":\s/g, "$1$2$3: ");
 	var moveItemsInContainer = (sourceIndices, parent, targetIndex) => {
 		sourceIndices.sort((a, b) => a - b);
 		for (let i = sourceIndices.length - 1; i >= 0; i--) {
@@ -11759,10 +11759,43 @@
 		const nodeStatusMaps = (0, vue.ref)(/* @__PURE__ */ new Map());
 		/** 当前页面的节点状态 */
 		const nodeStatusMap = (0, vue.computed)(() => page.value ? nodeStatusMaps.value.get(page.value.id) : /* @__PURE__ */ new Map());
-		(0, vue.watch)(() => page.value?.id, (pageId) => {
-			if (!pageId) return;
-			nodeStatusMaps.value.set(pageId, createPageNodeStatus(page.value, nodeStatusMaps.value.get(pageId)));
+		(0, vue.watch)(page, (newPage) => {
+			if (!newPage?.id) return;
+			nodeStatusMaps.value.set(newPage.id, createPageNodeStatus(newPage, nodeStatusMaps.value.get(newPage.id)));
 		}, { immediate: true });
+		/**
+		* root 整体被替换时（外部 modelValue 变化、历史版本恢复、套件编辑模式进入/退出等）：
+		* - 仅 watch page 引用还不够，因为 root-change 同步触发时 page 还是旧引用，
+		*   等 initService 的异步 IIFE 跑完 editorService.select(...) 后 page 才会
+		*   被替换为新 dsl 中的 page；此时上面的 page watch 才会触发重建。
+		* - 但若直接同步清空 nodeStatusMaps，会让 nodeStatusMap (computed) 立刻变
+		*   undefined。上层 LayerPanel 用 `v-if="page && nodeStatusMap"` 渲染组件树，
+		*   会瞬间销毁整个面板；若紧接着的异步 select 链路（套件退出等场景）发生
+		*   竞态、page 引用未变 / 解析失败，watch(page) 不触发重建，组件树就再也回
+		*   不来。
+		* - 此外「污染」问题本质来自 createPageNodeStatus 用旧 status 作为新节点
+		*   initial 值：只要新 root 的 page 是新引用，watch(page) 会触发重建，重建
+		*   时基于新 page.items 生成的 map 只会包含新节点 id；旧节点 id 即便残留在
+		*   initialLayerNodeStatus 中也不会被写入新 map。真正的风险只有「同一 page
+		*   id 下，新旧 dsl 都存在同一节点 id 但其实是不同节点」这种极端情况——这
+		*   在常规业务中不会发生（id 是 uuid）。
+		*
+		* 综合：root-change 时仅清理「在新 root 中已不存在的 page id」对应缓存，
+		* 保留仍然有效的 page status 不动；既避免 v-if 闪断，也不会保留无关 page 的
+		* 死缓存。同 page id 的重建交给下方 watch(page) 触发。
+		*/
+		const rootChangeHandler = (value) => {
+			if (!value) {
+				nodeStatusMaps.value = /* @__PURE__ */ new Map();
+				return;
+			}
+			const validPageIds = /* @__PURE__ */ new Set();
+			(value.items || []).forEach((p) => {
+				if (p?.id !== void 0) validPageIds.add(p.id);
+			});
+			for (const cachedPageId of Array.from(nodeStatusMaps.value.keys())) if (!validPageIds.has(cachedPageId)) nodeStatusMaps.value.delete(cachedPageId);
+		};
+		editorService.on("root-change", rootChangeHandler);
 		(0, vue.watch)(nodes, (nodes) => {
 			if (!nodeStatusMap.value) return;
 			for (const [id, status] of nodeStatusMap.value.entries()) {
@@ -11795,6 +11828,7 @@
 		};
 		editorService.on("remove", removeHandler);
 		(0, vue.onBeforeUnmount)(() => {
+			editorService.off("root-change", rootChangeHandler);
 			editorService.off("remove", removeHandler);
 			editorService.off("add", addHandler);
 		});
@@ -16785,6 +16819,10 @@
 					emit("change", [dsId], eventData);
 				}
 			};
+			const onToggleDataSourceFieldSelectHandler = () => {
+				if (props.disabled || mForm?.isCompare) return;
+				showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value;
+			};
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$29, [!disabledDataSource.value && (showDataSourceFieldSelect.value || !__props.config.fieldConfig) ? ((0, vue.openBlock)(), (0, vue.createBlock)(FieldSelect_default, {
 					key: 0,
@@ -16834,11 +16872,16 @@
 					default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(_tmagic_design.TMagicButton), {
 						type: showDataSourceFieldSelect.value ? "primary" : "default",
 						size: __props.size,
-						onClick: _cache[0] || (_cache[0] = ($event) => showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value)
+						disabled: __props.disabled || (0, vue.unref)(mForm)?.isCompare,
+						onClick: onToggleDataSourceFieldSelectHandler
 					}, {
 						default: (0, vue.withCtx)(() => [(0, vue.createVNode)(Icon_default, { icon: (0, vue.unref)(_element_plus_icons_vue.Coin) }, null, 8, ["icon"])]),
 						_: 1
-					}, 8, ["type", "size"])]),
+					}, 8, [
+						"type",
+						"size",
+						"disabled"
+					])]),
 					_: 1
 				}, 8, ["disabled"])) : (0, vue.createCommentVNode)("v-if", true)]);
 			};
@@ -17825,10 +17868,12 @@
 		__name: "Background",
 		props: {
 			values: {},
+			lastValues: {},
+			isCompare: { type: Boolean },
 			disabled: { type: Boolean },
 			size: {}
 		},
-		emits: ["change"],
+		emits: ["change", "addDiffCount"],
 		setup(__props, { emit: __emit }) {
 			const emit = __emit;
 			const config = (0, _tmagic_form.defineFormItem)({ items: [
@@ -17910,16 +17955,22 @@
 			const change = (value, eventData) => {
 				emit("change", value, eventData);
 			};
+			const onAddDiffCount = () => emit("addDiffCount");
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_form.MContainer), {
 					config: (0, vue.unref)(config),
 					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
 					size: __props.size,
 					disabled: __props.disabled,
-					onChange: change
+					onChange: change,
+					onAddDiffCount
 				}, null, 8, [
 					"config",
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled"
 				]);
@@ -17968,10 +18019,12 @@
 		__name: "Font",
 		props: {
 			values: {},
+			lastValues: {},
+			isCompare: { type: Boolean },
 			disabled: { type: Boolean },
 			size: {}
 		},
-		emits: ["change"],
+		emits: ["change", "addDiffCount"],
 		setup(__props, { emit: __emit }) {
 			const emit = __emit;
 			const config = (0, _tmagic_form.defineFormItem)({ items: [
@@ -18039,16 +18092,22 @@
 			const change = (value, eventData) => {
 				emit("change", value, eventData);
 			};
+			const onAddDiffCount = () => emit("addDiffCount");
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_form.MContainer), {
 					config: (0, vue.unref)(config),
 					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
 					size: __props.size,
 					disabled: __props.disabled,
-					onChange: change
+					onChange: change,
+					onAddDiffCount
 				}, null, 8, [
 					"config",
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled"
 				]);
@@ -18077,7 +18136,9 @@
 		props: {
 			disabled: { type: Boolean },
 			size: {},
-			model: {}
+			model: {},
+			lastValues: {},
+			isCompare: { type: Boolean }
 		},
 		emits: ["change"],
 		setup(__props, { emit: __emit }) {
@@ -18300,10 +18361,12 @@
 		__name: "Layout",
 		props: {
 			values: {},
+			lastValues: {},
+			isCompare: { type: Boolean },
 			disabled: { type: Boolean },
 			size: {}
 		},
-		emits: ["change"],
+		emits: ["change", "addDiffCount"],
 		setup(__props, { emit: __emit }) {
 			const emit = __emit;
 			const config = (0, _tmagic_form.defineFormItem)({ items: [
@@ -18539,25 +18602,35 @@
 			const change = (value, eventData) => {
 				emit("change", value, eventData);
 			};
+			const onAddDiffCount = () => emit("addDiffCount");
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MContainer), {
 					config: (0, vue.unref)(config),
 					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
 					size: __props.size,
 					disabled: __props.disabled,
-					onChange: change
+					onChange: change,
+					onAddDiffCount
 				}, null, 8, [
 					"config",
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled"
 				]), (0, vue.withDirectives)((0, vue.createVNode)(Box_default, {
 					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
 					size: __props.size,
 					disabled: __props.disabled,
 					onChange: change
 				}, null, 8, [
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled"
 				]), [[vue.vShow, !["fixed", "absolute"].includes(__props.values.position)]])], 64);
@@ -18573,10 +18646,12 @@
 		__name: "Position",
 		props: {
 			values: {},
+			lastValues: {},
+			isCompare: { type: Boolean },
 			disabled: { type: Boolean },
 			size: {}
 		},
-		emits: ["change"],
+		emits: ["change", "addDiffCount"],
 		setup(__props, { emit: __emit }) {
 			const props = __props;
 			const emit = __emit;
@@ -18644,16 +18719,22 @@
 			const change = (value, eventData) => {
 				emit("change", value, eventData);
 			};
+			const onAddDiffCount = () => emit("addDiffCount");
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_form.MContainer), {
 					config: (0, vue.unref)(config),
 					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
 					size: __props.size,
 					disabled: __props.disabled,
-					onChange: change
+					onChange: change,
+					onAddDiffCount
 				}, null, 8, [
 					"config",
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled"
 				]);
@@ -18675,10 +18756,12 @@
 		__name: "Border",
 		props: {
 			model: {},
+			lastValues: {},
+			isCompare: { type: Boolean },
 			disabled: { type: Boolean },
 			size: {}
 		},
-		emits: ["change"],
+		emits: ["change", "addDiffCount"],
 		setup(__props, { emit: __emit }) {
 			const direction = (0, vue.ref)("");
 			const config = (0, vue.computed)(() => (0, _tmagic_form.defineFormItem)({ items: [
@@ -18721,6 +18804,7 @@
 					emit("change", record.value, { modifyKey: record.propPath });
 				});
 			};
+			const onAddDiffCount = () => emit("addDiffCount");
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$1, [(0, vue.createElementVNode)("div", _hoisted_2, [
 					(0, vue.createElementVNode)("div", _hoisted_3, [(0, vue.createElementVNode)("div", {
@@ -18748,12 +18832,17 @@
 				]), (0, vue.createElementVNode)("div", _hoisted_6, [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MContainer), {
 					config: config.value,
 					model: __props.model,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
 					size: __props.size,
 					disabled: __props.disabled,
-					onChange: change
+					onChange: change,
+					onAddDiffCount
 				}, null, 8, [
 					"config",
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled"
 				])])]);
@@ -18769,10 +18858,12 @@
 		__name: "Border",
 		props: {
 			values: {},
+			lastValues: {},
+			isCompare: { type: Boolean },
 			disabled: { type: Boolean },
 			size: {}
 		},
-		emits: ["change"],
+		emits: ["change", "addDiffCount"],
 		setup(__props, { emit: __emit }) {
 			const emit = __emit;
 			const config = (0, _tmagic_form.defineFormItem)({ items: [{
@@ -18785,25 +18876,36 @@
 			const change = (value, eventData) => {
 				emit("change", value, eventData);
 			};
+			const onAddDiffCount = () => emit("addDiffCount");
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, null, [(0, vue.createVNode)((0, vue.unref)(_tmagic_form.MContainer), {
 					config: (0, vue.unref)(config),
 					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
 					size: __props.size,
 					disabled: __props.disabled,
-					onChange: change
+					onChange: change,
+					onAddDiffCount
 				}, null, 8, [
 					"config",
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled"
 				]), (0, vue.createVNode)(Border_default$1, {
 					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
 					size: __props.size,
 					disabled: __props.disabled,
-					onChange: change
+					onChange: change,
+					onAddDiffCount
 				}, null, 8, [
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled"
 				])], 64);
@@ -18819,10 +18921,12 @@
 		__name: "Transform",
 		props: {
 			values: {},
+			lastValues: {},
+			isCompare: { type: Boolean },
 			disabled: { type: Boolean },
 			size: {}
 		},
-		emits: ["change"],
+		emits: ["change", "addDiffCount"],
 		setup(__props, { emit: __emit }) {
 			const emit = __emit;
 			const config = (0, _tmagic_form.defineFormItem)({ items: [{
@@ -18848,16 +18952,22 @@
 			const change = (value, eventData) => {
 				emit("change", value, eventData);
 			};
+			const onAddDiffCount = () => emit("addDiffCount");
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_form.MContainer), {
 					config: (0, vue.unref)(config),
 					model: __props.values,
+					"last-values": __props.lastValues,
+					"is-compare": __props.isCompare,
 					size: __props.size,
 					disabled: __props.disabled,
-					onChange: change
+					onChange: change,
+					onAddDiffCount
 				}, null, 8, [
 					"config",
 					"model",
+					"last-values",
+					"is-compare",
 					"size",
 					"disabled"
 				]);
@@ -18884,7 +18994,7 @@
 			lastValues: {},
 			isCompare: { type: Boolean }
 		},
-		emits: ["change"],
+		emits: ["change", "addDiffCount"],
 		setup(__props, { emit: __emit }) {
 			const props = __props;
 			const emit = __emit;
@@ -18923,6 +19033,7 @@
 				});
 				emit("change", v, eventData);
 			};
+			const onAddDiffCount = () => emit("addDiffCount");
 			return (_ctx, _cache) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(_tmagic_design.TMagicCollapse), {
 					class: "m-fields-style-setter",
@@ -18938,11 +19049,16 @@
 							default: (0, vue.withCtx)(() => [item.component ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(item.component), {
 								key: 0,
 								values: __props.model[__props.name],
+								"last-values": __props.lastValues?.[__props.name],
+								"is-compare": __props.isCompare,
 								size: __props.size,
 								disabled: __props.disabled,
-								onChange: change
+								onChange: change,
+								onAddDiffCount
 							}, null, 40, [
 								"values",
+								"last-values",
+								"is-compare",
 								"size",
 								"disabled"
 							])) : (0, vue.createCommentVNode)("v-if", true)]),

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.0",
+  "version": "1.8.0-beta.1",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.8.0-beta.0",
-    "@tmagic/form": "1.8.0-beta.0",
-    "@tmagic/stage": "1.8.0-beta.0",
-    "@tmagic/utils": "1.8.0-beta.0",
-    "@tmagic/table": "1.8.0-beta.0"
+    "@tmagic/design": "1.8.0-beta.1",
+    "@tmagic/form": "1.8.0-beta.1",
+    "@tmagic/stage": "1.8.0-beta.1",
+    "@tmagic/table": "1.8.0-beta.1",
+    "@tmagic/utils": "1.8.0-beta.1"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -76,7 +76,7 @@
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
     "vue": "^3.5.34",
-    "@tmagic/core": "1.8.0-beta.0"
+    "@tmagic/core": "1.8.0-beta.1"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/fields/DataSourceFieldSelect/Index.vue

@@ -35,7 +35,8 @@
       <TMagicButton
         :type="showDataSourceFieldSelect ? 'primary' : 'default'"
         :size="size"
-        @click="showDataSourceFieldSelect = !showDataSourceFieldSelect"
+        :disabled="disabled || mForm?.isCompare"
+        @click="onToggleDataSourceFieldSelectHandler"
         ><MIcon :icon="Coin"></MIcon
       ></TMagicButton>
     </TMagicTooltip>
@@ -185,4 +186,10 @@ const onChangeHandler = (value: string[], eventData?: ContainerChangeEventData)
     emit('change', [dsId], eventData);
   }
 };
+
+const onToggleDataSourceFieldSelectHandler = () => {
+  // 禁用或对比模式下禁止切换
+  if (props.disabled || mForm?.isCompare) return;
+  showDataSourceFieldSelect.value = !showDataSourceFieldSelect.value;
+};
 </script>

package/src/fields/StyleSetter/Index.vue

@@ -7,9 +7,12 @@
           v-if="item.component"
           :is="item.component"
           :values="model[name]"
+          :last-values="lastValues?.[name]"
+          :is-compare="isCompare"
           :size="size"
           :disabled="disabled"
           @change="change"
+          @add-diff-count="onAddDiffCount"
         ></component>
       </TMagicCollapseItem>
     </template>
@@ -36,6 +39,7 @@ const props = defineProps<FieldProps<StyleSchema>>();
 
 const emit = defineEmits<{
   change: [v: any, eventData: ContainerChangeEventData];
+  addDiffCount: [];
 }>();
 
 const list = [
@@ -82,4 +86,6 @@ const change = (v: any, eventData: ContainerChangeEventData) => {
   });
   emit('change', v, eventData);
 };
+
+const onAddDiffCount = () => emit('addDiffCount');
 </script>

package/src/fields/StyleSetter/components/Border.vue

@@ -30,7 +30,16 @@
       </div>
     </div>
     <div class="border-value-container">
-      <MContainer :config="config" :model="model" :size="size" :disabled="disabled" @change="change"></MContainer>
+      <MContainer
+        :config="config"
+        :model="model"
+        :last-values="lastValues"
+        :is-compare="isCompare"
+        :size="size"
+        :disabled="disabled"
+        @change="change"
+        @add-diff-count="onAddDiffCount"
+      ></MContainer>
     </div>
   </div>
 </template>
@@ -86,11 +95,14 @@ const selectDirection = (d?: string) => (direction.value = d || '');
 
 const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];
+  addDiffCount: [];
 }>();
 
 withDefaults(
   defineProps<{
     model: FormValue;
+    lastValues?: FormValue;
+    isCompare?: boolean;
     disabled?: boolean;
     size?: 'large' | 'default' | 'small';
   }>(),
@@ -104,4 +116,6 @@ const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
     });
   });
 };
+
+const onAddDiffCount = () => emit('addDiffCount');
 </script>

package/src/fields/StyleSetter/components/Box.vue

@@ -64,6 +64,8 @@ withDefaults(
     disabled?: boolean;
     size?: 'large' | 'default' | 'small';
     model: FormValue;
+    lastValues?: FormValue;
+    isCompare?: boolean;
   }>(),
   {},
 );

package/src/fields/StyleSetter/pro/Background.vue

@@ -1,5 +1,14 @@
 <template>
-  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
+  <MContainer
+    :config="config"
+    :model="values"
+    :last-values="lastValues"
+    :is-compare="isCompare"
+    :size="size"
+    :disabled="disabled"
+    @change="change"
+    @add-diff-count="onAddDiffCount"
+  ></MContainer>
 </template>
 
 <script lang="ts" setup>
@@ -13,12 +22,15 @@ import { BackgroundNoRepeat, BackgroundRepeat, BackgroundRepeatX, BackgroundRepe
 
 defineProps<{
   values: Partial<StyleSchema>;
+  lastValues?: Partial<StyleSchema>;
+  isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];
+  addDiffCount: [];
 }>();
 
 const config = defineFormItem({
@@ -79,4 +91,6 @@ const config = defineFormItem({
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);
 };
+
+const onAddDiffCount = () => emit('addDiffCount');
 </script>

package/src/fields/StyleSetter/pro/Border.vue

@@ -1,6 +1,23 @@
 <template>
-  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
-  <Border :model="values" :size="size" :disabled="disabled" @change="change"></Border>
+  <MContainer
+    :config="config"
+    :model="values"
+    :last-values="lastValues"
+    :is-compare="isCompare"
+    :size="size"
+    :disabled="disabled"
+    @change="change"
+    @add-diff-count="onAddDiffCount"
+  ></MContainer>
+  <Border
+    :model="values"
+    :last-values="lastValues"
+    :is-compare="isCompare"
+    :size="size"
+    :disabled="disabled"
+    @change="change"
+    @add-diff-count="onAddDiffCount"
+  ></Border>
 </template>
 
 <script lang="ts" setup>
@@ -11,12 +28,15 @@ import Border from '../components/Border.vue';
 
 defineProps<{
   values: Partial<StyleSchema>;
+  lastValues?: Partial<StyleSchema>;
+  isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];
+  addDiffCount: [];
 }>();
 
 const config = defineFormItem({
@@ -36,4 +56,6 @@ const config = defineFormItem({
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);
 };
+
+const onAddDiffCount = () => emit('addDiffCount');
 </script>

package/src/fields/StyleSetter/pro/Font.vue

@@ -1,5 +1,14 @@
 <template>
-  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
+  <MContainer
+    :config="config"
+    :model="values"
+    :last-values="lastValues"
+    :is-compare="isCompare"
+    :size="size"
+    :disabled="disabled"
+    @change="change"
+    @add-diff-count="onAddDiffCount"
+  ></MContainer>
 </template>
 
 <script lang="ts" setup>
@@ -12,12 +21,15 @@ import { AlignCenter, AlignLeft, AlignRight } from '../icons/text-align';
 
 defineProps<{
   values: Partial<StyleSchema>;
+  lastValues?: Partial<StyleSchema>;
+  isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits<{
   change: [v: StyleSchema, eventData: ContainerChangeEventData];
+  addDiffCount: [];
 }>();
 
 const config = defineFormItem({
@@ -91,4 +103,6 @@ const config = defineFormItem({
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);
 };
+
+const onAddDiffCount = () => emit('addDiffCount');
 </script>