diff --git a/packages/demo/package.json b/packages/demo/package.json
index ab4a4afd5..9ff3918c5 100644
--- a/packages/demo/package.json
+++ b/packages/demo/package.json
@@ -33,6 +33,9 @@
     "@ali/ve-trunk-pane": "^5.1.0-beta.14",
     "@ali/vs-variable-setter": "^3.1.0",
     "@ali/vu-legao-design-fetch-context": "^1.0.3",
+    "@ali/ve-page-history": "1.2.0",
+    "@ali/ve-history-pane": "4.0.0",
+    "@ali/ve-page-history-pane": "^5.0.0-beta.0",
     "@alifd/next": "^1.19.12",
     "@alife/theme-lowcode-dark": "^0.1.0",
     "@alife/theme-lowcode-light": "^0.1.0",
diff --git a/packages/demo/src/vision/index.ts b/packages/demo/src/vision/index.ts
index 2427d10e6..74175f7bd 100644
--- a/packages/demo/src/vision/index.ts
+++ b/packages/demo/src/vision/index.ts
@@ -5,6 +5,9 @@ import Engine, { Panes } from '@ali/visualengine';
 import { ActionUtil as actionUtil } from '@ali/visualengine-utils';
 import getTrunkPane from '@ali/ve-trunk-pane';
 import DatapoolPane from '@ali/ve-datapool-pane';
+import PageHistoryManager from '@ali/ve-page-history';
+import HistoryPane from '@ali/ve-history-pane';
+import PageHistoryPane from '@ali/ve-page-history-pane';
 // import I18nPane from '@ali/ve-i18n-pane';
 import I18nManagePane from '@ali/ve-i18n-manage-pane';
 import ActionPane from '@ali/ve-action-pane';
@@ -322,6 +325,98 @@ function initActionPane() {
   });
 }
 
+// 操作历史与页面历史面板
+function initHistoryPane() {
+  // let historyConfigs = {getDesignerModuleConfigs(
+  //   this.designerConfigs,
+  //   'history',
+  // )};
+  let historyConfigs = {
+    enableRedoAndUndo: true,
+    enablePageHistory: true,
+  };;
+
+  // if (!historyConfigs) {
+  //   return;
+  // }
+
+  // if (historyConfigs === true) {
+  //   historyConfigs = {
+  //     enableRedoAndUndo: true,
+  //     enablePageHistory: true,
+  //   };
+  // }
+
+  // if (historyConfigs.enableRedoAndUndo === undefined) {
+  //   historyConfigs.enableRedoAndUndo = true;
+  // }
+  // if (historyConfigs.enablePageHistory === undefined) {
+  //   historyConfigs.enablePageHistory = true;
+  // }
+
+  const isDemoMode = false;
+  const isEnvSupportsHistoryPane = true;
+  const historyManager = PageHistoryManager.getManager();
+
+  console.log('PageHistoryManager', historyManager);
+  console.log('PageHistoryManager.onOpenPane', historyManager.onOpenPane);
+  // 历史撤销、重做以及唤起页面历史按钮
+  if (typeof HistoryPane === 'function') {
+    // const historyPane = {
+    //   ...HistoryPane({
+    //     showPageHistory:
+    //       isEnvSupportsHistoryPane
+    //       // && this.app.isForm()
+    //       && !isDemoMode,
+    //     historyManager,
+    //     historyConfigs,
+    //   }),
+    //   index: -940,
+    // };
+    // console.log('aaaaaa', historyPane);
+
+    Panes.add(HistoryPane, {
+      props : {
+        showPageHistory:
+          isEnvSupportsHistoryPane
+          // && this.app.isForm()
+          && !isDemoMode,
+        historyManager,
+        historyConfigs,
+        index: -940,
+      }
+    });
+  } else {
+    Panes.add(HistoryPane, {
+      index: -940,
+    });
+  }
+
+  // 页面历史 UI 面板
+  if (
+    PageHistoryPane
+    && !isDemoMode
+    && isEnvSupportsHistoryPane
+  ) {
+    console.log(1111, PageHistoryPane({
+      historyManager: PageHistoryManager.getManager(),
+      app: {},
+    }))
+    Panes.add(PageHistoryPane, {
+      props : {
+        historyManager: {
+          historyManager,
+          app: {
+  
+          }
+        },
+        index: -940,
+      },
+    });
+  }
+}
+
+
 async function init() {
   Engine.Env.setEnv('RE_VERSION', '7.2.0');
   Engine.Env.setSupportFeatures({
@@ -335,6 +430,7 @@ async function init() {
   initI18nPane();
   initActionPane();
   initDemoPanes();
+  initHistoryPane();
 
   Engine.init();
 }
diff --git a/packages/demo/src/vision/module.d.ts b/packages/demo/src/vision/module.d.ts
index 2217b3e06..c7fdc6942 100644
--- a/packages/demo/src/vision/module.d.ts
+++ b/packages/demo/src/vision/module.d.ts
@@ -1,8 +1,11 @@
-declare module "@ali/visualengine";
-declare module "@ali/visualengine-utils";
-declare module "@ali/ve-trunk-pane";
-declare module "@ali/vs-variable-setter";
-declare module "@ali/ve-datapool-pane";
-declare module "@ali/ve-i18n-manage-pane";
-declare module "@ali/ve-action-pane";
-declare module "@ali/vu-legao-design-fetch-context";
+declare module '@ali/visualengine';
+declare module '@ali/visualengine-utils';
+declare module '@ali/ve-trunk-pane';
+declare module '@ali/vs-variable-setter';
+declare module '@ali/ve-datapool-pane';
+declare module '@ali/ve-history-pane';
+declare module '@ali/ve-page-history-pane';
+declare module '@ali/ve-page-history';
+declare module '@ali/ve-i18n-manage-pane';
+declare module '@ali/ve-action-pane';
+declare module '@ali/vu-legao-design-fetch-context';