From 4f3beb2568647e82a03e3255287693e0c7f9db5e Mon Sep 17 00:00:00 2001
From: peng <cavin@maimaiplanet.com>
Date: Thu, 23 Oct 2025 15:13:33 +0800
Subject: [PATCH] =?UTF-8?q?=E7=94=9F=E4=BA=A7=E7=AE=A1=E7=90=86=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F=E5=89=8D=E7=AB=AF=20=E8=8F=9C=E5=8D=95=E7=AE=AD?=
 =?UTF-8?q?=E5=A4=B4=E6=98=BE=E7=A4=BAfix?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/layouts/SideBar/SideBarOld.tsx |  42 +++-
 .../SideBar/components/LeftSidebar.tsx        | 190 +++++++++++-------
 .../SideBar/components/MainContent.tsx        |  49 +++--
 .../layouts/SideBar/components/lib/utils.ts   |   6 -
 4 files changed, 180 insertions(+), 107 deletions(-)
 delete mode 100644 crop-x/src/components/layouts/SideBar/components/lib/utils.ts

diff --git a/crop-x/src/components/layouts/SideBar/SideBarOld.tsx b/crop-x/src/components/layouts/SideBar/SideBarOld.tsx
index e123baa..d3730ea 100644
--- a/crop-x/src/components/layouts/SideBar/SideBarOld.tsx
+++ b/crop-x/src/components/layouts/SideBar/SideBarOld.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
 import { LeftSidebar } from './components/LeftSidebar';
 import { MainContent } from './components/MainContent';
+import { cn } from '@/lib/utils';
 
 // 菜单项数据结构定义
 interface NavItem {
@@ -230,18 +231,23 @@ export function SideBarOld({
     router.push(path);
   };
   return (
-    <div className="flex h-full bg-gray-100">
+    <div className={cn(
+      "flex h-full bg-background",
+      "min-h-screen"
+    )}>
       {/* 左侧导航栏 - 独立滚动 */}
-      <div className="sidebarScroll">
-        <LeftSidebar
-          menus={menus}
-          activePath={currentPath}
-          onNavigate={handleNavigate}
-          isMobile={isMobile}
-          isCollapsed={!isMobile && isCollapsed}
-          onToggleCollapse={() => setIsCollapsed(!isCollapsed)}
-        />
-      </div>
+      {!isMobile && (
+        <div className="sidebarScroll">
+          <LeftSidebar
+            menus={menus}
+            activePath={currentPath}
+            onNavigate={handleNavigate}
+            isMobile={isMobile}
+            isCollapsed={isCollapsed}
+            onToggleCollapse={() => setIsCollapsed(!isCollapsed)}
+          />
+        </div>
+      )}
 
       {/* 右侧主内容 - 独立滚动 */}
       <div className="flex-1 contentScroll">
@@ -253,6 +259,20 @@ export function SideBarOld({
           {children}
         </MainContent>
       </div>
+
+      {/* 移动端侧边栏 */}
+      {isMobile && (
+        <div className="fixed inset-y-0 left-0 z-50 w-64 sidebarScroll">
+          <LeftSidebar
+            menus={menus}
+            activePath={currentPath}
+            onNavigate={handleNavigate}
+            isMobile={isMobile}
+            isCollapsed={false}
+            onToggleCollapse={() => {}}
+          />
+        </div>
+      )}
     </div>
   );
 }
\ No newline at end of file
diff --git a/crop-x/src/components/layouts/SideBar/components/LeftSidebar.tsx b/crop-x/src/components/layouts/SideBar/components/LeftSidebar.tsx
index cfc14f7..b8530b1 100644
--- a/crop-x/src/components/layouts/SideBar/components/LeftSidebar.tsx
+++ b/crop-x/src/components/layouts/SideBar/components/LeftSidebar.tsx
@@ -3,6 +3,13 @@
 import { useState, useEffect } from 'react';
 import { ChevronDown, ChevronLeft, ChevronRight, Menu, X } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
 
 interface MenuItem {
   id: string;
@@ -32,35 +39,19 @@ export function LeftSidebar({
   isCollapsed = false,
   onToggleCollapse
 }: LeftSidebarProps) {
-  // 根据activePath自动展开包含该路径的菜单
+  // 初始状态下所有菜单都折叠
   const getInitialExpandedMenus = () => {
-    const expanded = new Set<string>();
-    menus.forEach(menu => {
-      if (menu.children?.some(child => child.path === activePath)) {
-        expanded.add(menu.id);
-      }
-    });
-    // 如果没有匹配的，默认展开第一个
-    if (expanded.size === 0 && menus.length > 0) {
-      expanded.add(menus[0].id);
-    }
-    return expanded;
+    return new Set<string>();
   };
 
   const [expandedMenus, setExpandedMenus] = useState<Set<string>>(getInitialExpandedMenus());
 
-  // 当activePath或menus变化时，自动展开对应的菜单
+  // 不自动展开菜单，由用户手动控制
+
+  // 当侧边栏状态改变时，折叠所有菜单
   useEffect(() => {
-    menus.forEach(menu => {
-      if (menu.children?.some(child => child.path === activePath)) {
-        setExpandedMenus(prev => {
-          const newSet = new Set(prev);
-          newSet.add(menu.id);
-          return newSet;
-        });
-      }
-    });
-  }, [activePath, menus]);
+    setExpandedMenus(new Set());
+  }, [isCollapsed]);
 
   const toggleMenu = (menuId: string) => {
     setExpandedMenus(prev => {
@@ -77,35 +68,39 @@ export function LeftSidebar({
   return (
     <div
       className={cn(
-        "bg-white border-r border-gray-200 transition-all duration-300 flex flex-col h-full",
+        "bg-background border-r transition-all duration-300 flex flex-col h-full",
         isMobile ? "fixed inset-y-0 left-0 z-50" : "relative",
         isCollapsed ? "w-16" : "w-64"
       )}
     >
       {/* 头部 - 缩小高度 */}
-      <div className="px-2 py-1 border-b border-gray-200">
+      <div className="px-2 py-1 border-b">
         <div className="flex items-center justify-between">
           <h2 className={cn(
-            "font-medium text-gray-900 text-sm transition-all duration-300",
+            "font-medium text-sm transition-all duration-300",
             isCollapsed ? "hidden" : "block"
           )}>
             导航菜单
           </h2>
           {isMobile ? (
-            <X className="w-4 h-4 text-gray-600" />
+            <Button variant="ghost" size="icon" className="h-8 w-8">
+              <X className="w-4 h-4" />
+            </Button>
           ) : (
             /* 根据侧边栏状态显示不同按钮 */
-            <button
+            <Button
+              variant="ghost"
+              size="icon"
               onClick={onToggleCollapse}
-              className="p-1 rounded hover:bg-gray-100 transition-colors"
+              className="h-8 w-8"
               title={isCollapsed ? "展开菜单" : "收起菜单"}
             >
               {isCollapsed ? (
-                <ChevronRight className="w-4 h-4 text-gray-600" />
+                <ChevronRight className="w-4 h-4" />
               ) : (
-                <ChevronLeft className="w-4 h-4 text-gray-600" />
+                <ChevronLeft className="w-4 h-4" />
               )}
-            </button>
+            </Button>
           )}
         </div>
       </div>
@@ -119,52 +114,93 @@ export function LeftSidebar({
           {menus.map((menu) => (
             <div key={menu.id}>
               {/* 一级菜单 */}
-              <button
-                onClick={() => toggleMenu(menu.id)}
-                className={cn(
-                  "w-full flex items-center justify-between px-3 py-2 rounded-md transition-colors text-sm",
-                  "hover:bg-gray-100 hover:text-gray-900",
-                  isCollapsed ? "justify-center px-2 py-3" : "px-3 py-2"
-                )}
-                title={isCollapsed ? menu.label : undefined}
-              >
-                <div className="flex items-center gap-2">
-                  {menu.icon && (
-                    <span className="flex-shrink-0">
-                      {menu.icon}
-                    </span>
-                  )}
-                  {!isCollapsed && (
-                    <span className="text-gray-700">{menu.label}</span>
-                  )}
-                </div>
-                {!isCollapsed && menu.children && (
-                  expandedMenus.has(menu.id) ? (
-                    <ChevronDown className="w-4 h-4 text-gray-500 flex-shrink-0" />
-                  ) : (
-                    <ChevronRight className="w-4 h-4 text-gray-500 flex-shrink-0" />
-                  )
-                )}
-              </button>
-
-              {/* 二级菜单 */}
-              {!isCollapsed && menu.children && expandedMenus.has(menu.id) && (
-                <div className="ml-4 mt-1 space-y-1">
-                  {menu.children.map((child) => (
-                    <button
-                      key={child.id}
-                      onClick={() => child.path && onNavigate(child.path)}
+              {menu.children ? (
+                <Collapsible
+                  open={expandedMenus.has(menu.id)}
+                  onOpenChange={(open) => {
+                    if (open) {
+                      setExpandedMenus(prev => new Set(prev).add(menu.id));
+                    } else {
+                      setExpandedMenus(prev => {
+                        const newSet = new Set(prev);
+                        newSet.delete(menu.id);
+                        return newSet;
+                      });
+                    }
+                  }}
+                >
+                  <CollapsibleTrigger asChild>
+                    <Button
+                      variant="ghost"
                       className={cn(
-                        "w-full text-left px-3 py-2 rounded-md transition-colors text-xs",
-                        activePath === child.path
-                          ? "bg-green-50 text-green-700 font-medium border-l-2 border-green-600"
-                          : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
+                        "w-full justify-between text-sm font-normal",
+                        isCollapsed ? "justify-center px-2 py-3" : "px-3 py-2"
                       )}
+                      title={isCollapsed ? menu.label : undefined}
                     >
-                      {child.label}
-                    </button>
-                  ))}
-                </div>
+                      <div className="flex items-center gap-2">
+                        {menu.icon && (
+                          <span className="flex-shrink-0">
+                            {menu.icon}
+                          </span>
+                        )}
+                        {!isCollapsed && (
+                          <span>{menu.label}</span>
+                        )}
+                      </div>
+                      {menu.children && (
+                        isCollapsed ? null : (
+                          <ChevronRight
+                            className={cn(
+                              "h-4 w-4 shrink-0 transition-transform duration-200",
+                              expandedMenus.has(menu.id) && "rotate-90"
+                            )}
+                          />
+                        )
+                      )}
+                    </Button>
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
+                    {/* 二级菜单 */}
+                    {!isCollapsed && (
+                      <div className="ml-4 mt-1 space-y-1">
+                        {menu.children.map((child) => (
+                          <Button
+                            key={child.id}
+                            variant={activePath === child.path ? "secondary" : "ghost"}
+                            className={cn(
+                              "w-full justify-start text-xs font-normal h-8",
+                              activePath === child.path && "bg-muted text-muted-foreground font-medium border-l-2 border-primary"
+                            )}
+                            onClick={() => child.path && onNavigate(child.path)}
+                          >
+                            {child.label}
+                          </Button>
+                        ))}
+                      </div>
+                    )}
+                  </CollapsibleContent>
+                </Collapsible>
+              ) : (
+                <Button
+                  variant="ghost"
+                  className={cn(
+                    "w-full justify-start text-sm font-normal",
+                    isCollapsed ? "justify-center px-2 py-3" : "px-3 py-2"
+                  )}
+                  title={isCollapsed ? menu.label : undefined}
+                >
+                  <div className="flex items-center gap-2">
+                    {menu.icon && (
+                      <span className="flex-shrink-0">
+                        {menu.icon}
+                      </span>
+                    )}
+                    {!isCollapsed && (
+                      <span>{menu.label}</span>
+                    )}
+                  </div>
+                </Button>
               )}
             </div>
           ))}
@@ -172,9 +208,9 @@ export function LeftSidebar({
       </div>
 
       {/* 底部 */}
-      <div className="p-4 border-t border-gray-200">
+      <div className="p-4 border-t">
         <div className={cn(
-          "text-xs text-gray-500",
+          "text-xs text-muted-foreground",
           isCollapsed ? "text-center" : "text-left"
         )}>
           {isCollapsed ? "管理" : "管理系统"}
diff --git a/crop-x/src/components/layouts/SideBar/components/MainContent.tsx b/crop-x/src/components/layouts/SideBar/components/MainContent.tsx
index a4efaf6..38ef028 100644
--- a/crop-x/src/components/layouts/SideBar/components/MainContent.tsx
+++ b/crop-x/src/components/layouts/SideBar/components/MainContent.tsx
@@ -3,6 +3,8 @@
 import { useState } from 'react';
 import { ChevronLeft, ChevronRight, X } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 
 interface MainContentProps {
   children: React.ReactNode;
@@ -27,22 +29,43 @@ export function MainContent({
     }
   };
 
-  return (
-    <>
-      {/* 移动端侧边栏遮罩 */}
-      {isMobile && showMobileSidebar && (
-        <div
-          className="fixed inset-0 bg-black bg-opacity-50 z-40"
-          onClick={() => setShowMobileSidebar(false)}
-        />
-      )}
+  if (isMobile) {
+    return (
+      <>
+        {/* 移动端菜单按钮 */}
+        <div className="flex items-center justify-between p-4 border-b bg-background">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setShowMobileSidebar(true)}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
 
-      {/* 主内容区域 - 去掉顶部白色横条 */}
-      <div className="flex-1 flex flex-col">
-        <div className="p-6">
+        {/* 移动端侧边栏 */}
+        <Sheet open={showMobileSidebar} onOpenChange={setShowMobileSidebar}>
+          <SheetContent side="left" className="p-0 w-64">
+            {/* 这里应该渲染LeftSidebar内容，但需要通过props传递 */}
+            <div className="p-4">
+              <p className="text-muted-foreground">侧边栏内容</p>
+            </div>
+          </SheetContent>
+        </Sheet>
+
+        {/* 主内容区域 */}
+        <div className="flex-1 p-6 bg-background">
           {children}
         </div>
+      </>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col bg-background">
+      <div className="p-6">
+        {children}
       </div>
-    </>
+    </div>
   );
 }
\ No newline at end of file
diff --git a/crop-x/src/components/layouts/SideBar/components/lib/utils.ts b/crop-x/src/components/layouts/SideBar/components/lib/utils.ts
deleted file mode 100644
index 1a860ee..0000000
--- a/crop-x/src/components/layouts/SideBar/components/lib/utils.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}
\ No newline at end of file