From f9695bbe8dec84874f05d73a16b29ef3f2c2a8aa Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 15 Jul 2021 16:22:42 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=A2=9E=E5=8A=A0=E8=BF=87=E6=BB=A4?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=87=E9=A2=98=E6=A0=B7=E5=BC=8F=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../canvas/components/Editor/index.vue        |   2 +-
 .../src/components/dataease/DeOutWidget.vue   |   1 -
 frontend/src/views/Tinymce/FilterTextAttr.vue | 167 ++++++++++++++++++
 frontend/src/views/panel/edit/index.vue       |   6 +-
 4 files changed, 172 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/views/Tinymce/FilterTextAttr.vue

diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue
index 0bf29c46f1..b647626b30 100644
--- a/frontend/src/components/canvas/components/Editor/index.vue
+++ b/frontend/src/components/canvas/components/Editor/index.vue
@@ -200,7 +200,7 @@ export default {
       // 矩阵数量 默认 12 * 24
       matrixCount: {
         x: 24,
-        y: 48
+        y: 72
       },
       customStyleHistory: null,
       showDrag: true,
diff --git a/frontend/src/components/dataease/DeOutWidget.vue b/frontend/src/components/dataease/DeOutWidget.vue
index ff37783057..a5c0c646ba 100644
--- a/frontend/src/components/dataease/DeOutWidget.vue
+++ b/frontend/src/components/dataease/DeOutWidget.vue
@@ -112,7 +112,6 @@ export default {
   .first-title {
     width: 100%;
     overflow: hidden;
-    inset: 10px 0px 10px;
     position: absolute;
     color: inherit;
     display: flex;
diff --git a/frontend/src/views/Tinymce/FilterTextAttr.vue b/frontend/src/views/Tinymce/FilterTextAttr.vue
new file mode 100644
index 0000000000..7436f54c27
--- /dev/null
+++ b/frontend/src/views/Tinymce/FilterTextAttr.vue
@@ -0,0 +1,167 @@
+<template>
+  <el-card class="el-card-main" :style="mainStyle">
+    <div style="position: relative;">
+      <el-tooltip :content="$t('panel.fontSize')">
+
+        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="iconfont icon-font_size" />
+      </el-tooltip>
+
+      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
+        <el-input v-model="styleInfo.fontSize" type="number" size="mini" min="12" max="128" />
+      </div>
+
+      <el-tooltip :content="$t('panel.fontWeight')">
+        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-font-weight-bold" />
+      </el-tooltip>
+
+      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
+        <el-input v-model="styleInfo.fontWeight" type="number" size="mini" min="100" step="100" max="900" />
+      </div>
+
+      <el-tooltip :content="$t('panel.letterSpacing')">
+        <i style="float: left;margin-top: 3px;margin-left: 2px;" class="icon iconfont icon-letter_spacing" />
+      </el-tooltip>
+
+      <div style="width: 70px;float: left;margin-top: 2px;margin-left: 2px;">
+        <el-input v-model="styleInfo.letterSpacing" type="number" size="mini" min="0" max="99" />
+      </div>
+
+      <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
+        <div style="width: 16px;height: 18px">
+          <el-tooltip :content="$t('panel.color')">
+            <i class="icon iconfont icon-zimua" @click="goColor" />
+          </el-tooltip>
+          <div :style="letterDivColor" />
+          <el-color-picker ref="colorPicker" v-model="styleInfo.color" style="margin-top: 7px;height: 0px" size="mini" />
+        </div>
+      </div>
+
+      <div style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
+        <div style="width: 16px;height: 18px">
+          <el-tooltip content="背景颜色">
+            <i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
+          </el-tooltip>
+          <div :style="backgroundDivColor" />
+          <el-color-picker ref="backgroundColorPicker" v-model="styleInfo.backgroundColor" style="margin-top: 7px;height: 0px" size="mini" />
+        </div>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  props: {
+    scrollLeft: {
+      type: Number,
+      default: 0
+    },
+    scrollTop: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      textAlignOptions: [
+        {
+          icon: 'iconfont icon-juzuo',
+          tooltip: this.$t('panel.text_align_left'),
+          label: 'left'
+        },
+        {
+          icon: 'iconfont icon-align-center',
+          tooltip: this.$t('panel.text_align_center'),
+          label: 'center'
+        },
+        {
+          icon: 'iconfont icon-juyou',
+          tooltip: this.$t('panel.text_align_right'),
+          label: 'right'
+        }
+      ] }
+  },
+  computed: {
+
+    letterDivColor() {
+      const style = {
+        height: '2px',
+        background: this.styleInfo.color
+      }
+      return style
+    },
+    backgroundDivColor() {
+      const style = {
+        height: '2px',
+        background: this.styleInfo.backgroundColor
+      }
+      return style
+    },
+
+    mainStyle() {
+      const style = {
+        left: (this.getPositionX(this.curComponent.style.left) - this.scrollLeft) + 'px',
+        top: (this.getPositionY(this.curComponent.style.top) - this.scrollTop - 3) + 'px'
+      }
+      return style
+    },
+    styleInfo() {
+      return this.$store.state.curComponent.style
+    },
+    ...mapState([
+      'curComponent',
+      'curCanvasScale',
+      'canvasStyleData'
+    ])
+
+  },
+  methods: {
+    goColor() {
+      this.$refs.colorPicker.handleTrigger()
+    },
+    goBackgroundColor() {
+      this.$refs.backgroundColorPicker.handleTrigger()
+    },
+    getPositionX(x) {
+      if (this.canvasStyleData.selfAdaption) {
+        return (x * this.curCanvasScale.scaleWidth / 100) + 60
+      } else {
+        return x + 60
+      }
+    },
+    getPositionY(y) {
+      if (this.canvasStyleData.selfAdaption) {
+        return y * this.curCanvasScale.scaleHeight / 100
+      } else {
+        return y
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .attr-list {
+    overflow: auto;
+    padding: 20px;
+    padding-top: 0;
+    height: 100%;
+  }
+  .el-card-main {
+    height: 34px;
+    z-index: 1000000000;
+    width: 350px;
+    position: absolute;
+
+  }
+  .el-card-main ::v-deep .el-card__body {
+    padding: 0px!important;
+
+  }
+
+  ::v-deep .el-radio-button__inner{
+    padding: 5px!important;
+    width: 30px!important;
+  }
+</style>
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 9edcbd7019..91335813bc 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -161,7 +161,7 @@
     <!--矩形样式组件-->
     <RectangleAttr v-if="curComponent&&curComponent.type==='rect-shape'" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
     <TextAttr v-if="curComponent&&curComponent.type==='v-text'" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
-
+    <FilterTextAttr v-if="curComponent&&curComponent.type==='custom'&&curComponent.options.attrs.title" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
     <!--复用ChartGroup组件 不做显示-->
     <ChartGroup
       ref="chartGroup"
@@ -213,6 +213,7 @@ import { commonStyle, commonAttr } from '@/components/canvas/custom-component/co
 import generateID from '@/components/canvas/utils/generateID'
 import RectangleAttr from '@/components/canvas/components/RectangleAttr'
 import TextAttr from '@/views/Tinymce/TextAttr'
+import FilterTextAttr from '@/views/Tinymce/FilterTextAttr'
 
 export default {
   name: 'PanelEdit',
@@ -234,7 +235,8 @@ export default {
     PanelTextEditor,
     RectangleAttr,
     TextAttr,
-    ChartGroup
+    ChartGroup,
+    FilterTextAttr
   },
   data() {
     return {