From fb6309d85a99f184b1cc4b2bbd831a7c32d30d56 Mon Sep 17 00:00:00 2001
From: fit2cloud-chenyw <yawen.chen@fit2cloud.com>
Date: Sat, 8 Oct 2022 11:46:18 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF-=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E6=8C=89=E9=92=AE):=20=E6=8C=89=E9=92=AE=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B7=9F=E9=9A=8F=E4=BB=AA=E8=A1=A8=E6=9D=BF=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/widget/DeWidget/DeButton.vue   | 29 ++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/widget/DeWidget/DeButton.vue b/frontend/src/components/widget/DeWidget/DeButton.vue
index 055b9a0fcf..0eb1680d25 100644
--- a/frontend/src/components/widget/DeWidget/DeButton.vue
+++ b/frontend/src/components/widget/DeWidget/DeButton.vue
@@ -6,7 +6,7 @@
     :round="element.options.attrs.round"
     :plain="element.options.attrs.plain"
     :size="size"
-    class="de-search-button"
+    :class="'de-search-button' + (useDarkClass ? ' dark-search-button' : '')"
     @click="triggerSearch"
   >
     {{ element.options.value }}
@@ -15,6 +15,7 @@
 
 <script>
 import bus from '@/utils/bus'
+import { mapState } from 'vuex'
 export default {
 
   props: {
@@ -28,12 +29,28 @@ export default {
     },
     size: String
   },
+
   data() {
     return {
       operator: 'eq',
       values: null
     }
   },
+  computed: {
+    useDarkClass() {
+      if (this.canvasStyleData.openCommonStyle && this.canvasStyleData.panel.backgroundType === 'color') {
+        const themeColor = this.canvasStyleData.panel.themeColor
+        if (themeColor !== 'light') {
+          return true
+        }
+      }
+      return false
+    },
+    ...mapState([
+      'canvasStyleData'
+    ])
+
+  },
   created() {
   },
   methods: {
@@ -49,4 +66,14 @@ export default {
   height: 100%;
   width: 100%;
 }
+.dark-search-button {
+  color: #21333B !important;
+  background-color: #2681FF !important;
+  border-color: #2681FF !important;
+  &:hover {
+    background: rgb(81, 154, 255) !important;
+    border-color: rgb(81, 154, 255) !important;
+    color: #21333B !important;
+  }
+}
 </style>