接口调用时获取用户的x-data-ip和x-data-ua & 修改isp参数类型 & 使用教程初版 &后台用户名字段展示 &添加支付平台字段

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

@@ -33,7 +33,7 @@ export default function HelpMenu() {
         icon={h03}
         title="产品功能"
         items={[
-          {lead: '常见问题', href: '#'},
+          {lead: '常见问题', href: '/prodFeat'},
           {lead: '产品介绍', href: '#'},
           {lead: '行业资讯', href: '#'},
         ]}

src/app/(home)/help/tutorials/quick-start/page.tsx

@@ -1,41 +1,68 @@
-import QuickStart from '@/components/docs/quickStart.mdx'
-import Markdown from '@/components/markdown'
+'use client'
+import {useEffect, useState} from 'react'
+import {useRouter, usePathname, useSearchParams} from 'next/navigation'
+import BreadCrumb from '@/components/bread-crumb'
+import Wrap from '@/components/wrap'
+import QuickStart from '@/components/composites/quickStart'
+import Sidebar, {MENU} from '@/components/composites/sidebar'
+
+export type CollectPageProps = {}
+
+export default function CollectPage(props: CollectPageProps) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+
+  // 初始根据 url ?doc=xxx 设置选中项，回退到默认 'browser-proxy'
+  const initialDoc = searchParams?.get('doc') ?? 'browser-proxy'
+  const [selected, setSelected] = useState<string>(initialDoc)
+  const [collapsed, setCollapsed] = useState<boolean>(false)
+
+  // 当 selected 改变时同步更新 URL
+  useEffect(() => {
+    const url = `${pathname}?doc=${selected}`
+    router.replace(url)
+  }, [selected, pathname, router])
+
+  const selectedLabel = (() => {
+    for (const sec of MENU) {
+      const found = sec.items.find(i => i.key === selected)
+      if (found) return found.label
+    }
+    return selected
+  })()
 
-export default function QuickStartPage() {
   return (
-    <div className="container mx-auto p-4">
-      <Markdown>
-        <QuickStart/>
-      </Markdown>
-    </div>
+    <main className="mt-20 flex flex-col gap-4">
+      <Wrap className="flex flex-col py-8 gap-8">
+        <BreadCrumb items={[
+          {label: '帮助中心', href: '/help'},
+          {label: '使用教程', href: '/help/tutorials'},
+          {label: selectedLabel, href: `${pathname}?doc=${selected}`},
+        ]}/>
+        {/* 两列布局：左侧侧边栏，右侧内容 */}
+        <div className="flex gap-6">
+          <Sidebar
+            collapsed={collapsed}
+            onToggle={() => setCollapsed(v => !v)}
+            selected={selected}
+            onSelect={key => setSelected(key)}
+          />
+          <div className="flex-1 bg-white border rounded p-6 min-h-[420px]">
+            {selected === 'browser-proxy' && <QuickStart hidePreview/>}
+            {selected !== 'browser-proxy' && (
+              <div>
+                <h2 className="text-2xl font-semibold mb-4">
+                  {selected === 'code-download' ? '代码下载' : '占位页面'}
+                </h2>
+                <p className="text-slate-600">
+                  这里渲染对应文档内容（演示占位）。你可以替换为其它 MDX/组件，或把更多页面配置进 Sidebar 数据中。
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      </Wrap>
+    </main>
   )
 }
-
-// app/
-// ├── help/
-// │   ├── tutorials/               # 使用教程
-// │   │   ├── quick-start/         # 快速入手
-// │   │   │   └── page.tsx
-// │   │   ├── code-download/       # 代码下载
-// │   │   │   └── page.tsx
-// │   │   └── api-docs/            # API文档
-// │   │       └── page.tsx
-// │   │
-// │   └── features/                # 产品功能
-// │       ├── faq/                 # 常见问题
-// │       │   └── page.tsx
-// │       ├── introduction/        # 产品介绍
-// │       │   └── page.tsx
-// │       └── industry-news/       # 行业资讯
-// │           └── page.tsx
-// │
-// components/
-// └── docs/
-//     ├── tutorials/
-//     │   ├── quickStart.mdx       # MDX内容文件
-//     │   ├── codeDownload.mdx
-//     │   └── apiDocs.mdx
-//     └── features/
-//         ├── faq.mdx
-//         ├── introduction.mdx
-//         └── industryNews.mdx