更新菜单栏中的帮助中心教程和产品介绍的相关文档

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

@@ -0,0 +1,22 @@
+import BreadCrumb from '@/components/bread-crumb'
+import Wrap from '@/components/wrap'
+import {Children} from '@/lib/utils'
+import Sidebar from './sidebar'
+
+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">
+          <Sidebar/>
+          <div className="flex-1 bg-white  rounded-lg p-6 min-h-[420px]">
+            {props.children}
+          </div>
+        </div>
+      </Wrap>
+    </main>
+  )
+}

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

@@ -0,0 +1,218 @@
+'use client'
+import {useState, useMemo, useCallback} from 'react'
+import Link from 'next/link'
+import {useParams, usePathname} from 'next/navigation'
+import {ChevronRight} from 'lucide-react'
+
+type Props = {
+  collapsed?: boolean
+}
+
+// 菜单结构
+const MENU_CONFIG = {
+  tutorials: [
+    {
+      title: '官网教程',
+      sectionKey: 'official-tutorial',
+      items: [
+        {key: 'browser-proxy', label: '浏览器设置代理教程'},
+        {key: 'package-operations', label: '套餐续费、合并、修改时效、补重操作'},
+        {key: 'fixed-package', label: '长效固定套餐操作手册'},
+      ],
+    },
+    {
+      title: '客户端教程',
+      sectionKey: 'client-tutorial',
+      items: [
+        {key: 'ios-proxy', label: 'iOS设置代理教程'},
+        {key: 'windows10-proxy', label: 'Windows10电脑设置代理教程'},
+        {key: 'android-proxy', label: '安卓手机设置代理教程'},
+      ],
+    },
+    {
+      title: '操作指南',
+      sectionKey: 'operation-guide',
+      items: [
+        {key: 'windows7-proxy', label: 'Windows7电脑设置代理教程'},
+        {key: 'mac-proxy', label: 'MAC设置代理教程'},
+        {key: 'firefox-proxy', label: '火狐浏览器设置代理'},
+        {key: 'socks5-usage', label: 'Socks5代理使用教程'},
+      ],
+    },
+  ],
+  features: [
+    {
+      title: '产品介绍',
+      sectionKey: 'product-intro',
+      items: [
+        {key: 'product-overview', label: '产品概述'},
+        {key: 'product-features', label: '产品功能'},
+      ],
+    },
+    {
+      title: '常见问题',
+      sectionKey: 'faq',
+      items: [
+        {key: 'faq-general', label: '常见问题总览'},
+        {key: 'faq-billing', label: '计费与套餐问题'},
+      ],
+    },
+    {
+      title: '新闻资讯',
+      sectionKey: 'news',
+      items: [
+        {key: 'news-latest', label: '了解代理服务器的工作原理'},
+        {key: 'news-announce', label: '公告'},
+      ],
+    },
+  ],
+}
+
+export default function Sidebar({collapsed = false}: Props) {
+  const params = useParams()
+  const pathname = usePathname()
+
+  // 判断当前所处的 help 子模块
+  const getCategory = useCallback(() => {
+    if (!pathname) return 'tutorials'
+    if (pathname.includes('/help/features')) return 'features'
+    if (pathname.includes('/help/tutorials')) return 'tutorials'
+    return 'tutorials'
+  }, [pathname])
+
+  const category = getCategory()
+  const MENU = category === 'features' ? MENU_CONFIG.features : MENU_CONFIG.tutorials
+
+  // 获取当前 sectionKey 和 itemKey
+  const getCurrentKeys = useCallback(() => {
+    const pathParts = pathname?.split('/') || []
+    let sectionKey = ''
+    let itemKey = ''
+
+    if (pathParts.length >= 4) {
+      sectionKey = pathParts[3]
+    }
+    if (pathParts.length >= 5) {
+      itemKey = pathParts[4]
+    }
+
+    // 如果从 params 获取
+    if (!sectionKey && params?.section) {
+      sectionKey = String(params.section)
+    }
+    if (!itemKey && params?.key) {
+      itemKey = String(params.key)
+    }
+
+    return {sectionKey, itemKey}
+  }, [pathname, params])
+
+  const {sectionKey: currentSectionKey, itemKey: currentItemKey} = getCurrentKeys()
+
+  const expandedSections = useMemo(() => {
+    const newExpanded: Record<string, boolean> = {}
+    const hasActiveSection = MENU.some(s => s.sectionKey === currentSectionKey)
+
+    MENU.forEach((section, index) => {
+      if (section.sectionKey === currentSectionKey) {
+        newExpanded[section.title] = true
+      }
+      else if (!hasActiveSection && index === 0) {
+        newExpanded[section.title] = true
+      }
+      else {
+        newExpanded[section.title] = false
+      }
+    })
+
+    return newExpanded
+  }, [MENU, currentSectionKey])
+
+  // 使用 state 来跟踪用户的手动切换
+  const [userToggles, setUserToggles] = useState<Record<string, boolean>>({})
+
+  // 合并自动展开和用户手动切换的状态
+  const finalExpandedSections = useMemo(() => {
+    const result = {...expandedSections}
+
+    Object.keys(userToggles).forEach((title) => {
+      const section = MENU.find(s => s.title === title)
+      if (section && section.sectionKey !== currentSectionKey) {
+        result[title] = userToggles[title]
+      }
+    })
+
+    return result
+  }, [expandedSections, userToggles, MENU, currentSectionKey])
+
+  const toggleSection = (title: string) => {
+    const section = MENU.find(s => s.title === title)
+    if (!section) return
+    if (section.sectionKey === currentSectionKey) {
+      setUserToggles(prev => ({
+        ...prev,
+        [title]: !finalExpandedSections[title],
+      }))
+    }
+    else {
+      setUserToggles(prev => ({
+        ...prev,
+        [title]: !prev[title],
+      }))
+    }
+  }
+
+  // 构建链接地址
+  const getItemHref = useCallback((sectionKey: string, itemKey: string) => {
+    return category === 'features'
+      ? `/help/features/${sectionKey}/${itemKey}`
+      : `/help/tutorials/${sectionKey}/${itemKey}`
+  }, [category])
+
+  return (
+    <aside className={`bg-white rounded-lg p-3 transition-all duration-200 shrink-0 ${collapsed ? 'w-20' : 'w-72'}`}>
+      <nav className="space-y-2">
+        {MENU.map(section => (
+          <div key={section.title}>
+            <div
+              onClick={() => toggleSection(section.title)}
+              className={`flex items-center gap-2 cursor-pointer px-3 py-2 rounded-sm transition-colors ${finalExpandedSections[section.title] && !collapsed ? 'bg-blue-50' : 'hover:bg-slate-50'}`}
+            >
+              <div className={`w-4 flex items-center justify-center text-sm text-slate-400 transform transition-transform ${finalExpandedSections[section.title] ? 'rotate-90' : ''}`}>
+                <ChevronRight size={16}/>
+              </div>
+
+              {!collapsed && (
+                <div className="text-lg font-semibold text-slate-900">
+                  {section.title}
+                </div>
+              )}
+            </div>
+
+            {finalExpandedSections[section.title] && (
+              <ul className={`mt-1 text-base ${collapsed ? 'hidden' : 'block'}`}>
+                {section.items.map((item) => {
+                  const isActive = currentItemKey === item.key
+                  const href = getItemHref(section.sectionKey, item.key)
+
+                  return (
+                    <li key={item.key}>
+                      <Link
+                        href={href}
+                        className={`block pl-8 py-2 text-base cursor-pointer transition-colors ${
+                          isActive ? 'bg-blue-50 font-semibold' : 'text-slate-700 hover:text-slate-900 hover:bg-slate-50'
+                        }`}
+                      >
+                        {item.label}
+                      </Link>
+                    </li>
+                  )
+                })}
+              </ul>
+            )}
+          </div>
+        ))}
+      </nav>
+    </aside>
+  )
+}

src/app/(home)/docs/win7-proxy/page.md

@@ -0,0 +1,37 @@
+# Windows7 电脑设置代理教程
+
+## 🚀 30秒快速设置法
+
+### 第一步：打开设置面板
+1. 按 `Win` + `R` 打开运行框
+2. 输入 `inetcpl.cpl`
+3. 按回车
+
+### 第二步：配置代理
+1. 点击顶部 **"连接"** 标签
+2. 点击右下角 **"局域网设置"** 按钮
+3. **勾选** "为LAN使用代理服务器"
+4. 填写代理信息：
+   - **地址**：`proxy.example.com` 或 `192.168.1.100`
+   - **端口**：`8080` 或 `3128`
+5. 点击两次 **"确定"** 保存
+
+### 第三步：测试验证
+打开浏览器访问任意网站，检查是否正常
+
+## 🌐 浏览器专用代理方案
+
+### Chrome / Edge / Firefox 推荐方案
+```javascript
+// 最佳实践：使用代理管理扩展
+// 1. 安装 SwitchyOmega 或 Proxy SwitchySharp
+// 2. 配置代理服务器信息
+// 3. 一键切换，不影响系统设置
+
+// 配置示例
+const proxyConfig = {
+  type: 'HTTP',      // 或 HTTPS / SOCKS5
+  host: 'proxy.company.com',
+  port: 8080,
+  bypassList: ['localhost', '*.internal']  // 例外列表
+};