@tmagic/editor 1.7.14-beta.3 → 1.8.0-beta.1

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>

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

@@ -1,8 +1,19 @@
 <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>
   <Box
     v-show="!['fixed', 'absolute'].includes(values.position)"
     :model="values"
+    :last-values="lastValues"
+    :is-compare="isCompare"
     :size="size"
     :disabled="disabled"
     @change="change"
@@ -34,12 +45,15 @@ import {
 
 defineProps<{
   values: Partial<StyleSchema>;
+  lastValues?: Partial<StyleSchema>;
+  isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits<{
   change: [v: string | StyleSchema, eventData: ContainerChangeEventData];
+  addDiffCount: [];
 }>();
 
 const config = defineFormItem({
@@ -185,4 +199,6 @@ const config = defineFormItem({
 const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);
 };
+
+const onAddDiffCount = () => emit('addDiffCount');
 </script>

package/src/fields/StyleSetter/pro/Position.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>
@@ -8,12 +17,15 @@ import type { StyleSchema } from '@tmagic/schema';
 
 const props = defineProps<{
   values: Partial<StyleSchema>;
+  lastValues?: Partial<StyleSchema>;
+  isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
 }>();
 
 const emit = defineEmits<{
   change: [v: string | StyleSchema, eventData: ContainerChangeEventData];
+  addDiffCount: [];
 }>();
 
 const positionText: Record<string, string> = {
@@ -100,4 +112,6 @@ const config = defineFormItem({
 const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);
 };
+
+const onAddDiffCount = () => emit('addDiffCount');
 </script>

package/src/fields/StyleSetter/pro/Transform.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>
@@ -8,12 +17,15 @@ import type { StyleSchema } from '@tmagic/schema';
 
 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({
@@ -51,4 +63,6 @@ const config = defineFormItem({
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);
 };
+
+const onAddDiffCount = () => emit('addDiffCount');
 </script>

package/src/layouts/props-panel/FormPanel.vue

@@ -5,7 +5,7 @@
     <TMagicScrollbar>
       <MForm
         ref="configForm"
-        :class="propsPanelSize"
+        :class="[propsPanelSize, 'm-editor-props-form-panel-form']"
         :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
         :label-width="labelWidth"
         :label-position="labelPosition"

package/src/layouts/sidebar/layer/use-node-status.ts

@@ -1,6 +1,6 @@
 import { computed, onBeforeUnmount, ref, watch } from 'vue';
 
-import type { Id, MNode, MPage, MPageFragment } from '@tmagic/core';
+import type { Id, MApp, MNode, MPage, MPageFragment } from '@tmagic/core';
 import { getNodePath, isPage, isPageFragment, traverseNode } from '@tmagic/utils';
 
 import type { LayerNodeStatus, Services } from '@editor/type';
@@ -45,22 +45,70 @@ export const useNodeStatus = ({ editorService }: Services) => {
     page.value ? nodeStatusMaps.value.get(page.value.id) : new Map<Id, LayerNodeStatus>(),
   );
 
-  // 切换页面或者新增页面，重新生成节点状态
+  // 切换页面 / 新增页面 / 整体替换 dsl 后 page 引用变化时，重新生成节点状态。
+  //
+  // 注意这里 watch 的是 page 引用而不是 page.id：
+  // 历史版本恢复 / 外部 modelValue 整体覆盖等场景，新旧 dsl 的 page.id 通常完全
+  // 一致，但 page 对象引用是新的、items 也是新的。仅监听 id 会漏掉这类「同 id
+  // 不同内容」的替换，导致 nodeStatusMaps 残留旧节点 status，组件树渲染滞留在
+  // 旧版本。监听引用可以覆盖普通切页（不同 id）和整体替换（同 id 新引用）两种
+  // 情况；同时配合下方 root-change 时清空缓存，避免拿到污染的 initial status。
   watch(
-    () => page.value?.id,
-    (pageId) => {
-      if (!pageId) {
+    page,
+    (newPage) => {
+      if (!newPage?.id) {
         return;
       }
 
       // 生成节点状态
-      nodeStatusMaps.value.set(pageId, createPageNodeStatus(page.value!, nodeStatusMaps.value.get(pageId)));
+      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: MApp | null) => {
+    if (!value) {
+      nodeStatusMaps.value = new Map();
+      return;
+    }
+
+    const validPageIds = new Set<Id>();
+    (value.items || []).forEach((p) => {
+      if (p?.id !== undefined) 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);
+
   // 选中状态变化，更新节点状态
   watch(
     nodes,
@@ -111,6 +159,7 @@ export const useNodeStatus = ({ editorService }: Services) => {
   editorService.on('remove', removeHandler);
 
   onBeforeUnmount(() => {
+    editorService.off('root-change', rootChangeHandler);
     editorService.off('remove', removeHandler);
     editorService.off('add', addHandler);
   });