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

2025-12-15 14:09:17 +08:00
parent fd2afe5e01
commit c16bd76821
10 changed files with 509 additions and 475 deletions
--- a/src/app/(home)/_components/header/menu-help.tsx
+++ b/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: '#'},
+          {lead: '短效 IP 提取', href: '/collect?type=short'},
+          {lead: '长效 IP 提取', href: '/collect?type=long'},
        ]}
      />
      <Column
        icon={h02}
-        title="使用教程"
+        title="平台教程"
        items={[
-          {lead: '官方教程', href: '/help/tutorials/official-tutorial/browser-proxy'},
-          {lead: '客户端教程', href: '/help/tutorials/client-tutorial/ios-proxy'},
-          {lead: '操作指南', href: '/help/tutorials/operation-guide/windows7-proxy'},
+          {lead: 'iOS 设置', href: '/docs/ios-proxy'},
+          {lead: 'Android 设置', href: '/docs/android-proxy'},
+          {lead: 'Windows 设置', href: '/docs/windows10-proxy'},
        ]}
      />
      <Column
        icon={h03}
-        title="产品功能"
+        title="高级功能"
        items={[
-          {lead: '常见问题', href: '/help/features/faq/faq-general'},
-          {lead: '产品介绍', href: '/help/features/product-intro/product-overview'},
-          {lead: '新闻资讯', href: '/help/features/news/news-latest'},
+          {lead: '套餐管理', href: '/docs/package-operations'},
+          {lead: 'Socks5 教程', href: '/docs/socks5-usage'},
+          {lead: '固定 IP 套餐', href: '/docs/fixed-package'},
        ]}
      />
      <Image src={banner} alt="banner" className="hidden lg:block"/>
--- a/src/app/(home)/collect/page.tsx
+++ b/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">
-      <Wrap className="flex flex-col py-8 gap-4">
-        <BreadCrumb items={[
+    // <main className="mt-20 flex flex-col gap-4">
+    //   <Wrap className="flex flex-col py-8 gap-4">
+    //     <BreadCrumb items={[
+    //       {label: '短效IP 提取', href: '/collect'},
+    //     ]}/>
+    //     <Extract/>
+    //   </Wrap>
+    // </main>
+    <HomePage path={[
      {label: '短效IP 提取', href: '/collect'},
-        ]}/>
+    ]}>
+      <Wrap>
        <Extract/>
      </Wrap>
-    </main>
+    </HomePage>
  )
 }
--- a/src/app/(home)/customized/page.tsx
+++ b/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">
-      <Wrap className="flex flex-col py-8 gap-8">
-        <BreadCrumb items={[
-          {label: '产品订购/定制套餐', href: '/customized'},
-        ]}/>
+  // <main className="mt-20 flex flex-col gap-4">
+  //   <Wrap className="flex flex-col py-8 gap-8">
+  //     <BreadCrumb items={[
+  //       {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>
  )
 }
--- a/src/app/(home)/data-capture/page.tsx
+++ b/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">
-      <Wrap className="flex flex-col py-8 gap-8">
-        <BreadCrumb items={[
-          {label: '业务场景/数据抓取', href: '/data-capture'},
-        ]}/>
-        <main className="flex flex-col gap-16 lg:gap-32 mb-16 lg:mb-32">
+    <HomePage path={[
+      {label: '业务场景'},
+      {label: '数据抓取', href: '/data-capture'},
+    ]}>
+      <Wrap 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>
  )
 }

--- a/src/app/(home)/docs/layout.tsx
+++ b/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">
-      <Wrap className="flex flex-col py-8 gap-8">
-        <BreadCrumb items={[
-          {label: '帮助中心', href: '/help'},
-        ]}/>
-        <div className="flex gap-6">
+    <HomePage path={[
+      {label: '帮助中心', href: '/docs'},
+    ]}>
+      <Wrap className="flex gap-3">
        <Sidebar/>
        <div className="flex-1 bg-white  rounded-lg p-6 min-h-[420px]">
          {props.children}
        </div>
-        </div>
      </Wrap>
-    </main>
+    </HomePage>
  )
 }
--- a/src/app/(home)/docs/page.tsx
+++ b/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>
+  )
+}
--- a/src/app/(home)/docs/sidebar.tsx
+++ b/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)

--- a/src/app/(home)/footer.tsx
+++ b/src/app/(home)/footer.tsx
@@ -57,9 +57,9 @@ export default function Footer(props: FooterProps) {
          <SiteNavList
            title="帮助文档"
            items={[
-              {name: `产品功能`, href: `#`},
-              {name: `使用教程`, href: `#`},
-              {name: `行业资讯`, href: `#`},
+              {name: `产品功能`, href: `/docs/product-features`},
+              {name: `使用教程`, href: `/docs/browser-proxy`},
+              {name: `行业资讯`, href: `/docs/news-latest`},
            ]}
          />
        </div>
--- a/src/app/(home)/product/page.tsx
+++ b/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">
-      <Wrap className="flex flex-col py-8 gap-4">
-        <BreadCrumb items={[
+    <HomePage path={[
      {label: '产品中心', href: '/product'},
-        ]}/>
+    ]}>
+      <Wrap>
        <Suspense>
          <Purchase/>
        </Suspense>
      </Wrap>
-    </main>
+    </HomePage>
  )
 }
--- a/src/components/home/page.tsx
+++ b/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>
+  )
+}