refactor(ui): 优化搜索栏组件的样式和布局

-移除了 AiPullDown 组件的绝对定位样式
- 调整了 AiSearchBar 组件的网格布局和样式
- 优化了展开和收缩功能的实现方式
- 修复了一些潜在的样式冲突和显示问题

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 {

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>