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

package/src/layouts/history-list/composables.ts

@@ -0,0 +1,195 @@
+import { computed, reactive } from 'vue';
+
+import { useServices } from '@editor/hooks/use-services';
+import type {
+  CodeBlockHistoryGroup,
+  CodeBlockStepValue,
+  DataSourceHistoryGroup,
+  DataSourceStepValue,
+  HistoryOpType,
+  PageHistoryGroup,
+  StepValue,
+} from '@editor/type';
+
+/**
+ * 历史记录面板共享逻辑：
+ * - 暴露三类历史的聚合数据（页面 / 数据源 / 代码块）；
+ * - 提供折叠状态管理；
+ * - 提供操作描述文案生成器。
+ *
+ * 所有数据基于 historyService 的 reactive state 派生，自动跟随历史变化刷新。
+ */
+export const useHistoryList = () => {
+  const { historyService } = useServices();
+
+  /** 折叠状态：key 形如 `pg-${groupIdx}` / `ds-${id}-${groupIdx}` / `cb-${id}-${groupIdx}`。 */
+  const expanded = reactive<Record<string, boolean>>({});
+  const toggleGroup = (key: string) => {
+    expanded[key] = !expanded[key];
+  };
+
+  const pageGroups = computed(() => historyService.getPageHistoryGroups());
+  const dataSourceGroups = computed(() => historyService.getDataSourceHistoryGroups());
+  const codeBlockGroups = computed(() => historyService.getCodeBlockHistoryGroups());
+
+  /** 页面 tab 倒序展示（最新一组在最上面）。 */
+  const pageGroupsDisplay = computed(() => pageGroups.value.slice().reverse());
+
+  /**
+   * 把按时间正序的 group 列表，再按 id 聚拢成 bucket（同 id 的所有分组放一起）。
+   * 每个 bucket 内部仍然按时间倒序展示（最近的操作最先看到）。
+   */
+  const groupByTarget = <G extends { id: string | number }>(groups: G[]) => {
+    const map = new Map<string | number, G[]>();
+    groups.forEach((g) => {
+      const list = map.get(g.id) ?? [];
+      list.push(g);
+      map.set(g.id, list);
+    });
+    return Array.from(map.entries()).map(([id, gs]) => ({ id, groups: gs.slice().reverse() }));
+  };
+
+  const dataSourceGroupsByTarget = computed(() => groupByTarget(dataSourceGroups.value));
+  const codeBlockGroupsByTarget = computed(() => groupByTarget(codeBlockGroups.value));
+
+  return {
+    expanded,
+    toggleGroup,
+    pageGroups,
+    dataSourceGroups,
+    codeBlockGroups,
+    pageGroupsDisplay,
+    dataSourceGroupsByTarget,
+    codeBlockGroupsByTarget,
+  };
+};
+
+export const opLabel = (op: HistoryOpType) => {
+  switch (op) {
+    case 'add':
+      return '新增';
+    case 'remove':
+      return '删除';
+    case 'update':
+    default:
+      return '修改';
+  }
+};
+
+const nameOf = (node: { name?: string; id?: string | number; type?: string }) =>
+  node?.name || node?.type || `${node?.id ?? ''}`;
+
+/**
+ * 默认描述里展示「名称 (id: xxx)」，便于区分同名实体。
+ * - 当未传入 id，或 label 本身就是 id 字符串（即没有 name/type/title 可用）时，仅展示 label，避免出现「123 (id: 123)」。
+ */
+const labelWithId = (label: string | number | undefined, id: string | number | undefined): string => {
+  const labelStr = label === undefined || label === null ? '' : `${label}`;
+  if (id === undefined || id === null || id === '') return labelStr;
+  if (labelStr === '' || labelStr === `${id}`) return `${id}`;
+  return `${labelStr} (id: ${id})`;
+};
+
+/** 从一组可选 historyDescription 中取最后一条非空值；都为空时返回 undefined。 */
+const pickLastDescription = (descs: (string | undefined)[]): string | undefined => {
+  for (let i = descs.length - 1; i >= 0; i--) {
+    if (descs[i]) return descs[i];
+  }
+  return undefined;
+};
+
+export const describePageStep = (step: StepValue) => {
+  if (step.historyDescription) return step.historyDescription;
+  const { opType } = step;
+  if (opType === 'add') {
+    const count = step.nodes?.length ?? 0;
+    const node = step.nodes?.[0];
+    return `新增 ${count} 个节点${count === 1 && node ? `（${labelWithId(nameOf(node), node.id)}）` : ''}`;
+  }
+  if (opType === 'remove') {
+    const count = step.removedItems?.length ?? 0;
+    const node = step.removedItems?.[0]?.node;
+    return `删除 ${count} 个节点${count === 1 && node ? `（${labelWithId(nameOf(node), node.id)}）` : ''}`;
+  }
+  const updated = step.updatedItems ?? [];
+  if (!updated.length) return '修改节点';
+  if (updated.length === 1) {
+    const { newNode, changeRecords } = updated[0];
+    const propPath = changeRecords?.[0]?.propPath;
+    const target = labelWithId(nameOf(newNode), newNode?.id);
+    return `修改 ${target}${propPath ? ` · ${propPath}` : ''}`;
+  }
+  return `修改 ${updated.length} 个节点`;
+};
+
+/**
+ * 合并组的展示文案：
+ * - 若组内任一步显式提供了 historyDescription：取最后一条非空 historyDescription（最近一次的描述更准确）；
+ * - 单步组：复用 describePageStep；
+ * - 多步组（连续修改同一节点）：展示节点名 + 涉及的前几个 propPath。
+ */
+export const describePageGroup = (group: PageHistoryGroup) => {
+  const lastDesc = pickLastDescription(group.steps.map((s) => s.step.historyDescription));
+  if (lastDesc) return lastDesc;
+  if (group.steps.length === 1) return describePageStep(group.steps[0].step);
+  const paths = new Set<string>();
+  group.steps.forEach((s) => {
+    s.step.updatedItems?.[0]?.changeRecords?.forEach((r) => r.propPath && paths.add(r.propPath));
+  });
+  const pathList = Array.from(paths).slice(0, 3).join(', ');
+  const target = labelWithId(
+    group.targetName ?? (group.targetId !== undefined ? `${group.targetId}` : '节点'),
+    group.targetId,
+  );
+  return pathList ? `修改 ${target} · ${pathList}${paths.size > 3 ? '…' : ''}` : `修改 ${target}`;
+};
+
+export const describeDataSourceStep = (step: DataSourceStepValue) => {
+  if (step.historyDescription) return step.historyDescription;
+  if (step.oldSchema === null && step.newSchema)
+    return `创建 ${labelWithId(step.newSchema.title, step.newSchema.id ?? step.id)}`;
+  if (step.newSchema === null && step.oldSchema)
+    return `删除 ${labelWithId(step.oldSchema.title, step.oldSchema.id ?? step.id)}`;
+  const propPath = step.changeRecords?.[0]?.propPath;
+  const title = labelWithId(step.newSchema?.title || step.oldSchema?.title, step.id);
+  return propPath ? `修改 ${title} · ${propPath}` : `修改 ${title}`;
+};
+
+export const describeDataSourceGroup = (group: DataSourceHistoryGroup) => {
+  const lastDesc = pickLastDescription(group.steps.map((s) => s.step.historyDescription));
+  if (lastDesc) return lastDesc;
+  if (group.steps.length === 1) return describeDataSourceStep(group.steps[0].step);
+  const paths = new Set<string>();
+  group.steps.forEach((s) => {
+    s.step.changeRecords?.forEach((r) => r.propPath && paths.add(r.propPath));
+  });
+  const pathList = Array.from(paths).slice(0, 3).join(', ');
+  const rawTitle = group.steps[group.steps.length - 1].step.newSchema?.title || group.steps[0].step.oldSchema?.title;
+  const target = labelWithId(rawTitle, group.id);
+  return pathList ? `修改 ${target} · ${pathList}${paths.size > 3 ? '…' : ''}` : `修改 ${target}`;
+};
+
+export const describeCodeBlockStep = (step: CodeBlockStepValue) => {
+  if (step.historyDescription) return step.historyDescription;
+  if (step.oldContent === null && step.newContent)
+    return `创建 ${labelWithId(step.newContent.name, step.newContent.id ?? step.id)}`;
+  if (step.newContent === null && step.oldContent)
+    return `删除 ${labelWithId(step.oldContent.name, step.oldContent.id ?? step.id)}`;
+  const propPath = step.changeRecords?.[0]?.propPath;
+  const title = labelWithId(step.newContent?.name || step.oldContent?.name, step.id);
+  return propPath ? `修改 ${title} · ${propPath}` : `修改 ${title}`;
+};
+
+export const describeCodeBlockGroup = (group: CodeBlockHistoryGroup) => {
+  const lastDesc = pickLastDescription(group.steps.map((s) => s.step.historyDescription));
+  if (lastDesc) return lastDesc;
+  if (group.steps.length === 1) return describeCodeBlockStep(group.steps[0].step);
+  const paths = new Set<string>();
+  group.steps.forEach((s) => {
+    s.step.changeRecords?.forEach((r) => r.propPath && paths.add(r.propPath));
+  });
+  const pathList = Array.from(paths).slice(0, 3).join(', ');
+  const rawName = group.steps[group.steps.length - 1].step.newContent?.name || group.steps[0].step.oldContent?.name;
+  const target = labelWithId(rawName, group.id);
+  return pathList ? `修改 ${target} · ${pathList}${paths.size > 3 ? '…' : ''}` : `修改 ${target}`;
+};

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';
@@ -9,12 +9,15 @@ import { updateStatus } from '@editor/utils/tree';
 const createPageNodeStatus = (page: MPage | MPageFragment, initialLayerNodeStatus?: Map<Id, LayerNodeStatus>) => {
   const map = new Map<Id, LayerNodeStatus>();
 
-  map.set(page.id, {
-    visible: true,
-    expand: true,
-    selected: true,
-    draggable: false,
-  });
+  map.set(
+    page.id,
+    initialLayerNodeStatus?.get(page.id) || {
+      visible: true,
+      expand: true,
+      selected: true,
+      draggable: false,
+    },
+  );
 
   page.items.forEach((node: MNode) =>
     traverseNode<MNode>(node, (node) => {
@@ -45,22 +48,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 +162,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/services/BaseService.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-misused-promises */
 /*
  * Tencent is pleased to support the open source community by making TMagicEditor available.
  *
@@ -19,45 +18,32 @@
 
 import { EventEmitter } from 'events';
 
-import { compose } from '@editor/utils/compose';
-
 const methodName = (prefix: string, name: string) => `${prefix}${name[0].toUpperCase()}${name.substring(1)}`;
 
 const isError = (error: any): boolean => Object.prototype.toString.call(error) === '[object Error]';
 
-const doAction = (
-  args: any[],
-  scope: any,
-  sourceMethod: any,
-  beforeMethodName: string,
-  afterMethodName: string,
-  fn: (args: any[], next?: Function | undefined) => void,
-) => {
-  try {
-    let beforeArgs = args;
+const doAction = (args: any[], scope: any, sourceMethod: any, beforeMethodName: string, afterMethodName: string) => {
+  let beforeArgs = args;
 
-    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
-      beforeArgs = beforeMethod(...beforeArgs) || [];
+  for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+    beforeArgs = beforeMethod(...beforeArgs) || [];
 
-      if (isError(beforeArgs)) throw beforeArgs;
+    if (isError(beforeArgs)) throw beforeArgs;
 
-      if (!Array.isArray(beforeArgs)) {
-        beforeArgs = [beforeArgs];
-      }
+    if (!Array.isArray(beforeArgs)) {
+      beforeArgs = [beforeArgs];
     }
+  }
 
-    let returnValue: any = fn(beforeArgs, sourceMethod.bind(scope));
-
-    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
-      returnValue = afterMethod(returnValue, ...beforeArgs);
+  let returnValue: any = sourceMethod.apply(scope, beforeArgs);
 
-      if (isError(returnValue)) throw returnValue;
-    }
+  for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+    returnValue = afterMethod(returnValue, ...beforeArgs);
 
-    return returnValue;
-  } catch (error) {
-    throw error;
+    if (isError(returnValue)) throw returnValue;
   }
+
+  return returnValue;
 };
 
 const doAsyncAction = async (
@@ -66,40 +52,34 @@ const doAsyncAction = async (
   sourceMethod: any,
   beforeMethodName: string,
   afterMethodName: string,
-  fn: (args: any[], next?: Function | undefined) => Promise<void> | void,
 ) => {
-  try {
-    let beforeArgs = args;
+  let beforeArgs = args;
 
-    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
-      beforeArgs = (await beforeMethod(...beforeArgs)) || [];
+  for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+    beforeArgs = (await beforeMethod(...beforeArgs)) || [];
 
-      if (isError(beforeArgs)) throw beforeArgs;
+    if (isError(beforeArgs)) throw beforeArgs;
 
-      if (!Array.isArray(beforeArgs)) {
-        beforeArgs = [beforeArgs];
-      }
+    if (!Array.isArray(beforeArgs)) {
+      beforeArgs = [beforeArgs];
     }
+  }
 
-    let returnValue: any = await fn(beforeArgs, sourceMethod.bind(scope));
-
-    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
-      returnValue = await afterMethod(returnValue, ...beforeArgs);
+  let returnValue: any = await sourceMethod.apply(scope, beforeArgs);
 
-      if (isError(returnValue)) throw returnValue;
-    }
+  for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+    returnValue = await afterMethod(returnValue, ...beforeArgs);
 
-    return returnValue;
-  } catch (error) {
-    throw error;
+    if (isError(returnValue)) throw returnValue;
   }
+
+  return returnValue;
 };
 
 /**
- * 提供两种方式对Class进行扩展
- * 方法1：
+ * 对Class进行扩展
  * 给Class中的每个方法都添加before after两个钩子
- * 给Class添加一个usePlugin方法，use方法可以传入一个包含before或者after方法的对象
+ * 给Class添加一个usePlugin方法，usePlugin方法可以传入一个包含before或者after方法的对象
  *
  * 例如：
  *   Class EditorService extends BaseService {
@@ -124,27 +104,9 @@ const doAsyncAction = async (
  *
  * 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after第一个参数则是原方法的return值;
  * 如需终止后续方法调用可以return new Error();
- *
- * 方法2：
- * 给Class中的每个方法都添加中间件
- * 给Class添加一个use方法，use方法可以传入一个包含源对象方法名作为key值的对象
- *
- * 例如：
- *   Class EditorService extends BaseService {
- *     constructor() {
- *       super([ { name: 'add', isAsync: true },]);
- *     }
- *     add(value) { return result; }
- *   };
- *
- *  const editorService = new EditorService();
- *  editorService.use({
- *    add(value, next) { console.log(value); next() },
- *  });
  */
-export default class extends EventEmitter {
+class BaseService extends EventEmitter {
   private pluginOptionsList: Record<string, Function[]> = {};
-  private middleware: Record<string, Function[]> = {};
   private taskList: (() => Promise<void>)[] = [];
   private doingTask = false;
 
@@ -161,14 +123,12 @@ export default class extends EventEmitter {
 
       this.pluginOptionsList[beforeMethodName] = [];
       this.pluginOptionsList[afterMethodName] = [];
-      this.middleware[propertyName] = [];
 
-      const fn = compose(this.middleware[propertyName], isAsync);
       Object.defineProperty(scope, propertyName, {
         value: isAsync
           ? async (...args: any[]) => {
               if (!serialMethods.includes(propertyName)) {
-                return doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+                return doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName);
               }
 
               // 由于async await，所以会出现函数执行到await时让出线程，导致执行顺序出错，例如调用了select(1) -> update -> select(2)，这个时候就有可能出现update了2；
@@ -176,7 +136,7 @@ export default class extends EventEmitter {
               const promise = new Promise<any>((resolve, reject) => {
                 this.taskList.push(async () => {
                   try {
-                    const value = await doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+                    const value = await doAsyncAction(args, scope, sourceMethod, beforeMethodName, afterMethodName);
                     resolve(value);
                   } catch (e) {
                     reject(e);
@@ -190,20 +150,11 @@ export default class extends EventEmitter {
 
               return promise;
             }
-          : (...args: any[]) => doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn),
+          : (...args: any[]) => doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName),
       });
     });
   }
 
-  /**
-   * @deprecated 请使用usePlugin代替
-   */
-  public use(options: Record<string, Function>) {
-    for (const [methodName, method] of Object.entries(options)) {
-      if (typeof method === 'function') this.middleware[methodName].push(method);
-    }
-  }
-
   public usePlugin(options: Record<string, Function>) {
     for (const [methodName, method] of Object.entries(options)) {
       if (typeof method === 'function' && !this.pluginOptionsList[methodName].includes(method)) {
@@ -224,10 +175,6 @@ export default class extends EventEmitter {
     for (const key of Object.keys(this.pluginOptionsList)) {
       this.pluginOptionsList[key] = [];
     }
-
-    for (const key of Object.keys(this.middleware)) {
-      this.middleware[key] = [];
-    }
   }
 
   private async doTask() {
@@ -240,3 +187,5 @@ export default class extends EventEmitter {
     this.doingTask = false;
   }
 }
+
+export default BaseService;