diff --git a/client/app/layout.tsx b/client/app/layout.tsx index 1fe3e7ac..ec1993e3 100644 --- a/client/app/layout.tsx +++ b/client/app/layout.tsx @@ -28,7 +28,7 @@ export default function RootLayout({ - +
diff --git a/client/components/Navbar.tsx b/client/components/Navbar.tsx index 3e20e214..060117eb 100644 --- a/client/components/Navbar.tsx +++ b/client/components/Navbar.tsx @@ -1,9 +1,9 @@ 'use client'; import { useRouter } from 'next/navigation'; -import { +import React from 'react'; +import { Image, - Link, Tabs, Tab, @@ -13,16 +13,17 @@ import { import { usePathname } from 'next/navigation'; import Profile from './User'; -import {ShopIcon} from "../app/icon/shopicon"; -import {SpaceIcon} from "../app/icon/spaceicon"; -import {SearchIcon} from "../app/icon/searchicon"; -import {AddIcon} from "../app/icon/addicon"; +import { ShopIcon } from "../app/icon/shopicon"; +import { SpaceIcon } from "../app/icon/spaceicon"; +import { SearchIcon } from "../app/icon/searchicon"; +import { AddIcon } from "../app/icon/addicon"; import BotList from "./BotList"; import { useSearch } from '@/app/contexts/SearchContext'; export function Navbar() { const { search, setSearch } = useSearch(); - + let timeoutId: ReturnType; + const debounceTime: number = 1000; const router = useRouter(); const pathname = usePathname(); const navs = [ @@ -30,23 +31,35 @@ export function Navbar() { id: 'market', label: '市场', href: '/', - icon: + icon: }, { id: 'factory', label: '空间', href: '/factory/list', - icon: + icon: }, ]; if (pathname.includes('/factory/edit')) { return null; } + + + + const handleChange = (event: React.ChangeEvent) => { - setSearch(event.target.value); + const query = event.target.value ?? '' + if (timeoutId !== null) { + clearTimeout(timeoutId); + } + + timeoutId = setTimeout(() => { + setSearch(query); + clearTimeout(timeoutId); + }, debounceTime); }; - + return (
@@ -61,7 +74,7 @@ export function Navbar() { selectedKey={pathname === '/' ? 'market' : 'factory'} classNames={{ base: "bg-[#F3F4F6] rounded-full", - tabContent: "group-data-[selected=true]:bg-[#FAE4CB] rounded-full px-4 py-1 h-10 leading-10" + tabContent: "group-data-[selected=true]:bg-[#FAE4CB] rounded-full px-4 py-1 h-10 leading-10" }} > {(item) => ( @@ -102,12 +115,12 @@ export function Navbar() {
{!pathname.includes('/factory/list') && ( - + )} {pathname.includes('/factory/list') && ( - + )} - +