feat: 面包屑导航

src/router/index.ts

@@ -1,8 +1,37 @@
 import { createRouter, createWebHistory, RouteRecordRaw, createWebHashHistory } from "vue-router"
+import type { RouteLocationNormalizedLoaded, RouteLocationRaw } from "vue-router"
 import store from "@/store"
 import { Https } from "@/tool/https"
 import { getCookie, setCookie } from "@/tool/cookie"
 
+type SellerRouteMetaValue<T> = T | ((route: RouteLocationNormalizedLoaded) => T)
+type SellerBreadcrumbItem = {
+	title?: SellerRouteMetaValue<string>
+	titleKey?: SellerRouteMetaValue<string>
+	to?: SellerRouteMetaValue<RouteLocationRaw>
+}
+
+const myListingsBreadcrumb: SellerBreadcrumbItem = {
+	title: "My Listings",
+	to: { name: "myListingsIndex" }
+}
+const selectCollectionBreadcrumb: SellerBreadcrumbItem = {
+	title: "Select Collection",
+	to: { name: "myListingsSelect" }
+}
+const selectSketchBreadcrumb: SellerBreadcrumbItem = {
+	title: "Select Sketch"
+}
+const editListingBreadcrumb: SellerBreadcrumbItem = {
+	title: "Edit Listing Details"
+}
+const statusBreadcrumb: SellerBreadcrumbItem = {
+	titleKey: (route) =>
+		route.params.status === "publish"
+			? "SellerListEdit.listingLive"
+			: "SellerListEdit.draftSaved"
+}
+
 const routes: Array<RouteRecordRaw> = [
 	{
 		path: "/",
@@ -167,7 +196,11 @@ const routes: Array<RouteRecordRaw> = [
 			{
 				path: "becomeSeller",
 				name: "becomeSeller",
-				meta: { enter: "all" },
+				meta: {
+					enter: "all",
+					sellerHeaderTitle: "Apply to Become a Seller",
+					sellerHeaderTip: "Join the Stylish Parade and start selling your design work"
+				},
 				component: () => import("@/views/SellerDashboard/BecomeSeller/index.vue")
 			},
 			{
@@ -185,7 +218,7 @@ const routes: Array<RouteRecordRaw> = [
 					{
 						path: "myListings",
 						name: "myListings",
-						meta: { enter: "all" },
+						meta: { enter: "all", sellerBreadcrumb: myListingsBreadcrumb },
 						children: [
 							{
 								path: "",
@@ -196,35 +229,74 @@ const routes: Array<RouteRecordRaw> = [
 							{
 								path: "index",
 								name: "myListingsIndex",
-								meta: { enter: "all" },
+								meta: {
+									enter: "all",
+									sellerHeaderTitle: "My Listings",
+									sellerHeaderTip: "Active listings and unpublished inventory.",
+									sellerBreadcrumbs: [myListingsBreadcrumb]
+								},
 								component: () =>
 									import("@/views/SellerDashboard/MyListings/main/index.vue")
 							},
 							{
 								path: "select",
 								name: "myListingsSelect",
-								meta: { enter: "all" },
+								meta: {
+									enter: "all",
+									sellerHeaderTitle: "Select Collection",
+									sellerBreadcrumbs: [
+										myListingsBreadcrumb,
+										selectCollectionBreadcrumb
+									]
+								},
 								component: () =>
 									import("@/views/SellerDashboard/MyListings/createSelect/index.vue")
 							},
 							{
 								path: "select/:collectionId",
 								name: "myListingsSelectItem",
-								meta: { enter: "all" },
+								meta: {
+									enter: "all",
+									sellerHeaderTitle: "Select Collection",
+									sellerBreadcrumbs: [
+										myListingsBreadcrumb,
+										selectCollectionBreadcrumb,
+										selectSketchBreadcrumb
+									]
+								},
 								component: () =>
 									import("@/views/SellerDashboard/MyListings/createSelectItem/index.vue")
 							},
 							{
 								path: "edit",
 								name: "EditDetail",
-								meta: { enter: "all" },
+								meta: {
+									enter: "all",
+									sellerHeaderTitle: "Edit Listing Details",
+									sellerBreadcrumbs: [
+										myListingsBreadcrumb,
+										selectCollectionBreadcrumb,
+										selectSketchBreadcrumb,
+										editListingBreadcrumb
+									]
+								},
 								component: () =>
 									import("@/views/SellerDashboard/MyListings/EditDetail/index.vue")
 							},
 							{
-								path:'edit/status/:status',
-								name:'Status',
-								meta:{enter:'all'},
+								path: "edit/status/:status",
+								name: "Status",
+								meta: {
+									enter: "all",
+									sellerHeaderTitle: "Edit Listing Details",
+									sellerBreadcrumbs: [
+										myListingsBreadcrumb,
+										selectCollectionBreadcrumb,
+										selectSketchBreadcrumb,
+										editListingBreadcrumb,
+										statusBreadcrumb
+									]
+								},
 								component: () =>
 									import("@/views/SellerDashboard/MyListings/EditDetail/Status.vue")
 							}