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

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/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);
   });

package/src/utils/editor.ts

@@ -324,11 +324,14 @@ export const fixNodePosition = (config: MNode, parent: MContainer, stage: StageC
 };
 
 // 序列化配置
+// 仅去掉对象 key 的双引号；字符串值内的 "xxx": 不应被误处理
+// serialize-javascript 在 space: 2 时，每个 key 都会出现在换行 + 空白缩进之后，
+// 因此通过 (^|\n)\s* 锚定行首缩进，避免匹配到字符串值中的 \"xxx\":
 export const serializeConfig = (config: any) =>
   serialize(config, {
     space: 2,
     unsafe: true,
-  }).replace(/"(\w+)":\s/g, '$1: ');
+  }).replace(/(^|\n)(\s*)"(\w+)":\s/g, '$1$2$3: ');
 
 export const moveItemsInContainer = (sourceIndices: number[], parent: MContainer, targetIndex: number) => {
   sourceIndices.sort((a, b) => a - b);

package/types/index.d.ts

@@ -4169,8 +4169,10 @@ declare const _default$6: typeof __VLS_export$1;
 type __VLS_Props = FieldProps<StyleSchema>;
 declare const __VLS_export: import("@vue/runtime-core").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
   change: (v: any, eventData: ContainerChangeEventData) => any;
+  addDiffCount: () => any;
 }, string, import("@vue/runtime-core").PublicProps, Readonly<__VLS_Props> & Readonly<{
   onChange?: ((v: any, eventData: ContainerChangeEventData) => any) | undefined;
+  onAddDiffCount?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, false, {}, any>;
 declare const _default$28: typeof __VLS_export;
 //#endregion