From 39ce5404c131c8b1c97737c8d8302aa5b2a4f49a Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Fri, 27 Dec 2024 16:45:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E4=BC=98=E5=8C=96=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E6=A0=8F=E5=B8=83=E5=B1=80=E5=92=8C=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为 AiInput 组件添加 placeholder 属性
- 重构 AiSearchBar 组件布局，使用 grid 替代 flex- 调整搜索栏样式
---
 ui/packages/basic/AiInput.vue      |  5 +--
 ui/packages/layout/AiSearchBar.vue | 58 +++++++++++-------------------
 2 files changed, 24 insertions(+), 39 deletions(-)

diff --git a/ui/packages/basic/AiInput.vue b/ui/packages/basic/AiInput.vue
index 157dae7d..2329949e 100644
--- a/ui/packages/basic/AiInput.vue
+++ b/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>
diff --git a/ui/packages/layout/AiSearchBar.vue b/ui/packages/layout/AiSearchBar.vue
index 0db122d9..2901f23f 100644
--- a/ui/packages/layout/AiSearchBar.vue
+++ b/ui/packages/layout/AiSearchBar.vue
@@ -1,9 +1,11 @@
 <template>
   <section class="AiSearchBar" :class="{bottomBorder,isSingleRow,expand}">
-    <div ref="AiSearchBarZone" class="searchLeftZone">
-      <slot name="left"/>
+    <div class="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.initSize()
-      this.observer = new ResizeObserver(this.initSize)
-      this.observer.observe(this.$refs?.AiSearchBarZone)
-    })
+    this.height = this.$el.querySelector(".left .content").getBoundingClientRect().height
   },
-  beforeDestroy() {
-    this.observer?.disconnect()
-  }
 }
 </script>
 
 <style lang="scss" scoped>
 .AiSearchBar {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
+  display: grid;
   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 ) {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 8px;
+  .left {
+    padding-top: 1px;
+    height: 32px;
     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;
 }