xyyd-fatfox/src/layout/header/search/useSearchStore.ts

import { defineStore } from 'pinia'
import { ref, watch } from 'vue'
import useSearchConfigStore from './useSearchConfigStore'
import jump from '@/utils/jump'
import debounce from 'lodash/debounce'
import { aIUrl, translateUrl } from '@/config'
import request from '@/utils/request'
export type SearchAdType = {
  name: string
  icon: string
  url: string
  id: string
}
export default defineStore('search', () => {
  const searchRef = ref<HTMLInputElement | null>(null)
  const focus = ref(false)
  watch(searchRef, (node, _, onCleanup) => {
    if (!node) return
    const handleFocus = () => {
      focus.value = true
    }
    const handleBlur = () => {
      focus.value = false
    }
    node.addEventListener('focus', handleFocus)
    node.addEventListener('blur', handleBlur)
    onCleanup(() => {
      node.removeEventListener('focus', handleFocus)
      node.removeEventListener('blur', handleBlur)
    })
  })
  const showSearchConfig = ref(false)
  const searchStr = ref('')
  const current = ref(-1)
  const sugList = ref<string[]>([])
  const addList = ref<SearchAdType[]>([])
  watch(
    searchStr,
    (val) => {
      if (!val) return
      fetch(
        `${import.meta.env.PROD ? 'https://suggestion.baidu.com/su' : '/baiduSuggestion'}?wd=${val}&ie=utf-8&p=3&cb=j`
      )
        .then((res) => res.text())
        .then((res: string) => {
          const list = res.match(/(?<=s:\[").*(?=\]\})/g)?.[0]?.split('","')
          if (list) {
            sugList.value = list
          }
        }) as Promise<string[]>
    },
    {
      immediate: true
    }
  )
  const debouncedHandler = debounce((newValue) => {
    console.log('数值改变并已防抖处理:', newValue)
    request<SearchAdType[]>("GET", `/api/app/searchBars?keyword=${newValue || 'undefine'}`).then((res) => {
      addList.value = res
      console.log(addList.value);

    })
  }, 500) // 
  watch(searchStr, (newValue) => {
    debouncedHandler(newValue)
  })
  const searchConfig = useSearchConfigStore()
  const handle = (e: KeyboardEvent) => {
    const n = sugList.value.length
    if (e.key === 'ArrowDown') {
      e.preventDefault()
      current.value = Math.min(current.value + 1, n + 1)
    } else if (e.key === 'ArrowUp') {
      e.preventDefault()
      current.value = Math.max(current.value - 1, 0)
    } else if (e.key === 'Enter') {
      e.preventDefault()
      if (current.value < 0 || current.value > sugList.value.length + 2) {
        // 直接回车搜索
        const str = searchStr.value
        searchConfig.addHistory(str)
        searchStr.value = ''
        jump(searchConfig.current.url + str)
        return
      }
      if (current.value <= 1) {
        // ai 或 翻译
        searchConfig.addHistory(searchStr.value)
        searchStr.value = ''
        jump((current.value === 0 ? aIUrl : translateUrl) + searchStr.value)
        return
      }
      const item = sugList.value[current.value - 2]
      if (item) {
        // 其他提示项
        searchConfig.addHistory(item)
        searchStr.value = ''
        jump(searchConfig.current.url + item)
      }
    }
  }
  watch(searchStr, (val, _, onCleanup) => {
    if (!val || !searchRef.value) return
    searchRef.value.addEventListener('keydown', handle)
    onCleanup(() => {
      current.value = -1
      searchRef.value?.removeEventListener('keydown', handle)
    })
  })
  return {
    searchStr,
    searchRef,
    focus,
    showSearchConfig,
    current,
    sugList, addList

  }
})