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

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>([]);
@@ -108,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;
 };
 
@@ -123,10 +143,16 @@ watchEffect(init);
 propsService.on('props-configs-change', init);
 
 onBeforeUnmount(() => {
+  mounted = false;
   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;
@@ -138,20 +164,38 @@ const submit = async (v: MNode, eventData?: ContainerChangeEventData) => {
     };
 
     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 };
+      }
     }
 
-    editorService.update(newValue, { changeRecords: eventData?.changeRecords });
+    // 区分操作途径：表单字段编辑（MForm @change）会带上 eventData（含 changeRecords）；
+    // 源码编辑器（CodeEditor @save → saveCode）保存时不带 eventData，据此标记为「源码编辑器」。
+    const historySource = eventData ? 'props' : 'code';
+
+    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/ComponentListPanel.vue

@@ -94,11 +94,15 @@ let clientX: number;
 let clientY: number;
 
 const appendComponent = ({ text, type, data = {} }: ComponentItem): void => {
-  editorService.add({
-    name: text,
-    type,
-    ...data,
-  });
+  editorService.add(
+    {
+      name: text,
+      type,
+      ...data,
+    },
+    undefined,
+    { historySource: 'component-panel' },
+  );
 };
 
 const dragstartHandler = ({ text, type, data = {} }: ComponentItem, e: DragEvent) => {
@@ -141,6 +145,6 @@ const dragHandler = (e: DragEvent) => {
 
   if (timeout || !stage.value) return;
 
-  timeout = stage.value.delayedMarkContainer(e);
+  timeout = stage.value.delayedMarkContainer(e, [], true);
 };
 </script>

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,
@@ -154,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';
@@ -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);
 
@@ -239,22 +241,27 @@ const unWatchEditorContentHeight = watch(
   },
 );
 
-const activeTabName = ref(props.data?.status);
+const activeTabName = computed<string>({
+  get: () => uiService.get('sideBarActiveTabName'),
+  set: (value) => uiService.set('sideBarActiveTabName', value),
+});
+
+uiService.set('sideBarActiveTabName', props.data?.status || '');
 
 const getItemConfig = (data: SideItem): SideComponent => {
   const map: Record<string, SideComponent> = {
     [SideItemKey.COMPONENT_LIST]: {
       $key: SideItemKey.COMPONENT_LIST,
       type: 'component',
-      icon: Goods,
+      icon: Box,
       text: '组件',
       component: ComponentListPanel,
       slots: {},
     },
     layer: {
-      $key: 'layer',
+      $key: SideItemKey.LAYER,
       type: 'component',
-      icon: List,
+      icon: Finished,
       text: '已选组件',
       props: {
         layerContentMenu: props.layerContentMenu,
@@ -272,7 +279,7 @@ const getItemConfig = (data: SideItem): SideComponent => {
       slots: {},
     },
     [SideItemKey.CODE_BLOCK]: {
-      $key: 'code-block',
+      $key: SideItemKey.CODE_BLOCK,
       type: 'component',
       icon: EditPen,
       text: '代码编辑',

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

@@ -24,7 +24,7 @@
         <Icon :icon="editable ? Edit : View" class="edit-icon" @click.stop="editCode(`${data.key}`)"></Icon>
       </TMagicTooltip>
       <TMagicTooltip v-if="data.type === 'code' && editable" effect="dark" content="删除" placement="bottom">
-        <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.key}`)"></Icon>
+        <Icon :icon="Close" class="edit-icon" @click.stop="deleteCode(`${data.key}`, { historySource: 'tree' })"></Icon>
       </TMagicTooltip>
       <slot name="code-block-panel-tool" :id="data.key" :data="data"></slot>
     </template>
@@ -44,7 +44,7 @@ import Tree from '@editor/components/Tree.vue';
 import { useFilter } from '@editor/hooks/use-filter';
 import { useNodeStatus } from '@editor/hooks/use-node-status';
 import { useServices } from '@editor/hooks/use-services';
-import { type CodeBlockListSlots, CodeDeleteErrorType, type TreeNodeData } from '@editor/type';
+import { type CodeBlockListSlots, CodeDeleteErrorType, HistoryOpSource, type TreeNodeData } from '@editor/type';
 
 defineSlots<CodeBlockListSlots>();
 
@@ -60,7 +60,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   edit: [id: string];
-  remove: [id: string];
+  remove: [id: string, { historySource?: HistoryOpSource }];
   'node-contextmenu': [event: MouseEvent, data: TreeNodeData];
 }>();
 
@@ -142,7 +142,7 @@ const editCode = (id: string) => {
   emit('edit', id);
 };
 
-const deleteCode = async (id: string) => {
+const deleteCode = async (id: string, { historySource }: { historySource?: HistoryOpSource } = {}) => {
   const currentCode = codeList.value.find((codeItem) => codeItem.id === id);
   const existBinds = Boolean(currentCode?.items?.length);
   const undeleteableList = codeBlockService.getUndeletableList() || [];
@@ -154,7 +154,7 @@ const deleteCode = async (id: string) => {
     });
 
     // 无绑定关系，且不在不可删除列表中
-    emit('remove', id);
+    emit('remove', id, { historySource });
   } else {
     if (typeof props.customError === 'function') {
       props.customError(id, existBinds ? CodeDeleteErrorType.BIND : CodeDeleteErrorType.UNDELETEABLE);

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);
+  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)[] = [
     {
@@ -41,7 +49,7 @@ export const useContentMenu = (deleteCode: (id: string) => void) => {
 
         const newCodeId = await codeBlockService.getUniqueId();
 
-        codeBlockService.setCodeDslById(newCodeId, cloneDeep(codeBlock));
+        codeBlockService.setCodeDslById(newCodeId, cloneDeep(codeBlock), { historySource: 'tree-contextmenu' });
       },
     },
     {
@@ -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>
@@ -22,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { inject, nextTick, Ref, ref, watch, watchEffect } from 'vue';
+import { computed, inject, nextTick, provide, Ref, ref, watch, watchEffect } from 'vue';
 
 import type { DataSourceSchema } from '@tmagic/core';
 import { tMagicMessage } from '@tmagic/design';
@@ -41,6 +43,10 @@ const props = defineProps<{
   title?: string;
   values: any;
   disabled: boolean;
+  /** 打开后需要直接定位并打开的方法名，传入时默认激活「方法定义」tab */
+  editMethodName?: string;
+  /** 打开后需要直接定位并打开的字段路径，传入时默认激活「数据定义」tab */
+  editFieldPath?: string[];
 }>();
 
 const boxVisible = defineModel<boolean>('visible', { default: false });
@@ -61,10 +67,36 @@ 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(
+  'editingDataSourceMethodName',
+  computed(() => props.editMethodName),
+);
+
+/** 供「数据定义」tab 内的字段消费，用于打开数据源详情后自动打开指定字段 */
+provide(
+  'editingDataSourceFieldPath',
+  computed(() => props.editFieldPath || []),
+);
 
 watchEffect(() => {
   initValues.value = props.values;
-  dataSourceConfig.value = dataSourceService.getFormConfig(initValues.value.type);
+  const config = dataSourceService.getFormConfig(initValues.value.type);
+
+  // 传入方法名/字段路径时，将外层 tab 容器默认激活到对应 tab（status: methods / fields）
+  // 未传入时默认激活「数据定义」tab（fields）
+  let activeTab = 'fields';
+  if (props.editMethodName) {
+    activeTab = 'methods';
+  } else if (props.editFieldPath?.length) {
+    activeTab = 'fields';
+  }
+
+  dataSourceConfig.value = config.map((item) =>
+    (item as { type?: string }).type === 'tab' ? { ...item, active: activeTab } : item,
+  );
 });
 
 const submitHandler = (values: any, data: ContainerChangeEventData) => {

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

@@ -29,6 +29,8 @@
     :disabled="!editable"
     :values="dataSourceValues"
     :title="dialogTitle"
+    :edit-method-name="editMethodName"
+    :edit-field-path="editFieldPath"
     @submit="submitDataSourceHandler"
     @close="editDialogCloseHandler"
   ></DataSourceConfigPanel>
@@ -45,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, inject, useTemplateRef, watch } from 'vue';
+import { computed, inject, ref, useTemplateRef, watch } from 'vue';
 import { mergeWith } from 'lodash-es';
 
 import { tMagicMessageBox, TMagicScrollbar } from '@tmagic/design';
@@ -79,7 +81,16 @@ const { dataSourceService } = useServices();
 const { editDialog, dataSourceValues, dialogTitle, editable, editHandler, submitDataSourceHandler } =
   useDataSourceEdit(dataSourceService);
 
+/** 打开数据源详情时需要直接定位并打开的方法名，为空则正常展示「数据定义」tab */
+const editMethodName = ref('');
+
+/** 打开数据源详情时需要直接定位并打开的字段路径，为空则不自动打开字段配置 */
+const editFieldPath = ref<string[]>([]);
+
 const editDialogCloseHandler = () => {
+  editMethodName.value = '';
+  editFieldPath.value = [];
+
   if (dataSourceListRef.value) {
     for (const [, status] of dataSourceListRef.value.nodeStatusMap.entries()) {
       status.selected = false;
@@ -129,7 +140,7 @@ const removeHandler = async (id: string) => {
     type: 'warning',
   });
 
-  dataSourceService.remove(id);
+  dataSourceService.remove(id, { historySource: 'tree-contextmenu' });
 };
 
 const dataSourceListRef = useTemplateRef<InstanceType<typeof DataSourceList>>('dataSourceList');
@@ -139,6 +150,20 @@ const filterTextChangeHandler = (val: string) => {
 };
 
 eventBus?.on('edit-data-source', (id: string) => {
+  editMethodName.value = '';
+  editFieldPath.value = [];
+  editHandler(id);
+});
+
+eventBus?.on('edit-data-source-method', (id: string, methodName: string) => {
+  editMethodName.value = methodName;
+  editFieldPath.value = [];
+  editHandler(id);
+});
+
+eventBus?.on('edit-data-source-field', (id: string, fieldPath: string[]) => {
+  editMethodName.value = '';
+  editFieldPath.value = fieldPath;
   editHandler(id);
 });
 
@@ -146,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)[] = [
     {
@@ -39,7 +47,7 @@ export const useContentMenu = () => {
           return;
         }
 
-        dataSourceService.add(cloneDeep(ds));
+        dataSourceService.add(cloneDeep(ds), { historySource: 'tree-contextmenu' });
       },
     },
     {
@@ -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/LayerMenu.vue

@@ -6,7 +6,7 @@
 import { computed, markRaw, useTemplateRef } from 'vue';
 import { Files, Plus } from '@element-plus/icons-vue';
 
-import { isPage, isPageFragment } from '@tmagic/utils';
+import { isPageOrFragment } from '@tmagic/utils';
 
 import ContentMenu from '@editor/components/ContentMenu.vue';
 import { useServices } from '@editor/hooks/use-services';
@@ -41,11 +41,15 @@ const createMenuItems = (group: ComponentGroup): MenuButton[] =>
     type: 'button',
     icon: component.icon,
     handler: () => {
-      editorService.add({
-        name: component.text,
-        type: component.type,
-        ...(component.data || {}),
-      });
+      editorService.add(
+        {
+          name: component.text,
+          type: component.type,
+          ...(component.data || {}),
+        },
+        undefined,
+        { historySource: 'tree-contextmenu' },
+      );
     },
   }));
 
@@ -57,9 +61,13 @@ const getSubMenuData = computed<MenuButton[]>(() => {
         type: 'button',
         icon: Files,
         handler: () => {
-          editorService.add({
-            type: 'tab-pane',
-          });
+          editorService.add(
+            {
+              type: 'tab-pane',
+            },
+            undefined,
+            { historySource: 'tree-contextmenu' },
+          );
         },
       },
     ];
@@ -93,7 +101,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         type: 'button',
         text: '全部折叠',
         icon: FolderMinusIcon,
-        display: () => isPage(node.value) || isPageFragment(node.value),
+        display: () => isPageOrFragment(node.value),
         handler: () => {
           emit('collapse-all');
         },
@@ -106,9 +114,9 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         items: getSubMenuData.value,
       },
       useCopyMenu(),
-      usePasteMenu(),
-      useDeleteMenu(),
-      useMoveToMenu(services),
+      usePasteMenu('tree-contextmenu'),
+      useDeleteMenu('tree-contextmenu'),
+      useMoveToMenu(services, 'tree-contextmenu'),
       ...props.layerContentMenu,
     ],
     'layer',