smartai2dian0/src/modules/conversation-history/HistorySearchInput.vue

<template>
  <div class="conversation-search-input">
    <div class="search-input-content">
      <slot></slot>

      <div class="search-input-icon icon-search">
        <icon-search />
      </div>

      <div class="search-input-container">
        <input
          type="text"
          class="search-input"
          :placeholder="$t('conversation.search_history')"
          v-model="search_text"
          @input="handleInputInput"
          @change="handleInputChange"
          @keyup="handleKeyUp"
        />
      </div>

      <div class="search-input-icon icon-clear" v-if="show_clear" @click="handleInputClear">
        <icon-close />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const emit = defineEmits(['search']);

const search_text = ref('');

const show_clear = computed(() => {
  return search_text.value.length !== 0;
});

/**
 * 输入事件
 * @param e
 */
const handleInputInput = (e) => {
  search_text.value = e.target.value;
};

/**
 * change事件
 * @param e
 */
const handleInputChange = (e) => {
  search_text.value = e.target.value;
};

const handleKeyUp = (e) => {
  const k_code = e.keyCode;

  if (k_code === 13) {
    // enter: 确定搜索
    emit('search', search_text.value);
  } else {
    // 其他键位
  }
};

/**
 * 清空表单
 */
const handleInputClear = () => {
  search_text.value = '';

  emit('search', search_text.value);
};
</script>

<style lang="css" scoped>
.conversation-search-input {
  text-align: center;

  font-size: 32px;
  font-weight: bold;

  color: var(--color-text-1);
  background-color: var(--color-bg-1);

  padding: 20px 30px 20px 30px;

  border-radius: 20px;
}

.search-input-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.search-input-icon {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 26px;
  height: 26px;
}
.search-input-icon.icon-search {
  margin-left: 5px;
}

.search-input-container {
  flex-grow: 1;
  margin-left: 10px;

  display: flex;
  align-items: center;
}

.search-input {
  flex-grow: 1;
  outline: none;
  border: none;
  font-size: 20px;

  caret-color: var(--color-text-1);
  background-color: var(--color-bg-1);
  color: var(--color-text-1);
}

.search-input-icon.icon-clear {
  cursor: pointer;
}
</style>