迁移文档并更新引用链接

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

@@ -1,206 +1,158 @@
 'use client'
 import {useState, useMemo, useCallback} from 'react'
 import Link from 'next/link'
-import {useParams, usePathname} from 'next/navigation'
+import {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: '公告'},
-      ],
-    },
-  ],
-}
+// 简化的菜单配置 - 扁平结构，支持分组
+const MENU_ITEMS = [
+  {
+    group: '官网教程',
+    items: [
+      {key: 'browser-proxy', label: '浏览器设置代理教程'},
+      {key: 'package-operations', label: '套餐续费、合并、修改时效、补重操作'},
+      {key: 'fixed-package', label: '长效固定套餐操作手册'},
+    ],
+  },
+  {
+    group: '客户端教程',
+    items: [
+      {key: 'ios-proxy', label: 'iOS设置代理教程'},
+      {key: 'windows10-proxy', label: 'Windows10电脑设置代理教程'},
+      {key: 'android-proxy', label: '安卓手机设置代理教程'},
+    ],
+  },
+  {
+    group: '操作指南',
+    items: [
+      {key: 'windows7-proxy', label: 'Windows7电脑设置代理教程'},
+      {key: 'mac-proxy', label: 'MAC设置代理教程'},
+      {key: 'firefox-proxy', label: '火狐浏览器设置代理'},
+      {key: 'socks5-usage', label: 'Socks5代理使用教程'},
+      {key: 'http-notes', label: '使用 HTTP 代理注意事项'},
+      {key: 'official-tutorial', label: '浏览器设置代理教程'},
+    ],
+  },
+  {
+    group: '产品介绍',
+    items: [
+      {key: 'product-overview', label: '产品概述'},
+      {key: 'product-features', label: '产品功能'},
+      {key: 'product-cert', label: '实名认证与证书'},
+    ],
+  },
+  {
+    group: '常见问题',
+    items: [
+      {key: 'faq-general', label: '常见问题总览'},
+      {key: 'faq-billing', label: '计费与套餐问题'},
+    ],
+  },
+  {
+    group: '新闻资讯',
+    items: [
+      {key: 'news-latest', label: '了解代理服务器的工作原理'},
+      {key: 'news-announce', label: '公告'},
+    ],
+  },
+  {
+    group: '其他',
+    items: [
+      {key: 'online-ip-proxy', label: '在线 IP 代理地址'},
+    ],
+  },
+]
 
 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'
+  // 获取当前文档 key （从 /help/{key} 路径中提取）
+  const getCurrentKey = useCallback(() => {
+    const parts = pathname?.split('/') || []
+    return parts[2] || '' // /help/{key} -> key
   }, [pathname])
 
-  const category = getCategory()
-  const MENU = category === 'features' ? MENU_CONFIG.features : MENU_CONFIG.tutorials
+  const currentKey = getCurrentKey()
 
-  // 获取当前 sectionKey 和 itemKey
-  const getCurrentKeys = useCallback(() => {
-    const pathParts = pathname?.split('/') || []
-    let sectionKey = ''
-    let itemKey = ''
+  // 展开/收起状态
+  const [expandedGroups, setExpandedGroups] = useState<Record<string, boolean>>({})
 
-    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
+  // 初始化：自动展开包含当前活跃项的分组
+  const initialExpandedGroups = useMemo(() => {
+    const result: Record<string, boolean> = {}
+    MENU_ITEMS.forEach((section, index) => {
+      const hasActive = section.items.some(item => item.key === currentKey)
+      if (hasActive || index === 0) {
+        result[section.group] = true
       }
     })
-
-    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])
+  }, [currentKey])
 
-  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 finalExpandedGroups = useMemo(() => {
+    return {...initialExpandedGroups, ...expandedGroups}
+  }, [initialExpandedGroups, expandedGroups])
+
+  const toggleGroup = (group: string) => {
+    setExpandedGroups(prev => ({
+      ...prev,
+      [group]: !finalExpandedGroups[group],
+    }))
   }
 
-  // 构建链接地址
-  const getItemHref = useCallback((sectionKey: string, itemKey: string) => {
-    return category === 'features'
-      ? `/help/features/${sectionKey}/${itemKey}`
-      : `/help/tutorials/${sectionKey}/${itemKey}`
-  }, [category])
+  const getItemHref = (key: string) => `/help/${key}`
 
   return (
-    <aside className={`bg-white rounded-lg p-3 transition-all duration-200 shrink-0 ${collapsed ? 'w-20' : 'w-72'}`}>
+    <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}>
+        {MENU_ITEMS.map(section => (
+          <div key={section.group}>
             <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'}`}
+              onClick={() => toggleGroup(section.group)}
+              className={`flex items-center gap-2 cursor-pointer px-3 py-2 rounded-sm transition-colors ${
+                finalExpandedGroups[section.group] && !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
+                className={`w-4 flex items-center justify-center text-sm text-slate-400 transform transition-transform ${
+                  finalExpandedGroups[section.group] ? 'rotate-90' : ''
+                }`}
+              >
+                <ChevronRight size={16} />
               </div>
 
               {!collapsed && (
                 <div className="text-lg font-semibold text-slate-900">
-                  {section.title}
+                  {section.group}
                 </div>
               )}
             </div>
 
-            {finalExpandedSections[section.title] && (
+            {finalExpandedGroups[section.group] && (
               <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)
+                {section.items.map(item => {
+                  const isActive = currentKey === item.key
+                  const href = getItemHref(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'
+                          isActive
+                            ? 'bg-blue-50 font-semibold'
+                            : 'text-slate-700 hover:text-slate-900 hover:bg-slate-50'
                         }`}
                       >
                         {item.label}