diff --git a/core/core-frontend/src/components/column-list/src/ColumnList.vue b/core/core-frontend/src/components/column-list/src/ColumnList.vue
index 0c91e11..9b5175e 100644
--- a/core/core-frontend/src/components/column-list/src/ColumnList.vue
+++ b/core/core-frontend/src/components/column-list/src/ColumnList.vue
@@ -64,21 +64,23 @@ const handleCheckAllChange = (val: CheckboxValueType) => {
     </el-button>
     <template #dropdown>
       <el-dropdown-menu class="list-columns-select">
-        <p class="title">{{ $t('component.selectInfo') }}</p>
-        <el-checkbox
-          v-model="checkAll"
-          :indeterminate="isIndeterminate"
-          @change="handleCheckAllChange"
-          >{{ $t('component.allSelect') }}</el-checkbox
-        >
-        <el-checkbox-group
-          v-model="state.checkedColumnNames"
-          @change="handleCheckedColumnNamesChange"
-        >
-          <el-checkbox v-for="column in columnNames" :key="column.props" :label="column.props">{{
-            $t(column.label)
-          }}</el-checkbox>
-        </el-checkbox-group>
+        <el-main class="main-div-select">
+          <p class="title">{{ $t('component.selectInfo') }}</p>
+          <el-checkbox
+            v-model="checkAll"
+            :indeterminate="isIndeterminate"
+            @change="handleCheckAllChange"
+            >{{ $t('component.allSelect') }}</el-checkbox
+          >
+          <el-checkbox-group
+            v-model="state.checkedColumnNames"
+            @change="handleCheckedColumnNamesChange"
+          >
+            <el-checkbox v-for="column in columnNames" :key="column.props" :label="column.props">{{
+              $t(column.label)
+            }}</el-checkbox>
+          </el-checkbox-group>
+        </el-main>
       </el-dropdown-menu>
     </template>
   </el-dropdown>
@@ -102,5 +104,9 @@ const handleCheckAllChange = (val: CheckboxValueType) => {
   .ed-checkbox {
     width: 100%;
   }
+  .main-div-select {
+    max-height: 320px;
+    padding: 0;
+  }
 }
 </style>
diff --git a/core/core-frontend/src/components/cron/src/Cron.vue b/core/core-frontend/src/components/cron/src/Cron.vue
index 45b9738..1b6799b 100644
--- a/core/core-frontend/src/components/cron/src/Cron.vue
+++ b/core/core-frontend/src/components/cron/src/Cron.vue
@@ -120,13 +120,7 @@ const emits = defineEmits(['update:modelValue'])
       </el-tab-pane>
     </el-tabs>
     <!-- table -->
-    <el-table
-      header-cell-class-name="header-cell"
-      :data="tableData"
-      size="mini"
-      border
-      style="width: 100%"
-    >
+    <el-table :data="tableData" size="mini" border style="width: 100%">
       <el-table-column prop="sVal" :label="t('cron.second')" width="70" />
       <el-table-column prop="mVal" :label="t('cron.minute')" width="70" />
       <el-table-column prop="hVal" :label="t('cron.hour')" width="70" />
diff --git a/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue b/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
index 4149d9c..8d98c98 100644
--- a/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
+++ b/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
@@ -185,7 +185,6 @@ const saveSelfSubject = () => {
     top: 4px;
     right: 4px;
     font-size: 12px;
-    color: #0089ff;
   }
 }
 
diff --git a/core/core-frontend/src/components/dashboard/DbToolbar.vue b/core/core-frontend/src/components/dashboard/DbToolbar.vue
index 6ca483e..cce6856 100644
--- a/core/core-frontend/src/components/dashboard/DbToolbar.vue
+++ b/core/core-frontend/src/components/dashboard/DbToolbar.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import dvBatch from '@/assets/svg/dv-batch_white.svg'
-import dvDashboard from '@/assets/svg/dv-dashboard_white.svg'
+import dvBatch from '@/assets/svg/dv-batch.svg'
+import dvDashboard from '@/assets/svg/dv-dashboard.svg'
 import dvHidden from '@/assets/svg/dv-hidden.svg'
 import dvFilter from '@/assets/svg/dv-filter.svg'
 import dvMedia from '@/assets/svg/dv-media.svg'
@@ -16,11 +16,13 @@ import icon_undo_outlined from '@/assets/svg/icon_undo_outlined.svg'
 import icon_redo_outlined from '@/assets/svg/icon_redo_outlined.svg'
 import icon_pc_fullscreen from '@/assets/svg/icon_pc_fullscreen.svg'
 import dvPreviewOuter from '@/assets/svg/dv-preview-outer.svg'
-import { ElMessage, ElMessageBox } from 'element-plus-secondary'
+import dvRecoverOutlined from '@/assets/svg/dv-recover_outlined.svg'
+import dvCancelPublish from '@/assets/svg/icon_undo_outlined.svg'
+import { ElIcon, ElMessage, ElMessageBox } from 'element-plus-secondary'
 import eventBus from '@/utils/eventBus'
 import { useEmbedded } from '@/store/modules/embedded'
 import { deepCopy } from '@/utils/utils'
-import { nextTick, reactive, ref, computed, toRefs, onBeforeUnmount, onMounted } from 'vue'
+import { nextTick, reactive, ref, computed, onBeforeUnmount, onMounted } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { useAppStoreWithOut } from '@/store/modules/app'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
@@ -37,7 +39,13 @@ import MultiplexingCanvas from '@/views/common/MultiplexingCanvas.vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { getPanelAllLinkageInfo, saveLinkage } from '@/api/visualization/linkage'
 import { queryVisualizationJumpInfo } from '@/api/visualization/linkJump'
-import { canvasSave, checkCanvasChangePre, initCanvasData } from '@/utils/canvasUtils'
+import {
+  canvasSave,
+  canvasSaveWithParams,
+  checkCanvasChangePre,
+  findAllViewsId,
+  initCanvasData
+} from '@/utils/canvasUtils'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { copyStoreWithOut } from '@/store/modules/data-visualization/copy'
 import TabsGroup from '@/custom-component/component-group/TabsGroup.vue'
@@ -49,8 +57,7 @@ import { useCache } from '@/hooks/web/useCache'
 import DeFullscreen from '@/components/visualization/common/DeFullscreen.vue'
 import DeAppApply from '@/views/common/DeAppApply.vue'
 import { useUserStoreWithOut } from '@/store/modules/user'
-import { useRoute } from 'vue-router'
-const route = useRoute()
+import { updatePublishStatus } from '@/api/visualization/dataVisualization'
 const { t } = useI18n()
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
@@ -67,8 +74,7 @@ const {
   batchOptStatus,
   targetLinkageInfo,
   curBatchOptComponents,
-  appData,
-  hiddenListStatus
+  appData
 } = storeToRefs(dvMainStore)
 const dvModel = 'dashboard'
 const multiplexingRef = ref(null)
@@ -86,16 +92,15 @@ const { wsCache } = useCache('localStorage')
 const userStore = useUserStoreWithOut()
 const isIframe = computed(() => appStore.getIsIframe)
 const desktop = wsCache.get('app.desktop')
+const emits = defineEmits(['recoverToPublished'])
 
-const props = defineProps({
+defineProps({
   createType: {
     type: String,
     default: 'create'
   }
 })
 
-const { createType } = toRefs(props)
-
 const editCanvasName = () => {
   nameEdit.value = true
   inputName.value = dvInfo.value.name
@@ -139,12 +144,12 @@ const previewInner = () => {
 }
 
 const previewOuter = () => {
-  if (!dvInfo.value.id) {
+  if (!dvInfo.value.id || dvInfo.value.dataState === 'prepare') {
     ElMessage.warning(t('components.current_page_first'))
     return
   }
   canvasSave(() => {
-    let url = '#/preview?dvId=' + dvInfo.value.id + '&ignoreParams=true'
+    let url = '#/preview?dvId=' + dvInfo.value.id + '&ignoreParams=true&editPreview=true'
     if (embeddedStore.baseUrl) {
       url = `${embeddedStore.baseUrl}${url}`.replaceAll('\/\/#', '\/#')
     }
@@ -177,11 +182,34 @@ const resourceOptFinish = param => {
     dvInfo.value.dataState = 'ready'
     dvInfo.value.pid = param.pid
     dvInfo.value.name = param.name
-    saveCanvasWithCheck()
+    saveCanvasWithCheck(param.withPublish, param.status)
   }
 }
 
-const saveCanvasWithCheck = () => {
+const recoverToPublished = () => {
+  emits('recoverToPublished')
+}
+
+const publishStatusChange = status => {
+  const targetViewIds = []
+  findAllViewsId(componentData.value, targetViewIds)
+  // do update
+  updatePublishStatus({
+    id: dvInfo.value.id,
+    name: dvInfo.value.name,
+    mobileLayout: dvInfo.value.mobileLayout,
+    activeViewIds: targetViewIds,
+    status,
+    type: 'dashboard'
+  }).then(() => {
+    dvMainStore.updateDvInfoCall(status)
+    status
+      ? ElMessage.success(t('visualization.published_success'))
+      : ElMessage.success(t('visualization.cancel_publish_tips'))
+  })
+}
+
+const saveCanvasWithCheck = (withPublish = false, status?) => {
   if (userStore.getOid && wsCache.get('user.oid') && userStore.getOid !== wsCache.get('user.oid')) {
     ElMessageBox.confirm(t('components.from_other_organizations'), {
       confirmButtonType: 'primary',
@@ -212,28 +240,27 @@ const saveCanvasWithCheck = () => {
       })
     } else {
       const params = { name: dvInfo.value.name, leaf: true, id: dvInfo.value.pid || '0' }
-      resourceGroupOpt.value.optInit('leaf', params, 'newLeaf', true)
+      resourceGroupOpt.value.optInit('leaf', params, 'newLeaf', true, { withPublish, status })
       return
     }
   }
   checkCanvasChangePre(() => {
-    saveResource()
+    saveResource({ withPublish, status })
   })
 }
 
-const saveResource = () => {
+const saveResource = (checkParams?) => {
   wsCache.delete('DE-DV-CATCH-' + dvInfo.value.id)
-  if (styleChangeTimes.value > 0) {
+  if (styleChangeTimes.value > 0 || checkParams.withPublish) {
     dvMainStore.matrixSizeAdaptor()
     queryList.value.forEach(ele => {
       useEmitt().emitter.emit(`updateQueryCriteria${ele.id}`)
     })
     try {
-      canvasSave(() => {
+      canvasSaveWithParams(checkParams, () => {
         snapshotStore.resetStyleChangeTimes()
-        ElMessage.success(t('common.save_success'))
         let url = window.location.href
-        url = url.replace(/\?opt=create/, `?resourceId=${dvInfo.value.id}`)
+        url = url.replace(/(#\/[^?]*)(?:\?[^#]*)?/, `$1?resourceId=${dvInfo.value.id}`)
         if (!embeddedStore.baseUrl) {
           window.history.replaceState(
             {
@@ -243,15 +270,23 @@ const saveResource = () => {
             url
           )
         }
-
         if (appData.value) {
-          initCanvasData(dvInfo.value.id, 'dashboard', () => {
-            useEmitt().emitter.emit('refresh-dataset-selector')
-            useEmitt().emitter.emit('calcData-all')
-            resourceAppOpt.value.close()
-            dvMainStore.setAppDataInfo(null)
-            snapshotStore.resetSnapshot()
-          })
+          initCanvasData(
+            dvInfo.value.id,
+            { busiFlag: 'dashboard', resourceTable: 'snapshot' },
+            () => {
+              useEmitt().emitter.emit('refresh-dataset-selector')
+              useEmitt().emitter.emit('calcData-all')
+              resourceAppOpt.value.close()
+              dvMainStore.setAppDataInfo(null)
+              snapshotStore.resetSnapshot()
+            }
+          )
+        }
+        if (checkParams.withPublish) {
+          publishStatusChange(checkParams.status)
+        } else {
+          ElMessage.success(t('commons.save_success'))
         }
       })
     } catch (e) {
@@ -408,7 +443,7 @@ const openOuterParamsSet = () => {
     ElMessage.warning(t('components.add_components_first'))
     return
   }
-  if (!dvInfo.value.id) {
+  if (!dvInfo.value.id || dvInfo.value.dataState === 'prepare') {
     ElMessage.warning(t('components.current_page_first'))
     return
   }
@@ -817,11 +852,10 @@ const initOpenHandler = newWindow => {
   height: @top-bar-height;
   white-space: nowrap;
   overflow-x: auto;
-  background: #252626;
+  background: #050e21;
   color: #ffffff;
   display: flex;
   transition: 0.5s;
-  box-shadow: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
   .back-icon {
     margin-left: 20px;
     margin-top: 22px;
diff --git 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
index a3e650f..78eb07b 100644
--- 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
@@ -70,12 +70,13 @@
         :title="t('visualization.table_color_matching')"
         name="table_color_matching"
         class="inner-collapse"
+        :effect="themes"
         :class="`inner-collapse_${themes}`"
       >
         <div style="padding: 0 8px 8px">
           <el-row :gutter="8">
             <el-col :span="12">
-              <el-form-item :label="t('chart.table_header_bg')" class="form-item">
+              <el-form-item :label="t('chart.table_header_row_bg')" class="form-item">
                 <el-color-picker
                   :trigger-width="colorPickerWidth"
                   v-model="colorForm['tableHeader']['tableHeaderBgColor']"
@@ -115,6 +116,34 @@
                 />
               </el-form-item>
             </el-col>
+            <el-col :span="12">
+              <el-form-item :label="t('chart.colBackgroundColor')" class="form-item">
+                <el-color-picker
+                  :trigger-width="colorPickerWidth"
+                  v-model="colorForm['tableHeader']['tableHeaderColBgColor']"
+                  size="small"
+                  :predefine="predefineColors"
+                  color-format="rgb"
+                  :effect="themes"
+                  is-custom
+                  @change="changeColorCase('tableHeaderColBgColor')"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item :label="t('chart.cornerBackgroundColor')" class="form-item">
+                <el-color-picker
+                  :trigger-width="colorPickerWidth"
+                  v-model="colorForm['tableHeader']['tableHeaderCornerBgColor']"
+                  size="small"
+                  :predefine="predefineColors"
+                  color-format="rgb"
+                  :effect="themes"
+                  is-custom
+                  @change="changeColorCase('tableHeaderCornerBgColor')"
+                />
+              </el-form-item>
+            </el-col>
             <el-col :span="12">
               <el-form-item :label="t('chart.table_item_font_color')" class="form-item">
                 <el-color-picker
@@ -128,8 +157,6 @@
                 />
               </el-form-item>
             </el-col>
-          </el-row>
-          <el-row :gutter="8">
             <el-col :span="12">
               <el-form-item :label="t('chart.table_border_color')" class="form-item">
                 <el-color-picker
@@ -425,7 +452,7 @@ span {
     max-width: 192px;
   }
   :deep(.custom-color-setting-btn) {
-    margin-top: 31px;
+    margin-top: 28px;
   }
 }
 
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue
index d6167be..fd034dd 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue
@@ -1,6 +1,6 @@
 <template>
-  <div style="width: 100%; padding-bottom: 8px">
-    <el-form label-position="top" style="width: 100%">
+  <div style="width: 100%">
+    <el-form label-position="top" size="small" style="width: 100%">
       <div style="width: 100%; padding: 16px 8px 0">
         <el-row :gutter="8">
           <el-col :span="12">
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
index 859a213..a1551bf 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/OverallSetting.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-form label-position="top">
+  <el-form size="small" label-position="top">
     <el-form-item
       class="form-item"
       :class="'form-item-' + themes"
@@ -38,17 +38,45 @@
         />
       </el-select>
     </el-form-item>
-    <el-form-item
-      v-if="dvInfo.type === 'dashboard'"
-      class="form-item"
-      :class="'form-item-' + themes"
-      :label="t('visualization.component_gap')"
-    >
-      <el-radio-group v-model="canvasStyleData.dashboard.gap" @change="themeChange">
-        <el-radio :effect="themes" label="yes">{{ t('visualization.gap') }}</el-radio>
-        <el-radio :effect="themes" label="no">{{ t('visualization.no_gap') }}</el-radio>
-      </el-radio-group>
-    </el-form-item>
+    <template v-if="dvInfo.type === 'dashboard'">
+      <el-form-item
+        class="form-item"
+        :class="'form-item-' + themes"
+        :label="t('visualization.component_gap')"
+      >
+        <el-radio-group v-model="canvasStyleData.dashboard.gap" @change="themeChange">
+          <el-radio :effect="themes" label="yes">{{ t('visualization.gap') }}</el-radio>
+          <el-radio :effect="themes" label="no">{{ t('visualization.no_gap') }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        v-if="canvasStyleData.dashboard.gap === 'yes'"
+        class="form-item"
+        :class="'form-item-' + themes"
+        :label="t('visualization.gap_size')"
+      >
+        <el-radio-group v-model="canvasStyleData.dashboard.gapMode" @change="onGapModeChange">
+          <el-radio :effect="themes" label="small">{{ t('visualization.small') }}</el-radio>
+          <el-radio :effect="themes" label="middle">{{ t('visualization.middle') }}</el-radio>
+          <el-radio :effect="themes" label="large">{{ t('visualization.large') }}</el-radio>
+          <el-radio :effect="themes" label="custom">{{ t('visualization.custom') }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        class="form-item"
+        :class="'form-item-' + themes"
+        v-show="canvasStyleData.dashboard.gapMode === 'custom'"
+      >
+        <el-input-number
+          v-model="canvasStyleData.dashboard.gapSize"
+          :effect="themes"
+          controls-position="right"
+          :min="0"
+          :max="10"
+          @change="themeChange"
+        />
+      </el-form-item>
+    </template>
     <el-form-item
       v-if="dvInfo.type === 'dashboard'"
       class="form-item"
@@ -83,14 +111,12 @@
         type="number"
         :min="1"
         :max="3600"
-        size="middle"
         :disabled="!canvasStyleData.refreshViewEnable"
         @change="onRefreshChange"
       >
         <template #append>
           <el-select
             v-model="canvasStyleData.refreshUnit"
-            size="middle"
             :effect="themes"
             :disabled="!canvasStyleData.refreshViewEnable"
             style="width: 90px"
@@ -133,14 +159,12 @@
         type="number"
         :min="1"
         :max="3600"
-        size="middle"
         :disabled="!canvasStyleData.refreshBrowserEnable"
         @change="onRefreshChange"
       >
         <template #append>
           <el-select
             v-model="canvasStyleData.refreshBrowserUnit"
-            size="middle"
             :effect="themes"
             :disabled="!canvasStyleData.refreshBrowserEnable"
             style="width: 90px"
@@ -203,7 +227,6 @@
         v-model="canvasStyleData.dashboard.resultCount"
         :effect="themes"
         controls-position="right"
-        size="middle"
         :min="1"
         :max="10000"
         @change="themeChange"
@@ -308,7 +331,7 @@ const fontFamily = CHART_FONT_FAMILY_ORIGIN.concat(
 )
 
 const toolTip = computed(() => {
-  return props.themes === 'dark' ? 'ndark' : 'dark'
+  return props.themes === 'dark' ? 'light' : 'dark'
 })
 
 const resourceType = computed(() =>
@@ -338,6 +361,22 @@ const onKeepSizeChange = () => {
   eventBus.emit('event-canvas-size-init')
   snapshotStore.recordSnapshotCache('renderChart')
 }
+const onGapModeChange = () => {
+  snapshotStore.recordSnapshotCache('renderChart')
+  switch (canvasStyleData.value.dashboard.gapMode) {
+    case 'small':
+      canvasStyleData.value.dashboard.gapSize = 3
+      break
+    case 'middle':
+      canvasStyleData.value.dashboard.gapSize = 5
+      break
+    case 'large':
+      canvasStyleData.value.dashboard.gapSize = 10
+      break
+    default:
+      break
+  }
+}
 
 const themeChange = (modifyName?) => {
   if (modifyName === 'themeColor') {
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue
index 6399cec..c08e899 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/SeniorStyleSetting.vue
@@ -1,17 +1,18 @@
 <template>
-  <div style="width: 100%; padding-bottom: 16px">
+  <div style="width: 100%; padding-bottom: 8px">
     <el-form label-position="top" style="width: 100%">
       <div style="width: 100%; padding: 16px 8px 0">
         <el-row :gutter="8">
           <el-col :span="12">
             <el-form-item
               :effect="themes"
-              class="form-item"
+              class="form-item h-auto"
               :class="'form-item-' + themes"
               :label="t('components.jump_icon_color')"
             >
               <el-color-picker
                 :effect="themes"
+                size="small"
                 v-model="seniorStyleSetting.linkageIconColor"
                 :trigger-width="100"
                 is-custom
@@ -23,7 +24,7 @@
           <el-col :span="12">
             <el-form-item
               :effect="themes"
-              class="form-item"
+              class="form-item h-auto"
               :class="'form-item-' + themes"
               :label="t('components.level_display_color')"
             >
@@ -31,6 +32,7 @@
                 v-model="seniorStyleSetting.drillLayerColor"
                 :effect="themes"
                 :trigger-width="100"
+                size="small"
                 is-custom
                 :predefine="state.predefineColors"
                 @change="themeChange"
@@ -58,7 +60,7 @@ const seniorStyleSetting = computed<any>(() => {
   return dvMainStore.canvasStyleData.component.seniorStyleSetting
 })
 
-const props = defineProps({
+defineProps({
   themes: {
     type: String,
     default: 'light'
@@ -109,7 +111,7 @@ onMounted(() => {
   }
 }
 .ed-form-item {
-  margin-bottom: 16px;
+  margin-bottom: 8px;
 
   :deep(.ed-form-item__label) {
     color: #646a73;
@@ -118,6 +120,12 @@ onMounted(() => {
     line-height: 20px;
   }
 }
+
+.h-auto {
+  :deep(.ed-form-item__label) {
+    height: auto;
+  }
+}
 .form-item-dark {
   :deep(.ed-form-item__label) {
     color: #6a6a6a;
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue
index dd26046..2400fc6 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue
@@ -11,6 +11,7 @@
             v-model="titleForm.color"
             class="color-picker-style"
             is-custom
+            size="small"
             :predefine="state.predefineColors"
             @change="changeTitleStyle('color')"
           />
diff --git a/core/core-frontend/src/components/dashboard/subject-setting/pre-subject/SubjectTemplateItem.vue b/core/core-frontend/src/components/dashboard/subject-setting/pre-subject/SubjectTemplateItem.vue
index 9916d3c..b144431 100644
--- a/core/core-frontend/src/components/dashboard/subject-setting/pre-subject/SubjectTemplateItem.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/pre-subject/SubjectTemplateItem.vue
@@ -159,7 +159,6 @@ onMounted(() => {
   //inset: 0 0 30px;
   box-sizing: border-box;
   background-size: contain;
-  // margin-bottom: 1px;
 }
 
 .vertical-layout > i {
diff --git a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
index 16ae4ef..009aea4 100644
--- a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
+++ b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
@@ -97,7 +97,7 @@ onMounted(() => {
               <el-form-item class="form-item form-item-dark" label="W">
                 <el-input-number
                   effect="dark"
-                  size="middle"
+                  size="small"
                   :min="600"
                   :max="50000"
                   v-model="canvasStyleData.width"
@@ -110,7 +110,7 @@ onMounted(() => {
               <el-form-item class="form-item form-item-dark" label="H">
                 <el-input-number
                   effect="dark"
-                  size="middle"
+                  size="small"
                   :min="600"
                   :max="50000"
                   v-model="canvasStyleData.height"
@@ -132,7 +132,7 @@ onMounted(() => {
                 </el-icon>
               </el-tooltip>
               <el-select
-                style="margin: 0 0 0 8px; flex: 1"
+                style="width: 139px; margin: 0 0 0 8px; flex: 1"
                 effect="dark"
                 v-model="canvasStyleData.screenAdaptor"
                 @change="onStyleChange"
diff --git a/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue b/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue
index 3025275..018f61b 100644
--- a/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue
+++ b/core/core-frontend/src/components/data-visualization/ComponentToolBar.vue
@@ -53,8 +53,6 @@ const reposition = () => {
 }
 
 // 记录瞬时wheel值 防止放大操作和滚动操作冲突
-let lastWheelNum = 0
-
 // 检查当前页面是否有弹框
 const checkDialog = () => {
   let haveDialog = false
@@ -145,7 +143,7 @@ onUnmounted(() => {
         v-model="scale"
         :min="10"
         :max="200"
-        tooltip-theme="ndark"
+        tooltip-theme="light"
         @change="handleScaleChange()"
         size="small"
       />
@@ -153,7 +151,7 @@ onUnmounted(() => {
         <Icon name="dv-max"><dvMax class="svg-icon"></dvMax></Icon
       ></el-icon>
       <el-divider direction="vertical" class="custom-divider_scale" />
-      <el-tooltip effect="dark" :content="t('visualization.locate_tips')" placement="top">
+      <el-tooltip effect="light" :content="t('visualization.locate_tips')" placement="top">
         <el-icon @click="reposition" class="hover-icon-custom" style="margin-right: 12px">
           <Icon name="dv-reposition"><dvReposition class="svg-icon"></dvReposition></Icon
         ></el-icon>
@@ -176,12 +174,16 @@ onUnmounted(() => {
   .scale-area {
     display: flex;
     align-items: center;
+
+    :deep(.ed-input-number__decrease) {
+      --ed-input-number-controls-height: 12px;
+    }
   }
 }
 :deep(.ed-input--dark .ed-input__wrapper),
 :deep(.ed-input-number--dark:not(.is-disabled) .ed-input-number__decrease:not(.is-disabled)),
 :deep(.ed-input-number--dark:not(.is-disabled) .ed-input-number__increase:not(.is-disabled)) {
-  background-color: #1a1a1a !important;
+  background-color: #1a1a1a;
 }
 
 .custom-divider_scale {
@@ -203,6 +205,8 @@ onUnmounted(() => {
       content: '%';
       right: 35px;
       top: 1px;
+      height: 24px;
+      line-height: 24px;
     }
   }
 }
@@ -231,9 +235,5 @@ onUnmounted(() => {
   &:active {
     background: rgba(31, 35, 41, 1);
   }
-  
-}
-:deep(.scale-input-number .ed-input__wrapper::after){
-  top: -1px;
 }
 </style>
diff --git a/core/core-frontend/src/components/data-visualization/DvToolbar.vue b/core/core-frontend/src/components/data-visualization/DvToolbar.vue
index c46871c..e56c0d9 100644
--- a/core/core-frontend/src/components/data-visualization/DvToolbar.vue
+++ b/core/core-frontend/src/components/data-visualization/DvToolbar.vue
@@ -1,33 +1,21 @@
 <script setup lang="ts">
 import dvFilter from '@/assets/svg/dv-filter.svg'
 import dvMaterial from '@/assets/svg/dv-material.svg'
-import dvMedia from '@/assets/newimg/camvassvg/dv-media.svg' // 媒体
-
-import dvMap from '@/assets/newimg/camvassvg/dv-map.svg' // 地图
-
-
+import dvMedia from '@/assets/svg/dv-media.svg'
 import dvMoreCom from '@/assets/svg/dv-more-com.svg'
 import dvTab from '@/assets/svg/dv-tab.svg'
-import dvText from '@/assets/newimg/camvassvg/dv-text.svg'  // 文本
-import dvView from '@/assets/newimg/camvassvg/dv-view.svg' // echarts图表
-
-import dvForm from '@/assets/newimg/camvassvg/dv-form.svg' // echarts图表
-
-import dvTemplate from '@/assets/newimg/camvassvg/dv-template.svg' // 模版
-
-
-
-
-// import dvView from '@/assets/newimg/dvCanvas/u4876.png'
-
+import dvText from '@/assets/svg/dv-text.svg'
+import dvView from '@/assets/svg/dv-view.svg'
 import icon_params_setting from '@/assets/svg/icon_params_setting.svg'
 import icon_copy_filled from '@/assets/svg/icon_copy_filled.svg'
 import icon_left_outlined from '@/assets/svg/icon_left_outlined.svg'
-// import icon_undo_outlined from '@/assets/svg/icon_undo_outlined.svg'
-// import icon_redo_outlined from '@/assets/svg/icon_redo_outlined.svg'
-import { ElMessage, ElMessageBox } from 'element-plus-secondary'
+import icon_undo_outlined from '@/assets/svg/icon_undo_outlined.svg'
+import icon_redo_outlined from '@/assets/svg/icon_redo_outlined.svg'
+import dvRecoverOutlined from '@/assets/svg/dv-recover_outlined.svg'
+import dvCancelPublish from '@/assets/svg/icon_undo_outlined.svg'
+import { ElIcon, ElMessage, ElMessageBox } from 'element-plus-secondary'
 import eventBus from '@/utils/eventBus'
-import { ref, nextTick, computed, toRefs, onBeforeUnmount, onMounted } from 'vue'
+import { ref, nextTick, computed, onBeforeUnmount, onMounted } from 'vue'
 import { useEmbedded } from '@/store/modules/embedded'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
@@ -40,7 +28,13 @@ import MediaGroup from '@/custom-component/component-group/MediaGroup.vue'
 import TextGroup from '@/custom-component/component-group/TextGroup.vue'
 import CommonGroup from '@/custom-component/component-group/CommonGroup.vue'
 import DeResourceGroupOpt from '@/views/common/DeResourceGroupOpt.vue'
-import { canvasSave, checkCanvasChangePre, initCanvasData } from '@/utils/canvasUtils'
+import {
+  canvasSave,
+  canvasSaveWithParams,
+  checkCanvasChangePre,
+  findAllViewsId,
+  initCanvasData
+} from '@/utils/canvasUtils'
 import { changeSizeWithScale } from '@/utils/changeComponentsSizeWithScale'
 import MoreComGroup from '@/custom-component/component-group/MoreComGroup.vue'
 import { XpackComponent } from '@/components/plugin'
@@ -56,6 +50,8 @@ import { useEmitt } from '@/hooks/web/useEmitt'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import TabsGroup from '@/custom-component/component-group/TabsGroup.vue'
 import { useI18n } from '@/hooks/web/useI18n'
+import { updatePublishStatus } from '@/api/visualization/dataVisualization'
+
 let nameEdit = ref(false)
 let inputName = ref('')
 let nameInput = ref(null)
@@ -73,19 +69,15 @@ const dvModel = 'dataV'
 const outerParamsSetRef = ref(null)
 const fullScreeRef = ref(null)
 const userStore = useUserStoreWithOut()
-import { useRoute } from 'vue-router'
-const route = useRoute()
 const { t } = useI18n()
+const emits = defineEmits(['recoverToPublished'])
 
-const props = defineProps({
+defineProps({
   createType: {
     type: String,
     default: 'create'
   }
 })
-
-const { createType } = toRefs(props)
-
 const closeEditCanvasName = () => {
   nameEdit.value = false
   if (!inputName.value || !inputName.value.trim()) {
@@ -103,6 +95,10 @@ const closeEditCanvasName = () => {
   inputName.value = ''
 }
 
+const recoverToPublished = () => {
+  emits('recoverToPublished')
+}
+
 const undo = () => {
   snapshotStore.undo()
 }
@@ -131,11 +127,11 @@ const resourceOptFinish = param => {
     dvInfo.value.dataState = 'ready'
     dvInfo.value.pid = param.pid
     dvInfo.value.name = param.name
-    saveCanvasWithCheck()
+    saveCanvasWithCheck(param.withPublish, param.status)
   }
 }
 
-const saveCanvasWithCheck = () => {
+const saveCanvasWithCheck = (withPublish = false, status?) => {
   if (userStore.getOid && wsCache.get('user.oid') && userStore.getOid !== wsCache.get('user.oid')) {
     ElMessageBox.confirm('已切换至新组织，无权保存其他组织的资源', {
       confirmButtonType: 'primary',
@@ -165,26 +161,29 @@ const saveCanvasWithCheck = () => {
         resourceAppOpt.value.init(params)
       })
     } else {
-      const params = { name: dvInfo.value.name, leaf: true, id: dvInfo.value.pid || '0' }
-      resourceGroupOpt.value.optInit('leaf', params, 'newLeaf', true)
+      const params = {
+        name: dvInfo.value.name,
+        leaf: true,
+        id: dvInfo.value.pid || '0'
+      }
+      resourceGroupOpt.value.optInit('leaf', params, 'newLeaf', true, { withPublish, status })
     }
     return
   }
   checkCanvasChangePre(() => {
-    saveResource()
+    saveResource({ withPublish, status })
   })
 }
 
-const saveResource = () => {
-  if (styleChangeTimes.value > 0) {
+const saveResource = (checkParams?) => {
+  if (styleChangeTimes.value > 0 || checkParams.withPublish) {
     eventBus.emit('hideArea-canvas-main')
     nextTick(() => {
-      canvasSave(() => {
+      canvasSaveWithParams(checkParams, () => {
         snapshotStore.resetStyleChangeTimes()
         wsCache.delete('DE-DV-CATCH-' + dvInfo.value.id)
-        ElMessage.success(t('commons.save_success'))
         let url = window.location.href
-        url = url.replace(/\?opt=create/, `?dvId=${dvInfo.value.id}`)
+        url = url.replace(/(#\/[^?]*)(?:\?[^#]*)?/, `$1?dvId=${dvInfo.value.id}`)
         if (!embeddedStore.baseUrl) {
           window.history.replaceState(
             {
@@ -195,7 +194,7 @@ const saveResource = () => {
           )
         }
         if (appData.value) {
-          initCanvasData(dvInfo.value.id, 'dataV', () => {
+          initCanvasData(dvInfo.value.id, { busiFlag: 'dataV', resourceTable: 'snapshot' }, () => {
             useEmitt().emitter.emit('refresh-dataset-selector')
             resourceAppOpt.value.close()
             dvMainStore.setAppDataInfo(null)
@@ -203,6 +202,11 @@ const saveResource = () => {
             snapshotStore.resetSnapshot()
           })
         }
+        if (checkParams.withPublish) {
+          publishStatusChange(checkParams.status)
+        } else {
+          ElMessage.success(t('commons.save_success'))
+        }
       })
     })
   }
@@ -223,13 +227,10 @@ const editCanvasName = () => {
 }
 
 const backToMain = () => {
-  let url = '#/module'
-  const appId:any = route.query.appId
-  if (appId) {
-    url = url + '?id=' + appId
+  let url = '#/screen/index'
+  if (dvInfo.value.id) {
+    url = url + '?dvId=' + dvInfo.value.id
   }
-
-
   if (styleChangeTimes.value > 0) {
     ElMessageBox.confirm(t('visualization.change_save_tips'), {
       confirmButtonType: 'primary',
@@ -283,7 +284,6 @@ const getFullScale = () => {
   return (curWidth * 100) / canvasStyleData.value.width
 }
 const appStore = useAppStoreWithOut()
-const isDataEaseBi = computed(() => appStore.getIsDataEaseBi)
 const multiplexingRef = ref(null)
 
 onMounted(() => {
@@ -304,7 +304,7 @@ const openOuterParamsSet = () => {
     ElMessage.warning(t('components.add_components_first'))
     return
   }
-  if (!dvInfo.value.id) {
+  if (!dvInfo.value.id || dvInfo.value.dataState === 'prepare') {
     ElMessage.warning(t('components.current_page_first'))
     return
   }
@@ -318,6 +318,25 @@ const multiplexingCanvasOpen = () => {
   multiplexingRef.value.dialogInit('dataV')
 }
 
+const publishStatusChange = status => {
+  const targetViewIds = []
+  findAllViewsId(componentData.value, targetViewIds)
+  // do update
+  updatePublishStatus({
+    id: dvInfo.value.id,
+    name: dvInfo.value.name,
+    mobileLayout: dvInfo.value.mobileLayout,
+    status,
+    activeViewIds: targetViewIds,
+    type: 'dataV'
+  }).then(() => {
+    dvMainStore.updateDvInfoCall(status)
+    status
+      ? ElMessage.success(t('visualization.published_success'))
+      : ElMessage.success(t('visualization.cancel_publish_tips'))
+  })
+}
+
 const isIframe = computed(() => appStore.getIsIframe)
 const fullScreenPreview = () => {
   dvMainStore.canvasStateChange({ key: 'curPointArea', value: 'base' })
@@ -338,25 +357,27 @@ const fullScreenPreview = () => {
       </template>
       <template v-else>
         <el-icon class="custom-el-icon back-icon" @click="backToMain()">
-          <Icon name="icon_left_outlined"
-            ><icon_left_outlined class="svg-icon toolbar-icon"
-          /></Icon>
+          <Icon name="icon_left_outlined">
+            <icon_left_outlined class="svg-icon toolbar-icon" />
+          </Icon>
         </el-icon>
         <div class="left-area">
           <span id="dv-canvas-name" class="name-area" @dblclick="editCanvasName">
             {{ dvInfo.name }}
           </span>
-          <!-- <div class="opt-area">
-            <el-tooltip effect="ndark" :content="$t('visualization.undo')" placement="bottom">
+          <div class="opt-area">
+            <el-tooltip effect="light" :content="$t('visualization.undo')" placement="bottom">
               <el-icon
                 class="toolbar-hover-icon"
                 :class="{ 'toolbar-icon-disabled': snapshotIndex < 1 }"
                 @click="undo()"
               >
-                <Icon name="icon_undo_outlined"><icon_undo_outlined class="svg-icon" /></Icon>
+                <Icon name="icon_undo_outlined">
+                  <icon_undo_outlined class="svg-icon" />
+                </Icon>
               </el-icon>
             </el-tooltip>
-            <el-tooltip effect="ndark" :content="$t('commons.reduction')" placement="bottom">
+            <el-tooltip effect="light" :content="$t('commons.reduction')" placement="bottom">
               <el-icon
                 class="toolbar-hover-icon opt-icon-redo"
                 :class="{
@@ -364,25 +385,16 @@ const fullScreenPreview = () => {
                 }"
                 @click="redo()"
               >
-                <Icon name="icon_redo_outlined"><icon_redo_outlined class="svg-icon" /></Icon>
+                <Icon name="icon_redo_outlined">
+                  <icon_redo_outlined class="svg-icon" />
+                </Icon>
               </el-icon>
             </el-tooltip>
-          </div> -->
+          </div>
         </div>
         <div class="middle-area">
-          <div class="undo-redo" @click="undo()">
-            <img src="@/assets/newimg/dvCanvas/u4860.png" alt="" srcset="">
-            <div class="undo-redo-text">撤销</div>
-          </div>
-          <div class="undo-redo" @click="redo()">
-            <img src="@/assets/newimg/dvCanvas/u4867.png" alt="" srcset="">
-            <div class="undo-redo-text">重做</div>
-          </div>
-          <div class="tabline"></div>
-
-          
           <component-group
-            
+            show-split-line
             is-label
             :base-width="410"
             :icon-name="dvView"
@@ -390,35 +402,9 @@ const fullScreenPreview = () => {
           >
             <user-view-group></user-view-group>
           </component-group>
-
-          <component-group
-            is-label
-            placement="bottom"
-            :base-width="328"
-            :icon-name="dvMedia"
-            :title="t('visualization.media')"
-          >
-            <media-group></media-group>
-          </component-group>
-
-
-          <component-group
-            is-label
-            placement="bottom"
-            :base-width="328"
-            :icon-name="dvMap"
-            :title="'地图'"
-          >
-            <media-group></media-group>
-          </component-group>
-
-          
-
-
-
-
           <component-group
             :base-width="115"
+            :show-split-line="true"
             is-label
             :icon-name="dvFilter"
             :title="t('visualization.query_component')"
@@ -433,7 +419,15 @@ const fullScreenPreview = () => {
           >
             <text-group></text-group>
           </component-group>
-          
+          <component-group
+            is-label
+            placement="bottom"
+            :base-width="328"
+            :icon-name="dvMedia"
+            :title="t('visualization.media')"
+          >
+            <media-group></media-group>
+          </component-group>
           <component-group is-label :base-width="115" :icon-name="dvTab" title="Tab">
             <tabs-group :dv-model="dvModel"></tabs-group>
           </component-group>
@@ -454,33 +448,12 @@ const fullScreenPreview = () => {
           >
             <common-group></common-group>
           </component-group>
-          
           <component-button-label
             :icon-name="icon_copy_filled"
             :title="t('visualization.multiplexing')"
             is-label
             @customClick="multiplexingCanvasOpen"
           ></component-button-label>
-          <component-group
-            is-label
-            placement="bottom"
-            :base-width="328"
-            :icon-name="dvForm"
-            :title="'表单'"
-          >
-            <media-group></media-group>
-          </component-group>
-          <component-group
-            is-label
-            placement="bottom"
-            :base-width="328"
-            :icon-name="dvTemplate"
-            :title="'模版'"
-          >
-            <media-group></media-group>
-          </component-group>
-
-          
         </div>
       </template>
       <div class="right-area">
@@ -522,6 +495,42 @@ const fullScreenPreview = () => {
         >
           {{ t('visualization.save') }}
         </el-button>
+        <el-dropdown
+          :disabled="dvInfo.status === 0"
+          popper-class="menu-outer-dv_popper-toolbar"
+          trigger="hover"
+        >
+          <el-button
+            @click="saveCanvasWithCheck(true, 1)"
+            style="float: right; margin: 0 12px 0 0"
+            type="primary"
+          >
+            {{ t('visualization.publish') }}
+          </el-button>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="recoverToPublished" v-if="dvInfo.status === 2">
+                <el-icon class="handle-icon">
+                  <Icon name="icon_left_outlined">
+                    <dv-recover-outlined class="svg-icon toolbar-icon" />
+                  </Icon>
+                </el-icon>
+                {{ t('visualization.publish_recover') }}
+              </el-dropdown-item>
+              <el-dropdown-item
+                @click.stop="publishStatusChange(0)"
+                v-if="[1, 2].includes(dvInfo.status)"
+              >
+                <el-icon class="handle-icon">
+                  <Icon name="icon_left_outlined">
+                    <dv-cancel-publish class="svg-icon toolbar-icon" />
+                  </Icon>
+                </el-icon>
+                {{ t('visualization.cancel_publish') }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
       </div>
     </div>
     <Teleport v-if="nameEdit" :to="'#dv-canvas-name'">
@@ -553,7 +562,7 @@ const fullScreenPreview = () => {
   </div>
   <de-fullscreen ref="fullScreeRef" show-position="dvEdit"></de-fullscreen>
   <multiplexing-canvas ref="multiplexingRef"></multiplexing-canvas>
-  <outer-params-set ref="outerParamsSetRef"> </outer-params-set>
+  <outer-params-set ref="outerParamsSetRef"></outer-params-set>
   <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
 </template>
 
@@ -561,52 +570,54 @@ const fullScreenPreview = () => {
 .toolbar-main {
   position: relative;
 }
+
 .preview-state-head {
   height: 0px !important;
   overflow: hidden;
   padding: 0;
   margin: 0;
 }
+
 .edit-button {
   right: 10px;
   top: 10px;
   position: absolute;
   z-index: 10;
 }
+
 .toolbar {
   height: @top-bar-height;
   white-space: nowrap;
   overflow-x: auto;
-  background: rgb(37,38,38);
+  background: #1a1a1a;
   color: #ffffff;
   box-shadow: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
   display: flex;
   transition: 0.5s;
+
   .back-icon {
     margin-left: 20px;
     margin-top: 22px;
     font-size: 20px;
   }
+
   .left-area {
     margin-top: 8px;
     margin-left: 14px;
     width: 300px;
     display: flex;
     flex-direction: column;
+
     .name-area {
       position: relative;
-      line-height: 46px;
-      height: 46px;
+      line-height: 24px;
+      height: 24px;
       font-size: 16px;
       width: 300px;
       overflow: hidden;
       cursor: pointer;
       color: @dv-canvas-main-font-color;
-      font-weight: 700;
-      font-style: normal;
-      font-size: 16px;
-      color: #F2F4F5;
-        
+
       input {
         position: absolute;
         left: 0;
@@ -620,6 +631,7 @@ const fullScreenPreview = () => {
         height: 100%;
       }
     }
+
     .opt-area {
       width: 300px;
       text-align: left;
@@ -630,24 +642,28 @@ const fullScreenPreview = () => {
       }
     }
   }
+
   .middle-area {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: center;
   }
+
   .right-area {
     width: 400px;
     display: flex;
     align-items: center;
     justify-content: right;
   }
+
   .custom-el-icon {
     margin-left: 15px;
     color: #ffffff;
     cursor: pointer;
     vertical-align: -0.2em;
   }
+
   .toolbar-icon {
     width: 20px;
     height: 20px;
@@ -658,6 +674,7 @@ const fullScreenPreview = () => {
   border-color: rgba(255, 255, 255, 0.3);
   color: #ffffff;
   background-color: transparent;
+
   &:hover,
   &:focus {
     background-color: transparent;
@@ -680,37 +697,6 @@ const fullScreenPreview = () => {
   margin-right: 20px;
   margin-left: 10px;
 }
-.undo-redo{
-  width: 47px;
-  height: 47px;
-  display: flex;
-  justify-content: center;
-  // items-content: center;
-  align-content: center;
-  flex-wrap: wrap;
-  border-radius: 3px;
-  cursor: pointer;
-  .undo-redo-text{
-    width: 100%;
-    font-family: '微软雅黑';
-    font-weight: 400;
-    font-style: normal;
-    font-size: 12px;
-    color: #F2F4F5;
-    text-align: center;
-    padding-top: 5px;
-  }
-
-}
-.undo-redo:hover{
-    background-color: rgba(54, 55, 56, 1);
-  }
-  .tabline{
-    width: 1px;
-    height: 40px;
-    background-color: rgba(255, 255, 255, 0.15);
-    margin: 0px 10px;
-  }
 </style>
 <style>
 .ed-message-box{
diff --git a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
index 92fe358..470d20e 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
@@ -77,6 +77,7 @@ import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
 import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
 import circlePackingOrigin from '@/assets/svg/circle-packing-origin.svg'
 import RealTimeTab from '@/components/data-visualization/RealTimeTab.vue'
+import bulletGraphOrigin from '@/assets/svg/bullet-graph-origin.svg'
 import { syncViewTitle } from '@/utils/canvasUtils'
 const dropdownMore = ref(null)
 const lockStore = lockStoreWithOut()
@@ -245,7 +246,8 @@ const iconMap = {
   'word-cloud-origin': wordCloudOrigin,
   't-heatmap-origin': tHeatmapOrigin,
   group: group,
-  'circle-packing-origin': circlePackingOrigin
+  'circle-packing-origin': circlePackingOrigin,
+  'bullet-graph-origin': bulletGraphOrigin
 }
 const getIconName = item => {
   if (item.component === 'UserView') {
diff --git a/core/core-frontend/src/components/data-visualization/RealTimeGroupInner.vue b/core/core-frontend/src/components/data-visualization/RealTimeGroupInner.vue
index 5d7c64d..db8a361 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeGroupInner.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeGroupInner.vue
@@ -74,6 +74,7 @@ import ContextMenuAsideDetails from '@/components/data-visualization/canvas/Cont
 import ComposeShow from '@/components/data-visualization/canvas/ComposeShow.vue'
 import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
 import circlePackingOrigin from '@/assets/svg/circle-packing-origin.svg'
+import bulletGraphOrigin from '@/assets/svg/bullet-graph-origin.svg'
 import { syncViewTitle } from '@/utils/canvasUtils'
 const dropdownMore = ref(null)
 const lockStore = lockStoreWithOut()
@@ -242,7 +243,8 @@ const iconMap = {
   'word-cloud-origin': wordCloudOrigin,
   't-heatmap-origin': tHeatmapOrigin,
   group: group,
-  'circle-packing-origin': circlePackingOrigin
+  'circle-packing-origin': circlePackingOrigin,
+  'bullet-graph-origin': bulletGraphOrigin
 }
 const getIconName = item => {
   if (item.component === 'UserView') {
diff --git a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
index 56ead35..34f501d 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
@@ -81,6 +81,7 @@ import { contextmenuStoreWithOut } from '@/store/modules/data-visualization/cont
 import RealTimeTab from '@/components/data-visualization/RealTimeTab.vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import circlePackingOrigin from '@/assets/svg/circle-packing-origin.svg'
+import bulletGraphOrigin from '@/assets/svg/bullet-graph-origin.svg'
 import { checkJoinGroup, syncViewTitle } from '@/utils/canvasUtils'
 import { useEmitt } from '@/hooks/web/useEmitt'
 const dropdownMore = ref(null)
@@ -242,6 +243,7 @@ const unlock = () => {
 const hideComponent = () => {
   setTimeout(() => {
     layerStore.hideComponent()
+    layerStore.pausedTooltipCarousel(curComponent.value.id)
     snapshotStore.recordSnapshotCache('realTime-hideComponent')
   })
 }
@@ -249,6 +251,7 @@ const hideComponent = () => {
 const showComponent = () => {
   setTimeout(() => {
     layerStore.showComponent()
+    layerStore.resumeTooltipCarousel(curComponent.value.id)
     snapshotStore.recordSnapshotCache('showComponent')
   })
 }
@@ -333,7 +336,8 @@ const iconMap = {
   't-heatmap-origin': tHeatmapOrigin,
   'picture-group-origin': pictureGroupOrigin,
   group: group,
-  'circle-packing-origin': circlePackingOrigin
+  'circle-packing-origin': circlePackingOrigin,
+  'bullet-graph-origin': bulletGraphOrigin
 }
 const getIconName = item => {
   if (item.component === 'UserView') {
diff --git a/core/core-frontend/src/components/data-visualization/RealTimeTab.vue b/core/core-frontend/src/components/data-visualization/RealTimeTab.vue
index 9bb8505..226a0a3 100644
--- a/core/core-frontend/src/components/data-visualization/RealTimeTab.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeTab.vue
@@ -75,25 +75,13 @@ const closeEditComponentName = () => {
   curEditComponent = null
 }
 
-const dragOnEnd = ({ oldIndex, newIndex }) => {
+const dragOnEnd = ({ newIndex }) => {
   const source = componentData.value[newIndex]
   dvMainStore.setCurTabName(source.title)
   eventBus.emit('onTabSortChange-' + tabElement.value?.id)
   snapshotStore.recordSnapshotCache('dragOnEnd')
 }
 
-const menuAsideClose = (param, index) => {
-  const iconDom = document.getElementById('close-button')
-  if (iconDom) {
-    iconDom.click()
-  }
-  if (param?.opt === 'rename') {
-    setTimeout(() => {
-      editComponentName(getComponent(index))
-    }, 200)
-  }
-}
-
 const handleContextMenu = e => {
   e.preventDefault()
   // 获取鼠标点击位置
diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
index 73f85fd..4cbcb52 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue
@@ -57,7 +57,6 @@ const contextmenuStore = contextmenuStoreWithOut()
 const { curComponent, dvInfo, editMode, tabMoveOutComponentId, canvasState, mainScrollTop } =
   storeToRefs(dvMainStore)
 const { editorMap, areaData, isCtrlOrCmdDown } = storeToRefs(composeStore)
-const emits = defineEmits(['scrollCanvasAdjust'])
 const props = defineProps({
   themes: {
     type: String,
@@ -263,7 +262,7 @@ watch(
 
 watch(
   () => areaData.value.components.length,
-  (val, oldVal) => {
+  () => {
     groupAreaClickChange()
   }
 )
@@ -936,7 +935,7 @@ function removeItem(index) {
     dvMainStore.removeLinkageInfo(item['id'])
     if (isMainCanvas(canvasId.value)) {
       // 主画布中存在隐藏组件 直接从原始componentData中进行删除
-      dvMainStore.deleteComponentById(item.id)
+      dvMainStore.deleteComponentById(item.id, undefined, false)
     } else {
       componentData.value.splice(index, 1)
     }
diff --git a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
index 601daf7..599c211 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ComponentWrapper.vue
@@ -1,28 +1,28 @@
 <script setup lang="ts">
 import { getStyle } from '@/utils/style'
 import eventBus from '@/utils/eventBus'
-import { ref, onMounted, toRefs, getCurrentInstance, computed, nextTick } from 'vue'
+import { ref, toRefs, computed, nextTick } from 'vue'
 import findComponent from '@/utils/components'
 import { downloadCanvas2, imgUrlTrans } from '@/utils/imgUtils'
 import ComponentEditBar from '@/components/visualization/ComponentEditBar.vue'
 import ComponentSelector from '@/components/visualization/ComponentSelector.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
-import { useCache } from '@/hooks/web/useCache'
 import Board from '@/components/de-board/Board.vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { activeWatermarkCheckUser, removeActiveWatermark } from '@/components/watermark/watermark'
 import { isMobile } from '@/utils/utils'
-import { isDashboard } from '@/utils/canvasUtils'
+import { isDashboard, isMainCanvas } from '@/utils/canvasUtils'
 import { XpackComponent } from '@/components/plugin'
-import { useAppStoreWithOut } from '@/store/modules/app'
-const appStore = useAppStoreWithOut()
+import DePreviewPopDialog from '@/components/visualization/DePreviewPopDialog.vue'
+import Icon from '../../icon-custom/src/Icon.vue'
+import replaceOutlined from '@/assets/svg/icon_replace_outlined.svg'
 
 const componentWrapperInnerRef = ref(null)
 const componentEditBarRef = ref(null)
 const dvMainStore = dvMainStoreWithOut()
 const downLoading = ref(false)
-const { wsCache } = useCache('localStorage')
 const commonFilterAttrs = ['width', 'height', 'top', 'left', 'rotate']
+const dePreviewPopDialogRef = ref(null)
 const commonFilterAttrsFilterBorder = [
   'width',
   'height',
@@ -122,6 +122,11 @@ const props = defineProps({
   optType: {
     type: String,
     required: false
+  },
+  // 画布滚动距离
+  scrollMain: {
+    type: Number,
+    default: 0
   }
 })
 const {
@@ -133,9 +138,9 @@ const {
   dvInfo,
   searchCount,
   scale,
-  suffixId
+  suffixId,
+  scrollMain
 } = toRefs(props)
-let currentInstance
 const component = ref(null)
 const emits = defineEmits(['userViewEnlargeOpen', 'datasetParamsInit', 'onPointClick'])
 const wrapperId = 'wrapper-outer-id-' + config.value.id
@@ -145,7 +150,7 @@ const htmlToImage = () => {
   useEmitt().emitter.emit('l7-prepare-picture', config.value.id)
   downLoading.value = true
   setTimeout(() => {
-    const vueDom = componentWrapperInnerRef.value
+    const vueDom = document.getElementById(viewDemoInnerId.value)
     activeWatermarkCheckUser(viewDemoInnerId.value, 'canvas-main', scale.value / 100)
     downloadCanvas2('img', vueDom, '图表', () => {
       // do callback
@@ -160,27 +165,22 @@ const handleInnerMouseDown = e => {
   // do setCurComponent
   if (showPosition.value.includes('multiplexing')) {
     componentEditBarRef.value.multiplexingCheckOut()
-    e.stopPropagation()
-    e.preventDefault()
+    e?.stopPropagation()
+    e?.preventDefault()
   }
-  if (showPosition.value.includes('popEdit') || dvMainStore.mobileInPc) {
+  if (
+    (!['rich-text'].includes(config.value.innerType) &&
+      ['popEdit', 'preview'].includes(showPosition.value)) ||
+    dvMainStore.mobileInPc
+  ) {
     onClick(e)
+    if (e.target?.className?.includes('ed-input__inner')) return
+    e?.stopPropagation()
+    e?.preventDefault()
   }
 }
 
-onMounted(() => {
-  currentInstance = getCurrentInstance()
-  const methodName = 'componentImageDownload-' + config.value.id
-  useEmitt().emitter.off(methodName)
-  useEmitt({
-    name: methodName,
-    callback: () => {
-      htmlToImage()
-    }
-  })
-})
-
-const onClick = e => {
+const onClick = () => {
   // 将当前点击组件的事件传播出去
   eventBus.emit('componentClick')
   dvMainStore.setInEditorStatus(true)
@@ -305,11 +305,20 @@ const eventEnable = computed(
       ['indicator', 'rich-text'].includes(config.value.innerType)) &&
     config.value.events &&
     config.value.events.checked &&
-    (isDashboard() || (!isDashboard() && !isMobile()))
+    (isDashboard() || (!isDashboard() && !isMobile())) &&
+    showPosition.value !== 'canvas-multiplexing'
 )
 
+const onWrapperClickCur = e => {
+  // 指标卡为内部触发
+  if (['indicator'].includes(config.value.innerType)) {
+    return
+  }
+  onWrapperClick(e)
+}
+
 const onWrapperClick = e => {
-  if (eventEnable.value && showPosition.value !== 'canvas-multiplexing') {
+  if (eventEnable.value) {
     if (config.value.events.type === 'showHidden') {
       // 打开弹框区域
       nextTick(() => {
@@ -320,15 +329,9 @@ const onWrapperClick = e => {
       const jumpType = config.value.events.jump.type
       try {
         if ('newPop' === jumpType) {
-          window.open(
-            url,
-            '_blank',
-            'width=800,height=600,left=200,top=100,toolbar=no,scrollbars=yes,resizable=yes,location=no'
-          )
+          dePreviewPopDialogRef.value.previewInit({ url, size: 'middle' })
         } else if ('_blank' === jumpType) {
-          console.info('DataEase Component Jump _blank value:' + window['originOpen'])
           if (window['originOpen']) {
-            console.info('DataEase Component originOpen _blank')
             window['originOpen'](url, '_blank')
           } else {
             window.open(url, '_blank')
@@ -346,8 +349,8 @@ const onWrapperClick = e => {
     } else if (config.value.events.type === 'download') {
       useEmitt().emitter.emit('canvasDownload')
     }
-    e.preventDefault()
-    e.stopPropagation()
+    e?.preventDefault()
+    e?.stopPropagation()
   }
 }
 
@@ -363,12 +366,47 @@ const initOpenHandler = newWindow => {
 }
 const deepScale = computed(() => scale.value / 100)
 const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc && props.active))
+
+const freezeFlag = computed(() => {
+  return (
+    isMainCanvas(props.canvasId) &&
+    config.value.freeze &&
+    scrollMain.value - config.value.style?.top > 0
+  )
+})
+
+const commonParams = computed(() => {
+  return {
+    eventEnable: eventEnable.value,
+    eventType: config.value.events.type
+  }
+})
+
+const showCheck = computed(() => {
+  return dvMainStore.mobileInPc && showPosition.value === 'edit'
+})
+
+const updateFromMobile = (e, type) => {
+  if (type === 'syncPcDesign') {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+  useEmitt().emitter.emit('onMobileStatusChange', {
+    type: type,
+    value: config.value.id
+  })
+}
 </script>
 
 <template>
   <div
     class="wrapper-outer"
-    :class="showPosition + '-' + config.component"
+    :class="[
+      showPosition + '-' + config.component,
+      {
+        'freeze-component': freezeFlag
+      }
+    ]"
     :id="wrapperId"
     @mousedown="handleInnerMouseDown"
     @mouseenter="onMouseEnter"
@@ -376,6 +414,16 @@ const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc &&
     element-loading-text="导出中..."
     element-loading-background="rgba(255, 255, 255, 1)"
   >
+    <div
+      :title="$t('visualization.sync_pc_design')"
+      v-if="showCheck"
+      class="refresh-from-pc"
+      @click="updateFromMobile($event, 'syncPcDesign')"
+    >
+      <el-icon>
+        <Icon name="icon_replace_outlined"><replaceOutlined class="svg-icon" /></Icon>
+      </el-icon>
+    </div>
     <component-edit-bar
       v-if="!showPosition.includes('canvas') && !props.isSelector"
       class="wrapper-edit-bar"
@@ -385,6 +433,7 @@ const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc &&
       :element="config"
       :show-position="showPosition"
       :class="{ 'wrapper-edit-bar-active': active }"
+      @componentImageDownload="htmlToImage"
       @userViewEnlargeOpen="opt => emits('userViewEnlargeOpen', opt)"
       @datasetParamsInit="() => emits('datasetParamsInit')"
     ></component-edit-bar>
@@ -406,7 +455,7 @@ const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc &&
         class="wrapper-inner-adaptor"
         :style="slotStyle"
         :class="{ 'pop-wrapper-inner': showActive, 'event-active': eventEnable }"
-        @mousedown="onWrapperClick"
+        @mousedown="onWrapperClickCur"
       >
         <component
           :is="findComponent(config['component'])"
@@ -430,7 +479,10 @@ const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc &&
           :is-edit="false"
           :suffix-id="suffixId"
           :font-family="fontFamily"
+          :active="active"
+          :common-params="commonParams"
           @onPointClick="onPointClick"
+          @onComponentEvent="onWrapperClick"
         />
       </div>
       <!--边框背景-->
@@ -444,6 +496,7 @@ const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc &&
       ref="openHandler"
       jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI="
     />
+    <DePreviewPopDialog ref="dePreviewPopDialogRef"></DePreviewPopDialog>
   </div>
 </template>
 
@@ -454,6 +507,15 @@ const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc &&
 }
 .wrapper-outer {
   position: absolute;
+  .refresh-from-pc {
+    position: absolute;
+    right: 38px;
+    top: 12px;
+    z-index: 2;
+    font-size: 16px;
+    cursor: pointer;
+    color: var(--ed-color-primary);
+  }
 }
 .wrapper-inner {
   width: 100%;
@@ -503,4 +565,11 @@ const showActive = computed(() => props.popActive || (dvMainStore.mobileInPc &&
 .event-active {
   cursor: pointer;
 }
+
+.freeze-component {
+  position: fixed;
+  z-index: 1;
+  top: var(--top-show-offset) px !important;
+  left: var(--left-show-offset) px !important;
+}
 </style>
diff --git a/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue b/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
index e725ddb..1fb3d02 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ContextMenuDetails.vue
@@ -298,64 +298,73 @@ const editQueryCriteria = () => {
         <el-divider class="custom-divider" />
         <li @click="deleteComponent">{{ t('visualization.delete') }}</li>
       </template>
-      <li
-        v-show="!(!curComponent || curComponent['isLock'] || curComponent['component'] != 'Group')"
-        @click="decompose()"
-      >
-        {{ t('visualization.cancel_group') }}
-      </li>
-      <el-divider class="custom-divider" v-show="composeDivider" />
-      <template v-if="curComponent">
-        <template v-if="!curComponent['isLock'] && curComponent.category === 'hidden'">
-          <li @click="categoryChange('base')">{{ t('visualization.move_to_screen_show') }}</li>
-          <li @click="editQueryCriteria">{{ t('visualization.edit') }}</li>
-          <li v-if="activePosition === 'aside'" @click="rename">{{ t('visualization.rename') }}</li>
-          <li @click="copy">{{ t('visualization.copy') }}</li>
-          <li @click="paste">{{ t('visualization.paste') }}</li>
-          <el-divider class="custom-divider" />
-          <li @click="deleteComponent">{{ t('visualization.delete') }}</li>
+      <template v-else>
+        <li
+          v-show="
+            !(!curComponent || curComponent['isLock'] || curComponent['component'] != 'Group')
+          "
+          @click="decompose()"
+        >
+          {{ t('visualization.cancel_group') }}
+        </li>
+        <el-divider class="custom-divider" v-show="composeDivider" />
+        <template v-if="curComponent">
+          <template v-if="!curComponent['isLock'] && curComponent.category === 'hidden'">
+            <li @click="categoryChange('base')">{{ t('visualization.move_to_screen_show') }}</li>
+            <li @click="editQueryCriteria">{{ t('visualization.edit') }}</li>
+            <li v-if="activePosition === 'aside'" @click="rename">
+              {{ t('visualization.rename') }}
+            </li>
+            <li @click="copy">{{ t('visualization.copy') }}</li>
+            <li @click="paste">{{ t('visualization.paste') }}</li>
+            <el-divider class="custom-divider" />
+            <li @click="deleteComponent">{{ t('visualization.delete') }}</li>
+          </template>
+          <template v-if="!curComponent['isLock'] && curComponent.category !== 'hidden'">
+            <li v-if="curComponent.component === 'VQuery'" @click="editQueryCriteria">
+              {{ t('visualization.edit') }}
+            </li>
+            <li @click="upComponent">{{ t('visualization.up_component') }}</li>
+            <li @click="downComponent">{{ t('visualization.down_component') }}</li>
+            <li @click="topComponent">{{ t('visualization.top_component') }}</li>
+            <li @click="bottomComponent">{{ t('visualization.bottom_component') }}</li>
+            <li @click="customSort" v-if="curComponent.component === 'DeTabs'">
+              {{ t('visualization.sort') }}
+            </li>
+            <xpack-component
+              :chart="curComponent"
+              is-screen
+              resource-table="snapshot"
+              jsname="L2NvbXBvbmVudC90aHJlc2hvbGQtd2FybmluZy9FZGl0QmFySGFuZGxlcg=="
+            />
+            <li @click="categoryChange('hidden')" v-show="showMoveMenu">
+              {{ t('visualization.move_to_pop_area') }}
+            </li>
+            <el-divider class="custom-divider" />
+            <li @click="hide" v-show="curComponent['isShow']">{{ t('visualization.hidden') }}</li>
+            <li @click="show" v-show="!curComponent['isShow'] || isGroupArea">
+              {{ t('visualization.cancel_hidden') }}
+            </li>
+            <li @click="lock">{{ t('visualization.lock') }}</li>
+            <li v-if="curComponent['isLock'] || isGroupArea" @click="unlock">
+              {{ t('visualization.unlock') }}
+            </li>
+            <el-divider class="custom-divider" />
+            <li v-if="activePosition === 'aside'" @click="rename">
+              {{ t('visualization.rename') }}
+            </li>
+            <li @click="copy">{{ t('visualization.copy') }}</li>
+            <li @click="paste">{{ t('visualization.paste') }}</li>
+            <li @click="cut">{{ t('visualization.cut') }}</li>
+            <el-divider class="custom-divider" />
+            <li @click="deleteComponent">{{ t('visualization.delete') }}</li>
+          </template>
+          <li v-if="curComponent['isLock']" @click="unlock">{{ t('visualization.unlock') }}</li>
         </template>
-        <template v-if="!curComponent['isLock'] && curComponent.category !== 'hidden'">
-          <li v-if="curComponent.component === 'VQuery'" @click="editQueryCriteria">
-            {{ t('visualization.edit') }}
-          </li>
-          <li @click="upComponent">{{ t('visualization.up_component') }}</li>
-          <li @click="downComponent">{{ t('visualization.down_component') }}</li>
-          <li @click="topComponent">{{ t('visualization.top_component') }}</li>
-          <li @click="bottomComponent">{{ t('visualization.bottom_component') }}</li>
-          <li @click="customSort" v-if="curComponent.component === 'DeTabs'">
-            {{ t('visualization.sort') }}
-          </li>
-          <xpack-component
-            :chart="curComponent"
-            is-screen
-            jsname="L2NvbXBvbmVudC90aHJlc2hvbGQtd2FybmluZy9FZGl0QmFySGFuZGxlcg=="
-          />
-          <li @click="categoryChange('hidden')" v-show="showMoveMenu">
-            {{ t('visualization.move_to_pop_area') }}
-          </li>
-          <el-divider class="custom-divider" />
-          <li @click="hide" v-show="curComponent['isShow']">{{ t('visualization.hidden') }}</li>
-          <li @click="show" v-show="!curComponent['isShow'] || isGroupArea">
-            {{ t('visualization.cancel_hidden') }}
-          </li>
-          <li @click="lock">{{ t('visualization.lock') }}</li>
-          <li v-if="curComponent['isLock'] || isGroupArea" @click="unlock">
-            {{ t('visualization.unlock') }}
-          </li>
-          <el-divider class="custom-divider" />
-          <li v-if="activePosition === 'aside'" @click="rename">{{ t('visualization.rename') }}</li>
-          <li @click="copy">{{ t('visualization.copy') }}</li>
-          <li @click="paste">{{ t('visualization.paste') }}</li>
-          <li @click="cut">{{ t('visualization.cut') }}</li>
-          <el-divider class="custom-divider" />
-          <li @click="deleteComponent">{{ t('visualization.delete') }}</li>
-        </template>
-        <li v-if="curComponent['isLock']" @click="unlock">{{ t('visualization.unlock') }}</li>
+        <li v-else-if="!curComponent && !areaData.components.length" @click="paste">
+          {{ t('visualization.paste') }}
+        </li>
       </template>
-      <li v-else-if="!curComponent && !areaData.components.length" @click="paste">
-        {{ t('visualization.paste') }}
-      </li>
     </ul>
   </div>
 </template>
diff --git a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
index f43de15..eae15b6 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
@@ -22,6 +22,7 @@ import EmptyBackground from '../../empty-background/src/EmptyBackground.vue'
 import LinkOptBar from '@/components/data-visualization/canvas/LinkOptBar.vue'
 import { isDesktop } from '@/utils/ModelUtil'
 import { isMobile } from '@/utils/utils'
+import { useI18n } from '@/hooks/web/useI18n'
 const dvMainStore = dvMainStoreWithOut()
 const { pcMatrixCount, curComponent, mobileInPc, canvasState, inMobile } = storeToRefs(dvMainStore)
 const openHandler = ref(null)
@@ -30,6 +31,7 @@ const emits = defineEmits(['onResetLayout'])
 const fullScreeRef = ref(null)
 const isOverSize = ref(false)
 const isDesktopFlag = isDesktop()
+const { t } = useI18n()
 const props = defineProps({
   canvasStyleData: {
     type: Object,
@@ -93,6 +95,11 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'inherit'
+  },
+  // 联动按钮位置
+  showLinkageButton: {
+    type: Boolean,
+    default: true
   }
 })
 
@@ -125,7 +132,8 @@ const dashboardActive = computed(() => {
   return dvInfo.value.type === 'dashboard'
 })
 const state = reactive({
-  initState: true
+  initState: true,
+  scrollMain: 0
 })
 
 const curSearchCount = computed(() => {
@@ -171,6 +179,7 @@ const canvasStyle = computed(() => {
     if (canvasStyleData.value?.screenAdaptor === 'keep') {
       style['height'] = canvasStyleData.value?.height + 'px'
       style['width'] = canvasStyleData.value?.width + 'px'
+      style['margin'] = 'auto'
     } else {
       style['height'] = dashboardActive.value
         ? downloadStatus.value
@@ -470,6 +479,12 @@ const downloadAsPDF = () => {
   // test
 }
 
+const scrollPreview = () => {
+  state.scrollMain = previewCanvas.value.scrollTop
+}
+
+const showUnpublishFlag = computed(() => dvInfo.value?.status === 0 && isMainCanvas(canvasId.value))
+
 defineExpose({
   restore
 })
@@ -480,9 +495,14 @@ defineExpose({
     :id="domId"
     class="canvas-container"
     :style="canvasStyle"
-    :class="{ 'de-download-custom': downloadStatus, 'datav-preview': dataVPreview }"
+    :class="{
+      'de-download-custom': downloadStatus,
+      'datav-preview': dataVPreview,
+      'datav-preview-unpublish': showUnpublishFlag
+    }"
     ref="previewCanvas"
     @mousedown="handleMouseDown"
+    @scroll="scrollPreview"
     v-if="state.initState"
   >
     <!--弹框触发区域-->
@@ -500,12 +520,14 @@ defineExpose({
       :show-position="'preview'"
     ></PopArea>
     <canvas-opt-bar
+      v-if="showLinkageButton"
       :canvas-id="canvasId"
       :canvas-style-data="canvasStyleData"
       :component-data="baseComponentData"
+      :is-fixed="isOverSize"
     ></canvas-opt-bar>
-    <template v-if="renderReady">
-      <ComponentWrapper
+    <template v-if="renderReady && !showUnpublishFlag">
+      <component-wrapper
         v-for="(item, index) in baseComponentData"
         v-show="item.isShow"
         :active="item.id === (curComponent || {})['id']"
@@ -522,11 +544,19 @@ defineExpose({
         :scale="mobileInPc && isDashboard() ? 100 : scaleMin"
         :is-selector="props.isSelector"
         :font-family="canvasStyleData.fontFamily || fontFamily"
+        :scroll-main="state.scrollMain"
         @userViewEnlargeOpen="userViewEnlargeOpen($event, item)"
         @datasetParamsInit="datasetParamsInit(item)"
         @onPointClick="onPointClick"
+        :index="index"
       />
     </template>
+    <empty-background
+      v-if="showUnpublishFlag"
+      :description="t('visualization.resource_not_published')"
+      img-type="none"
+    >
+    </empty-background>
     <user-view-enlarge ref="userViewEnlargeRef"></user-view-enlarge>
   </div>
   <empty-background v-if="!state.initState" description="参数不能为空" img-type="noneWhite" />
@@ -567,4 +597,8 @@ defineExpose({
 .datav-preview {
   overflow-y: hidden !important;
 }
+
+.datav-preview-unpublish {
+  background-color: inherit !important;
+}
 </style>
diff --git a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
index 57e25d9..e094036 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@@ -1,7 +1,11 @@
 <template>
   <div
     class="shape"
-    :class="{ 'shape-group-area': isGroupArea }"
+    :class="{
+      'shape-group-area': isGroupArea,
+      'freeze-component': freezeFlag,
+      'freeze-component-fullscreen': freezeFlag && fullscreenFlag
+    }"
     ref="shapeInnerRef"
     :id="domId"
     v-loading="downLoading"
@@ -55,6 +59,7 @@
         :element="element"
         :show-position="showPosition"
         :canvas-id="canvasId"
+        @componentImageDownload="htmlToImage"
         @userViewEnlargeOpen="userViewEnlargeOpen"
         @datasetParamsInit="datasetParamsInit"
         @linkJumpSetOpen="linkJumpSetOpen"
@@ -177,7 +182,8 @@ const {
   tabMoveOutComponentId,
   mobileInPc,
   mainScrollTop,
-  hiddenListStatus
+  hiddenListStatus,
+  fullscreenFlag
 } = storeToRefs(dvMainStore)
 const { editorMap, areaData, isCtrlOrCmdDown } = storeToRefs(composeStore)
 const emit = defineEmits([
@@ -326,6 +332,14 @@ const initialAngle = {
 }
 const cursors = ref({})
 
+const freezeFlag = computed(() => {
+  return (
+    isMainCanvas(canvasId.value) &&
+    element.value.freeze &&
+    mainScrollTop.value - defaultStyle.value.top > 0
+  )
+})
+
 const showCheck = computed(() => {
   return mobileInPc.value && element.value.canvasId === 'canvas-main'
 })
@@ -386,7 +400,7 @@ const getPointList = () => {
 }
 
 const isActive = () => {
-  return active.value && !element.value['isLock'] && isEditMode.value
+  return active.value && !element.value['isLock'] && isEditMode.value && !freezeFlag.value
 }
 
 const userViewEnlargeOpen = opt => {
@@ -538,7 +552,8 @@ const handleMouseDownOnShape = e => {
   // }
 
   e.stopPropagation()
-  if (element.value['isLock'] || !isEditMode.value) return
+  // 锁定 非编辑状态 冻结状态 不进行移动
+  if (element.value['isLock'] || !isEditMode.value || freezeFlag.value) return
 
   cursors.value = getCursor() // 根据旋转角度获取光标位置
 
@@ -897,30 +912,6 @@ const commonBackgroundSvgInner = computed(() => {
   }
 })
 
-const padding3D = computed(() => {
-  const width = defaultStyle.value.width // 原始元素宽度
-  const height = defaultStyle.value.height // 原始元素高度
-  const rotateX = element.value['multiDimensional'].x // 旋转X角度
-  const rotateY = element.value['multiDimensional'].y // 旋转Y角度
-
-  // 将角度转换为弧度
-  const radX = (rotateX * Math.PI) / 180
-  const radY = (rotateY * Math.PI) / 180
-
-  // 计算旋转后新宽度和高度
-  const newWidth = Math.abs(width * Math.cos(radY)) + Math.abs(height * Math.sin(radX))
-  const newHeight = Math.abs(height * Math.cos(radX)) + Math.abs(width * Math.sin(radY))
-
-  // 计算需要的 padding
-  const paddingX = (newWidth - width) / 2
-  const paddingY = (newHeight - height) / 2
-
-  return {
-    paddingX: `${paddingX}px`,
-    paddingY: `${paddingY}px`
-  }
-})
-
 const componentBackgroundStyle = computed(() => {
   if (element.value.commonBackground && element.value.component !== 'GroupArea') {
     const {
@@ -1107,12 +1098,15 @@ const dragCollision = computed(() => {
 
 const htmlToImage = () => {
   downLoading.value = true
+  useEmitt().emitter.emit('l7-prepare-picture', element.value.id)
   setTimeout(() => {
     activeWatermarkCheckUser(viewDemoInnerId.value, 'canvas-main', scale.value)
-    downloadCanvas2('img', componentInnerRef.value, '图表', () => {
+    const dom = document.getElementById(viewDemoInnerId.value)
+    downloadCanvas2('img', dom, '图表', () => {
       // do callback
       removeActiveWatermark(viewDemoInnerId.value)
       downLoading.value = false
+      useEmitt().emitter.emit('l7-unprepare-picture', element.value.id)
     })
   }, 200)
 }
@@ -1138,13 +1132,11 @@ onMounted(() => {
   })
   settingAttribute()
   const methodName = 'componentImageDownload-' + element.value.id
-  useEmitt().emitter.off(methodName)
-  useEmitt({
-    name: methodName,
-    callback: () => {
+  if (!useEmitt().emitter.all.get(methodName)?.length) {
+    useEmitt().emitter.on(methodName, () => {
       htmlToImage()
-    }
-  })
+    })
+  }
 })
 </script>
 
@@ -1318,4 +1310,14 @@ onMounted(() => {
   position: relative;
   transform-style: preserve-3d;
 }
+
+.freeze-component {
+  position: fixed;
+  z-index: 1;
+  top: 66px !important;
+}
+
+.freeze-component-fullscreen {
+  top: 5px !important;
+}
 </style>
diff --git a/core/core-frontend/src/components/de-app/AppExportForm.vue b/core/core-frontend/src/components/de-app/AppExportForm.vue
index ed4d37c..8e9cf30 100644
--- a/core/core-frontend/src/components/de-app/AppExportForm.vue
+++ b/core/core-frontend/src/components/de-app/AppExportForm.vue
@@ -2,7 +2,7 @@
   <el-drawer
     :title="t('visualization.app_export')"
     v-model="state.applyDownloadDrawer"
-    custom-class="de-user-drawer"
+    modal-class="de-user-drawer"
     size="600px"
     direction="rtl"
   >
@@ -55,11 +55,9 @@ import { ElButton, ElDrawer, ElForm, ElFormItem, ElInput } from 'element-plus-se
 import { reactive, ref, toRefs } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { export2AppCheck } from '@/api/visualization/dataVisualization'
-import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 const { t } = useI18n()
 const emits = defineEmits(['closeDraw', 'downLoadApp'])
 const applyDownloadForm = ref(null)
-const dvMainStore = dvMainStoreWithOut()
 
 const props = defineProps({
   componentData: {
@@ -138,43 +136,28 @@ const close = () => {
   state.applyDownloadDrawer = false
 }
 
-const gatherAppInfo = (viewIds, dsIds) => {
-  componentData.value.forEach(item => {
+const gatherAppInfo = (viewIds, dsIds, componentDataCheck) => {
+  componentDataCheck.forEach(item => {
     if (item.component === 'UserView' && canvasViewInfo.value[item.id]) {
       const viewDetails = canvasViewInfo.value[item.id]
       const { id, tableId } = viewDetails
       viewIds.push(id)
       dsIds.push(tableId)
     } else if (item.component === 'Group') {
-      item.propValue.forEach(groupItem => {
-        if (groupItem.component === 'UserView') {
-          const viewDetails = canvasViewInfo.value[groupItem.id]
-          const { id, tableId } = viewDetails
-          viewIds.push(id)
-          dsIds.push(tableId)
-        }
-      })
+      gatherAppInfo(viewIds, dsIds, item.propValue)
     } else if (item.component === 'DeTabs') {
       item.propValue.forEach(tabItem => {
-        tabItem.componentData.forEach(tabComponent => {
-          if (tabComponent.component === 'UserView') {
-            const viewDetails = canvasViewInfo.value[tabComponent.id]
-            const { id, tableId } = viewDetails
-            viewIds.push(id)
-            dsIds.push(tableId)
-          }
-        })
+        gatherAppInfo(viewIds, dsIds, tabItem.componentData)
       })
     }
   })
 }
-
 const downloadApp = () => {
   applyDownloadForm.value?.validate(valid => {
     if (valid) {
       const viewIds = []
       const dsIds = []
-      gatherAppInfo(viewIds, dsIds)
+      gatherAppInfo(viewIds, dsIds, componentData.value)
       export2AppCheck({ dvId: dvInfo.value.id, viewIds, dsIds }).then(rsp => {
         const params = {
           ...rsp.data,
diff --git a/core/core-frontend/src/components/drawer-main/src/DrawerMain.vue b/core/core-frontend/src/components/drawer-main/src/DrawerMain.vue
index 721dbc9..f1123fa 100644
--- a/core/core-frontend/src/components/drawer-main/src/DrawerMain.vue
+++ b/core/core-frontend/src/components/drawer-main/src/DrawerMain.vue
@@ -119,7 +119,7 @@ defineExpose({
     :title="t('common.filter_condition')"
     v-model="userDrawer"
     size="600px"
-    custom-class="drawer-main-container"
+    modal-class="drawer-main-container"
     direction="rtl"
   >
     <div v-for="(component, index) in componentList" :key="index">
@@ -164,7 +164,6 @@ defineExpose({
 
 <style lang="less">
 .drawer-main-container {
-  width: 600px;
   .ed-drawer__body {
     padding: 16px 24px 80px !important;
   }
diff --git a/core/core-frontend/src/components/empty-background/src/EmptyBackground.vue b/core/core-frontend/src/components/empty-background/src/EmptyBackground.vue
index 2e47e35..4f1a945 100644
--- a/core/core-frontend/src/components/empty-background/src/EmptyBackground.vue
+++ b/core/core-frontend/src/components/empty-background/src/EmptyBackground.vue
@@ -6,7 +6,7 @@ import nothingTable from '@/assets/img/nothing-table.png'
 import none from '@/assets/img/none.png'
 import error from '@/assets/img/error.png'
 import nothingTree from '@/assets/img/nothing-tree.png'
-import nothingNone from '@/assets/img/nothing-none-black.png'
+import nothingNone from '@/assets/img/nothing-none.png'
 defineProps({
   imgType: {
     type: String as PropType<
@@ -60,7 +60,4 @@ const getAssetsFile = {
   font-weight: 400;
   line-height: 22px;
 }
-:deep(.ed-empty__image){
-  width: 106px !important;
-}
 </style>
diff --git a/core/core-frontend/src/components/grid-table/src/GridTable.vue b/core/core-frontend/src/components/grid-table/src/GridTable.vue
index 01f33bc..c3a8891 100644
--- a/core/core-frontend/src/components/grid-table/src/GridTable.vue
+++ b/core/core-frontend/src/components/grid-table/src/GridTable.vue
@@ -127,7 +127,6 @@ defineExpose({
 <template>
   <div class="flex-table" :class="!tableData.length && 'no-data'">
     <el-table
-      header-cell-class-name="header-cell"
       ref="table"
       :border="border"
       v-bind="state.tableAttrs"
diff --git a/core/core-frontend/src/components/handle-more/src/DvHandleMore.vue b/core/core-frontend/src/components/handle-more/src/DvHandleMore.vue
index e374e65..702246b 100644
--- a/core/core-frontend/src/components/handle-more/src/DvHandleMore.vue
+++ b/core/core-frontend/src/components/handle-more/src/DvHandleMore.vue
@@ -7,7 +7,9 @@ import { ref, PropType, computed } from 'vue'
 import ShareHandler from '@/views/share/share/ShareHandler.vue'
 import { useShareStoreWithOut } from '@/store/modules/share'
 import { isDesktop } from '@/utils/ModelUtil'
+import { useI18n } from '@/hooks/web/useI18n'
 const shareStore = useShareStoreWithOut()
+const { t } = useI18n()
 
 export interface Menu {
   svgName?: string
@@ -64,11 +66,15 @@ const callBack = param => {
     return
   }
   if (props.node.leaf && props.node?.weight >= 7) {
-    menus.value[0]['divided'] = true
     menus.value.splice(0, 0, param)
   }
 }
 const emit = defineEmits(['handleCommand'])
+
+const menuDisabledCheck = ele => {
+  // do return
+  return ele.disabled || (props.node.extraFlag1 === 0 && ['share', 'copy'].includes(ele.command))
+}
 </script>
 
 <template>
@@ -88,13 +94,30 @@ const emit = defineEmits(['handleCommand'])
           :command="ele.command"
           v-for="ele in menus"
           :key="ele.label"
-          :disabled="ele.disabled"
-          :class="{ 'de-hidden-drop-item': ele.hidden }"
+          :disabled="menuDisabledCheck(ele)"
+          :class="{
+            'de-hidden-drop-item':
+              ele.hidden || (ele.command === 'cancelPublish' && node.extraFlag1 === 0)
+          }"
         >
           <el-icon class="handle-icon" color="#646a73" size="16" v-if="ele.svgName">
-            <Icon><component class="svg-icon" :is="ele.svgName"></component></Icon>
+            <Icon
+              ><component
+                class="svg-icon"
+                :class="{ 'custom-disable': menuDisabledCheck(ele) }"
+                :is="ele.svgName"
+              ></component
+            ></Icon>
           </el-icon>
-          {{ ele.label }}
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            :content="t('visualization.publish_tips2', [ele.label])"
+            :disabled="!menuDisabledCheck(ele)"
+            placement="top-start"
+          >
+            {{ ele.label }}
+          </el-tooltip>
         </el-dropdown-item>
       </el-dropdown-menu>
     </template>
@@ -110,11 +133,14 @@ const emit = defineEmits(['handleCommand'])
 </template>
 
 <style lang="less">
+.custom-disable {
+  color: var(--ed-text-color-disabled) !important;
+}
 .de-hidden-drop-item {
-  display: none;
+  display: none !important;
 }
 .menu-more-dv_popper {
-  width: 120px;
+  min-width: 120px;
   margin-top: -2px !important;
 }
 
diff --git a/core/core-frontend/src/components/handle-more/src/HandleMore.vue b/core/core-frontend/src/components/handle-more/src/HandleMore.vue
index 3d3e5d9..f1fefab 100644
--- a/core/core-frontend/src/components/handle-more/src/HandleMore.vue
+++ b/core/core-frontend/src/components/handle-more/src/HandleMore.vue
@@ -20,7 +20,7 @@ withDefaults(
     inTable?: boolean
   }>(),
   {
-    placement: 'right-start',
+    placement: 'bottom-end',
     iconSize: '16px',
     inTable: false
   }
@@ -53,9 +53,9 @@ const emit = defineEmits(['handleCommand'])
           :key="ele.label"
           :disabled="ele.disabled"
         >
-          <!-- <el-icon class="handle-icon" :style="{ fontSize: iconSize }" v-if="ele.svgName">
+          <el-icon class="handle-icon" :style="{ fontSize: iconSize }" v-if="ele.svgName">
             <Icon><component class="svg-icon" :is="ele.svgName"></component></Icon>
-          </el-icon> -->
+          </el-icon>
           {{ ele.label }}
         </el-dropdown-item>
       </el-dropdown-menu>
diff --git a/core/core-frontend/src/components/icon-group/chart-dark-list.ts b/core/core-frontend/src/components/icon-group/chart-dark-list.ts
index 600db62..51cd042 100644
--- a/core/core-frontend/src/components/icon-group/chart-dark-list.ts
+++ b/core/core-frontend/src/components/icon-group/chart-dark-list.ts
@@ -43,6 +43,7 @@ import waterfallDark from '@/assets/svg/waterfall-dark.svg'
 import wordCloudDark from '@/assets/svg/word-cloud-dark.svg'
 import tHeatmapDark from '@/assets/svg/t-heatmap-dark.svg'
 import circlePackingDark from '@/assets/svg/circle-packing-dark.svg'
+import bulletGraphDark from '@/assets/svg/bullet-graph-dark.svg'
 
 const iconChartDarkMap = {
   'area-dark': areaDark,
@@ -89,7 +90,8 @@ const iconChartDarkMap = {
   'waterfall-dark': waterfallDark,
   'word-cloud-dark': wordCloudDark,
   't-heatmap-dark': tHeatmapDark,
-  'circle-packing-dark': circlePackingDark
+  'circle-packing-dark': circlePackingDark,
+  'bullet-graph-dark': bulletGraphDark
 }
 
 export { iconChartDarkMap }
diff --git a/core/core-frontend/src/components/icon-group/chart-list.ts b/core/core-frontend/src/components/icon-group/chart-list.ts
index 02e6ba9..63653c6 100644
--- a/core/core-frontend/src/components/icon-group/chart-list.ts
+++ b/core/core-frontend/src/components/icon-group/chart-list.ts
@@ -46,6 +46,7 @@ import pictureGroup from '@/assets/svg/picture-group.svg'
 import filter from '@/assets/svg/filter.svg'
 import outerParams from '@/assets/svg/icon_params_setting.svg'
 import circlePacking from '@/assets/svg/circle-packing.svg'
+import bulletGraph from '@/assets/svg/bullet-graph.svg'
 
 const iconChartMap = {
   'area-stack': areaStack,
@@ -95,7 +96,8 @@ const iconChartMap = {
   'picture-group': pictureGroup,
   filter: filter,
   outerParams: outerParams,
-  'circle-packing': circlePacking
+  'circle-packing': circlePacking,
+  'bullet-graph': bulletGraph
 }
 
 export { iconChartMap }
diff --git a/core/core-frontend/src/components/icon-group/datasource-list.ts b/core/core-frontend/src/components/icon-group/datasource-list.ts
index 2c86934..fe516e5 100644
--- a/core/core-frontend/src/components/icon-group/datasource-list.ts
+++ b/core/core-frontend/src/components/icon-group/datasource-list.ts
@@ -12,6 +12,7 @@ import db2Ds from '@/assets/svg/db2-ds.svg'
 import redshiftDs from '@/assets/svg/redshift-ds.svg'
 import APIDs from '@/assets/svg/API-ds.svg'
 import ExcelDs from '@/assets/svg/Excel-ds.svg'
+import ExcelRemoteDs from '@/assets/svg/Excel-remote-ds.svg'
 import dorisDs from '@/assets/svg/doris-ds.svg'
 import esDs from '@/assets/svg/es-ds.svg'
 const iconDatasourceMap = {
@@ -29,6 +30,7 @@ const iconDatasourceMap = {
   redshift: redshiftDs,
   API: APIDs,
   Excel: ExcelDs,
+  ExcelRemote: ExcelRemoteDs,
   doris: dorisDs,
   es: esDs
 }
diff --git a/core/core-frontend/src/components/relation-chart/index.vue b/core/core-frontend/src/components/relation-chart/index.vue
index 3a49a5b..365b74c 100644
--- a/core/core-frontend/src/components/relation-chart/index.vue
+++ b/core/core-frontend/src/components/relation-chart/index.vue
@@ -94,7 +94,7 @@ defineExpose({
   <el-drawer
     title="血缘关系图"
     v-model="relationDrawer"
-    custom-class="de-relation-drawer"
+    modal-class="de-relation-drawer"
     size="1200px"
     direction="rtl"
   >
diff --git a/core/core-frontend/src/components/rich-text/TinymacEditorAlarm.vue b/core/core-frontend/src/components/rich-text/TinymacEditorAlarm.vue
index c3794ce..12e445f 100644
--- a/core/core-frontend/src/components/rich-text/TinymacEditorAlarm.vue
+++ b/core/core-frontend/src/components/rich-text/TinymacEditorAlarm.vue
@@ -70,7 +70,7 @@ const init = ref({
   toolbar:
     'undo redo |fontselect fontsizeselect |forecolor backcolor bold italic |underline strikethrough | splitDateButton lineheight| formatselect |' +
     'alignleft aligncenter alignright | bullist numlist |' +
-    ' blockquote subscript superscript removeformat | table image media link',
+    ' blockquote subscript superscript removeformat',
   toolbar_location: '/',
   font_formats:
     '微软雅黑=Microsoft YaHei;宋体=SimSun;黑体=SimHei;仿宋=FangSong;华文黑体=STHeiti;华文楷体=STKaiti;华文宋体=STSong;华文仿宋=STFangsong;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings',
diff --git a/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue b/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
index 9d13d23..baf0139 100644
--- a/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
+++ b/core/core-frontend/src/components/visualization/CanvasBaseSetting.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="width: 100%" ref="bgForm">
-    <el-form label-position="top" style="width: 100%; margin-bottom: 16px">
+    <el-form size="small" label-position="top" style="width: 100%; margin-bottom: 16px">
       <el-form-item
         class="form-item no-margin-bottom"
         :class="'form-item-' + themes"
diff --git a/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue b/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
index 33c8cb8..425097e 100644
--- a/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
+++ b/core/core-frontend/src/components/visualization/CanvasCacheDialog.vue
@@ -33,12 +33,8 @@
 import warnTree from '@/assets/svg/warn-tree.svg'
 import { ref } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
-import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
-const dvMainStore = dvMainStoreWithOut()
 const dialogShow = ref(false)
 const { t } = useI18n()
-import { useCache } from '@/hooks/web/useCache'
-const { wsCache } = useCache()
 const emits = defineEmits(['doUseCache'])
 
 const dialogInfo = {
diff --git a/core/core-frontend/src/components/visualization/CanvasOptBar.vue b/core/core-frontend/src/components/visualization/CanvasOptBar.vue
index 9199b4d..05ac149 100644
--- a/core/core-frontend/src/components/visualization/CanvasOptBar.vue
+++ b/core/core-frontend/src/components/visualization/CanvasOptBar.vue
@@ -2,10 +2,13 @@
   <div
     v-if="existLinkage && (!dvMainStore.mobileInPc || isMobile())"
     class="bar-main-right"
-    :class="{ 'bar-main-edit-right': dvEditMode }"
+    :class="{
+      'bar-main-preview-fixed': dvPreviewMode,
+      'bar-main-preview-fixed-fullscreen': fullscreenFlag
+    }"
     @mousedown="handOptBarMousedown"
   >
-    <el-button size="mini" type="warning" @click="clearAllLinkage"
+    <el-button type="warning" @click="clearAllLinkage"
       ><el-icon class="bar-base-icon">
         <Icon name="dv-bar-unLinkage"><dvBarUnLinkage class="svg-icon" /></Icon></el-icon
       >{{ $t('visualization.remove_all_linkage') }}</el-button
@@ -20,7 +23,9 @@ import { computed } from 'vue'
 import { isMainCanvas } from '@/utils/canvasUtils'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { isMobile } from '@/utils/utils'
+import { storeToRefs } from 'pinia'
 const dvMainStore = dvMainStoreWithOut()
+const { fullscreenFlag } = storeToRefs(dvMainStore)
 
 const props = defineProps({
   canvasStyleData: {
@@ -35,6 +40,10 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'canvas-main'
+  },
+  isFixed: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -48,9 +57,10 @@ const clearAllLinkage = () => {
   useEmitt().emitter.emit('clearPanelLinkage', { viewId: 'all' })
 }
 
-const dvEditMode = computed(() => {
-  return dvMainStore.dvInfo.type === 'dataV' && dvMainStore.editMode === 'preview' && !isMobile()
+const dvPreviewMode = computed(() => {
+  return dvMainStore.dvInfo.type === 'dataV' && props.isFixed
 })
+
 const existLinkage = computed(() => {
   if (isMainCanvas(props.canvasId)) {
     let linkageFiltersCount = 0
@@ -87,7 +97,7 @@ const existLinkage = computed(() => {
   top: 2px;
   right: 2px;
   opacity: 0.8;
-  z-index: 1;
+  z-index: 2;
   position: absolute;
 }
 
@@ -104,4 +114,14 @@ const existLinkage = computed(() => {
     opacity: 0.8;
   }
 }
+
+.bar-main-preview-fixed {
+  position: fixed;
+  top: 120px;
+  right: 5px;
+}
+
+.bar-main-preview-fixed-fullscreen {
+  top: 5px !important;
+}
 </style>
diff --git a/core/core-frontend/src/components/visualization/ComponentButton.vue b/core/core-frontend/src/components/visualization/ComponentButton.vue
index 1efdbb9..557bd80 100644
--- a/core/core-frontend/src/components/visualization/ComponentButton.vue
+++ b/core/core-frontend/src/components/visualization/ComponentButton.vue
@@ -85,6 +85,5 @@ const emits = defineEmits(['customClick'])
 
 .toolbar-icon {
   font-size: 20px;
-  color: #fff;
 }
 </style>
diff --git a/core/core-frontend/src/components/visualization/ComponentButtonLabel.vue b/core/core-frontend/src/components/visualization/ComponentButtonLabel.vue
index 6513f31..43a78fb 100644
--- a/core/core-frontend/src/components/visualization/ComponentButtonLabel.vue
+++ b/core/core-frontend/src/components/visualization/ComponentButtonLabel.vue
@@ -21,9 +21,7 @@ const emits = defineEmits(['customClick'])
     <el-row class="group_icon" :title="tips" @click="emits('customClick')">
       <el-col :span="24" class="group_inner" :class="{ 'inner-active': active }">
         <Icon><component class="svg-icon toolbar-icon" :is="iconName"></component></Icon>
-        
-         <!-- <img src="@/assets/newimg/avatar.png" alt="" srcset=""> -->
-        <span >{{ title }}</span>
+        <span>{{ title }}</span>
       </el-col>
     </el-row>
     <el-divider class="group-right-border" v-if="showSplitLine" direction="vertical" />
diff --git a/core/core-frontend/src/components/visualization/ComponentEditBar.vue b/core/core-frontend/src/components/visualization/ComponentEditBar.vue
index 6535120..f507b1a 100644
--- a/core/core-frontend/src/components/visualization/ComponentEditBar.vue
+++ b/core/core-frontend/src/components/visualization/ComponentEditBar.vue
@@ -171,6 +171,7 @@
 
           <xpack-component
             :chart="element"
+            resource-table="snapshot"
             jsname="L2NvbXBvbmVudC90aHJlc2hvbGQtd2FybmluZy9FZGl0QmFySGFuZGxlcg=="
             @close-item="closeItem"
           />
@@ -250,9 +251,7 @@ import CustomTabsSort from '@/custom-component/de-tabs/CustomTabsSort.vue'
 import { exportPivotExcel } from '@/views/chart/components/js/panel/common/common_table'
 import { XpackComponent } from '@/components/plugin'
 import { exportPermission, isMobile } from '@/utils/utils'
-import { layerStoreWithOut } from '@/store/modules/data-visualization/layer'
 import { isMainCanvas } from '@/utils/canvasUtils'
-const layerStore = layerStoreWithOut()
 const dvMainStore = dvMainStoreWithOut()
 const snapshotStore = snapshotStoreWithOut()
 const copyStore = copyStoreWithOut()
@@ -267,7 +266,8 @@ const emits = defineEmits([
   'showViewDetails',
   'amRemoveItem',
   'linkJumpSetOpen',
-  'linkageSetOpen'
+  'linkageSetOpen',
+  'componentImageDownload'
 ])
 const { t } = useI18n()
 const { emitter } = useEmitt()
@@ -479,13 +479,12 @@ const exportAsExcel = () => {
   const chartExtRequest = dvMainStore.getLastViewRequestInfo(element.value.id)
   const viewInfo = dvMainStore.getViewDetails(element.value.id)
   const chart = { ...viewInfo, chartExtRequest, data: viewDataInfo, busiFlag: dvInfo.value.type }
-  exportExcelDownload(chart, () => {
+  exportExcelDownload(chart, dvInfo.value.name, () => {
     openMessageLoading(callbackExport)
   })
 }
 const exportAsImage = () => {
-  // do export
-  useEmitt().emitter.emit('componentImageDownload-' + element.value.id)
+  emits('componentImageDownload')
 }
 const deleteComponent = () => {
   eventBus.emit('removeMatrixItem-' + canvasId.value, index.value)
diff --git a/core/core-frontend/src/components/visualization/DatasetParamsComponent.vue b/core/core-frontend/src/components/visualization/DatasetParamsComponent.vue
index d50ee7a..eba82dc 100644
--- a/core/core-frontend/src/components/visualization/DatasetParamsComponent.vue
+++ b/core/core-frontend/src/components/visualization/DatasetParamsComponent.vue
@@ -1,12 +1,10 @@
 <script lang="ts" setup>
 import { computed, reactive, ref } from 'vue'
-import { useI18n } from '@/hooks/web/useI18n'
 import { deepCopy } from '@/utils/utils'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { ElMessage } from 'element-plus-secondary'
-const { t } = useI18n()
 const loading = ref(false)
 const subject = ref()
 const subjectDialogShow = ref(false)
@@ -67,8 +65,6 @@ defineExpose({
   statesCheck,
   resetForm
 })
-
-const emits = defineEmits(['finish'])
 </script>
 
 <template>
diff --git a/core/core-frontend/src/components/visualization/DePreviewPopDialog.vue b/core/core-frontend/src/components/visualization/DePreviewPopDialog.vue
index c6389ab..1262eb1 100644
--- a/core/core-frontend/src/components/visualization/DePreviewPopDialog.vue
+++ b/core/core-frontend/src/components/visualization/DePreviewPopDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <el-dialog
     ref="previewPopDialog"
-    :custom-class="'preview_pop_custom'"
+    modal-class="preview_pop_custom"
     :append-to-body="true"
     :fullscreen="state.fullscreen"
     v-model="state.dialogShow"
@@ -20,11 +20,13 @@
       />
     </div>
   </el-dialog>
+  <XpackComponent ref="xpackIframe" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvSWZyYW1lU2VsZg==" />
 </template>
 
 <script setup lang="ts">
-import { computed, reactive } from 'vue'
-
+import { computed, reactive, ref } from 'vue'
+import { useEmbedded } from '@/store/modules/embedded'
+import { XpackComponent } from '@/components/plugin'
 const state = reactive({
   dialogShow: false,
   name: '',
@@ -33,7 +35,8 @@ const state = reactive({
   width: '70vw',
   height: '70%'
 })
-
+const xpackIframe = ref()
+const embeddedStore = useEmbedded()
 const dialogStyle = computed(() => {
   if (state.fullscreen) {
     return {}
@@ -46,7 +49,7 @@ const previewInit = params => {
   if (params.url.includes('?')) {
     state.url = `${params.url}&popWindow=true`
   } else {
-    state.url = `${params.url}&popWindow=true`
+    state.url = `${params.url}?popWindow=true`
   }
   if (params.size === 'large') {
     state.fullscreen = true
@@ -60,6 +63,15 @@ const previewInit = params => {
     state.height = '65%'
   }
   state.dialogShow = true
+  if (embeddedStore.getToken && state.url.includes('#/preview?dvId=')) {
+    if (xpackIframe?.value) {
+      const pm = {
+        methodName: 'iframeInit',
+        args: null
+      }
+      xpackIframe.value.invokeMethod(pm)
+    }
+  }
 }
 
 defineExpose({
diff --git a/core/core-frontend/src/components/visualization/DvSidebar.vue b/core/core-frontend/src/components/visualization/DvSidebar.vue
index 26c4aa3..7c07be9 100644
--- a/core/core-frontend/src/components/visualization/DvSidebar.vue
+++ b/core/core-frontend/src/components/visualization/DvSidebar.vue
@@ -5,21 +5,15 @@ import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
 import Icon from '../icon-custom/src/Icon.vue'
-import dvInfoSvg from '@/assets/svg/dv-info.svg'
-import { useI18n } from '@/hooks/web/useI18n'
-import combinationSvg from '@/assets/svg/combinationpage.svg'
-import scatterSvg from '@/assets/svg/scatterpage.svg'
-import { composeStoreWithOut } from '@/store/modules/data-visualization/compose'
 const dvMainStore = dvMainStoreWithOut()
-const { canvasCollapse,curComponent } = storeToRefs(dvMainStore)
+const { canvasCollapse } = storeToRefs(dvMainStore)
 let componentNameEdit = ref(false)
 let inputComponentName = ref({ id: null, name: null })
 let componentNameInputAttr = ref(null)
+import dvInfoSvg from '@/assets/svg/dv-info.svg'
+import { useI18n } from '@/hooks/web/useI18n'
 const snapshotStore = snapshotStoreWithOut()
-const composeStore = composeStoreWithOut()
-const { areaData } = storeToRefs(composeStore)
 const { t } = useI18n()
-const emit = defineEmits(['close', 'rename'])
 const props = defineProps({
   element: {
     required: false,
@@ -64,13 +58,10 @@ const props = defineProps({
     type: String as PropType<EditorTheme>,
     default: 'light'
   },
-  title: String,
-  activePosition: {
-    type: String,
-    default: 'canvas'
-  }
+  title: String
 })
-const { width, asidePosition, sideName, themeInfo, view, themes, element,activePosition } = toRefs(props)
+
+const { width, asidePosition, sideName, themeInfo, view, themes, element } = toRefs(props)
 const collapseChange = () => {
   canvasCollapse.value[sideName.value] = !canvasCollapse.value[sideName.value]
 }
@@ -131,33 +122,6 @@ const editComponentName = () => {
 const onComponentNameChange = () => {
   snapshotStore.recordSnapshotCache('onComponentNameChange')
 }
-
-//组合
-const combinationclick = () => {
-  if(areaData.value.components.length){
-    composeStore.compose()
-    snapshotStore.recordSnapshotCache('componentCompose')
-    menuOpt('componentCompose')
-  }else{
-    ElMessage.warning('请选择多个组件进行组合！')
-    return
-  }
-}
-//打散
-const scatterclick= () => {
-  if(curComponent.value['component'] == 'Group'){
-    composeStore.decompose()
-    snapshotStore.recordSnapshotCache('decompose')
-    menuOpt('decompose')
-  }else{
-    ElMessage.warning('请选择组合！')
-    return
-  }
-}
-const menuOpt = optName => {
-  const param = { opt: optName }
-  activePosition.value === 'aside' && emit('close', param)
-}
 </script>
 
 <template>
@@ -173,7 +137,7 @@ const menuOpt = optName => {
         :id="'attr-slide-component-name' + slideIndex"
         v-if="!canvasCollapse[sideName]"
         class="name-area-attr"
-        style="max-width: 180px; text-overflow: ellipsis; white-space: nowrap;"
+        style="max-width: 180px; text-overflow: ellipsis; white-space: nowrap"
         :style="{ width: componentNameEdit ? '300px' : 'auto' }"
         :class="{ 'component-name-dark': themeInfo === 'dark' }"
         @dblclick="editComponentName"
@@ -191,7 +155,7 @@ const menuOpt = optName => {
             <span>
               <el-icon
                 v-show="element && element['id']"
-                style="margin: 6px 0 0 4px; cursor: pointer"
+                style="margin: 2px 0 0 4px; cursor: pointer"
                 ><Icon><dvInfoSvg class="svg-icon" /></Icon
               ></el-icon>
             </span>
@@ -204,30 +168,20 @@ const menuOpt = optName => {
           </div>
         </el-popover>
       </div>
-      <div style="display: flex;">
-        <div v-if="!canvasCollapse[sideName] && asidePosition === 'left'">
-          <el-icon title="组合" style="font-size: 16px;margin-right: 8px;cursor: pointer" @click="combinationclick">
-            <Icon><combinationSvg class="svg-icon" /></Icon>
-          </el-icon>
-          <el-icon title="打散" style="font-size: 16px;margin-right: 5px;cursor: pointer" @click="scatterclick">
-            <Icon><scatterSvg class="svg-icon" /></Icon>
-          </el-icon>
-        </div>
-        <el-icon
-          :title="title"
-          :class="['custom-icon-' + themeInfo, 'collapse-icon-' + themeInfo]"
-          size="20px"
-          @click="collapseChange"
-        >
-          <Expand
-            v-if="
-              (canvasCollapse[sideName] && asidePosition === 'left') ||
-              (!canvasCollapse[sideName] && asidePosition === 'right')
-            "
-          />
-          <Fold v-else />
-        </el-icon>
-    </div>
+      <el-icon
+        :title="title"
+        :class="['custom-icon-' + themeInfo, 'collapse-icon-' + themeInfo]"
+        size="20px"
+        @click="collapseChange"
+      >
+        <Expand
+          v-if="
+            (canvasCollapse[sideName] && asidePosition === 'left') ||
+            (!canvasCollapse[sideName] && asidePosition === 'right')
+          "
+        />
+        <Fold v-else />
+      </el-icon>
     </el-row>
     <div class="main-content" v-if="!canvasCollapse[sideName]">
       <el-scrollbar>
@@ -393,7 +347,7 @@ const menuOpt = optName => {
     height: 100%;
   }
   .ed-icon{
-    
+
   }
 }
 </style>
diff --git a/core/core-frontend/src/components/visualization/JumpSetOuterContentEditor.vue b/core/core-frontend/src/components/visualization/JumpSetOuterContentEditor.vue
index ec66194..777c00b 100644
--- a/core/core-frontend/src/components/visualization/JumpSetOuterContentEditor.vue
+++ b/core/core-frontend/src/components/visualization/JumpSetOuterContentEditor.vue
@@ -40,7 +40,7 @@ const setNameIdTrans = (from, to, originName, name2Auto?: string[]) => {
     pre[next[from]] = next[to]
     return pre
   }, {})
-  const on = originName.match(/\[(.+?)\]/g)
+  const on = originName.match(/\[(.+?)\]/g) || []
   if (on) {
     on.forEach(itm => {
       const ele = itm.slice(1, -1)
diff --git a/core/core-frontend/src/components/visualization/LinkJumpSet.vue b/core/core-frontend/src/components/visualization/LinkJumpSet.vue
index 5be55cb..694ec55 100644
--- a/core/core-frontend/src/components/visualization/LinkJumpSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkJumpSet.vue
@@ -236,7 +236,12 @@
                                 state.linkJumpInfo?.jumpType === 'newPop'
                             }"
                           >
-                            <el-scrollbar height="fit-content" max-height="178px">
+                            <el-scrollbar
+                              height="fit-content"
+                              :max-height="
+                                state.linkJumpInfo?.jumpType === 'newPop' ? '138px' : '178px'
+                              "
+                            >
                               <div
                                 style="display: flex; margin-bottom: 6px"
                                 v-for="(
@@ -663,15 +668,10 @@ const resourceType = computed(() =>
   dvInfo.value.type === 'dashboard' ? t('work_branch.dashboard') : t('work_branch.big_data_screen')
 )
 
-const selectSourceTips = t('visualization.select_target_resource')                     
+const selectSourceTips = t('visualization.select_target_resource')
 
 const targetSource = t('visualization.target_dashboard_dataV')
 
-const curSource =
-  dvInfo.value.type === 'dashboard'
-    ? t('visualization.cur_dashboard')
-    : t('visualization.cur_screen')
-
 const state = reactive({
   curDataVWeight: 0,
   activeCollapse: 'view',
@@ -746,6 +746,28 @@ const dialogInit = viewItem => {
   init(viewItem)
 }
 
+const initCurFilterFieldArray = componentDataCheck => {
+  componentDataCheck.forEach(componentItem => {
+    if (componentItem.component === 'VQuery' && componentItem.propValue instanceof Array) {
+      componentItem.propValue.forEach(filterItem => {
+        if (filterItem.checkedFields.includes(state.viewId)) {
+          state.linkJumpCurFilterFieldArray.push({
+            id: filterItem.id,
+            name: filterItem.name,
+            deType: 'filter'
+          })
+        }
+      })
+    } else if (componentItem.component === 'Group') {
+      initCurFilterFieldArray(componentItem.propValue)
+    } else if (componentItem.component === 'DeTabs') {
+      componentItem.propValue.forEach(tabItem => {
+        initCurFilterFieldArray(tabItem.componentData)
+      })
+    }
+  })
+}
+
 const init = viewItem => {
   state.initState = false
   state.viewId = viewItem.id
@@ -792,19 +814,7 @@ const init = viewItem => {
 
   // 获取当前过滤条件明细 过滤原则：1.在当前仪表板或者大屏 2.作用于当前图表
   state.linkJumpCurFilterFieldArray = []
-  componentData.value.forEach(componentItem => {
-    if (componentItem.component === 'VQuery' && componentItem.propValue instanceof Array) {
-      componentItem.propValue.forEach(filterItem => {
-        if (filterItem.checkedFields.includes(state.viewId)) {
-          state.linkJumpCurFilterFieldArray.push({
-            id: filterItem.id,
-            name: filterItem.name,
-            deType: 'filter'
-          })
-        }
-      })
-    }
-  })
+  initCurFilterFieldArray(componentData.value)
 
   if (chartDetails.tableId) {
     // 获取当前数据集信息
@@ -1108,7 +1118,7 @@ defineExpose({
 
 .preview {
   margin-top: 5px;
-  border: 1px solid #434343;
+  border: 1px solid #e6e6e6;
   border-radius: 4px;
   height: 470px !important;
   overflow: hidden;
diff --git a/core/core-frontend/src/components/visualization/LinkageSet.vue b/core/core-frontend/src/components/visualization/LinkageSet.vue
index 149179d..a9a6dbf 100644
--- a/core/core-frontend/src/components/visualization/LinkageSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkageSet.vue
@@ -158,7 +158,23 @@
           </el-col>
           <el-col :span="16" class="preview-show">
             <el-row class="content-head">{{ t('visualization.linkage_setting_tips1') }}</el-row>
-            <el-row v-if="state.linkageInfo && state.linkageInfo.linkageActive">
+            <el-row
+              v-if="
+                state.linkageInfo &&
+                state.linkageInfo.linkageActive &&
+                curComponent?.innerType === 'indicator'
+              "
+              style="height: 100%"
+              class="custom-position"
+            >
+              <Icon name="dv-empty"
+                ><dvEmpty style="width: 125px; height: 125px" class="svg-icon"
+              /></Icon>
+              <span style="margin-top: 8px; font-size: 14px">
+                {{ t('visualization.indicator_linkage') }}</span
+              >
+            </el-row>
+            <el-row v-else-if="state.linkageInfo && state.linkageInfo.linkageActive">
               <el-row style="margin-top: 5px">
                 <div style="display: flex" class="inner-content">
                   <div style="flex: 1">{{ t('visualization.current_chart_source_field') }}</div>
@@ -367,7 +383,10 @@ const sameDsShow = computed(
 )
 
 const diffDsShow = computed(
-  () => curLinkageTargetViewsInfoDiffDs.value && curLinkageTargetViewsInfoDiffDs.value.length > 0
+  () =>
+    curLinkageTargetViewsInfoDiffDs.value &&
+    curLinkageTargetViewsInfoDiffDs.value.length > 0 &&
+    curComponent.value.innerType !== 'indicator'
 )
 
 const dialogInit = viewItem => {
@@ -387,7 +406,8 @@ const linkageSetting = curViewId => {
     dvId: dvInfo.value.id,
     sourceViewId: curViewId,
     targetViewIds: targetViewIds,
-    linkageInfo: null
+    linkageInfo: null,
+    resourceTable: 'snapshot'
   }
   getViewLinkageGatherArray(requestInfo).then(rsp => {
     // 获取当前仪表板的图表(去掉当前图表)
@@ -554,14 +574,22 @@ const linkageFieldAdaptor = async data => {
           const curCheckAllAxisStr =
             JSON.stringify(state.curLinkageViewInfo.xAxis) +
             JSON.stringify(state.curLinkageViewInfo.xAxisExt) +
+            JSON.stringify(state.curLinkageViewInfo.extStack) +
             (state.curLinkageViewInfo.type.includes('chart-mix')
               ? JSON.stringify(state.curLinkageViewInfo.extBubble)
+              : '') +
+            (['indicator'].includes(state.curLinkageViewInfo.type)
+              ? JSON.stringify(state.curLinkageViewInfo.yAxis)
               : '')
           const targetCheckAllAxisStr =
             JSON.stringify(targetChartDetails.xAxis) +
             JSON.stringify(targetChartDetails.xAxisExt) +
+            JSON.stringify(state.curLinkageViewInfo.extStack) +
             (targetChartDetails.type.includes('chart-mix')
               ? JSON.stringify(targetChartDetails.extBubble)
+              : '') +
+            (['indicator'].includes(state.curLinkageViewInfo.type)
+              ? JSON.stringify(state.curLinkageViewInfo.yAxis)
               : '')
           state.sourceLinkageInfo.targetViewFields.forEach(item => {
             if (
@@ -586,10 +614,11 @@ const sourceLinkageInfoFilter = computed(() => {
       JSON.stringify(state.curLinkageViewInfo.xAxis) +
       JSON.stringify(state.curLinkageViewInfo.drillFields) +
       JSON.stringify(state.curLinkageViewInfo.xAxisExt) +
+      JSON.stringify(state.curLinkageViewInfo.extStack) +
       (state.curLinkageViewInfo.type.includes('chart-mix')
         ? JSON.stringify(state.curLinkageViewInfo.extBubble)
         : '') +
-      (state.curLinkageViewInfo.type.includes('table-normal')
+      (['table-normal', 'indicator'].includes(state.curLinkageViewInfo.type)
         ? JSON.stringify(state.curLinkageViewInfo.yAxis)
         : '')
     return state.sourceLinkageInfo.targetViewFields.filter(item =>
@@ -644,7 +673,7 @@ defineExpose({
 
 .preview {
   margin-top: 5px;
-  border: 1px solid rgb(61,61,61);
+  border: 1px solid #e6e6e6;
   border-radius: 4px;
   height: 470px !important;
   overflow: hidden;
@@ -652,7 +681,7 @@ defineExpose({
 }
 
 .preview-show {
-  border-left: 1px solid #5f5f5f;
+  border-left: 1px solid #e6e6e6;
   height: 470px;
   background-size: 100% 100% !important;
 }
@@ -701,7 +730,7 @@ defineExpose({
   flex-direction: column;
   span {
     line-height: 22px;
-    color: #909399;
+    color: #646a73;
   }
 }
 
@@ -742,7 +771,7 @@ defineExpose({
     margin-right: 16px;
     font-weight: 400;
     font-size: 12px;
-    color: #d2d2d2;
+    color: #646a73;
     .ed-switch {
       margin-left: 8px;
     }
diff --git a/core/core-frontend/src/components/visualization/LinkageSetOption.vue b/core/core-frontend/src/components/visualization/LinkageSetOption.vue
index 565a865..4642a7c 100644
--- a/core/core-frontend/src/components/visualization/LinkageSetOption.vue
+++ b/core/core-frontend/src/components/visualization/LinkageSetOption.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, toRefs } from 'vue'
+import { toRefs } from 'vue'
 import { propTypes } from '@/utils/propTypes'
 import { useI18n } from '@/hooks/web/useI18n'
 const { t } = useI18n()
@@ -21,13 +21,11 @@ const props = defineProps({
   }
 })
 
-const selection = ref()
-
 const selectionChange = () => {
   // do selection
 }
 
-const { title, themes, actionSelection } = toRefs(props)
+const { actionSelection } = toRefs(props)
 </script>
 
 <template>
@@ -44,7 +42,7 @@ const { title, themes, actionSelection } = toRefs(props)
         <el-icon style="margin: 5px 0 0 5px"><Setting /></el-icon
       ></span>
     </template>
-    <el-row style="color: #fff;">
+    <el-row>
       {{ t('visualization.select_linkage_tips') }}
     </el-row>
     <el-row>
diff --git a/core/core-frontend/src/components/visualization/OuterParamsSet.vue b/core/core-frontend/src/components/visualization/OuterParamsSet.vue
index 147ae85..c42dd3c 100644
--- a/core/core-frontend/src/components/visualization/OuterParamsSet.vue
+++ b/core/core-frontend/src/components/visualization/OuterParamsSet.vue
@@ -50,7 +50,7 @@
                           style="width: 100%"
                           v-model="data.paramName"
                           :placeholder="$t('visualization.input_param_name')"
-                          @blur="closeEdit"
+                          @blur="closeEdit(data)"
                         />
                       </div>
                       <span class="tree-select-field" v-else-if="data.paramName">
@@ -62,8 +62,7 @@
                     </span>
                     <span class="icon-more" v-if="!(curEditDataId === data.paramsInfoId)">
                       <handle-more
-                        style="margin-right: 15px;"
-                        class="icon-more-box"
+                        style="margin-right: 15px"
                         @handle-command="cmd => outerParamsOperation(cmd, node, data)"
                         :menu-list="state.optMenu"
                         :icon-name="icon_more_vertical_outlined"
@@ -324,10 +323,10 @@
 <script setup lang="ts">
 import _delete from '@/assets/svg/icon_delete-trash_outlined.svg'
 import edit from '@/assets/svg/icon_rename_outlined.svg'
-import icon_more_vertical_outlined from '@/assets/svg/icon_more-vertical_outlined_white.svg'
+import icon_more_vertical_outlined from '@/assets/svg/icon_more-vertical_outlined.svg'
 import filterParams from '@/assets/svg/filter-params.svg'
 import icon_dataset from '@/assets/svg/icon_dataset.svg'
-import { ref, reactive, computed, nextTick } from 'vue'
+import { ref, reactive, nextTick } from 'vue'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import { ElCol, ElIcon, ElInput, ElMessage } from 'element-plus-secondary'
@@ -465,11 +464,18 @@ const validateArgs = (val, id) => {
   }
 }
 
-const viewSelectedField = computed(() =>
-  state.outerParamsInfo?.targetViewInfoList?.map(targetViewInfo => targetViewInfo.targetViewId)
-)
-
-const closeEdit = () => {
+const closeEdit = params => {
+  if (!params.paramName || params.paramName.length < 2 || params.paramName.length > 25) {
+    ElMessage({
+      message: t('commons.params_value') + t('common.input_limit', [2, 25]),
+      type: 'warning',
+      showClose: true
+    })
+    if (params.paramName.length > 25) {
+      params.paramName = params.paramName.splice(0.25)
+    }
+    return
+  }
   curEditDataId.value = null
 }
 
@@ -481,18 +487,6 @@ const outerParamsOperation = (cmd, node, data) => {
   }
 }
 
-const fieldIdDisabledCheck = targetViewInfo => {
-  return (
-    state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
-    state.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 &&
-    state.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty'
-  )
-}
-
-const getFieldArray = id => {
-  return state.viewIdFieldArrayMap[id]
-}
-
 const initParams = async () => {
   state.baseFilterInfo = []
   state.baseDatasetInfo = []
@@ -720,28 +714,6 @@ const getPanelViewList = dvId => {
   })
 }
 
-const addOuterParamsField = () => {
-  state.outerParamsInfo.targetViewInfoList.push({
-    targetViewId: '',
-    targetFieldId: ''
-  })
-}
-const deleteOuterParamsField = index => {
-  state.outerParamsInfo.targetViewInfoList.splice(index, 1)
-}
-
-const viewInfoOnChange = targetViewInfo => {
-  if (
-    state.viewIdFieldArrayMap[targetViewInfo.targetViewId] &&
-    state.viewIdFieldArrayMap[targetViewInfo.targetViewId].length === 1 &&
-    state.viewIdFieldArrayMap[targetViewInfo.targetViewId][0].id === 'empty'
-  ) {
-    targetViewInfo.targetFieldId = 'empty'
-  } else {
-    targetViewInfo.targetFieldId = null
-  }
-}
-
 const initSelected = data => {
   nextTick(() => {
     outerParamsInfoTree.value.setCurrentKey(data.paramsInfoId)
@@ -809,20 +781,11 @@ defineExpose({
 .root-class {
   margin: 15px 0px 5px;
   justify-content: right;
-  .ed-button{
-    color: #F2F4F5;
-    background-color: #212121;
-    border: 1px solid #434343;
-  }
-  .ed-button--primary{
-    background-color:#0089FF;
-    border: 1px solid #0089FF;
-  }
 }
 
 .preview {
   margin-top: 5px;
-  border: 1px solid #434343;
+  border: 1px solid #e6e6e6;
   border-radius: 4px;
   height: 470px !important;
   overflow: hidden;
@@ -922,18 +885,13 @@ defineExpose({
     margin-left: auto;
     display: none;
   }
-  &:hover {
-    .icon-more {
-      margin-left: auto;
-      display: unset;
-    }
+
+  &:hover .icon-more {
+    margin-left: auto;
+    display: unset;
   }
-  .icon-more-box:hover{
-      border-radius: 4px;
-      background: #434343;
-    }
 }
-rgb(2, 1, 1)
+
 .link-icon-join {
   font-size: 20px;
   margin-top: 7px;
@@ -1156,7 +1114,7 @@ rgb(2, 1, 1)
 }
 
 .params-attach-setting {
-  border-left: 1px solid #434343;
+  border-left: 1px solid #e6e6e6;
 }
 
 .params-attach-content {
diff --git a/core/core-frontend/src/components/visualization/UserViewEnlarge.vue b/core/core-frontend/src/components/visualization/UserViewEnlarge.vue
index c8bdf55..3a3ac3f 100644
--- a/core/core-frontend/src/components/visualization/UserViewEnlarge.vue
+++ b/core/core-frontend/src/components/visualization/UserViewEnlarge.vue
@@ -7,6 +7,7 @@
     width="70vw"
     trigger="click"
     class="userViewEnlarge-class"
+    @close="handleClose"
   >
     <template #header v-if="!isIframe">
       <div class="header-title">
@@ -34,7 +35,7 @@
             size="middle"
             @click="downloadViewImage"
           >
-            <el-icon color="#ffffff" size="16" style="margin-right: 3px"
+            <el-icon color="#1F2329" size="16" style="margin-right: 3px"
               ><icon_download_outlined
             /></el-icon>
             {{ t('chart.export_img') }}
@@ -68,7 +69,7 @@
               state.dataFrom === 'template'
             "
           >
-            <el-icon color="#ffffff" size="16" style="margin-right: 3px"
+            <el-icon color="#1F2329" size="16" style="margin-right: 3px"
               ><icon_download_outlined
             /></el-icon>
             {{ t('chart.export_raw_details') }}
@@ -181,6 +182,8 @@ import { activeWatermarkCheckUser } from '@/components/watermark/watermark'
 import { getCanvasStyle } from '@/utils/style'
 import { exportPermission } from '@/utils/utils'
 import EmptyBackground from '../empty-background/src/EmptyBackground.vue'
+import { supportExtremumChartType } from '@/views/chart/components/js/extremumUitl'
+import ChartCarouselTooltip from '@/views/chart/components/js/g2plot_tooltip_carousel'
 const downLoading = ref(false)
 const dvMainStore = dvMainStoreWithOut()
 const dialogShow = ref(false)
@@ -188,13 +191,12 @@ const requestStore = useRequestStoreWithOut()
 const permissionStore = usePermissionStoreWithOut()
 let viewInfo = ref<DeepPartial<ChartObj>>(null)
 const config = ref(null)
-const canvasStyleData = ref(null)
 const viewContainer = ref(null)
 const { t } = useI18n()
 const optType = ref(null)
 const chartComponentDetails = ref(null)
 const chartComponentDetails2 = ref(null)
-const { dvInfo, editMode, isIframe } = storeToRefs(dvMainStore)
+const { dvInfo, isIframe, canvasStyleData } = storeToRefs(dvMainStore)
 const exportLoading = ref(false)
 const sourceViewType = ref()
 const activeName = ref('left')
@@ -311,7 +313,6 @@ const dialogInit = (canvasStyle, view, item, opt, params = { scale: 0.5 }) => {
   viewInfo.value = deepCopy(view) as DeepPartial<ChartObj>
   viewInfo.value.customStyle.text.show = false
   config.value = deepCopy(item)
-  canvasStyleData.value = canvasStyle
   if (opt === 'details') {
     if (!viewInfo.value.type?.includes('table')) {
       assign(viewInfo.value, DETAIL_CHART_ATTR)
@@ -324,6 +325,7 @@ const dialogInit = (canvasStyle, view, item, opt, params = { scale: 0.5 }) => {
   }
   nextTick(() => {
     initWatermark()
+    ChartCarouselTooltip.paused()
   })
 }
 
@@ -375,7 +377,7 @@ const downloadViewDetails = (downloadType = 'view') => {
     busiFlag: dvInfo.value.type
   }
   exportLoading.value = true
-  exportExcelDownload(chart, () => {
+  exportExcelDownload(chart, dvInfo.value.name, () => {
     openMessageLoading(exportData)
   })
   exportLoading.value = false
@@ -419,10 +421,18 @@ const openMessageLoading = cb => {
     customClass
   })
 }
+// 地图
+const mapChartTypes = ['bubble-map', 'flow-map', 'heat-map', 'map', 'symbolic-map']
 const htmlToImage = () => {
-  downLoading.value = true
+  downLoading.value = mapChartTypes.includes(viewInfo.value.type) ? false : true
   useEmitt().emitter.emit('renderChart-' + viewInfo.value.id)
-  const renderTime = viewInfo.value.type?.includes('table') ? 2000 : 500
+  useEmitt().emitter.emit('l7-prepare-picture', viewInfo.value.id)
+  // 表格和支持最值图表的渲染时间为2000毫秒，其他图表为500毫秒。
+  const renderTime =
+    viewInfo.value.type?.includes('table') ||
+    supportExtremumChartType({ type: viewInfo.value.type })
+      ? 2000
+      : 500
   setTimeout(() => {
     initWatermark()
     toPng(viewContainer.value)
@@ -432,12 +442,14 @@ const htmlToImage = () => {
         a.setAttribute('download', viewInfo.value.title)
         a.href = dataUrl
         a.click()
+        useEmitt().emitter.emit('l7-unprepare-picture', viewInfo.value.id)
         useEmitt().emitter.emit('renderChart-' + viewInfo.value.id)
         initWatermark()
       })
       .catch(error => {
         downLoading.value = false
         initWatermark()
+        useEmitt().emitter.emit('l7-unprepare-picture', viewInfo.value.id)
         useEmitt().emitter.emit('renderChart-' + viewInfo.value.id)
         console.error('oops, something went wrong!', error)
       })
@@ -447,7 +459,9 @@ const htmlToImage = () => {
 const initWatermark = () => {
   activeWatermarkCheckUser('enlarge-inner-content', 'canvas-main', state.scale)
 }
-
+const handleClose = () => {
+  ChartCarouselTooltip.closeEnlargeDialogDestroy(viewInfo.value.id)
+}
 defineExpose({
   dialogInit
 })
@@ -596,7 +610,7 @@ defineExpose({
  }
  .ed-dropdown-menu{
   background-color: rgb(41, 41, 41);
-  
+
   }
   .ed-dropdown-menu__item{
     color: #fff;
diff --git a/core/core-frontend/src/components/visualization/ViewTrackBar.vue b/core/core-frontend/src/components/visualization/ViewTrackBar.vue
index 17a5f5b..3d1d5ce 100644
--- a/core/core-frontend/src/components/visualization/ViewTrackBar.vue
+++ b/core/core-frontend/src/components/visualization/ViewTrackBar.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
-    <el-dropdown :teleported="false" trigger="click">
+    <el-dropdown
+      :id="'view-track-bar-' + chartId"
+      :teleported="false"
+      trigger="click"
+      @visible-change="visibleChange"
+    >
       <input id="input" ref="trackButton" type="button" hidden />
       <template #dropdown>
         <div :class="{ 'data-mobile': isDataVMobile }">
@@ -12,6 +17,7 @@
             <el-dropdown-item
               v-for="(item, key) in trackMenu"
               :key="key"
+              @mousedown.stop
               @click="trackMenuClick(item)"
               ><span class="menu-item">{{ state.i18n_map[item] }}</span></el-dropdown-item
             >
@@ -52,11 +58,27 @@ const state = reactive({
     linkage: t('visualization.linkage'),
     linkageAndDrill: t('visualization.linkage_and_drill'),
     jump: t('visualization.jump'),
-    enlarge: t('visualization.enlarge')
+    enlarge: t('visualization.enlarge'),
+    event_jump: t('visualization.jump'),
+    event_download: t('visualization.download'),
+    event_share: t('visualization.share'),
+    event_fullScreen: t('visualization.fullscreen'),
+    event_showHidden: t('visualization.pop_area'),
+    event_refreshDataV: t('visualization.refresh'),
+    event_refreshView: t('visualization.refresh_view')
   }
 })
-
-const trackButtonClick = () => {
+const visibleChange = () => {
+  document.querySelectorAll('.g2-tooltip')?.forEach(tooltip => {
+    if (tooltip.id?.includes(chartId.value)) {
+      tooltip.classList.toggle('hidden-tooltip', true)
+    }
+  })
+}
+// 添加图表标识，用于区分不同图表的 tooltip
+const chartId = ref(null)
+const trackButtonClick = (id?: string) => {
+  chartId.value = id
   setTimeout(() => {
     trackButton.value.click()
   }, 50)
diff --git a/core/core-frontend/src/components/visualization/common/ComponentPosition.vue b/core/core-frontend/src/components/visualization/common/ComponentPosition.vue
index 061e888..5f6dbf4 100644
--- a/core/core-frontend/src/components/visualization/common/ComponentPosition.vue
+++ b/core/core-frontend/src/components/visualization/common/ComponentPosition.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-form label-position="left" :label-width="14">
+  <el-form size="small" label-position="left" :label-width="14">
     <el-row :gutter="8" v-for="(x, i) in positionKeysGroup" :key="i">
       <el-col :span="12" v-for="({ key, label, min, max, step }, j) in x" :key="j">
         <el-form-item class="form-item" :class="'form-item-' + themes" :label="label">
@@ -239,7 +239,7 @@ watch(
   display: flex !important;
   .ed-form-item__label {
     line-height: 24px;
-    margin-bottom: 0;
+    margin: 3px 0 !important;
   }
 }
 </style>
diff --git a/core/core-frontend/src/components/visualization/common/DeFullscreen.vue b/core/core-frontend/src/components/visualization/common/DeFullscreen.vue
index f197259..43fb565 100644
--- a/core/core-frontend/src/components/visualization/common/DeFullscreen.vue
+++ b/core/core-frontend/src/components/visualization/common/DeFullscreen.vue
@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
+import { onBeforeUnmount, onMounted } from 'vue'
+import { useEmitt } from '@/hooks/web/useEmitt'
 
 const dvMainStore = dvMainStoreWithOut()
-import screenfull from 'screenfull'
-import { onBeforeUnmount, onMounted, toRefs } from 'vue'
-import { useEmitt } from '@/hooks/web/useEmitt'
 
 const props = defineProps({
   themes: {
@@ -21,41 +20,46 @@ const props = defineProps({
     default: 'preview'
   }
 })
-const { themes } = toRefs(props)
 
 const fullscreenChange = () => {
-  if (screenfull.isEnabled) {
-    dvMainStore.setFullscreenFlag(screenfull.isFullscreen)
-    // 编辑界面使用
-    if (props.showPosition === 'edit') {
-      if (screenfull.isFullscreen) {
-        dvMainStore.setEditMode('preview')
-      } else {
-        dvMainStore.setEditMode('edit')
-      }
-    }
-    // 大屏编辑使用
-    if (props.showPosition === 'dvEdit') {
-      useEmitt().emitter.emit('canvasScrollRestore')
-    }
+  const isFullscreen = !!document.fullscreenElement
+  dvMainStore.setFullscreenFlag(isFullscreen)
+
+  // 编辑界面使用
+  if (props.showPosition === 'edit') {
+    dvMainStore.setEditMode(isFullscreen ? 'preview' : 'edit')
+  }
+
+  // 大屏编辑使用
+  if (props.showPosition === 'dvEdit') {
+    useEmitt().emitter.emit('canvasScrollRestore')
   }
 }
 
 const toggleFullscreen = () => {
-  if (screenfull.isEnabled) {
-    const bodyNode = document.querySelector('body')
-    screenfull.toggle(bodyNode)
+  const bodyNode = document.querySelector('body')
+  if (!document.fullscreenElement) {
+    bodyNode?.requestFullscreen()
+  } else {
+    document.exitFullscreen()
+  }
+}
+
+// 针对钉钉windows版无法退出全屏问题 这里主动退出
+const handleKeydown = event => {
+  if (event.key === 'Escape' && document.fullscreenElement) {
+    document.exitFullscreen()
   }
 }
 
 onMounted(() => {
-  if (screenfull.isEnabled) {
-    screenfull.on('change', fullscreenChange)
-  }
+  document.addEventListener('fullscreenchange', fullscreenChange)
+  document.addEventListener('keydown', handleKeydown)
 })
 
 onBeforeUnmount(() => {
-  screenfull.off('change', fullscreenChange)
+  document.removeEventListener('fullscreenchange', fullscreenChange)
+  document.removeEventListener('keydown', handleKeydown)
 })
 
 defineExpose({
diff --git a/core/core-frontend/src/components/visualization/common/DeUpload.vue b/core/core-frontend/src/components/visualization/common/DeUpload.vue
index 273810b..a0bd834 100644
--- a/core/core-frontend/src/components/visualization/common/DeUpload.vue
+++ b/core/core-frontend/src/components/visualization/common/DeUpload.vue
@@ -107,7 +107,7 @@ const reUpload = e => {
 }
 
 const sizeMessage = () => {
-  ElMessage.success('图片大小不符合')
+  ElMessage.success('图片大小不能超过15M')
 }
 
 onMounted(() => {
diff --git a/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue b/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
index b81cd45..38dceb0 100644
--- a/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
+++ b/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
@@ -13,7 +13,7 @@
       "
       @change="reUpload"
     />
-    <el-form label-position="top" style="width: 100%; margin-bottom: 8px">
+    <el-form size="small" label-position="top" style="width: 100%">
       <el-row :gutter="8">
         <el-col :span="12">
           <el-form-item
@@ -25,7 +25,6 @@
               style="width: 100%"
               :effect="themes"
               controls-position="right"
-              size="middle"
               :min="0"
               :max="100"
               v-model="state.commonBackground.innerPadding"
@@ -43,7 +42,6 @@
               style="width: 100%"
               :effect="themes"
               controls-position="right"
-              size="middle"
               :min="0"
               :max="100"
               v-model="state.commonBackground.borderRadius"
@@ -70,7 +68,6 @@
                 style="width: 100%"
                 :effect="themes"
                 controls-position="right"
-                size="middle"
                 :min="0"
                 :max="30"
                 :disabled="!state.commonBackground.backdropFilterEnable"
@@ -148,7 +145,6 @@
               :disabled="!state.commonBackground.backgroundImageEnable"
               :effect="themes"
               :title="t('visualization.border_color_setting')"
-              style="position: absolute; top: -3px; left: 60px"
               is-custom
               show-alpha
               class="color-picker-style"
@@ -164,7 +160,6 @@
             <el-select
               :style="{ width: computedBackgroundBorderSelectWidth + 'px' }"
               v-model="state.commonBackground.innerImage"
-              size="middle"
               popper-class="board-select"
               :effect="themes"
               :disabled="!state.commonBackground.backgroundImageEnable"
@@ -302,7 +297,7 @@ const goFile = () => {
 }
 
 const sizeMessage = () => {
-  ElMessage.success('图片大小不符合')
+  ElMessage.success('图片大小不能超过15M')
 }
 
 const reUpload = e => {
@@ -584,5 +579,9 @@ watch(
   .ed-select-dropdown__item.selected {
     background-color: rgba(0, 0, 0, 0) !important;
   }
+
+  .is-selected::after {
+    display: none;
+  }
 }
 </style>
diff --git a/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue b/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
index b1107fa..c9146cf 100644
--- a/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
+++ b/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
@@ -13,7 +13,7 @@
       "
       @change="reUpload"
     />
-    <el-form label-position="top" style="width: 100%; margin-bottom: 16px">
+    <el-form size="small" label-position="top" style="width: 100%; margin-bottom: 16px">
       <el-form-item class="form-item" :class="'form-item-' + themes" v-if="showWatermarkSetting">
         <el-checkbox
           size="small"
diff --git a/core/core-frontend/src/components/watermark/watermark.ts b/core/core-frontend/src/components/watermark/watermark.ts
index 384145e..ee8deab 100644
--- a/core/core-frontend/src/components/watermark/watermark.ts
+++ b/core/core-frontend/src/components/watermark/watermark.ts
@@ -3,6 +3,8 @@ import { storeToRefs } from 'pinia'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { ref } from 'vue'
 import { ipInfoApi } from '@/api/user'
+import { isISOMobile } from '@/utils/utils'
+
 const dvMainStore = dvMainStoreWithOut()
 
 const { dvInfo } = storeToRefs(dvMainStore)
@@ -233,7 +235,7 @@ export function activeWatermark(
     watermark_color: watermarkForm.watermark_color,
     watermark_x_space: watermarkForm.watermark_x_space * scale,
     watermark_y_space: watermarkForm.watermark_y_space * scale,
-    watermark_fontsize: watermarkForm.watermark_fontsize * scale + 'px'
+    watermark_fontsize: watermarkForm.watermark_fontsize * scale * (isISOMobile() ? 2.5 : 1) + 'px'
   }
   watermark(settings, domId)
 }