409 lines
13 KiB
TypeScript
409 lines
13 KiB
TypeScript
'use client';
|
|
|
|
import { Book, Menu, Sunset, Trees, Zap } from "lucide-react";
|
|
import { Tractor, Map, Clipboard, Package, Brain, Droplets, Settings } from 'lucide-react';
|
|
import { MessageBell } from './components/MessageBell';
|
|
import { UserProfile } from './components/UserProfile';
|
|
import { ThemeToggle } from './ThemeToggle';
|
|
import { AuthProvider } from './components/auth/AuthContext';
|
|
import { useElementHeight } from '@/hooks/useElementHeight';
|
|
import { useViewHeight } from '@/hooks/useViewHeight';
|
|
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 {
|
|
NavigationMenu,
|
|
NavigationMenuContent,
|
|
NavigationMenuItem,
|
|
NavigationMenuLink,
|
|
NavigationMenuList,
|
|
NavigationMenuTrigger,
|
|
} from "@/components/ui/navigation-menu";
|
|
import {
|
|
Sheet,
|
|
SheetContent,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
SheetTrigger,
|
|
} from "@/components/ui/sheet";
|
|
|
|
interface MenuItem {
|
|
title: string;
|
|
url: string;
|
|
description?: string;
|
|
icon?: React.ReactNode;
|
|
items?: MenuItem[];
|
|
}
|
|
|
|
interface Navbar1Props {
|
|
logo?: {
|
|
url: string;
|
|
src: string;
|
|
alt: string;
|
|
title: string;
|
|
};
|
|
menu?: MenuItem[];
|
|
auth?: {
|
|
login: {
|
|
title: string;
|
|
url: string;
|
|
};
|
|
signup: {
|
|
title: string;
|
|
url: string;
|
|
};
|
|
};
|
|
}
|
|
const navbarData = {
|
|
logo: {
|
|
url: "/",
|
|
src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/shadcnblockscom-icon.svg",
|
|
alt: "Crop-X Logo",
|
|
title: "智慧农业生产管理系统",
|
|
},
|
|
menu: [
|
|
{
|
|
title: "智能农机管理系统",
|
|
url: "/agricultural-machinery",
|
|
description: "农机档案、实时监控、精准作业管理",
|
|
icon: <Tractor className="size-5 shrink-0" />,
|
|
},
|
|
{
|
|
title: "地块信息管理系统",
|
|
url: "/land-information",
|
|
description: "地块档案、地图管理、空间分析",
|
|
icon: <Map className="size-5 shrink-0" />,
|
|
},
|
|
{
|
|
title: "农事操作管理系统",
|
|
url: "/farming-operation",
|
|
description: "农事计划、任务管理、操作执行",
|
|
icon: <Clipboard className="size-5 shrink-0" />,
|
|
},
|
|
{
|
|
title: "农业资产管理系统",
|
|
url: "/agricultural-asset",
|
|
description: "基础信息、采购管理、库存管理",
|
|
icon: <Package className="size-5 shrink-0" />,
|
|
},
|
|
{
|
|
title: "AI作物模型精准决策系统",
|
|
url: "/ai-crop-model",
|
|
description: "数据感知、模型应用、智能决策",
|
|
icon: <Brain className="size-5 shrink-0" />,
|
|
},
|
|
{
|
|
title: "水肥一体化控制系统",
|
|
url: "/water-fertilizer-control",
|
|
description: "水肥机管理、智能灌溉、配方管理",
|
|
icon: <Droplets className="size-5 shrink-0" />,
|
|
},
|
|
{
|
|
title: "中心配置管理系统",
|
|
url: "/central-config",
|
|
description: "租户管理、用户管理、系统监控",
|
|
icon: <Settings className="size-5 shrink-0" />,
|
|
},
|
|
{
|
|
title: "API 测试示例",
|
|
url: "/api-example",
|
|
description: "测试和展示 OpenAPI 客户端调用",
|
|
icon: <Brain className="size-5 shrink-0" />,
|
|
},
|
|
],
|
|
auth: {
|
|
login: { title: "登录", url: "/login" },
|
|
signup: { title: "注册", url: "/register" },
|
|
},
|
|
};
|
|
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, // 立即计算高度
|
|
onUpdate: (height: number) => {
|
|
// 更新 Zustand store 中的状态
|
|
const { setNavigatorHeight } = useLayoutStore.getState();
|
|
setNavigatorHeight(height);
|
|
}
|
|
});
|
|
|
|
|
|
// 监听页面高度变化
|
|
useViewHeight();
|
|
|
|
const handleMessageClick = () => {
|
|
// 处理消息点击事件，可以跳转到消息中心页面
|
|
console.log('Navigate to message center');
|
|
};
|
|
|
|
const handleProfileClick = () => {
|
|
// 处理个人中心点击事件
|
|
console.log('Navigate to profile page');
|
|
};
|
|
|
|
return (
|
|
<AuthProvider>
|
|
<section className="py-4" ref={elementRef}>
|
|
<div className="container" style = {containerStyle}>
|
|
{/* Desktop Menu */}
|
|
<nav className="hidden justify-between lg:flex">
|
|
<div className="flex items-center gap-6">
|
|
{/* Logo */}
|
|
|
|
<span className="flex items-center gap-2">
|
|
<div className="flex items-center gap-3 flex-shrink-0">
|
|
<div className="w-10 h-10 bg-green-600 rounded-lg flex items-center justify-center">
|
|
<Tractor className="w-6 h-6 text-white" />
|
|
</div>
|
|
<div>
|
|
<h1 className="text-green-800">智慧农业生产管理系统</h1>
|
|
<p className="text-xs text-muted-foreground">Smart Agriculture Management System</p>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
<div className="flex items-center gap-1 overflow-x-auto flex-1 min-w-0" style={{ maxWidth: '70vw' }}>
|
|
<style jsx>{`
|
|
div::-webkit-scrollbar {
|
|
height: 6px;
|
|
}
|
|
div::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
div::-webkit-scrollbar-thumb {
|
|
background-color: #d1d5db;
|
|
border-radius: 3px;
|
|
}
|
|
div::-webkit-scrollbar-thumb:hover {
|
|
background-color: #9ca3af;
|
|
}
|
|
div {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #d1d5db transparent;
|
|
}
|
|
.navigation-menu-container {
|
|
max-width: 70vw;
|
|
}
|
|
`}</style>
|
|
<NavigationMenu>
|
|
<NavigationMenuList className="flex gap-1 min-w-max">
|
|
{menu.map((item) => renderMenuItem(item, isMenuActive))}
|
|
</NavigationMenuList>
|
|
</NavigationMenu>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2" style = {{alignItems:"center"}}>
|
|
<ThemeToggle />
|
|
<MessageBell onMessageClick={handleMessageClick} />
|
|
<UserProfile onProfileClick={handleProfileClick} />
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Mobile Menu */}
|
|
<div className="block lg:hidden">
|
|
<div className="flex items-center justify-between">
|
|
{/* Logo */}
|
|
<a href={logo.url} className="flex items-center gap-2">
|
|
<img
|
|
src={logo.src}
|
|
className="max-h-8 dark:invert"
|
|
alt={logo.alt}
|
|
/>
|
|
</a>
|
|
<Sheet>
|
|
<SheetTrigger asChild>
|
|
<Button variant="outline" size="icon">
|
|
<Menu className="size-4" />
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent className="overflow-y-auto">
|
|
<SheetHeader>
|
|
<SheetTitle>
|
|
<a href={logo.url} className="flex items-center gap-2">
|
|
<img
|
|
src={logo.src}
|
|
className="max-h-8 dark:invert"
|
|
alt={logo.alt}
|
|
/>
|
|
</a>
|
|
</SheetTitle>
|
|
</SheetHeader>
|
|
<div className="flex flex-col gap-6 p-4">
|
|
{/* 简化移动端菜单，不再使用 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">
|
|
<ThemeToggle />
|
|
</div>
|
|
<div className="flex justify-center">
|
|
<MessageBell onMessageClick={handleMessageClick} />
|
|
</div>
|
|
<div className="flex justify-center">
|
|
<UserProfile onProfileClick={handleProfileClick} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</AuthProvider>
|
|
);
|
|
};
|
|
|
|
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}
|
|
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
|
|
${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, 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 p-2 rounded-md transition-colors
|
|
${isMenuActive(item.url)
|
|
? 'bg-primary/10 text-primary'
|
|
: 'hover:bg-muted hover:text-accent-foreground'
|
|
}
|
|
`}
|
|
>
|
|
{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 };
|