@tmagic/editor 1.8.0-beta.23 → 1.8.0-beta.25

package/src/services/editor.ts

@@ -56,6 +56,7 @@ import type {
   StepValue,
   StoreState,
   StoreStateKey,
+  UpdateOptions,
 } from '@editor/type';
 import { canUsePluginMethods, LayerOffset, Layout } from '@editor/type';
 import {
@@ -83,6 +84,10 @@ import { beforePaste, getAddParent } from '@editor/utils/operator';
 
 type MoveItem = { node: MNode; parent: MContainer; pageForOp: { name: string; id: Id } | null };
 
+/** 历史插回时把记录的下标收敛到 [0, length]，越界（含未记录）一律追加到末尾 */
+const clampIndex = (index: number | undefined, length: number): number =>
+  typeof index === 'number' && index >= 0 && index <= length ? index : length;
+
 /**
  * 把「变更前后节点快照」列表归一成 update 类型的 {@link StepDiffItem} 列表，供 {@link StepValue.diff} 使用。
  * `changeRecords` 来自 form 端的 propPath/value 列表，撤销/重做时只对这些 propPath 做局部更新；
@@ -126,6 +131,11 @@ class Editor extends BaseService {
    * 普通操作不会读取它，调用前由 *AndGetHistoryId 重置为 null。
    */
   private lastPushedHistoryId: string | null = null;
+  /**
+   * 上一次 doAdd 的插入记忆：nodeId 为插入的节点，selectedId 为当时的选中节点。
+   * 仅在选中节点未变化时复用（连续 add / doNotSelect / 批量粘贴），选中变化后自动失效，无需手动清理。
+   */
+  private lastAdded: { selectedId: Id; nodeId: Id } | null = null;
 
   constructor() {
     super(
@@ -404,7 +414,7 @@ class Editor extends BaseService {
     this.set('highlightNode', null);
   }
 
-  public async doAdd(node: MNode, parent: MContainer): Promise<MNode> {
+  public async doAdd(node: MNode, parent: MContainer, _options: DslOpOptions = {}): Promise<MNode> {
     const root = this.get('root');
 
     if (!root) throw new Error('root为空');
@@ -418,13 +428,16 @@ class Editor extends BaseService {
       throw new Error('app下不能添加组件');
     }
 
-    if (parent.id !== curNode.id && !isPageOrFragment(node)) {
-      const index = parent.items.indexOf(curNode);
-      parent.items?.splice(index + 1, 0, node);
-    } else {
-      // 新增节点添加到配置中
-      parent.items?.push(node);
-    }
+    // 连续 add 时接在上一个新增节点之后，否则接在当前选中节点之后；
+    // 锚点节点可能已不在 items 中（被删 / DSL 整体替换），回退到当前选中节点，都不在则追加到末尾
+    const anchorId = this.lastAdded?.selectedId === curNode.id ? this.lastAdded.nodeId : curNode.id;
+    const anchorIndex = isPageOrFragment(node)
+      ? -1
+      : Math.max(getNodeIndex(anchorId, parent), getNodeIndex(curNode.id, parent));
+    const insertIndex = anchorIndex < 0 ? parent.items.length : anchorIndex + 1;
+
+    parent.items.splice(insertIndex, 0, node);
+    this.lastAdded = { selectedId: curNode.id, nodeId: node.id };
 
     const layout = await this.getLayout(toRaw(parent), node as MNode);
     node.style = getInitPositionStyle(node.style, layout);
@@ -434,6 +447,7 @@ class Editor extends BaseService {
       parent: cloneDeep(parent),
       parentId: parent.id,
       root: cloneDeep(root),
+      index: insertIndex,
     });
 
     const newStyle = fixNodePosition(node, parent, stage);
@@ -452,24 +466,23 @@ class Editor extends BaseService {
    * 向指点容器添加组件节点
    * @param addConfig 将要添加的组件节点配置
    * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
-   * @param options 可选配置
-   * @param options.doNotSelect 添加后是否不更新当前选中节点（默认 false，添加后会选中新增的节点）
-   * @param options.doNotSwitchPage 添加后是否不切换当前页面（默认 false；新增页面 / 跨页新增时为 true 会跳过会引发页面切换的选中操作）
-   * @param options.doNotPushHistory 是否不写入历史记录（默认 false）
+   * @param options 可选配置，见 {@link DslOpOptions}
    * @returns 添加后的节点
    */
   public async add(
     addNode: AddMNode | MNode[],
     parent?: MContainer | null,
-    {
+    options: DslOpOptions = {},
+  ): Promise<MNode | MNode[]> {
+    this.captureSelectionBeforeOp();
+
+    const {
       doNotSelect = false,
       doNotSwitchPage = false,
       doNotPushHistory = false,
       historyDescription,
       historySource,
-    }: DslOpOptions = {},
-  ): Promise<MNode | MNode[]> {
-    this.captureSelectionBeforeOp();
+    } = options;
 
     const stage = this.get('stage');
 
@@ -485,17 +498,15 @@ class Editor extends BaseService {
       addNodes.push(...addNode);
     }
 
-    const newNodes = await Promise.all(
-      addNodes.map((node) => {
-        const root = this.get('root');
-        if (isPageOrFragment(node) && root) {
-          return this.doAdd(node, root);
-        }
-        const parentNode = parent ?? getAddParent(node);
-        if (!parentNode) throw new Error('未找到父元素');
-        return this.doAdd(node, parentNode);
-      }),
-    );
+    // 必须串行：每个节点的插入位置依赖上一个已插入的节点，并行时插入顺序会受
+    // doAdd 前置耗时（如异步 beforeDoAdd 插件钩子）影响而错乱
+    const newNodes: MNode[] = [];
+    for (const node of addNodes) {
+      const root = this.get('root');
+      const parentNode = isPageOrFragment(node) && root ? root : (parent ?? getAddParent(node));
+      if (!parentNode) throw new Error('未找到父元素');
+      newNodes.push(await this.doAdd(node, parentNode, options));
+    }
 
     if (newNodes.length > 1) {
       // 多选时只要任一新增节点位于非当前页面，触发的 multiSelect 就会引起页面切换
@@ -654,16 +665,8 @@ class Editor extends BaseService {
    * @param options.doNotSwitchPage 删除后是否不切换当前页面（默认 false；删除页面 / 页面片段时为 true 会跳过自动切换到首个剩余页面）
    * @param options.doNotPushHistory 是否不写入历史记录（默认 false）
    */
-  public async remove(
-    nodeOrNodeList: MNode | MNode[],
-    {
-      doNotSelect = false,
-      doNotSwitchPage = false,
-      doNotPushHistory = false,
-      historyDescription,
-      historySource,
-    }: DslOpOptions = {},
-  ): Promise<void> {
+  public async remove(nodeOrNodeList: MNode | MNode[], options: DslOpOptions = {}): Promise<void> {
+    const { doNotPushHistory = false, historyDescription, historySource } = options;
     this.captureSelectionBeforeOp();
 
     const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
@@ -690,7 +693,7 @@ class Editor extends BaseService {
       }
     }
 
-    await Promise.all(nodes.map((node) => this.doRemove(node, { doNotSelect, doNotSwitchPage })));
+    await Promise.all(nodes.map((node) => this.doRemove(node, options)));
 
     // 删除节点时同步清理其（含子树）的校验错误记录；置于 pushOpHistory 之前，使历史快照与本次删除对齐。
     this.removeInvalidNodesBySubtree(nodes);
@@ -720,12 +723,9 @@ class Editor extends BaseService {
 
   public async doUpdate(
     config: MNode,
-    {
-      changeRecords = [],
-      historySource,
-      replace = false,
-    }: { changeRecords?: ChangeRecord[]; historySource?: HistoryOpSource; replace?: boolean } = {},
+    data: UpdateOptions = {},
   ): Promise<{ newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] }> {
+    const { changeRecords = [], historySource, replace = false } = data;
     const root = this.get('root');
     if (!root) throw new Error('root为空');
 
@@ -804,34 +804,10 @@ class Editor extends BaseService {
    * 更新节点
    * update后会触发依赖收集，收集完后会掉stage.update方法
    * @param config 新的节点配置，配置中需要有id信息
-   * @param data 额外数据
-   * @param data.changeRecords 单节点 form 端变更记录（多节点场景下被忽略，使用 changeRecordList）
-   * @param data.changeRecordList 多节点 form 端变更记录列表，按 config 数组同序对应每个节点；优先级高于 changeRecords
-   * @param data.doNotPushHistory 是否不写入历史记录（默认 false）
-   * @param data.historyDescription 入栈时附带的人类可读描述，用于历史面板展示（不影响 undo/redo 行为）
-   * @param data.replace 是否整节点替换：为 true 时跳过 mergeWith / toggleFixedPosition / setChildrenLayout，直接用传入配置覆盖（默认 false）
+   * @param data 额外数据，见 {@link UpdateOptions}
    * @returns 更新后的节点配置
    */
-  public async update(
-    config: MNode | MNode[],
-    data: {
-      changeRecords?: ChangeRecord[];
-      changeRecordList?: ChangeRecord[][];
-      doNotPushHistory?: boolean;
-      historyDescription?: string;
-      historySource?: HistoryOpSource;
-      /**
-       * 为 true 时不做深合并等变换，直接用传入配置整节点替换现有节点。
-       * 适用于源码编辑、历史整节点快照回放等「完整 DSL」场景；默认 false（局部属性更新走 merge）。
-       */
-      replace?: boolean;
-      /**
-       * 属性面板提交时携带的校验错误信息，在写入历史记录之前落库，
-       * 使历史快照与本次变更对齐，从而 undo/redo 能正确还原错误标记。
-       */
-      invalidInfo?: { id: Id; source: NodeInvalidSource; error?: string };
-    } = {},
-  ): Promise<MNode | MNode[]> {
+  public async update(config: MNode | MNode[], data: UpdateOptions = {}): Promise<MNode | MNode[]> {
     this.captureSelectionBeforeOp();
 
     const {
@@ -840,7 +816,6 @@ class Editor extends BaseService {
       changeRecords,
       historyDescription,
       historySource,
-      replace = false,
       invalidInfo,
     } = data;
 
@@ -851,7 +826,7 @@ class Editor extends BaseService {
     const updateData = await Promise.all(
       nodes.map((node, index) => {
         const recordsForNode = changeRecordList ? (changeRecordList[index] ?? []) : (changeRecords ?? []);
-        return this.doUpdate(node, { changeRecords: recordsForNode, historySource, replace });
+        return this.doUpdate(node, { ...data, changeRecords: recordsForNode });
       }),
     );
 
@@ -1360,14 +1335,7 @@ class Editor extends BaseService {
   /** 等价于 {@link update}，并额外返回本次写入历史记录的 uuid 列表（未入栈时 historyIds 为 `[]`）。 */
   public async updateAndGetHistoryId(
     config: MNode | MNode[],
-    data: {
-      changeRecords?: ChangeRecord[];
-      changeRecordList?: ChangeRecord[][];
-      doNotPushHistory?: boolean;
-      historyDescription?: string;
-      historySource?: HistoryOpSource;
-      replace?: boolean;
-    } = {},
+    data: UpdateOptions = {},
   ): Promise<DslOpWithHistoryIdsResult<MNode | MNode[]>> {
     this.lastPushedHistoryId = null;
     const result = await this.update(config, data);
@@ -1987,17 +1955,15 @@ class Editor extends BaseService {
             const parent = this.getNodeById(parentId, false) as MContainer | null;
             if (parent?.items) {
               const addedNode = cloneDeep(newSchema);
-              if (typeof index === 'number' && index >= 0 && index < parent.items.length) {
-                parent.items.splice(index, 0, addedNode);
-              } else {
-                parent.items.push(addedNode);
-              }
+              const insertIndex = clampIndex(index, parent.items.length);
+              parent.items.splice(insertIndex, 0, addedNode);
               addedNodes.push(addedNode);
               await stage?.add({
                 config: cloneDeep(newSchema),
                 parent: cloneDeep(parent),
                 parentId: parent.id,
                 root: cloneDeep(root),
+                index: insertIndex,
               });
             }
           }
@@ -2016,13 +1982,15 @@ class Editor extends BaseService {
             const parent = this.getNodeById(parentId, false) as MContainer | null;
             if (parent?.items) {
               const addedNode = cloneDeep(oldSchema);
-              parent.items.splice(index ?? parent.items.length, 0, addedNode);
+              const insertIndex = clampIndex(index, parent.items.length);
+              parent.items.splice(insertIndex, 0, addedNode);
               addedNodes.push(addedNode);
               await stage?.add({
                 config: cloneDeep(oldSchema),
                 parent: cloneDeep(parent),
                 parentId,
                 root: cloneDeep(root),
+                index: insertIndex,
               });
             }
           }

package/src/type.ts

@@ -1464,6 +1464,29 @@ export interface DslOpOptions extends HistoryOpOptions {
 }
 // #endregion DslOpOptions
 
+// #region UpdateOptions
+/**
+ * {@link EditorService.update} / {@link EditorService.doUpdate} 的额外数据
+ * - changeRecords: 单节点 form 端变更记录（多节点场景下被忽略，使用 changeRecordList）
+ * - changeRecordList: 多节点 form 端变更记录列表，按 config 数组同序对应每个节点；优先级高于 changeRecords
+ * - replace: 为 true 时跳过 mergeWith / toggleFixedPosition / setChildrenLayout，直接用传入配置整节点替换
+ * - invalidInfo: 属性面板提交时携带的校验错误信息，在写入历史记录之前落库
+ */
+export interface UpdateOptions extends HistoryOpOptionsWithChangeRecords {
+  changeRecordList?: ChangeRecord[][];
+  /**
+   * 为 true 时不做深合并等变换，直接用传入配置整节点替换现有节点。
+   * 适用于源码编辑、历史整节点快照回放等「完整 DSL」场景；默认 false（局部属性更新走 merge）。
+   */
+  replace?: boolean;
+  /**
+   * 属性面板提交时携带的校验错误信息，在写入历史记录之前落库，
+   * 使历史快照与本次变更对齐，从而 undo/redo 能正确还原错误标记。
+   */
+  invalidInfo?: { id: Id; source: NodeInvalidSource; error?: string };
+}
+// #endregion UpdateOptions
+
 /** 差异对话框的入参 */
 export interface DiffDialogPayload {
   /** 表单类别 */

package/src/utils/event.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import type { EventOption, Id, MComponent, MContainer } from '@tmagic/core';
+import type { EventOption, Id, MComponent, MContainer, MNode } from '@tmagic/core';
 import type { CascaderOption } from '@tmagic/form';
 import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
 
@@ -56,7 +56,7 @@ export const getEventNameOptions = (
   }
 
   if (src === 'component') {
-    const sourceNode = editorService.getNodeById(formValue.id);
+    const sourceNode = editorService.getNodeById(formValue.id) || (formValue as MNode);
     let events: EventOption[] | CascaderOption[] = eventsService.getEvent(formValue.type, { node: sourceNode }) || [];
 
     if (formValue.type === 'page-fragment-container' && formValue.pageFragmentId) {

package/src/utils/props.ts

@@ -73,7 +73,6 @@ export const getCondOpOptionsByFieldType = (type: string) => {
 
 export const styleTabConfig: TabPaneConfig = {
   title: '样式',
-  lazy: true,
   display: ({ services }: any) => !(services?.uiService?.get('showStylePanel') ?? true),
   items: [
     {
@@ -146,7 +145,6 @@ export const styleTabConfig: TabPaneConfig = {
 
 export const eventTabConfig: TabPaneConfig = {
   title: '事件',
-  lazy: true,
   items: [
     {
       name: 'events',
@@ -160,7 +158,6 @@ export const eventTabConfig: TabPaneConfig = {
 
 export const advancedTabConfig: TabPaneConfig = {
   title: '高级',
-  lazy: true,
   items: [
     {
       name: NODE_DISABLE_CODE_BLOCK_KEY,
@@ -360,32 +357,3 @@ export const fillConfig = (
 
   return [tabConfig];
 };
-
-/**
- * 将属性表单配置中「样式」tab-pane 的 `display` 强制置为 `true`。
- *
- * `propsService.getPropsConfig` 返回的样式 tab 默认带有
- * `display: ({ services }) => !(services?.uiService?.get('showStylePanel') ?? true)`，
- * 在对比 / 只读展示场景（CompareForm / ViewForm）下并不需要跟随 uiService 状态隐藏，
- * 这里统一放开，保证样式 tab 始终可见。
- *
- * @param formConfig 组件属性表单配置
- * @returns 处理后的表单配置（不修改入参，返回浅拷贝）
- */
-export const removeStyleDisplayConfig = (formConfig: FormConfig): FormConfig =>
-  formConfig.map((item) => {
-    if (!('type' in item)) return item;
-    if (item?.type !== 'tab' || !Array.isArray(item.items)) return item;
-
-    return {
-      ...item,
-      items: item.items.map((tabPane) => {
-        if (tabPane?.title !== '样式' || !Array.isArray(tabPane.items)) return tabPane;
-
-        return {
-          ...tabPane,
-          display: true,
-        };
-      }),
-    };
-  });

package/src/utils/type-match-rules.ts

@@ -209,7 +209,6 @@ const validateDataSourceFieldPath = (
   path: string[],
   options: {
     dataSourceId?: string;
-    valueMode?: 'key' | 'value';
     dataSourceFieldType?: DataSourceFieldType[];
     message?: string;
   } = {},
@@ -219,19 +218,11 @@ const validateDataSourceFieldPath = (
     return undefined;
   }
 
-  let dsId = options.dataSourceId;
-  let fieldNames = path;
-
+  const dsId = options.dataSourceId;
   if (!dsId) {
-    if (!path.length) {
-      return defaultMessage(options.message, '值不在可选项中', dataSourceIdSuggestion());
-    }
-    const rawDsId = path[0];
-    dsId =
-      options.valueMode === 'key' || !`${rawDsId}`.startsWith(DATA_SOURCE_FIELDS_SELECT_VALUE_PREFIX)
-        ? `${rawDsId}`
-        : removeDataSourceFieldPrefix(`${rawDsId}`);
-    fieldNames = path.slice(1);
+    // 仅当取值为空数组或首项为空串时命中。表单校验管道里 validateTypeMatch 对空数组会短路，
+    // 因此这里只可能来自直接调用 validateDataSourceFieldSelect 的自定义 validator
+    return defaultMessage(options.message, '数据源不存在', dataSourceIdSuggestion());
   }
 
   const ds = findDataSource(`${dsId}`);
@@ -239,11 +230,11 @@ const validateDataSourceFieldPath = (
     return defaultMessage(options.message, `数据源(${dsId})不存在`, dataSourceIdSuggestion());
   }
 
-  if (!fieldNames.length) {
+  if (!path.length) {
     return undefined;
   }
 
-  const { field, ok, fields, failedName } = resolveFieldByPath(ds.fields, fieldNames);
+  const { field, ok, fields, failedName } = resolveFieldByPath(ds.fields, path);
   if (!ok) {
     return defaultMessage(
       options.message,
@@ -258,11 +249,15 @@ const validateDataSourceFieldPath = (
   }
 
   const leafType = field?.type || 'any';
-  if (leafType === 'any' || allowedTypes.includes(leafType)) {
-    return undefined;
-  }
+  if (leafType !== 'any' && !allowedTypes.includes(leafType)) {
+    const fieldName = field?.name || path[path.length - 1];
 
-  return defaultMessage(options.message, '值不在可选项中', dataSourceIdSuggestion());
+    // 文案已点明当前字段类型与要求类型，无需再列同级可选字段
+    return defaultMessage(
+      options.message,
+      `请选择类型为${allowedTypes.join('或')}的字段，字段(${fieldName})的类型为${leafType}`,
+    );
+  }
 };
 
 const validateDataSourceMethodTuple = (value: any, message?: string): string | undefined => {
@@ -367,7 +362,7 @@ const validateCondOpSelect: TypeMatchValidator = (value, { message, props }) =>
   const parentFields = props.config?.parentFields || [];
   const fieldPath = Array.isArray(props.model?.field) ? props.model.field : [];
   const [id, ...fieldNames] = [...parentFields, ...fieldPath];
-  const ds = id ? findDataSource(`${id}`) : undefined;
+  const ds = id ? findDataSource(removeDataSourceFieldPrefix(`${id}`)) : undefined;
   const fieldType = getFieldType(ds, fieldNames);
   const allowed = getCondOpsByFieldType(fieldType);
 
@@ -464,7 +459,7 @@ export type ValidateDataSourceFieldSelectOptions = {
 /**
  * data-source-field-select 的 typeMatch 校验逻辑，可供自定义 rules.validator 复用。
  */
-export const validateDataSourceFieldSelectValue = (
+export const validateDataSourceFieldSelect = (
   value: any,
   context: TypeMatchValidateContext,
   options?: ValidateDataSourceFieldSelectOptions,
@@ -492,17 +487,22 @@ export const validateDataSourceFieldSelectValue = (
     return defaultMessage(message, `${value}类型应为字符串数组`, dataSourceFieldPathSuggestion());
   }
 
-  return validateDataSourceFieldPath(value, {
-    dataSourceId: config.dataSourceId,
-    valueMode: config.value,
+  // 未指定 dataSourceId 时，路径首项为数据源 id，其余为字段名。
+  // value 模式的首项带 ds-field:: 前缀、key 模式不带，removeDataSourceFieldPrefix 对后者是幂等的，无需分支。
+  let dataSourceId = config.dataSourceId ? `${config.dataSourceId}` : undefined;
+  let fieldNames = value;
+  if (!dataSourceId) {
+    dataSourceId = value.length ? removeDataSourceFieldPrefix(value[0]) : undefined;
+    fieldNames = value.slice(1);
+  }
+
+  return validateDataSourceFieldPath(fieldNames, {
+    dataSourceId,
     dataSourceFieldType: config.dataSourceFieldType,
     message,
   });
 };
 
-const validateDataSourceFieldSelect: TypeMatchValidator = (value, context) =>
-  validateDataSourceFieldSelectValue(value, context);
-
 const validateDataSourceSelect: TypeMatchValidator = (value, { message, props }) => {
   const config = props.config || {};
   const dataSources = getDataSources();
@@ -678,7 +678,8 @@ export const editorTypeMatchRules: Record<string, TypeMatchValidator> = {
   'ui-select': validateUiSelect,
   'data-source-input': validateDataSourceInput,
   'data-source-method-select': validateDataSourceMethodSelect,
-  'data-source-field-select': validateDataSourceFieldSelect,
+  /** 注册进 typeMatch 规则表的入口，收窄为 TypeMatchValidator，避免调用方误传第三个参数 */
+  'data-source-field-select': (value, context) => validateDataSourceFieldSelect(value, context),
   'data-source-select': validateDataSourceSelect,
   'code-select': validateCodeSelect,
   'data-source-fields': validateDataSourceFields,