feat(ui): 重构高级搜索组件并优化布局

- 重构 AiPullDown 组件，使用 v-model 实现双向绑定
- 优化 AiSearchBar 组件样式和布局
- 调整 AiPage 组件中的滚动条样式

ui/packages/basic/AiPullDown.vue

@@ -14,8 +14,11 @@
 export default {
   name: "AiPullDown",
   props: {
-    target: String,
+    value: Boolean,
-    height: {default: 4},
+  },
+  model: {
+    prop: 'value',
+    event: 'expand'
   },
   data() {
     return {
@@ -25,32 +28,34 @@ export default {
   methods: {
     handleExpand() {
       this.expand = !this.expand
-      if (this.target) {
-
-      } else this.$emit('change', this.expandStyle)
     }
   },
   computed: {
     btnText() {
-      return this.expand ? '收起高级搜索' : '展开高级搜索'
+      return this.expand ? '收起' : '展开'
-    },
-    expandStyle() {
-      let initStyle = {overflow: 'hidden', height: `${this.height}px`}
-      this.expand && (initStyle.height = "auto")
-      return initStyle
     },
     expandIcon() {
       return this.expand ? 'iconfont iconDouble_Up' : 'iconfont iconDouble_Down'
     }
   },
-  mounted() {
+  watch: {
-    this.$emit("change", this.expandStyle)
+    expand: {
+      immediate: true, handler(v) {
+        this.$emit('expand', v)
+      }
+    }
   }
 }
 </script>
 <style lang="scss" scoped>
 .AiPullDown {
   display: flex;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 24px;
+  transform: translateY(100%);
+  background-color: #fff;
 
   .line {
     flex: 1;

ui/packages/layout/AiPage.vue

@@ -48,6 +48,12 @@ export default {
     height: 100%;
 
 
+    :deep(.el-scrollbar__wrap) {
+      overflow-x: hidden;
+      overflow-y: auto;
+      padding-right: 16px;
+    }
+
     & > .fill {
       &.card {
         padding: 12px 16px 12px;
@@ -62,9 +68,6 @@ export default {
         max-width: 1200px;
         overflow-y: auto;
 
-        :deep(.el-scrollbar__wrap) {
-          overflow-x: hidden;
-        }
       }
 
       &.hasFooter {
@@ -81,8 +84,8 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
-    left:0;
+    left: 0;
-    right:0;
+    right: 0;
     height: 64px;
     background: #F5F5F5;
     box-shadow: 0 1px 0 0 #E5E5E5;

ui/packages/layout/AiSearchBar.vue

@@ -1,14 +1,12 @@
 <template>
-  <section>
+  <section class="AiSearchBar" :class="{bottomBorder,isSingleRow,expand}">
-    <div class="AiSearchBar" :class="{bottomBorder}" :style="searchBarStyle">
+    <div ref="AiSearchBarZone" class="searchLeftZone">
-      <div ref="AiSearchBarZone" class="searchLeftZone">
+      <slot name="left"/>
-        <slot name="left"/>
-      </div>
-      <div class="searchRightZone" ref="searchRightZone">
-        <slot name="right"/>
-      </div>
     </div>
-    <ai-pull-down v-if="!isSingleRow" @change="handlePullDown" :height="rightHeight"/>
+    <div class="searchRightZone" ref="searchRightZone">
+      <slot name="right"/>
+    </div>
+    <ai-pull-down v-if="!isSingleRow" v-model="expand"/>
   </section>
 </template>
 
@@ -27,7 +25,8 @@ export default {
       height: 0,
       rightHeight: 0,
       searchBarStyle: {},
-      observer: null
+      observer: null,
+      expand: false
     }
   },
   methods: {
@@ -63,12 +62,24 @@ export default {
   justify-content: space-between;
   align-items: flex-start;
   gap: 10px;
-  padding-bottom: 12px;
+  padding-bottom: 36px;
+  position: relative;
+  height: 64px;
+  overflow: hidden;
+
+  &.isSingleRow {
+    height: 44px;
+    padding-bottom: 12px;
+  }
 
   &.bottomBorder {
     border-bottom: 1px solid #eee;
   }
 
+  &.expand {
+    height: auto;
+  }
+
   :deep(.searchLeftZone ) {
     flex: 1;
     min-width: 0;
@@ -76,6 +87,8 @@ export default {
     flex-wrap: wrap;
     align-items: center;
     gap: 8px;
+    overflow: hidden;
+    //height: 40px;
   }
 
   :deep(.searchRightZone ) {