From 6cfcd4ce166d7cc98892c4806e0996b1657083fa Mon Sep 17 00:00:00 2001
From: X1627315083 <1627315083@qq.com>
Date: Tue, 25 Feb 2025 15:32:55 +0800
Subject: [PATCH] =?UTF-8?q?detail=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/js/fabric.brushes.js                   |   5 +-
 src/assets/style/style.css                    |   4 +-
 src/assets/style/style.less                   |   4 +-
 src/component/Canvas/argument.vue             |   1 +
 src/component/Canvas/index.vue                |   2 +-
 src/component/Detail/addDetails.vue           |   8 +-
 src/component/Detail/editFrontBack.vue        | 404 +++------
 src/component/DetailCopy/canvas/argument.vue  | 298 ++++--
 .../DetailCopy/canvas/canvasContent.vue       | 125 +--
 src/component/DetailCopy/canvas/index.vue     | 162 +++-
 src/component/DetailCopy/canvas/tool.vue      |  55 +-
 src/component/DetailCopy/designDetail.vue     |  34 +-
 .../DetailCopy/detailLeft/colorBox/index.vue  |  14 +-
 src/component/DetailCopy/detailLeft/index.vue |  20 +-
 .../detailLeft/module/currentList.vue         |   5 +-
 .../detailLeft/module/libraryList.vue         |  18 +-
 .../detailLeft/module/selectList.vue          | 158 ++++
 .../detailLeft/module/uploadList.vue          |   4 +-
 src/component/DetailCopy/detailLeft/print.vue |  95 +-
 .../DetailCopy/detailLeft/sketch.vue          |  85 +-
 .../detailRight/editPrintElement.vue          | 125 +++
 .../DetailCopy/detailRight/index.vue          |   9 +-
 src/component/DetailCopy/model/index.vue      |  24 +-
 src/component/DetailCopy/model/modelNav.vue   |  36 +-
 .../DetailCopy/model/modelPosition.vue        |  41 +-
 src/store/Detail/designDetailCopy.ts          | 163 ++--
 src/tool/canvasGeneralCopy.js                 | 856 +++++++++++-------
 src/views/HomeMain.vue                        |   2 +-
 28 files changed, 1701 insertions(+), 1056 deletions(-)
 create mode 100644 src/component/DetailCopy/detailLeft/module/selectList.vue
 create mode 100644 src/component/DetailCopy/detailRight/editPrintElement.vue

diff --git a/public/js/fabric.brushes.js b/public/js/fabric.brushes.js
index c5e63310..470a78fb 100644
--- a/public/js/fabric.brushes.js
+++ b/public/js/fabric.brushes.js
@@ -176,7 +176,10 @@ fabric.BaseBrush.prototype.convertToImg = function() {
 		left:((xy.x)/pixelRatio-pointerX)/this.canvas.getZoom(),
 		top:((xy.y)/pixelRatio-pointerY)/this.canvas.getZoom(),
 		'scaleX':1/pixelRatio/this.canvas.getZoom(),
-		'scaleY':1/pixelRatio/this.canvas.getZoom()
+		'scaleY':1/pixelRatio/this.canvas.getZoom(),
+		custom:{
+			type:'pencil'
+		}
 	}).setCoords();
 	this.canvas.add(img).clearContext(this.canvas.contextTop);
 	this.canvas.clearContext(this.canvas.contextTop);
diff --git a/src/assets/style/style.css b/src/assets/style/style.css
index 1ca0a1a6..f78ac47f 100644
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -887,10 +887,10 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 .generalModel.fullScreen {
   max-width: 100%;
 }
-.generalModel.fullScreen .ant-modal-content {
+.generalModel.fullScreen > .ant-modal-content {
   border-radius: 0rem;
 }
-.generalModel.fullScreen .ant-modal-body {
+.generalModel.fullScreen > .ant-modal-body {
   padding: 2.5rem 3rem;
 }
 .generalModel .ant-modal-content {
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index 00c2ac19..bfee6c65 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -960,10 +960,10 @@ tr > .ant-picker-cell-in-view.ant-picker-cell-range-hover-start:last-child::afte
 	height: calc(65rem*1.2);
 	&.fullScreen{
 		max-width: 100%;
-		.ant-modal-content{
+		> .ant-modal-content{
 			border-radius: 0rem;
 		}
-		.ant-modal-body{
+		> .ant-modal-body{
 			padding: 2.5rem 3rem;
 		}
 	}
diff --git a/src/component/Canvas/argument.vue b/src/component/Canvas/argument.vue
index d66f0359..9fc2c802 100644
--- a/src/component/Canvas/argument.vue
+++ b/src/component/Canvas/argument.vue
@@ -167,6 +167,7 @@
 		}
 		input{
 			height: 100%;
+			width: 12rem;
 		}
 		&.wH input{
 			width: 5rem;
diff --git a/src/component/Canvas/index.vue b/src/component/Canvas/index.vue
index 2bf302fd..687a501e 100644
--- a/src/component/Canvas/index.vue
+++ b/src/component/Canvas/index.vue
@@ -52,7 +52,7 @@ export default defineComponent({
 		let liquefactionData = ref()
 		let groupDashed = ref(null)//用来判断是否需要对group添加img
 		let canvasType = 'export'
-		let canvasObj = reactive(canvasGeneral)
+		let canvasObj = reactive(new canvasGeneral())
 		provide('canvasType',canvasType)
 		provide('canvasObj',canvasObj)
 		provide('isShowMark',isShowMark)
diff --git a/src/component/Detail/addDetails.vue b/src/component/Detail/addDetails.vue
index 54225dec..b98e80fd 100644
--- a/src/component/Detail/addDetails.vue
+++ b/src/component/Detail/addDetails.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="addDetailsModal" ref="addDetailsModal"></div>
+	<div class="addDetailsModal generalModel" ref="addDetailsModal"></div>
     <a-modal
         class="addDetails_modal generalModel"
         v-model:visible="addDetails"
@@ -49,7 +49,7 @@ export default defineComponent({
         let addDetails = ref(false);
 		let init = (data,index)=>{
 			addDetails.value = true
-			addDetail.imgUrl = data.path
+			addDetail.imgUrl = data.sketchString || data.path
         }
 		let submitBase64Data = (data)=>{
 			emit('setSloganData',data)
@@ -77,6 +77,10 @@ export default defineComponent({
 });
 </script>
 <style lang="less" scoped>
+.addDetailsModal{
+	width: 0;
+	height: 0;
+}
 .addDetails_modal {
     .closeIcon {
         z-index: 2;
diff --git a/src/component/Detail/editFrontBack.vue b/src/component/Detail/editFrontBack.vue
index b84402a9..110310ad 100644
--- a/src/component/Detail/editFrontBack.vue
+++ b/src/component/Detail/editFrontBack.vue
@@ -1,50 +1,51 @@
 <template>
 	<div class="editFrontBack_center">
-		<div class="editFrontBack_center_btn editFrontBack_center_item" :class="{spread:spreadState}">
-			<!-- <div @click="setOperation('')" class="editFrontBack_center_btn_item">
-				<div>新增</div>
-			</div> -->
+		<!-- <div class="editFrontBack_center_btn editFrontBack_center_item" :class="{spread:spreadState}">
 			<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
 			<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
-			<!-- <i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i> -->
 			<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
-			<!-- <i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i> -->
 			<div class="editFrontBack_center_btn_colorRed" @click="setOperationColor('rgb(255,0,0)')" :class="{active:(canvasState != 'eraser' && rgba == 'rgb(255,0,0)')}" title="front">front</div>
 			<div class="editFrontBack_center_btn_colorGreen" @click="setOperationColor('rgb(0,255,0)')" :class="{active:(canvasState != 'eraser' && rgba == 'rgb(0,255,0)')}" title="back">back</div>
 			<div class="editFrontBack_center_btn_colorWhite" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}" title="background">background</div>
 			<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
-			<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
-		</div>
+		</div> -->
 		<div class="exportCanvasBox_center_box">
 			<div class="exportCanvasBox_center">
 				<div class="editFrontBack_bgImg" v-show="loadingShow">
 					<img :src="imgData?.undividedLayer" alt="">
 				</div>
+				<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="frontBackCanvasObj.pencilbtnStyle" style="display: block;"></div>
+
 			</div>
-			<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
+			<!-- <div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div> -->
+<!-- 
+			<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="frontBackCanvasObj.pencilbtnStyle" style="display: block;"></div>
+			{{frontBackCanvasObj.pencilbtnStyle}} -->
 		</div>
 	</div>
 </template>
 <script>
-import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+import { defineComponent, ref, reactive, inject, onMounted, nextTick, toRefs, onBeforeUnmount, watch, computed } from "vue";
 import { formatTime,segmentImage } from "@/tool/util";
 import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
 import { getMousePosition } from "@/tool/mdEvent";
+import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
-import canvasGeneral from "@/tool/canvasGeneral";
 export default defineComponent({
     components: {
     },
 	// emits: ['setSloganData'],
 	props:['patchData','imgDomIndex'],
     setup(props,{emit}) {
+        const store = useStore();
         let presentState = ref('paypal');
         let loadingShow = ref(false);
         let { t } = useI18n();
-        let canvas = reactive({});
+        // let canvas = new frontBackCanvasObjCopy();
+        let canvas = null;
+		let frontBackCanvasObj = inject('frontBackCanvasObj')
 		let ratio = [1,1]
 		let exportWH = 0
-		let imgDomIndex = 0
 		let imgData = ref()
 		let pencilbtnStyle = ref({
 			background:'',
@@ -54,17 +55,20 @@ export default defineComponent({
 			left:0+'px',
 			top:0+'px',
 		})
+		let selectDetail = computed(()=>store.state.DesignDetailCopy.selectDetail)
+
 		// let a = computed(()=>{
 		// 	console.log(123);
 		// 	return props.patchData
 		// })
-		watch(()=>props.imgDomIndex,(newVal,oldVal)=>{
-			if(newVal == -1) return
-			imgDomIndex = newVal
+		watch(()=>pencilbtnStyle.value.background,(newVal)=>{
+			frontBackCanvasObj.brushwork.color = newVal
+			frontBackCanvasObj.setPencilColor()
+		})
+		onMounted(()=>{
 			props.patchData.front.imageUrl=  ''
 			clearTimeout(setTimeSubmit)
-			
-			init(props.patchData.front[newVal],'')
+			// init(props.patchData.front[props.imgDomIndex],'')
 		})
 		let canvasBtn = reactive({
 			canvasState:'move',
@@ -76,11 +80,10 @@ export default defineComponent({
 		})
 		let canvasWH = ref(0);
 		
-		let exportUrl = ''
 		let reverseCanvasState = ref([])//存放canvas操作
 		let normalCanvasState = ref([])//存放canvas操作
-		let canvasState = ref()//存放canvas操作
-		let keyDown = []//监听键盘的 keydown 和 keyup 事件
+
+		let down = false
 		let init = (data,index)=>{
 			normalCanvasState.value = []
 			reverseCanvasState.value = []
@@ -89,8 +92,6 @@ export default defineComponent({
 			nextTick(()=>{
 				let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
 				let editFrontBack_bgImg = document.querySelector(".editFrontBack_center .editFrontBack_bgImg");
-				document.addEventListener("keydown", canvasKeyDown);
-				document.addEventListener("keyup", canvasKeyUp);
 				document.removeEventListener('mousemove', mouseMove);
 				document.removeEventListener('touchmove', touchmove);
 				let img = new Image();
@@ -114,70 +115,39 @@ export default defineComponent({
 					editFrontBack_bgImg.style.width = canvasWH.value * wScale+'px'
 					editFrontBack_bgImg.style.height = canvasWH.value * hScale+'px'
 					ratio = [wScale,hScale]
-					canvas = canvasGeneral.canvasInit(canvasBox,{
+					// canvas = frontBackCanvasObj.canvasInit(canvasBox,{
+					// 	width:canvasWH.value * wScale,
+					// 	height:canvasWH.value * hScale,
+					// })
+					await frontBackCanvasObj.canvasInit(canvasBox,{
 						width:canvasWH.value * wScale,
 						height:canvasWH.value * hScale,
-					})
+					},data.undividedLayer)
+					canvas = frontBackCanvasObj.canvas
+
+					frontBackCanvasObj.setOperation('pencil')
 					pencilbtnStyle.value.background = rgba.value
+					console.log(frontBackCanvasObj,frontBackCanvasObj.setPencilWidth);
+					frontBackCanvasObj.setPencilWidth()
 					fabric.Object.prototype.cornerSize = 10
 					fabric.Object.prototype.transparentCorners = false 
-					exportUrl = data.maskUrl
-					// canvas.on('mouse:wheel', opt => {
-					// 	const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
-					// 	let zoom = canvas.getZoom() // 获取画布当前缩放值
-					// 	zoom *= 0.999 ** delta
-					// 	if (zoom > 20) zoom = 20
-					// 	if (zoom < 0.01) zoom = 0.01
-					// 	// console.log(zoom);
-					// 	canvas.zoomToPoint(
-					// 		{ // 关键点
-					// 		x: opt.e.offsetX,
-					// 		y: opt.e.offsetY
-					// 		},
-					// 		zoom
-					// 	)
-					// 	opt.e.preventDefault()
-					// 	opt.e.stopPropagation()
+					await frontBackCanvasObj.addPartImg({minioUrl:data.maskUrl},'')
+					// await new Promise((resolve, reject) => {
+					// 	fabric.Image.fromURL(data.maskUrl, function(img) {
+					// 		// 设置背景图对象的宽度和高度与 canvas 相同
+					// 		canvas.add(img)
+					// 		resolve('')
+					// 	},{ crossOrigin: "Anonymous" });
 					// })
-					await new Promise((resolve, reject) => {
-						fabric.Image.fromURL(data.maskUrl, function(img) {
-							// 设置背景图对象的宽度和高度与 canvas 相同
-							img.scaleToWidth(canvas.width);
-							img.scaleToHeight(canvas.height);;
-							img.set({
-								// width: canvas.width,
-								// height: canvas.height,
-								// scaleX:2,
-								// scaleY:1,
-								scaleX: canvas.width / img.width,
-								scaleY: canvas.height / img.height
-							});
-							// 将背景图添加到 canvas 的底层
-							// canvas.add(img);
-							canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
-							if(!fabric.Object.prototype.controls.deleteControl){
-								JSSetRemoveImage(deleteObj)
-							}else{
-								fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
-							}
-							setPencilWidth()
-							updateCanvasState()
-							resolve('')
-						},{ crossOrigin: "Anonymous" });
-					})
 					
-					// 鼠标抬起事件
-					canvas.on('mouse:up', function(event) {
-						if(canvasBtn.canvasState != 'move'){
-							updateCanvasState('mouseUp')
-						}
-					});
 					
 					//画布上移动
 					// canvas.on("mouse:move", event =>setCanvasMove(event));
+					canvas.on('mouse:up', (event)=> {
+						updateCanvasState('mouseUp')
+					});
 					document.addEventListener('mousemove', mouseMove);
 					document.addEventListener('touchmove', touchmove);
-					setOperation('pencil')
 					createSetTimeSubmit()
 					img.remove()
 				}
@@ -185,128 +155,15 @@ export default defineComponent({
 				
 			})
         }
-		let canvasKeyDown = (event) => {
-			if(keyDown.indexOf(event.key)>-1){
+		const setBackground = (value)=>{
+			if(value == 'background'){
+				frontBackCanvasObj.setOperation('eraser')
 			}else{
-				keyDown.push(event.code)
-				if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
-					historyState('reverse')
-				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
-					historyState('')
-				}
+				frontBackCanvasObj.setOperation('pencil')
+				frontBackCanvasObj.brushwork.color = value
+				frontBackCanvasObj.pencilColor()
 			}
 		}
-		let canvasKeyUp = (event) =>{
-				keyDown = keyDown.filter(function(item) {
-					return event.code !== item;
-				})
-				
-			}
-		let setClone = ()=>{
-			let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
-			let oldCanvasDom = canvasBox.querySelector('.canvas-container')
-			let oldCanvasDom1 =  canvasBox.querySelector('canvas')
-			if(oldCanvasDom)oldCanvasDom.remove()
-			if(oldCanvasDom1)oldCanvasDom1.remove()
-			loadingShow.value = false
-		}
-		let clearCanvas = ()=>{
-			document.removeEventListener("keydown", canvasKeyDown);
-			document.removeEventListener("keyup", canvasKeyUp);
-		}
-		let rgba = ref('rgb(255,0,0)')
-		let mouseMove = (event)=>{
-			let e = getMousePosition(event,false)
-			setCanvasMove(e)
-		}
-		let touchmove = (event)=>{
-			let e = getMousePosition(event,true)
-			setCanvasMove(e)
-		}
-		let setCanvasMove = (event)=>{
-			if(canvas.isDrawingMode){
-				canvas.setCursor('none');
-			}
-			let canvasCenterBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center_box");
-			if(!canvasCenterBox)return
-			let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
-			let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
-			pencilbtnStyle.value.left = parentX + "px"
-			pencilbtnStyle.value.top =  parentY+'px'
-		}
-		let setOperation = (str)=>{
-			if(!canvas)return
-			canvasBtn.canvasState = str
-			if(str == 'move'){
-				setMove()
-				pencilbtnStyle.value.display = `none`
-			}else if(str == 'pencil'){
-				setPencil()
-				pencilbtnStyle.value.display = `block`
-			}else if(str == 'eraser'){
-				setEraser()
-				// rgba.value = 'rgb(255,255,255)'
-				pencilbtnStyle.value.display = `block`
-			}
-		}
-		let setOperationColor = (color)=>{
-			pencilbtnStyle.value.background = color
-			rgba.value = color
-			canvas.freeDrawingBrush.color = color
-			setOperation('pencil')
-		}
-		let setMove = ()=>{
-			canvas.isDrawingMode = false
-			canvas.forEachObject((obj) =>obj.selectable = true);
-		}
-		let setPencil = ()=>{
-			canvas.isDrawingMode = true//开启绘画模式
-			canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
-			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
-			setPencilWidth()
-			canvas.freeDrawingBrush.color = rgba.value
-			pencilbtnStyle.value.background = rgba.value
-			canvas.freeDrawingBrush.isEraser = false
-		}
-		let setEraser = ()=>{
-			canvas.isDrawingMode = true
-			let eraser = new fabric.EraserBrush(canvas)
-            canvas.freeDrawingBrush = eraser
-			pencilbtnStyle.value.background = `rgb(255,255,255)`
-			canvas.requestRenderAll();
-			canvas.freeDrawingBrush.isEraser = true
-			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
-			setPencilWidth()
-		}
-		let deleteObj = ()=> {
-			// if(!canvas.getActiveObjects()){
-			// 	return
-			// }
-			let target = canvas.getActiveObjects()
-			target.forEach((item)=>{
-				canvas.fxRemove(item, {
-					onComplete(){
-					canvas.discardActiveObject(); // 丢弃当前选中的对象
-					canvas.renderAll(); // 重新渲染 Canvas
-					}
-				})
-				canvas.FX_DURATION = 300
-			})
-		}
-		let setTimeOutWidth
-		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
-			clearTimeout(setTimeOutWidth)
-			setTimeOutWidth = setTimeout(()=>{
-				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
-				pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
-				pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
-
-			},300)
-		}
-		let setTimeSubmit = null
-		let createSetTimeSubmit = ()=>{
-			setSubmit()
-		}
 		let updateCanvasState = (str) =>{
 			if(str != 'mouseUp'){
 				// editFrontBackPencilbtn.value.style.display = 'none'
@@ -316,103 +173,92 @@ export default defineComponent({
 					createSetTimeSubmit()
 				},1000)
 			}
-			const canvasAsJson = JSON.stringify(canvas.toJSON());
-			normalCanvasState.value.push(canvasAsJson);
+		}
+		let setClone = ()=>{
+			let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
+			let oldCanvasDom = canvasBox.querySelector('.canvas-container')
+			let oldCanvasDom1 =  canvasBox.querySelector('canvas')
+			if(oldCanvasDom)oldCanvasDom.remove()
+			if(oldCanvasDom1)oldCanvasDom1.remove()
+			loadingShow.value = false
+		}
+		let rgba = ref('#ff0000')
+		let mouseMove = (event)=>{
+			let e = getMousePosition(event,false)
+			setCanvasMove(e)
+		}
+		let touchmove = (event)=>{
+			let e = getMousePosition(event,true)
+			setCanvasMove(e)
+		}
+		let setCanvasMove = (event)=>{
+			if(canvas.isDrawingMode && canvas){
+				canvas.setCursor('none');
+			}
+			let canvasCenterBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center_box");
+			if(!canvasCenterBox)return
+			let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
+			let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
+			pencilbtnStyle.value.left = parentX + "px"
+			pencilbtnStyle.value.top =  parentY+'px'
+		}
+		let mousedown = (e)=>{
+			if(e.target instanceof HTMLCanvasElement){
+				down = true
+			}
+		}
+		let mouseup = (e)=>{
+			console.log(down);
+			if(down){
+				nextTick(()=>{
+					createSetTimeSubmit()
+				})
+			}
+			down = false
+		}	
+		let setTimeSubmit = null
+		let createSetTimeSubmit = ()=>{
+			setSubmit()
 		}
 		//撤回
-		let historyState = (str)=> {
-			if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
-				let obj = reverseCanvasState.value.pop()
-				// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
-				canvasState.value = obj 
-				normalCanvasState.value.push(obj);
-			}else if(str == '' && normalCanvasState.value.length > 1){
-				let obj = normalCanvasState.value.pop()
-				canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
-				reverseCanvasState.value.push(obj);
-			}else{
-				return
+		
+		let setSubmit = async ()=>{
+			// let data = await frontBackCanvasObj.allExport()
+			let data = await frontBackCanvasObj.detailSubmit()
+			// props.props.patchData.front[imgDomIndex].imageUrl = data
+			let mark = data
+			let full = props.patchData.front[props.imgDomIndex].undividedLayer
+			let size = {
+				width: Math.round(exportWH * ratio[0]),
+				height: Math.round(exportWH * ratio[1]),
 			}
-			canvas.loadFromJSON(canvasState.value, () => {
-				createSetTimeSubmit()
-			});
-			
-		}
-		let setSubmit = ()=>{
-			var allObjects = canvas.getObjects('path');
-			var canvasDom = document.createElement("canvas");
-			let exportCanvas = new fabric.Canvas(canvasDom, {
-				width: exportWH * ratio[0],
-				height: exportWH * ratio[1],
-				isDrawingMode: false, // 开启绘图模式
-			});
-			canvas.backgroundImage.clone((back)=>{
-				back.scaleToWidth(exportCanvas.width);
-				back.scaleToHeight(exportCanvas.height);
-				back.set({
-					scaleX: exportCanvas.width / back.width,
-					scaleY: exportCanvas.height / back.height
-				})
-				let scale = exportCanvas.height/canvas.height
-				exportCanvas.backgroundImage = back
-				allObjects.forEach((item,index)=>{
-					// let obj = fabric.util.object.clone(item);
-					if(item.type == 'circle')return
-					let obj 
-					item.clone((cloned)=>{
-						obj = cloned
-					})
-					obj.set(
-						{
-							scaleX:(item.scaleX?item.scaleX:1)*scale,
-							scaleY:(item.scaleY?item.scaleY:1)*scale,
-							left:item.left*scale,
-							top:item.top*scale,
-						}
-					)
-					exportCanvas.add(obj)
-					
-				})
-				let data = exportCanvas.toDataURL('png')
-				cancelDsign()
-				clearCanvas()
-				// props.props.patchData.front[imgDomIndex].imageUrl = data
-				let mark = data
-				let full = props.patchData.front[imgDomIndex].undividedLayer
-				let size = {
-					width: Math.round(exportWH * ratio[0]),
-					height: Math.round(exportWH * ratio[1]),
-				}
-				segmentImage(mark,full,size).then((rv)=>{
-					// console.log(rv.targetFrontUrl,rv.targetBackUrl)
-					props.patchData.front[imgDomIndex].imageUrl = rv.targetFrontUrl
-					props.patchData.back[imgDomIndex].imageUrl = rv.targetBackUrl
-					props.patchData.front[imgDomIndex].maskUrl = data
-				})
-				return
+			segmentImage(mark,full,size).then((rv)=>{
+				// console.log(rv.targetFrontUrl,rv.targetBackUrl)
+				props.patchData.front[props.imgDomIndex].imageUrl = rv.targetFrontUrl
+				props.patchData.back[props.imgDomIndex].imageUrl = rv.targetBackUrl
+				props.patchData.front[props.imgDomIndex].maskUrl = data
+				store.commit('DesignDetailCopy/updataDetailItem',{maskUrl:data})
 			})
 		}
-		let cancelDsign = ()=>{
-			
-			document.removeEventListener('keydown',canvasKeyDown);
-			document.removeEventListener('keyup', canvasKeyUp);
-		}
+		onBeforeUnmount(()=>{
+			frontBackCanvasObj.canvasClear()
+			document.removeEventListener('mousemove', mouseMove);
+			document.removeEventListener('touchmove', touchmove);
+			document.removeEventListener('mousedown', mousedown);
+			document.removeEventListener('mouseup', mouseup);
+		})
         return {
+			frontBackCanvasObj,
             presentState,
 			loadingShow,
 			imgData,
 			pencilbtnStyle,
             t,
 			...toRefs(canvasBtn),
-			rgba,
+			setBackground,
 			init,
-			setOperation,
-			setOperationColor,
-			setPencilWidth,
-			historyState,
 			setSubmit,
 			setClone,
-			cancelDsign,
         };
     },
     data() {
@@ -529,13 +375,13 @@ export default defineComponent({
 		}
 	}
 	.exportCanvasBox_center_box{
-		padding: 3rem;
 		height: 100%;
 		flex: 1;
 		position: relative;
 		overflow: hidden;
 		width: 100%;
 		background: #e6e6e6;
+		cursor: auto;
 		&:hover{
 			cursor: none;
 		}
@@ -554,12 +400,12 @@ export default defineComponent({
 		height: 100%;
 		position: relative;
 		// overflow: scroll;
-		
+		cursor: none;
 		:deep(.canvas-container){
 			left: 50%;
 			top: 50%;
 			transform: translate(-50%,-50%);
-			opacity: .5;
+			// opacity: .5;
 			// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
 		}
 		.editFrontBack_bgImg{
diff --git a/src/component/DetailCopy/canvas/argument.vue b/src/component/DetailCopy/canvas/argument.vue
index 2677ba87..c02402d1 100644
--- a/src/component/DetailCopy/canvas/argument.vue
+++ b/src/component/DetailCopy/canvas/argument.vue
@@ -1,81 +1,124 @@
 <template>
 	<div class="canvasArgument">
-		 <div class="label_item wH">
+		 <!-- <div class="label_item wH">
 			 <div class="title">{{ $t('exportModel.Width') }}</div>
 			 <input type="number" @input="canvasGeneral.setCanvasWH('width')" v-model="canvasGeneral.canvasWH.width">
 		 </div>
 		 <div class="label_item wH">
 			 <div class="title">{{ $t('exportModel.Height') }}</div>
 			 <input type="number" @input="canvasGeneral.setCanvasWH('height')" v-model="canvasGeneral.canvasWH.height">
+		 </div> -->
+		 <div v-show="isEditFrontBack" class="frontBack">
+			<div class="label_item" @click.stop="setOperation('print')">
+				<div class="title">color</div>
+				<a-select
+					v-model:value="frontBackData"
+					:options="frontBackDataList"
+					size="large"
+					:fieldNames="{ label: 'name', value: 'value' }"
+					style="width:12rem;"
+					@change="changeFrontBackData"
+				>
+					<template #suffixIcon
+						><span
+							class="icon iconfont icon-xiala"
+							style="color: #343579"
+						></span
+					></template>
+				</a-select>
+			</div>
+			<div class="label_item">
+				<div class="titile">{{ $t('exportModel.Size') }}:</div>
+				<input @change="frontBackCanvas.setFontFamily" type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]">
+
+				<!-- <input type="range" @input="frontBackCanvas.setPencilWidth" min="3" max="50" v-model="frontBackCanvas.brushwork.width[frontBackCanvas.operation]"> -->
+			</div>
 		 </div>
-		 <div class="label_item" v-show="
-			 canvasGeneral.operation != 'movePosition' && 
-			 canvasGeneral.operation != 'move' && 
-			 canvasGeneral.operation != 'eraser' && 
-			 canvasGeneral.operation != 'texture' && 
-			 canvasGeneral.operation != 'zoomIn'  && 
-			 canvasGeneral.operation != 'zoomOut' && 
-			 canvasGeneral.operation != 'dashedPencil' && 
-			 canvasGeneral.operation != 'dashed'">
-			 <div class="title">{{ $t('exportModel.Color') }}</div>
-			 <input type="color" @input="canvasGeneral.setPencilColor" v-model="canvasGeneral.brushwork.color">
-			 <span class="icon iconfont icon-xiala" @click.stop="setOperation('color')" :class="{active: operation == 'color'}"></span>
-			 <div class="labelHover_show" v-show="operation == 'color'" @click.stop="">
-				 <div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
-			 </div>
-		 </div>
-		 <div class="label_item" v-show="
-			 canvasGeneral.operation != 'movePosition' && 
-			 canvasGeneral.operation != 'move' && 
-			 canvasGeneral.brushwork.value != 'RibbonBrush' && 
-			 canvasGeneral.brushwork.value != 'LongfurBrush'&& 
-			 canvasGeneral.operation != 'zoomIn'  &&
-			 canvasGeneral.operation != 'zoomOut' && 
-			 canvasGeneral.operation != 'dashedPencil' && 
-			 canvasGeneral.operation != 'dashed'">
-			 <div >{{ $t('exportModel.Size') }}:</div>
-			 <input @change="canvasGeneral.setFontFamily" type="range" @input="canvasGeneral.setPencilWidth" min="3" max="50" v-model="canvasGeneral.brushwork.width[canvasGeneral.operation]">
-		 </div>
-		 <div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
-			 <div >{{ $t('exportModel.Brushwork') }}:</div>
-			 <a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
-				 style="width: 12rem "
-				 @change="canvasGeneral.brushworkChange"
-				 >
-				 <a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
-					 <img style="width: 100%;" :src="item.url" alt="">
-				 </a-select-option>
-			 </a-select>
-		 </div>
-		 <div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
-			 <div >{{ $t('exportModel.Texture') }}:</div>
-			 <a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
-				 style="width: 12rem "
-				 @change="canvasGeneral.textureValueChange"
-				 >
-				 <a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
-					 <img :src="item.url" alt="">
-				 </a-select-option>
-			 </a-select>
-		 </div>
-		 <div class="label_item" v-show="
-			 canvasGeneral.operation != 'pencil' && 
-			 canvasGeneral.operation != 'eraser'&&
-			 canvasGeneral.operation != 'movePosition' && 
-			 canvasGeneral.operation != 'move'&&
-			 canvasGeneral.operation != 'text'&&
-			 canvasGeneral.operation != 'texture'&&
-			 canvasGeneral.operation != ''&& 
-			 canvasGeneral.operation != 'zoomIn'  && 
-			 canvasGeneral.operation != 'zoomOut' && 
-			 canvasGeneral.operation != 'dashedPencil' && 
-			 canvasGeneral.operation != 'dashed'">
-			 <div >{{ $t('exportModel.FillBack') }}:</div>
-			 <div class="leftAlign">
-				 <i class="icon iconfont icon-tuceng1" @click="canvasGeneral.setOperationMode('fill')" :class="{active:canvasGeneral.operationMode == 'fill'}"></i>
-				 <i class="icon iconfont icon-tuceng" @click="canvasGeneral.setOperationMode('border')" :class="{active:canvasGeneral.operationMode == 'border'}"></i>
-			 </div>
+		 <div v-show="!isEditFrontBack" class="sketch">
+			<div class="label_item" @click.stop="setOperation('print')">
+				<div class="title">print</div>
+				<div class="current"></div>
+				<div class="drop" v-show="operation == 'print'">
+					<selectList @selectImgItem="selectImgItem" type="print" :catecoryList="printCatecoryList"></selectList>
+				</div>
+			</div>
+			<div class="label_item" @click.stop="setOperation('element')">
+				<div class="title">element</div>
+				<div class="current"></div>
+				<div class="drop" v-show="operation == 'element'">
+					<selectList @selectImgItem="selectImgItem" type="element" :catecoryList="designElementsType"></selectList>
+				</div>
+			</div>
+			<div class="label_item" v-show="
+				canvasGeneral.operation != 'movePosition' && 
+				canvasGeneral.operation != 'move' && 
+				canvasGeneral.operation != 'eraser' && 
+				canvasGeneral.operation != 'texture' && 
+				canvasGeneral.operation != 'zoomIn'  && 
+				canvasGeneral.operation != 'zoomOut' && 
+				canvasGeneral.operation != 'dashedPencil' && 
+				canvasGeneral.operation != 'dashed'">
+				<div class="title">{{ $t('exportModel.Color') }}</div>
+				<input style="width: 7rem;" type="color" @input="canvasGeneral.setPencilColor" v-model="canvasGeneral.brushwork.color">
+				<span class="icon iconfont icon-xiala" @click.stop="setOperation('color')" :class="{active: operation == 'color'}"></span>
+				<div class="labelHover_show" v-show="operation == 'color'" @click.stop="">
+					<div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
+				</div>
+			</div>
+			<div class="label_item" v-show="
+				canvasGeneral.operation != 'movePosition' && 
+				canvasGeneral.operation != 'move' && 
+				canvasGeneral.brushwork.value != 'RibbonBrush' && 
+				canvasGeneral.brushwork.value != 'LongfurBrush'&& 
+				canvasGeneral.operation != 'zoomIn'  &&
+				canvasGeneral.operation != 'zoomOut' && 
+				canvasGeneral.operation != 'dashedPencil' && 
+				canvasGeneral.operation != 'dashed'">
+				<div class="title">{{ $t('exportModel.Size') }}:</div>
+				<input @change="canvasGeneral.setFontFamily" type="range" @input="canvasGeneral.setPencilWidth" min="3" max="50" v-model="canvasGeneral.brushwork.width[canvasGeneral.operation]">
+			</div>
+			<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
+				<div class="title">{{ $t('exportModel.Brushwork') }}:</div>
+				<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
+					style="width: 12rem "
+					@change="canvasGeneral.brushworkChange"
+					>
+					<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
+						<img style="width: 100%;" :src="item.url" alt="">
+					</a-select-option>
+				</a-select>
+			</div>
+			<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
+				<div class="title">{{ $t('exportModel.Texture') }}:</div>
+				<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
+					style="width: 12rem "
+					@change="canvasGeneral.textureValueChange"
+					>
+					<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
+						<img :src="item.url" alt="">
+					</a-select-option>
+				</a-select>
+			</div>
+			<div class="label_item" v-show="
+				canvasGeneral.operation != 'pencil' && 
+				canvasGeneral.operation != 'eraser'&&
+				canvasGeneral.operation != 'movePosition' && 
+				canvasGeneral.operation != 'move'&&
+				canvasGeneral.operation != 'text'&&
+				canvasGeneral.operation != 'texture'&&
+				canvasGeneral.operation != ''&& 
+				canvasGeneral.operation != 'zoomIn'  && 
+				canvasGeneral.operation != 'zoomOut' && 
+				canvasGeneral.operation != 'dashedPencil' && 
+				canvasGeneral.operation != 'dashed'">
+				<div class="title">{{ $t('exportModel.FillBack') }}:</div>
+				<div class="leftAlign">
+					<i class="icon iconfont icon-tuceng1" @click="canvasGeneral.setOperationMode('fill')" :class="{active:canvasGeneral.operationMode == 'fill'}"></i>
+					<i class="icon iconfont icon-tuceng" @click="canvasGeneral.setOperationMode('border')" :class="{active:canvasGeneral.operationMode == 'border'}"></i>
+				</div>
+			</div>
 		 </div>
+		
 		 <!-- <div class="label_item" v-show="canvasGeneral.operation == 'movePosition'">
 			 <div >{{ $t('exportModel.Layer') }}:</div>
 			 <div class="leftAlign">
@@ -85,32 +128,55 @@
 				 <i class="icon iconfont icon-shangyiceng1" @click="canvasGeneral.setLayerIndex('Back')"></i>
 			 </div>
 		 </div> -->
-		 <div class="label_item" v-show="(canvasGeneral.operation == '' || canvasGeneral.operation == 'text' || canvasGeneral.createPatterning.textDataShow) && canvasGeneral.operation != 'movePosition' && canvasGeneral.operation != 'move'">
-			 <div>Font Family</div>
-			 <a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.fontFamily"
-				 style="flex: 1;width: 15rem;"
-				 @change="canvasGeneral.setFontFamily"
-				 :style="{'font-family':canvasGeneral.fontFamily}"
-				 >
-				 <a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
-					 {{item.name}}
-				 </a-select-option>
-			 </a-select>
-		 </div>
 	 </div>
  </template>
  
  <script lang="ts">
-	 import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
+	 import { defineComponent,ref,reactive,computed,toRefs,inject, watch, nextTick} from 'vue'
+	 import library from '../detailLeft/module/libraryList.vue'
+	 import upload from '../detailLeft/module/uploadList.vue'
+	 import selectList from '../detailLeft/module/selectList.vue'
+
+	import { useStore } from "vuex";
 	 export default defineComponent({
-		 components:{},
-		 setup(){
+		 components:{selectList},
+		props: ['isEditFrontBack'],
+		emits: ['setFrontBackColor'],
+		 setup(props,{emit}){
+	        const store = useStore();
 			 let testModal = ref(true)
 			 let canvasGeneral:any = inject('canvasObj')
+			 let frontBackCanvas:any = inject('frontBackCanvasObj')
 			 const data = reactive({
 				 colorHistoryList:[],
 				 operation:'',
+				 printCatecoryList:computed(()=>{
+					return store.state.UserHabit.printType
+				}),
+				designElementsType:computed(()=>{
+					return store.state.UserHabit.designElementsType;
+				}),
+				frontBackData:'#ff0000',
+				frontBackDataList:[
+					{
+						name:'正面',
+						value:'#ff0000'
+					},{
+						name:'反面',
+						value:'#00ff00'
+					},{
+						name:'背景',
+						value:'background'
+					},
+				]
 			 })
+			 watch(()=>props.isEditFrontBack,(newVal)=>{
+				if(newVal){
+					nextTick(()=>{
+						data.frontBackData = '#ff0000'
+					})
+				}
+			})
 			 const setOperation = (str:any)=>{
 				 data.operation = str
 			 }
@@ -121,12 +187,22 @@
 			 const closeModal = ()=>{
 				 document.removeEventListener('click',setOper)
 			 }
+			 const selectImgItem = (data:any)=>{
+				data.minioUrl = data.url
+				canvasGeneral.addPartImg(data,'print')
+			}
+			const changeFrontBackData = (value:any)=>{
+				emit('setFrontBackColor',value)
+			}
 			 return {
 				 canvasGeneral,
+				 frontBackCanvas,
 				 ...toRefs(data),
 				 testModal,
 				 setOperation,
 				 closeModal,
+				 selectImgItem,
+				 changeFrontBackData,
 			 }
 		 }
 	 });
@@ -134,9 +210,11 @@
  
  <style lang='less' scoped>
  .canvasArgument{
-	 display: flex;
-	 flex-wrap: wrap;
 	 height: 100%;
+	 >div{
+		display: flex;
+		flex-wrap: wrap;
+	 }
 	 .label_item{
 		 margin-right: 2rem;
 		 position: relative;
@@ -145,6 +223,24 @@
 		 .leftAlign{
 			 display: flex;
 		 }
+		 > .current{
+			border-radius: 3rem;
+			height: 3rem;
+			width: 7rem;
+			border: 1px solid #000;
+		 }
+		 > .drop{
+			position: absolute;
+			z-index: 22;
+			top: 4rem;
+			background: #fff;
+			border: 1px solid #000;
+			border-radius: 2rem;
+			padding: 2.4rem;
+			width: 40rem;
+			height: 50rem;
+			display: flex;
+		}
 		 .labelHover_show{
 			 position: absolute;
 			 width: 100%;
@@ -166,22 +262,48 @@
 			 }
 		 }
 		 input{
-			 height: 100%;
+			height: 100%;
+			border-radius: 3rem;
+			width: 12rem;
+			background: #fff;
+			height: 3rem;
+			border: 1px solid #000;
 		 }
 		 &.wH input{
 			 width: 5rem;
 		 }
 		 .title{
 			 margin-right: 1rem;
+			 font-weight: 600;
+			 font-size: 1.8rem;
 		 }
-		 .icon-xiala{
+		 :deep(.ant-select){
+			height: 3rem;
+			border-radius: 3rem;
+			.ant-select-selector{
+				height: 100%;
+				border-radius: 3rem;
+				border: 1px solid;
+				.ant-select-selection-item{
+					display: flex;
+					font-size: 2rem;
+					line-height: 3rem;
+				}
+			}
+		 }
+		 
+	 }
+	 &.sketch{
+		.icon-xiala{
 			 cursor: pointer;
 			 transform: rotate(0deg);
 			 height: 4rem;
 			 width: 4rem;
 			 transition: all .3s;
-			 line-height: 4rem;
+			 line-height: 1;
 			 text-align: center;
+			 display: flex;
+			align-items: center;
 			 &.active{
 				 transform: rotate(180deg);
 			 }
diff --git a/src/component/DetailCopy/canvas/canvasContent.vue b/src/component/DetailCopy/canvas/canvasContent.vue
index 28c5690f..1579a6cd 100644
--- a/src/component/DetailCopy/canvas/canvasContent.vue
+++ b/src/component/DetailCopy/canvas/canvasContent.vue
@@ -1,12 +1,8 @@
 <template>
 	<div class="canvasContent_box">
 		<div class="canvasContent" ref="canvasScaleDom">
-			<div v-if="isPresuppose" class="generalCanvas_center presuppose">
-				<div class="presuppose16-9" @click="setPresuppose('16/9')">16 : 9</div>
-				<div class="presuppose1-1" @click="setPresuppose('1/1')">1 : 1</div>
-				<div class="presuppose9-16" @click="setPresuppose('9/16')">9 : 16</div>
-			</div>
-			<div v-else class="generalCanvas_center canvas" ref="canvasDom">
+			<div class="generalCanvas_center canvas" ref="canvasDom">
+				<div class="editFrontBack_pencilbtn" v-show="!isShowMark"></div>
 				<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
 			</div>
 		</div>
@@ -14,30 +10,54 @@
 </template>
 
 <script lang="ts">
-	import { defineComponent,ref,reactive,nextTick,toRefs,inject,createVNode, onMounted} from 'vue'
+	import { defineComponent,computed,reactive,nextTick,toRefs,inject,createVNode, onMounted, onBeforeUnmount} from 'vue'
 	import { Modal,message } from 'ant-design-vue';
 	import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+	import { useStore } from "vuex";
 	import { useI18n } from 'vue-i18n'
 	export default defineComponent({
 		component:{},
 		setup(){
-			let {t} = useI18n()
+        const store = useStore();
+		let {t} = useI18n()
 			let canvasType = inject('canvasType')
 			let canvasGeneral:any = inject('canvasObj')
 			const data:any = reactive({
 				canvasScaleDom:null,
 				canvasDom:null,
-				isPresuppose:false,
 				isShowMark:false,
 				pencilbtnStyle:{},
+				selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+
 				
 			})
 			const createCanvas = (canvasSize:any)=>{
-				data.isPresuppose = false
-				nextTick(()=>{
-					canvasGeneral.canvasInit(data.canvasDom,canvasSize)
-					console.log(canvasGeneral);
+				nextTick(async ()=>{
+					let img = data.selectDetail.undividedLayer
+					let WH = {
+						width:data.canvasDom.offsetWidth,
+						height:data.canvasDom.offsetHeight,
+					}
+					let image = new Image()
+					image.onload = async ()=>{
+						let wScale = 1
+						let hScale = 1
+						wScale = image.width/image.height
 
+						// if(image.width>image.height){
+						// 	hScale = image.height/image.width
+						// }else{
+						// 	wScale = mnnmmmimage.width/image.height
+						// }
+						let size = {
+							width:WH.height*wScale,
+							height:WH.height*hScale,
+						}
+						let editGroupImg = data.selectDetail.partialDesign.partialDesignPath
+						await canvasGeneral.canvasInit(data.canvasDom,size,img,editGroupImg)
+					}
+					image.src = img
+					// canvasGeneral.canvasInit(data.canvasDom,canvasSize)
 				})
 			}
 			const openMode = (data:any)=>{
@@ -60,53 +80,15 @@
 				yes()
 				
 			}
-			// canvasGeneral.openMode.fun = openMode
-			const setPresuppose = (presuppose:any)=>{
-				let canvasDomSize = {
-					width:data.canvasScaleDom.offsetWidth,
-					height:data.canvasScaleDom.offsetHeight,
-				}
-				let width,height
-				let scale = [0,0]
-				if(presuppose == '16/9'){
-					// scale[0] = 16
-					// scale[1] = 9
-					width = 1600
-					height = 900
-				}else if(presuppose == '1/1'){
-					// scale[0] = 1
-					// scale[1] = 1
-					width = 1000
-					height = 1000
-				}else if(presuppose == '9/16'){
-				    // scale[0] = 9
-					// scale[1] = 16
-					width = 900
-					height = 1600
-				}
-				// let mbHeight = canvasDomSize.width / scale[0] * scale[1]
-				// if(mbHeight < canvasDomSize.height){
-				// 	width = canvasDomSize.width
-				// 	height = mbHeight
-				// }else{
-				// 	width = canvasDomSize.height / scale[1] * scale[0]
-				// 	height = canvasDomSize.height
-				// }
-				let canvasSize = {width,height}
-				createCanvas(canvasSize)
-			}
 			onMounted(()=>{
-				if(canvasType == 'export'){
-					data.isPresuppose = true
-				}else{
-					createCanvas({})
-				}
-				
+				createCanvas({})
+			})
+			onBeforeUnmount(()=>{
+				canvasGeneral.canvasClear()
 			})
 			return {
 				canvasGeneral,
 				...toRefs(data),
-				setPresuppose,
 			}
 		}
 	});
@@ -132,39 +114,6 @@
 	overflow: hidden;
 	&.canvas{
 	}
-	&.presuppose{
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		> div{
-			border: 1rem solid #6b6b6b;
-			color: #6b6b6b;
-			display: flex;
-			margin-right: 2rem;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			font-size: 3rem;
-			font-weight: 900;
-			cursor: pointer;
-			border-radius: 4px;
-			&:last-child{
-				margin-right: 0;
-			}
-			&.presuppose16-9{
-				height: calc(30rem / 16 * 9);
-				width: 30rem;
-			}
-			&.presuppose1-1{
-				height: 30rem;
-				width: 30rem;
-			}
-			&.presuppose9-16{
-				height: 30rem;
-				width: calc(30rem / 16 * 9);
-			}
-		}
-	}
 	.editFrontBack_pencilbtn{
 		position: absolute;
 		z-index: 1;
diff --git a/src/component/DetailCopy/canvas/index.vue b/src/component/DetailCopy/canvas/index.vue
index 54be64da..6f5dfcf0 100644
--- a/src/component/DetailCopy/canvas/index.vue
+++ b/src/component/DetailCopy/canvas/index.vue
@@ -4,13 +4,36 @@
 		<!-- :class="[driver__.driver?'hideEvents':'']" -->
 		 <div class="canvasContent">
 			<div class="argument-box">
-				<argument ref="argument" v-if="canvasObj.canvas"></argument>
+				<argument 
+					ref="argument" 
+					class="argument" 
+					v-if="canvasObj.id || frontBackCanvasObj.id" 
+					@toolLiquefaction="toolLiquefaction" 
+					@setFrontBackColor="setFrontBackColor"
+					:isEditFrontBack="isEditFrontBack">
+				</argument>
 			</div>
-			<div class="canvas">
-				<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
-				<div class="canvas">
-					<canvasContent ref="canvasContent"></canvasContent>
+			<div class="content-bottom">
+				<div class="tool-box">
+					<tool ref="tool" class="tool" v-if="canvasObj.id || frontBackCanvasObj.id" @toolLiquefaction="toolLiquefaction" @editFront="editFront" :isEditFrontBack="isEditFrontBack"></tool>
 				</div>
+				<div class="contet">
+					<div class="canvas" v-show="!isEditFrontBack" @click.stop>
+						<canvasContent ref="canvasContent"></canvasContent>
+					</div>
+					<div class="editFrontBack" v-if="isEditFrontBack" @click.stop>
+						<editFrontBack 
+							:patchData="frontBack" 
+							:imgDomIndex="imgDomIndex" 
+							
+							ref="editFrontBack">
+						</editFrontBack>
+					</div>
+				</div>
+				
+				<!-- <div class="Finish">
+					<div class="gallery_btn" @click="privewDetail">Finish</div>
+				</div> -->
 			</div>
 		 </div>
 		
@@ -21,12 +44,14 @@
     
 </template>
 <script lang="ts">
-import { defineComponent,computed,onBeforeUnmount,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+import { defineComponent,computed,onBeforeUnmount,provide,nextTick,watch,toRefs, reactive} from 'vue'
 import { Https } from "@/tool/https";
 import { Modal,message } from 'ant-design-vue';
 import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
+import editFrontBack from '@/component/Detail/editFrontBack.vue'
+
 
 import canvasGeneral from "@/tool/canvasGeneralCopy";
 import argument from './argument.vue'
@@ -35,36 +60,84 @@ import tool from "./tool.vue"
 
 export default defineComponent({
     components:{
-		tool,argument,canvasContent,
+		tool,argument,canvasContent,editFrontBack
     },
     setup(props,{emit}) {
         const store = useStore();
+        const {t} = useI18n();
       
 		const detailDom = reactive({
-			model:null
+			editFrontBack:null as any,
+			model:null,
 		})
 		const userDetail = computed(()=>{
 			return store.state.UserHabit.userDetail
 		})
 		const detailData = reactive({
-			canvasObj:canvasGeneral,
-
-
-			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
-			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
-			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
-			designDetailShow:false,
-			loadingShow:false,
-			isEditPattern:{
-				value:false,
-			},// 是否编辑图案
+			canvasObj:new canvasGeneral('aa'),
+			frontBackCanvasObj:new canvasGeneral('vv'),
+			isShowMark:false,
+			liquefactionData:null as any,
+			liquefaction:null as any,
+			canvasType:'export',
+			imgDomIndex:-1,
+			isEditFrontBack:false,
+		    selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+			frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
 		})
- 	
+		watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
+			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
+		},{immediate: true})
+		provide('frontBackCanvasObj',detailData.frontBackCanvasObj)
+		provide('canvasObj',detailData.canvasObj)
+		provide('isShowMark',detailData.isShowMark)
+		provide('canvasType',detailData.canvasType)
+
+		const setLiquefaction = async ()=>{//进入液化页面
+			detailData.canvasObj.getLiquefactionImgObj().then((data)=>{
+				if(data?.img){
+					detailData.liquefactionData = data
+					detailData.liquefaction.init(data.img)
+				}else {
+					message.info(t('exportModel.jsContent6'))
+					return null;
+				}
+			})
+		}
+		const toolLiquefaction = ()=>{//工具点击按钮
+			setLiquefaction()
+		}
+		const editFront = ()=>{//编辑前后片
+			detailData.isEditFrontBack = !detailData.isEditFrontBack
+			if(detailData.isEditFrontBack){
+				nextTick(()=>{
+			    	detailDom.editFrontBack.init(detailData.frontBack.front[detailData.imgDomIndex],'')
+					//关闭开启键盘事件
+				    detailData.canvasObj.currentOperation = false
+				    detailData.frontBackCanvasObj.currentOperation = true
+				})
+			}else{
+				detailData.canvasObj.currentOperation = true
+				detailData.frontBackCanvasObj.currentOperation = false
+			}
+		}
+		const privewDetail = async ()=>{
+			let data = await detailData.canvasObj.detailSubmit()
+			detailData.selectDetail.partialDesign.partialDesignBase64 = data
+		}
+		const setFrontBackColor = (data:any)=>{
+			detailDom.editFrontBack.setBackground(data)
+		}
 		onBeforeUnmount(()=>{
+			privewDetail()
 		})
         return{
 			...toRefs(detailDom),
 			...toRefs(detailData),
+			toolLiquefaction,
+			editFront,
+			privewDetail,
+			setFrontBackColor,
         }
     },
 	provide() {
@@ -83,9 +156,29 @@ export default defineComponent({
 		// top: -100%;
 		display: flex;
 		align-items: center;
+		.tool-box{
+			width: 4rem;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+		}
+		.Finish{
+			margin-top: auto;
+			> .gallery_btn{
+				cursor: pointer;
+			}
+		}
+		.argument-box{
+			height: 4rem;
+			width: 100%;
+			margin-bottom: 3rem;
+			margin-left: 4rem;
+		}
 		.argument-box,
-		.canvas,
+		.content-bottom,
 		.detail-box{
+			
 			:deep(i){
 				font-size: 2.5rem;
 				cursor: pointer;
@@ -107,6 +200,11 @@ export default defineComponent({
 				&.icon-xialaActive{
 					transform: rotate(90deg);
 				}
+				&.eventNone{
+					cursor: no-drop;	
+					border: none;
+					opacity: .5;
+				}
 			}
 		}
 		.canvasContent{
@@ -115,6 +213,28 @@ export default defineComponent({
 			border: 2px solid #000;
 			border-radius: 3rem;
 			padding: 4rem;
+			display: flex;
+			flex-direction: column;
+		}
+		.content-bottom{
+			flex: 1;
+			overflow: hidden;
+			display: flex;
+			> .contet{
+				flex: 1;
+				overflow: hidden;
+				position: relative;
+				.canvas,.editFrontBack{
+					width: 100%;
+					height: 100%;
+				}
+				.editFrontBack{
+					z-index: 2;
+					position: absolute;
+					top: 0;
+					left: 0;
+				}
+			}
 		}
 		
 	}
diff --git a/src/component/DetailCopy/canvas/tool.vue b/src/component/DetailCopy/canvas/tool.vue
index dd392ef0..dcd07747 100644
--- a/src/component/DetailCopy/canvas/tool.vue
+++ b/src/component/DetailCopy/canvas/tool.vue
@@ -1,32 +1,36 @@
 <template>
    <div class="canvasTool">
+		
 		<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
 		<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
-		<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasGeneral.operation == 'pencil'}"></i>
-		<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:canvasGeneral.operation == 'texture'}"></i>
-		<i class="fi fi-rr-hand-paper" @click="setOperation('move')" :class="{active:canvasGeneral.operation == 'move'}"></i>
-		<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasGeneral.operation == 'movePosition'}"></i>
-		<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasGeneral.operation == 'eraser'}"></i>
-		<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''"  @click.stop="setCloseNav('tool')"></i> -->
-		<i class="fi fi-rr-square-dashed" @click="setOperation('dashed')" :class="{active:canvasGeneral.operation == 'dashed'}"></i>
-		<i class="fi fi-rr-scalpel-path" @click="setOperation('dashedPencil')" :class="{active:canvasGeneral.operation == 'dashedPencil'}"></i>
-		<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasGeneral.operation == 'zoomIn'}"></i>
-		<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasGeneral.operation == 'zoomOut'}"></i>
-		<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
-		<div class="label_item uploadImage">
+		<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasGeneral.operation == 'pencil',eventNone:isEditFrontBack}"></i>
+		<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:canvasGeneral.operation == 'texture',eventNone:isEditFrontBack}"></i>
+		<i class="fi fi-rr-hand-paper" @click="setOperation('move')" :class="{active:canvasGeneral.operation == 'move',eventNone:isEditFrontBack}"></i>
+		<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasGeneral.operation == 'movePosition',eventNone:isEditFrontBack}"></i>
+		<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasGeneral.operation == 'eraser',eventNone:isEditFrontBack}"></i>
+		<i class="fi fi-rr-square-dashed" @click="setOperation('dashed')" :class="{active:canvasGeneral.operation == 'dashed',eventNone:isEditFrontBack}"></i>
+		<i class="fi fi-rr-scalpel-path" @click="setOperation('dashedPencil')" :class="{active:canvasGeneral.operation == 'dashedPencil',eventNone:isEditFrontBack}"></i>
+		<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasGeneral.operation == 'zoomIn',eventNone:isEditFrontBack}"></i>
+		<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasGeneral.operation == 'zoomOut',eventNone:isEditFrontBack}"></i>
+		<!-- <div v-show="isEditFrontBack">
+			<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
+			<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
+		</div> -->
+		<i @click="setEditFront" :class="{active:isEditFrontBack || false}" class="fi fi-sr-layers"></i>
+		
+		<!-- <i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i> -->
+
+		<!-- <div class="label_item uploadImage">
 			<i class="icon fi fi-br-upload" ></i>
 			<input type="file" @change="uploadImage">
-		</div>
-		<i class="icon iconfont" @click="setOperation('text')" :class="{active:canvasGeneral.operation == 'text'}">T</i>
+		</div> -->
+		<!-- <i class="icon iconfont" @click="setOperation('text')" :class="{active:canvasGeneral.operation == 'text'}">T</i>
 		<i class="icon iconfont icon-xiala" :class="{'icon-xialaActive':isMove}" @click.stop="openMore"></i>
 		<div class="btnModal" v-show="isMove" :style="moveStyle">
-			<!-- <i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:canvasGeneral.operation == 'fold'}"></i> -->
 			<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:canvasGeneral.operation == 'rect'}"></i>
-			<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:canvasGeneral.operation == 'line'}"></i> -->
-			<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:canvasGeneral.operation == 'circle'}"></i> -->
 			<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:canvasGeneral.operation == 'triangle'}"></i>
 			<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:canvasGeneral.operation == 'ellipse'}"></i>
-		</div>
+		</div> -->
 	</div>
 </template>
 
@@ -36,16 +40,18 @@ import {base64ToFile} from '@/tool/util'
 import { Https } from "@/tool/https";
 	export default defineComponent({
 		component:{},
-		emits:['toolLiquefaction'],
+		emits:['toolLiquefaction','editFront'],
+		props: ['isEditFrontBack'],
 		setup(props,{emit}){
 			let canvasGeneral:any = inject('canvasObj')
 			let isShowMark:any = inject('isShowMark')
 			const data:any = reactive({
 				isMove:false,
 				moveStyle:{},
+				isShowMark,
 			})
 			const uploadImage = (event:any)=>{
-				isShowMark.value = true
+				data.isShowMark = true
 				const file = event.target.files[0];
 				let input = event.target
 				setOperation('movePosition')
@@ -58,7 +64,7 @@ import { Https } from "@/tool/https";
 						let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
 						Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
 							rv.imgUrl = rv.minioUrl
-							isShowMark.value = false
+							data.isShowMark = false
 							canvasGeneral.addImage(rv)
 						})
 						input.value = ''
@@ -70,6 +76,7 @@ import { Https } from "@/tool/https";
 				canvasGeneral.historyState(str)
 			}
 			const setOperation = (str:any)=>{
+				if(props.isEditFrontBack)return
 				canvasGeneral.setOperation(str)
 			}
 			const openMore = (e:any)=>{
@@ -94,6 +101,10 @@ import { Https } from "@/tool/https";
 			const closeModal = ()=>{
 				document.removeEventListener('click',setMore)
 			}
+			const setEditFront = ()=>{
+				emit('editFront')
+				// setOperation('movePosition')
+			}
 			return {
 				canvasGeneral,
 				...toRefs(data),
@@ -103,6 +114,7 @@ import { Https } from "@/tool/https";
 				openMore,
 				closeModal,
 				setLiquefaction,
+				setEditFront,
 			}
 		}
 	});
@@ -123,7 +135,6 @@ import { Https } from "@/tool/https";
 	&.leftAlign{
 		justify-content: flex-start;
 	}
-	
 	.uploadImage{
 		width: 3rem;
 		height: 3rem;
diff --git a/src/component/DetailCopy/designDetail.vue b/src/component/DetailCopy/designDetail.vue
index 18062dd6..1bbbb373 100644
--- a/src/component/DetailCopy/designDetail.vue
+++ b/src/component/DetailCopy/designDetail.vue
@@ -42,11 +42,12 @@
 					</div>
 				</div>
 				<div class="item detailLeft" :class="{isEditPattern:isEditPattern.value}">
-					<detailLeft v-if="selectDetail && selectDetail.id && currentDetailType"></detailLeft>
+					<detailLeft v-if="currentDetailType"></detailLeft>
+					<!-- <detailLeft v-if="selectDetail && selectDetail.id && currentDetailType"></detailLeft> -->
 				</div>
 
 				<div class="item model">
-					<model ref="model" @detailEdit="detailEdit"></model>
+					<model ref="model" @canvasReload="canvasReload" @detailEdit="detailEdit" @addSketch="()=>isEditPattern.value=false"></model>
 					<div class="btn">
 						<div class="gallery_btn" @click="submit">Submit</div>
 						<div class="gallery_btn" @click="previwe">Preview</div>
@@ -55,11 +56,11 @@
 				<div class="item detailRight">
 					<div class="submit">
 					</div>
-					<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && !isEditPattern.value">
+					<div class="contentRight" v-if="currentDetailType && !isEditPattern.value">
 						<detailRight></detailRight>
 					</div>
 					<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType && isEditPattern.value">
-						<canvasBox></canvasBox>
+						<canvasBox ref="canvasBox" :key="childKey"></canvasBox>
 					</div>
 					<!-- 画布 -->
 					<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
@@ -101,7 +102,8 @@ export default defineComponent({
         const store = useStore();
       
 		const detailDom = reactive({
-			model:null
+			model:null,
+			canvasBox,
 		})
 		const userDetail = computed(()=>{
 			return store.state.UserHabit.userDetail
@@ -115,6 +117,7 @@ export default defineComponent({
 			isEditPattern:{
 				value:false,
 			},// 是否编辑图案
+			childKey:0,
 		})
 		provide('isEditPattern',detailData.isEditPattern)
 		const closeModal = ()=>{
@@ -179,6 +182,7 @@ export default defineComponent({
 			let clothesList:any = []
 			for(let i = 0;i<list.length;i++){
 			    let {scale,offset,priority,maskUrl,maskMinioUrl} = (detailDom.model as any).getSubmitData(list[i])
+				await (detailDom.canvasBox as any).privewDetail()
 				let gradient = null
 				let newData = list[i]?.newDetail?.[detailData.currentDetailType]
 				let isCurrent = list[i].id == detailData?.selectDetail?.id
@@ -189,14 +193,16 @@ export default defineComponent({
 					id:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.id:list[i].id,
 					// maskMinioUrl:'',
 					// maskUrl:'',
+					maskUrl:list[i].maskUrl?list[i].maskUrl:null,
 					offset,
+					partialDesign:list[i].partialDesign,
 					path:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.minIOPath:list[i].minIOPath,
-					printObject:list[i].printObject,
+					printObject:list[i].printObject?list[i].printObject:{prints:[]},
 					priority,
 					scale,
 					type:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.level2Type:list[i].type,
 					sketchString:'',
-					trims:list[i].trims,
+					trims:list[i].trims?list[i].trims:{prints:null},
 				}
 				if((list[i].color?.gradient || list[i].newDetail?.color?.gradient)){
 					gradient = list[i].newDetail?.color?.gradient || list[i].color.gradient
@@ -209,6 +215,7 @@ export default defineComponent({
 		}
 		const getSubmitData = async (str:string)=>{
 			let workspace = store.state.Workspace.workspace
+			if(!detailData.selectDetail.path && !detailData.selectDetail.newDetail?.sketch?.minIOPath)return
 			let clothes:any = await setClothes([detailData.selectDetail])
 			let data = {
 				designItemId:detailData.designDetail.designItemId,
@@ -269,13 +276,13 @@ export default defineComponent({
 			store.dispatch('DesignDetailCopy/setSubmit',data)
 		}
 		const detailEdit = (str:any)=>{
-			console.log(str);
 			if(str == 'edit'){
 				detailData.isEditPattern.value = !detailData.isEditPattern.value 
-				console.log(detailData.isEditPattern);
-				
 			}
 		}
+		const canvasReload = ()=>{
+			detailData.childKey += 1
+		}
 		onBeforeUnmount(()=>{
 			store.commit('DesignDetailCopy/clearDesignDetail')
 		})
@@ -288,6 +295,7 @@ export default defineComponent({
 			previwe,
 			submit,
 			detailEdit,
+			canvasReload,
         }
     },
 	provide() {
@@ -348,9 +356,9 @@ export default defineComponent({
 		transform: translate(-50%,-50%);
 		z-index: 2;
 		:deep(.ant-modal-wrap){
-			position: absolute;
-			top: 0;
-			left: 0;
+			// position: absolute;
+			// top: 0;
+			// left: 0;
 		}
 		.content{
 			display: flex;
diff --git a/src/component/DetailCopy/detailLeft/colorBox/index.vue b/src/component/DetailCopy/detailLeft/colorBox/index.vue
index 3a734eb2..1f3e128b 100644
--- a/src/component/DetailCopy/detailLeft/colorBox/index.vue
+++ b/src/component/DetailCopy/detailLeft/colorBox/index.vue
@@ -87,11 +87,13 @@ export default defineComponent({
 			}
 		})
 		watch(()=>colorData.selectDetail.id,(newVal,oldVal)=>{
+			if(!newVal)return
 			if(!colorData.colorList?.list?.[newVal]){
 				colorData.colorList.list[newVal] = []
 			}else{
 				return
 			}
+			
 			let isNoSelect = false
 			let isOneChecked = false
 			for (let index = 0; index < 9; index++) {
@@ -100,9 +102,9 @@ export default defineComponent({
 				item = colorData.allBoardData.colorBoards[index]
 				if(
 					colorData.allBoardData.colorBoards?.[index] &&
-					colorData.selectDetail.color.rgba.r == colorData.allBoardData.colorBoards?.[index]?.rgba?.[0] &&
-					colorData.selectDetail.color.rgba.g == colorData.allBoardData.colorBoards?.[index]?.rgba?.[1] &&
-					colorData.selectDetail.color.rgba.b == colorData.allBoardData.colorBoards?.[index]?.rgba?.[2] &&
+					colorData.selectDetail.color.rgba?.r == colorData.allBoardData.colorBoards?.[index]?.rgba?.[0] &&
+					colorData.selectDetail.color.rgba?.g == colorData.allBoardData.colorBoards?.[index]?.rgba?.[1] &&
+					colorData.selectDetail.color.rgba?.b == colorData.allBoardData.colorBoards?.[index]?.rgba?.[2] &&
 					JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(colorData.allBoardData.colorBoards?.[index]?.gradient)
 				){
 					if(!isOneChecked){
@@ -136,15 +138,15 @@ export default defineComponent({
 						item = {}
 					}
 				}
+				console.log(12312);
+				
 				colorData.colorList.list[newVal].push(item)
 			}
-			
 		},{immediate: true})
 		const selectImgItem = ()=>{
 
 		}
 		const getColorName = (color:any)=>{
-			
 			let rgb:any = [color.r, color.g, color.b];
 			let hsv = rgbToHsv(rgb);
 			let data = [{
@@ -163,8 +165,6 @@ export default defineComponent({
 						resolve({name:'--',tcx:'--'})
 					});
 			})
-			
-			
 		}
 		const selectUplpadColor = (item:any)=>{
 			colorData.selectColor = JSON.parse(JSON.stringify(item))
diff --git a/src/component/DetailCopy/detailLeft/index.vue b/src/component/DetailCopy/detailLeft/index.vue
index b437270b..58ed68b4 100644
--- a/src/component/DetailCopy/detailLeft/index.vue
+++ b/src/component/DetailCopy/detailLeft/index.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="detailLeft">
-		<sketch v-show="currentDetailType == 'sketch'"></sketch>
+		<sketch v-show="currentDetailType == 'sketch'" @addDetail="addDetail"></sketch>
 		<print v-show="currentDetailType == 'print'"></print>
 		<color v-show="currentDetailType == 'color'"></color>
+		<addDetails ref="addDetails" @setSloganData="setSloganData"></addDetails>
     </div>
-    
 </template>
 <script lang="ts">
 import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
@@ -16,10 +16,11 @@ import { useI18n } from 'vue-i18n'
 import sketch from './sketch.vue'
 import print from './print.vue'
 import color from './colorBox/index.vue'
+import addDetails from '@/component/Detail/addDetails.vue'
 
 export default defineComponent({
     components:{
-		sketch,print,color
+		sketch,print,color,addDetails
     },
     setup(props,{emit}) {
         const store = useStore();
@@ -34,15 +35,22 @@ export default defineComponent({
 			currentPage:1,
 		})
 		const getDetailListDom = reactive({
-			libraryList:null as any,
+			addDetails:null as any,
 		})
-		
+		const addDetail = () =>{
+			let addDetails:any = getDetailListDom.addDetails
+			addDetails.init(detailData.selectDetail,'')
+		}
+		const setSloganData = (data:any)=>{
+			detailData.selectDetail.sketchString = data
+		}
 		
         return{
 			...toRefs(detailData),
 			...toRefs(getDetailListData),
 			...toRefs(getDetailListDom),
-			
+			addDetail,
+			setSloganData,
         }
     },
 
diff --git a/src/component/DetailCopy/detailLeft/module/currentList.vue b/src/component/DetailCopy/detailLeft/module/currentList.vue
index 7b71c648..0555c65d 100644
--- a/src/component/DetailCopy/detailLeft/module/currentList.vue
+++ b/src/component/DetailCopy/detailLeft/module/currentList.vue
@@ -31,6 +31,7 @@ export default defineComponent({
 			required:true
 		}
 	},
+	emits:['selectImgItem'],
     setup(props,{emit}) {
 		const {t} = useI18n();
         const store = useStore();
@@ -50,11 +51,11 @@ export default defineComponent({
 		})
 		const selectImgItem = (file:any)=>{
 			if(!file.resData.minIOPath)file.resData.minIOPath = getMinioUrl(file.resData.url)
-			store.commit('DesignDetailCopy/setNewDetail',file.resData)
+			// store.commit('DesignDetailCopy/setNewDetail',file.resData)
+			emit('selectImgItem',file)
 		}
 	
 		onMounted(()=>{
-			console.log(detailData.allBoardData);
 			detailData.currentList = {
 				sketch:detailData.allBoardData.sketchboardFiles,
 				print:detailData.allBoardData.printboardFiles,
diff --git a/src/component/DetailCopy/detailLeft/module/libraryList.vue b/src/component/DetailCopy/detailLeft/module/libraryList.vue
index 4ad13109..6a9e374e 100644
--- a/src/component/DetailCopy/detailLeft/module/libraryList.vue
+++ b/src/component/DetailCopy/detailLeft/module/libraryList.vue
@@ -51,8 +51,14 @@ export default defineComponent({
 		    type:Object,
 			default:()=>[] as any,
 			required:true
-		}
+		},
+		type:{
+		    type:String,
+			default:'' as any,
+			required:true
+		},
 	},
+	emits:['selectImgItem'],
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
@@ -84,7 +90,8 @@ export default defineComponent({
 		}
 		const selectImgItem = (file:any)=>{
 			let randomNum = Math.floor(100 + Math.random() * 900);
-			let type = store.state.DesignDetailCopy.currentDetailType
+			let type = props.type
+			// let type = store.state.DesignDetailCopy.currentDetailType
 			let id = file.id
 			if(type == 'sketch'){
 				id = Number(file.id + (randomNum + ''))
@@ -95,13 +102,15 @@ export default defineComponent({
 			}
 			let data = JSON.parse(JSON.stringify(file))
 			data.id = id
-			store.commit('DesignDetailCopy/setNewDetail',data)
+			emit('selectImgItem',data)
+			// store.commit('DesignDetailCopy/setNewDetail',data)
 		}
 		const getLibraryList = ()=>{
             detailData.isShowLoading = true
 			let level2Type = ''
 			let workspace = store.state.Workspace.workspace
-			let type = store.state.DesignDetailCopy.currentDetailType
+			let type = props.type
+			// let type = store.state.DesignDetailCopy.currentDetailType
 			let leve1Type
 			if(type == 'sketch'){
 				leve1Type = 'Sketchboard'
@@ -246,6 +255,7 @@ export default defineComponent({
 			> .material_content_list_loding{
 				width: 100%;
 				height: calc((34rem - 2rem) / 2);
+				overflow: hidden;
 			}
 		}
 	}
diff --git a/src/component/DetailCopy/detailLeft/module/selectList.vue b/src/component/DetailCopy/detailLeft/module/selectList.vue
new file mode 100644
index 00000000..7d221310
--- /dev/null
+++ b/src/component/DetailCopy/detailLeft/module/selectList.vue
@@ -0,0 +1,158 @@
+<template>
+    <div class="selectList">
+		<div class="switch_type_list">
+			<div
+				v-if="type != 'element'"
+				@click.stop="openCurrent()"
+				class="switch_type_item"
+				:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
+			>
+				<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
+			</div>
+			<div
+				@click.stop="openUpload()"
+				class="switch_type_item"
+				:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
+			>
+				<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
+			</div>
+			<div
+				@click.stop="openLibrary()"
+				class="switch_type_item"
+				:class="[selectTitle == 'library' ? 'select_swtich' : '']"
+			>
+				<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
+			</div>
+		</div>
+		<div class="print_content_list">
+			<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element'">
+				<currentList ref="currentList" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
+			</div>
+			<div class="content_item" v-show="selectTitle == 'upload'">
+				<uploadList @selectImgItem="selectImgItem" :catecoryList="catecoryList"></uploadList>
+			</div>
+			<div class="content_item" v-show="selectTitle == 'library'">
+				<libraryList @selectImgItem="selectImgItem" :type="type" ref="libraryList" :catecoryList="catecoryList"></libraryList>
+			</div>
+		</div>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import libraryList from './libraryList.vue'
+import uploadList from './uploadList.vue'
+import currentList from './currentList.vue'
+export default defineComponent({
+    components:{
+		currentList,
+		libraryList,
+		uploadList,
+    },
+	props:{
+		catecoryList:{
+			type:Array,
+			default:()=>[]
+		},
+		type:{
+		    type:String,
+			default:'' as any,
+			required:true
+		},
+	},
+	emits:['selectImgItem'],
+    setup(props,{emit}) {
+        const store = useStore();
+		const detailData = reactive({
+			selectTitle: props.type == 'element'?'upload':'current',
+			printList:[]
+		})
+		const getDetailListDom = reactive({
+			libraryList:null as any,
+		})
+		const openCurrent = ()=>{
+			detailData.selectTitle = 'current'
+		}
+		const openUpload = ()=>{
+			detailData.selectTitle = 'upload'
+		}
+		const openLibrary = ()=>{
+			detailData.selectTitle = 'library'
+			getDetailListDom.libraryList.init()
+		}
+		const selectImgItem = (data:any)=>{
+			emit('selectImgItem',data)
+		}
+		
+        return{
+			...toRefs(detailData),
+			...toRefs(getDetailListDom),
+
+			openCurrent,
+			openUpload,
+			openLibrary,
+			selectImgItem,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .selectList{
+		// width: 34rem;
+		flex: 1;
+		overflow: hidden;
+		width: 100%;
+		height: auto;
+		display: flex;
+		flex-direction: column;
+		> .switch_type_list{
+			display: flex;
+			margin-bottom: 2.5rem;
+			> .switch_type_item:last-child{
+				margin-right: 0;
+			}
+			> .switch_type_item{
+				position: relative;
+				cursor: pointer;
+				margin-right: 6.5rem;
+			}
+			> .switch_type_item::before {
+                    position: absolute;
+                    content: "";
+                    display: block;
+                    background: #000;
+                    height: calc(.4rem*1.2);
+                    left: 50%;
+                    transform: translateX(-50%);
+                    bottom: -.5rem;
+                    width: 0px;
+                    transition: 0.3s all;
+                }
+			> .select_swtich {
+				color: #000;
+				font-weight: 600;
+			}
+			> .select_swtich::before {
+				width: 100%;
+			}
+		}
+		> .print_content_list{
+			flex: 1;
+			overflow: hidden;
+			> .content_item{
+				height: 100%;
+				margin-top: 1rem;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/component/DetailCopy/detailLeft/module/uploadList.vue b/src/component/DetailCopy/detailLeft/module/uploadList.vue
index a97d11e1..cb37f877 100644
--- a/src/component/DetailCopy/detailLeft/module/uploadList.vue
+++ b/src/component/DetailCopy/detailLeft/module/uploadList.vue
@@ -60,6 +60,7 @@ export default defineComponent({
 			required:true
 		}
 	},
+	emits:['selectImgItem'],
     setup(props,{emit}) {
 		const {t} = useI18n();
         const store = useStore();
@@ -82,7 +83,8 @@ export default defineComponent({
 		})
 		const selectImgItem = (file:any)=>{
 			// let data = JSON.parse(JSON.stringify(file))
-			store.commit('DesignDetailCopy/setNewDetail',file)
+			// store.commit('DesignDetailCopy/setNewDetail',file)
+			emit('selectImgItem',file)
 		}
 		const upFileUploadChange = (data:any)=>{
             let file = data.file;
diff --git a/src/component/DetailCopy/detailLeft/print.vue b/src/component/DetailCopy/detailLeft/print.vue
index db74b1e1..ef23b44e 100644
--- a/src/component/DetailCopy/detailLeft/print.vue
+++ b/src/component/DetailCopy/detailLeft/print.vue
@@ -9,40 +9,7 @@
 				<i class="fi fi-rr-picture centent"></i>
 			</div>
 		</div>
-		<div class="switch_type_list">
-			<div
-				@click.stop="openCurrent()"
-				class="switch_type_item"
-				:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
-			</div>
-			<div
-				@click.stop="openUpload()"
-				class="switch_type_item"
-				:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
-			</div>
-			<div
-				@click.stop="openLibrary()"
-				class="switch_type_item"
-				:class="[selectTitle == 'library' ? 'select_swtich' : '']"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
-			</div>
-		</div>
-		<div class="print_content_list">
-			<div class="content_item" v-show="selectTitle == 'current'">
-				<currentList ref="currentList" :catecoryList="sketchCatecoryList"></currentList>
-			</div>
-			<div class="content_item" v-show="selectTitle == 'upload'">
-				<uploadList :catecoryList="sketchCatecoryList"></uploadList>
-			</div>
-			<div class="content_item" v-show="selectTitle == 'library'">
-				<libraryList ref="libraryList" :catecoryList="sketchCatecoryList"></libraryList>
-			</div>
-		</div>
+		<selectList @selectImgItem="selectImgItem" :type="currentDetailType" :catecoryList="printCatecoryList"></selectList>
     </div>
     
 </template>
@@ -54,26 +21,24 @@ import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 // import sketchCategory from "@/component/HomePage/sketchCategory.vue";
-import libraryList from './module/libraryList.vue'
-import uploadList from './module/uploadList.vue'
-import currentList from './module/currentList.vue'
+import selectList from './module/selectList.vue'
 export default defineComponent({
     components:{
-		currentList,
-		libraryList,
-		uploadList,
+		selectList,
     },
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
 			selectTitle:'current',
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
-			sketchCatecoryList:computed(()=>{
+			printCatecoryList:computed(()=>{
 				return store.state.UserHabit.printType
 			}),
-			printList:[]
+			printList:[],
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType)
 		})
-		watch(()=>detailData.selectDetail?.printObject?.prints,(newVal,oldVal)=>{
+		watch(()=>detailData?.selectDetail?.printObject?.prints,(newVal,oldVal)=>{
+			if(!newVal)return
 			detailData.printList = newVal.reduce((acc:any, curr:any) => {
 				if (!acc.some((item:any) => item.id === curr.id)) {
 					acc.push(curr);
@@ -100,8 +65,8 @@ export default defineComponent({
 			detailData.selectTitle = 'library'
 			getDetailListDom.libraryList.init()
 		}
-		const selectImgItem = ()=>{
-
+		const selectImgItem = (data:any)=>{
+			store.commit('DesignDetailCopy/setNewDetail',data)
 		}
 		
         return{
@@ -171,45 +136,5 @@ export default defineComponent({
 				}
 			}
 		}
-		> .switch_type_list{
-			display: flex;
-			margin-bottom: 2.5rem;
-			> .switch_type_item:last-child{
-				margin-right: 0;
-			}
-			> .switch_type_item{
-				position: relative;
-				cursor: pointer;
-				margin-right: 6.5rem;
-			}
-			> .switch_type_item::before {
-                    position: absolute;
-                    content: "";
-                    display: block;
-                    background: #000;
-                    height: calc(.4rem*1.2);
-                    left: 50%;
-                    transform: translateX(-50%);
-                    bottom: -.5rem;
-                    width: 0px;
-                    transition: 0.3s all;
-                }
-			> .select_swtich {
-				color: #000;
-				font-weight: 600;
-				transform: scale(1.15);
-			}
-			> .select_swtich::before {
-				width: 100%;
-			}
-		}
-		> .print_content_list{
-			flex: 1;
-			overflow: hidden;
-			> .content_item{
-				height: 100%;
-				margin-top: 1rem;
-			}
-		}
 	}
 </style>
\ No newline at end of file
diff --git a/src/component/DetailCopy/detailLeft/sketch.vue b/src/component/DetailCopy/detailLeft/sketch.vue
index 5593a87e..67e4f64d 100644
--- a/src/component/DetailCopy/detailLeft/sketch.vue
+++ b/src/component/DetailCopy/detailLeft/sketch.vue
@@ -1,45 +1,18 @@
 <template>
     <div class="sketch">
 		<div class="detailText">Current Print</div>
-		<div class="select_sketch">
-			<img :src="selectDetail.path" alt="">
+		<div class="select_sketch" v-if="selectDetail.id">
+			<!-- <img :src="selectDetail?.sketchString?selectDetail?.sketchString:selectDetail.path" alt=""> -->
+			<img :src="selectDetail.sketchString || selectDetail.path" alt="">
+			<i :title="$t('DesignDetail.editSketchTitle')" class="fi fi-rs-pencil-paintbrush" @click.stop="openAddDetail"></i>
 		</div>
-		<div class="switch_type_list">
-			<div
-				@click.stop="openCurrent()"
-				class="switch_type_item"
-				:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
-			</div>
-			<div
-				@click.stop="openUpload()"
-				class="switch_type_item"
-				:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
-			</div>
-			<div
-				@click.stop="openLibrary()"
-				class="switch_type_item"
-				:class="[selectTitle == 'library' ? 'select_swtich' : '']"
-			>
-				<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
-			</div>
-		</div>
-		<div class="sketch_content_list">
-			<div class="content_item" v-show="selectTitle == 'current'">
-				<currentList ref="currentList" :catecoryList="sketchCatecoryList"></currentList>
-			</div>
-			<div class="content_item" v-show="selectTitle == 'upload'">
-				<uploadList :catecoryList="sketchCatecoryList"></uploadList>
-			</div>
-			<div class="content_item" v-show="selectTitle == 'library'">
-				<libraryList ref="libraryList" :catecoryList="sketchCatecoryList"></libraryList>
+		<div class="select_sketch" v-else>
+			<div>
+				<i class="fi fi-rr-picture centent"></i>
 			</div>
 		</div>
+		<selectList @selectImgItem="selectImgItem" :type="currentDetailType" :catecoryList="sketchCatecoryList"></selectList>
     </div>
-    
 </template>
 <script lang="ts">
 import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
@@ -49,15 +22,13 @@ import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 // import sketchCategory from "@/component/HomePage/sketchCategory.vue";
-import libraryList from './module/libraryList.vue'
-import uploadList from './module/uploadList.vue'
-import currentList from './module/currentList.vue'
+import selectList from './module/selectList.vue'
+
 export default defineComponent({
     components:{
-		currentList,
-		libraryList,
-		uploadList,
+		selectList,
     },
+	emit:['addDetail'],
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
@@ -65,7 +36,8 @@ export default defineComponent({
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			sketchCatecoryList:computed(()=>{
 				return store.state.Workspace.workspacePosition
-			})
+			}),
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType)
 		})
 		const getDetailListData = reactive({
 			total:0,
@@ -85,10 +57,12 @@ export default defineComponent({
 			detailData.selectTitle = 'library'
 			getDetailListDom.libraryList.init()
 		}
-		const selectImgItem = ()=>{
-
+		const selectImgItem = (data:any)=>{
+			store.commit('DesignDetailCopy/setNewDetail',data)
+		}
+		const openAddDetail = ()=>{
+			emit('addDetail')
 		}
-		
         return{
 			...toRefs(detailData),
 			...toRefs(getDetailListData),
@@ -98,6 +72,7 @@ export default defineComponent({
 			openUpload,
 			openLibrary,
 			selectImgItem,
+			openAddDetail,
         }
     },
 
@@ -126,6 +101,7 @@ export default defineComponent({
 			border-radius: .5rem;
 			// border: 1px dashed #202020;
 			border: 1px dashed transparent;
+			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;
 			> img{
@@ -133,6 +109,24 @@ export default defineComponent({
 				height: 100%;
 				object-fit: contain;
 			}
+			> i{
+				position: absolute;
+				left: auto;
+				right: 1rem;
+				top: 2rem;
+				font-size: 2rem;
+				cursor: pointer;
+			}
+			> div{
+				height: 100%;
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				> i{
+					font-size: 10rem;
+				}
+			}
 		}
 		> .switch_type_list{
 			display: flex;
@@ -160,7 +154,6 @@ export default defineComponent({
 			> .select_swtich {
 				color: #000;
 				font-weight: 600;
-				transform: scale(1.15);
 			}
 			> .select_swtich::before {
 				width: 100%;
diff --git a/src/component/DetailCopy/detailRight/editPrintElement.vue b/src/component/DetailCopy/detailRight/editPrintElement.vue
new file mode 100644
index 00000000..ea42bdce
--- /dev/null
+++ b/src/component/DetailCopy/detailRight/editPrintElement.vue
@@ -0,0 +1,125 @@
+<template>
+    <div class="editPrintElement">
+		<div class="printOverallBtn">
+			<div class="overallSlogin">
+				<div
+					class="habit_Overal_Single_text"
+					:class="{ active: !overallSingle }"
+				>
+					{{ $t('DesignPrintOperation.Overall') }}
+				</div>
+				<a-switch v-model:checked="overallSingle" @change="setOveralSingle"/>
+				<div
+					class="habit_Overal_Single_text"
+					:class="{ active: overallSingle }"
+				>
+					{{ $t('DesignPrintOperation.Single') }}
+				</div>
+			</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>
+		<div></div>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { useStore } from "vuex";
+export default defineComponent({
+    components:{
+    },
+	props: {
+		type: {
+		    type: String,
+			default: 'print',
+		}
+	},
+    setup(props,{emit}) {
+        const store = useStore();
+		const editPrintElementDom = reactive({
+
+		})
+		const editPrintElementData = reactive({
+			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
+			overallSingle:false,
+			systemDesignerPercentage:0,
+		})
+		const setOveralSingle = ()=>{}
+		const formatter = (value:any)=>{
+			return `${value}%`;
+		}
+        return{
+			...toRefs(editPrintElementDom),
+			...toRefs(editPrintElementData),
+			setOveralSingle,
+			formatter,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .editPrintElement{
+		height: 100%;
+		width: 100%;
+		display: flex;
+		flex: 1;
+		overflow: hidden;
+		flex-direction: column;
+		> .printOverallBtn{
+			display: flex;
+			> .overallSlogin{
+				display: flex;
+			}
+			.habit_Overal_Single_text {
+					font-weight: 600;
+					color: rgba(0, 0, 0, 0.5);
+					&.active {
+						color: rgba(0, 0, 0, 0.7);
+						// font-weight: 900;
+						// transform: scale(1.2);
+					}
+				}
+			.habit_System_Designer {
+				transform: scale(.8);
+				width: 100%;
+				.ant-slider-track,
+				.ant-slider-rail {
+					background-color: #e1e1e1;
+					border-radius: calc(0.5rem*1.2);
+				}
+				.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: calc(1.6rem*1.2);
+					color: rgba(0, 0, 0, 0.7);
+					font-weight: 600;
+				}
+			}
+		}
+		
+	}
+</style>
\ No newline at end of file
diff --git a/src/component/DetailCopy/detailRight/index.vue b/src/component/DetailCopy/detailRight/index.vue
index 18c9b771..8b4fbf69 100644
--- a/src/component/DetailCopy/detailRight/index.vue
+++ b/src/component/DetailCopy/detailRight/index.vue
@@ -5,8 +5,9 @@
 			<img src="https://develop.aida.com.hk/img/aida_logo_centent.b8a50882.jpg" alt="">
 		</div> -->
 		<sketchType v-if="currentDetailType === 'sketch'"></sketchType>
-		<printType v-if="currentDetailType === 'print'"></printType>
-		<elementType v-if="currentDetailType === 'element'"></elementType>
+		<!-- <printType v-if="currentDetailType === 'print'"></printType> -->
+		<!-- <elementType v-if="currentDetailType === 'element'"></elementType> -->
+		<editPrintElement v-if="currentDetailType === 'print' || currentDetailType === 'element'" :type="currentDetailType"></editPrintElement>
     </div>
     
 </template>
@@ -16,10 +17,11 @@ import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, react
 import { useStore } from "vuex";
 import sketchType from './sketchType.vue'
 import printType from './printType.vue'
+import editPrintElement from './editPrintElement.vue'
 import elementType from './elementType.vue'
 export default defineComponent({
     components:{
-		sketchType,printType,elementType
+		sketchType,printType,elementType,editPrintElement
     },
     setup(props,{emit}) {
         const store = useStore();
@@ -89,7 +91,6 @@ export default defineComponent({
 			> .select_swtich {
 				color: #000;
 				font-weight: 600;
-				transform: scale(1.15);
 			}
 			> .select_swtich::before {
 				width: 100%;
diff --git a/src/component/DetailCopy/model/index.vue b/src/component/DetailCopy/model/index.vue
index 3fbbebd9..b2296044 100644
--- a/src/component/DetailCopy/model/index.vue
+++ b/src/component/DetailCopy/model/index.vue
@@ -1,14 +1,17 @@
 <template>
     <div class="modelindex">
 		<div class="modelindex_left">
-			<modelNav></modelNav>
+			<modelNav @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')"></modelNav>
 		</div>
 		<div class="modelindex_right">
 			<div class="detail_btn">
 				<!-- 全屏 --> 
-				<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail('2')"></i>
+				<!-- <i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail('2')"></i> -->
+
+
 				<!-- 编辑 -->
-				<i class="fi fi-rr-edit" :class="{active:isEditPattern.value}" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail('edit')"></i>
+				<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value}" @click="showDesignImgDetail('edit')"></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> -->
 
@@ -17,7 +20,7 @@
 				<!-- <i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
 				<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i> -->
 			</div>
-			<position ref="position"></position>
+			<position ref="position" :imgDesignImg=imgDesignImg></position>
 		</div>
 		
     </div>
@@ -35,7 +38,7 @@ export default defineComponent({
     components:{
 		position,modelNav
     },
-	emits:['detailEdit'],
+	emits:['detailEdit','canvasReload','addSketch'],
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
@@ -46,7 +49,8 @@ export default defineComponent({
 			pageSize:10,
 			currentPage:1,
 			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
-			isEditPattern:inject('isEditPattern') as any
+			isEditPattern:inject('isEditPattern') as any,
+			imgDesignImg:false,
 		})
 		const getDetailListDom = reactive({
 			libraryList:null as any,
@@ -58,8 +62,10 @@ export default defineComponent({
 		const showDesignImgDetail = (str:any)=>{
 			emit('detailEdit',str)
 		}
-		const deleteNav = ()=>{
-
+	
+		//图片按下样子
+		const mousedownDesignImg = ()=>{
+			getDetailListData.imgDesignImg = !getDetailListData.imgDesignImg
 		}
         return{
 			...toRefs(detailData),
@@ -67,7 +73,7 @@ export default defineComponent({
 			...toRefs(getDetailListDom),
 			getSubmitData,
 			showDesignImgDetail,
-			deleteNav,
+			mousedownDesignImg,
         }
     },
 
diff --git a/src/component/DetailCopy/model/modelNav.vue b/src/component/DetailCopy/model/modelNav.vue
index 52bc60d3..49c1961f 100644
--- a/src/component/DetailCopy/model/modelNav.vue
+++ b/src/component/DetailCopy/model/modelNav.vue
@@ -1,9 +1,10 @@
 <template>
     <div class="modelNav">
-		<div class="modelNav_item" v-for="item,index in designvDetail.clothes" :class="{active:(selectDetail && item.id == selectDetail.id)}" @click="selectDetailItem(item,index)">
+		<div class="modelNav_item" v-for="item,index in designDetail.clothes" :class="{active:(selectDetail && item.id == selectDetail.id)}" @click="selectDetailItem(item,index)">
+			<i v-if="item?.id != selectDetail?.id" class="fi fi-rr-trash" @click.stop="deleteDetailItem(item?.id)"></i>
 			<img :src="item.path" alt="">
 		</div>
-		<div class="modelNav_item add" @click="">
+		<div v-if="currentDetailType == 'sketch' || currentDetailType == ''" :class="{active:!selectDetail?.id && currentDetailType == 'sketch'}" class="modelNav_item add" @click="addSketch">
 			+
 		</div>
     </div>
@@ -21,13 +22,15 @@ export default defineComponent({
     components:{
 		position,
     },
+	emits:['canvasReload','addSketch'],
     setup(props,{emit}) {
         const store = useStore();
 		const {t} = useI18n()
 		const detailData = reactive({
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			frontBack_:computed(()=>store.state.DesignDetailCopy.frontBack),
-			designvDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
 			frontBack:{} as any,
 			isEditPattern:inject('isEditPattern') as any
 		})
@@ -46,6 +49,7 @@ export default defineComponent({
 						centered:true,
 						onOk() {
 							resolve(true)
+							emit('canvasReload')
 						},
 						onCancel(){
 							resolve(false)
@@ -58,12 +62,24 @@ export default defineComponent({
 				if(rv)store.commit('DesignDetailCopy/setDesignColthes',item.id)
 			})
 		}
+		const deleteDetailItem = (id:number)=>{
+			detailData.designDetail.clothes = detailData.designDetail.clothes.filter((item:any)=>item.id != id)
+			detailData.frontBack_.back = detailData.frontBack_.back.filter((item:any)=>item.id != id)
+			detailData.frontBack_.front = detailData.frontBack_.front.filter((item:any)=>item.id != id)
+		}
+		const addSketch = ()=>{
+			if(detailData.currentDetailType != 'sketch')store.commit('DesignDetailCopy/setCurrentDetailType','sketch')
+			store.commit('DesignDetailCopy/addDesignColthes')
+			emit('addSketch')
+		}
 		// onBeforeUnmount(()=>{
 		// 	detailData.selectIndex = -1
 		// })
         return{
 			...toRefs(detailData),
 			selectDetailItem,
+			deleteDetailItem,
+			addSketch,
         }
     },
 
@@ -84,6 +100,20 @@ export default defineComponent({
 			border: 2px solid #B4B4B4;
 			margin-bottom: 1.5rem;
 			cursor: pointer;
+			position: relative;
+			&:hover{
+				> i{
+					display: block;
+				}
+			}
+			> i{
+				display: none;
+				position: absolute;
+				right: 1rem;
+				top: 1rem;
+				cursor: pointer;
+				font-size: 2rem;
+			}
 			&:last-child{
 			    margin-bottom: 0;
 			}
diff --git a/src/component/DetailCopy/model/modelPosition.vue b/src/component/DetailCopy/model/modelPosition.vue
index 232ee2d6..181aa1a9 100644
--- a/src/component/DetailCopy/model/modelPosition.vue
+++ b/src/component/DetailCopy/model/modelPosition.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="molepositon">
+    <div class="molepositon" :class="{active:!imgDesignImg}">
 		<div class="designOpenrtion_imgMask" v-if="frontBack?.body" :style="frontBack?.body?.style">
 			<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
 				<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
@@ -21,6 +21,13 @@
 			<img src="" alt="">
 		</div>
     </div>
+	<div class="molepositon" :class="{active:imgDesignImg}">
+		<div class="designOpenrtion_imgMask">
+			<div class="detail_modal_item_front">
+				<img :src="designDetail.designItemUrl" alt="">
+			</div>
+		</div>
+	</div>
 </template>
 <script lang="ts">
 import { defineComponent,computed,inject,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
@@ -34,6 +41,12 @@ import newFollowVue from '@/component/Account/message/newFollow.vue';
 export default defineComponent({
     components:{
     },
+	props:{
+	    imgDesignImg:{
+            default:false,
+			type:Boolean,
+		}
+	},
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
@@ -211,23 +224,27 @@ export default defineComponent({
 				item.priority = num++
 			})
 			let data:any = {
-				scale:[],
-				offset:[],
-				priority:-1,
+				scale:null,
+				offset:null,
+				priority:'',
 				maskUrl:'',
 				maskMinioUrl:'',
 			}
+			let state = false
 			for (let index = 0; index < arr.length; index++) {
 				if(value.id == arr[index].id){
+					state = true
 					let y = ((arr[index]?.style?.top.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[0])
 					let x = ((arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[1])
 					let scaleWidth = arr[index]?.imageSize?Number(((arr[index]?.style?.width.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[0]/arr[index].scale[0])).toFixed(2)):1
 					let scaleHeight = arr[index]?.imageSize?Number(((arr[index]?.style?.height.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[1]/arr[index].scale[1])).toFixed(2)):1
+					
 					// let widthScale = (arr[index].style.width.replace(/px/g,'')/arr[index].style.height.replace(/px/g,'')).toFixed(2)
 					data.scale = [scaleWidth,scaleHeight]
 					let top = y == 0 ? value.layersObject[0].offset[1]:y+value.layersObject[0].offset[1]
 					let left = x == 0 ? value.layersObject[0].offset[0]:x+value.layersObject[0].offset[0]
-					data.offset = [left,top]
+					data.offset = [left?left:0,top?top:0]
+					// data.offset = [left?left:0,top?top:0]
 					data.maskUrl = arr[index].maskUrl
 					data.maskMinioUrl = arr[index].maskMinioUrl
 					// data.priority = arr[index].style.zIndex
@@ -237,7 +254,11 @@ export default defineComponent({
 					break
 				}
 			}
-			
+			if(!state){
+				data.scale = [1,1]
+				data.offset = [0,0]
+				data.priority = 10+arr.length
+			}
 			return data
 		}
 		const deleteNav = ()=>{
@@ -304,6 +325,12 @@ export default defineComponent({
 		flex-direction: column;
 		// margin: auto 0;
 		padding-top: 3rem;
+		position: relative;
+		display: none;
+		&.active{
+			display: block;
+			z-index: 2;
+		}
 		> .designOpenrtion_imgMask{
 			width: auto;
 			height: auto;
@@ -341,7 +368,7 @@ export default defineComponent({
 				z-index: 1 !important;
 			}
 			> .designOpenrtion_btn{
-				z-index: 9999;
+				z-index: 99;
 				ul{
 					list-style: none;
 					// width: 100%;
diff --git a/src/store/Detail/designDetailCopy.ts b/src/store/Detail/designDetailCopy.ts
index 982b5b3e..30c9fdf0 100644
--- a/src/store/Detail/designDetailCopy.ts
+++ b/src/store/Detail/designDetailCopy.ts
@@ -34,6 +34,8 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
 			let back:any = []
 			// let printZIndex = 
 			data.clothes.forEach((v:any,index:any)=>{
+				// if(!v?.partialDesignDTO){
+				// }
 				for (let i = v.layersObject.length-1; i >= 0; i--) {
 					v.layersObject[i].style = {
 						top:v.layersObject[i].position?.[0],
@@ -67,6 +69,17 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
 			state.frontBack.back = back
             state.designDetail = data
         },
+		updataDetailItem(state,data){
+			state.designDetail.clothes.forEach((item:any) => {
+				if(item.id == state.selectDetail.id){
+					console.log(data);
+					
+					for (const key in data) {
+						item[key] = data[key]
+					}
+				}
+			});
+		},
 		clearDesignDetail(state){
 			state.designDetail = null
 			state.designPreviewData = {}
@@ -103,20 +116,21 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
 			}
 		},
 		setCurrentDetailType(state,data){
-			if(state.selectDetail && state.selectDetail.id)state.currentDetailType = data
+			if(state.selectDetail && state.selectDetail.id){
+				state.currentDetailType = data
+			}else if(state.selectDetail && data == 'sketch'){
+				state.currentDetailType = data
+			}
 		},
         setDesignColthes(state,data){
 			if(!state.currentDetailType)state.currentDetailType = 'sketch'
-			if(state.selectDetail && state.selectDetail.id == data){
-				return
-			}
 			//切换选择
 			// state.currentDetailType = ''
             // state.designDetail.clothes[data.index] = data.clothes
 			state.designDetail.clothes.forEach((item:any) => {
 				if(item.id == data){
 					state.selectDetail = item
-					state.frontBack.front.forEach((v:any)=>{
+					state.frontBack.front.forEach((v:any,index:any)=>{
 						v.designOpenrtionBtn = false
 						if(v.id == data){
 							v.designOpenrtionBtn = true
@@ -125,10 +139,91 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
 				}
 			});
         },
-		setPraeview(state,data){//preview
-			data.clothes.forEach((item:any) => {
-				if(!item.id)return
-				let id_ = state.selectDetail.id
+		addDesignColthes(state){
+			let data = {
+				changed:null,
+				color:{rgba:{
+					r:255,
+					g:255,
+					b:255,
+				}},
+				designType:null,
+				gradient:null,
+				id:null,
+				partialDesign:{
+					layers:[],
+					partialDesignPath:'',
+					partialDesignMinioPath:'',
+					partialDesignBase64:''
+				},
+				layersObject:null,
+				newDetail:{},
+				level1Type:'Sketchboard',
+				minIOPath:null,
+				path:null,
+				printObject:null,
+				trims:null,
+				type:null,
+				undividedLayer:null,
+			}
+			if(!state.currentDetailType)state.currentDetailType = 'sketch'
+			state.designDetail.clothes.forEach((item:any) => {
+				state.frontBack.front.forEach((v:any,index:any)=>{
+					v.designOpenrtionBtn = false
+				})
+			});
+			state.selectDetail = data
+		},
+		async setPraeview(state,data){//preview
+			for (let j = 0; j < data.clothes.length; j++) {
+				const item = data.clothes[j];
+				if(!item.id)continue
+				if(item.id == state.selectDetail.id || state.selectDetail.newDetail?.sketch?.id == item.id){
+
+				}
+				let id_ = state.selectDetail.id || state.selectDetail.newDetail?.sketch?.id
+				let el:any = document.querySelector('.molepositon .perview_img')
+				await new Promise((resolve, reject) => {
+					const img = new Image();
+					img.src = state.frontBack.body.path;
+					img.onload = () => {
+						let scale:any = el.parentNode.offsetWidth / img.width;
+						if(state.selectDetail.newDetail?.sketch?.id && !state.selectDetail.id){
+							state.frontBack.front.push({id:state.selectDetail.newDetail?.sketch?.id})	
+							state.frontBack.back.push({id:state.selectDetail.newDetail?.sketch?.id})	
+						}
+						state.frontBack.front.forEach((v:any,index:any)=>{
+							if(v.id == id_){
+								for (let i = item.layersObject.length-1; i >= 0; i--) {
+									item.layersObject[i].style = {
+										top:item.layersObject[i].position?.[0] * scale + 'px',
+										left:item.layersObject[i].position?.[1] * scale + 'px',
+										width:item.layersObject[i].imageSize?.[0] * scale + 'px',
+										height:item.layersObject[i].imageSize?.[1] * scale + 'px',
+										zIndex:v?.style?.zIndex?v.style.zIndex:state.frontBack.front.length
+									}
+									item.layersObject[i].centers={
+										left:0,
+										top:0,
+									}
+									item.layersObject[i].designOpenrtionBtn = false
+									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
+										state.frontBack.front[index].undividedLayer = item.undividedLayer
+									}else{
+										state.frontBack.back[index] = item.layersObject[i]
+										// state.frontBack.back[index].style.zIndex = v.priority
+										state.frontBack.back[index].id = item.id
+										state.frontBack.back[index].undividedLayer = item.undividedLayer
+									}
+								}
+							}
+						})
+						resolve('')
+					};
+				})
 			    state.selectDetail.change = item.change
 				if(state.selectDetail?.newDetail?.color){
 					state.selectDetail.color = state.selectDetail?.newDetail?.color
@@ -136,9 +231,7 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
 				}
 				state.selectDetail.designType = item.designType
 				state.selectDetail.gradient = item.gradient
-				state.selectDetail.id = item.id
 				state.selectDetail.layersObject = item.layersObject
-				state.selectDetail.newDetail[state.currentDetailType] = null
 				state.selectDetail.path = item.path
 				state.selectDetail.minIOPath = item.minIOPath
 				state.selectDetail.scale = [1,1]
@@ -146,54 +239,20 @@ const DesignDetailCopy : Module<DesignDetailCopy,RootState> = {
 				state.selectDetail.printObject = item.printObject
 				state.selectDetail.type = item.type
 				state.selectDetail.undividedLayer = item.undividedLayer
-				// if(state.currentDetailType == 'sketch'){//如果是sketch更新front和back
-					let el:any = document.querySelector('.molepositon .perview_img')
-					const img = new Image();
-					img.onload = () => {
-						let scale:any = el.parentNode.offsetWidth / img.width
-						state.frontBack.front.forEach((v:any,index:any)=>{
-						if(v.id == id_){
-							for (let i = item.layersObject.length-1; i >= 0; i--) {
-								item.layersObject[i].style = {
-									top:item.layersObject[i].position?.[0] * scale + 'px',
-									left:item.layersObject[i].position?.[1] * scale + 'px',
-									width:item.layersObject[i].imageSize?.[0] * scale + 'px',
-									height:item.layersObject[i].imageSize?.[1] * scale + 'px',
-									zIndex:v.style.zIndex
-								}
-								item.layersObject[i].centers={
-									left:0,
-									top:0,
-								}
-								item.layersObject[i].designOpenrtionBtn = false
-								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
-									state.frontBack.front[index].undividedLayer = item.undividedLayer
-								}else{
-									state.frontBack.back[index] = item.layersObject[i]
-									// state.frontBack.back[index].style.zIndex = v.priority
-									state.frontBack.back[index].id = item.id
-									state.frontBack.back[index].undividedLayer = item.undividedLayer
-								}
-							}
-						}
-					})
-					};
-					img.src = state.frontBack.body.path;
-					
-				// }
-			})
-			
+				if(state.selectDetail.newDetail?.sketch?.id && !state.selectDetail.id){
+					state.designDetail.clothes.push(state.selectDetail)
+				}
+				state.selectDetail.id = item.id
+				if(state.selectDetail.newDetail?.[state.currentDetailType])state.selectDetail.newDetail[state.currentDetailType] = null
+			}
 		},
+		
 		// setDesignItemOthers(state,data){
         //     state.designDetail.others[data.index] = data.others
         // },
     },
     actions:{
 		async setSubmit({ commit },str) {
-				console.log(str);
 				
 			//   setTimeout(() => {
 			// 	const message = 'Hello from Vuex';
diff --git a/src/tool/canvasGeneralCopy.js b/src/tool/canvasGeneralCopy.js
index 73a586a0..b87c6b97 100644
--- a/src/tool/canvasGeneralCopy.js
+++ b/src/tool/canvasGeneralCopy.js
@@ -11,8 +11,8 @@ import {
 import { getMousePosition } from "@/tool/mdEvent";
 import { file } from "jszip";
 class MyCanvas {
-	canvas=null
-	constructor() {
+	constructor(id) {
+		this.id = id || Date.now();
 		this.pencilList = {
 			textFontFamilyList:[
 				{ value: 'Arial', name: 'select font' },
@@ -63,7 +63,8 @@ class MyCanvas {
 			]
 		}
 		this.canvasDomParent = null;
-		this.canvas = MyCanvas.canvas;
+		this.canvas = MyCanvas?.[this.id];
+
 		this.addPresent = {}
 		this.canvasWH={
 			width:0,
@@ -116,7 +117,9 @@ class MyCanvas {
 		this.dashed = {
 			state:false,//用来判断鼠标是否移入dashed 如果移入就变为可拖拽
 			isDrawingMode:false,//用来获取移入前是否是绘画模式
+			isDetail:false,//判断裁剪或者局部添加内容，为true是添加内容
 		}
+		this.currentOperation = true //表示是否可以使用快捷键
 		this.fontFamily = this.pencilList.textFontFamilyList[0].value
 		this.createText=null
 		this.pencilBtn = null;
@@ -157,15 +160,13 @@ class MyCanvas {
 		}//给切换颜色设置防抖
 		
 	}
-	async canvasInit (dom, val){//初始化
-		this.canvasClear()
+	async canvasInit (dom, val,img,editGroupImg){//初始化
+		// this.canvasClear()
 		this.canvasWH = val
-		
 		this.canvasDomParent = dom;
 		var canvasDom = document.createElement("canvas");
 		this.canvasDomParent.appendChild(canvasDom);
-
-		MyCanvas.canvas = new fabric.Canvas(canvasDom, {
+		MyCanvas[this.id] = await new fabric.Canvas(canvasDom, {
 			backgroundColor: "rgba(230, 230, 230)",
 			width: this.canvasWH.width,
 			height: this.canvasWH.height,
@@ -175,9 +176,32 @@ class MyCanvas {
 			includeDefaultValues: false,//尚未测试 精简导出JSON
 			// freeDrawingCursor: 'none',
 			preserveObjectStacking:true,
+			hoverCursor: 'pointer',
 		});
-		// MyCanvas.canvas.freeDrawingCursor= 'none'
+	
+		
 
+		// await new Promise((resolve, reject) => {
+		// 	canvas.clone(cloned=>{
+		// 		cloned.set({
+					
+		// 		})
+		// 		this.canvas = cloned
+		// 		resolve()
+		// 	})
+		// })
+
+		// MyCanvas?.[this.id].freeDrawingCursor= 'none'
+
+		// let imgage = await this.createImage({minioUrl:img})
+		// 		let rect1 = new fabric.Rect({
+		// 	left: 0,
+		// 	top: 0,
+		// 	width: 500,
+		// 	height: 500,
+		// 	fill: "red",
+		// });
+		// canvas.add(rect1)
 		this.initCanvasWH('init')
 		fabric.Object.prototype.cornerSize = 10//选中后的操作按钮大小
 		fabric.Object.prototype.transparentCorners = false //实心
@@ -186,12 +210,13 @@ class MyCanvas {
 		}else{
 			fabric.Object.prototype.controls.deleteControl.mouseUpHandler = this.deleteObject.bind(this)
 		}
-		MyCanvas.canvas.on("object:modified", (event)=>{
+		MyCanvas?.[this.id].on("object:modified", (event)=>{
 			this.updateCanvasState('')
 			this.updataLayer()
 		});
 		this.canvasKeyDown = this.canvasKeyDown.bind(this);
         this.canvasKeyUp = this.canvasKeyUp.bind(this);
+
 		// let rect1 = new fabric.Rect({
 		// 	left: 0,
 		// 	top: 0,
@@ -199,7 +224,7 @@ class MyCanvas {
 		// 	height: 500,
 		// 	fill: "red",
 		// });
-		// MyCanvas.canvas.add(rect1)
+		// MyCanvas?.[this.id].add(rect1)
 		// rect1.on('mouseover', function() {
 		// 	// rect1.set({ fill: 'green' });  // 鼠标移入时改变颜色为绿色
 		// 	// canvas.renderAll();  // 重新渲染画布
@@ -212,26 +237,26 @@ class MyCanvas {
 		// });
 		// return
 		// rect1.filters.push(new fabric.Image.filters.Grayscale())
-		// MyCanvas.canvas.add(rect1)
-		// // MyCanvas.canvas.add(rect1)
+		// MyCanvas?.[this.id].add(rect1)
+		// // MyCanvas?.[this.id].add(rect1)
 		// let rect = new fabric.Rect({
 		// 	left: 0,
 		// 	top: 0,
-		// 	width: MyCanvas.canvas.width,
-		// 	height: MyCanvas.canvas.height,
+		// 	width: MyCanvas?.[this.id].width,
+		// 	height: MyCanvas?.[this.id].height,
 		// 	inverted:true,
 		// 	fill: "red",
 		// });
 		// // let rect2 = new fabric.Rect({
-		// // 	width: MyCanvas.canvas.width,
-		// // 	height: MyCanvas.canvas.height,
+		// // 	width: MyCanvas?.[this.id].width,
+		// // 	height: MyCanvas?.[this.id].height,
 		// // 	fill:'#FFF'
 		// // });
-		// // // MyCanvas.canvas.add(rect2)
+		// // // MyCanvas?.[this.id].add(rect2)
 		// fabric.Image.fromURL('https://www.minio.aida.com.hk:12024/aida-collection-element/83/Moodboard/7a5fec0f-5a8c-4f1e-80c0-c4cda335d7c5.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20241112%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20241112T060752Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=25c5fa23dc447d1d06b4efeeec23454c797219df9c45d2cec231d0c8372754ce',(img)=>{
 		// 	let scale = {
-		// 		X:MyCanvas.canvas.width/img.width,
-		// 		Y:MyCanvas.canvas.height/img.height
+		// 		X:MyCanvas?.[this.id].width/img.width,
+		// 		Y:MyCanvas?.[this.id].height/img.height
 		// 	}
 		// 	rect.set({
 		// 		fill: new fabric.Pattern({
@@ -246,24 +271,23 @@ class MyCanvas {
 		// 		left:0,
 		// 		top:0,
 		// 	})
-		// 	MyCanvas.canvas.add(rect)
+		// 	MyCanvas?.[this.id].add(rect)
 		// },{ crossOrigin: "Anonymous" })
-		// // // MyCanvas.canvas.add(rect1)
+		// // // MyCanvas?.[this.id].add(rect1)
 		// // // rect1.clipPath = group
-		// // // MyCanvas.canvas.forEachObject((item) =>{
+		// // // MyCanvas?.[this.id].forEachObject((item) =>{
 		// // // 	if(item.clipPath){
 		// // // 		item.clipPath.add(rect2)
 		// // // 		// item.clipPath = group
 		// // // 	}
 		// // // })
 		// return
-
-		MyCanvas.canvas.on("mouse:move", this.setCanvasMove.bind(this));
-		MyCanvas.canvas.on("mouse:down",this.setCanvasDown.bind(this));
-		MyCanvas.canvas.on("mouse:up",this.setCanvasUp.bind(this));
-		MyCanvas.canvas.on("mouse:wheel",this.setCanvasWheel.bind(this));
+		MyCanvas?.[this.id].on("mouse:move", this.setCanvasMove.bind(this));
+		MyCanvas?.[this.id].on("mouse:down",this.setCanvasDown.bind(this));
+		MyCanvas?.[this.id].on("mouse:up",this.setCanvasUp.bind(this));
+		MyCanvas?.[this.id].on("mouse:wheel",this.setCanvasWheel.bind(this));
 		//双击
-		MyCanvas.canvas.on("mouse:dblclick", event=>{
+		MyCanvas?.[this.id].on("mouse:dblclick", event=>{
 			if(this.operation == 'fold'){
 				this.foldEnd('Enter')
 			}
@@ -272,15 +296,21 @@ class MyCanvas {
 		document.addEventListener('touchmove', this.touchmove.bind(this));
 		document.addEventListener("keydown", this.canvasKeyDown);
 		document.addEventListener("keyup", this.canvasKeyUp);
-		initAligningGuidelines(MyCanvas.canvas, true);
-		JSchangeType(MyCanvas.canvas,'init')
+
+		initAligningGuidelines(MyCanvas?.[this.id], true);
+		JSchangeType(MyCanvas?.[this.id],'init')
 		// await this.createBg()
-		await this.createLayer({str:'init'})//创建图层并且使用
-		MyCanvas.canvas.on("object:added", (event)=>{
-			this.addLayer(event)
-		});
-		this.canvas = MyCanvas.canvas;
-		return MyCanvas.canvas
+		await this.createLayer({str:'init',img:img})//创建图层并且使用
+		
+		if(img){
+			this.dashed.isDetail = true
+			await this.createLayer({editImg:editGroupImg})//创建图层并且使用
+		}
+		MyCanvas?.[this.id].on("object:added", this.addLayer.bind(this));
+		
+		// MyCanvas?.[this.id].on("object:added", this.addLayer.bind(this));
+		this.canvas = MyCanvas?.[this.id];
+		return MyCanvas?.[this.id]
 	}
 	initCanvasWH(str){
 		let scale
@@ -292,21 +322,21 @@ class MyCanvas {
 		if(str == 'updata'){
 			x = 0
 			y = 0
-			const vpt = MyCanvas.canvas.viewportTransform;
+			const vpt = MyCanvas?.[this.id].viewportTransform;
 			vpt[4] = 0; // 更新水平偏移
 			vpt[5] = 0; // 更新垂直偏移
 		}
-		MyCanvas.canvas.zoomToPoint(
+		MyCanvas?.[this.id].zoomToPoint(
 			{ // 关键点
 			x: x,
 			y: y
 			},
 			scale
 		)
-		MyCanvas.canvas.setBackgroundColor({
+		MyCanvas?.[this.id].setBackgroundColor({
 			source:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC',
 			repeat: 'repeat',
-			},MyCanvas.canvas.renderAll.bind(MyCanvas.canvas),
+			},MyCanvas?.[this.id].renderAll.bind(MyCanvas?.[this.id]),
 		)
 	}
 	mouseMove(event){
@@ -329,64 +359,64 @@ class MyCanvas {
 	setOperation(str){
 
 		this.operation = str
-		MyCanvas.canvas.discardActiveObject();//取消所有选中边框
+		MyCanvas?.[this.id].discardActiveObject();//取消所有选中边框
 		if(this.createPatterning.state){
-			MyCanvas.canvas.remove(this.createPatterning.current)
+			MyCanvas?.[this.id].remove(this.createPatterning.current)
 		}
 		this.removeSetText()
-		initAligningGuidelines(MyCanvas.canvas,false)
-		MyCanvas.canvas.remove(this.createPatterning.polyLineBtn)
+		initAligningGuidelines(MyCanvas?.[this.id],false)
+		MyCanvas?.[this.id].remove(this.createPatterning.polyLineBtn)
 		if(str == 'pencil'){
 			this.setPencil()
 			this.pencilbtnStyle.display = `block`
 			this.setCursor('none');
-			MyCanvas.canvas.freeDrawingCursor = 'none'
+			MyCanvas[this.id].freeDrawingCursor = 'none'
 		}else if(str == 'move'){
-			JSchangeType(MyCanvas.canvas,'')
-			MyCanvas.canvas.isDrawingMode = false
+			JSchangeType(MyCanvas?.[this.id],'')
+			MyCanvas[this.id].isDrawingMode = false
 			this.pencilbtnStyle.display = `none`
 			this.setCursor('grab');
 		}else if(str == 'movePosition'){
-			JSchangeType(MyCanvas.canvas,'init')
-			initAligningGuidelines(MyCanvas.canvas,true)
+			JSchangeType(MyCanvas?.[this.id],'init')
+			initAligningGuidelines(MyCanvas?.[this.id],true)
 			this.setMove()
 			this.pencilbtnStyle.display = `none`
 			this.setCursor('all-scroll');
-			MyCanvas.canvas.isDrawingMode = false
+			MyCanvas[this.id].isDrawingMode = false
 		}else if(str == 'texture'){
 			this.setTexture()
 			this.pencilbtnStyle.display = `block`
-			MyCanvas.canvas.freeDrawingCursor = 'none'
+			MyCanvas[this.id].freeDrawingCursor = 'none'
 			this.setCursor('none');
 		}else if(str == 'eraser'){
 			this.setEraser()
 			this.pencilbtnStyle.display = `block`
-			MyCanvas.canvas.freeDrawingCursor = 'none'
+			MyCanvas[this.id].freeDrawingCursor = 'none'
 			this.setCursor('none');
 		}else if(str == 'text'){
 			this.setMove()
 			this.setText()
-			JSchangeType(MyCanvas.canvas,'init')
+			JSchangeType(MyCanvas?.[this.id],'init')
 			this.setCursor('text')
 			this.pencilbtnStyle.display = `none`
 		}else if(['zoomIn', 'zoomOut'].includes(str)){
 			this.pencilbtnStyle.display = `none`
 			if(str == 'zoomIn')this.setCursor('zoom-in');
 			if(str == 'zoomOut')this.setCursor('zoom-out');
-			MyCanvas.canvas.isDrawingMode = false
-			MyCanvas.canvas.forEachObject((obj) =>{
+			MyCanvas[this.id].isDrawingMode = false
+			MyCanvas?.[this.id].forEachObject((obj) =>{
 				if(obj.type != 'group' && !obj.isType('path')){
 					obj.selectable = false
 				}
 			});
 		}else if(['dashedPencil', 'dashed'].includes(str)){
 			this.setGroupGrid('all')
-			MyCanvas.canvas.isDrawingMode = false
+			MyCanvas[this.id].isDrawingMode = false
 			this.pencilbtnStyle.display = `none`
 			this.setCursor('crosshair')
-			MyCanvas.canvas.freeDrawingCursor = 'crosshair'
+			MyCanvas[this.id].freeDrawingCursor = 'crosshair'
 			if(str == 'dashedPencil')this.setDashedPencil()
-			MyCanvas.canvas.forEachObject((obj) =>{
+			MyCanvas?.[this.id].forEachObject((obj) =>{
 				if(obj.type != 'group' && !obj.isType('path')){
 					obj.selectable = false
 				}
@@ -394,8 +424,8 @@ class MyCanvas {
 		}else if(str){
 			this.pencilbtnStyle.display = `none`
 			this.setCursor('auto');
-			MyCanvas.canvas.isDrawingMode = false
-			MyCanvas.canvas.forEachObject((obj) =>{
+			MyCanvas[this.id].isDrawingMode = false
+			MyCanvas?.[this.id].forEachObject((obj) =>{
 				if(obj.type != 'group' && !obj.isType('path')){
 					obj.selectable = false
 				}
@@ -412,22 +442,22 @@ class MyCanvas {
 		}
 	}
 	setCursor(str){
-		MyCanvas.canvas.defaultCursor = str;
-		MyCanvas.canvas.moveCursor = str;
-		MyCanvas.canvas.hoverCursor = str;
-		MyCanvas.canvas.upperCanvasEl.style.cursor = str;
+		MyCanvas[this.id].defaultCursor = str;
+		MyCanvas[this.id].moveCursor = str;
+		MyCanvas[this.id].hoverCursor = str;
+		MyCanvas[this.id].upperCanvasEl.style.cursor = str;
 	}
 	setCanvasMove = (event)=>{
 		
 		if(this.mouse.isMovePostion && this.operation == 'move') return this.setCanvasPosition(event)
-		if(MyCanvas.canvas.isDrawingMode){
+		if(MyCanvas?.[this.id].isDrawingMode){
 		}else{
-			let getActiveObject = MyCanvas.canvas.getActiveObject()
+			let getActiveObject = MyCanvas?.[this.id].getActiveObject()
 			if(
 				!this.clipPath.isImg && 
 				this.mouse.isDown && 
 				getActiveObject && 
-				getActiveObject.custom.dashed && 
+				getActiveObject.custom?.dashed && 
 				this.layer.selectLayer.group.custom?.groupType == 'Grid' &&
 				this.operation == 'movePosition'
 			){
@@ -437,49 +467,49 @@ class MyCanvas {
 				let str = this.operation
 				if(this.operation == 'dashed')str = 'rect'
 	 			JScanvasMouseMove(str,event,this.createPatterning.current,this.mouse.point,this.keyboard.down)
-				MyCanvas.canvas.requestRenderAll()
+				MyCanvas?.[this.id].requestRenderAll()
 	 		}
 		}
 	}
 	setCanvasPosition(event){
 		const e = event;
-		const vpt = MyCanvas.canvas.viewportTransform;
+		const vpt = MyCanvas?.[this.id].viewportTransform;
 
 		vpt[4] += e.pointer.x - this.mouse.lastPosX; // 更新水平偏移
 		vpt[5] += e.pointer.y - this.mouse.lastPosY; // 更新垂直偏移
 
-		MyCanvas.canvas.requestRenderAll(); // 请求重绘画布
+		MyCanvas?.[this.id].requestRenderAll(); // 请求重绘画布
 		this.mouse.lastPosX = e.pointer.x;
 		this.mouse.lastPosY = e.pointer.y;
 	}
 	// setRemoveDashed(){
-	// 	MyCanvas.canvas.forEachObject((obj) =>{
+	// 	MyCanvas?.[this.id].forEachObject((obj) =>{
 	// 		if(obj.custom.dashed && obj._objects){
 	// 			let rect = obj._objects.filter(item => item.type == 'rect')[0]
 	// 			obj.remove(rect)
-	// 			MyCanvas.canvas.renderAll();
+	// 			MyCanvas?.[this.id].renderAll();
 	// 		}
 	// 	});
 	// }
 	//设置再画布上按下
 	setCanvasDown(event){
-		if(event.target && event.target.custom?.dashed && ['dashedPencil', 'dashed'].includes(this.operation)){
-			// if(MyCanvas.canvas.isDrawingMode){
-			// 	MyCanvas.canvas.isDrawingMode = false;
+		if(event.target && event.target.custom?.dashed && ['dashedPencil', 'dashed'].includes(this.operation) && !this.dashed.isDetail){
+			// if(MyCanvas?.[this.id].isDrawingMode){
+			// 	MyCanvas[this.id].isDrawingMode = false;
 			// }
 			this.dashed.state = true
 		}else if(!event.target?.custom?.dashed){
 			// if(['dashedPencil'].includes(this.operation)){
-			// 	MyCanvas.canvas.isDrawingMode = true;
+			// 	MyCanvas[this.id].isDrawingMode = true;
 			// }
 			this.dashed.state = false
 		}
-		let dashedGroup = MyCanvas.canvas.getObjects().filter(obj => obj?.custom?.dashed)[0];
+		let dashedGroup = MyCanvas?.[this.id].getObjects().filter(obj => obj?.custom?.dashed)[0];
 		if(this.dashed.state && (this.operation == 'dashed' || this.operation == 'dashedPencil') && dashedGroup)return
-		if(!this.dashed.state && (this.operation == 'dashed' || this.operation == 'dashedPencil') && !event.target?.custom?.dashed && dashedGroup){
-			MyCanvas.canvas.remove(dashedGroup)
+		if(!this.dashed.state && (!event.target?.custom?.dashed || this.dashed.isDetail) && (this.operation == 'dashed' || this.operation == 'dashedPencil') && dashedGroup){
+			MyCanvas?.[this.id].remove(dashedGroup)
 		}
-		if(this.operation == 'movePosition' && !event?.target?.custom?.dashed && this.layer.selectLayer.group.custom.groupType == 'Grid')this.setGroupGrid('all');
+		if(this.operation == 'movePosition' && !event?.target?.custom?.dashed && this.layer.selectLayer.group?.custom?.groupType == 'Grid')this.setGroupGrid('all');
 
 		//设置移动端按下添加元素
 		this.mouse.isDown = true
@@ -515,13 +545,13 @@ class MyCanvas {
 		this.mouse.point = event.absolutePointer
 		let arr = ['rect','line','circle','triangle','ellipse','fold','dashed']
 		if(arr.indexOf(this.operation) > -1){
-			JSchangeType(MyCanvas.canvas,this.operation)
+			JSchangeType(MyCanvas?.[this.id],this.operation)
 			this.createPatterning.state = true
-			MyCanvas.canvas.forEachObject((obj) =>{
+			MyCanvas?.[this.id].forEachObject((obj) =>{
 				obj.set('selectable', false);  // 禁用选中
 			});
 			if(this.createPatterning.current && this.operation == 'fold'){
-				MyCanvas.canvas.skipTargetFind = false
+				MyCanvas[this.id].skipTargetFind = false
 				this.createPatterning.current.points.push({
 					x: this.mouse.point.x,
 					y: this.mouse.point.y
@@ -534,7 +564,7 @@ class MyCanvas {
 					selectable:true,
 				}
 				if(this.operation == 'dashed'){
-					width = 1 / MyCanvas.canvas.getZoom()
+					width = 1 / MyCanvas?.[this.id].getZoom()
 					data = {
 						fill:'transparent',
 						strokeDashArray: [width*3, width*3],
@@ -548,11 +578,11 @@ class MyCanvas {
 				}
 				this.createPatterning.current = JScanvasMouseDown(event,data)
 				if(this.operation == 'dashed')this.createPatterning.current.set({custom:{dashed:true}})
-				MyCanvas.canvas.add(this.createPatterning.current)
+				MyCanvas?.[this.id].add(this.createPatterning.current)
 				if(this.operation == 'fold'){
 					this.createPatterning.polyLineBtn = JScreateCheck(event)
 					this.createPatterning.polyLineBtn.on('mousedown',this.foldEnd.bind(this))
-					MyCanvas.canvas.add(this.createPatterning.polyLineBtn)
+					MyCanvas?.[this.id].add(this.createPatterning.polyLineBtn)
 				}
 			}
 		}else{
@@ -583,7 +613,7 @@ class MyCanvas {
 		}
 		if(this.operation == 'eraser')return this.updataLayer()
 		this.mouse.upPoint = event.absolutePointer
-		if(MyCanvas.canvas.isDrawingMode){
+		if(MyCanvas?.[this.id].isDrawingMode){
 			setTimeout(() => {
 				// pencilbtnStyle.value.display = `none`
 				this.updateCanvasState()
@@ -601,7 +631,7 @@ class MyCanvas {
 				break
 				default :
 					if(JSON.stringify(this.mouse.point) == JSON.stringify(this.mouse.upPoint)){
-						MyCanvas.canvas.remove(this.createPatterning.current)
+						MyCanvas?.[this.id].remove(this.createPatterning.current)
 						return
 					}
 					if(this.operation == 'dashed'){
@@ -615,17 +645,17 @@ class MyCanvas {
 				break
 			}
 			if(this.operation == 'fold'){
-				MyCanvas.canvas.forEachObject((obj) =>{
-					if(this.isSelectable(obj)){
+				MyCanvas?.[this.id].forEachObject((obj) =>{
+					if(this.isSelectable(obj.target)){
 						obj.selectable = true
 					}else{
 						obj.selectable = false
 					}
 				});
-				MyCanvas.canvas.bringToFront(this.createPatterning.polyLineBtn);//设置优先级最高
+				MyCanvas?.[this.id].bringToFront(this.createPatterning.polyLineBtn);//设置优先级最高
 			}else if(this.operation){
 				this.createPatterning.state = false
-				MyCanvas.canvas.renderAll();
+				MyCanvas?.[this.id].renderAll();
 				if(this.operation == 'dashed'){
 					await this.setDashed(this.createPatterning.current)
 				}else{
@@ -641,7 +671,7 @@ class MyCanvas {
 		if(!this.clipPath.clipGroup)return
 		this.clipPath.isImg = true
 		let clipPathElement = this.clipPath.clipGroup._objects.filter(obj => obj.custom)[0]
-		let imgBG = MyCanvas.canvas.getObjects().filter(obj => obj.custom.isSelectable && obj.type == 'rect')[0];
+		let imgBG = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom.isSelectable && obj.type == 'rect')[0];
 		let position = {
 			left:this.clipPath.clipGroup?.left - (imgBG.left?imgBG.left:0),
 			top:this.clipPath.clipGroup?.top - (imgBG.top?imgBG.top:0),
@@ -650,7 +680,7 @@ class MyCanvas {
 		}
 		// await this.setGroupGrid()
 		//添加裁剪后的图片
-		let elements = MyCanvas.canvas.getObjects().filter(obj => this.isAddToLayer(obj));
+		let elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj));
 		let imgData = await this.groupToImg(elements,position,'clipPath')
 		let img = await this.createImage({minioUrl:imgData})
 		img.set({
@@ -669,12 +699,12 @@ class MyCanvas {
 		})
 	}
 	setDashedPencil(){
-		MyCanvas.canvas.isDrawingMode = true
-		let pencil = new fabric.Test(MyCanvas.canvas,{}); //普通笔
-		MyCanvas.canvas.freeDrawingBrush = pencil
+		MyCanvas[this.id].isDrawingMode = true
+		let pencil = new fabric.Test(MyCanvas?.[this.id],{}); //普通笔
+		MyCanvas[this.id].freeDrawingBrush = pencil
 	}
 	async setDashed(obj){
-		MyCanvas.canvas.remove(obj)
+		MyCanvas?.[this.id].remove(obj)
 		let position = {
 			left:obj.left,
 			top:obj.top,
@@ -697,8 +727,7 @@ class MyCanvas {
 					dashed:true
 				}
 			})
-			console.log(223);
-			MyCanvas.canvas.add(group)
+			MyCanvas?.[this.id].add(group)
 		})
 	}
 	async setGridOrObject(id,str){
@@ -715,10 +744,10 @@ class MyCanvas {
 		}
 		this.setOperation('movePosition')
 	}
+	// 复制图层
 	async copyLayer(id){
 		let createId = new Date().getTime()
-		let elements = MyCanvas.canvas.getObjects().filter(obj => obj.custom.layerId == id)
-		let copyElements = []
+		let elements = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom.layerId == id)
 		for (let i = 0; i < elements.length; i++) {
 			await new Promise((resolve, reject) => {
 				let item = elements[i]
@@ -731,27 +760,28 @@ class MyCanvas {
 			})
 		}
 		await this.createLayer({id:createId})
-		copyElements.forEach( item=>MyCanvas.canvas.add(item))
+		copyElements.forEach( item=>MyCanvas?.[this.id].add(item))
 	}
 	async setGroupGrid(str){//group变为图片
-		// MyCanvas.canvas.discardActiveObject();//取消所有选中边框
-		let elements = MyCanvas.canvas.getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type);
+		// MyCanvas?.[this.id].discardActiveObject();//取消所有选中边框
+
+		let elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type);
 		if(str == 'all'){
-			elements = MyCanvas.canvas.getObjects().filter(obj => this.isAddToLayer(obj) && obj.type);
+			elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && obj.type);
 		}
 		let layerBg = elements.filter(obj => obj.custom.isSelectable)[0]
 		let scaleXY = {
 			scaleX:layerBg?.scaleX?layerBg?.scaleX:1,
 			scaleY:layerBg?.scaleY?layerBg?.scaleY:1,
-			width:layerBg?.width?layerBg?.width:MyCanvas.canvas.width,
-			height:layerBg?.height?layerBg?.height:MyCanvas.canvas.height,
+			width:layerBg?.width?layerBg?.width:MyCanvas?.[this.id].width,
+			height:layerBg?.height?layerBg?.height:MyCanvas?.[this.id].height,
 		}
 		let imgData = await this.groupToImg(elements,{},'setGrid',scaleXY)
 		let img = await this.createImage({minioUrl:imgData})
 		elements.forEach((obj) =>{
 			if(obj.custom.isSelectable){
 			}else{
-				MyCanvas.canvas.remove(obj)
+				MyCanvas?.[this.id].remove(obj)
 			}
 		});
 		if(layerBg){
@@ -775,8 +805,8 @@ class MyCanvas {
 			const rect = new fabric.Rect({
 				// left:0,
 				// top:0,
-				width: MyCanvas.canvas.width,
-				height: MyCanvas.canvas.height,
+				width: MyCanvas?.[this.id].width,
+				height: MyCanvas?.[this.id].height,
 				strokeWidth:0,
 				fill: new fabric.Pattern({
 					source: img.getElement(),  // 传入图片元素
@@ -789,16 +819,16 @@ class MyCanvas {
 				hasControls: true
 			});
 			this.setGroupStyle(rect)
-			MyCanvas.canvas.add(rect)
+			MyCanvas?.[this.id].add(rect)
 		}
-		MyCanvas.canvas.renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
+		MyCanvas?.[this.id].renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
 	}
 	//液化
 	getLiquefactionImgObj(){
 		return new Promise(async (resolve, reject) => {
 			let img,str = null
-			const activeObject = this.canvas.getActiveObject(); // 获取选中的对象
-			let dashedGroup = MyCanvas.canvas.getObjects().filter(obj => obj.custom.dashed)[0];
+			const activeObject = MyCanvas?.[this.id].getActiveObject(); // 获取选中的对象
+			let dashedGroup = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom.dashed)[0];
 
 			if (activeObject && activeObject.type === 'image' && 
 				activeObject.custom.type == 'upImgFiles'
@@ -827,7 +857,7 @@ class MyCanvas {
 					})
 				})
 			}else if(this.layer.selectLayer.group.custom.groupType == 'Grid'){//判断当前图层是否可以做为液化图片
-				let bg  = this.canvas.getObjects().filter(item => item.custom?.isSelectable)[0]
+				let bg  = MyCanvas?.[this.id].getObjects().filter(item => item.custom?.isSelectable)[0]
 				img = bg.fill.source.src
 				this.liquefaction.type = 'layer'
 			}
@@ -860,7 +890,7 @@ class MyCanvas {
 				// canvasObj.addDashedImg(value)
 			}
 		}else if(liquefaction.type == 'layer'){
-			let bg = this.canvas.getObjects().filter(item => item.custom?.isSelectable)[0]
+			let bg = MyCanvas?.[this.id].getObjects().filter(item => item.custom?.isSelectable)[0]
 			let img = await this.createImage({minioUrl:data})
 			bg.set({
 				fill: new fabric.Pattern({
@@ -869,7 +899,7 @@ class MyCanvas {
 				}),
 			})
 		}
-		MyCanvas.canvas.renderAll();
+		MyCanvas?.[this.id].renderAll();
 		this.updateCanvasState()
 	}
 	//end液化
@@ -897,7 +927,7 @@ class MyCanvas {
 		})
 		img.set({clipPath:clipPath})
 		img.custom.state = 'success'
-		MyCanvas.canvas.renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
+		MyCanvas?.[this.id].renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
 	}
 	async groupToImg(elements,imgData,type,scaleXY){
 		let temporar = this.temporarilyExport(scaleXY)
@@ -927,17 +957,17 @@ class MyCanvas {
 				})
 			})
 		}
-		let data = temporar.toDataURL(imgData);
+		let data = await temporar.toDataURL(imgData);
 		this.closeTemporarilyExport(temporar)
 		return data
 	}
 	setCanvasWheel(opt){
 		const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
-		let zoom = MyCanvas.canvas.getZoom() // 获取画布当前缩放值
+		let zoom = MyCanvas?.[this.id].getZoom() // 获取画布当前缩放值
 		zoom *= 0.999 ** delta
 		if (zoom > 20) zoom = 20
 		if (zoom < 0.01) zoom = 0.01
-		MyCanvas.canvas.zoomToPoint(
+		MyCanvas?.[this.id].zoomToPoint(
 			{ // 关键点
 			x: opt.e.offsetX,
 			y: opt.e.offsetY
@@ -949,7 +979,7 @@ class MyCanvas {
 		this.setPencilWidth()
 	}
 	foldEnd(key){
-		MyCanvas.canvas.skipTargetFind = true
+		MyCanvas[this.id].skipTargetFind = true
 		let points = this.createPatterning.current.points
 		if(key == 'Enter'){
 		}else{
@@ -957,8 +987,8 @@ class MyCanvas {
 		}
 		points.pop()
 		this.createPatterning.state = false
-		MyCanvas.canvas.remove(this.createPatterning.current)
-		MyCanvas.canvas.remove(this.createPatterning.polyLineBtn)
+		MyCanvas?.[this.id].remove(this.createPatterning.current)
+		MyCanvas?.[this.id].remove(this.createPatterning.polyLineBtn)
 		let polyline = new fabric.Polyline(points, {
 			fill: this.operationMode == 'fill'? this.brushwork.color : 'transparent',
 			stroke: this.brushwork.color,
@@ -969,16 +999,16 @@ class MyCanvas {
 			left:polyline.left+polyline.strokeWidth / 2,
 			top:polyline.top+polyline.strokeWidth / 2,
 		})
-		MyCanvas.canvas.add(polyline)
+		MyCanvas?.[this.id].add(polyline)
 		this.clearPatterning()//临时图形置为空并且添加撤回对象里面
 		// this.layerAddElement(polyline)
 	}
 	clearPatterning(){
 		if(this.createPatterning.state){
-			MyCanvas.canvas.remove(this.createPatterning.current)
+			MyCanvas?.[this.id].remove(this.createPatterning.current)
 		}
 		this.createPatterning.current = null
-		MyCanvas.canvas.remove(this.createPatterning.polyLineBtn)
+		MyCanvas?.[this.id].remove(this.createPatterning.polyLineBtn)
 		this.updateCanvasState()
 	}
 	textureValueChange = (value)=>{
@@ -993,22 +1023,22 @@ class MyCanvas {
 		this.setPencil()
 	}
 	setLayerIndex(str){//设置优先级
-		var activeObject = MyCanvas.canvas.getActiveObject();
+		var activeObject = MyCanvas?.[this.id].getActiveObject();
 		switch (str) {
 			case 'Front':
-				MyCanvas.canvas.bringToFront(activeObject)//顶层
+				MyCanvas?.[this.id].bringToFront(activeObject)//顶层
 				// this.layer.selectLayer.group.bringToFront(activeObject)
 			break
 			case 'Back':
-				MyCanvas.canvas.sendToBack(activeObject)//底层
+				MyCanvas?.[this.id].sendToBack(activeObject)//底层
 				// this.layer.selectLayer.group.sendToBack(activeObject)
 			break
 			case 'Forward':
-				MyCanvas.canvas.bringForward(activeObject)
+				MyCanvas?.[this.id].bringForward(activeObject)
 				// this.layer.selectLayer.group.bringForward(activeObject)
 			break
 			case 'Backwards':
-				MyCanvas.canvas.sendBackwards(activeObject)
+				MyCanvas?.[this.id].sendBackwards(activeObject)
 				// this.layer.selectLayer.group.sendBackwards(activeObject)
 			break
 		}
@@ -1016,53 +1046,53 @@ class MyCanvas {
 	}
 	setPencil(){
 		let pencil
-		MyCanvas.canvas.isDrawingMode = true//开启绘画模式
+		MyCanvas[this.id].isDrawingMode = true//开启绘画模式
 		if(this.brushwork.value == 'PencilBrush'){
-			pencil = new fabric.PencilBrush(MyCanvas.canvas,{}); //普通笔
+			pencil = new fabric.PencilBrush(MyCanvas?.[this.id],{}); //普通笔
 		}else if(this.brushwork.value == 'Marking'){
-			pencil = new fabric.PencilBrush(MyCanvas.canvas,); //记号笔
+			pencil = new fabric.PencilBrush(MyCanvas?.[this.id],); //记号笔
 		}else if(this.brushwork.value == 'InkBrush'){
-			pencil = new fabric.InkBrush(MyCanvas.canvas,{}); //油画笔
+			pencil = new fabric.InkBrush(MyCanvas?.[this.id],{}); //油画笔
 		}else if(this.brushwork.value=='CrayonBrush'){
-			pencil = new fabric.CrayonBrush(MyCanvas.canvas,{}); //蜡笔
+			pencil = new fabric.CrayonBrush(MyCanvas?.[this.id],{}); //蜡笔
 		}else if(this.brushwork.value == 'RibbonBrush'){
-			pencil = new fabric.RibbonBrush(MyCanvas.canvas,{width: 1,}); //色带
+			pencil = new fabric.RibbonBrush(MyCanvas?.[this.id],{width: 1,}); //色带
 		}else if(this.brushwork.value == 'MarkerBrush'){
-			pencil = new fabric.MarkerBrush(MyCanvas.canvas,{}); //书写笔
-			// pencil = new fabric.PenBrush(MyCanvas.canvas,{}); //书写笔
+			pencil = new fabric.MarkerBrush(MyCanvas?.[this.id],{}); //书写笔
+			// pencil = new fabric.PenBrush(MyCanvas?.[this.id],{}); //书写笔
 		}else if(this.brushwork.value == 'WritingBrush'){
-			pencil = new fabric.WritingBrush(MyCanvas.canvas,{}); //毛笔
+			pencil = new fabric.WritingBrush(MyCanvas?.[this.id],{}); //毛笔
 		}else if(this.brushwork.value == 'LongfurBrush'){
-			pencil = new fabric.LongfurBrush(MyCanvas.canvas,{width: 1,}); //色带
+			pencil = new fabric.LongfurBrush(MyCanvas?.[this.id],{width: 1,}); //色带
 		}else if(this.brushwork.value == 'SpraypaintBrush'){
-			pencil = new fabric.SpraypaintBrush(MyCanvas.canvas,{}); //长毛刷
+			pencil = new fabric.SpraypaintBrush(MyCanvas?.[this.id],{}); //长毛刷
 		}
 		
-		MyCanvas.canvas.freeDrawingBrush = pencil
+		MyCanvas[this.id].freeDrawingBrush = pencil
 		if(this.brushwork.value == 'RibbonBrush' || this.brushwork.value == 'LongfurBrush'){
-			MyCanvas.canvas.freeDrawingBrush.width = 1;
+			MyCanvas[this.id].freeDrawingBrush.width = 1;
 		}
 		if(this.brushwork.value == 'Marking'){
-			MyCanvas.canvas.freeDrawingBrush.color = this.hexToRgba(this.brushwork.color,.5);
+			MyCanvas[this.id].freeDrawingBrush.color = this.hexToRgba(this.brushwork.color,.5);
 		// }else if(this.brushwork.value == 'InkBrush'){
 		// 	canvas.freeDrawingBrush.color = this.hexToRgba(this.brushwork.color,.2);
 		}else{
-			MyCanvas.canvas.freeDrawingBrush.color = this.hexToRgba(this.brushwork.color,1);
+			MyCanvas[this.id].freeDrawingBrush.color = this.hexToRgba(this.brushwork.color,1);
 		}
 		this.setPencilWidth()
 		this.pencilbtnStyle.background = this.brushwork.color
-		MyCanvas.canvas.freeDrawingBrush.isEraser = false
+		MyCanvas[this.id].freeDrawingBrush.isEraser = false
 	}
 	setCanvasZoom(opt){
-		let zoom = MyCanvas.canvas.getZoom() // 获取画布当前缩放值
+		let zoom = MyCanvas?.[this.id].getZoom() // 获取画布当前缩放值
 		let num = -100
 		if(this.operation == 'zoomOut') num = 100
 		zoom *= 0.999 ** num
 		if (zoom > 20) zoom = 20
 		if (zoom < 0.01) zoom = 0.01
-		// MyCanvas.canvas.setDimensions(MyCanvas.canvas.width *= zoom,MyCanvas.canvas.height *= zoom)
-		// MyCanvas.canvas.wrapperEl.style.zoom = zoom
-		MyCanvas.canvas.zoomToPoint(
+		// MyCanvas?.[this.id].setDimensions(MyCanvas?.[this.id].width *= zoom,MyCanvas?.[this.id].height *= zoom)
+		// MyCanvas?.[this.id].wrapperEl.style.zoom = zoom
+		MyCanvas?.[this.id].zoomToPoint(
 			{ // 关键点
 			x: opt.pointer.x,
 			y: opt.pointer.y
@@ -1077,9 +1107,9 @@ class MyCanvas {
 		let img = await this.createImage(imgData)
 		let position = {
 			// left: 0,
-			// top:MyCanvas.canvas.wrapperEl.parentNode.scrollTop,
-			left: MyCanvas.canvas.width/2,
-			top: MyCanvas.canvas.height/2,
+			// top:MyCanvas?.[this.id].wrapperEl.parentNode.scrollTop,
+			left: MyCanvas?.[this.id].width/2,
+			top: MyCanvas?.[this.id].height/2,
 			
 		}
 		img.set({
@@ -1093,13 +1123,16 @@ class MyCanvas {
 	createImage(imgData){
 		return new Promise((resolve, reject) => {
 			fabric.Image.fromURL(imgData.minioUrl,(img) => {
+				img.set({
+					hasControls: true
+				})
 				resolve(img)
 			},{ crossOrigin: "Anonymous" })
 		})
 	}
 	setImageWidth = (key,img)=>{
-		const CW = MyCanvas.canvas.width
-		const CH = MyCanvas.canvas.height
+		const CW = MyCanvas?.[this.id].width
+		const CH = MyCanvas?.[this.id].height
 		let WH = CW>CH?'H':'W'
 		let imgWidth; //这是设置画布等宽
 		if(WH == 'W'){
@@ -1130,7 +1163,7 @@ class MyCanvas {
 		// 	if(img){
 		// 		let imgObj = JSON.parse(JSON.stringify(img))
 		// 		if(imgObj.height > imgObj.width){
-		// 			let heightScale = (MyCanvas.canvas.height/2) / imgObj.height
+		// 			let heightScale = (MyCanvas?.[this.id].height/2) / imgObj.height
 		// 			imgWidth = imgObj.width * heightScale
 		// 		}else{
 		// 			imgWidth /= 2
@@ -1164,38 +1197,38 @@ class MyCanvas {
 			scaleX:scale.X,
 			scaleY:scale.Y,
 		});
-		MyCanvas.canvas.add(img)
+		MyCanvas?.[this.id].add(img)
 		this.updateCanvasState('')
 	}
 	setMove(){
-		MyCanvas.canvas.isDrawingMode = false
-		MyCanvas.canvas.forEachObject((obj) =>{
+		MyCanvas[this.id].isDrawingMode = false
+		MyCanvas?.[this.id].forEachObject((obj) =>{
 			if(this.isSelectable(obj)){
 				obj.selectable = true
 			}else{
 				obj.selectable = false
 			}
 		});
-		MyCanvas.canvas.renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
+		MyCanvas?.[this.id].renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
 	}
 	async setTexture(){
-		MyCanvas.canvas.isDrawingMode = true//开启绘画模式
+		MyCanvas[this.id].isDrawingMode = true//开启绘画模式
 		let img = await JSSetTexture(this.texture.list[this.texture.value].url)
-		let zoom = MyCanvas.canvas.getZoom() // 获取画布当前缩放值
-		let patternBrush = new fabric.PatternBrush(MyCanvas.canvas)  
+		let zoom = MyCanvas?.[this.id].getZoom() // 获取画布当前缩放值
+		let patternBrush = new fabric.PatternBrush(MyCanvas?.[this.id])  
 		patternBrush.source = img 
 		patternBrush.width = Number(this.brushwork.width[this.operation]) / zoom; // 设置画笔大小 
 		this.setPencilWidth()
-		MyCanvas.canvas.freeDrawingBrush = patternBrush 
+		MyCanvas[this.id].freeDrawingBrush = patternBrush 
 	}
 	setEraser(){
-		MyCanvas.canvas.isDrawingMode = true
-		let eraser = new fabric.EraserBrush(MyCanvas.canvas) 
-		MyCanvas.canvas.freeDrawingBrush = eraser
+		MyCanvas[this.id].isDrawingMode = true
+		let eraser = new fabric.EraserBrush(MyCanvas?.[this.id]) 
+		MyCanvas[this.id].freeDrawingBrush = eraser
 		this.pencilbtnStyle.background = '#fff'
-		MyCanvas.canvas.freeDrawingBrush.isEraser = true
+		MyCanvas[this.id].freeDrawingBrush.isEraser = true
 		this.setPencilWidth()
-		MyCanvas.canvas.requestRenderAll();
+		MyCanvas?.[this.id].requestRenderAll();
 
 	}
 	hexToRgba(hex, alpha){
@@ -1209,26 +1242,26 @@ class MyCanvas {
 			this.setFontFamily()
 			return
 		}
-		if(MyCanvas.canvas.freeDrawingBrush.isEraser){
+		if(MyCanvas[this.id].freeDrawingBrush.isEraser){
 		}else{
 			this.pencilbtnStyle.background = this.brushwork.color
 		}
 		if(this.brushwork.value == 'Marking'){
-			MyCanvas.canvas.freeDrawingBrush.color = this.hexToRgba(this.brushwork.color,.5);
+			MyCanvas[this.id].freeDrawingBrush.color = this.hexToRgba(this.brushwork.color,.5);
 		}else if(this.brushwork.value == 'InkBrush'){
-			MyCanvas.canvas.freeDrawingBrush.color = this.hexToRgba(this.brushwork.color,.2);
+			MyCanvas[this.id].freeDrawingBrush.color = this.hexToRgba(this.brushwork.color,.2);
 		}else{
-			MyCanvas.canvas.freeDrawingBrush.color = this.hexToRgba(this.brushwork.color,1);
+			MyCanvas[this.id].freeDrawingBrush.color = this.hexToRgba(this.brushwork.color,1);
 		}
 	}
 	setFontFamily=()=>{
-		if(this.createText.set){
+		if(this.createText?.set){
 			this.createText.set({
 				fontFamily:this.fontFamily,
 				fontSize:this.brushwork.width[this.operation]?this.brushwork.width[this.operation]:20,
 				fill:this.brushwork.color,
 			})
-			MyCanvas.canvas.renderAll();
+			MyCanvas?.[this.id].renderAll();
 		}
 	}
 	setPencilColor(){//切换颜色给铅笔设置颜色
@@ -1244,10 +1277,10 @@ class MyCanvas {
 	setCanvasWH = (str)=>{
 		clearTimeout(this.setTimeOut.canvasWH)
 		this.setTimeOut.canvasWH = setTimeout(()=>{
-			MyCanvas.canvas.setWidth(this.canvasWH.width);
-			MyCanvas.canvas.setHeight(this.canvasWH.height);
-			// MyCanvas.canvas.width = this.canvasWH.width
-			// MyCanvas.canvas.height = this.canvasWH.height
+			MyCanvas?.[this.id].setWidth(this.canvasWH.width);
+			MyCanvas?.[this.id].setHeight(this.canvasWH.height);
+			// MyCanvas?.[this.id].width = this.canvasWH.width
+			// MyCanvas?.[this.id].height = this.canvasWH.height
 			this.initCanvasWH('updata')
 		},1000)
 	}
@@ -1256,34 +1289,57 @@ class MyCanvas {
 		this.pencilColor()
 	}
 	setPencilWidth(){//切换颜色给铅笔设置颜色
-		let zoom = MyCanvas.canvas.getZoom() // 获取画布当前缩放值
+		let zoom = MyCanvas?.[this.id].getZoom() // 获取画布当前缩放值
 		clearTimeout(this.setTimeOut.width)
 		this.setTimeOut.width = setTimeout(()=>{
 			if(!this.brushwork.width[this.operation])this.brushwork.width[this.operation]=20
-			// MyCanvas.canvas.freeDrawingBrush.width = Number(this.brushwork.width[this.operation]);
+			// MyCanvas[this.id].freeDrawingBrush.width = Number(this.brushwork.width[this.operation]);
 			let arr = ['PencilBrush','Marking']
 			this.pencilbtnStyle.height = this.brushwork.width[this.operation]+'px'
 			this.pencilbtnStyle.width = this.brushwork.width[this.operation]+'px'
 			if(arr.indexOf(this.brushwork.value) > -1){
-				MyCanvas.canvas.freeDrawingBrush.width = Number(this.brushwork.width[this.operation]) / zoom;
+				MyCanvas[this.id].freeDrawingBrush.width = Number(this.brushwork.width[this.operation]) / zoom;
 			}else{
-				MyCanvas.canvas.freeDrawingBrush.width = Number(this.brushwork.width[this.operation]);
+				MyCanvas[this.id].freeDrawingBrush.width = Number(this.brushwork.width[this.operation]);
 			}
 			if((this.brushwork.value == 'LongfurBrush' || this.brushwork.value == 'RibbonBrush') && this.operation == 'pencil'){
-				MyCanvas.canvas.freeDrawingBrush.width = 1;
+				MyCanvas[this.id].freeDrawingBrush.width = 1;
 				this.pencilbtnStyle.height = 1+'px'
 				this.pencilbtnStyle.width = 1+'px'
 			}
 		},100)
 	}
+	uploadImg(){
+		const input = document.createElement('input');
+		input.type = 'file';
+		input.accept = 'image/*';
+		// 将文件输入框和图片预览元素添加到页面中
+		document.body.appendChild(input);
+
+		// 监听文件输入框的变化事件
+		input.addEventListener('change', (event)=> {
+			event.preventDefault()
+			const file = event.target.files[0];  // 获取用户选择的文件
+			if (file) {
+				const reader = new FileReader();  // 创建 FileReader 对象读取文件
+				reader.onload = (e)=> {
+					const base64Image = e.target.result;
+					this.addPartImg({minioUrl:base64Image},'print')
+					input.remove()
+				};
+				reader.readAsDataURL(file);
+			}
+		});
+		input.click()
+	}
 	//关闭u或者创建文字
 	setTextFun(e){
 		if(this.operation != 'text'){
 			return
 		}
-		MyCanvas.canvas.forEachObject((obj) =>{
+		MyCanvas?.[this.id].forEachObject((obj) =>{
 			if(obj.type == 'textbox' && !obj.text){
-				MyCanvas.canvas.remove(obj);
+				MyCanvas?.[this.id].remove(obj);
 			}
 		});
 		var clickedObject = e.target;
@@ -1292,7 +1348,7 @@ class MyCanvas {
 			this.setTextData(this.createText)
 		}else{
 		
-			var pointer = MyCanvas.canvas.getPointer(e.pointer);
+			var pointer = MyCanvas?.[this.id].getPointer(e.pointer);
 			var x = pointer.x;
 			var y = pointer.y;
 			this.createText = new fabric.Textbox('', {
@@ -1304,15 +1360,15 @@ class MyCanvas {
 				fill:this.canvasPencilColor,
 
 			})
-			MyCanvas.canvas.add(this.createText)
+			MyCanvas?.[this.id].add(this.createText)
 			// this.layer.selectLayer.group.add(this.createText)
 			this.createText.enterEditing();
-			MyCanvas.canvas.setActiveObject(this.createText).renderAll();
+			MyCanvas?.[this.id].setActiveObject(this.createText).renderAll();
 			this.removeSetText()
 		}
 	}
 	setText(){
-		MyCanvas.canvas.on('mouse:down',(event)=>{
+		MyCanvas?.[this.id].on('mouse:down',(event)=>{
 			if(this.operation == 'zoomIn' || this.operation == 'zoomOut'){
 			}else{
 				this.setTextFun(event)
@@ -1320,7 +1376,7 @@ class MyCanvas {
 		})
 	}
 	removeSetText(){
-		MyCanvas.canvas.off('mouse:down',this.setTextFun.bind(this))
+		MyCanvas?.[this.id].off('mouse:down',this.setTextFun.bind(this))
 	}
 	// async createBg(){//
 	// 	await new Promise((resolve, reject) => {
@@ -1331,8 +1387,8 @@ class MyCanvas {
 	// 			const rect = new fabric.Rect({
 	// 				left: 0,
 	// 				top: 0,
-	// 				width: MyCanvas.canvas.width,
-	// 				height: MyCanvas.canvas.height,
+	// 				width: MyCanvas?.[this.id].width,
+	// 				height: MyCanvas?.[this.id].height,
 	// 				fill:'#FFF',
 	// 				// fill: new fabric.Pattern({
 	// 				// 	source: backgroundImage.getElement(), // 使用图像元素作为填充
@@ -1342,32 +1398,33 @@ class MyCanvas {
 	// 			});
 				
 	// 			const group = new fabric.Group([rect], {
-	// 				width: MyCanvas.canvas.width,
-	// 				height: MyCanvas.canvas.height,
+	// 				width: MyCanvas?.[this.id].width,
+	// 				height: MyCanvas?.[this.id].height,
 	// 				erasable:false,
 	// 				selectable:false,
 	// 			});
 	// 			group.custom.layerId = -1
-	// 			MyCanvas.canvas.add(group)
-	// 			MyCanvas.canvas.clipPath = rect
+	// 			MyCanvas?.[this.id].add(group)
+	// 			MyCanvas?.[this.id].clipPath = rect
 	// 			resolve()
 	// 		});
 	// 	})
 	// }
 	createLayer(data){
-		let {str,id} = data
-		let canvasData = MyCanvas.canvas.toJSON(['selectable','minioUrl','custom']);
+		let {str,id,editImg} = data
+		let image = data.img
+		let canvasData = MyCanvas?.[this.id].toJSON(['selectable','minioUrl','custom']);
 		return new Promise(async (resolve, reject) => {
-			MyCanvas.canvas.discardActiveObject();
+			MyCanvas?.[this.id].discardActiveObject();
 			if(!id)id = new Date().getTime()
 			let index = this.layer.currentIndex += 1
 			const rect = new fabric.Rect({
-				left: -MyCanvas.canvas.width / 2,
-				top: -MyCanvas.canvas.height / 2,
+				left: -MyCanvas?.[this.id].width / 2,
+				top: -MyCanvas?.[this.id].height / 2,
 				// left:0,
 				// top:0,
-				width: MyCanvas.canvas.width,
-				height: MyCanvas.canvas.height,
+				width: MyCanvas?.[this.id].width,
+				height: MyCanvas?.[this.id].height,
 				strokeWidth:0,
 				fill:'#FFF',
 				custom:{
@@ -1381,8 +1438,8 @@ class MyCanvas {
 				rect.clipPath = cloned
 			})
 			const group = new fabric.Group([], {
-				width: MyCanvas.canvas.width,
-				height: MyCanvas.canvas.height,
+				width: MyCanvas?.[this.id].width,
+				height: MyCanvas?.[this.id].height,
 				left:0,
 				top:0,
 				selectable:false,
@@ -1401,24 +1458,51 @@ class MyCanvas {
 			});
 			if(str == 'init'){
 				group.moveTo(group.custom.selectLayerIndex)
+				if(image){
+					let img = await this.createImage({minioUrl:image})
+					rect.set({
+						fill: new fabric.Pattern({
+							source: img.getElement(),  // 传入图片元素
+							repeat: 'no-repeat',        // 设置图片不重复
+							patternTransform: [group.width / img.width, 0, 0, group.height / img.height, 0, 0]
+						}),
+					})
+				}
 				group.add(rect)
 				group.clone((cloned)=>{
 					cloned.set({left:0,top:0})
-					MyCanvas.canvas.clipPath = cloned
+					// MyCanvas?.[this.id].clipPath = cloned
+				})
+			}else if(editImg){
+				group.moveTo(group.custom.selectLayerIndex)
+				let img = await this.createImage({minioUrl:editImg})
+				rect.set({
+					fill: new fabric.Pattern({
+						source: img.getElement(),  // 传入图片元素
+						repeat: 'no-repeat',        // 设置图片不重复
+						patternTransform: [group.width / img.width, 0, 0, group.height / img.height, 0, 0]
+					}),
+				})
+				group.add(rect)
+				group.clone((cloned)=>{
+					cloned.set({left:0,top:0})
+					// MyCanvas?.[this.id].clipPath = cloned
 				})
 			}
-			MyCanvas.canvas.add(group)
+			MyCanvas?.[this.id].add(group)
+
 			let img = group.toDataURL({
-				width: MyCanvas.canvas.width,
-				height: MyCanvas.canvas.height,
+				width: MyCanvas?.[this.id].width,
+				height: MyCanvas?.[this.id].height,
 			})
+		
 			this.layer.list.unshift({
 				name:`Layer${index}`,
 				id,img,isShow:true,
 				groupType:'Object',
 				index,})
 			await this.selectLayer(id)
-			MyCanvas.canvas.renderAll();
+			MyCanvas?.[this.id].renderAll();
 			this.updateCanvasState()
 			resolve(group)
 		})
@@ -1428,16 +1512,37 @@ class MyCanvas {
 		obj.left = obj.left - group.width/2
 		obj.top = obj.top - group.height/2
 		group.add(obj)
-		MyCanvas.canvas.remove(obj)
+		MyCanvas?.[this.id].remove(obj)
 		this.updataLayerImg(this.layer.selectLayer.id,group.toDataURL({
-			width: MyCanvas.canvas.width,
-			height: MyCanvas.canvas.height
+			width: MyCanvas?.[this.id].width,
+			height: MyCanvas?.[this.id].height
 		}))
 	}
+	async addPartImg(file,str){
+		let img = await this.createImage(file)
+		if(str){
+			img.set({
+				custom:{
+					type:str
+				}
+			})
+		}
+		
+		// let dashedGroup = MyCanvas?.[this.id].getObjects().filter(obj => obj?.custom?.dashed)[0];
+		// dashedGroup.clone(cloned=>{
+		// 	this.setClone(img,cloned)
+		// 	img.set({
+		// 		left:0,
+		// 		top:0
+		// 	})
+		// })
+		MyCanvas?.[this.id].add(img)
+		img.bringToFront();
+		MyCanvas?.[this.id].renderAll();
+	}
 	async addLayer(options){
-		console.log(options);
 		if(this.createPatterning.state)return
-		this.clipPath.clipGroup = MyCanvas.canvas.getObjects().filter(obj => obj.custom?.dashed)?.[0];
+		this.clipPath.clipGroup = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom?.dashed)?.[0];
 		if (options.target.type === 'group' && options.target.custom?.layerId) return;
 		if(!options.target?.custom?.layerId){
 			if(options.target?.custom){
@@ -1446,11 +1551,49 @@ class MyCanvas {
 				options.target.set({custom:{layerId : this.layer.selectLayer.id}})
 			}
 		}
+		if(this.clipPath.clipGroup && this.dashed.isDetail && !options.target?.custom?.dashed){
+			let clipPathElement = this.clipPath.clipGroup._objects.filter(obj => obj.custom)[0]
+
+			clipPathElement.clone(cloned=>{
+				cloned.set({
+					left:this.clipPath.clipGroup.left,
+					top:this.clipPath.clipGroup.top,
+					absolutePositioned:true,
+					inverted:false,
+				})
+				if(options.target.type == 'image' && options.target.custom?.type != 'pencil'){
+					options.target.set({
+						scaleX:this.clipPath.clipGroup.width / options.target.width,
+						scaleY:this.clipPath.clipGroup.height / options.target.height,
+						left:this.clipPath.clipGroup.left,
+						top:this.clipPath.clipGroup.top,
+						// width:cloned.width,
+						// height:options.cloned.width / target.width * options.target.height,
+					})
+				}
+				options.target.clipPath = cloned
+			})
+		}else if(options.target.type == 'image' && options.target.custom?.type != 'pencil'){
+			let scale = 1
+			if(options.target?.custom?.type == 'print')scale = 2
+			options.target.set({
+				scaleX:MyCanvas?.[this.id].width / scale / options.target.width,
+				scaleY:MyCanvas?.[this.id].height / scale / options.target.height,
+				left:MyCanvas?.[this.id].width / scale - (options.target.width / scale * MyCanvas?.[this.id].width / scale / options.target.width),
+				top:MyCanvas?.[this.id].height / scale - (options.target.height / scale * MyCanvas?.[this.id].height / scale / options.target.height),
+				// width:cloned.width,
+				// height:options.cloned.width / target.width * options.target.height,
+			})
+		}
 		//判断是否可以点击空白地方进行选中
 		if(options.target?.custom?.dashed){
 			options.target.set({perPixelTargetFind:false,erasable:false,hasBorders: false,hasControls: false})
-			// MyCanvas.canvas.setActiveObject(options.target);
-			MyCanvas.canvas.skipTargetFind = false
+			if(this.dashed.isDetail){//判断是裁剪还是局部添加
+				options.target.set({selectable:false,perPixelTargetFind:true})
+			}else{
+				// MyCanvas?.[this.id].setActiveObject(options.target);
+				MyCanvas[this.id].skipTargetFind = false
+			}
 			this.setOperation('movePosition')
 		}else if(options.target.type == 'textbox' || options.target?.custom.type == 'layer'){
 			options.target.set({perPixelTargetFind:false})
@@ -1460,6 +1603,7 @@ class MyCanvas {
 		//设置优先级
 		if(options.target?.custom?.isSelectable && (options.target?.type == 'rect')){
 			options.target.custom.selectLayerIndex = this.layer.selectLayer.group.custom.layerIndex * 10000
+	
 		}else{
 			options.target.custom.selectLayerIndex = this.layer.selectLayer.group.custom.selectLayerIndex += 1
 			if(this.clipPath.clipGroup){
@@ -1467,16 +1611,14 @@ class MyCanvas {
 			}
 		}
 		if(options.target.isType('path'))options.target.selectable=false
-		let arr = MyCanvas.canvas.getObjects().sort((a, b) =>{
+		let arr = MyCanvas?.[this.id].getObjects().sort((a, b) =>{
 			return a.custom.selectLayerIndex - b.custom.selectLayerIndex; 
 		  });
 		  arr.forEach((item,index)=>{
 			item.moveTo(index)
 		  })
-		
 		if(!options?.target?.custom?.dashed && this.layer.selectLayer.group.custom.groupType == 'Grid'){
 			await new Promise((resolve, reject) => {
-				console.log(this.clipPath.clipGroup);
 				let clipPathElement = this.clipPath.clipGroup._objects.filter(obj => obj.custom?.dashed)[0]
 				let clipPathLect = this.clipPath.clipGroup.left
 				let clipPathTop = this.clipPath.clipGroup.top
@@ -1498,23 +1640,19 @@ class MyCanvas {
 							clipPath:clipPathElementCloned,
 						})
 						this.clipPath.clipGroup.add(cloned)
-						console.log(this.clipPath.clipGroup);
-						MyCanvas.canvas.remove(options.target)
+						MyCanvas?.[this.id].remove(options.target)
 						resolve()
 					})
 				})
 			})
-			
 			// this.setGroupGrid('all')
 		}
-		
-		MyCanvas.canvas.renderAll();
-
+		MyCanvas?.[this.id].renderAll();
 		this.updataLayer()
 	}
 	upLayerIndex(list){
 		list.forEach((item,index)=>{
-			let arr = MyCanvas.canvas.getObjects().filter(obj => obj.custom.layerId == item.id)
+			let arr = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom.layerId == item.id)
 			arr.forEach((obj)=>{
 				if(obj.custom.type == 'layer')obj.custom.layerIndex = item.index
 				let selectLayerIndex = obj.custom.selectLayerIndex+''
@@ -1524,7 +1662,7 @@ class MyCanvas {
 			// arrList.unshift(obj)
 		})
 		// this.layer.list = arrList
-		let arr = MyCanvas.canvas.getObjects().sort((a, b) =>{
+		let arr = MyCanvas?.[this.id].getObjects().sort((a, b) =>{
 			return a.custom.selectLayerIndex - b.custom.selectLayerIndex; 
 		});
 		arr.forEach((item,index)=>item.moveTo(index))
@@ -1533,7 +1671,7 @@ class MyCanvas {
 		clearTimeout(this.setTimeOut.updataLayer)
 		this.setTimeOut.updataLayer = setTimeout(async()=>{
 			let elements
-			elements = MyCanvas.canvas.getObjects().filter(obj => {
+			elements = MyCanvas?.[this.id].getObjects().filter(obj => {
 				return this.isAddToLayer(obj)
 			});
 			const group = new fabric.Group([], {
@@ -1579,17 +1717,17 @@ class MyCanvas {
 		}
 		this.layer.list.splice(index,1)
 		if(id == this.layer.selectLayer.id){
-			MyCanvas.canvas.remove(this.layer.selectLayer.group)
-			MyCanvas.canvas.forEachObject((obj) =>{
+			MyCanvas?.[this.id].remove(this.layer.selectLayer.group)
+			MyCanvas?.[this.id].forEachObject((obj) =>{
 				if(obj.type != 'group' && obj.custom?.layerId == id){
-					MyCanvas.canvas.remove(obj)
+					MyCanvas?.[this.id].remove(obj)
 				}
 			});
 			this.layer.selectLayer.id = -1
 			this.selectLayer(this.layer.list[this.layer.list.length - 1].id)
 		}else{
 			let group = await this.lookingLayer(id,'setLayerIndex')
-			MyCanvas.canvas.remove(group)
+			MyCanvas?.[this.id].remove(group)
 		}
 		this.updateCanvasState()
 	}
@@ -1603,14 +1741,14 @@ class MyCanvas {
 			this.layer.selectLayer.group = group
 			this.layer.selectLayer.id = id
 			await this.expandGroup()
-			MyCanvas.canvas.renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
+			MyCanvas?.[this.id].renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
 			this.setOperation('movePosition')
 			resolve('')
 		})
 	}
 	async mergeGroup(){
-		const elements = MyCanvas.canvas.getObjects().filter(obj => this.isAddToLayer(obj));
-		let isClipPath = MyCanvas.canvas.getObjects().filter(obj => obj.custom.dashed);
+		const elements = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj));
+		let isClipPath = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom?.dashed);
 		if(isClipPath.length>0)await this.setGroupGrid('all')
 		let group = await this.lookingLayer(this.layer.selectLayer.id,'setlayerIndex')
 		group.set({visible:true})
@@ -1622,7 +1760,7 @@ class MyCanvas {
 					v.left = v.left - group.width/2
 					v.top = v.top - group.height/2
 					if(v.custom?.dashed){
-						// MyCanvas.canvas.remove(item)
+						// MyCanvas?.[this.id].remove(item)
 						// let img = v._objects.filter(item => item.type == 'image')[0]
 						// if(img){
 						// 	img.set({
@@ -1641,7 +1779,7 @@ class MyCanvas {
 				})
 			})
 		}
-		elements.forEach(v => MyCanvas.canvas.remove(v))
+		elements.forEach(v => MyCanvas?.[this.id].remove(v))
 	}
 	async expandGroup(){
 		const elements = this.layer.selectLayer.group._objects.filter(obj => this.isAddToLayer(obj));
@@ -1665,10 +1803,10 @@ class MyCanvas {
 						// 			layerId:v.custom.layerId
 						// 		}
 						// 	})
-						// 	MyCanvas.canvas.add(img)
+						// 	MyCanvas?.[this.id].add(img)
 						// }
 					}else{
-						MyCanvas.canvas.add(v)
+						MyCanvas?.[this.id].add(v)
 					}
 					if(index == elements.length - 1){
 						elements.forEach(v => this.layer.selectLayer.group.remove(v))
@@ -1680,7 +1818,7 @@ class MyCanvas {
 	}
 	lookingLayer(id,str){
 		return new Promise((resolve, reject) => {
-			const groups = MyCanvas.canvas.getObjects()
+			const groups = MyCanvas?.[this.id].getObjects()
 			let group = null
 			groups.forEach(v => {
 				if(str && v?.custom?.type === 'layer' && (str == 'setlayerIndex' || str == 'setRubber')){
@@ -1712,46 +1850,112 @@ class MyCanvas {
 		})
 	}
 	async layerShowHide(id,item){
-		// console.log(id);
 
 		item.isShow = !item.isShow
-		MyCanvas.canvas.forEachObject((obj)=>{
+		MyCanvas?.[this.id].forEachObject((obj)=>{
 			if(obj.custom.layerId == id)obj.visible = item.isShow
 		})
-		MyCanvas.canvas.renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
+		MyCanvas?.[this.id].renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
 
 	}
 	canvasKeyDown(event){
-		if(this.keyDown.indexOf(event.key)>-1){
-		}else{
-			this.keyDown.push(event.code)
-			if(event.key === 'Enter' && this.operation == 'fold'){
-				this.foldEnd('Enter')
-			}else if(event.key === 'Delete'){
-				this.deleteObject()
-			}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyZ') > -1 && this.keyDown.indexOf('ShiftLeft') > -1){
-				this.historyState('reverse')
-			}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyZ') > -1){
-				this.historyState('')
-			}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyC') > -1){
-				this.copy()
-			}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyV') > -1){
-				this.paste()
-			}else if(this.keyDown.indexOf('AltLeft') > -1 && this.keyDown.length == 1 && this.operation != 'move'){
-				this.oldOperation = this.operation
-				this.setOperation('move')
+		if(!this.currentOperation)return
+		let keys = ['Enter','Delete','ControlLeft','ShiftLeft','BracketLeft','BracketRight','MetaLeft']
+			var activeObject = MyCanvas?.[this.id].getActiveObject();
+			let state = (activeObject && activeObject.type == 'textbox'&&activeObject.isEditing)
+			if(keys.indexOf(event.code) > -1){
+				event.preventDefault(); 
 			}
+			if(this.keyDown.indexOf(event.code)>-1 || state){
+			}else{
+				this.keyDown.push(event.code)
+				// console.log(this.keyDown.indexOf('ControlLeft') > -1 , this.keyDown.indexOf('MetaLeft') > -1, event.code == 'KeyC')
+				if(event.code === 'Enter' && operation.value == 'fold'){
+					this.foldEnd('Enter')
+				}else if(event.key === 'Delete'){
+					this.deleteObject()
+				}else if((this.keyDown.indexOf('ControlLeft') > -1 || this.keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyZ' && this.keyDown.indexOf('ShiftLeft') > -1){
+					this.historyState('reverse')
+				}else if((this.keyDown.indexOf('ControlLeft') > -1 || this.keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyZ'){
+					this.historyState('')
+				}else if((this.keyDown.indexOf('ControlLeft') > -1 || this.keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyC'){
+					this.copy()
+				}else if((this.keyDown.indexOf('ControlLeft') > -1 || this.keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyV'){
+					this.paste()
+				}else if(this.keyDown.indexOf('BracketLeft') > -1){
+					let width = this.brushwork.width[this.operation]
+					this.brushwork.width[this.operation] = (width - 5) < 3?3:(width - 5)
+					this.setPencilWidth()
+				}else if(this.keyDown.indexOf('BracketRight') > -1){
+					let width = this.brushwork.width[this.operation]
+					this.brushwork.width[this.operation] = (width + 5) > 50?50:(width + 5)
+					this.setPencilWidth()
+				}else if(this.keyDown.indexOf('KeyI') > -1){
+					this.getColor()//吸色
+				}else if(this.keyDown.indexOf('KeyM') > -1){
+					setOperation('move')
+				}else if((this.keyDown.indexOf('ControlLeft') > -1 || this.keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyD'){
+					MyCanvas?.[this.id].discardActiveObject().renderAll();
+				}else if((this.keyDown.indexOf('ControlLeft') > -1 || this.keyDown.indexOf('MetaLeft') > -1) && event.code == 'KeyO'){
+					event.preventDefault(); 
+					this.uploadImg()
+				}else if(this.keyDown.indexOf('KeyB') > -1){
+					// if(operation.value == 'pencil' || operation.value == 'texture'){
+					this.setOperation('pencil')
+					// }
+				}else if(this.keyDown.indexOf('KeyE') > -1){
+					// if(operation.value == 'pencil' || operation.value == 'texture'){
+					this.setOperation('eraser')
+					// }
+				}
+			}
+
+		// if(this.keyDown.indexOf(event.key)>-1){
+		// }else{
+		// 	this.keyDown.push(event.code)
+		// 	if(event.key === 'Enter' && this.operation == 'fold'){
+		// 		this.foldEnd('Enter')
+		// 	}else if(event.key === 'Delete'){
+		// 		this.deleteObject()
+		// 	}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyZ') > -1 && this.keyDown.indexOf('ShiftLeft') > -1){
+		// 		this.historyState('reverse')
+		// 	}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyZ') > -1){
+		// 		this.historyState('')
+		// 	}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyC') > -1){
+		// 		this.copy()
+		// 	}else if(this.keyDown.indexOf('ControlLeft') > -1 && this.keyDown.indexOf('KeyV') > -1){
+		// 		this.paste()
+		// 	}else if(this.keyDown.indexOf('AltLeft') > -1 && this.keyDown.length == 1 && this.operation != 'move'){
+		// 		this.oldOperation = this.operation
+		// 		this.setOperation('move')
+		// 	}
+		// }
+	}
+	getColor = async ()=>{
+		try {
+			const dropper = new EyeDropper();
+			const result = await dropper.open();
+			let hex = result.sRGBHex.replace("#", "");
+			// 将十六进制颜色码拆分成红、绿、蓝三个部分
+			// const r = parseInt(hex.substring(0, 2), 16);
+			// const g = parseInt(hex.substring(2, 4), 16);
+			// const b = parseInt(hex.substring(4, 6), 16);
+			this.brushwork.color = result.sRGBHex;
+			// canvasPencilColor.value = 
+			setPencilColor()
+		} catch (e) {
+			// message.info(this.t('ColorboardUpload.jsContent1'))
 		}
 	}
 	canvasClear(){
-		if(MyCanvas.canvas?.dispose)MyCanvas.canvas.dispose()
+		// if(this.canvas?.dispose)MyCanvas?.[this.id].dispose()
 		let oldCanvasDom = this.canvasDomParent?.querySelector('.canvas-container')
 		let oldCanvasDom1 =  this.canvasDomParent?.querySelector('canvas')
 		if(oldCanvasDom)oldCanvasDom.remove()
 		if(oldCanvasDom1)oldCanvasDom1.remove()
 		this.reverseCanvasState=[];//撤回
 		this.normalCanvasState=[];//反撤回
-		MyCanvas.canvas = null
+		this.canvas = null
 		this.canvas = null
 		this.layer = {
 			list:[],
@@ -1779,23 +1983,24 @@ class MyCanvas {
 		document.removeEventListener("keyup", this.canvasKeyUp);
 		document.removeEventListener('mousemove', this.mouseMove);
 		document.removeEventListener('touchmove', this.touchmove);
-	
+		delete MyCanvas[this.id]
+		// MyCanvas[this.id] = null
 	}
 	//删除选中元素
 	deleteObject(){
-		if(!MyCanvas.canvas.getActiveObjects()){
+		if(!MyCanvas?.[this.id].getActiveObjects()){
 			return
 		}
-		let target = MyCanvas.canvas.getActiveObjects()
+		let target = MyCanvas?.[this.id].getActiveObjects()
 		target.forEach((item)=>{
-			MyCanvas.canvas.fxRemove(item, {
+			MyCanvas?.[this.id].fxRemove(item, {
 				onComplete:()=>{
-					MyCanvas.canvas.discardActiveObject(); // 丢弃当前选中的对象
-					MyCanvas.canvas.renderAll(); // 重新渲染 Canvas
+					MyCanvas?.[this.id].discardActiveObject(); // 丢弃当前选中的对象
+					MyCanvas?.[this.id].renderAll(); // 重新渲染 Canvas
 				}
 			})
-			MyCanvas.canvas.FX_DURATION = 200
-			// MyCanvas.canvas.remove(item)
+			MyCanvas[this.id].FX_DURATION = 200
+			// MyCanvas[this.id].remove(item)
 		})
 		this.updataLayer()
 		this.updateCanvasState('remove')
@@ -1807,7 +2012,7 @@ class MyCanvas {
 			width:cloned?.width + cloned?.strokeWidth*2,
 			height:cloned?.height + cloned?.strokeWidth*2,
 		}
-		let elements = MyCanvas.canvas.getObjects().filter(obj => this.isAddToLayer(obj));
+		let elements = MyCanvas[this.id].getObjects().filter(obj => this.isAddToLayer(obj));
 		let imgData = await this.groupToImg(elements,position,'clipPath')//矩形裁剪图片
 		let img = await this.createImage({minioUrl:imgData})
 		// cloned._objects = cloned._objects.filter(item => item.type == 'image')
@@ -1828,10 +2033,10 @@ class MyCanvas {
 	//复制粘贴
 	async copy(canvas){
 		var activeObject=null;
-		if(MyCanvas.canvas.getActiveObject()){
-			activeObject = MyCanvas.canvas.getActiveObject()
+		if(MyCanvas?.[this.id].getActiveObject()){
+			activeObject = MyCanvas?.[this.id].getActiveObject()
 		}else{
-			activeObject = MyCanvas.canvas.getObjects().filter(obj => obj.custom.dashed)[0];
+			activeObject = MyCanvas?.[this.id].getObjects().filter(obj => obj.custom.dashed)[0];
 		}
 		if(!activeObject){
 			return
@@ -1858,7 +2063,7 @@ class MyCanvas {
 		await this.createLayer({})
 		this._clipboard.clone(clonedObj => {
 			// this.setClone(this._clipboard,clonedObj)
-			MyCanvas.canvas.discardActiveObject() // 取消选择
+			MyCanvas?.[this.id].discardActiveObject() // 取消选择
 			clonedObj.set({
 				left: clonedObj.left,
 				top: clonedObj.top,
@@ -1867,24 +2072,26 @@ class MyCanvas {
 			if (clonedObj.type === 'activeSelection') {
 				// 活动选择需要一个对画布的引用
 				clonedObj.forEachObject((obj)=>{
-					MyCanvas.canvas.add(obj)
+					MyCanvas?.[this.id].add(obj)
 				})
 
 				clonedObj.setCoords()
 			} else {
-				MyCanvas.canvas.add(clonedObj)
+				MyCanvas?.[this.id].add(clonedObj)
 				// this.layer.selectLayer.group.add(clonedObj)
 			}
-			MyCanvas.canvas.setActiveObject(clonedObj)
-			MyCanvas.canvas.requestRenderAll()
+			MyCanvas?.[this.id].setActiveObject(clonedObj)
+			MyCanvas?.[this.id].requestRenderAll()
 		})
 		this._clipboard = null
 		this.updateCanvasState()
 	}
 	isSelectable(obj){//判断元素是否允许选中
-		return (obj.custom?.type != 'layer' && (!obj.custom?.isSelectable || this.layer.selectLayer.group.custom.groupType == 'Grid') && !obj.isType('path'))
-		//isSelectable已废弃，现在isSelectable作为判断是否是背景来使用
-		return (obj.custom?.type != 'layer' && !obj.isType('path'))
+		if(this.dashed.isDetail){
+			return (obj.custom?.type != 'layer' && (!obj.custom?.isSelectable || this.layer.selectLayer.group.custom.groupType == 'Grid') && !obj.isType('path') && !obj.custom?.dashed)
+		}else{
+			return (obj.custom?.type != 'layer' && (!obj.custom?.isSelectable || this.layer.selectLayer.group.custom.groupType == 'Grid') && !obj.isType('path') && (this.dashed.isDetail || !obj.custom?.dashed))
+		}
 	}
 	isAddToLayer(obj){//判断元素是否允许添加
 		return(obj.custom?.type != 'layer' && obj.custom?.layerId == this.layer.selectLayer.id)
@@ -1892,7 +2099,7 @@ class MyCanvas {
 	//撤回反撤回
 	//设置画布监听修改添加事件，用来做撤回功能
 	updateCanvasState(str){
-		let canvasData = MyCanvas.canvas.toJSON(['custom','selectable','minioUrl','perPixelTargetFind','subTargetCheck','evented']);
+		let canvasData = MyCanvas?.[this.id].toJSON(['custom','selectable','minioUrl','perPixelTargetFind','subTargetCheck','evented']);
 		if(canvasData.clipPath){
 			canvasData.clipPath.left = 0
 			canvasData.clipPath.top = 0
@@ -1930,11 +2137,11 @@ class MyCanvas {
 		}else{
 			return
 		}
-		MyCanvas.canvas.loadFromJSON(this.canvasState, () => {});
-		MyCanvas.canvas.setBackgroundColor({
+		MyCanvas?.[this.id].loadFromJSON(this.canvasState, () => {});
+		MyCanvas?.[this.id].setBackgroundColor({
 			source:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC',
 			repeat: 'repeat',
-			},MyCanvas.canvas.renderAll.bind(MyCanvas.canvas),
+			},MyCanvas?.[this.id].renderAll.bind(MyCanvas?.[this.id]),
 		)
 	}
 	temporarilyExport(data){
@@ -1942,8 +2149,8 @@ class MyCanvas {
 			scaleX:data?.scaleX?data?.scaleX:1,
 			scaleY:data?.scaleY?data?.scaleY:1,
 		}
-		let width = data?.width || MyCanvas.canvas.width
-		let height = data?.height || MyCanvas.canvas.height
+		let width = data?.width || MyCanvas?.[this.id].width
+		let height = data?.height || MyCanvas?.[this.id].height
 		var canvasDom = document.createElement("canvas");
 		let exportCanvas = new fabric.Canvas(canvasDom, {
 			width:width*scaleXY.scaleX,
@@ -1971,25 +2178,54 @@ class MyCanvas {
 		goal.erasable = obj.erasable
 		if(obj.minioUrl)goal.minioUrl = obj.minioUrl
 	}
+	//导出除了底图
+	async detailSubmit(){
+		return await new Promise(async (resolve, reject) => {
+			let list = MyCanvas?.[this.id].getObjects().filter(obj => this.isAddToLayer(obj) && !obj.custom.dashed && obj.type);
+			console.log(MyCanvas?.[this.id].getObjects());
+			let layerBg = list.filter(obj => obj.custom.isSelectable)[0]
+			let scaleXY = {
+				scaleX:layerBg?.scaleX?layerBg?.scaleX:1,
+				scaleY:layerBg?.scaleY?layerBg?.scaleY:1,
+				width:layerBg?.width?layerBg?.width:MyCanvas?.[this.id].width,
+				height:layerBg?.height?layerBg?.height:MyCanvas?.[this.id].height,
+			}
+			let imgData = await this.groupToImg(list,{},'setGrid',scaleXY)
+			resolve(imgData)
+		})
+		
+		// return imgData
+	}
 	//导出
 	selectExport(){
 		let layer = this.layer.list.filter(item=>item.id == this.layer.selectLayer.id)[0]
 		return layer.img
 	}
-	allExport(){
-		let exportCanvas = this.temporarilyExport()
-		MyCanvas.canvas.forEachObject((obj) =>{
-			if(obj.custom?.layerId != -1){
-				obj.clone((cloned)=>{
-					this.setClone(obj,cloned)
-					exportCanvas.add(cloned)
-				})
-
-			}
-		});
-		let data = exportCanvas.toDataURL("image/png");
-		this.closeTemporarilyExport(exportCanvas)
-		return data
+	async allExport(){
+		let list = MyCanvas?.[this.id].getObjects()
+		let layerBg = list.filter(obj => obj.custom.isSelectable)[0]
+		let scaleXY = {
+			scaleX:layerBg?.scaleX?layerBg?.scaleX:1,
+			scaleY:layerBg?.scaleY?layerBg?.scaleY:1,
+			width:layerBg?.width?layerBg?.width:MyCanvas?.[this.id].width,
+			height:layerBg?.height?layerBg?.height:MyCanvas?.[this.id].height,
+		}
+		let imgData = await this.groupToImg(list,{},'setGrid',scaleXY)
+		// let exportCanvas = this.temporarilyExport()
+		// let list = MyCanvas?.[this.id].getObjects()
+		// for (let index = 0; index < list.length; index++) {
+		// 	let item = list[index]
+		// 	new Promise((resolve, reject) => {
+		// 		item.clone((cloned)=>{
+		// 			this.setClone(item,cloned)
+		// 			exportCanvas.add(cloned)
+		// 			resolve()
+		// 		})
+		// 	})
+		// }
+		// let data = exportCanvas.toDataURL("image/png");
+		// this.closeTemporarilyExport(exportCanvas)
+		return imgData
 	}
 }
-export default new MyCanvas()
\ No newline at end of file
+export default MyCanvas
\ No newline at end of file
diff --git a/src/views/HomeMain.vue b/src/views/HomeMain.vue
index 188b971a..b958942f 100644
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -92,7 +92,7 @@
 					<!-- <i @click="Assignment" class="fi fi-rr-gift" title="Assignment"></i> -->
 					<i @click="UpgradePlan" title="Purchase" class="fi fi-rr-shop"></i>
                 </div>
-				<div v-if="userDetail.systemUser == 0 || userDetail.systemUser != 3" class="gallery_btn" style="margin-left: 3rem;" @click="subscribe">{{$t('Header.SubscribeNow')}}</div>
+				<div v-if="userDetail.systemUser == 0 || userDetail.systemUser == 3" class="gallery_btn" style="margin-left: 3rem;" @click="subscribe">{{$t('Header.SubscribeNow')}}</div>
 				<div v-else style="width: 30rem;"></div>
             </div>
 			<navRouter :routerList="navRouterList"></navRouter>