ai-bot/app/_ui/Search.tsx

"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>
    );
}