合并画布，部分样式调整

2025-06-26 15:41:08 +08:00
parent fd05c70937
commit fc6d8d4c8d
75 changed files with 1772 additions and 672 deletions
--- a/src/component/Account/account.vue
+++ b/src/component/Account/account.vue
@@ -134,7 +134,7 @@ export default defineComponent({
 					route:'/home/account/accountMessage',
 					icon:'fi-rr-envelope'
 				},{
-					name:`${t('account.Follow')} ${t('account.Fans')}`,
+					name:`${t('account.FollowFans')}`,
 					route:'/home/account/accountFollowFans',
 					icon:'fi-rr-users-alt'
 				},
@@ -266,7 +266,8 @@ export default defineComponent({
 .account_page{
 	height: 100%;
 	// overflow-y: auto;
-	padding: 0 7rem;
+	padding: 0 26rem;
+	// padding: 0 7rem;
 	padding-top: 4rem;
 	display: flex;
 	overflow: hidden;
@@ -286,25 +287,28 @@ export default defineComponent({
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
-			margin-bottom: 7rem;
+			margin-bottom: 4rem;
 			.content_item_user_left{
 				display: flex;
 				.content_item_user_left_detail{
 					position: relative;
+					> .modal_title_text{
+						font-size: var(--aida-fsize1-6);
+					}
 					> .upload_box{
 						position: absolute;
 						bottom: 0;
 						right: 0;
 						> i{
-							width: 4rem;
-							height: 4rem;
+							width: 3rem;
+							height: 3rem;
 							display: flex;
 							align-items: center;
 							justify-content: center;
 							border-radius: 50%;
 							background: rgba(0,0,0,.5);
 							color: #fff;
-							font-size: 2rem;
+							font-size: 1.6rem;
 						}
 						> .upload{
 							position: absolute;
@@ -346,8 +350,9 @@ export default defineComponent({
 								align-items: center;
 								> i{
 									font-weight: 600;
-									font-size: 2.2rem;
+									font-size: 1.6rem;
 									cursor: pointer;
+									display: flex;
 									&.fi-br-check{
 										width: 3rem;
 										height: 3rem;
@@ -368,15 +373,17 @@ export default defineComponent({
 					}
 					img{
 						border-radius: 50%;
-						width: 10rem;
-						height: 10rem
+						width: 8rem;
+						height: 8rem;
 					}
 					.content_item_user_left_detail_bottom{
 						display: flex;
 						font-size: 1.8rem;
 						>div{
+							display: flex;
 							font-weight: 900;
 							width: 10rem;
+							margin-right: 2rem;
 							span{
 								font-weight: 600;
 								color: rgba(0,0,0,.45);
@@ -394,9 +401,10 @@ export default defineComponent({
 			flex: 1;
 			overflow: hidden;
 			.account_page_content_left{
-				width: 24rem;
+				width: 18rem;
 				text-align: center;
-				margin-right: 10rem;
+				margin-right: 2rem;
+				padding: 12px 0;
 			}
 			.account_page_content_right{
 				flex: 1;
@@ -419,7 +427,7 @@ export default defineComponent({
 			.content_left_item{
 				display: flex;
 				align-items: center;
-				height: 6rem;
+				height: 5rem;
 				color: #232323;
 				div{
 					white-space: nowrap;
@@ -427,11 +435,11 @@ export default defineComponent({
 					color: #999999;
 					// text-align-last: justify;
 					text-align: left;
-					font-size: 2rem;
+					font-size: 1.6rem;
 				}
 				i{
 					color: #cfcfcf;
-					font-size: 2rem;
+					font-size: 1.6rem;
 					display: flex;
 					margin: 0 2rem;
 				}
@@ -468,6 +476,7 @@ export default defineComponent({
 	}
 	.account_generalMessage_title_setting{
 		cursor: pointer;
+		font-size: var(--aida-fsize1-6);
 		margin-left: auto
 	}
 	.account_generalMessage_title_seach{
@@ -496,7 +505,7 @@ export default defineComponent({
 		border-radius: 0px;
 		justify-content: space-between;
 		align-items: center;
-		padding: 2rem 5rem;
+		padding: 1.5rem 5rem;
 		border: none;
 		border-bottom: 1px solid #e9eaec;
 		box-shadow: none;
--- a/src/component/Account/accountFollowFans.vue
+++ b/src/component/Account/accountFollowFans.vue
@@ -134,7 +134,7 @@ export default defineComponent({
 		padding-bottom: 3rem;
 		height: 100%;
 		:deep(.ant-badge){
-			font-size: var(--aida-fsize2);
+			font-size: var(--aida-fsize1-8);
 		}
 		:deep(.ant-tabs-nav){
 			padding: 0rem 5rem;
@@ -144,7 +144,7 @@ export default defineComponent({
 			.ant-tabs-nav-wrap{
 				.ant-tabs-tab-btn{
 					color: #000;
-					font-size: 2.4rem;
+					font-size: var(--aida-fsize1-6);
 				}
 				.ant-tabs-tab-active{
 					.ant-tabs-tab-btn{
--- a/src/component/Account/accountMessage.vue
+++ b/src/component/Account/accountMessage.vue
@@ -177,7 +177,7 @@ export default defineComponent({
 	.account_message_body{
 		padding-bottom: 3rem;
 		:deep(.ant-badge){
-			font-size: var(--aida-fsize2);
+			font-size: var(--aida-fsize1-8);
 		}
 		:deep(.ant-tabs-nav){
 			padding: 0rem 5rem;
@@ -186,7 +186,7 @@ export default defineComponent({
 			}
 			.ant-tabs-nav-wrap{
 				.ant-tabs-tab-btn{
-					font-size: 2.4rem;
+					font-size: var(--aida-fsize1-6);
 				}
 				.ant-tabs-tab-active{
 					.ant-tabs-tab-btn{
--- a/src/component/Account/followFans/fans.vue
+++ b/src/component/Account/followFans/fans.vue
@@ -3,7 +3,7 @@
 		<div class="account_generalMessage_title modal_title_text">
 			<span class="account_generalMessage_title_seach">
 				<input class="gallery_input" type="text" :placeholder="$t('LibraryPage.jsContent7')" @keydown.enter="searchFollowFansList" v-model="getListData.seachContent">
-				<div class="gallery_btn" style="margin-left: 2rem;" @click="searchFollowFansList">Search</div>
+				<div class="gallery_btn" style="margin-left: 2rem;line-height: 4rem;" @click="searchFollowFansList">Search</div>
 			</span>
 		</div>
 		<div class="account_generalMessage_center modal_title_text">
@@ -13,8 +13,8 @@
 						<img :src="item.avatar" alt="">
 					</div>
 					<div class="account_generalMessage_item_right_title">
-						<div class="">{{ item.userName }}</div>
-						<div class="modal_title_text_intro">{{ item.createTime }}</div>
+						<div style="font-size: 1.8rem" class="">{{ item.userName }}</div>
+						<div style="font-size: 1.4rem" class="modal_title_text_intro">{{ item.createTime }}</div>
 					</div>
 				</div>
 				<div class="account_generalMessage_item_left">
@@ -143,8 +143,8 @@ export default defineComponent({
 				display: flex;
 				align-items: center;
 				.account_generalMessage_item_right_img{
-					width: 8rem;
-					height: 8rem;
+					width: 6rem;
+					height: 6rem;
 					margin-right: 2rem;
 					cursor: pointer;
 					img{
@@ -160,6 +160,7 @@ export default defineComponent({
 					border-radius: 4rem;
 					border: 2px solid #e9eaec;
 					cursor: pointer;
+					font-size: 1.8rem;
 				}
 			}
 		}
--- a/src/component/Account/followFans/follow.vue
+++ b/src/component/Account/followFans/follow.vue
@@ -9,7 +9,7 @@
 			</span> -->
 			<span class="account_generalMessage_title_seach">
 				<input class="gallery_input" type="text" :placeholder="$t('LibraryPage.jsContent7')" @keydown.enter="searchFollowFansList" v-model="getListData.seachContent">
-				<div class="gallery_btn" style="margin-left: 2rem;" @click="searchFollowFansList">Search</div>
+				<div class="gallery_btn" style="margin-left: 2rem;line-height: 4rem;" @click="searchFollowFansList">Search</div>
 			</span>
 		</div>
 		<div class="account_generalMessage_center modal_title_text">
@@ -20,8 +20,8 @@
 						<img :src="item.avatar" alt="">
 					</div>
 					<div class="account_generalMessage_item_right_title">
-						<div class="">{{ item.userName }}</div>
-						<div class="modal_title_text_intro">{{ item.createTime }} </div>
+						<div style="font-size: 1.8rem" class="">{{ item.userName }}</div>
+						<div style="font-size: 1.4rem" class="modal_title_text_intro">{{ item.createTime }} </div>
 					</div>
 				</div>
 				<div class="account_generalMessage_item_left">
@@ -151,8 +151,8 @@ export default defineComponent({
 				display: flex;
 				align-items: center;
 				.account_generalMessage_item_right_img{
-					width: 8rem;
-					height: 8rem;
+					width: 6rem;
+					height: 6rem;
 					margin-right: 2rem;
 					cursor: pointer;
 					img{
@@ -168,6 +168,7 @@ export default defineComponent({
 					padding: .5rem 2rem;
 					border-radius: 4rem;
 					border: 2px solid #e9eaec;
+					font-size: 1.8rem;
 					cursor: pointer;
 				}
 			}
--- a/src/component/Account/frontPage.vue
+++ b/src/component/Account/frontPage.vue
@@ -131,7 +131,7 @@ export default defineComponent({
 		padding-bottom: 3rem;
 		height: 100%;
 		:deep(.ant-badge){
-			font-size: var(--aida-fsize2);
+			font-size: var(--aida-fsize1-8);
 		}
 		:deep(.ant-tabs-content){
 			height: 100%;
@@ -141,13 +141,13 @@ export default defineComponent({
 		}
 		:deep(.ant-tabs-nav){
 			padding: 0rem 5rem;
-			margin-bottom: 6rem;
+			margin-bottom: 3rem;
 			&::before{
 			    display: none;
 			}
 			.ant-tabs-nav-wrap{
 				.ant-tabs-tab-btn{
-					font-size: 2.4rem;
+					font-size: var(--aida-fsize1-6);
 				}
 				.ant-tabs-tab-active{
 					.ant-tabs-tab-btn{
--- a/src/component/Account/frontPage/bindPage.vue
+++ b/src/component/Account/frontPage/bindPage.vue
@@ -220,15 +220,15 @@ export default defineComponent({
 		.bind_item{
 			margin-bottom: 4rem;
 			>.title{
-				font-size: 2rem;
-				margin-bottom: 2rem;
+				font-size: 1.6rem;
+				margin-bottom: 1.5rem;
 				font-weight: 600;
 			}
 			>.box{
 				width: 100%;
 				border: 2px solid #000;
 				border-radius: 2rem;
-				padding: 3rem;
+				padding: 2rem;
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
--- a/src/component/Account/frontPage/mylnformation.vue
+++ b/src/component/Account/frontPage/mylnformation.vue
@@ -162,7 +162,7 @@ export default defineComponent({
 		// width: 85rem;
 		.accountEdit_page_body_item{
 			display: flex;
-			margin-bottom: 20px;
+			margin-bottom: 2rem;
 			flex-direction: column;
 			width: 100%;
 			align-items: flex-start;
@@ -183,9 +183,9 @@ export default defineComponent({
 			.accountEdit_page_body_item_name{
 				color: #000;
 				text-align: left;
-				font-size: 2rem;
+				font-size: 1.6rem;
 				font-weight: 600;
-				margin-bottom: 1.5rem;
+				margin-bottom: 1rem;
 			}
 		}
 		.accountEdit_page_body_item:last-child{
--- a/src/component/Account/message/comment.vue
+++ b/src/component/Account/message/comment.vue
@@ -154,13 +154,14 @@ export default defineComponent({
 			margin-right: 1rem;
 			.account_generalMessage_item_right_works{
 				cursor: pointer;
+				font-size: 1.4rem;
 			}
 			.account_generalMessage_item_right_works:hover{
 				text-decoration: underline;
 			}
 			.account_generalMessage_item_right_img{
-				width: 8rem;
-				height: 8rem;
+				width: 6rem;
+				height: 6rem;
 				margin-right: 2rem;
 				flex-shrink: 0;
 				cursor: pointer;
@@ -180,11 +181,13 @@ export default defineComponent({
 					-webkit-box-orient: vertical;
 					-webkit-line-clamp: 2;
 					overflow: hidden;
+					font-size: 1.4rem;
 				}
 				.account_generalMessage_item_right_title_name{
 					font-weight: 600;
 					font-weight: 500;
 					color: #000;
+					font-size: 1.8rem;
 					span{
 						font-weight: 500;
 						color: #9999aa;
--- a/src/component/Account/message/likeMessage.vue
+++ b/src/component/Account/message/likeMessage.vue
@@ -13,7 +13,7 @@
 					</div>
 					<div class="account_generalMessage_item_right_title">
 						<div class="account_generalMessage_item_right_title_name">{{ item.userName }} <span>{{$t('account.likedYourWork')}}</span></div>
-						<div>{{ item.portfolioName }}</div>
+						<div style="font-size: 1.4rem">{{ item.portfolioName }}</div>
 					</div>
 				</div>
 				<div class="account_generalMessage_item_left">
@@ -145,8 +145,8 @@ export default defineComponent({
 				align-items: center;
 				margin-right: 1rem;
 				.account_generalMessage_item_right_img{
-					width: 8rem;
-					height: 8rem;
+					width: 6rem;
+					height: 6rem;
 					margin-right: 2rem;
 					flex-shrink: 0;
 					cursor: pointer;
@@ -162,6 +162,7 @@ export default defineComponent({
 						font-weight: 600;
 						font-weight: 500;
 						color: #000;
+						font-size: 1.8rem;
 						span{
 							font-weight: 500;
 							color: #9999aa;
--- a/src/component/Account/message/newFollow.vue
+++ b/src/component/Account/message/newFollow.vue
@@ -12,8 +12,8 @@
 						<img :src="item.avatar" alt="">
 					</div>
 					<div class="account_generalMessage_item_right_title">
-						<div class="">{{ item.userName }}</div>
-						<div class="modal_title_text_intro">{{ item.createTime }} {{$t('account.followedYou')}}</div>
+						<div class="" style="font-size: 1.8rem;">{{ item.userName }}</div>
+						<div class="modal_title_text_intro" style="font-size: 1.6rem;">{{ item.createTime }} {{$t('account.followedYou')}}</div>
 					</div>
 				</div>
 				<div class="account_generalMessage_item_left">
@@ -153,8 +153,8 @@ export default defineComponent({
 				display: flex;
 				align-items: center;
 				.account_generalMessage_item_right_img{
-					width: 8rem;
-					height: 8rem;
+					width: 6rem;
+					height: 6rem;
 					margin-right: 2rem;
 					cursor: pointer;
 					img{
@@ -171,6 +171,7 @@ export default defineComponent({
 					border-radius: 4rem;
 					border: 2px solid #e9eaec;
 					cursor: pointer;
+					font-size: 1.8rem;
 				}
 			}
 		}
--- a/src/component/Account/message/system.vue
+++ b/src/component/Account/message/system.vue
@@ -119,6 +119,7 @@ export default defineComponent({
 .account_systemMessage{
 	width: 100%;
 	.account_generalMessage_item{
+		font-size: var(--aida-fsize1-6);
 		.account_generalMessage_item_title{
 			display: flex;
 			align-items: center;
--- a/src/component/Canvas/ExistsImageList/index.vue
+++ b/src/component/Canvas/ExistsImageList/index.vue
@@ -391,7 +391,7 @@ const handleImageError = (event) => {
  img {
    width: 100%;
    height: 100%;
-    object-fit: cover;
+    object-fit: contain;
    transition: transform 0.2s ease;
  }

--- a/src/component/DetailCopy/canvas/index.vue
+++ b/src/component/DetailCopy/canvas/index.vue
@@ -18,9 +18,10 @@
 					<tool ref="tool" class="tool" v-if="canvasObj.id || frontBackCanvasObj.id" @toolLiquefaction="toolLiquefaction" @editFront="editFront" :isEditFrontBack="isEditFrontBack"></tool>
 				</div> -->
 				<div class="contet">
-					<div class="canvas" v-show="!isEditFrontBack" @click.stop>
+					<div class="canvas" v-if="!isEditFrontBack" @click.stop>
 						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
 							:clothingImageUrl="selectDetail.undividedLayer" 
+							isFixedErasable
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
@@ -34,7 +35,7 @@
 							
 							ref="editFrontBack">
 						</editFrontBack> -->
-						<editCanvas v-if="isEditFrontBack" :config="canvasConfig" 
+						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
 							:enabledRedGreenMode="true"
 							:clothingImageUrl="selectDetail.undividedLayer" 
 							:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
@@ -50,8 +51,8 @@
 					<div class="gallery_btn" @click="privewDetail">Finish</div>
 				</div> -->
 			</div>
-			<div class="Finish">
-				<div class="gallery_btn" @click="editFront">EditFrontBack</div>
+			<div class="Finish" style="text-align: right;margin-top:1rem;">
+				<div class="gallery_btn" style="line-height: 4rem;padding: 0 1rem;" @click="editFront">EditFrontBack</div>
 			</div>
 		 </div>
 		
@@ -90,6 +91,7 @@ export default defineComponent({
 			editFrontBack:null as any,
 			model:null,
 			editCanvas:null as any,
+			editCanvasBackFront:null as any,
 			canvasContent:null as any,
 		})
 		const userDetail = computed(()=>{
@@ -134,24 +136,52 @@ export default defineComponent({
 			setLiquefaction()
 		}
 		const editFront = ()=>{//编辑前后片
+
+			let canvasJSON = '' as any
+			if(!detailData.isEditFrontBack){
+				sessionStorage.setItem('sketchEdit',detailDom.editCanvas.getJSON())
+				canvasJSON = sessionStorage.getItem('frontBackEdit');
+			}else{
+				sessionStorage.setItem('frontBackEdit',detailDom.editCanvasBackFront.getJSON())
+				canvasJSON = sessionStorage.getItem('sketchEdit');
+			}
+			detailData.canvasLoad = false
 			detailData.isEditFrontBack = !detailData.isEditFrontBack
-			if(detailData.isEditFrontBack){
+			if(canvasJSON){
+				detailData.canvasLoad = true
 				nextTick(()=>{
-					setCanvas(detailData.frontBack.front[detailData.imgDomIndex].maskUrl).then(()=>{
-						detailData.isEditFrontBack = true
-					})
-			    	// detailDom.editFrontBack.init(detailData.frontBack.front[detailData.imgDomIndex],'')
-				    // detailData.canvasObj.currentOperation = false
-				    // detailData.frontBackCanvasObj.currentOperation = true
+					if(!detailData.isEditFrontBack){
+						detailDom.editCanvas.loadJSON(canvasJSON)
+					}else{
+						detailDom.editCanvasBackFront.loadJSON(canvasJSON)
+					}
 				})
 			}else{
-				// detailData.canvasObj.currentOperation = true
-				// detailData.frontBackCanvasObj.currentOperation = false
+				if(!detailData.isEditFrontBack){
+					nextTick(()=>{
+						setCanvas(detailData.selectDetail.undividedLayer).then(()=>{
+							detailData.canvasLoad = true
+						})
+					})
+				}else{
+					nextTick(()=>{
+						setCanvas(detailData.frontBack.front[detailData.imgDomIndex].maskUrl).then(()=>{
+							detailData.canvasLoad = true
+						})
+					})
+				}
 			}
 		}
 		const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
-			let data = await detailData.canvasObj.detailSubmit()
-			if(oldSelectDetail.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = data
+			return new Promise((res,reject)=>{
+				detailDom.editCanvas.exportImage({isContainBg:false,isContainFixed:true}).then((rv)=>{
+					// let data = await detailData.canvasObj.detailSubmit()
+					if(oldSelectDetail.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = rv
+					res('')
+				})
+			})
+			
+			
 		}
 		const setFrontBackColor = (data:any)=>{
 			detailDom.editFrontBack.setBackground(data)
@@ -164,9 +194,6 @@ export default defineComponent({
 					let domHeight = detailDom.canvasContent.offsetHeight - 200
 					let imgHeight = img.height
 					wH = [1,domHeight/imgHeight]
-					console.log(domHeight,img.height,img.width)
-					console.log(detailData.selectDetail.undividedLayer)
-					console.log(detailData.canvasConfig)
 					detailData.canvasConfig.width = img.width * wH[1]
 					detailData.canvasConfig.height = domHeight

@@ -189,6 +216,9 @@ export default defineComponent({

 		}
 		onBeforeUnmount(()=>{
+			console.log(12312)
+			sessionStorage.removeItem('frontBackEdit');
+			sessionStorage.removeItem('sketchEdit');
 			detailData.canvasLoad = false
 			privewDetail()
 		})
--- a/src/component/DetailCopy/designDetail.vue
+++ b/src/component/DetailCopy/designDetail.vue
@@ -25,23 +25,23 @@
 					<div class="nav_list">
 						<div class="nav_item" :class="{active:currentDetailType == 'sketch'}" @click="setCurrentDetail('sketch')">
 							<img src="@/assets/images/icon/details_sketch.png" alt="">
-							<div class="detailText">Apparel</div>
+							<div class="detailText">{{$t('DesignPrintOperation.Apparel')}}</div>
 						</div>
 						<div class="nav_item" :class="{active:currentDetailType == 'print'}" @click="setCurrentDetail('print')">
 							<img src="@/assets/images/icon/details_print.png" alt="">
-							<div class="detailText">Print</div>
+							<div class="detailText">{{$t('DesignPrintOperation.Print')}}</div>
 						</div>
 						<div class="nav_item" :class="{active:currentDetailType == 'color'}" @click="setCurrentDetail('color')">
 							<img src="@/assets/images/icon/details_color.png" alt="">
-							<div class="detailText">Color</div>
+							<div class="detailText">{{$t('DesignPrintOperation.Color')}}</div>
 						</div>
 						<div class="nav_item" :class="{active:currentDetailType == 'element'}" @click="setCurrentDetail('element')">
 							<img src="@/assets/images/icon/details_elements.png" alt="">
-							<div class="detailText">Elements</div>
+							<div class="detailText">{{$t('DesignPrintOperation.Elements')}}</div>
 						</div>
 						<div class="nav_item" :class="{active:currentDetailType == 'models'}" @click="setCurrentDetail('models')">
 							<img src="@/assets/images/icon/details_model.svg" alt="">
-							<div class="detailText">Model</div>
+							<div class="detailText">{{$t('DesignPrintOperation.Model')}}</div>
 						</div>
 					</div>
 				</div>
@@ -60,8 +60,8 @@
 						@oppositeRevocation="oppositeRevocation"
 					></model>
 					<div class="btn">
-						<div class="gallery_btn" @click="submit">Submit</div>
-						<div class="gallery_btn" @click="previwe">Preview</div>
+						<div class="gallery_btn" @click="submit">{{$t('DesignPrintOperation.Submit')}}</div>
+						<div class="gallery_btn" @click="previwe">{{$t('DesignPrintOperation.Preview')}}</div>
 					</div>
 				</div>
 				<div class="item detailRight">
--- a/src/component/DetailCopy/detailLeft/colorBox/index.vue
+++ b/src/component/DetailCopy/detailLeft/colorBox/index.vue
@@ -1,10 +1,10 @@
 <template>
    <div class="color">
-		<div class="detailText">Current color</div>
+		<div class="detailText">{{$t('DesignPrintOperation.CurrentColor')}}</div>
 		<div class="pallet">
 			<pallet :selectColor="selectColor" @selectUplpadColor="selectUplpadColor"></pallet>
 		</div>
-		<div class="detailText">Color pelette</div>
+		<div class="detailText">{{$t('DesignPrintOperation.Colorpelette')}}</div>
 		<div class="colorBox">
 			<div v-for="item,index in colorList.list[selectDetail.id]" @click="setSelectColor(item,index)" class="colorBoxItem" :class="{active:colorList.index == index}">
 				<div v-if="item" class="box">
@@ -15,18 +15,18 @@
 				</div>
 			</div>
 		</div>
-		<div class="detailText">Choose color from image</div>
+		<div class="detailText">{{$t('DesignPrintOperation.Colorfromimage')}}</div>
 		<div class="uploadImage">
 			<upload @selectUplpadColor="selectUplpadColor"></upload>
 		</div>
-		<div class="detailText">Color Code</div>
+		<div class="detailText">{{$t('DesignPrintOperation.ColorCode')}}</div>
 		<div class="colorCode">
 			<div class="generalModel_state">
 				<div class="generalModel_state_item">
 					<input class="search_input" placeholder="Tcx value（e.g:19-4052)" v-model="tcxToColor" style="width: 100%;" @keydown.enter="getTcxColor()">
 				</div>
 			</div>
-			<div class="getTcxColorBtn" @click="getTcxColor">Extract Color</div>
+			<div class="getTcxColorBtn" @click="getTcxColor">{{$t('DesignPrintOperation.ExtractColor')}}</div>
 		</div>
    </div>
    
@@ -91,6 +91,12 @@ export default defineComponent({
 					str:'color'
 				}
 				store.commit('DesignDetailCopy/setNewDetail',value)
+			}else{
+				let value = {
+					data:{},
+					str:'color'
+				}
+				store.commit('DesignDetailCopy/setNewDetail',value)
 			}
 		})
 		watch(()=>colorData.selectDetail.id,(newVal,oldVal)=>{
@@ -284,6 +290,9 @@ export default defineComponent({
 						font-weight: 600;
 						line-height: 2rem;
 						text-align: center;
+						white-space: nowrap;      /* 禁止换行 */
+						overflow: hidden;         /* 隐藏溢出内容 */
+						text-overflow: ellipsis;
 					}
 					> .backgroundImg{
 						width: 100%;
--- a/src/component/DetailCopy/detailLeft/colorBox/pallet.vue
+++ b/src/component/DetailCopy/detailLeft/colorBox/pallet.vue
@@ -106,7 +106,8 @@ export default defineComponent({
 					gradient.gradientList.forEach((item:any,index:any)=>{
 						let str = ','
 						if(gradient.gradientList.length == index+1)str = ''
-						gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 
+						let rgba = item.rgba?item.rgba:{r:255,g:255,b:255}
+						gradientStr += `rgba(${rgba.r},${rgba.g},${rgba.b},${rgba.a}) ${item.left}${str}` 

 					})
 					return `${gradientStr}`
@@ -143,6 +144,7 @@ export default defineComponent({
 			},400)
 		},{deep: true })
 		const setOperate = ()=>{
+			if(!palletData.color.rgba)return message.info(t('DesignDetailAlter.jsContent7'))
 			palletData.color.rgba = palletData.color?.rgba?.r?palletData.color.rgba:{r:0,g:0,b:0,a:1}
 			palletData.gradient.selectIndex = 0
 			palletData.gradient.gradientShow = true
@@ -258,14 +260,17 @@ export default defineComponent({
 		}
 		const openPallet = ()=>{
 			palletData.palletShow = !palletData.palletShow
+			console.log(props.selectColor,palletData.palletShow)
 			if(palletData.palletShow && props.selectColor?.rgba?.r){
 				if(props.selectColor.gradient){
 					palletData.color_.rgba = props.selectColor.gradient.gradientList[0].rgba
 				}else{
 					palletData.color_ = JSON.parse(JSON.stringify(props.selectColor))
+					palletData.gradient.gradientShow = false
 				}
 			
 				palletData.color = JSON.parse(JSON.stringify(props.selectColor))
+			}else{
 			}
 		}
 		onMounted(()=>{
--- a/src/component/DetailCopy/detailLeft/element.vue
+++ b/src/component/DetailCopy/detailLeft/element.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="element">
-		<div class="detailText">Current Element</div>
+		<div class="detailText">{{$t('DesignPrintOperation.CurrentElement')}}</div>
 		<div class="select_element">
 			<img :class="{active:elementList.length == 1}" v-for="item in elementList" @click="addElement(item)" :src="item.path" alt="">
 			<!-- <img :src="selectDetail.path" alt="">
--- a/src/component/DetailCopy/detailLeft/models.vue
+++ b/src/component/DetailCopy/detailLeft/models.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="sketch">
-		<div class="detailText">Current Model</div>
+		<div class="detailText">{{$t('DesignPrintOperation.CurrentModel')}}</div>
 		<div class="select_sketch">
 			<!-- <img :src="selectDetail?.sketchString?selectDetail?.sketchString:selectDetail.path" alt=""> -->
 			<img :src="frontBack.body.path || selectDetail.path" alt="">
--- a/src/component/DetailCopy/detailLeft/module/libraryList.vue
+++ b/src/component/DetailCopy/detailLeft/module/libraryList.vue
@@ -4,7 +4,7 @@
 			<div class="generalModel_state_item" v-if="level1Type != 'Models' && catecoryList.length > 0" style="width: 40%;">
 				<a-select
 					v-model:value="designType"
-					:options="designTypeList"
+					:options="(designTypeList || catecoryList)"
 					@change="handleChange"
 					style="width:100%"
 					size="large"
--- a/src/component/DetailCopy/detailLeft/module/selectList.vue
+++ b/src/component/DetailCopy/detailLeft/module/selectList.vue
@@ -1,28 +1,32 @@
 <template>
    <div class="selectList">
-		<div class="switch_type_list" v-if="type != 'element'">
-			<div
-				@click.stop="openCurrent()"
-				class="switch_type_item"
-				:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
-			</div>
-			<div
-				v-if="isUpload"
-				@click.stop="openUpload()"
-				class="switch_type_item"
-				:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
-			</div>
-			<div
-				@click.stop="openLibrary()"
-				class="switch_type_item"
-				:class="[selectTitle == 'library' ? 'select_swtich' : '']"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
+		<div class="selectList_header">
+			<div class="switch_type_list" v-if="type != 'element'">
+				<div
+					@click.stop="openCurrent()"
+					class="switch_type_item"
+					:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
+					v-if="deReconstructionList.length == 0"
+				>
+					<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
+				</div>
+				<div
+					v-if="isUpload"
+					@click.stop="openUpload()"
+					class="switch_type_item"
+					:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
+				>
+					<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
+				</div>
+				<div
+					@click.stop="openLibrary()"
+					class="switch_type_item"
+					:class="[selectTitle == 'library' ? 'select_swtich' : '']"
+				>
+					<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
+				</div>
 			</div>
+			<slot name="selectSex"></slot>
 		</div>
 		<div class="print_content_list">
 			<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element' && deReconstructionList.length == 0">
@@ -123,6 +127,9 @@ export default defineComponent({
 			if(props.type == 'element'){
 				openLibrary()
 			}
+			if(props.deReconstructionList.length > 0){
+				detailData.selectTitle = 'upload'
+			}
 		})
        return{
 			...toRefs(detailData),
@@ -151,35 +158,39 @@ export default defineComponent({
 		height: auto;
 		display: flex;
 		flex-direction: column;
-		> .switch_type_list{
-			display: flex;
+		> .selectList_header{
 			margin-bottom: 2.5rem;
-			> .switch_type_item:last-child{
-				margin-right: 0;
-			}
-			> .switch_type_item{
-				position: relative;
-				cursor: pointer;
-				margin-right: 6.5rem;
-			}
-			> .switch_type_item::before {
-                    position: absolute;
-                    content: "";
-                    display: block;
-                    background: #000;
-                    height: calc(.4rem*1.2);
-                    left: 50%;
-                    transform: translateX(-50%);
-                    bottom: -.5rem;
-                    width: 0px;
-                    transition: 0.3s all;
-                }
-			> .select_swtich {
-				color: #000;
-				font-weight: 600;
-			}
-			> .select_swtich::before {
-				width: 100%;
+			display: flex;
+			align-items: center;
+			> .switch_type_list{
+				display: flex;
+				> .switch_type_item:last-child{
+					margin-right: 0;
+				}
+				> .switch_type_item{
+					position: relative;
+					cursor: pointer;
+					margin-right: 6.5rem;
+				}
+				> .switch_type_item::before {
+						position: absolute;
+						content: "";
+						display: block;
+						background: #000;
+						height: calc(.4rem*1.2);
+						left: 50%;
+						transform: translateX(-50%);
+						bottom: -.5rem;
+						width: 0px;
+						transition: 0.3s all;
+					}
+				> .select_swtich {
+					color: #000;
+					font-weight: 600;
+				}
+				> .select_swtich::before {
+					width: 100%;
+				}
 			}
 		}
 		> .print_content_list{
--- a/src/component/DetailCopy/detailLeft/module/uploadModel.vue
+++ b/src/component/DetailCopy/detailLeft/module/uploadModel.vue
@@ -0,0 +1,301 @@
+<template>
+	<div class="createCloud" ref="createCloud"></div>
+	<a-modal
+	  class="createCloud_modal generalModel"
+	  v-model:visible="operationsModal"
+	  :footer="null"
+	  :get-container="() => $refs.createCloud"
+	  width="50%"
+	  :height="'77rem'"
+	  :maskClosable="false"
+	  :centered="true"
+	  :closable="false"
+	  :mask="true"
+	  wrapClassName="#app"
+	  :keyboard="false"
+	>
+	  <div class="generalModel_btn">
+		<div class="generalModel_closeIcon" @click.stop="clearData()">
+		  <svg
+			width="46"
+			height="46"
+			viewBox="0 0 46 46"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		  >
+			<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3" />
+			<rect
+			  x="32.5063"
+			  y="12"
+			  width="3"
+			  height="29"
+			  rx="1.5"
+			  transform="rotate(45 32.5063 12)"
+			  fill="#000"
+			/>
+			<rect
+			  x="34.6274"
+			  y="32.5059"
+			  width="3"
+			  height="29"
+			  rx="1.5"
+			  transform="rotate(135 34.6274 32.5059)"
+			  fill="#000"
+			/>
+		  </svg>
+		</div>
+	  </div>
+	  <div class="modal_title_text">
+		<div>Upload</div>
+	  </div>
+	  <div class="allUserPoeration_btn">
+		<div class="uploadList_box">
+			<div class="content_img_item" v-for="(file) in uploadList" :key="file.id">
+				<div class="content_img_item_block" :class="{active:file?.checked}">
+					<img v-lazy="file.url" :key="file.url" :alt="file.name"/>
+					<sketchCategory :disignTypeList="deReconstructionList" :generateList="uploadList" :item="file" :isSetSketchCategory="true"></sketchCategory>
+				</div>
+			</div>
+			<div class="upload_item">
+				<div class="upload" @click="upload">
+					<i class="fi fi-br-upload"></i>
+				</div>
+			</div>
+			<div class="mark_loading" v-show="isShowMark">
+				<a-spin size="large" />
+			</div>
+		</div>
+		<div class="gallery_btn" style="margin-left: auto;" @click="setOk">OK</div>
+	  </div>
+	</a-modal>
+  </template>
+  <script lang="ts">
+  import {
+	defineComponent,
+	computed,
+	reactive,
+	watch,
+	onMounted,
+	h,
+	nextTick,
+	toRefs,
+  } from "vue";
+  import { LoadingOutlined } from "@ant-design/icons-vue";
+  import { Https } from "@/tool/https";
+  import { getCookie, setCookie } from "@/tool/cookie";
+  import { useStore } from "vuex";
+  import { useI18n } from "vue-i18n";
+  import { getMinioUrl } from "@/tool/util";
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+
+  export default defineComponent({
+	components: {sketchCategory},
+	props: {
+		deReconstructionList:{
+			type:Array,
+			default:()=>[]
+		}
+	},
+	emits: ["setUploadImgList"],
+	setup(props, { emit }) {
+	  const store = useStore();
+	  let operations = reactive({
+		operationsModal: false,
+		isShowMark:false,
+		uploadList:[],
+	  });
+	  let operationsData = reactive({
+		
+	  });
+	  const getUploadElement = () => {
+	  };
+	  let init = () => {
+		operations.operationsModal = true
+	  };
+	  const clearData = () => {
+		operations.operationsModal = false
+		emit('setUploadImgList',JSON.parse(JSON.stringify(operations.uploadList)))
+		operations.uploadList = []
+	  };
+	  let setOk = () => {
+		clearData()
+	  };
+	  const upload = ()=>{
+			const input = document.createElement('input');
+			input.type = 'file';
+			input.accept = 'image/*';  // 只允许选择图片文件
+			input.multiple = true;     // 允许多选
+			input.addEventListener('change', (event:any) => {
+				operations.isShowMark = true; // 显示加载状态
+				const files = event?.target?.files;
+				if (!files || files.length === 0) {
+					operations.isShowMark = false; 
+					return;
+				}
+				let file = [...Array.from(files)];
+				let param = new FormData(); 
+				param.append('isPin', '0');
+				param.append('gender', store.state.Workspace.probjects.sex);
+				param.append('level1Type', 'Sketchboard');
+				param.append('timeZone', Intl.DateTimeFormat().resolvedOptions().timeZone);
+				file.forEach((image:any) => {
+					param.append('file', image);
+				});
+
+				let config: any = {
+					headers: {
+						'Content-Type': 'multipart/form-data',
+						'Accept': '*/*'
+					}
+				};
+
+				Https.axiosPost(Https.httpUrls.elementUpload, param, config)
+					.then((rv: any) => {
+						rv.designType = 'Upload'
+						// rv.forEach((item:any)=>{
+							rv.category = props.deReconstructionList[0].name
+							rv.categoryValue = props.deReconstructionList[0].value
+						// })
+						operations.uploadList.unshift(rv);
+						operations.isShowMark = false;
+					})
+					.catch(rv => {
+						operations.isShowMark = false;
+					});
+			});
+
+			// 触发文件选择对话框
+			input.click();
+		}
+	  return {
+		...toRefs(operations),
+		...toRefs(operationsData),
+		init,
+		setOk,
+		clearData,
+		upload,
+	  };
+	},
+	data() {
+	  return {
+		indicator: h(LoadingOutlined, {
+		  style: {
+			fontSize: "2.4rem",
+		  },
+		  spin: true,
+		}),
+	  };
+	},
+	mounted() {},
+	methods: {},
+	directives: {
+	  mousewheel: {
+		mounted(el) {
+		  el.addEventListener("mouseenter", (e) => {
+			if (el.scrollWidth > el.clientWidth) {
+			  el.parentElement.style.overflowY = "hidden";
+			}
+		  });
+  
+		  // 鼠标移出事件
+		  el.addEventListener("mouseleave", () => {
+			el.parentElement.style.overflowY = "auto";
+		  });
+		  el.addEventListener(
+			"wheel",
+			(e) => {
+			  let num = 0;
+			  if (e.deltaY > 0) {
+				num = 25;
+			  } else {
+				num = -25;
+			  }
+			  el.scrollBy(num, 0);
+			},
+			{ passive: true }
+		  );
+		},
+	  },
+	},
+  });
+  </script>
+  <style lang="less" scoped>
+  :deep(.ant-modal-mask) {
+	background: rgba(0, 0, 0, 0.2);
+  }
+  :deep(.createCloud_modal) {
+	.ant-modal-body {
+	  display: flex;
+	  flex-direction: column;
+	}
+  }
+  </style>
+  <style lang="less" scoped>
+  .createCloud_modal {
+	.closeIcon {
+	  z-index: 2;
+	}
+	.allUserPoeration_btn {
+	  display: flex;
+	  overflow-x: auto;
+	  width: auto;
+	  margin-bottom: 2rem;
+	  flex-wrap: nowrap;
+	  flex-direction: column;
+	  width: 100%;
+	  flex: 1;
+	  > .uploadList_box{
+			width: 100%;
+			flex: 1;
+			overflow-y: auto;
+			display: flex;
+			flex-wrap: wrap;
+			margin-top: 1rem;
+			align-content: flex-start;
+			&::-webkit-scrollbar{display: none;}
+			> .content_img_item{
+				> .content_img_item_block{
+					width: calc((34rem - 2rem) / 2);
+					height: calc((34rem - 2rem) / 2);
+					position: relative;
+					margin-bottom: 2rem;
+					margin: 1rem;
+
+					> img{
+						cursor: pointer;
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+				}
+			}
+			> .material_content_list_loding{
+				width: 100%;
+				height: calc((34rem - 2rem) / 2);
+			}
+			> .upload_item{
+				width: calc((34rem - 2rem) / 2);
+				height: calc((34rem - 2rem) / 2);
+				align-items: center;
+				justify-content: center;
+				.upload{
+					cursor: pointer;
+					width: calc(6rem * 1.2);
+					height: calc(6rem * 1.2);
+					border: calc(0.3rem * 1.2) solid #000;
+					border-radius: calc(1rem * 1.2);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					i{
+						font-size: 2rem;
+						display: flex;
+						color: #000;
+					}
+				}
+			}
+		}
+	}
+  }
+  </style>
+  
--- a/src/component/DetailCopy/detailLeft/module/uploadSegmentation.vue
+++ b/src/component/DetailCopy/detailLeft/module/uploadSegmentation.vue
@@ -9,14 +9,12 @@
 				</div>
 			</div>
 			<div class="upload_item">
-				<div class="upload" @click="upload">
+				<div class="upload" @click="openUpload">
 					<i class="fi fi-br-upload"></i>
 				</div>
 			</div>
-			<div class="mark_loading" v-show="isShowMark">
-				<a-spin size="large" />
-			</div>
 		</div>
+		<uploadModel ref="uploadModel" @setUploadImgList="setUploadImgList" :deReconstructionList="deReconstructionList"></uploadModel>
    </div>
 </template>
 <script lang="ts">
@@ -28,9 +26,10 @@ import { getCookie } from "@/tool/cookie";
 import { message,Upload} from 'ant-design-vue';
 import {getUploadUrl} from '@/tool/util'
 import { useI18n } from 'vue-i18n'
+import uploadModel from "./uploadModel.vue"
 export default defineComponent({
    components:{
-		sketchCategory
+		sketchCategory,uploadModel
    },
 	props:{
 		catecoryList:{
@@ -77,7 +76,9 @@ export default defineComponent({
 			token:getCookie("token"),
 			uploadUrl:getUploadUrl(),
 			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
-			isShowMark:false,
+		})
+		const dataDom = reactive({
+			uploadModel:null as any
 		})
 		const getDetailListData = reactive({
 			total:0,
@@ -89,57 +90,22 @@ export default defineComponent({
 			// store.commit('DesignDetailCopy/setNewDetail',file)
 			emit('selectImgItem',file)
 		}
-		const upload = ()=>{
-			const input = document.createElement('input');
-			input.type = 'file';
-			input.accept = 'image/*';  // 只允许选择图片文件
-			input.multiple = true;     // 允许多选
-			input.addEventListener('change', (event:any) => {
-				detailData.isShowMark = true; // 显示加载状态
-				const files = event?.target?.files;
-				if (!files || files.length === 0) {
-					detailData.isShowMark = false; 
-					return;
-				}
-				let file = [...Array.from(files)];
-				let param = new FormData(); 
-				param.append('id', '');
-				let segmentationType:any = props.segmentationType
-				param.append('type', segmentationType);
-				file.forEach((image:any) => {
-					param.append('file', image);
-				});
-
-				let config: any = {
-					headers: {
-						'Content-Type': 'multipart/form-data',
-						'Accept': '*/*'
-					}
-				};
-
-				Https.axiosPost(Https.httpUrls.imageSegmentation, param, config)
-					.then((rv: any) => {
-						rv.forEach((item:any)=>{
-							item.category = props.deReconstructionList[0].name
-							item.categoryValue = props.deReconstructionList[0].value
-						})
-						detailData.uploadList.unshift(...rv);
-						detailData.isShowMark = false;
-					})
-					.catch(rv => {
-						detailData.isShowMark = false;
-					});
-			});
-
-			// 触发文件选择对话框
-			input.click();
+		const setUploadImgList = (list:any)=>{
+			if(list.length>0){
+				detailData.uploadList.push(...list)
+			}
+		}
+		const openUpload = ()=>{
+			dataDom.uploadModel.init()
 		}
        return{
 			...toRefs(detailData),
+			...toRefs(dataDom),
 			...toRefs(getDetailListData),

 			selectImgItem,
-			upload,
+			openUpload,
+			setUploadImgList,
        }
    },
 	provide() {
--- a/src/component/DetailCopy/detailLeft/print.vue
+++ b/src/component/DetailCopy/detailLeft/print.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="print">
-		<div class="detailText">Current Print</div>
+		<div class="detailText">{{$t('DesignPrintOperation.CurrentPrint')}}</div>
 		<div class="select_print">
 			<img :class="{active:printList.length == 1}" v-for="item in printList" @click="addElement(item)" :src="item.path" alt="">
 			<!-- <img :src="selectDetail.path" alt="">
--- a/src/component/DetailCopy/detailLeft/sketch.vue
+++ b/src/component/DetailCopy/detailLeft/sketch.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="sketch">
-		<div class="detailText">Current Sketch</div>
+		<div class="detailText">{{$t('DesignPrintOperation.CurrentSketch')}}</div>
 		<div class="select_sketch" v-if="selectDetail.id">
 			<!-- <img :src="selectDetail?.sketchString?selectDetail?.sketchString:selectDetail.path" alt=""> -->
 			<img :src="selectDetail.sketchString || selectDetail.path" alt="">
--- a/src/component/DetailCopy/detailRight/modelsType.vue
+++ b/src/component/DetailCopy/detailRight/modelsType.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="sketchType" v-show="designDetail?.newModel">
-		<div class="detailText">New Model</div>
+		<div class="detailText">{{$t('DesignPrintOperation.NewPrint')}}</div>
 		<div class="sketchContent">
 			<img :src="designDetail.newModel?.url" alt="">
 		</div>
--- a/src/component/DetailCopy/detailRight/printType.vue
+++ b/src/component/DetailCopy/detailRight/printType.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="printType">
-		<div class="detailText">New Print</div>
+		<div class="detailText">{{$t('DesignPrintOperation.NewPrint')}}</div>
 		<div class="printContent">
 			<div>
 				<div class="content_img_item" v-for="(file) in selectList" :key="file.id">
--- a/src/component/DetailCopy/detailRight/sketchType.vue
+++ b/src/component/DetailCopy/detailRight/sketchType.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="sketchType" v-show="selectDetail?.newDetail?.[currentDetailType]">
-		<div class="detailText">New Apparel</div>
+		<div class="detailText">{{$t('DesignPrintOperation.NewApparel')}}</div>
 		<div class="sketchContent">
 			<img :src="selectDetail?.newDetail?.[currentDetailType]?selectDetail.newDetail?.[currentDetailType].url:selectDetail.path" :title="selectDetail.type" alt="">
 		</div>
--- a/src/component/DetailCopy/model/index.vue
+++ b/src/component/DetailCopy/model/index.vue
@@ -166,6 +166,8 @@ export default defineComponent({
 				flex-shrink: 0;
 				overflow: hidden;
 				// max-height: 4rem;
+				position: relative;
+				z-index: 99;
 				> i{
 					font-size: 2rem;
 					cursor: pointer;
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -281,18 +281,18 @@ export default defineComponent({
 		let speed = reactive({
 			speedList:[
 				{
-					title:'Generate image in fast speed normal quality',
-					label:'Normal',
-					value:'fast',
-
+					title:'Generate using Wanxiang',
+					label:'WX',
+					value:'wx',
 				},{
 					title:'Generate image in high quality low speed',
 					label:'High',
 					value:'high',
 				},{
-					title:'Generate using Wanxiang',
-					label:'WX',
-					value:'wx',
+					title:'Generate image in fast speed basics quality',
+					label:'Normal',
+					value:'fast',
+
 				},{
 					title:'',
 					label:'FLUX',
@@ -308,9 +308,9 @@ export default defineComponent({
 			],
 			speedState:false,
 			speedData:{
-				title:'Generate image in fast speed normal quality',
-				label:'Normal',
-				value:'fast',
+				title:'Generate using Wanxiang',
+				label:'WX',
+				value:'wx',
 			},
 		})
 		const openSpeed = ()=>{
@@ -731,7 +731,7 @@ export default defineComponent({
 									message.info(this.t('Generate.everyTimeEffectPoor'));
 								}
 							});
-							if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
+							if((data.length == 0)){
 								if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
 									message.info(this.t('Generate.effectPoor'));
 								}else{
--- a/src/component/HomePage/NewCollectionReview.vue
+++ b/src/component/HomePage/NewCollectionReview.vue
@@ -7,7 +7,7 @@
        </div> -->
        <div class="img_block_item" v-if="allBoardData?.disposeMoodboard?.length != 0 && allBoardData?.disposeMoodboard?.[0] != null">
 			<div class="title">
-				<div>Moodboard</div>
+				<div>{{$t('collectionModal.Moodboard')}}</div>
 				<i class="fi fi-rr-edit" @click="openCollection('moodBoard')"></i>
 			</div>
            <div  v-for="(mood) in allBoardData?.disposeMoodboard" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_disposeMoodboard" >
@@ -18,7 +18,7 @@
        </div>
 		<div class="img_block_item" v-else>
 			<div class="title">
-				<div>Moodboard</div>
+				<div>{{$t('collectionModal.Moodboard')}}</div>
 				<i class="fi fi-rr-edit" @click="openCollection('moodBoard')"></i>
 			</div>
 			<div  v-for="(mood) in allBoardData?.moodboardFiles" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_moodboard" >
@@ -30,7 +30,7 @@

        <div class="img_block_item">
 			<div class="title">
-				<div>Printboard</div>
+				<div>{{$t('collectionModal.Printboard')}}</div>
 				<i class="fi fi-rr-edit" @click="openCollection('printBoard')"></i>
 			</div>
            <div class="small_img_item"  v-for="(print) in allBoardData?.printboardFiles" :key="print">
@@ -47,7 +47,7 @@

        <div class="img_block_item">
 			<div class="title">
-				<div>Colorboard</div>
+				<div>{{$t('collectionModal.Colorboard')}}</div>
 				<i class="fi fi-rr-edit" @click="openCollection('colorBoard')"></i>
 			</div>
 			<div class="color_item"  v-for="(color,i) in allBoardData?.colorBoards" :key="color">
@@ -61,7 +61,7 @@
        </div>
 		<div class="img_block_item mannquin" v-show="probjects.type != 'singleProductDesign'">
 			<div class="title">
-				<div>Mannequin</div>
+				<div>{{$t('collectionModal.Mannequin')}}</div>
 				<i class="fi fi-rr-edit" @click="openCollection('mannequin')"></i>
 			</div>
            <div class="mannquin_img_item"  v-for="(model) in probjects?.model" :key="model">
@@ -80,7 +80,7 @@
        </div> -->
 		<div class="img_block_item img_block_item_sketch">
 			<div class="title" style="width: 100%;">
-				<div>Sketchboard</div>
+				<div>{{$t('collectionModal.Sketchboard')}}</div>
 				<i class="fi fi-rr-edit" @click="openCollection('sketchBoard')"></i>
 			</div>
            <div class="lager_img_item" :class="'lager_img_item'+index" v-for="(item,index) in sketch" :key="item">
--- a/src/component/HomePage/bindEmail.vue
+++ b/src/component/HomePage/bindEmail.vue
@@ -103,7 +103,7 @@
 									
 										<div class="email_last_step_block" >
 											<span class="email_last_step_content"
-												>Verify with one-time verification code</span
+												>Verify using a one-time verification code</span
 											>
 											<i class="fi fi-br-cross email_last_step_block_icon" @click="emailLastStepFun()"></i>
 										</div>
@@ -126,7 +126,7 @@

 										<div class="email_last_step_des">
 											<div class="sent_email_content email_tip_content">
-											Please check the junk box if you haven't received verification code
+											If you haven't received the code, please check your junk or spam folder.
 											</div>
 										</div>
 									</div>
--- a/src/component/HomePage/createSlogan.vue
+++ b/src/component/HomePage/createSlogan.vue
@@ -16,11 +16,10 @@
 		<div class="generalModel_btn">
 			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
 				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-					<circle cx="23" cy="23" r="22.5" stroke="#666666"/>
-					<rect x="32.5059" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5059 12)" fill="#666666"/>
-					<rect x="34.627" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.627 32.5059)" fill="#666666"/>
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
 				</svg>
-
 			</div>
 		</div>
 		
--- a/src/component/HomePage/layout.vue
+++ b/src/component/HomePage/layout.vue
@@ -10,7 +10,7 @@
            :centered="true"
            :closable="false"
 			:keyboard="false"
-            :mask="false"
+            :mask="true"
 			:destroyOnClose="true"
        >
            <div class="layout_content">
--- a/src/component/HomePage/productImg.vue
+++ b/src/component/HomePage/productImg.vue
@@ -614,7 +614,7 @@ export default defineComponent({
 								data = data.filter((item:any) => item !== element.taskId);
 							});
 							generateProceedList = data
-							if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
+							if((data.length == 0)){
 								// if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
 								// }
 								store.dispatch('getCredits')
--- a/src/component/HomePage/scaleImage.vue
+++ b/src/component/HomePage/scaleImage.vue
@@ -32,7 +32,7 @@
 						<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
 					</div>
 					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
-						<span>Selection Function</span>
+						<span>{{$t('ProductImg.SelectionFunction')}}</span>
 					</div>
 					<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction" style="margin-bottom: 1rem;">
 						<a-select  style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
--- a/src/component/LibraryPage/brandDetail.vue
+++ b/src/component/LibraryPage/brandDetail.vue
@@ -34,7 +34,7 @@
 					<i v-else class="fi fi-br-check" @click="editChek('userName')"></i>
 				</div>
 				<div class="slogan">
-					<div>Slogan:</div>
+					<div>{{$t('brandDNA.Slogan')}}:</div>
 					<span v-if="!isEditDescribe" style="font-weight: 300;">{{ brandSlogan }}</span>
 					<input v-else type="text" v-model="brandSlogan">
 					<i v-if="!isEditDescribe" class="fi fi-rr-edit" @click="openEdit('brandSlogan')"></i>
@@ -59,9 +59,9 @@
 					:maxCount="15"
 					accept=".jpg,.png,.jpeg,.bmp"
 				>
-					<div class="gallery_btn">Upload</div>
+					<div class="gallery_btn">{{$t('brandDNA.Upload')}}</div>
 				</a-upload>
-				<div style="margin-left:2rem;" @click="deleteBatchPic" class="gallery_btn">Delete</div>
+				<div style="margin-left:2rem;" @click="deleteBatchPic" class="gallery_btn">{{$t('brandDNA.Delete')}}</div>
 			</div>
 			<div class="imgBox">
 				<Falls ref="fall" @loadend="isShowMark = false" :itemWidth="200" :isScroll="false" :isText="false"></Falls>
--- a/src/component/LibraryPage/createBrand.vue
+++ b/src/component/LibraryPage/createBrand.vue
@@ -23,20 +23,20 @@
 				</div>
 			</div>
 			<div class="modal_title_text">
-				<div>Add brand</div>
+				<div>{{ $t('brandDNA.Addbrand') }}</div>
 			</div>
 			<div class="content">
 				<div class="left">
 					<div class="item">
-						<div class="text">Brand Name <span style="color: red;">*</span></div>
+						<div class="text">{{ $t('brandDNA.BrandName') }} <span style="color: red;">*</span></div>
 						<input type="text" v-model="brandName">
 					</div>
 					<div class="item">
-						<div class="text">Brand Slogan <span style="color: red;">*</span></div>
+						<div class="text">{{ $t('brandDNA.BrandSlogan') }} <span style="color: red;">*</span></div>
 						<input type="text" v-model="brandSlogan">
 					</div>
 					<div class="item">
-						<div class="text">Brand Logo <span style="color: red;">*</span></div>
+						<div class="text">{{ $t('brandDNA.BrandLogo') }} <span style="color: red;">*</span></div>
 						<div class="imgItemBox">
 							<div class="imgItem" v-for="(item,index) in uploadList" :key="index">
 								<img :src="item.url" alt="">
@@ -72,11 +72,11 @@
 				</div>
 				<div class="right">
 					<div class="item">
-						<div class="text">Brand Name </div>
-						<textarea v-model="generateText" :placeholder="'Please enter your thoughts about this brand, and we will help you generate the name, logo, and slogan.'"></textarea>
+						<div class="text">{{ $t('brandDNA.BrandName') }}</div>
+						<textarea v-model="generateText" :placeholder="$t('brandDNA.textarea')"></textarea>
 					</div>
 					<div class="btn">
-						<div class="gallery_btn" style="width: 13rem;" v-show="!isGenerateLoad" @click="generate">Generate</div>
+						<div class="gallery_btn" style="width: 13rem;" v-show="!isGenerateLoad" @click="generate">{{ $t('brandDNA.Generate') }}</div>
 						<div class="gallery_btn" style="width: 13rem;" v-show="isGenerateLoad">					
 							<span class="fi fi-br-loading"></span>
 						</div>
--- a/src/component/LoginPage/login/enterprise.vue
+++ b/src/component/LoginPage/login/enterprise.vue
@@ -70,7 +70,7 @@
                <div v-show="emailStap === 2" class="email_last_step">
                  <div class="email_last_step_block">
                    <span class="email_last_step_content"
-                      >Verify with one-time verification code</span
+                      >Verify using a one-time verification code</span
                    >
                    <i
                      class="fi fi-br-cross email_last_step_block_icon"
@@ -106,7 +106,7 @@
            <div class="login_form_title marign_top30">
              <label :class="{ active: emailStap == 2 }">
                <input :state="emailStap" type="checkbox" v-model="checked" />
-                <span>I agree to all Term, Privacy Policy and Fees</span>
+                <span>I agree to the Terms, Privacy Policy, and Fees.</span>
              </label>
            </div>
            <!-- <div class="thirdPartyLogin marign_top30">
--- a/src/component/LoginPage/login/personal.vue
+++ b/src/component/LoginPage/login/personal.vue
@@ -48,7 +48,7 @@
                <div v-show="emailStap === 2" class="email_last_step">
                  <div class="email_last_step_block">
                    <span class="email_last_step_content"
-                      >Verify with one-time verification code</span
+                      >Verify using a one-time verification code</span
                    >
                    <i
                      class="fi fi-br-cross email_last_step_block_icon"
@@ -84,7 +84,7 @@
            <div class="login_form_title marign_top30">
              <label :class="{ active: emailStap == 2 }">
                <input :state="emailStap" type="checkbox" v-model="checked" />
-                <span>I agree to all Term, Privacy Policy and Fees</span>
+                <span>I agree to the Terms, Privacy Policy, and Fees.</span>
              </label>
            </div>
            <div class="thirdPartyLogin marign_top30">
--- a/src/component/LoginPage/login/school.vue
+++ b/src/component/LoginPage/login/school.vue
@@ -70,7 +70,7 @@
                <div v-show="emailStap === 2" class="email_last_step">
                  <div class="email_last_step_block">
                    <span class="email_last_step_content"
-                      >Verify with one-time verification code</span
+                      >Verify using a one-time verification code</span
                    >
                    <i
                      class="fi fi-br-cross email_last_step_block_icon"
@@ -106,7 +106,7 @@
            <div class="login_form_title marign_top30">
              <label :class="{ active: emailStap == 2 }">
                <input :state="emailStap" type="checkbox" v-model="checked" />
-                <span>I agree to all Term, Privacy Policy and Fees</span>
+                <span>I agree to the Terms, Privacy Policy, and Fees.</span>
              </label>
            </div>
            <!-- <div class="thirdPartyLogin marign_top30">
--- a/src/component/Pay/creditsDetail.vue
+++ b/src/component/Pay/creditsDetail.vue
@@ -200,7 +200,7 @@ export default defineComponent({
                : "";
 			let data = {
 				endTime: endDate,
-				isIncome: this.currentState.value == 'income'?true:false,
+				isIncome: this.currentState.value == 'income'?false:true,
 				page:this.currentPage,
                size:this.pageSize,
 				startTime: startDate
--- a/src/component/home/batchGeneration/createCloud.vue
+++ b/src/component/home/batchGeneration/createCloud.vue
@@ -46,11 +46,11 @@
      </div>
    </div>
    <div class="modal_title_text">
-      <div>Create Batch Generation Tasks</div>
+      <div>{{$t('batchGeneration.title')}}</div>
    </div>
    <div class="allUserPoeration_center admin_page">
      <div class="admin_state_item">
-        <span>Task type <span>*</span></span>
+        <span>{{$t('batchGeneration.TaskType')}} <span>*</span></span>
        <a-select
          v-model:value="buildType"
          allowClear
@@ -62,7 +62,7 @@
      </div>
      <div class="admin_state_item">
        <span
-          >Project
+          >{{$t('batchGeneration.Project')}}
          <span
            v-show="
              buildType == 'SERIES_DESIGN' || buildType == 'SINGLE_DESIGN'
@@ -79,7 +79,7 @@
          :not-found-content="null"
          :filter-option="false"
          style="width: 16rem"
-          placeholder="Please select"
+          :placeholder="$t('batchGeneration.PleaseSelect')"
          :options="objectList"
          @search="getHistoryProjectList"
          @change="changeProject"
@@ -90,7 +90,7 @@
        </a-select>
      </div>
      <div class="admin_state_item">
-        <span>Name <span>*</span></span>
+        <span>{{$t('batchGeneration.TaskName')}} <span>*</span></span>
        <input
          v-model="porjectName"
          :placeholder="placeholder"
@@ -101,10 +101,10 @@
        />
      </div>
      <div class="admin_state_item" v-show="buildType">
-        <span>Quantity <span>*</span></span>
+        <span>{{$t('batchGeneration.Quantity')}} <span>*</span></span>
        <input
          v-model="numberOfImages"
-          placeholder="Please enter number"
+          :placeholder="$t('batchGeneration.enterNumber')"
          type="text"
          style="width: 200px"
          @input="changeNumberOfImages"
@@ -112,7 +112,7 @@
      </div>
      <!-- toProductimg -->
      <div v-show="buildType == 'TO_PRODUCT_IMAGE'" class="admin_state_item">
-        <span>{{ $t("ProductImg.Similarity") }}</span>
+        <span>{{ $t("ProductImg.Similarity") }} 0 - 100</span>
        <div class="sliderAndImput" style="width: 200px">
          <!-- <a-slider class="system_silder"
 						v-model:value="similarity"
@@ -121,9 +121,9 @@
 					>
 					</a-slider> -->
          <div style="display: flex">
-            <input type="number" readonly v-model="similarity[0]" />
+            <input type="number" v-model="similarity[0]" />
            <div style="margin: 0 1rem">-</div>
-            <input type="number" readonly v-model="similarity[1]" />
+            <input type="number" v-model="similarity[1]" />
          </div>
        </div>
      </div>
@@ -154,7 +154,7 @@
        v-show="buildType == 'TO_PRODUCT_IMAGE' || buildType == 'relight'"
        class="admin_state_item"
      >
-        <span>Keyword</span>
+        <span>{{$t('batchGeneration.Keyword')}}</span>
        <input
          v-model="generateText"
          :placeholder="$t('Generate.inputContent1')"
@@ -227,7 +227,7 @@
            :headers="{ Authorization: getCookie('token') }"
            :before-upload="beforeUpload"
            :data="{
-              projectId: 2061,
+				projectId:projectData
            }"
            v-model:file-list="fileList"
            :multiple="true"
@@ -247,7 +247,7 @@
 			</div> -->
      <div v-show="buildType" class="admin_state_item" style="width: 100%">
        <span style="margin: 0"
-          >Cost credit：{{ credits * numberOfImages }}</span
+          >{{$t('batchGeneration.CostCredit')}}：{{ credits * numberOfImages }}</span
        >
      </div>
    </div>
@@ -475,7 +475,7 @@ export default defineComponent({
        buildType: buildTypeCorresponding[operationsData.buildType],
        nums: operationsData.numberOfImages,
        projectId: operationsData.projectData,
-        name: operationsData.porjectName || operationsData.projectData,
+        name: operationsData.porjectName || operationsData.placeholder,
        //productimg
        toProductImage: {
          prompt: operationsData.generateText, //输入的内容
@@ -512,15 +512,15 @@ export default defineComponent({
      data = setAddData();
      if (operationsData.buildType == "TO_PRODUCT_IMAGE") {
        if (data.toProductImage.toProductImageVOList.length == 0)
-          return message.warning("Please upload the picture first.");
+          return message.warning("Please select or upload the picture first.");
        // if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("You need to go to the Design module and generate a design result first before you can use the 'To Product Image' cloud generation feature.")
      } else if (operationsData.buildType == "RELIGHT") {
        if (data.toProductImage.toProductImageVOList.length == 0)
-          return message.warning("Please upload the picture first.");
+          return message.warning("Please select or upload the picture first.");
        // if(data.toProductImage.toProductImageVOList.length == 0)return message.warning("You need to go to the 'To Product Image' module and generate a result first before you can use the 'Relight' cloud generation feature.")
      } else if (operationsData.buildType == "POSE_TRANSFER") {
        if (data.poseTransform.length == 0)
-          return message.warning("Please upload the picture first.");
+          return message.warning("Please select or upload the picture first.");
        // if(data.poseTransform.length == 0)return message.warning("You must first generate results in the 'To Product Image' module before you can use the 'Transfer Pose' cloud generation feature.")
      }
      if (operationsData.buildType == "DESIGN" && !operationsData.projectData)
@@ -838,7 +838,6 @@ export default defineComponent({
          // border-radius: 1.6rem;
          flex: 1;
        }
-        > div {
          input {
            border-radius: 1.6rem;
            width: 5rem;
@@ -847,7 +846,6 @@ export default defineComponent({
            height: 100%;
            text-align: center;
          }
-        }
      }
    }
  }
--- a/src/component/home/batchGeneration/index.vue
+++ b/src/component/home/batchGeneration/index.vue
@@ -10,7 +10,7 @@
 			</div>
 			<div class="searchObject generalModel_state">
 				<div class="generalModel_state_item smail" style="margin-right: 1rem;">
-					<span>Project :</span>
+					<span>{{$t('batchGeneration.Project')}} :</span>
 					<a-select
 						v-model:value="projectData"
 						show-search
@@ -34,8 +34,8 @@
 				</div>
 			</div>
 			<div class="createCloud">
-				<div class="gallery_btn" style="margin-right: 2rem;" @click="pagination">Search</div>
-				<div class="gallery_btn white" @click="createClound">Create</div>
+				<div class="gallery_btn" style="margin-right: 2rem;" @click="pagination">{{$t('batchGeneration.Search')}}</div>
+				<div class="gallery_btn white" @click="createClound">{{$t('batchGeneration.Create')}}</div>
 			</div>
 		</div>
 		<div class="contentList">
@@ -60,13 +60,13 @@
 							</div>
 						</div>
 						<span style="color: #007EE5; cursor: pointer; margin-right: 1rem;" v-show="header.value == 'operation'" @click="setRename(row)">
-							Rename
+							{{$t('batchGeneration.Rename')}}
 						</span>
 						<span style="color: #007EE5; cursor: pointer; margin-right: 1rem;" v-show="header.value == 'operation'" @click="detailIamge(row)">
-							Review
+							{{$t('batchGeneration.Review')}}
 						</span>
 						<span style="color: #007EE5; cursor: pointer;" v-show="header.value == 'operation'" @click="deleteRom(row)">
-							Delete
+							{{$t('batchGeneration.Delete')}}
 						</span>
 					</td>
 				</tr>
@@ -94,6 +94,7 @@ export default defineComponent({
 	},
 	emits:['retrieve'],
 	setup(props,{emit}) {
+		const {t} = useI18n()
 		const store = useStore();
 		const router = useRouter()
 		const route = useRoute()
@@ -109,27 +110,27 @@ export default defineComponent({
 			generateList:{
 				seriesDesign:[
 				{
-						label:'Series design',
+						label:t('newProjectg.SeriesDesign'),
 						// value:'SERIES_DESIGN',
 						consumption:0,
 						value:'SERIES_DESIGN',
 					},{
-						label:'Single design',
+						label:t('newProjectg.SingleDesign'),
 						// value:'SINGLE_DESIGN',
 						consumption:0,
 						value:'SINGLE_DESIGN',
 					},{
-						label:'To Product Image',
+						label:t('Header.toolsToProduct'),
 						// value:'toProductImage',
 						consumption:5,
 						value:'TO_PRODUCT_IMAGE',
 					},{
-						label:'Relight',
+						label:t('Header.toolsRelight'),
 						// value:'relight',
 						consumption:5,
 						value:'RELIGHT',
 					},{
-						label:'Transfer Pose',
+						label:t('Header.toolsToTransferPose'),
 						// value:'poseTransfer',
 						consumption:10,
 						value:'POSE_TRANSFER',
@@ -177,10 +178,10 @@ export default defineComponent({
 			},
 			cloudTiltleList:[
 				{
-					name:'Task Name',
+					name:computed(()=>t('batchGeneration.TaskName')),
 					value:'name',
 				},{
-					name:'Task type',
+					name:computed(()=>t('batchGeneration.TaskType')),
 					value:'buildType',
 					fun:(value:any)=>{
 						let str = ''
@@ -191,11 +192,11 @@ export default defineComponent({
 						return str
 					}
 				},{
-					name:'Quantity generated',
+					name:computed(()=>t('batchGeneration.QuantityGenerated')),
 					value:'nums',
 				},
 				{
-					name:'Creation time',
+					name:computed(()=>t('batchGeneration.CreationTime')),
 					value:'createTime',
 					fun:(value:any)=>{
 						if(!value)return
@@ -203,22 +204,21 @@ export default defineComponent({
 					}
 				},
 				{
-					name:'Start time',
-					value:'startTime',
+					name:computed(()=>t('batchGeneration.StartTime')),
 					fun:(value:any)=>{
 						//没开始内容为 - 
 						if(!value)return
 						return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0] 
 					}
 				},{
-					name:'Update time',
+					name:computed(()=>t('batchGeneration.UpdateTime')),
 					value:'updateTime',
 					fun:(value:any)=>{
 						if(!value)return
 						return value.split('T')[0] + ' ' + value.split('T')[1].split('.')[0] 
 					}
 				},{
-					name:'Status',
+					name:computed(()=>t('batchGeneration.Status')),
 					value:'process',
 					fun:(value:any)=>{
 						if(value == '100.00%'){
@@ -228,7 +228,7 @@ export default defineComponent({
 						}
 					}
 				},{
-					name:'Operation',
+					name:computed(()=>t('batchGeneration.Operation')),
 					value:'operation',
 				},
 			]  as any,
@@ -362,14 +362,14 @@ export default defineComponent({
 			},1000)
 		}
 		const submitGetContentList = (project:any)=>{
-			// data.isGetContentList = true
+			data.isGetContentList = true
 			// if(project){
 			// 	data.projectData = project
 			// }else{
 			// 	data.projectData = null
 			// }
 			// data.currentPage = 1
-			// getContentList()
+			getContentList()
 			if(data.settingGetHistory)data.settingGetHistory()
 		}
 		const handleChange = (event:any,value:any)=>{
--- a/src/component/home/chat/index.vue
+++ b/src/component/home/chat/index.vue
@@ -97,7 +97,7 @@ export default defineComponent({
 		const route = useRoute()
 		const data = reactive({
 			chatContent:'',
-			openChat:true,
+			openChat:false,
 			chatList:[
 			] as any,
 			isChattingRecords:false,
@@ -114,6 +114,8 @@ export default defineComponent({
 		watch(()=>data.selectObject.id,(newValue,oldValue)=>{
 			if(newValue && (data.selectObject.httpType == 'SERIES_DESIGN' || data.selectObject.httpType == 'SINGLE_DESIGN')){
 				data.chatList = []
+				if(route.query?.chatMode == 'true')data.openChat = true
+
 				if(route.query?.create)return
 				nextTick(()=>{
 					getChatHistory(newValue)
--- a/src/component/home/design/collection.vue
+++ b/src/component/home/design/collection.vue
@@ -51,7 +51,7 @@
 			</div>
 			<div class="collection_page" v-show="isNext">
 				<i v-show="collectionStep > 1" class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
-				<i v-if="collectionStep < 4" class="fi fi-rr-arrow-small-right Guide_1_8" @click.stop="nextStep()"></i>
+				<i v-if="collectionStep < (selectObject.type == 'singleProductDesign'?4: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>
@@ -67,7 +67,7 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
-import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
+import { rgbToHsv, setGradual } from "@/tool/util";
 import { init } from 'echarts/core';
 import MoodboardUpload from './collection/MoodboardUpload.vue';
 import PrintboardUpload from './collection/PrintboardUpload.vue';
@@ -139,22 +139,27 @@ export default defineComponent({
 				})
 			})
 		}
-		let getPantongName = ()=>{
+		let getPantongName = async ()=>{
 			let colorBoards = store.state.UploadFilesModule.colorBoards;
 			if(!colorBoards || colorBoards?.length == 0) return
 			data.isShowMark = true
 			let value: any = [];
 			for (let v of colorBoards) {
-				let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
+				
+			}
+			for (let index = 0; index < colorBoards.length; index++) {
+				// if(colorBoards[index].gradient){
+				// 	colorBoards[index].gradient.colorImg = await setGradual(colorBoards[index].gradient,320,700)
+				// }
+				let color: any = [colorBoards[index].rgbValue.r, colorBoards[index].rgbValue.g, colorBoards[index].rgbValue.b];
 				let hsv = rgbToHsv(color);
-				v.hsv = hsv[0] + hsv[1] + hsv[2];
+				colorBoards[index].hsv = hsv[0] + hsv[1] + hsv[2];
 				value.push({
 					h: hsv[0],
 					s: hsv[1],
 					v: hsv[2],
 				});
 			}
-			
 			return new Promise((resolve: any, reject: any) => {
 				Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, value)
 					.then((rv: any) => {
--- a/src/component/home/design/collection/ColorboardUpload.vue
+++ b/src/component/home/design/collection/ColorboardUpload.vue
@@ -784,7 +784,7 @@ export default defineComponent({
 		},
 		setOperate(){
 			// this.colorList[this.selectIndex]
-			this.selectColor.rgba = this.selectColor.rgba.r?this.selectColor.rgba:{r:0,g:0,b:0,a:1}
+			this.selectColor.rgba = this.selectColor?.rgba?.r?this.selectColor?.rgba:{r:0,g:0,b:0,a:1}
 			this.gradient.selectIndex = 0
 			this.gradient.gradientShow = true
 			this.colorList[this.selectIndex].rgba = this.selectColor.rgba
--- a/src/component/home/design/collection/MoodboardUpload.vue
+++ b/src/component/home/design/collection/MoodboardUpload.vue
@@ -227,7 +227,7 @@ export default defineComponent({
            store: useStore(),
 			moodb_:moodb.moodb_,
 			moodboarList:computed(()=>{
-				return  useStore().state.UploadFilesModule.moodboard
+				return  useStore().state.UploadFilesModule?.moodboard
 			}),
        };
    },
--- a/src/component/home/design/editDesignType/index.vue
+++ b/src/component/home/design/editDesignType/index.vue
@@ -9,7 +9,7 @@
 		:closable="false"
 		:mask="true"
 		:keyboard="false"
-		:destroyOnClose="true"
+		:destroyOnClose="false"
 	>
 	<div class="generalModel_btn">
 		<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
@@ -32,7 +32,7 @@
 					<span v-if="scaleImageList[scaleImageIndex]?.resultType == 'Relight'">{{$t('ProductImg.relightingTool')}}</span>
 				</div>
 				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
-					<span>Selection Function</span>
+					<span>{{$t('ProductImg.SelectionFunction')}}</span>
 				</div>
 				<div v-show="scaleImageList[scaleImageIndex]?.resultType == 'Relight'" class="productImg_content_item_Direction" style="margin-bottom: 1rem;">
 					<a-select  style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
@@ -95,13 +95,17 @@
 						<div class="text">Choose pose</div>
 					</div>
 					<div class="imgBox" v-mousewheel>
-						<div class="item" v-for="item in poseList" @click="selectPose(item)">
+						<div class="item" v-for="item,index in poseList" @click="setSelectPose(item,index)">
 							<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 class="btnBox">
+								<div :class="{active:item.isChecked}">
+									<i class="fi fi-br-check"></i>
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -110,7 +114,7 @@
 						<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 != 'Relight'" :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 v-for="item in speedList" :key="item.value" :class="{active:item.value == speedData.value}" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
 						</div>
 					</div>
 					<div class="generage_btn started_btn" v-show="generateSuccess.productimgIsProductimg && !generateSuccess.productimgRemProductimg">
@@ -183,9 +187,9 @@
 <script lang="ts">
 import { defineComponent, h, ref ,toRefs,createVNode,reactive, computed} from "vue";
 import { Https } from "@/tool/https";
-import { Modal } from "ant-design-vue";
+import { Modal,message } from "ant-design-vue";
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-import { downloadIamge,getMinioUrl } from "@/tool/util";
+import { downloadIamge,getMinioUrl,downloadVideoWithFetch } from "@/tool/util";
 import { useI18n } from "vue-i18n";
 import { useStore } from "vuex";
 import UpgradePlan from "@/component/HomePage/UpgradePlan.vue";
@@ -251,15 +255,15 @@ setup(props:any,{emit}) {
 			],
 			toPorductImg:[
 				{
-					title:'Generate with high quality',
-					label:'High',
-					relightLabel:'Relight',
-					value:'',
-				},{
 					title:'',
 					label:'FLUX',
 					relightLabel:'Edit',
 					value:'flux',
+				},{
+					title:'Generate with high quality',
+					label:'High',
+					relightLabel:'Relight',
+					value:'',
 				},
 			]
 		},
@@ -368,7 +372,6 @@ setup(props:any,{emit}) {
 				}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
 			}
@@ -413,7 +416,7 @@ setup(props:any,{emit}) {
 			}
 		}
 		// url = Https.httpUrls.poseTransformResult
-		// data = {taskId:'f785fbbf-425c-4d9b-b4d0-0f38f480c64e-83'}
+		// data = {taskId: "00169296-220e-4032-bfce-ca8ff67d6468-83"}
 		productimg.generateSuccess.prductimgTime = setInterval(()=>{
 			if(!state)return
 			state = false
@@ -433,16 +436,23 @@ setup(props:any,{emit}) {
 							rv[0].sourceUrl = productimg.generateSuccess.sourceUrl
 							rv[0].designOutfitUrl = rv[0].url
 							productimg.generateSuccess.newData = rv[0]
-							if(productimg.generateSuccess?.scaleImage){
+							console.log(productimg.generateSuccess.newData)
+							if(!scaleImage.value){
+								productimg.generateSuccess.status = 'add'
 								setCove()
 							}
 							// productimg.generateSuccess.listType = listType
 							isEnd = true
 							clearInterval(productimg.generateSuccess.remPrductimgTime)
 						}else if(rv[0].status == 'Fail'){
+							message.info(t('ProductImg.jsContent3'))
 							isEnd = true
 						}
-						generateProceedList = rv
+						generateProceedList = data
+						if(!scaleImage.value){
+							let awaitData = {awaitId:productimg.generateSuccess.awaitId,parentId:productimg.generateSuccess.parentId,listType:productimg.generateSuccess.listType,taskId:generateProceedList[0]}
+							emit('setGenerateAwait',awaitData)
+						}
 						if(isEnd){
 							store.state.store.dispatch('getCredits')
 							clearInterval(productimg.generateSuccess.prductimgTime)
@@ -503,6 +513,7 @@ setup(props:any,{emit}) {
 			...JSON.parse(JSON.stringify(productimg.generateSuccess.newData)),
 			sourceUrl:productimg.generateSuccess.newData.sourceUrl || scaleImageList.value[scaleImageIndex.value].sourceUrl,
 			oldId:productimg.generateSuccess.id,
+			awaitId:productimg.generateSuccess.awaitId,
 			status:productimg.generateSuccess.status,
 			listType:productimg.generateSuccess.listType,
 			isIndex:productimg.generateSuccess.isIndex,
@@ -528,6 +539,13 @@ setup(props:any,{emit}) {
 	const gifPause = (e:any,item:any)=>{
 		e.target.src = item.firstFrame || item.firstFrameUrl//静态图片
 	}
+	const setSelectPose = (item:any,index:number)=>{
+		productimg.poseList.forEach((poseItem:any)=>{
+			poseItem.isChecked = false
+		})
+		productimg.poseList[index].isChecked = true
+		productimg.selectPose = item.id
+	}
 	return {
 		t,
 		...toRefs(productimg),
@@ -551,6 +569,8 @@ setup(props:any,{emit}) {
 		getPoseList,
 		gifPlay,
 		gifPause,
+		setSelectPose,
+		generateProceedList,
 	};
 },
 data() {
@@ -589,8 +609,9 @@ methods: {

 		}
 		// this.
+		this.generateSuccess.awaitId =  list[index].id
 		this.generateSuccess.userLikeSortId =  list[index].userLikeSortId
-		this.generateSuccess.parentId =  list[index].parentId
+		this.generateSuccess.parentId =  list[index].parentId || list[index].userLikeSortId
 		this.generateSuccess.productimgIsProductimg = !!this.generateSuccess.productimgIsProductimg
 		this.generateSuccess.productimgRemProductimg = !!this.generateSuccess.productimgRemProductimg
 		this.generateSuccess.isShowMark = !!this.generateSuccess.isShowMark
@@ -637,8 +658,12 @@ methods: {
 		document.addEventListener('keydown',this.setKeydown)
 	},
 	async cancelDsign(){
-		
 		document.removeEventListener('keydown',this.setKeydown)
+		if(this.generateSuccess.productimgIsProductimg){
+			let awaitData = {awaitId:this.generateSuccess.awaitId,parentId:this.generateSuccess.parentId,listType:this.generateSuccess.listType,taskId:this.generateProceedList[0]}
+			this.$emit('setGenerateAwait',awaitData)
+		}
+		
 		// let data = {
 		// 	...JSON.parse(JSON.stringify(this.generateSuccess)),
 		// }
@@ -691,7 +716,7 @@ methods: {
 				this.setCove()
 			}
 		}
-		this.generateSuccess.scaleImage = true
+		
 		this.scaleImage = false
 		// this.scaleImageIndex = 0
 		this.isNext = false
@@ -720,12 +745,16 @@ methods: {
 	},
 	download(){
 		let url
-		if(this.generateSuccess.resultType == 'PoseTransfer'){
-			url = this.generateSuccess.newData.videoUrl
+		if(this.generateSuccess?.resultType == 'PoseTransfer' || this.generateSuccess?.newData?.resultType == 'PoseTransfer'){
+			url = this.generateSuccess?.videoUrl
+			if(this.generateSuccess?.newData?.videoUrl){
+				url = this.generateSuccess.newData.videoUrl
+			}
+			downloadVideoWithFetch(url)
 		}else{
-			url = this.generateSuccess.newData.designOutfitUrl || this.generateSuccess?.designOutfitUrl
+			url = this.generateSuccess?.newData?.designOutfitUrl || this.generateSuccess?.designOutfitUrl || this.generateSuccess?.url
+			downloadIamge(url)
 		}
-		downloadIamge(url)
 	},
 	setScaleImageIndex(index:any){
 		// this.scaleImageIndex = index
@@ -849,14 +878,47 @@ overflow: visible !important;
 						flex-shrink: 0;
 						height: 25rem;
 						position: relative;
-						
-						:deep(.ant-checkbox-wrapper){
+						> .checkbox{
 							position: absolute;
 							top: 2rem;
 							right: 2rem;
 						}
+						> .btnBox{
+							position: absolute;
+							right: 1rem;
+							top: 1rem;
+							display: flex;
+							flex-direction: column;
+							align-items: center;
+							justify-content: center;
+							> div{
+								width: 2rem;
+								height: 2rem;
+								display: flex;
+								border: 1px solid;
+								align-items: center;
+								border-radius: .5rem;
+								justify-content: center;
+								cursor: pointer;
+								margin-bottom: 1rem;
+								> i{
+									display: flex;
+								}
+								>.fi-br-check{
+									color: #fff;
+									display: none;
+								}
+								&.active{
+									background: #000;
+									> i{
+										display: flex;
+										color: #fff;
+									}
+								}
+							}
+						}
 						> img{
-							width: 80%;
+							width: 100%;
 							object-fit: contain;
 						}
 					}
--- a/src/component/home/design/index.vue
+++ b/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;
 										}
 									}
 									
--- a/src/component/home/design/tools.vue
+++ b/src/component/home/design/tools.vue
@@ -12,7 +12,7 @@
 		:closable="false"
 		:mask="false"
 		:keyboard="false"
-		:destroyOnClose="false"
+		:destroyOnClose="true"
 		:zIndex="1000"
 	>
 		<div class="generalModel_btn">
@@ -28,7 +28,7 @@
 			<!-- <div class="modal_title_text">
 				<div>Setting</div>
 			</div> -->
-			<div class="collectionBox" :class="{editCanvas:openType == 'editCanvas'}">
+			<div class="collectionBox">
 				<toProductRelight ref="toProduct" 
 					:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}" 
 					:isDesignPage="true"
@@ -46,9 +46,19 @@
 					v-if="openType == 'relight'"
 				></toProductRelight>
 				<poseTransfer v-if="openType == 'poseTransfer'" :isDesignPage="true" @setLike="designLike" ref="poseTransfer"></poseTransfer>
-				<div class="canvasBox" ref="canvasBox">
-					<editCanvas v-if="openType == 'editCanvas'" ref="editCanvas"
-					></editCanvas>
+				<div v-if="openType == 'editCanvas'" class="canvasBox" :class="{editCanvas:openType == 'editCanvas'}">
+					<div class="canvas" ref="canvasBox">
+						<editCanvas @changeCanvas="changeCanvas" ref="editCanvas">
+							<template #existsImageList>
+								<ExistsImageList :list="canvasSelectList" @select="handleImageSelect" />
+							</template>
+						</editCanvas>
+					</div>
+					<div class="btn">
+						<div class="gallery_btn" @click="saveCanvas">Save</div>
+						<div class="gallery_btn">Share</div>
+						<div class="gallery_btn" @click="exportElement">Export</div>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -66,10 +76,12 @@ import { useI18n } from 'vue-i18n'
 import toProductRelight from '../tools/toProduct/index.vue'
 import poseTransfer from '../tools/poseTransfer/index.vue'
 import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
+import ExistsImageList from "@/component/Canvas/ExistsImageList/index.vue";
+import JSZip, { forEach } from "jszip";

 export default defineComponent({
 	components:{
-		toProductRelight,poseTransfer,editCanvas
+		toProductRelight,poseTransfer,editCanvas,ExistsImageList
 	},
 	props:{
 	},
@@ -83,6 +95,8 @@ export default defineComponent({
 			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
 			createProbject:inject('createProbject',()=>{}) as any,
 			likeDesignList:[],
+			canvasSelectList:[] as any,
+			canvasDetailData:null as any,
 		})
 		const dataDom = reactive({
 			toProduct:null as any,
@@ -93,8 +107,10 @@ export default defineComponent({
 		const init = (value:any,list:any)=>{
 			data.designTools = true
 			data.openType = value
-			if(value == 'editCanvas')
-			return
+			if(value == 'editCanvas'){
+				getSelectCanvasImg()
+				return
+			}
 			data.likeDesignList = list
 			nextTick(()=>{
 				let fileList = [] as any
@@ -118,13 +134,180 @@ export default defineComponent({
 				dataDom[value].openSetData(fileList)
 			})
 		}
+		
 		let cleardata = async ()=>{
 			data.openType = ''
 			data.likeDesignList = []
 			data.designTools = false
 		}
 		const designLike = ()=>{
+			
+		}

+
+		//画布相关
+		const getSelectCanvasImg = ()=>{
+			let allCollection = store.state.UploadFilesModule.allBoardData
+			let allCollectionStr = [
+				{value:'disposeMoodboard',name:'Entirety Moodboard'},
+				{value:'moodboardFiles',name:'Moodboard'},
+				{value:'printboardFiles',name:'Printboard'},
+				{value:'sketchboardFiles',name:'Sketchboard'},
+			]
+			allCollectionStr.forEach((itemStr:any)=>{
+				let list = [] as any
+				allCollection[itemStr.value].forEach((imgItem)=>{
+					list.push({url:imgItem.url || imgItem.imgUrl})
+				})
+				let obj = {
+					value:itemStr.value,
+					type:itemStr.name,
+					imgList:list,
+				}
+				if(list.length > 0){
+					data.canvasSelectList.push(obj)
+				}
+			})
+			let designData = store.state.HomeStoreModule.likeDesignCollectionList
+			if(designData.length > 0){
+				let list = [] as any
+				designData.forEach((item:any)=>{
+					list.push({url:item.designOutfitUrl || item.url})
+					if(item.childList.length > 0){
+						item.childList.forEach((childItem)=>{
+							list.push({url:childItem.designOutfitUrl || childItem.url})
+						})
+					}
+				})
+				let obj = {
+					value:'design',
+					type:'Design',
+					imgList:list
+				}
+				if(list.length > 0){
+					data.canvasSelectList.push(obj)
+				}
+			}
+			let mannquinList = data.selectObject.model
+			let list = [] as any
+			mannquinList.forEach((item:any)=>{
+				list.push({url:item.url})
+			})
+			let obj = {
+				value:'mannquin',
+				type:'Mannquin',
+				imgList:list
+			}
+			if(list.length > 0){
+				data.canvasSelectList.push(obj)
+			}
+			console.log(mannquinList)
+		}
+		const handleImageSelect = (value:any)=>{
+			dataDom.editCanvas.addImageToLayer(value.url)
+		}
+		const saveCanvas = ()=>{
+			let canvasJSON = dataDom.editCanvas.getJSON()
+			console.log(JSON.parse(canvasJSON))
+			if(!canvasJSON)return
+			let blob = new Blob([canvasJSON], { type: "application/json" });
+			let formData = new FormData();
+			formData.append("file", blob, "data.json");
+			formData.append("module", "canvas");
+			formData.append("projectId", store.state.Workspace.probjects.id)
+			let config = {
+				headers: { "Content-Type": "multipart/form-data", Accept: "*/*" },
+			};
+			Https.axiosPost(Https.httpUrls.exportSave, formData, config).then(
+				(rv) => {
+					console.log(rv)
+				}
+			);
+		}
+		const exportElement = async ()=>{
+			 //设置导出
+			 console.log(data.canvasDetailData)
+			 let img = [] as any;
+			 if(data.canvasDetailData.commandManager.undoStack.length > 0){
+				await dataDom.editCanvas.exportImage({isContainBg:false,isContainFixed:false}).then((rv:any)=>{
+					var imageDataURL = rv
+					img.push({
+						imgUrl: imageDataURL,
+						name: "collection.png",
+					});
+				})
+			}
+			for(let i = 0; i < data.canvasSelectList.length;i++){
+				let item = data.canvasSelectList[i]
+				console.log(item)
+				item.imgList.forEach((imgItem:any,index:any)=>{
+					let nameTail = imgItem.url?.split(".").pop().split("?").shift();
+					img.push({
+						imgUrl:imgItem.url,
+						name:`${item.type}${index}.${nameTail}`
+					})
+				})
+			 }
+			 console.log(img)
+			 if(img.length>0)downImg(img);
+		}
+		let getImgArrayBuffer = (url) => {
+            return new Promise((resolve, reject) => {
+                //通过请求获取文件blob格式
+                let xmlhttp = new XMLHttpRequest();
+                xmlhttp.open("GET", url, true);
+                xmlhttp.responseType = "blob";
+				xmlhttp.withCredentials = false; 
+                xmlhttp.onload = function () {
+                    if (this.status == 200) {
+                        resolve(this.response);
+                    } else {
+                        reject(this.status);
+                    }
+                };
+                xmlhttp.send();
+            });
+        };
+		let downImg = (imagesParams:any) => {
+            let zip = new JSZip();
+            let cache = {};
+            let promises = [];
+            for (let item of imagesParams) {
+                const promise = getImgArrayBuffer(item.imgUrl).then((value) => {
+                    // 下载文件, 并存成ArrayBuffer对象(blob)
+                    zip.file(item.name, value, { binary: true }); // 逐个添加文件
+                    cache[item.title] = value;
+                })
+                promises.push(promise);
+            }
+			Promise.all(promises)
+                .then(() => {
+					function downloadBlob(blob, filename) {
+						const link = document.createElement('a');
+						const url = URL.createObjectURL(blob);
+						link.href = url;
+						link.download = filename;
+						document.body.appendChild(link);
+						link.click();
+						URL.revokeObjectURL(url);
+						document.body.removeChild(link);
+					}
+                    zip.generateAsync({ type: "blob" }).then((content) => {
+                        // 生成二进制流
+						downloadBlob(content,'DesignFiles')
+                        // FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件  自定义文件名
+                        data.isShowMark = false;
+
+                    });
+
+                })
+                .catch((res) => {
+                    // message.warning(t('HomeView.jsContent3'));
+                    data.isShowMark = false;
+                });
+        };
+		const changeCanvas = (value:any)=>{
+			data.canvasDetailData = value
 		}
 		return{
 			...toRefs(dataDom),
@@ -132,6 +315,10 @@ export default defineComponent({
 			cleardata,
 			init,
 			designLike,
+			handleImageSelect,
+			saveCanvas,
+			exportElement,
+			changeCanvas,
 		}
 	},
 	provide() {
@@ -176,15 +363,27 @@ export default defineComponent({
 			height: 100%;
 			> .collectionBox{
 				height: 100%;
-				&.editCanvas{
-					padding-top: 5rem;
-					padding-right: 5rem;
-					display: flex;
-				}
+				
 				> .canvasBox{
 					height: 100%;
 					flex:1;
-					position: relative;
+					display: flex;
+					&.editCanvas{
+						padding-top: 5rem;
+						display: flex;
+					}
+					> .canvas{
+						position: relative;
+						flex: 1;
+					}
+					> .btn{
+						display: flex;
+						flex-direction: column;
+						justify-content: flex-end;
+						> div{
+							margin: 1rem;
+						}
+					}
 				}
 			}
 		}
--- a/src/component/home/index.vue
+++ b/src/component/home/index.vue
@@ -189,6 +189,7 @@ export default defineComponent({
 			// 	dataDom.workflow.isUpdataPorject = true
 			// })
 			setChatData()
+			console.log(123123)
 			if(route.name == 'tools'){
 				getCollection('tools',null)	
 			}else{
@@ -256,12 +257,10 @@ export default defineComponent({
 					}
 					let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
 					// let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','toProduct','relight','poseTransfer','mannequin']
-					if(module){
-						let canvasData = ['canvas','deReconstruction']
-						for (let index = 0; index < canvasData.length; index++) {
-							const item = canvasData[index];
-							await getCanvasData(item)
-						}
+					let canvasData = ['canvas','deReconstruction']
+					for (let index = 0; index < canvasData.length; index++) {
+						const item = canvasData[index];
+						await getCanvasData(item)
 					}
 					
 					// await setitemData(allBoardData)
@@ -494,7 +493,13 @@ export default defineComponent({
 		const newProject = (value:any)=>{
 			settingGetHistory()
 			emit('setNewProject')
-			router.push(`home?history=${value.id}&create=true`)
+			let chatModel = false
+			if(value.newMode == 'chat'){
+				chatModel = true
+			}else{
+				chatModel = false
+			}
+			router.push(`home?history=${value.id}&create=true&chatMode=${chatModel}`)
 			data.chatData = value
 			
 		}
--- a/src/component/home/newProject/index.vue
+++ b/src/component/home/newProject/index.vue
@@ -2,7 +2,7 @@
 	<div class="newProject">
 		<div class="contentBox">
 			<div class="content">
-				<div class="title">How can I help you today?</div>
+				<div class="title">{{$t('newProjectg.helpYou')}}</div>
 				<div class="selectFlow">
 					<div class="select">
 						<div class="item" @click="setFlow(item)" :class="{active:item.title == selectFlow.title}" v-for="item in flowList">{{ item.title }}</div>
@@ -13,8 +13,8 @@
 				</div>
 				<div class="chatOrSetting">
 					<div class="select">
-						<div class="item" @click="setChatOrSetting('chat')" :class="{active:chatOrSetting == 'chat'}">Chat</div>
-						<div class="item" @click="setChatOrSetting('setting')" :class="{active:chatOrSetting == 'setting'}">Setting</div>
+						<div class="item" @click="setChatOrSetting('chat')" :class="{active:chatOrSetting == 'chat'}">{{$t('newProjectg.Chat')}}</div>
+						<div class="item" @click="setChatOrSetting('setting')" :class="{active:chatOrSetting == 'setting'}">{{$t('newProjectg.Setting')}}</div>
 					</div>
 				</div>
 				<div class="chatBox" v-show="chatOrSetting == 'chat'">
@@ -30,7 +30,7 @@
 							<i class="fi fi-rs-paperclip-vertical">
 								<input type="file" @change="handleFileUpload($event)">
 							</i>
-							<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">Deep Thinking</div>
+							<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">{{$t('newProjectg.DeepThinking')}}</div>
 						</div>
 						<div class="sendBox">
 							<div class="maxNum">{{ chatContent.length }}/10000</div>
@@ -44,7 +44,7 @@
 					<workspace @setProject="setProject" :httpWorkflowType="selectFlow.value"></workspace>
 				</div>
 				<div class="hint" v-show="chatOrSetting == 'chat'">
-					<div class="item" v-for="item in hintList" @click="addChatContent(item)">{{ item }}</div>
+					<div class="item" v-for="item in hintList" :title="item" @click="addChatContent(item)">{{ item }}</div>
 				</div>
 			</div>
 		</div>
@@ -71,36 +71,37 @@ export default defineComponent({
 	},
 	emits:['newProject'],
 	setup(props,{emit}) {
+		const {t} = useI18n()
 		const store = useStore();
 		const data = reactive({
 			flowList:[
 				{
-					title:'Series Design',
+					title:computed(()=>t('newProjectg.SeriesDesign')),
 					value:'SERIES_DESIGN',
 					describe:[
-						'Series Design focuses on the coordinated design of multi-category clothing, ideal for creating a unified fashion collection. You can use the Moodboard, Printboard, Colorboard, Sketchboard, and Mannequin sections in the Design Assests panel to organize your inspiration and design complementary clothing combinations. Finally, refine your designs in the Draft and Collection panels using tools like To Product Image, Relight, and Transfer Pose, then export to the Canvas to showcase your complete series design.',
+						computed(()=>t('newProjectg.SeriesDesignInfo')),
 					]
 				},
 				{
-					title:'Single Design',
+					title:computed(()=>t('newProjectg.SingleDesign')),
 					value:'SINGLE_DESIGN',
 					describe:[
-						'Single Design centers on the independent design of a single clothing category, such as a T-shirt, dress, or jacket, without considering coordination with other items. Use the Moodboard, Printboard, Colorboard, and Sketchboard in the Design Assests panel to gather inspiration and focus on crafting a unique piece. Once completed, optimize your design in the Draft and Collection panels with tools like To Product Image, Relight, and Transfer Pose, then export to the Canvas to display your individual creation.',
+						computed(()=>t('newProjectg.SingleDesignInfo')),
 					]
 				},
 			],	
 			selectFlow:{
-				title:'Series Design',
+				title:computed(()=>t('newProjectg.SeriesDesign')),
 				value:'SERIES_DESIGN',
 				describe:[
-					'Series Design focuses on the coordinated design of multi-category clothing, ideal for creating a unified fashion collection. You can use the Moodboard, Printboard, Colorboard, Sketchboard, and Mannequin sections in the Design Assests panel to organize your inspiration and design complementary clothing combinations. Finally, refine your designs in the Draft and Collection panels using tools like To Product Image, Relight, and Transfer Pose, then export to the Canvas to showcase your complete series design.',
+					computed(()=>t('newProjectg.SeriesDesignInfo')),
 				]
 			},
 			chatContent:'',
 			hintList:[
-				'设计一套田园风衣服',
-				'设计一套夏日风衣服',
-				'设计一套未来风格的衣服',
+				computed(()=>t('newProjectg.hintList1')),
+				computed(()=>t('newProjectg.hintList2')),
+				computed(()=>t('newProjectg.hintList3')),
 			],
 			enableThinking:false,//深度思考
 			uploadFile:null as any,
@@ -125,11 +126,12 @@ export default defineComponent({
 			e.target.style.height = `${e.target.scrollHeight}px`;
 		}
 		const addChatContent = (item:any)=>{
-			if((data.textarea.value?.length + item.length) > 10000)return
+			let str = item.value
+			if((data.textarea.value?.length + str.length) > 10000)return
 			// data.chatContent += item
 			// data.textarea.value += item
-			data.chatContent = item
-			data.textarea.value = item
+			data.chatContent = str
+			data.textarea.value = str
 		}
 		const sendChat = ()=>{
 			if(!data.chatContent)return
@@ -145,6 +147,7 @@ export default defineComponent({
 						fileList:fileList,
 						chatContent:data.chatContent,
 						enableThinking:data.enableThinking,
+						newMode:'chat',
 					}
 					emit('newProject',value)
 				}
@@ -173,18 +176,18 @@ export default defineComponent({
 		}
 		const handleFileUpload = (event:any)=>{
 			if (event.target.files[0].size > 5 * 1024 * 1024) { // 5MB
-				message.info('The file size cannot exceed 5MB.');
+				message.info(t('newProjectg.jsContent1'));
 				return
 			}
 			let type = event.target.files[0].type.startsWith('image/')
 			if(type){
 				if(data.filList.filter((item:any)=>item.type == 'image').length >= 5){
-					message.info('You can only upload five pictures.');
+					message.info(t('newProjectg.jsContent2'));
 					return	
 				}
 			}else{
 				if(data.filList.filter((item:any)=>item.type == 'file').length >= 1){
-					message.info('You can only upload one file.');
+					message.info(t('newProjectg.jsContent3'));
 					return	
 				}
 			}
@@ -448,6 +451,9 @@ export default defineComponent({
 						border-radius: 1.6rem;
 						cursor: pointer;
 						padding: 1.2rem;
+						white-space: nowrap; /* 文本不换行 */
+						overflow: hidden; /* 溢出部分隐藏 */
+						text-overflow: ellipsis; /* 显示省略号 */
 						&:hover{
 							background: #f5f5f5;
 						}
--- a/src/component/home/newProject/workspace.vue
+++ b/src/component/home/newProject/workspace.vue
@@ -2,51 +2,51 @@
    <div class="workspace">
 		<div class="workspaceBox">
 			<div class="projectName marginBottom" v-if="show.title">
-				<div class="text">Project name: <span style="color: red;">*</span></div>
+				<div class="text">{{$t('Habit.ProjectName')}}: <span style="color: red;">*</span></div>
 				<div class="input">
 					<input type="text" v-model="selectObject.name">
 				</div>
 			</div>
 			<div class="gender marginBottom" v-if="show.age">
-				<div class="text">Role</div>
+				<div class="text">{{$t('Habit.Role')}}</div>
 				<div class="radio">
 					<label>
 						<input type="radio" name="ageGroup" v-model="selectObject.ageGroup" value="Adult">
-						<span>Adult</span>
+						<span>{{$t('Habit.Adult')}}</span>
 					</label>
 					<label>
 						<input type="radio" name="ageGroup" v-model="selectObject.ageGroup" value="Child">
-						<span>Child</span>
+						<span>{{$t('Habit.Child')}}</span>
 					</label>
 				</div>
 			</div>
 			<div class="gender marginBottom">
-				<div class="text">Gender：</div>
+				<div class="text">{{$t('Habit.Gender')}}：</div>
 				<div class="radio">
 					<label>
 						<input type="radio" name="gender" v-model="selectObject.sex" value="Female">
-						<span>Female</span>
+						<span>{{$t('Habit.Female')}}</span>
 					</label>
 					<label>
 						<input type="radio" name="gender" v-model="selectObject.sex" value="Male">
-						<span>Male</span>
+						<span>{{$t('Habit.Male')}}</span>
 					</label>
 				</div>
 			</div>
 			<div class="style marginBottom" v-if="show.style">
-				<div class="text">Style：</div>
+				<div class="text">{{$t('Habit.Style')}}：</div>
 				<div class="text">{{ selectObject?.styleName?selectObject?.styleName:'All' }}</div>
 				<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div>
 			</div>
 			<div class="style marginBottom brand">
-				<div class="text">Brand DNA</div>
+				<div class="text">{{$t('Habit.Brand')}}</div>
 				<div class="text"><img v-show="selectObject.userBrandDna" :src="selectObject.userBrandDnaImg"></div>
 				<!-- <div class="text"><img v-show="selectObject.userBrandDna" :src="selectObject.userBrandDnaImg">{{ selectObject.userBrandDnaName }}</div> -->
 				<div class="gallery_btn" style="line-height: 5rem;" @click="setBrandDNA">{{ $t('Habit.Select') }}</div>
 			</div>
 			<div class="brandDNAStrenght marginBottom" v-if="selectObject.userBrandDna">
 				<div class="text">
-					Brand DNA Strength
+					{{$t('Habit.BrandStrength')}}
 				</div>
 				<a-slider class="system_silder"
                    v-model:value="selectObject.brandPercentage"
@@ -73,12 +73,12 @@
 			</div>
 			<div class="position marginBottom" style="display: flex; align-items: center;justify-content: space-between;" v-show="show.position" v-if="httpWorkflowType == 'SINGLE_DESIGN'">
 				<div class="text">
-					Category:
+					{{$t('Habit.Category')}}:
 				</div>
 				<generalMenu style="width:80%" :selectWidth="'100%'" :dataList="selectObject.positionList" @setprintModel="setprintModel" :item="selectObject.position"></generalMenu>
 			</div>
 			<div class="complete">
-				<div class="gallery_btn" @click="complete">Complete</div>
+				<div class="gallery_btn" @click="complete">{{$t('Habit.Complete')}}</div>
 			</div>
 		</div>
 		<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle" :mannequinStyle="mannequinStyle"></habitSetStyle>
--- a/src/component/home/tools/deReconstruction/canvas/index.vue
+++ b/src/component/home/tools/deReconstruction/canvas/index.vue
@@ -4,6 +4,7 @@
 			<editCanvas v-if="canvasLoad" ref="editCanvas"
 			 :config="canvasConfig"
 			:clothingImageUrl="modelUrl" 
+			@changeCanvas="changeCanvas"
 			:clothing-image-opts="{
 				imageMode:'contains',
 			}"
@@ -29,17 +30,20 @@ export default defineComponent({
    components: {
 		editCanvas,
    },
-	emits:['setGenerateImg'],
+	emits:['setGenerateImg','setCanvasJSON'],
    setup(props,{emit}) {
 		const { t } = useI18n();
 		const store = useStore();
 		const isShowMark = ref(false)
 		const component = reactive({
 		})
+		const createProbject = inject('createProbject',()=>{})
 		const data = reactive({
 			canvasLoad:false,
 			canvasConfig:{},
 			modelUrl:'',
+			probjects:computed(()=>store.state.Workspace.probjects),
+			undoStack:0,
 		})
 		const dataDom = reactive({
 			editCanvas:null,
@@ -48,8 +52,10 @@ export default defineComponent({
 		const openSetData = ()=>{
 			// dataDom.canvasContent.openSetData()
 		}
-		const addImage = (value)=>{
-			console.log(value)
+		const addImage = async (value)=>{
+			if(!data?.probjects?.id){
+				await createProbject()
+			}
 			// dataDom.editCanvas.addImageToLayer(value.imgUrl)
 			dataDom.editCanvas.addImageToLayer(value.url)
 		}
@@ -57,11 +63,14 @@ export default defineComponent({
 			dataDom.editCanvas.changeFixedImage(value)
 		}
 		const getData = async ()=>{
-		
+			console.log(dataDom.editCanvas.getCanvasManager().commandManager)
+			// if(dataDom.editCanvas.getState())
+			dataDom.editCanvas.exportImage({isContainBg:false,isContainFixed:false}).then((rv)=>{
+				emit('setGenerateImg',rv)
+			})
 		}
-		const getCanvasData = ()=>{
-			
-			return canvasExport
+		const getCanvasJSON = ()=>{
+			return dataDom.editCanvas.getJSON()
 		}
 		const setCanvas = (url)=>{
 			return new Promise((res,rev)=>{
@@ -74,13 +83,22 @@ export default defineComponent({
 					wH = [1,domHeight/imgHeight]
 					data.canvasConfig.width = img.width * wH[1]
 					data.canvasConfig.height = domHeight
-					console.log(data.canvasConfig,123123123)
 					data.canvasLoad = true
 					res('')
 				}
 				img.src = url
 			})
 		}
+		let time = null
+		const changeCanvas = async (value)=>{
+			// if(!data?.probjects?.id){
+			// 	await createProbject()
+			// }
+			clearTimeout(time)
+			time = setTimeout(()=>{
+				emit('setCanvasJSON',getCanvasJSON())
+			},5000)
+		}
        onMounted(() => {
 			nextTick(()=>{
 				let url = new URL(defaultModel, import.meta.url).href
@@ -100,7 +118,8 @@ export default defineComponent({
 			openSetData,
 			addImage,
 			getData,
-			getCanvasData,
+			getCanvasJSON,
+			changeCanvas,
        };
    },
    data(prop) {
--- a/src/component/home/tools/deReconstruction/index.vue
+++ b/src/component/home/tools/deReconstruction/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="deReconstruction">
 		<div class="selectSektch itemBox">
-			<div class="type">
+			<!-- <div class="type">
 				<a-select
 					v-model:value="segmentationType"
 					show-search
@@ -10,24 +10,39 @@
 					placeholder="Please select"
 					:options="[{value:'product',label:'product'},{value:'sketch',label:'sketch'}]"
 				></a-select>
-				<!-- <label>
-					<div class="text">product</div>
-					<input type="radio" value="product" v-model="segmentationType">
-				</label>
-				<label>
-					<div class="text">sketch</div>
-					<input type="radio" value="sketch" v-model="segmentationType">
-				</label> -->
-			</div>
-			<selectList @selectImgItem="selectImgItem" :deReconstructionList="segmentationTypeList" :isSegmentation="true" upLoadHttpsUrl="/api/element/imageSegmentation" level1Type="Sketchboard" :randomId="false" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
+			</div> -->
+			<selectList @selectImgItem="selectImgItem" :deReconstructionList="segmentationTypeList" :isSegmentation="true" upLoadHttpsUrl="/api/element/imageSegmentation" level1Type="Sketchboard" :randomId="false" type="sketch" :catecoryList="sketchCatecoryList">
+				<template v-slot:selectSex>
+					<div class="generalModel_state" style="margin-left: auto">
+						<div class="generalModel_state_item smail" style="margin-right: 0">
+							<a-select
+								ref="select"
+								v-model:value="sex"
+								:options="sexList"
+								size="large"
+								:fieldNames="{ label: 'name', value: 'value' }"
+								style="width:10rem"
+								@change="sexChange"
+							>
+								<template #suffixIcon
+									><span
+										class="icon iconfont icon-xiala"
+										style="color: #000"
+									></span
+								></template>
+							</a-select>
+						</div>
+					</div>
+				</template>
+			</selectList>
 		</div>
 		<div class="canvas itemBox">
-			<canvasBox @setGenerateImg="setGenerateImg" ref="canvasBox"></canvasBox>
+			<canvasBox @setGenerateImg="setGenerateImg" @setCanvasJSON="setCanvasJSON" ref="canvasBox"></canvasBox>
 			<!-- <canvasUpload :config="ceditorConfig" clothingImageUrl="https://www.minio-api.aida.com.hk/aida-sys-image/models/female/2e4815b9-1191-419d-94ed-5771239ca4a5.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20250608%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250608T161025Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=a4374c0954d11c2490ef3b86a1924cf6d423ed8ac56023b3c3ccabcdf0672620"></canvasUpload> -->
 		</div>
 		<div class="finished itemBox">
 			<div class="btnTop">
-				<div class="gallery_btn" @click="getCanvasImg">Generate line</div>
+				<div class="gallery_btn" @click="getCanvasImg">{{ $t('DeReconstruction.GenerateLineDrawing') }}</div>
 				<div v-show="!generateImg?.[0]?.isLike && generateImg" class="icon iconfont icon-jushoucang icon_like" @click="generateLike('like')"></div>
 				<div v-show="generateImg?.[0]?.isLike" class="icon iconfont icon-jushoucanggift" @click="generateLike('noLike')"></div>
 			</div>
@@ -36,7 +51,7 @@
 				<sketchCategory v-if="generateImg?.[0]?.url" v-model:disignTypeList="sketchCatecoryList" :item="generateImg[0]" :isSpread="false"></sketchCategory>
 			</div>
 			<div class="btnBottom" @click="getCanvasData">
-				<div class="gallery_btn">Download</div>
+				<div class="gallery_btn">{{ $t('DeReconstruction.Download') }}</div>
 			</div>
 		</div>
 	</div>
@@ -80,25 +95,30 @@ export default defineComponent({
 			canvasBox:null as any,
 		})
 		const selectImgItem = (data:any)=>{
-			if(!data.designType){
-				canvasAddImg(data)
-			}else{
-				// data.minioUrl = data.url
-				// dataDom.canvasBox.addImage(data)
-				getSegmentation(data)
-			}
+			console.log(data)
+			// getSegmentation(data)
+			getSegmentation(data)
+
 		}
 		const canvasAddImg = (list:any)=>{
 			list.segmentedImages.forEach((url:any) => {
 				list.imgUrl = url
-				dataDom.canvasBox.addImage(list)
+				dataDom.canvasBox.addImage({url})
 			});
 		}
 		const getSegmentation = (value:any)=>{
+			let segmentationType = ''
+			if(value.designType == "Library"){
+				segmentationType = 'sketch'
+			}else{
+				segmentationType = value.categoryValue
+			}
 			let param = new FormData(); 
 			param.append('id',value.id)
 			param.append('file','')
-			param.append('type',data.segmentationType)
+			param.append('type',segmentationType)
+			let sourceType = value.designType || 'Upload'
+			param.append('sourceType',sourceType)
 			let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
 			Https.axiosPost(Https.httpUrls.imageSegmentation,param,config)
 			.then((rv:any) => {
@@ -139,6 +159,7 @@ export default defineComponent({
 					setIsShowMark(false)
 				}
 			})
+			
 		}
 		const generateLike = (str:string)=>{
 			if(data.generateImg[0].id == -1)return
@@ -168,6 +189,22 @@ export default defineComponent({
 				});
 			}
 		}
+		const setCanvasJSON = (canvasJSON)=>{
+			if(!canvasJSON)return
+			let blob = new Blob([canvasJSON], { type: "application/json" });
+			let formData = new FormData();
+			formData.append("file", blob, "data.json");
+			formData.append("module", "deReconstruction");
+			formData.append("projectId", store.state.Workspace.probjects.id)
+			let config = {
+				headers: { "Content-Type": "multipart/form-data", Accept: "*/*" },
+			};
+			Https.axiosPost(Https.httpUrls.exportSave, formData, config).then(
+				(rv) => {
+					console.log(rv)
+				}
+			);
+		}
 		const setCanvas = (str:string)=>{
 			dataDom.canvasBox.setCanvas(str)
 		}
@@ -185,6 +222,7 @@ export default defineComponent({
 			generateLike,
 			getCanvasData,
 			setCanvas,
+			setCanvasJSON,
 		}
 	},
 	provide() {
@@ -237,6 +275,8 @@ export default defineComponent({
 				width: 45rem;
 				// width: 58rem;
 				display: flex;
+				height: 100%;
+				overflow: hidden;
 				flex-direction: column;
 				> .btnTop{
 					display: flex;
@@ -256,8 +296,9 @@ export default defineComponent({
 				> .content{
 					flex: 1;
 					// overflow: hidden;
-					margin: 10rem 0;
+					margin: 2rem 0;
 					position: relative;
+					overflow: hidden;
 					> img{
 						width: 100%;
 						height: 100%;
--- a/src/component/home/tools/patternMaking3D/index.vue
+++ b/src/component/home/tools/patternMaking3D/index.vue
@@ -2,8 +2,8 @@
 	<div class="patternMaking3D">
 		<div class="selectModel">
 			<div class="heard selectList">
-				<div class="title" :class="{active:libraryOrModel == 'model'}" @click="setLibraryOrModel('model')">Clothing</div>
-				<div class="title" :class="{active:libraryOrModel == 'print'}" @click="setLibraryOrModel('print')">Print</div>
+				<div class="title" :class="{active:libraryOrModel == 'model'}" @click="setLibraryOrModel('model')">{{$t('patternMaking3D.Clothing')}}</div>
+				<div class="title" :class="{active:libraryOrModel == 'print'}" @click="setLibraryOrModel('print')">{{$t('patternMaking3D.Print')}}</div>
 				<div class="generalModel_state">
 					<div class="generalModel_state_item smail">
 						<a-select
@@ -50,11 +50,11 @@
 		</div>
 		<div class="model" v-show="selectModel.id != -1">
 			<div class="heard">
-				<div class="text">Technical sketch</div>
-				<div class="switch">
-					front
+				<div class="text">{{$t('patternMaking3D.TechnicalSketch')}}</div>
+				<div class="switch" v-show="!imgOrThree">
+					{{$t('patternMaking3D.front')}}
 					<a-switch v-model:checked="isFront" />
-					back
+					{{$t('patternMaking3D.back')}}
 				</div>
 			</div>
 			<div class="modelBox">
@@ -67,8 +67,8 @@
 			<div class="gallery_btn" v-show="!imgOrThree" @click="setImgOrThree(true)">3D view</div>			
 			<div class="gallery_btn" v-show="imgOrThree" @click="setImgOrThree(false)">Img view</div>			
 		</div>
-		<div class="flatPatterm" v-if="userDetail.systemUser == 6 || userDetail.systemUser == 5" v-show="selectModel.id != -1">
-			<div class="heard">Flat pattern</div>
+		<div class="flatPatterm" v-show="selectModel.id != -1">
+			<div class="heard">{{$t('patternMaking3D.FlatPattern')}}</div>
 			<div class="modelBox">
 				<div class="img">
 					<img :src="selectModel.threeDPatternLayoutUrl" alt="">
@@ -77,7 +77,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="gallery_btn" @click="openDown()">Download</div>	
+			<div class="gallery_btn" @click="openDown()" v-if="userDetail.systemUser == 6 || userDetail.systemUser == 5">{{$t('DeReconstruction.Download')}}</div>	
 		</div>
 		<div class="download">
 			<download ref="download"></download>
--- a/src/component/home/tools/poseTransfer/index.vue
+++ b/src/component/home/tools/poseTransfer/index.vue
@@ -7,7 +7,7 @@
 					<!-- <selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print"></selectList> -->
 					<div class="selectImg">
 						<div class="head">
-							<div class="text">Choose design to transfer</div>
+							<div class="text">{{ $t('poseTransfer.SelectDesign') }}</div>
 						</div>
 						<div class="imgBox" v-mousewheel>
 							<!-- <div class="item" :class="{active:item.id == selectImg.id}" v-for="item in currentList" @click="selectImgItem(item)">
@@ -57,7 +57,7 @@
 					</div>
 					<div class="poses">
 						<div class="head">
-							<div class="text">Choose pose</div>
+							<div class="text">{{$t('poseTransfer.Selectpose')}}</div>
 						</div>
 						<div class="imgBox" v-mousewheel>
 							<div class="item" v-for="item in poseList" @click="selectPose(item)">
@@ -66,7 +66,11 @@
 									@mouseenter.stop="gifPlay($event,item)"
 									@mouseleave.stop="gifPause($event,item)" 
 								>	
-								<a-checkbox v-model:checked="item.isChecked"></a-checkbox>
+								<div class="btnBox">
+									<div :class="{active:item.isChecked}">
+										<i class="fi fi-br-check"></i>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
@@ -93,7 +97,7 @@
 		</div>
 		<div class="likeBox">
 			<div class="element">
-				<div class="title"><i class="fi fi-rs-comments"></i><span>Selected Video</span></div>
+				<div class="title"><i class="fi fi-rs-comments"></i><span>{{$t('poseTransfer.InputVideo')}}</span></div>
 				<div class="content">
 					<generalDrag ref="generalDragLeft" :list="likeList" :isLike="true" :isVideo="true" @setBtn="likeSetBtn"></generalDrag>
 				</div>
@@ -105,9 +109,9 @@
 				</div>
 			</div>
 		</div>
-		<div class="noLikeBox" :class="{active:button.right}">
+		<div class="noLikeBox" :class="{active:button.right,designPage:isDesignPage}">
 			<div class="element">
-				<div class="title"><i class="fi fi-rs-comments"></i><span>Generated Video</span></div>
+				<div class="title"><i class="fi fi-rs-comments"></i><span>{{$t('poseTransfer.InputVideo')}}</span></div>
 				<div class="content">
 					<generalDrag ref="generalDragRight" :list="noLikeList" :isVideo="true" @setBtn="noLikeSetBtn"></generalDrag>
 				</div>
@@ -297,6 +301,7 @@ export default defineComponent({
 									store.dispatch('getCredits')
 								}else if(element.status == 'Fail'){
 									let index = data.noLikeList.findIndex((obj:any) => obj.taskId === element.taskId);
+									message.info(t('ProductImg.jsContent3'))
 									data.noLikeList.splice(index,1)
 									clearInterval(data.generateTime)
 									clearInterval(data.remGenerateTime)
@@ -333,7 +338,12 @@ export default defineComponent({
 				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:value}).then(
 					(rv) => {
 						data.waitList = []
-						data.noLikeList = data.noLikeList.filter((item:any)=>item.status == 'Success')
+						const indexes = data.noLikeList
+						.map((item, index) => item?.status !== 'Success' ? index : -1)
+						.filter(index => index !== -1);
+						indexes.forEach((itemIndex:number)=>{
+							data.noLikeList.splice(itemIndex,1)	
+						})
 					}
 				).catch(res=>{
 				});
@@ -679,6 +689,40 @@ export default defineComponent({
 									}
 								}
 							}
+							> .btnBox{
+								position: absolute;
+								right: 1rem;
+								top: 1rem;
+								display: flex;
+								flex-direction: column;
+								align-items: center;
+								justify-content: center;
+								> div{
+									width: 2rem;
+									height: 2rem;
+									display: flex;
+									border: 1px solid;
+									align-items: center;
+									border-radius: .5rem;
+									justify-content: center;
+									cursor: pointer;
+									margin-bottom: 1rem;
+									> i{
+										display: flex;
+									}
+									>.fi-br-check{
+										color: #fff;
+										display: none;
+									}
+									&.active{
+										background: #000;
+										> i{
+											display: flex;
+											color: #fff;
+										}
+									}
+								}
+							}
 							> img{
 								width: 100%;
 								object-fit: contain;
@@ -713,7 +757,7 @@ export default defineComponent({
 				flex-direction: column;
 				> .btnLeft,> .btnRight{
 					position: absolute;
-					width: 4rem;
+					width: 3rem;
 					height: 7rem;
 					background: #fff;
 					border: 2px solid;
@@ -727,11 +771,13 @@ export default defineComponent({
 					justify-content: center;
 					z-index: 2;
 					cursor: pointer;
+					transition: all .3s;
 					>span{
 						transition: all .3s;
 						transform: rotate(90deg);
 						
 					}
+					
 					&.active{
 						>span{
 							transform: rotate(270deg);
@@ -740,8 +786,12 @@ export default defineComponent({
 					}
 				}
 				> .btnRight{
-					left: calc(100% + 4rem) ;
+					left: calc(100% + 3rem);
 					transform: translate(-100%,-50%) rotate(180deg);
+					&:hover{
+						width: 4rem;
+						left: calc(100% + 4rem);
+					}
 				}
 				> .content{
 					flex: 1;
@@ -760,6 +810,10 @@ export default defineComponent({
 			}
 			
 		}
+
+		> .designPage{
+			padding-left: 4rem;
+		}
 		> .noLikeBox{
 			padding-left: 2.3rem;
 			&.active{
--- a/src/component/home/tools/toProduct/index.vue
+++ b/src/component/home/tools/toProduct/index.vue
@@ -75,7 +75,7 @@
 						<input type="number" readonly v-model="similarity">
 					</div>
 					<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_title productImg_content_item_title_similarity">
-						<span>Selection Function</span>
+						<span>{{$t('ProductImg.SelectionFunction')}}</span>
 					</div>
 					<div v-show="productimgMenu.value == 'Relight'" class="productImg_content_item_Direction">
 						<a-select  style="width: 100%;" v-model:value="speedData.value" :options="speedList" :field-names="{ label: 'relightLabel', value: 'value' }"></a-select>
@@ -159,7 +159,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="productImg_right" :class="{active:button.right}">
+				<div class="productImg_right" :class="{active:button.right,designPage:isDesignPage}">
 					<div class="productImg_right_item_box right generalScroll">
 						<div class="content_header_left">
 							<i class="fi fi-rs-comments"></i><span class="content_header_des">
@@ -269,23 +269,23 @@ export default defineComponent({
 		let speed = reactive({
 			speedList:[
 				{
-					title:'Generate with high quality',
-					label:'High',
-					relightLabel:'Relight',
-					value:'',
-				},{
 					title:'',
 					label:'FLUX',
 					relightLabel:'Edit',
 					value:'flux',
+				},{
+					title:'Generate with high quality',
+					label:'High',
+					relightLabel:'Relight',
+					value:'',
 				},
 			],
 			speedState:false,
 			speedData:{
-				title:'Generate with high quality',
-				relightLabel:'Relight',
-				label:'High',
-				value:'',
+				title:'',
+				label:'FLUX',
+				relightLabel:'Edit',
+				value:'flux',
 			},
 		})
 		//watch立即执行一次
@@ -629,13 +629,14 @@ export default defineComponent({
 									// productImgData.generateList[props.productimgMenu.value].unshift(element)
 									data = data.filter((item:any) => item !== element.taskId);
 								}else if(element.status == 'Fail'){
+									message.info(t('ProductImg.jsContent3'))
 									let index = productImgData.generateList.findIndex((obj:any) => obj.taskId === element.taskId);
 									productImgData.generateList.splice(index,1)
 									data = data.filter((item:any) => item !== element.taskId);
 								}
 							});
 							generateProceedList = data
-							if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
+							if((data.length == 0)){
 								// if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
 								// }
 								store.dispatch('getCredits')
@@ -1210,7 +1211,7 @@ export default defineComponent({
 		}
 		> .btnLeft,> .btnRight{
 			position: absolute;
-			width: 4rem;
+			width: 3rem;
 			height: 7rem;
 			background: #fff;
 			border: 2px solid;
@@ -1224,6 +1225,7 @@ export default defineComponent({
 			justify-content: center;
 			z-index: 2;
 			cursor: pointer;
+			transition: all .3s;
 			>span{
 				transition: all .3s;
 				transform: rotate(90deg);
@@ -1233,8 +1235,12 @@ export default defineComponent({
 			}
 		}
 		> .btnRight{
-			left: calc(100% + 4rem) ;
+			left: calc(100% + 3rem);
 			transform: translate(-100%,-50%) rotate(180deg);
+			&:hover{
+				width: 4rem;
+				left: calc(100% + 4rem);
+			}
 		}
 		.content_header_left {
 			display: flex;
@@ -1257,4 +1263,7 @@ export default defineComponent({
 	}

 }
+.designPage{
+	padding-left: 4rem;
+}
 </style>
--- a/src/component/mainPage/signUp/registerModel.vue
+++ b/src/component/mainPage/signUp/registerModel.vue
@@ -188,7 +188,7 @@
                  <div v-show="emailStap === 2" class="email_last_step">
                    <div class="email_last_step_block">
                      <span class="email_last_step_content"
-                        >Verify with one-time verification code</span
+                        >Verify using a one-time verification code</span
                      >
                      <i
                        class="fi fi-br-cross email_last_step_block_icon"
@@ -226,7 +226,7 @@
              <div class="login_form_title marign_top30">
                <label :class="{ active: emailStap == 2 }">
                  <input :state="emailStap" type="checkbox" v-model="checked" />
-                  <span>I agree to all Term, Privacy Policy and Fees</span>
+                  <span>I agree to the Terms, Privacy Policy, and Fees.</span>
                </label>
              </div>
              <div class="thirdPartyLogin marign_top30">
--- a/src/component/modules/generalDrag.vue
+++ b/src/component/modules/generalDrag.vue
@@ -27,8 +27,8 @@
 				<div class="zoom" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'zoom')">
 					<i class="fi fi-bs-expand-arrows-alt"></i>
 				</div>
-				<div class="copy" v-if="item.url && (type == 'Relight' || type == 'ToProductImage' || type == 'PoseTransfer') && isCopy" @click.stop="()=>$emit('setBtn',item.id,'copy')">
-					<i class="fi fi-sr-copy-alt"></i>
+				<div class="copy" v-if="item.url && (type == 'Relight') && isCopy" @click.stop="()=>$emit('setBtn',item.id,'copy')">
+					<i class="fi fi-br-refresh"></i>
 				</div>
 				<div class="delete" v-if="item.url && isDelete" @click.stop="()=>$emit('setBtn',item.id,'delete')">
 					<i class="fi fi-rr-trash icon_delete"></i>
@@ -324,7 +324,7 @@ export default defineComponent({
 			> img{
 				width: 100%;
 				height: 100%;
-				object-fit: cover;
+				object-fit: contain;
 				&.video{
 					object-fit: contain;
 				}
--- a/src/component/modules/generalMiniCanvas.vue
+++ b/src/component/modules/generalMiniCanvas.vue
@@ -2,7 +2,7 @@
 	<div class="generalCanvas">
 		<div class="canvasBox" ref="canvasBox">
 			<editCanvas v-if="canvasLoad" :config="canvasConfig" 
-				:clothingImageUrl="imgUrl" 
+				@canvasInit="canvasInit"
 				:clothing-image-opts="{
 					imageMode:'contains',
 				}"
@@ -55,15 +55,12 @@ export default defineComponent({
 		const openSetData = ()=>{
 			data.canvasLoad = true
 		}
-		const addImage = (value)=>{
-			console.log(value)
-			dataDom.editCanvas.addImageToLayer(value.imgUrl)
+		const canvasLoadAddImg = (url,id)=>{
+			dataDom.editCanvas.addImageToLayer(url,{layerId:id,undoable:false})
 		}
-		const addBottomImage = (value)=>{
-			dataDom.editCanvas.changeFixedImage(value)
-		}
-		const getData = async ()=>{
-		
+		const canvasInit = (value)=>{
+			// return
+			canvasLoadAddImg(props.imgUrl,value.layers.value[0].id)
 		}
 		const getCanvasData = ()=>{
 			
@@ -79,40 +76,15 @@ export default defineComponent({
 				let img = new Image()
 				img.onload = ()=>{
 					let wH = [1,1]
-					// if(img.width > img.height){
-					// 	let domHeight = dataDom.canvasBox.offsetWidth
-					// 	let imgWidth = img.width
-					// 	data.canvasConfig.height = domHeight
-					// 	data.canvasConfig.width = imgHeight/domHeight * img.width
-					// }else{
-						
-					// }
-					
 					let domHeight = dataDom.canvasBox.offsetHeight - 200
 					let imgHeight = img.height
 					wH = [1,domHeight/imgHeight]
-					console.log(domHeight,img.height,img.width)
 					data.canvasConfig.height = domHeight
 					data.canvasConfig.width = wH[1] * img.width
-					// canvasWH.value = height
-					// // canvasBox.style.width = height+'px'
-					// let wScale = 1
-					// let hScale = 1
-					// if(img.width>img.height){
-					// 	hScale = img.height/img.width
-					// 	exportWH = img.width
-					// }else{
-					// 	wScale = img.width/img.height
-					// 	exportWH = img.height
-					// }
-					// ratio = [wScale,hScale]
-					// canvas = canvasGeneral.canvasInit(canvasBox,{
-					// 	width:canvasWH.value * wScale,
-					// 	height:canvasWH.value * hScale,
-					// })
-					// canvas.selection = false;
-					// dataDom.editCanvas.addImageToLayer(img)
 					data.canvasLoad = true
+					// setTimeout(()=>{
+					// 	canvasLoadAddImg()
+					// },3000)
 				}
 				img.src = props.imgUrl
 			}else{
@@ -127,10 +99,10 @@ export default defineComponent({
 			...toRefs(data),
 			...toRefs(dataDom),
 			isShowMark,
-			addImage,
-			getData,
+			canvasLoadAddImg,
 			getCanvasData,
 			canvasSave,
+			canvasInit,
        };
    },
    data(prop) {
--- a/src/component/modules/setBrandDNA.vue
+++ b/src/component/modules/setBrandDNA.vue
@@ -24,7 +24,7 @@
 	</div>
 	<div class="setBrandDNA_content">
 		<div class="modal_title_text">
-			<div>{{ $t('Habit.Style') }}</div>
+			<div>Brand</div>
 			<div class="modal_title_text_intro"></div>
 		</div>
 		<div class="setBrandDNA_content_bottom">