feat(panel): 文件组件拖拽是样式编辑改为悬浮式设计，在编辑仪表板是可以看到实时的效果

frontend/src/components/DeDrag/index.vue

@@ -10,7 +10,7 @@
         [classNameResizable]: resizable,
         [classNameRotating]: rotating,
         [classNameRotatable]: rotatable,
-        [classNameMouseOn]: mouseOn
+        [classNameMouseOn]: mouseOn || active
       },
       className
     ]"

frontend/src/components/canvas/components/Editor/ContextMenu.vue

@@ -31,8 +31,6 @@ export default {
       copyData: null,
       editFilter: [
         'view',
-        'v-text',
-        'rect-shape',
         'custom'
       ]
     }

frontend/src/components/canvas/custom-component/component-list.js

@@ -54,10 +54,10 @@ const list = [
       width: 300,
       height: 100,
       fontSize: 18,
-      fontWeight: 500,
+      fontWeight: 400,
       lineHeight: '',
       letterSpacing: 0,
-      textAlign: '',
+      textAlign: 'left',
       color: '#000000'
     }
   },
@@ -75,7 +75,7 @@ const list = [
       borderColor: '',
       borderRadius: '',
       fontSize: 14,
-      fontWeight: 500,
+      fontWeight: 400,
       lineHeight: '',
       letterSpacing: 0,
       textAlign: '',

frontend/src/styles/deicon/demo_index.html

@@ -54,6 +54,60 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe659;</span>
+                <div class="name">font-weight-bold</div>
+                <div class="code-name">&amp;#xe659;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">letter_spacing</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe679;</span>
+                <div class="name">letter-spacing</div>
+                <div class="code-name">&amp;#xe679;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60e;</span>
+                <div class="name">字体颜色</div>
+                <div class="code-name">&amp;#xe60e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6c3;</span>
+                <div class="name">format_letter_spacing_2</div>
+                <div class="code-name">&amp;#xe6c3;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe710;</span>
+                <div class="name">font_size</div>
+                <div class="code-name">&amp;#xe710;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe972;</span>
+                <div class="name">居中</div>
+                <div class="code-name">&amp;#xe972;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe608;</span>
+                <div class="name">居右</div>
+                <div class="code-name">&amp;#xe608;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe688;</span>
+                <div class="name">居左</div>
+                <div class="code-name">&amp;#xe688;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe64a;</span>
                 <div class="name">实线</div>
@@ -210,9 +264,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1625127498350') format('woff2'),
+  src: url('iconfont.woff2?t=1625198204132') format('woff2'),
-       url('iconfont.woff?t=1625127498350') format('woff'),
+       url('iconfont.woff?t=1625198204132') format('woff'),
-       url('iconfont.ttf?t=1625127498350') format('truetype');
+       url('iconfont.ttf?t=1625198204132') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -238,6 +292,87 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-font-weight-bold"></span>
+            <div class="name">
+              font-weight-bold
+            </div>
+            <div class="code-name">.icon-font-weight-bold
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-letter_spacing"></span>
+            <div class="name">
+              letter_spacing
+            </div>
+            <div class="code-name">.icon-letter_spacing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-letter-spacing"></span>
+            <div class="name">
+              letter-spacing
+            </div>
+            <div class="code-name">.icon-letter-spacing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-zimua"></span>
+            <div class="name">
+              字体颜色
+            </div>
+            <div class="code-name">.icon-zimua
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-format_letter_spacing_"></span>
+            <div class="name">
+              format_letter_spacing_2
+            </div>
+            <div class="code-name">.icon-format_letter_spacing_
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-font_size"></span>
+            <div class="name">
+              font_size
+            </div>
+            <div class="code-name">.icon-font_size
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-align-center"></span>
+            <div class="name">
+              居中
+            </div>
+            <div class="code-name">.icon-align-center
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-juyou"></span>
+            <div class="name">
+              居右
+            </div>
+            <div class="code-name">.icon-juyou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-juzuo"></span>
+            <div class="name">
+              居左
+            </div>
+            <div class="code-name">.icon-juzuo
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-solid_line"></span>
             <div class="name">
@@ -472,6 +607,78 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-font-weight-bold"></use>
+                </svg>
+                <div class="name">font-weight-bold</div>
+                <div class="code-name">#icon-font-weight-bold</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-letter_spacing"></use>
+                </svg>
+                <div class="name">letter_spacing</div>
+                <div class="code-name">#icon-letter_spacing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-letter-spacing"></use>
+                </svg>
+                <div class="name">letter-spacing</div>
+                <div class="code-name">#icon-letter-spacing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zimua"></use>
+                </svg>
+                <div class="name">字体颜色</div>
+                <div class="code-name">#icon-zimua</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-format_letter_spacing_"></use>
+                </svg>
+                <div class="name">format_letter_spacing_2</div>
+                <div class="code-name">#icon-format_letter_spacing_</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-font_size"></use>
+                </svg>
+                <div class="name">font_size</div>
+                <div class="code-name">#icon-font_size</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-align-center"></use>
+                </svg>
+                <div class="name">居中</div>
+                <div class="code-name">#icon-align-center</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-juyou"></use>
+                </svg>
+                <div class="name">居右</div>
+                <div class="code-name">#icon-juyou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-juzuo"></use>
+                </svg>
+                <div class="name">居左</div>
+                <div class="code-name">#icon-juzuo</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-solid_line"></use>

frontend/src/styles/deicon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1625127498350') format('woff2'),
+  src: url('iconfont.woff2?t=1625198204132') format('woff2'),
-       url('iconfont.woff?t=1625127498350') format('woff'),
+       url('iconfont.woff?t=1625198204132') format('woff'),
-       url('iconfont.ttf?t=1625127498350') format('truetype');
+       url('iconfont.ttf?t=1625198204132') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,42 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-font-weight-bold:before {
+  content: "\e659";
+}
+
+.icon-letter_spacing:before {
+  content: "\e601";
+}
+
+.icon-letter-spacing:before {
+  content: "\e679";
+}
+
+.icon-zimua:before {
+  content: "\e60e";
+}
+
+.icon-format_letter_spacing_:before {
+  content: "\e6c3";
+}
+
+.icon-font_size:before {
+  content: "\e710";
+}
+
+.icon-align-center:before {
+  content: "\e972";
+}
+
+.icon-juyou:before {
+  content: "\e608";
+}
+
+.icon-juzuo:before {
+  content: "\e688";
+}
+
 .icon-solid_line:before {
   content: "\e64a";
 }

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,69 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "4283405",
+      "name": "font-weight-bold",
+      "font_class": "font-weight-bold",
+      "unicode": "e659",
+      "unicode_decimal": 58969
+    },
+    {
+      "icon_id": "9356145",
+      "name": "letter_spacing",
+      "font_class": "letter_spacing",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "13169265",
+      "name": "letter-spacing",
+      "font_class": "letter-spacing",
+      "unicode": "e679",
+      "unicode_decimal": 59001
+    },
+    {
+      "icon_id": "7620139",
+      "name": "字体颜色",
+      "font_class": "zimua",
+      "unicode": "e60e",
+      "unicode_decimal": 58894
+    },
+    {
+      "icon_id": "13016621",
+      "name": "format_letter_spacing_2",
+      "font_class": "format_letter_spacing_",
+      "unicode": "e6c3",
+      "unicode_decimal": 59075
+    },
+    {
+      "icon_id": "18354433",
+      "name": "font_size",
+      "font_class": "font_size",
+      "unicode": "e710",
+      "unicode_decimal": 59152
+    },
+    {
+      "icon_id": "3717684",
+      "name": "居中",
+      "font_class": "align-center",
+      "unicode": "e972",
+      "unicode_decimal": 59762
+    },
+    {
+      "icon_id": "14764786",
+      "name": "居右",
+      "font_class": "juyou",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "22405859",
+      "name": "居左",
+      "font_class": "juzuo",
+      "unicode": "e688",
+      "unicode_decimal": 59016
+    },
     {
       "icon_id": "20374711",
       "name": "实线",

frontend/src/views/Tinymce/RectangleAttr.vue

@@ -0,0 +1,174 @@
+<template>
+  <el-card class="el-card-main" :style="mainStyle">
+    <div style="position: relative;">
+      <div style="width: 80px;margin-top: 2px;margin-left: 2px;float: left">
+        <el-tooltip content="边框风格">
+          <el-select v-model="styleInfo.borderStyle" size="mini">
+            <el-option
+              v-for="item in lineStyle"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+              <span style="float: left;">
+                <i :class="item.icon" />
+              </span>
+              <span style="float: right; color: #8492a6; font-size: 12px">{{ item.label }}</span>
+            </el-option>
+          </el-select>
+        </el-tooltip>
+      </div>
+
+      <div style="width: 55px;float: left;margin-top: 2px;margin-left: 2px;">
+        <el-tooltip content="边框宽度">
+          <el-select v-model="styleInfo.borderWidth" size="mini" placeholder="">
+            <el-option
+              v-for="item in lineFont"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-tooltip>
+      </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-huabi" @click="goBoardColor" />
+          </el-tooltip>
+          <div :style="boardDivColor" />
+          <el-color-picker ref="boardColorPicker" v-model="styleInfo.borderColor" 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 {
+  data() {
+    return {
+      lineStyle: [{
+        icon: 'iconfont icon-solid_line',
+        value: 'solid',
+        label: '实线'
+      }, {
+        icon: 'iconfont icon-xuxian',
+        value: 'dashed',
+        label: '虚线'
+      }, {
+        icon: 'iconfont icon-dianxian',
+        value: 'dotted',
+        label: '点线'
+      }],
+      lineFont: [{
+        value: '0',
+        label: '0'
+      }, {
+        value: '1',
+        label: '1'
+      }, {
+        value: '2',
+        label: '2'
+      }, {
+        value: '3',
+        label: '3'
+      }, {
+        value: '4',
+        label: '4'
+      }, {
+        value: '5',
+        label: '5'
+      }]
+    }
+  },
+  computed: {
+
+    boardDivColor() {
+      const style = {
+        height: '2px',
+        background: this.styleInfo.borderColor
+      }
+      return style
+    },
+    backgroundDivColor() {
+      const style = {
+        height: '2px',
+        background: this.styleInfo.backgroundColor
+      }
+      return style
+    },
+
+    mainStyle() {
+      const style = {
+        left: this.getPositionX(this.curComponent.style.left) + 'px',
+        top: (this.getPositionY(this.curComponent.style.top) - 3) + 'px'
+      }
+      return style
+    },
+    styleInfo() {
+      return this.$store.state.curComponent.style
+    },
+    ...mapState([
+      'curComponent',
+      'curCanvasScale',
+      'canvasStyleData'
+    ])
+
+  },
+  methods: {
+    goBoardColor() {
+      this.$refs.boardColorPicker.handleTrigger()
+    },
+    goBackgroundColor() {
+      this.$refs.backgroundColorPicker.handleTrigger()
+    },
+    getPositionX(x) {
+      if (this.canvasStyleData.selfAdaption) {
+        return (x * this.curCanvasScale.scaleWidth / 100) + 60
+      } else {
+        return x + 190
+      }
+    },
+    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: 210px;
+    position: absolute;
+
+  }
+  .el-card-main ::v-deep .el-card__body {
+    padding: 0px!important;
+
+  }
+</style>

frontend/src/views/Tinymce/TextAttr.vue

@@ -0,0 +1,171 @@
+<template>
+  <el-card class="el-card-main" :style="mainStyle">
+    <div style="position: relative;">
+      <div style="width: 100px;float: left;margin-top: 2px;margin-left: 2px;">
+        <el-radio-group v-model="styleInfo.textAlign" size="mini">
+          <el-radio-button
+            v-for="item in textAlignOptions"
+            :key="item.label"
+            :label="item.label"
+          >
+            <el-tooltip :content="item.tooltip">
+              <span style="float: left;">
+                <i :class="item.icon" />
+              </span>
+            </el-tooltip>
+          </el-radio-button>
+        </el-radio-group>
+      </div>
+      <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 {
+  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) + 'px',
+        top: (this.getPositionY(this.curComponent.style.top) - 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 + 190
+      }
+    },
+    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: 450px;
+    position: absolute;
+
+  }
+  .el-card-main ::v-deep .el-card__body {
+    padding: 0px!important;
+
+  }
+  >>> .el-radio-button__inner{
+    padding: 5px;
+    width: 30px;
+  }
+</style>

frontend/src/views/panel/edit/index.vue

@@ -157,8 +157,8 @@
     <input id="input" ref="files" type="file" accept="image/*" hidden @change="handleFileChange">
 
     <!--矩形样式组件-->
-    test--------{{ curComponent&&curComponent.type }}
     <RectangleAttr v-if="curComponent&&curComponent.type==='rect-shape'" />
+    <TextAttr v-if="curComponent&&curComponent.type==='v-text'" />
 
   </el-row>
 </template>
@@ -199,6 +199,7 @@ import toast from '@/components/canvas/utils/toast'
 import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
 import generateID from '@/components/canvas/utils/generateID'
 import RectangleAttr from '@/components/canvas/components/RectangleAttr'
+import TextAttr from '@/views/Tinymce/TextAttr'
 
 export default {
   name: 'PanelEdit',
@@ -218,7 +219,8 @@ export default {
     AttrListExtend,
     AssistComponent,
     PanelTextEditor,
-    RectangleAttr
+    RectangleAttr,
+    TextAttr
   },
   data() {
     return {
@@ -455,12 +457,12 @@ export default {
       this.$store.commit('recordSnapshot')
       this.clearCurrentInfo()
 
-      // 文字组件
+      // // 文字组件
-      if (component.type === 'v-text') {
+      // if (component.type === 'v-text') {
-        this.$store.commit('setCurComponent', { component: component, index: this.componentData.length })
+      //   this.$store.commit('setCurComponent', { component: component, index: this.componentData.length })
-        this.styleDialogVisible = true
+      //   this.styleDialogVisible = true
-        this.show = false
+      //   this.show = false
-      }
+      // }
     },
     clearCurrentInfo() {
       this.currentWidget = null