合并画布，部分样式调整

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>