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

package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -22,7 +22,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject, nextTick, Ref, ref, watch, watchEffect } from 'vue';
+import { computed, inject, nextTick, provide, Ref, ref, watch, watchEffect } from 'vue';
 
 import type { DataSourceSchema } from '@tmagic/core';
 import { tMagicMessage } from '@tmagic/design';
@@ -41,6 +41,10 @@ const props = defineProps<{
   title?: string;
   values: any;
   disabled: boolean;
+  /** 打开后需要直接定位并打开的方法名，传入时默认激活「方法定义」tab */
+  editMethodName?: string;
+  /** 打开后需要直接定位并打开的字段路径，传入时默认激活「数据定义」tab */
+  editFieldPath?: string[];
 }>();
 
 const boxVisible = defineModel<boolean>('visible', { default: false });
@@ -62,9 +66,34 @@ const { height: editorHeight } = useEditorContentHeight();
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
 const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
 
+/** 供「方法定义」tab 内的字段消费，用于打开数据源详情后自动打开指定方法 */
+provide(
+  'editingDataSourceMethodName',
+  computed(() => props.editMethodName),
+);
+
+/** 供「数据定义」tab 内的字段消费，用于打开数据源详情后自动打开指定字段 */
+provide(
+  'editingDataSourceFieldPath',
+  computed(() => props.editFieldPath || []),
+);
+
 watchEffect(() => {
   initValues.value = props.values;
-  dataSourceConfig.value = dataSourceService.getFormConfig(initValues.value.type);
+  const config = dataSourceService.getFormConfig(initValues.value.type);
+
+  // 传入方法名/字段路径时，将外层 tab 容器默认激活到对应 tab（status: methods / fields）
+  // 未传入时默认激活「数据定义」tab（fields）
+  let activeTab = 'fields';
+  if (props.editMethodName) {
+    activeTab = 'methods';
+  } else if (props.editFieldPath?.length) {
+    activeTab = 'fields';
+  }
+
+  dataSourceConfig.value = config.map((item) =>
+    (item as { type?: string }).type === 'tab' ? { ...item, active: activeTab } : item,
+  );
 });
 
 const submitHandler = (values: any, data: ContainerChangeEventData) => {

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -29,6 +29,8 @@
     :disabled="!editable"
     :values="dataSourceValues"
     :title="dialogTitle"
+    :edit-method-name="editMethodName"
+    :edit-field-path="editFieldPath"
     @submit="submitDataSourceHandler"
     @close="editDialogCloseHandler"
   ></DataSourceConfigPanel>
@@ -45,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, useTemplateRef, watch } from 'vue';
+import { computed, inject, ref, useTemplateRef, watch } from 'vue';
 import { mergeWith } from 'lodash-es';
 
 import { tMagicMessageBox, TMagicScrollbar } from '@tmagic/design';
@@ -79,7 +81,16 @@ const { dataSourceService } = useServices();
 const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } =
   useDataSourceEdit(dataSourceService);
 
+/** 打开数据源详情时需要直接定位并打开的方法名，为空则正常展示「数据定义」tab */
+const editMethodName = ref('');
+
+/** 打开数据源详情时需要直接定位并打开的字段路径，为空则不自动打开字段配置 */
+const editFieldPath = ref<string[]>([]);
+
 const editDialogCloseHandler = () => {
+  editMethodName.value = '';
+  editFieldPath.value = [];
+
   if (dataSourceListRef.value) {
     for (const [, status] of dataSourceListRef.value.nodeStatusMap.entries()) {
       status.selected = false;
@@ -139,6 +150,20 @@ const filterTextChangeHandler = (val: string) => {
 };
 
 eventBus?.on('edit-data-source', (id: string) => {
+  editMethodName.value = '';
+  editFieldPath.value = [];
+  editHandler(id);
+});
+
+eventBus?.on('edit-data-source-method', (id: string, methodName: string) => {
+  editMethodName.value = methodName;
+  editFieldPath.value = [];
+  editHandler(id);
+});
+
+eventBus?.on('edit-data-source-field', (id: string, fieldPath: string[]) => {
+  editMethodName.value = '';
+  editFieldPath.value = fieldPath;
   editHandler(id);
 });
 

package/src/services/codeBlock.ts

@@ -32,13 +32,14 @@ import type {
   AsyncHookPlugin,
   CodeBlockStepValue,
   CodeState,
+  DslOpWithHistoryIdsResult,
   HistoryOpOptions,
   HistoryOpOptionsWithChangeRecords,
 } from '@editor/type';
 import { CODE_DRAFT_STORAGE_KEY } from '@editor/type';
 import { getEditorConfig } from '@editor/utils/config';
 import { COPY_CODE_STORAGE_KEY } from '@editor/utils/editor';
-import { describeRevertStep } from '@editor/utils/history';
+import { describeRevertStep, getLastPushedHistoryIds } from '@editor/utils/history';
 
 import BaseService from './BaseService';
 
@@ -321,43 +322,46 @@ class CodeBlock extends BaseService {
   // #region AndGetHistoryId
   /**
    * 下列 *AndGetHistoryId 方法与对应的写入方法行为完全一致，
-   * 唯一区别是返回值为本次写入历史栈的历史记录 uuid（{@link CodeBlockStepValue.uuid}），
+   * 返回值在 {@link DslOpWithHistoryIdsResult} 中同时包含原操作结果与本次写入的历史 uuid 列表，
    * 可用于精确引用 / 定位该条历史记录（埋点、revert、跨端同步等）。
    *
-   * 当本次操作未写入历史（doNotPushHistory 为 true、或无对应记录）时：单条写入返回 null，批量删除返回空数组。
+   * 当本次操作未写入历史（doNotPushHistory 为 true、或无对应记录）时 historyIds 为 `[]`。
    */
 
-  /** 等价于 {@link setCodeDslById}，但返回本次写入历史记录的 uuid（未入栈时返回 null）。 */
+  /** 等价于 {@link setCodeDslById}，并额外返回本次写入历史记录的 uuid 列表（未入栈时 historyIds 为 `[]`）。 */
   public async setCodeDslByIdAndGetHistoryId(
     id: Id,
     codeConfig: Partial<CodeBlockContent>,
     options: HistoryOpOptionsWithChangeRecords = {},
-  ): Promise<string | null> {
+  ): Promise<DslOpWithHistoryIdsResult<void>> {
     this.lastPushedHistoryId = null;
     await this.setCodeDslById(id, codeConfig, options);
-    return this.lastPushedHistoryId;
+    return { result: undefined, historyIds: getLastPushedHistoryIds(this.lastPushedHistoryId) };
   }
 
-  /** 等价于 {@link setCodeDslByIdSync}，但返回本次写入历史记录的 uuid（未入栈时返回 null）。 */
+  /** 等价于 {@link setCodeDslByIdSync}，并额外返回本次写入历史记录的 uuid 列表（未入栈时 historyIds 为 `[]`）。 */
   public setCodeDslByIdSyncAndGetHistoryId(
     id: Id,
     codeConfig: Partial<CodeBlockContent>,
     force = true,
     options: HistoryOpOptionsWithChangeRecords = {},
-  ): string | null {
+  ): DslOpWithHistoryIdsResult<void> {
     this.lastPushedHistoryId = null;
     this.setCodeDslByIdSync(id, codeConfig, force, options);
-    return this.lastPushedHistoryId;
+    return { result: undefined, historyIds: getLastPushedHistoryIds(this.lastPushedHistoryId) };
   }
 
   /**
-   * 等价于 {@link deleteCodeDslByIds}，但返回本次写入的全部历史记录 uuid（按删除顺序）。
-   * 一次删除多个代码块会产生多条历史记录，因此返回数组；未写入任何历史时返回空数组。
+   * 等价于 {@link deleteCodeDslByIds}，并额外返回本次写入的全部历史记录 uuid（按删除顺序）。
+   * 一次删除多个代码块会产生多条历史记录；未写入任何历史时 historyIds 为 `[]`。
    */
-  public async deleteCodeDslByIdsAndGetHistoryId(codeIds: Id[], options: HistoryOpOptions = {}): Promise<string[]> {
+  public async deleteCodeDslByIdsAndGetHistoryId(
+    codeIds: Id[],
+    options: HistoryOpOptions = {},
+  ): Promise<DslOpWithHistoryIdsResult<void>> {
     this.lastDeletedHistoryIds = [];
     await this.deleteCodeDslByIds(codeIds, options);
-    return [...this.lastDeletedHistoryIds];
+    return { result: undefined, historyIds: [...this.lastDeletedHistoryIds] };
   }
   // #endregion AndGetHistoryId
 
@@ -455,17 +459,19 @@ class CodeBlock extends BaseService {
   }
 
   /**
-   * 通过历史记录 uuid 回滚某条代码块历史步骤，语义同 {@link revert}，
-   * 仅无需调用方再传 codeBlockId 与 index：内部会按 uuid（{@link CodeBlockStepValue.uuid}）
-   * 在全部代码块栈中定位对应步骤后再回滚。
+   * 通过历史记录 uuid 回滚代码块历史步骤，语义同 {@link revert}，
+   * 仅无需调用方再传 codeBlockId 与 index：内部会按 uuid 在全部代码块栈中定位对应步骤后再回滚。
+   * 按数组顺序依次回滚，返回与入参同序的结果列表（某项失败时为 `null`）。
    *
-   * @param uuid 目标历史记录的 uuid，通常由 {@link setCodeDslByIdAndGetHistoryId} 等方法返回
-   * @returns 反向后产生的新 step；找不到对应 uuid / 未应用时返回 null
+   * @param uuids 目标历史记录的 uuid 列表，通常由 {@link setCodeDslByIdAndGetHistoryId} 等方法返回的 `historyIds`
    */
-  public async revertById(uuid: string): Promise<CodeBlockStepValue | null> {
-    const location = historyService.findCodeBlockStepLocationByUuid(uuid);
-    if (!location) return null;
-    return await this.revert(location.id, location.index);
+  public async revertById(uuids: string[]): Promise<(CodeBlockStepValue | null)[]> {
+    const results: (CodeBlockStepValue | null)[] = [];
+    for (const uuid of uuids) {
+      const location = historyService.findCodeBlockStepLocationByUuid(uuid);
+      results.push(location ? await this.revert(location.id, location.index) : null);
+    }
+    return results;
   }
 
   /**

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,16 +17,13 @@
  */
 
 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';
 import { guid } from '@tmagic/utils';
 
 import type {
-  CodeBlockHistoryGroup,
   CodeBlockStepValue,
-  DataSourceHistoryGroup,
   DataSourceStepValue,
   HistoryOpSource,
   HistoryPersistOptions,
@@ -34,6 +31,7 @@ import type {
   PageHistoryGroup,
   PageHistoryStepEntry,
   PersistedHistoryState,
+  StackHistoryGroup,
   StepValue,
 } from '@editor/type';
 import { getEditorConfig } from '@editor/utils/config';
@@ -57,7 +55,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 +441,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 +452,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 +468,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,14 +523,11 @@ class History extends BaseService {
   }
 
   /**
-   * 取出全部代码块的历史栈，按 codeBlockId 分组。
-   * 同一栈内相邻、同 opType 且作用于同一 id 的多步会被合并为一个 group：
-   * - 这正是"代码块/数据源各自按 id 分栈"的天然表现，再叠加"连续修改同目标的相邻步骤合并展示"。
-   * - 合并后 group 暴露子步骤数组，UI 可展开查看每一步的 changeRecords。
-   * - applied 字段：组内最后一步是否处于已应用段。
+   * 取出全部代码块的历史栈，按 codeBlockId 分桶展示。
+   * 同一栈内每条操作记录独立成组，不做相邻 update 合并。
    */
-  public getCodeBlockHistoryGroups(): CodeBlockHistoryGroup[] {
-    const groups: CodeBlockHistoryGroup[] = [];
+  public getCodeBlockHistoryGroups(): StackHistoryGroup<CodeBlockStepValue, 'code-block'>[] {
+    const groups: StackHistoryGroup<CodeBlockStepValue, 'code-block'>[] = [];
     Object.entries(this.state.codeBlockState).forEach(([id, undoRedo]) => {
       if (!undoRedo) return;
       const list = undoRedo.getElementList();
@@ -622,10 +616,10 @@ class History extends BaseService {
   }
 
   /**
-   * 取出全部数据源的历史栈，按 dataSourceId 分组。同上。
+   * 取出全部数据源的历史栈，按 dataSourceId 分桶展示。同上，每条操作独立成组。
    */
-  public getDataSourceHistoryGroups(): DataSourceHistoryGroup[] {
-    const groups: DataSourceHistoryGroup[] = [];
+  public getDataSourceHistoryGroups(): StackHistoryGroup<DataSourceStepValue, 'data-source'>[] {
+    const groups: StackHistoryGroup<DataSourceStepValue, 'data-source'>[] = [];
     Object.entries(this.state.dataSourceState).forEach(([id, undoRedo]) => {
       if (!undoRedo) return;
       const list = undoRedo.getElementList();

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;