最终效果电脑/pad端移动端组件封装技术栈: react19 Tailwind CSSsrc/components/Header.jsximportLogofrom../assets/apple.svg?react;import{AiOutlineMenu,AiOutlineSearch}fromreact-icons/ai;import{useState}fromreact;constHeader(){const[isOpen,setIsOpen]useState(false);const[isSearchEnable,setIsSearchEnable]useState(false);const[searchValue,setSearchValue]useState();return(nav classNameflex gap-2 items-center justify-between px-4 h-16 shadow-md sticky top-0 z-50 bg-white/70 backdrop-blur-mda href#classNametext-xl font-boldLogo classNamew-6 h-6 hover:scale-105 transition-transform//adiv classNamegap-6 hidden md:flex mx-autoa href#商店/aa href#电脑/aa href#手机/aa href#智能家居/aa href#娱乐/aa href#技术支持/a/div{isSearchEnable(div classNamerelativeinput idsearch-inputclassNamepeer border border-gray-300 px-4 py-2 w-64 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transitionplaceholder value{searchValue}onChange{(e)setSearchValue(e.target.value)}/label htmlForsearch-inputclassNameabsolute left-2-top-2bg-white px-2text-xs text-gray-500transition-all duration-200cursor-pointer peer-placeholder-shown:top-2peer-placeholder-shown:text-sm peer-focus:-top-2peer-focus:left-2peer-focus:text-blue-500peer-focus:text-xs搜索/label{searchValue(button onClick{()setSearchValue()}classNameabsolute right-4 top-2 text-gray-400 hover:text-gray-600 cursor-pointer peer-focus:text-blue-500✕/button)}/div)}div classNameflex gap-2 mlbutton onClick{()setIsSearchEnable(!isSearchEnable)}classNamecursor-pointerAiOutlineSearch size{24}//buttonbutton classNamemd:hidden cursor-pointeronClick{()setIsOpen(true)}AiOutlineMenu size{24}//button/divdiv className{md:hidden fixed top-0 right-0 h-full w-64${!isOpenhidden}}div classNameflex flex-col mt-17 space-y-6 bg-white text-center p-6 rounded-lga href#商店/aa href#电脑/aa href#手机/aa href#智能家居/aa href#娱乐/aa href#技术支持/a/div/div{/* 移动端菜单展开时导航栏添加模糊遮罩 */}{isOpen(div classNamefixed inset-0 bg-black/50 backdrop-blur-mdonClick{()setIsOpen(false)}/div)}/nav);};exportdefaultHeader;使用importHeaderfrom./components/Header;Header/