@tmagic/editor 1.8.0-beta.10 → 1.8.0-beta.12

package/src/plugin.ts

@@ -21,7 +21,7 @@ import type { App } from 'vue';
 import type { DesignPluginOptions } from '@tmagic/design';
 import designPlugin from '@tmagic/design';
 import type { FormInstallOptions } from '@tmagic/form';
-import formPlugin from '@tmagic/form';
+import formPlugin, { registerTypeMatchRules } from '@tmagic/form';
 import tablePlugin from '@tmagic/table';
 
 import Code from './fields/Code.vue';
@@ -44,6 +44,7 @@ import StyleSetter from './fields/StyleSetter/Index.vue';
 import uiSelect from './fields/UISelect.vue';
 import CodeEditor from './layouts/CodeEditor.vue';
 import { setEditorConfig } from './utils/config';
+import { editorTypeMatchRules } from './utils/type-match-rules';
 import Editor from './Editor.vue';
 import type { EditorInstallOptions } from './type';
 
@@ -64,6 +65,7 @@ export default {
     app.use(designPlugin, opt || {});
     app.use(formPlugin, opt || {});
     app.use(tablePlugin);
+    registerTypeMatchRules(editorTypeMatchRules);
 
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setEditorConfig(option);

package/src/services/editor.ts

@@ -31,6 +31,7 @@ import {
   isPage,
   isPageFragment,
   setValueByKeyPath,
+  traverseNode,
 } from '@tmagic/utils';
 
 import BaseService from '@editor/services//BaseService';
@@ -47,6 +48,8 @@ import type {
   EditorNodeInfo,
   HistoryOpSource,
   HistoryOpType,
+  NodeInvalidInfo,
+  NodeInvalidSource,
   PastePosition,
   StepDiffItem,
   StepValue,
@@ -104,12 +107,18 @@ class Editor extends BaseService {
     stageLoading: true,
     highlightNode: null,
     modifiedNodeIds: new Map(),
+    invalidNodeIds: new Map(),
     pageLength: 0,
     pageFragmentLength: 0,
     disabledMultiSelect: false,
     alwaysMultiSelect: false,
   });
   private selectionBeforeOp: Id[] | null = null;
+  /**
+   * 操作前的节点校验错误快照，与 selectionBeforeOp 同时在 captureSelectionBeforeOp 中捕获，
+   * 供 pushOpHistory 写入 step.extra.invalidNodeIdsBefore，用于撤销时还原到「操作前」的错误状态。
+   */
+  private invalidNodeIdsBeforeOp: Map<Id, NodeInvalidInfo> | null = null;
   /**
    * 最近一次 pushOpHistory 写入的历史记录 uuid。
    * 供 *AndGetHistoryId 系列方法在调用普通操作后取回本次产生的历史记录 id；
@@ -127,7 +136,7 @@ class Editor extends BaseService {
 
   /**
    * 设置当前指点节点配置
-   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength
+   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'invalidNodeIds' | 'pageLength' | 'pageFragmentLength
    * @param value MNode
    * @param options.historySource 设置 root 时，本次变更写入历史记录的「操作来源」（仅 name === 'root' 时生效）
    */
@@ -180,12 +189,15 @@ class Editor extends BaseService {
       }
 
       this.emit('root-change', value as StoreState['root'], preValue as StoreState['root'], options);
+
+      // 整体替换 DSL 后，清理不再存在于新 DSL 中的失效节点错误记录，避免残留误报。
+      this.pruneInvalidNodeIds();
     }
   }
 
   /**
    * 获取当前指点节点配置
-   * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength'
+   * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'invalidNodeIds' | 'pageLength' | 'pageFragmentLength'
    * @returns MNode
    */
   public get<K extends StoreStateKey>(name: K): StoreState[K] {
@@ -663,6 +675,9 @@ class Editor extends BaseService {
 
     await Promise.all(nodes.map((node) => this.doRemove(node, { doNotSelect, doNotSwitchPage })));
 
+    // 删除节点时同步清理其（含子树）的校验错误记录；置于 pushOpHistory 之前，使历史快照与本次删除对齐。
+    this.removeInvalidNodesBySubtree(nodes);
+
     if (removedItems.length > 0 && pageForOp) {
       if (!doNotPushHistory) {
         this.pushOpHistory('remove', {
@@ -770,11 +785,23 @@ class Editor extends BaseService {
       doNotPushHistory?: boolean;
       historyDescription?: string;
       historySource?: HistoryOpSource;
+      /**
+       * 属性面板提交时携带的校验错误信息，在写入历史记录之前落库，
+       * 使历史快照与本次变更对齐，从而 undo/redo 能正确还原错误标记。
+       */
+      invalidInfo?: { id: Id; source: NodeInvalidSource; error?: string };
     } = {},
   ): Promise<MNode | MNode[]> {
     this.captureSelectionBeforeOp();
 
-    const { doNotPushHistory = false, changeRecordList, changeRecords, historyDescription, historySource } = data;
+    const {
+      doNotPushHistory = false,
+      changeRecordList,
+      changeRecords,
+      historyDescription,
+      historySource,
+      invalidInfo,
+    } = data;
 
     const nodes = Array.isArray(config) ? config : [config];
 
@@ -787,6 +814,9 @@ class Editor extends BaseService {
       }),
     );
 
+    // 校验错误信息在 pushOpHistory 之前落库，保证历史快照包含本次变更对应的错误状态。
+    this.applyInvalidInfo(config, invalidInfo);
+
     if (updateData[0].oldNode?.type !== NodeType.ROOT) {
       const curNodes = this.get('nodes');
       if (curNodes.length) {
@@ -1542,6 +1572,7 @@ class Editor extends BaseService {
     this.set('stage', null);
     this.set('highlightNode', null);
     this.set('modifiedNodeIds', new Map());
+    this.set('invalidNodeIds', new Map());
     this.set('pageLength', 0);
   }
 
@@ -1555,6 +1586,62 @@ class Editor extends BaseService {
     this.get('modifiedNodeIds').clear();
   }
 
+  /**
+   * 记录（或覆盖）某个节点在指定来源（属性表单 / 样式表单）上的校验错误信息。
+   * @param id 节点 id
+   * @param source 错误来源：'props'（属性表单）| 'style'（样式表单）
+   * @param message 错误文案（可能是包含 <br> 的 HTML）
+   */
+  public setInvalidNode(id: Id, source: NodeInvalidSource, message: string) {
+    const map = this.get('invalidNodeIds');
+    const info: NodeInvalidInfo = { ...(map.get(id) || {}) };
+    info[source] = message;
+    map.set(id, info);
+    this.emit('invalid-node-change', map);
+  }
+
+  /**
+   * 删除节点的校验错误记录。
+   * @param id 节点 id
+   * @param source 指定来源则仅删除该来源；不传则删除该节点全部来源的错误
+   */
+  public deleteInvalidNode(id: Id, source?: NodeInvalidSource) {
+    const map = this.get('invalidNodeIds');
+    if (!map.has(id)) return;
+
+    if (!source) {
+      map.delete(id);
+    } else {
+      const info: NodeInvalidInfo = { ...(map.get(id) || {}) };
+      delete info[source];
+      if (info.props || info.style) {
+        map.set(id, info);
+      } else {
+        map.delete(id);
+      }
+    }
+
+    this.emit('invalid-node-change', map);
+  }
+
+  /** 获取当前存在校验错误的节点错误 Map（key 为节点 id） */
+  public getInvalidNodeIds(): Map<Id, NodeInvalidInfo> {
+    return this.get('invalidNodeIds');
+  }
+
+  /** 获取指定节点的校验错误信息 */
+  public getInvalidNodeInfo(id: Id): NodeInvalidInfo | undefined {
+    return this.get('invalidNodeIds').get(id);
+  }
+
+  /** 清空全部校验错误记录 */
+  public resetInvalidNodeId() {
+    const map = this.get('invalidNodeIds');
+    if (map.size === 0) return;
+    map.clear();
+    this.emit('invalid-node-change', map);
+  }
+
   public usePlugin(options: AsyncHookPlugin<AsyncMethodName, Editor>): void {
     super.usePlugin(options);
   }
@@ -1577,6 +1664,68 @@ class Editor extends BaseService {
     return super.emit(eventName, ...args);
   }
 
+  /**
+   * 应用一次属性面板提交携带的校验错误信息（在写入历史记录之前调用，使历史快照与本次变更对齐）。
+   * - invalidInfo 为空（调用方未携带）：认为本次更新对应的节点已无校验错误，清除其全部来源的错误；
+   * - error 非空则记录错误，为空则清除对应来源的错误。
+   */
+  private applyInvalidInfo(
+    config: MNode | MNode[],
+    invalidInfo?: { id: Id; source: NodeInvalidSource; error?: string },
+  ) {
+    if (!invalidInfo) {
+      // 调用方未携带 invalidInfo：本次更新对应节点不应再保留校验错误，清除其全部来源。
+      const ids = (Array.isArray(config) ? config : [config])
+        .map((node) => node.id)
+        .filter((id): id is Id => id !== undefined);
+      ids.forEach((id) => this.deleteInvalidNode(id));
+      return;
+    }
+    const { id, source, error } = invalidInfo;
+    if (error) {
+      this.setInvalidNode(id, source, error);
+    } else {
+      this.deleteInvalidNode(id, source);
+    }
+  }
+
+  /** 删除被移除节点（含其子树）的校验错误记录，避免残留误报 */
+  private removeInvalidNodesBySubtree(nodes: MNode[]) {
+    const map = this.get('invalidNodeIds');
+    if (map.size === 0) return;
+
+    let changed = false;
+    nodes.forEach((node) => {
+      traverseNode(node, (n) => {
+        if (n.id !== undefined && map.delete(n.id)) {
+          changed = true;
+        }
+      });
+    });
+
+    if (changed) {
+      this.emit('invalid-node-change', map);
+    }
+  }
+
+  /** 清理不在当前 DSL 中的失效节点错误记录（用于整体替换 root 后） */
+  private pruneInvalidNodeIds() {
+    const map = this.get('invalidNodeIds');
+    if (map.size === 0) return;
+
+    let changed = false;
+    for (const id of [...map.keys()]) {
+      if (!this.getNodeById(id, false)) {
+        map.delete(id);
+        changed = true;
+      }
+    }
+
+    if (changed) {
+      this.emit('invalid-node-change', map);
+    }
+  }
+
   private addModifiedNodeId(id: Id) {
     this.get('modifiedNodeIds').set(id, id);
   }
@@ -1598,6 +1747,9 @@ class Editor extends BaseService {
   private captureSelectionBeforeOp() {
     if (this.selectionBeforeOp) return;
     this.selectionBeforeOp = this.get('nodes').map((n) => n.id);
+    // 与选区快照同步捕获「操作前」的校验错误状态；因 applyInvalidInfo 会在 pushOpHistory 前修改 invalidNodeIds，
+    // 必须在此（操作最开始）留存操作前快照，供 undo 还原。
+    this.invalidNodeIdsBeforeOp = new Map(this.get('invalidNodeIds'));
   }
 
   /**
@@ -1704,6 +1856,9 @@ class Editor extends BaseService {
         selectedBefore: this.selectionBeforeOp ?? [],
         selectedAfter: this.get('nodes').map((n) => n.id),
         modifiedNodeIds: new Map(this.get('modifiedNodeIds')),
+        // 方向性双快照：undo 还原「操作前」错误状态，redo 还原「操作后」错误状态。
+        invalidNodeIdsBefore: new Map(this.invalidNodeIdsBeforeOp ?? this.get('invalidNodeIds')),
+        invalidNodeIdsAfter: new Map(this.get('invalidNodeIds')),
       },
       diff,
     };
@@ -1716,6 +1871,7 @@ class Editor extends BaseService {
     const historyId = pushed ? step.uuid : null;
     this.lastPushedHistoryId = historyId;
     this.selectionBeforeOp = null;
+    this.invalidNodeIdsBeforeOp = null;
     return historyId;
   }
 
@@ -1841,6 +1997,15 @@ class Editor extends BaseService {
 
     this.set('modifiedNodeIds', step.extra?.modifiedNodeIds ?? new Map());
 
+    // 还原校验错误标记：因 undo/redo 复用同一 step，需按方向取「操作前 / 操作后」快照——
+    // undo(reverse=true) 还原到操作前的错误状态（撤销一个「校验失败」的改动后错误消失），
+    // redo(reverse=false) 还原到操作后的错误状态（重做后错误恢复）。
+    // 浅拷贝一份以隔离历史快照，避免后续 set/deleteInvalidNode 反向污染 step.extra。
+    const invalidToRestore =
+      (reverse ? step.extra?.invalidNodeIdsBefore : step.extra?.invalidNodeIdsAfter) ?? new Map();
+    this.set('invalidNodeIds', new Map(invalidToRestore));
+    this.emit('invalid-node-change', this.get('invalidNodeIds'));
+
     const page = toRaw(this.get('page'));
     if (page) {
       const selectIds = (reverse ? step.extra?.selectedBefore : step.extra?.selectedAfter) ?? [];

package/src/services/ui.ts

@@ -27,6 +27,9 @@ import {
   DEFAULT_LEFT_COLUMN_WIDTH,
   DEFAULT_RIGHT_COLUMN_WIDTH,
   LEFT_COLUMN_WIDTH_STORAGE_KEY,
+  MIN_CENTER_COLUMN_WIDTH,
+  MIN_LEFT_COLUMN_WIDTH,
+  MIN_RIGHT_COLUMN_WIDTH,
   RIGHT_COLUMN_WIDTH_STORAGE_KEY,
 } from '@editor/utils/const';
 
@@ -54,6 +57,9 @@ const state = shallowReactive<UiState>({
       storageService.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, { protocol: Protocol.NUMBER }) ||
       DEFAULT_RIGHT_COLUMN_WIDTH,
   },
+  minLeftColumnWidth: MIN_LEFT_COLUMN_WIDTH,
+  minCenterColumnWidth: MIN_CENTER_COLUMN_WIDTH,
+  minRightColumnWidth: MIN_RIGHT_COLUMN_WIDTH,
   showGuides: true,
   hasGuides: false,
   showRule: true,

package/src/theme/event.scss

@@ -35,3 +35,11 @@
     margin-right: 5px;
   }
 }
+
+.el-form-item {
+  .el-form-item {
+    &.is-error {
+      margin-bottom: 18px;
+    }
+  }
+}

package/src/theme/floating-box.scss

@@ -25,10 +25,18 @@
   .m-editor-float-box-body {
     overflow: auto;
     flex: 1;
-    padding: 0 16px;
   }
 }
 
 .m-editor-floating-box-moveable {
   opacity: 0;
 }
+
+.m-editor-float-box-drag-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+}

package/src/theme/layer-node-content.scss

@@ -0,0 +1,14 @@
+.m-editor-layer-node-content {
+  display: inline-flex;
+  align-items: center;
+
+  &.is-invalid .m-editor-layer-node-label {
+    color: var(--el-color-danger, #f56c6c);
+  }
+
+  .m-editor-layer-node-error-icon {
+    margin-left: 4px;
+    color: var(--el-color-danger, #f56c6c);
+    cursor: help;
+  }
+}

package/src/theme/scroll-bar.scss

@@ -0,0 +1,64 @@
+.m-editor-scroll-bar {
+  position: absolute;
+  background-color: transparent;
+  opacity: 0.3;
+  transition:
+    background-color 0.2s linear,
+    opacity 0.2s linear;
+
+  .m-editor-scroll-bar-thumb {
+    background-color: #aaa;
+    border-radius: 6px;
+    position: absolute;
+  }
+
+  &.horizontal {
+    width: 100%;
+    height: 15px;
+    bottom: 0;
+
+    .m-editor-scroll-bar-thumb {
+      height: 6px;
+      transition:
+        background-color 0.2s linear,
+        height 0.2s ease-in-out;
+      bottom: 2px;
+    }
+  }
+
+  &.vertical {
+    height: 100%;
+    width: 15px;
+    right: 5px;
+
+    .m-editor-scroll-bar-thumb {
+      width: 6px;
+      transition:
+        background-color 0.2s linear,
+        width 0.2s ease-in-out;
+      right: 2px;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    background-color: #eee;
+    opacity: 0.9;
+
+    .m-editor-scroll-bar-thumb {
+      background-color: #999;
+    }
+
+    &.horizontal {
+      .m-editor-scroll-bar-thumb {
+        height: 11px;
+      }
+    }
+
+    &.vertical {
+      .m-editor-scroll-bar-thumb {
+        width: 11px;
+      }
+    }
+  }
+}

package/src/theme/theme.scss

@@ -27,4 +27,7 @@
 @use "./page-fragment-select.scss";
 @use "./data-source-field.scss";
 @use "./data-source-field-select.scss";
+@use "./scroll-bar.scss";
+@use "./ui-select.scss";
+@use "./layer-node-content.scss";
 @use "./style-setter/index.scss";

package/src/theme/ui-select.scss

@@ -0,0 +1,9 @@
+.m-fields-ui-select {
+  cursor: pointer;
+  i {
+    margin-right: 3px;
+  }
+  span {
+    color: #2882e0;
+  }
+}

package/src/type.ts

@@ -33,6 +33,7 @@ import type {
   MPage,
   MPageFragment,
 } from '@tmagic/core';
+import type { FieldSize } from '@tmagic/design';
 import type { ChangeRecord, FormConfig, FormState, TableColumnConfig, TypeFunction } from '@tmagic/form';
 import type StageCore from '@tmagic/stage';
 import type {
@@ -76,7 +77,7 @@ export interface FrameworkSlots {
   empty(props: {}): any;
   workspace(props: {}): any;
   'props-panel'(props: {}): any;
-  'footer'(props: {}): any;
+  footer(props: {}): any;
   'page-bar'(props: {}): any;
   'page-bar-add-button'(props: {}): any;
   'page-bar-title'(props: { page: MPage | MPageFragment }): any;
@@ -209,6 +210,22 @@ export interface StageOptions {
   beforeDblclick?: (event: MouseEvent) => Promise<boolean | void> | boolean | void;
 }
 
+/**
+ * 节点校验错误信息，按来源（属性表单 / 样式表单）分别保存错误文案。
+ * 属性表单与样式表单是两个独立的 FormPanel，均指向同一节点，故以来源为键，
+ * 避免某个面板校验通过时误清另一个面板记录的错误。
+ * 节点视为存在错误当且仅当任一来源存在非空文本。
+ */
+export interface NodeInvalidInfo {
+  /** 属性表单校验错误文案（可能为包含 <br> 的 HTML） */
+  props?: string;
+  /** 样式表单校验错误文案（可能为包含 <br> 的 HTML） */
+  style?: string;
+}
+
+/** 节点校验错误来源 */
+export type NodeInvalidSource = keyof NodeInvalidInfo;
+
 export interface StoreState {
   root: MApp | null;
   page: MPage | MPageFragment | null;
@@ -219,6 +236,8 @@ export interface StoreState {
   stage: StageCore | null;
   stageLoading: boolean;
   modifiedNodeIds: Map<Id, Id>;
+  /** 校验失败的节点错误信息，按节点 id 存储，供组件树标记与保存拦截读取 */
+  invalidNodeIds: Map<Id, NodeInvalidInfo>;
   pageLength: number;
   pageFragmentLength: number;
   disabledMultiSelect: boolean;
@@ -296,6 +315,12 @@ export interface UiState {
   stageRect: StageRect;
   /** 编辑器列布局每一列的宽度，分为左中右三列 */
   columnWidth: GetColumnWidth;
+  /** 编辑器列布局左侧列最小宽度 */
+  minLeftColumnWidth: number;
+  /** 编辑器列布局中间列最小宽度 */
+  minCenterColumnWidth: number;
+  /** 编辑器列布局右侧列最小宽度 */
+  minRightColumnWidth: number;
   /** 是否显示画布参考线，true: 显示，false: 不显示，默认为true */
   showGuides: boolean;
   /** 画布上是否存在参考线 */
@@ -844,6 +869,10 @@ export interface StepExtra {
   selectedAfter?: Id[];
   /** 本次操作涉及的节点 id 集合（page 类型） */
   modifiedNodeIds?: Map<Id, Id>;
+  /** 操作前的节点校验错误快照，撤销后还原（使撤销一个「校验失败」的改动后错误消失） */
+  invalidNodeIdsBefore?: Map<Id, NodeInvalidInfo>;
+  /** 操作后的节点校验错误快照，重做后还原（使重做后错误恢复） */
+  invalidNodeIdsAfter?: Map<Id, NodeInvalidInfo>;
   [key: string]: any;
 }
 // #endregion StepExtra
@@ -1200,9 +1229,24 @@ export interface PageBarSortOptions extends PartSortableOptions {
 }
 // #endregion PageBarSortOptions
 
+/**
+ * 右键菜单当前目标（侧栏树节点等）。
+ * 数据源 / 代码块面板通过 `customContentMenu` 的 `getTarget` 暴露，业务在 handler 内自行读取。
+ */
+export interface ContentMenuTarget {
+  /** 目标 ID */
+  id: string;
+  /** 原始节点数据（树节点等） */
+  data?: TreeNodeData;
+}
+
+export type ContentMenuType = 'layer' | 'data-source' | 'viewer' | 'code-block';
+
 export type CustomContentMenuFunction = (
   menus: (MenuButton | MenuComponent)[],
-  type: 'layer' | 'data-source' | 'viewer' | 'code-block',
+  type: ContentMenuType,
+  /** 读取当前右键目标；数据源 / 代码块面板会传入，图层 / 画布一般不需要 */
+  getTarget?: () => ContentMenuTarget | null,
 ) => (MenuButton | MenuComponent)[];
 
 export interface EditorEvents {
@@ -1225,6 +1269,8 @@ export interface EditorEvents {
    * add / remove / update 触发本事件；如需区分「用户操作」与「撤销重做」请配合 `history-change`。
    */
   change: [event: EditorChangeEvent];
+  /** 节点校验错误状态发生变化时触发，携带当前完整的错误 Map（供非响应式消费方订阅） */
+  'invalid-node-change': [invalidNodeIds: Map<Id, NodeInvalidInfo>];
 }
 
 // #region EditorChangeEvent
@@ -1352,6 +1398,14 @@ export interface DiffDialogPayload {
   targetLabel?: string;
   /** 用于标题展示的目标 id */
   id?: string | number;
+  /**
+   * 指定打开时的初始对比模式：
+   * - before：该步骤修改前 vs 修改后
+   * - current：该步骤修改后 vs 当前最新值
+   * 不传时按是否存在「修改后的值」/「当前值」自动推断。
+   * 若指定的模式当前不可用（对应数据缺失），将回退到自动推断结果。
+   */
+  mode?: 'before' | 'current';
 }
 
 /**
@@ -1408,6 +1462,12 @@ export interface UseHistoryRevertOptions {
    * 以保证两处 filterFunction 读取到一致的运行态上下文。
    */
   getPropsPanelFormState?: () => FormState | undefined;
+  /**
+   * 内置页面 / 数据源 / 代码块的差异 / 回滚确认弹窗默认宽度（透传给 TMagicDialog 的 `width`），
+   * 如 `'1200px'` / `'80%'`。缺省时使用弹窗内置默认宽度（900px）。
+   * 业务自有历史（`viewDiff` / `confirmAndRevert`）可在调用时通过各自入参的 `width` 单独覆盖。
+   */
+  dialogWidth?: string;
 }
 
 /**
@@ -1428,6 +1488,16 @@ export interface CustomDiffFormOptions {
    * 对比弹窗会用它覆盖 CompareForm 中同名扩展字段，避免上下文不一致。
    */
   compareFormState?: FormState;
+  /**
+   * 差异 / 确认回滚弹窗宽度（透传给 HistoryDiffDialog 的 TMagicDialog `width`），
+   * 如 `'1200px'` / `'80%'`。缺省时使用弹窗内置默认宽度（900px）。
+   */
+  width?: string;
+  /**
+   * 差异 / 确认回滚弹窗内 form 表单的尺寸（透传给 CompareForm 的 `size`），
+   * 可选 `'large' | 'default' | 'small'`，缺省时使用表单内置默认尺寸。
+   */
+  size?: FieldSize;
 }
 
 /**

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

@@ -235,19 +235,37 @@ export const getCascaderOptionsFromFields = (
   return result;
 };
 
-export const getFieldType = (ds: DataSourceSchema | undefined, fieldNames: string[]) => {
-  let fields = ds?.fields;
-  let type = '';
-
-  for (const fieldName of fieldNames) {
-    if (!fields?.length) return '';
-
-    const field = fields.find((f) => f.name === fieldName);
-    if (!field) return '';
+/**
+ * 按字段名路径下钻 DataSchema。
+ * @param skipNumberIndices 为 true 时跳过数字段（模板路径中的数组下标，如 arr[0].x）
+ */
+export const resolveFieldByPath = (
+  fields: DataSchema[] | undefined,
+  fieldNames: string[],
+  options: { skipNumberIndices?: boolean } = {},
+): { ok: boolean; field?: DataSchema; fields: DataSchema[] } => {
+  let currentFields = fields || [];
+  let field: DataSchema | undefined;
 
-    type = field.type || '';
-    fields = field.fields;
+  for (const name of fieldNames) {
+    if (options.skipNumberIndices && isNumber(name)) {
+      continue;
+    }
+    if (!currentFields.length) {
+      return { ok: false, fields: currentFields };
+    }
+    field = currentFields.find((item) => item.name === name);
+    if (!field) {
+      return { ok: false, fields: currentFields };
+    }
+    currentFields = field.fields || [];
   }
 
-  return type;
+  return { field, ok: true, fields: currentFields };
+};
+
+export const getFieldType = (ds: DataSourceSchema | undefined, fieldNames: string[]) => {
+  const { ok, field } = resolveFieldByPath(ds?.fields, fieldNames);
+  if (!ok) return '';
+  return field?.type || '';
 };