@tmagic/editor 1.8.0-manmanyu.9 → 1.8.0

package/src/type.ts

@@ -33,7 +33,8 @@ import type {
   MPage,
   MPageFragment,
 } from '@tmagic/core';
-import type { ChangeRecord, FormConfig, FormState, TableColumnConfig, TypeFunction } from '@tmagic/form';
+import type { FieldSize } from '@tmagic/design';
+import type { ChangeRecord, FormConfig, TableColumnConfig, TypeFunction } from '@tmagic/form';
 import type StageCore from '@tmagic/stage';
 import type {
   CanDropIn,
@@ -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;
@@ -139,6 +140,7 @@ export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> |
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
 
 export interface EditorInstallOptions {
+  flat?: boolean;
   parseDSL: <T = any>(dsl: string) => T;
   customCreateMonacoEditor: (
     monaco: typeof import('monaco-editor'),
@@ -170,12 +172,26 @@ export interface Services {
 }
 // #endregion Services
 
+declare module '@tmagic/form-schema' {
+  interface FormContext {
+    /** 编辑器服务集合（由 Editor / FormPanel provide） */
+    services?: Services;
+    /** 当前画布 Stage 实例（由 Editor / FormPanel provide） */
+    stage?: any;
+  }
+}
+
 export interface StageOptions {
   runtimeUrl?: string;
   autoScrollIntoView?: boolean;
   containerHighlightClassName?: string;
   containerHighlightDuration?: number;
   containerHighlightType?: ContainerHighlightType;
+  /**
+   * 是否仅在新增组件（从组件列表拖入新组件）时才启用识别容器，
+   * 开启后在画布中拖动已有组件不会识别容器，默认 false
+   */
+  containerHighlightAddOnly?: boolean;
   disabledDragStart?: boolean;
   render?: (stage: StageCore) => HTMLDivElement | void | Promise<HTMLDivElement | void>;
   moveableOptions?: CustomizeMoveableOptions;
@@ -209,6 +225,26 @@ export interface StageOptions {
   beforeDblclick?: (event: MouseEvent) => Promise<boolean | void> | boolean | void;
 }
 
+// #region NodeInvalidInfo
+/**
+ * 节点校验错误信息，按来源（属性表单 / 样式表单）分别保存错误文案。
+ * 属性表单与样式表单是两个独立的 FormPanel，均指向同一节点，故以来源为键，
+ * 避免某个面板校验通过时误清另一个面板记录的错误。
+ * 节点视为存在错误当且仅当任一来源存在非空文本。
+ */
+export interface NodeInvalidInfo {
+  /** 属性表单校验错误文案（可能为包含 <br> 的 HTML） */
+  props?: string;
+  /** 样式表单校验错误文案（可能为包含 <br> 的 HTML） */
+  style?: string;
+}
+// #endregion NodeInvalidInfo
+
+// #region NodeInvalidSource
+/** 节点校验错误来源 */
+export type NodeInvalidSource = keyof NodeInvalidInfo;
+// #endregion NodeInvalidSource
+
 export interface StoreState {
   root: MApp | null;
   page: MPage | MPageFragment | null;
@@ -219,6 +255,8 @@ export interface StoreState {
   stage: StageCore | null;
   stageLoading: boolean;
   modifiedNodeIds: Map<Id, Id>;
+  /** 校验失败的节点错误信息，按节点 id 存储，供组件树标记与保存拦截读取 */
+  invalidNodeIds: Map<Id, NodeInvalidInfo>;
   pageLength: number;
   pageFragmentLength: number;
   disabledMultiSelect: boolean;
@@ -278,6 +316,7 @@ export interface StageRect {
   height: number | string;
 }
 
+// #region UiState
 export interface UiState {
   /** 当前点击画布是否触发选中，true: 不触发，false: 触发，默认为false */
   uiSelectMode: boolean;
@@ -296,6 +335,12 @@ export interface UiState {
   stageRect: StageRect;
   /** 编辑器列布局每一列的宽度，分为左中右三列 */
   columnWidth: GetColumnWidth;
+  /** 编辑器列布局左侧列最小宽度 */
+  minLeftColumnWidth: number;
+  /** 编辑器列布局中间列最小宽度 */
+  minCenterColumnWidth: number;
+  /** 编辑器列布局右侧列最小宽度 */
+  minRightColumnWidth: number;
   /** 是否显示画布参考线，true: 显示，false: 不显示，默认为true */
   showGuides: boolean;
   /** 画布上是否存在参考线 */
@@ -329,6 +374,7 @@ export interface UiState {
     height: number;
   };
 }
+// #endregion UiState
 
 // #region EditorNodeInfo
 export interface EditorNodeInfo {
@@ -541,6 +587,46 @@ export interface CompareFormLoadConfigContext {
  * 可通过 `ctx.defaultLoadConfig()` 复用默认结果再做二次加工。
  */
 export type CompareFormLoadConfig = (ctx: CompareFormLoadConfigContext) => FormConfig | Promise<FormConfig>;
+
+/**
+ * CompareForm / ViewForm 共用的基础 props。
+ * 两者都基于同一套「按 category 加载 FormConfig + 注入 services/stage」的逻辑（见 useCompareForm），
+ * 差异仅在于是否做新旧值对比。这里抽出公共字段避免重复定义。
+ */
+export interface CompareFormBaseProps {
+  /** 当前值（对比场景下为修改后的值） */
+  value: Partial<MNode> | Partial<DataSourceSchema> | Partial<CodeBlockContent> | Record<string, any>;
+  /**
+   * 类型说明：
+   * - `category` 为 `node` 时，`type` 为节点组件的类型，例如 'text'、'button'、'page'、'container' 等
+   * - `category` 为 `data-source` 时，`type` 为数据源类型，例如 'base'、'http'
+   * - `category` 为 `code-block` 时，`type` 可不传
+   */
+  type?: string;
+  /** 表单配置类别，决定从哪里取 FormConfig */
+  category?: CompareCategory;
+  /** 数据源代码块场景下的数据源类型（base/http），用于代码块表单中"执行时机"展示 */
+  dataSourceType?: string;
+  labelWidth?: string;
+  /**
+   * 外层容器高度。设置后表单内容超出时会在组件内部出现滚动条，
+   * 避免 dialog / 面板使用方需要自行处理滚动。可传任意 CSS 长度，例如 `60vh` / `400px` / `100%`。
+   */
+  height?: string;
+  /**
+   * 表单内组件的尺寸（透传给 MForm 的 `size`），可选 'large' | 'default' | 'small'。
+   * 缺省时使用 MForm 内置默认尺寸。
+   */
+  size?: FieldSize;
+  /**
+   * 自定义 FormConfig 加载逻辑。传入后将接管内置的按 `category`(node/data-source/code-block)
+   * 取配置逻辑，调用方可根据业务自行返回（或异步返回）表单配置。可通过
+   * `ctx.defaultLoadConfig()` 复用默认结果再做二次加工。
+   */
+  loadConfig?: CompareFormLoadConfig;
+  /** 编辑器服务集合，由调用方传入（不再通过 inject('services') 获取）。 */
+  services?: Services;
+}
 // #endregion CompareForm
 
 // #region SideItemKey
@@ -844,6 +930,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 +1290,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 {
@@ -1218,8 +1323,63 @@ export interface EditorEvents {
   'move-layer': [offset: number | LayerOffset];
   'drag-to': [data: { targetIndex: number; configs: MNode | MNode[]; targetParent: MContainer }];
   'history-change': [data: MPage | MPageFragment];
+  /**
+   * DSL 发生变更后统一触发，免去分别监听 add / remove / update / move-layer / drag-to。
+   * 回调参数为 {@link EditorChangeEvent}，按 `type` 区分操作类型并携带各自的操作内容（payload）
+   * 以及变更所在的当前 page（可能为 null）。撤销 / 重做内部同样会经由
+   * add / remove / update 触发本事件；如需区分「用户操作」与「撤销重做」请配合 `history-change`。
+   */
+  change: [event: EditorChangeEvent];
+  /** 节点校验错误状态发生变化时触发，携带当前完整的错误 Map（供非响应式消费方订阅） */
+  'invalid-node-change': [invalidNodeIds: Map<Id, NodeInvalidInfo>];
 }
 
+// #region EditorChangeEvent
+/** `change` 事件中单个变更项：变更的 node 及其所属的 page（可能为 null）。 */
+export interface EditorChangeItem {
+  node: MNode;
+  page: StoreState['page'];
+}
+
+/** `update` 类型变更项：node 为前后快照及 form 端变更记录，page 为其所属页面。 */
+export interface EditorUpdateChangeItem {
+  node: { newNode: MNode; oldNode: MNode; changeRecords?: ChangeRecord[] };
+  page: StoreState['page'];
+}
+
+/** {@link EditorEvents.change} 各操作类型共有的历史相关字段。 */
+export interface EditorChangeEventHistoryMeta {
+  /**
+   * 本次变更的「历史来源」（调用 DSL 操作时传入的 {@link HistoryOpOptions.historySource}，
+   * 撤销 / 重做时则为被应用 step 上记录的 `source`），未携带时为 undefined。
+   */
+  historySource?: HistoryOpSource;
+  /**
+   * 本次操作是否未写入历史记录（即调用时传入的 {@link HistoryOpOptions.doNotPushHistory}，缺省为 false）；
+   * 撤销 / 重做路径补发的事件恒为 true（撤销/重做本身不再入栈）。
+   */
+  doNotPushHistory?: boolean;
+}
+
+/**
+ * {@link EditorEvents.change} 的回调参数：以 `type` 区分操作类型，并携带对应的操作内容。
+ * `data` 为本次变更的节点列表，每项包含 node 及其所属的 page（可能为 null）；
+ * `move-layer` 额外带层级偏移 `offset`，`drag-to` 额外带目标位置 `targetIndex` / `targetParent`；
+ * 历史相关字段（historySource / doNotPushHistory）见 {@link EditorChangeEventHistoryMeta}。
+ */
+export type EditorChangeEvent =
+  | ({ type: 'add'; data: EditorChangeItem[] } & EditorChangeEventHistoryMeta)
+  | ({ type: 'remove'; data: EditorChangeItem[] } & EditorChangeEventHistoryMeta)
+  | ({ type: 'update'; data: EditorUpdateChangeItem[] } & EditorChangeEventHistoryMeta)
+  | ({ type: 'move-layer'; data: EditorChangeItem[]; offset: number | LayerOffset } & EditorChangeEventHistoryMeta)
+  | ({
+      type: 'drag-to';
+      data: EditorChangeItem[];
+      targetIndex: number;
+      targetParent: MContainer;
+    } & EditorChangeEventHistoryMeta);
+// #endregion EditorChangeEvent
+
 export interface HistoryEvents {
   change: [
     state: BaseStepValue | StepValue | CodeBlockStepValue | DataSourceStepValue,
@@ -1233,6 +1393,12 @@ export interface HistoryEvents {
   'mark-saved': [{ kind: HistoryStepType; id?: Id }];
   clear: [{ id: Id; stepType: HistoryStepType }];
   'marker-change': [{ id: Id; marker: StepValue; stepType: HistoryStepType }];
+  /**
+   * 页面 / 页面片结构变更（新增 / 删除）时派发，见 {@link HistoryService.notifyPageStructureChange}。
+   * 一次操作（add / remove / setRoot 整体替换）涉及多个页面时合并为**一个**事件；
+   * `add` / `remove` 分别为本次新增与删除的页面列表（其一可为空数组）。
+   */
+  'page-structure-change': [change: { add: (MPage | MPageFragment)[]; remove: (MPage | MPageFragment)[] }];
 }
 
 export const canUsePluginMethods = {
@@ -1301,6 +1467,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 {
   /** 表单类别 */
@@ -1319,6 +1508,14 @@ export interface DiffDialogPayload {
   targetLabel?: string;
   /** 用于标题展示的目标 id */
   id?: string | number;
+  /**
+   * 指定打开时的初始对比模式：
+   * - before：该步骤修改前 vs 修改后
+   * - current：该步骤修改后 vs 当前最新值
+   * 不传时按是否存在「修改后的值」/「当前值」自动推断。
+   * 若指定的模式当前不可用（对应数据缺失），将回退到自动推断结果。
+   */
+  mode?: 'before' | 'current';
 }
 
 /**
@@ -1353,6 +1550,8 @@ export interface HistoryBucketConfig<T extends BaseStepValue = BaseStepValue> ex
   showInitial?: boolean;
   /** 是否支持「跳转到该记录」(goto)，默认 true。 */
   gotoEnabled?: boolean;
+  /** 是否展示顶部「清空」按钮，默认 true。无需提供清空能力的自定义历史可传 false。 */
+  showClear?: boolean;
 }
 
 export interface UseHistoryRevertOptions {
@@ -1363,10 +1562,11 @@ export interface UseHistoryRevertOptions {
    */
   appContext?: AppContext | null;
   /**
-   * 透传给差异确认弹窗的 `extendState`（即 Editor 的 `extendFormState`），
-   * 使对比表单中依赖业务上下文的 `display` / `disabled` 等 filterFunction 正常工作。
+   * 内置页面 / 数据源 / 代码块的差异 / 回滚确认弹窗默认宽度（透传给 TMagicDialog 的 `width`），
+   * 如 `'1200px'` / `'80%'`。缺省时使用弹窗内置默认宽度（900px）。
+   * 业务自有历史（`viewDiff` / `confirmAndRevert`）可在调用时通过各自入参的 `width` 单独覆盖。
    */
-  extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+  dialogWidth?: string;
 }
 
 /**
@@ -1382,6 +1582,16 @@ export interface CustomDiffFormOptions {
   loadConfig?: CompareFormLoadConfig;
   /** 需要走 self diff 的字段类型（如模块的 mod-cond）。 */
   selfDiffFieldTypes?: string[];
+  /**
+   * 差异 / 确认回滚弹窗宽度（透传给 HistoryDiffDialog 的 TMagicDialog `width`），
+   * 如 `'1200px'` / `'80%'`。缺省时使用弹窗内置默认宽度（900px）。
+   */
+  width?: string;
+  /**
+   * 差异 / 确认回滚弹窗内 form 表单的尺寸（透传给 CompareForm 的 `size`），
+   * 可选 `'large' | 'default' | 'small'`，缺省时使用表单内置默认尺寸。
+   */
+  size?: FieldSize;
 }
 
 /**

package/src/utils/code-block.ts

@@ -103,6 +103,7 @@ export const getCodeBlockFormConfig = (options: GetCodeBlockFormConfigOptions =
         const list = [
           { text: '初始化前', value: 'beforeInit' },
           { text: '初始化后', value: 'afterInit' },
+          { text: '页面渲染后', value: 'mounted' },
         ];
         if (dataSourceType?.() !== 'base') {
           list.push({ text: '请求前', value: 'beforeRequest' });

package/src/utils/config.ts

@@ -16,14 +16,22 @@
  * limitations under the License.
  */
 
+import { ref } from 'vue';
+
 import { EditorInstallOptions } from '@editor/type';
 
 let $TMAGIC_EDITOR: EditorInstallOptions = {} as any;
 
+// 用 ref 持有 flat 全局开关：const 引用本身不可变，符合 `import/no-mutable-exports`；
+// 通过 `.value` 改值仍保持模块级响应式语义，与 editor/plugin.ts、design/index.ts 里
+// 的同名变量写法对齐。
+const isGlobalFlat = ref(false);
+
 const setEditorConfig = (option: EditorInstallOptions): void => {
   $TMAGIC_EDITOR = option;
+  isGlobalFlat.value = option.flat ?? false;
 };
 
 const getEditorConfig = <K extends keyof EditorInstallOptions>(key: K): EditorInstallOptions[K] => $TMAGIC_EDITOR[key];
 
-export { getEditorConfig, setEditorConfig };
+export { getEditorConfig, isGlobalFlat, setEditorConfig };

package/src/utils/const.ts

@@ -5,11 +5,11 @@ export const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
 export const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
 export const PROPS_PANEL_WIDTH_STORAGE_KEY = '$MagicEditorPropsPanelWidthData';
 
-export const DEFAULT_LEFT_COLUMN_WIDTH = 310;
+export const DEFAULT_LEFT_COLUMN_WIDTH = 345;
 export const DEFAULT_RIGHT_COLUMN_WIDTH = 480;
 
-// 2026-06-11 设计稿修改，固定左侧栏存在时最小宽度为238px
-export const MIN_LEFT_COLUMN_WIDTH = 238;
+// 2026-06-11 设计稿修改，固定左侧栏存在时最小宽度为 345
+export const MIN_LEFT_COLUMN_WIDTH = 345;
 export const MIN_CENTER_COLUMN_WIDTH = 400;
 export const MIN_RIGHT_COLUMN_WIDTH = 300;
 

package/src/utils/content-menu.ts

@@ -2,7 +2,7 @@ import { computed, markRaw, type ShallowRef } from 'vue';
 import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
 import { cloneDeep, Id, MContainer, NodeType } from '@tmagic/core';
-import { calcValueByFontsize, isPage, isPageFragment } from '@tmagic/utils';
+import { calcValueByFontsize, isPage, isPageOrFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import type { HistoryOpSource, MenuButton, Services } from '@editor/type';
@@ -20,7 +20,7 @@ export const useDeleteMenu = (historySource?: HistoryOpSource): MenuButton => ({
   icon: Delete,
   display: ({ editorService }) => {
     const node = editorService.get('node');
-    return node?.type !== NodeType.ROOT && !isPage(node) && !isPageFragment(node);
+    return node?.type !== NodeType.ROOT && !isPageOrFragment(node);
   },
   handler: ({ editorService }) => {
     const nodes = editorService.get('nodes');

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

@@ -37,6 +37,7 @@ const dataSourceFormConfig: TabConfig = {
           name: 'events',
           src: 'datasource',
           type: 'event-select',
+          defaultValue: [],
         },
       ],
     },
@@ -235,19 +236,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[]; failedName?: string } => {
+  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, failedName: name };
+    }
+    field = currentFields.find((item) => item.name === name);
+    if (!field) {
+      return { ok: false, fields: currentFields, failedName: name };
+    }
+    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 || '';
 };