@tmagic/editor 1.8.0-beta.1 → 1.8.0-beta.3

package/src/type.ts

@@ -22,7 +22,17 @@ import type * as Monaco from 'monaco-editor';
 import type { default as Sortable, Options, SortableEvent } from 'sortablejs';
 import type { PascalCasedProperties, Writable } from 'type-fest';
 
-import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/core';
+import type {
+  CodeBlockContent,
+  CodeBlockDSL,
+  DataSourceSchema,
+  Id,
+  MApp,
+  MContainer,
+  MNode,
+  MPage,
+  MPageFragment,
+} from '@tmagic/core';
 import type { ChangeRecord, FormConfig, TableColumnConfig, TypeFunction } from '@tmagic/form';
 import type StageCore from '@tmagic/stage';
 import type {
@@ -138,7 +148,7 @@ export interface EditorInstallOptions {
   customCreateMonacoDiffEditor: (
     monaco: typeof import('monaco-editor'),
     codeEditorEl: HTMLElement,
-    options: Monaco.editor.IStandaloneEditorConstructionOptions & { editorCustomType?: string },
+    options: Monaco.editor.IStandaloneDiffEditorConstructionOptions & { editorCustomType?: string },
   ) => Promise<Monaco.editor.IStandaloneDiffEditor> | Monaco.editor.IStandaloneDiffEditor;
   [key: string]: any;
 }
@@ -189,6 +199,11 @@ export interface StageOptions {
    */
   alwaysMultiSelect?: boolean;
   disabledRule?: boolean;
+  /**
+   * 禁用「非点击画布选中组件时（如从图层树、面包屑等外部选中），对选中区域做高亮闪烁提示」，
+   * 默认 false（即默认开启闪烁）
+   */
+  disabledFlashTip?: boolean;
   zoom?: number;
   /** 画布双击前的钩子函数，返回 false 则阻止默认的双击行为 */
   beforeDblclick?: (event: MouseEvent) => Promise<boolean | void> | boolean | void;
@@ -407,6 +422,7 @@ export interface MenuComponent {
  * 'rule': 显示隐藏标尺
  * 'scale-to-original': 缩放到实际大小
  * 'scale-to-fit': 缩放以适应
+ * 'history-list': 历史记录面板（按 页面 / 数据源 / 代码块 三个 tab 展示，相邻同目标修改自动合并）
  */
 // #region MenuItem
 export type MenuItem =
@@ -421,6 +437,7 @@ export type MenuItem =
   | 'rule'
   | 'scale-to-original'
   | 'scale-to-fit'
+  | 'history-list'
   | MenuButton
   | MenuComponent
   | string;
@@ -463,6 +480,63 @@ export interface SideComponent extends MenuComponent {
 }
 // #endregion SideComponent
 
+// #region HistoryListExtraTab
+/**
+ * 历史记录面板（HistoryListPanel）的自定义扩展 tab。
+ *
+ * 业务方可通过 Editor 的 `historyListExtraTabs` 注入额外的历史记录 tab，
+ * 例如某个自定义模块维护自己的操作历史时，可以在历史记录面板中增加一个
+ * 独立的 tab 来展示与回滚。内置的「页面 / 数据源 / 代码块」三个 tab 之后
+ * 会依次追加这些扩展 tab。
+ */
+export interface HistoryListExtraTab {
+  /** tab 唯一标识，作为 TMagicTabs 的 name */
+  name: string;
+  /** tab 显示文案，支持传入函数以展示动态内容（如记录数量） */
+  label: string | (() => string);
+  /** tab 内容区渲染的组件（Vue 组件或字符串标签） */
+  component: any;
+  /** 传入内容组件的 props */
+  props?: Record<string, any>;
+  /** 内容组件的事件监听 */
+  listeners?: Record<string, (..._args: any[]) => any>;
+}
+// #endregion HistoryListExtraTab
+
+// #region CompareForm
+/**
+ * 对比表单（CompareForm）的对比类型：
+ * - node: 节点组件，按 `type` 从 propsService 获取属性表单配置
+ * - data-source: 数据源，按 `type`(base/http/...) 从 dataSourceService 获取数据源表单配置
+ * - code-block: 数据源代码块，使用内置的代码块表单配置
+ */
+export type CompareCategory = 'node' | 'data-source' | 'code-block';
+
+/**
+ * 自定义 `loadConfig` 时回传的上下文，聚合了组件当前的对比入参，
+ * 方便调用方在外部按需拼装 FormConfig。
+ */
+export interface CompareFormLoadConfigContext {
+  /** 对比类型，见 CompareCategory */
+  category: string;
+  /** 节点 / 数据源类型 */
+  type?: string;
+  /** 数据源代码块场景下的数据源类型 */
+  dataSourceType?: string;
+  /**
+   * 内置的默认 FormConfig 加载逻辑（按 `category` 从 propsService / dataSourceService /
+   * 代码块工具取配置）。自定义 `loadConfig` 可调用它复用默认结果，再做二次加工。
+   */
+  defaultLoadConfig: () => Promise<FormConfig>;
+}
+
+/**
+ * 自定义 FormConfig 加载逻辑。传入后将接管内置的按 `category` 取配置逻辑，
+ * 可通过 `ctx.defaultLoadConfig()` 复用默认结果再做二次加工。
+ */
+export type CompareFormLoadConfig = (ctx: CompareFormLoadConfigContext) => FormConfig | Promise<FormConfig>;
+// #endregion CompareForm
+
 // #region SideItemKey
 export enum SideItemKey {
   COMPONENT_LIST = 'component-list',
@@ -627,18 +701,169 @@ export interface StepValue {
   indexMap?: Record<string, number>;
   /** opType 'remove': 被删除的节点及其位置信息 */
   removedItems?: { node: MNode; parentId: Id; index: number }[];
-  /** opType 'update': 变更前后的节点快照 */
-  updatedItems?: { oldNode: MNode; newNode: MNode }[];
+  /**
+   * opType 'update': 变更前后的节点快照
+   *
+   * `changeRecords` 来自 form 端的 propPath/value 列表，撤销/重做时只对这些 propPath 做局部更新；
+   * 缺省（未传 / 空数组）才退化为整节点替换。
+   */
+  updatedItems?: { oldNode: MNode; newNode: MNode; changeRecords?: ChangeRecord[] }[];
+  /**
+   * 调用方可选传入的人类可读描述（如「调整按钮颜色」），用于历史面板展示。
+   * 不影响 undo/redo 行为；缺省时面板会根据节点 / propPath 自动生成描述。
+   */
+  historyDescription?: string;
+  /**
+   * 入栈时间戳（毫秒）。在 historyService.push 时自动写入（若调用方未指定），仅用于历史面板展示。
+   */
+  timestamp?: number;
 }
 // #endregion StepValue
 
+// #region CodeBlockStepValue
+/**
+ * 代码块历史记录条目。按 codeBlock.id 分组保存到 historyState.codeBlockState。
+ * - 新增：oldContent = null，newContent = 新内容
+ * - 更新：oldContent / newContent 都为对应内容
+ * - 删除：newContent = null，oldContent = 删除前内容
+ */
+export interface CodeBlockStepValue {
+  /** 关联的代码块 id */
+  id: Id;
+  /** 变更前的代码块内容，新增时为 null */
+  oldContent: CodeBlockContent | null;
+  /** 变更后的代码块内容，删除时为 null */
+  newContent: CodeBlockContent | null;
+  /**
+   * form 端 propPath/value 列表。撤销/重做时若有则按 propPath 局部更新；
+   * 缺省才退化为整内容替换。新增/删除场景通常无 changeRecords。
+   */
+  changeRecords?: ChangeRecord[];
+  /** 调用方可选传入的人类可读描述，用于历史面板展示；不影响 undo/redo 行为。 */
+  historyDescription?: string;
+  /** 入栈时间戳（毫秒），入栈时自动写入，仅用于历史面板展示。 */
+  timestamp?: number;
+}
+// #endregion CodeBlockStepValue
+
+// #region DataSourceStepValue
+/**
+ * 数据源历史记录条目。按 dataSource.id 分组保存到 historyState.dataSourceState。
+ * - 新增：oldSchema = null，newSchema = 新 schema
+ * - 更新：oldSchema / newSchema 都为对应 schema
+ * - 删除：newSchema = null，oldSchema = 删除前 schema
+ */
+export interface DataSourceStepValue {
+  /** 关联的数据源 id */
+  id: Id;
+  /** 变更前的数据源 schema，新增时为 null */
+  oldSchema: DataSourceSchema | null;
+  /** 变更后的数据源 schema，删除时为 null */
+  newSchema: DataSourceSchema | null;
+  /**
+   * form 端 propPath/value 列表。撤销/重做时若有则按 propPath 局部更新；
+   * 缺省才退化为整 schema 替换。新增/删除场景通常无 changeRecords。
+   */
+  changeRecords?: ChangeRecord[];
+  /** 调用方可选传入的人类可读描述，用于历史面板展示；不影响 undo/redo 行为。 */
+  historyDescription?: string;
+  /** 入栈时间戳（毫秒），入栈时自动写入，仅用于历史面板展示。 */
+  timestamp?: number;
+}
+// #endregion DataSourceStepValue
+
 export interface HistoryState {
   pageId?: Id;
   pageSteps: Record<Id, UndoRedo<StepValue>>;
   canRedo: boolean;
   canUndo: boolean;
+  /**
+   * 代码块历史栈，按 codeBlock.id 分组（每个代码块独立一份 UndoRedo）。
+   * 与页面/节点无关，支持独立 undo/redo。
+   */
+  codeBlockState: Record<Id, UndoRedo<CodeBlockStepValue>>;
+  /**
+   * 数据源历史栈，按 dataSource.id 分组（每个数据源独立一份 UndoRedo）。
+   * 与页面/节点无关，支持独立 undo/redo。
+   */
+  dataSourceState: Record<Id, UndoRedo<DataSourceStepValue>>;
+}
+
+// #region HistoryListEntry
+/**
+ * 历史面板用：当前页面的一条历史步骤（包含位置和是否已应用）。
+ */
+export interface PageHistoryStepEntry {
+  /** 步骤内容 */
+  step: StepValue;
+  /** 在所属栈中的索引（0 为最早） */
+  index: number;
+  /** 是否处于"已应用"段（即位于栈游标之前）。撤销后变为 false。 */
+  applied: boolean;
+  /** 是否为当前所在的步骤（栈中最近一次已应用的那一步，即 index === cursor - 1）。 */
+  isCurrent?: boolean;
+}
+
+/**
+ * 页面历史面板分组。
+ * - 连续修改同一目标节点（updatedItems[0].oldNode.id 一致）的 'update' 步骤合并成一组；
+ * - 多节点更新 / add / remove 始终独立成组（无法明确归属单一目标）。
+ * - targetId 为 undefined 表示"无明确目标"（如 add/remove/多节点 update），不参与合并。
+ */
+export interface PageHistoryGroup {
+  kind: 'page';
+  /** 所属页面 id */
+  pageId: Id;
+  /** 该分组的操作类型 */
+  opType: HistoryOpType;
+  /**
+   * 合并的目标节点 id；只有"单节点 update"才有值，并按此 id 与相邻同 id 的 update 合并。
+   * undefined 表示该分组不可被合并（add / remove / 多节点 update）。
+   */
+  targetId?: Id;
+  /** 目标节点的可读名（取最后一步的 newNode.name/type/id） */
+  targetName?: string;
+  /** 组内所有步骤，按时间正序 */
+  steps: PageHistoryStepEntry[];
+  /** 组内最后一步是否已应用 */
+  applied: boolean;
+  /** 是否为当前所在的分组（包含栈中最近一次已应用步骤的那一组）。 */
+  isCurrent?: boolean;
+}
+
+/**
+ * 代码块历史面板分组。
+ * - 同一 codeBlockId 的栈内，相邻的 'update' 操作会合并成一个 group；
+ * - 'add' / 'remove' 始终独立成组（语义上是一次性事件）。
+ */
+export interface CodeBlockHistoryGroup {
+  kind: 'code-block';
+  /** 关联的 codeBlock id */
+  id: Id;
+  /** 该分组的操作类型 */
+  opType: HistoryOpType;
+  /** 组内所有步骤，按时间正序 */
+  steps: { step: CodeBlockStepValue; index: number; applied: boolean; isCurrent?: boolean }[];
+  /** 组内最后一步是否已应用，用于整组的状态展示 */
+  applied: boolean;
+  /** 是否为当前所在的分组（包含该栈最近一次已应用步骤的那一组）。 */
+  isCurrent?: boolean;
 }
 
+/**
+ * 数据源历史面板分组，结构同 CodeBlockHistoryGroup。
+ */
+export interface DataSourceHistoryGroup {
+  kind: 'data-source';
+  id: Id;
+  opType: HistoryOpType;
+  steps: { step: DataSourceStepValue; index: number; applied: boolean; isCurrent?: boolean }[];
+  applied: boolean;
+  /** 是否为当前所在的分组（包含该栈最近一次已应用步骤的那一组）。 */
+  isCurrent?: boolean;
+}
+// #endregion HistoryListEntry
+
 export enum KeyBindingCommand {
   /** 复制 */
   COPY_NODE = 'tmagic-system-copy-node',
@@ -874,12 +1099,50 @@ export const canUsePluginMethods = {
 
 export type AsyncMethodName = Writable<(typeof canUsePluginMethods)['async']>;
 
+/**
+ * 历史记录写入相关的通用配置（codeBlock / dataSource / editor 共用）
+ * - doNotPushHistory: 操作完成后是否不要将本次操作压入历史栈（撤销/重做记录），默认 false
+ * - historyDescription: 入栈时附带的人类可读描述，用于历史面板展示；不影响 undo/redo 行为，缺省时面板会自动生成描述
+ */
+export interface HistoryOpOptions {
+  doNotPushHistory?: boolean;
+  historyDescription?: string;
+}
+
+/**
+ * 在 HistoryOpOptions 基础上携带 form 端 propPath/value 变更记录，
+ * 用于历史记录的精细化撤销/重做（按 propPath 局部 patch）。
+ */
+export interface HistoryOpOptionsWithChangeRecords extends HistoryOpOptions {
+  changeRecords?: ChangeRecord[];
+}
+
 /**
  * DSL 修改类操作的通用配置
  * - doNotSelect: 操作后是否不要自动触发选中（不调用 this.select / this.multiSelect / stage.select / stage.multiSelect）
  * - doNotSwitchPage: 操作若会引发当前页面切换（如新增 / 删除 / 跨页移动），是否跳过这次切换
  */
-export type DslOpOptions = {
+export interface DslOpOptions extends HistoryOpOptions {
   doNotSelect?: boolean;
   doNotSwitchPage?: boolean;
-};
+}
+
+/** 差异对话框的入参 */
+export interface DiffDialogPayload {
+  /** 表单类别 */
+  category: CompareCategory;
+  /** 节点类型 / 数据源类型 */
+  type?: string;
+  /** 代码块场景下的数据源类型 */
+  dataSourceType?: string;
+  /** 该 step 修改前的值（oldNode / oldSchema / oldContent） */
+  lastValue: Record<string, any>;
+  /** 该 step 修改后的值（newNode / newSchema / newContent） */
+  value: Record<string, any>;
+  /** 当前编辑器中实际的最新值；不传或为 null 时禁用「与当前对比」 */
+  currentValue?: Record<string, any> | null;
+  /** 用于标题展示的目标名称 */
+  targetLabel?: string;
+  /** 用于标题展示的目标 id */
+  id?: string | number;
+}

package/src/utils/code-block.ts

@@ -0,0 +1,150 @@
+/*
+ * 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 { tMagicMessage } from '@tmagic/design';
+import { defineFormConfig, defineFormItem, type FormConfig, type TableColumnConfig } from '@tmagic/form';
+
+import { getEditorConfig } from './config';
+
+/**
+ * 代码块编辑表单配置的统一入口。
+ *
+ * 用于：
+ * - `CodeBlockEditor.vue`：作为代码块新增/编辑的表单结构；
+ * - `CompareForm.vue`：在历史差异对比中以"代码块"形态展示前后值。
+ *
+ * 通过参数控制两端的细微差异（是否启用必填校验 / vs-code onChange 校验 / dataSource 相关字段显示规则等），
+ * 避免两边同步两份相同的 schema 而造成漂移。
+ */
+export interface GetCodeBlockFormConfigOptions {
+  /**
+   * 自定义 `params` 表格的"参数类型"列配置。优先级高于内置默认值；
+   * 通常由 `codeBlockService.getParamsColConfig()` 注入业务侧的扩展。
+   */
+  paramColConfig?: TableColumnConfig;
+  /**
+   * 是否在「数据源代码块」语境下使用：
+   * - true：`执行时机` 字段会展示，`请求前 / 请求后` 选项仅在 `dataSourceType !== 'base'` 时出现；
+   * - false：`执行时机` 字段隐藏（普通代码块没有时机概念）。
+   *
+   * 注意这里以函数形式传入是为了让 `display` / `options` 在每次渲染时实时取值，
+   * 例如外部 `props.isDataSource` 切换或 `dataSourceType` 变更都能立即生效。
+   */
+  isDataSource?: () => boolean;
+  /** 当 isDataSource 为 true 时使用：返回当前数据源类型（`base` / `http` / ...），决定时机选项是否包含请求前后。 */
+  dataSourceType?: () => string | undefined;
+  /** vs-code 编辑器的额外 monaco options。一般传 `inject('codeOptions', {})` 的结果。 */
+  codeOptions?: Record<string, any>;
+  /**
+   * 是否启用编辑态特性：
+   * - true（默认）：`name` 字段加必填校验；vs-code 的 `onChange` 会调用 `parseDSL` 检查语法，出错时弹消息并抛错；
+   * - false：纯只读/对比场景，不加校验逻辑。
+   */
+  editable?: boolean;
+}
+
+/** 默认的"参数类型"列配置：数字 / 字符串 / 组件 三选一。 */
+const defaultParamColConfig = () =>
+  defineFormItem<TableColumnConfig>({
+    type: 'row',
+    label: '参数类型',
+    items: [
+      {
+        text: '参数类型',
+        labelWidth: '70px',
+        type: 'select',
+        name: 'type',
+        options: [
+          { text: '数字', label: '数字', value: 'number' },
+          { text: '字符串', label: '字符串', value: 'text' },
+          { text: '组件', label: '组件', value: 'ui-select' },
+        ],
+      },
+    ],
+  });
+
+/**
+ * 生成代码块表单配置。返回的是普通对象数组，可直接传给 `<MForm :config>`；
+ * 如需响应式的 props 变化（如切换 dataSourceType），调用方在 `computed` 中再次调用本函数即可。
+ */
+export const getCodeBlockFormConfig = (options: GetCodeBlockFormConfigOptions = {}): FormConfig => {
+  const { paramColConfig, isDataSource, dataSourceType, codeOptions = {}, editable = true } = options;
+
+  return defineFormConfig([
+    {
+      text: '名称',
+      name: 'name',
+      ...(editable ? { rules: [{ required: true, message: '请输入名称', trigger: 'blur' }] } : {}),
+    },
+    {
+      text: '描述',
+      name: 'desc',
+    },
+    {
+      text: '执行时机',
+      name: 'timing',
+      type: 'select',
+      options: () => {
+        const list = [
+          { text: '初始化前', value: 'beforeInit' },
+          { text: '初始化后', value: 'afterInit' },
+        ];
+        if (dataSourceType?.() !== 'base') {
+          list.push({ text: '请求前', value: 'beforeRequest' });
+          list.push({ text: '请求后', value: 'afterRequest' });
+        }
+        return list;
+      },
+      display: () => Boolean(isDataSource?.()),
+    },
+    {
+      type: 'table',
+      border: true,
+      text: '参数',
+      enableFullscreen: false,
+      enableToggleMode: false,
+      name: 'params',
+      dropSort: false,
+      items: [
+        { type: 'text', label: '参数名', name: 'name' },
+        { type: 'text', label: '描述', name: 'extra' },
+        paramColConfig || defaultParamColConfig(),
+      ],
+    },
+    {
+      name: 'content',
+      type: 'vs-code',
+      options: codeOptions,
+      autosize: { minRows: 10, maxRows: 30 },
+      ...(editable
+        ? {
+            onChange: (_formState: any, code: string) => {
+              try {
+                // 检测 js 代码是否存在语法错误
+                getEditorConfig('parseDSL')(code);
+                return code;
+              } catch (error: any) {
+                tMagicMessage.error(error.message);
+                throw error;
+              }
+            },
+          }
+        : {}),
+    },
+  ]) as FormConfig;
+};

package/src/utils/content-menu.ts

@@ -1,7 +1,7 @@
 import { computed, markRaw, type ShallowRef } from 'vue';
 import { CopyDocument, Delete, DocumentCopy } from '@element-plus/icons-vue';
 
-import { Id, MContainer, NodeType } from '@tmagic/core';
+import { cloneDeep, Id, MContainer, NodeType } from '@tmagic/core';
 import { calcValueByFontsize, isPage, isPageFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
@@ -59,14 +59,17 @@ export const usePasteMenu = (menu?: ShallowRef<InstanceType<typeof ContentMenu>
   },
 });
 
-const moveTo = (id: Id, { editorService }: Services) => {
+const moveTo = async (id: Id, { editorService }: Services) => {
   const nodes = editorService.get('nodes') || [];
   const parent = editorService.getNodeById(id) as MContainer;
 
-  if (!parent) return;
+  if (!parent || nodes.length === 0) return;
 
-  editorService.add(nodes, parent);
-  editorService.remove(nodes);
+  // 直接调用 moveToContainer：内部对多选场景已做合并，整批只产生一条历史记录。
+  // 不要再走 remove + add 两步，否则会被切成两条历史（且语义也不正确）。
+  await editorService.moveToContainer(cloneDeep(nodes), parent.id, {
+    doNotSwitchPage: true,
+  });
 };
 
 export const useMoveToMenu = ({ editorService }: Services): MenuButton => {

package/src/utils/dep/worker.ts

@@ -42,9 +42,11 @@ onmessage = (e) => {
       }
     }
 
-    watcher.collectByCallback(mApp.items, undefined, ({ node, target }) => {
-      watcher.collectItem(node, target, { pageId: node.id }, true);
-    });
+    // worker 中 target 均为新建（deps 为空），无需删除阶段，直接批量收集
+    const targets = watcher.getCollectableTargets();
+    for (const page of mApp.items) {
+      watcher.collectItems(page, targets, { pageId: page.id }, true);
+    }
 
     const data: Record<string, Record<Id, DepData>> = {
       [DepTargetType.DATA_SOURCE]: {},

package/src/utils/index.ts

@@ -18,6 +18,7 @@
 
 export * from './config';
 export * from './props';
+export * from './code-block';
 export * from './logger';
 export * from './editor';
 export * from './operator';

package/src/utils/undo-redo.ts

@@ -75,5 +75,28 @@ export class UndoRedo<T = any> {
     }
     return cloneDeep(this.elementList[this.listCursor - 1]);
   }
+
+  /**
+   * 返回栈内全部元素的浅克隆数组（按时间顺序，索引 0 为最早一步）。
+   * 仅用于历史面板等只读展示场景，不应直接修改返回值。
+   */
+  public getElementList(): T[] {
+    return this.elementList.slice();
+  }
+
+  /**
+   * 当前游标位置：表示已应用的步骤数量。
+   * - cursor === 0 表示全部已撤销
+   * - cursor === length 表示已重做到末尾
+   * 历史面板用于区分"已应用 / 已撤销"两段。
+   */
+  public getCursor(): number {
+    return this.listCursor;
+  }
+
+  /** 栈内总步数。 */
+  public getLength(): number {
+    return this.elementList.length;
+  }
 }
 // #endregion UndoRedo