120 lines
3.4 KiB
TypeScript
120 lines
3.4 KiB
TypeScript
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
|
|
|
|
}
|
|
})
|