feat(仪表板): 仪表板编辑时定时缓存未完成的仪表板，如果异常退出重新进入可以选择是否打开未保存的仪表板

2026-05-20 19:48:18 +08:00 · 2022-08-15 17:17:04 +08:00
parent 0ca33a5c79
commit 4b4a12969c
35 changed files with 235 additions and 63 deletions
--- a/frontend/src/components/canvas/components/Editor/DateFormat.vue
+++ b/frontend/src/components/canvas/components/Editor/DateFormat.vue
@@ -122,7 +122,7 @@ export default {
  watch: {
    formatInfo: {
      handler(newVal, oldVla) {
-        this.$store.state.styleChangeTimes++
+        this.$store.commit('canvasChange')
      },
      deep: true
    }
--- a/frontend/src/components/canvas/components/Editor/EditBar.vue
+++ b/frontend/src/components/canvas/components/Editor/EditBar.vue
@@ -277,7 +277,7 @@ export default {
      setTimeout(() => {
        this.recordMatrixCurShadowStyle()
      }, 50)
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('canvasChange')
      bus.$emit('auxiliaryMatrixChange')
    },
    // 记录当前样式 跟随阴影位置 矩阵处理
--- a/frontend/src/components/canvas/components/Editor/FrameLinks.vue
+++ b/frontend/src/components/canvas/components/Editor/FrameLinks.vue
@@ -84,7 +84,7 @@ export default {
      } else {
        this.curActiveTabInner.frameLinks = this.linkInfoTemp
      }
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('canvasChange')
      bus.$emit('frameLinksChange-' + this.curComponent.id)
      this.popoverClose()
    },
--- a/frontend/src/components/canvas/components/Editor/Hyperlinks.vue
+++ b/frontend/src/components/canvas/components/Editor/Hyperlinks.vue
@@ -63,7 +63,7 @@ export default {
    onSubmit() {
      this.linkInfo.content = checkAddHttp(this.linkInfo.content)
      this.curComponent.hyperlinks = deepCopy(this.linkInfo)
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('canvasChange')
      this.popoverClose()
    },
    onClose() {
--- a/frontend/src/components/canvas/components/Editor/HyperlinksDialog.vue
+++ b/frontend/src/components/canvas/components/Editor/HyperlinksDialog.vue
@@ -54,7 +54,7 @@ export default {
    onSubmit() {
      this.linkInfo.content = checkAddHttp(this.linkInfo.content)
      this.curComponent.hyperlinks = deepCopy(this.linkInfo)
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('canvasChange')
      this.onClose()
    },
    onClose() {
--- a/frontend/src/components/canvas/components/Editor/PreviewEject.vue
+++ b/frontend/src/components/canvas/components/Editor/PreviewEject.vue
@@ -84,7 +84,7 @@ export default {
          this.initCallBack()
        })
      } else {
-        initPanelData(this.panelId, () => {
+        initPanelData(this.panelId, false, () => {
          this.initCallBack()
        })
      }
--- a/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue
+++ b/frontend/src/components/canvas/components/Editor/StreamMediaLinks.vue
@@ -111,7 +111,7 @@ export default {
      } else {
        this.curActiveTabInner.streamMediaLinks = this.streamMediaInfoTemp
      }
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('canvasChange')
      bus.$emit('streamMediaLinksChange-' + this.curComponent.id)
      this.popoverClose()
    },
--- a/frontend/src/components/canvas/components/Editor/VideoLinks.vue
+++ b/frontend/src/components/canvas/components/Editor/VideoLinks.vue
@@ -101,7 +101,7 @@ export default {
        this.curActiveTabInner.videoLinks = this.linkInfoTemp
      }
      this.curComponent.videoLinks = this.linkInfoTemp
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('canvasChange')
      bus.$emit('videoLinksChange-' + this.curComponent.id)
      this.popoverClose()
    },
--- a/frontend/src/components/canvas/components/FilterTextAttr.vue
+++ b/frontend/src/components/canvas/components/FilterTextAttr.vue
@@ -153,7 +153,7 @@ export default {
      }
    },
    styleChange() {
-      this.$store.commit('recordStyleChange')
+      this.$store.commit('canvasChange')
    }
  }
 }
--- a/frontend/src/components/canvas/components/RectangleAttr.vue
+++ b/frontend/src/components/canvas/components/RectangleAttr.vue
@@ -205,7 +205,7 @@ export default {
      }
    },
    styleChange() {
-      this.$store.commit('recordStyleChange')
+      this.$store.commit('canvasChange')
    }
  }
 }
--- a/frontend/src/components/canvas/components/TextAttr.vue
+++ b/frontend/src/components/canvas/components/TextAttr.vue
@@ -475,7 +475,7 @@ export default {
      return y * this.curCanvasScale.scalePointHeight
    },
    styleChange() {
-      this.$store.commit('recordStyleChange')
+      this.$store.commit('canvasChange')
    },
    goHeadFontColor() {
      this.$refs.headFontColorPicker.handleTrigger()
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -135,7 +135,7 @@ import { mapState } from 'vuex'
 import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
 import eventBus from '@/components/canvas/utils/eventBus'
 import { deepCopy, mobile2MainCanvas } from '@/components/canvas/utils/utils'
-import { panelUpdate } from '@/api/panel/panel'
+import { panelUpdate, saveCache, removePanelCache } from '@/api/panel/panel'
 import { saveLinkage, getPanelAllLinkageInfo } from '@/api/panel/linkage'
 import bus from '@/utils/bus'
 import { queryPanelJumpInfo } from '@/api/panel/linkJump'
@@ -199,6 +199,7 @@ export default {
    this.scale = this.canvasStyleData.scale
    this.mobileLayoutInitStatus = this.mobileLayoutStatus
    this.showGridSwitch = this.canvasStyleData.aidedDesign.showGrid
+    this.autoCache()
  },
  beforeDestroy() {
    eventBus.$off('preview', this.preview)
@@ -211,6 +212,7 @@ export default {
      this.$store.commit('initCanvasBase')
      this.$store.commit('setInEditorStatus', false)
      this.$emit('close-left-panel')
+      removePanelCache(this.panelInfo.id)
      this.$nextTick(() => {
        bus.$emit('PanelSwitchComponent', { name: 'PanelMain' })
      })
@@ -235,7 +237,6 @@ export default {
      return result
    },
    handleScaleChange() {
-      clearTimeout(this.timer)
      setTimeout(() => {
        const componentData = deepCopy(this.componentData)
        componentData.forEach(component => {
@@ -329,8 +330,18 @@ export default {
      this.isShowPreview = true
      this.$store.commit('setEditMode', 'preview')
    },
-
-    save(withClose) {
+    autoCache() {
+      // auto save panel cache per 5s
+      const _this = this
+      _this.timer = setInterval(() => {
+        if (_this.$store.state.cacheStyleChangeTimes > 0) {
+          const cacheRequest = _this.savePrepare()
+          saveCache(cacheRequest)
+          _this.$store.state.cacheStyleChangeTimes = 0
+        }
+      }, 5000)
+    },
+    savePrepare() {
      // 保存到数据库
      const requestInfo = {
        id: this.panelInfo.id,
@@ -359,6 +370,11 @@ export default {
      })
      // 无需保存条件
      requestInfo.panelData = JSON.stringify(components)
+      return requestInfo
+    },
+
+    save(withClose) {
+      const requestInfo = this.savePrepare()
      panelUpdate(requestInfo).then(response => {
        this.$store.commit('refreshSaveStatus')
        this.$message({
@@ -447,7 +463,7 @@ export default {
      this.canvasStyleData.auxiliaryMatrix = value
    },
    showGridChange() {
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('canvasChange')
      this.canvasStyleData.aidedDesign.showGrid = !this.canvasStyleData.aidedDesign.showGrid
    },
    // batch option
@@ -484,7 +500,7 @@ export default {
    },
    // 移动端布局保存
    mobileLayoutSave() {
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('canvasChange')
      const mobileDataObj = {}
      this.componentData.forEach(item => {
        mobileDataObj[item.id] = item
--- a/frontend/src/components/canvas/custom-component/DeRichText.vue
+++ b/frontend/src/components/canvas/custom-component/DeRichText.vue
@@ -114,7 +114,7 @@ export default {
    },
    myValue(newValue) {
      this.element.propValue = newValue
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('canvasChange')
    }
  },
  mounted() {
--- a/frontend/src/components/canvas/custom-component/DeRichTextView.vue
+++ b/frontend/src/components/canvas/custom-component/DeRichTextView.vue
@@ -115,7 +115,7 @@ export default {
      if (this.canEdit) {
        this.element.propValue.textValue = newValue
      }
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('canvasChange')
    }
  },
  mounted() {
--- a/frontend/src/components/canvas/custom-component/UserView.vue
+++ b/frontend/src/components/canvas/custom-component/UserView.vue
@@ -460,7 +460,7 @@ export default {
      }
    },
    optFromBatchSingleProp(param) {
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('canvasChange')
      const updateParams = { 'id': this.chart.id }
      if (param.custom === 'customAttr') {
        const sourceCustomAttr = JSON.parse(this.sourceCustomAttrStr)
@@ -929,7 +929,7 @@ export default {
      return this.chart.render
    },
    getDataEdit(param) {
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('canvasChange')
      if (param.type === 'propChange') {
        this.getData(param.viewId, false, true)
      } else if (param.type === 'styleChange') {
--- a/frontend/src/components/canvas/custom-component/VText.vue
+++ b/frontend/src/components/canvas/custom-component/VText.vue
@@ -89,9 +89,9 @@ export default {
  },
  methods: {
    handleInput(e) {
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('canvasChange')
      this.$emit('input', this.element, e.target.innerHTML)
-      this.$store.commit('recordStyleChange')
+      this.$store.commit('canvasChange')
    },

    handleKeydown(e) {
--- a/frontend/src/components/canvas/store/snapshot.js
+++ b/frontend/src/components/canvas/store/snapshot.js
@@ -9,9 +9,14 @@ export default {
    changeTimes: -1, // 修改次数
    lastSaveSnapshotIndex: 0, // 最后保存是snapshotIndex的索引
    styleChangeTimes: 0, // 组件样式修改次数
+    cacheStyleChangeTimes: 0, // 仪表板未缓存的组件样式修改次数
    doSnapshotIndex: -1 // snapshot undo redo 时的索引记录
  },
  mutations: {
+    canvasChange(state) {
+      state.styleChangeTimes++
+      state.cacheStyleChangeTimes++
+    },
    undo(state) {
      store.commit('setCurComponent', { component: null, index: null })
      if (state.snapshotIndex > 0) {
@@ -34,7 +39,7 @@ export default {

    recordSnapshot(state) {
      state.changeTimes++
-      state.styleChangeTimes++
+      store.commit('canvasChange')
      // 添加新的快照
      state.snapshotData[++state.snapshotIndex] = deepCopy(state.componentData)
      state.snapshotStyleData[state.snapshotIndex] = deepCopy(state.canvasStyleData)
--- a/frontend/src/components/widget/DeWidget/DeTabs.vue
+++ b/frontend/src/components/widget/DeWidget/DeTabs.vue
@@ -444,7 +444,7 @@ export default {
      this.styleChange()
    },
    styleChange() {
-      this.$store.state.styleChangeTimes++
+      this.$store.commit('canvasChange')
    },
    chartResize() {
      // this.$refs[this.activeTabName]
--- a/frontend/src/components/widget/DeWidget/TabStyle.vue
+++ b/frontend/src/components/widget/DeWidget/TabStyle.vue
@@ -85,7 +85,7 @@ export default {
      current && (current.showPicker = true)
    },
    styleChange() {
-      this.$store.commit('recordStyleChange')
+      this.$store.commit('canvasChange')
    }
  }