Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

src/component/Detail/model/modelPosition copy.vue

@@ -28,7 +28,7 @@
 			<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'}"
+				:style="observerWH.width > 0?{width:observerWH.width+'px',height:observerWH.height+'px'}:{width:'100%',height:'auto','object-fit': 'contain'}"
 				 :src="designDetail.designItemUrl" alt="">
 			</div>
 		</div>

src/component/Detail/model/modelPosition.vue

@@ -219,19 +219,14 @@ export default defineComponent({
 				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(/scaleX\(-1\)|scaleY\(-1\)/g, '')
+					.replace(/rotate[XYZ]?\([^)]+\)/g, '')
 					.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);
@@ -246,104 +241,85 @@ export default defineComponent({
 			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 width = parseFloat(frontStyle.style.width);
+				let 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]);
-					}
+					const match = frontStyle.style.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 getAdjustedCorner = (corner, rot) => {
+					const rad = rot * (Math.PI / 180);
+					const x = corner.x * Math.cos(rad) - corner.y * Math.sin(rad);
+					const y = corner.x * Math.sin(rad) + corner.y * Math.cos(rad);
 					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
-					};
-				}
-				
+					return { x: Math.abs(x) > threshold ? (x > 0 ? 1 : -1) : 0, y: Math.abs(y) > threshold ? (y > 0 ? 1 : -1) : 0 };
+				};
 				if (rotation !== 0) {
-					direction = getAdjustedCorner({x: direction[0], y: direction[1]}, rotation);
+					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 processAxis = (axis, val, deltaVal, dir, pos, keepRatio = false, otherAxisResult = null) => {
 					const mirrorKey = axis === 'width' ? 'x' : 'y';
 					const isWidth = axis === 'width';
-					
-					// 检查是否需要镜像翻转（当值小于等于0时）
+
+					let newVal = val * deltaVal;
+
+					// 翻转处理
 					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);
+
+					// 位置调整
+					const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) || (frontStyle.mirror[mirrorKey] && dir === 1);
+
 					if (keepRatio && otherAxisResult) {
-						newVal = isWidth ? 
-							otherAxisResult.newVal * originalRatio : 
-							otherAxisResult.newVal / originalRatio;
+						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 adjustPos = shouldMove ? pos - (newVal - val) : pos;
+
+					return { newVal, adjustPos, shouldFlip: newVal !== val && newVal <= 0 };
 				};
 
-					// 自由缩放
-					const widthResult = processAxis('width', width, delta[0], direction[0], left, width);
-					const heightResult = processAxis('height', height, delta[1], direction[1], top, height);
-					
+				if (isDiagonal) {
+					const mainAxis = Math.abs(delta[0] - 1) > Math.abs(delta[1] - 1) ? 'width' : 'height';
+					const crossAxis = mainAxis === 'width' ? 'height' : 'width';
+
+					const mainDir = mainAxis === 'width' ? direction[0] : direction[1];
+					const crossDir = crossAxis === 'width' ? direction[0] : direction[1];
+
+					const mainDelta = mainAxis === 'width' ? delta[0] : delta[1];
+
+					const mainResult = processAxis(mainAxis, mainAxis === 'width' ? width : height, mainDelta, mainDir, mainAxis === 'width' ? left : top);
+					const crossResult = processAxis(crossAxis, crossAxis === 'width' ? width : height, 1, crossDir, crossAxis === 'width' ? left : top, true, mainResult);
+
+					frontStyle.style.width = mainAxis === 'width' ? mainResult.newVal + 'px' : crossResult.newVal + 'px';
+					frontStyle.style.height = mainAxis === 'height' ? mainResult.newVal + 'px' : crossResult.newVal + 'px';
+					frontStyle.style.left = mainAxis === 'width' ? mainResult.adjustPos + 'px' : crossResult.adjustPos + 'px';
+					frontStyle.style.top = mainAxis === 'height' ? mainResult.adjustPos + 'px' : crossResult.adjustPos + 'px';
+				} else {
+					const widthResult = processAxis('width', width, delta[0], direction[0], left);
+					const heightResult = processAxis('height', height, delta[1], direction[1], top);
+
 					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 }) => {