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

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