feat: 画布样式修改 也记录镜像

frontend/src/components/canvas/store/snapshot.js

@@ -4,13 +4,16 @@ import { deepCopy } from '@/components/canvas/utils/utils'
 export default {
   state: {
     snapshotData: [], // 编辑器快照数据
-        snapshotIndex: -1, // 快照索引
+    snapshotStyleData: [], // 样式改变也记录快照
+    snapshotIndex: -1 // 快照索引
+
   },
   mutations: {
     undo(state) {
-            if (state.snapshotIndex >= 0) {
       state.snapshotIndex--
+      if (state.snapshotIndex >= 0) {
         store.commit('setComponentData', deepCopy(state.snapshotData[state.snapshotIndex]))
+        store.commit('setCanvasStyle', deepCopy(state.snapshotStyleData[state.snapshotIndex]))
       }
     },
 
@@ -18,16 +21,26 @@ export default {
       if (state.snapshotIndex < state.snapshotData.length - 1) {
         state.snapshotIndex++
         store.commit('setComponentData', deepCopy(state.snapshotData[state.snapshotIndex]))
+        store.commit('setCanvasStyle', deepCopy(state.snapshotStyleData[state.snapshotIndex]))
       }
     },
 
     recordSnapshot(state) {
       // 添加新的快照
       state.snapshotData[++state.snapshotIndex] = deepCopy(state.componentData)
+      state.snapshotStyleData[state.snapshotIndex] = deepCopy(state.canvasStyleData)
       // 在 undo 过程中，添加新的快照时，要将它后面的快照清理掉
       if (state.snapshotIndex < state.snapshotData.length - 1) {
         state.snapshotData = state.snapshotData.slice(0, state.snapshotIndex + 1)
+        state.snapshotStyleData = state.snapshotStyleData.slice(0, state.snapshotIndex + 1)
       }
     },
-    },
+
+    refreshSnapshot(state) {
+      // 刷新快照
+      state.snapshotData = []
+      state.snapshotStyleData = []
+      state.snapshotIndex = -1
+    }
+  }
 }

frontend/src/views/panel/SubjectSetting/PanelStyle/BackgroundSelector.vue

@@ -9,7 +9,7 @@
         <el-col>
           <el-row>
             <el-col :span="6">
-              <el-radio v-model="panel.backgroundType" label="color" @change="onChangeType">{{$t('chart.color')}}</el-radio>
+              <el-radio v-model="panel.backgroundType" label="color" @change="onChangeType">{{ $t('chart.color') }}</el-radio>
             </el-col>
             <el-col :span="18">
               <colorPicker v-model="panel.color" style="margin-top: 6px;cursor: pointer;z-index: 1004;border: solid 1px black" />
@@ -17,7 +17,7 @@
           </el-row>
           <el-row style="height: 60px;margin-top:10px;overflow: hidden">
             <el-col :span="6">
-              <el-radio v-model="panel.backgroundType" label="image" @change="onChangeType">{{$t('panel.photo')}}</el-radio>
+              <el-radio v-model="panel.backgroundType" label="image" @change="onChangeType">{{ $t('panel.photo') }}</el-radio>
             </el-col>
             <el-col :span="18">
               <el-upload
@@ -40,7 +40,7 @@
             </el-col>
           </el-row>
         </el-col>
-        <el-button slot="reference" size="mini" class="shape-item">{{$t('chart.background')}} <i class="el-icon-setting el-icon--right" /></el-button>
+        <el-button slot="reference" size="mini" class="shape-item">{{ $t('chart.background') }} <i class="el-icon-setting el-icon--right" /></el-button>
       </el-popover>
     </div>
   </div>
@@ -71,7 +71,7 @@ export default {
   created() {
     // 初始化赋值
     this.panel = this.canvasStyleData.panel
-    if (this.panel.imageUrl) {
+    if (this.panel.imageUrl && typeof (this.panel.imageUrl) === 'string') {
       this.fileList.push({ url: this.panel.imageUrl })
     }
   },
@@ -80,6 +80,7 @@ export default {
       const canvasStyleData = deepCopy(this.canvasStyleData)
       canvasStyleData.panel = this.panel
       this.$store.commit('setCanvasStyle', canvasStyleData)
+      this.$store.commit('recordSnapshot')
     },
     onChangeType() {
       this.commitStyle()

frontend/src/views/panel/SubjectSetting/PreSubject/SubjectTemplateItem.vue

@@ -188,6 +188,7 @@ export default {
     },
     subjectChange() {
       this.$store.commit('setCanvasStyle', JSON.parse(this.subjectItem.details))
+      this.$store.commit('recordSnapshot')
     },
     templateEdit() {
       this.$emit('templateEdit', this.template)

frontend/src/views/panel/SubjectSetting/index.vue

@@ -11,7 +11,7 @@
         <el-collapse-item :title="$t('panel.panel')" name="panel">
           <el-row style="background-color: #f7f8fa; margin: 5px">
             <background-selector class="attr-selector" />
-            <component-gap class="attr-selector" />
+            <!--            <component-gap class="attr-selector" />-->
           </el-row>
         </el-collapse-item>
         <el-collapse-item :title="$t('chart.module_style')" name="component">
@@ -112,6 +112,7 @@ export default {
       chart.customFilter = JSON.stringify(this.chart.customFilter)
       canvasStyleData.chart = chart
       this.$store.commit('setCanvasStyle', canvasStyleData)
+      this.$store.commit('recordSnapshot')
     }
   }
 }

frontend/src/views/panel/edit/index.vue

@@ -247,6 +247,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')// 记录快照
         })
       }
     },

frontend/src/views/panel/list/PanelList.vue

@@ -591,7 +591,8 @@ export default {
     edit(data, node) {
       this.lastActiveNodeData = data
       this.lastActiveNode = node
-      // 清空当前缓存
+      // 清空当前缓存,快照
+      this.$store.commit('refreshSnapshot')
       this.$store.commit('setComponentData', [])
       this.$store.commit('setCanvasStyle', DEFAULT_COMMON_CANVAS_STYLE)
       this.$store.dispatch('panel/setPanelInfo', data)