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

frontend/src/components/canvas/components/RectangleAttr.vue

+<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/iconfont.css

 @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