detail页面sketch支持镜像、detail图片合成由前端来做，但是新增sketch还是要过接口，sketch调整细节位置变更

src/component/Detail/model/index.vue

@@ -4,9 +4,9 @@
 			<div class="back" v-show="isEditPattern.value">
 				<i class="fi fi-br-angle-left" @click="setBack"></i>
 			</div>
-			<modelNav @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')" @sketchSysToLibrary="()=>$emit('sketchSysToLibrary')" @deleteItem="deleteItem"></modelNav>
+			<modelNav ref="modelNav" @canvasReload="()=>$emit('canvasReload')" @addSketch="()=>$emit('addSketch')" @sketchSysToLibrary="()=>$emit('sketchSysToLibrary')" @deleteItem="deleteItem"></modelNav>
 		</div>
-		<div class="modelindex_right">
+		<div class="modelindex_right" ref="modelindexRight">
 			<div class="detail_btn">
 				<!-- 全屏 --> 
 				<!-- <i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail('2')"></i> -->
@@ -14,7 +14,7 @@
 				<i class="icon iconfont icon-chehui" @click="revocation"></i>
 				<i class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i>
 				<!-- 编辑 -->
-				<i class="fi fi-rs-pencil-paintbrush" :title="$t('DesignDetail.editSketchTitle')" :class="{'pointerEventsNone':!selectDetail?.id}" @click="()=>$emit('addDetail')"></i>
+				<i class="fi fi-rs-pencil-paintbrush" :title="$t('DesignDetail.editSketchTitle')" :class="{'pointerEventsNone':!selectDetail?.id,active:isEditPattern.value == 'editSketch'}" @click="showDesignImgDetail('editSketch')"></i>
 				<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" :class="{active:isEditPattern.value == 'canvasEditor','pointerEventsNone':!selectDetail?.id}" @click="showDesignImgDetail('canvasEditor')"></i>
 
 				<i class="icon iconfont icon-clothes" :title="$t('Canvas.editFrontBack')" style="font-size: 3.2rem;" @click="showDesignImgDetail('redGreenExample')" :class="{active:isEditPattern.value == 'redGreenExample','pointerEventsNone':!selectDetail?.id}"></i>
@@ -51,7 +51,7 @@ export default defineComponent({
     components:{
 		position,modelNav
     },
-	emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation','modelOnLoad','sketchSysToLibrary','addDetail'],
+	emits:['detailEdit','canvasReload','addSketch','revocation','oppositeRevocation','modelOnLoad','sketchSysToLibrary'],
     setup(props,{emit}) {
 		const {t} = useI18n()
         const store = useStore();
@@ -68,36 +68,40 @@ export default defineComponent({
 		const getDetailListDom = reactive({
 			libraryList:null as any,
 			position:null as any,
+			modelindexRight:null as any,
+			modelNav:null as any,
 		})
 		const getSubmitData = (value:any,boolean)=>{
 			return getDetailListDom.position.getSubmitData(value,boolean)
 		}
 		const showDesignImgDetail = (str:any)=>{
-			new Promise((resolve, reject) => {
-				if(
-					getDetailListData.isEditPattern.value&&
-					detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
-				){
-					Modal.confirm({
-						title: t('collectionModal.jsContent2'),
-						icon: createVNode(ExclamationCircleOutlined),
-						okText: 'Yes',
-						cancelText: 'No',
-						mask:false,
-						centered:true,
-						onOk() {
-							resolve(true)
-							emit('detailEdit',str)
-						},
-						onCancel(){
-							resolve(false)
-						}
-					});
-				}else{
-					resolve(true)
-					emit('detailEdit',str)
-				}
-			})
+			emit('detailEdit',str)
+
+			// new Promise((resolve, reject) => {
+			// 	if(
+			// 		getDetailListData.isEditPattern.value&&
+			// 		detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0
+			// 	){
+			// 		Modal.confirm({
+			// 			title: t('collectionModal.jsContent2'),
+			// 			icon: createVNode(ExclamationCircleOutlined),
+			// 			okText: 'Yes',
+			// 			cancelText: 'No',
+			// 			mask:false,
+			// 			centered:true,
+			// 			onOk() {
+			// 				resolve(true)
+			// 				emit('detailEdit',str)
+			// 			},
+			// 			onCancel(){
+			// 				resolve(false)
+			// 			}
+			// 		});
+			// 	}else{
+			// 		resolve(true)
+			// 		emit('detailEdit',str)
+			// 	}
+			// })
 		}
 		const deleteItem = ()=>{
 			setRevocation()
@@ -117,22 +121,29 @@ export default defineComponent({
 		}
 		let time = null as any
 
-		const handleResize = ()=>{
+		const handleResize = ()=>{ 
 			clearTimeout(time)
 			time = setTimeout(()=>{
 				store.commit('DesignDetail/setDesignDetail',getDetailListData.designDetail)
-				getDetailListDom.position.updataPosition()
-
-			},1000)
+				getDetailListDom.position?.updataPosition?.()
+				getDetailListDom.modelNav?.setItemPosition?.()
+				getDetailListDom.position?.updateRect?.()
+			},500)
 		}
 		const setBack = ()=>{
-			emit('detailEdit')
+			showDesignImgDetail(getDetailListData.isEditPattern.value)
 		}
+		let observers = null as any
 		onMounted(()=>{
-			window.addEventListener('resize', handleResize);
+			observers = new ResizeObserver(entries => {
+                for (let entry of entries) {
+					handleResize()
+                }
+            });
+			observers.observe(getDetailListDom.modelindexRight);
 		})
 		onBeforeUnmount(()=>{
-			window.removeEventListener('resize', handleResize);
+			observers.disconnect();
 		})
         return{
 			...toRefs(detailData),