@tmagic/editor 1.8.0-manmanyu.8 → 1.8.0

package/src/initService.ts

@@ -29,6 +29,7 @@ import { getDepNodeIds, getNodes, isPage, isValueIncludeDataSource } from '@tmag
 
 import PropsPanel from './layouts/PropsPanel.vue';
 import { isIncludeDataSource } from './utils/editor';
+import { error as logError } from './utils/logger';
 import { EditorProps } from './editorProps';
 import { Services } from './type';
 
@@ -36,6 +37,19 @@ export declare type LooseRequired<T> = {
   [P in string & keyof T]: T[P];
 };
 
+/**
+ * select 为异步串行执行，节点不可选中（如已从 DSL 中移除）时会抛错。
+ * 在 watch 回调中调用不能把拒绝抛回调用方，否则会变成 Vue 的「Unhandled error during execution of watcher callback」，
+ * 这里统一兜底成日志。
+ */
+const selectNode = async (editorService: Services['editorService'], id: Id) => {
+  try {
+    await editorService.select(id);
+  } catch (e) {
+    logError(e);
+  }
+};
+
 export const initServiceState = (
   props: EditorProps,
   {
@@ -193,9 +207,17 @@ export const initServiceState = (
     },
   );
 
+  // defaultSelected 可能早于 modelValue 到位（immediate 首次执行时 root 还是空的，或节点尚未出现在 DSL 中），
+  // 此时 select 会因为「获取不到组件信息」而抛错，交由 root-change 中的选中逻辑在 root 就绪后补上即可。
   watch(
     () => props.defaultSelected,
-    (defaultSelected) => defaultSelected && editorService.select(defaultSelected),
+    (defaultSelected) => {
+      if (!defaultSelected || !editorService.getNodeById(defaultSelected)) {
+        return;
+      }
+
+      selectNode(editorService, defaultSelected);
+    },
     {
       immediate: true,
     },
@@ -232,6 +254,7 @@ export const initServiceState = (
     uiService.resetState();
     componentListService.resetState();
     codeBlockService.resetState();
+    eventsService.resetState();
     keybindingService.reset();
     depService.reset();
   });
@@ -333,11 +356,11 @@ export const initServiceEvents = (
     Promise.all(
       nodes.map((node) => {
         if (node.type === NodeType.ROOT) {
-          return Promise.resolve();
+          return Promise.resolve(true);
         }
         return depService.collectIdle([node], { pageId: getPageIdByNode(node) }, deep, type);
       }),
-    );
+    ).then((results) => results.every(Boolean));
 
   watch(
     () => editorService.get('stage'),
@@ -351,7 +374,7 @@ export const initServiceEvents = (
 
         if (!node) return;
 
-        await collectIdle([node], true, DepTargetType.DATA_SOURCE);
+        if (!(await collectIdle([node], true, DepTargetType.DATA_SOURCE))) return;
         updateStageNode(node);
       });
     },
@@ -404,12 +427,26 @@ export const initServiceEvents = (
     });
   };
 
+  /**
+   * root 是否已经不是编辑器当前的 root。
+   *
+   * `editorService.set('root', v)` 是同步赋值后再派发 `root-change`，因此派发那一刻 `v` 一定
+   * 就是当前 root；但处理 `root-change` 要等 stage / runtime / 依赖收集等异步过程，期间 root
+   * 可能被新的一次整体替换（外部重设 DSL、更新 root 节点、源码保存等）顶掉，此时手上的 `v`
+   * 已是过期快照，继续用它刷画布或回写给外部都会与新 root 互相覆盖。
+   */
+  const isStaleRoot = (value: MApp | null) => toRaw(editorService.get('root')) !== toRaw(value);
+
   const updateStageDsl = async (value: MApp | null) => {
     const stage = await getStage();
 
     const runtime = await stage.renderer?.getRuntime();
     const app = await getTMagicApp();
 
+    // 等 stage / runtime 就绪期间 root 已被替换：新 root 的刷新可能已经完成，
+    // 再把旧 dsl 推给 runtime 会让画布回退到旧内容
+    if (isStaleRoot(value)) return;
+
     if (!app?.dataSourceManager) {
       runtime?.updateRootConfig?.(cloneDeep(toRaw(value))!);
     }
@@ -426,6 +463,8 @@ export const initServiceEvents = (
 
       await (typeof Worker === 'undefined' ? collectIdle(value.items, true) : depService.collectByWorker(value));
 
+      if (isStaleRoot(value)) return;
+
       const dsl = cloneDeep(toRaw(value));
       if (dsl.dataSources && dsl.dataSourceDeps && app?.dataSourceManager) {
         for (const node of getNodes(getDepNodeIds(dsl.dataSourceDeps), dsl.items)) {
@@ -443,7 +482,7 @@ export const initServiceEvents = (
     depService.addTarget(createDataSourceCondTarget(ds, reactive({})));
   };
 
-  const rootChangeHandler = (value: MApp | null, preValue?: MApp | null) => {
+  const rootChangeHandler = (value: MApp | null) => {
     if (!value) return;
 
     value.codeBlocks = value.codeBlocks || {};
@@ -486,7 +525,13 @@ export const initServiceEvents = (
         editorService.set('page', null);
       }
 
-      if (toRaw(value) !== toRaw(preValue)) {
+      // 上面的 select 是异步的，期间 root 可能已被替换，过期快照不能再回写给外部：
+      // 两次整体替换各自持有一个快照时，回写会把对方的 root 顶掉，外部 modelValue 变化又会
+      // 重新 set root，两条链路无休止地交替下去（表现为编辑器卡死）
+      if (isStaleRoot(value)) return;
+
+      // 外部已经持有这个 root（如本次变化就是 modelValue 传进来的）时无需回写
+      if (toRaw(props.modelValue) !== toRaw(value)) {
         emit('update:modelValue', value);
       }
     })();
@@ -494,8 +539,10 @@ export const initServiceEvents = (
 
   // 新增节点，收集依赖
   const nodeAddHandler = (nodes: MComponent[]) => {
-    collectIdle(nodes, true).then(() => {
-      updateStageNodes(nodes);
+    collectIdle(nodes, true).then((completed) => {
+      if (completed) {
+        updateStageNodes(nodes);
+      }
     });
   };
 
@@ -549,8 +596,8 @@ export const initServiceEvents = (
     if (needRecollectNodes.length) {
       // 有数据源依赖，需要等依赖重新收集完才更新stage
       const handler = async () => {
-        await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE);
-        await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE_COND);
+        if (!(await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE))) return;
+        if (!(await collectIdle(needRecollectNodes, true, DepTargetType.DATA_SOURCE_COND))) return;
         updateStageNodes(needRecollectNodes);
       };
       handler();
@@ -572,8 +619,10 @@ export const initServiceEvents = (
 
   // 历史记录变化时，需要重新收集依赖
   const historyChangeHandler = (page: MPage | MPageFragment) => {
-    collectIdle([page], true).then(() => {
-      updateStageNode(page);
+    collectIdle([page], true).then((completed) => {
+      if (completed) {
+        updateStageNode(page);
+      }
     });
   };
 
@@ -654,7 +703,7 @@ export const initServiceEvents = (
       if (Array.isArray(root?.items)) {
         depService.clearIdleTasks();
 
-        let collectIdlePromises: Promise<void[]>[] = [];
+        let collectIdlePromises: Promise<boolean>[] = [];
         if (isModifyField) {
           depService.removeTarget(config.id, DepTargetType.DATA_SOURCE);
           depService.removeTarget(config.id, DepTargetType.DATA_SOURCE_COND);
@@ -679,10 +728,15 @@ export const initServiceEvents = (
 
           collectIdlePromises = [collectIdle(root.items, true, DepTargetType.DATA_SOURCE_METHOD)];
         }
-        Promise.all(collectIdlePromises)
-          .then(() => updateDataSourceSchema())
-          .then(() => updateDsData())
-          .then(() => updateStageNodes(root.items));
+        const handler = async () => {
+          const results = await Promise.all(collectIdlePromises);
+          if (!results.every(Boolean)) return;
+
+          updateDataSourceSchema();
+          await updateDsData();
+          updateStageNodes(root.items);
+        };
+        handler();
       }
     } else if (root?.dataSources) {
       updateDsData();
@@ -706,11 +760,12 @@ export const initServiceEvents = (
       const nodeIds = Object.keys(root.dataSourceDeps?.[id] || {});
       const nodes = getNodes(nodeIds, root.items);
 
-      await Promise.all([
+      const results = await Promise.all([
         collectIdle(nodes, false, DepTargetType.DATA_SOURCE),
         collectIdle(nodes, false, DepTargetType.DATA_SOURCE_COND),
         collectIdle(nodes, false, DepTargetType.DATA_SOURCE_METHOD),
       ]);
+      if (!results.every(Boolean)) return;
 
       updateDataSourceSchema();
 

package/src/layouts/CodeEditor.vue

@@ -194,6 +194,9 @@ const values = ref('');
 const loading = ref(false);
 const codeEditorEl = useTemplateRef<HTMLDivElement>('codeEditor');
 
+// 组件是否已卸载，避免异步初始化过程中组件被销毁后继续创建编辑器
+let destroyed = false;
+
 const resizeObserver = new globalThis.ResizeObserver(
   throttle((): void => {
     vsEditor?.layout();
@@ -254,11 +257,18 @@ const handleKeyDown = (e: KeyboardEvent) => {
   }
 };
 
+// 判断容器是否仍然有效：组件未卸载、ref 存在且已挂载到文档树中
+// Monaco 在创建编辑器时会向上遍历 parentNode 判断是否处于 shadow DOM，
+// 若容器为 null 或已从文档树脱离，将抛出 "Cannot read properties of null (reading 'parentNode')"
+const isEditorElValid = () => !destroyed && !!codeEditorEl.value && codeEditorEl.value.isConnected;
+
 const init = async () => {
-  if (!codeEditorEl.value) return;
+  if (!isEditorElValid()) return;
 
-  if (codeEditorEl.value.clientHeight === 0) {
+  if (codeEditorEl.value!.clientHeight === 0) {
     await nextTick();
+    // await 期间组件可能已被卸载或容器被移除
+    if (!isEditorElValid()) return;
   }
 
   // 重置缓存的额外高度，因为编辑器重新初始化
@@ -266,6 +276,11 @@ const init = async () => {
 
   monaco = await loadMonaco();
 
+  // 加载 monaco 是异步过程，期间组件可能已被卸载或容器被移除
+  if (!isEditorElValid()) return;
+
+  const editorEl = codeEditorEl.value!;
+
   const options = {
     value: values.value,
     language: props.language,
@@ -275,7 +290,7 @@ const init = async () => {
   };
 
   if (props.type === 'diff') {
-    vsDiffEditor = await getEditorConfig('customCreateMonacoDiffEditor')(monaco!, codeEditorEl.value, options);
+    vsDiffEditor = await getEditorConfig('customCreateMonacoDiffEditor')(monaco!, editorEl, options);
 
     // 监听diff编辑器内容变化
     vsDiffEditor.getModifiedEditor().onDidChangeModelContent(() => {
@@ -285,7 +300,7 @@ const init = async () => {
       }
     });
   } else {
-    vsEditor = await getEditorConfig('customCreateMonacoEditor')(monaco!, codeEditorEl.value, options);
+    vsEditor = await getEditorConfig('customCreateMonacoEditor')(monaco!, editorEl, options);
 
     // 监听编辑器内容变化
     vsEditor.onDidChangeModelContent(() => {
@@ -296,10 +311,19 @@ const init = async () => {
     });
   }
 
+  // 编辑器创建可能是异步的，创建完成后若组件已卸载则立即销毁，避免内存泄漏
+  if (destroyed) {
+    vsEditor?.dispose();
+    vsDiffEditor?.dispose();
+    vsEditor = null;
+    vsDiffEditor = null;
+    return;
+  }
+
   setEditorValue(props.initValues, props.modifiedValues);
 
   emit('initd', vsEditor);
-  codeEditorEl.value.addEventListener('keydown', handleKeyDown);
+  editorEl.addEventListener('keydown', handleKeyDown);
 
   if (props.type !== 'diff' && props.autoSave) {
     vsEditor?.onDidBlurEditorWidget(() => {
@@ -311,7 +335,7 @@ const init = async () => {
     });
   }
 
-  resizeObserver.observe(codeEditorEl.value);
+  resizeObserver.observe(editorEl);
 };
 
 watch(
@@ -362,6 +386,8 @@ onMounted(async () => {
 });
 
 onBeforeUnmount(() => {
+  destroyed = true;
+
   resizeObserver.disconnect();
 
   vsEditor?.dispose();

package/src/layouts/Framework.vue

@@ -29,9 +29,9 @@
       right-class="m-editor-framework-right"
       :left="hideSidebar ? undefined : columnWidth.left"
       :right="columnWidth.right"
-      :min-left="hideSidebar ? 0 : MIN_LEFT_COLUMN_WIDTH"
-      :min-right="MIN_RIGHT_COLUMN_WIDTH"
-      :min-center="MIN_CENTER_COLUMN_WIDTH"
+      :min-left="hideSidebar ? 0 : minLeftColumnWidth"
+      :min-right="minRightColumnWidth"
+      :min-center="minCenterColumnWidth"
       :width="frameworkRect.width"
       @change="columnWidthChange"
     >
@@ -82,9 +82,6 @@ import { getEditorConfig } from '@editor/utils/config';
 import {
   DEFAULT_LEFT_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';
 
@@ -122,6 +119,10 @@ const showSrc = computed(() => uiService.get('showSrc'));
 
 const columnWidth = computed(() => uiService.get('columnWidth'));
 
+const minLeftColumnWidth = computed(() => uiService.get('minLeftColumnWidth'));
+const minCenterColumnWidth = computed(() => uiService.get('minCenterColumnWidth'));
+const minRightColumnWidth = computed(() => uiService.get('minRightColumnWidth'));
+
 watch(pageLength, () => {
   splitViewRef.value?.updateWidth();
 });

package/src/layouts/history-list/BucketTab.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="!buckets.length" class="m-editor-history-list-empty">暂无操作记录</div>
   <template v-else>
-    <div class="m-editor-history-list-toolbar">
+    <div v-if="config.showClear !== false" class="m-editor-history-list-toolbar">
       <span class="m-editor-history-list-clear" :title="`清空${config.title}的历史记录`" @click="$emit('clear')"
         >清空</span
       >
@@ -38,7 +38,7 @@ defineOptions({
 
 defineProps<{
   /**
-   * 该类历史的整体渲染配置（title / prefix / describe* / isStep* / showInitial / gotoEnabled），
+   * 该类历史的整体渲染配置（title / prefix / describe* / isStep* / showInitial / gotoEnabled / showClear），
    * 由父组件按业务类型注入并整体透传给 Bucket，避免逐项透传多个 props。
    */
   config: HistoryBucketConfig<T>;

package/src/layouts/history-list/HistoryDiffDialog.vue

@@ -21,7 +21,7 @@
           </TMagicRadioGroup>
 
           <TMagicRadioGroup v-model="mode" size="small" class="m-editor-history-diff-dialog-mode">
-            <TMagicRadioButton value="before">与修改前对比</TMagicRadioButton>
+            <TMagicRadioButton value="before" :disabled="!hasValue">与修改前对比</TMagicRadioButton>
             <TMagicRadioButton value="current" :disabled="!hasCurrent">与当前对比</TMagicRadioButton>
           </TMagicRadioGroup>
         </div>
@@ -43,10 +43,10 @@
         :data-source-type="payload.dataSourceType"
         :value="rightValue"
         :last-value="leftValue"
-        :extend-state="extendState"
         :load-config="loadConfig"
         :self-diff-field-types="selfDiffFieldTypes"
         :services="props.services"
+        :size="props.size"
         height="70vh"
       />
 
@@ -76,11 +76,16 @@
 import { computed, ref, watch } from 'vue';
 import { isEqual } from 'lodash-es';
 
-import { TMagicButton, TMagicDialog, TMagicRadioButton, TMagicRadioGroup, TMagicTag } from '@tmagic/design';
-import type { FormState } from '@tmagic/form';
+import {
+  type FieldSize,
+  TMagicButton,
+  TMagicDialog,
+  TMagicRadioButton,
+  TMagicRadioGroup,
+  TMagicTag,
+} from '@tmagic/design';
 
 import CompareForm from '@editor/components/CompareForm.vue';
-import { useServices } from '@editor/hooks/use-services';
 import CodeEditor from '@editor/layouts/CodeEditor.vue';
 import type { CompareCategory, CompareFormLoadConfig, DiffDialogPayload, Services } from '@editor/type';
 
@@ -91,25 +96,20 @@ defineOptions({
 const props = withDefaults(
   defineProps<{
     /** 编辑器服务集合，由调用方传入（不再通过 inject('services') 获取）。 */
-    services: Services;
-    /**
-     * 来自 Editor 顶层的 `extendFormState`，用于扩展 MForm.formState。
-     * 透传给 CompareForm，从而让差异对比时表单 item 中依赖业务上下文的
-     * `display` / `disabled` 等 filterFunction 正常工作。
-     */
-    extendState?: (_state: FormState) => Record<string, any> | Promise<Record<string, any>>;
+    services?: Services;
     /**
      * 自定义 FormConfig 加载逻辑，透传给 CompareForm。传入后将接管内置的按 `category`
      * 取配置逻辑，可通过 `ctx.defaultLoadConfig()` 复用默认结果再做二次加工。
      */
     loadConfig?: CompareFormLoadConfig;
     width?: string;
+    /** 差异对比表单内组件的尺寸（透传给 CompareForm 的 `size`），可选 'large' | 'default' | 'small'。 */
+    size?: FieldSize;
     isConfirm?: boolean;
     onConfirm?: () => void;
     selfDiffFieldTypes?: string[];
   }>(),
   {
-    services: () => useServices(),
     width: '900px',
   },
 );
@@ -159,6 +159,23 @@ const dialogTitle = computed(() => (props.onConfirm ? '确认回滚' : '查看
 
 const hasCurrent = computed(() => payload.value?.currentValue !== undefined && payload.value?.currentValue !== null);
 
+/** 是否存在该步「修改后的值」：不存在（如仅删除）时「与修改前对比」无意义，置灰禁用。 */
+const hasValue = computed(() => payload.value?.value !== undefined && payload.value?.value !== null);
+
+/** 指定模式当前是否可用：before 依赖「修改后的值」，current 依赖「当前值」。 */
+const isModeAvailable = (m: DiffMode): boolean => (m === 'current' ? hasCurrent.value : hasValue.value);
+
+/**
+ * 计算 open 时的初始对比模式：
+ * - 调用方通过 payload.mode 指定且该模式可用时，优先使用指定模式；
+ * - 否则没有「修改后的值」但有当前值时（「与修改前对比」不可用），默认进入「与当前对比」；
+ * - 其余情况默认「与修改前对比」。
+ */
+const resolveInitialMode = (specified?: DiffMode): DiffMode => {
+  if (specified && isModeAvailable(specified)) return specified;
+  return !hasValue.value && hasCurrent.value ? 'current' : 'before';
+};
+
 /** 左侧（旧/参照）值 */
 const leftValue = computed<Record<string, any>>(() => {
   if (!payload.value) return {};
@@ -212,8 +229,9 @@ const targetText = computed(() => {
 
 const open = (p: DiffDialogPayload) => {
   payload.value = p;
-  // 每次打开按需重置默认模式：有当前值时优先「与当前对比」更贴近"看现在差什么"，否则回退到默认
-  mode.value = 'before';
+  // 每次打开按 payload 重置对比模式（hasValue / hasCurrent 依赖 payload，需先赋值）：
+  // 优先使用 payload.mode 指定的模式；不可用或未指定时按数据自动推断。
+  mode.value = resolveInitialMode(p.mode);
   // 默认回到表单对比形态，避免残留上一次选择的源码模式
   viewMode.value = 'form';
   visible.value = true;

package/src/layouts/history-list/HistoryListPanel.vue

@@ -18,7 +18,9 @@
       <TMagicTabs v-model="activeTab" class="m-editor-history-list-tabs">
         <component
           :is="tabPaneComponent?.component || 'el-tab-pane'"
-          v-bind="tabPaneComponent?.props({ name: 'page', label: `${pageName} (${pageGroups.length})` }) || {}"
+          v-bind="
+            tabPaneComponent?.props({ name: 'page', label: `${pageName} (${pageGroups.length})`, lazy: true }) || {}
+          "
         >
           <PageTab
             :list="pageGroupsDisplay"
@@ -38,8 +40,11 @@
           v-if="!disabledDataSource"
           :is="tabPaneComponent?.component || 'el-tab-pane'"
           v-bind="
-            tabPaneComponent?.props({ name: 'data-source', label: `${dataSourceName} (${dataSourceGroups.length})` }) ||
-            {}
+            tabPaneComponent?.props({
+              name: 'data-source',
+              label: `${dataSourceName} (${dataSourceGroups.length})`,
+              lazy: true,
+            }) || {}
           "
         >
           <BucketTab
@@ -59,7 +64,11 @@
           v-if="!disabledCodeBlock"
           :is="tabPaneComponent?.component || 'el-tab-pane'"
           v-bind="
-            tabPaneComponent?.props({ name: 'code-block', label: `${codeBlockName} (${codeBlockGroups.length})` }) || {}
+            tabPaneComponent?.props({
+              name: 'code-block',
+              label: `${codeBlockName} (${codeBlockGroups.length})`,
+              lazy: true,
+            }) || {}
           "
         >
           <BucketTab
@@ -79,7 +88,7 @@
           v-for="tab in extraTabs"
           :key="tab.name"
           :is="tabPaneComponent?.component || 'el-tab-pane'"
-          v-bind="tabPaneComponent?.props({ name: tab.name, label: resolveTabLabel(tab) }) || {}"
+          v-bind="tabPaneComponent?.props({ name: tab.name, label: resolveTabLabel(tab), lazy: true }) || {}"
         >
           <component :is="tab.component" v-bind="tab.props || {}" v-on="tab.listeners || {}" />
         </component>
@@ -124,7 +133,6 @@ import { computed, inject, markRaw, ref, watch } from 'vue';
 import { Clock, Close } from '@element-plus/icons-vue';
 
 import { getDesignConfig, TMagicButton, tMagicMessage, TMagicPopover, TMagicTabs, TMagicTooltip } from '@tmagic/design';
-import type { FormState } from '@tmagic/form';
 
 import MIcon from '@editor/components/Icon.vue';
 import { useServices } from '@editor/hooks/use-services';
@@ -184,16 +192,6 @@ watch([disabledDataSource, disabledCodeBlock], ([dsDisabled, cbDisabled]) => {
   }
 });
 
-/**
- * 通过 inject 拿到 Editor 顶层注入的 `extendFormState`，转交给 HistoryDiffDialog
- * 内部的 CompareForm，使差异对比表单的 filterFunction 能拿到完整的业务上下文。
- * 未提供时为 undefined，CompareForm/MForm 会跳过 extendState 处理。
- */
-const extendFormState = inject<((_state: FormState) => Record<string, any> | Promise<Record<string, any>>) | undefined>(
-  'extendFormState',
-  undefined,
-);
-
 const {
   expanded,
   toggleGroup,
@@ -303,10 +301,10 @@ const onCodeBlockGotoInitial = (id: string | number) => {
 /**
  * 「单步回滚」与「查看差异」的完整逻辑收敛到 useHistoryRevert，面板与业务方共用：
  * 二者均由 useHistoryRevert 内部按需动态挂载 HistoryDiffDialog，
- * 业务方亦可直接 import useHistoryRevert(services) 调用，无需自行挂载任何弹窗。
+ * 业务方亦可直接 import useHistoryRevert(options, services) 调用，无需自行挂载任何弹窗。
  */
 const { onPageRevert, onDataSourceRevert, onCodeBlockRevert, onPageDiff, onDataSourceDiff, onCodeBlockDiff } =
-  useHistoryRevert(services, { extendState: extendFormState });
+  useHistoryRevert({}, services);
 
 /**
  * 把内存中（已清空对应类别后的）历史状态重新写回 IndexedDB，