From 6c9a65bbac090ee1a47ba27685179da38830f924 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 26 Sep 2024 10:34:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=AF=8C=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E8=A1=A8=E6=A0=BC=E6=8B=96=E5=8A=A8=E7=9B=B8=E5=85=B3?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rich-text/DeRichTextView.vue              | 32 ++++++++++++++++++-
 .../custom-component/user-view/Component.vue  | 25 ++++++++-------
 .../views/chart/components/views/index.vue    |  1 +
 3 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue b/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue
index 9d862c47bd..63063d3e34 100644
--- a/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue
+++ b/core/core-frontend/src/custom-component/rich-text/DeRichTextView.vue
@@ -6,6 +6,7 @@
     @keyup.stop
     @dblclick="setEdit"
     @click="onClick"
+    :style="richTextStyle"
   >
     <chart-error v-if="isError" :err-msg="errMsg" />
     <Editor
@@ -163,7 +164,28 @@ const init = ref({
   inline: true, // 开启内联模式
   branding: false,
   icons: 'vertical-content',
-  vertical_align: element.value.propValue.verticalAlign
+  vertical_align: element.value.propValue.verticalAlign,
+  setup: function (editor) {
+    // 在表格调整大小开始时
+    editor.on('ObjectResizeStart', function (e) {
+      const { target, width, height } = e
+      if (target.nodeName === 'TABLE') {
+        // 将宽高根据缩放比例调整
+        // e.width = width / props.scale
+        // e.height = height / props.scale
+      }
+    })
+
+    // 在表格调整大小结束时
+    editor.on('ObjectResized', function (e) {
+      const { target, width, height } = e
+      if (target.nodeName === 'TABLE') {
+        // 将最终调整的宽高根据缩放比例重设
+        // target.style.width = `${width * props.scale}px`
+        // target.style.height = `${height  scaleFactor}px`
+      }
+    })
+  }
 })
 
 const editStatus = computed(() => {
@@ -561,6 +583,8 @@ const conditionAdaptor = (chart: Chart) => {
   return res
 }
 
+const richTextStyle = computed(() => [{ '--de-canvas-scale': props.scale }])
+
 onMounted(() => {
   viewInit()
 })
@@ -583,6 +607,12 @@ defineExpose({
     width: 0px !important;
     height: 0px !important;
   }
+  ::v-deep(p) {
+    zoom: var(--de-canvas-scale);
+  }
+  ::v-deep(span) {
+    zoom: var(--de-canvas-scale);
+  }
 }
 
 :deep(.ol) {
diff --git a/core/core-frontend/src/custom-component/user-view/Component.vue b/core/core-frontend/src/custom-component/user-view/Component.vue
index e0d576e648..b43a501d71 100644
--- a/core/core-frontend/src/custom-component/user-view/Component.vue
+++ b/core/core-frontend/src/custom-component/user-view/Component.vue
@@ -58,18 +58,19 @@ const props = defineProps({
 
 const { element, view, active, searchCount, scale } = toRefs(props)
 const autoStyle = computed(() => {
-  if (element.value.innerType === 'rich-text') {
-    return {
-      position: 'absolute',
-      height: 100 / scale.value + '%!important',
-      width: 100 / scale.value + '%!important',
-      left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
-      top: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
-      transform: 'scale(' + scale.value + ') translateZ(0)'
-    } as CSSProperties
-  } else {
-    return {}
-  }
+  return {}
+  // if (element.value.innerType === 'rich-text') {
+  //   return {
+  //     position: 'absolute',
+  //     height: 100 / scale.value + '%!important',
+  //     width: 100 / scale.value + '%!important',
+  //     left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
+  //     top: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
+  //     transform: 'scale(' + scale.value + ') translateZ(0)'
+  //   } as CSSProperties
+  // } else {
+  //   return {}
+  // }
 })
 const emits = defineEmits(['onPointClick'])
 
diff --git a/core/core-frontend/src/views/chart/components/views/index.vue b/core/core-frontend/src/views/chart/components/views/index.vue
index eefe17263b..913e832f46 100644
--- a/core/core-frontend/src/views/chart/components/views/index.vue
+++ b/core/core-frontend/src/views/chart/components/views/index.vue
@@ -944,6 +944,7 @@ const loadPluginCategory = data => {
       </de-picture-group>
       <de-rich-text-view
         v-else-if="showChartView(ChartLibraryType.RICH_TEXT)"
+        :scale="scale"
         :themes="canvasStyleData.dashboard.themeColor"
         ref="chartComponent"
         :element="element"