画布新增icon

src/assets/icons/CHelp.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="64.000000pt" height="64.000000pt" viewBox="0 0 64.000000 64.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,64.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M223 622 c-109 -39 -178 -112 -210 -221 -29 -102 4 -228 82 -306 122
+-121 328 -121 450 0 91 92 118 241 64 356 -69 146 -241 223 -386 171z m152
+-146 c68 -29 73 -85 13 -154 -24 -27 -48 -57 -54 -67 -15 -27 -44 -12 -44 22
+0 18 13 41 41 69 46 47 47 79 3 90 -28 7 -52 -9 -65 -44 -6 -17 -15 -22 -32
+-20 -30 4 -33 38 -6 72 36 46 84 57 144 32z m-31 -278 c8 -14 7 -21 -6 -34
+-30 -30 -75 9 -48 42 16 18 39 15 54 -8z"/>
+</g>
+</svg>

src/assets/icons/editFrontBack.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="405.000000pt" height="405.000000pt" viewBox="0 0 405.000000 405.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,405.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1385 3584 c-343 -47 -677 -124 -939 -214 -180 -62 -244 -94 -252
+-124 -4 -18 13 -77 60 -203 36 -98 96 -263 134 -368 60 -168 71 -191 94 -199
+20 -7 66 2 210 42 100 29 186 52 191 52 4 0 7 -485 7 -1078 0 -1033 1 -1080
+18 -1095 17 -16 109 -17 1119 -17 1050 0 1101 1 1116 18 15 16 17 66 19 447
+l3 429 119 36 c124 37 156 59 156 105 0 44 -33 67 -156 109 l-119 41 -3 503
+c-1 345 1 502 8 502 6 0 92 -23 191 -52 143 -41 186 -49 207 -42 24 8 34 29
+89 184 34 96 94 262 134 368 50 137 69 200 65 218 -8 30 -72 62 -252 124 -271
+94 -596 167 -947 215 -179 24 -208 25 -645 24 -423 -1 -470 -3 -627 -25z
+m1009 -131 c-12 -51 -55 -125 -100 -173 -141 -151 -397 -151 -538 0 -45 48
+-88 122 -100 173 l-6 27 375 0 375 0 -6 -27z m-860 -25 c26 -163 199 -336 376
+-377 110 -26 254 -6 354 47 116 62 233 215 252 330 8 50 3 49 166 26 294 -40
+599 -110 853 -195 83 -27 157 -54 165 -59 13 -8 11 -20 -13 -87 -16 -43 -63
+-172 -104 -288 -42 -115 -77 -211 -78 -213 -2 -2 -90 22 -196 53 -107 30 -202
+55 -213 55 -11 0 -28 -7 -38 -17 -17 -15 -18 -46 -18 -555 0 -296 -3 -538 -8
+-538 -4 0 -72 22 -150 48 -142 47 -143 48 -123 66 18 17 21 31 21 109 0 101
+-12 127 -60 127 -50 0 -62 -27 -58 -134 2 -53 3 -96 2 -96 0 0 -40 13 -89 30
+-100 34 -131 37 -162 15 -37 -26 -35 -54 17 -211 28 -81 50 -154 50 -161 0 -7
+-10 -13 -22 -13 -50 0 -76 -63 -41 -102 11 -13 30 -18 64 -18 l48 0 81 -250
+c85 -263 95 -280 151 -280 53 0 67 24 130 235 50 168 65 204 90 228 60 56 59
+63 59 -333 l0 -360 -1015 0 -1015 0 0 1087 c0 997 -1 1088 -17 1105 -9 10 -26
+18 -37 18 -12 0 -108 -25 -215 -55 -106 -31 -194 -55 -196 -53 -1 2 -36 98
+-78 213 -41 116 -88 245 -104 288 -24 67 -26 79 -13 87 30 19 318 110 455 144
+235 59 586 123 686 125 35 1 37 0 43 -41z"/>
+<path d="M1410 2700 c-25 -25 -25 -51 -1 -81 16 -19 30 -24 90 -27 110 -6 151
+12 151 67 0 49 -26 61 -128 61 -79 0 -95 -3 -112 -20z"/>
+<path d="M1747 2702 c-21 -23 -22 -66 -1 -86 22 -23 55 -29 135 -24 60 3 74 8
+90 27 24 30 24 56 -1 81 -17 17 -33 20 -113 20 -78 0 -97 -3 -110 -18z"/>
+<path d="M2080 2700 c-25 -25 -25 -51 -1 -81 16 -19 30 -24 90 -27 110 -6 151
+12 151 67 0 49 -26 61 -128 61 -79 0 -95 -3 -112 -20z"/>
+<path d="M2417 2702 c-21 -23 -22 -66 -1 -86 22 -23 55 -29 135 -24 60 3 74 8
+90 27 24 30 24 56 -1 81 -17 17 -33 20 -113 20 -78 0 -97 -3 -110 -18z"/>
+<path d="M1286 2574 c-12 -12 -16 -37 -16 -109 0 -86 2 -95 22 -109 30 -21 54
+-20 78 4 17 17 20 33 20 108 0 73 -3 92 -18 105 -23 21 -66 22 -86 1z"/>
+<path d="M2677 2572 c-13 -14 -17 -39 -17 -105 0 -74 3 -90 20 -107 24 -24 48
+-25 78 -4 20 14 22 23 22 109 0 72 -4 97 -16 109 -21 22 -67 20 -87 -2z"/>
+<path d="M1292 2264 c-20 -14 -22 -23 -22 -109 0 -104 10 -125 59 -125 48 0
+61 26 61 123 0 74 -3 90 -20 107 -24 24 -48 25 -78 4z"/>
+<path d="M2680 2260 c-17 -17 -20 -33 -20 -108 0 -98 12 -122 63 -122 47 0 57
+22 57 125 0 86 -2 95 -22 109 -30 21 -54 20 -78 -4z"/>
+<path d="M1287 1942 c-26 -28 -24 -192 1 -215 24 -22 65 -21 85 1 26 28 24
+192 -1 215 -24 22 -65 21 -85 -1z"/>
+<path d="M1310 1643 c-32 -11 -40 -37 -40 -129 0 -85 2 -94 22 -108 30 -21 54
+-20 78 4 17 17 20 33 20 109 0 85 -1 91 -26 110 -28 22 -30 23 -54 14z"/>
+<path d="M1410 1370 c-24 -24 -25 -48 -4 -78 14 -20 23 -22 113 -22 108 0 131
+11 131 62 0 46 -27 58 -128 58 -79 0 -95 -3 -112 -20z"/>
+<path d="M1747 1372 c-22 -24 -21 -65 1 -85 15 -13 39 -17 115 -17 88 0 97 2
+111 22 21 30 20 54 -4 78 -17 17 -33 20 -113 20 -78 0 -97 -3 -110 -18z"/>
+<path d="M2080 1370 c-24 -24 -25 -48 -4 -78 14 -20 23 -22 113 -22 108 0 131
+11 131 62 0 46 -27 58 -128 58 -79 0 -95 -3 -112 -20z"/>
+</g>
+</svg>

src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue

@@ -357,6 +357,8 @@ const handleToolClick = (tool) => {
   user-select: none;
   min-width: 5.8rem;
   height: 100%;
+  /* overflow-y: auto; */
+  /* overflow-x: hidden; */
 }
 
 .red-green-mode {

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(str){
-				if(detailData.isEditPattern.value){
+				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

@@ -23,6 +23,10 @@
 									<i class="fi fi-sr-layers"></i>
 									<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>
 						<!-- <canvasContent ref="canvasContent"></canvasContent> -->
@@ -36,6 +40,7 @@
 						</editFrontBack> -->
 						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
 							:enabledRedGreenMode="true"
+							@canvasInit="canvasInit"
 							:clothingImageUrl="selectDetail.undividedLayer || selectDetail.path" 
 							:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
 							@trigger-red-green-mouseup="frontBackChange"
@@ -43,19 +48,6 @@
 								imageMode:'contains',
 							}"
 							ref="editCanvasBackFront">
-							<template #customToolsTop="{ toolTopProps }">
-								<!-- 也可以直接使用普通的按钮 -->
-								<div class="custom-tool-btn" @click="()=>currentView = 'canvasEditor'">
-									<i class="fi fi-ss-arrow-small-left" style="font-size: 3.5rem;"></i>
-									<div class="tool-tooltip">{{ $t('Canvas.back') }}</div>
-								</div>
-							</template>
-							<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>
@@ -87,6 +79,10 @@ export default defineComponent({
 		editCanvas
     },
 	props:{
+		isEditPattern:{
+			type:String,
+			default:''
+		}
 	},
     setup(props,{emit}) {
         const store = useStore();
@@ -114,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:'',
@@ -202,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})
 
@@ -267,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');
@@ -279,9 +277,7 @@ export default defineComponent({
 		})
 		onMounted(()=>{
 			nextTick(async ()=>{
-				detailData.currentView = 'canvasEditor'
+				// detailData.currentView = 'canvasEditor'
-				setTimeout(()=>{
-				})
 				if(detailData.selectDetail.canvasId){
 					detailData.isShowMark = true
 					await new Promise((resolve, reject) => {

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(
+				if(
-				// 	getDetailListData.isEditPattern.value&&
+					getDetailListData.isEditPattern.value&&
-				// 	detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
+					detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
-				// ){
+				){
-				// 	Modal.confirm({
+					Modal.confirm({
-				// 		title: t('collectionModal.jsContent2'),
+						title: t('collectionModal.jsContent2'),
-				// 		icon: createVNode(ExclamationCircleOutlined),
+						icon: createVNode(ExclamationCircleOutlined),
-				// 		okText: 'Yes',
+						okText: 'Yes',
-				// 		cancelText: 'No',
+						cancelText: 'No',
-				// 		mask:false,
+						mask:false,
-				// 		centered:true,
+						centered:true,
-				// 		onOk() {
+						onOk() {
-				// 			resolve(true)
+							resolve(true)
-				// 			emit('detailEdit',str)
+							emit('detailEdit',str)
-				// 		},
+						},
-				// 		onCancel(){
+						onCancel(){
-				// 			resolve(false)
+							resolve(false)
-				// 		}
+						}
-				// 	});
+					});
-				// }else{
+				}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)

src/lang/cn.ts

@@ -1278,6 +1278,7 @@ export default {
 	SelectBGColor:'选择背景颜色',
 	ok:'确定',
 	editFrontBack:'编辑服装前片后片',
+	help:'帮助',
 	back:'返回',
   },
   speedList:{

src/lang/en.ts

@@ -1280,6 +1280,7 @@ export default {
 	SelectBGColor:'Select Background Color',
 	ok:'OK',
 	editFrontBack:'Edit the front and back sections',
+	help:'Help',
 	back:'Back',
   },
   speedList:{

src/store/Detail/designDetail.ts

@@ -138,7 +138,6 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 			}
 		},
         setDesignColthes(state,data){
-			console.log(data)
 			if(!state.currentDetailType)state.currentDetailType = 'sketch'
 			//切换选择
 			// state.currentDetailType = ''

src/views/HomeMain.vue

@@ -240,7 +240,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="userSystem" v-if="pastDuePage">
+				<div class="userSystem" v-if="!pastDuePage">
 					{{$t('Header.pastDue')}}
 				</div>
 				<div class="router" v-else-if="!getLangIsShowMark">