next.js搭建路由01

2025-10-20 16:19:41 +08:00
parent 727ec66189
commit 5c783c73e1
333 changed files with 7568 additions and 7091 deletions
--- a/crop-x/src/components/layouts/Main.tsx
+++ b/crop-x/src/components/layouts/Main.tsx
@@ -8,7 +8,7 @@ function Main() {
      <div className = "parent-flex">
        <Navbar1></Navbar1>
        <div>
-        <Page></Page>
+        <Page ></Page>
        </div>
      </div>
  )
--- a/crop-x/src/components/layouts/Navbar.tsx
+++ b/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} ;
--- a/crop-x/src/components/layouts/SideBar/SideBar.tsx
+++ b/crop-x/src/components/layouts/SideBar/SideBar.tsx
@@ -1,4 +1,8 @@
-import { AppSidebar } from "@/components/app-sidebar"
+"use client"
+import { ReactNode, useEffect, useState } from 'react'
+import { usePathname } from 'next/navigation'
+import { AppSidebar, AppSidebarProps, SidebarData } from "@/components/app-sidebar"
+
 import {
  Breadcrumb,
  BreadcrumbItem,
@@ -13,31 +17,95 @@ import {
  SidebarProvider,
  SidebarTrigger,
 } from "@/components/ui/sidebar"
+import React from 'react'
+export interface SideBarProps {
+  children: ReactNode
+  data?: AppSidebarProps['data']
+}
+
+export default function SideBar({ children, data }: SideBarProps) {
+  const pathname = usePathname()
+  const [breadcrumbItems, setBreadcrumbItems] = useState<Array<{ title: string, url?: string, isPage?: boolean }>>([])
+
+  useEffect(() => {
+    if (!data || !data.navMain) return
+
+    const generateBreadcrumb = () => {
+      const items = [{ title: "首页", url: "/" }]
+
+      // 解析当前路径
+      const pathSegments = pathname.split('/').filter(Boolean)
+
+      if (pathSegments.length === 0) {
+        // 首页
+        items.push({ title: "首页", isPage: true })
+      } else if (pathSegments[0] === 'central-config') {
+        // 中心配置模块
+        items.push({ title: "中心配置", url: "/central-config" })
+
+        if (pathSegments.length === 1) {
+          // 中心配置主页
+          items.push({ title: "中心配置", isPage: true })
+        } else if (pathSegments.length >= 2) {
+          // 查找匹配的一级菜单
+          const mainModule = data.navMain.find(item =>
+            item.url === `/central-config/${pathSegments[1]}`
+          )
+
+          if (mainModule) {
+            items.push({ title: mainModule.title, url: mainModule.url })
+
+            if (pathSegments.length === 2) {
+              // 一级菜单页面
+              items.push({ title: mainModule.title, isPage: true })
+            } else if (pathSegments.length >= 3) {
+              // 查找匹配的二级菜单
+              const subModule = mainModule.items.find(item =>
+                item.url === pathname
+              )
+
+              if (subModule) {
+                items.push({ title: subModule.title, isPage: true })
+              }
+            }
+          }
+        }
+      }
+
+      setBreadcrumbItems(items)
+    }
+
+    generateBreadcrumb()
+  }, [pathname, data])

-export default function Page() {
  return (
    <SidebarProvider>
-      <AppSidebar />
+      <AppSidebar data={data} />
      <SidebarInset>
        <header className="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
          <SidebarTrigger className="-ml-1" />
          <Separator orientation="vertical" className="mr-2 h-4" />
          <Breadcrumb>
            <BreadcrumbList>
-              <BreadcrumbItem className="hidden md:block">
-                <BreadcrumbLink href="#">
-                  Building Your Application
-                </BreadcrumbLink>
-              </BreadcrumbItem>
-              <BreadcrumbSeparator className="hidden md:block" />
-              <BreadcrumbItem>
-                <BreadcrumbPage>Data Fetching</BreadcrumbPage>
-              </BreadcrumbItem>
+              {breadcrumbItems.map((item, index) => (
+                <React.Fragment key={index}>
+                  {index > 0 && <BreadcrumbSeparator className="hidden md:block" />}
+                  <BreadcrumbItem className="hidden md:block">
+                    {item.isPage ? (
+                      <BreadcrumbPage>{item.title}</BreadcrumbPage>
+                    ) : item.url ? (
+                      <BreadcrumbLink href={item.url}>{item.title}</BreadcrumbLink>
+                    ) : (
+                      <span>{item.title}</span>
+                    )}
+                  </BreadcrumbItem>
+                </React.Fragment>
+              ))}
            </BreadcrumbList>
          </Breadcrumb>
        </header>
        <div className="flex flex-1 flex-col gap-4 p-4">
-          我的页面内容
+          {children}
        </div>
      </SidebarInset>
    </SidebarProvider>