ui库和web端产品库合并版本(还需修复细节)

ui/packages/layout/AiSearchBar.vue

@@ -0,0 +1,101 @@
+<template>
+  <section>
+    <div ref="AiSearchBarZone" class="AiSearchBar" :class="{bottomBorder}" :style="searchBarStyle">
+      <div class="searchLeftZone">
+        <slot name="left"/>
+      </div>
+      <div class="searchRightZone" ref="searchRightZone">
+        <slot name="right"/>
+      </div>
+    </div>
+    <ai-pull-down v-if="!isSingleRow" @change="handlePullDown" :height="rightHeight"/>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "AiSearchBar",
+  props: {
+    bottomBorder: Boolean,
+    size: {default: "small"}
+  },
+  computed: {
+    isSingleRow() {
+      return this.height <= 45
+    },
+  },
+  data() {
+    return {
+      height: 0,
+      rightHeight: 0,
+      searchBarStyle: {}
+    }
+  },
+  methods: {
+    handlePullDown(style) {
+      this.searchBarStyle = style
+      if (style.height == 'auto') {
+        this.searchBarStyle.marginBottom = '16px'
+      } else {
+        this.searchBarStyle.marginBottom = '0'
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.height = this.$refs?.AiSearchBarZone?.offsetHeight
+      this.rightHeight = this.$refs?.searchRightZone?.offsetHeight
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiSearchBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 10px;
+  padding-bottom: 12px;
+
+  &.bottomBorder {
+    border-bottom: 1px solid #eee;
+  }
+
+  ::v-deep.searchLeftZone {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+  }
+
+  ::v-deep.searchRightZone {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    align-self: flex-start;
+
+    .el-input {
+      width: 280px;
+    }
+
+    * + button, * + div, * + section {
+      margin-left: 8px;
+    }
+  }
+
+  .el-input {
+    width: auto;
+  }
+}
+
+.AiPullDown {
+  margin-top: 8px;
+}
+
+::v-deep .searchLeftZone > .el-button, ::v-deep .searchRightZone > .el-button {
+  margin-left: 0;
+}
+</style>