diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue
index 0f419025..d4b95579 100644
--- a/packages/editor/src/layouts/Framework.vue
+++ b/packages/editor/src/layouts/Framework.vue
@@ -49,20 +49,20 @@ export default defineComponent({
   },
 
   setup() {
-    const services = inject<Services>('services');
+    const { editorService, uiService } = inject<Services>('services') || {};
 
-    const root = computed(() => services?.editorService.get<MApp>('root'));
+    const root = computed(() => editorService?.get<MApp>('root'));
 
     return {
       root,
-      pageLength: computed(() => root.value?.items?.length || 0),
-      showSrc: computed(() => services?.uiService.get<boolean>('showSrc')),
-      columnWidth: computed(() => services?.uiService.get<GetColumnWidth>('columnWidth')),
+      pageLength: computed(() => editorService?.get<number>('pageLength') || 0),
+      showSrc: computed(() => uiService?.get<boolean>('showSrc')),
+      columnWidth: computed(() => uiService?.get<GetColumnWidth>('columnWidth')),
 
       saveCode(value: string) {
         try {
           // eslint-disable-next-line no-eval
-          services?.editorService.set('root', eval(value));
+          editorService?.set('root', eval(value));
         } catch (e: any) {
           console.error(e);
         }
diff --git a/packages/editor/src/services/editor.ts b/packages/editor/src/services/editor.ts
index 885154ad..0e142e12 100644
--- a/packages/editor/src/services/editor.ts
+++ b/packages/editor/src/services/editor.ts
@@ -54,6 +54,7 @@ class Editor extends BaseService {
     stage: null,
     highlightNode: null,
     modifiedNodeIds: new Map(),
+    pageLength: 0,
   });
 
   constructor() {
@@ -90,6 +91,7 @@ class Editor extends BaseService {
     log('store set ', name, ' ', value);
 
     if (name === 'root') {
+      this.state.pageLength = (value as unknown as MApp).items.length;
       this.emit('root-change', value);
     }
   }
@@ -253,8 +255,9 @@ class Editor extends BaseService {
     const curNode = this.get<MContainer>('node');
 
     let parentNode: MNode | undefined;
+    const isPage = type === NodeType.PAGE;
 
-    if (type === NodeType.PAGE) {
+    if (isPage) {
       parentNode = this.get<MApp>('root');
       // 由于支持中间件扩展，在parent参数为undefined时，parent会变成next函数
     } else if (parent && typeof parent !== 'function') {
@@ -294,6 +297,10 @@ class Editor extends BaseService {
 
     stage?.select(newNode.id);
 
+    if (isPage) {
+      this.state.pageLength += 1;
+    }
+
     this.emit('add', newNode);
 
     return newNode;
@@ -324,9 +331,23 @@ class Editor extends BaseService {
     stage?.remove({ id: node.id, root: this.get('root') });
 
     if (node.type === NodeType.PAGE) {
+      this.state.pageLength -= 1;
+
       if (root.items[0]) {
         await this.select(root.items[0]);
         stage?.select(root.items[0].id);
+      } else {
+        this.set('node', null);
+        this.set('parent', null);
+        this.set('page', null);
+        this.set('stage', null);
+        this.set('highlightNode', null);
+        this.resetModifiedNodeId();
+        historyService.reset();
+
+        this.emit('remove', node);
+
+        return node;
       }
     } else {
       await this.select(parent);
diff --git a/packages/editor/src/services/history.ts b/packages/editor/src/services/history.ts
index 8384421c..034cd78a 100644
--- a/packages/editor/src/services/history.ts
+++ b/packages/editor/src/services/history.ts
@@ -51,6 +51,13 @@ class History extends BaseService {
     this.on('change', this.setCanUndoRedo);
   }
 
+  public reset() {
+    this.state.pageSteps = {};
+    this.state.pageId = undefined;
+    this.state.canRedo = false;
+    this.state.canUndo = false;
+  }
+
   public changePage(page: MPage): void {
     if (!page) return;
 
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
index 998a2f36..283eaf83 100644
--- a/packages/editor/src/type.ts
+++ b/packages/editor/src/type.ts
@@ -53,6 +53,7 @@ export interface StoreState {
   highlightNode: MNode | null;
   stage: StageCore | null;
   modifiedNodeIds: Map<Id, Id>;
+  pageLength: number;
 }
 
 export interface PropsState {