feat:【仪表板】仪表板修改后未保存，点击关闭弹出消息框来确认是否保存

frontend/src/components/canvas/components/Toolbar.vue

@@ -53,7 +53,7 @@
       </el-tooltip>
 
       <span style="float: right;margin-left: 10px">
-        <el-button size="mini" @click="save">
+        <el-button size="mini" :disabled="changeTimes===0||snapshotIndex===lastSaveSnapshotIndex" @click="save">
           {{ $t('commons.save') }}
         </el-button>
         <el-button size="mini" @click="closePanelEdit">
@@ -61,6 +61,20 @@
         </el-button>
       </span>
     </div>
+
+    <!--关闭弹框-->
+    <el-dialog :visible.sync="closePanelVisible" :title="$t('panel.panel_save_tips')" :show-close="false" width="30%" class="dialog-css">
+      <div>
+        <svg-icon icon-class="warn-tre" style="width: 30px;height: 30px" />
+        <span style="font-size: 12px;margin-left: 10px">{{ $t('panel.panel_save_warn_tips') }}</span>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button style="float: left" size="mini" @click="closeNotSave()">{{ $t('panel.do_not_save') }}</el-button>
+        <el-button size="mini" @click="closePanelVisible=false">{{ $t('panel.cancel') }}</el-button>
+        <el-button type="primary" size="mini" @click="save(true)">{{ $t('panel.save') }}
+        </el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -95,15 +109,21 @@ export default {
         'borderWidth'
       ],
       scale: '100%',
-      timer: null
+      timer: null,
+      changes: 0,
+      closePanelVisible: false
     }
   },
   computed: mapState([
     'componentData',
     'canvasStyleData',
     'areaData',
-    'curComponent'
+    'curComponent',
+    'changeTimes',
+    'snapshotIndex',
+    'lastSaveSnapshotIndex'
   ]),
+
   created() {
     eventBus.$on('preview', this.preview)
     eventBus.$on('save', this.save)
@@ -111,13 +131,21 @@ export default {
 
     this.scale = this.canvasStyleData.scale
   },
+
   methods: {
-    closePanelEdit() {
+    close() {
       this.$emit('close-left-panel')
       this.$nextTick(() => {
         bus.$emit('PanelSwitchComponent', { name: 'PanelMain' })
       })
     },
+    closePanelEdit() {
+      if (this.changeTimes === 0 || this.snapshotIndex === this.lastSaveSnapshotIndex) { // 已保存
+        this.close()
+      } else {
+        this.closePanelVisible = true
+      }
+    },
     goFile() {
       this.$refs.files.click()
     },
@@ -231,7 +259,7 @@ export default {
       this.$store.commit('setEditMode', 'preview')
     },
 
-    save() {
+    save(withClose) {
       // 保存到数据库
       const requestInfo = {
         id: this.$store.state.panel.panelInfo.id,
@@ -239,11 +267,15 @@ export default {
         panelData: JSON.stringify(this.componentData)
       }
       panelSave(requestInfo).then(response => {
+        this.$store.commit('refreshSaveStatus')
         this.$message({
           message: this.$t('commons.save_success'),
           type: 'success',
           showClose: true
         })
+        if (withClose) {
+          this.close()
+        }
       })
     },
     clearCanvas() {
@@ -261,6 +293,9 @@ export default {
     },
     changeAidedDesign() {
       this.$emit('changeAidedDesign')
+    },
+    closeNotSave() {
+      this.close()
     }
   }
 }

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

@@ -5,7 +5,9 @@ export default {
   state: {
     snapshotData: [], // 编辑器快照数据
     snapshotStyleData: [], // 样式改变也记录快照
-    snapshotIndex: -1 // 快照索引
+    snapshotIndex: -1, // 快照索引
+    changeTimes: -1, // 修改次数
+    lastSaveSnapshotIndex: 0 // 最后保存是snapshotIndex的索引
   },
   mutations: {
     undo(state) {
@@ -27,6 +29,7 @@ export default {
     },
 
     recordSnapshot(state) {
+      state.changeTimes++
       // console.log('recordSnapshot')
       // 添加新的快照
       state.snapshotData[++state.snapshotIndex] = deepCopy(state.componentData)
@@ -42,6 +45,12 @@ export default {
       state.snapshotData = []
       state.snapshotStyleData = []
       state.snapshotIndex = -1
+      state.changeTimes = -1
+      state.lastSaveSnapshotIndex = 0
+    },
+    refreshSaveStatus(state) {
+      state.changeTimes = 0
+      state.lastSaveSnapshotIndex = deepCopy(state.snapshotIndex)
     }
   }
 }

frontend/src/icons/svg/warn-tre.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1626064715257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4612" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M1019.204 901.632L546.628 82.944c-15.36-26.112-52.736-26.112-68.096 0L5.444 901.632c-15.36 26.112 3.584 58.88 34.304 58.88H984.9c30.208 0 49.152-32.768 34.304-58.88z" fill="#f4ea2a" p-id="4613" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path><path d="M462.148 353.792h0.512a46.98 46.98 0 0 1 47.104-47.104h5.632a46.98 46.98 0 0 1 47.104 47.104v254.464c0 26.112-21.504 47.616-48.128 47.104h-4.608c-26.112 0-47.616-20.992-47.616-47.104V353.792z m107.52 421.888c-5.12 26.112-20.48 41.984-46.592 47.616-6.144 1.536-12.288 1.536-18.432 0-27.136-5.632-43.52-20.992-49.152-46.592-1.536-6.656-1.536-13.312 0-19.456 5.632-25.6 22.016-40.96 49.152-46.08a55.68 55.68 0 0 1 18.432 0c26.112 5.632 41.472 20.992 46.592 47.104 1.024 5.632 1.024 11.776 0 17.408z" fill="#FFFFFF" p-id="4614"></path></svg>

frontend/src/lang/en.js

@@ -1119,7 +1119,11 @@ export default {
     default_panel_name: 'Default Dashboard Name',
     source_panel_name: 'Source Dashboard Name',
     content_style: 'Content Style',
-    canvas_self_adaption: 'Canvas Self Adaption'
+    canvas_self_adaption: 'Canvas Self Adaption',
+    panel_save_tips: 'Do you want to save the changes you made to.',
+    panel_save_warn_tips: "Your changes will be lost if you don't save them！",
+    do_not_save: "Don't Save",
+    save_and_close: 'Save'
   },
   plugin: {
     local_install: 'Local installation',

frontend/src/lang/tw.js

@@ -1119,7 +1119,11 @@ export default {
     default_panel_name: '默認儀表板名稱',
     source_panel_name: '原儀表板名稱',
     content_style: '內容樣式',
-    canvas_self_adaption: '自適應畫布區域'
+    canvas_self_adaption: '自適應畫布區域',
+    panel_save_tips: '仪表板已变动，是否保存？',
+    panel_save_warn_tips: '如果未保存，你对仪表板做的变更将会丢失！',
+    do_not_save: '不保存',
+    save: '保存'
   },
   plugin: {
     local_install: '本地安裝',

frontend/src/lang/zh.js

@@ -1120,7 +1120,11 @@ export default {
     default_panel_name: '默认仪表板名称',
     source_panel_name: '原仪表板名称',
     content_style: '内容样式',
-    canvas_self_adaption: '自适应画布区域'
+    canvas_self_adaption: '自适应画布区域',
+    panel_save_tips: '仪表板已变动，是否保存？',
+    panel_save_warn_tips: '如果未保存，你对仪表板做的变更将会丢失！',
+    do_not_save: '不保存',
+    save: '保存'
   },
   plugin: {
     local_install: '本地安装',