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

src/components/composites/quickStart/index.tsx

@@ -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>
+  )
+}

src/components/composites/quickStart/tutorial-content.tsx

@@ -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>
+    </>
+  )
+}

src/components/composites/quickStart/tutorial-sidebar.tsx

@@ -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>
+  )
+}

src/components/composites/sidebar.tsx

@@ -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>
+  )
+}

src/components/composites/user-center/index.tsx

@@ -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)}`