Merge pull request #3314 from dataease/pr@dev@refactor_rich-text

refactor(仪表板): 富文本组件和富文本视图支持自适应缩放

frontend/src/components/canvas/custom-component/DeRichText.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="rich-main-class" @dblclick="setEdit">
+  <div class="rich-main-class" :style="autoStyle" @dblclick="setEdit">
     <Editor
       v-if="editShow"
       :id="tinymceId"
@@ -39,6 +39,10 @@ export default {
     Editor
   },
   props: {
+    terminal: {
+      type: String,
+      default: 'pc'
+    },
     propValue: {
       type: String,
       require: true
@@ -93,11 +97,31 @@ export default {
     }
   },
   computed: {
+    scale(){
+      return Math.min(this.previewCanvasScale.scalePointWidth, this.previewCanvasScale.scalePointHeight) * this.scaleCoefficient
+    },
     editStatus() {
       return this.editMode === 'edit' && !this.mobileLayoutStatus
     },
+    autoStyle() {
+      return {
+        height: (100 / this.scale) + '%!important',
+        width: (100 / this.scale) + '%!important',
+        left: 50 * (1 - 1 / this.scale) + '%', //放大余量 除以 2
+        top: 50 * (1 - 1 / this.scale) + '%',
+        transform: 'scale(' + this.scale + ')'
+      }
+    },
+    scaleCoefficient() {
+      if (this.terminal === 'pc' && !this.mobileLayoutStatus) {
+        return 1.1
+      } else {
+        return 4.5
+      }
+    },
     ...mapState([
-      'mobileLayoutStatus'
+      'mobileLayoutStatus',
+      'previewCanvasScale'
     ])
   },
   watch: {
@@ -146,6 +170,7 @@ export default {
     width: 100%;
     height: 100%;
     overflow-y: auto!important;
+    position: relative;
   }
   ::-webkit-scrollbar {
     width: 0px!important;

frontend/src/components/canvas/custom-component/DeRichTextView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="rich-main-class" @dblclick="setEdit">
+  <div class="rich-main-class" :style="autoStyle" @dblclick="setEdit">
     <Editor
       v-if="editShow"
       :id="tinymceId"
@@ -41,6 +41,11 @@ export default {
     Editor
   },
   props: {
+    scale: {
+      type: Number,
+      required: false,
+      default: 1
+    },
     element: {
       type: Object
     },
@@ -102,6 +107,15 @@ export default {
     editStatus() {
       return this.editMode === 'edit' && !this.mobileLayoutStatus
     },
+    autoStyle() {
+      return {
+        height: (100 / this.scale) + '%!important',
+        width: (100 / this.scale) + '%!important',
+        left: 50 * (1 - 1 / this.scale) + '%', //放大余量 除以 2
+        top: 50 * (1 - 1 / this.scale) + '%',
+        transform: 'scale(' + this.scale + ')'
+      }
+    },
     ...mapState([
       'mobileLayoutStatus'
     ])
@@ -167,14 +181,14 @@ export default {
       ed.insertContent(attachValue)
     },
     onClick(e) {
-      const edInner = tinymce.get(this.tinymceId);
+      const edInner = tinymce.get(this.tinymceId)
       const node = tinymce.activeEditor.selection.getNode()
       this.resetSelect(node)
     },
     resetSelect(node) {
-      const edInner = tinymce.get(this.tinymceId);
+      const edInner = tinymce.get(this.tinymceId)
       if (edInner.dom) {
-        const nodeArray = edInner.dom.select(".base-selected")
+        const nodeArray = edInner.dom.select('.base-selected')
         if (nodeArray) {
           nodeArray.forEach(nodeInner => {
             nodeInner.removeAttribute('class')
@@ -185,7 +199,7 @@ export default {
           if (pNode && pNode.id && pNode.id.indexOf('changeText') > -1) {
             const innerId = '#' + pNode.id
             const domTest = edInner.dom.select(innerId)[0]
-            domTest.setAttribute("class",'base-selected')
+            domTest.setAttribute('class', 'base-selected')
             edInner.selection.select(domTest)
           }
         }
@@ -219,11 +233,14 @@ export default {
   width: 100%;
   height: 100%;
   overflow-y: auto !important;
+  position: relative;
 }
+
 ::-webkit-scrollbar {
   width: 0px !important;
   height: 0px !important;
 }
+
 ::v-deep ol {
   display: block !important;
   list-style-type: decimal;
@@ -233,6 +250,7 @@ export default {
   margin-inline-end: 0px !important;
   padding-inline-start: 40px !important;
 }
+
 ::v-deep ul {
   display: block !important;
   list-style-type: disc;
@@ -242,6 +260,7 @@ export default {
   margin-inline-end: 0px !important;
   padding-inline-start: 40px !important;
 }
+
 ::v-deep li {
   display: list-item !important;
   text-align: -webkit-match-parent !important;

frontend/src/components/canvas/custom-component/UserView.vue

@@ -45,6 +45,7 @@
     <de-rich-text-view
       v-else-if="richTextViewShowFlag"
       :ref="element.propValue.id"
+      :scale="scale"
       :element="element"
       :prop-value="element.propValue.textValue"
       :active="active"