From 34ae707e2607cb4bf5ad784584fa060d302a68d5 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Tue, 23 Apr 2024 16:26:00 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E7=B3=BB=E7=BB=9F=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=85=A8=E5=B1=80=E5=88=97=E8=A1=A8=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89UI=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/filter-text/src/FilterText.vue | 38 ++++++++++++++++---
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/core/core-frontend/src/components/filter-text/src/FilterText.vue b/core/core-frontend/src/components/filter-text/src/FilterText.vue
index ccbe78a136..d487835bbd 100644
--- a/core/core-frontend/src/components/filter-text/src/FilterText.vue
+++ b/core/core-frontend/src/components/filter-text/src/FilterText.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import { nextTick, ref, watch } from 'vue'
 import { Icon } from '@/components/icon-custom'
 import { ElButton, ElDivider, ElIcon } from 'element-plus-secondary'
 import { propTypes } from '@/utils/propTypes'
@@ -29,10 +29,16 @@ const clearFilter = (index?: number) => {
   emits('clearFilter', index)
 }
 
+const clearFilterAll = () => {
+  emits('clearFilter', 'empty')
+}
+
 watch(
-  props.filterTexts,
+  () => props.filterTexts,
   () => {
-    showScroll.value = container.value && container.value.scrollWidth > container.value.offsetWidth
+    nextTick(() => {
+      showScroll.value = container.value?.scrollWidth > container.value?.offsetWidth
+    })
   },
   { deep: true }
 )
@@ -53,11 +59,28 @@ watch(
           <Icon name="icon_close_outlined"></Icon>
         </el-icon>
       </p>
+      <el-button
+        type="text"
+        class="clear-btn clear-btn-inner"
+        v-if="!showScroll"
+        @click="clearFilterAll"
+      >
+        <template #icon>
+          <Icon name="icon_delete-trash_outlined"></Icon>
+        </template>
+        清空条件</el-button
+      >
     </div>
     <el-icon @click="scrollNext" class="arrow-right arrow-filter" v-if="showScroll">
       <Icon name="icon_right_outlined"></Icon>
     </el-icon>
-    <el-button type="text" class="clear-btn" @click="clearFilter()">
+    <el-button
+      type="text"
+      class="clear-btn"
+      style="height: 24px; line-height: 24px"
+      v-if="showScroll"
+      @click="clearFilterAll"
+    >
       <template #icon>
         <Icon name="icon_delete-trash_outlined"></Icon>
       </template>
@@ -102,8 +125,9 @@ watch(
 
     i {
       position: absolute;
-      right: 2px;
+      right: 6px;
       top: 50%;
+      font-size: 12px;
       transform: translateY(-50%);
       cursor: pointer;
     }
@@ -150,6 +174,10 @@ watch(
     overflow-x: auto;
     white-space: nowrap;
     height: 24px;
+
+    .clear-btn-inner {
+      margin-top: -16px;
+    }
   }
 }
 </style>