生产管理系统前端 菜单箭头显示fix

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"
+    )}>
       {/* 左侧导航栏 - 独立滚动 */}
+      {!isMobile && (
         <div className="sidebarScroll">
           <LeftSidebar
             menus={menus}
             activePath={currentPath}
             onNavigate={handleNavigate}
             isMobile={isMobile}
-          isCollapsed={!isMobile && isCollapsed}
+            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>
   );
 }

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>();
+    return 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;
   };
 
   const [expandedMenus, setExpandedMenus] = useState<Set<string>>(getInitialExpandedMenus());
 
-  // 当activePath或menus变化时，自动展开对应的菜单
+  // 不自动展开菜单，由用户手动控制
+
+  // 当侧边栏状态改变时，折叠所有菜单
   useEffect(() => {
-    menus.forEach(menu => {
+    setExpandedMenus(new Set());
-      if (menu.children?.some(child => child.path === activePath)) {
+  }, [isCollapsed]);
-        setExpandedMenus(prev => {
-          const newSet = new Set(prev);
-          newSet.add(menu.id);
-          return newSet;
-        });
-      }
-    });
-  }, [activePath, menus]);
 
   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,11 +114,26 @@ export function LeftSidebar({
           {menus.map((menu) => (
             <div key={menu.id}>
               {/* 一级菜单 */}
-              <button
+              {menu.children ? (
-                onClick={() => toggleMenu(menu.id)}
+                <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 flex items-center justify-between px-3 py-2 rounded-md transition-colors text-sm",
+                        "w-full justify-between text-sm font-normal",
-                  "hover:bg-gray-100 hover:text-gray-900",
                         isCollapsed ? "justify-center px-2 py-3" : "px-3 py-2"
                       )}
                       title={isCollapsed ? menu.label : undefined}
@@ -135,46 +145,72 @@ export function LeftSidebar({
                           </span>
                         )}
                         {!isCollapsed && (
-                    <span className="text-gray-700">{menu.label}</span>
+                          <span>{menu.label}</span>
                         )}
                       </div>
-                {!isCollapsed && menu.children && (
+                      {menu.children && (
-                  expandedMenus.has(menu.id) ? (
+                        isCollapsed ? null : (
-                    <ChevronDown className="w-4 h-4 text-gray-500 flex-shrink-0" />
+                          <ChevronRight
-                  ) : (
+                            className={cn(
-                    <ChevronRight className="w-4 h-4 text-gray-500 flex-shrink-0" />
+                              "h-4 w-4 shrink-0 transition-transform duration-200",
+                              expandedMenus.has(menu.id) && "rotate-90"
+                            )}
+                          />
                         )
                       )}
-              </button>
+                    </Button>
-
+                  </CollapsibleTrigger>
+                  <CollapsibleContent>
                     {/* 二级菜单 */}
-              {!isCollapsed && menu.children && expandedMenus.has(menu.id) && (
+                    {!isCollapsed && (
                       <div className="ml-4 mt-1 space-y-1">
                         {menu.children.map((child) => (
-                    <button
+                          <Button
                             key={child.id}
-                      onClick={() => child.path && onNavigate(child.path)}
+                            variant={activePath === child.path ? "secondary" : "ghost"}
                             className={cn(
-                        "w-full text-left px-3 py-2 rounded-md transition-colors text-xs",
+                              "w-full justify-start text-xs font-normal h-8",
-                        activePath === child.path
+                              activePath === child.path && "bg-muted text-muted-foreground font-medium border-l-2 border-primary"
-                          ? "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"
                             )}
+                            onClick={() => child.path && onNavigate(child.path)}
                           >
                             {child.label}
-                    </button>
+                          </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>
           ))}
         </nav>
       </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 ? "管理" : "管理系统"}

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({
     }
   };
 
+  if (isMobile) {
     return (
       <>
-      {/* 移动端侧边栏遮罩 */}
+        {/* 移动端菜单按钮 */}
-      {isMobile && showMobileSidebar && (
+        <div className="flex items-center justify-between p-4 border-b bg-background">
-        <div
+          <Button
-          className="fixed inset-0 bg-black bg-opacity-50 z-40"
+            variant="ghost"
-          onClick={() => setShowMobileSidebar(false)}
+            size="icon"
-        />
+            onClick={() => setShowMobileSidebar(true)}
-      )}
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
 
-      {/* 主内容区域 - 去掉顶部白色横条 */}
+        {/* 移动端侧边栏 */}
-      <div className="flex-1 flex flex-col">
+        <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>
-    </>
   );
 }

crop-x/src/components/layouts/SideBar/components/lib/utils.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}