From eaadc9ae9c4e038fa321a738927ed4a2762b660f Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Mon, 30 Oct 2023 11:11:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=90=9C=E7=B4=A2=E6=A0=8F?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BABUG?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/packages/layout/AiSearchBar.vue | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/ui/packages/layout/AiSearchBar.vue b/ui/packages/layout/AiSearchBar.vue
index 47f865b1..bf65d8cf 100644
--- a/ui/packages/layout/AiSearchBar.vue
+++ b/ui/packages/layout/AiSearchBar.vue
@@ -20,15 +20,14 @@ export default {
     size: {default: "small"}
   },
   computed: {
-    isSingleRow() {
-      return this.height <= 45
-    },
+    isSingleRow: v => v.height <= 45
   },
   data() {
     return {
       height: 0,
       rightHeight: 0,
-      searchBarStyle: {}
+      searchBarStyle: {},
+      observer: null
     }
   },
   methods: {
@@ -39,13 +38,21 @@ export default {
       } else {
         this.searchBarStyle.marginBottom = '0'
       }
+    },
+    initSize() {
+      this.height = this.$refs?.AiSearchBarZone?.offsetHeight
+      this.rightHeight = this.$refs?.searchRightZone?.offsetHeight
     }
   },
   mounted() {
     this.$nextTick(() => {
-      this.height = this.$refs?.AiSearchBarZone?.offsetHeight
-      this.rightHeight = this.$refs?.searchRightZone?.offsetHeight
+      this.initSize()
+      this.observer = new ResizeObserver(this.initSize)
+      this.observer.observe(this.$refs?.AiSearchBarZone)
     })
+  },
+  beforeDestroy() {
+    this.observer?.disconnect()
   }
 }
 </script>
@@ -62,7 +69,7 @@ export default {
     border-bottom: 1px solid #eee;
   }
 
-  :deep(.searchLeftZone ){
+  :deep(.searchLeftZone ) {
     flex: 1;
     min-width: 0;
     display: flex;
@@ -71,7 +78,7 @@ export default {
     gap: 8px;
   }
 
-  :deep(.searchRightZone ){
+  :deep(.searchRightZone ) {
     display: flex;
     align-items: center;
     flex-shrink: 0;
@@ -95,7 +102,7 @@ export default {
   margin-top: 8px;
 }
 
-:deep( .searchLeftZone > .el-button), :deep( .searchRightZone > .el-button ){
+:deep( .searchLeftZone > .el-button), :deep( .searchRightZone > .el-button ) {
   margin-left: 0;
 }
 </style>