合并画布，部分样式调整

src/component/home/design/index.vue

@@ -42,7 +42,7 @@
 								<div class="generage_btn_box">
 									<div class="generage_btn started_btn" style="margin-left: 2rem;">
 										<div class="" @click.stop="openEditTools()" style="margin-left: 1rem;">
-											Tools
+											{{ $t('Header.Tools') }}
 										</div>
 										<div class="icon iconfont icon-xiala" :class="{active:speedState}" @click.stop="openSpeed"></div>
 										<div class="content" v-show="speedState">
@@ -50,8 +50,8 @@
 										</div>
 									</div>
 								</div>
-								<div class="gallery_btn" @click="openCanvas()" style="margin-left: auto;">
-									Canvas
+								<div class="gallery_btn white" @click="openCanvas()" style="margin-left: auto;">
+									{{ $t('Header.toolsCanvas') }}
 								</div>
 								
 								<!-- <div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
@@ -75,9 +75,9 @@
 												{{ $t('HomeView.SelectedDesign') }}
 												</span>
 										</div>
-										<div class="generalModel_state" v-show="domHidden || !recycleDomHidden">
+										<div class="generalModel_state" v-show="likeDesignTools">
 											<div v-show="isUnfold" class="generalModel_state_item smail" style="margin-right: 1rem;">
-												<span>Type :</span>
+												<span>{{ $t('Header.Type') }} :</span>
 												<a-select
 													v-model:value="resultType"
 													size="large"
@@ -89,11 +89,11 @@
 												</a-select>
 											</div>
 											<div class="generalModel_state_item smail" style="margin-right: 1rem;">
-												<span>Unfold :</span>
+												<span>{{ $t('Header.Unfold') }} :</span>
 												<a-switch v-model:checked="isUnfold" @change="setUnfold" />
 											</div>
 											<div class="generalModel_state_item smail" style="margin-right: 0;">
-												<span>Size :</span>
+												<span>{{ $t('Header.Size') }} :</span>
 												<a-select
 													v-model:value="widthValue.value"
 													size="large"
@@ -124,13 +124,14 @@
 														'like'
 													)">
 													<img class="content_img" 
-														v-if="design.resultType == 'PoseTransfer'" 
-														:src="design.firstFrameUrl" alt="" 
+														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>
+													<!-- <div :style="{'background-image': `url(${design?.designOutfitUrl||design?.url})`}" class="content_img" v-if="design?.designOutfitUrl||design?.url" :key="design?.designOutfitUrl" designType="like" :index="index"></div> -->
+													<img class="content_img" v-if="design?.designOutfitUrl||design?.url" :src="design?.designOutfitUrl||design?.url"
+														:key="design?.designOutfitUrl" designType="like" :index="index"/>
+													<a-spin v-show="!design?.designOutfitUrl && !design?.url && !design?.firstFrameUrl" size="large"></a-spin>
 
 													<!-- <div class="content_img_block_child" @click.stop>
 														<div class="content_img_block content_img_GetWidth active childItem"
@@ -159,7 +160,7 @@
 														</div>
 													</div> -->
 												</div>
-												<div class="btn" v-show="!design?.generateAwait">
+												<div class="btn" v-if="design?.designOutfitUrl||design?.url || design?.firstFrameUrl" v-show="!design?.generateAwait">
 													<i @click.stop="openEditBtn(design,index,$event)" class="fi fi-br-menu-dots-vertical"></i>
 													
 												</div>
@@ -227,19 +228,19 @@
 		</div>
 		<div ref="designBtn"  class="btnOpen" @click.stop="()=>openEditBtnId=-1" :class="{active:openEditBtnId == selectEditBtn?.designItemId||openEditBtnId == selectEditBtn?.id}">
 			<div class="item" v-show="selectEditBtn?.resultType == 'Design'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'ToProductImage','add','like')">
-				<div class="text">To Product Image</div>
+				<div class="text">{{$t('Header.toolsToProduct')}}</div>
 				<i class="fi fi fi-ss-box-open"></i>
 			</div>
 			<div class="item" v-show="selectEditBtn?.resultType == 'ToProductImage' || selectEditBtn?.resultType == 'Relight'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'Relight','add','like')">
-				<div class="text">Relight</div>
+				<div class="text">{{$t('Header.toolsRelight')}}</div>
 				<i class="fi fi fi-br-keyboard-brightness"></i>
 			</div>
 			<div class="item" v-show="selectEditBtn?.resultType == 'ToProductImage' || selectEditBtn?.resultType == 'Relight'" @click="setEditDesignType(selectLikeDesign,selectEditBtnIndex,'PoseTransfer','add','like')">
-				<div class="text">Transfer Pose</div>
+				<div class="text">{{$t('Header.toolsToTransferPose')}}</div>
 				<i class="fi fi fi-rr-play-alt"></i>
 			</div>
 			<div class="item" @click="dislikeDesignCollection(selectEditBtn,selectEditBtn?.resultType,selectEditBtnIndex)">
-				<div class="text">Delete</div>
+				<div class="text">{{$t('Header.Delete')}}</div>
 				<i class="fi fi-rr-trash icon_delete">
 				</i>
 			</div>
@@ -258,12 +259,12 @@
 		<DesignDetailcopy v-if="detailDestroy" ref="designDetail" @destroy="setDetailDestroy" @finishRedesign="finishRedesign"></DesignDetailcopy>
 		<editDesignType ref="editDesignType"
 			@addGenerateImg="addGenerateImg"
+			@setGenerateAwait="generateLoad"
 			:productData="{
 				upload:upload,
 				RelightDirection:RelightDirection,
 				RelightDirectionList:RelightDirectionList,
 			}" 
-			@setGenerateAwait="setGenerateAwait"
 			:isProductimg="true"></editDesignType>
 		<designTools ref="designTools" @editToolsSuccess="editToolsSuccess"></designTools>
 	</div>
@@ -280,6 +281,7 @@ import DesignDetailcopy from "@/component/DetailCopy/designDetail.vue";
 import html2canvas from "html2canvas";
 import { message,Modal } from "ant-design-vue";
 import { useStore } from "vuex";
+import { setGradual } from "@/tool/util";
 import { Https } from "@/tool/https";
 import { openGuide,driverObj__ } from "@/tool/guide";
 import { LoadingOutlined ,ExclamationCircleOutlined} from "@ant-design/icons-vue";
@@ -312,22 +314,23 @@ export default defineComponent({
   },
   props:['isState'],
 	setup(props,{emit}) {
+		const {t} = useI18n()
 		const store = useStore();
 		const editDesignType = reactive({
 			upload:{id:store.state.Workspace.probjects.id},
 			RelightDirectionList:[
 				{
 					value:'Right Light',
-					label:useI18n().t('ProductImg.RightLight')
+					label:t('ProductImg.RightLight')
 				},{
 					value:'Left Light',
-					label:useI18n().t('ProductImg.LeftLight')
+					label:t('ProductImg.LeftLight')
 				},{
 					value:'Top Light',
-					label:useI18n().t('ProductImg.TopLight')
+					label:t('ProductImg.TopLight')
 				},{
 					value:'Bottom Light',
-					label:useI18n().t('ProductImg.BottomLight')
+					label:t('ProductImg.BottomLight')
 				}
 			],
 			RelightDirection:'Right Light'
@@ -406,20 +409,20 @@ export default defineComponent({
 		let speed = reactive({
 			speedList:[
 				{
-					label:'To Product Image',
+					label:computed(()=>t('Header.toolsToProduct')),
 					value:'toProduct',
 
 				},{
-					label:'Transfer Pose',
+					label:computed(()=>t('Header.toolsToTransferPose')),
 					value:'poseTransfer',
 				},{
-					label:'Relight',
+					label:computed(()=>t('Header.toolsRelight')),
 					value:'relight',
 				},
 			],
 			speedState:false,
 			speedData:{
-				label:'To Product Image',
+				label:computed(()=>t('Header.toolsToProduct')),
 				value:'toProduct',
 			},
 		})
@@ -454,13 +457,13 @@ export default defineComponent({
 			likeLoading: false, //喜欢防抖
 			widthList:[
 				{
-					label:'Medium',
+					label:t('Header.Small'),
 					value:170,
 				},{
-					label:'Large',
+					label:t('Header.Medium'),
 					value:250,
 				},{
-					label:'Extra-large',
+					label:t('Header.Large'),
 					value:400,
 				}
 			],
@@ -470,36 +473,35 @@ export default defineComponent({
 			//类型
 			resultTypeList:[
 				{
-					label:'All',
+					label:t('Header.All'),
 					value:'All',
 				},{
-					label:'Design',
+					label:t('Header.Design'),
 					value:'Design',
 				},{
-					label:'Product',
+					label:t('Header.Product'),
 					value:'Product',
 				},
 				// ,{
-				// 	label:'To Product Image',
-				// 	value:'ToProductImage',
-				// },{
-				// 	label:'Relight',
-				// 	value:'Relight',
-				// },
 				{
-					label:'Pose Transfer',
+					label:t('Header.PoseTransfer'),
 					value:'PoseTransfer',
 				},
 			],
 			resultType:'All',
-			oldSelectLikeDesign:null as any
+			oldSelectLikeDesign:null as any,
+			likeDesignTools:false,
 		})
 		watch(()=>likeDesignCollectionList.value.length,(val)=>{
-			if(val>0)uploadLikeDom()
+			if(val>0){
+				uploadLikeDom()
+			}else{
+				designData.selectLikeDesign = []
+
+			}
 		})
 		provide('exportNav',exportNav)
 		let isShowOperate = ref(false)
-		let {t} = useI18n()
 		let driver__:any = computed(()=>{
 			return store.state.Guide.guide
 		})
@@ -853,8 +855,12 @@ export default defineComponent({
 				userGroupId:data.userGroupId || data.id,
 				firstFrameUrl:data.firstFrameUrl,
 				gifUrl:data.gifUrl,
+				awaitId:data.awaitId,
+				taskId:data.taskId,
 				parentId:data.parentId || data.userLikeSortId,	
+				videoUrl:data?.videoUrl,	
 			}
+
 			let list = []
 			if(data.listType == 'disLike'){
 				list = designCollectionList.value
@@ -882,11 +888,23 @@ export default defineComponent({
 						}
 					})
 				}
-				list[data.isIndex].designOutfitUrl = obj.designOutfitUrl
-				list[data.isIndex].resultType = obj.resultType
-				list[data.isIndex].id = obj.id
-				list[data.isIndex].designItemId = obj.designItemId
-				list[data.isIndex].sourceUrl = obj.sourceUrl
+				list.forEach((item)=>{
+					if(data.parentId == item.userLikeSortId){
+						item.childList.forEach((childItem)=>{
+							if(childItem.id == data.awaitId){
+								childItem.designOutfitUrl = obj.designOutfitUrl
+								childItem.resultType = obj.resultType
+								childItem.id = obj.id
+								childItem.designItemId = obj.designItemId
+								childItem.sourceUrl = obj.sourceUrl
+							}
+						})
+					}
+				})
+				nextTick().then(()=>{
+					uploadLikeDom()
+				})
+				
 			}
 			// nextTick().then(()=>{
 			// 	// setDesignItemStyle()
@@ -936,10 +954,27 @@ export default defineComponent({
 			Https.axiosPost(url, data,{params:params.likeOrDislike?params:''}).then(
 				(rv) => {
 					if(str == 'like'){
+						// likeDesignCollectionList.value.forEach((item)=>{
+						// 	if(item.userLikeSortId == designData.selectDesign.userLikeSortId){
+						// 		// if(item?.childList.)
+						// 		item.unshift(data)
+						// 	}
+						// })
+						// if(){
+
+						// }else{
+
+						// }
 						likeDesignCollectionList.value.forEach((item:any)=>{
 							if(item.resultType == 'Design' && item.userLikeSortId == designData.selectDesign.userLikeSortId){
 								if(!item?.childList)item.childList = []
-								item.childList.push(design)
+								// if(item?.childList)
+								const removeIndex = item?.childList.findIndex(childItem => childItem?.taskId === design?.taskId);
+								if (removeIndex !== -1) {
+									item.childList[removeIndex] = design
+								}else{
+									item.childList.push(design)
+								}
 							}
 						})
 					}else{
@@ -1033,14 +1068,28 @@ export default defineComponent({
 		const upDataLikeListType = ()=>{
 
 		}
-		const setGenerateAwait = (data:any)=>{
+		const generateLoad = (data:any)=>{
+			if(!data.taskId)return
 			let list = []
 			if(data.listType == 'disLike'){
 				list = designCollectionList.value
 			}else{
+				// list = designData.selectLikeDesign
 				list = likeDesignCollectionList.value
 			}
-			list[data.index].generateAwait = true;
+			list.forEach((item)=>{
+				if(data.parentId == item.userLikeSortId){
+					const removeIndex = item?.childList.findIndex(childItem => childItem?.taskId === data?.taskId);
+					if(removeIndex == -1){
+						item.childList.push(data)
+					}
+				}
+			})
+			nextTick().then(()=>{
+				designData.isUnfold = true
+				uploadLikeDom()
+			})
+			// list[data.index].generateAwait = true;
 
 		}
 		const gifPlay = (e:any,item:any)=>{
@@ -1163,6 +1212,7 @@ export default defineComponent({
 			openEditTools,
 			openCanvas,
 			editToolsSuccess,
+			uploadLikeDom,
 
 			likeItemDom,
 			collItemDom,
@@ -1185,7 +1235,7 @@ export default defineComponent({
 			addGenerateImg,
 			setNoDesignLike,
 			upDataLikeListType,
-			setGenerateAwait,
+			generateLoad,
 			gifPlay,
 			gifPause,
 			startHover,
@@ -1245,24 +1295,24 @@ export default defineComponent({
 		this.observerData.observer.unobserve(this.$refs.rightContentBlockBox);
 	},
 	async mounted() {
-		if(window.innerWidth < 1200){
-			this.widthList = [
-				{
-					label:'Medium',
-					value:70,
-				},{
-					label:'Large',
-					value:150,
-				},{
-					label:'Extra-large',
-					value:200,
-				}
-			]	
-			this.widthValue = {
-					label:'Medium',
-					value:70,
-				}
-		}
+		// if(window.innerWidth < 1200){
+		// 	this.widthList = [
+		// 		{
+		// 			label:'Medium',
+		// 			value:70,
+		// 		},{
+		// 			label:'Large',
+		// 			value:150,
+		// 		},{
+		// 			label:'Extra-large',
+		// 			value:200,
+		// 		}
+		// 	]	
+		// 	this.widthValue = {
+		// 			label:'Medium',
+		// 			value:70,
+		// 		}
+		// }
 		window.addEventListener('beforeunload', (event)=>{
 			this.store.commit("clearAllCollection");
 		});
@@ -1272,7 +1322,13 @@ export default defineComponent({
 		this.observerData.observer = new ResizeObserver(entries => {
 			for (let entry of entries) {
 				clearTimeout(this.observerData.time)
+				if(entries[0].contentRect.width > 800){
+					this.likeDesignTools = true
+				}else{
+					this.likeDesignTools = false
+				}
 				this.observerData.time = setTimeout(()=>{
+					
 					this.setSystemDesigner(0)
 					this.setDesignItemStyle()
 				},100)
@@ -1359,9 +1415,9 @@ export default defineComponent({
 			}
 		},
 		//设计新的collection
-		designNewCollection() {
+		async designNewCollection() {
 			clearTimeout(this.getDesignTime);
-			let data = this.getDesignData("");
+			let data = await this.getDesignData("");
 			if(this.driver__.driver){
 				nextTick().then(()=>{
 					driverObj__.moveNext();
@@ -1467,7 +1523,7 @@ export default defineComponent({
 			}).catch(()=>this.showDesignMark = false)
 		},
 		//重新设计collection
-		resDesignCollection() {
+		async resDesignCollection() {
 			if(this.driver__.driver){
 				nextTick().then(()=>{
 					driverObj__.moveNext();
@@ -1475,7 +1531,7 @@ export default defineComponent({
 			}
 			clearTimeout(this.getDesignTime);
 			this.isShowMark = true
-			let data = this.getDesignData(this.designCollectionId);
+			let data = await this.getDesignData(this.designCollectionId);
 			Https.axiosPost(Https.httpUrls.reDesignCollection, data)
 				.then((rv: any) => {
 					if (rv) {
@@ -1498,7 +1554,7 @@ export default defineComponent({
 
 		},
  
-		getDesignData(designCollectionId: any) {
+		async getDesignData(designCollectionId: any) {
 			let {
 				moodboardFiles,
 				printboardFiles,
@@ -1521,7 +1577,7 @@ export default defineComponent({
 				modelList.push(obj)
 			})
 			let data: any = {
-				colorBoards: this.getColorBoard(colorBoards),
+				colorBoards: await this.getColorBoard(colorBoards),
 				// marketingSketchs: this.getBoardId(marketingSketchFiles),
 				moodBoards: this.getBoardId(moodboardFiles),
 				printBoards: this.getPrintId(printboardFiles),
@@ -1603,17 +1659,25 @@ export default defineComponent({
 
 		getColorBoard(boardData: any) {
 			boardData = boardData || []
-			let colorBoards = boardData.map((v: any) => {
-				let data = {
-					id: v.id,
-					name: v.name,
-					tcx: v.tcx,
-					gradient:v.gradient,
-					rgbValue: "",
-				};
-				data.rgbValue = `${v.rgbValue.r} ${v.rgbValue.g} ${v.rgbValue.b}`;
-				return data;
-			});
+			let colorBoards = [] as any
+			for (let index = 0; index < boardData.length; index++) {
+				new Promise(async (resolve,reject)=>{
+					const item = boardData[index];
+					if(item.gradient){
+						item.gradient.colorImg = await setGradual(item.gradient,320,700)
+					}
+					let data = {
+						id: item.id,
+						name: item.name,
+						tcx: item.tcx,
+						gradient:item.gradient,
+						rgbValue: "",
+					};
+					data.rgbValue = `${item.rgbValue.r} ${item.rgbValue.g} ${item.rgbValue.b}`;
+					colorBoards.push(data);
+					resolve('')
+				})
+			}
 			return colorBoards;
 		},
 		deleteDesignCollection(list:any,index:any){
@@ -1870,6 +1934,7 @@ export default defineComponent({
 		    // let designDetail: any = this.$refs.designDetail;
 			// designDetail.destroy();
 			this.detailDestroy = false
+			this.uploadLikeDom()
 		},
 		//打开图片详情
 		designDetail(
@@ -1939,7 +2004,7 @@ export default defineComponent({
 		
 		.designPage_left_bottom{
 			position: absolute;
-			width: 4rem;
+			width: 3rem;
 			height: 7rem;
 			background: #fff;
 			border: 2px solid;
@@ -1953,6 +2018,10 @@ export default defineComponent({
 			justify-content: center;
 			z-index: 2;
 			cursor: pointer;
+			transition: width .3s;
+			&:hover{
+				width: 4rem;
+			}
 			>span{
 				transition: all .3s;
 				transform: rotate(90deg);
@@ -2102,11 +2171,9 @@ export default defineComponent({
 						// top: calc(50% - 10.4rem / 2);
 						border: 2px solid;
 						border-left: none;
-						background: #000;
-						color: #fff;
 						flex-direction: column;
 						&.active{
-							right: 53rem;
+							left: 44rem;
 							transform: translate(0, -50%);
 						}
 					}
@@ -2340,11 +2407,17 @@ export default defineComponent({
 											display: flex;
 											align-items: center;
 											justify-content: center;
+											text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
+											color: #fff;
+											font-size: 1.7rem;
 										}
 										
 										.icon_like,.icon_delete {
 											font-size: 1.4rem;
 											cursor: pointer;
+											text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
+											color: #fff;
+											font-size: 1.7rem;
 										}
 									}