diff --git a/components.d.ts b/components.d.ts
index 7edf44a6c661662630918baee0ec2201f9641bab..72b943820c5e8a3e4f8780760434b363f92b6e7c 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -12,10 +12,6 @@ declare module '@vue/runtime-core' {
     DrawingBroad: typeof import('./src/components/DrawingBroad.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
-    ElContainer: typeof import('element-plus/es')['ElContainer']
-    ElDivider: typeof import('element-plus/es')['ElDivider']
-    ElDrawer: typeof import('element-plus/es')['ElDrawer']
-    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
diff --git a/src/components/DrawingBroad.vue b/src/components/DrawingBroad.vue
index 0c090cc638b5e1c9f46e1b9c42c7f102a1d361e3..4d77cbfe64890b5d79ff0c9266af4eef7fba757c 100644
--- a/src/components/DrawingBroad.vue
+++ b/src/components/DrawingBroad.vue
@@ -1,94 +1,102 @@
 <!-- 画板 -->
 <script setup lang="ts">
 import draggable from 'vuedraggable';
-import { storeToRefs } from "pinia";
-import { userMainStore } from "@/store/index"; // 引入
-import { computed, ref } from '@vue/reactivity';
+import {storeToRefs} from "pinia";
+import {userMainStore} from "@/store/index"; // 引入
+import {computed, ref} from '@vue/reactivity';
 import Grid from './Grid.vue';
+
 const mainStore = userMainStore();
-const { tList, tree } = storeToRefs(mainStore); // 解构并使数据动态化
+const {tList, tree, stateStack, statePoint} = storeToRefs(mainStore); // 解构并使数据动态化
 const containerStyle = computed(() => ({
-    width: tree.value.container.width + 'px',
-    height: tree.value.mode == "PC" ? '100%' : tree.value.container.height + 'px',
-    marginTop: tree.value.mode == "PC" ? '' : 50 + 'px'
+  width: tree.value.container.width + 'px',
+  height: tree.value.mode == "PC" ? '100%' : tree.value.container.height + 'px',
+  marginTop: tree.value.mode == "PC" ? '' : 50 + 'px'
 }))
 
-
+function saveStateList() {
+  if (statePoint.value !== stateStack.value.length - 1) {
+    mainStore.clearStackTop();
+    console.log(stateStack.value.concat())
+  }
+  stateStack.value.push(tList.value.concat())
+  statePoint.value = stateStack.value.length - 1
+}
 </script>
 
 <template>
-    <div class="box">
-        <div class="box-container" :style="containerStyle">
-            <draggable :list="tList" item-key="id" :group="{ name: 'course', pull: true, put: true }">
-                <template #item="{ element }">
-                    <Component :is="element.preview"></Component>
-                </template>
-            </draggable>
-        </div>
+  <div class="box">
+    <div class="box-container" :style="containerStyle">
+      <draggable :list="tList" item-key="id" :group="{ name: 'course', pull: true, put: true }" @change="saveStateList">
+        <template #item="{ element }">
+          <Component :is="element.preview"></Component>
+        </template>
+      </draggable>
     </div>
+  </div>
 </template>
 
 <style lang="scss" scoped>
 .box {
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  position: relative;
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    scrollbar-arrow-color: rgb(56, 56, 56);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: .0625rem;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0.2);
+    background: rgba(0, 0, 0, 0.2);
+    scrollbar-arrow-color: #000;
+  }
+
+  &::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 .0625rem rgba(0, 0, 0, 0.2);
+    border-radius: 0;
+    background: #fff;
+
+  }
+
+  &-container {
     width: 100%;
     height: 100%;
+    box-sizing: border-box;
+    border: 1px solid #000;
+    border-radius: 4px;
+    box-shadow: 1px 1px 4px #000;
     margin: auto;
-    position: relative;
     overflow: auto;
 
+    > div {
+      height: 100%;
+    }
+
     &::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-        scrollbar-arrow-color: rgb(56, 56, 56);
+      width: 8px;
+      height: 8px;
+      scrollbar-arrow-color: #000;
     }
 
     &::-webkit-scrollbar-thumb {
-        border-radius: .0625rem;
-        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0.2);
-        background: rgba(0, 0, 0, 0.2);
-        scrollbar-arrow-color: #000;
+      border-radius: .0625rem;
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0.2);
+      background: rgba(0, 0, 0, 0.2);
+      scrollbar-arrow-color: #000;
     }
 
     &::-webkit-scrollbar-track {
-        -webkit-box-shadow: inset 0 0 .0625rem rgba(0, 0, 0, 0.2);
-        border-radius: 0;
-        background: #fff;
-
-    }
-
-    &-container {
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        border: 1px solid #000;
-        border-radius: 4px;
-        box-shadow: 1px 1px 4px #000;
-        margin: auto;
-        overflow: auto;
-
-        >div{
-            height: 100%;
-        }
-
-        &::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-            scrollbar-arrow-color: #000;
-        }
-
-        &::-webkit-scrollbar-thumb {
-            border-radius: .0625rem;
-            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0.2);
-            background: rgba(0, 0, 0, 0.2);
-            scrollbar-arrow-color: #000;
-        }
-
-        &::-webkit-scrollbar-track {
-            -webkit-box-shadow: inset 0 0 .0625rem rgba(0, 0, 0, 0.2);
-            border-radius: 0;
-            background: #fff;
+      -webkit-box-shadow: inset 0 0 .0625rem rgba(0, 0, 0, 0.2);
+      border-radius: 0;
+      background: #fff;
 
-        }
     }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/store/index.ts b/src/store/index.ts
index 54ba93acf3e9eb66992bf3529779d78dca7855af..905bea8fe326f24d184d7676963bddf6b9c40aa2 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,21 +1,38 @@
-import { reactive } from 'vue';
-import { defineStore } from 'pinia';
-import config  from "@/config/editor.config";
+import {reactive, ref} from 'vue';
+import {defineStore} from 'pinia';
+import config from "@/config/editor.config";
 import data from "@/config/data.json";
+
 interface componentType {
-  label: string,
-  preview: string,
-  render: string,
-  key: string
+    label: string,
+    preview: string,
+    render: string,
+    key: string
 }
 
 // 使用setup模式定义
-export const userMainStore = defineStore('mainStore', () => {
-  const list: Array<componentType> = reactive(config.componentList);
-  const tList: Array<componentType> = reactive([]);
-
-  //json schema 
-  const tree = reactive(data);
-
-  return {list,tList,tree}; //暴露
+// Re: 不建议使用setup模式定义，已改进  <zhuzhu>
+export const userMainStore = defineStore('mainStore', {
+    state: () => ({
+        list: config.componentList,
+        tList: [],
+        stateStack: [],
+        statePoint: -1,
+        tree: data,
+    }),
+    actions: {
+        executeUndo(): void {
+            if (this.statePoint < 0) return;
+            this.statePoint--;
+            this.tList = this.stateStack[this.statePoint].concat();
+        },
+        executeRedo(): void {
+            if (this.statePoint === this.stateStack.length - 1) return;
+            this.statePoint++;
+            this.tList = this.stateStack[this.statePoint].concat();
+        },
+        clearStackTop(): void {
+            this.stateStack.splice(this.statePoint + 1)
+        }
+    }
 });
\ No newline at end of file
diff --git a/src/views/Panel.vue b/src/views/Panel.vue
index 18a75837576ca2dc709faf72b71534d14d63527d..0d449ef410f7c1b6563d6d2c4cb0e1201cbe3ec6 100644
--- a/src/views/Panel.vue
+++ b/src/views/Panel.vue
@@ -13,7 +13,7 @@
               <div :class="flog ? 'item active-bg' : 'item'" @click="changeDesignSize(true)">
                 <el-tooltip content="PC模式" placement="bottom" effect="light">
                   <el-icon :size="18">
-                    <Monitor />
+                    <Monitor/>
                   </el-icon>
                 </el-tooltip>
 
@@ -21,7 +21,7 @@
               <div :class="flog ? 'item' : 'item active-bg'" @click="changeDesignSize(false)">
                 <el-tooltip content="Phone模式" placement="bottom" effect="light">
                   <el-icon :size="18">
-                    <Cellphone />
+                    <Cellphone/>
                   </el-icon>
                 </el-tooltip>
               </div>
@@ -29,18 +29,18 @@
             </div>
             <div class="input">
               <el-input-number v-model="designSizeWidth" class="mx-4" :min="768" :max="1920" controls-position="right"
-                @change="handleChange" v-if="flog" />
+                               @change="handleChange" v-if="flog"/>
               <el-input-number v-model="designSizeWidth" class="mx-4" :min="320" :max="650" controls-position="right"
-                @change="handleChange" v-else />
+                               @change="handleChange" v-else/>
             </div>
           </div>
           <div class="container-header-left-r-right">
             <el-button-group>
               <el-tooltip content="撤销" placement="bottom" effect="light">
-                <el-button plain icon="RefreshLeft" />
+                <el-button plain icon="RefreshLeft" :disabled="undoButton" @click="executeUndoAct"/>
               </el-tooltip>
               <el-tooltip content="恢复" placement="bottom" effect="light">
-                <el-button plain icon="RefreshRight" />
+                <el-button plain icon="RefreshRight" :disabled="redoButton" @click="executeRedoAct"/>
               </el-tooltip>
             </el-button-group>
           </div>
@@ -60,21 +60,21 @@
             <el-tooltip content="组件" placement="right" effect="light">
               <div class="item" @click="out(1)">
                 <el-icon :size="16">
-                  <Menu />
+                  <Menu/>
                 </el-icon>
               </div>
             </el-tooltip>
             <el-tooltip content="自定义组件" placement="right" effect="light">
               <div class="item" @click="out(2)">
                 <el-icon :size="16">
-                  <User />
+                  <User/>
                 </el-icon>
               </div>
             </el-tooltip>
             <el-tooltip content="页面结构" placement="right" effect="light">
               <div class="item" @click="out(3)">
                 <el-icon :size="16">
-                  <Document />
+                  <Document/>
                 </el-icon>
               </div>
             </el-tooltip>
@@ -83,21 +83,21 @@
             <el-tooltip content="帮助" placement="right" effect="light">
               <div class="item">
                 <el-icon :size="16">
-                  <Help />
+                  <Help/>
                 </el-icon>
               </div>
             </el-tooltip>
             <el-tooltip content="更多" placement="right" effect="light">
               <div class="item">
                 <el-icon :size="16">
-                  <More />
+                  <More/>
                 </el-icon>
               </div>
             </el-tooltip>
           </div>
         </div>
         <div class="container-content-left-r">
-          <Components v-show="drawerFlog && type == 1" />
+          <Components v-show="drawerFlog && type == 1"/>
           <div v-show="drawerFlog && type == 2">
             自定义组件
           </div>
@@ -107,10 +107,10 @@
         </div>
       </div>
       <div class="container-content-middle">
-        <DrawingBroad />
+        <DrawingBroad/>
       </div>
       <div class="container-content-right">
-        <ComponentsOptions />
+        <ComponentsOptions/>
       </div>
     </div>
   </div>
@@ -118,18 +118,26 @@
 </template>
 <script setup lang="ts">
 import logo_src from '@/assets/image/logo.jpg';
-import { ref } from 'vue';
+import {computed, ref} from 'vue';
 import DrawingBroad from '@/components/DrawingBroad.vue';
 import Components from '@/components/Components.vue';
 import ComponentsOptions from '@/components/ComponentsOptions.vue';
-import { storeToRefs } from "pinia";
-import { userMainStore } from "@/store/index"; // 引入
+import {storeToRefs} from "pinia";
+import {userMainStore} from "@/store/index"; // 引入
 const mainStore = userMainStore();
-const { tree } = storeToRefs(mainStore); // 解构并使数据动态化
+const {tree, statePoint, stateStack, tList} = storeToRefs(mainStore); // 解构并使数据动态化
 let designSizeWidth = ref(Number(tree.value.container.width));
 
 //控制设计尺寸
 let flog = ref(true)
+
+const undoButton = computed(() => {
+  return statePoint.value < 0;
+})
+const redoButton = computed(() => {
+  return statePoint.value === stateStack.value.length - 1;
+})
+
 function changeDesignSize(nFlog: boolean) {
   flog.value = nFlog;
   if (flog.value) {
@@ -144,15 +152,23 @@ function changeDesignSize(nFlog: boolean) {
   }
 }
 
-function handleChange(prev: number | undefined) {
-  tree.value.container.width = String(prev as number);
+function executeUndoAct() {
+  mainStore.executeUndo()
+}
+
+function executeRedoAct() {
+  mainStore.executeRedo()
 }
 
 
+function handleChange(prev: number | undefined) {
+  tree.value.container.width = String(prev as number);
+}
 
 //控制右侧组件库是否打开
 let drawerFlog = ref(false);
 let type = ref(0);
+
 function out(num: 1 | 2 | 3): void {
   drawerFlog.value = !drawerFlog.value;
   type.value = num;