From 87533a33fd13582c2e74d847978e99214dc7f0d3 Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Thu, 7 Sep 2023 09:52:38 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E5=85=A8=E5=B1=8F=E6=A8=A1=E5=BC=8F=E4=B8=8B=E8=BF=87?=
 =?UTF-8?q?=E6=BB=A4=E7=BB=84=E4=BB=B6=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/editor/ComponentWrapper.vue    | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue b/core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
index 1af38d0d23..1059a9408c 100644
--- a/core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
+++ b/core/frontend/src/components/canvas/components/editor/ComponentWrapper.vue
@@ -2,6 +2,7 @@
   <div
     :style="getOutStyleDefault(config.style)"
     class="component component-outer"
+    :class="{'component-active': filterActive}"
     @click="handleClick"
     @mousedown="elementMouseDown"
   >
@@ -75,19 +76,19 @@
 </template>
 
 <script>
-import { getStyle } from '@/components/canvas/utils/style'
+import {getStyle} from '@/components/canvas/utils/style'
 import runAnimation from '@/components/canvas/utils/runAnimation'
-import { mixins } from '@/components/canvas/utils/events'
-import { mapState } from 'vuex'
+import {mixins} from '@/components/canvas/utils/events'
+import {mapState} from 'vuex'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
 import EditBar from '@/components/canvas/components/editor/EditBar'
 import MobileCheckBar from '@/components/canvas/components/editor/MobileCheckBar'
 import CloseBar from '@/components/canvas/components/editor/CloseBar'
-import { hexColorToRGBA } from '@/views/chart/chart/util'
-import { imgUrlTrans } from '@/components/canvas/utils/utils'
+import {hexColorToRGBA} from '@/views/chart/chart/util'
+import {imgUrlTrans} from '@/components/canvas/utils/utils'
 
 export default {
-  components: { CloseBar, MobileCheckBar, DeOutWidget, EditBar },
+  components: {CloseBar, MobileCheckBar, DeOutWidget, EditBar},
   mixins: [mixins],
   props: {
     canvasId: {
@@ -134,7 +135,7 @@ export default {
     canvasStyleData: {
       type: Object,
       required: false,
-      default: function() {
+      default: function () {
         return {}
       }
     },
@@ -157,10 +158,13 @@ export default {
     }
   },
   computed: {
+    filterActive() {
+      return this.curComponent && this.config.id === this.curComponent.id && this.config.type === 'custom'
+    },
     chart() {
       if (this.config.propValue?.viewId) {
         const viewInfo = this.panelViewDetailsInfo[this.config.propValue.viewId];
-        return viewInfo?JSON.parse(viewInfo):null
+        return viewInfo ? JSON.parse(viewInfo) : null
       }
       return null
     },
@@ -320,7 +324,7 @@ export default {
       e.stopPropagation()
       const _this = this
       setTimeout(() => {
-        _this.$store.commit('setCurComponent', { component: _this.config, index: _this.index })
+        _this.$store.commit('setCurComponent', {component: _this.config, index: _this.index})
       }, 200)
     },
     showViewDetails(params) {
@@ -381,4 +385,12 @@ export default {
   width: 100% !important;
   height: 100% !important;
 }
+
+.component-outer {
+  transform: translate(0);
+}
+
+.component-active {
+  z-index: 1;
+}
 </style>