feat：历史搜索组件

apps/bigmember_pc/src/components/history/BrowseHistory.vue

@@ -0,0 +1,70 @@
+<script setup>
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['clear', 'select'])
+
+function onClickItem(item) {
+  emit('select', item)
+}
+
+function onClickClear() {
+  emit('clear')
+}
+
+</script>
+
+<template>
+  <div class="browse-history-card">
+    <div class="history-container">
+      <div class="history-header flex justify-between flex-items-center">
+        <span>历史浏览</span>
+        <i class="el-icon-delete" @click="onClickClear"></i>
+      </div>
+      <div class="history-main">
+        <div
+          class="list-item ellipsis"
+          v-for="(item, index) in list"
+          :data-id="item.id"
+          :key="index"
+          @click="onClickItem(item)"
+        >
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.browse-history-card {
+  .history-header{
+    padding: 0 20px;
+    font-size: 12px;
+    line-height: 18px;
+    color: #686868;
+    .el-icon-delete{
+      font-size: 15px;
+      cursor: pointer;
+    }
+  }
+  .history-main{
+    margin-top: 12px;
+    .list-item{
+      padding: 9px 20px;
+      font-size: 14px;
+      line-height: 22px;
+      cursor: pointer;
+      &:hover{
+        background: #EAF8FA;
+        color: #2ABED1;
+      }
+    }
+  }
+}
+</style>

apps/bigmember_pc/src/components/history/SearchHistory.vue

@@ -0,0 +1,78 @@
+<script setup>
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['clear', 'tag'])
+
+function onClickTag(item) {
+  emit('tag', item)
+}
+
+function onClickClear() {
+  emit('clear')
+}
+
+function formatTag(tag) {
+  if (!tag) return
+  return tag.length > 20? `${tag.slice(0, 20)}...` : tag
+}
+</script>
+
+<template>
+  <div class="search-history-card b-rd-8px">
+    <div class="history-container">
+      <div class="history-header flex justify-between flex-items-center">
+        <span>历史搜索</span>
+        <i class="el-icon-delete" @click="onClickClear"></i>
+      </div>
+      <div class="history-main">
+        <div class="tag-container flex flex-wrap">
+          <span
+            class="tag-item"
+            v-for="(item, index) in list"
+            :key="index"
+            @click.prevent="onClickTag(item)"
+          >
+            {{ formatTag(item) }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.search-history-card {
+  .history-header{
+    padding: 0 20px;
+    font-size: 12px;
+    line-height: 18px;
+    color: #686868;
+    .el-icon-delete{
+      font-size: 15px;
+      cursor: pointer;
+    }
+  }
+  .history-main{
+    padding: 0 20px;
+    margin-top: 12px;
+    .tag-item{
+      display: inline-block;
+      padding: 1px 8px;
+      margin-right: 12px;
+      margin-bottom: 12px;
+      border-radius: 4px;
+      background: #F5F6F7;
+      font-size: 14px;
+      line-height: 22px;
+      border: 1px solid #ECECEC;
+      cursor: pointer;
+    }
+  }
+}
+</style>

apps/bigmember_pc/src/components/search-input/SearchInput.vue

@@ -5,8 +5,8 @@
       :placeholder="placeholder"
       :value="value"
       :clearable="clearable"
-      @focus="preSearch.focus = true"
-      @blur="preSearch.focus = false"
+      @focus="focus"
+      @blur="blur"
       @input="input"
       @keyup.enter.native="onSearch"
     >
@@ -29,6 +29,12 @@
     >
       <slot name="preSearchContent"></slot>
     </div>
+    <div
+      class="search-history-list"
+      v-show="historyShow"
+    >
+      <slot name="history"></slot>
+    </div>
   </div>
 </template>
 
@@ -51,6 +57,10 @@ export default {
     perSearchEnabled: {
       type: Boolean,
       default: false
+    },
+    historyEnabled: {
+      type: Boolean,
+      default: false
     }
   },
   model: {
@@ -72,6 +82,9 @@ export default {
         this.perSearchEnabled &&
         (this.preSearch.focus || this.preSearch.hover)
       )
+    },
+    historyShow() {
+      return !this.value && this.preSearch.focus && this.historyEnabled
     }
   },
   methods: {
@@ -80,6 +93,19 @@ export default {
     },
     onSearch() {
       this.$emit('onSearch', this.value)
+    },
+    focus(e) {
+      this.preSearch.focus = true
+      this.$emit('focus', e)
+    },
+    blur(e) {
+      // 由于JavaScript为单线程，同一时间只能执行处理一个事件，“blur优先于click执行”，下拉框内的click事件将会执行不了
+      // 解决方案1：对blur事件进行延迟，让click先执行
+      // 方案2：用mousedown事件替换click事件（鼠标事件优先于blur事件）
+      setTimeout(() => {
+        this.preSearch.focus = false
+        this.$emit('blur', e)
+      }, 300)
     }
   }
 }
@@ -162,4 +188,19 @@ export default {
     }
   }
 }
+.search-history-list{
+  padding: 20px 0;
+  position: absolute;
+  z-index: 6;
+  top: 42px;
+  width: 100%;
+  max-height: 520px;
+  background: #fff;
+  box-shadow: 0 0 20px rgb(0, 0, 0, 0.1);
+  border-radius: 8px;
+  overflow-y: auto;
+  &::-webkit-scrollbar{
+    width: 4px;
+  }
+}
 </style>