feat:增加图片样式组件，统一样式组件设置

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

 // 公共样式
 export const commonStyle = {
   rotate: 0,
-  opacity: 1
+  opacity: 1,
+  borderStyle: 'solid',
+  borderWidth: 0,
+  borderRadius: 0
 }
 
 export const commonAttr = {
@@ -143,6 +146,8 @@ const list = [
     type: 'Picture',
     propValue: require('@/components/canvas/assets/bg-kj-1.jpg'),
     style: {
+      borderStyle: 'solid',
+      borderWidth: 0,
       width: 600,
       height: 300,
       borderRadius: ''
@@ -198,7 +203,7 @@ const list = [
       width: 200,
       height: 200,
       borderStyle: 'solid',
-      borderWidth: 1,
+      borderWidth: 0,
       borderColor: '#000000',
       backgroundColor: '#ffffff',
       borderRadius: 0

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

@@ -162,9 +162,9 @@
     <input id="input" ref="files" type="file" accept="image/*" hidden @click="e => {e.target.value = '';}" @change="handleFileChange">
 
     <!--矩形样式组件-->
-    <RectangleAttr v-if="curComponent&&(curComponent.type==='rect-shape'||curComponent.type==='de-tabs')" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
-    <TextAttr v-if="curComponent && (curComponent.type==='v-text' || curComponent.type==='de-show-date')" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
-    <FilterTextAttr v-if="curComponent&&curComponent.type==='custom'&&curComponent.options.attrs.title" :scroll-left="scrollLeft" :scroll-top="scrollTop" />
+    <!--    <RectangleAttr v-if="curComponent&&(curComponent.type==='rect-shape'||curComponent.type==='de-tabs')" :scroll-left="scrollLeft" :scroll-top="scrollTop" />-->
+    <TextAttr v-if="showAttr" :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"
@@ -280,11 +280,33 @@ export default {
       scrollLeft: 0,
       scrollTop: 0,
       timeMachine: null,
-      dropComponentInfo: null
+      dropComponentInfo: null,
+      // 需要展示属性设置的组件类型
+      showAttrComponent: [
+        'custom',
+        'v-text',
+        'picture-add',
+        'de-tabs',
+        'rect-shape',
+        'de-show-date'
+      ]
     }
   },
 
   computed: {
+    showAttr() {
+      // console.log('showAttr：' + JSON.stringify(this.curComponent))
+      if (this.curComponent && this.showAttrComponent.includes(this.curComponent.type)) {
+        // 过滤组件有标题才显示
+        if (this.curComponent.type === 'custom' && !this.curComponent.options.attrs.title) {
+          return false
+        } else {
+          return true
+        }
+      } else {
+        return false
+      }
+    },
     customCanvasStyle() {
       let style = {}
 
@@ -687,6 +709,7 @@ export default {
             ...commonAttr,
             id: generateID(),
             component: 'Picture',
+            type: 'picture-add',
             label: '图片',
             icon: '',
             propValue: fileResult,