生产管理系统前端 - 1.修改了左侧菜单的icon 2. 顶部菜单的绿色显示 test版本

crop-x/src/components/layouts/Navbar.tsx

@@ -8,12 +8,15 @@ import { ThemeToggle } from './ThemeToggle';
 import { AuthProvider } from './components/auth/AuthContext';
 import { useElementHeight } from '@/hooks/useElementHeight';
 import { useViewHeight } from '@/hooks/useViewHeight';
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
+import { usePathname } from 'next/navigation';
+import { useRef, useEffect, useState } from 'react';
+// 注释掉 Accordion 相关导入，因为不再需要二级菜单
+// import {
+//   Accordion,
+//   AccordionContent,
+//   AccordionItem,
+//   AccordionTrigger,
+// } from "@/components/ui/accordion";
 import { useLayoutStore } from '@/stores/useLayoutStore';
 import { Button } from "@/components/ui/button";
 import {
@@ -119,10 +122,20 @@ const Navbar1 = () => {
     const logo = navbarData.logo
     const menu = navbarData.menu
     const auth = navbarData.auth
+    const pathname = usePathname()
     const containerStyle = {
       maxWidth:"100%",marginLeft:"0px",marginRight:"0px",paddingLeft:"1rem",paddingRight:"0rem"
     }
 
+  // 检查当前路径是否匹配菜单项
+  const isMenuActive = (url: string) => {
+    // 精确匹配
+    if (pathname === url) return true;
+    // 检查是否是该菜单下的子路径
+    if (pathname.startsWith(url + '/')) return true;
+    return false;
+  }
+
   // 使用自定义 Hook 计算高度
   const { elementRef, updateHeight } = useElementHeight({
     immediate: true, // 立即计算高度
@@ -133,6 +146,7 @@ const Navbar1 = () => {
     }
   });
 
+  
   // 监听页面高度变化
   useViewHeight();
 
@@ -191,8 +205,7 @@ const Navbar1 = () => {
         `}</style>
               <NavigationMenu>
                 <NavigationMenuList className="flex gap-1 min-w-max">
-
-                  {menu.map((item) => renderMenuItem(item))}
+                  {menu.map((item) => renderMenuItem(item, isMenuActive))}
                 </NavigationMenuList>
               </NavigationMenu>
             </div>
@@ -234,13 +247,10 @@ const Navbar1 = () => {
                   </SheetTitle>
                 </SheetHeader>
                 <div className="flex flex-col gap-6 p-4">
-                  <Accordion
-                    type="single"
-                    collapsible
-                    className="flex w-full flex-col gap-4"
-                  >
-                    {menu.map((item) => renderMobileMenuItem(item))}
-                  </Accordion>
+                  {/* 简化移动端菜单，不再使用 Accordion */}
+                  <div className="flex w-full flex-col gap-4">
+                    {menu.map((item) => renderMobileMenuItem(item, isMenuActive))}
+                  </div>
 
                   <div className="flex flex-col gap-3">
                     <div className="flex justify-center">
@@ -264,78 +274,129 @@ const Navbar1 = () => {
   );
 };
 
-const renderMenuItem = (item: MenuItem) => {
-  if (item.items) {
-    return (
-      <NavigationMenuItem key={item.title}>
-        <NavigationMenuTrigger className="whitespace-nowrap">{item.title}</NavigationMenuTrigger>
-        <NavigationMenuContent className="bg-popover text-popover-foreground">
-          {item.items.map((subItem) => (
-            
-            <NavigationMenuLink asChild key={subItem.title} className="w-80">
-              <SubMenuLink item={subItem} />
-            </NavigationMenuLink>
-          ))}
-        </NavigationMenuContent>
-      </NavigationMenuItem>
-    );
-  }
+const renderMenuItem = (item: MenuItem, isMenuActive: (url: string) => boolean) => {
+  // 注释掉二级菜单相关代码，项目不需要二级菜单
+  // if (item.items) {
+  //   return (
+  //     <NavigationMenuItem key={item.title}>
+  //       <NavigationMenuTrigger className="whitespace-nowrap">{item.title}</NavigationMenuTrigger>
+  //       <NavigationMenuContent className="bg-popover text-popover-foreground">
+  //         {item.items.map((subItem) => (
+  //
+  //           <NavigationMenuLink asChild key={subItem.title} className="w-80">
+  //             <SubMenuLink item={subItem} />
+  //           </NavigationMenuLink>
+  //         ))}
+  //       </NavigationMenuContent>
+  //     </NavigationMenuItem>
+  //   );
+  // }
 
   return (
     <NavigationMenuItem key={item.title}>
       <NavigationMenuLink
         href={item.url}
-        className="bg-background hover:bg-muted hover:text-accent-foreground group inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors gap-2 whitespace-nowrap"
+        data-menu-item="true"
+        data-menu-url={item.url}
+        className={`
+          inline-flex h-10 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium gap-2 whitespace-nowrap relative
+          ${isMenuActive(item.url)
+            ? 'bg-primary/10'
+            : 'bg-background hover:bg-muted hover:text-accent-foreground'
+          }
+          [&:not([data-active])]:text-foreground
+        `}
       >
-        {item.icon && <span className="shrink-0">{item.icon}</span>}
-        {item.title}
+        {item.icon && (
+          <span className={`
+            shrink-0
+            ${isMenuActive(item.url)
+              ? 'text-primary'
+              : 'text-muted-foreground'
+            }
+            hover:text-primary
+            [&.group-data-[state=open]]:text-muted-foreground
+          `}>
+            {item.icon}
+          </span>
+        )}
+        <div className="relative">
+          <span className={isMenuActive(item.url) ? 'text-primary' : ''}>
+            {item.title}
+          </span>
+          {/* 激活菜单项下方的横条 */}
+          {isMenuActive(item.url) && (
+            <div className="absolute -bottom-1 left-0 right-0 h-[0.5px] bg-primary"></div>
+          )}
+        </div>
       </NavigationMenuLink>
     </NavigationMenuItem>
   );
 };
 
-const renderMobileMenuItem = (item: MenuItem) => {
-  if (item.items) {
-    return (
-      <AccordionItem key={item.title} value={item.title} className="border-b-0">
-        <AccordionTrigger className="text-md py-0 font-semibold hover:no-underline gap-2">
-          {item.icon && <span className="shrink-0">{item.icon}</span>}
-          {item.title}
-        </AccordionTrigger>
-        <AccordionContent className="mt-2">
-          {item.items.map((subItem) => (
-            <SubMenuLink key={subItem.title} item={subItem} />
-          ))}
-        </AccordionContent>
-      </AccordionItem>
-    );
-  }
+const renderMobileMenuItem = (item: MenuItem, isMenuActive: (url: string) => boolean) => {
+  // 注释掉移动端二级菜单相关代码
+  // if (item.items) {
+  //   return (
+  //     <AccordionItem key={item.title} value={item.title} className="border-b-0">
+  //       <AccordionTrigger className="text-md py-0 font-semibold hover:no-underline gap-2">
+  //         {item.icon && <span className="shrink-0">{item.icon}</span>}
+  //         {item.title}
+  //       </AccordionTrigger>
+  //       <AccordionContent className="mt-2">
+  //         {item.items.map((subItem) => (
+  //           <SubMenuLink key={subItem.title} item={subItem} />
+  //         ))}
+  //       </AccordionContent>
+  //     </AccordionItem>
+  //   );
+  // }
 
-  return (
-    <a key={item.title} href={item.url} className="text-md font-semibold flex items-center gap-2">
-      {item.icon && <span className="shrink-0">{item.icon}</span>}
-      {item.title}
-    </a>
-  );
-};
-
-const SubMenuLink = ({ item }: { item: MenuItem }) => {
   return (
     <a
-      className="hover:bg-muted hover:text-accent-foreground flex min-w-80 select-none flex-row gap-4 rounded-md p-3 leading-none no-underline outline-none transition-colors"
+      key={item.title}
       href={item.url}
+      className={`
+        text-md font-semibold flex items-center gap-2 p-2 rounded-md transition-colors
+        ${isMenuActive(item.url)
+          ? 'bg-primary/10 text-primary'
+          : 'hover:bg-muted hover:text-accent-foreground'
+        }
+      `}
     >
-      <div className="text-foreground">{item.icon}</div>
-      <div>
-        <div className="text-sm font-semibold">{item.title}</div>
-        {item.description && (
-          <p className="text-muted-foreground text-sm leading-snug">
-            {item.description}
-          </p>
-        )}
-      </div>
+      {item.icon && (
+        <span className={`
+          shrink-0
+          ${isMenuActive(item.url) ? 'text-primary' : 'text-muted-foreground'}
+        `}>
+          {item.icon}
+        </span>
+      )}
+      <span className={isMenuActive(item.url) ? 'text-primary' : ''}>
+        {item.title}
+      </span>
     </a>
   );
 };
 
+// 注释掉 SubMenuLink 组件，因为不再需要二级菜单
+// const SubMenuLink = ({ item }: { item: MenuItem }) => {
+//   return (
+//     <a
+//       className="hover:bg-muted hover:text-accent-foreground flex min-w-80 select-none flex-row gap-4 rounded-md p-3 leading-none no-underline outline-none transition-colors"
+//       href={item.url}
+//     >
+//       <div className="text-foreground">{item.icon}</div>
+//       <div>
+//         <div className="text-sm font-semibold">{item.title}</div>
+//         {item.description && (
+//           <p className="text-muted-foreground text-sm leading-snug">
+//             {item.description}
+//           </p>
+//         )}
+//       </div>
+//     </a>
+//   );
+// };
+
 export { Navbar1 };