120 lines
4.6 KiB
TypeScript
120 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { faSearch } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import clsx from "clsx";
|
|
import { useEffect, useMemo, useState } from "react";
|
|
import Logo from "./Logo";
|
|
import { useRequest } from "ahooks";
|
|
import { getSearchTypeList, getSearchWayList, SearchWayItemType } from "../_lib/data/search";
|
|
import { doSearch } from "../_lib/utils";
|
|
|
|
|
|
const defaultSearchEngine: SearchWayItemType = {
|
|
_id: 'default',
|
|
label: '站内',
|
|
value: '/search?wd=%s',
|
|
fullName: '站内',
|
|
}
|
|
|
|
export default function Search() {
|
|
|
|
const { data: searchWayList = [] } = useRequest(() => getSearchWayList({ page: 1, pageSize: 9999 }).then(res => [defaultSearchEngine, ...res.list]))
|
|
const { data: searchTypeList = [] } = useRequest(() => getSearchTypeList({ page: 1, pageSize: 9999 }).then(res => res.list.map((val, idx) => {
|
|
if (idx === 0) {
|
|
return {
|
|
...val,
|
|
includes: ['default', ...val.includes]
|
|
}
|
|
}
|
|
return val
|
|
})))
|
|
const [selectKey, setSelectKey] = useState<string | null>(null)
|
|
const [activeSearchKey, setActiveSearchKey] = useState<string | null>(null)
|
|
const [inputStr, setInputStr] = useState('')
|
|
const nowSelectConfig = useMemo(() => {
|
|
const idx = searchTypeList.findIndex(val => val._id === selectKey)
|
|
if (idx !== -1) return searchTypeList[idx]
|
|
else return null
|
|
}, [selectKey, searchTypeList])
|
|
const filterSeachList = useMemo(() => {
|
|
return searchWayList.filter(val => nowSelectConfig?.includes.includes(val._id))
|
|
}, [searchWayList, nowSelectConfig])
|
|
const activeSearch = useMemo(() => {
|
|
const idx = searchWayList.findIndex(val => val._id === activeSearchKey)
|
|
if (idx !== -1) {
|
|
return searchWayList[idx]
|
|
} else {
|
|
return null
|
|
}
|
|
}, [activeSearchKey, searchWayList])
|
|
|
|
useEffect(() => {
|
|
if (searchTypeList.length > 0) {
|
|
setSelectKey(searchTypeList[0]._id)
|
|
|
|
}
|
|
}, [searchTypeList])
|
|
useEffect(() => {
|
|
if (filterSeachList.length > 0) {
|
|
setActiveSearchKey(filterSeachList[0]._id)
|
|
}
|
|
}, [filterSeachList, selectKey])
|
|
return (
|
|
<div className="w-full flex justify-center flex-col items-center py-10 h-[300px]">
|
|
|
|
<div className="w-[200px]">
|
|
<Logo></Logo>
|
|
</div>
|
|
<div className="w-full lg:w-[800px] flex flex-col gap-y-2">
|
|
<div className="flex w-full justify-center gap-x-5 text-[#666666]">
|
|
|
|
{
|
|
searchTypeList.map((item, idx) => (
|
|
<div key={item._id}
|
|
onClick={() => {
|
|
setSelectKey(item._id)
|
|
}}
|
|
className={clsx(item._id === selectKey || (idx === 0 && selectKey === 'default') ?
|
|
"text-[#333]" : "text-[#999] cursor-pointer")}>
|
|
{item.name}
|
|
</div>
|
|
))
|
|
|
|
}
|
|
|
|
</div>
|
|
<div className="w-full relative">
|
|
<input
|
|
onKeyDown={(e) => {
|
|
if (!activeSearch?.value) return
|
|
if (e.key === 'Enter') {
|
|
doSearch(activeSearch?.value, inputStr)
|
|
}
|
|
|
|
}}
|
|
type="text"
|
|
onChange={e => {
|
|
setInputStr(e.target.value)
|
|
|
|
}}
|
|
placeholder={`${activeSearch?.label || ' '}搜索`} className="w-full bg-[#C4C2C6] px-4 h-[50px] rounded-3xl outline-none" />
|
|
<FontAwesomeIcon className="text-white absolute top-1/2 -translate-y-1/2 right-6 text-xl" icon={faSearch}></FontAwesomeIcon>
|
|
</div>
|
|
<div className="w-full flex justify-center gap-x-4 ">
|
|
|
|
{
|
|
filterSeachList.map(item => (
|
|
<div key={item._id} onClick={() => {
|
|
setActiveSearchKey(item._id)
|
|
}} className={clsx(activeSearchKey === item._id ?
|
|
"text-[#333]" : "text-[#999] cursor-pointer")}>{item.label}</div>
|
|
))
|
|
}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
} |