@tmagic/editor 1.8.0-beta.3 → 1.8.0-beta.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0-beta.3",
+  "version": "1.8.0-beta.4",
   "name": "@tmagic/editor",
   "type": "module",
   "sideEffects": [
@@ -58,11 +58,11 @@
     "moveable": "^0.53.0",
     "serialize-javascript": "^7.0.0",
     "sortablejs": "^1.15.6",
-    "@tmagic/design": "1.8.0-beta.3",
-    "@tmagic/form": "1.8.0-beta.3",
-    "@tmagic/stage": "1.8.0-beta.3",
-    "@tmagic/utils": "1.8.0-beta.3",
-    "@tmagic/table": "1.8.0-beta.3"
+    "@tmagic/design": "1.8.0-beta.4",
+    "@tmagic/form": "1.8.0-beta.4",
+    "@tmagic/stage": "1.8.0-beta.4",
+    "@tmagic/table": "1.8.0-beta.4",
+    "@tmagic/utils": "1.8.0-beta.4"
   },
   "devDependencies": {
     "@types/events": "^3.0.3",
@@ -76,7 +76,7 @@
     "type-fest": "^5.2.0",
     "typescript": "^6.0.3",
     "vue": "^3.5.34",
-    "@tmagic/core": "1.8.0-beta.3"
+    "@tmagic/core": "1.8.0-beta.4"
   },
   "peerDependenciesMeta": {
     "typescript": {

package/src/components/CompareForm.vue

@@ -152,6 +152,24 @@ const showDiff = ({ curValue, lastValue, config }: { curValue: any; lastValue: a
   return !isEqual(curValue, lastValue);
 };
 
+const removeStyleDisplayConfig = (formConfig: FormConfig): FormConfig =>
+  formConfig.map((item) => {
+    if (!('type' in item)) return item;
+    if (item?.type !== 'tab' || !Array.isArray(item.items)) return item;
+
+    return {
+      ...item,
+      items: item.items.map((tabPane) => {
+        if (tabPane?.title !== '样式' || !Array.isArray(tabPane.items)) return tabPane;
+
+        return {
+          ...tabPane,
+          display: true,
+        };
+      }),
+    };
+  });
+
 /**
  * 内置的默认 FormConfig 加载逻辑：按 `category` 从对应 service / 工具取配置。
  * 作为 ctx.defaultLoadConfig 透传给自定义 `loadConfig`，方便复用与二次加工。
@@ -162,7 +180,7 @@ const defaultLoadConfig = async (): Promise<FormConfig> => {
       if (!props.type) {
         return [];
       }
-      return await propsService.getPropsConfig(props.type);
+      return removeStyleDisplayConfig(await propsService.getPropsConfig(props.type));
     }
     case 'data-source': {
       return dataSourceService.getFormConfig(props.type || 'base');

package/src/hooks/use-code-block-edit.ts

@@ -6,7 +6,7 @@ import { tMagicMessage } from '@tmagic/design';
 import type { ContainerChangeEventData } from '@tmagic/form';
 
 import CodeBlockEditor from '@editor/components/CodeBlockEditor.vue';
-import type { Services } from '@editor/type';
+import type { HistoryOpSource, Services } from '@editor/type';
 
 export const useCodeBlockEdit = (codeBlockService: Services['codeBlockService']) => {
   const codeConfig = ref<Omit<CodeBlockContent, 'content'> & { content: string }>();
@@ -58,8 +58,8 @@ export const useCodeBlockEdit = (codeBlockService: Services['codeBlockService'])
   };
 
   // 删除代码块
-  const deleteCode = async (key: string) => {
-    codeBlockService.deleteCodeDslByIds([key]);
+  const deleteCode = async (key: string, { historySource }: { historySource?: HistoryOpSource } = {}) => {
+    codeBlockService.deleteCodeDslByIds([key], { historySource });
   };
 
   const submitCodeBlockHandler = async (values: CodeBlockContent, eventData?: ContainerChangeEventData) => {
@@ -67,6 +67,7 @@ export const useCodeBlockEdit = (codeBlockService: Services['codeBlockService'])
 
     await codeBlockService.setCodeDslById(codeId.value, values, {
       changeRecords: eventData?.changeRecords,
+      historySource: 'props',
     });
 
     codeBlockEditorRef.value?.hide();

package/src/hooks/use-data-source-edit.ts

@@ -27,9 +27,9 @@ export const useDataSourceEdit = (dataSourceService: Services['dataSourceService
 
   const submitDataSourceHandler = (value: DataSourceSchema, eventData: ContainerChangeEventData) => {
     if (value.id) {
-      dataSourceService.update(value, { changeRecords: eventData.changeRecords });
+      dataSourceService.update(value, { changeRecords: eventData.changeRecords, historySource: 'props' });
     } else {
-      dataSourceService.add(value);
+      dataSourceService.add(value, { historySource: 'props' });
     }
 
     editDialog.value?.hide();

package/src/hooks/use-stage.ts

@@ -130,16 +130,16 @@ export const useStage = (stageOptions: StageOptions) => {
     });
     if (configs.length === 0) return;
 
-    editorService.update(configs, { changeRecordList });
+    editorService.update(configs, { changeRecordList, historySource: 'stage' });
   });
 
   stage.on('sort', (ev: SortEventData) => {
-    editorService.sort(ev.src, ev.dist);
+    editorService.sort(ev.src, ev.dist, { historySource: 'stage' });
   });
 
   stage.on('remove', (ev: RemoveEventData) => {
     const nodes = ev.data.map(({ el }) => editorService.getNodeById(getIdFromEl()(el) || ''));
-    editorService.remove(nodes.filter((node) => Boolean(node)) as MNode[]);
+    editorService.remove(nodes.filter((node) => Boolean(node)) as MNode[], { historySource: 'stage' });
   });
 
   stage.on('select-parent', () => {

package/src/layouts/NavMenu.vue

@@ -80,7 +80,7 @@ const getConfig = (item: MenuItem): (MenuButton | MenuComponent)[] => {
         disabled: () => editorService.get('node')?.type === NodeType.PAGE,
         handler: () => {
           const node = editorService.get('node');
-          node && editorService.remove(node);
+          node && editorService.remove(node, { historySource: 'toolbar' });
         },
       });
       break;

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

@@ -15,6 +15,7 @@
         :merged="group.steps.length > 1"
         :op-type="group.opType"
         :desc="describeGroup(group)"
+        :source="groupSource(group)"
         :time="formatHistoryTime(groupTimestamp(group))"
         :time-title="formatHistoryFullTime(groupTimestamp(group))"
         :step-count="group.steps.length"
@@ -25,7 +26,8 @@
             isCurrent: s.isCurrent,
             desc: describeStep(s.step),
             diffable: isStepDiffable ? isStepDiffable(s.step) : false,
-            revertable: s.applied,
+            revertable: s.applied && (isStepRevertable ? isStepRevertable(s.step) : true),
+            source: s.step.source,
             time: formatHistoryTime(s.step.timestamp),
             timeTitle: formatHistoryFullTime(s.step.timestamp),
           }))
@@ -58,7 +60,7 @@ import { computed } from 'vue';
 
 import type { HistoryOpType } from '@editor/type';
 
-import { formatHistoryFullTime, formatHistoryTime, groupTimestamp } from './composables';
+import { formatHistoryFullTime, formatHistoryTime, groupSource, groupTimestamp } from './composables';
 import GroupRow from './GroupRow.vue';
 import InitialRow from './InitialRow.vue';
 
@@ -92,6 +94,8 @@ const props = withDefaults(
     describeStep: (_step: any) => string;
     /** 判断某个 step 是否可查看差异（前后值都存在）。由父组件按业务类型注入；不传则一律不展示差异入口。 */
     isStepDiffable?: (_step: any) => boolean;
+    /** 判断某个 step 是否支持回滚（如更新需带 changeRecords）。由父组件按业务类型注入；不传则已应用即可回滚。 */
+    isStepRevertable?: (_step: any) => boolean;
     /** 共享的折叠状态表（key -> 是否展开），由顶层 panel 统一维护以便跨 tab 复用。 */
     expanded: Record<string, boolean>;
     /** 是否支持「跳转到该记录」(goto)。默认 true。 */

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

@@ -11,6 +11,7 @@
       :describe-group="describeGroup"
       :describe-step="describeStep"
       :is-step-diffable="isStepDiffable"
+      :is-step-revertable="isStepRevertable"
       :expanded="expanded"
       :goto-enabled="gotoEnabled"
       @toggle="(key: string) => $emit('toggle', key)"
@@ -48,6 +49,8 @@ withDefaults(
     describeStep: (_step: any) => string;
     /** 判断某个 step 是否可查看差异（前后值都存在）。由父组件按业务类型注入。 */
     isStepDiffable: (_step: any) => boolean;
+    /** 判断某个 step 是否支持回滚（如更新需带 changeRecords）。由父组件按业务类型注入；不传则已应用即可回滚。 */
+    isStepRevertable?: (_step: any) => boolean;
     /**
      * 共享的折叠状态表（key -> 是否展开），由顶层 panel 统一维护。
      * 本 tab 使用 `${prefix}-${id}-${组内首步 index}` 作为 key——以稳定的 step 索引而非展示位置标识分组，

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

@@ -13,7 +13,14 @@
       <span class="m-editor-history-list-item-op" :class="`op-${opType}`">{{ opLabel(opType) }}</span>
       <span class="m-editor-history-list-item-desc">{{ desc }}</span>
 
-      <span v-if="time" class="m-editor-history-list-item-time" :title="timeTitle || time">{{ time }}</span>
+      <span
+        v-if="!merged && sourceLabel(source)"
+        class="m-editor-history-list-item-source"
+        :title="`操作途径：${sourceLabel(source)}`"
+        >{{ sourceLabel(source) }}</span
+      >
+
+      <span v-if="!merged && time" class="m-editor-history-list-item-time" :title="timeTitle || time">{{ time }}</span>
 
       <span v-if="merged" class="m-editor-history-list-item-merge">合并 {{ stepCount }} 步</span>
 
@@ -50,6 +57,12 @@
       >
         <span class="m-editor-history-list-item-index">#{{ s.index + 1 }}</span>
         <span class="m-editor-history-list-substep-desc">{{ s.desc }}</span>
+        <span
+          v-if="sourceLabel(s.source)"
+          class="m-editor-history-list-item-source"
+          :title="`操作途径：${sourceLabel(s.source)}`"
+          >{{ sourceLabel(s.source) }}</span
+        >
         <span v-if="s.time" class="m-editor-history-list-item-time" :title="s.timeTitle || s.time">{{ s.time }}</span>
         <span
           v-if="s.revertable"
@@ -80,9 +93,9 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 
-import type { HistoryOpType } from '@editor/type';
+import type { HistoryOpSource, HistoryOpType } from '@editor/type';
 
-import { opLabel } from './composables';
+import { opLabel, sourceLabel } from './composables';
 
 defineOptions({
   name: 'MEditorHistoryListGroupRow',
@@ -100,6 +113,8 @@ const props = withDefaults(
     opType: HistoryOpType;
     /** 组的整体描述文案，由上层根据 step / group 计算后传入，例如 "修改 button · style.color"。 */
     desc: string;
+    /** 组的操作途径（一般取组内最近一步），用于头部展示「画布 / 树面板 / 配置面板…」标签。 */
+    source?: HistoryOpSource;
     /** 组头部展示的时间文案（一般为组内最近一步的时间），为空时不渲染。 */
     time?: string;
     /** 组头部时间的 title 悬浮提示（完整时间），缺省时回退为 time。 */
@@ -115,6 +130,8 @@ const props = withDefaults(
       diffable?: boolean;
       /** 是否可对该子步执行「回滚」（已应用 + 业务侧确认支持反向）。父级根据 step 与 applied 决定。 */
       revertable?: boolean;
+      /** 该子步的操作途径，用于展示「画布 / 树面板 / 配置面板…」标签。 */
+      source?: HistoryOpSource;
       /** 该子步的时间文案，为空时不渲染。 */
       time?: string;
       /** 该子步时间的 title 悬浮提示（完整时间），缺省时回退为 time。 */

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

@@ -193,7 +193,8 @@ const targetText = computed(() => {
     'data-source': '数据源',
     'code-block': '代码块',
   };
-  const prefix = categoryText[payload.value.category] || '';
+  const { category } = payload.value;
+  const prefix = category ? categoryText[category] : '';
   const label = payload.value.targetLabel || payload.value.type || '';
   const { id } = payload.value;
   const labelWithId = id !== undefined && id !== '' ? `${label}（${id}）` : label;

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

@@ -44,6 +44,7 @@
             :describe-group="describeDataSourceGroup"
             :describe-step="describeDataSourceStep"
             :is-step-diffable="isDataSourceStepDiffable"
+            :is-step-revertable="isDataSourceStepRevertable"
             @toggle="toggleGroup"
             @goto="onDataSourceGoto"
             @goto-initial="onDataSourceGotoInitial"
@@ -65,6 +66,7 @@
             :describe-group="describeCodeBlockGroup"
             :describe-step="describeCodeBlockStep"
             :is-step-diffable="isCodeBlockStepDiffable"
+            :is-step-revertable="isCodeBlockStepRevertable"
             @toggle="toggleGroup"
             @goto="onCodeBlockGoto"
             @goto-initial="onCodeBlockGotoInitial"
@@ -141,6 +143,8 @@ import {
   describeCodeBlockStep,
   describeDataSourceGroup,
   describeDataSourceStep,
+  isCodeBlockStepRevertable,
+  isDataSourceStepRevertable,
   useHistoryList,
 } from './composables';
 import HistoryDiffDialog from './HistoryDiffDialog.vue';

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

@@ -10,6 +10,7 @@
         :merged="group.steps.length > 1"
         :op-type="group.opType"
         :desc="describePageGroup(group)"
+        :source="groupSource(group)"
         :time="formatHistoryTime(groupTimestamp(group))"
         :time-title="formatHistoryFullTime(groupTimestamp(group))"
         :step-count="group.steps.length"
@@ -20,7 +21,8 @@
             isCurrent: s.isCurrent,
             desc: describePageStep(s.step),
             diffable: isPageStepDiffable(s.step),
-            revertable: s.applied,
+            revertable: s.applied && isPageStepRevertable(s.step),
+            source: s.step.source,
             time: formatHistoryTime(s.step.timestamp),
             timeTitle: formatHistoryFullTime(s.step.timestamp),
           }))
@@ -53,7 +55,9 @@ import {
   describePageStep,
   formatHistoryFullTime,
   formatHistoryTime,
+  groupSource,
   groupTimestamp,
+  isPageStepRevertable,
 } from './composables';
 import GroupRow from './GroupRow.vue';
 import InitialRow from './InitialRow.vue';

package/src/layouts/history-list/composables.ts

@@ -8,6 +8,7 @@ import type {
   CodeBlockStepValue,
   DataSourceHistoryGroup,
   DataSourceStepValue,
+  HistoryOpSource,
   HistoryOpType,
   PageHistoryGroup,
   StepValue,
@@ -107,6 +108,32 @@ export const opLabel = (op: HistoryOpType) => {
   }
 };
 
+/** 内置操作途径的中文文案；自定义来源直接回显原值，未知 / 缺省返回空串（UI 据此不渲染）。 */
+const HISTORY_SOURCE_LABELS: Record<string, string> = {
+  stage: '画布',
+  tree: '树面板',
+  'component-panel': '组件面板',
+  props: '配置面板',
+  code: '源码',
+  'stage-contextmenu': '画布菜单',
+  'tree-contextmenu': '树菜单',
+  toolbar: '工具栏',
+  shortcut: '快捷键',
+  rollback: '回滚',
+  api: '接口',
+  ai: 'AI',
+  unknown: '未知',
+};
+
+/** 操作途径文案：用于历史面板展示「画布 / 树面板 / 配置面板…」标签。 */
+export const sourceLabel = (source: HistoryOpSource = 'unknown'): string => {
+  return HISTORY_SOURCE_LABELS[source] ?? `${source}`;
+};
+
+/** 取一组历史步骤里最后一步（最近一次）的操作途径，用于组头部展示。 */
+export const groupSource = (group: { steps: { step: { source?: HistoryOpSource } }[] }): HistoryOpSource | undefined =>
+  group.steps[group.steps.length - 1]?.step.source;
+
 const nameOf = (node: { name?: string; id?: string | number; type?: string }) =>
   node?.name || node?.type || `${node?.id ?? ''}`;
 
@@ -224,3 +251,36 @@ export const describeCodeBlockGroup = (group: CodeBlockHistoryGroup) => {
   const target = labelWithId(rawName, group.id);
   return pathList ? `修改 ${target} · ${pathList}${paths.size > 3 ? '…' : ''}` : `修改 ${target}`;
 };
+
+/**
+ * 页面 step 是否支持「回滚」（类 git revert）：
+ * - 新增 / 删除：不依赖 changeRecords，反向应用即删除 / 加回，始终可回滚；
+ * - 更新：必须每个被更新节点都带有 changeRecords，才支持按 propPath 局部反向 patch。
+ *   缺失 changeRecords 的更新只能整节点替换，会冲掉该节点后续的无关变更，因此不支持回滚。
+ */
+export const isPageStepRevertable = (step: StepValue): boolean => {
+  if (step.opType !== 'update') return true;
+  const items = step.updatedItems ?? [];
+  if (!items.length) return false;
+  return items.every((item) => Boolean(item.changeRecords?.length));
+};
+
+/**
+ * 数据源 step 是否支持「回滚」：
+ * - 新增（oldSchema=null）/ 删除（newSchema=null）：不依赖 changeRecords，始终可回滚；
+ * - 更新（前后 schema 都存在）：必须有 changeRecords 才支持局部反向 patch，否则不支持回滚。
+ */
+export const isDataSourceStepRevertable = (step: DataSourceStepValue): boolean => {
+  if (step.oldSchema === null || step.newSchema === null) return true;
+  return Boolean(step.changeRecords?.length);
+};
+
+/**
+ * 代码块 step 是否支持「回滚」：
+ * - 新增（oldContent=null）/ 删除（newContent=null）：不依赖 changeRecords，始终可回滚；
+ * - 更新（前后 content 都存在）：必须有 changeRecords 才支持局部反向 patch，否则不支持回滚。
+ */
+export const isCodeBlockStepRevertable = (step: CodeBlockStepValue): boolean => {
+  if (step.oldContent === null || step.newContent === null) return true;
+  return Boolean(step.changeRecords?.length);
+};

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

@@ -151,7 +151,11 @@ const submit = async (v: MNode, eventData?: ContainerChangeEventData) => {
       });
     }
 
-    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 });
   } catch (e: any) {
     emit('submit-error', e);
   }

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) => {

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

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

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

@@ -41,7 +41,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' });
       },
     },
     {

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

@@ -129,7 +129,7 @@ const removeHandler = async (id: string) => {
     type: 'warning',
   });
 
-  dataSourceService.remove(id);
+  dataSourceService.remove(id, { historySource: 'tree-contextmenu' });
 };
 
 const dataSourceListRef = useTemplateRef<InstanceType<typeof DataSourceList>>('dataSourceList');

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

@@ -39,7 +39,7 @@ export const useContentMenu = () => {
           return;
         }
 
-        dataSourceService.add(cloneDeep(ds));
+        dataSourceService.add(cloneDeep(ds), { historySource: 'tree-contextmenu' });
       },
     },
     {

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

@@ -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' },
+          );
         },
       },
     ];
@@ -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',

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

@@ -25,9 +25,12 @@ const props = defineProps<{
 const { editorService } = useServices();
 
 const setNodeVisible = (visible: boolean) => {
-  editorService.update({
-    id: props.data.id,
-    visible,
-  });
+  editorService.update(
+    {
+      id: props.data.id,
+      visible,
+    },
+    { historySource: 'tree' },
+  );
 };
 </script>

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

@@ -380,7 +380,7 @@ const dropHandler = async (e: DragEvent) => {
 
     config.data.inputEvent = e;
 
-    editorService.add(config.data, parent);
+    editorService.add(config.data, parent, { historySource: 'component-panel' });
   }
 };
 </script>

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

@@ -49,11 +49,11 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         display: () => canCenter.value,
         handler: () => {
           if (!nodes.value) return;
-          editorService.alignCenter(nodes.value);
+          editorService.alignCenter(nodes.value, { historySource: 'stage-contextmenu' });
         },
       },
       useCopyMenu(),
-      usePasteMenu(menuRef),
+      usePasteMenu('stage-contextmenu', menuRef),
       {
         type: 'divider',
         direction: 'horizontal',
@@ -68,7 +68,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         icon: markRaw(Top),
         display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
         handler: () => {
-          editorService.moveLayer(1);
+          editorService.moveLayer(1, { historySource: 'stage-contextmenu' });
         },
       },
       {
@@ -77,7 +77,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         icon: markRaw(Bottom),
         display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
         handler: () => {
-          editorService.moveLayer(-1);
+          editorService.moveLayer(-1, { historySource: 'stage-contextmenu' });
         },
       },
       {
@@ -86,7 +86,7 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         icon: markRaw(Top),
         display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
         handler: () => {
-          editorService.moveLayer(LayerOffset.TOP);
+          editorService.moveLayer(LayerOffset.TOP, { historySource: 'stage-contextmenu' });
         },
       },
       {
@@ -95,16 +95,16 @@ const menuData = computed<(MenuButton | MenuComponent)[]>(() =>
         icon: markRaw(Bottom),
         display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
         handler: () => {
-          editorService.moveLayer(LayerOffset.BOTTOM);
+          editorService.moveLayer(LayerOffset.BOTTOM, { historySource: 'stage-contextmenu' });
         },
       },
-      useMoveToMenu(services),
+      useMoveToMenu(services, 'stage-contextmenu'),
       {
         type: 'divider',
         direction: 'horizontal',
         display: () => !isPage(node.value) && !isPageFragment(node.value) && !props.isMultiSelect,
       },
-      useDeleteMenu(),
+      useDeleteMenu('stage-contextmenu'),
       {
         type: 'divider',
         direction: 'horizontal',