diff --git a/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue b/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
index 940befd..6d00e65 100644
--- a/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
+++ b/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
@@ -9,7 +9,6 @@ import EmptyBackground from '@/components/empty-background/src/EmptyBackground.v
 import ArrowSide from '@/views/common/DeResourceArrow.vue'
 import { initCanvasData, initCanvasDataPrepare, onInitReady } from '@/utils/canvasUtils'
 import { useAppStoreWithOut } from '@/store/modules/app'
-import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import { useMoveLine } from '@/hooks/web/useMoveLine'
 import { Icon } from '@/components/icon-custom'
 import { download2AppTemplate, downloadCanvas2 } from '@/utils/imgUtils'
@@ -19,6 +18,7 @@ import AppExportForm from '@/components/de-app/AppExportForm.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import { useI18n } from '@/hooks/web/useI18n'
+import CanvasOptBar from '@/components/visualization/CanvasOptBar.vue'
 const userStore = useUserStoreWithOut()
 
 const userName = computed(() => userStore.getName)
@@ -28,7 +28,6 @@ const dvMainStore = dvMainStoreWithOut()
 const previewCanvasContainer = ref(null)
 const dashboardPreview = ref(null)
 const slideShow = ref(true)
-const permissionStore = usePermissionStoreWithOut()
 const appStore = useAppStoreWithOut()
 const dataInitState = ref(true)
 const downloadStatus = ref(false)
@@ -37,7 +36,11 @@ const state = reactive({
   canvasStylePreview: null,
   canvasViewInfoPreview: null,
   dvInfo: null,
-  curPreviewGap: 0
+  curPreviewGap: 0,
+  showOffset: {
+    top: 110,
+    left: 280
+  }
 })
 
 const { fullscreenFlag, canvasViewDataInfo } = storeToRefs(dvMainStore)
@@ -55,10 +58,15 @@ const props = defineProps({
     required: false,
     type: Boolean,
     default: false
+  },
+  resourceTable: {
+    required: false,
+    type: String,
+    default: 'core'
   }
 })
 
-const { showPosition } = toRefs(props)
+const { showPosition, resourceTable } = toRefs(props)
 
 const resourceTreeRef = ref()
 
@@ -93,7 +101,7 @@ const loadCanvasData = (dvId, weight?) => {
   dataInitState.value = false
   initMethod(
     dvId,
-    'dashboard',
+    { busiFlag: 'dashboard', resourceTable: 'core' },
     function ({
       canvasDataResult,
       canvasStyleResult,
@@ -115,13 +123,20 @@ const loadCanvasData = (dvId, weight?) => {
     }
   )
 }
-
+// 地图类图表，需要预先准备图片
+const mapChartTypes = ['bubble-map', 'flow-map', 'heat-map', 'map', 'symbolic-map']
 const downloadH2 = type => {
   downloadStatus.value = true
+  const mapElementIds =
+    state.canvasDataPreview
+      ?.filter(ele => mapChartTypes.includes(ele.innerType))
+      .map(ele => ele.id) || []
+  mapElementIds.forEach(id => useEmitt().emitter.emit('l7-prepare-picture', id))
   nextTick(() => {
     const vueDom = previewCanvasContainer.value.querySelector('.canvas-container')
     downloadCanvas2(type, vueDom, state.dvInfo.name, () => {
       downloadStatus.value = false
+      mapElementIds.forEach(id => useEmitt().emitter.emit('l7-unprepare-picture', id))
     })
   })
 }
@@ -214,13 +229,18 @@ const downLoadApp = appAttachInfo => {
   fileDownload('app', appAttachInfo)
 }
 
+const freezeStyle = computed(() => [
+  { '--top-show-offset': state.showOffset.top },
+  { '--left-show-offset': state.showOffset.left }
+])
+
 defineExpose({
   getPreviewStateInfo
 })
 </script>
 
 <template>
-  <div class="dv-preview dv-teleport-query">
+  <div class="dv-preview dv-teleport-query" :style="freezeStyle">
     <ArrowSide
       v-if="!noClose"
       :style="{ left: (sideTreeStatus ? width - 12 : 0) + 'px' }"
@@ -246,12 +266,13 @@ defineExpose({
         v-show="slideShow"
         :cur-canvas-type="'dashboard'"
         :show-position="showPosition"
+        :resource-table="resourceTable"
         @node-click="resourceNodeClick"
       />
     </el-aside>
     <el-container
       class="preview-area"
-      :class="{ 'no-data': !hasTreeData }"
+      :class="{ 'no-data': !state.dvInfo?.id }"
       v-loading="!dataInitState"
     >
       <div
@@ -276,6 +297,11 @@ defineExpose({
           id="de-preview-content"
           :class="{ 'de-screen-full': fullscreenFlag }"
         >
+          <canvas-opt-bar
+            canvas-id="canvas-main"
+            :canvas-style-data="state.canvasStylePreview || {}"
+            :component-data="state.canvasDataPreview || []"
+          ></canvas-opt-bar>
           <de-preview
             ref="dashboardPreview"
             v-if="state.canvasStylePreview && dataInitState"
@@ -286,6 +312,7 @@ defineExpose({
             :canvas-view-info="state.canvasViewInfoPreview"
             :show-position="showPosition"
             :download-status="downloadStatus"
+            :show-linkage-button="false"
           ></de-preview>
         </div>
       </template>
@@ -347,6 +374,7 @@ defineExpose({
     }
 
     .content {
+      position: relative;
       display: flex;
       width: 100%;
       height: 100%;
diff --git a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
index 56d422c..ec6791b 100644
--- a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
+++ b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
@@ -215,7 +215,7 @@ const setMobileStyle = debounce(() => {
     transformOrigin: '0 0'
   }
 }, 100)
-const curComponentChangeHandle = info => {
+const curComponentChangeHandle = () => {
   // do change
 }
 onMounted(() => {
@@ -332,7 +332,7 @@ const save = () => {
             :canvas-view-info-mobile="canvasViewInfoMobile"
           ></component-style-editor>
         </div>
-        <div class="config-mobile-tab" v-show="activeCollapse === 'com'">
+        <div class="config-mobile-tab" v-if="activeCollapse === 'com'">
           <div
             :style="{ height: '196px', width: '196px' }"
             class="mobile-wrapper-inner-adaptor"
@@ -541,7 +541,7 @@ const save = () => {
     }
 
     :deep(.ed-tabs__item):not(.is-active) {
-      color: #A6A6A6;
+      color: #646a73;
     }
 
     .config-mobile-sidebar {
@@ -636,39 +636,4 @@ const save = () => {
     width: 90% !important;
   }
 }
-.ed-tabs__nav-wrap::after{
-  background-color: rgba(235, 235, 235, 0.15) !important;
-}
-.ed-checkbox__input.is-disabled .ed-checkbox__inner{
-  background-color: #373737;
-  border-color: #5f5f5f;
-}
-.ed-color-picker.is-custom.is-disabled .ed-color-picker__trigger{
-  border-color: #5f5f5f;
-}
-.mobile-background-selector .avatar-uploader .ed-upload--picture-card {
-  background: #373737 !important;
-  border: 1px dashed #373737 !important;
-}
-.mobile-background-selector .avatar-uploader .ed-upload--picture-card .ed-icon{
-  color: #ebebeb !important;
-}
-.ed-message-box{
-  background: #212121 ;
-}
-.ed-message-box__content{
-  color: #ffffff;
-}
-.ed-message-box__btns .ed-button--primary{
-  background: #0089ff;
-  border-color: #0089ff;
-}
-.ed-message-box__btns .ed-button.is-secondary{
-  color: #F2F4F5 !important;
-  background-color: #212121 !important;
-  border: 1px solid #434343 !important;
-}
-.custom-popover-light{
-  border: 1px solid#363636 !important;
-}
 </style>
diff --git a/core/core-frontend/src/views/dashboard/index.vue b/core/core-frontend/src/views/dashboard/index.vue
index d2e69ce..d7a0aa7 100644
--- a/core/core-frontend/src/views/dashboard/index.vue
+++ b/core/core-frontend/src/views/dashboard/index.vue
@@ -33,6 +33,7 @@ import { usePermissionStoreWithOut } from '@/store/modules/permission'
 import eventBus from '@/utils/eventBus'
 import { useI18n } from '@/hooks/web/useI18n'
 import DashboardHiddenComponent from '@/components/dashboard/DashboardHiddenComponent.vue'
+import { recoverToPublished } from '@/api/visualization/dataVisualization'
 const embeddedStore = useEmbedded()
 const { wsCache } = useCache()
 const canvasCacheOutRef = ref(null)
@@ -115,7 +116,7 @@ const checkPer = async resourceId => {
   if (!window.DataEaseBi || !resourceId) {
     return true
   }
-  const request = { busiFlag: 'dashboard' }
+  const request = { busiFlag: 'dashboard', resourceTable: 'core' }
   await interactiveStore.setInteractive(request)
   return check(wsCache.get('panel-weight'), resourceId, 4)
 }
@@ -162,21 +163,26 @@ const doUseCache = flag => {
   }
 }
 
-const initLocalCanvasData = () => {
+const initLocalCanvasData = callBack => {
   const { resourceId, opt, sourcePid } = state
-  const busiFlg = opt === 'copy' ? 'dashboard-copy' : 'dashboard'
-  initCanvasData(resourceId, busiFlg, function () {
-    dataInitState.value = true
-    if (dvInfo.value && opt === 'copy') {
-      dvInfo.value.dataState = 'prepare'
-      dvInfo.value.optType = 'copy'
-      dvInfo.value.pid = sourcePid
-      setTimeout(() => {
-        snapshotStore.recordSnapshotCache('initLocalCanvasData')
-      }, 1500)
+  const busiFlag = opt === 'copy' ? 'dashboard-copy' : 'dashboard'
+  initCanvasData(
+    resourceId,
+    { busiFlag, resourceTable: 'snapshot', source: 'main-edit' },
+    function () {
+      dataInitState.value = true
+      if (dvInfo.value && opt === 'copy') {
+        dvInfo.value.dataState = 'prepare'
+        dvInfo.value.optType = 'copy'
+        dvInfo.value.pid = sourcePid
+        setTimeout(() => {
+          snapshotStore.recordSnapshotCache('initLocalCanvasData')
+        }, 1500)
+      }
+      onInitReady({ resourceId: resourceId })
+      callBack && callBack()
     }
-    onInitReady({ resourceId: resourceId })
-  })
+  )
 }
 onMounted(async () => {
   dvMainStore.setCurComponent({ component: null, index: null })
@@ -216,7 +222,9 @@ onMounted(async () => {
     if (canvasCache) {
       canvasCacheOutRef.value?.dialogInit({ canvasType: 'dashboard', resourceId: resourceId })
     } else {
-      initLocalCanvasData()
+      initLocalCanvasData(() => {
+        // do init
+      })
     }
   } else if (opt && opt === 'create') {
     dataInitState.value = false
@@ -296,6 +304,23 @@ const cancelHidden = item => {
   }
 }
 
+const doRecoverToPublished = () => {
+  recoverToPublished({ id: dvInfo.value.id, type: 'dashboard', name: dvInfo.value.name }).then(
+    () => {
+      state.resourceId = dvInfo.value.id
+      state.sourcePid = dvInfo.value.pid
+      state.opt = null
+      initLocalCanvasData(() => {
+        nextTick(() => {
+          deCanvasRef.value.canvasInit(false)
+          dvMainStore.updateDvInfoCall(1)
+          useEmitt().emitter.emit('calcData-all')
+        })
+      })
+    }
+  )
+}
+
 onUnmounted(() => {
   window.removeEventListener('storage', eventCheck)
   window.removeEventListener('message', winMsgHandle)
@@ -309,7 +334,7 @@ onUnmounted(() => {
     v-loading="requestStore.loadingMap[permissionStore.currentPath]"
     v-if="loadFinish && !mobileConfig"
   >
-    <DbToolbar />
+    <DbToolbar @recoverToPublished="doRecoverToPublished" />
     <el-container
       class="dv-layout-container"
       :class="{ 'preview-content': editMode === 'preview' }"