Merge pull request #13149 from dataease/pr@dev-v2@fix_tab-shadow-move

fix(仪表板): 仪表板超出一屏时tab内部组件移出定位阴影出现向上偏转问题

core/core-frontend/src/components/data-visualization/canvas/DePreview.vue

@@ -78,6 +78,11 @@ const props = defineProps({
   isSelector: {
     type: Boolean,
     default: false
+  },
+  // 显示悬浮按钮
+  showPopBar: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -91,7 +96,8 @@ const {
   previewActive,
   downloadStatus,
   outerScale,
-  outerSearchCount
+  outerSearchCount,
+  showPopBar
 } = toRefs(props)
 const domId = 'preview-' + canvasId.value
 const scaleWidthPoint = ref(100)
@@ -398,7 +404,10 @@ const dataVPreview = computed(
 
 const linkOptBarShow = computed(() => {
   return Boolean(
-    canvasStyleData.value.suspensionButtonAvailable && !inMobile.value && !mobileInPc.value
+    canvasStyleData.value.suspensionButtonAvailable &&
+      !inMobile.value &&
+      !mobileInPc.value &&
+      showPopBar.value
   )
 })
 

core/core-frontend/src/components/data-visualization/canvas/Shape.vue

@@ -156,7 +156,8 @@ const {
   tabCollisionActiveId,
   tabMoveInActiveId,
   tabMoveOutComponentId,
-  mobileInPc
+  mobileInPc,
+  mainScrollTop
 } = storeToRefs(dvMainStore)
 const { editorMap, areaData, isCtrlOrCmdDown } = storeToRefs(composeStore)
 const emit = defineEmits([
@@ -558,7 +559,7 @@ const handleMouseDownOnShape = e => {
         mouseY:
           !isDashboard() && outerTabDom
             ? outerTabDom.offsetTop + curDom.offsetTop + offsetY + 100
-            : curY,
+            : curY + mainScrollTop.value,
         width: componentWidth,
         height: componentHeight
       })

core/core-frontend/src/store/modules/data-visualization/dvMain.ts

@@ -189,7 +189,8 @@ export const dvMainStore = defineStore('dataVisualization', {
       // 基础网格信息
       baseCellInfo: {},
       dataPrepareState: false, //数据准备状态
-      multiplexingStyleAdapt: true //复用样式跟随主题
+      multiplexingStyleAdapt: true, //复用样式跟随主题
+      mainScrollTop: 0 //主画布运动量
     }
   },
   actions: {
@@ -1330,6 +1331,7 @@ export const dvMainStore = defineStore('dataVisualization', {
         type: null,
         mobileLayout: false
       }
+      this.mainScrollTop = 0
     },
     setViewDataDetails(viewId, chartDataInfo) {
       this.canvasViewDataInfo[viewId] = chartDataInfo.data

core/core-frontend/src/views/canvas/DeCanvas.vue

@@ -58,7 +58,8 @@ const scaleMin = ref(100)
 
 const state = reactive({
   screenWidth: 1920,
-  screenHeight: 1080
+  screenHeight: 1080,
+  curScrollTop: 0
 })
 
 //仪表板矩阵信息适配，
@@ -266,6 +267,12 @@ const scrollTo = y => {
   })
 }
 
+const scrollCanvas = () => {
+  if (isMainCanvas(canvasId.value)) {
+    dvMainStore.mainScrollTop = canvasInner.value.scrollTop
+  }
+}
+
 watch(
   () => canvasActive.value,
   () => {
@@ -299,6 +306,7 @@ defineExpose({
       @drop="handleDrop"
       @dragover="handleDragOver"
       @mousedown="handleMouseDown"
+      @scroll="scrollCanvas"
     >
       <canvas-core
         ref="cyGridster"

core/core-frontend/src/views/data-visualization/PreviewCanvas.vue

@@ -194,6 +194,7 @@ defineExpose({
       :cur-gap="state.curPreviewGap"
       :is-selector="props.isSelector"
       :download-status="downloadStatus"
+      :show-pop-bar="true"
     ></de-preview>
     <empty-background v-if="!state.initState" description="参数不能为空" img-type="noneWhite" />
   </div>