Merge pull request #12480 from dataease/pr@dev-v2@fix_rich-text

Pr@dev v2@fix rich text

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) {

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 + ')'
-    } 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'])
 

core/core-frontend/src/custom-component/v-query/Component.vue

@@ -557,7 +557,7 @@ const autoStyle = computed(() => {
     width: 100 / scale.value + '%!important',
     left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
     top: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
-    transform: 'scale(' + scale.value + ')',
+    transform: 'scale(' + scale.value + ') translateZ(0)',
     opacity: element.value?.style?.opacity || 1
   } as CSSProperties
 })

core/core-frontend/src/views/chart/components/views/components/ChartComponentS2.vue

@@ -596,7 +596,7 @@ const autoStyle = computed(() => {
     height: 20 * scale.value + 8 + 'px',
     width: 100 / scale.value + '%!important',
     left: 50 * (1 - 1 / scale.value) + '%', // 放大余量 除以 2
-    transform: 'scale(' + scale.value + ')'
+    transform: 'scale(' + scale.value + ') translateZ(0)'
   }
 })
 

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"