优化主页，提供通用页面模板组件

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

@@ -17,26 +17,26 @@ export default function HelpMenu() {
         icon={h01}
         title="提取 IP"
         items={[
-          {lead: '短效 IP 提取', href: '/collect'},
+          {lead: '短效 IP 提取', href: '/collect?type=short'},
-          {lead: '长效 IP 提取', href: '#'},
+          {lead: '长效 IP 提取', href: '/collect?type=long'},
         ]}
       />
       <Column
         icon={h02}
-        title="使用教程"
+        title="平台教程"
         items={[
-          {lead: '官方教程', href: '/help/tutorials/official-tutorial/browser-proxy'},
+          {lead: 'iOS 设置', href: '/docs/ios-proxy'},
-          {lead: '客户端教程', href: '/help/tutorials/client-tutorial/ios-proxy'},
+          {lead: 'Android 设置', href: '/docs/android-proxy'},
-          {lead: '操作指南', href: '/help/tutorials/operation-guide/windows7-proxy'},
+          {lead: 'Windows 设置', href: '/docs/windows10-proxy'},
         ]}
       />
       <Column
         icon={h03}
-        title="产品功能"
+        title="高级功能"
         items={[
-          {lead: '常见问题', href: '/help/features/faq/faq-general'},
+          {lead: '套餐管理', href: '/docs/package-operations'},
-          {lead: '产品介绍', href: '/help/features/product-intro/product-overview'},
+          {lead: 'Socks5 教程', href: '/docs/socks5-usage'},
-          {lead: '新闻资讯', href: '/help/features/news/news-latest'},
+          {lead: '固定 IP 套餐', href: '/docs/fixed-package'},
         ]}
       />
       <Image src={banner} alt="banner" className="hidden lg:block"/>

src/app/(home)/collect/page.tsx

@@ -1,18 +1,26 @@
 import BreadCrumb from '@/components/bread-crumb'
 import Wrap from '@/components/wrap'
 import Extract from '@/components/composites/extract'
+import HomePage from '@/components/home/page'
 
 export type CollectPageProps = {}
 
 export default function CollectPage(props: CollectPageProps) {
   return (
-    <main className="mt-20 flex flex-col gap-4">
+    // <main className="mt-20 flex flex-col gap-4">
-      <Wrap className="flex flex-col py-8 gap-4">
+    //   <Wrap className="flex flex-col py-8 gap-4">
-        <BreadCrumb items={[
+    //     <BreadCrumb items={[
+    //       {label: '短效IP 提取', href: '/collect'},
+    //     ]}/>
+    //     <Extract/>
+    //   </Wrap>
+    // </main>
+    <HomePage path={[
       {label: '短效IP 提取', href: '/collect'},
-        ]}/>
+    ]}>
+      <Wrap>
         <Extract/>
       </Wrap>
-    </main>
+    </HomePage>
   )
 }

src/app/(home)/customized/page.tsx

@@ -14,6 +14,7 @@ import banner from './_assets/Mask-group.webp'
 import group from './_assets/Group.webp'
 import {merge} from '@/lib/utils'
 import FreeTrial from '@/components/free-trial'
+import HomePage from '@/components/home/page'
 
 const formSchema = z.object({
   companyName: z.string().min(2, '企业名称至少2个字符'),
@@ -38,13 +39,18 @@ export default function CollectPage() {
   })
 
   return (
-    <main className="mt-20 flex flex-col gap-4">
+  // <main className="mt-20 flex flex-col gap-4">
-      <Wrap className="flex flex-col py-8 gap-8">
+  //   <Wrap className="flex flex-col py-8 gap-8">
-        <BreadCrumb items={[
+  //     <BreadCrumb items={[
-          {label: '产品订购/定制套餐', href: '/customized'},
+  //       {label: '产品订购/定制套餐', href: '/customized'},
-        ]}/>
+  //     ]}/>
 
-        <div className="flex flex-col gap-8">
+    //   </Wrap>
+    // </main>
+    <HomePage path={[
+      {label: '业务定制', href: '/customized'},
+    ]}>
+      <Wrap className='className="flex flex-col gap-8"'>
         <div className="bg-white rounded-lg shadow-md overflow-hidden p-6">
           <div className="text-center mb-4">
             <h1 className="text-2xl font-bold">优质代理IP服务商</h1>
@@ -247,8 +253,7 @@ export default function CollectPage() {
             </div>
           </div>
         </div>
-        </div>
       </Wrap>
-    </main>
+    </HomePage>
   )
 }

src/app/(home)/data-capture/page.tsx

@@ -20,17 +20,17 @@ import check_main from '@/assets/check-main.svg'
 import check_accent from '@/assets/check-accent.svg'
 import {Button} from '@/components/ui/button'
 import {merge} from '@/lib/utils'
+import HomePage from '@/components/home/page'
 export type CollectPageProps = {}
 
 export default function CollectPage(props: CollectPageProps) {
   const router = useRouter()
   return (
-    <main className="mt-20 flex flex-col gap-4">
+    <HomePage path={[
-      <Wrap className="flex flex-col py-8 gap-8">
+      {label: '业务场景'},
-        <BreadCrumb items={[
+      {label: '数据抓取', href: '/data-capture'},
-          {label: '业务场景/数据抓取', href: '/data-capture'},
+    ]}>
-        ]}/>
+      <Wrap className="flex flex-col gap-16 lg:gap-32 mb-16 lg:mb-32">
-        <main className="flex flex-col gap-16 lg:gap-32 mb-16 lg:mb-32">
         {/* banner */}
         <section className="flex-none basis-40 relative flex flex-col gap-4 justify-center">
           <Wrap className="relative pt-30 pb-48 max-md:pt-32 max-md:pb-24 min-h-[500px]">
@@ -272,9 +272,8 @@ export default function CollectPage(props: CollectPageProps) {
             </div>
           </div>
         </Section>
-        </main>
       </Wrap>
-    </main>
+    </HomePage>
   )
 }
 

src/app/(home)/docs/layout.tsx

@@ -1,22 +1,19 @@
-import BreadCrumb from '@/components/bread-crumb'
 import Wrap from '@/components/wrap'
 import {Children} from '@/lib/utils'
 import Sidebar from './sidebar'
+import HomePage from '@/components/home/page'
 
 export default function DocsLayout(props: Children) {
   return (
-    <main className="mt-20 flex flex-col gap-4">
+    <HomePage path={[
-      <Wrap className="flex flex-col py-8 gap-8">
+      {label: '帮助中心', href: '/docs'},
-        <BreadCrumb items={[
+    ]}>
-          {label: '帮助中心', href: '/help'},
+      <Wrap className="flex gap-3">
-        ]}/>
-        <div className="flex gap-6">
         <Sidebar/>
         <div className="flex-1 bg-white  rounded-lg p-6 min-h-[420px]">
           {props.children}
         </div>
-        </div>
       </Wrap>
-    </main>
+    </HomePage>
   )
 }

src/app/(home)/docs/page.tsx

@@ -0,0 +1,9 @@
+import Link from 'next/link'
+import {Card, CardContent, CardDescription, CardHeader, CardTitle} from '@/components/ui/card'
+import {BookOpen, Lightbulb, Smartphone, Zap, HelpCircle, FileText, Settings, TrendingUp} from 'lucide-react'
+
+export default function DocsIndexPage() {
+  return (
+    <div></div>
+  )
+}

src/app/(home)/docs/sidebar.tsx

@@ -29,7 +29,7 @@ const MENU_ITEMS = [
   {
     group: '操作指南',
     items: [
-      {key: 'windows7-proxy', label: 'Windows7电脑设置代理教程'},
+      {key: 'win7-proxy', label: 'Windows7电脑设置代理教程'},
       {key: 'mac-proxy', label: 'MAC设置代理教程'},
       {key: 'firefox-proxy', label: '火狐浏览器设置代理'},
       {key: 'socks5-usage', label: 'Socks5代理使用教程'},
@@ -110,7 +110,7 @@ export default function Sidebar({collapsed = false}: Props) {
   return (
     <aside
       className={`bg-white rounded-lg p-3 transition-all duration-200 shrink-0 ${
-        collapsed ? 'w-20' : 'w-72'
+        collapsed ? 'w-20' : 'w-68'
       }`}
     >
       <nav className="space-y-2">
@@ -129,7 +129,7 @@ export default function Sidebar({collapsed = false}: Props) {
                   finalExpandedGroups[section.group] ? 'rotate-90' : ''
                 }`}
               >
-                <ChevronRight size={16} />
+                <ChevronRight size={16}/>
               </div>
 
               {!collapsed && (
@@ -141,7 +141,7 @@ export default function Sidebar({collapsed = false}: Props) {
 
             {finalExpandedGroups[section.group] && (
               <ul className={`mt-1 text-base ${collapsed ? 'hidden' : 'block'}`}>
-                {section.items.map(item => {
+                {section.items.map((item) => {
                   const isActive = currentKey === item.key
                   const href = getItemHref(item.key)
 

src/app/(home)/footer.tsx

@@ -57,9 +57,9 @@ export default function Footer(props: FooterProps) {
           <SiteNavList
             title="帮助文档"
             items={[
-              {name: `产品功能`, href: `#`},
+              {name: `产品功能`, href: `/docs/product-features`},
-              {name: `使用教程`, href: `#`},
+              {name: `使用教程`, href: `/docs/browser-proxy`},
-              {name: `行业资讯`, href: `#`},
+              {name: `行业资讯`, href: `/docs/news-latest`},
             ]}
           />
         </div>

src/app/(home)/product/page.tsx

@@ -2,6 +2,7 @@ import BreadCrumb from '@/components/bread-crumb'
 import Wrap from '@/components/wrap'
 import Purchase, {TabType} from '@/components/composites/purchase'
 import {Suspense} from 'react'
+import HomePage from '@/components/home/page'
 
 export type ProductPageProps = {
   searchParams?: Promise<{
@@ -11,15 +12,14 @@ export type ProductPageProps = {
 
 export default function ProductPage(props: ProductPageProps) {
   return (
-    <main className="mt-20">
+    <HomePage path={[
-      <Wrap className="flex flex-col py-8 gap-4">
-        <BreadCrumb items={[
       {label: '产品中心', href: '/product'},
-        ]}/>
+    ]}>
+      <Wrap>
         <Suspense>
           <Purchase/>
         </Suspense>
       </Wrap>
-    </main>
+    </HomePage>
   )
 }

src/components/home/page.tsx

@@ -0,0 +1,16 @@
+import {Children} from '@/lib/utils'
+import Wrap from '../wrap'
+import BreadCrumb, {BreadCrumbItem} from '../bread-crumb'
+
+export default function HomePage(props: Children & {
+  path: BreadCrumbItem[]
+}) {
+  return (
+    <main className="mt-20 flex flex-col gap-3 py-6">
+      <Wrap>
+        <BreadCrumb items={props.path}/>
+      </Wrap>
+      {props.children}
+    </main>
+  )
+}