From fbfa943b04ca97c8dcd2fb37431fea1281485a44 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Sun, 30 Oct 2022 21:58:19 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E8=A7=86=E5=9B=BE):=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=A0=87=E9=A2=98=E5=A4=87=E6=B3=A8=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E6=A1=86=E8=83=8C=E6=99=AF=EF=BC=8C=E4=BD=BF=E7=94=A8=E4=BB=AA?=
 =?UTF-8?q?=E8=A1=A8=E6=9D=BF=E5=8A=A0=E8=A7=86=E5=9B=BE=E7=9A=84=E5=A4=8D?=
 =?UTF-8?q?=E5=90=88=E9=A2=9C=E8=89=B2=E4=BD=9C=E4=B8=BA=E8=83=8C=E6=99=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component-style/dialog/RemarkEditor.vue   | 64 +++++++++++++++++--
 1 file changed, 57 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue b/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue
index b9bf626e5f..a358884bb1 100644
--- a/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue
+++ b/frontend/src/views/chart/components/component-style/dialog/RemarkEditor.vue
@@ -1,16 +1,25 @@
 <template>
-  <div style="max-height: 50vh;overflow-y: auto;">
-    <Editor
-      v-model="content"
-      style="width: 100%;height: 100%"
-      :init="init"
-    />
+  <div
+    style="max-height: 50vh;overflow-y: auto;"
+    :style="customStyle"
+  >
+    <div :style="commonStyle">
+      <Editor
+        v-model="content"
+        style="width: 100%;height: 100%"
+        :init="init"
+      />
+    </div>
   </div>
 </template>
 
 <script>
 import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入不显示
-import Editor from '@tinymce/tinymce-vue'// 编辑器引入
+import Editor from '@tinymce/tinymce-vue'
+import { imgUrlTrans } from '@/components/canvas/utils/utils'
+import { mapState } from 'vuex'
+import { hexColorToRGBA } from '@/views/chart/chart/util'
+// 编辑器引入
 export default {
   name: 'RemarkEditor',
   components: {
@@ -69,6 +78,43 @@ export default {
     }
   },
 
+  computed: {
+    customStyle() {
+      let style = {}
+      if (this.canvasStyleData.openCommonStyle) {
+        if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
+          style = {
+            background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
+            ...style
+          }
+        } else if (this.canvasStyleData.panel.backgroundType === 'color') {
+          style = {
+            background: this.canvasStyleData.panel.color,
+            ...style
+          }
+        }
+      }
+      if (!style.background) {
+        style.background = '#FFFFFF'
+      }
+      return style
+    },
+    commonStyle() {
+      const style = {
+        width: '100%',
+        height: '100%'
+      }
+      if (this.curComponent.commonBackground && this.curComponent.commonBackground.backgroundColorSelect) {
+        style['background-color'] = hexColorToRGBA(this.curComponent.commonBackground.color, this.curComponent.commonBackground.alpha)
+      }
+      return style
+    },
+    ...
+    mapState([
+      'curComponent',
+      'canvasStyleData'
+    ])
+  },
   created() {
     if (!this.showTable) {
       this.init.plugins = this.init.plugins.replace(' table', '')
@@ -86,4 +132,8 @@ export default {
 
 <style scoped>
 
+::v-deep .tox-edit-area__iframe {
+  background: rgba(255, 255, 255, 0) !important;
+}
+
 </style>