diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index d4bee9a54b..083d3e01ee 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -53,7 +53,7 @@
-
+
{{ $t('commons.save') }}
@@ -61,6 +61,20 @@
+
+
+
+
+
+ {{ $t('panel.panel_save_warn_tips') }}
+
+
+
@@ -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()
}
}
}
diff --git a/frontend/src/components/canvas/store/snapshot.js b/frontend/src/components/canvas/store/snapshot.js
index c2574de9c1..ba061b0045 100644
--- a/frontend/src/components/canvas/store/snapshot.js
+++ b/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)
}
}
}
diff --git a/frontend/src/icons/svg/warn-tre.svg b/frontend/src/icons/svg/warn-tre.svg
new file mode 100644
index 0000000000..78696b3add
--- /dev/null
+++ b/frontend/src/icons/svg/warn-tre.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 3785efe3fe..50fa1d0506 100644
--- a/frontend/src/lang/en.js
+++ b/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',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index ebf8f3c00f..59ebb0f759 100644
--- a/frontend/src/lang/tw.js
+++ b/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: '本地安裝',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index bf276e5df1..b7e75b1d4e 100644
--- a/frontend/src/lang/zh.js
+++ b/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: '本地安装',