From c5b736597746b43aea7b368a2c60fffaee3beb15 Mon Sep 17 00:00:00 2001
From: X1627315083 <1627315083@qq.com>
Date: Fri, 23 Jan 2026 13:34:28 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E9=83=A8=E7=BD=B2=E6=97=A5?=
 =?UTF-8?q?=E6=9C=9F=E4=BF=AE=E5=A4=8Ddetail=E5=8D=B0=E8=8A=B1=E7=B4=AF?=
 =?UTF-8?q?=E5=8A=A0=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/Detail/DesignDetail.vue         |   8 +-
 .../Detail/detailRight/editPrintElement.vue   |   5 +-
 .../overallSetting/RepeatSetting.vue          |  34 +-
 src/component/Detail/model/modelNav.vue       |   3 +-
 .../Detail/model/modelPosition copy.vue       | 705 ++++++++++++++++++
 src/component/Detail/model/modelPosition.vue  |   5 +-
 src/router/index.ts                           |   2 +-
 src/views/Upgrade.vue                         |  10 +-
 8 files changed, 752 insertions(+), 20 deletions(-)
 create mode 100644 src/component/Detail/model/modelPosition copy.vue

diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue
index 6a5fcbcd..03591432 100644
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -357,7 +357,7 @@ export default defineComponent({
 				// ]	
 				let isCurrent = list[i].id == detailData?.selectDetail?.id
 				let color = ''
-				let gradient = {}
+				let gradient = null
 				if((detailData.currentDetailType == 'color' || detailData.isEditPattern.value == 'canvasEditor') && isCurrent){
 					color = `${newData?.color.rgba.r} ${newData?.color.rgba.g} ${newData?.color.rgba.b}`
 					if(newData?.color.gradient){
@@ -379,8 +379,6 @@ export default defineComponent({
 						})
 					}
 				}
-				console.log(newData,'========')
-				if(newData)console.log(JSON.parse(JSON.stringify(newData)))
 				let data:any = {
 					changed:false,
 					color,
@@ -552,8 +550,8 @@ export default defineComponent({
 				}
 				await detailDom.canvasBox.privewDetail()
 				await upDateFrontBackSketch()
-				saveCanvasJSONToSession()
 				await uploadSelectDetail()
+				saveCanvasJSONToSession()
 				detailData.loadingShow = false
 			}
 		}
@@ -754,7 +752,7 @@ export default defineComponent({
 					detailData.detailLeftColorKey++
 				}
 			}
-			if(detailData.isEditPattern.value !== 'canvasEditor'){
+			if(detailData.isEditPattern.value == 'canvasEditor'){
 				delete detailData.selectDetail.newDetail
 				detailData.selectDetail.trims.prints = allInfo.trims || []
 				detailData.selectDetail.printObject.prints = allInfo.prints || []
diff --git a/src/component/Detail/detailRight/editPrintElement.vue b/src/component/Detail/detailRight/editPrintElement.vue
index 1fbefccb..ae4ababb 100644
--- a/src/component/Detail/detailRight/editPrintElement.vue
+++ b/src/component/Detail/detailRight/editPrintElement.vue
@@ -482,9 +482,8 @@ export default defineComponent({
 			}
 			if(arr.length > 0){
 				editPrintElementData.imgDomIndex = 0
-					editPrintElementData.printStyleList[props.type][newVal] = []
-					// editPrintElementData.printStyleList[props.type].single = []
-					// editPrintElementData.printStyleList[props.type].overall = []
+					editPrintElementData.printStyleList[props.type].single = []
+					editPrintElementData.printStyleList[props.type].overall = []
 					arr.forEach((item:any,index:number) => {
 						getItemPosition(item)
 					});
diff --git a/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue b/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue
index 2f5418db..16160cb0 100644
--- a/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue
+++ b/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue
@@ -1,6 +1,5 @@
 <template>
-	<div class="repeat-setting">
-		{{  }}
+	<div class="repeat-setting" v-if="!mask">
 		<div class="repeat-setting-item">
 			<span class="label">{{ t("Canvas.angle") }}</span>
 			<angle-tool
@@ -87,6 +86,13 @@
 		// return props.object?.scale/10;
 		return props.object?.scale[0] * 100;
 	});
+	const scalePrint = computed(() => {
+		let index = sketchWH.value[0] > sketchWH.value[1]?0:1;
+		return sketchWH.value[index] / printWH.value[index] * scale.value / 5;
+	});
+	const printWH = ref([0,0])
+	const sketchWH = ref([0,0])
+	const mask = ref(false)
 	const offset = ref([0,0])
 	const sketchSize:any = async ()=>{
 		let img = new Image();
@@ -102,10 +108,27 @@
 		});
 		return size
 	}
+	const printSize:any = async ()=>{
+		let img = new Image();
+		let size = [0,0];
+		img.src = props.sketchPath;	
+		console.log(props.sketchPath)
+		await new Promise((resolve, reject) => {
+			img.onload = () => {
+				size = [img.width, img.height]
+				resolve([img.width, img.height]);
+			}
+			img.onerror = reject;
+		});
+		return size
+	}
 	watch (() => props.object.path || props.object.location, async () => {
-		let size = await sketchSize();
-		offset.value[0] = props.object.location[0] / size[0] * 100;
-		offset.value[1] = props.object.location[1] / size[1] * 100;
+		mask.value = true
+		sketchWH.value = await sketchSize();
+		printWH.value = await printSize();
+		offset.value[0] = props.object.location[0] / sketchWH.value[0] * 100;
+		offset.value[1] = props.object.location[1] / sketchWH.value[1] * 100;
+		mask.value = false
 	},{immediate: true})
 	const gapX = computed(() => props.object.object?.gapX || 0);
 	const gapY = computed(() => props.object.object?.gapY || 0);
@@ -121,7 +144,6 @@
 	]);
 	const inputFillScale = (e) => {
 		const scale = e / 100;
-		console.log(scale.toFixed(2))
 		emit("inputFillScale", scale.toFixed(2));
 	};
 	const inputOffset = async (e:any)=>{
diff --git a/src/component/Detail/model/modelNav.vue b/src/component/Detail/model/modelNav.vue
index 3b3033d2..0e89a132 100644
--- a/src/component/Detail/model/modelNav.vue
+++ b/src/component/Detail/model/modelNav.vue
@@ -9,7 +9,7 @@
 			@click="selectDetailItem(item,index)">
 			<div class="iconList">
 				<i class="fi fi-rr-add" :class="{ active:item.scope == 'sys'}" @click.stop="sketchSystemToLibrary(item)"></i>
-				<i class="fi fi-rr-trash" @click.stop="deleteDetailItem(item?.id)"></i>
+				<i v-if="probjects?.httpType !== 'SINGLE_DESIGN'" class="fi fi-rr-trash" @click.stop="deleteDetailItem(item?.id)"></i>
 			</div>
 			<img :src="item.path" alt="">
 			<div class="type">{{ getTypeLang(item.type) }}</div>
@@ -41,6 +41,7 @@ export default defineComponent({
         const store = useStore();
 		const {t} = useI18n()
 		const detailData = reactive({
+			probjects:computed(()=>store.state.Workspace.probjects),
 			selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
 			frontBack_:computed(()=>store.state.DesignDetail.frontBack),
 			designDetail:computed(()=>store.state.DesignDetail.designDetail),
diff --git a/src/component/Detail/model/modelPosition copy.vue b/src/component/Detail/model/modelPosition copy.vue
new file mode 100644
index 00000000..f7524167
--- /dev/null
+++ b/src/component/Detail/model/modelPosition copy.vue	
@@ -0,0 +1,705 @@
+<template>
+    <div class="molepositon" :class="{active:!imgDesignImg}">
+		<div class="designOpenrtion_imgMask" v-if="frontBack?.body?.path" :style="frontBack?.body?.style">
+			<div class="designOpenrtion_print" v-for="item,index in frontBack.back" :style="frontBack.front[index].style">
+				<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
+			</div>
+			<img class="perview_img" @load="setPrintSize()" ref="detailBody" :key="designDetail.designItemId" :src="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'">
+			<!-- <div  class="detail_modal_item_front" ref="target"  v-for="item,index in frontBack.front"  @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)"  :style="item.style">
+				<img :src="item.imageUrl" alt="">
+			</div> -->
+			<div  class="detail_modal_item_front" :ref="el => { setElementRef(el, index) }" v-for="item,index in frontBack.front" :class="{'active':item.id == selectDetail?.id}" :style="item.style">
+				<img :src="item.imageUrl" alt="">
+			</div>
+			<div ref="moveableContainer" class="moveableContainer"></div>
+		</div>
+		<div class="designOpenrtion_imgMask" v-if="!frontBack?.body?.path">
+			<div class="designOpenrtion_print">
+				<img v-if="frontBack.back?.[0].imageUrl" :src="frontBack.back?.[0].imageUrl" style="object-fit: cover;" alt="">
+			</div>
+			<div class="detail_modal_item_front" style="position: relative;">
+				<img :src="frontBack.front?.[0].imageUrl || selectDetail?.path" style="object-fit: cover;" alt="">
+			</div>
+			<!-- <img @load="setSelectSketch()" :src="designDetail?.currentFullBodyView || selectDetail?.undividedLayer" style="object-fit: cover;" alt=""> -->
+		</div>
+    </div>
+	<div class="molepositon imgDesignImg" :class="{active:imgDesignImg}">
+		<div class="designOpenrtion_imgMask" style="width: 100%;height: 100%;">
+			<div class="detail_modal_item_front">
+				<img
+				style="object-fit: cover;"
+				:style="observerWH.width == '0px'?{width:observerWH.width+'px',height:observerWH.height+'px'}:{'object-fit': 'contain'}"
+				 :src="designDetail.designItemUrl" alt="">
+			</div>
+		</div>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,inject,watch,nextTick,createVNode,toRefs, reactive, onUnmounted} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import { getMousePosition } from "@/tool/mdEvent";
+import { KeyValueDB } from "@/tool/indexedDB";
+import Vue3Moveable from 'vue3-moveable';
+import Moveable from 'moveable';
+import { parse } from 'vue/compiler-sfc';
+import { scale } from 'echarts/types/src/scale/helper.js';
+export default defineComponent({
+    components:{
+    },
+	props:{
+	    imgDesignImg:{
+            default:false,
+			type:Boolean,
+		}
+	},
+	emits:['addSketch'],
+    setup(props,{emit}) {
+		const {t} = useI18n()
+        const store = useStore();
+		const detailData = reactive({
+			frontBack:computed(()=>store.state.DesignDetail.frontBack),
+			designDetail:computed(()=>store.state.DesignDetail.designDetail),
+			selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
+			isEditPattern:inject('isEditPattern') as any,
+			singleOveral:inject('singleOveral') as any,
+			detailBody:null as any,
+			observer:null as any,
+			observerWH:{
+				width:0,
+				height:0,
+			},
+		})
+		const selectItem = reactive({
+		    selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
+		    imgDomIndex:-1,
+		    printZIndex:store.state.DesignDetail.printZIndex,
+			imgDom:null as any,
+			direction:'',
+		})
+		
+		watch(()=>detailData.frontBack?.body?.path,(newVal)=>{
+			setPrintSize()
+		})
+		const setPrintSize = ()=>{
+			nextTick(()=>{
+				let sacle = 0
+				const img = new Image();
+				let dom = document.querySelector('.molepositon .perview_img') as any
+				if(!detailData.frontBack?.body?.path || !dom)return
+				img.onload = () => {
+					//监听模特图片宽度设置整体图片宽度
+					if (detailData.observer) {
+						detailData.observer.disconnect()
+					}
+					detailData.observerWH.width = dom.width
+					detailData.observerWH.height = dom.height
+					detailData.observer = new ResizeObserver((entries) => {
+						if(entries[0].contentRect.width == 0)return
+						detailData.observerWH.width = Math.floor(entries[0].contentRect.width)
+						detailData.observerWH.height = Math.floor(entries[0].contentRect.height)
+					})
+					detailData.observer.observe(dom)
+
+
+					if(detailData.designDetail.clothes.length == 0){
+						store.commit('DesignDetail/addDesignColthes')
+						emit('addSketch')
+						return
+					}
+					if(!detailData.selectDetail?.id){
+						let item = detailData.designDetail.clothes.reduce((max, current) => {
+							return current.priority > max.priority ? current : max;
+						});
+						store.commit('DesignDetail/setDesignColthes',item.id)
+					}
+					// resolve(img)
+					sacle = dom.parentNode.offsetWidth / img.width
+					detailData.frontBack.front.forEach((item:any,index:number) => {
+						for (const key in item.style) {
+							if(key == 'zIndex')return
+							let value = item.style[key]
+							if(typeof value !== 'number'){
+								value = value.replace('px','')
+								item.style[key] = value
+							}else{
+								item.style[key] = value*sacle+'px'
+							}
+							// item.style[key] = value*sacle+'px'
+						}
+						for (const key in detailData.frontBack.back[index].style) {
+							if(key == 'zIndex')return
+							if(key == 'transform')return
+							let value = detailData.frontBack.back[index].style[key]
+							if(typeof value !== 'number'){
+								value = value.replace('px','')
+								detailData.frontBack.back[index].style[key] = value
+							}else{
+								detailData.frontBack.back[index].style[key] = value*sacle+'px'
+							}
+							// detailData.frontBack.back[index].style[key] = value*sacle+'px'
+						}
+					});
+					setTimeout(() => {
+						initMoveableForSelected()
+					},500);
+				};
+				img.src = detailData.frontBack?.body?.path;
+			})
+		}
+		const getDetailListDom = reactive({
+			libraryList:null as any,
+			moveableContainer:null as any,//控件层
+		})
+		
+		const elementRefs = ref([]) as any;
+		const moveableInstance = ref(null) as any;
+		const setElementRef = (el, index) => {
+			elementRefs.value[index] = el;
+		};
+		const updateRect = ()=>{
+			setTimeout(() => {
+				if(moveableInstance.value)moveableInstance.value.updateRect()
+			}, 200);
+		}
+		const initMoveableForSelected = () => {
+			// 销毁旧的实例
+			if(selectItem.imgDomIndex == -1)return
+			if (moveableInstance.value) {
+				moveableInstance.value.destroy();
+			}
+			
+			const selectedEl = elementRefs.value[selectItem.imgDomIndex];
+			if (!selectedEl) return;
+			if(!selectedEl.style.left)return
+			moveableInstance.value = new Moveable(getDetailListDom.moveableContainer, {
+				target: selectedEl,
+				draggable: true,
+				scalable: true,
+				rotatable: true,
+				keepRatio: false, // 等比缩放
+				snappable: true,
+				snapThreshold: 5,
+				edge: false,
+			});
+			let startPosition = {//记录初始位置
+				left: 0,
+				top: 0,
+			}
+			moveableInstance.value.on('scaleStart', ({ target, direction }) => {
+				const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
+				if (!frontStyle.mirror){
+					let scaleX = frontStyle.style.transform.match(/scaleX\(([-\d.]+)\)/);
+					let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/);
+					frontStyle.mirror = { x: scaleX[1] == '-1' ? true : false, y: scaleY[1] == '-1' ? true : false };
+				}
+			});
+			moveableInstance.value.on('rotateStart', ({ target, direction }) => {
+				const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
+				if (!frontStyle.mirror){
+					let scaleX = frontStyle.style.transform.match(/scaleX\(([-\d.]+)\)/);
+					let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/);
+					frontStyle.mirror = { x: scaleX[1] == '-1' ? true : false, y: scaleY[1] == '-1' ? true : false };
+				}
+			});
+			moveableInstance.value.on('dragStart', ({ target, clientX, clientY }) => {
+				startPosition = {
+					left:parseFloat(selectedEl.style.left.replace('px','')) || 0,
+					top:parseFloat(selectedEl.style.top.replace('px','')) || 0,
+				}
+			});
+			// 拖拽
+			moveableInstance.value.on('drag', ({ target, beforeTranslate }) => {
+				let x = startPosition.left + beforeTranslate[0]
+				let y = startPosition.top + beforeTranslate[1]
+				detailData.frontBack.front[selectItem.imgDomIndex].style.left = x + 'px'
+				detailData.frontBack.front[selectItem.imgDomIndex].style.top = y + 'px'
+			});
+			const updateElementTransform = (element, rotateDeg = null) => {
+				
+				const currentTransform = element.style?.transform || '';
+				// 1. 提取当前的所有rotate
+				const currentRotates = (currentTransform.match(/rotate[XYZ]?\([^)]+\)/g) || []);
+				// 2. 获取除镜像和rotate外的其他所有变换
+				let otherTransforms = currentTransform
+					.replace(/scaleX\(-1\)|scaleY\(-1\)/g, '') // 移除镜像
+					.replace(/rotate[XYZ]?\([^)]+\)/g, '')    // 移除rotate
+					.replace(/\s+/g, ' ')
+					.trim();
+				// 3. 构建新transform
+				const transforms = [];
+				// 镜像部分
+				if (element.mirror.x) transforms.push('scaleX(-1)');
+				if (element.mirror.y) transforms.push('scaleY(-1)');
+				if (otherTransforms) transforms.push(otherTransforms);
+				if (rotateDeg !== null) {
+					transforms.push(`rotate(${rotateDeg}deg)`);
+				} else if (currentRotates.length > 0) {
+					transforms.push(...currentRotates);
+				}
+				element.style.transform = transforms.join(' ').trim();
+			};
+
+			moveableInstance.value.on('scale', ({ target, delta, direction }) => {
+				const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
+				if (!frontStyle.mirror) frontStyle.mirror = { x: false, y: false };
+				
+				const width = parseFloat(frontStyle.style.width);
+				const height = parseFloat(frontStyle.style.height);
+				let left = parseFloat(frontStyle.style.left) || 0;
+				let top = parseFloat(frontStyle.style.top) || 0;
+				let rotation = 0;
+				// 获取原始比例
+				const originalRatio = width / height;
+				if (frontStyle.style.transform) {
+					const transform = frontStyle.style.transform;
+					const match = transform.match(/rotate\(([-\d.]+)deg\)/);
+					if (match) {
+						rotation = parseFloat(match[1]);
+					}
+				}
+				// 根据旋转角度重新计算控制点的方向
+				function getAdjustedCorner(originalCorner, rotationAngle) {
+					const angleRad = rotationAngle * (Math.PI / 180);
+					const cosA = Math.cos(angleRad);
+					const sinA = Math.sin(angleRad);
+					const newX = originalCorner.x * cosA - originalCorner.y * sinA;
+					const newY = originalCorner.x * sinA + originalCorner.y * cosA;
+					const threshold = 0.5;
+					return {
+						x: Math.abs(newX) > threshold ? (newX > 0 ? 1 : -1) : 0,
+						y: Math.abs(newY) > threshold ? (newY > 0 ? 1 : -1) : 0
+					};
+				}
+				
+				if (rotation !== 0) {
+					direction = getAdjustedCorner({x: direction[0], y: direction[1]}, rotation);
+					direction = [direction.x, direction.y];
+				}
+				
+				// 判断是否是对角线方向（需要等比缩放）
+				const isDiagonal = Math.abs(direction[0]) === 1 && Math.abs(direction[1]) === 1;
+				
+				// 处理轴缩放，包含镜像翻转逻辑
+				const processAxis = (axis, val, deltaVal, dir, originalPosition, originalSize, keepRatio = false, otherAxisResult = null) => {
+					let newVal = val * deltaVal;
+					const mirrorKey = axis === 'width' ? 'x' : 'y';
+					const isWidth = axis === 'width';
+					
+					// 检查是否需要镜像翻转（当值小于等于0时）
+					if (newVal <= 0) {
+						frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey];
+						newVal = Math.abs(newVal);
+						
+						updateElementTransform(frontStyle);
+						
+						// 镜像翻转后，位置需要根据原始锚点调整
+						if (dir === -1) {
+							// 从左上/右上缩放时，位置保持不变
+							return { 
+								newVal, 
+								adjustPos: originalPosition,
+								shouldFlip: true 
+							};
+						} else {
+							// 从左下/右下缩放时，位置需要调整
+							const newPosition = originalPosition + (originalSize - newVal) * (frontStyle.mirror[mirrorKey] ? -1 : 1);
+							return { 
+								newVal, 
+								adjustPos: newPosition,
+								shouldFlip: true 
+							};
+						}
+					}
+					const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) || 
+									(frontStyle.mirror[mirrorKey] && dir === 1);
+					if (keepRatio && otherAxisResult) {
+						newVal = isWidth ? 
+							otherAxisResult.newVal * originalRatio : 
+							otherAxisResult.newVal / originalRatio;
+					}
+					let adjustPos;
+					if (shouldMove) {
+						adjustPos = originalPosition - (newVal - originalSize);
+					} else {
+						adjustPos = originalPosition;
+					}
+					return { 
+						newVal, 
+						adjustPos,
+						shouldFlip: false
+					};
+				};
+
+					// 自由缩放
+					const widthResult = processAxis('width', width, delta[0], direction[0], left, width);
+					const heightResult = processAxis('height', height, delta[1], direction[1], top, height);
+					
+					frontStyle.style.left = widthResult.adjustPos + 'px';
+					frontStyle.style.top = heightResult.adjustPos + 'px';
+					frontStyle.style.width = widthResult.newVal + 'px';
+					frontStyle.style.height = heightResult.newVal + 'px';
+				// }
+			});
+			
+			// 旋转
+			moveableInstance.value.on('rotate', ({ target, beforeRotate }) => {
+				let frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
+				// 确保镜像状态存在
+				if (!frontStyle.mirror) frontStyle.mirror = { x: false, y: false };
+				
+				const { x: isMirroredX, y: isMirroredY } = frontStyle.mirror;
+				
+				// 计算实际旋转角度
+				let actualRotate = beforeRotate;
+				
+				// 关键逻辑：当镜像状态不同时（一个true一个false），旋转方向反转
+				if (isMirroredX !== isMirroredY) {
+					actualRotate = -beforeRotate;
+				}
+				
+				// 确保角度在 0-360 度范围内
+				actualRotate = actualRotate % 360;
+				
+				// 如果角度为负数，转换为正数
+				if (actualRotate < 0) {
+					actualRotate += 360;
+				}
+				
+				// 确保角度在 [0, 360) 范围内
+				actualRotate = ((actualRotate % 360) + 360) % 360;
+				
+				updateElementTransform(frontStyle, actualRotate.toFixed(2));
+			});
+			// 调整大小
+			moveableInstance.value.on('resize', ({ target, width, height }) => {
+				// console.log(width, height)
+				// detailData.frontBack.front[selectItem.imgDomIndex].style.width = width
+				// detailData.frontBack.front[selectItem.imgDomIndex].style.height = height
+			});
+			moveableInstance.value.on('dragEnd', ({ target, clientX, clientY }) => {
+				startPosition = {
+					left:0,
+					top:0,
+				}
+				upDataDetail()
+			});
+			moveableInstance.value.on('scaleEnd', () => {
+				upDataDetail()
+			});
+			moveableInstance.value.on('rotateEnd', () => {
+				upDataDetail()
+			});
+		};
+		watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
+			if(!newValue && newValue?.id == oldValue?.id)return
+			selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
+			initMoveableForSelected()
+		},{immediate: true,})
+
+		const setRevocation = async ()=>{
+			let frontBack = JSON.parse(JSON.stringify(detailData.frontBack))	
+			let revocation:any = JSON.parse((await KeyValueDB.get("revocation") as any) || '[]')
+			revocation.push({designData:null,position:frontBack})
+			KeyValueDB.set('revocation', JSON.stringify(revocation));
+		}
+		const upDataDetail = async ()=>{
+			//同步到selectDetail数据中，
+			// getDetailListData.designDetail
+			let {scale,offset,priority,transpose,rotate,position,imageSize} = await getSubmitData(selectItem.selectDetail)
+			selectItem.selectDetail.layersObject[0].scale = scale
+			selectItem.selectDetail.layersObject[1].scale = scale
+			selectItem.selectDetail.layersObject[0].offset = offset
+			selectItem.selectDetail.layersObject[1].offset = offset
+			selectItem.selectDetail.layersObject[0].priority = priority
+			selectItem.selectDetail.layersObject[1].priority = priority
+			selectItem.selectDetail.layersObject[0].rotate = rotate
+			selectItem.selectDetail.layersObject[1].rotate = rotate
+			selectItem.selectDetail.layersObject[0].transpose = transpose
+			selectItem.selectDetail.layersObject[1].transpose = transpose
+			selectItem.selectDetail.layersObject[0].position = position
+			selectItem.selectDetail.layersObject[1].position = position
+			selectItem.selectDetail.layersObject[0].imageSize = imageSize
+			selectItem.selectDetail.layersObject[1].imageSize = imageSize
+			setRevocation()
+		}
+		const sort = (arr:any)=>{
+			arr.sort((a:any, b:any) => {
+				var a_num = a.style.zIndex;
+				var b_num = b.style.zIndex;
+				return a_num - b_num;
+			});
+			return arr
+		}
+		const getSubmitData = async (value:any)=>{
+			let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
+			if(!detailData.frontBack?.body?.layersObject?.[0]?.imageSize){
+				return{
+					scale:value.layersObject[0].scale,
+					offset:value.layersObject[0].offset,
+					priority:value.layersObject[0].priority,
+				} 
+			}
+			let ratio = detailData.frontBack.body.layersObject[0].imageSize[0]/parentNode.width
+
+			let scale = 0
+			let dom:any = document.querySelector('.molepositon .perview_img')
+			const img = new Image();
+			img.src =  detailData.frontBack?.body?.path;
+			await new Promise<void>((resolve, reject) => {
+				img.onload = () => {
+					scale = dom.parentNode.offsetWidth / img.width
+					resolve()
+				};
+			})
+			// let arr:any = sort(detailData.frontBack.front)
+			let arr:any = sort(JSON.parse(JSON.stringify(detailData.frontBack.front)))
+			let num = 10
+			arr.forEach((item:any)=>{
+				item.priority = num++
+			})
+			let data:any = {
+				scale:null,
+				offset:null,
+				priority:'',
+				maskUrl:'',
+				maskMinioUrl:'',
+				position:null,
+				imageSize:null,
+			}
+			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 positionX = Number((arr[index]?.style?.left.replace(/px/g,'')/scale)).toFixed(2)
+					let positionY = Number((arr[index]?.style?.top.replace(/px/g,'')/scale)).toFixed(2)
+					let imageSizeW = Number((arr[index]?.style?.width.replace(/px/g,'')/scale)).toFixed(2)
+					let imageSizeH = Number((arr[index]?.style?.height.replace(/px/g,'')/scale)).toFixed(2)
+
+					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)
+
+					let transformStr = arr[index]?.style?.transform
+					let scaleX = transformStr.match(/scaleX\(([-\d.]+)\)/)
+					let scaleY = transformStr.match(/scaleY\(([-\d.]+)\)/)
+					let rotate = transformStr.match(/rotate\(([-\d.]+)deg\)/);
+					data.transpose = [parseFloat(scaleX?.[1] || 1),parseFloat(scaleY?.[1] || 1)]
+					data.rotate = parseFloat(rotate?.[1] || 0)
+					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?left:0,top?top:0]
+					data.position = [positionY,positionX]
+					data.imageSize = [imageSizeW,imageSizeH]
+					// data.offset = [left?left:0,top?top:0]
+					data.maskUrl = arr[index].maskUrl
+					data.maskMinioUrl = arr[index].maskMinioUrl
+					// data.priority = arr[index].style.zIndex
+					data.priority = arr[index].priority
+					arr[index].similarity = true
+					// item.offset = [(arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
+					break
+				}
+			}
+			if(!state){
+				data.scale = [1,1]
+				data.offset = [0,0]
+				data.priority = 10+arr.length
+			}
+			return data
+		}
+		const deleteNav = ()=>{
+
+		}
+		const updataPosition = ()=>{
+			let url = detailData.frontBack?.body?.path
+			let sacle = 0
+			const img = new Image();
+				img.onload = () => {
+					let dom:any = document.querySelector('.molepositon .perview_img')
+					// resolve(img)
+					sacle = dom.parentNode.offsetWidth / img.width
+					detailData.frontBack.front.forEach((item:any,index:number) => {
+						for (const key in item.style) {
+							if(key == 'zIndex')return
+							if(key == 'transform')return
+							item.style[key] = item.style[key]*sacle+'px'
+						}
+						for (const key in detailData.frontBack.back[index].style) {
+							if(key == 'zIndex')return
+							if(key == 'transform')return
+							detailData.frontBack.back[index].style[key] = detailData.frontBack.back[index].style[key]*sacle+'px'
+						}
+					});
+				};
+				img.src = url;
+		}
+		onUnmounted(()=>{
+			if (detailData.observer) {
+				detailData.observer.disconnect()
+			}
+			if (moveableInstance.value) {
+				moveableInstance.value.destroy();
+			}
+		})
+        return{
+			...toRefs(detailData),
+			...toRefs(selectItem),
+			...toRefs(getDetailListDom),
+			setElementRef,
+
+			setPrintSize,
+			deleteNav,
+			getSubmitData,
+			getMousePosition,
+			updataPosition,
+			updateRect,
+        }
+    },
+	
+	directives:{
+		detailBody:{
+			mounted (el,data:any) {
+				let sacle = 0
+				const img = new Image();
+				img.onload = () => {
+					// resolve(img)
+					sacle = el.parentNode.offsetWidth / img.width
+					data.instance.frontBack.front.forEach((item:any,index:number) => {
+						for (const key in item.style) {
+							if(key == 'zIndex')return
+							item.style[key] = item.style[key]*sacle+'px'
+						}
+						for (const key in data.instance.frontBack.back[index].style) {
+							if(key == 'zIndex')return
+							data.instance.frontBack.back[index].style[key] = data.instance.frontBack.back[index].style[key]*sacle+'px'
+						}
+					});
+				};
+				img.src = data.value;
+			},
+			updated (el,data:any) {
+				let sacle = 0
+				const img = new Image();
+				img.onload = () => {
+					// resolve(img)
+					sacle = el.parentNode.offsetWidth / img.width
+					data.instance.frontBack.front.forEach((item:any,index:number) => {
+						for (const key in item.style) {
+							if(key == 'zIndex')return
+							item.style[key] = item.style[key].replace(/px/g,'')*sacle+'px'
+						}
+						for (const key in data.instance.frontBack.back[index].style) {
+							if(key == 'zIndex')return
+							data.instance.frontBack.back[index].style[key] = data.instance.frontBack.back[index].style[key].replace(/px/g,'')*sacle+'px'
+						}
+					});
+				};
+				img.src = data.value;
+			}
+		}
+	},
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .molepositon{
+		// width: 30rem;
+		// width: calc(66 * .470rem);
+		width: calc(66 * .457rem);
+		height: 66rem;
+		display: flex;
+		flex-direction: column;
+		// margin: auto 0;
+		// padding-top: 3rem;
+		position: relative;
+		display: none;
+		&.active{
+			display: flex;
+			z-index: 2;
+			align-items: center;
+			justify-content: center;
+		}
+		&.imgDesignImg{
+			> .designOpenrtion_imgMask{
+				.detail_modal_item_front{
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					img{
+						// height: auto;
+					}
+				}
+			}	
+		}
+		.moveableContainer{
+			:deep(.moveable-origin){
+				opacity: 0;
+			}
+			:deep(.moveable-control){
+				border-radius: 0;
+			}
+			:deep(.moveable-rotation-control){
+				border-radius: 50%;
+			}
+		}
+		> .designOpenrtion_imgMask{
+			width: auto;
+			height: auto;
+			position: relative;
+			// height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			>img{
+				z-index: 2;
+				position: relative;
+				width: 100%;
+				height: auto;
+				// height: 100%;
+				// object-fit: contain;
+			}
+			>div{
+				position: absolute;
+				top: 0;
+			}
+			
+			.detail_modal_item_front,.designOpenrtion_print{
+				z-index: 2;
+				height: 100%;
+				width: 100%;
+				pointer-events: none;
+				&.active{
+					pointer-events: auto;
+				}
+				img{
+					width: 100%;
+					// height: ;
+					height: 100%;
+					float: left;
+					user-select:none;
+					-webkit-user-drag: none;
+				}
+				.modal_imgItem{
+					position: absolute;
+					overflow: hidden;
+					top: 0;
+					
+				}
+			}
+			.designOpenrtion_print{
+				z-index: 1 !important;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/component/Detail/model/modelPosition.vue b/src/component/Detail/model/modelPosition.vue
index 52869e50..f7524167 100644
--- a/src/component/Detail/model/modelPosition.vue
+++ b/src/component/Detail/model/modelPosition.vue
@@ -27,8 +27,9 @@
 		<div class="designOpenrtion_imgMask" style="width: 100%;height: 100%;">
 			<div class="detail_modal_item_front">
 				<img
-				:style="{width:observerWH.width+'px',height:observerWH.height+'px'}"
-				 :src="designDetail.designItemUrl" alt="" style="object-fit: cover;">
+				style="object-fit: cover;"
+				:style="observerWH.width == '0px'?{width:observerWH.width+'px',height:observerWH.height+'px'}:{'object-fit': 'contain'}"
+				 :src="designDetail.designItemUrl" alt="">
 			</div>
 		</div>
 	</div>
diff --git a/src/router/index.ts b/src/router/index.ts
index 7daf5d8c..b264f4f2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -532,7 +532,7 @@ function isTimeRangePassed(timeRange) {
 router.beforeEach((to: any, from, next) => {
 	store.commit("set_view_loading", true);
   //系统维护时间
-	const time = '2025-12-19T21:00:00 - 2025-12-19T22:00:00';
+	const time = '2026-01-23T21:00:00 - 2026-01-23T22:00:00';
 	if (isTimeRangePassed(time) == 'in_progress') {
 	  // 	系统维护
 		const toName = to.name === 'upgrade';
diff --git a/src/views/Upgrade.vue b/src/views/Upgrade.vue
index a32762e0..14527a10 100644
--- a/src/views/Upgrade.vue
+++ b/src/views/Upgrade.vue
@@ -11,12 +11,18 @@
 			<!-- <div class="upgrade-content-textab">The AiDA system cannot be accessed temporarily due to system server maintenance. We apologize for any inconvenience this may cause and thank you for your understanding.</div> -->
 			<!-- <div class="upgrade-content-textab">Due to the system server upgrade, we will start the upgrade from 9:30 am Hong Kong time on the weekend of October 20th until October 21st. During this time,<br> the AiDA system will be temporarily inaccessible. We apologize for any inconvenience this may cause and thank you for your understanding.</div> -->
 			<!-- 有截至时间 -->
-			<div class="upgrade-content-textab">Due to system server upgrades, maintenance will be carried out from 21:00 to 22:00 on December 19.<br>The AiDA system will be temporarily unavailable during this period. We sincerely apologize for any inconvenience caused and thank you for your understanding.</div>
+			<div class="upgrade-content-textab">
+				Due to system server upgrades, maintenance will be carried out from 21:00 to 22:00 on January 19, 2026 (today).
+				<br>
+				The AiDA system will be temporarily unavailable during this period. We sincerely apologize for any inconvenience caused and thank you for your understanding.</div>
 			<br>
 			<br>
 			<br>
 			<!-- <div class="upgrade-content-textab">由于系统服务器维护，AiDA系统暂时无法访问。对于由此造成的任何不便，我们深表歉意，并感谢您的理解</div> -->
-			<div class="upgrade-content-textab">由于系统服务器升级，我们将于12月19日21:00 至12月19日22:00进行升级。<br>在此期间，AiDA系统将暂时无法访问。给您带来的不便，我们深表歉意，并感谢您的理解</div>
+			<div class="upgrade-content-textab">
+				由于系统服务器升级，我们将于1月23日21:00 至1月23日22:00进行升级。
+				<br>
+				在此期间，AiDA系统将暂时无法访问。给您带来的不便，我们深表歉意，并感谢您的理解</div>
 		</div>
 	</div>
 </template>