Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue

@@ -32,8 +32,8 @@
 				is-input
 				:tipFormatter="(v) => `${v}px`"
 				:value="gapX"
-				@input="(e) => emit('inputFill_Gap', e, gapY)"
+				@input="(e) => emit('inputFillGap', e, gapY)"
-				@change="(e) => emit('changeFill_Gap', e, gapY)"
+				@change="(e) => emit('changeFillGap', e, gapY)"
 			/>
 		</div>
 		<div class="repeat-setting-item">
@@ -45,8 +45,8 @@
 				is-input
 				:tipFormatter="(v) => `${v}px`"
 				:value="gapY"
-				@input="(e) => emit('inputFill_Gap', gapX, e)"
+				@input="(e) => emit('inputFillGap', gapX, e)"
-				@change="(e) => emit('changeFill_Gap', gapX, e)"
+				@change="(e) => emit('changeFillGap', gapX, e)"
 			/>
 		</div>
 		<div class="repeat-setting-item">
@@ -109,8 +109,8 @@
 		"changeFillOffset",
 		"inputFillScale",
 		"changeFillScale",
-		"inputFill_Gap",
+		"inputFillGap",
-		"changeFill_Gap",
+		"changeFillGap",
 	]);
 	const inputFillScale = (e) => {
 		const scale = e / 100;

src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue

@@ -155,11 +155,11 @@
 										@changeFillScale="
 											(e) => changeFillScale(e, v)
 										"
-										@inputFill_Gap="
+										@inputFillGap="
-											(x, y) => inputFill_Gap(x, y, v)
+											(x, y) => inputFillGap(x, y, v)
 										"
-										@changeFill_Gap="
+										@changeFillGap="
-											(x, y) => changeFill_Gap(x, y, v)
+											(x, y) => changeFillGap(x, y, v)
 										"
 									/>
 								</template>
@@ -484,7 +484,7 @@
 		props.commandManager.execute(cmd);
 	};
 	// 改变填充间隙
-	const inputFill_Gap = (gapX, gapY, obj) => {
+	const inputFillGap = (gapX, gapY, obj) => {
 		const cmd = new FillRepeatGapChangeCommand({
 			canvas: props.canvas,
 			layers: layers,
@@ -497,7 +497,7 @@
 		});
 		cmd.execute();
 	};
-	const changeFill_Gap = (gapX, gapY, obj) => {
+	const changeFillGap = (gapX, gapY, obj) => {
 		if (obj.oldFill_) {
 			obj.fill_ = { ...obj.oldFill_ };
 			delete obj.oldFill_;

src/component/Canvas/CanvasEditor/index.vue

@@ -139,7 +139,7 @@ const props = defineProps({
     default: false, // 是否隐藏画布-隐藏关闭部分功能
   },
 });
-
+console.log("config",props.config)
 const loading = ref(false); 
 // 引用和状态
 const canvasRef = ref(null);

src/component/Canvas/CanvasEditor/managers/CanvasManager.js

@@ -449,7 +449,28 @@ export class CanvasManager {
     // // 重新渲染画布使变更生效
     // this.canvas.renderAll();
   }
-
+  // 重置画布大小参照固定图层
+  async resetCanvasSizeByFixedLayer(){
+    // 重置画布大小为固定图层的大小
+    const fixedLayerObj = this.getFixedLayerObject();
+	const backgroundObject = this.getBackgroundLayerObject();
+    if (!fixedLayerObj || !backgroundObject) return
+	const fwidth = fixedLayerObj.width * fixedLayerObj.scaleX
+	const fheight = fixedLayerObj.height * fixedLayerObj.scaleY
+	const bwidth = backgroundObject.width * backgroundObject.scaleX
+	const bheight = backgroundObject.height * backgroundObject.scaleY
+	if(Math.abs(fwidth/bwidth - fheight/bheight) < 0.1) return;
+	this.canvasWidth.value = fwidth
+	this.canvasHeight.value = fheight
+	backgroundObject.set({
+      width: this.canvasWidth.value,
+      height: this.canvasHeight.value,
+    })
+    this.canvas?.clipPath?.set?.({
+      width: this.canvasWidth.value,
+      height: this.canvasHeight.value,
+    })
+}
   /**
    * 重置视图变换，使元素回到原始位置
    * @private
@@ -1369,6 +1390,7 @@ export class CanvasManager {
               // 重置画布数据
               await this.setCanvasSize(this.canvas.width, this.canvas.height);
               await this.centerBackgroundLayer(this.canvas.width, this.canvas.height);
+			  await this.resetCanvasSizeByFixedLayer();
               // 重新构建对象关系
               // restoreObjectLayerAssociations(this.layers.value, this.canvas.getObjects());
               // 验证图层关联关系  -  稳定后可以注释

src/component/Detail/DesignDetail.vue

@@ -101,7 +101,7 @@
 						</div>
 					</div>
 					<div class="contentRight canvas" v-if="selectDetail && selectDetail.id && currentDetailType" :class="{'active': isEditPattern.value}">
-						<canvasBox ref="canvasBox" :key="canvasKey" :sketchSize="sketchSize" @setSloganData="setSloganData" :isEditPattern="isEditPattern.value" :updateOtherLayers="updateOtherLayers"></canvasBox>
+						<canvasBox ref="canvasBox" v-model:loadingShow="loadingShow" :key="canvasKey" :sketchSize="sketchSize" @setSloganData="setSloganData" :isEditPattern="isEditPattern.value" :updateOtherLayers="updateOtherLayers"></canvasBox>
 					</div>
 					<!-- 画布 -->
 					<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
@@ -161,7 +161,7 @@ export default defineComponent({
 			isEditPattern:{
 				value:'' as any,
 			},// 是否编辑图案
-			canvasKey:0,
+			canvasKey:computed(()=>store.state.DesignDetail.canvasKey),
 			singleOveral:{
 				value:'overall'
 			},
@@ -191,7 +191,7 @@ export default defineComponent({
 			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
 			if(newValue?.path)await getSketchSize()
 			if(newValue?.id && oldValue?.id && (newValue.id != oldValue.id)){
-				detailData.canvasKey += 1
+				store.commit('DesignDetail/changeCanvasKey')
 			}
 			// privewDetail(oldValue)
 		},{immediate: true})
@@ -261,7 +261,7 @@ export default defineComponent({
 						}
 
 
-						detailData.loadingShow = false
+						// detailData.loadingShow = false
 						resolve(rv)
 					}
 				).catch(rv=>{
@@ -336,9 +336,11 @@ export default defineComponent({
 				detailData.selectDetail.sketchString = rv
 			})
 			if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
-			let otherData = await updateOtherLayers('single')
+			if(detailDom.canvasBox && (detailData.currentDetailType != 'sketch' || detailData.isEditPattern.value == 'canvasEditor')){
-			await detailDom.canvasBox.updateOtherLayers(otherData)
+				let otherData = await updateOtherLayers('single')
-			await detailDom.canvasBox.privewDetail()
+				await detailDom.canvasBox.updateOtherLayers(otherData)
+				await detailDom.canvasBox.privewDetail()
+			}
 			for(let i = 0;i<list.length;i++){
 				detailData.selectDetail
 			    let {scale,offset,priority,transpose,rotate,maskUrl,maskMinioUrl} = await (detailDom.model as any).getSubmitData(list[i])
@@ -358,7 +360,6 @@ export default defineComponent({
 				(list[i].color?.rgba?.r?
 				`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:
 				'')
-				console.log(color,'==============================')
 				if(detailData.currentDetailType == 'sketch' && newData){
 					color = detailData.designDetail.clothes?.[0]?.color?.rgba?.r?`${detailData.designDetail.clothes?.[0].color.rgba.r} ${detailData.designDetail.clothes[0].color.rgba.g} ${detailData.designDetail.clothes[0].color.rgba.b}`:''
 					detailData.selectDetail.maskUrl = ''
@@ -417,45 +418,65 @@ export default defineComponent({
 		}
 		const getSubmitData = async (str:string)=>{
 			// return
-			let workspace = store.state.Workspace.probjects
+			await new Promise<void>(async (resolve, reject) => {
-			if(!detailData?.selectDetail?.path && !detailData?.selectDetail?.newDetail?.sketch?.minIOPath)return
+				let workspace = store.state.Workspace.probjects
-			let clothes:any
+				if(!detailData?.selectDetail?.path && !detailData?.selectDetail?.newDetail?.sketch?.minIOPath)return
-			if(detailData.currentDetailType == 'models'){
+				let clothes:any
-				clothes = await setClothes(detailData.designDetail.clothes,str)
+				if(detailData.currentDetailType == 'models'){
-			}else{
+					clothes = await setClothes(detailData.designDetail.clothes,str)
-				clothes = await setClothes([detailData.selectDetail],str)
+				}else{
-			}
+					clothes = await setClothes([detailData.selectDetail],str)
-			let data = {
-				designItemId:detailData.designDetail.designItemId,
-				designSingleItemDTOList:clothes,
-				isPreview:str == 'sub'?false:true,
-				// ifSubmit:designItemDetail.isPreview,
-				gender:workspace?.sex,
-				sketchString:'',
-				modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'',
-				modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
-				designType:detailData.selectDetail.id?'merge':'default',
-				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-				processId:userDetail.value.userId,
-				probjectId:store.state.Workspace.probjects.id,
-			}
-			detailData.loadingShow = true
-			Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{
-				let value = {
-					currentType : JSON.parse(JSON.stringify(detailData.currentDetailType)),
-					rv:rv,
-					fun:setRevocation
 				}
-				if(detailData?.designDetail?.newModel)detailData.designDetail.oldModel = JSON.parse(JSON.stringify(detailData.designDetail.newModel))
+				let isDefault = detailData.selectDetail.sketchString || (!detailData.selectDetail.id || (detailData.selectDetail?.newDetail?.sketch && detailData.currentDetailType == 'sketch')) 
-				// delete detailData.designDetail.newModel
+				let data = {
-				detailData.selectDetail.sketchString = null
+					designItemId:detailData.designDetail.designItemId,
-				store.commit('DesignDetail/setPraeview',value)
+					designSingleItemDTOList:clothes,
-				detailData.loadingShow = false
+					isPreview:str == 'sub'?false:true,
-				canvasReload()
+					// ifSubmit:designItemDetail.isPreview,
-				// setRevocation()
+					gender:workspace?.sex,
-			}).catch(res=>{ 
+					sketchString:'',
-				detailData.loadingShow = false
+					modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'',
-            });
+					modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'',
+					designType:isDefault?'default':'merge',
+					timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+					processId:userDetail.value.userId,
+					probjectId:store.state.Workspace.probjects.id,
+				}
+				await Https.axiosPost(Https.httpUrls.designSingle, data).then(async (rv)=>{
+					let value = {
+						currentType : JSON.parse(JSON.stringify(detailData.currentDetailType)),
+						rv:rv,
+						fun:setRevocation
+					}
+					if(detailData?.designDetail?.newModel)detailData.designDetail.oldModel = JSON.parse(JSON.stringify(detailData.designDetail.newModel))
+
+					// delete detailData.designDetail.newModel
+					let el:any = document.querySelector('.molepositon .perview_img')
+					let scale = 0
+					await new Promise<void>(async (resolve, reject) => {
+						const img = new Image();
+						img.src = detailData.frontBack.body.path;
+						img.onload = () => {
+							scale = el.parentNode.offsetWidth / img.width;
+							resolve(true)
+						};
+					})
+					value.scale = scale
+					store.commit('DesignDetail/setPraeview',value)
+					store.commit('DesignDetail/changeCanvasKey')
+					// console.log(detailData.selectDetail)
+					// if(detailData.selectDetail.sketchString || (detailData.selectDetail?.newDetail?.sketch && detailData.currentDetailType == 'sketch')){
+					// 	detailData.canvasKey += 1
+					// }
+					detailData.selectDetail.sketchString = null
+					resolve(true)
+					canvasReload()
+					// setRevocation()
+				}).catch(res=>{ 
+					resolve(true)
+				});
+			})
+			
 		}
 		const submit = async ()=>{
 			let workspace = store.state.Workspace.probjects
@@ -505,9 +526,16 @@ export default defineComponent({
             });
 		}
 		const previwe = async ()=>{
+			detailData.loadingShow = true
 			if((detailData.currentDetailType == 'sketch' && !detailData.isEditPattern.value) || detailData.isEditPattern.value == 'editSketch'){
-				let data = getSubmitData('preview')
+				await getSubmitData('preview')
-				store.dispatch('DesignDetail/setSubmit',data)
+				await getSketchSize()
+				detailDom.canvasBox.changeSketchUpdateFrontBack = async ()=>{
+					await detailDom.canvasBox.privewDetail()
+					detailDom?.model?.updateRect()
+					await upDateFrontBackSketch()
+					detailData.loadingShow = false
+				}
 			}else{
 				//走画布合成图片并且直接分割
 				if(detailData.isEditPattern.value !== 'canvasEditor'){
@@ -516,6 +544,13 @@ export default defineComponent({
 					await detailDom.canvasBox.updateOtherLayers(otherData)
 				}
 				await detailDom.canvasBox.privewDetail()
+				await upDateFrontBackSketch()
+				saveCanvasJSONToSession()
+				detailData.loadingShow = false
+			}
+		}
+		const upDateFrontBackSketch = async ()=>{//更新模特身上的分割图
+			await new Promise<void>(async(resolve, reject) => {
 				let img = new Image()
 				img.onload = ()=>{
 					let partialDesign = detailData.selectDetail.partialDesign.partialDesignBase64 || detailData.selectDetail.partialDesign.partialDesignPath
@@ -534,11 +569,11 @@ export default defineComponent({
 						front.imageUrl = rv.targetFrontUrl
 						back.imageUrl = rv.targetBackUrl
 						store.commit('DesignDetail/canvasPreviewUpdata',{type:detailData.isEditPattern.value?'all':detailData.currentDetailType,callBack:setRevocation})
+						resolve()
 					})
 				}
 				img.src = detailData.selectDetail.path
-				saveCanvasJSONToSession()
+			})
-			}
 		}
 		const saveCanvasJSONToSession = ()=>{
 			let canvasJSON = detailDom.canvasBox.getCanvasJSON()
@@ -631,7 +666,6 @@ export default defineComponent({
 					otherData.trims = detailData.selectDetail.newDetail?.element?.length>0?{prints:detailData.selectDetail.newDetail?.element}:detailData.selectDetail.trims || null
 				}
 			}
-			console.log(JSON.parse(JSON.stringify(otherData)),'=======',JSON.parse(JSON.stringify(detailData.selectDetail)))
 			return otherData
 		}
 		const uploadElement = async ()=>{//取出画布数据更新到detail
@@ -674,7 +708,6 @@ export default defineComponent({
 					if(canvasColor.gradient){
 						value.data.gradient = canvasColor.gradient
 					}
-					console.log(value,'=======')
 					store.commit('DesignDetail/setNewDetail',value)
 					if(allInfo.color.color.gradient)detailData.selectDetail.color.gradient = allInfo.color.color.gradient
 					if(detailData.currentDetailType == 'color'){
@@ -687,7 +720,6 @@ export default defineComponent({
 			if(detailData.isEditPattern.value){
 				await detailDom.canvasBox.saveCanvas()
 			}
-			detailData.canvasKey += 1
 		}
 		const sketchSysToLibrary = ()=>{//系统sketch添加到library更新library
 			coverRevocation()
@@ -711,7 +743,7 @@ export default defineComponent({
 		onBeforeUnmount(()=>{
 			sessionStorage.removeItem('oppositeRevocation')
 			sessionStorage.removeItem('revocation')
-			store.commit('DesignDetail/clearDesignDetail')
+			store.commit('DesignDetail/clearDetailData')
 
 		})
 		

src/component/Detail/canvas/index.vue

@@ -85,6 +85,7 @@ export default defineComponent({
 			default:()=>{}
 		},
 	},
+	emits:['update:loadingShow'],
     setup(props,{emit}) {
         const store = useStore();
         const {t} = useI18n();
@@ -123,6 +124,7 @@ export default defineComponent({
 				printObject: store.state.DesignDetail.selectDetail.printObject,
 				trims: store.state.DesignDetail.selectDetail.trims,
 			})),
+			changeSketchUpdateFrontBack:null as any,//切换sketch后是否需要合成图片进行风格
 		})
 		watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
 			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
@@ -177,22 +179,16 @@ export default defineComponent({
 		const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
 			// if(!detailDom.editCanvas)return
 			return new Promise(async (res,reject)=>{
+				console.log(detailDom.editCanvas)
 				await detailDom.editCanvas.exportImage({
 					isContainFixed:true,
 					width:props.sketchSize.width,
 					height:props.sketchSize.height,
 				}).then((rv)=>{
-					console.log(rv,'================')
+					console.log(rv,'================',props.sketchSize)
 					if(oldSelectDetail?.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = rv
 				})
-				//包含平铺图层 single+overall模式的图
+				
-				// await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsNoRepeat:true,isPrintTrimsRepeat:true,isContainNormalLayer:false}).then((rv)=>{
-				// 	oldSelectDetail.undividedLayerWithSinglePrint = rv
-				// })
-				//不包含平铺图层overall模式的图
-				// await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsNoRepeat:false,isPrintTrimsRepeat:true,isContainNormalLayer:false}).then((rv)=>{
-				// 	oldSelectDetail.undividedLayer = rv
-				// })
 				await setUndivideLayer()
 				res('')
 			})
@@ -344,7 +340,13 @@ export default defineComponent({
 		const canvasLoadJsonSuccess = async ()=>{
 			let otherData = await props.updateOtherLayers()
 			await updateOtherLayers(otherData)
+
+			if(detailData.changeSketchUpdateFrontBack){
+				await detailData.changeSketchUpdateFrontBack()
+				detailData.changeSketchUpdateFrontBack = null
+			}
 			setUndivideLayer()
+			emit('update:loadingShow',false)
 		}
 		const setUndivideLayer = async ()=>{
 			await new Promise<void>(async (resolve, reject) => {
@@ -421,7 +423,6 @@ export default defineComponent({
 						})
 					}
 				}
-				
 				setCanvas(detailData.selectDetail.path).then(()=>{
 					detailData.canvasLoad = true
 				})

src/component/Detail/detailRight/editPrintElement.vue

@@ -53,6 +53,7 @@
 			</a-slider> -->
 			<a-popover
 				trigger="click"
+				placement="topRight"
 				destroyTooltipOnHide
 				:title="t('Canvas.repeatSetting')"
 			>
@@ -63,8 +64,8 @@
 						@inputFillOffset="inputFillOffset"
 						@inputFillScale="inputFillScale"
 						:sketchPath="selectDetail.path"
-						@inputFill_Gap="
+						@inputFillGap="
-							(x, y) => inputFill_Gap(x, y)"
+							(x, y) => inputFillGap(x, y)"
 					/>
 				</template>
 				<div class="btn">
@@ -110,7 +111,7 @@
 						</ul> -->
 					</div>
 					<div class="designOpenrtion_pingpu" v-else>
-						<pingpu :width="sketchSize.width" :height="sketchSize.height" ref="pingpuRef" @change-canvas="updateCanvas"></pingpu>
+						<pingpu :key="selectDetail?.id" :width="sketchSize.width" :height="sketchSize.height" ref="pingpuRef" @change-canvas="updateCanvas"></pingpu>
 					</div>
 				</div>
 			</div>
@@ -207,7 +208,6 @@ export default defineComponent({
 			elList:[] as any,
 			selectIndex:0,
 		})
-		watch
 		const setOveralSingle = async ()=>{
 
 			await setItemPosition()
@@ -263,7 +263,7 @@ export default defineComponent({
 			setItemPosition()
 			store.commit('DesignDetail/setCurrentPrintElement',null)
 		}
-		const previewDetailPrintData = ()=>{
+		const previewDetailPrintData = (id:any = editPrintElementData.selectDetail?.id)=>{
 			let data:any = []
 			let index = 1
 			let setData = (item:any,index:number)=>{
@@ -310,7 +310,8 @@ export default defineComponent({
 			})
 			let value = {
 				data,
-				str:props.type
+				str:props.type,
+				id:id,
 			}
 			store.commit('DesignDetail/setNewDetail',value)
 		}
@@ -453,9 +454,10 @@ export default defineComponent({
 				addPrintELement(newVal)
 			}
 		})
-		watch(()=>((editPrintElementData.selectDetail?.id)),(newVal)=>{
+		watch(()=>((editPrintElementData.selectDetail?.id)),(newVal,oldVal)=>{
 			if(!newVal)return
-			editPrintElementData.isSketchLoad = false,
+			if(oldVal)previewDetailPrintData(oldVal)
+			editPrintElementData.isSketchLoad = false
 			editPrintElementData.printStyleList[props.type] = {
 				single:[],
 				overall:[],
@@ -920,7 +922,6 @@ export default defineComponent({
 		}
 		const inputFillScale = (scale:any)=>{
 			let arr = editPrintElementData.printStyleList[props.type].overall
-			console.log(arr,scale,editPrintElementData.imgDomIndex)
 			arr[editPrintElementData.imgDomIndex].scale = [scale,scale]
 			editPrintElementDom.pingpuRef.updataList([
 				{
@@ -931,7 +932,7 @@ export default defineComponent({
 				},
 			]);
 		}
-		const inputFill_Gap = (x:any,y:any)=>{
+		const inputFillGap = (x:any,y:any)=>{
 			let arr = editPrintElementData.printStyleList[props.type].overall
 			arr[editPrintElementData.imgDomIndex].object.gapX = x
 			arr[editPrintElementData.imgDomIndex].object.gapY = y
@@ -991,7 +992,7 @@ export default defineComponent({
 			inputFillAngle,
 			inputFillOffset,
 			inputFillScale,
-			inputFill_Gap,
+			inputFillGap,
 			overallSetIndex,
         }
     },

src/component/Detail/detailRight/overallSetting/RepeatSetting.vue

@@ -32,8 +32,8 @@
 				is-input
 				:tipFormatter="(v) => `${v}px`"
 				:value="gapX"
-				@input="(e) => emit('inputFill_Gap', e, gapY)"
+				@input="(e) => emit('inputFillGap', e, gapY)"
-				@change="(e) => emit('changeFill_Gap', e, gapY)"
+				@change="(e) => emit('changeFillGap', e, gapY)"
 			/>
 		</div>
 		<p></p>
@@ -46,8 +46,8 @@
 				is-input
 				:tipFormatter="(v) => `${v}px`"
 				:value="gapY"
-				@input="(e) => emit('inputFill_Gap', gapX, e)"
+				@input="(e) => emit('inputFillGap', gapX, e)"
-				@change="(e) => emit('changeFill_Gap', gapX, e)"
+				@change="(e) => emit('changeFillGap', gapX, e)"
 			/>
 		</div>
 		<p></p>
@@ -115,8 +115,8 @@
 		"changeFillOffset",
 		"inputFillScale",
 		"changeFillScale",
-		"inputFill_Gap",
+		"inputFillGap",
-		"changeFill_Gap",
+		"changeFillGap",
 	]);
 	const inputFillScale = (e) => {
 		const scale = e / 100;

src/component/Detail/model/index.vue

@@ -128,7 +128,10 @@ export default defineComponent({
 				getDetailListDom.position?.updataPosition?.()
 				getDetailListDom.modelNav?.setItemPosition?.()
 				getDetailListDom.position?.updateRect?.()
-			},500)
+			},200)
+		}
+		const updateRect = ()=>{
+			getDetailListDom.position?.updateRect?.()
 		}
 		const setBack = ()=>{
 			showDesignImgDetail(getDetailListData.isEditPattern.value)
@@ -156,6 +159,7 @@ export default defineComponent({
 			oppositeRevocation,
 			mousedownDesignImg,
 			setBack,
+			updateRect,
         }
     },
 

src/component/Detail/model/modelPosition.vue

@@ -155,8 +155,8 @@ export default defineComponent({
 		};
 		const updateRect = ()=>{
 			setTimeout(() => {
-				moveableInstance.value.updateRect()
+				if(moveableInstance.value)moveableInstance.value.updateRect()
-			}, 500);
+			}, 200);
 		}
 		const initMoveableForSelected = () => {
 			// 销毁旧的实例

src/store/Detail/designDetail.ts

@@ -12,6 +12,7 @@ interface DesignDetail{
 	//值都有 sketch，color,print,element
 	currentDetailType:any,
 	currentPrintElement:any,
+	canvasKey:any,
 }
 
 const DesignDetail : Module<DesignDetail,RootState> = {
@@ -28,6 +29,7 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 		printZIndex:-1,
 		currentDetailType:'',
 		currentPrintElement:null,
+		canvasKey:0,
     },
     mutations:{
 		clearDetailData(state){
@@ -42,6 +44,7 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 			state.printZIndex = -1
 			state.currentDetailType = ''
 			state.currentPrintElement = null
+			state.canvasKey = 0
 		},
         setDesignDetail(state,data){
 			if(data.others.length > 0 && data.others[0].type == "Body"){
@@ -63,7 +66,6 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 					}
 				}
 				v?.printObject?.prints?.forEach((item:any) => {
-					console.log(item.object)
 					if(isJSONString(item.object)){
 						item.object = JSON.parse(item.object)
 					}
@@ -115,18 +117,6 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 				}
 			});
 		},
-		clearDesignDetail(state){
-			state.designDetail = null
-			state.designPreviewData = {}
-			state.frontBack = {
-				front:[],
-				back:[],
-				body:{},
-			}
-			state.selectDetail = null
-			state.currentDetailType = ''
-			state.printZIndex = -1
-		},
 		addDesign(state,data){
 
 		},
@@ -135,28 +125,32 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 			// 	if(item.id == state.selectDetail.id){
 			// 	}
 			// });
+			let select = state.selectDetail
+			if(value.id){
+				select = state.designDetail.clothes.find((item:any) => item.id == value.id)
+			}
 			let {data} = value
 			let str = value.str || state.currentDetailType
-			if(!state.selectDetail)return
+			if(!select)return
-			if(!state.selectDetail.newDetail){
+			if(!select.newDetail){
-				state.selectDetail.newDetail = {}
+				select.newDetail = {}
 			}
 			if(str == 'sketch'){
-				state.selectDetail.newDetail[str] = data
+				select.newDetail[str] = data
 			}else if(str == 'color'){
-				state.selectDetail.newDetail[str] = data
+				select.newDetail[str] = data
 			}else if(str == 'print'){
-				state.selectDetail.newDetail[str] = data
+				select.newDetail[str] = data
 			}else if(str == 'element'){
-				state.selectDetail.newDetail[str] = data
+				select.newDetail[str] = data
 			}else if(str == 'models'){
 				// if(!state.designDetail.newModel)state.designDetail.newModel={}
 				state.designDetail.newModel = JSON.parse(JSON.stringify(data))
 			}else{
-				if(!state.selectDetail.newDetail[str])state.selectDetail.newDetail[str] = []
+				if(!select.newDetail[str])select.newDetail[str] = []
-				const foundObjects = state.selectDetail.newDetail[str].filter((item:any) => item.id === data.id);
+				const foundObjects = select.newDetail[str].filter((item:any) => item.id === data.id);
 				if(foundObjects.length == 0){
-					state.selectDetail.newDetail[str].push(data)
+					select.newDetail[str].push(data)
 				}
 			}
 		},
@@ -226,21 +220,22 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 			});
 			state.selectDetail = data
 		},
+		changeCanvasKey(state){
+			state.canvasKey+=1
+		},
 		canvasPreviewUpdata(state,{type,callBack}){
-			console.log(state.selectDetail,type)
 			// state.selectDetail.newDetail?.print?.forEach((item:any) => {
 			// 	state.selectDetail.printObject.prints = []
 			// 	state.selectDetail.printObject.push({
 			// 	})
 			// });
-			if(type == 'print' || type == 'all')state.selectDetail.printObject.prints = state.selectDetail.newDetail?.print
+			if((type == 'print' || type == 'all') && state.selectDetail.newDetail?.print)state.selectDetail.printObject.prints = state.selectDetail.newDetail?.print
-			if(type == 'color' || type == 'all')state.selectDetail.color = {
+			if((type == 'color' || type == 'all') && state.selectDetail.newDetail?.color?.rgba)state.selectDetail.color = {
 				...state.selectDetail.newDetail?.color,
 				...state.selectDetail.newDetail?.color?.rgba,
 				...state.selectDetail.newDetail?.color?.hsv,
 			}
-			console.log(state.selectDetail,type,state.selectDetail.newDetail)
+			if((type == 'element' || type == 'all') && state.selectDetail.newDetail?.element)state.selectDetail.trims.prints = state.selectDetail.newDetail?.element
-			if(type == 'element' || type == 'all')state.selectDetail.trims.prints = state.selectDetail.newDetail?.element
 			if(type == 'all'){
 				state.selectDetail.newDetail = {}
 			}else{
@@ -248,7 +243,7 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 			}
 			callBack()
 		},
-		async setPraeview(state,value){//preview
+		setPraeview(state,value){//preview
 			let data = value?.rv || value 
 			let currentType = value?.currentType
 			if(state.designDetail.oldModel?.url)state.frontBack.body.path = state.designDetail.oldModel.url
@@ -267,50 +262,41 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 				}else{
 					id_ = item.id
 				}
-				let el:any = document.querySelector('.molepositon .perview_img')
+				if(state.frontBack?.body?.path){
-				await new Promise((resolve, reject) => {
+					let scale:any = value.scale
-					if(!state.frontBack?.body?.path){
+					if(state.selectDetail?.newDetail?.sketch?.id && !state.selectDetail.id){
-						resolve('')
+						state.frontBack.front.push({id:state.selectDetail.newDetail?.sketch?.id})	
+						state.frontBack.back.push({id:state.selectDetail.newDetail?.sketch?.id})	
 					}
-					const img = new Image();
+					state.frontBack.front.forEach((v:any,index:any)=>{
-					img.src = state.frontBack.body.path;
+						if(v.id == id_){
-					img.onload = () => {
+							for (let i = item.layersObject.length-1; i >= 0; i--) {
-						let scale:any = el.parentNode.offsetWidth / img.width;
+								item.layersObject[i].style = {
-						if(state.selectDetail?.newDetail?.sketch?.id && !state.selectDetail.id){
+									top:item.layersObject[i].position?.[0] * scale + 'px',
-							state.frontBack.front.push({id:state.selectDetail.newDetail?.sketch?.id})	
+									left:item.layersObject[i].position?.[1] * scale + 'px',
-							state.frontBack.back.push({id:state.selectDetail.newDetail?.sketch?.id})	
+									width:item.layersObject[i].imageSize?.[0] * scale + 'px',
-						}
+									height:item.layersObject[i].imageSize?.[1] * scale + 'px',
-						state.frontBack.front.forEach((v:any,index:any)=>{
+									zIndex:v?.style?.zIndex?v.style.zIndex:v.priority?v.priority:state.frontBack.front.length,
-							if(v.id == id_){
+									transform:`rotate(${item.layersObject?.[i]?.rotate || 0}deg) scaleX(${item.layersObject[i].transpose?.[0] || 1}) scaleY(${item.layersObject[i].transpose?.[1] || 1})`,
-								for (let i = item.layersObject.length-1; i >= 0; i--) {
+								}
-									item.layersObject[i].style = {
+								item.layersObject[i].centers={
-										top:item.layersObject[i].position?.[0] * scale + 'px',
+									left:0,
-										left:item.layersObject[i].position?.[1] * scale + 'px',
+									top:0,
-										width:item.layersObject[i].imageSize?.[0] * scale + 'px',
+								}
-										height:item.layersObject[i].imageSize?.[1] * scale + 'px',
+								item.layersObject[i].designOpenrtionBtn = false
-										zIndex:v?.style?.zIndex?v.style.zIndex:v.priority?v.priority:state.frontBack.front.length,
+								if(item.layersObject[i].imageCategory.indexOf("back") == -1){
-										transform:`rotate(${item.layersObject?.[i]?.rotate || 0}deg) scaleX(${item.layersObject[i].transpose?.[0] || 1}) scaleY(${item.layersObject[i].transpose?.[1] || 1})`,
+									state.frontBack.front[index] = item.layersObject[i]
-									}
+									// state.frontBack.front[index].style.zIndex = v.priority
-									item.layersObject[i].centers={
+									state.frontBack.front[index].id = item.id
-										left:0,
+								}else{
-										top:0,
+									state.frontBack.back[index] = item.layersObject[i]
-									}
+									// state.frontBack.back[index].style.zIndex = v.priority
-									item.layersObject[i].designOpenrtionBtn = false
+									state.frontBack.back[index].id = item.id
-									if(item.layersObject[i].imageCategory.indexOf("back") == -1){
-										state.frontBack.front[index] = item.layersObject[i]
-										// state.frontBack.front[index].style.zIndex = v.priority
-										state.frontBack.front[index].id = item.id
-									}else{
-										state.frontBack.back[index] = item.layersObject[i]
-										// state.frontBack.back[index].style.zIndex = v.priority
-										state.frontBack.back[index].id = item.id
-									}
 								}
 							}
-						})
+						}
-						resolve('')
+					})
-					};
+				}
-				})
 				let uploadDetail = (detailItem)=>{
 					detailItem.change = item.change
 					if(detailItem?.newDetail?.color && currentType != 'color'){
@@ -321,6 +307,7 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 						detailItem.partialDesign = item.partialDesign
 					}
 					detailItem.designType = item.designType
+					detailItem.canvasId = item.canvasId
 					detailItem.layersObject = item.layersObject
 					detailItem.path = item.path
 					detailItem.minIOPath = item.minIOPath
@@ -357,44 +344,9 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 				}else{
 					uploadDetail(state.selectDetail)
 				}
-				
-				if(state.currentDetailType != 'models'){
-					// state.selectDetail.change = item.change
-					// if(state.selectDetail?.newDetail?.color && currentType != 'color'){
-					// 	state.selectDetail.color = state.selectDetail?.newDetail?.color
-					// 	state.selectDetail.newDetail.color = null
-					// }
-					// if(item.partialDesign){
-					// 	state.selectDetail.partialDesign = item.partialDesign
-					// }
-					// state.selectDetail.designType = item.designType
-					// state.selectDetail.layersObject = item.layersObject
-					// state.selectDetail.path = item.path
-					// state.selectDetail.minIOPath = item.minIOPath
-					// state.selectDetail.scale = [1,1]
-					// state.selectDetail.offset = [0,0]
-					// state.selectDetail.printObject = item.printObject
-					// state.selectDetail.trims = item.trims
-					// state.selectDetail.type = item.type
-					// state.selectDetail.maskMinioUrl = item.layersObject?.[0]?.maskMinioUrl
-					// state.selectDetail.maskUrl = item.layersObject?.[0]?.maskUrl
-					// state.selectDetail.color = {
-					// 	...item.color,
-					// 	rgba:{
-					// 		r:item.color?.r,
-					// 		g:item.color?.g,
-					// 		b:item.color?.b,
-					// 	},
-					// 	gradient:item.gradient,
-					// }
-					// if(state.selectDetail.newDetail?.sketch?.id && !state.selectDetail.id){
-					// 	state.designDetail.clothes.push(state.selectDetail)
-					// }
-					// state.selectDetail.id = item.id
-					// if(currentType)if(state.selectDetail.newDetail?.[currentType] && currentType != 'color')delete state.selectDetail.newDetail[currentType]
-				}
 			}
 			if(value.fun)value.fun()
+
 		},
 		
 		// setDesignItemOthers(state,data){

src/views/AwardPage/apply.vue

@@ -312,7 +312,7 @@
 	import type { Rule } from 'ant-design-vue/es/form'
 	import { message } from 'ant-design-vue'
 	import type { UploadChangeParam } from 'ant-design-vue'
-	import VerifycationCodeInput from './components/verificationCodeInput.vue'
+	import VerifycationCodeInput from './components/VerificationCodeInput.vue'
 	import { Https } from '@/tool/https'
 	import UploadStatus from './components/UploadStatus.vue'