feat(ui): 优化搜索栏布局和功能

- 为 AiInput 组件添加 placeholder 属性
- 重构 AiSearchBar 组件布局，使用 grid 替代 flex- 调整搜索栏样式

ui/packages/basic/AiInput.vue

@@ -3,7 +3,8 @@ export default {
   name: "AiInput",
   props: {
     value: {default: ""},
-    edit: {default: true}
+    edit: {default: true},
+    placeholder: {default: "请输入"}
   },
   model: {
     prop: 'value',
@@ -14,7 +15,7 @@ export default {
 
 <template>
   <section class="AiInput">
-    <el-input v-if="edit" :value="value" size="small" placeholder="请输入" v-bind="$attrs"
+    <el-input v-if="edit" :value="value" size="small" :placeholder="placeholder" v-bind="$attrs"
               @input="v=>$emit('input', v)" clearable autofocus/>
     <b v-else v-text="value"/>
   </section>

ui/packages/layout/AiSearchBar.vue

@@ -1,9 +1,11 @@
 <template>
   <section class="AiSearchBar" :class="{bottomBorder,isSingleRow,expand}">
-    <div ref="AiSearchBarZone" class="searchLeftZone">
+    <div class="left">
-      <slot name="left"/>
+      <div class="flex wrap content">
+        <slot name="left"/>
+      </div>
     </div>
-    <div class="searchRightZone" ref="searchRightZone" v-if="$slots.right">
+    <div class="right" v-if="$slots.right">
       <slot name="right"/>
     </div>
     <ai-pull-down v-if="!isSingleRow" v-model="expand"/>
@@ -23,38 +25,21 @@ export default {
   data() {
     return {
       height: 0,
-      rightHeight: 0,
-      searchBarStyle: {},
-      observer: null,
       expand: false
     }
   },
-  methods: {
-    initSize() {
-      this.height = this.$refs?.AiSearchBarZone?.offsetHeight
-      this.rightHeight = this.$refs?.searchRightZone?.offsetHeight + 12
-    }
-  },
   mounted() {
-    this.$nextTick(() => {
+    this.height = this.$el.querySelector(".left .content").getBoundingClientRect().height
-      this.initSize()
-      this.observer = new ResizeObserver(this.initSize)
-      this.observer.observe(this.$refs?.AiSearchBarZone)
-    })
   },
-  beforeDestroy() {
-    this.observer?.disconnect()
-  }
 }
 </script>
 
 <style lang="scss" scoped>
 .AiSearchBar {
-  display: flex;
+  display: grid;
-  justify-content: space-between;
-  align-items: flex-start;
   gap: 10px;
-  padding-bottom: 36px;
+  grid-template-columns: 1fr auto;
+  padding-bottom: 32px;
   position: relative;
   height: 64px;
   overflow: hidden;
@@ -70,24 +55,27 @@ export default {
 
   &.expand {
     height: auto;
+    .left{
+      height: auto;
+    }
   }
 
-  :deep(.searchLeftZone ) {
+  .left {
-    flex: 1;
+    padding-top: 1px;
-    min-width: 0;
+    height: 32px;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 8px;
     overflow: hidden;
-    //height: 40px;
+
+    .content {
+      gap: 8px;
+    }
   }
 
-  :deep(.searchRightZone ) {
+  :deep(.right ) {
     display: flex;
     align-items: center;
     flex-shrink: 0;
     align-self: flex-start;
+    width: 280px;
 
     .el-input {
       width: 280px;
@@ -103,10 +91,6 @@ export default {
   }
 }
 
-.AiPullDown {
-  margin-top: 8px;
-}
-
 :deep( .searchLeftZone > .el-button), :deep( .searchRightZone > .el-button ) {
   margin-left: 0;
 }