From 3585cceca850d854ec83876f3841d27ba1d97c7a Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Mon, 30 Dec 2024 10:29:07 +0800
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20=E4=BC=98=E5=8C=96=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E6=A0=8F=E7=BB=84=E4=BB=B6=E7=9A=84=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=92=8C=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-移除了 AiPullDown 组件的绝对定位样式
- 调整了 AiSearchBar 组件的网格布局和样式
- 优化了展开和收缩功能的实现方式
- 修复了一些潜在的样式冲突和显示问题
---
 ui/packages/basic/AiPullDown.vue   |  5 ----
 ui/packages/layout/AiSearchBar.vue | 44 ++++++++++++------------------
 2 files changed, 17 insertions(+), 32 deletions(-)

diff --git a/ui/packages/basic/AiPullDown.vue b/ui/packages/basic/AiPullDown.vue
index ec5d11af..82a22e05 100644
--- a/ui/packages/basic/AiPullDown.vue
+++ b/ui/packages/basic/AiPullDown.vue
@@ -50,11 +50,6 @@ export default {
 <style lang="scss" scoped>
 .AiPullDown {
   display: flex;
-  position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 24px;
-  transform: translateY(100%);
   background-color: #fff;
 
   .line {
diff --git a/ui/packages/layout/AiSearchBar.vue b/ui/packages/layout/AiSearchBar.vue
index 3c82a4a4..73b1c378 100644
--- a/ui/packages/layout/AiSearchBar.vue
+++ b/ui/packages/layout/AiSearchBar.vue
@@ -1,14 +1,14 @@
 <template>
-  <section class="AiSearchBar" :class="{bottomBorder,isSingleRow,expand}">
+  <section class="AiSearchBar grid" :class="{bottomBorder,isSingleRow}">
     <div class="left">
-      <div class="flex wrap content">
+      <div class="flex wrap gridZone">
         <slot name="left"/>
       </div>
     </div>
     <div class="right" v-if="$slots.right">
       <slot name="right"/>
     </div>
-    <ai-pull-down v-if="!isSingleRow" v-model="expand"/>
+    <ai-pull-down class="row" v-if="!isSingleRow" v-model="expand"/>
   </section>
 </template>
 
@@ -17,7 +17,6 @@ export default {
   name: "AiSearchBar",
   props: {
     bottomBorder: Boolean,
-    size: {default: "small"}
   },
   computed: {
     isSingleRow: v => v.height <= 45
@@ -28,24 +27,30 @@ export default {
       expand: false
     }
   },
+  watch: {
+    expand: {
+      handler(v) {
+        this.$el.querySelector(".left").style.height = v ? 'auto' : '33px'
+      }
+    }
+  },
   mounted() {
-    this.height = this.$el.querySelector(".left .content").getBoundingClientRect().height
+    this.height = this.$el.querySelector(".left .gridZone").getBoundingClientRect().height
+    // 卡浏览器渲染帧,为了避免flex布局溢出后只显示尾部元素,先用auto 高度,再延时一帧再设置为33px
+    setTimeout(() => {
+      this.$el.querySelector(".left").style.height = "33px"
+    },50)
   },
 }
 </script>
 
 <style lang="scss" scoped>
 .AiSearchBar {
-  display: grid;
   gap: 10px;
   grid-template-columns: 1fr auto;
-  padding-bottom: 32px;
   position: relative;
-  height: 64px;
-  overflow: hidden;
 
   &.isSingleRow {
-    height: 44px;
     padding-bottom: 12px;
   }
 
@@ -53,19 +58,12 @@ export default {
     border-bottom: 1px solid #eee;
   }
 
-  &.expand {
-    height: auto;
-    .left{
-      height: auto;
-    }
-  }
-
   .left {
     padding-top: 1px;
-    height: 33px;
+    height: auto;
     overflow: hidden;
 
-    .content {
+    .gridZone {
       gap: 8px;
     }
   }
@@ -80,18 +78,10 @@ export default {
     .el-input {
       width: 280px;
     }
-
-    * + button, * + div, * + section {
-      margin-left: 8px;
-    }
   }
 
   .el-input {
     width: auto;
   }
 }
-
-:deep( .searchLeftZone > .el-button), :deep( .searchRightZone > .el-button ) {
-  margin-left: 0;
-}
 </style>