麵包屑功能完善

2026-01-07 13:06:49 +08:00
parent d852d7b2ec
commit 8ea1ce1515
14 changed files with 137 additions and 23 deletions
--- a/resources/js/utils/breadcrumb.ts
+++ b/resources/js/utils/breadcrumb.ts
@@ -0,0 +1,100 @@
+import { BreadcrumbItemType } from "@/Components/shared/BreadcrumbNav";
+
+/**
+ * 麵包屑定義對應表
+ * 根據側邊欄層級結構定義基礎麵包屑
+ */
+export const BREADCRUMB_MAP: Record<string, BreadcrumbItemType[]> = {
+    dashboard: [
+        { label: "首頁", isPage: true }
+    ],
+    products: [
+        { label: "首頁", href: "/" },
+        { label: "商品與庫存管理" },
+        { label: "商品資料管理", isPage: true }
+    ],
+    warehouses: [
+        { label: "首頁", href: "/" },
+        { label: "商品與庫存管理" },
+        { label: "倉庫管理", isPage: true }
+    ],
+    vendors: [
+        { label: "首頁", href: "/" },
+        { label: "廠商管理" },
+        { label: "廠商資料管理", isPage: true }
+    ],
+    purchaseOrders: [
+        { label: "首頁", href: "/" },
+        { label: "採購管理" },
+        { label: "管理採購單", isPage: true }
+    ],
+};
+
+/**
+ * 組合麵包屑工具
+ * @param base 基礎路徑名稱 (key of BREADCRUMB_MAP)
+ * @param extra 額外的路徑項目 (例如編輯、詳情頁)
+ */
+export function getBreadcrumbs(base: keyof typeof BREADCRUMB_MAP, extra?: BreadcrumbItemType[]): BreadcrumbItemType[] {
+    const baseItems = JSON.parse(JSON.stringify(BREADCRUMB_MAP[base] || []));
+
+    if (extra && extra.length > 0) {
+        // 如果有額外路徑，基礎路徑的最後一項不應標記為 isPage
+        if (baseItems.length > 0) {
+            baseItems[baseItems.length - 1].isPage = false;
+        }
+        return [...baseItems, ...extra];
+    }
+
+    return baseItems;
+}
+
+/**
+ * 取得「新增」操作的麵包屑
+ */
+export function getCreateBreadcrumbs(base: keyof typeof BREADCRUMB_MAP): BreadcrumbItemType[] {
+    return getBreadcrumbs(base, [{ label: "新增", isPage: true }]);
+}
+
+/**
+ * 取得「編輯」操作的麵包屑
+ */
+export function getEditBreadcrumbs(base: keyof typeof BREADCRUMB_MAP): BreadcrumbItemType[] {
+    return getBreadcrumbs(base, [{ label: "編輯", isPage: true }]);
+}
+
+/**
+ * 取得「詳情」操作的麵包屑
+ */
+export function getShowBreadcrumbs(base: keyof typeof BREADCRUMB_MAP, suffix: string = "詳情"): BreadcrumbItemType[] {
+    return getBreadcrumbs(base, [{ label: suffix, isPage: true }]);
+}
+
+/**
+ * 取得「庫存管理」子頁面的麵包屑
+ * 層級：倉庫管理 > 庫存詳情 (倉庫名) > [功能]
+ */
+export function getInventoryBreadcrumbs(warehouseId: string | number, warehouseName: string, subPageLabel?: string): BreadcrumbItemType[] {
+    const baseItems: BreadcrumbItemType[] = [
+        ...JSON.parse(JSON.stringify(BREADCRUMB_MAP.warehouses || []))
+    ];
+
+    // 修改「倉庫管理」不作為最後一頁
+    if (baseItems.length > 0) {
+        baseItems[baseItems.length - 1].isPage = false;
+    }
+
+    const inventoryDetailItem: BreadcrumbItemType = {
+        label: `庫存管理 (${warehouseName})`,
+        href: `/warehouses/${warehouseId}/inventory`,
+        isPage: !subPageLabel
+    };
+
+    const finalItems = [...baseItems, inventoryDetailItem];
+
+    if (subPageLabel) {
+        finalItems.push({ label: subPageLabel, isPage: true });
+    }
+
+    return finalItems;
+}