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

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

@@ -2,32 +2,45 @@ import store from '@/store/index'
 import { deepCopy } from '@/components/canvas/utils/utils'
 
 export default {
-    state: {
-        snapshotData: [], // 编辑器快照数据
-        snapshotIndex: -1, // 快照索引
+  state: {
+    snapshotData: [], // 编辑器快照数据
+    snapshotStyleData: [], // 样式改变也记录快照
+    snapshotIndex: -1 // 快照索引
+
+  },
+  mutations: {
+    undo(state) {
+      state.snapshotIndex--
+      if (state.snapshotIndex >= 0) {
+        store.commit('setComponentData', deepCopy(state.snapshotData[state.snapshotIndex]))
+        store.commit('setCanvasStyle', deepCopy(state.snapshotStyleData[state.snapshotIndex]))
+      }
     },
-    mutations: {
-        undo(state) {
-            if (state.snapshotIndex >= 0) {
-                state.snapshotIndex--
-                store.commit('setComponentData', deepCopy(state.snapshotData[state.snapshotIndex]))
-            }
-        },
 
-        redo(state) {
-            if (state.snapshotIndex < state.snapshotData.length - 1) {
-                state.snapshotIndex++
-                store.commit('setComponentData', deepCopy(state.snapshotData[state.snapshotIndex]))
-            }
-        },
+    redo(state) {
+      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)
-            // 在 undo 过程中，添加新的快照时，要将它后面的快照清理掉
-            if (state.snapshotIndex < state.snapshotData.length - 1) {
-                state.snapshotData = state.snapshotData.slice(0, state.snapshotIndex + 1)
-            }
-        },
+    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

@@ -72,7 +72,7 @@
         >
           <view-select v-show=" show && showIndex===0" />
           <filter-group v-show=" show &&showIndex===1" />
-          <subject-setting v-show=" show &&showIndex===2" />
+                    <subject-setting v-show=" show &&showIndex===2" />
         </el-drawer>
 
         <div
@@ -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)