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

package/src/fields/StyleSetter/pro/Layout.vue

@@ -26,11 +26,19 @@
 <script lang="ts" setup>
 import { markRaw } from 'vue';
 
+import { useTheme } from '@tmagic/design';
 import type { ContainerChangeEventData } from '@tmagic/form';
 import { defineFormConfig, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
 import Box from '../components/Box.vue';
+import {
+  AlignItemsCenter,
+  AlignItemsFlexEnd,
+  AlignItemsFlexStart,
+  AlignItemsSpaceAround,
+  AlignItemsSpaceBetween,
+} from '../icons/align-items';
 import { DisplayBlock, DisplayFlex, DisplayInline, DisplayInlineBlock, DisplayNone } from '../icons/display';
 import {
   FlexDirectionColumn,
@@ -46,12 +54,13 @@ import {
   JustifyContentSpaceBetween,
 } from '../icons/justify-content';
 
-defineProps<{
+const props = defineProps<{
   values: Partial<StyleSchema>;
   lastValues?: Partial<StyleSchema>;
   isCompare?: boolean;
   disabled?: boolean;
   size?: 'large' | 'default' | 'small';
+  theme?: string;
   prop?: string;
 }>();
 
@@ -60,19 +69,42 @@ const emit = defineEmits<{
   addDiffCount: [];
 }>();
 
+const displayTheme = useTheme(props);
+
 const formConfig = defineFormConfig([
   {
     name: 'display',
     text: '模式',
     type: 'radioGroup',
     childType: 'button',
-    labelWidth: '68px',
+    labelWidth: '90px',
+    iconSize: '24px',
     options: [
-      { value: 'inline', icon: markRaw(DisplayInline), tooltip: '内联布局 inline' },
-      { value: 'flex', icon: markRaw(DisplayFlex), tooltip: '弹性布局 flex' },
-      { value: 'block', icon: markRaw(DisplayBlock), tooltip: '块级布局 block' },
-      { value: 'inline-block', icon: markRaw(DisplayInlineBlock), tooltip: '内联块布局 inline-block' },
-      { value: 'none', icon: markRaw(DisplayNone), tooltip: '隐藏 none' },
+      {
+        value: 'inline',
+        icon: markRaw(DisplayInline),
+        tooltip: '内联布局 inline',
+      },
+      {
+        value: 'flex',
+        icon: markRaw(DisplayFlex),
+        tooltip: '弹性布局 flex',
+      },
+      {
+        value: 'block',
+        icon: markRaw(DisplayBlock),
+        tooltip: '块级布局 block',
+      },
+      {
+        value: 'inline-block',
+        icon: markRaw(DisplayInlineBlock),
+        tooltip: '内联块布局 inline-block',
+      },
+      {
+        value: 'none',
+        icon: markRaw(DisplayNone),
+        tooltip: '隐藏 none',
+      },
     ],
   },
   {
@@ -80,11 +112,20 @@ const formConfig = defineFormConfig([
     text: '主轴方向',
     type: 'radioGroup',
     childType: 'button',
-    labelWidth: '68px',
+    labelWidth: '90px',
+    iconSize: '24px',
     options: [
       { value: 'row', icon: markRaw(FlexDirectionRow), tooltip: '水平方向 起点在左侧 row' },
-      { value: 'row-reverse', icon: markRaw(FlexDirectionRowReverse), tooltip: '水平方向 起点在右侧 row-reverse' },
-      { value: 'column', icon: markRaw(FlexDirectionColumn), tooltip: '垂直方向 起点在上沿 column' },
+      {
+        value: 'row-reverse',
+        icon: markRaw(FlexDirectionRowReverse),
+        tooltip: '水平方向 起点在右侧 row-reverse',
+      },
+      {
+        value: 'column',
+        icon: markRaw(FlexDirectionColumn),
+        tooltip: '垂直方向 起点在上沿 column',
+      },
       {
         value: 'column-reverse',
         icon: markRaw(FlexDirectionColumnReverse),
@@ -98,13 +139,22 @@ const formConfig = defineFormConfig([
     text: '主轴对齐',
     type: 'radioGroup',
     childType: 'button',
-    labelWidth: '68px',
+    labelWidth: '90px',
+    iconSize: '24px',
     options: [
       { value: 'flex-start', icon: markRaw(JustifyContentFlexStart), tooltip: '左对齐 flex-start' },
       { value: 'flex-end', icon: markRaw(JustifyContentFlexEnd), tooltip: '右对齐 flex-end' },
       { value: 'center', icon: markRaw(JustifyContentCenter), tooltip: '居中 center' },
-      { value: 'space-between', icon: markRaw(JustifyContentSpaceBetween), tooltip: '两端对齐 space-between' },
-      { value: 'space-around', icon: markRaw(JustifyContentSpaceAround), tooltip: '横向平分 space-around' },
+      {
+        value: 'space-between',
+        icon: markRaw(JustifyContentSpaceBetween),
+        tooltip: '两端对齐 space-between',
+      },
+      {
+        value: 'space-around',
+        icon: markRaw(JustifyContentSpaceAround),
+        tooltip: '横向平分 space-around',
+      },
     ],
     display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
   },
@@ -113,13 +163,22 @@ const formConfig = defineFormConfig([
     text: '辅轴对齐',
     type: 'radioGroup',
     childType: 'button',
-    labelWidth: '68px',
+    labelWidth: '90px',
+    iconSize: '24px',
     options: [
-      { value: 'flex-start', icon: markRaw(JustifyContentFlexStart), tooltip: '左对齐 flex-start' },
-      { value: 'flex-end', icon: markRaw(JustifyContentFlexEnd), tooltip: '右对齐 flex-end' },
-      { value: 'center', icon: markRaw(JustifyContentCenter), tooltip: '居中 center' },
-      { value: 'space-between', icon: markRaw(JustifyContentSpaceBetween), tooltip: '两端对齐 space-between' },
-      { value: 'space-around', icon: markRaw(JustifyContentSpaceAround), tooltip: '横向平分 space-around' },
+      { value: 'flex-start', icon: markRaw(AlignItemsFlexStart), tooltip: '左对齐 flex-start' },
+      { value: 'flex-end', icon: markRaw(AlignItemsFlexEnd), tooltip: '右对齐 flex-end' },
+      { value: 'center', icon: markRaw(AlignItemsCenter), tooltip: '居中 center' },
+      {
+        value: 'space-between',
+        icon: markRaw(AlignItemsSpaceBetween),
+        tooltip: '两端对齐 space-between',
+      },
+      {
+        value: 'space-around',
+        icon: markRaw(AlignItemsSpaceAround),
+        tooltip: '横向平分 space-around',
+      },
     ],
     display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
   },
@@ -127,8 +186,9 @@ const formConfig = defineFormConfig([
     name: 'flexWrap',
     text: '换行',
     type: 'radioGroup',
-    childType: 'button',
-    labelWidth: '68px',
+    childType: displayTheme.value !== 'magic-admin' ? 'button' : 'default',
+    labelWidth: '90px',
+    iconSize: '24px',
     options: [
       { value: 'nowrap', text: '不换行', tooltip: '不换行 nowrap' },
       { value: 'wrap', text: '正换行', tooltip: '第一行在上方 wrap' },
@@ -141,17 +201,22 @@ const formConfig = defineFormConfig([
     items: [
       {
         name: 'width',
-        text: '宽度',
-        labelWidth: '68px',
+        text: '宽度（px）',
+        labelWidth: '90px',
         type: 'data-source-field-select',
         fieldConfig: {
           type: 'text',
         },
       },
+    ],
+  },
+  {
+    type: 'row',
+    items: [
       {
         name: 'height',
-        text: '高度',
-        labelWidth: '68px',
+        text: '高度（px）',
+        labelWidth: '90px',
         type: 'data-source-field-select',
         fieldConfig: {
           type: 'text',
@@ -166,7 +231,7 @@ const formConfig = defineFormConfig([
         type: 'data-source-field-select',
         text: 'overflow',
         name: 'overflow',
-        labelWidth: '68px',
+        labelWidth: '90px',
         checkStrictly: false,
         dataSourceFieldType: ['string'],
         fieldConfig: {
@@ -184,11 +249,16 @@ const formConfig = defineFormConfig([
           ],
         },
       },
+    ],
+  },
+  {
+    type: 'row',
+    items: [
       {
         type: 'data-source-field-select',
-        text: '透明度',
+        text: '透明度（%）',
         name: 'opacity',
-        labelWidth: '68px',
+        labelWidth: '90px',
         dataSourceFieldType: ['string', 'number'],
         fieldConfig: {
           type: 'text',

package/src/icons/DatasourceIcon.vue

@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+    <path
+      d="M6.25 9.723C4.392 9.6095 2.804 9.137 1.875 8.4775V9.7495C1.875 10.6165 3.7665 11.3365 6.25 11.4745V12.348C4.392 12.2345 2.804 11.763 1.875 11.102V12.3745H1V4.0625C1 2.371 3.742 1 7.125 1C10.507 1 13.249 2.371 13.249 4.0625V6.8255H12.374V5.6405C11.3025 6.5295 9.352 7.1245 7.1245 7.1245C4.897 7.1245 2.947 6.5295 1.8745 5.6405V7.1245C1.8745 7.9915 3.7665 8.712 6.2495 8.85L6.25 9.723ZM7.125 14.999C3.742 14.999 1 13.8245 1 12.3745H1.875C1.875 13.3415 4.225 14.124 7.125 14.124V14.999ZM7.125 6.2495C10.024 6.2495 12.3745 5.2695 12.3745 4.0625C12.3745 2.855 10.0245 1.875 7.1245 1.875C4.225 1.875 1.8745 2.855 1.8745 4.0625C1.8745 5.2695 4.2255 6.2495 7.125 6.2495ZM14.7385 11.9895L14.1295 11.6345C14.1635 11.4485 14.1855 11.2585 14.1855 11.062C14.1843 10.8697 14.1655 10.6779 14.1295 10.489L14.7385 10.134C14.988 9.987 15.073 9.667 14.929 9.416L14.409 8.507C14.3752 8.44726 14.3299 8.39483 14.2757 8.35275C14.2215 8.31066 14.1595 8.27977 14.0933 8.26186C14.027 8.24395 13.9579 8.23938 13.8898 8.24842C13.8218 8.25745 13.7563 8.27992 13.697 8.3145L13.081 8.6735C12.7931 8.42269 12.4616 8.22694 12.103 8.096V7.6495C12.103 7.36 11.8705 7.1245 11.5825 7.1245H10.5415C10.4728 7.12476 10.4049 7.13855 10.3415 7.16507C10.2782 7.1916 10.2206 7.23034 10.1723 7.2791C10.1239 7.32785 10.0856 7.38565 10.0595 7.4492C10.0335 7.51276 10.0202 7.58082 10.0205 7.6495V8.096C9.66186 8.22694 9.33035 8.42269 9.0425 8.6735L8.4265 8.3145C8.36725 8.27999 8.30174 8.2576 8.23377 8.2486C8.1658 8.23961 8.09672 8.24419 8.03053 8.2621C7.96435 8.28001 7.90238 8.31088 7.84821 8.35292C7.79405 8.39495 7.74877 8.44733 7.715 8.507L7.195 9.417C7.12576 9.53751 7.10688 9.68047 7.14246 9.81482C7.17804 9.94917 7.2652 10.0641 7.385 10.1345L7.9945 10.489C7.9585 10.6775 7.9395 10.8695 7.9385 11.062C7.9385 11.2585 7.96 11.4485 7.9945 11.635L7.3855 11.99C7.1355 12.1365 7.0505 12.4565 7.1945 12.7075L7.715 13.6165C7.74877 13.6762 7.79405 13.7285 7.84821 13.7706C7.90238 13.8126 7.96435 13.8435 8.03053 13.8614C8.09672 13.8793 8.1658 13.8839 8.23377 13.8749C8.30174 13.8659 8.36725 13.8435 8.4265 13.809L9.0425 13.4505C9.33023 13.7015 9.66178 13.8972 10.0205 14.028V14.474C10.0205 14.764 10.2535 14.999 10.5415 14.999H11.5825C11.7211 14.9983 11.8538 14.9427 11.9514 14.8442C12.049 14.7458 12.1035 14.6126 12.103 14.474V14.028C12.4616 13.8971 12.7931 13.7013 13.081 13.4505L13.697 13.809C13.7563 13.8434 13.8218 13.8657 13.8897 13.8746C13.9577 13.8835 14.0267 13.8789 14.0929 13.861C14.159 13.8431 14.221 13.8123 14.2751 13.7703C14.3293 13.7283 14.3746 13.6761 14.4085 13.6165L14.929 12.7065C14.998 12.586 15.0168 12.4431 14.9811 12.3089C14.9454 12.1746 14.8583 12.0599 14.7385 11.9895ZM14.092 12.5065L13.852 12.915C13.8193 12.9693 13.7667 13.0086 13.7054 13.0246C13.6441 13.0406 13.579 13.0319 13.524 13.0005L12.8575 12.623C12.5109 13.0069 12.0497 13.2688 11.5425 13.37V13.889C11.5425 14.0185 11.4345 14.124 11.3015 14.124H10.822C10.7907 14.1243 10.7597 14.1184 10.7308 14.1067C10.7018 14.0949 10.6754 14.0776 10.6531 14.0557C10.6308 14.0338 10.6131 14.0077 10.6009 13.9789C10.5887 13.9502 10.5823 13.9193 10.582 13.888V13.37C10.0746 13.2689 9.61328 13.007 9.2665 12.623L8.6 13C8.54495 13.0316 8.47971 13.0403 8.4183 13.0243C8.35688 13.0083 8.30418 12.9689 8.2715 12.9145L8.0315 12.506C8.01582 12.4792 8.00564 12.4496 8.00158 12.4189C7.99752 12.3881 7.99965 12.3569 8.00785 12.327C8.01605 12.297 8.03016 12.2691 8.04933 12.2447C8.0685 12.2203 8.09236 12.2 8.1195 12.185L8.789 11.805C8.70604 11.5658 8.66313 11.3146 8.662 11.0615C8.662 10.8005 8.709 10.552 8.7895 10.3175L8.1195 9.9375C8.09247 9.92244 8.06872 9.90213 8.04964 9.87777C8.03056 9.85341 8.01654 9.82549 8.00839 9.79564C8.00024 9.76579 7.99813 9.73461 8.00218 9.70394C8.00624 9.67326 8.01637 9.64371 8.032 9.617L8.272 9.208C8.30467 9.15373 8.35729 9.1144 8.41858 9.09843C8.47988 9.08245 8.54499 9.09109 8.6 9.1225L9.2665 9.5005C9.61315 9.11663 10.0743 8.85468 10.5815 8.7535V8.235C10.5815 8.105 10.689 8 10.822 8H11.302C11.4345 8 11.542 8.105 11.542 8.236V8.754C12.0492 8.85518 12.5104 9.11713 12.857 9.501L13.524 9.123C13.579 9.09159 13.6441 9.08295 13.7054 9.09893C13.7667 9.1149 13.8193 9.15423 13.852 9.2085L14.092 9.6175C14.1077 9.64423 14.1179 9.67383 14.122 9.70455C14.1261 9.73528 14.124 9.76652 14.1159 9.79643C14.1077 9.82634 14.0937 9.85431 14.0745 9.87871C14.0554 9.90311 14.0316 9.92344 14.0045 9.9385L13.335 10.3185C13.4135 10.5525 13.462 10.801 13.462 11.062C13.462 11.3225 13.4145 11.571 13.335 11.8055L14.0045 12.1855C14.0316 12.2006 14.0554 12.2209 14.0745 12.2453C14.0937 12.2697 14.1077 12.2977 14.1159 12.3276C14.124 12.3575 14.1261 12.3887 14.122 12.4194C14.1179 12.4502 14.1077 12.4798 14.092 12.5065ZM11.062 9.7495C10.7139 9.7495 10.3801 9.88778 10.1339 10.1339C9.88778 10.3801 9.7495 10.7139 9.7495 11.062C9.7495 11.4101 9.88778 11.7439 10.1339 11.9901C10.3801 12.2362 10.7139 12.3745 11.062 12.3745C11.4101 12.3745 11.7439 12.2362 11.9901 11.9901C12.2362 11.7439 12.3745 11.4101 12.3745 11.062C12.3745 10.7139 12.2362 10.3801 11.9901 10.1339C11.7439 9.88778 11.4101 9.7495 11.062 9.7495ZM11.062 11.4995C10.946 11.4995 10.8347 11.4534 10.7526 11.3714C10.6706 11.2893 10.6245 11.178 10.6245 11.062C10.6245 10.946 10.6706 10.8347 10.7526 10.7526C10.8347 10.6706 10.946 10.6245 11.062 10.6245C11.178 10.6245 11.2893 10.6706 11.3714 10.7526C11.4534 10.8347 11.4995 10.946 11.4995 11.062C11.4995 11.178 11.4534 11.2893 11.3714 11.3714C11.2893 11.4534 11.178 11.4995 11.062 11.4995Z"
+    />
+  </svg>
+</template>

package/src/index.ts

@@ -32,6 +32,9 @@ export { DepTargetType } from '@tmagic/core';
 export * from './type';
 export * from './hooks';
 export * from './utils';
+// `isGlobalFlat` 同时在 `@tmagic/design` 和 `./utils/config` 中存在，
+// 通过显式重导一次消除 `export *` 带来的歧义，并固定使用 editor 自己那份。
+export { isGlobalFlat } from './utils/config';
 export { default as TMagicEditor } from './Editor.vue';
 export { default as TMagicCodeEditor } from './layouts/CodeEditor.vue';
 export { default as editorService } from './services/editor';

package/src/layouts/Framework.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="m-editor" ref="content" style="min-width: 900px">
+  <div
+    ref="content"
+    :class="['m-editor', theme ? `m-editor--${theme}` : '', theme ? `m-theme--${theme}` : '']"
+    style="min-width: 900px"
+  >
     <slot name="header"></slot>
 
     <slot name="nav"></slot>
@@ -97,6 +101,8 @@ const props = defineProps<{
   pageFilterFunction?: (_page: MPage | MPageFragment, _keyword: string) => boolean;
   /** 是否隐藏左侧面板 */
   hideSidebar?: boolean;
+  /** 主题名称，会在根节点追加 `m-editor--<theme>` 修饰类 */
+  theme?: string;
 }>();
 
 const codeOptions = inject('codeOptions', {});

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

@@ -111,14 +111,31 @@ const styleFormConfig = [
   },
 ];
 
+// 用单调递增序号标记每次 init 调用，只让"最新一次"的 await 结果落到 ref 上。
+// 避免节点快速切换时多个 init 并发 + 解析顺序错乱导致 stale config 覆盖最新选中节点，
+// 以及组件已卸载 / FormPanel 正在 remount 的中间态下写 ref 触发 Vue setRef 把 __vnode
+// 设到 null 上的报错（TypeError: Cannot set properties of null (setting '__vnode')）。
+let initSeq = 0;
+let mounted = true;
+
 const init = async () => {
+  initSeq += 1;
+  const seq = initSeq;
+
   if (!node.value) {
+    if (seq !== initSeq || !mounted) return;
     curFormConfig.value = [];
     return;
   }
 
   const type = node.value.type || (node.value.items ? 'container' : 'text');
-  curFormConfig.value = await propsService.getPropsConfig(type, { node: node.value });
+  const config = await propsService.getPropsConfig(type, { node: node.value });
+
+  // 期间被新一次 init 取代 / 组件已卸载，丢弃本次结果
+  if (seq !== initSeq || !mounted) return;
+  if (!node.value) return;
+
+  curFormConfig.value = config;
   values.value = node.value;
 };
 
@@ -126,6 +143,7 @@ watchEffect(init);
 propsService.on('props-configs-change', init);
 
 onBeforeUnmount(() => {
+  mounted = false;
   propsService.off('props-configs-change', init);
 });
 
@@ -146,17 +164,25 @@ const submit = async (
     };
 
     if (v.style) {
-      Object.entries(v.style).forEach(([key, value]) => {
-        if (value !== '' && newValue.style) {
-          newValue.style[key] = value;
-        }
-      });
-
-      eventData?.changeRecords?.forEach((record) => {
-        if (record.propPath?.startsWith('style') && record.value === '') {
-          setValueByKeyPath(record.propPath, record.value, newValue);
-        }
-      });
+      // 空字符串样式值表示「清除该样式」，需保留才能在 doUpdate 的 mergeWith 中覆盖旧值。
+      if (eventData) {
+        // 表单编辑：先过滤掉空字符串（避免表单默认空值污染 DSL），
+        // 再按 changeRecords 恢复被主动清空的字段。
+        Object.entries(v.style).forEach(([key, value]) => {
+          if (value !== '' && newValue.style) {
+            newValue.style[key] = value;
+          }
+        });
+
+        eventData.changeRecords?.forEach((record) => {
+          if (record.propPath?.startsWith('style') && record.value === '') {
+            setValueByKeyPath(record.propPath, record.value, newValue);
+          }
+        });
+      } else {
+        // 源码编辑器保存（无 eventData）：style 原样保留，其中的空字符串视为用户主动清除该样式。
+        newValue.style = { ...v.style };
+      }
     }
 
     // 区分操作途径：表单字段编辑（MForm @change）会带上 eventData（含 changeRecords）；

package/src/layouts/sidebar/Sidebar.vue

@@ -155,7 +155,7 @@
 
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue';
-import { Close, Coin, EditPen, Goods, List } from '@element-plus/icons-vue';
+import { Box, Close, Coin, EditPen, Finished } from '@element-plus/icons-vue';
 
 import FloatingBox from '@editor/components/FloatingBox.vue';
 import MIcon from '@editor/components/Icon.vue';
@@ -253,7 +253,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
     [SideItemKey.COMPONENT_LIST]: {
       $key: SideItemKey.COMPONENT_LIST,
       type: 'component',
-      icon: Goods,
+      icon: Box,
       text: '组件',
       component: ComponentListPanel,
       slots: {},
@@ -261,7 +261,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
     layer: {
       $key: SideItemKey.LAYER,
       type: 'component',
-      icon: List,
+      icon: Finished,
       text: '已选组件',
       props: {
         layerContentMenu: props.layerContentMenu,

package/src/plugin.ts

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import type { App } from 'vue';
+import { type App } from 'vue';
 
 import type { DesignPluginOptions } from '@tmagic/design';
 import designPlugin from '@tmagic/design';
@@ -56,6 +56,8 @@ const defaultInstallOpt: EditorInstallOptions = {
   customCreateMonacoEditor: (monaco, codeEditorEl, options) => monaco.editor.create(codeEditorEl, options),
   customCreateMonacoDiffEditor: (monaco, codeEditorEl, options) =>
     monaco.editor.createDiffEditor(codeEditorEl, options),
+
+  flat: false,
 };
 
 export default {
@@ -69,7 +71,6 @@ export default {
 
     app.config.globalProperties.$TMAGIC_EDITOR = option;
     setEditorConfig(option);
-
     app.component(`${Editor.name || 'MEditor'}`, Editor);
     app.component('magic-code-editor', CodeEditor);
     app.component('m-fields-ui-select', uiSelect);

package/src/services/editor.ts

@@ -550,8 +550,16 @@ class Editor extends BaseService {
     this.emit('change', {
       type: 'add',
       data: newNodes.map((node) => ({ node, page: this.getPageOfNode(node.id) })),
+      historySource,
+      doNotPushHistory,
     });
 
+    // 页面 / 页面片新增不入历史栈（见上方 isPage / isPageFragment 分支），这里合并补发一次结构变更通知
+    const addedPages = newNodes.filter((node) => isPage(node) || isPageFragment(node)) as (MPage | MPageFragment)[];
+    if (addedPages.length) {
+      historyService.notifyPageStructureChange({ add: addedPages, remove: [] });
+    }
+
     return Array.isArray(addNode) ? newNodes : newNodes[0];
   }
 
@@ -692,7 +700,13 @@ class Editor extends BaseService {
     }
 
     this.emit('remove', nodes);
-    this.emit('change', { type: 'remove', data: changeItems });
+    this.emit('change', { type: 'remove', data: changeItems, historySource, doNotPushHistory });
+
+    // 页面 / 页面片删除不入历史栈（见上方 isPage / isPageFragment 分支），这里合并补发一次结构变更通知
+    const removedPages = nodes.filter((node) => isPage(node) || isPageFragment(node)) as (MPage | MPageFragment)[];
+    if (removedPages.length) {
+      historyService.notifyPageStructureChange({ add: [], remove: removedPages });
+    }
   }
 
   public async doUpdate(
@@ -846,6 +860,8 @@ class Editor extends BaseService {
     this.emit('change', {
       type: 'update',
       data: updateData.map((node) => ({ node, page: this.getPageOfNode(node.newNode.id) })),
+      historySource,
+      doNotPushHistory,
     });
     return Array.isArray(config) ? updateData.map((item) => item.newNode) : updateData[0].newNode;
   }
@@ -1092,6 +1108,8 @@ class Editor extends BaseService {
       type: 'move-layer',
       data: [{ node, page: this.getPageOfNode(node.id) }],
       offset,
+      historySource,
+      doNotPushHistory,
     });
   }
 
@@ -1277,6 +1295,8 @@ class Editor extends BaseService {
       data: configs.map((node) => ({ node, page: this.getPageOfNode(node.id) })),
       targetIndex,
       targetParent,
+      historySource,
+      doNotPushHistory,
     });
   }
 
@@ -1768,6 +1788,10 @@ class Editor extends BaseService {
     const nextMap = new Map(nextPages.map((p) => [`${p.id}`, p]));
     const indexInItems = (root: MApp, id: Id) => (root.items ?? []).findIndex((item) => `${item.id}` === `${id}`);
 
+    // 收集本次整体替换中增删的页面，循环结束后合并为一次结构变更通知（避免逐页派发多个事件）
+    const addedPages: (MPage | MPageFragment)[] = [];
+    const removedPages: (MPage | MPageFragment)[] = [];
+
     nextPages.forEach((nextPage) => {
       const prevPage = prevMap.get(`${nextPage.id}`);
       if (!prevPage) {
@@ -1777,6 +1801,7 @@ class Editor extends BaseService {
           { newSchema: cloneDeep(toRaw(nextPage)), parentId: nextRoot.id, index: indexInItems(nextRoot, nextPage.id) },
           source,
         );
+        addedPages.push(nextPage);
       } else if (!isEqual(toRaw(prevPage), toRaw(nextPage))) {
         this.pushPageDiffStep(
           'update',
@@ -1795,8 +1820,13 @@ class Editor extends BaseService {
           { oldSchema: cloneDeep(toRaw(prevPage)), parentId: preRoot.id, index: indexInItems(preRoot, prevPage.id) },
           source,
         );
+        removedPages.push(prevPage);
       }
     });
+
+    if (addedPages.length || removedPages.length) {
+      historyService.notifyPageStructureChange({ add: addedPages, remove: removedPages });
+    }
   }
 
   /**
@@ -1878,10 +1908,12 @@ class Editor extends BaseService {
   /**
    * 应用历史操作（撤销 / 重做）
    *
-   * 所有 DSL 修改都走 `editor.add / remove / update`，并通过 `doNotPushHistory` 阻止再次入栈、
-   * `doNotSelect / doNotSwitchPage` 让选区由方法末尾的统一逻辑兜底。
+   * 删除 / 更新类修改走 `editor.remove / update`，并通过 `doNotPushHistory` 阻止再次入栈、
+   * `doNotSelect / doNotSwitchPage` 让选区由方法末尾的统一逻辑兜底；
+   * 「重新插回节点」（撤销 remove / 重做 add）需按 step 记录的 parentId / index 精确还原，
+   * 不走 this.add，由手工 splice + stage.add 完成后补发等价的 add / change 事件（见 emitHistoryInsertEvents）。
    *
-   * 注意：这些公开方法会发出 add / remove / update 事件，业务侧若需要区分"用户操作"与"撤销重做触发"，
+   * 注意：这些路径都会发出 add / remove / update / change 事件，业务侧若需要区分"用户操作"与"撤销重做触发"，
    * 请监听 `history-change` 事件配合判断。
    *
    * @param step 操作记录
@@ -1894,7 +1926,14 @@ class Editor extends BaseService {
     const stage = this.get('stage');
     if (!root) return;
 
-    const commonOpts = { doNotSelect: true, doNotSwitchPage: true, doNotPushHistory: true } as const;
+    // 撤销/重做内部复用 add/remove/update，透传被应用 step 上记录的 source，
+    // 使其触发的 change 事件同样携带「历史来源」
+    const commonOpts = {
+      doNotSelect: true,
+      doNotSwitchPage: true,
+      doNotPushHistory: true,
+      historySource: step.source,
+    } as const;
 
     switch (step.opType) {
       case 'add': {
@@ -1910,17 +1949,22 @@ class Editor extends BaseService {
           }
         } else {
           // 重做 add：按记录的 parentId / index 把节点重新插回父容器。
-          // 按目标 index 升序逐个插入，先小后大避免索引漂移
+          // 按目标 index 升序逐个插入，先小后大避免索引漂移。
+          // 不走 this.add：doAdd 依赖当前选中节点（无选区时直接抛错），且只能插到选中节点之后 / 末尾，
+          // 无法按 step 记录的 parentId / index 精确还原，还会重算 style 破坏已记录的终态位置。
           const sorted = [...items].sort((a, b) => (a.index ?? 0) - (b.index ?? 0));
+          const addedNodes: MNode[] = [];
           for (const { newSchema, parentId, index } of sorted) {
             if (!newSchema || parentId === undefined) continue;
             const parent = this.getNodeById(parentId, false) as MContainer | null;
             if (parent?.items) {
+              const addedNode = cloneDeep(newSchema);
               if (typeof index === 'number' && index >= 0 && index < parent.items.length) {
-                parent.items.splice(index, 0, cloneDeep(newSchema));
+                parent.items.splice(index, 0, addedNode);
               } else {
-                parent.items.push(cloneDeep(newSchema));
+                parent.items.push(addedNode);
               }
+              addedNodes.push(addedNode);
               await stage?.add({
                 config: cloneDeep(newSchema),
                 parent: cloneDeep(parent),
@@ -1929,19 +1973,23 @@ class Editor extends BaseService {
               });
             }
           }
+          this.emitHistoryInsertEvents(addedNodes, step.source);
         }
         break;
       }
       case 'remove': {
         const items = step.diff ?? [];
         if (reverse) {
-          // 撤销 remove：按原 index 升序逐个插回（先小后大避免索引漂移）
+          // 撤销 remove：按原 index 升序逐个插回（先小后大避免索引漂移）；不走 this.add 的原因同上
           const sorted = [...items].sort((a, b) => (a.index ?? 0) - (b.index ?? 0));
+          const addedNodes: MNode[] = [];
           for (const { oldSchema, parentId, index } of sorted) {
             if (!oldSchema || parentId === undefined) continue;
             const parent = this.getNodeById(parentId, false) as MContainer | null;
             if (parent?.items) {
-              parent.items.splice(index ?? parent.items.length, 0, cloneDeep(oldSchema));
+              const addedNode = cloneDeep(oldSchema);
+              parent.items.splice(index ?? parent.items.length, 0, addedNode);
+              addedNodes.push(addedNode);
               await stage?.add({
                 config: cloneDeep(oldSchema),
                 parent: cloneDeep(parent),
@@ -1950,6 +1998,7 @@ class Editor extends BaseService {
               });
             }
           }
+          this.emitHistoryInsertEvents(addedNodes, step.source);
         } else {
           // 重做 remove：再删一次
           for (const { oldSchema } of items) {
@@ -1989,7 +2038,7 @@ class Editor extends BaseService {
             return cloneDeep(reverse ? oldNode : newNode);
           });
         if (configs.length) {
-          await this.update(configs, { doNotPushHistory: true });
+          await this.update(configs, { doNotPushHistory: true, historySource: step.source });
         }
         break;
       }
@@ -2028,6 +2077,22 @@ class Editor extends BaseService {
   private selectedConfigExceptionHandler(config: MNode | Id): EditorNodeInfo {
     return resolveSelectedNode(config, (id) => this.getNodeInfo(id), this.state.root?.id);
   }
+
+  /**
+   * 撤销 remove / 重做 add 通过手工 splice 按 step 记录的 parentId / index 精确还原节点（不走 this.add，原因见调用处注释），
+   * 这里补齐与 this.add 等价的 add / change 事件，保证撤销/重做路径的事件行为与正向操作一致。
+   */
+  private emitHistoryInsertEvents(nodes: MNode[], source?: HistoryOpSource) {
+    if (!nodes.length) return;
+    this.emit('add', nodes);
+    this.emit('change', {
+      type: 'add',
+      data: nodes.map((node) => ({ node, page: this.getPageOfNode(node.id) })),
+      historySource: source,
+      // 撤销/重做本身不再写入历史记录
+      doNotPushHistory: true,
+    });
+  }
 }
 
 export type EditorService = Editor;

package/src/services/history.ts

@@ -19,7 +19,7 @@
 import { reactive } from 'vue';
 import type { Writable } from 'type-fest';
 
-import type { Id } from '@tmagic/core';
+import type { Id, MPage, MPageFragment } from '@tmagic/core';
 import { guid } from '@tmagic/utils';
 
 import type {
@@ -353,6 +353,27 @@ class History extends BaseService {
     this.emit('mark-saved', { kind: stepType, id });
   }
 
+  /**
+   * 派发「页面 / 页面片结构变更」事件（`page-structure-change`）。
+   *
+   * 常规 `editorService.add` / `remove` 页面节点不会写入 `page` 历史栈（见 editor.add / remove 中
+   * 对 isPage / isPageFragment 的分支），因此不会产生任何 historyService 事件。该方法用于在这些
+   * 场景（以及 setRoot 整体替换 DSL 增删页面）下，向外统一通知页面结构的增删变化，供业务方感知。
+   *
+   * 一次操作涉及多个页面时，调用方应把本次增删的页面**合并为一个 change 一次性传入**，
+   * 使一次操作只派发一个事件；`add` / `remove` 分别为本次新增与删除的页面列表（其一可为空数组）。
+   *
+   * @param change 本次结构变更：{ add: 新增的页面列表, remove: 删除的页面列表 }
+   */
+  public notifyPageStructureChange(change: {
+    add: (MPage | MPageFragment)[];
+    remove: (MPage | MPageFragment)[];
+  }): void {
+    // 增删均为空时不派发，避免无意义通知
+    if (!change.add.length && !change.remove.length) return;
+    this.emit('page-structure-change', change);
+  }
+
   /**
    * 把当前内存中的全部历史栈（页面 / 代码块 / 数据源 / 扩展类型）序列化后写入本地 IndexedDB。
    *