调整帮助中心移动端文档布局

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

@@ -2,15 +2,15 @@ import Wrap from '@/components/wrap'
 import {Children} from '@/lib/utils'
 import Sidebar from './sidebar'
 import HomePage from '@/components/home/page'
+import SidebarDrawer from './sidebar-drawer'
 
 export default function DocsLayout(props: Children) {
   return (
-    <HomePage path={[
-      {label: '帮助中心', href: '/docs'},
-    ]}>
-      <Wrap className="flex gap-3">
-        <Sidebar/>
-        <div className="flex-1 bg-white  rounded-lg p-6 min-h-[420px]">
+    <HomePage path={[{label: '帮助中心', href: '/docs'}]}>
+      <Wrap className="flex gap-3 flex-col md:flex-row">
+        <SidebarDrawer/>
+        <Sidebar className="hidden md:block w-68"/>
+        <div className="flex-1 bg-white rounded-lg p-4 md:p-6 min-h-[420px]">
           {props.children}
         </div>
       </Wrap>

src/app/(home)/docs/page.tsx

@@ -1,5 +1,8 @@
 export default function DocsIndexPage() {
   return (
-    <div></div>
+    <div className="text-center text-slate-500 py-12">
+      <p className="text-lg">欢迎来到帮助中心</p>
+      <p className="text-sm mt-2">请从左侧目录选择需要查看的文档</p>
+    </div>
   )
 }

src/app/(home)/docs/sidebar-drawer.tsx

@@ -0,0 +1,37 @@
+'use client'
+import {useState} from 'react'
+import {Menu} from 'lucide-react'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTrigger,
+} from '@/components/ui/drawer'
+import Sidebar from './sidebar'
+
+export default function SidebarDrawer() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="md:hidden flex items-center justify-between bg-white rounded-lg p-3">
+      <span className="font-medium text-slate-900">帮助中心</span>
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerTrigger asChild>
+          <button className="flex items-center gap-2 text-slate-600 hover:text-slate-900 p-1">
+            <Menu size={20}/>
+            <span className="text-sm">目录</span>
+          </button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <div className="mx-auto w-full max-w-sm">
+            <div className="px-4 py-3 border-b">
+              <h3 className="text-lg font-semibold text-slate-900">帮助中心</h3>
+            </div>
+            <div className="px-2 py-2 max-h-[70vh] overflow-y-auto">
+              <Sidebar onClose={() => setOpen(false)}/>
+            </div>
+          </div>
+        </DrawerContent>
+      </Drawer>
+    </div>
+  )
+}

src/app/(home)/docs/sidebar.tsx

@@ -3,10 +3,7 @@ import {useState, useMemo, useCallback} from 'react'
 import Link from 'next/link'
 import {usePathname} from 'next/navigation'
 import {ChevronRight} from 'lucide-react'
-
-type Props = {
-  collapsed?: boolean
-}
+import {merge} from '@/lib/utils'
 
 // 菜单配置
 const MENU_ITEMS = [
@@ -58,7 +55,12 @@ const MENU_ITEMS = [
   },
 ]
 
-export default function Sidebar({collapsed = false}: Props) {
+type Props = {
+  className?: string
+  onClose?: () => void
+}
+
+export default function Sidebar({className, onClose}: Props) {
   const pathname = usePathname()
 
   // 获取当前文档 key
@@ -100,9 +102,7 @@ export default function Sidebar({collapsed = false}: Props) {
 
   return (
     <aside
-      className={`bg-white rounded-lg p-3 transition-all duration-200 shrink-0 ${
-        collapsed ? 'w-20' : 'w-68'
-      }`}
+      className={merge(`bg-white rounded-lg p-3 transition-all duration-200 shrink-0`, className)}
     >
       <nav className="space-y-2">
         {MENU_ITEMS.map(section => (
@@ -110,9 +110,7 @@ export default function Sidebar({collapsed = false}: Props) {
             <div
               onClick={() => toggleGroup(section.group)}
               className={`flex items-center gap-2 cursor-pointer px-3 py-2 rounded-sm transition-colors ${
-                finalExpandedGroups[section.group] && !collapsed
-                  ? 'bg-blue-50'
-                  : 'hover:bg-slate-50'
+                finalExpandedGroups[section.group] && 'bg-blue-50'
               }`}
             >
               <div
@@ -123,15 +121,13 @@ export default function Sidebar({collapsed = false}: Props) {
                 <ChevronRight size={16}/>
               </div>
 
-              {!collapsed && (
-                <div className="text-lg font-semibold text-slate-900">
-                  {section.group}
-                </div>
-              )}
+              <div className="text-lg font-semibold text-slate-900">
+                {section.group}
+              </div>
             </div>
 
             {finalExpandedGroups[section.group] && (
-              <ul className={`mt-1 text-base ${collapsed ? 'hidden' : 'block'}`}>
+              <ul className="mt-1 text-base">
                 {section.items.map((item) => {
                   const isActive = currentKey === item.key
                   const href = getItemHref(item.key)
@@ -140,6 +136,7 @@ export default function Sidebar({collapsed = false}: Props) {
                     <li key={item.key}>
                       <Link
                         href={href}
+                        onClick={() => onClose?.()}
                         className={`block pl-8 py-2 text-base cursor-pointer transition-colors ${
                           isActive
                             ? 'bg-blue-50 font-semibold'