接口调用时获取用户的x-data-ip和x-data-ua & 修改isp参数类型 & 使用教程初版 &后台用户名字段展示 &添加支付平台字段
This commit is contained in:
Eamon-meng
@@ -3,6 +3,7 @@ import {API_BASE_URL, ApiResponse, CLIENT_ID, CLIENT_SECRET} from '@/lib/api'
|
||||
import {cookies, headers} from 'next/headers'
|
||||
import {cache} from 'react'
|
||||
import {redirect} from 'next/navigation'
|
||||
import {userAgent} from 'next/server'
|
||||
|
||||
// ======================
|
||||
// public
|
||||
@@ -113,7 +114,17 @@ const _callByUser = cache(async <R = undefined>(
|
||||
async function call<R = undefined>(url: string, request: RequestInit): Promise<ApiResponse<R>> {
|
||||
let response: Response
|
||||
try {
|
||||
response = await fetch(url, request)
|
||||
const userHeaders = await headers()
|
||||
// request.headers['x-data-ip'] = header.get('x-forwarded-for')
|
||||
// request.headers['x-data-ua'] = header.get('user-agent')
|
||||
response = await fetch(url, {
|
||||
...request,
|
||||
headers: {
|
||||
...request.headers,
|
||||
'x-data-ip': userHeaders.get('x-forwarded-for') || '',
|
||||
'x-data-ua': userHeaders.get('user-agent') || '',
|
||||
},
|
||||
})
|
||||
}
|
||||
catch (e) {
|
||||
console.error('后端请求失败', url, (e as Error).message)
|
||||
|
||||
@@ -29,7 +29,7 @@ export async function createChannels(params: {
|
||||
count: number
|
||||
prov?: string
|
||||
city?: string
|
||||
isp?: string
|
||||
isp?: number
|
||||
}) {
|
||||
return callByUser<CreateChannelsResp[]>('/api/channel/create', params)
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@ export async function GET(req: NextRequest) {
|
||||
count: Number(count),
|
||||
prov,
|
||||
city,
|
||||
isp,
|
||||
isp: Number(isp),
|
||||
})
|
||||
if (!result.success) {
|
||||
throw new Error(result.message)
|
||||
|
||||
@@ -33,7 +33,7 @@ export default function HelpMenu() {
|
||||
icon={h03}
|
||||
title="产品功能"
|
||||
items={[
|
||||
{lead: '常见问题', href: '#'},
|
||||
{lead: '常见问题', href: '/prodFeat'},
|
||||
{lead: '产品介绍', href: '#'},
|
||||
{lead: '行业资讯', href: '#'},
|
||||
]}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -26,7 +26,7 @@ async function UserCenter() {
|
||||
<Card className="h-full">
|
||||
<CardContent className="flex-auto flex flex-col justify-between gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<p>{profile.phone}</p>
|
||||
<p>{profile.username?.trim() || profile.email || profile.phone}</p>
|
||||
<p className="text-sm text-weak">{`最后登录：${format(profile.last_login, 'yyyy-MM-dd HH:mm')}`}</p>
|
||||
</div>
|
||||
<div className={merge(
|
||||
|
||||
@@ -65,6 +65,7 @@ export default function BillsPage(props: BillsPageProps) {
|
||||
const res = await listBills({
|
||||
page, size, type, create_after, create_before, trade_id,
|
||||
})
|
||||
console.log(res, 'res')
|
||||
|
||||
if (res.success) {
|
||||
setData(res.data)
|
||||
@@ -249,6 +250,29 @@ export default function BillsPage(props: BillsPageProps) {
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'platform',
|
||||
header: '支付平台',
|
||||
cell: ({row}) => {
|
||||
const trade = row.original.trade
|
||||
if (!trade) return <span>-</span>
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
{trade.platform === 1 ? (
|
||||
<>
|
||||
<span>电脑网站</span>
|
||||
</>
|
||||
) : trade.platform === 2 ? (
|
||||
<>
|
||||
<span>手机网站</span>
|
||||
</>
|
||||
) : (
|
||||
<span>-</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'created_at', header: '创建时间', cell: ({row}) => (
|
||||
format(new Date(row.original.created_at), 'yyyy-MM-dd HH:mm')
|
||||
|
||||
18
src/components/composites/quickStart/index.tsx
Normal file
18
src/components/composites/quickStart/index.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import TutorialSidebar from './tutorial-sidebar'
|
||||
import TutorialContent from './tutorial-content'
|
||||
|
||||
export default function QuickStart({hidePreview = false}: {hidePreview?: boolean}) {
|
||||
return (
|
||||
<div className="flex gap-6">
|
||||
{!hidePreview && (
|
||||
<div className="lg:w-1/4">
|
||||
<TutorialSidebar/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={`${hidePreview ? 'w-full' : 'lg:w-3/4'}`}>
|
||||
<TutorialContent/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
20
src/components/composites/quickStart/tutorial-content.tsx
Normal file
20
src/components/composites/quickStart/tutorial-content.tsx
Normal file
@@ -0,0 +1,20 @@
|
||||
export default function TutorialContent() {
|
||||
return (
|
||||
<>
|
||||
{/* 页面标题 */}
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">浏览器设置代理教程</h1>
|
||||
<div className="text-gray-500 text-sm">发布时间: 2025-01-17 16:18:21</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div>打开IE浏览器，选择“设置”，点击“Internet选项”，在弹出的“局域网LAN设置”中，代理服务器的复选框打上勾，并填写从神龙HTTP获取的ip地址及端口号，点击确定，刷新浏览器，浏览器的IP就改变了。</div>
|
||||
<br/>
|
||||
<div>1、打开IE浏览器，选择“设置”；</div>
|
||||
<br/>
|
||||
<div>2、点击“Internet选项”；</div>
|
||||
<div>3、弹出“Internet选项”弹窗，选择连接—局域网设置；</div>
|
||||
<br/>
|
||||
<div>4、在弹出的“局域网LAN设置”中，代理服务器的复选框打上勾，并填写从神龙HTTP代理获取的ip地址及端口。点击确定，即设置成功了。</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
65
src/components/composites/quickStart/tutorial-sidebar.tsx
Normal file
65
src/components/composites/quickStart/tutorial-sidebar.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import {usePathname} from 'next/navigation'
|
||||
|
||||
const tutorialSections = [
|
||||
{
|
||||
title: '官网教程',
|
||||
items: [
|
||||
{name: '浏览器设置代理教程', href: '/help/tutorials/browser-proxy'},
|
||||
{name: 'iOS设置代理教程', href: '/help/tutorials/ios-proxy'},
|
||||
{name: 'Windows10电脑设置代理教程', href: '/help/tutorials/windows-proxy'},
|
||||
{name: '安卓手机设置代理教程', href: '/help/tutorials/android-proxy'},
|
||||
{name: '查看终端、合并、修改协议、补重操作', href: '/help/tutorials/terminal-operations'},
|
||||
{name: '蓝狐HTTP代理如何生成API链接？', href: '/help/tutorials/api-generation'},
|
||||
{name: '蓝狐HTTP代理如何添加IP合宿？', href: '/help/tutorials/ip-hosting'},
|
||||
{name: '长效固定套餐操作手册', href: '/help/tutorials/long-term-package'},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '客户端教程',
|
||||
items: [
|
||||
{name: '操作指南', href: '/help/tutorials/client-guide'},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export default function TutorialSidebar() {
|
||||
const pathname = usePathname()
|
||||
|
||||
if (pathname?.includes('/quick-start')) {
|
||||
return <div className="w-64 flex-shrink-0 invisible pointer-events-none" aria-hidden="true"/>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg shadow-sm border p-4">
|
||||
{tutorialSections.map((section, index) => (
|
||||
<div key={section.title} className={index > 0 ? 'mt-4' : ''}>
|
||||
<h3 className="font-semibold text-gray-900 mb-2 text-sm">
|
||||
{section.title}
|
||||
</h3>
|
||||
<ul className="space-y-1">
|
||||
{section.items.map((item) => {
|
||||
const isActive = pathname === item.href
|
||||
return (
|
||||
<li key={item.name}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className={`block px-3 py-2 rounded text-sm transition-colors ${
|
||||
isActive
|
||||
? 'bg-blue-50 text-blue-600 font-medium'
|
||||
: 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
91
src/components/composites/sidebar.tsx
Normal file
91
src/components/composites/sidebar.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
'use client'
|
||||
import React from 'react'
|
||||
|
||||
export type MenuItem = {key: string, label: string, desc?: string, icon?: string}
|
||||
export type Section = {title: string, items: MenuItem[]}
|
||||
|
||||
export const MENU: Section[] = [
|
||||
{
|
||||
title: '官网教程',
|
||||
items: [
|
||||
{key: 'browser-proxy', label: '浏览器设置代理教程'},
|
||||
{key: 'code-download', label: '代码下载'},
|
||||
{key: 'api-docs', label: 'API 文档'},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '客户端教程',
|
||||
items: [
|
||||
{key: 'client-install', label: '客户端安装与配置'},
|
||||
{key: 'client-usage', label: '客户端使用指南'},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '操作指南',
|
||||
items: [
|
||||
{key: 'faq', label: '常见问题', desc: '常见问题与解答'},
|
||||
{key: 'troubleshoot', label: '故障排查', desc: '排查与解决常见故障'},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
type Props = {
|
||||
collapsed?: boolean
|
||||
selected?: string
|
||||
onSelect?: (key: string) => void
|
||||
onToggle?: () => void
|
||||
}
|
||||
|
||||
export default function Sidebar({collapsed = false, selected, onSelect, onToggle}: Props) {
|
||||
const [expanded, setExpanded] = React.useState<Record<string, boolean>>(() => {
|
||||
const s: Record<string, boolean> = {}
|
||||
MENU.forEach((section, idx) => (s[section.title] = idx === 0))
|
||||
return s
|
||||
})
|
||||
|
||||
const toggleSection = (title: string) => {
|
||||
setExpanded(prev => ({...prev, [title]: !prev[title]}))
|
||||
}
|
||||
|
||||
return (
|
||||
<aside className={`bg-white border rounded p-3 transition-all duration-200 flex-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 ${expanded[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 ${expanded[section.title] ? 'rotate-90' : ''}`}>
|
||||
▸
|
||||
</div>
|
||||
|
||||
{!collapsed && (
|
||||
<div className="text-lg font-semibold text-slate-900">
|
||||
{section.title}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{expanded[section.title] && (
|
||||
<ul className={`mt-1 text-base ${collapsed ? 'hidden' : 'block'}`}>
|
||||
{section.items.map((item) => {
|
||||
const active = selected === item.key
|
||||
return (
|
||||
<li
|
||||
key={item.key}
|
||||
onClick={() => onSelect?.(item.key)}
|
||||
className={`pl-8 py-2 text-base cursor-pointer transition-colors ${active ? 'text-blue-600 font-semibold' : 'text-slate-700 hover:text-slate-900'}`}
|
||||
>
|
||||
{item.label}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
)
|
||||
}
|
||||
@@ -29,7 +29,7 @@ export default function UserCenter(props: UserCenterProps) {
|
||||
const pathname = usePathname()
|
||||
const isAdminPage = pathname.startsWith('/admin') // 判断是否在后台页面
|
||||
const displayName = () => {
|
||||
if (props.profile.name) return props.profile.name // 优先显示用户名
|
||||
if (props.profile.username) return props.profile.username // 优先显示用户名
|
||||
if (props.profile.phone) {
|
||||
const phone = props.profile.phone
|
||||
return `${phone.substring(0, 3)}****${phone.substring(7)}`
|
||||
|
||||
@@ -51,6 +51,7 @@ export type Trade = {
|
||||
amount: number
|
||||
payment: number
|
||||
method: number
|
||||
platform: number
|
||||
status: number
|
||||
paid_at: Date
|
||||
cancel_at: Date
|
||||
|
||||
Reference in New Issue
Block a user