调整暂存帮助部分结构 & 简化获取当前用户IP代码

src/actions/ip.ts

@@ -3,30 +3,15 @@
 import {headers} from 'next/headers'
 
 export async function getClientIp(): Promise<{ip?: string, error?: string}> {
+  const header = await headers()
   try {
-    // 1. 从headers获取
-    const headersList = await headers()
-
-    // 尝试常见header
-    const forwardedFor = headersList.get('x-forwarded-for')
+    const forwardedFor = header.get('x-forwarded-for')
     if (forwardedFor) {
       const ip = forwardedFor.split(',')[0].trim()
       if (ip) return {ip}
     }
-
-    const realIp = headersList.get('x-real-ip')
+    const realIp = header.get('x-real-ip')
     if (realIp) return {ip: realIp}
-
-    // 回退到ipify
-    const response = await fetch('https://api.ipify.org?format=json', {
-      cache: 'no-store',
-    })
-
-    if (response.ok) {
-      const data = await response.json()
-      return {ip: data.ip}
-    }
-
     return {error: '无法获取IP'}
   }
   catch (error) {

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

@@ -0,0 +1,24 @@
+import BreadCrumb from '@/components/bread-crumb'
+import Wrap from '@/components/wrap'
+import {ReactNode} from 'react'
+import Sidebar from './sidebar'
+
+export default function HelpLayout(props: {
+  children: ReactNode
+}) {
+  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 border rounded p-6 min-h-[420px]">
+            {props.children}
+          </div>
+        </div>
+      </Wrap>
+    </main>
+  )
+}

src/app/(home)/help/tutorials/quick-start/page.tsx

@@ -1,68 +1,11 @@
 '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
-  })()
+import QuickStart from '@/components/docs/quick-start.mdx'
+import Markdown from '@/components/markdown'
 
+export default function CollectPage() {
   return (
-    <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>
+    <Markdown>
+      <QuickStart/>
+    </Markdown>
   )
 }

src/app/admin/(dashboard)/_client/charts.tsx

@@ -15,7 +15,7 @@ import {useState} from 'react'
 import {statisticsResourceUsage} from '@/actions/dashboard'
 import {ExtraResp} from '@/lib/api'
 import {toast} from 'sonner'
-import {addDays, format} from 'date-fns'
+import {addDays, compareAsc, format, subDays} from 'date-fns'
 import {Label} from '@/components/ui/label'
 import {ChartConfig, ChartContainer} from '@/components/ui/chart'
 import {CartesianGrid, XAxis, YAxis, Tooltip, Area, AreaChart, Legend} from 'recharts'
@@ -41,17 +41,12 @@ export default function Charts({initialData}: ChartsProps) {
   })
   const handler = form.handleSubmit(
     async (value) => {
-      // 获取当前日期
       const today = new Date()
-      // 计算7天前的日期
-      const sevenDaysAgo = new Date()
-      sevenDaysAgo.setDate(today.getDate() - 3)
+      const sevenDaysAgo = subDays(today, 7)
       const res = {
         resource_no: value.resource_no ?? '',
         create_after: value.create_after ?? sevenDaysAgo,
         create_before: value.create_before ?? today,
-        // create_after: value.create_after ? format(value.create_after, 'yyyy-MM-dd') : format(sevenDaysAgo, 'yyyy-MM-dd'),
-        // create_before: value.create_before ? format(value.create_before, 'yyyy-MM-dd') : format(today, 'yyyy-MM-dd'),
       }
 
       const resp = await statisticsResourceUsage(res)
@@ -69,8 +64,7 @@ export default function Charts({initialData}: ChartsProps) {
         date: item.date,
         count: item.count,
       }))
-      formattedData.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime())
-
+      formattedData.sort((a, b) => compareAsc(a.date, b.date))
       setSubmittedData(formattedData)
     },
   )

src/app/admin/whitelist/page.tsx

@@ -333,7 +333,7 @@ export default function WhitelistPage(props: WhitelistPageProps) {
                     className="shrink-0"
                     theme="outline"
                   >
-                    {wait ? <Loader2 className="w-4 h-4 animate-spin"/> : '获取当前IP'}
+                    {wait ? <Loader2 className="w-4 h-4 animate-spin"/> : '使用当前IP'}
                   </Button>
                 </div>
               )}

src/components/composites/extract/index.tsx

@@ -8,7 +8,7 @@ import {Select, SelectContent, SelectItem, SelectSeparator, SelectTrigger, Selec
 import {Button} from '@/components/ui/button'
 import {useForm, useFormContext} from 'react-hook-form'
 import {Alert, AlertTitle} from '@/components/ui/alert'
-import {Box, CircleAlert, CopyIcon, ExternalLinkIcon, Loader, Plus, Timer} from 'lucide-react'
+import {ArrowRight, Box, CircleAlert, CopyIcon, ExternalLinkIcon, LinkIcon, Loader, Plus, Timer} from 'lucide-react'
 import {memo, ReactNode, useEffect, useRef, useState} from 'react'
 import {useStatus} from '@/lib/states'
 import {allResource} from '@/actions/resource'
@@ -77,9 +77,10 @@ export default function Extract(props: ExtractProps) {
           <AlertTitle className="flex">提取IP前需要将本机IP添加到白名单后才可使用</AlertTitle>
           <Link
             href="/admin/whitelist"
-            className="text-blue-600 hover:text-blue-800 hover:underline font-medium ml-2"
+            className="flex-none text-blue-600 hover:text-blue-800 hover:underline font-medium ml-2 flex gap-0.5 items-center"
           >
-            去添加 →
+            <span>去添加</span>
+            <ArrowRight className="size-4"/>
           </Link>
         </Alert>
 

src/components/composites/payment/payment-modal.tsx

@@ -54,7 +54,7 @@ export function PaymentModal(props: PaymentModalProps) {
     return () => {
       eventSource.close()
     }
-  }, [props.inner_no, props.method, props.onConfirm])
+  }, [props])
 
   return (
     <Dialog

src/components/composites/purchase/long/center.tsx

@@ -10,6 +10,7 @@ import check from '@/components/composites/purchase/_assets/check.svg'
 import {Schema} from '@/components/composites/purchase/long/form'
 import {useFormContext} from 'react-hook-form'
 import {Card} from '@/components/ui/card'
+import {min} from 'date-fns'
 
 export default function Center() {
   const form = useFormContext<Schema>()
@@ -85,18 +86,19 @@ export default function Center() {
                 <Button
                   theme="outline"
                   type="button"
-                  className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg ${
-                    value === minValue ? 'opacity-50 cursor-not-allowed' : ''
-                  }`}
+                  className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
                   onClick={() => form.setValue('quota', Math.max(minValue, value - step))}
                   disabled={value === minValue}>
                   <Minus/>
                 </Button>
-
-                <div className="w-40 h-10 border border-gray-200 rounded-sm flex items-center justify-center">
-                  {value}
-                </div>
-
+                <Input
+                  {...field}
+                  id={id}
+                  type="number"
+                  className="w-40 h-10 border border-gray-200 rounded-sm text-center"
+                  min={minValue}
+                  step={step}
+                />
                 <Button
                   theme="outline"
                   type="button"

src/components/composites/quickStart/index.tsx

@@ -1,18 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,65 +0,0 @@
-'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/docs/quick-start.mdx

@@ -0,0 +1,11 @@
+# 浏览器设置代理教程
+
+打开IE浏览器，选择“设置”，点击“Internet选项”，在弹出的“局域网LAN设置”中，代理服务器的复选框打上勾，并填写从神龙HTTP获取的ip地址及端口号，点击确定，刷新浏览器，浏览器的IP就改变了。
+
+1、打开IE浏览器，选择“设置”；
+
+2、点击“Internet选项”；
+
+3、弹出“Internet选项”弹窗，选择连接—局域网设置；
+
+4、在弹出的“局域网LAN设置”中，代理服务器的复选框打上勾，并填写从神龙HTTP代理获取的ip地址及端口。点击确定，即设置成功了。

src/components/docs/quickStart.mdx

@@ -1,76 +0,0 @@
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-##
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-
-#
-#
-#
-#
-
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#
-#