实现history页面缓存

src/component/home/design/collection/ColorboardUpload.vue

@@ -682,7 +682,7 @@ export default defineComponent({
 				this.colorList[index].gradient = ele.gradient
 				this.colorList[index].name = ele.name
             });
-			this.selectIndex = colorList.length - 1
+			this.selectIndex = !colorList.length? 0 : colorList.length - 1
 			if(this.colorList[colorList.length - 1]?.gradient && this.colorList[colorList.length - 1]?.gradient?.selectIndex>-1 && this.colorList[colorList.length - 1]?.gradient?.gradientShow){
 				this.selectColor = {rgba:this.colorList[colorList.length - 1].gradient.gradientList[colorList.length - 1].rgba,hex:hex} //顔色选择器默认颜色
 			}else{

src/component/home/design/index.vue

@@ -358,7 +358,7 @@ import selectMenu from '@/component/modules/selectMenu.vue'
 import { forEach } from "jszip";
 
 export default defineComponent({
-	name: "homePage",
+	name: "designPage",
 	components: {
 		collectionModal,
 		// HeaderComponent,
@@ -629,8 +629,6 @@ export default defineComponent({
 				collItemSize.collValue = Math.floor(parentWidth / collItemSize.widthValue.value)
 				collItemSize.padding = Math.floor(parentWidth - (collItemSize.collValue * collItemSize.widthValue.value))
 				let value = collItemSize.collValue
-				console.log(parentWidth,collItemSize,value)
-
 				collItemSize.itemStyle.width = (parentWidth - collItemSize.padding - (value * 10)) / value
 				collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54
 				
@@ -1504,14 +1502,6 @@ export default defineComponent({
 		}
 	},
 	methods: {
-		// addTeam (team:any) {
-		// this.likeDesignCollectionList.push(team)
-		// },
-		openSetData(){
-			nextTick(()=>{
-				this.setItemPosition()	
-			})
-		},
 		setItemPosition(){
 			this.setSystemDesigner(0)
 			this.setDesignItemStyle()

src/component/home/index.vue

@@ -4,18 +4,25 @@
 			<a-spin size="large" />
 		</div>
 		<div class="show">
-			<div v-show="openType === 'history'" class="function">
+			<!-- <div v-show="openType === 'history'" class="function">
 				<design :key="componentKey" ref="design"></design>
-			</div>
+			</div> -->
 			<router-view v-if="
 				(openType && openType != 'history' && !routeQuery.id) || 
 				$route.path != '/home'" 
 				@setTask="setTask"
+				v-slot="{ Component, route }"
 			>
+				<keep-alive :include="cachedRoutes">
+					<component 
+						:is="Component" 
+						:key="route.name"
+					/>
+				</keep-alive>
 			</router-view>
-			<div v-else-if="routeQuery.id" class="function">
+			<!-- <div v-else-if="routeQuery.id" class="function">
 				<design :key="componentKey" ref="design"></design>
-			</div>
+			</div> -->
 			<div v-else-if="!routeQuery.history" class="function">
 				<newPorject ref="newPorject" @newProject=newProject></newPorject>
 			</div>
@@ -33,14 +40,13 @@ import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 import { useRouter,useRoute } from 'vue-router'
-import design from "./design/index.vue"
 import newPorject from "./newProject/index.vue"
 import router from '@/router';
 import {getMinioUrl, getUniversalZoomLevel} from '@/tool/util'
 import chat from "./chat/index.vue"
 export default defineComponent({
 	components:{
-		design,newPorject,chat
+		newPorject,chat
 	},
 	emits:['setTask','setNewProject'],
 	setup(props,{emit}) {
@@ -54,6 +60,7 @@ export default defineComponent({
 			selectObject:computed(()=>store.state.Workspace.probjects) as any,//选择的项目
 			chatData:null as any,
 			dataLoad:true as any,
+			cachedRoutes:computed(()=>store.state.Workspace.cachedRoutes),//
 		})
 		let settingGetHistory:any = inject('settingGetHistory')
 		const setIsShowMark = (boolean:boolean)=>{
@@ -72,15 +79,33 @@ export default defineComponent({
 		// 		getHistory(route.query.history)
 		// 	}
 		// })
-			
+		watch(
+			() => route,
+			(newRoute) => {
+				const routeName = newRoute.name as string
+				const shouldCache = newRoute.meta?.cache === true
+				if (shouldCache && routeName && !data.cachedRoutes.includes(routeName)) {
+					if(routeName == 'toolsPage' && !route.query?.id)return
+					data.cachedRoutes.push(routeName)// 保证缓存只有一个项目
+				} else if ((!route.query?.id && shouldCache) || (!shouldCache && routeName && data.cachedRoutes.includes(routeName))) {
+				// } else if (!shouldCache && routeName && data.cachedRoutes.includes(routeName)) {
+					for (let i = data.cachedRoutes.length - 1; i >= 0; i--) {
+						if (data.cachedRoutes[i] !== routeName) {
+							data.cachedRoutes.splice(i, 1);
+						}
+					}
+				}
+			},
+			{ immediate: true, deep: true }
+		)
 		watch(() => route.query,
 			(query:any, oldQuery:any) => {
 				data.routeQuery = query
 				if(query.history)data.componentKey = query.history
-				const key = Object.keys(query)?.[0]
-				console.log(key)
+				let key = Object.keys(query)?.[0]
+				if(route.params?.id)key = 'history'
 				if(key){
-					data.openType = Object.keys(query)[0]
+					data.openType = key
 				}else{
 					data.openType = ''
 					data.dataLoad = false
@@ -90,26 +115,26 @@ export default defineComponent({
 				// 检查是否需要重新初始化
 				const currentPath = route.fullPath
 				const storedPath = store.state.Workspace.projectPath
-				const isSameProject = currentPath === storedPath && data.openType === 'history'
+				const isSameProject = currentPath === storedPath
 				
-				if(data.openType == 'history'){
+				if((data.openType == 'history' && route.params?.id) || (data.openType == 'tools' && query.id)){
 					store.commit('setProjectPath',route.fullPath)
 				}
 				
 				// 如果是同一个项目且openType为history，跳过重新初始化
-				console.log(isSameProject,data.openType)
-				if(isSameProject || (!query.history && !query.id)){
+				// if(oldQuery?.id && !query?.id)return createData()
+				const tempUrl = new URL(storedPath, window.location.origin);
+				const params2 = {
+					tools: tempUrl.searchParams.get('tools'),
+					id: tempUrl.searchParams.get('id')
+				};
+				if(isSameProject || (!route.params?.id && !query.id) || params2.id){
 					data.dataLoad = false
-					console.log(dataDom.design)
 					// dataDom.design?.init()
-					if(query.history){
-						dataDom.design.openSetData()
-					}
 					return
 				}
-				
 				nextTick(()=>{
-					if(query.history || query.id){
+					if(route.params?.id || query?.id){
 						//切换新项目需要清除首次design提示
 						sessionStorage.removeItem('firstDesign');
 
@@ -125,7 +150,7 @@ export default defineComponent({
 							store.commit("createProbject");
 							store.commit("clearAllData");
 						}
-						getHistory(query.id || query.history)
+						getHistory(query.id || route.params?.id)
 					}else{
 						data.dataLoad = false
 						createData()
@@ -201,7 +226,7 @@ export default defineComponent({
 			storeData.positionList = position
 			store.commit('setProbject',storeData)
 			// setChatData()
-			if(route.name == 'tools'){
+			if(route.name == 'toolsPage'){
 				getCollection('tools',null)	
 			}else{
 				getCollection('design',null)	
@@ -548,7 +573,8 @@ export default defineComponent({
 			}else{
 				chatModel = false
 			}
-			router.push(`home?history=${value.id}&chatMode=${chatModel}`)
+			router.push(`/home/history/${value?.id}`)
+			// router.push(`home?history=${value.id}&chatMode=${chatModel}`)
 			settingGetHistory()
 			data.chatData = value
 			

src/component/home/tools/poseTransfer/index.vue

@@ -171,8 +171,20 @@ export default defineComponent({
 				CollectionType:'PoseTransfer',
 			},
 			waitList:[],
-			likeList:computed(()=>store.state.HomeStoreModule.poseTransfer.likedList),
-			noLikeList:computed(()=>store.state.HomeStoreModule.poseTransfer.list),
+			likeList:computed(()=>{
+				if(!route.query?.id && route.query.tools == 'poseTransfer'){
+					return []
+				}else{
+					return store.state.HomeStoreModule.poseTransfer.likedList
+				}
+			}),
+			noLikeList:computed(()=>{
+				if(!route.query?.id && route.query.tools == 'poseTransfer'){
+					return []
+				}else{
+					return store.state.HomeStoreModule.poseTransfer.list
+				}
+			}),
 			isGenerate:false,//判断是否正在进行generate
 			remGenerate:false,
 			removeGenerate:false,

src/component/home/tools/toProduct/index.vue

@@ -246,6 +246,10 @@ export default defineComponent({
 			type:Boolean,
 			default:false,
 		},
+		isState:{
+			type:Boolean,
+			default:false,
+		},
 	},
 	emit:['unLike'],
     setup(props,{emit}) {
@@ -264,7 +268,30 @@ export default defineComponent({
 		const createProbject:any = inject('createProbject',()=>{})
 		let productImgData:any = reactive({
 			isShowMark:false,
-			fileList:{},
+			fileList:{
+				ToProductImage:computed(()=>{
+					if(!route.query?.id && route.query.tools == 'toProduct'){
+						return []
+					}else{
+						if(props.isDesignPage)return []
+						if(store.state.HomeStoreModule.uploadElement?.[0]){
+							store.state.HomeStoreModule.uploadElement[0].isChecked = true
+						}
+						return store.state.HomeStoreModule.uploadElement
+					}
+				}),
+				Relight:computed(()=>{
+					if(!route.query?.id && route.query.tools == 'relight'){
+						return []
+					}else{
+						if(props.isDesignPage)return []
+						if(store.state.HomeStoreModule.uploadElement?.[0]){
+							store.state.HomeStoreModule.uploadElement[0].isChecked = true
+						}
+						return store.state.HomeStoreModule.uploadElement
+					}
+				}),
+			},
 			searchName:{
 				ToProductImage:'',
 				Relight:'',
@@ -273,13 +300,37 @@ export default defineComponent({
 			isProductimg:false,//开始生成
 			selectProductimgList:[],
 			generateList:{
-				ToProductImage:computed(()=>store.state.HomeStoreModule.toProductImageList.list),
-				Relight:computed(()=>store.state.HomeStoreModule.relightList.list),
+				ToProductImage:computed(()=>{
+					if(!route.query?.id && route.query.tools == 'toProduct'){
+						return []
+					}else{
+						return store.state.HomeStoreModule.toProductImageList.list
+					}
+				}),
+				Relight:computed(()=>{
+					if(!route.query?.id && route.query.tools == 'relight'){
+						return []
+					}else{
+						return store.state.HomeStoreModule.relightList.list
+					}
+				}),
 			},
 			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
 			likeList:{
-				ToProductImage:computed(()=>store.state.HomeStoreModule.toProductImageList.likedList),
-				Relight:computed(()=>store.state.HomeStoreModule.relightList.likedList),
+				ToProductImage:computed(()=>{
+					if(!route.query?.id && route.query.tools == 'toProduct'){
+						return []
+					}else{
+						return store.state.HomeStoreModule.toProductImageList.likedList
+					}
+				}),
+				Relight:computed(()=>{
+					if(!route.query?.id && route.query.tools == 'relight'){
+						return []
+					}else{
+						return store.state.HomeStoreModule.relightList.likedList
+					}
+				}),
 			} as any,
 			similarity:30,
 			brightenValue:1,
@@ -312,20 +363,14 @@ export default defineComponent({
 			},
 		})
 	
-		// watch(() => route.query.id,
-		// 	(query:any, oldQuery:any) => {
-		// 		if(oldQuery && query != oldQuery){
-		// 			productImgData.generateList = []
-		// 		}
-		// 	},
-		// );
-		watch(()=>store.state.HomeStoreModule.uploadElement.length,(newVal,oldVal)=>{
-			if(props.isDesignPage)return
-			productImgData.fileList[props.productimgMenu.value] = store.state.HomeStoreModule.uploadElement
-			if(productImgData.fileList[props.productimgMenu.value][0]){
-				productImgData.fileList[props.productimgMenu.value][0].isChecked = true
-			}
-		})
+		
+		// watch(()=>store.state.HomeStoreModule.uploadElement.length,(newVal,oldVal)=>{
+		// 	if(props.isDesignPage)return
+		// 	productImgData.fileList[props.productimgMenu.value] = store.state.HomeStoreModule.uploadElement
+		// 	if(productImgData.fileList[props.productimgMenu.value][0]){
+		// 		productImgData.fileList[props.productimgMenu.value][0].isChecked = true
+		// 	}
+		// })
 		const productImgDom = reactive({
 			generalDragLeft:null as any,
 			generalDragRight:null as any,
@@ -425,7 +470,6 @@ export default defineComponent({
 		}
 
 		let fileUploadChange = (data: any)=> {
-			console.log(data)
             let file = data.file;
 			let bor = true
             if (file.status === "done") {
@@ -472,7 +516,6 @@ export default defineComponent({
 					CollectionType:props.productimgMenu.value,
 				}
 			}
-			console.log(!!((isJpgOrPng && isLt2M && productImgData.selectObject.id) || Upload.LIST_IGNORE))
             return !!((isJpgOrPng && isLt2M && productImgData.selectObject.id) || Upload.LIST_IGNORE);
         }
 		let setGenerate = (item:any)=>{
@@ -509,7 +552,6 @@ export default defineComponent({
 				(rv) => {
 					if(str == 'like'){
 						// if(rv?.sort)item.sort = rv.sort
-						console.log(rv)
 						if(rv?.sort)item.oldSort = rv.sort
 						if(rv?.id)item.userLikeSortId = rv.id
 						item.newLike = true
@@ -518,7 +560,6 @@ export default defineComponent({
 							str:'add',
 							index:-1,
 						}
-						console.log(value)
 						if(props.productimgMenu.value == 'ToProductImage'){
 							store.commit("setToProductImage", value);
 						}else{
@@ -562,7 +603,6 @@ export default defineComponent({
 			}
 			if(productImgData.fileList[props.productimgMenu.value]){
 				productImgData.fileList[props.productimgMenu.value].forEach((item:any)=>{
-					console.log(item)
 					if(item.isChecked){
 						if(item.resultType == 'Design'){
 							obj.elementId = item.designOutfitId
@@ -662,8 +702,6 @@ export default defineComponent({
 								if(element.status == 'Success'){
 									element.imgUrl = element.url
 									let index = productImgData.generateList[props.productimgMenu.value].findIndex((obj:any) => obj.taskId === element.taskId);
-									console.log(productImgData.generateList[props.productimgMenu.value][index])
-									console.log(element)
 									for (const key in element) {
 										if(element[key]){
 											productImgData.generateList[props.productimgMenu.value][index][key] = element[key]
@@ -716,7 +754,6 @@ export default defineComponent({
 					timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
 					type:props.productimgMenu.value,
 				}
-				console.log(productImgData.generateList[props.productimgMenu.value].value,)
 				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
 					(rv) => {
 						generateProceedList = []
@@ -888,7 +925,6 @@ export default defineComponent({
 				productImgData.isProductimg = true
 				productImgData.remProductimg = true
 				productImgData.isShowMark = false
-				console.log(taskIdList)
 				setPrductimg(arr)
 			}
 		},{immediate: true })

src/component/toolsPage/index.vue

@@ -92,9 +92,10 @@ export default defineComponent({
 			(query:any, oldQuery:any) => {
 				if(oldQuery && query?.tools == oldQuery?.tools)return
 				const key = Object.keys(query)?.[0]
-				if(route.name == 'tools' && key){
+				if(route.name == 'toolsPage' && key){
 					data.openType = query[key]
 					nextTick(()=>{
+						if(route.fullPath === store.state.Workspace.projectPath)return
 						open(query[key])
 					})
 				}