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

package/src/layouts/props-panel/PropsPanel.vue

@@ -9,7 +9,7 @@
       :values="values"
       :disabledShowSrc="disabledShowSrc"
       :extendState="extendState"
-      @submit="submit"
+      @submit="(v, eventData, error) => submit(v, eventData, error, 'props')"
       @submit-error="errorHandler"
       @form-error="errorHandler"
       @mounted="mountedHandler"
@@ -27,7 +27,7 @@
       :values="values"
       :disabledShowSrc="disabledShowSrc"
       :extendState="extendState"
-      @submit="submit"
+      @submit="(v, eventData, error) => submit(v, eventData, error, 'style')"
       @submit-error="errorHandler"
       @form-error="errorHandler"
     >
@@ -55,7 +55,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch, watchEffect } from 'vue';
+import { computed, inject, onBeforeUnmount, onMounted, ref, useTemplateRef, watch, watchEffect } from 'vue';
 import { Close, Sugar } from '@element-plus/icons-vue';
 import type { OnDrag } from 'gesto';
 
@@ -66,9 +66,10 @@ import { setValueByKeyPath } from '@tmagic/utils';
 
 import MIcon from '@editor/components/Icon.vue';
 import Resizer from '@editor/components/Resizer.vue';
+import { ENABLE_PROPS_FORM_VALIDATE } from '@editor/editorProps';
 import { useServices } from '@editor/hooks/use-services';
 import { Protocol } from '@editor/services/storage';
-import type { PropsPanelSlots } from '@editor/type';
+import type { NodeInvalidSource, PropsPanelSlots } from '@editor/type';
 import { styleTabConfig } from '@editor/utils';
 import { PROPS_PANEL_WIDTH_STORAGE_KEY } from '@editor/utils/const';
 
@@ -95,6 +96,8 @@ const emit = defineEmits<{
 
 const { editorService, uiService, propsService, storageService } = useServices();
 
+const enablePropsFormValidate = inject(ENABLE_PROPS_FORM_VALIDATE, false);
+
 const values = ref<FormValue>({});
 // ts类型应该是FormConfig， 但是打包时会出错，所以暂时用any
 const curFormConfig = ref<any>([]);
@@ -126,7 +129,12 @@ onBeforeUnmount(() => {
   propsService.off('props-configs-change', init);
 });
 
-const submit = async (v: MNode, eventData?: ContainerChangeEventData) => {
+const submit = async (
+  v: MNode,
+  eventData?: ContainerChangeEventData,
+  error?: any,
+  source: NodeInvalidSource = 'props',
+) => {
   try {
     if (!v.id) {
       v.id = values.value.id;
@@ -155,7 +163,13 @@ const submit = async (v: MNode, eventData?: ContainerChangeEventData) => {
     // 源码编辑器（CodeEditor @save → saveCode）保存时不带 eventData，据此标记为「源码编辑器」。
     const historySource = eventData ? 'props' : 'code';
 
-    editorService.update(newValue, { changeRecords: eventData?.changeRecords, historySource });
+    editorService.update(newValue, {
+      changeRecords: eventData?.changeRecords,
+      historySource,
+      // 启用校验联动时，仅校验失败（error 存在）才把错误信息随更新传入 editorService 记录；
+      // 其余情况（含表单校验成功、CodeEditor 源码保存）不携带 invalidInfo，由 editorService 在执行 update 时统一清除该节点错误。
+      ...(enablePropsFormValidate && error ? { invalidInfo: { id: newValue.id, source, error: error?.message } } : {}),
+    });
   } catch (e: any) {
     emit('submit-error', e);
   }

package/src/layouts/props-panel/use-style-panel.ts

@@ -2,7 +2,7 @@ import { computed, type Ref, watch } from 'vue';
 
 import { Protocol } from '@editor/services/storage';
 import { Services } from '@editor/type';
-import { MIN_CENTER_COLUMN_WIDTH, RIGHT_COLUMN_WIDTH_STORAGE_KEY } from '@editor/utils/const';
+import { RIGHT_COLUMN_WIDTH_STORAGE_KEY } from '@editor/utils/const';
 
 export const useStylePanel = (
   { uiService, storageService }: Pick<Services, 'uiService' | 'storageService'>,
@@ -47,8 +47,9 @@ export const useStylePanel = (
     }
 
     if (columnWidth.center < 0) {
-      columnWidth.right = columnWidth.right + columnWidth.center - MIN_CENTER_COLUMN_WIDTH;
-      columnWidth.center = MIN_CENTER_COLUMN_WIDTH;
+      const minCenterColumnWidth = uiService.get('minCenterColumnWidth');
+      columnWidth.right = columnWidth.right + columnWidth.center - minCenterColumnWidth;
+      columnWidth.center = minCenterColumnWidth;
 
       propsPanelWidth.value = columnWidth.right / 2;
     }

package/src/layouts/sidebar/Sidebar.vue

@@ -132,6 +132,7 @@
         v-model:height="columnLeftHeight"
         :width="columnLeftWidth"
         :title="config.text"
+        :framework-width="frameworkWidth"
         :position="{
           left: floatBoxStates[config.$key].left,
           top: floatBoxStates[config.$key].top,
@@ -221,6 +222,7 @@ const taskLength = computed(() => depService.get('taskLength'));
 const tipsBarVisible = ref(true);
 
 const columnLeftWidth = computed(() => uiService.get('columnWidth')[ColumnLayout.LEFT]);
+const frameworkWidth = computed(() => uiService.get('frameworkRect')?.width || 0);
 const { height: editorContentHeight } = useEditorContentHeight();
 const columnLeftHeight = ref(0);
 

package/src/layouts/sidebar/code-block/CodeBlockListPanel.vue

@@ -121,8 +121,11 @@ const {
   nodeContentMenuHandler,
   menuData: contentMenuData,
   contentMenuHideHandler,
+  getTarget,
 } = useContentMenu((id: string) => {
   codeBlockListRef.value?.deleteCode(id, { historySource: 'tree-contextmenu' });
 });
-const menuData = computed<(MenuButton | MenuComponent)[]>(() => props.customContentMenu(contentMenuData, 'code-block'));
+const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
+  props.customContentMenu(contentMenuData, 'code-block', getTarget),
+);
 </script>

package/src/layouts/sidebar/code-block/useContentMenu.ts

@@ -3,13 +3,21 @@ import { CopyDocument, Delete, Edit } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
-import type { EventBus, MenuButton, MenuComponent, TreeNodeData } from '@editor/type';
+import type { ContentMenuTarget, EventBus, MenuButton, MenuComponent, TreeNodeData } from '@editor/type';
 
 export const useContentMenu = (deleteCode: (id: string) => void) => {
   const eventBus = inject<EventBus>('eventBus');
   const menuRef = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
 
   let selectId = '';
+  let selectData: TreeNodeData | null = null;
+
+  const getTarget = (): ContentMenuTarget | null => {
+    if (!selectId) {
+      return null;
+    }
+    return { id: selectId, data: selectData ?? undefined };
+  };
 
   const menuData: (MenuButton | MenuComponent)[] = [
     {
@@ -65,19 +73,23 @@ export const useContentMenu = (deleteCode: (id: string) => void) => {
       menuRef.value?.show(event);
       if (data.id) {
         selectId = `${data.id}`;
+        selectData = data;
       } else {
         selectId = '';
+        selectData = null;
       }
     }
   };
 
   const contentMenuHideHandler = () => {
     selectId = '';
+    selectData = null;
   };
 
   return {
     menuData,
     nodeContentMenuHandler,
     contentMenuHideHandler,
+    getTarget,
   };
 };

package/src/layouts/sidebar/data-source/DataSourceConfigPanel.vue

@@ -1,9 +1,11 @@
 <template>
   <FloatingBox
+    :body-style="{ padding: '0 16px' }"
     v-model:visible="boxVisible"
     v-model:width="width"
     v-model:height="editorHeight"
     :title="title"
+    :framework-width="frameworkWidth"
     :position="boxPosition"
   >
     <template #body>
@@ -65,6 +67,7 @@ const { height: editorHeight } = useEditorContentHeight();
 
 const parentFloating = inject<Ref<HTMLDivElement | null>>('parentFloating', ref(null));
 const { boxPosition, calcBoxPosition } = useNextFloatBoxPosition(uiService, parentFloating);
+const frameworkWidth = computed(() => uiService.get('frameworkRect')?.width || 0);
 
 /** 供「方法定义」tab 内的字段消费，用于打开数据源详情后自动打开指定方法 */
 provide(

package/src/layouts/sidebar/data-source/DataSourceListPanel.vue

@@ -171,8 +171,8 @@ eventBus?.on('remove-data-source', (id: string) => {
   removeHandler(id);
 });
 
-const { nodeContentMenuHandler, menuData: contentMenuData, contentMenuHideHandler } = useContentMenu();
+const { nodeContentMenuHandler, menuData: contentMenuData, contentMenuHideHandler, getTarget } = useContentMenu();
 const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
-  props.customContentMenu(contentMenuData, 'data-source'),
+  props.customContentMenu(contentMenuData, 'data-source', getTarget),
 );
 </script>

package/src/layouts/sidebar/data-source/useContentMenu.ts

@@ -3,13 +3,21 @@ import { CopyDocument, Delete, Edit } from '@element-plus/icons-vue';
 import { cloneDeep } from 'lodash-es';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
-import type { EventBus, MenuButton, MenuComponent, TreeNodeData } from '@editor/type';
+import type { ContentMenuTarget, EventBus, MenuButton, MenuComponent, TreeNodeData } from '@editor/type';
 
 export const useContentMenu = () => {
   const eventBus = inject<EventBus>('eventBus');
   const menuRef = useTemplateRef<InstanceType<typeof ContentMenu>>('menu');
 
   let selectId = '';
+  let selectData: TreeNodeData | null = null;
+
+  const getTarget = (): ContentMenuTarget | null => {
+    if (!selectId) {
+      return null;
+    }
+    return { id: selectId, data: selectData ?? undefined };
+  };
 
   const menuData: (MenuButton | MenuComponent)[] = [
     {
@@ -63,19 +71,23 @@ export const useContentMenu = () => {
       menuRef.value?.show(event);
       if (data.id) {
         selectId = `${data.id}`;
+        selectData = data;
       } else {
         selectId = '';
+        selectData = null;
       }
     }
   };
 
   const contentMenuHideHandler = () => {
     selectId = '';
+    selectData = null;
   };
 
   return {
     menuData,
     nodeContentMenuHandler,
     contentMenuHideHandler,
+    getTarget,
   };
 };

package/src/layouts/sidebar/layer/LayerNodeContent.vue

@@ -0,0 +1,57 @@
+<template>
+  <span class="m-editor-layer-node-content" :class="{ 'is-invalid': hasError }">
+    <span class="m-editor-layer-node-label">{{ label }}</span>
+    <TMagicTooltip v-if="hasError" placement="top">
+      <template #content>
+        <span v-html="errorMessage"></span>
+      </template>
+      <MIcon class="m-editor-layer-node-error-icon" :icon="WarningFilled"></MIcon>
+    </TMagicTooltip>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { WarningFilled } from '@element-plus/icons-vue';
+
+import { stripValidateSuggestion, TMagicTooltip } from '@tmagic/design';
+
+import MIcon from '@editor/components/Icon.vue';
+import { useServices } from '@editor/hooks/use-services';
+import type { TreeNodeData } from '@editor/type';
+
+defineOptions({
+  name: 'MEditorLayerNodeContent',
+});
+
+const props = defineProps<{
+  data: TreeNodeData;
+}>();
+
+const { editorService } = useServices();
+
+const label = computed(() => `${props.data.name} (${props.data.id})`);
+
+/** 读取集中存储的校验错误状态，建立响应式依赖 */
+const invalidInfo = computed(() => editorService.get('invalidNodeIds').get(props.data.id));
+
+const hasError = computed(() => Boolean(invalidInfo.value?.props || invalidInfo.value?.style));
+
+/**
+ * 去掉单条校验文案中的「修改建议」部分。
+ *
+ * 错误文案可能是多条错误以 `<br>` 拼接的 HTML，每条本身形如 `主文案\n\n建议`。
+ * 组件树 tooltip 仅展示错误描述，不展示修改建议（建议仅在错误汇总面板展示），
+ * 故先按 `<br>` 拆分，每段用 `stripValidateSuggestion` 截断建议后再拼回。
+ */
+const stripSuggestion = (text?: string): string =>
+  String(text ?? '')
+    .split(/<br\s*\/?>/i)
+    .map((segment) => stripValidateSuggestion(segment))
+    .join('<br>');
+
+/** 合并属性表单与样式表单的错误文案（去掉建议，本身可能仍是含 <br> 的 HTML） */
+const errorMessage = computed(() =>
+  [stripSuggestion(invalidInfo.value?.props), stripSuggestion(invalidInfo.value?.style)].filter(Boolean).join('<br>'),
+);
+</script>

package/src/layouts/sidebar/layer/LayerPanel.vue

@@ -33,7 +33,9 @@
       </template>
 
       <template #tree-node-label="{ data: nodeData }">
-        <slot name="layer-node-label" :data="nodeData"></slot>
+        <slot name="layer-node-label" :data="nodeData">
+          <LayerNodeContent :data="nodeData"></LayerNodeContent>
+        </slot>
       </template>
     </Tree>
 
@@ -69,6 +71,7 @@ import type {
 } from '@editor/type';
 
 import LayerMenu from './LayerMenu.vue';
+import LayerNodeContent from './LayerNodeContent.vue';
 import LayerNodeTool from './LayerNodeTool.vue';
 import { useClick } from './use-click';
 import { useDrag } from './use-drag';

package/src/layouts/workspace/viewer/NodeListMenu.vue

@@ -8,6 +8,7 @@
     ref="box"
     v-model:visible="visible"
     title="当前位置下的组件"
+    :framework-width="frameworkWidth"
     :position="menuPosition"
   >
     <template #body>
@@ -36,7 +37,9 @@ import { useNodeStatus } from '@editor/layouts/sidebar/layer/use-node-status';
 import type { TreeNodeData } from '@editor/type';
 
 const services = useServices();
-const { editorService } = services;
+const { editorService, uiService } = services;
+
+const frameworkWidth = computed(() => uiService.get('frameworkRect')?.width || 0);
 
 const visible = ref(false);
 const buttonVisible = ref(false);

package/src/plugin.ts

@@ -21,7 +21,7 @@ import type { App } from 'vue';
 import type { DesignPluginOptions } from '@tmagic/design';
 import designPlugin from '@tmagic/design';
 import type { FormInstallOptions } from '@tmagic/form';
-import formPlugin from '@tmagic/form';
+import formPlugin, { registerTypeMatchRules } from '@tmagic/form';
 import tablePlugin from '@tmagic/table';
 
 import Code from './fields/Code.vue';
@@ -44,6 +44,7 @@ import StyleSetter from './fields/StyleSetter/Index.vue';
 import uiSelect from './fields/UISelect.vue';
 import CodeEditor from './layouts/CodeEditor.vue';
 import { setEditorConfig } from './utils/config';
+import { editorTypeMatchRules } from './utils/type-match-rules';
 import Editor from './Editor.vue';
 import type { EditorInstallOptions } from './type';
 
@@ -64,6 +65,7 @@ export default {
     app.use(designPlugin, opt || {});
     app.use(formPlugin, opt || {});
     app.use(tablePlugin);
+    registerTypeMatchRules(editorTypeMatchRules);
 
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setEditorConfig(option);

package/src/services/editor.ts

@@ -31,6 +31,7 @@ import {
   isPage,
   isPageFragment,
   setValueByKeyPath,
+  traverseNode,
 } from '@tmagic/utils';
 
 import BaseService from '@editor/services//BaseService';
@@ -47,6 +48,8 @@ import type {
   EditorNodeInfo,
   HistoryOpSource,
   HistoryOpType,
+  NodeInvalidInfo,
+  NodeInvalidSource,
   PastePosition,
   StepDiffItem,
   StepValue,
@@ -104,12 +107,18 @@ class Editor extends BaseService {
     stageLoading: true,
     highlightNode: null,
     modifiedNodeIds: new Map(),
+    invalidNodeIds: new Map(),
     pageLength: 0,
     pageFragmentLength: 0,
     disabledMultiSelect: false,
     alwaysMultiSelect: false,
   });
   private selectionBeforeOp: Id[] | null = null;
+  /**
+   * 操作前的节点校验错误快照，与 selectionBeforeOp 同时在 captureSelectionBeforeOp 中捕获，
+   * 供 pushOpHistory 写入 step.extra.invalidNodeIdsBefore，用于撤销时还原到「操作前」的错误状态。
+   */
+  private invalidNodeIdsBeforeOp: Map<Id, NodeInvalidInfo> | null = null;
   /**
    * 最近一次 pushOpHistory 写入的历史记录 uuid。
    * 供 *AndGetHistoryId 系列方法在调用普通操作后取回本次产生的历史记录 id；
@@ -127,7 +136,7 @@ class Editor extends BaseService {
 
   /**
    * 设置当前指点节点配置
-   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength
+   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'invalidNodeIds' | 'pageLength' | 'pageFragmentLength
    * @param value MNode
    * @param options.historySource 设置 root 时，本次变更写入历史记录的「操作来源」（仅 name === 'root' 时生效）
    */
@@ -180,12 +189,15 @@ class Editor extends BaseService {
       }
 
       this.emit('root-change', value as StoreState['root'], preValue as StoreState['root'], options);
+
+      // 整体替换 DSL 后，清理不再存在于新 DSL 中的失效节点错误记录，避免残留误报。
+      this.pruneInvalidNodeIds();
     }
   }
 
   /**
    * 获取当前指点节点配置
-   * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'pageLength' | 'pageFragmentLength'
+   * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'stage' | 'modifiedNodeIds' | 'invalidNodeIds' | 'pageLength' | 'pageFragmentLength'
    * @returns MNode
    */
   public get<K extends StoreStateKey>(name: K): StoreState[K] {
@@ -663,6 +675,9 @@ class Editor extends BaseService {
 
     await Promise.all(nodes.map((node) => this.doRemove(node, { doNotSelect, doNotSwitchPage })));
 
+    // 删除节点时同步清理其（含子树）的校验错误记录；置于 pushOpHistory 之前，使历史快照与本次删除对齐。
+    this.removeInvalidNodesBySubtree(nodes);
+
     if (removedItems.length > 0 && pageForOp) {
       if (!doNotPushHistory) {
         this.pushOpHistory('remove', {
@@ -770,11 +785,23 @@ class Editor extends BaseService {
       doNotPushHistory?: boolean;
       historyDescription?: string;
       historySource?: HistoryOpSource;
+      /**
+       * 属性面板提交时携带的校验错误信息，在写入历史记录之前落库，
+       * 使历史快照与本次变更对齐，从而 undo/redo 能正确还原错误标记。
+       */
+      invalidInfo?: { id: Id; source: NodeInvalidSource; error?: string };
     } = {},
   ): Promise<MNode | MNode[]> {
     this.captureSelectionBeforeOp();
 
-    const { doNotPushHistory = false, changeRecordList, changeRecords, historyDescription, historySource } = data;
+    const {
+      doNotPushHistory = false,
+      changeRecordList,
+      changeRecords,
+      historyDescription,
+      historySource,
+      invalidInfo,
+    } = data;
 
     const nodes = Array.isArray(config) ? config : [config];
 
@@ -787,6 +814,9 @@ class Editor extends BaseService {
       }),
     );
 
+    // 校验错误信息在 pushOpHistory 之前落库，保证历史快照包含本次变更对应的错误状态。
+    this.applyInvalidInfo(config, invalidInfo);
+
     if (updateData[0].oldNode?.type !== NodeType.ROOT) {
       const curNodes = this.get('nodes');
       if (curNodes.length) {
@@ -1542,6 +1572,7 @@ class Editor extends BaseService {
     this.set('stage', null);
     this.set('highlightNode', null);
     this.set('modifiedNodeIds', new Map());
+    this.set('invalidNodeIds', new Map());
     this.set('pageLength', 0);
   }
 
@@ -1555,6 +1586,62 @@ class Editor extends BaseService {
     this.get('modifiedNodeIds').clear();
   }
 
+  /**
+   * 记录（或覆盖）某个节点在指定来源（属性表单 / 样式表单）上的校验错误信息。
+   * @param id 节点 id
+   * @param source 错误来源：'props'（属性表单）| 'style'（样式表单）
+   * @param message 错误文案（可能是包含 <br> 的 HTML）
+   */
+  public setInvalidNode(id: Id, source: NodeInvalidSource, message: string) {
+    const map = this.get('invalidNodeIds');
+    const info: NodeInvalidInfo = { ...(map.get(id) || {}) };
+    info[source] = message;
+    map.set(id, info);
+    this.emit('invalid-node-change', map);
+  }
+
+  /**
+   * 删除节点的校验错误记录。
+   * @param id 节点 id
+   * @param source 指定来源则仅删除该来源；不传则删除该节点全部来源的错误
+   */
+  public deleteInvalidNode(id: Id, source?: NodeInvalidSource) {
+    const map = this.get('invalidNodeIds');
+    if (!map.has(id)) return;
+
+    if (!source) {
+      map.delete(id);
+    } else {
+      const info: NodeInvalidInfo = { ...(map.get(id) || {}) };
+      delete info[source];
+      if (info.props || info.style) {
+        map.set(id, info);
+      } else {
+        map.delete(id);
+      }
+    }
+
+    this.emit('invalid-node-change', map);
+  }
+
+  /** 获取当前存在校验错误的节点错误 Map（key 为节点 id） */
+  public getInvalidNodeIds(): Map<Id, NodeInvalidInfo> {
+    return this.get('invalidNodeIds');
+  }
+
+  /** 获取指定节点的校验错误信息 */
+  public getInvalidNodeInfo(id: Id): NodeInvalidInfo | undefined {
+    return this.get('invalidNodeIds').get(id);
+  }
+
+  /** 清空全部校验错误记录 */
+  public resetInvalidNodeId() {
+    const map = this.get('invalidNodeIds');
+    if (map.size === 0) return;
+    map.clear();
+    this.emit('invalid-node-change', map);
+  }
+
   public usePlugin(options: AsyncHookPlugin<AsyncMethodName, Editor>): void {
     super.usePlugin(options);
   }
@@ -1577,6 +1664,68 @@ class Editor extends BaseService {
     return super.emit(eventName, ...args);
   }
 
+  /**
+   * 应用一次属性面板提交携带的校验错误信息（在写入历史记录之前调用，使历史快照与本次变更对齐）。
+   * - invalidInfo 为空（调用方未携带）：认为本次更新对应的节点已无校验错误，清除其全部来源的错误；
+   * - error 非空则记录错误，为空则清除对应来源的错误。
+   */
+  private applyInvalidInfo(
+    config: MNode | MNode[],
+    invalidInfo?: { id: Id; source: NodeInvalidSource; error?: string },
+  ) {
+    if (!invalidInfo) {
+      // 调用方未携带 invalidInfo：本次更新对应节点不应再保留校验错误，清除其全部来源。
+      const ids = (Array.isArray(config) ? config : [config])
+        .map((node) => node.id)
+        .filter((id): id is Id => id !== undefined);
+      ids.forEach((id) => this.deleteInvalidNode(id));
+      return;
+    }
+    const { id, source, error } = invalidInfo;
+    if (error) {
+      this.setInvalidNode(id, source, error);
+    } else {
+      this.deleteInvalidNode(id, source);
+    }
+  }
+
+  /** 删除被移除节点（含其子树）的校验错误记录，避免残留误报 */
+  private removeInvalidNodesBySubtree(nodes: MNode[]) {
+    const map = this.get('invalidNodeIds');
+    if (map.size === 0) return;
+
+    let changed = false;
+    nodes.forEach((node) => {
+      traverseNode(node, (n) => {
+        if (n.id !== undefined && map.delete(n.id)) {
+          changed = true;
+        }
+      });
+    });
+
+    if (changed) {
+      this.emit('invalid-node-change', map);
+    }
+  }
+
+  /** 清理不在当前 DSL 中的失效节点错误记录（用于整体替换 root 后） */
+  private pruneInvalidNodeIds() {
+    const map = this.get('invalidNodeIds');
+    if (map.size === 0) return;
+
+    let changed = false;
+    for (const id of [...map.keys()]) {
+      if (!this.getNodeById(id, false)) {
+        map.delete(id);
+        changed = true;
+      }
+    }
+
+    if (changed) {
+      this.emit('invalid-node-change', map);
+    }
+  }
+
   private addModifiedNodeId(id: Id) {
     this.get('modifiedNodeIds').set(id, id);
   }
@@ -1598,6 +1747,9 @@ class Editor extends BaseService {
   private captureSelectionBeforeOp() {
     if (this.selectionBeforeOp) return;
     this.selectionBeforeOp = this.get('nodes').map((n) => n.id);
+    // 与选区快照同步捕获「操作前」的校验错误状态；因 applyInvalidInfo 会在 pushOpHistory 前修改 invalidNodeIds，
+    // 必须在此（操作最开始）留存操作前快照，供 undo 还原。
+    this.invalidNodeIdsBeforeOp = new Map(this.get('invalidNodeIds'));
   }
 
   /**
@@ -1704,6 +1856,9 @@ class Editor extends BaseService {
         selectedBefore: this.selectionBeforeOp ?? [],
         selectedAfter: this.get('nodes').map((n) => n.id),
         modifiedNodeIds: new Map(this.get('modifiedNodeIds')),
+        // 方向性双快照：undo 还原「操作前」错误状态，redo 还原「操作后」错误状态。
+        invalidNodeIdsBefore: new Map(this.invalidNodeIdsBeforeOp ?? this.get('invalidNodeIds')),
+        invalidNodeIdsAfter: new Map(this.get('invalidNodeIds')),
       },
       diff,
     };
@@ -1716,6 +1871,7 @@ class Editor extends BaseService {
     const historyId = pushed ? step.uuid : null;
     this.lastPushedHistoryId = historyId;
     this.selectionBeforeOp = null;
+    this.invalidNodeIdsBeforeOp = null;
     return historyId;
   }
 
@@ -1841,6 +1997,15 @@ class Editor extends BaseService {
 
     this.set('modifiedNodeIds', step.extra?.modifiedNodeIds ?? new Map());
 
+    // 还原校验错误标记：因 undo/redo 复用同一 step，需按方向取「操作前 / 操作后」快照——
+    // undo(reverse=true) 还原到操作前的错误状态（撤销一个「校验失败」的改动后错误消失），
+    // redo(reverse=false) 还原到操作后的错误状态（重做后错误恢复）。
+    // 浅拷贝一份以隔离历史快照，避免后续 set/deleteInvalidNode 反向污染 step.extra。
+    const invalidToRestore =
+      (reverse ? step.extra?.invalidNodeIdsBefore : step.extra?.invalidNodeIdsAfter) ?? new Map();
+    this.set('invalidNodeIds', new Map(invalidToRestore));
+    this.emit('invalid-node-change', this.get('invalidNodeIds'));
+
     const page = toRaw(this.get('page'));
     if (page) {
       const selectIds = (reverse ? step.extra?.selectedBefore : step.extra?.selectedAfter) ?? [];