Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite

src/component/Detail/DesignDetail.vue

@@ -59,7 +59,7 @@
 						:key="positionKey"
 						@canvasReload="canvasReload" 
 						@detailEdit="detailEdit" 
-						@addSketch="()=>isEditPattern.value=false"
+						@addSketch="()=>isEditPattern.value = ''"
 						@revocation="revocation"
 						@oppositeRevocation="oppositeRevocation"
 					></model>
@@ -87,7 +87,7 @@
 						</div>
 					</div>
 					<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && isEditPattern.value">
-						<canvasBox ref="canvasBox" :key="canvasKey"></canvasBox>
+						<canvasBox ref="canvasBox" :key="canvasKey || isEditPattern.value" :isEditPattern="isEditPattern.value"></canvasBox>
 					</div>
 					<!-- 画布 -->
 					<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
@@ -144,7 +144,7 @@ export default defineComponent({
 			oppositeRevocationShow:-1,
 			revocationShow:-1,
 			isEditPattern:{
-				value:false,
+				value:'' as any,
 			},// 是否编辑图案
 			canvasKey:0,
 			singleOveral:{
@@ -421,11 +421,18 @@ export default defineComponent({
 			store.dispatch('DesignDetail/setSubmit',data)
 		}
 		const detailEdit = async (str:any)=>{
-			if(str == 'edit'){
-				if(detailData.isEditPattern.value){
+			if(str){
+				if(detailData.isEditPattern.value && detailData.isEditPattern.value == str){
 					await detailDom.canvasBox.saveCanvas()
+					detailData.isEditPattern.value = ''
+				}else{
+					if(detailData.isEditPattern.value){
+						detailDom.canvasBox.editFront(str)
+					}
+					detailData.isEditPattern.value = str
 				}
-				detailData.isEditPattern.value = !detailData.isEditPattern.value 
+			}else{
+				detailData.isEditPattern.value = ''
 			}
 		}
 		const canvasReload = async ()=>{

src/component/Detail/canvas/index.vue

@@ -16,11 +16,16 @@
 								imageMode:'contains',
 							}"
 							ref="editCanvas">
-							<template #customTools="{ toolButtonProps }">
+							
+							<template #customToolsBottom="{ toolButtonProps }">
 								<!-- 也可以直接使用普通的按钮 -->
 								<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" @click="editFront('redGreenExample')">
 									<i class="fi fi-sr-layers"></i>
-									<div class="tool-tooltip">Edit the front and back sections</div>
+									<div class="tool-tooltip">{{ $t('Canvas.editFrontBack') }}</div>
+								</div>
+								<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" style="margin-top: auto;" @click="editFront('redGreenExample')">
+									<SvgIcon name="CHelp" size="30" />
+									<div class="tool-tooltip">{{ $t('Canvas.help') }}</div>
 								</div>
 							</template>
 						</editCanvas>
@@ -35,19 +40,14 @@
 						</editFrontBack> -->
 						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
 							:enabledRedGreenMode="true"
-							:clothingImageUrl="selectDetail.path" 
+							@canvasInit="canvasInit"
+							:clothingImageUrl="selectDetail.undividedLayer || selectDetail.path" 
 							:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
 							@trigger-red-green-mouseup="frontBackChange"
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
 							ref="editCanvasBackFront">
-							<template #customTools="{ toolButtonProps }">
-								<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" @click="editFront('canvasEditor')">
-									<i class="fi fi-sr-layers"></i>
-									<div class="tool-tooltip">Edit the front and back sections</div>
-								</div>
-							</template>
 						</editCanvas>
 					</div>
 				</div>
@@ -79,6 +79,10 @@ export default defineComponent({
 		editCanvas
     },
 	props:{
+		isEditPattern:{
+			type:String,
+			default:''
+		}
 	},
     setup(props,{emit}) {
         const store = useStore();
@@ -106,7 +110,7 @@ export default defineComponent({
 			canvasLoad:false,
 			canvasConfig:{
 			} as any,
-			currentView:'',
+			currentView:props.isEditPattern,
 			getCanvasIfEdit:inject('getCanvasIfEdit')as any,
 			canvasInstance:null as any,
 			canvasJSON:'',
@@ -117,6 +121,7 @@ export default defineComponent({
 		},{immediate: true})
 		provide('isShowMark',detailData.isShowMark)
 		provide('canvasType',detailData.canvasType)
+		
 		const editFront = (str:any)=>{//编辑前后片
 
 			let canvasJSON = '' as any
@@ -193,7 +198,7 @@ export default defineComponent({
 				let front = detailData.frontBack.front[detailData.imgDomIndex]
 				let back = detailData.frontBack.back[detailData.imgDomIndex]
 				if(!front?.oldImageUrl)front.oldImageUrl = front.imageUrl
-				if(!front?.oldMaskUrl)front.oldMaskUrl = front.imageUrl
+				if(!front?.oldMaskUrl)front.oldMaskUrl = front.maskUrl
 				if(!back?.oldImageUrl)back.oldImageUrl = back.imageUrl
 				if(!front?.oldMaskUrl)store.commit('DesignDetail/updataDetailItem',{maskUrl:front.oldMaskUrl})
 
@@ -258,9 +263,11 @@ export default defineComponent({
 		onBeforeUnmount(()=>{
 			let front = detailData.frontBack.front[detailData.imgDomIndex]
 			let back = detailData.frontBack.back[detailData.imgDomIndex]
+
 			if(front?.oldImageUrl)front.imageUrl = front.oldImageUrl
 			if(front?.oldMaskUrl)front.maskUrl = front.oldMaskUrl
 			if(back?.oldImageUrl)back.imageUrl = back.oldImageUrl
+			console.log(front)
 			if(front?.oldMaskUrl)store.commit('DesignDetail/updataDetailItem',{maskUrl:front.oldMaskUrl})
 
 			sessionStorage.removeItem('frontBackEdit');
@@ -270,9 +277,7 @@ export default defineComponent({
 		})
 		onMounted(()=>{
 			nextTick(async ()=>{
-				detailData.currentView = 'canvasEditor'
-				setTimeout(()=>{
-				})
+				// detailData.currentView = 'canvasEditor'
 				if(detailData.selectDetail.canvasId){
 					detailData.isShowMark = true
 					await new Promise((resolve, reject) => {

src/component/Detail/detailLeft/element.vue

@@ -122,10 +122,11 @@ export default defineComponent({
 			padding: 1rem;
 			text-align: center;
 			border-radius: .5rem;
-			// border: 1px dashed #202020;
-			border: 1px dashed transparent;
+			border: 1px solid #000;
+			// border: 1px dashed transparent;
+			border-radius: 1.5rem;
         	background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em,	#000 0,#000 0.6em);
-			margin-bottom: 3rem;
+			margin-bottom: 1.4rem;
 			display: flex;
 			flex-wrap: wrap;
 			overflow: hidden;

src/component/Detail/detailLeft/models.vue

@@ -100,11 +100,12 @@ export default defineComponent({
 			padding: 1rem 0;
 			text-align: center;
 			border-radius: .5rem;
-			// border: 1px dashed #202020;
-			border: 1px dashed transparent;
+			border: 1px solid #000;
+			// border: 1px dashed transparent;
+			border-radius: 1.5rem;
 			position: relative;
         	background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em,	#000 0,#000 0.6em);
-			margin-bottom: 3rem;
+			margin-bottom: 1.4rem;
 			> img{
 				width: 100%;
 				height: 100%;

src/component/Detail/detailLeft/module/currentList.vue

@@ -105,9 +105,9 @@ export default defineComponent({
 			align-content: flex-start;
 			&::-webkit-scrollbar{display: none;}
 			> .content_img_item{
+				width: calc((50% - 1rem));
 				> .content_img_item_block{
-					width: calc((34rem - 2rem) / 2);
-					height: calc((34rem - 2rem) / 2);
+					aspect-ratio: 1/1;
 					position: relative;
 					margin-bottom: 2rem;
 
@@ -119,16 +119,6 @@ export default defineComponent({
 					}
 				}
 			}
-			> .material_content_list_loding{
-				width: 100%;
-				height: calc((34rem - 2rem) / 2);
-			}
-			> .upload_item{
-				width: calc((34rem - 2rem) / 2);
-				height: calc((34rem - 2rem) / 2);
-				align-items: center;
-				justify-content: center;
-			}
 		}
 		
 	}

src/component/Detail/detailLeft/module/libraryList.vue

@@ -349,9 +349,9 @@ export default defineComponent({
 			align-content: flex-start;
 			&::-webkit-scrollbar{display: none;}
 			> .content_img_item{
+				width: calc((50% - 1rem));
 				> .content_img_item_block{
-					width: calc((34rem - 2rem) / 2);
-					height: calc((34rem - 2rem) / 2);
+					aspect-ratio: 1/1;
 					position: relative;
 					margin-bottom: 2rem;
 					cursor: pointer;
@@ -364,7 +364,7 @@ export default defineComponent({
 			}
 			> .material_content_list_loding{
 				width: 100%;
-				height: calc((34rem - 2rem) / 2);
+				aspect-ratio: 1/1;
 				overflow: hidden;
 				> img{
 					width: 100%;

src/component/Detail/detailLeft/module/selectList.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="selectList">
-		<div class="selectList_header">
+		<div class="selectList_header" :class="{'element': type == 'element'}">
 			<div class="switch_type_list" v-if="type != 'element'">
 				<div
 					@click.stop="openCurrent()"
@@ -161,10 +161,16 @@ export default defineComponent({
 		height: auto;
 		display: flex;
 		flex-direction: column;
+		border-radius: 1.5rem;
+		border: 1px solid #000;
+		padding: 1rem;
 		> .selectList_header{
 			margin-bottom: 2.5rem;
 			display: flex;
 			align-items: center;
+			&.element{
+				margin-bottom: 0rem;
+			}
 			> .switch_type_list{
 				display: flex;
 				> .switch_type_item:last-child{

src/component/Detail/detailLeft/module/uploadList.vue

@@ -199,9 +199,9 @@ export default defineComponent({
 			align-content: flex-start;
 			&::-webkit-scrollbar{display: none;}
 			> .content_img_item{
+				width: calc((50% - 1rem));
 				> .content_img_item_block{
-					width: calc((34rem - 2rem) / 2);
-					height: calc((34rem - 2rem) / 2);
+					aspect-ratio: 1/1;
 					position: relative;
 					margin-bottom: 2rem;
 
@@ -215,11 +215,11 @@ export default defineComponent({
 			}
 			> .material_content_list_loding{
 				width: 100%;
-				height: calc((34rem - 2rem) / 2);
+				aspect-ratio: 1/1;
 			}
 			> .upload_item{
-				width: calc((34rem - 2rem) / 2);
-				height: calc((34rem - 2rem) / 2);
+				width: calc((50% - 1rem));
+				aspect-ratio: 1/1;
 				align-items: center;
 				justify-content: center;
 			}

src/component/Detail/detailLeft/module/uploadModel.vue

@@ -262,9 +262,10 @@ import sketchCategory from "@/component/HomePage/sketchCategory.vue";
 			align-content: flex-start;
 			&::-webkit-scrollbar{display: none;}
 			> .content_img_item{
+				width: calc((50% - 1rem));
 				> .content_img_item_block{
-					width: calc((34rem - 2rem) / 2);
-					height: calc((34rem - 2rem) / 2);
+					width: 100%;
+					aspect-ratio: 1/1;
 					position: relative;
 					margin-bottom: 2rem;
 					margin: 1rem;
@@ -279,11 +280,11 @@ import sketchCategory from "@/component/HomePage/sketchCategory.vue";
 			}
 			> .material_content_list_loding{
 				width: 100%;
-				height: calc((34rem - 2rem) / 2);
+				aspect-ratio: 1/1;
 			}
 			> .upload_item{
-				width: calc((34rem - 2rem) / 2);
-				height: calc((34rem - 2rem) / 2);
+				width: calc((50% - 1rem));
+				aspect-ratio: 1/1;
 				align-items: center;
 				justify-content: center;
 				.upload{

src/component/Detail/detailLeft/module/uploadSegmentation.vue

@@ -145,9 +145,9 @@ export default defineComponent({
 			align-content: flex-start;
 			&::-webkit-scrollbar{display: none;}
 			> .content_img_item{
+				width: calc((50% - 1rem));
 				> .content_img_item_block{
-					width: calc((34rem - 2rem) / 2);
-					height: calc((34rem - 2rem) / 2);
+					aspect-ratio: 1/1;
 					position: relative;
 					margin-bottom: 2rem;
 
@@ -174,11 +174,11 @@ export default defineComponent({
 			}
 			> .material_content_list_loding{
 				width: 100%;
-				height: calc((34rem - 2rem) / 2);
+				aspect-ratio: 1/1;
 			}
 			> .upload_item{
-				width: calc((34rem - 2rem) / 2);
-				height: calc((34rem - 2rem) / 2);
+				width: calc((50% - 1rem));
+				aspect-ratio: 1/1;
 				align-items: center;
 				justify-content: center;
 				.upload{

src/component/Detail/detailLeft/print.vue

@@ -120,11 +120,11 @@ export default defineComponent({
 			height: 23.5rem;
 			padding: 1rem;
 			text-align: center;
-			border-radius: .5rem;
-			// border: 1px dashed #202020;
-			border: 1px dashed transparent;
+			border: 1px solid #000;
+			// border: 1px dashed transparent;
+			border-radius: 1.5rem;
         	background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em,	#000 0,#000 0.6em);
-			margin-bottom: 3rem;
+			margin-bottom: 1.4rem;
 			display: flex;
 			flex-wrap: wrap;
 			overflow: hidden;

src/component/Detail/detailLeft/sketch.vue

@@ -126,11 +126,12 @@ export default defineComponent({
 			padding: 1rem 0;
 			text-align: center;
 			border-radius: .5rem;
-			// border: 1px dashed #202020;
-			border: 1px dashed transparent;
+			border: 1px solid #000;
+			// border: 1px dashed transparent;
+			border-radius: 1.5rem;
 			position: relative;
         	background: linear-gradient(#fff, #fff) padding-box,repeating-linear-gradient(-45deg,#fff 0,#fff 0.3em,	#000 0,#000 0.6em);
-			margin-bottom: 3rem;
+			margin-bottom: 1.4rem;
 			> img{
 				width: 100%;
 				height: 100%;

src/component/Detail/detailRight/editPrintElement.vue

@@ -1,56 +1,56 @@
 <template>
     <div class="editPrintElement">
+		<div class="detailText" style="text-align: left; margin-bottom: 1rem;">
+			{{ $t('DesignPrintOperation.ModifyPrint') }}
+		</div>
 		<div class="printOverallBtn" v-if="type == 'print'">
 			<div class="overallSlogin">
-				<div
-					class="habit_Overal_Single_text"
-					style="margin-left: 0"
-					:class="{ active: !overallSingle }"
-				>
-					{{ $t('DesignPrintOperation.Overall') }}
-				</div>
-				<a-switch v-model:checked="overallSingle" @change="setOveralSingle"/>
-				<div
-					class="habit_Overal_Single_text"
-					:class="{ active: overallSingle }"
-				>
+				<label>
+					<input type="radio" name="overallSingle" @change="setOveralSingle" v-model="stateOverallSingle" value="single">
 					{{ $t('DesignPrintOperation.Single') }}
-				</div>
+				</label>
+				<label>
+					<input type="radio" name="overallSingle" @change="setOveralSingle" v-model="stateOverallSingle" value="overall">
+					{{ $t('DesignPrintOperation.Overall') }}
+				</label>
 			</div>
-			<div v-show="!overallSingle" class="habit_System_Designer">
-				<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
-				<a-slider id="system_silder"
-					class="system_silder"
-					:min="20"
-					:max="1000"
-					v-model:value="systemDesignerPercentage"
-					:tip-formatter="formatter"
-				>
-				</a-slider>
+			
+		</div>
+		<div class="printElementListBorder" :class="{'single':stateOverallSingle == 'single'}">
+			<div class="printElementList" ref="printElementList" :style="{height:stateOverallSingle == 'overall'?'14rem':'10rem'}">
+				<div class="itemList" :style="{width:stateOverallSingle == 'single'?(prentWidth || 0) : '100%'}">
+					<div class="imgItem" 
+						v-if="stateOverallSingle == 'single'"
+						v-for="item in printStyleList[type][stateOverallSingle]" 
+						:key="item"
+						@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')" 
+						@touchstart.passive="designMousedown(getMousePosition($event,true),item.uniqueId,'disLike')"
+					>
+						<img :src="item.path" alt="">
+						<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
+					</div>
+					<div class="imgItem" 
+						v-if="stateOverallSingle == 'overall'"
+						v-for="item in printStyleList[type][stateOverallSingle]" 
+						:key="item"
+						style="width:14rem;height:14rem;left: 0;right: 0;margin: 0 auto;"
+					>
+						<img :src="item.path" alt="">
+						<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
+					</div>
+				</div>
 			</div>
 		</div>
-		<div class="printElementList" ref="printElementList" :style="{height:stateOverallSingle == 'overall'?'14rem':'10rem'}">
-			<div class="itemList" :style="{width:prentWidth || 0}">
-				<div class="imgItem" 
-					v-if="stateOverallSingle == 'single'"
-					v-for="item in printStyleList[type][stateOverallSingle]" 
-					:key="item"
-					@mousedown.stop="designMousedown(getMousePosition($event,false),item.uniqueId,'disLike')" 
-					@touchstart.passive="designMousedown(getMousePosition($event,true),item.uniqueId,'disLike')"
-				>
-					<img :src="item.path" alt="">
-					<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
-				</div>
-				<div class="imgItem" 
-					v-if="stateOverallSingle == 'overall'"
-					v-for="item in printStyleList[type][stateOverallSingle]" 
-					:key="item"
-					style="width:14rem;height:14rem;"
-				>
-					<img :src="item.path" alt="">
-					<i class="fi fi-rr-trash" @click="navDelete(item)"></i>
-				</div>
-			</div>
+		<div v-show="stateOverallSingle != 'single'" class="habit_System_Designer">
+			<div class="habit_System_Designer_text">{{ $t('DesignPrintOperation.Scale') }}</div>
+			<a-slider id="system_silder"
+				class="system_silder"
+				:min="20"
+				:max="1000"
+				v-model:value="systemDesignerPercentage"
+				:tip-formatter="formatter"
+			>
+			</a-slider>
 		</div>
 		<div class="editPrintElementBox">
 			<div class="designOpenrtion_centent" id="designOpenrtionCentent">
@@ -60,7 +60,7 @@
 						<div 
 							v-for="item,index in printStyleList[type][stateOverallSingle]" 
 							:key="item"
-							v-if="overallSingle"
+							v-if="stateOverallSingle == 'single'"
 							:style="item?.pattern?.style" 
 							@mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"
 							class="modal_imgItem" 
@@ -72,7 +72,7 @@
 					<!-- <img :src="selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg"> -->
 					<img :src="selectDetail?.undividedLayer?selectDetail.undividedLayer:selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg">
 					<div class="designOpenrtion_btn">
-						<ul v-if="overallSingle" v-for="item,index in printStyleList[type][stateOverallSingle]" :key="item" :class="{active:item?.pattern.designOpenrtionBtn?item?.pattern.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item?.pattern.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
+						<ul v-if="stateOverallSingle == 'single'" v-for="item,index in printStyleList[type][stateOverallSingle]" :key="item" :class="{active:item?.pattern.designOpenrtionBtn?item?.pattern.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item?.pattern.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
 							<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
 							<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
 							<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
@@ -82,8 +82,8 @@
 								<img src="../../../assets/images/homePage/cuowu.svg" alt="">
 							</li>
 						</ul>
-						<div v-show="!overallSingle"></div>
-						<ul v-if="!overallSingle && printStyleList[type][stateOverallSingle][0]" class="designOpenrtion_Mouoverall active" :style="'left:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.left+';top:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(0,getMousePosition($event,true))">
+						<div v-show="stateOverallSingle != 'single'"></div>
+						<ul v-if="stateOverallSingle != 'single' && printStyleList[type][stateOverallSingle][0]" class="designOpenrtion_Mouoverall active" :style="'left:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.left+';top:'+printStyleList[type][stateOverallSingle][0]?.pattern?.style?.top+';'" @mousedown.stop="itemMoveMousedown(0,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(0,getMousePosition($event,true))">
 							<i class="fi fi-rr-arrows animtion1"></i>
 							<i class="fi fi-rr-arrows animtion2"></i>
 							<li class="designOpenrtion_rotote" v-rotote.stop="[0,printStyleList[type][stateOverallSingle][0]?.pattern?.transform,type]"></li>
@@ -125,7 +125,6 @@ export default defineComponent({
 			selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
 			currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
 			currentPrintElement:computed(()=>store.state.DesignDetail.currentPrintElement),
-			overallSingle:true,
 			systemDesignerPercentage:0,
 			printStyleList:{
 				print:{
@@ -168,11 +167,6 @@ export default defineComponent({
 		})
 		
 		const setOveralSingle = ()=>{
-			if(!editPrintElementData.overallSingle){
-				editPrintElementData.stateOverallSingle = 'overall'
-			}else{
-				editPrintElementData.stateOverallSingle = 'single'
-			}
 			setItemPosition()
 		}
 		const formatter = (value:any)=>{
@@ -197,7 +191,7 @@ export default defineComponent({
 					let sketchH = editPrintElementData.sketchWH.height * editPrintElementData.sketchWH.scale
 					let x = sketchW / 2 - (sketchW * (width / editPrintElementData.sketchWH.width)/2)
 					let y = sketchH / 2 -(sketchH * height/2)
-					if(!editPrintElementData.overallSingle){
+					if(!editPrintElementData.stateOverallSingle == 'single'){
 						x = sketchW / 2
 						y = sketchH / 2
 					}
@@ -212,7 +206,7 @@ export default defineComponent({
 			let item = {
 				angle:0,
 				designType:data.designType,
-				ifSingle:editPrintElementData.overallSingle,
+				ifSingle:editPrintElementData.stateOverallSingle == 'single',
 				level2Type:data.level2Type,
 				location,
 				minIOPath:data.minIOPath || data.originalUrl,
@@ -354,9 +348,9 @@ export default defineComponent({
 						})
 						setItemPosition()
 					}
-					if(props.type == 'print'){
-						editPrintElementData.overallSingle = state
-					}
+					// if(props.type == 'print'){
+					// 	editPrintElementData.overallSingle = state
+					// }
 				}
 				// undividedLayer
 				//计算宽高使用editPrintElementData.selectDetail.path
@@ -392,7 +386,7 @@ export default defineComponent({
 			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle].forEach((v:any)=>{
 				v.pattern.designOpenrtionBtn = false
 			})
-			if(!editPrintElementData.overallSingle){
+			if(editPrintElementData.stateOverallSingle != 'single'){
 				editPrintElementDom.imgDom = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("designOpenrtion_Mouoverall")[0]
 			}else{
 				editPrintElementDom.imgDom = document.getElementsByClassName('editPrintElement')[0].getElementsByClassName("modal_imgItem")[editPrintElementData.imgDomIndex]
@@ -462,7 +456,7 @@ export default defineComponent({
 			let y:any = ( e.clientY - editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.centers.top)+'px'
 			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = x
 			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.top = y
-			if(!editPrintElementData.overallSingle){
+			if(editPrintElementData.stateOverallSingle != 'single'){
 				if(x.replace(/px/g,'') >= parentNode.width - imgDomWH.width){
 					editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][editPrintElementData.imgDomIndex].pattern.style.left = parentNode.width - imgDomWH.width+'px'
 				}
@@ -740,7 +734,6 @@ export default defineComponent({
 		onMounted(()=>{
 			if(props.type == 'element'){
 				editPrintElementData.stateOverallSingle = 'single'
-				editPrintElementData.overallSingle = true
 			}
 		})
 		onBeforeUnmount(()=>{
@@ -857,74 +850,88 @@ export default defineComponent({
 			> .overallSlogin{
 				align-items: center;
 				display: flex;
+				// margin-top: 1.4rem;
+				margin-bottom: 2.2rem;
+				> label{
+					display: flex;
+					align-items: center;
+					font-size: 1.6rem;
+					margin-right: 2.4rem;
+					&:last-child{
+						margin-right: 0rem;
+					}
+					> input{
+						margin-right: 1rem;
+					}
+				}
 			}
-			.habit_Overal_Single_text {
-				font-weight: 600;
-				color: rgba(0, 0, 0, 0.5);
+		}
+		.habit_System_Designer {
+			align-items: center;
+			display: flex;
+			justify-content: center;
+			.ant-slider-track,
+			.ant-slider-rail {
+				background-color: #e1e1e1;
+				border-radius: calc(0.5rem*1.2);
+			}
+			:deep(.system_silder){
+				width: 17rem;
+			}
+			.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
+			.ant-slider-handle {
+				background-color: #2d2e76 !important;
+				border: none !important;
+			}
+			.ant-slider-handle:hover{
+				box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
+			}
+			.habit_System_Designer_text{
 				font-size: 1.8rem;
-				margin: 0 1rem;
-				&.active {
-					color: rgba(0, 0, 0, 0.7);
-					// font-weight: 900;
-					// transform: scale(1.2);
-				}
-			}
-			.habit_System_Designer {
-				align-items: center;
-				display: flex;
-				.ant-slider-track,
-				.ant-slider-rail {
-					background-color: #e1e1e1;
-					border-radius: calc(0.5rem*1.2);
-				}
-				:deep(.system_silder){
-					width: 20rem;
-				}
-				.ant-slider .ant-slider-handle:not(.ant-tooltip-open),
-				.ant-slider-handle {
-					background-color: #2d2e76 !important;
-					border: none !important;
-				}
-				.ant-slider-handle:hover{
-					box-shadow: 0 0 0 5px rgba(45, 46, 118, 0.2);
-				}
-				.habit_System_Designer_text{
-					font-size: 1.8rem;
-					color: rgba(0, 0, 0, 0.7);
-					margin-right: 3rem;
-					font-weight: 600;
-				}
+				color: rgba(0, 0, 0, 0.7);
+				margin-right: 3rem;
+				font-weight: 600;
 			}
 		}
-		> .printElementList{
-			width: 100%;
-			height: 10rem;
-			position: relative;
-			overflow-x: auto;
-			.itemList{
-				height: 100%;
+		> .printElementListBorder{
+			&.single{
+				padding: 2rem 4rem;
+				width: 100%;
+				border-radius: 1.5rem;
+				border: .05rem solid #000;
 			}
-			.imgItem{
-				width: 8rem;
-				height: 8rem;
-				position: absolute;
-				cursor: pointer;
-				border-radius: 1rem;
-				overflow: hidden;
-				> img{
-					width: 100%;
+			> .printElementList{
+				width: 100%;
+				height: 10rem;
+				position: relative;
+				overflow-x: auto;
+				
+				.itemList{
 					height: 100%;
-					object-fit: cover;
 				}
-				> i{
+				.imgItem{
+					width: 8rem;
+					height: 8rem;
 					position: absolute;
-					right: 1rem;
-					top: 1rem;
-					color: #fff;
-					text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
+					cursor: pointer;
+					border-radius: 1rem;
+					overflow: hidden;
+					> img{
+						width: 100%;
+						height: 100%;
+						object-fit: cover;
+					}
+					> i{
+						position: absolute;
+						right: 1rem;
+						top: 1rem;
+						color: #fff;
+						text-shadow: 0px 0px 2px black, 0px 0px 2px black, 0px 0px 2px black;
+					}
 				}
 			}
 		}
+		
 		> .editPrintElementBox{
 			flex: 1;
 			overflow: hidden;

src/component/Detail/model/index.vue

@@ -4,7 +4,7 @@
 			<div class="back" v-show="isEditPattern.value">
 				<i class="fi fi-br-angle-left" @click="setBack"></i>
 			</div>
-			<modelNav @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')" @deleteItem="deleteItem" :isEditPattern="isEditPattern.value"></modelNav>
+			<modelNav @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')" @deleteItem="deleteItem"></modelNav>
 		</div>
 		<div class="modelindex_right">
 			<div class="detail_btn">
@@ -14,7 +14,12 @@
 				<i v-show="true" class="icon iconfont icon-chehui" @click="revocation"></i>
 				<i v-show="true" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
 				<!-- 编辑 -->
-				<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value,'pointerEventsNone':!selectDetail?.id}" @click="showDesignImgDetail('edit')"></i>
+				<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value == 'canvasEditor','pointerEventsNone':!selectDetail?.id}" @click="showDesignImgDetail('canvasEditor')"></i>
+
+				<i @click="showDesignImgDetail('redGreenExample')" :class="{active:isEditPattern.value == 'redGreenExample','pointerEventsNone':!selectDetail?.id}">
+					<SvgIcon name="editFrontBack" size="30" />
+				</i>
+
 				<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" :class="{active:imgDesignImg}" @click="mousedownDesignImg"></i> -->
 				<!-- <i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
 				<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i> -->
@@ -65,29 +70,29 @@ export default defineComponent({
 		}
 		const showDesignImgDetail = (str:any)=>{
 			new Promise((resolve, reject) => {
-				// if(
-				// 	getDetailListData.isEditPattern.value&&
-				// 	detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
-				// ){
-				// 	Modal.confirm({
-				// 		title: t('collectionModal.jsContent2'),
-				// 		icon: createVNode(ExclamationCircleOutlined),
-				// 		okText: 'Yes',
-				// 		cancelText: 'No',
-				// 		mask:false,
-				// 		centered:true,
-				// 		onOk() {
-				// 			resolve(true)
-				// 			emit('detailEdit',str)
-				// 		},
-				// 		onCancel(){
-				// 			resolve(false)
-				// 		}
-				// 	});
-				// }else{
+				if(
+					getDetailListData.isEditPattern.value&&
+					detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
+				){
+					Modal.confirm({
+						title: t('collectionModal.jsContent2'),
+						icon: createVNode(ExclamationCircleOutlined),
+						okText: 'Yes',
+						cancelText: 'No',
+						mask:false,
+						centered:true,
+						onOk() {
+							resolve(true)
+							emit('detailEdit',str)
+						},
+						onCancel(){
+							resolve(false)
+						}
+					});
+				}else{
 					resolve(true)
 					emit('detailEdit',str)
-				// }
+				}
 			})
 		}
 		const deleteItem = ()=>{
@@ -117,7 +122,7 @@ export default defineComponent({
 			},1000)
 		}
 		const setBack = ()=>{
-			emit('detailEdit','edit')
+			emit('detailEdit')
 		}
 		onMounted(()=>{
 			window.addEventListener('resize', handleResize);
@@ -196,6 +201,11 @@ export default defineComponent({
 					@media (min-width: 1024px) {
 						font-size: 2.4rem;
 					}
+					> img{
+						width: 80%;
+						color: #fff;
+						height: 80%;
+					}
 				}
 				> i:hover{
 					background: #000000;

src/component/Detail/model/modelNav.vue

@@ -32,10 +32,6 @@ export default defineComponent({
     },
 	emits:['canvasReload','addSketch','deleteItem'],
 	props:{
-		isEditPattern:{
-			type:Boolean,
-			default:false,
-		},
 	},
     setup(props,{emit}) {
         const store = useStore();
@@ -95,7 +91,9 @@ export default defineComponent({
 				// 	});
 				// }else{
 					resolve(true)
-					emit('canvasReload')
+					if(detailData.selectDetail.id !== item.id){
+						emit('canvasReload')
+					}
 				// }
 			}).then((rv)=>{
 				if(rv)store.commit('DesignDetail/setDesignColthes',item.id)