front-pc/components/kl-search/index.vue

<template>
  <div>
    <header class="h-[106px]">
      <div class="mx-a ml-[-250px] h-full flex items-center justify-center">
        <!-- Logo区域 -->
        <div class="h-[100%] flex cursor-pointer items-center" @click="navigateTo('/')">
          <img src="~/assets/images/logo5.png" alt="图夕夕" class="h-[51px] w-[182px]" />
        </div>
        <!-- 搜索区域 -->
        <div class="relative ml-[49px] w-[647px] px-4 p-r-[0px]!">
          <div class="search-input relative w-[100%]">
            <el-input
              v-model="searchQuery"
              type="text"
              placeholder="搜一搜"
              :prefix-icon="Search"
              class="no-right-border box-border h-[40px] w-[100%] rounded-bl-[4px] rounded-br-[0px] rounded-tl-[4px] rounded-tr-[0px] bg-[#F8F8F8] text-[14px] outline-[#999]"
              @focus="handleHot(), (showHotList = true)"
              @input="handleInput"
            />
          </div>
          <!-- 搜索框 获取到焦点 显示热门列表 -->
          <div
            v-if="showHotList"
            v-loading="loading"
            class="absolute z-100 w-[625px] border-width-[1px] border-color-[#1A65FF] rounded-bl-[4px] rounded-br-[4px] rounded-tl-[0px] rounded-tr-[0px] border-solid bg-[#fff] pa-[10px]"
          >
            <!-- 这里放置热门列表的内容 -->
            <ul class="flex flex-col gap-[6px]">
              <li
                v-for="(item, index) in hotItems"
                :key="index"
                class="flex flex-row cursor-pointer items-center justify-between text-[13px]"
                @click="handleHotItem(item)"
              >
                <span class="color-[#333333]">{{ item.projectTypeName }}</span>
                <span v-if="item.count" class="color-[#999999]">{{ item.count }}份图纸</span>
              </li>
            </ul>
            <div v-if="!hotItems.length" class="text-[12px] color-[#999]">无数据</div>
          </div>
        </div>
        <!-- 按钮区域 -->
        <div class="flex items-center">
          <button
            class="h-[40px] w-[111px] cursor-pointer border-width-[1px] border-color-[#1A65FF] rounded-bl-[0px] rounded-br-[4px] rounded-tl-[0px] rounded-tr-[4px] border-none border-solid text-center text-[14px] color-[#fff] !bg-[#1A65FF]"
          >
            搜索
          </button>
          <button
            class="m-l-[16px] h-[40px] w-[111px] cursor-pointer border-width-[1px] border-color-[#E7B03B] rounded-bl-[6px] rounded-br-[6px] rounded-tl-[4px] rounded-tr-[6px] border-none border-solid text-[14px] color-[#fff] !bg-[#E7B03B]"
            @click="handleUpload"
          >
            上传图纸
          </button>
        </div>
      </div>
    </header>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import { Search } from '@element-plus/icons-vue'
  import useUserStore from '~/stores/user'
  const userStore = useUserStore()

  import { top } from '~/api/home/index'
  import type { ProjectDrawStatisticAppRespVO } from '~/api/home/type'
  import { page } from '~/api/upnew/index'

  const searchQuery = ref('')
  const showHotList = ref(false)
  const hotItems = ref<ProjectDrawStatisticAppRespVO[]>([])

  const handleUpload = () => {
    // 是否登录
    if (!userStore.token) return ElMessage.error('请先登录')
    // 新开窗口 用router跳转 新窗口打开
    navigateTo('/upnew')
  }

  const loading = ref(false)
  const handleHot = async () => {
    loading.value = true
    const res = await top({
      limit: 10,
      type: 1, // 1 图纸 2 模型 3 文本
    })
    hotItems.value = res.data
    loading.value = false
  }
  handleHot()

  const timer = ref(0)
  const handleInput = (val: string) => {
    searchQuery.value = val
    loading.value = true
    if (timer.value) {
      window.clearTimeout(timer.value)
    }
    timer.value = window.setTimeout(async () => {
      console.log('searchQuery', searchQuery.value)
      const res = await page({
        pageNo: 1,
        pageSize: 10,
        type: 1, // 1 图纸 2 模型 3 文本
        title: searchQuery.value, // 1 图纸 2 模型 3 文本
      })
      if (res.code === 0) {
        hotItems.value = res.data.list.map((c) => {
          return { ...c, projectTypeName: c.title }
        })
      }
      loading.value = false
    }, 200)
  }

  const handleHotItem = (item: ProjectDrawStatisticAppRespVO) => {
    // const normal = { id: '0', name: '图纸库', isChildren: false }
    // const level = item.pairs?.filter(Boolean).map((item) => ({ id: item?.id, name: item?.name, isChildren: false })) || []
    // level.unshift(normal)
    // if (item.type === 1) {
    //   navigateTo(`/drawe?level=${JSON.stringify(level)}&keywords=${item.title || ''}`,)
    // } else if (item.type === 2) {
    //   navigateTo(`/text?level=${JSON.stringify(level)}&keywords=${item.title || ''}`,)
    // } else if (item.type === 3) {
    //   navigateTo(`/model?level=${JSON.stringify(level)}&keywords=${item.title || ''}`,)
    // }
    navigateTo(`/drawe/${item.projectType}/1/12/-1`)
  }

  onMounted(() => {
    // 监听点击事件
    document.addEventListener('click', (event) => {
      const target = event.target as HTMLElement
      if (!target.closest('.search-input')) {
        showHotList.value = false
      }
    })
  })
</script>
<style scoped>
  .no-right-border :deep(.el-input__wrapper) {
    border-right: none !important;
    /* box-shadow: -1px 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset !important; */
  }

  /* 如果需要调整右侧圆角，可以添加 */
  .no-right-border :deep(.el-input__wrapper) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
</style>