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

This commit is contained in:
Eamon-meng
2025-12-15 11:48:40 +08:00
parent 26ea796b4d
commit 56adde8aa0
28 changed files with 368 additions and 208 deletions

View File

@@ -1,11 +1,9 @@
import BreadCrumb from '@/components/bread-crumb'
import Wrap from '@/components/wrap'
import {ReactNode} from 'react'
import {Children} from '@/lib/utils'
import Sidebar from './sidebar'
export default function HelpLayout(props: {
children: ReactNode
}) {
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">
@@ -14,7 +12,7 @@ export default function HelpLayout(props: {
]}/>
<div className="flex gap-6">
<Sidebar/>
<div className="flex-1 bg-white rounded p-6 min-h-[420px]">
<div className="flex-1 bg-white rounded-lg p-6 min-h-[420px]">
{props.children}
</div>
</div>

View File

@@ -1,7 +1,7 @@
'use client'
import React, {useState, useMemo, useCallback, useEffect} from 'react'
import {useState, useMemo, useCallback} from 'react'
import Link from 'next/link'
import {useParams, usePathname, useSearchParams} from 'next/navigation'
import {useParams, usePathname} from 'next/navigation'
import {ChevronRight} from 'lucide-react'
type Props = {
@@ -61,7 +61,7 @@ const MENU_CONFIG = {
title: '新闻资讯',
sectionKey: 'news',
items: [
{key: 'news-latest', label: '最新动态'},
{key: 'news-latest', label: '了解代理服务器的工作原理'},
{key: 'news-announce', label: '公告'},
],
},
@@ -170,7 +170,7 @@ export default function Sidebar({collapsed = false}: Props) {
}, [category])
return (
<aside className={`bg-white border rounded 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}>

View File

@@ -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'] // 例外列表
};

View File

@@ -1,60 +0,0 @@
import Wrap from '@/components/wrap'
interface Props {
params: Promise<{section: string, key: string}>
}
// 根据 key 返回对应的组件
async function getContentComponent(key: string) {
switch (key) {
case 'faq-general':
const {default: FaqGeneral} = await import('@/docs/faq-general.mdx')
return FaqGeneral
case 'product-overview':
const {default: ProductOverview} = await import('@/docs/product-overview.mdx')
return ProductOverview
case 'news-latest':
const {default: NewsLatest} = await import('@/docs/news-latest.mdx')
return NewsLatest
default:
return null
}
}
// 标题
function getTitle(key: string) {
const titleMap: Record<string, string> = {
'faq-general': '常见问题总览',
'faq-billing': '计费与套餐问题',
'product-overview': '产品概述',
'product-features': '产品功能',
'news-latest': '最新动态',
'news-announce': '公告',
}
return titleMap[key] || '功能'
}
export default async function FeatureContentPage({params}: Props) {
const {key} = await params
// 动态获取组件
const Content = await getContentComponent(key)
const title = getTitle(key)
return (
<main>
<Wrap className="flex flex-col">
<div className="flex">
{Content ? (
<Content/>
) : (
<div>
<h2 className="text-2xl font-semibold mb-4">{title}</h2>
<p className="text-slate-600">...</p>
</div>
)}
</div>
</Wrap>
</main>
)
}

View File

@@ -1,69 +0,0 @@
import Wrap from '@/components/wrap'
// 只导入真正需要的 MDX 文件(按需导入,避免一次性导入太多)
interface Props {
params: Promise<{section: string, key: string}>
}
// 根据 key 返回对应的组件
async function getContentComponent(key: string) {
switch (key) {
case 'browser-proxy':
const {default: BrowserProxy} = await import('@/docs/browser-proxy.mdx')
return BrowserProxy
case 'package-operations':
const {default: PackageOperations} = await import('@/docs/package-operations.mdx')
return PackageOperations
case 'ios-proxy':
const {default: IosProxy} = await import('@/docs/ios-proxy.mdx')
return IosProxy
case 'windows7-proxy':
const {default: Windows7Proxy} = await import('@/docs/windows7-proxy.mdx')
return Windows7Proxy
default:
return null
}
}
// 标题
function getTitle(key: string) {
const titleMap: Record<string, string> = {
'browser-proxy': '浏览器设置代理教程',
'package-operations': '套餐续费、合并、修改时效、补重操作',
'fixed-package': '长效固定套餐操作手册',
'ios-proxy': 'iOS设置代理教程',
'windows10-proxy': 'Windows10电脑设置代理教程',
'android-proxy': '安卓手机设置代理教程',
'windows7-proxy': 'Windows7电脑设置代理教程',
'mac-proxy': 'MAC设置代理教程',
'firefox-proxy': '火狐浏览器怎么设置HTTP/Socks5代理服务器',
'socks5-usage': '怎么使用Socks5代理IP上网',
'http-notes': '使用HTTP代理注意的点',
}
return titleMap[key] || '教程'
}
export default async function TutorialContentPage({params}: Props) {
const {key} = await params
// 动态获取组件
const Content = await getContentComponent(key)
const title = getTitle(key)
return (
<main>
<Wrap className="flex flex-col">
<div className="flex">
{Content ? (
<Content/>
) : (
<div>
<h2 className="text-2xl font-semibold mb-4">{title}</h2>
<p className="text-slate-600">...</p>
</div>
)}
</div>
</Wrap>
</main>
)
}