From f56576b2c67d48bd1d93609ee8eca311987660ac Mon Sep 17 00:00:00 2001
From: limengnan <420004014@qq.com>
Date: Tue, 1 Jul 2025 11:00:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9data-visualization\components?=
 =?UTF-8?q?\data-visualization?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/CanvasCore.vue  |   5 +-
 .../canvas/ComponentWrapper.vue               | 146 ++++++++++++++----
 .../canvas/ContextMenuDetails.vue             | 121 ++++++++-------
 .../data-visualization/canvas/DePreview.vue   | 100 ++++++++++--
 .../data-visualization/canvas/Shape.vue       |  73 ++++-----
 5 files changed, 309 insertions(+), 136 deletions(-)

diff --git a/frontend/src/data-visualization/components/data-visualization/canvas/CanvasCore.vue b/frontend/src/data-visualization/components/data-visualization/canvas/CanvasCore.vue
index 94140da..22faba3 100644
--- a/frontend/src/data-visualization/components/data-visualization/canvas/CanvasCore.vue
+++ b/frontend/src/data-visualization/components/data-visualization/canvas/CanvasCore.vue
@@ -59,7 +59,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,
@@ -265,7 +264,7 @@ watch(
 
 watch(
   () => areaData.value.components.length,
-  (val, oldVal) => {
+  () => {
     groupAreaClickChange()
   }
 )
@@ -938,7 +937,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/frontend/src/data-visualization/components/data-visualization/canvas/ComponentWrapper.vue b/frontend/src/data-visualization/components/data-visualization/canvas/ComponentWrapper.vue
index 0f999e7..a453c74 100644
--- a/frontend/src/data-visualization/components/data-visualization/canvas/ComponentWrapper.vue
+++ b/frontend/src/data-visualization/components/data-visualization/canvas/ComponentWrapper.vue
@@ -1,19 +1,27 @@
 <script setup lang="ts">
 import { getStyle } from '@/data-visualization/utils/style'
 import eventBus from '@/data-visualization/utils/eventBus'
-import { ref, onMounted, toRefs, getCurrentInstance, computed, nextTick } from 'vue'
+import { ref, toRefs, computed, nextTick } from 'vue'
 import findComponent from '@/data-visualization/utils/components'
 import { downloadCanvas2, imgUrlTrans } from '@/data-visualization/utils/imgUtils'
+
+import { useEmitt } from '@/data-visualization/hooks/web/useEmitt'
 import Board from '@/data-visualization/components/de-board/Board.vue'
 import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visualization/dvMain'
 import { activeWatermarkCheckUser, removeActiveWatermark } from '@/data-visualization/components/watermark/watermark'
 import { isMobile } from '@/data-visualization/utils/utils'
-import { isDashboard } from '@/data-visualization/utils/canvasUtils'
+import { isDashboard, isMainCanvas } from '@/data-visualization/utils/canvasUtils'
+import { XpackComponent } from '@/data-visualization/components/plugin'
+import DePreviewPopDialog from '@/data-visualization/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 commonFilterAttrs = ['width', 'height', 'top', 'left', 'rotate']
+const dePreviewPopDialogRef = ref(null)
 const commonFilterAttrsFilterBorder = [
   'width',
   'height',
@@ -113,6 +121,11 @@ const props = defineProps({
   optType: {
     type: String,
     required: false
+  },
+  // 画布滚动距离
+  scrollMain: {
+    type: Number,
+    default: 0
   }
 })
 const {
@@ -124,23 +137,25 @@ 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
 
 const viewDemoInnerId = computed(() => 'enlarge-inner-content-' + config.value.id)
 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
       removeActiveWatermark(viewDemoInnerId.value)
       downLoading.value = false
+      useEmitt().emitter.emit('l7-unprepare-picture', config.value.id)
     })
   }, 1000)
 }
@@ -149,20 +164,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
-})
-
-const onClick = e => {
+const onClick = () => {
   // 将当前点击组件的事件传播出去
   eventBus.emit('componentClick')
   dvMainStore.setInEditorStatus(true)
@@ -287,11 +304,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(() => {
@@ -302,15 +328,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')
@@ -321,9 +341,15 @@ const onWrapperClick = e => {
       } catch (e) {
         console.warn('url 格式错误:' + url)
       }
+    } else if (config.value.events.type === 'refreshDataV') {
+      useEmitt().emitter.emit('componentRefresh')
+    } else if (config.value.events.type === 'fullScreen') {
+      useEmitt().emitter.emit('canvasFullscreen')
+    } else if (config.value.events.type === 'download') {
+      useEmitt().emitter.emit('canvasDownload')
     }
-    e.preventDefault()
-    e.stopPropagation()
+    e?.preventDefault()
+    e?.stopPropagation()
   }
 }
 
@@ -339,12 +365,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"
@@ -352,6 +413,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"
@@ -361,6 +432,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>
@@ -382,7 +454,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'])"
@@ -406,7 +478,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>
       <!--边框背景-->
@@ -426,12 +501,22 @@ 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%;
   height: 100%;
   position: relative;
   background-size: 100% 100% !important;
+  padding: 0 !important;
   .wrapper-inner-adaptor {
     position: relative;
     transform-style: preserve-3d;
@@ -475,4 +560,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/frontend/src/data-visualization/components/data-visualization/canvas/ContextMenuDetails.vue b/frontend/src/data-visualization/components/data-visualization/canvas/ContextMenuDetails.vue
index 1ad3dae..0a30c3d 100644
--- a/frontend/src/data-visualization/components/data-visualization/canvas/ContextMenuDetails.vue
+++ b/frontend/src/data-visualization/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/frontend/src/data-visualization/components/data-visualization/canvas/DePreview.vue b/frontend/src/data-visualization/components/data-visualization/canvas/DePreview.vue
index 5f1d24b..7e244ab 100644
--- a/frontend/src/data-visualization/components/data-visualization/canvas/DePreview.vue
+++ b/frontend/src/data-visualization/components/data-visualization/canvas/DePreview.vue
@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import { changeStyleWithScale } from '@/data-visualization/utils/translate'
+import { getCanvasStyle, getShapeItemStyle } from '@/data-visualization/utils/translate'
 import ComponentWrapper from './ComponentWrapper.vue'
-import { getCanvasStyle, getShapeItemStyle } from '@/data-visualization/utils/style'
-
+import { changeStyleWithScale } from '@/data-visualization/utils/translate'
 import { computed, nextTick, ref, toRefs, watch, onBeforeUnmount, onMounted, reactive } from 'vue'
 import { changeRefComponentsSizeWithScalePoint } from '@/data-visualization/utils/changeComponentsSizeWithScale'
-
 import { dvMainStoreWithOut } from '@/data-visualization/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
 import elementResizeDetectorMaker from 'element-resize-detector'
 import UserViewEnlarge from '@/data-visualization/components/visualization/UserViewEnlarge.vue'
+import CanvasOptBar from '@/data-visualization/components/visualization/CanvasOptBar.vue'
 import { isDashboard, isMainCanvas, refreshOtherComponent } from '@/data-visualization/utils/canvasUtils'
 import { activeWatermarkCheckUser } from '@/data-visualization/components/watermark/watermark'
-
-
+import { XpackComponent } from '@/data-visualization/components/plugin'
 import PopArea from '@/data-visualization/custom-component/pop-area/Component.vue'
-
-
+// import CanvasFilterBtn from '@/data-visualization/custom-component/canvas-filter-btn/Component.vue'
+import { useEmitt } from '@/data-visualization/hooks/web/useEmitt'
 import DatasetParamsComponent from '@/data-visualization/components/visualization/DatasetParamsComponent.vue'
-// import DeFullscreen from '@/components/visualization/common/DeFullscreen.vue'
+import DeFullscreen from '@/data-visualization/components/visualization/common/DeFullscreen.vue'
 import EmptyBackground from '../../empty-background/src/EmptyBackground.vue'
+// import LinkOptBar from '@/data-visualization/components/data-visualization/canvas/LinkOptBar.vue'
 import { isDesktop } from '@/data-visualization/utils/ModelUtil'
 import { isMobile } from '@/data-visualization/utils/utils'
+import { useI18n } from '@/data-visualization/hooks/web/useI18n'
 const dvMainStore = dvMainStoreWithOut()
 const { pcMatrixCount, curComponent, mobileInPc, canvasState, inMobile } = storeToRefs(dvMainStore)
 const openHandler = ref(null)
@@ -30,6 +30,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 +94,11 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'inherit'
+  },
+  // 联动按钮位置
+  showLinkageButton: {
+    type: Boolean,
+    default: true
   }
 })
 
@@ -125,7 +131,8 @@ const dashboardActive = computed(() => {
   return dvInfo.value.type === 'dashboard'
 })
 const state = reactive({
-  initState: true
+  initState: true,
+  scrollMain: 0
 })
 
 const curSearchCount = computed(() => {
@@ -171,6 +178,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
@@ -217,6 +225,30 @@ watch(
   }
 )
 
+useEmitt({
+  name: 'tabCanvasChange-' + canvasId.value,
+  callback: function () {
+    restore()
+  }
+})
+
+useEmitt({
+  name: 'componentRefresh',
+  callback: function () {
+    if (isMainCanvas(canvasId.value)) {
+      refreshDataV()
+    }
+  }
+})
+
+useEmitt({
+  name: 'canvasFullscreen',
+  callback: function () {
+    if (isMainCanvas(canvasId.value)) {
+      fullScreeRef.value.toggleFullscreen()
+    }
+  }
+})
 
 const resetLayout = () => {
   if (downloadStatus.value) {
@@ -446,6 +478,12 @@ const downloadAsPDF = () => {
   // test
 }
 
+const scrollPreview = () => {
+  state.scrollMain = previewCanvas.value.scrollTop
+}
+
+const showUnpublishFlag = computed(() => dvInfo.value?.status === 0 && isMainCanvas(canvasId.value))
+
 defineExpose({
   restore
 })
@@ -456,13 +494,18 @@ 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"
   >
     <!--弹框触发区域-->
-    <!-- <canvas-filter-btn :is-fixed="isOverSize" v-if="filterBtnShow"></canvas-filter-btn> -->
+    <canvas-filter-btn :is-fixed="isOverSize" v-if="filterBtnShow"></canvas-filter-btn>
     <!-- 弹框区域 -->
     <PopArea
       v-if="popAreaAvailable"
@@ -475,8 +518,15 @@ defineExpose({
       :canvas-state="canvasState"
       :show-position="'preview'"
     ></PopArea>
-    <template v-if="renderReady">
-      <ComponentWrapper
+    <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 && !showUnpublishFlag">
+      <component-wrapper
         v-for="(item, index) in baseComponentData"
         v-show="item.isShow"
         :active="item.id === (curComponent || {})['id']"
@@ -493,16 +543,32 @@ 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" />
-  <!-- <de-fullscreen ref="fullScreeRef"></de-fullscreen> -->
+  <de-fullscreen ref="fullScreeRef"></de-fullscreen>
   <dataset-params-component ref="customDatasetParamsRef"></dataset-params-component>
+  <XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
+  <link-opt-bar
+    v-if="linkOptBarShow"
+    ref="link-opt-bar"
+    :terminal="'pc'"
+    :canvas-style-data="canvasStyleData"
+    @link-export-pdf="downloadAsPDF"
+  />
 </template>
 
 <style lang="less" scoped>
@@ -530,4 +596,8 @@ defineExpose({
 .datav-preview {
   overflow-y: hidden !important;
 }
+
+.datav-preview-unpublish {
+  background-color: inherit !important;
+}
 </style>
diff --git a/frontend/src/data-visualization/components/data-visualization/canvas/Shape.vue b/frontend/src/data-visualization/components/data-visualization/canvas/Shape.vue
index 3f11e84..374b819 100644
--- a/frontend/src/data-visualization/components/data-visualization/canvas/Shape.vue
+++ b/frontend/src/data-visualization/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>
 
@@ -1189,6 +1181,7 @@ onMounted(() => {
   height: 100%;
   position: relative;
   background-size: 100% 100% !important;
+  padding:0 !important;
 }
 
 .shape-selected {
@@ -1318,4 +1311,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>