合并画布，部分样式调整

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;
           }
-        }
       }
     }
   }

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)=>{

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)

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) => {

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

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
 			}),
         };
     },

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;
 						}
 					}

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;
 										}
 									}
 									

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;
+						}
+					}
 				}
 			}
 		}

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
 			
 		}

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;
 						}

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>

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) {

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%;

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>

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{

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>