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/app-sidebar.tsx
+++ b/crop-x/src/components/app-sidebar.tsx
@@ -1,5 +1,6 @@
 import * as React from "react"
 import { ChevronRight } from "lucide-react"
+import Link from "next/link"

 import { SearchForm } from "@/components/search-form"
 import { VersionSwitcher } from "@/components/version-switcher"
@@ -21,9 +22,28 @@ import {
  SidebarRail,
 } from "@/components/ui/sidebar"

-// This is sample data.
-const data = {
-  versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
+// Define the interface for menu data
+interface MenuItem {
+  title: string
+  url: string
+  isActive?: boolean
+}
+
+interface NavMainItem {
+  title: string
+  url: string
+  icon?: string
+  items: MenuItem[]
+}
+
+interface SidebarData {
+  navMain: NavMainItem[]
+  versions?: string[]
+}
+
+// Default data - used when no external data is provided
+const defaultData: SidebarData = {
+  versions: ["1.0.0", "2.0.0"],
  navMain: [
    {
      title: "Getting Started",
@@ -64,34 +84,6 @@ const data = {
          title: "Styling",
          url: "#",
        },
-        {
-          title: "Optimizing",
-          url: "#",
-        },
-        {
-          title: "Configuring",
-          url: "#",
-        },
-        {
-          title: "Testing",
-          url: "#",
-        },
-        {
-          title: "Authentication",
-          url: "#",
-        },
-        {
-          title: "Deploying",
-          url: "#",
-        },
-        {
-          title: "Upgrading",
-          url: "#",
-        },
-        {
-          title: "Examples",
-          url: "#",
-        },
      ],
    },
    {
@@ -106,76 +98,31 @@ const data = {
          title: "File Conventions",
          url: "#",
        },
-        {
-          title: "Functions",
-          url: "#",
-        },
-        {
-          title: "next.config.js Options",
-          url: "#",
-        },
-        {
-          title: "CLI",
-          url: "#",
-        },
-        {
-          title: "Edge Runtime",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "Architecture",
-      url: "#",
-      items: [
-        {
-          title: "Accessibility",
-          url: "#",
-        },
-        {
-          title: "Fast Refresh",
-          url: "#",
-        },
-        {
-          title: "Next.js Compiler",
-          url: "#",
-        },
-        {
-          title: "Supported Browsers",
-          url: "#",
-        },
-        {
-          title: "Turbopack",
-          url: "#",
-        },
-      ],
-    },
-    {
-      title: "Community",
-      url: "#",
-      items: [
-        {
-          title: "Contribution Guide",
-          url: "#",
-        },
      ],
    },
  ],
 }

-export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+export interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
+  data?: SidebarData
+}
+
+export function AppSidebar({ data, ...props }: AppSidebarProps) {
+  // Use external data if provided, otherwise use default data
+  const sidebarData = data || defaultData
+
  return (
    <Sidebar {...props}>
      <SidebarHeader>
        <VersionSwitcher
-          versions={data.versions}
-          defaultVersion={data.versions[0]}
+          versions={sidebarData.versions || defaultData.versions}
+          defaultVersion={sidebarData.versions?.[0] || defaultData.versions[0]}
        />
        <SearchForm />
      </SidebarHeader>
      <SidebarContent className="gap-0">
        {/* We create a collapsible SidebarGroup for each parent. */}
-        {data.navMain.map((item) => (
+        {sidebarData.navMain.map((item) => (
          <Collapsible
            key={item.title}
            title={item.title}
@@ -188,17 +135,24 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
                className="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
              >
                <CollapsibleTrigger>
-                  {item.title}{" "}
-                  <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                  <div className="flex items-center">
+                    {item.icon && <span className="mr-2">{item.icon}</span>}
+                    {item.title}
+                    <ChevronRight className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+                  </div>
                </CollapsibleTrigger>
              </SidebarGroupLabel>
              <CollapsibleContent>
                <SidebarGroupContent>
                  <SidebarMenu>
-                    {item.items.map((item) => (
-                      <SidebarMenuItem key={item.title}>
-                        <SidebarMenuButton asChild isActive={item.isActive}>
-                          <a href={item.url}>{item.title}</a>
+                    {item.items.map((subItem) => (
+                      <SidebarMenuItem key={subItem.title}>
+                        <SidebarMenuButton asChild isActive={subItem.isActive}>
+                          {subItem.url.startsWith('#') ? (
+                            <a href={subItem.url}>{subItem.title}</a>
+                          ) : (
+                            <Link href={subItem.url}>{subItem.title}</Link>
+                          )}
                        </SidebarMenuButton>
                      </SidebarMenuItem>
                    ))}
--- 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>