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

package/src/layouts/history-list/PageTab.vue

@@ -0,0 +1,108 @@
+<template>
+  <div v-if="!list.length" class="m-editor-history-list-empty">暂无操作记录</div>
+  <TMagicScrollbar v-else max-height="360px">
+    <ul class="m-editor-history-list-ul">
+      <GroupRow
+        v-for="group in list"
+        :key="`pg-${group.steps[0]?.index}`"
+        :group-key="`pg-${group.steps[0]?.index}`"
+        :applied="group.applied"
+        :merged="group.steps.length > 1"
+        :op-type="group.opType"
+        :desc="describePageGroup(group)"
+        :time="formatHistoryTime(groupTimestamp(group))"
+        :time-title="formatHistoryFullTime(groupTimestamp(group))"
+        :step-count="group.steps.length"
+        :sub-steps="
+          group.steps.map((s) => ({
+            index: s.index,
+            applied: s.applied,
+            isCurrent: s.isCurrent,
+            desc: describePageStep(s.step),
+            diffable: isPageStepDiffable(s.step),
+            revertable: s.applied,
+            time: formatHistoryTime(s.step.timestamp),
+            timeTitle: formatHistoryFullTime(s.step.timestamp),
+          }))
+        "
+        :is-current="group.isCurrent"
+        :expanded="!!expanded[`pg-${group.steps[0]?.index}`]"
+        @toggle="(key: string) => $emit('toggle', key)"
+        @goto="(index: number) => $emit('goto', index)"
+        @diff-step="(index: number) => $emit('diff-step', index)"
+        @revert-step="(index: number) => $emit('revert-step', index)"
+      />
+      <!--
+        初始状态项：永远位于列表底部（页面 tab 倒序展示，最底部=最早），
+        作为"未修改"零点。当所有 group 都未 applied 时它即为当前位置。
+      -->
+      <InitialRow :is-current="isInitial" @goto-initial="$emit('goto-initial')" />
+    </ul>
+  </TMagicScrollbar>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { TMagicScrollbar } from '@tmagic/design';
+
+import type { PageHistoryGroup, StepValue } from '@editor/type';
+
+import {
+  describePageGroup,
+  describePageStep,
+  formatHistoryFullTime,
+  formatHistoryTime,
+  groupTimestamp,
+} from './composables';
+import GroupRow from './GroupRow.vue';
+import InitialRow from './InitialRow.vue';
+
+defineOptions({
+  name: 'MEditorHistoryListPageTab',
+});
+
+const props = defineProps<{
+  /** 当前活动页面的历史分组列表，已按时间倒序排好（最新一组在最前）。空数组时显示空态。 */
+  list: PageHistoryGroup[];
+  /**
+   * 共享的折叠状态表（key -> 是否展开），由顶层 panel 统一维护。
+   * 本 tab 使用 `pg-${组内首步 index}` 作为 key——以稳定的 step 索引而非展示位置标识分组，
+   * 这样历史数据更新（新增 / 撤销重做导致列表顺序变化）后，已展开的分组状态仍能正确保持。
+   */
+  expanded: Record<string, boolean>;
+}>();
+
+defineEmits<{
+  /** 透传 GroupRow 的 toggle 事件给上层 panel，由其更新 expanded。 */
+  (_e: 'toggle', _key: string): void;
+  /** 透传 GroupRow 的 goto 事件，携带目标 step 在栈中的索引。 */
+  (_e: 'goto', _index: number): void;
+  /** 用户点击初始项希望回到未修改的状态（cursor=0）。 */
+  (_e: 'goto-initial'): void;
+  /** 用户点击"查看差异"按钮，携带目标 step 在栈中的索引。 */
+  (_e: 'diff-step', _index: number): void;
+  /** 用户点击"回滚"按钮，携带目标 step 在栈中的索引，类 git revert。 */
+  (_e: 'revert-step', _index: number): void;
+}>();
+
+/**
+ * 当前 step 是否可查看差异：
+ * - 仅 update 操作；
+ * - 单节点更新（updatedItems.length === 1），且 oldNode / newNode 都存在。
+ * 多节点更新难以选定单一对比目标，统一不展示差异入口。
+ */
+const isPageStepDiffable = (step: StepValue): boolean => {
+  if (step.opType !== 'update') return false;
+  const items = step.updatedItems ?? [];
+  if (items.length !== 1) return false;
+  return Boolean(items[0]?.oldNode && items[0]?.newNode);
+};
+
+/**
+ * 是否处于"初始状态"——即对应页面历史栈 cursor===0：
+ * 当 list 中所有 group 的 applied 都为 false 时即为该状态。
+ * 没有任何 group 的情况由外层"暂无操作记录"分支兜底，本计算可以不考虑。
+ */
+const isInitial = computed(() => props.list.length > 0 && props.list.every((g) => !g.applied));
+</script>

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

@@ -0,0 +1,226 @@
+import { computed, reactive } from 'vue';
+
+import { datetimeFormatter } from '@tmagic/form';
+
+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-${组内首步 index}` / `ds-${id}-${组内首步 index}` / `cb-${id}-${组内首步 index}`。
+   * 用组内首步的稳定 index（而非展示位置）作为 key，确保历史数据更新后已展开的分组状态保持不变。
+   */
+  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,
+  };
+};
+
+/**
+ * 历史面板的时间展示：
+ * - 当天的记录只显示 `HH:mm:ss`；
+ * - 跨天的记录显示 `MM-DD HH:mm:ss`。
+ * 无时间戳（旧数据 / 未写入）时返回空串，UI 据此不渲染时间。
+ */
+export const formatHistoryTime = (timestamp?: number): string => {
+  if (!timestamp) return '';
+  const isToday =
+    datetimeFormatter(new Date(timestamp), '', 'YYYY-MM-DD') ===
+    (datetimeFormatter(new Date(), '', 'YYYY-MM-DD') as string);
+  return `${
+    isToday
+      ? datetimeFormatter(new Date(timestamp), '', 'HH:mm:ss')
+      : datetimeFormatter(new Date(timestamp), '', 'MM-DD HH:mm:ss')
+  }`;
+};
+
+/** 完整时间（含年份与秒），用于 title 悬浮提示。无时间戳时返回空串。 */
+export const formatHistoryFullTime = (timestamp?: number): string =>
+  timestamp ? `${datetimeFormatter(new Date(timestamp), '', 'YYYY-MM-DD HH:mm:ss')}` : '';
+
+/** 取一组历史步骤里最后一步（最近一次）的时间戳，用于组头部展示。 */
+export const groupTimestamp = (group: { steps: { step: { timestamp?: number } }[] }): number | undefined =>
+  group.steps[group.steps.length - 1]?.step.timestamp;
+
+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

@@ -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) => {

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;