bugfix: 面包屑导航

src/router/index.ts

@@ -8,8 +8,9 @@ type SellerRouteMetaValue<T> = T | ((route: RouteLocationNormalizedLoaded) => T)
 type SellerBreadcrumbItem = {
 	title?: SellerRouteMetaValue<string>
 	titleKey?: SellerRouteMetaValue<string>
-	to?: SellerRouteMetaValue<RouteLocationRaw>
+	to?: SellerRouteMetaValue<RouteLocationRaw | undefined>
 }
+type SellerBreadcrumbList = SellerRouteMetaValue<SellerBreadcrumbItem[]>
 
 const myListingsBreadcrumb: SellerBreadcrumbItem = {
 	title: "My Listings",
@@ -20,7 +21,16 @@ const selectCollectionBreadcrumb: SellerBreadcrumbItem = {
 	to: { name: "myListingsSelect" }
 }
 const selectSketchBreadcrumb: SellerBreadcrumbItem = {
-	title: "Select Sketch"
+	title: "Select Sketch",
+	to: (route) => {
+		const collectionId =
+			route.params.collectionId ||
+			(typeof history !== "undefined" ? history.state?.collectionId : "")
+
+		return collectionId
+			? { name: "myListingsSelectItem", params: { collectionId } }
+			: undefined
+	}
 }
 const editListingBreadcrumb: SellerBreadcrumbItem = {
 	title: "Edit Listing Details"
@@ -31,6 +41,22 @@ const statusBreadcrumb: SellerBreadcrumbItem = {
 			? "SellerListEdit.listingLive"
 			: "SellerListEdit.draftSaved"
 }
+const createListingBreadcrumbs: SellerBreadcrumbItem[] = [
+	myListingsBreadcrumb,
+	selectCollectionBreadcrumb,
+	selectSketchBreadcrumb,
+	editListingBreadcrumb
+]
+const isEditingListingFromList = () =>
+	typeof history !== "undefined" && history.state?.type === "edit"
+const editListingBreadcrumbs: SellerBreadcrumbList = () =>
+	isEditingListingFromList()
+		? [myListingsBreadcrumb, editListingBreadcrumb]
+		: createListingBreadcrumbs
+const listingStatusBreadcrumbs: SellerBreadcrumbList = () =>
+	isEditingListingFromList()
+		? [myListingsBreadcrumb, editListingBreadcrumb, statusBreadcrumb]
+		: [...createListingBreadcrumbs, statusBreadcrumb]
 
 const routes: Array<RouteRecordRaw> = [
 	{
@@ -273,12 +299,7 @@ const routes: Array<RouteRecordRaw> = [
 								meta: {
 									enter: "all",
 									sellerHeaderTitle: "Edit Listing Details",
-									sellerBreadcrumbs: [
-										myListingsBreadcrumb,
-										selectCollectionBreadcrumb,
-										selectSketchBreadcrumb,
-										editListingBreadcrumb
-									]
+									sellerBreadcrumbs: editListingBreadcrumbs
 								},
 								component: () =>
 									import("@/views/SellerDashboard/MyListings/EditDetail/index.vue")
@@ -289,13 +310,7 @@ const routes: Array<RouteRecordRaw> = [
 								meta: {
 									enter: "all",
 									sellerHeaderTitle: "Edit Listing Details",
-									sellerBreadcrumbs: [
-										myListingsBreadcrumb,
-										selectCollectionBreadcrumb,
-										selectSketchBreadcrumb,
-										editListingBreadcrumb,
-										statusBreadcrumb
-									]
+									sellerBreadcrumbs: listingStatusBreadcrumbs
 								},
 								component: () =>
 									import("@/views/SellerDashboard/MyListings/EditDetail/Status.vue")

src/views/SellerDashboard/MyListings/EditDetail/index.vue

@@ -403,11 +403,25 @@
 		if (status === "draft") {
 			// save draft logic
 			// console.log("Saving draft...", currentListing.value)
-			ROUTER.push({ name: "Status", params: { status: "draft" } })
+			ROUTER.push({
+				name: "Status",
+				params: { status: "draft" },
+				state: {
+					type: history.state?.type,
+					collectionId: history.state?.collectionId
+				}
+			})
 		} else if (status === "publish") {
 			// publish logic
 			// console.log("Publishing...", currentListing.value)
-			ROUTER.push({ name: "Status", params: { status: "publish" } })
+			ROUTER.push({
+				name: "Status",
+				params: { status: "publish" },
+				state: {
+					type: history.state?.type,
+					collectionId: history.state?.collectionId
+				}
+			})
 		}
 	}
 

src/views/SellerDashboard/MyListings/createSelectItem/index.vue

@@ -50,7 +50,8 @@ const next = ()=>{
 		path:'/home/seller/myListings/edit',
 		state: {
 			designItemIds,
-			type:'create'
+			type:'create',
+			collectionId: route.params.collectionId
 		}
 	})
 }

src/views/SellerDashboard/seller-header.vue

@@ -41,7 +41,7 @@
 		| {
 				title?: RouteMetaValue<string>
 				titleKey?: RouteMetaValue<string>
-				to?: RouteMetaValue<RouteLocationRaw>
+				to?: RouteMetaValue<RouteLocationRaw | undefined>
 				name?: string
 				path?: string
 		  }
@@ -49,6 +49,7 @@
 		title: string
 		to?: RouteLocationRaw
 	}
+	type SellerBreadcrumbsSource = RouteMetaValue<SellerBreadcrumbSource[]>
 
 	const props = withDefaults(
 		defineProps<{
@@ -113,7 +114,9 @@
 
 	const autoBreadcrumbs = computed(() => {
 		const currentRecord = route.matched[route.matched.length - 1]
-		const customBreadcrumbs = currentRecord?.meta?.sellerBreadcrumbs
+		const customBreadcrumbs = resolveMetaValue(
+			currentRecord?.meta?.sellerBreadcrumbs as SellerBreadcrumbsSource | undefined
+		)
 
 		if (Array.isArray(customBreadcrumbs)) {
 			return customBreadcrumbs
@@ -165,13 +168,33 @@
 
 	const onBreadcrumbClick = (breadcrumb: SellerBreadcrumbItem, index: number) => {
 		if (index >= breadcrumbList.value.length - 1) return
-		if (breadcrumb.to) {
-			router.push(breadcrumb.to)
+
+		const historyIndex = -(breadcrumbList.value.length - index - 1)
+		if (canUseBreadcrumbHistory(Math.abs(historyIndex))) {
+			router.go(historyIndex)
 			return
 		}
 
-		const historyIndex = -(breadcrumbList.value.length - index - 1)
-		if (historyIndex < 0) router.go(historyIndex)
+		if (breadcrumb.to) {
+			router.replace(breadcrumb.to)
+		}
+	}
+
+	const canUseBreadcrumbHistory = (steps: number) => {
+		if (steps <= 0 || typeof history === "undefined") return false
+
+		const state = history.state as {
+			back?: unknown
+			position?: unknown
+		} | null
+		const backPath = state?.back
+
+		return (
+			typeof state?.position === "number" &&
+			state.position >= steps &&
+			typeof backPath === "string" &&
+			backPath.startsWith("/home/seller/myListings")
+		)
 	}
 </script>
 <style scoped lang="less">