麵包屑功能完善

resources/js/Layouts/AuthenticatedLayout.tsx

@@ -17,6 +17,7 @@ import { Toaster } from "sonner";
 import { useState, useEffect } from "react";
 import { Link, usePage } from "@inertiajs/react";
 import { cn } from "@/lib/utils";
+import BreadcrumbNav, { BreadcrumbItemType } from "@/Components/shared/BreadcrumbNav";
 
 interface MenuItem {
     id: string;
@@ -26,7 +27,13 @@ interface MenuItem {
     children?: MenuItem[];
 }
 
-export default function AuthenticatedLayout({ children }: { children: React.ReactNode }) {
+export default function AuthenticatedLayout({
+    children,
+    breadcrumbs
+}: {
+    children: React.ReactNode,
+    breadcrumbs?: BreadcrumbItemType[]
+}) {
     const { url } = usePage();
     const [isCollapsed, setIsCollapsed] = useState(() => {
         if (typeof window !== "undefined") {
@@ -313,6 +320,11 @@ export default function AuthenticatedLayout({ children }: { children: React.Reac
                 "pt-16" // Always allow space for header
             )}>
                 <div className="relative">
+                    <div className="container mx-auto px-6 pt-6 max-w-7xl">
+                        {breadcrumbs && breadcrumbs.length > 1 && (
+                            <BreadcrumbNav items={breadcrumbs} className="mb-2" />
+                        )}
+                    </div>
                     {children}
                 </div>
                 <Toaster richColors closeButton position="top-center" />