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

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