调整homeNav导航跳转页面

src/views/Workshop/home.vue

@@ -19,7 +19,7 @@ const newJourney = ()=>{
 }
 
 const historicalReview = ()=>{
-	router.push(`/workshop/creation?flowType=${FlowType.HISTORICAL}`)
+	router.push(`/workshop/creation?flowType=${FlowType.HISTORY}`)
 }
 
 onMounted(()=>{
@@ -70,7 +70,7 @@ defineExpose({})
 				margin-bottom: 8rem;
 				line-height: 13.1rem;
 				border: 1.16px solid #FFFFFF;
-				backdrop-filter: blur(40.50761795043945px);
+				backdrop-filter: blur(2.5rem);
 				background: radial-gradient(100% 100% at 0% 0%, rgba(115, 115, 115, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
 				&:last-child{
 					margin-bottom: 0;

src/views/Workshop/homeNav.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, reactive, toRefs, computed, onActivated } from "vue";
+import { onMounted, onUnmounted, reactive, ref, computed, onActivated } from "vue";
 import { useRouter } from 'vue-router'
 const router = useRouter()
 import { showConfirmDialog } from 'vant'
@@ -11,6 +11,9 @@ const emit = defineEmits([
 	'view-type'
 ])
 
+const navList = ref([])
+const navDisabledList = ref([])
+
 // const data = reactive({
 // })
 
@@ -28,17 +31,50 @@ const clickSwitchVIPID = ()=>{
 		})
 		.catch(() => {})
 }
-const openFlow = (path:string,flowType:string)=>{
-	if(flowType == 'clientId')return clickSwitchVIPID()
-	if(flowType == 'main'){
-		router.push({ name: path })
-	}else{
-		router.push({ name: path, query: { demo: 1 } })
-	}
+const openFlow = (path:string)=>{
+	const query = computed(() => router.currentRoute.value.query)
+	router.push({ name: path, query: {...query.value} })
+
+	// if(flowType == 'clientId')return clickSwitchVIPID()
+	// if(flowType == 'main'){
+	// 	router.push({ name: path })
+	// }else{
+	// 	router.push({ name: path, query: { demo: 1 } })
+	// }
 }
 
 onMounted(()=>{
 	emit('view-type', 1)
+	let nav = [
+		{
+			path: 'selectStyle',
+			imgPath: new URL('@/assets/images/nav1.png',import.meta.url).href,
+			flowTypeList: ['history-tryon','history-ai'],
+		},
+		{
+			path: 'recommended',
+			imgPath: new URL('@/assets/images/nav2.png',import.meta.url).href,
+			flowTypeList: ['history-outfit'],
+		},
+		{
+			path: 'uploadFace',
+			imgPath: new URL('@/assets/images/nav3.png',import.meta.url).href,
+			flowTypeList: ['history-tryon','history-ai'],
+		},
+		{
+			path: 'customize',
+			imgPath: new URL('@/assets/images/nav4.png',import.meta.url).href,
+			flowTypeList: ['history-tryon','history-ai'],
+		},
+	]
+	nav.forEach((item)=>{
+		const query = computed(() => router.currentRoute.value.query)
+		if(item.flowTypeList.includes(query.value?.flowType as string)){
+			navList.value.push(item)
+		}else{
+			navDisabledList.value.push(item)
+		}
+	})
 })
 onUnmounted(()=>{
 })
@@ -56,18 +92,24 @@ defineExpose({})
 				Explore
 			</div>
 			<div class="navList">
-				<div class="item" @click="openFlow('index','main')">
+				<div class="item active" v-for="item in navList" :key="item.path" @click="openFlow(item.path)">
+					<img :src="item.imgPath" alt="">
+				</div>
+				<div class="item" v-for="item in navDisabledList" :key="item.path" @click="openFlow(item.path)">
+					<img :src="item.imgPath" alt="">
+				</div>
+				<!-- <div class="item" @click="openFlow('index')">
 					<img src="@/assets/images/nav1.png" alt="">
 				</div>
-				<div class="item" @click="openFlow('recommended','reinventing')">
+				<div class="item" :class="{'active': ['history-outfit','history-ai'].includes($route.query?.flowType as string)}" @click="openFlow('recommended','reinventing')">
 					<img src="@/assets/images/nav2.png" alt="">
 				</div>
-				<div class="item" @click="openFlow('index','stylist')">
+				<div class="item" :class="{'active': ['history-outfit','history-ai'].includes($route.query?.flowType as string)}" @click="openFlow('index','stylist')">
 					<img src="@/assets/images/nav3.png" alt="">
 				</div>
-				<div class="item" @click="openFlow('','clientId')">
+				<div class="item" :class="{'active': ['history-ai'].includes($route.query?.flowType as string)}" @click="openFlow('','clientId')">
 					<img src="@/assets/images/nav4.png" alt="">
-				</div>
+				</div> -->
 			</div>
 		</div>
 	</div>
@@ -110,6 +152,12 @@ defineExpose({})
 					// height: 41.6rem;
 					height: auto;
 					width: calc(50% - 4.8rem / 2);
+					pointer-events: none;
+					opacity: .5;
+					&.active{
+						pointer-events: auto;
+						opacity: 1;
+					}
 					> img{
 						width: 100%;
 						height: 100%;