From 8ed3925dbbe83deb07d6fa4bfea60039aeef8d06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=98=89=E8=B1=AA?=
 <42510293+ziyujiahao@users.noreply.github.com>
Date: Wed, 3 Jun 2026 14:39:44 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=BB=84=E4=BB=B6=E5=B5=8C?=
 =?UTF-8?q?=E5=85=A5=E8=87=AA=E5=8A=A8=E9=80=82=E9=85=8D=E7=BC=A9=E6=94=BE?=
 =?UTF-8?q?=20(#18220)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/panel/ViewWrapper.vue           | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/core/core-frontend/src/pages/panel/ViewWrapper.vue b/core/core-frontend/src/pages/panel/ViewWrapper.vue
index adc0b6656b..4291f3629b 100644
--- a/core/core-frontend/src/pages/panel/ViewWrapper.vue
+++ b/core/core-frontend/src/pages/panel/ViewWrapper.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, onBeforeMount, reactive, inject, nextTick } from 'vue'
+import { ref, onBeforeMount, reactive, inject, nextTick, onMounted } from 'vue'
 import { initCanvasData, onInitReady } from '@/utils/canvasUtils'
 import { interactiveStoreWithOut } from '@/store/modules/interactive'
 import { useEmbedded } from '@/store/modules/embedded'
@@ -29,7 +29,8 @@ const state = reactive({
   dvInfo: null,
   dvId: null,
   suffixId: 'common',
-  initState: true
+  initState: true,
+  scale: 100
 })
 
 const embeddedParams = embeddedParamsDiv?.chartId ? embeddedParamsDiv : embeddedStore
@@ -147,6 +148,7 @@ onBeforeMount(async () => {
       nextTick(() => {
         onInitReady({ resourceId: chartId })
       })
+      resetLayout()
     }
   )
 })
@@ -179,18 +181,31 @@ const onPointClick = param => {
     console.warn('de_inner_params send error')
   }
 }
+const previewViewCanvas = ref(null)
+
+const resetLayout = () => {
+  nextTick(() => {
+    if (previewViewCanvas.value) {
+      //div容器获取tableBox.value.clientWidth
+      const widthSource = state.canvasDataPreview?.find(item => item.id === embeddedParams?.chartId)
+        ?.style.width
+      if (widthSource) {
+        let canvasWidth = previewViewCanvas.value.clientWidth
+        state.scale = (canvasWidth * state.canvasStylePreview.scale) / widthSource
+      }
+    }
+  })
+}
+onMounted(() => {
+  resetLayout()
+})
 </script>
 
 <template>
-  <div
-    class="de-view-wrapper"
-    :style="{
-      zoom: state.canvasStylePreview?.scale / 100
-    }"
-    v-if="!!config && state.initState"
-  >
+  <div class="de-view-wrapper" ref="previewViewCanvas" v-if="!!config && state.initState">
     <ComponentWrapper
       style="width: 100%; height: 100%"
+      :scale="state.scale"
       :view-info="viewInfo"
       :config="config"
       :canvas-style-data="state.canvasStylePreview"