优化用户数据初始化时机

src/app/(home)/_components/header/menu-solution.tsx

@@ -0,0 +1,100 @@
+import Wrap from '@/components/wrap'
+import s01 from '@/assets/header/solution/01.svg'
+import s02 from '@/assets/header/solution/02.svg'
+import s03 from '@/assets/header/solution/03.svg'
+import s04 from '@/assets/header/solution/04.svg'
+import s05 from '@/assets/header/solution/05.svg'
+import s06 from '@/assets/header/solution/06.svg'
+import s07 from '@/assets/header/solution/07.svg'
+import s08 from '@/assets/header/solution/08.svg'
+import {StaticImageData} from 'next/image'
+import Link from 'next/link'
+import {useRouter} from 'next/navigation'
+import {useContext} from 'react'
+import {FragmentTitle, HeaderContext} from './common'
+
+export default function SolutionMenu() {
+  return (
+    <Wrap className="h-full grid grid-cols-2 lg:grid-cols-4 pl=2 auto-rows-fr gap-4">
+      <SolutionItem
+        icon={s01}
+        title="数据抓取"
+        desc="高效采集和分析大量数据，助力企业获取大量情报"
+        href="/data-capture"
+      />
+      <SolutionItem
+        icon={s02}
+        title="广告验证"
+        desc="确保广告点击和展示数据的真实性，帮助企业，提升广告效果"
+        href="#"
+      />
+      <SolutionItem
+        icon={s03}
+        title="市场调查"
+        desc="收集全网行业数据，了解竞争对手动态"
+        href="#"
+      />
+      <SolutionItem
+        icon={s04}
+        title="SEO优化"
+        desc="收集搜索引擎情报，提高网站在搜索引擎的排名"
+        href="#"
+      />
+      <SolutionItem
+        icon={s05}
+        title="品牌保护"
+        desc="保护品牌商标打造，优质品牌形象，为企业获得更多用户"
+        href="#"
+      />
+      <SolutionItem
+        icon={s06}
+        title="价格监控"
+        desc="利用优质代理IP，实时监控行业价格信息，提高市场竞争力"
+        href="#"
+      />
+      <SolutionItem
+        icon={s07}
+        title="金融数据"
+        desc="快速获取金融市场实时数据，帮助投资者分析趋势，使其做出精准决策"
+        href="#"
+      />
+      <SolutionItem
+        icon={s08}
+        title="网站测试"
+        desc="在不同环境下对网站进行性能和兼容的测试，让用户有高质量体验"
+        href="#"
+      />
+    </Wrap>
+  )
+}
+
+function SolutionItem(props: {
+  icon: StaticImageData
+  title: string
+  desc: string
+  href: string
+}) {
+  const router = useRouter()
+  const ctx = useContext(HeaderContext)
+  if (!ctx) {
+    throw new Error(`HeaderContext not found`)
+  }
+
+  const onClick = () => {
+    ctx.setMenu(false)
+    router.push(props.href)
+  }
+  return (
+    <Link
+      href={props.href}
+      className={[
+        `flex flex-col gap-2 items-start rounded-md cursor-pointer`,
+        `transition-colors duration-200 hover:bg-blue-50`,
+      ].join(' ')}
+      onClick={onClick}
+    >
+      <FragmentTitle img={props.icon} text={props.title}/>
+      <p className="text-gray-400 text-sm">{props.desc}</p>
+    </Link>
+  )
+}