@tmagic/editor 1.8.0-beta.11 → 1.8.0-beta.13

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;
   /** 画布上是否存在参考线 */
@@ -541,6 +566,58 @@ 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.formState 的扩展字段，与 Editor 顶层的 `extendFormState`、
+   * PropsPanel 的 `extend-state` 语义一致。表单 item 的 `display` / `disabled` 等
+   * filterFunction 经常依赖这里注入的字段（如 stage、自定义业务上下文等），
+   * 因此在对比 / 展示场景下也需要透传，避免出现 `formState.xxx is undefined` 的运行时错误。
+   */
+  extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+  /**
+   * 外部透传的基础 formState（通常来自 PropsPanel 主属性表单）。
+   * 组件会提取其中的扩展字段覆盖到自己的 formState，保证 filterFunction 上下文一致。
+   */
+  baseFormState?: FormState;
+  /**
+   * 表单内组件的尺寸（透传给 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 +921,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 +1281,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 +1321,8 @@ export interface EditorEvents {
    * add / remove / update 触发本事件；如需区分「用户操作」与「撤销重做」请配合 `history-change`。
    */
   change: [event: EditorChangeEvent];
+  /** 节点校验错误状态发生变化时触发，携带当前完整的错误 Map（供非响应式消费方订阅） */
+  'invalid-node-change': [invalidNodeIds: Map<Id, NodeInvalidInfo>];
 }
 
 // #region EditorChangeEvent
@@ -1447,6 +1545,11 @@ export interface CustomDiffFormOptions {
    * 如 `'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 || '';
 };

package/src/utils/event.ts

@@ -0,0 +1,224 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2025 Tencent.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { EventOption, Id, MComponent, MContainer } from '@tmagic/core';
+import type { CascaderOption } from '@tmagic/form';
+import { DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX, traverseNode } from '@tmagic/utils';
+
+import dataSourceService from '@editor/services/dataSource';
+import editorService from '@editor/services/editor';
+import eventsService from '@editor/services/events';
+import { getCascaderOptionsFromFields } from '@editor/utils/data-source';
+
+export const EVENT_NAME_VALUE_SEPARATOR = '.';
+
+export type EventNameSelectOption = { text: string; value: string };
+export type EventNameOption = EventOption | CascaderOption | EventNameSelectOption;
+
+/** 与 EventSelect 中 checkStrictly 一致：component 为 false，其余为 true */
+export const isEventNameCheckStrictly = (src?: string) => src !== 'component';
+
+/** 将动作 method 值规范为与 collectEventNameOptionValues 一致的字符串（cascader 无 valueSeparator 时存数组） */
+export const normalizeCompActionValue = (value: unknown): string => {
+  if (Array.isArray(value)) {
+    return value.map((item) => `${item}`).join(EVENT_NAME_VALUE_SEPARATOR);
+  }
+  if (value === null || value === undefined || value === '') {
+    return '';
+  }
+  return `${value}`;
+};
+
+/**
+ * 组装事件名称下拉/级联 options，与 EventSelect 默认 eventNameConfig.options 逻辑一致。
+ */
+export const getEventNameOptions = (
+  src: string | undefined,
+  formValue: Record<string, any> = {},
+): EventNameOption[] => {
+  if (!formValue.type) {
+    return [];
+  }
+
+  if (src === 'component') {
+    let events: EventOption[] | CascaderOption[] = eventsService.getEvent(formValue.type) || [];
+
+    if (formValue.type === 'page-fragment-container' && formValue.pageFragmentId) {
+      const pageFragment = editorService.get('root')?.items?.find((page) => page.id === formValue.pageFragmentId);
+      if (!pageFragment) {
+        return [];
+      }
+
+      events = [
+        {
+          label: pageFragment.name || '页面片容器',
+          value: pageFragment.id,
+          children: events,
+        },
+      ];
+
+      (pageFragment.items || []).forEach((node) => {
+        traverseNode<MComponent | MContainer>(node, (current) => {
+          const nodeEvents = (current.type && eventsService.getEvent(current.type)) || [];
+          (events as CascaderOption[]).push({
+            label: `${current.name}_${current.id}`,
+            value: `${current.id}`,
+            children: nodeEvents,
+          });
+        });
+      });
+
+      return events;
+    }
+
+    return (events as EventOption[]).map((option) => ({
+      text: option.label,
+      value: option.value,
+    }));
+  }
+
+  if (src === 'datasource') {
+    const events: EventNameOption[] = dataSourceService.getFormEvent(formValue.type) || [];
+    const dataSource = dataSourceService.getDataSourceById(formValue.id);
+    const fields = dataSource?.fields || [];
+
+    if (fields.length > 0) {
+      return [
+        ...events,
+        {
+          label: '数据变化',
+          value: DATA_SOURCE_FIELDS_CHANGE_EVENT_PREFIX,
+          children: getCascaderOptionsFromFields(fields),
+        },
+      ];
+    }
+
+    return events;
+  }
+
+  return [];
+};
+
+/** 将 select / cascader options 展平为最终写入 name 的字符串集合（cascader 用 `.` 拼接） */
+export const collectEventNameOptionValues = (
+  options: EventNameOption[],
+  checkStrictly: boolean,
+  prefix: any[] = [],
+  result: Set<string> = new Set(),
+): Set<string> => {
+  options.forEach((option) => {
+    if (typeof option?.value === 'undefined') {
+      return;
+    }
+
+    const path = [...prefix, option.value];
+    const joined = path.map((item) => `${item}`).join(EVENT_NAME_VALUE_SEPARATOR);
+    const children = 'children' in option ? option.children : undefined;
+
+    if (Array.isArray(children) && children.length) {
+      if (checkStrictly) {
+        result.add(joined);
+      }
+      collectEventNameOptionValues(children as EventNameOption[], checkStrictly, path, result);
+      return;
+    }
+
+    result.add(joined);
+  });
+
+  return result;
+};
+
+/**
+ * 解析 event-select 允许的 name 集合。
+ * 自定义 eventNameConfig.options 时返回 null（跳过枚举校验）。
+ */
+export const getEventNameAllowedValues = (
+  config: { src?: string; eventNameConfig?: { options?: unknown } } = {},
+  formValue: Record<string, any> = {},
+): Set<string> | null => {
+  if (typeof config.eventNameConfig?.options !== 'undefined') {
+    return null;
+  }
+
+  if (config.src !== 'component' && config.src !== 'datasource') {
+    return null;
+  }
+
+  return collectEventNameOptionValues(getEventNameOptions(config.src, formValue), isEventNameCheckStrictly(config.src));
+};
+
+/**
+ * 组装联动组件动作下拉/级联 options，与 EventSelect 默认 compActionConfig.options 逻辑一致。
+ */
+export const getCompActionOptions = (toId?: Id): EventNameOption[] => {
+  if (typeof toId === 'undefined' || toId === null || toId === '') {
+    return [];
+  }
+
+  const node = editorService.getNodeById(toId);
+  if (!node?.type) {
+    return [];
+  }
+
+  let methods: EventOption[] | CascaderOption[] = eventsService.getMethod(node.type, toId) || [];
+
+  if (node.type === 'page-fragment-container' && node.pageFragmentId) {
+    const pageFragment = editorService.get('root')?.items?.find((page) => page.id === node.pageFragmentId);
+    if (!pageFragment) {
+      return [];
+    }
+
+    methods = [];
+    (pageFragment.items || []).forEach((item: MComponent | MContainer) => {
+      traverseNode<MComponent | MContainer>(item, (current) => {
+        const nodeMethods = (current.type && eventsService.getMethod(current.type, current.id)) || [];
+
+        if (nodeMethods.length) {
+          (methods as CascaderOption[]).push({
+            label: `${current.name}_${current.id}`,
+            value: `${current.id}`,
+            children: nodeMethods,
+          });
+        }
+      });
+    });
+
+    return methods;
+  }
+
+  return (methods as EventOption[]).map((method) => ({
+    text: method.label,
+    value: method.value,
+  }));
+};
+
+/**
+ * 解析 event-select 联动组件动作允许的 method 集合。
+ * 自定义 compActionConfig.options 时返回 null（跳过枚举校验）。
+ */
+export const getCompActionAllowedValues = (
+  config: { src?: string; compActionConfig?: { options?: unknown } } = {},
+  model: { to?: Id } = {},
+): Set<string> | null => {
+  if (typeof config.compActionConfig?.options !== 'undefined') {
+    return null;
+  }
+
+  return collectEventNameOptionValues(getCompActionOptions(model.to), isEventNameCheckStrictly(config.src));
+};

package/src/utils/index.ts

@@ -30,4 +30,6 @@ export * from './undo-redo';
 export * from './indexed-db';
 export * from './history';
 export * from './const';
+export * from './type-match-rules';
+export * from './event';
 export { default as loadMonaco } from './monaco-editor';

package/src/utils/monaco-editor.ts

@@ -1,7 +1,34 @@
 let cached: Promise<typeof import('monaco-editor')> | undefined;
 
+// 是否为 Monaco 内部抛出的取消错误（Canceled）
+// 销毁编辑器时，WordHighlighter 内部挂起的 Delayer 会被取消，
+// 取消时 reject 出的 Canceled 错误没有 catch，会变成 "Uncaught (in promise) Canceled"，
+// 该错误本身无害，这里做一次性、全局的兜底处理，仅吞掉这类取消错误。
+const isMonacoCanceledError = (reason: any): boolean => {
+  if (!reason) return false;
+  if (reason instanceof Error) {
+    return reason.name === 'Canceled' || reason.message === 'Canceled';
+  }
+  return reason === 'Canceled';
+};
+
+let canceledRejectionHandlerInstalled = false;
+const installCanceledRejectionHandler = () => {
+  if (canceledRejectionHandlerInstalled || typeof globalThis.addEventListener !== 'function') return;
+  canceledRejectionHandlerInstalled = true;
+
+  globalThis.addEventListener('unhandledrejection', (event: PromiseRejectionEvent) => {
+    if (isMonacoCanceledError(event.reason)) {
+      // 阻止其冒泡到控制台，避免无意义的报错噪音
+      event.preventDefault();
+    }
+  });
+};
+
 export default () => {
   if (!cached) {
+    installCanceledRejectionHandler();
+
     cached = Promise.all([import('emmet-monaco-es'), import('monaco-editor')]).then(([emmet, monaco]) => {
       const { emmetHTML, emmetCSS } = emmet;
       emmetHTML(monaco);