next.js搭建路由01

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

@@ -23,7 +23,8 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet";
 
-interface MenuItem {
+// 菜单项接口定义
+export interface MenuItem {
   title: string;
   url: string;
   description?: string;
@@ -31,110 +32,104 @@ interface MenuItem {
   items?: MenuItem[];
 }
 
-interface Navbar1Props {
-  logo?: {
-    url: string;
-    src: string;
-    alt: string;
+// Logo接口定义
+export interface LogoConfig {
+  url: string;
+  src: string;
+  alt: string;
+  title: string;
+}
+
+// 认证接口定义
+export interface AuthConfig {
+  login: {
     title: string;
+    url: string;
   };
-  menu?: MenuItem[];
-  auth?: {
-    login: {
-      title: string;
-      url: string;
-    };
-    signup: {
-      title: string;
-      url: string;
-    };
+  signup: {
+    title: string;
+    url: string;
   };
 }
 
-const Navbar1 = ({
-  logo = {
-    url: "https://www.shadcnblocks.com",
+// Navbar数据接口定义
+export interface NavbarData {
+  logo?: LogoConfig;
+  menu?: MenuItem[];
+  auth?: AuthConfig;
+}
+
+// Navbar组件Props接口定义
+export interface NavbarProps {
+  navbar?: NavbarData;
+}
+
+// 默认Navbar数据
+const defaultNavbar: NavbarData = {
+  logo: {
+    url: "/",
     src: "https://deifkwefumgah.cloudfront.net/shadcnblocks/block/logos/shadcnblockscom-icon.svg",
-    alt: "logo",
-    title: "Shadcnblocks.com",
+    alt: "Crop-X Logo",
+    title: "Crop-X 智慧农业",
   },
-  menu = [
-    { title: "Home", url: "#" },
+  menu: [
     {
-      title: "Products",
-      url: "#",
-      items: [
-        {
-          title: "Blog",
-          description: "The latest industry news, updates, and info",
-          icon: <Book className="size-5 shrink-0" />,
-          url: "#",
-        },
-        {
-          title: "Company",
-          description: "Our mission is to innovate and empower the world",
-          icon: <Trees className="size-5 shrink-0" />,
-          url: "#",
-        },
-        {
-          title: "Careers",
-          description: "Browse job listing and discover our workspace",
-          icon: <Sunset className="size-5 shrink-0" />,
-          url: "#",
-        },
-        {
-          title: "Support",
-          description:
-            "Get in touch with our support team or visit our community forums",
-          icon: <Zap className="size-5 shrink-0" />,
-          url: "#",
-        },
-      ],
+      title: "智能农机管理系统",
+      url: "/agricultural-machinery",
+      description: "农机档案、实时监控、精准作业管理",
+      icon: <Book className="size-5 shrink-0" />,
     },
     {
-      title: "Resources",
-      url: "#",
-      items: [
-        {
-          title: "Help Center",
-          description: "Get all the answers you need right here",
-          icon: <Zap className="size-5 shrink-0" />,
-          url: "#",
-        },
-        {
-          title: "Contact Us",
-          description: "We are here to help you with any questions you have",
-          icon: <Sunset className="size-5 shrink-0" />,
-          url: "#",
-        },
-        {
-          title: "Status",
-          description: "Check the current status of our services and APIs",
-          icon: <Trees className="size-5 shrink-0" />,
-          url: "#",
-        },
-        {
-          title: "Terms of Service",
-          description: "Our terms and conditions for using our services",
-          icon: <Book className="size-5 shrink-0" />,
-          url: "#",
-        },
-      ],
+      title: "地块信息管理系统",
+      url: "/land-information",
+      description: "地块档案、地图管理、空间分析",
+      icon: <Trees className="size-5 shrink-0" />,
     },
     {
-      title: "Pricing",
-      url: "#",
+      title: "农事操作管理系统",
+      url: "/farming-operation",
+      description: "农事计划、任务管理、操作执行",
+      icon: <Sunset className="size-5 shrink-0" />,
     },
     {
-      title: "Blog",
-      url: "#",
+      title: "农业资产管理系统",
+      url: "/agricultural-asset",
+      description: "基础信息、采购管理、库存管理",
+      icon: <Zap className="size-5 shrink-0" />,
+    },
+    {
+      title: "AI作物模型精准决策系统",
+      url: "/ai-crop-model",
+      description: "数据感知、模型应用、智能决策",
+      icon: <Book className="size-5 shrink-0" />,
+    },
+    {
+      title: "水肥一体化控制系统",
+      url: "/water-fertilizer-control",
+      description: "水肥机管理、智能灌溉、配方管理",
+      icon: <Trees className="size-5 shrink-0" />,
+    },
+    {
+      title: "中心配置管理系统",
+      url: "/central-config",
+      description: "租户管理、用户管理、系统监控",
+      icon: <Sunset className="size-5 shrink-0" />,
     },
   ],
-  auth = {
-    login: { title: "Login", url: "#" },
-    signup: { title: "Sign up", url: "#" },
+  auth: {
+    login: { title: "登录", url: "/login" },
+    signup: { title: "注册", url: "/register" },
   },
-}: Navbar1Props) => {
+};
+
+// 新的Navbar组件，支持外部传入navbar参数
+export function Navbar({ navbar }: NavbarProps) {
+  // 使用外部传入的navbar数据，如果没有则使用默认数据
+  const navbarData = navbar || defaultNavbar;
+  const logo = navbarData.logo || defaultNavbar.logo;
+  const menu = navbarData.menu || defaultNavbar.menu;
+  const auth = navbarData.auth || defaultNavbar.auth;
+
   return (
     <section className="py-4">
       <div className="container">
@@ -224,8 +219,8 @@ const Navbar1 = ({
       </div>
     </section>
   );
-};
-
+}
+  
 const renderMenuItem = (item: MenuItem) => {
   if (item.items) {
     return (
@@ -295,5 +290,3 @@ const SubMenuLink = ({ item }: { item: MenuItem }) => {
     </a>
   );
 };
-
-export  {Navbar1} ;