feat: 1.矩形组件编辑样式修改为悬浮式设计，设计框可以根据矩形组件移动；2.增加矩形组件风格选项 3.变更新建矩形组件默认参数

frontend/src/components/canvas/components/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/components/canvas/custom-component/component-list.js

@@ -119,10 +119,10 @@ const list = [
     style: {
       width: 200,
       height: 200,
-      borderColor: '#000',
+      borderStyle: 'solid',
       borderWidth: 1,
-      backgroundColor: '',
-      borderStyle: 'solid'
+      borderColor: '#000000',
+      backgroundColor: '#ffffff'
     }
   },
   {

frontend/src/styles/deicon/demo_index.html

@@ -54,6 +54,36 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe64a;</span>
+                <div class="name">实线</div>
+                <div class="code-name">&amp;#xe64a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe640;</span>
+                <div class="name">画笔</div>
+                <div class="code-name">&amp;#xe640;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe614;</span>
+                <div class="name">点线</div>
+                <div class="code-name">&amp;#xe614;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe617;</span>
+                <div class="name">虚线</div>
+                <div class="code-name">&amp;#xe617;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe600;</span>
+                <div class="name">背景色‘</div>
+                <div class="code-name">&amp;#xe600;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe648;</span>
                 <div class="name">矩形</div>
@@ -180,9 +210,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1623984849135') format('woff2'),
-       url('iconfont.woff?t=1623984849135') format('woff'),
-       url('iconfont.ttf?t=1623984849135') format('truetype');
+  src: url('iconfont.woff2?t=1625127498350') format('woff2'),
+       url('iconfont.woff?t=1625127498350') format('woff'),
+       url('iconfont.ttf?t=1625127498350') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -208,6 +238,51 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-solid_line"></span>
+            <div class="name">
+              实线
+            </div>
+            <div class="code-name">.icon-solid_line
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-huabi"></span>
+            <div class="name">
+              画笔
+            </div>
+            <div class="code-name">.icon-huabi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dianxian"></span>
+            <div class="name">
+              点线
+            </div>
+            <div class="code-name">.icon-dianxian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xuxian"></span>
+            <div class="name">
+              虚线
+            </div>
+            <div class="code-name">.icon-xuxian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-beijingse1"></span>
+            <div class="name">
+              背景色‘
+            </div>
+            <div class="code-name">.icon-beijingse1
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-juxing"></span>
             <div class="name">
@@ -397,6 +472,46 @@
       <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-solid_line"></use>
+                </svg>
+                <div class="name">实线</div>
+                <div class="code-name">#icon-solid_line</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-huabi"></use>
+                </svg>
+                <div class="name">画笔</div>
+                <div class="code-name">#icon-huabi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dianxian"></use>
+                </svg>
+                <div class="name">点线</div>
+                <div class="code-name">#icon-dianxian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xuxian"></use>
+                </svg>
+                <div class="name">虚线</div>
+                <div class="code-name">#icon-xuxian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-beijingse1"></use>
+                </svg>
+                <div class="name">背景色‘</div>
+                <div class="code-name">#icon-beijingse1</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-juxing"></use>

frontend/src/styles/deicon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1623984849135') format('woff2'),
-       url('iconfont.woff?t=1623984849135') format('woff'),
-       url('iconfont.ttf?t=1623984849135') format('truetype');
+  src: url('iconfont.woff2?t=1625127498350') format('woff2'),
+       url('iconfont.woff?t=1625127498350') format('woff'),
+       url('iconfont.ttf?t=1625127498350') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-solid_line:before {
+  content: "\e64a";
+}
+
+.icon-huabi:before {
+  content: "\e640";
+}
+
+.icon-dianxian:before {
+  content: "\e614";
+}
+
+.icon-xuxian:before {
+  content: "\e617";
+}
+
+.icon-beijingse1:before {
+  content: "\e600";
+}
+
 .icon-juxing:before {
   content: "\e648";
 }

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,41 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "20374711",
+      "name": "实线",
+      "font_class": "solid_line",
+      "unicode": "e64a",
+      "unicode_decimal": 58954
+    },
+    {
+      "icon_id": "930673",
+      "name": "画笔",
+      "font_class": "huabi",
+      "unicode": "e640",
+      "unicode_decimal": 58944
+    },
+    {
+      "icon_id": "15952264",
+      "name": "点线",
+      "font_class": "dianxian",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "15952269",
+      "name": "虚线",
+      "font_class": "xuxian",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "19990890",
+      "name": "背景色‘",
+      "font_class": "beijingse1",
+      "unicode": "e600",
+      "unicode_decimal": 58880
+    },
     {
       "icon_id": "2404485",
       "name": "矩形",

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

@@ -154,9 +154,12 @@
     <fullscreen style="height: 100%;background: #f7f8fa;overflow-y: auto" :fullscreen.sync="previewVisible">
       <Preview v-if="previewVisible" :show-type="canvasStyleData.selfAdaption?'full':'width'" />
     </fullscreen>
-
     <input id="input" ref="files" type="file" accept="image/*" hidden @change="handleFileChange">
 
+    <!--矩形样式组件-->
+    test--------{{ curComponent&&curComponent.type }}
+    <RectangleAttr v-if="curComponent&&curComponent.type==='rect-shape'" />
+
   </el-row>
 </template>
 
@@ -195,6 +198,7 @@ import FilterDialog from '../filter/filterDialog'
 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'
 
 export default {
   name: 'PanelEdit',
@@ -213,7 +217,8 @@ export default {
     AttrList,
     AttrListExtend,
     AssistComponent,
-    PanelTextEditor
+    PanelTextEditor,
+    RectangleAttr
   },
   data() {
     return {
@@ -451,7 +456,7 @@ export default {
       this.clearCurrentInfo()
 
       // 文字组件
-      if (component.type === 'v-text' || component.type === 'rect-shape') {
+      if (component.type === 'v-text') {
         this.$store.commit('setCurComponent', { component: component, index: this.componentData.length })
         this.styleDialogVisible = true
         this.show = false