From ed4a672627de8a11539ea3e3ac529edd7733951c Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Tue, 15 Nov 2022 15:39:58 +0800
Subject: [PATCH] =?UTF-8?q?refactor(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BB=84=E4=BB=B6=E8=BE=B9=E6=A1=86=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=EF=BC=8C=E8=AE=BE=E7=BD=AE=E6=97=B6=E5=8A=A0=E4=B8=8A?=
 =?UTF-8?q?=E5=BD=93=E5=89=8D=E4=BB=AA=E8=A1=A8=E6=9D=BF=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E5=92=8C=E5=92=8C=E7=BB=84=E4=BB=B6=E9=A2=9C=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/editor/ComponentWrapper.vue    |   4 +-
 frontend/src/components/deDrag/index.vue      |   4 +-
 .../src/views/background/BackgroundItem.vue   | 130 ++++++++++--------
 frontend/src/views/background/index.vue       |  24 ++++
 .../views/panel/edit/ComponentWaitItem.vue    |   4 +-
 5 files changed, 101 insertions(+), 65 deletions(-)

diff --git a/frontend/src/components/canvas/components/editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
index ea6ad0d9da..45a0b017b1 100644
--- a/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
@@ -348,7 +348,7 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  width: 100% !important;
+  height: 100% !important;
 }
 </style>
diff --git a/frontend/src/components/deDrag/index.vue b/frontend/src/components/deDrag/index.vue
index 62be1fcf4f..0c435cd329 100644
--- a/frontend/src/components/deDrag/index.vue
+++ b/frontend/src/components/deDrag/index.vue
@@ -2120,8 +2120,8 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  width: 100% !important;
+  height: 100% !important;
 }
 
 .drag-on-tab-collision {
diff --git a/frontend/src/views/background/BackgroundItem.vue b/frontend/src/views/background/BackgroundItem.vue
index 308a38f62b..034b0146d9 100644
--- a/frontend/src/views/background/BackgroundItem.vue
+++ b/frontend/src/views/background/BackgroundItem.vue
@@ -7,6 +7,7 @@
         },
         'template-img'
       ]"
+      :style="itemStyle"
       @click.stop="setBoard"
     >
       <svg-icon
@@ -22,6 +23,7 @@
 <script>
 import { mapState } from 'vuex'
 import { imgUrlTrans } from '@/components/canvas/utils/utils'
+import { hexColorToRGBA } from '@/views/chart/chart/util'
 
 export default {
   name: 'BackgroundItem',
@@ -34,6 +36,15 @@ export default {
     }
   },
   computed: {
+    itemStyle() {
+      if (this.curComponent.commonBackground.backgroundColorSelect) {
+        return {
+          'background-color': hexColorToRGBA(this.curComponent.commonBackground.color, this.curComponent.commonBackground.alpha)
+        }
+      } else {
+        return {}
+      }
+    },
     mainIconClass() {
       return this.template.url.replace('board/', '').replace('.svg', '')
     },
@@ -64,72 +75,73 @@ export default {
 
 <style scoped>
 
-  .testcase-template {
-    display: inline-block;
-    margin: 10px 0px;
-    width: 90px;
-  }
+.testcase-template {
+  display: inline-block;
+  margin: 10px 0px;
+  width: 90px;
+}
 
-  .demonstration {
-    display: block;
-    font-size: 8px;
-    color: gray;
-    text-align: center;
-    margin: 10px auto;
-    width: 130px;
-    white-space:nowrap;
-    overflow:hidden;
-    text-overflow:ellipsis;
-  }
+.demonstration {
+  display: block;
+  font-size: 8px;
+  color: gray;
+  text-align: center;
+  margin: 10px auto;
+  width: 130px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
-  .template-img {
-    position: relative;
-    height: 80px;
-    width: 130px;
-    margin: 0 auto;
-    box-shadow: 0 0 2px 0 rgba(31,31,31,0.15), 0 1px 2px 0 rgba(31,31,31,0.15);
-    border: solid 2px #fff;
-    box-sizing: border-box;
-    border-radius: 3px;
-  }
+.template-img {
+  position: relative;
+  height: 80px;
+  width: 130px;
+  margin: 0 auto;
+  /*box-shadow: 0 0 2px 0 rgba(31, 31, 31, 0.15), 0 1px 2px 0 rgba(31, 31, 31, 0.15);*/
+  /*border: solid px #fff;*/
+  box-sizing: border-box;
+  border-radius: 3px;
+}
 
-  .template-img:hover {
-    border: solid 1px #4b8fdf;
-    border-radius: 3px;
-    color: deepskyblue;
-    cursor: pointer;
-  }
+.template-img:hover {
+  border: solid 1px #4b8fdf;
+  border-radius: 3px;
+  color: deepskyblue;
+  cursor: pointer;
+}
 
-  .template-img > i{
-    display:none;
-    float: right;
-    color: gray;
-    margin: 2px;
-  }
+.template-img > i {
+  display: none;
+  float: right;
+  color: gray;
+  margin: 2px;
+}
 
-  .template-img > i:hover {
-    color: red;
-  }
+.template-img > i:hover {
+  color: red;
+}
 
-  .template-img:hover > .el-icon-error {
-    display: inline;
-  }
+.template-img:hover > .el-icon-error {
+  display: inline;
+}
 
-  .template-img:hover > .el-icon-edit {
-    display: inline;
-  }
+.template-img:hover > .el-icon-edit {
+  display: inline;
+}
 
-  .template-img-active {
-    border: solid 1px red;
-    border-radius: 3px;
-    color: deepskyblue;
-  }
-  .svg-background {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
+.template-img-active {
+  border: solid 1px red;
+  border-radius: 3px;
+  color: deepskyblue;
+}
+
+.svg-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100% !important;
+  height: 100% !important;
+}
 
 </style>
diff --git a/frontend/src/views/background/index.vue b/frontend/src/views/background/index.vue
index 1b264d968b..3ccefee1ec 100644
--- a/frontend/src/views/background/index.vue
+++ b/frontend/src/views/background/index.vue
@@ -150,6 +150,7 @@
           </el-col>
           <el-col
             :span="20"
+            :style="customStyle"
             class="main-row"
           >
             <el-row
@@ -163,6 +164,7 @@
                 :span="6"
               >
                 <background-item
+                  :style="itemStyle"
                   :template="item"
                 />
               </el-col>
@@ -278,8 +280,29 @@ export default {
     }
   },
   computed: {
+    customStyle() {
+      let style = {}
+      if (this.canvasStyleData.openCommonStyle) {
+        if (this.canvasStyleData.panel.backgroundType === 'image' && this.canvasStyleData.panel.imageUrl) {
+          style = {
+            background: `url(${imgUrlTrans(this.canvasStyleData.panel.imageUrl)}) no-repeat`,
+            ...style
+          }
+        } else if (this.canvasStyleData.panel.backgroundType === 'color') {
+          style = {
+            background: this.canvasStyleData.panel.color,
+            ...style
+          }
+        }
+      }
+      if (!style.background) {
+        style.background = '#FFFFFF'
+      }
+      return style
+    },
     ...mapState([
       'curComponent',
+      'canvasStyleData',
       'componentData'
     ]),
     isFilterComponent() {
@@ -353,6 +376,7 @@ export default {
 }
 
 .main-row {
+  padding-left: 10px;
   height: 140px;
   overflow-y: auto;
 }
diff --git a/frontend/src/views/panel/edit/ComponentWaitItem.vue b/frontend/src/views/panel/edit/ComponentWaitItem.vue
index 80dda2ac9e..57753a534c 100644
--- a/frontend/src/views/panel/edit/ComponentWaitItem.vue
+++ b/frontend/src/views/panel/edit/ComponentWaitItem.vue
@@ -163,7 +163,7 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  width: 100% !important;
+  height: 100% !important;
 }
 </style>