From 5e0bfe4419b71c93517fad372ea144e1d3a7d069 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 17 Mar 2025 18:05:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E4=BB=AA=E8=A1=A8=E6=9D=BF=E3=80=81?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=A4=A7=E5=B1=8F):=20=E8=81=94=E5=8A=A8?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE=E5=9B=BA=E5=AE=9A=E6=82=AC=E6=B5=AE=E5=9C=A8?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=8F=B3=E4=B8=8A=E8=A7=92=20#15276?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-visualization/canvas/DePreview.vue   |  7 +++++++
 .../components/visualization/CanvasOptBar.vue | 21 +++++++++++++++----
 .../views/dashboard/DashboardPreviewShow.vue  |  8 +++++++
 .../data-visualization/PreviewCanvas.vue      |  8 +++++++
 4 files changed, 40 insertions(+), 4 deletions(-)

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 20a7d4b538..50d23765bc 100644
--- a/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/DePreview.vue
@@ -93,6 +93,11 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'inherit'
+  },
+  // 联动按钮位置
+  showLinkageButton: {
+    type: Boolean,
+    default: true
   }
 })
 
@@ -501,9 +506,11 @@ 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
diff --git a/core/core-frontend/src/components/visualization/CanvasOptBar.vue b/core/core-frontend/src/components/visualization/CanvasOptBar.vue
index 9199b4ddf2..9d29f3a006 100644
--- a/core/core-frontend/src/components/visualization/CanvasOptBar.vue
+++ b/core/core-frontend/src/components/visualization/CanvasOptBar.vue
@@ -2,10 +2,12 @@
   <div
     v-if="existLinkage && (!dvMainStore.mobileInPc || isMobile())"
     class="bar-main-right"
-    :class="{ 'bar-main-edit-right': dvEditMode }"
+    :class="{
+      'bar-main-preview-fixed': dvPreviewMode
+    }"
     @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
@@ -35,6 +37,10 @@ const props = defineProps({
     type: String,
     required: false,
     default: 'canvas-main'
+  },
+  isFixed: {
+    type: Boolean,
+    default: false
   }
 })
 
@@ -48,9 +54,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
@@ -104,4 +111,10 @@ const existLinkage = computed(() => {
     opacity: 0.8;
   }
 }
+
+.bar-main-preview-fixed {
+  position: fixed;
+  top: 120px;
+  right: 5px;
+}
 </style>
diff --git a/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue b/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
index d97274f19e..ce49f1ed4c 100644
--- a/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
+++ b/core/core-frontend/src/views/dashboard/DashboardPreviewShow.vue
@@ -19,6 +19,7 @@ import AppExportForm from '@/components/de-app/AppExportForm.vue'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import { useI18n } from '@/hooks/web/useI18n'
+import CanvasOptBar from '@/components/visualization/CanvasOptBar.vue'
 const userStore = useUserStoreWithOut()
 
 const userName = computed(() => userStore.getName)
@@ -283,6 +284,11 @@ defineExpose({
           id="de-preview-content"
           :class="{ 'de-screen-full': fullscreenFlag }"
         >
+          <canvas-opt-bar
+            canvas-id="canvas-main"
+            :canvas-style-data="state.canvasStylePreview || {}"
+            :component-data="state.canvasDataPreview || []"
+          ></canvas-opt-bar>
           <de-preview
             ref="dashboardPreview"
             v-if="state.canvasStylePreview && dataInitState"
@@ -293,6 +299,7 @@ defineExpose({
             :canvas-view-info="state.canvasViewInfoPreview"
             :show-position="showPosition"
             :download-status="downloadStatus"
+            :show-linkage-button="false"
           ></de-preview>
         </div>
       </template>
@@ -354,6 +361,7 @@ defineExpose({
     }
 
     .content {
+      position: relative;
       display: flex;
       width: 100%;
       height: 100%;
diff --git a/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue b/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
index 96713839d9..845a954aa9 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewCanvas.vue
@@ -18,6 +18,7 @@ import { isLink, setTitle } from '@/utils/utils'
 import EmptyBackground from '../../components/empty-background/src/EmptyBackground.vue'
 import { useRoute } from 'vue-router'
 import { filterEnumMapSync } from '@/utils/componentUtils'
+import CanvasOptBar from '@/components/visualization/CanvasOptBar.vue'
 const routeWatch = useRoute()
 
 const dvMainStore = dvMainStoreWithOut()
@@ -216,6 +217,11 @@ defineExpose({
     :class="{ 'canvas_keep-size': dataVKeepSize }"
     ref="previewCanvasContainer"
   >
+    <canvas-opt-bar
+      canvas-id="canvas-main"
+      :canvas-style-data="state.canvasStylePreview || {}"
+      :component-data="state.canvasDataPreview || []"
+    ></canvas-opt-bar>
     <de-preview
       ref="dvPreview"
       v-if="state.canvasStylePreview && state.initState"
@@ -227,6 +233,7 @@ defineExpose({
       :is-selector="props.isSelector"
       :download-status="downloadStatus"
       :show-pop-bar="true"
+      :show-linkage-button="false"
     ></de-preview>
     <empty-background
       v-if="!state.initState"
@@ -252,6 +259,7 @@ defineExpose({
   display: none;
 }
 .content {
+  position: relative;
   background-color: #ffffff;
   width: 100%;
   height: 100vh;