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

package/src/services/dataSource.ts

@@ -4,12 +4,19 @@ import type { Writable } from 'type-fest';
 
 import type { DataSourceSchema, EventOption, Id, MNode, TargetOptions } from '@tmagic/core';
 import { Target, Watcher } from '@tmagic/core';
-import type { ChangeRecord, FormConfig } from '@tmagic/form';
-import { guid, toLine } from '@tmagic/utils';
+import type { FormConfig } from '@tmagic/form';
+import { getValueByKeyPath, guid, setValueByKeyPath, toLine } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
+import historyService from '@editor/services/history';
 import storageService, { Protocol } from '@editor/services/storage';
-import type { DatasourceTypeOption, SyncHookPlugin } from '@editor/type';
+import type {
+  DataSourceStepValue,
+  DatasourceTypeOption,
+  HistoryOpOptions,
+  HistoryOpOptionsWithChangeRecords,
+  SyncHookPlugin,
+} from '@editor/type';
 import { getFormConfig, getFormValue } from '@editor/utils/data-source';
 import { COPY_DS_STORAGE_KEY } from '@editor/utils/editor';
 
@@ -47,6 +54,19 @@ const canUsePluginMethods = {
 
 type SyncMethodName = Writable<(typeof canUsePluginMethods)['sync']>;
 
+/**
+ * 「回滚」生成的新 step 简短描述。
+ * 仅在 service 层使用，避免依赖 UI 层 composables。
+ */
+const describeRevertDataSourceStep = (step: DataSourceStepValue): string => {
+  const { oldSchema, newSchema, changeRecords, id } = step;
+  if (oldSchema === null && newSchema) return `撤回新增 ${newSchema.title || newSchema.id || id}`;
+  if (oldSchema && newSchema === null) return `还原已删除的 ${oldSchema.title || oldSchema.id || id}`;
+  const title = newSchema?.title || oldSchema?.title || `${id}`;
+  const propPath = changeRecords?.[0]?.propPath;
+  return propPath ? `还原 ${title} · ${propPath}` : `还原 ${title}`;
+};
+
 class DataSource extends BaseService {
   private state = reactive<State>({
     datasourceTypeList: [],
@@ -102,7 +122,14 @@ class DataSource extends BaseService {
     this.get('methods')[toLine(type)] = value;
   }
 
-  public add(config: DataSourceSchema) {
+  /**
+   * 新增数据源
+   * @param config 数据源配置
+   * @param options 可选配置
+   * @param options.doNotPushHistory 是否不写入历史记录（默认 false）
+   * @param options.historyDescription 入栈时附带的人类可读描述，用于历史面板展示
+   */
+  public add(config: DataSourceSchema, { doNotPushHistory = false, historyDescription }: HistoryOpOptions = {}) {
     const newConfig = {
       ...config,
       id: config.id && !this.getDataSourceById(config.id) ? config.id : this.createId(),
@@ -110,12 +137,27 @@ class DataSource extends BaseService {
 
     this.get('dataSources').push(newConfig);
 
+    if (!doNotPushHistory) {
+      historyService.pushDataSource(newConfig.id, { oldSchema: null, newSchema: newConfig, historyDescription });
+    }
+
     this.emit('add', newConfig);
 
     return newConfig;
   }
 
-  public update(config: DataSourceSchema, { changeRecords = [] }: { changeRecords?: ChangeRecord[] } = {}) {
+  /**
+   * 更新数据源
+   * @param config 数据源配置
+   * @param data 额外数据
+   * @param data.changeRecords form 端变更记录
+   * @param data.doNotPushHistory 是否不写入历史记录（默认 false）
+   * @param data.historyDescription 入栈时附带的人类可读描述，用于历史面板展示
+   */
+  public update(
+    config: DataSourceSchema,
+    { changeRecords = [], doNotPushHistory = false, historyDescription }: HistoryOpOptionsWithChangeRecords = {},
+  ) {
     const dataSources = this.get('dataSources');
 
     const index = dataSources.findIndex((ds) => ds.id === config.id);
@@ -125,6 +167,15 @@ class DataSource extends BaseService {
 
     dataSources[index] = newConfig;
 
+    if (!doNotPushHistory) {
+      historyService.pushDataSource(newConfig.id, {
+        oldSchema: oldConfig ? cloneDeep(oldConfig) : null,
+        newSchema: newConfig,
+        changeRecords,
+        historyDescription,
+      });
+    }
+
     this.emit('update', newConfig, {
       oldConfig,
       changeRecords,
@@ -133,14 +184,104 @@ class DataSource extends BaseService {
     return newConfig;
   }
 
-  public remove(id: string) {
+  /**
+   * 删除数据源
+   * @param id 数据源 id
+   * @param options 可选配置
+   * @param options.doNotPushHistory 是否不写入历史记录（默认 false）
+   * @param options.historyDescription 入栈时附带的人类可读描述，用于历史面板展示
+   */
+  public remove(id: string, { doNotPushHistory = false, historyDescription }: HistoryOpOptions = {}) {
     const dataSources = this.get('dataSources');
     const index = dataSources.findIndex((ds) => ds.id === id);
+    const oldConfig = index !== -1 ? dataSources[index] : null;
     dataSources.splice(index, 1);
 
+    if (oldConfig && !doNotPushHistory) {
+      historyService.pushDataSource(id, { oldSchema: cloneDeep(oldConfig), newSchema: null, historyDescription });
+    }
+
     this.emit('remove', id);
   }
 
+  /**
+   * 撤销指定数据源的最近一次变更。
+   *
+   * 内部走 add / update / remove，因此会自动触发 dataSourceService 的事件，
+   * 由 initService 中的对应 handler 重新收集 dep（DATA_SOURCE / DATA_SOURCE_COND / DATA_SOURCE_METHOD）。
+   * 所有写回都带 `doNotPushHistory: true`，避免在历史栈里产生新的记录。
+   *
+   * @param id 数据源 id
+   * @returns 撤销的 step；栈不存在或已无可撤销时返回 null
+   */
+  public undo(id: Id) {
+    const step = historyService.undoDataSource(id);
+    if (!step) return null;
+    this.applyHistoryStep(step, true);
+    return step;
+  }
+
+  /**
+   * 重做指定数据源的下一次变更。
+   * @param id 数据源 id
+   * @returns 重做的 step；栈不存在或已无可重做时返回 null
+   */
+  public redo(id: Id) {
+    const step = historyService.redoDataSource(id);
+    if (!step) return null;
+    this.applyHistoryStep(step, false);
+    return step;
+  }
+
+  /** 是否可对指定数据源撤销。 */
+  public canUndo(id: Id): boolean {
+    return historyService.canUndoDataSource(id);
+  }
+
+  /** 是否可对指定数据源重做。 */
+  public canRedo(id: Id): boolean {
+    return historyService.canRedoDataSource(id);
+  }
+
+  /**
+   * 跳转指定数据源的历史栈到目标游标。语义同 editor.gotoPageStep。
+   *
+   * @param id          数据源 id
+   * @param targetCursor 目标游标位置（已应用步骤数量）
+   * @returns 实际移动到的最终游标位置
+   */
+  public goto(id: Id, targetCursor: number): number {
+    let cursor = historyService.getDataSourceCursor(id);
+    const target = Math.max(0, targetCursor);
+    while (cursor > target) {
+      if (!this.undo(id)) break;
+      cursor -= 1;
+    }
+    while (cursor < target) {
+      if (!this.redo(id)) break;
+      cursor += 1;
+    }
+    return cursor;
+  }
+
+  /**
+   * 「回滚」指定数据源历史步骤（类 git revert 语义）：
+   * - 不动原始栈结构（不移动 cursor、不丢弃任何步骤）；
+   * - 把目标 step 的修改**反向应用**一次，并作为**新步骤**追加到栈顶；
+   * - 仅对已应用的步骤生效——未应用步骤本身就不存在于当前 schema 中，反向无意义。
+   *
+   * @param id    数据源 id
+   * @param index 目标 step 在该栈中的索引（0 为最早），通常由历史面板传入
+   * @returns 反向后产生的新 step；目标不存在 / 未应用时返回 null
+   */
+  public revert(id: Id, index: number): DataSourceStepValue | null {
+    const list = historyService.getDataSourceStepList(id);
+    const entry = list[index];
+    if (!entry?.applied) return null;
+    const description = `回滚 #${index + 1}: ${describeRevertDataSourceStep(entry.step)}`;
+    return this.applyRevertStep(entry.step, description);
+  }
+
   public createId(): string {
     return `ds_${guid()}`;
   }
@@ -215,6 +356,116 @@ class DataSource extends BaseService {
       }
     });
   }
+
+  /**
+   * 反向应用一个 step 并以新 step 入栈（不带 doNotPushHistory）。逻辑与 applyHistoryStep(reverse=true)
+   * 同构，差异仅在于走对应的公共 add / update / remove 而不是带 doNotPushHistory 的版本。
+   */
+  private applyRevertStep(step: DataSourceStepValue, historyDescription: string): DataSourceStepValue | null {
+    const { id, oldSchema, newSchema, changeRecords } = step;
+
+    // 原本是新增 → revert 即删除
+    if (oldSchema === null && newSchema) {
+      this.remove(`${id}`, { historyDescription });
+      return historyService.getDataSourceStepList(id).slice(-1)[0]?.step ?? null;
+    }
+
+    // 原本是删除 → revert 即重新加回
+    if (oldSchema && newSchema === null) {
+      this.add(cloneDeep(oldSchema), { historyDescription });
+      return historyService.getDataSourceStepList(id).slice(-1)[0]?.step ?? null;
+    }
+
+    if (!oldSchema || !newSchema) return null;
+
+    // 原本是更新 → 把 oldSchema 写回；优先按 changeRecords 局部 patch
+    if (changeRecords?.length) {
+      const current = this.getDataSourceById(`${id}`);
+      if (!current) return null;
+      const patched = cloneDeep(current) as DataSourceSchema;
+      let fallbackToFullReplace = false;
+      for (const record of changeRecords) {
+        if (!record.propPath) {
+          fallbackToFullReplace = true;
+          break;
+        }
+        const value = cloneDeep(getValueByKeyPath(record.propPath, oldSchema));
+        setValueByKeyPath(record.propPath, value, patched);
+      }
+      this.update(fallbackToFullReplace ? cloneDeep(oldSchema) : patched, {
+        changeRecords,
+        historyDescription,
+      });
+      return historyService.getDataSourceStepList(id).slice(-1)[0]?.step ?? null;
+    }
+
+    this.update(cloneDeep(oldSchema), { historyDescription });
+    return historyService.getDataSourceStepList(id).slice(-1)[0]?.step ?? null;
+  }
+
+  /**
+   * 把一条历史 step 应用到当前数据源服务上。
+   *
+   * 复用现有的 add / update / remove，目的是借助它们发出的事件触发 initService 中
+   * 的依赖收集逻辑（DATA_SOURCE / DATA_SOURCE_COND / DATA_SOURCE_METHOD）。
+   * 所有写回都带 `doNotPushHistory: true`，确保不会在历史栈里产生新的记录。
+   *
+   * - oldSchema=null, newSchema≠null：原始为新增 → undo 删除；redo 再次 add
+   * - oldSchema≠null, newSchema=null：原始为删除 → undo 还原 add；redo 再次删除
+   * - 两侧都有：原始为更新 → 按 changeRecords 局部 patch；缺省退化为整 schema 替换
+   *
+   * @param step 历史 step
+   * @param reverse true=撤销，false=重做
+   */
+  private applyHistoryStep(step: DataSourceStepValue, reverse: boolean): void {
+    const { id, oldSchema, newSchema, changeRecords } = step;
+
+    // 新增 / 删除：直接 add 或 remove，不走 patch 逻辑
+    if (oldSchema === null && newSchema) {
+      if (reverse) {
+        this.remove(`${id}`, { doNotPushHistory: true });
+      } else {
+        this.add(cloneDeep(newSchema), { doNotPushHistory: true });
+      }
+      return;
+    }
+
+    if (oldSchema && newSchema === null) {
+      if (reverse) {
+        this.add(cloneDeep(oldSchema), { doNotPushHistory: true });
+      } else {
+        this.remove(`${id}`, { doNotPushHistory: true });
+      }
+      return;
+    }
+
+    if (!oldSchema || !newSchema) return;
+
+    // 更新场景：优先按 changeRecords 局部 patch；缺省退化为整 schema 替换
+    const sourceForValues = reverse ? oldSchema : newSchema;
+
+    if (changeRecords?.length) {
+      const current = this.getDataSourceById(`${id}`);
+      if (!current) return;
+      const patched = cloneDeep(current) as DataSourceSchema;
+      let fallbackToFullReplace = false;
+      for (const record of changeRecords) {
+        if (!record.propPath) {
+          fallbackToFullReplace = true;
+          break;
+        }
+        const value = cloneDeep(getValueByKeyPath(record.propPath, sourceForValues));
+        setValueByKeyPath(record.propPath, value, patched);
+      }
+      this.update(fallbackToFullReplace ? cloneDeep(sourceForValues) : patched, {
+        changeRecords,
+        doNotPushHistory: true,
+      });
+      return;
+    }
+
+    this.update(cloneDeep(sourceForValues), { doNotPushHistory: true });
+  }
 }
 
 export type DataSourceService = DataSource;

package/src/services/dep.ts

@@ -109,9 +109,23 @@ class Dep extends BaseService {
 
   public collect(nodes: MNode[], depExtendedData: DepExtendedData = {}, deep = false, type?: DepTargetType) {
     this.set('collecting', true);
-    this.watcher.collectByCallback(nodes, type, ({ node, target }) => {
-      this.collectNode(node, target, depExtendedData, deep);
-    });
+
+    const targets = this.watcher.getCollectableTargets(type);
+
+    if (targets.length) {
+      for (const node of nodes) {
+        // 先删除原有依赖，再批量收集
+        if (isPage(node)) {
+          for (const target of targets) {
+            this.removePageDep(target, depExtendedData);
+          }
+        } else {
+          this.watcher.removeTargetsDep(targets, node);
+        }
+        this.watcher.collectItems(node, targets, depExtendedData, deep);
+      }
+    }
+
     this.set('collecting', false);
 
     this.emit('collected', nodes, deep);
@@ -176,7 +190,7 @@ class Dep extends BaseService {
             dsl.dataSourceDeps[target.id] = target.deps;
           } else if (target.type === DepTargetType.DATA_SOURCE_COND && dsl.dataSourceCondDeps) {
             dsl.dataSourceCondDeps[target.id] = target.deps;
-          } else if (target.type === DepTargetType.DATA_SOURCE_METHOD) {
+          } else if (target.type === DepTargetType.DATA_SOURCE_METHOD && dsl.dataSourceMethodDeps) {
             dsl.dataSourceMethodDeps[target.id] = target.deps;
           }
         }
@@ -194,11 +208,7 @@ class Dep extends BaseService {
   public collectNode(node: MNode, target: Target, depExtendedData: DepExtendedData = {}, deep = false) {
     // 先删除原有依赖，重新收集
     if (isPage(node)) {
-      for (const [depKey, dep] of Object.entries(target.deps)) {
-        if (dep.data?.pageId && dep.data.pageId === depExtendedData.pageId) {
-          delete target.deps[depKey];
-        }
-      }
+      this.removePageDep(target, depExtendedData);
     } else {
       this.watcher.removeTargetDep(target, node);
     }
@@ -263,6 +273,19 @@ class Dep extends BaseService {
     return super.emit(eventName, ...args);
   }
 
+  /**
+   * 删除指定 page 在该 target 下的旧依赖：
+   * 按 pageId 匹配，可清掉页面内已被删除节点的残留依赖
+   */
+  private removePageDep(target: Target, depExtendedData: DepExtendedData = {}) {
+    for (const depKey of Object.keys(target.deps)) {
+      const dep = target.deps[depKey];
+      if (dep.data?.pageId && dep.data.pageId === depExtendedData.pageId) {
+        delete target.deps[depKey];
+      }
+    }
+  }
+
   private enqueueTask(node: MNode, target: Target, depExtendedData: DepExtendedData, deep: boolean) {
     this.idleTask.enqueueTask(
       ({ node, deep, target }) => {