refactor(仪表板、数据大屏): 优化画布编辑镜像记录，修复含有过滤组件的画布无法点恢复按钮问题 #13937

2025-02-24 11:32:57 +08:00 · 2024-12-13 13:03:50 +08:00 · 2024-12-13 13:03:50 +08:00 · 590b995cde
commit 590b995cde
parent 2b461f1abe
43 changed files with 73 additions and 71 deletions
--- a/core/core-frontend/src/components/dashboard/DbToolbar.vue
+++ b/core/core-frontend/src/components/dashboard/DbToolbar.vue
@ -456,7 +456,7 @@ const saveLinkageSetting = () => {
 }

 const onDvNameChange = () => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('onDvNameChange')
 }
 const appStore = useAppStoreWithOut()
 const isEmbedded = computed(() => appStore.getIsDataEaseBi || appStore.getIsIframe)
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ComponentColorSelector.vue
@ -237,7 +237,7 @@ const changeColorOption = (modifyName = 'value') => {
 }

 const changePagerColorChange = () => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('changePagerColorChange')
 }

 const changeColorCase = modifyName => {
--- a/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue
+++ b/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue
@ -19,7 +19,7 @@ const handleScaleChange = () => {
  if (scaleChangeReady.value) {
    scaleChangeReady.value = false
    setTimeout(() => {
-      snapshotStore.recordSnapshotCache()
+      snapshotStore.recordSnapshotCache('handleScaleChange')
      // 画布比例设一个最小值，不能为 0
      scale.value = ~~scale.value || 10
      scale.value = scale.value < 10 ? 10 : scale.value
--- a/core/core-frontend/src/components/data-visualization/DvToolbar.vue
+++ b/core/core-frontend/src/components/data-visualization/DvToolbar.vue
@ -256,7 +256,7 @@ const backHandler = (url: string) => {
 const openHandler = ref(null)

 const onDvNameChange = () => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('onDvNameChange')
 }

 const getFullScale = () => {
--- a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
@ -159,7 +159,7 @@ const hideComponent = () => {
 const showComponent = () => {
  setTimeout(() => {
    layerStore.showComponent()
-    snapshotStore.recordSnapshotCache()
+    snapshotStore.recordSnapshotCache('showComponent')
  })
 }

--- a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
@ -246,7 +246,7 @@ const hideComponent = () => {
 const showComponent = () => {
  setTimeout(() => {
    layerStore.showComponent()
-    snapshotStore.recordSnapshotCache()
+    snapshotStore.recordSnapshotCache('showComponent')
  })
 }

@ -269,7 +269,7 @@ const dragOnEnd = ({ oldIndex, newIndex }) => {
  componentData.value.splice(comLength - 1 - oldIndex, 1)
  componentData.value.splice(comLength - 1 - newIndex, 0, target)
  dvMainStore.setCurComponent({ component: target, index: transformIndex(comLength - oldIndex) })
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('dragOnEnd')
 }
 const iconMap = {
  bar: bar,
@ -391,7 +391,7 @@ const areaClick = area => {
 }

 const canvasChange = () => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('canvasChange')
 }
 </script>

--- a/core/core-frontend/src/components/data-visualization/RealTimeTab.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeTab.vue
@ -76,7 +76,7 @@ const dragOnEnd = ({ oldIndex, newIndex }) => {
  const source = componentData.value[newIndex]
  dvMainStore.setCurTabName(source.title)
  eventBus.emit('onTabSortChange-' + tabElement.value?.id)
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('dragOnEnd')
 }

 const menuAsideClose = (param, index) => {
--- a/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
@ -45,7 +45,7 @@ const lock = () => {
      lockStore.lock(component)
    })
  }
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('lock')
  menuOpt('lock')
 }

@ -94,7 +94,7 @@ const hide = () => {
      layerStore.hideComponentWithComponent(component.id)
    })
  }
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('hide')
  menuOpt('hide')
 }

@ -106,12 +106,12 @@ const show = () => {
      layerStore.showComponent(component.id)
    })
  }
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('show')
  menuOpt('show')
 }
 const categoryChange = type => {
  if (curComponent.value) {
-    snapshotStore.recordSnapshotCache()
+    snapshotStore.recordSnapshotCache('categoryChange')
    curComponent.value['category'] = type
    if (type === 'hidden') {
      dvMainStore.canvasStateChange({ key: 'curPointArea', value: 'hidden' })
@ -138,7 +138,7 @@ const deleteComponent = () => {
    })
  }
  eventBus.emit('hideArea-canvas-main')
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('deleteComponent')
  menuOpt('deleteComponent')
 }

--- a/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
+++ b/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
@ -107,7 +107,7 @@ const onFontFamilyChange = () => {
  snapshotStore.recordSnapshotCache('renderChart')
 }
 const onThemeChange = () => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('onThemeChange')
 }

 withDefaults(
--- a/core/core-frontend/src/components/visualization/ComponentEditBar.vue
+++ b/core/core-frontend/src/components/visualization/ComponentEditBar.vue
@ -465,7 +465,7 @@ const exportAsImage = () => {
 const deleteComponent = () => {
  eventBus.emit('removeMatrixItem-' + canvasId.value, index.value)
  dvMainStore.setCurComponent({ component: null, index: null })
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('deleteComponent')
 }

 const datasetParamsInit = () => {
--- a/core/core-frontend/src/components/visualization/DatasetParamsSettingDialog.vue
+++ b/core/core-frontend/src/components/visualization/DatasetParamsSettingDialog.vue
@ -51,7 +51,7 @@ const dvMainStore = dvMainStoreWithOut()
 const onSubmit = () => {
  state.linkInfo.content = checkAddHttp(state.linkInfo.content)
  dvMainStore.curComponent.hyperlinks = deepCopy(state.linkInfo)
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('ds-onSubmit')
  onClose()
 }

--- a/core/core-frontend/src/components/visualization/DvSidebar.vue
+++ b/core/core-frontend/src/components/visualization/DvSidebar.vue
@ -108,7 +108,7 @@ const editComponentName = () => {
 }

 const onComponentNameChange = () => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('onComponentNameChange')
 }
 </script>

--- a/core/core-frontend/src/components/visualization/HyperlinksDialog.vue
+++ b/core/core-frontend/src/components/visualization/HyperlinksDialog.vue
@ -51,7 +51,7 @@ const dvMainStore = dvMainStoreWithOut()
 const onSubmit = () => {
  state.linkInfo.content = checkAddHttp(state.linkInfo.content)
  dvMainStore.curComponent.hyperlinks = deepCopy(state.linkInfo)
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('hyper-onSubmit')
  onClose()
 }

--- a/core/core-frontend/src/components/visualization/LinkJumpSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkJumpSet.vue
@ -865,7 +865,7 @@ const save = () => {
  state.loading = true
  updateJumpSet(state.linkJump)
    .then(() => {
-      snapshotStore.recordSnapshotCache()
+      snapshotStore.recordSnapshotCache('updateJumpSet')
      ElMessage.success('保存成功')
      // 刷新跳转信息
      queryVisualizationJumpInfo(dvInfo.value.id).then(rsp => {
--- a/core/core-frontend/src/components/visualization/LinkageSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkageSet.vue
@ -486,7 +486,7 @@ const saveLinkageSetting = () => {
  saveLinkage(request)
    .then(() => {
      curComponent.value.actionSelection.linkageActive = customLinkageActive.value.linkageActive
-      snapshotStore.recordSnapshotCache()
+      snapshotStore.recordSnapshotCache('saveLinkageSetting')
      ElMessage.success('保存成功')
      // 刷新联动信息
      getPanelAllLinkageInfo(dvInfo.value.id).then(rsp => {
--- a/core/core-frontend/src/components/visualization/StreamMediaLinks.vue
+++ b/core/core-frontend/src/components/visualization/StreamMediaLinks.vue
@ -98,7 +98,7 @@ const onSubmit = () => {
  } else {
    curActiveTabInner.value.streamMediaLinks = state.streamMediaInfoTemp
  }
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('onSubmit')
  eventBus.emit('streamMediaLinksChange-' + curComponent.value.id)
  popoverClose()
 }
--- a/core/core-frontend/src/components/visualization/TabCarouselDialog.vue
+++ b/core/core-frontend/src/components/visualization/TabCarouselDialog.vue
@ -56,7 +56,7 @@ const switchTimeChange = () => {
 const onSubmit = () => {
  curComponent.value.style.carouselEnable = state.carouselEnable
  curComponent.value.style.switchTime = state.switchTime
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('onSubmit')
  onClose()
 }

--- a/core/core-frontend/src/components/visualization/common/ComponentPosition.vue
+++ b/core/core-frontend/src/components/visualization/common/ComponentPosition.vue
@ -189,20 +189,20 @@ const onPositionChange = key => {
    groupSizeStyleAdaptor(curComponent.value)
  }

-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('onPositionChange')
 }

 const maintainRadioChange = () => {
  curComponent.value.aspectRatio = curComponent.value.style.width / curComponent.value.style.height
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('maintainRadioChange')
 }
 const multiDimensionalChange = () => {
  // do change
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('multiDimensionalChange')
 }

 const snapshotChange = () => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('snapshotChange')
 }

 const positionInit = () => {
--- a/core/core-frontend/src/components/visualization/common/DeUpload.vue
+++ b/core/core-frontend/src/components/visualization/common/DeUpload.vue
@ -87,7 +87,7 @@ const handlePictureCardPreview = file => {
 }
 const upload = file => {
  uploadFileResult(file.file, fileUrl => {
-    snapshotStore.recordSnapshotCache()
+    snapshotStore.recordSnapshotCache('deUpload')
    imgUrlInner.value = fileUrl
    emits('onImgChange', fileUrl)
  })
@ -100,7 +100,7 @@ const reUpload = e => {
    return
  }
  uploadFileResult(file, fileUrl => {
-    snapshotStore.recordSnapshotCache()
+    snapshotStore.recordSnapshotCache('uploadFileResult')
    imgUrlInner.value = fileUrl
    emits('onImgChange', fileUrl)
  })
--- a/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
+++ b/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
@ -210,7 +210,7 @@ const upload = file => {
 }

 const onBackgroundChange = () => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('onBackgroundChange')
 }

 const bgForm = ref()
--- a/core/core-frontend/src/custom-component/common/CommonBorderSetting.vue
+++ b/core/core-frontend/src/custom-component/common/CommonBorderSetting.vue
@ -52,7 +52,7 @@ const styleInit = () => {
 const styleForm = computed<any>(() => styleInfo.value)

 const changeStyle = params => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('border-changeStyle')
  emits('onStyleAttrChange', params)
 }

--- a/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
+++ b/core/core-frontend/src/custom-component/common/CommonStyleSet.vue
@ -561,7 +561,7 @@ const sizeChange = key => {
 }

 const changeStyle = params => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('changeStyle')
  emits('onStyleAttrChange', params)
 }

--- a/core/core-frontend/src/custom-component/de-frame/FrameLinks.vue
+++ b/core/core-frontend/src/custom-component/de-frame/FrameLinks.vue
@ -76,7 +76,7 @@ const init = () => {
 const onBlur = () => {
  state.linkInfoTemp.src = checkAddHttp(state.linkInfoTemp.src)
  curComponent.value.frameLinks.src = state.linkInfoTemp.src
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('frame-onBlur')
  useEmitt().emitter.emit('frameLinksChange-' + curComponent.value.id)
 }
 init()
--- a/core/core-frontend/src/custom-component/de-stream-media/StreamMediaLinks.vue
+++ b/core/core-frontend/src/custom-component/de-stream-media/StreamMediaLinks.vue
@ -106,7 +106,7 @@ const onChange = () => {
  } else {
    curActiveTabInner.value.streamMediaLinks = state.streamMediaInfoTemp
  }
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('stream-onChange')
  useEmitt().emitter.emit('streamMediaLinksChange-' + curComponent.value.id)
 }
 init()
--- a/core/core-frontend/src/custom-component/de-tabs/Component.vue
+++ b/core/core-frontend/src/custom-component/de-tabs/Component.vue
@ -266,7 +266,7 @@ const curPreviewGap = computed(() =>
 function sureCurTitle() {
  state.curItem.title = state.textarea
  state.dialogVisible = false
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('sureCurTitle')
 }

 function addTab() {
@ -279,7 +279,7 @@ function addTab() {
  }
  element.value.propValue.push(newTab)
  editableTabsValue.value = newTab.name
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('addTab')
 }

 function deleteCur(param) {
@ -321,11 +321,11 @@ function handleCommand(command) {
      break
    case 'deleteCur':
      deleteCur(command.param)
-      snapshotStore.recordSnapshotCache()
+      snapshotStore.recordSnapshotCache('deleteCur')
      break
    case 'copyCur':
      copyCur(command.param)
-      snapshotStore.recordSnapshotCache()
+      snapshotStore.recordSnapshotCache('copyCur')
      break
  }
 }
--- a/core/core-frontend/src/custom-component/de-tabs/CustomTabsSort.vue
+++ b/core/core-frontend/src/custom-component/de-tabs/CustomTabsSort.vue
@ -59,7 +59,7 @@ const closeDialog = () => {
 }
 const save = () => {
  config.value.propValue = deepCopy(sortList.value)
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('tab-sort-save')
  eventBus.emit('onTabSortChange-' + config.value.id)
  closeDialog()
 }
--- a/core/core-frontend/src/custom-component/de-video/VideoLinks.vue
+++ b/core/core-frontend/src/custom-component/de-video/VideoLinks.vue
@ -93,13 +93,13 @@ const onChange = () => {
  }

  curComponent.value.videoLinks = state.linkInfoTemp
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('video-onChange')
  useEmitt().emitter.emit('videoLinksChange-' + curComponent.value.id)
 }
 const onBlur = () => {
  state.linkInfoTemp.src = checkAddHttp(state.linkInfoTemp.src)
  curComponent.value.frameLinks.src = state.linkInfoTemp.src
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('video-onBlur')
  useEmitt().emitter.emit('frameLinksChange-' + curComponent.value.id)
 }
 init()
--- a/core/core-frontend/src/custom-component/picture-group/PictureGroupUploadAttr.vue
+++ b/core/core-frontend/src/custom-component/picture-group/PictureGroupUploadAttr.vue
@ -59,12 +59,12 @@ const handleRemove = (file, fileListArray) => {
    element.value.propValue['urlList'].splice(index, 1)
    useEmitt().emitter.emit('calcData-' + element.value.id)
  }
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('picture-handleRemove')
 }
 async function upload(file) {
  if (element.value.propValue.urlList.length < 10) {
    uploadFileResult(file.file, fileUrl => {
-      snapshotStore.recordSnapshotCache()
+      snapshotStore.recordSnapshotCache('pic-upload')
      element.value.propValue.urlList.unshift({ name: file.file.name, url: fileUrl })
      useEmitt().emitter.emit('calcData-' + element.value.id)
    })
@ -72,7 +72,7 @@ async function upload(file) {
 }

 const onStyleChange = () => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('pic-onStyleChange')
 }

 const goFile = () => {
--- a/core/core-frontend/src/custom-component/picture/Attr.vue
+++ b/core/core-frontend/src/custom-component/picture/Attr.vue
@ -42,17 +42,17 @@ const handleRemove = (_, fileList) => {
  uploadDisabled.value = false
  curComponent.value.propValue.url = null
  fileList.value = []
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('handleRemove')
 }
 async function upload(file) {
  uploadFileResult(file.file, fileUrl => {
-    snapshotStore.recordSnapshotCache()
+    snapshotStore.recordSnapshotCache('pic-upload')
    curComponent.value.propValue.url = fileUrl
  })
 }

 const onStyleChange = () => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('pic-onStyleChange')
 }

 const goFile = () => {
@ -66,7 +66,7 @@ const reUpload = e => {
    return
  }
  uploadFileResult(file, fileUrl => {
-    snapshotStore.recordSnapshotCache()
+    snapshotStore.recordSnapshotCache('uploadFileResult')
    curComponent.value.propValue.url = fileUrl
    fileList.value = [{ url: imgUrlTrans(curComponent.value.propValue.url) }]
  })
--- a/core/core-frontend/src/custom-component/v-query/Component.vue
+++ b/core/core-frontend/src/custom-component/v-query/Component.vue
@ -202,7 +202,7 @@ const setCustomStyle = val => {
  customStyle.labelColorBtn = labelColorBtn || '#ffffff'
  customStyle.labelShow = labelShow ?? true
  customStyle.btnColor = btnColor || '#3370ff'
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('setCustomStyle')
 }

 watch(
@ -436,7 +436,7 @@ const drop = e => {
    })
  })
  element.value.propValue = [...list.value]
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('drop')
 }

 const editeQueryConfig = (queryId: string) => {
@ -458,7 +458,7 @@ const addCriteriaConfigOut = () => {
 const delQueryConfig = index => {
  list.value.splice(index, 1)
  element.value.propValue = [...list.value]
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('delQueryConfig')
 }

 const resetData = () => {
--- a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
@ -1506,7 +1506,7 @@ const confirmClick = () => {
    queryElement.value.cascade = cloneDeep(cascadeArr)
    cascadeArr = []
    queryElement.value.propValue = cloneDeep(conditions.value)
-    snapshotStore.recordSnapshotCache()
+    snapshotStore.recordSnapshotCache('confirmClick')
    nextTick(() => {
      emits('queryData')
    })
--- a/core/core-frontend/src/store/modules/data-visualization/copy.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/copy.ts
@ -134,7 +134,7 @@ export const copyStore = defineStore('copy', {
          i++
        }
      }, moveTime)
-      snapshotStore.recordSnapshotCache()
+      snapshotStore.recordSnapshotCache('paste')
    },
    cut(curComponentData = componentData.value) {
      if (curComponent.value && curComponent.value.component !== 'GroupArea') {
@ -155,7 +155,7 @@ export const copyStore = defineStore('copy', {
          components: []
        })
      }
-      snapshotStore.recordSnapshotCache()
+      snapshotStore.recordSnapshotCache('cut')
      this.isCut = true
    },

--- a/core/core-frontend/src/store/modules/data-visualization/snapshot.ts
+++ b/core/core-frontend/src/store/modules/data-visualization/snapshot.ts
@ -36,6 +36,7 @@ let defaultCanvasInfo = {
 export const snapshotStore = defineStore('snapshot', {
  state: () => {
    return {
+      snapshotDisableTime: 1, // 镜像禁用时间，解决redo undo 造成的样式变更
      styleChangeTimes: -1, // 组件样式修改次数
      cacheStyleChangeTimes: 0, // 仪表板未缓存的组件样式修改次数
      snapshotCacheTimes: 0, // 当前未计入镜像中的修改变动次数, 此为定时缓存，缓存间隔时间5秒一次 针对类型样式这种变动不大的修改
@ -99,6 +100,7 @@ export const snapshotStore = defineStore('snapshot', {
        // undo 是当前没有记录
        this.snapshotPublish(componentSnapshot)
        this.styleChangeTimes++
+        this.snapshotDisableTime = Date.now() + 3000
      }
    },

@ -109,7 +111,7 @@ export const snapshotStore = defineStore('snapshot', {
        snapshotInfo.dvInfo.id = dvInfo.value.id
        snapshotInfo.dvInfo.pid = dvInfo.value.pid
        this.snapshotPublish(snapshotInfo)
-        this.styleChangeTimes++
+        this.snapshotDisableTime = Date.now() + 3000
      }
    },
    snapshotPublish(snapshotInfo) {
@ -180,9 +182,9 @@ export const snapshotStore = defineStore('snapshot', {
      this.recordSnapshot()
    },

-    recordSnapshot() {
+    recordSnapshot(type) {
      // 移动端设计时暂不保存镜像
-      if (dataPrepareState.value && !mobileInPc.value) {
+      if (dataPrepareState.value && !mobileInPc.value && Date.now() > this.snapshotDisableTime) {
        this.styleChangeTimes = ++this.styleChangeTimes
        const snapshotComponentData = deepCopy(componentData.value)
        dvMainStore.removeGroupArea(snapshotComponentData)
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyle.vue
@ -205,12 +205,12 @@ const onBasicStyleChange = (val, prop) => {
 }

 const onBackgroundChange = (val, prop) => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('onBackgroundChange')
  state.initReady && emit('onBackgroundChange', val, prop)
 }

 const onActiveChange = val => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('onActiveChange')
  state.initReady &&
    emit('onStyleAttrChange', {
      custom: 'style',
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue
@ -113,7 +113,7 @@ const onLegendChange = (val, prop) => {

 const onBackgroundChange = val => {
  dvMainStore.setBatchChangeBackground(val)
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('onBackgroundChange')
 }
 const onBasicStyleChange = (val, prop) => {
  //基础样式差异化处理
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
@ -163,7 +163,7 @@ const goFile = () => {
 }

 const onBackgroundChange = () => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('onBackgroundChange')
  commonBackgroundPop.value.outerImage = state.commonBackground['outerImage']
 }
 onMounted(() => {
@ -196,7 +196,7 @@ const handleCurrentPlaceholderCustomChange = () => {
      value: { type: 'renderChart', component: JSON.parse(JSON.stringify(chart.value)) }
    })
  } else {
-    snapshotStore.recordSnapshotCache()
+    snapshotStore.recordSnapshotCache('handleCurrentPlaceholderCustomChange')
  }
 }

--- a/core/core-frontend/src/views/chart/components/editor/filter/FilterTree.vue
+++ b/core/core-frontend/src/views/chart/components/editor/filter/FilterTree.vue
@ -40,7 +40,7 @@ const changeFilter = val => {
  }
  dfsTreeDelete(items)
  emits('filter-data', { logic, items })
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('changeFilter')
  dialogVisible.value = false
 }

--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@ -127,7 +127,7 @@ const calcEdit = ref()
 const route = useRoute()

 const onComponentNameChange = () => {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('onComponentNameChange')
 }

 const closeEditComponentName = () => {
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@ -903,7 +903,7 @@ const vClickOutside = {
 }

 function onTitleChange() {
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('onTitleChange')
 }

 const toolTip = computed(() => {
--- a/core/core-frontend/src/views/common/MultiplexingCanvas.vue
+++ b/core/core-frontend/src/views/common/MultiplexingCanvas.vue
@ -93,7 +93,7 @@ const saveMultiplexing = () => {
  const canvasViewInfoPreview = previewStateInfo.canvasViewInfoPreview
  nextTick(() => {
    copyStore.copyMultiplexingComponents(canvasViewInfoPreview)
-    snapshotStore.recordSnapshotCache()
+    snapshotStore.recordSnapshotCache('saveMultiplexing')
  })
 }

--- a/core/core-frontend/src/views/dashboard/MobileBackgroundSelector.vue
+++ b/core/core-frontend/src/views/dashboard/MobileBackgroundSelector.vue
@ -211,7 +211,7 @@ const commitStyle = () => {
    type: 'setCanvasStyle',
    value: JSON.parse(JSON.stringify(unref(canvasStyleDataCopy)))
  })
-  snapshotStore.recordSnapshotCache()
+  snapshotStore.recordSnapshotCache('commitStyle')
 }

 onMounted(() => {
--- a/core/core-frontend/src/views/dashboard/index.vue
+++ b/core/core-frontend/src/views/dashboard/index.vue
@ -142,7 +142,7 @@ const doUseCache = flag => {
    snapshotStore.snapshotPublish(canvasCacheSeries)
    dataInitState.value = true
    setTimeout(() => {
-      snapshotStore.recordSnapshotCache()
+      snapshotStore.recordSnapshotCache('doUseCache')
      // 使用缓存时，初始化的保存按钮为激活状态
      snapshotStore.recordSnapshotCache('renderChart')
    }, 1500)
@ -162,7 +162,7 @@ const initLocalCanvasData = () => {
      dvInfo.value.optType = 'copy'
      dvInfo.value.pid = sourcePid
      setTimeout(() => {
-        snapshotStore.recordSnapshotCache()
+        snapshotStore.recordSnapshotCache('initLocalCanvasData')
      }, 1500)
    }
    onInitReady({ resourceId: resourceId })
@ -236,7 +236,7 @@ onMounted(async () => {
        dvMainStore.setCanvasViewInfo(deTemplateData['canvasViewInfo'])
        dvMainStore.setAppDataInfo(deTemplateData['appData'])
        setTimeout(() => {
-          snapshotStore.recordSnapshotCache()
+          snapshotStore.recordSnapshotCache('template')
        }, 1500)
        if (dvMainStore.getAppDataInfo()) {
          eventBus.emit('save')
--- a/core/core-frontend/src/views/data-visualization/index.vue
+++ b/core/core-frontend/src/views/data-visualization/index.vue
@ -421,7 +421,7 @@ onMounted(async () => {
        dvMainStore.setCanvasViewInfo(deTemplateData['canvasViewInfo'])
        dvMainStore.setAppDataInfo(deTemplateData['appData'])
        setTimeout(() => {
-          snapshotStore.recordSnapshotCache()
+          snapshotStore.recordSnapshotCache('template')
        }, 1500)
      }
      if (dvMainStore.getAppDataInfo()) {