From 225c0088e121d62cabf500e23f9cd11e05bcf8c1 Mon Sep 17 00:00:00 2001
From: aixianling <aixianling@sinoecare.com>
Date: Tue, 24 Dec 2024 17:08:43 +0800
Subject: [PATCH] =?UTF-8?q?feat(ui):=20=E9=87=8D=E6=9E=84=E9=AB=98?=
 =?UTF-8?q?=E7=BA=A7=E6=90=9C=E7=B4=A2=E7=BB=84=E4=BB=B6=E5=B9=B6=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构 AiPullDown 组件，使用 v-model 实现双向绑定
- 优化 AiSearchBar 组件样式和布局
- 调整 AiPage 组件中的滚动条样式
---
 ui/packages/basic/AiPullDown.vue   | 31 +++++++++++++++-----------
 ui/packages/layout/AiPage.vue      | 13 ++++++-----
 ui/packages/layout/AiSearchBar.vue | 35 ++++++++++++++++++++----------
 3 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/ui/packages/basic/AiPullDown.vue b/ui/packages/basic/AiPullDown.vue
index c8a089a3..ec5d11af 100644
--- a/ui/packages/basic/AiPullDown.vue
+++ b/ui/packages/basic/AiPullDown.vue
@@ -14,8 +14,11 @@
 export default {
   name: "AiPullDown",
   props: {
-    target: String,
-    height: {default: 4},
+    value: Boolean,
+  },
+  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 ? '收起高级搜索' : '展开高级搜索'
-    },
-    expandStyle() {
-      let initStyle = {overflow: 'hidden', height: `${this.height}px`}
-      this.expand && (initStyle.height = "auto")
-      return initStyle
+      return this.expand ? '收起' : '展开'
     },
     expandIcon() {
       return this.expand ? 'iconfont iconDouble_Up' : 'iconfont iconDouble_Down'
     }
   },
-  mounted() {
-    this.$emit("change", this.expandStyle)
+  watch: {
+    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;
diff --git a/ui/packages/layout/AiPage.vue b/ui/packages/layout/AiPage.vue
index c4f99e8f..d1a7c7d8 100644
--- a/ui/packages/layout/AiPage.vue
+++ b/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;
-    right:0;
+    left: 0;
+    right: 0;
     height: 64px;
     background: #F5F5F5;
     box-shadow: 0 1px 0 0 #E5E5E5;
diff --git a/ui/packages/layout/AiSearchBar.vue b/ui/packages/layout/AiSearchBar.vue
index e87f810f..15e295e3 100644
--- a/ui/packages/layout/AiSearchBar.vue
+++ b/ui/packages/layout/AiSearchBar.vue
@@ -1,14 +1,12 @@
 <template>
-  <section>
-    <div class="AiSearchBar" :class="{bottomBorder}" :style="searchBarStyle">
-      <div ref="AiSearchBarZone" class="searchLeftZone">
-        <slot name="left"/>
-      </div>
-      <div class="searchRightZone" ref="searchRightZone">
-        <slot name="right"/>
-      </div>
+  <section class="AiSearchBar" :class="{bottomBorder,isSingleRow,expand}">
+    <div ref="AiSearchBarZone" class="searchLeftZone">
+      <slot name="left"/>
     </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 ) {