From e3ffac5d972127735469088b7e259780b91c3b96 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Mon, 12 Jul 2021 16:51:39 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E3=80=90=E4=BB=AA=E8=A1=A8=E6=9D=BF?= =?UTF-8?q?=E3=80=91=E4=BB=AA=E8=A1=A8=E6=9D=BF=E4=BF=AE=E6=94=B9=E5=90=8E?= =?UTF-8?q?=E6=9C=AA=E4=BF=9D=E5=AD=98=EF=BC=8C=E7=82=B9=E5=87=BB=E5=85=B3?= =?UTF-8?q?=E9=97=AD=E5=BC=B9=E5=87=BA=E6=B6=88=E6=81=AF=E6=A1=86=E6=9D=A5?= =?UTF-8?q?=E7=A1=AE=E8=AE=A4=E6=98=AF=E5=90=A6=E4=BF=9D=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/canvas/components/Toolbar.vue | 45 ++++++++++++++++--- .../src/components/canvas/store/snapshot.js | 11 ++++- frontend/src/icons/svg/warn-tre.svg | 1 + frontend/src/lang/en.js | 6 ++- frontend/src/lang/tw.js | 6 ++- frontend/src/lang/zh.js | 6 ++- 6 files changed, 66 insertions(+), 9 deletions(-) create mode 100644 frontend/src/icons/svg/warn-tre.svg 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') }} +
+
+ {{ $t('panel.do_not_save') }} + {{ $t('panel.cancel') }} + {{ $t('panel.save') }} + +
+ @@ -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: '本地安装',