diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue
index e6f77f7220..af6a34ce39 100644
--- a/frontend/src/components/DeDrag/index.vue
+++ b/frontend/src/components/DeDrag/index.vue
@@ -1176,7 +1176,7 @@ export default {
       if (this.canvasStyleData.auxiliaryMatrix) {
         this.recordMatrixCurStyle()
       }
-      this.hasMove && this.$store.commit('recordSnapshot')
+      this.hasMove && this.$store.commit('recordSnapshot', 'handleUp')
       // 记录snapshot后 移动已记录设置为false
       this.hasMove = false
 
diff --git a/frontend/src/components/canvas/components/Editor/ContextMenu.vue b/frontend/src/components/canvas/components/Editor/ContextMenu.vue
index 96035a5c02..5a1e319f18 100644
--- a/frontend/src/components/canvas/components/Editor/ContextMenu.vue
+++ b/frontend/src/components/canvas/components/Editor/ContextMenu.vue
@@ -87,13 +87,13 @@ export default {
 
     paste() {
       this.$store.commit('paste', true)
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot', 'paste')
     },
 
     deleteComponent() {
       this.deleteCurCondition()
       this.$store.commit('deleteComponent')
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot', 'deleteComponent')
       this.$store.commit('setCurComponent', { component: null, index: null })
     },
 
@@ -106,22 +106,22 @@ export default {
 
     upComponent() {
       this.$store.commit('upComponent')
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot', 'upComponent')
     },
 
     downComponent() {
       this.$store.commit('downComponent')
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot', 'downComponent')
     },
 
     topComponent() {
       this.$store.commit('topComponent')
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot', 'topComponent')
     },
 
     bottomComponent() {
       this.$store.commit('bottomComponent')
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot', 'bottomComponent')
     }
   }
 }
diff --git a/frontend/src/components/canvas/components/Editor/SettingMenu.vue b/frontend/src/components/canvas/components/Editor/SettingMenu.vue
index a7c2c2a277..de8e9c7951 100644
--- a/frontend/src/components/canvas/components/Editor/SettingMenu.vue
+++ b/frontend/src/components/canvas/components/Editor/SettingMenu.vue
@@ -86,13 +86,13 @@ export default {
 
     paste() {
       this.$store.commit('paste', true)
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot','paste')
     },
 
     deleteComponent() {
       this.deleteCurCondition()
       this.$store.commit('deleteComponent')
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot','deleteComponent')
       this.$store.commit('setCurComponent', { component: null, index: null })
     },
 
@@ -105,22 +105,22 @@ export default {
 
     upComponent() {
       this.$store.commit('upComponent')
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot','upComponent')
     },
 
     downComponent() {
       this.$store.commit('downComponent')
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot','downComponent')
     },
 
     topComponent() {
       this.$store.commit('topComponent')
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot','topComponent')
     },
 
     bottomComponent() {
       this.$store.commit('bottomComponent')
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot','bottomComponent')
     },
     linkageSetting() {
       debugger
diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 0065e5f052..2b2103b6aa 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -292,17 +292,17 @@ export default {
       },
       deep: true
     },
-    canvasStyleData: {
-      handler(newVal, oldVla) {
-        // 第一次变化 不需要 重置边界 待改进
-        if (this.changeIndex++ > 0) {
-          this.resizeParentBounds()
-          this.$store.state.styleChangeTimes++
-        }
-        // this.changeScale()
-      },
-      deep: true
-    },
+    // canvasStyleData: {
+    //   handler(newVal, oldVla) {
+    //     // 第一次变化 不需要 重置边界 待改进
+    //     if (this.changeIndex++ > 0) {
+    //       // this.resizeParentBounds()
+    //       this.$store.state.styleChangeTimes++
+    //     }
+    //     // this.changeScale()
+    //   },
+    //   deep: true
+    // },
     componentData: {
       handler(newVal, oldVla) {
         // console.log('11111')
diff --git a/frontend/src/components/canvas/components/FilterTextAttr.vue b/frontend/src/components/canvas/components/FilterTextAttr.vue
index 83874a5062..d74188b565 100644
--- a/frontend/src/components/canvas/components/FilterTextAttr.vue
+++ b/frontend/src/components/canvas/components/FilterTextAttr.vue
@@ -154,8 +154,7 @@ export default {
       }
     },
     styleChange() {
-      debugger
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('recordStyleChange')
     }
   }
 }
diff --git a/frontend/src/components/canvas/components/RectangleAttr.vue b/frontend/src/components/canvas/components/RectangleAttr.vue
index f109a05f1f..24dc65d033 100644
--- a/frontend/src/components/canvas/components/RectangleAttr.vue
+++ b/frontend/src/components/canvas/components/RectangleAttr.vue
@@ -206,7 +206,7 @@ export default {
       }
     },
     styleChange() {
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('recordStyleChange')
     }
   }
 }
diff --git a/frontend/src/components/canvas/components/TextAttr.vue b/frontend/src/components/canvas/components/TextAttr.vue
index 04281743e1..72260705ad 100644
--- a/frontend/src/components/canvas/components/TextAttr.vue
+++ b/frontend/src/components/canvas/components/TextAttr.vue
@@ -189,7 +189,7 @@ export default {
       }
     },
     styleChange() {
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('recordStyleChange')
     }
   }
 }
diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index 1e6e80cd51..e316e0a2f0 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -214,12 +214,12 @@ export default {
 
     compose() {
       this.$store.commit('compose')
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot','compose')
     },
 
     decompose() {
       this.$store.commit('decompose')
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot','decompose')
     },
 
     undo() {
@@ -267,7 +267,7 @@ export default {
             }
           })
 
-          this.$store.commit('recordSnapshot')
+          this.$store.commit('recordSnapshot','handleFileChange')
         }
 
         img.src = fileResult
@@ -306,7 +306,7 @@ export default {
     clearCanvas() {
       this.$store.commit('setComponentData', [])
       this.$store.commit('setCanvasStyle', DEFAULT_COMMON_CANVAS_STYLE_STRING)
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot','clearCanvas')
     },
 
     handlePreviewChange() {
diff --git a/frontend/src/components/canvas/custom-component/VText.vue b/frontend/src/components/canvas/custom-component/VText.vue
index 8106661306..e91c102318 100644
--- a/frontend/src/components/canvas/custom-component/VText.vue
+++ b/frontend/src/components/canvas/custom-component/VText.vue
@@ -67,6 +67,7 @@ export default {
   methods: {
     handleInput(e) {
       this.$emit('input', this.element, e.target.innerHTML)
+      this.$store.commit('recordStyleChange')
     },
 
     handleKeydown(e) {
diff --git a/frontend/src/components/canvas/index.vue b/frontend/src/components/canvas/index.vue
index 60d9e6d358..bbdf3fc9fb 100644
--- a/frontend/src/components/canvas/index.vue
+++ b/frontend/src/components/canvas/index.vue
@@ -96,7 +96,7 @@ export default {
       component.style.left = e.offsetX
       component.id = generateID()
       this.$store.commit('addComponent', { component })
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot','handleDrop')
     },
 
     handleDragOver(e) {
diff --git a/frontend/src/components/canvas/store/snapshot.js b/frontend/src/components/canvas/store/snapshot.js
index 4fb86cf075..1e26aded05 100644
--- a/frontend/src/components/canvas/store/snapshot.js
+++ b/frontend/src/components/canvas/store/snapshot.js
@@ -52,6 +52,11 @@ export default {
     refreshSaveStatus(state) {
       state.changeTimes = 0
       state.lastSaveSnapshotIndex = deepCopy(state.snapshotIndex)
+    },
+    recordStyleChange(state) {
+      if (state.curComponent) {
+        state.styleChangeTimes++
+      }
     }
   }
 }
diff --git a/frontend/src/components/widget/DeWidget/DeDate.vue b/frontend/src/components/widget/DeWidget/DeDate.vue
index fc6abdc5e4..4018dd5110 100644
--- a/frontend/src/components/widget/DeWidget/DeDate.vue
+++ b/frontend/src/components/widget/DeWidget/DeDate.vue
@@ -86,7 +86,7 @@ export default {
       }
     },
     styleChange() {
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('recordStyleChange')
     }
   }
 }
diff --git a/frontend/src/components/widget/DeWidget/DeNumberRange.vue b/frontend/src/components/widget/DeWidget/DeNumberRange.vue
index c005736cbe..e46c0c01ac 100644
--- a/frontend/src/components/widget/DeWidget/DeNumberRange.vue
+++ b/frontend/src/components/widget/DeWidget/DeNumberRange.vue
@@ -142,7 +142,7 @@ export default {
         }
 
         this.setCondition()
-        this.styleChange()
+        this.$store.commit('recordStyleChange')
       })
     },
     setCondition() {
@@ -177,7 +177,7 @@ export default {
       }
     },
     styleChange() {
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('recordStyleChange')
     }
   }
 }
diff --git a/frontend/src/components/widget/DeWidget/DeSelect.vue b/frontend/src/components/widget/DeWidget/DeSelect.vue
index db6978ca48..679a36074f 100644
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelect.vue
@@ -104,7 +104,7 @@ export default {
       this.inDraw && this.$store.commit('addViewFilter', param)
     },
     styleChange() {
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('recordStyleChange')
     }
 
   }
diff --git a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
index ccf8d14349..bd665dd369 100644
--- a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
@@ -211,7 +211,7 @@ export default {
     //   return data[this.defaultProp.label].indexOf(value) !== -1
     // },
     styleChange() {
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('recordStyleChange')
     }
 
   }
diff --git a/frontend/src/views/panel/AssistComponent/index.vue b/frontend/src/views/panel/AssistComponent/index.vue
index 01866467c1..af3f5ffdac 100644
--- a/frontend/src/views/panel/AssistComponent/index.vue
+++ b/frontend/src/views/panel/AssistComponent/index.vue
@@ -115,7 +115,7 @@ export default {
             }
           })
 
-          this.$store.commit('recordSnapshot')
+          this.$store.commit('recordSnapshot','handleFileChange')
         }
 
         img.src = fileResult
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue
index 0dd626b352..80d9182335 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue
@@ -80,7 +80,7 @@ export default {
       const canvasStyleData = deepCopy(this.canvasStyleData)
       canvasStyleData.panel = this.panel
       this.$store.commit('setCanvasStyle', canvasStyleData)
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot','commitStyle')
     },
     onChangeType() {
       this.commitStyle()
diff --git a/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue b/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue
index 34dddcece0..e547952fe4 100644
--- a/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue
+++ b/frontend/src/views/panel/SubjectSetting/PanelStyle/ComponentGap.vue
@@ -44,7 +44,7 @@ export default {
       const canvasStyleData = deepCopy(this.canvasStyleData)
       canvasStyleData.panel = this.panel
       this.$store.commit('setCanvasStyle', canvasStyleData)
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot','onChangePanelStyle')
     }
   }
 }
diff --git a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
index 3e8446c375..ba37438f4e 100644
--- a/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
+++ b/frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue
@@ -189,7 +189,7 @@ export default {
     },
     subjectChange() {
       this.$store.commit('setCanvasStyle', JSON.parse(this.subjectItem.details))
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot','subjectChange')
       bus.$emit('onSubjectChange')
     },
     templateEdit() {
diff --git a/frontend/src/views/panel/SubjectSetting/index.vue b/frontend/src/views/panel/SubjectSetting/index.vue
index 1596a089f1..ad863bbb70 100644
--- a/frontend/src/views/panel/SubjectSetting/index.vue
+++ b/frontend/src/views/panel/SubjectSetting/index.vue
@@ -135,7 +135,7 @@ export default {
       chart.customFilter = JSON.stringify(this.chart.customFilter)
       canvasStyleData.chart = chart
       this.$store.commit('setCanvasStyle', canvasStyleData)
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot','save')
     }
   }
 }
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 5d621c2e0b..683ee0bef9 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -311,6 +311,7 @@ export default {
       this.init(newVal.id)
     },
     '$store.state.styleChangeTimes'() {
+      // console.log('styleChangeTimes' + this.$store.state.styleChangeTimes)
       if (this.$store.state.styleChangeTimes > 0) {
         this.destroyTimeMachine()
         this.recordStyleChange(this.$store.state.styleChangeTimes)
@@ -383,7 +384,7 @@ export default {
           //   this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
           const panelStyle = JSON.parse(response.data.panelStyle)
           this.$store.commit('setCanvasStyle', panelStyle)
-          this.$store.commit('recordSnapshot')// 记录快照
+          this.$store.commit('recordSnapshot', 'init')// 记录快照
           // 刷新联动信息
           getPanelAllLinkageInfo(panelId).then(rsp => {
             this.$store.commit('setNowPanelTrackInfo', rsp.data)
@@ -493,7 +494,7 @@ export default {
       component.style.left = this.getPositionX(e.layerX)
       component.id = newComponentId
       this.$store.commit('addComponent', { component })
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot', 'handleDrop')
       this.clearCurrentInfo()
 
       // // 文字组件
@@ -545,7 +546,7 @@ export default {
 
       //   this.$store.commit('addComponent', { component })
       this.$store.commit('setComponentWithId', component)
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot', 'sureFilter')
       this.cancelFilter()
     },
     reFreshComponent(component) {
@@ -625,7 +626,7 @@ export default {
             }
           })
 
-          this.$store.commit('recordSnapshot')
+          this.$store.commit('recordSnapshot', 'handleFileChange')
         }
 
         img.src = fileResult
@@ -677,7 +678,7 @@ export default {
       component.style.left = 600
       component.id = newComponentId
       this.$store.commit('addComponent', { component })
-      this.$store.commit('recordSnapshot')
+      this.$store.commit('recordSnapshot', 'newViewInfo')
       this.clearCurrentInfo()
       this.$store.commit('setCurComponent', { component: component, index: this.componentData.length - 1 })
 
@@ -703,7 +704,7 @@ export default {
     recordStyleChange(index) {
       this.timeMachine = setTimeout(() => {
         if (index === this.$store.state.styleChangeTimes) {
-          this.$store.commit('recordSnapshot')
+          this.$store.commit('recordSnapshot', 'recordStyleChange')
           this.$store.state.styleChangeTimes = 0
         }
         this.destroyTimeMachine()