next.js搭建路由01

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>