@tmagic/editor 1.8.0-beta.5 → 1.8.0-beta.6

package/src/services/dataSource.ts

@@ -13,13 +13,14 @@ import storageService, { Protocol } from '@editor/services/storage';
 import type {
   DataSourceStepValue,
   DatasourceTypeOption,
+  DslOpWithHistoryIdsResult,
   HistoryOpOptions,
   HistoryOpOptionsWithChangeRecords,
   SyncHookPlugin,
 } from '@editor/type';
 import { getFormConfig, getFormValue } from '@editor/utils/data-source';
 import { COPY_DS_STORAGE_KEY } from '@editor/utils/editor';
-import { describeRevertStep } from '@editor/utils/history';
+import { describeRevertStep, getLastPushedHistoryIds } from '@editor/utils/history';
 
 import BaseService from './BaseService';
 
@@ -224,34 +225,37 @@ class DataSource extends BaseService {
   // #region AndGetHistoryId
   /**
    * 下列 *AndGetHistoryId 方法与对应的 add / update / remove 行为完全一致，
-   * 唯一区别是返回值为本次写入历史栈的历史记录 uuid（{@link DataSourceStepValue.uuid}），
-   * 而非数据源配置。可用于精确引用 / 定位该条历史记录（埋点、revert、跨端同步等）。
+   * 返回值在 {@link DslOpWithHistoryIdsResult} 中同时包含原操作结果与本次写入历史栈的 uuid 列表（{@link DataSourceStepValue.uuid}），
+   * 可用于精确引用 / 定位该条历史记录（埋点、revert、跨端同步等）。
    *
-   * 当本次操作未写入历史（doNotPushHistory 为 true、或无对应记录）时返回 null。
+   * 当本次操作未写入历史（doNotPushHistory 为 true、或无对应记录）时 historyIds 为 `[]`。
    */
 
-  /** 等价于 {@link add}，但返回本次写入历史记录的 uuid（未入栈时返回 null）。 */
-  public addAndGetHistoryId(config: DataSourceSchema, options: HistoryOpOptions = {}): string | null {
+  /** 等价于 {@link add}，并额外返回本次写入历史记录的 uuid 列表（未入栈时 historyIds 为 `[]`）。 */
+  public addAndGetHistoryId(
+    config: DataSourceSchema,
+    options: HistoryOpOptions = {},
+  ): DslOpWithHistoryIdsResult<DataSourceSchema> {
     this.lastPushedHistoryId = null;
-    this.add(config, options);
-    return this.lastPushedHistoryId;
+    const result = this.add(config, options);
+    return { result, historyIds: getLastPushedHistoryIds(this.lastPushedHistoryId) };
   }
 
-  /** 等价于 {@link update}，但返回本次写入历史记录的 uuid（未入栈时返回 null）。 */
+  /** 等价于 {@link update}，并额外返回本次写入历史记录的 uuid 列表（未入栈时 historyIds 为 `[]`）。 */
   public updateAndGetHistoryId(
     config: DataSourceSchema,
     options: HistoryOpOptionsWithChangeRecords = {},
-  ): string | null {
+  ): DslOpWithHistoryIdsResult<DataSourceSchema> {
     this.lastPushedHistoryId = null;
-    this.update(config, options);
-    return this.lastPushedHistoryId;
+    const result = this.update(config, options);
+    return { result, historyIds: getLastPushedHistoryIds(this.lastPushedHistoryId) };
   }
 
-  /** 等价于 {@link remove}，但返回本次写入历史记录的 uuid（未入栈时返回 null）。 */
-  public removeAndGetHistoryId(id: string, options: HistoryOpOptions = {}): string | null {
+  /** 等价于 {@link remove}，并额外返回本次写入历史记录的 uuid 列表（未入栈时 historyIds 为 `[]`）。 */
+  public removeAndGetHistoryId(id: string, options: HistoryOpOptions = {}): DslOpWithHistoryIdsResult<void> {
     this.lastPushedHistoryId = null;
     this.remove(id, options);
-    return this.lastPushedHistoryId;
+    return { result: undefined, historyIds: getLastPushedHistoryIds(this.lastPushedHistoryId) };
   }
   // #endregion AndGetHistoryId
 
@@ -337,17 +341,18 @@ class DataSource extends BaseService {
   }
 
   /**
-   * 通过历史记录 uuid 回滚某条数据源历史步骤，语义同 {@link revert}，
-   * 仅无需调用方再传 dataSourceId 与 index：内部会按 uuid（{@link DataSourceStepValue.uuid}）
-   * 在全部数据源栈中定位对应步骤后再回滚。
+   * 通过历史记录 uuid 回滚数据源历史步骤，语义同 {@link revert}，
+   * 仅无需调用方再传 dataSourceId 与 index：内部会按 uuid 在全部数据源栈中定位对应步骤后再回滚。
+   * 按数组顺序依次回滚，返回与入参同序的结果列表（某项失败时为 `null`）。
    *
-   * @param uuid 目标历史记录的 uuid，通常由 {@link addAndGetHistoryId} 等方法返回
-   * @returns 反向后产生的新 step；找不到对应 uuid / 未应用时返回 null
+   * @param uuids 目标历史记录的 uuid 列表，通常由 {@link addAndGetHistoryId} 等方法返回的 `historyIds`
    */
-  public revertById(uuid: string): DataSourceStepValue | null {
-    const location = historyService.findDataSourceStepLocationByUuid(uuid);
-    if (!location) return null;
-    return this.revert(location.id, location.index);
+  public revertById(uuids: string[]): (DataSourceStepValue | null)[] {
+    return uuids.map((uuid) => {
+      const location = historyService.findDataSourceStepLocationByUuid(uuid);
+      if (!location) return null;
+      return this.revert(location.id, location.index);
+    });
   }
 
   public createId(): string {

package/src/services/editor.ts

@@ -42,6 +42,7 @@ import type {
   AsyncHookPlugin,
   AsyncMethodName,
   DslOpOptions,
+  DslOpWithHistoryIdsResult,
   EditorEvents,
   EditorNodeInfo,
   HistoryOpSource,
@@ -73,6 +74,7 @@ import {
   setLayout,
   toggleFixedPosition,
 } from '@editor/utils/editor';
+import { getLastPushedHistoryIds } from '@editor/utils/history';
 import { beforePaste, getAddParent } from '@editor/utils/operator';
 
 type MoveItem = { node: MNode; parent: MContainer; pageForOp: { name: string; id: Id } | null };
@@ -177,7 +179,7 @@ class Editor extends BaseService {
         this.state.stageLoading = false;
       }
 
-      this.emit('root-change', value as StoreState['root'], preValue as StoreState['root']);
+      this.emit('root-change', value as StoreState['root'], preValue as StoreState['root'], options);
     }
   }
 
@@ -203,11 +205,11 @@ class Editor extends BaseService {
     }
 
     if (!root) {
-      return { node: null, parent: null, page: null };
+      return { node: null, parent: null, page: null, path: [] };
     }
 
     if (id === root.id) {
-      return { node: root, parent: null, page: null };
+      return { node: root, parent: null, page: null, path: [] };
     }
 
     // 大多数查找的目标都在当前页面内，优先在当前页面子树中查找以避免对整棵树做全量遍历。
@@ -693,7 +695,7 @@ class Editor extends BaseService {
 
     const node = toRaw(info.node);
 
-    let newConfig = await toggleFixedPosition(toRaw(config), node, root, this.getLayout);
+    let newConfig = await toggleFixedPosition(toRaw(config), node, info.path, this.getLayout);
 
     newConfig = mergeWith(cloneDeep(node), newConfig, editorNodeMergeCustomizer);
 
@@ -1236,34 +1238,34 @@ class Editor extends BaseService {
   // #region AndGetHistoryId
   /**
    * 下列 *AndGetHistoryId 方法与对应的普通操作（add / remove / update ...）行为完全一致，
-   * 唯一区别是返回值为本次写入历史栈的历史记录 uuid（{@link StepValue.uuid}），
-   * 而非节点 / 节点数组。可用于精确引用 / 定位该条历史记录（埋点、revert、跨端同步等）。
+   * 返回值在 {@link DslOpWithHistoryIdsResult} 中同时包含原操作结果与本次写入历史栈的 uuid 列表（{@link StepValue.uuid}），
+   * 可用于精确引用 / 定位该条历史记录（埋点、revert、跨端同步等）。
    *
-   * 当本次操作未写入历史（doNotPushHistory 为 true、或操作无实际变更 / 提前返回）时返回 null。
+   * 当本次操作未写入历史（doNotPushHistory 为 true、或操作无实际变更 / 提前返回）时 historyIds 为 `[]`。
    */
 
-  /** 等价于 {@link add}，但返回本次写入历史记录的 uuid（未入栈时返回 null）。 */
+  /** 等价于 {@link add}，并额外返回本次写入历史记录的 uuid 列表（未入栈时 historyIds 为 `[]`）。 */
   public async addAndGetHistoryId(
     addNode: AddMNode | MNode[],
     parent?: MContainer | null,
     options: DslOpOptions = {},
-  ): Promise<string | null> {
+  ): Promise<DslOpWithHistoryIdsResult<MNode | MNode[]>> {
     this.lastPushedHistoryId = null;
-    await this.add(addNode, parent, options);
-    return this.lastPushedHistoryId;
+    const result = await this.add(addNode, parent, options);
+    return { result, historyIds: getLastPushedHistoryIds(this.lastPushedHistoryId) };
   }
 
-  /** 等价于 {@link remove}，但返回本次写入历史记录的 uuid（未入栈时返回 null）。 */
+  /** 等价于 {@link remove}，并额外返回本次写入历史记录的 uuid 列表（未入栈时 historyIds 为 `[]`）。 */
   public async removeAndGetHistoryId(
     nodeOrNodeList: MNode | MNode[],
     options: DslOpOptions = {},
-  ): Promise<string | null> {
+  ): Promise<DslOpWithHistoryIdsResult<void>> {
     this.lastPushedHistoryId = null;
     await this.remove(nodeOrNodeList, options);
-    return this.lastPushedHistoryId;
+    return { result: undefined, historyIds: getLastPushedHistoryIds(this.lastPushedHistoryId) };
   }
 
-  /** 等价于 {@link update}，但返回本次写入历史记录的 uuid（未入栈时返回 null）。 */
+  /** 等价于 {@link update}，并额外返回本次写入历史记录的 uuid 列表（未入栈时 historyIds 为 `[]`）。 */
   public async updateAndGetHistoryId(
     config: MNode | MNode[],
     data: {
@@ -1273,43 +1275,43 @@ class Editor extends BaseService {
       historyDescription?: string;
       historySource?: HistoryOpSource;
     } = {},
-  ): Promise<string | null> {
+  ): Promise<DslOpWithHistoryIdsResult<MNode | MNode[]>> {
     this.lastPushedHistoryId = null;
-    await this.update(config, data);
-    return this.lastPushedHistoryId;
+    const result = await this.update(config, data);
+    return { result, historyIds: getLastPushedHistoryIds(this.lastPushedHistoryId) };
   }
 
-  /** 等价于 {@link moveLayer}，但返回本次写入历史记录的 uuid（未入栈时返回 null）。 */
+  /** 等价于 {@link moveLayer}，并额外返回本次写入历史记录的 uuid 列表（未入栈时 historyIds 为 `[]`）。 */
   public async moveLayerAndGetHistoryId(
     offset: number | LayerOffset,
     options: DslOpOptions = {},
-  ): Promise<string | null> {
+  ): Promise<DslOpWithHistoryIdsResult<void>> {
     this.lastPushedHistoryId = null;
     await this.moveLayer(offset, options);
-    return this.lastPushedHistoryId;
+    return { result: undefined, historyIds: getLastPushedHistoryIds(this.lastPushedHistoryId) };
   }
 
-  /** 等价于 {@link moveToContainer}，但返回本次写入历史记录的 uuid（未入栈时返回 null）。 */
+  /** 等价于 {@link moveToContainer}，并额外返回本次写入历史记录的 uuid 列表（未入栈时 historyIds 为 `[]`）。 */
   public async moveToContainerAndGetHistoryId(
     config: MNode | MNode[],
     targetId: Id,
     options: DslOpOptions = {},
-  ): Promise<string | null> {
+  ): Promise<DslOpWithHistoryIdsResult<MNode | MNode[]>> {
     this.lastPushedHistoryId = null;
-    await this.moveToContainer(config, targetId, options);
-    return this.lastPushedHistoryId;
+    const result = await this.moveToContainer(config, targetId, options);
+    return { result, historyIds: getLastPushedHistoryIds(this.lastPushedHistoryId) };
   }
 
-  /** 等价于 {@link dragTo}，但返回本次写入历史记录的 uuid（未入栈时返回 null）。 */
+  /** 等价于 {@link dragTo}，并额外返回本次写入历史记录的 uuid 列表（未入栈时 historyIds 为 `[]`）。 */
   public async dragToAndGetHistoryId(
     config: MNode | MNode[],
     targetParent: MContainer,
     targetIndex: number,
     options: DslOpOptions = {},
-  ): Promise<string | null> {
+  ): Promise<DslOpWithHistoryIdsResult<void>> {
     this.lastPushedHistoryId = null;
     await this.dragTo(config, targetParent, targetIndex, options);
-    return this.lastPushedHistoryId;
+    return { result: undefined, historyIds: getLastPushedHistoryIds(this.lastPushedHistoryId) };
   }
   // #endregion AndGetHistoryId
 
@@ -1451,17 +1453,19 @@ class Editor extends BaseService {
   }
 
   /**
-   * 通过历史记录 uuid 回滚当前页面的某条历史步骤，语义与 {@link revertPageStep} 完全一致，
-   * 仅入参从 index 改为 uuid（{@link StepValue.uuid}）。uuid 不随栈内步骤增删而变化，
-   * 更适合业务侧持有引用后再回滚（埋点、跨端同步等场景）。
+   * 通过历史记录 uuid 回滚当前页面的历史步骤，语义与 {@link revertPageStep} 完全一致，
+   * 仅入参从 index 改为 uuid 列表（{@link StepValue.uuid}）。按数组顺序依次回滚，
+   * 返回与入参同序的结果列表（某项失败时为 `null`）。
    *
-   * @param uuid 目标历史记录的 uuid，通常由 *AndGetHistoryId 方法返回
-   * @returns 反向后产生的新 step；找不到对应 uuid / 未应用 / 反向失败时返回 null
+   * @param uuids 目标历史记录的 uuid 列表，通常由 *AndGetHistoryId 方法返回的 `historyIds`
    */
-  public async revertPageStepById(uuid: string): Promise<StepValue | null> {
-    const index = historyService.getPageStepIndexByUuid(uuid);
-    if (index < 0) return null;
-    return this.revertPageStep(index);
+  public async revertPageStepById(uuids: string[]): Promise<(StepValue | null)[]> {
+    const results: (StepValue | null)[] = [];
+    for (const uuid of uuids) {
+      const index = historyService.getPageStepIndexByUuid(uuid);
+      results.push(index < 0 ? null : await this.revertPageStep(index));
+    }
+    return results;
   }
 
   /**

package/src/services/history.ts

@@ -17,7 +17,6 @@
  */
 
 import { reactive } from 'vue';
-import serialize from 'serialize-javascript';
 
 import type { CodeBlockContent, DataSourceSchema, Id, MPage, MPageFragment } from '@tmagic/core';
 import type { ChangeRecord } from '@tmagic/form';
@@ -57,7 +56,8 @@ import editorService from './editor';
 const DEFAULT_DB_NAME = 'tmagic-editor';
 const DEFAULT_STORE_NAME = 'history';
 const DEFAULT_KEY: IDBValidKey = 'default';
-const PERSIST_VERSION = 1;
+// v2：仅把每条 step 的 diff 序列化成字符串，其余字段交给 IndexedDB 结构化克隆原生存储（见 saveToIndexedDB）。
+const PERSIST_VERSION = 2;
 
 class History extends BaseService {
   public state = reactive<HistoryState>({
@@ -442,6 +442,8 @@ class History extends BaseService {
   public async saveToIndexedDB(options: HistoryPersistOptions = {}): Promise<PersistedHistoryState> {
     const { dbName = DEFAULT_DB_NAME, storeName = DEFAULT_STORE_NAME, key = DEFAULT_KEY, appId } = options;
 
+    // serializeStacks 会在序列化各栈时只把每条 step 的 diff（可能含函数）序列化成字符串，其余字段原样保留，
+    // 因此整份快照可直接按对象写入 IndexedDB（结构化克隆），避免序列化整份快照的开销；读取时再用 parseDSL 还原 diff。
     const snapshot: PersistedHistoryState = {
       version: PERSIST_VERSION,
       pageId: this.state.pageId,
@@ -451,9 +453,7 @@ class History extends BaseService {
       savedAt: Date.now(),
     };
 
-    // 历史记录里可能包含函数（如代码块内容 / 节点事件 / 数据源方法），IndexedDB 的结构化克隆无法写入函数，
-    // 因此用 serialize-javascript 序列化成字符串后再写入（支持函数 / Map 等），读取时用 parseDSL 还原。
-    await idbSet(this.resolveDbName(dbName, appId), storeName, key, serialize(snapshot));
+    await idbSet(this.resolveDbName(dbName, appId), storeName, key, snapshot);
     this.emit('save-to-indexed-db', snapshot);
     return snapshot;
   }
@@ -469,16 +469,14 @@ class History extends BaseService {
   public async restoreFromIndexedDB(options: HistoryPersistOptions = {}): Promise<PersistedHistoryState | null> {
     const { dbName = DEFAULT_DB_NAME, storeName = DEFAULT_STORE_NAME, key = DEFAULT_KEY, appId } = options;
 
-    const raw = await idbGet<string | PersistedHistoryState>(this.resolveDbName(dbName, appId), storeName, key);
-    if (!raw) return null;
-
-    // 新版以序列化字符串存储（含函数），用 parseDSL 还原；兼容历史上以对象形式存入的旧数据。
-    const snapshot = (typeof raw === 'string' ? getEditorConfig('parseDSL')(`(${raw})`) : raw) as PersistedHistoryState;
+    const snapshot = await idbGet<PersistedHistoryState>(this.resolveDbName(dbName, appId), storeName, key);
     if (!snapshot) return null;
 
-    this.state.pageSteps = deserializeStacks(snapshot.pageSteps);
-    this.state.codeBlockState = deserializeStacks(snapshot.codeBlockState);
-    this.state.dataSourceState = deserializeStacks(snapshot.dataSourceState);
+    // 各 step 的 diff 以序列化字符串存储（含函数），由 deserializeStacks 逐条用 parseDSL 还原。
+    const parseDSL = getEditorConfig('parseDSL');
+    this.state.pageSteps = deserializeStacks(snapshot.pageSteps, parseDSL);
+    this.state.codeBlockState = deserializeStacks(snapshot.codeBlockState, parseDSL);
+    this.state.dataSourceState = deserializeStacks(snapshot.dataSourceState, parseDSL);
     // initial 基线作为页面栈 index 0 的 step 随 pageSteps 一并还原，无需单独恢复。
     this.state.pageId = snapshot.pageId;
 
@@ -526,11 +524,8 @@ class History extends BaseService {
   }
 
   /**
-   * 取出全部代码块的历史栈，按 codeBlockId 分组。
-   * 同一栈内相邻、同 opType 且作用于同一 id 的多步会被合并为一个 group：
-   * - 这正是"代码块/数据源各自按 id 分栈"的天然表现，再叠加"连续修改同目标的相邻步骤合并展示"。
-   * - 合并后 group 暴露子步骤数组，UI 可展开查看每一步的 changeRecords。
-   * - applied 字段：组内最后一步是否处于已应用段。
+   * 取出全部代码块的历史栈，按 codeBlockId 分桶展示。
+   * 同一栈内每条操作记录独立成组，不做相邻 update 合并。
    */
   public getCodeBlockHistoryGroups(): CodeBlockHistoryGroup[] {
     const groups: CodeBlockHistoryGroup[] = [];
@@ -622,7 +617,7 @@ class History extends BaseService {
   }
 
   /**
-   * 取出全部数据源的历史栈，按 dataSourceId 分组。同上。
+   * 取出全部数据源的历史栈，按 dataSourceId 分桶展示。同上，每条操作独立成组。
    */
   public getDataSourceHistoryGroups(): DataSourceHistoryGroup[] {
     const groups: DataSourceHistoryGroup[] = [];

package/src/theme/style-setter/border.scss

@@ -24,9 +24,12 @@
       & + .border-icon {
         margin-left: 8px;
       }
+      &.configured {
+        border-color: var(--el-color-success, var(--td-success-color, #2ba471));
+      }
       &.active {
         border-width: 1px;
-        border-color: var(--el-color-primary);
+        border-color: var(--el-color-primary, var(--td-brand-color, #0052d9));
       }
       &.border-icon-top {
         border-top-width: 2px;

package/src/type.ts

@@ -335,6 +335,7 @@ export interface EditorNodeInfo {
   node: MNode | null;
   parent: MContainer | null;
   page: MPage | MPageFragment | null;
+  path: MNode[];
 }
 // #endregion EditorNodeInfo
 
@@ -736,6 +737,14 @@ export type HistoryOpSource =
   | (string & {});
 // #endregion HistoryOpSource
 
+// #region DslOpWithHistoryIdsResult
+/** *AndGetHistoryId 系列方法返回值：原操作结果 + 本次写入历史记录的 uuid 列表（未入栈时为 `[]`）。 */
+export type DslOpWithHistoryIdsResult<T> = {
+  result: T;
+  historyIds: string[];
+};
+// #endregion DslOpWithHistoryIdsResult
+
 // #region StepDiffItem
 /**
  * 单条变更的 diff 描述，统一表达「页面节点 / 代码块 / 数据源」的变化内容，
@@ -1147,6 +1156,8 @@ export type SyncHookPlugin<
 
 export interface EventBusEvent {
   'edit-data-source': [id: string];
+  'edit-data-source-method': [id: string, methodName: string];
+  'edit-data-source-field': [id: string, fieldPath: string[]];
   'remove-data-source': [id: string];
   'edit-code': [id: string];
 }
@@ -1180,7 +1191,11 @@ export type CustomContentMenuFunction = (
 ) => (MenuButton | MenuComponent)[];
 
 export interface EditorEvents {
-  'root-change': [value: StoreState['root'], preValue?: StoreState['root']];
+  'root-change': [
+    value: StoreState['root'],
+    preValue?: StoreState['root'],
+    options?: { historySource?: HistoryOpSource },
+  ];
   select: [node: MNode | null];
   add: [nodes: MNode[]];
   remove: [nodes: MNode[]];

package/src/utils/data-source/index.ts

@@ -10,6 +10,7 @@ const dataSourceFormConfig: TabConfig = {
   items: [
     {
       title: '数据定义',
+      status: 'fields',
       items: [
         {
           name: 'fields',
@@ -20,6 +21,7 @@ const dataSourceFormConfig: TabConfig = {
     },
     {
       title: '方法定义',
+      status: 'methods',
       items: [
         {
           name: 'methods',