修复部分bug部分页面的调整

src/component/home/design/collection.vue

@@ -28,11 +28,17 @@
 				<div>Setting</div>
 			</div> -->
 			<div class="collectionBox">
-				<MoodboardUpload ref="moodBoard" v-if="openType == 'moodBoard'"></MoodboardUpload>
-                <PrintboardUpload ref="printBoard" v-if="openType == 'printBoard'"></PrintboardUpload>
-                <ColorboardUpload ref="colorBoard" v-if="openType == 'colorBoard'"></ColorboardUpload>
-                <SketchboardUpload ref="sketchBoard" v-if="openType == 'sketchBoard'"></SketchboardUpload>
-                <mannequin ref="mannequin" v-if="openType == 'mannequin'"></mannequin>
+				<MoodboardUpload ref="moodBoard" v-if="openType == 'moodBoard' || collectionStep == 1"></MoodboardUpload>
+                <PrintboardUpload ref="printBoard" v-if="openType == 'printBoard' || collectionStep == 2"></PrintboardUpload>
+                <ColorboardUpload ref="colorBoard" v-if="openType == 'colorBoard' || collectionStep == 3"></ColorboardUpload>
+                <SketchboardUpload ref="sketchBoard" v-if="openType == 'sketchBoard' || collectionStep == 4"></SketchboardUpload>
+                <mannequin ref="mannequin" v-if="openType == 'mannequin' || collectionStep == 5"></mannequin>
+			</div>
+			<div class="collection_page">
+				<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
+				<i v-if="collectionStep < 5" class="fi fi-rr-arrow-small-right Guide_1_8" @click.stop="nextStep()"></i>
+				<i v-else class="fi fi-rr-check Guide_1_14" @click.stop="cleardata()"></i>
+
 			</div>
 		</div>
 		<div class="mark_loading" v-show="isShowMark">
@@ -66,6 +72,7 @@ export default defineComponent({
 			habitSetStyle:false,
 			isShowMark:false,
 			openType:'',
+			collectionStep:1,
 			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
 		})
 		let driver__:any = computed(()=>{
@@ -82,12 +89,15 @@ export default defineComponent({
 		const init = (value:any)=>{
 			data.habitSetStyle = true
 			data.openType = value
+			const keys = Object.keys(dataDom);
+			data.collectionStep = keys.indexOf(value) + 1; // 1
 			nextTick(()=>{
 				dataDom[value].openSetData()
 			})
 		}
 		let cleardata = ()=>{
 			data.habitSetStyle = false
+			data.collectionStep = 1
 			if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
 			saveProject(data.openType)
 		}
@@ -104,11 +114,32 @@ export default defineComponent({
 				})
 			})
 		}
+		let lastStep = ()=>{
+			data.collectionStep = data.collectionStep - 1
+			setOpenSetData()
+		}
+		let nextStep = ()=>{
+			data.collectionStep = data.collectionStep + 1
+			setOpenSetData()
+		}
+		const setOpenSetData = ()=>{
+			if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
+			saveProject(data.openType)
+		
+			const keys = Object.keys(dataDom); 
+			const key = keys[data.collectionStep - 1];
+			data.openType = key
+			nextTick(()=>{
+				dataDom[key].openSetData()
+			})
+		}
 		return{
 			...toRefs(dataDom),
 			...toRefs(data),
 			cleardata,
 			init,
+			lastStep,
+			nextStep,
 		}
 	},
 	provide() {
@@ -125,6 +156,32 @@ export default defineComponent({
 			width: 100%;
 			height: 100%;
 			position: relative;
+			> .collection_page{
+				left: 50%;
+				transform: translateX(-50%);
+				bottom: -4rem;
+				display: flex;
+				position: absolute;
+				.fi-rr-arrow-small-left{
+					margin-right: calc(10rem*1.2);
+				}
+				.fi{
+					cursor: pointer;
+					display: flex;
+					height: 100%;
+				}
+				.fi::before{
+					padding: 5px;
+					border-radius: 50%;
+					color: rgba(0, 0, 0, 0.55);
+					border: solid 2px rgba(0, 0, 0, 0.25);
+					transition: 1s all;
+				}
+				.fi:hover.fi::before{
+					border: solid 2px rgba(0, 0, 0, 0.55);
+					color: rgba(0, 0, 0, 1);
+				}
+			}
 			.collectionBox{
 				width: 100%;
 				height: 100%;

src/component/home/design/editDesignType/index.vue

@@ -31,7 +31,6 @@
 					<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'">{{$t('ProductImg.MagicTools')}}</span>
 					<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
 				</div>
-				
 				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'ToProductImage'" class="productImg_content_item_title productImg_content_item_title_similarity">
 					<span>{{$t('ProductImg.Similarity')}}</span>
 				</div>
@@ -72,7 +71,7 @@
 					</a-slider>
 					<input type="number" readonly v-model="productimgBrightenValue">
 				</div>
-				<div class="input_border productImg_content_item_generate">
+				<div class="input_border productImg_content_item_generate" v-show="scaleImageList[scaleImageIndex]?.resultType != 'PoseTransfer'">
 					<div class="input_box">
 						<div class="input_box_btnBox">
 							<input
@@ -92,7 +91,37 @@
 						></textarea>
 					</div>
 				</div>
-				<div class="productImg_content_item_generate_btn input_border">
+				<div class="transferPose" v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'">
+					<div class="head">
+						<div class="text">Choose pose</div>
+					</div>
+					<div class="imgBox" v-mousewheel>
+						<div class="item" v-for="item in poseList" @click="selectPose(item)">
+							<img :src="item.firstFrame" 
+								alt=""
+								@mouseenter.stop="gifPlay($event,item)"
+								@mouseleave.stop="gifPause($event,item)" 
+							>	
+							<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
+						</div>
+					</div>
+				</div>
+				<div class="generage_btn_box" style="margin-left: auto;">
+					<div class="generage_btn started_btn"  v-show="!generateSuccess.productimgIsProductimg">
+						<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getPrductimg()"></i>
+						<div class="icon iconfont icon-xiala" v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'" :class="{active:speedState}" @click.stop="openSpeed"></div>
+						<div class="content" v-show="speedState">
+							<div v-for="item in speedList" :key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
+						</div>
+					</div>
+					<div class="generage_btn started_btn" v-show="generateSuccess.productimgIsProductimg && !generateSuccess.productimgRemProductimg">
+						<i class="fi fi-br-loading" ></i>
+					</div>
+					<div class="generage_btn started_btn" v-show="generateSuccess.productimgRemProductimg" @click="removeProductimg">
+						{{$t('Generate.Close')}}
+					</div>
+				</div>
+				<!-- <div class="productImg_content_item_generate_btn input_border">
 					<div class="input_box">
 						<div v-show="!generateSuccess.productimgIsProductimg" class="generage_btn started_btn" @click.stop="getPrductimg">
 							{{ $t('Generate.Generate') }}
@@ -104,16 +133,25 @@
 							{{$t('Generate.Close')}}
 						</div>
 					</div>
-				</div>
+				</div> -->
 			</div>
 		</div>
 		<div class="scaleImage_content_imgBox" :class="{active:isComparison}">
-			<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl">
+			<img v-if="isComparison" :src="scaleImageList[scaleImageIndex]?.sourceUrl || generateSuccess?.productImage">
 			<div class="loadBox" v-show="generateSuccess">
 				<div class="load" v-show="generateSuccess.productimgIsProductimg">
 					<a-spin size="large" class="content_img_flex"></a-spin>
 				</div>
-				<img v-show="!generateSuccess.productimgIsProductimg" :src="generateSuccess?.newData?.designOutfitUrl || generateSuccess?.designOutfitUrl || generateSuccess?.url">
+				<div class="imgBox" v-show="!generateSuccess.productimgIsProductimg">
+					<img v-show="scaleImageList[scaleImageIndex]?.resultType !='PoseTransfer'" :src="generateSuccess?.newData?.designOutfitUrl || generateSuccess?.designOutfitUrl || generateSuccess?.url" alt="">
+					<img 
+						v-show="scaleImageList[scaleImageIndex]?.resultType == 'PoseTransfer'"
+						:src="generateSuccess.newData?.firstFrameUrl || generateSuccess.firstFrameUrl" 
+						alt=""
+						@mouseenter.stop="gifPlay($event,generateSuccess.newData || generateSuccess)"
+						@mouseleave.stop="gifPause($event,generateSuccess.newData || generateSuccess)" 
+					>	
+				</div>
 			</div>
 			
 			<div class="img_operate_block" v-if="isLike">
@@ -148,7 +186,7 @@ import { defineComponent, h, ref ,toRefs,createVNode,reactive, computed} from "v
 import { Https } from "@/tool/https";
 import { Modal } from "ant-design-vue";
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-import { downloadIamge } from "@/tool/util";
+import { downloadIamge,getMinioUrl } from "@/tool/util";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
 import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
@@ -194,7 +232,39 @@ setup(props:any,{emit}) {
 		productimgRelightDirectionList:props.productData.RelightDirectionList,
 		selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
 		generateSuccess:null as any,//生成成功后返回的数据
+		poseList:[],
+		selectPose:null as any,
 	})
+	let speed = reactive({
+		speedList:[
+			{
+				title:'Generate high-quality images',
+				label:'High',
+				value:'',
+			},{
+				title:'Generate using Wanxiang',
+				label:'WX',
+				value:'wx',
+			},
+		],
+		speedState:false,
+		speedData:{
+			title:'Generate high-quality images',
+			label:'High',
+			value:'',
+		},
+	})
+	const openSpeed = ()=>{
+		speed.speedState = !speed.speedState
+		if(speed.speedState){
+			document.addEventListener('click',openSpeed)
+		}else{
+			document.removeEventListener('click',openSpeed)
+		}
+	}
+	const setSpeed = (item:any)=>{
+		speed.speedData = item
+	}
 	let scaleImage: any = ref(false);
 	let isShowMark = ref(false)
 	let loadingShow = ref(false)
@@ -226,11 +296,19 @@ setup(props:any,{emit}) {
 				elementId:scaleImageList.value[scaleImageIndex.value].designItemId || scaleImageList.value[scaleImageIndex.value].id,
 				elementType:'ToProductImage',
 			}
-		}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'TransferPose'){
+		}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
 
 		}
 		return obj
 	}
+	const getPoseTransformData = ()=>{
+		return {
+			poseId:productimg.selectPose,
+			projectId:productimg.selectObject.id,
+			productImage:getMinioUrl(scaleImageList.value[scaleImageIndex.value].sourceUrl),
+			modelName:speed.speedData.value,
+		}
+	}
 	let getPrductimg = ()=>{
 		let obj = getData()
 		let imageStrength = productimg.productimgSimilarity == 100? 95 :productimg.productimgSimilarity
@@ -250,18 +328,25 @@ setup(props:any,{emit}) {
 		let url = Https.httpUrls.relight
 		if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
 			url = Https.httpUrls.toProduct
-		}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'TransferPose'){
+		}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
 			url = Https.httpUrls.poseTransform
+			data = getPoseTransformData()
 		}
+		// setPrductimg([{taskId:"f785fbbf-425c-4d9b-b4d0-0f38f480c64e-83"}])
+		// return
 		productimg.generateSuccess.isShowMark = true
 		Https.axiosPost(url, data).then(
 			(rv) => {
 				productimg.generateSuccess.isShowMark = false
 				scaleImageList.value[scaleImageIndex.value].imgUrl = '/image/loading.gif'
 				let arr:any = []
-				rv.forEach((item:any)=>{
-				  arr.push(item.taskId)  
-				})
+				if(scaleImageList.value[scaleImageIndex.value]?.resultType != 'PoseTransfer'){
+					rv.forEach((item:any)=>{
+						arr.push(item.taskId)  
+					})
+				}else{
+					arr.push(rv)
+				}
 				if(productimg.generateSuccess?.isIndex || productimg.generateSuccess?.isIndex == 0)emit('setGenerateAwait',{index:productimg.generateSuccess.isIndex,listType:productimg.generateSuccess.listType})
 				setPrductimg(arr)
 				productimg.isGenerate = true
@@ -300,14 +385,22 @@ setup(props:any,{emit}) {
 		let url = Https.httpUrls.relightResult
 		if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'ToProductImage'){
 			url = Https.httpUrls.toProductImageResult
-		}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'TransferPose'){
+		}else if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
 			url = Https.httpUrls.poseTransformResult
+			data = {
+				taskId:dataList[0],
+			}
 		}
+		// url = Https.httpUrls.poseTransformResult
+		// data = {taskId:'f785fbbf-425c-4d9b-b4d0-0f38f480c64e-83'}
 		productimg.generateSuccess.prductimgTime = setInterval(()=>{
 			if(!state)return
 			state = false
 			Https.axiosPost(url, data).then(
 				(rv) => {
+					if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
+						rv = [rv]
+					}
 					state = true
 					if(productimg.generateSuccess.productimgIsProductimg){//防止取消后有正在执行的获取状态
 						// generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
@@ -316,6 +409,7 @@ setup(props:any,{emit}) {
 							// let id = productimg.generateSuccess?.designItemId || rv[0].id
 							// rv[0].id = id
 							// let listType = productimg.generateSuccess.listType
+							rv[0].sourceUrl = productimg.generateSuccess.sourceUrl
 							rv[0].designOutfitUrl = rv[0].url
 							productimg.generateSuccess.newData = rv[0]
 							if(productimg.generateSuccess?.scaleImage){
@@ -327,7 +421,7 @@ setup(props:any,{emit}) {
 						}else if(rv[0].status == 'Fail'){
 							isEnd = true
 						}
-						generateProceedList = data
+						generateProceedList = rv
 						if(isEnd){
 							store.state.store.dispatch('getCredits')
 							clearInterval(productimg.generateSuccess.prductimgTime)
@@ -351,7 +445,7 @@ setup(props:any,{emit}) {
 				delete productimg.generateSuccess.remPrductimgTime
 				delete productimg.generateSuccess.prductimgTime 
 			});
-		},1000)
+		},scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'?20000:1000)
 	}
 	let removeProductimg = ()=>{
 		productimg.generateSuccess.productimgIsProductimg = false
@@ -361,13 +455,20 @@ setup(props:any,{emit}) {
 		delete productimg.generateSuccess.productimgRemProductimg
 		delete productimg.generateSuccess.prductimgTime 
 		if(generateProceedList){
-			// let str = generateProceedList.map((obj:any) => obj.taskId).join(',');
-			let str = generateProceedList.join(',')
+			// let str = generateProceedList.length > 1?generateProceedList.join(',')
 			let data = {
-				uniqueId:str,
+				uniqueId:generateProceedList,
 				userId:userDetail.value.userId,
 				type:scaleImageList.value[scaleImageIndex.value]?.resultType
 			}
+			if(scaleImageList.value[scaleImageIndex.value]?.resultType == 'PoseTransfer'){
+				// data = {
+				// 	uniqueId:data.waitList,
+				// 	userId:store.state.UserHabit.userDetail.userId,
+				// 	timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+				// 	type: 'PoseTransferation'
+				// }
+			}
 			Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
 				(rv) => {
 					generateProceedList = []
@@ -379,6 +480,7 @@ setup(props:any,{emit}) {
 	let setCove = ()=>{
 		let data = {
 			...JSON.parse(JSON.stringify(productimg.generateSuccess.newData)),
+			sourceUrl:productimg.generateSuccess.newData.sourceUrl || scaleImageList.value[scaleImageIndex.value].sourceUrl,
 			oldId:productimg.generateSuccess.id,
 			status:productimg.generateSuccess.status,
 			listType:productimg.generateSuccess.listType,
@@ -390,12 +492,25 @@ setup(props:any,{emit}) {
 		
 		delete productimg.generateSuccess.listType 
 	}
-	let setAdd = ()=>{
-
+	const getPoseList = ()=>{
+		Https.axiosGet(Https.httpUrls.getAllPose).then((rv)=>{
+			rv[0].isChecked = true
+			productimg.selectPose = rv[0]?.id || 1
+			productimg.poseList = rv
+		})	
+	}
+	const gifPlay = (e:any,item:any)=>{
+		e.target.src = item.gif || item.gifUrl//使用gif图片
+	}
+	const gifPause = (e:any,item:any)=>{
+		e.target.src = item.firstFrame || item.firstFrameUrl//静态图片
 	}
 	return {
 		t,
 		...toRefs(productimg),
+		...toRefs(speed),
+		openSpeed,
+		setSpeed,
 		scaleImage,
 		isShowMark,
 		loadingShow,
@@ -410,7 +525,9 @@ setup(props:any,{emit}) {
 		getPrductimg,
 		removeProductimg,
 		setCove,
-		setAdd,
+		getPoseList,
+		gifPlay,
+		gifPause,
 	};
 },
 data() {
@@ -455,6 +572,9 @@ methods: {
 		this.generateSuccess.remPrductimgTime = this.generateSuccess.remPrductimgTime?this.generateSuccess.remPrductimgTime:null
 		this.generateSuccess.prductimgTime = this.generateSuccess.prductimgTime?this.generateSuccess.prductimgTime:null
 		this.scaleImage = true
+		if(this.poseList.length == 0){
+			this.getPoseList()		
+		}
 		// if(status == 'edit'){
 		// 	this.generateSuccess = {
 		// 		...list[index],
@@ -635,6 +755,7 @@ overflow: visible !important;
 		margin-bottom: 6rem;
 	}
 }
+
 .scaleImage_content{
 	display: flex;
 	justify-content: center;
@@ -647,7 +768,7 @@ overflow: visible !important;
 		left: 0;
 		z-index: 9;
 		.productImg_left{
-			width: 100%;
+			width: 24rem;
 			display: flex;
 			height: 100%;
 			flex-direction: column;
@@ -665,6 +786,45 @@ overflow: visible !important;
 				justify-content: space-around;
 				margin-top: 0;
 			}
+			.transferPose{
+				display: flex;
+				flex-direction: column;
+				> .imgBox{
+					flex: 1;
+					max-height: 45rem;
+					display: flex;
+					flex-direction: row;
+					flex-wrap: nowrap;
+					justify-content: space-between;
+					width: 100%;
+					overflow: hidden;
+					overflow-x: auto;
+					> .item{
+						margin-right: 1rem;
+						width: calc(100% / 1.2 - .5rem);
+						cursor: pointer;
+						overflow: hidden;
+						display: flex;
+						justify-content: center;
+						flex-shrink: 0;
+						height: 25rem;
+						position: relative;
+						
+						:deep(.ant-checkbox-wrapper){
+							position: absolute;
+							top: 2rem;
+							right: 2rem;
+						}
+						> img{
+							width: 80%;
+							object-fit: contain;
+						}
+					}
+					> .upload_item{
+						border: none;
+					}
+				}
+			}
 			.productImg_content_item_similarity{
 				padding-bottom: 2.4rem;
 				display: flex;
@@ -692,6 +852,9 @@ overflow: visible !important;
 			min-width: 40rem;
 			align-items: center;
 			justify-content: center;
+			> .imgBox{
+				height: 100%;
+			}
 
 		}
 		img{

src/component/home/design/index.vue

@@ -103,6 +103,11 @@
 														likeDesignCollectionList,
 														'like'
 													)">
+													<img class="content_img" 
+														v-if="design.resultType == 'PoseTransfer'" 
+														:src="design.firstFrameUrl" alt="" 
+														@mouseenter.stop="gifPlay($event,design)"
+														@mouseleave.stop="gifPause($event,design)" >
 													<img class="content_img" v-show="!design?.generateAwait" :src="design.designOutfitUrl||design.url"
 														:key="design.designOutfitUrl" designType="like" :index="index"/>
 													<a-spin v-show="design?.generateAwait" size="large"></a-spin>
@@ -115,7 +120,7 @@
 															<div class="icon iconfont icon-jushoucanggift icon_like">
 															</div>
 														</div>
-														<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'TransferPose','add','like')">
+														<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(likeDesignCollectionList,index,'PoseTransfer','add','like')">
 															<div class="text">Transfer Pose</div>
 															<div class="icon iconfont icon-jushoucanggift icon_like"></div>
 														</div>
@@ -168,6 +173,11 @@
 															designCollectionList,
 															'disLike'
 														)">
+														<img class="content_img" 
+															v-if="design.resultType == 'PoseTransfer'" 
+															:src="design.firstFrameUrl" alt="" 
+															@mouseenter.stop="gifPlay($event,design)"
+															@mouseleave.stop="gifPause($event,design)" >
 														<img class="content_img" v-show="!design?.generateAwait" :src="design.designOutfitUrl || design.url" designType="disLike" :index="index"/>
 														<a-spin v-show="design?.generateAwait" size="large"></a-spin>
 													</div> 
@@ -179,7 +189,7 @@
 																<div class="icon iconfont icon-jushoucang icon_like">
 																</div>
 															</div>
-															<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'TransferPose','add','disLike')">
+															<div class="item" v-show="design.resultType == 'ToProductImage'" @click="setEditDesignType(designCollectionList,index,'PoseTransfer','add','disLike')">
 																<div class="text">Transfer Pose</div>
 																<div class="icon iconfont icon-jushoucanggift icon_like"></div>
 															</div>
@@ -647,8 +657,8 @@ export default defineComponent({
 						index: posiitonData.value.generateElList.length,
 						userLikeSortId:value.designItemId||value.id
 					});
-					setDesignItemStyle()
 				}
+				setDesignItemStyle()
 				setSystemDesigner(100)
 				// moveItem('disLike');
 			})
@@ -704,6 +714,7 @@ export default defineComponent({
 			dataDom.editDesignType.isComparison = true
 		}
 		const addGenerateImg = (data:any)=>{
+			console.log(data)
 			if(!data.id)return
 			let obj = {
 				id:data.id,
@@ -716,6 +727,8 @@ export default defineComponent({
 				elementId:data.elementId,
 				elementType:data.elementType,
 				userGroupId:data.userGroupId || data.id,
+				firstFrameUrl:data.firstFrameUrl,
+				gifUrl:data.gifUrl,
 			}
 			let list = []
 			if(data.listType == 'disLike'){
@@ -760,13 +773,29 @@ export default defineComponent({
 			let data = {
 				toProductImageResultId:[(design.designItemId || design.id)],
 				projectId: store.state.Workspace.probjects.id,
-			}
+			} as any
+			let params = {} as any
 			if(type == 'ToProductImage' || type == 'Relight'){
 				if(str == 'like'){
 					url = Https.httpUrls.productImageLike
 				}else{
 					url = Https.httpUrls.productImageUnLike
 				}
+			}else if(type == 'PoseTransfer'){
+				url = Https.httpUrls.poselikeOrDisike
+				if(str == 'like'){
+					params = {
+						likeOrDislike:'like',
+						transformedId:design.id,
+						projectId:store.state.Workspace.probjects.id,
+					}
+				}else{
+					params = {
+						likeOrDislike:'dislike',
+						transformedId:design.id,
+						projectId:store.state.Workspace.probjects.id,
+					}
+				}
 			}else{
 				if(str == 'like'){
 					url = Https.httpUrls.productImageLike
@@ -775,7 +804,7 @@ export default defineComponent({
 				}
 			}
 			designData.likeLoading = true;
-			Https.axiosPost(url, data).then(
+			Https.axiosPost(url, data,{params:params.likeOrDislike?params:''}).then(
 				(rv) => {
 					if(str == 'like'){
 						let value:any = {
@@ -863,6 +892,12 @@ export default defineComponent({
 			list[data.index].generateAwait = true;
 
 		}
+		const gifPlay = (e:any,item:any)=>{
+			e.target.src = item.gif || item.gifUrl//使用gif图片
+		}
+		const gifPause = (e:any,item:any)=>{
+			e.target.src = item.firstFrame || item.firstFrameUrl//静态图片
+		}
 		return {
 			store,
 			...toRefs(editDesignType),
@@ -915,6 +950,8 @@ export default defineComponent({
 			setNoDesignLike,
 			upDataLikeListType,
 			setGenerateAwait,
+			gifPlay,
+			gifPause,
 		};
 	},
 	data() {
@@ -985,6 +1022,12 @@ export default defineComponent({
 			}
 		});
 		this.observerData.observer.observe(this.$refs.rightContentBlockBox);
+		if(this.designCollectionList?.length > 0){
+			nextTick(()=>{
+				this.setDesignItemStyle()
+				this.setShowHide('recycleDomHidden')
+			})
+		}
 	},
 	directives:{
 		mousewheel:{
@@ -1743,7 +1786,8 @@ export default defineComponent({
 					
 					.designPage_left_content {
 						height: 100%;
-						width: 55rem;
+						width: 50rem;
+						// width: 55rem;
 						overflow: hidden;
 						// transition: all .3s;
 						padding-right: 1.2rem;
@@ -1804,7 +1848,7 @@ export default defineComponent({
 						color: #fff;
 						flex-direction: column;
 						&.active{
-							right: 43rem;
+							right: 53rem;
 							transform: translate(0, -50%);
 						}
 					}
@@ -1862,7 +1906,7 @@ export default defineComponent({
 								margin-left: 2rem;
 							}
 							.right_content_body {
-								width: 45rem;
+								width: 55rem;
 								// width: 55rem;
 								.right_content_img_block{
 									
@@ -1986,11 +2030,9 @@ export default defineComponent({
 										}
 									}
 									.content_img {
-										// max-width: 100%;
-										width: 100%;
 										height: 100%;
-										// max-height: 100%;
-										object-fit: contain;
+										// object-fit: contain;
+										object-fit: cover;
 									}
 									
 									.btn{