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

2026-01-23 21:43:51 +08:00
parent 12ea0f7c35 13b4767992
commit 29e68757a6
26 changed files with 1188 additions and 249 deletions
--- a/src/component/Canvas/CanvasEditor/components/BrushControlPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/BrushControlPanel.vue
@@ -154,6 +154,8 @@ const isVisible = computed(() => {
    OperationType.ERASER,
    OperationType.RED_BRUSH,
    OperationType.GREEN_BRUSH,
+    OperationType.PART_BRUSH,
+    OperationType.PART_ERASER,
  ].includes(props.activeTool);
 });

--- a/src/component/Canvas/CanvasEditor/components/PalletPanel/pallet.vue
+++ b/src/component/Canvas/CanvasEditor/components/PalletPanel/pallet.vue
@@ -119,7 +119,7 @@ export default defineComponent({
 		})
 		const palletRef = ref(null)
 		watch(()=>palletData.color_,(newVal:any)=>{
-			if(!newVal?.rgba?.r)return
+			if(newVal?.rgba?.r == null)return
 			if(palletData.color?.gradient?.gradientShow){
 				palletData.color.gradient.gradientList[palletData.color.gradient.selectIndex].rgba = {
 					r:newVal.rgba.r,
@@ -143,7 +143,7 @@ export default defineComponent({
 		},{deep: true })
 		const setOperate = ()=>{
 			if(!palletData.color.rgba)return message.info(t('DesignDetailAlter.jsContent7'))
-			palletData.color.rgba = palletData.color?.rgba?.r?palletData.color.rgba:{r:0,g:0,b:0,a:1}
+			palletData.color.rgba = palletData.color?.rgba?.r != null?palletData.color.rgba:{r:0,g:0,b:0,a:1}
 			palletData.gradient.selectIndex = 0
 			palletData.gradient.gradientShow = true
 			if(!palletData.color.gradient){
@@ -257,7 +257,7 @@ export default defineComponent({

 		}
 		const openPallet = ()=>{
-			if(palletData.palletShow && props.selectColor?.rgba?.r){
+			if(palletData.palletShow && props.selectColor?.rgba?.r != null){
 				if(props.selectColor.gradient){
 					palletData.color_.rgba = props.selectColor.gradient.gradientList[0].rgba
 				}else{
--- a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue
+++ b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue
@@ -14,7 +14,7 @@
 			<span class="label">{{ t("Canvas.scale") }}</span>
 			<slider
 				:min="1"
-				:max="500"
+				:max="1000"
 				:step="1"
 				is-input
 				:tipFormatter="(v) => `${scale}%`"
@@ -52,19 +52,19 @@
 		<div class="repeat-setting-item">
 			<span class="label">{{ t("Canvas.offset") }}</span>
 			<offset-tool
-				:left="offsetX"
-				:top="offsetY"
-				@input="(e) => emit('inputFillOffset', e)"
-				@change="(e) => emit('changeFillOffset', e)"
+				:left="offset.x"
+				:top="offset.y"
+				@input="inputFillOffset"
+				@change="changeFillOffset"
 				:show-dish="false"
 			/>
 		</div>
 		<div class="repeat-setting-item offset">
 			<offset-tool
-				:left="offsetX"
-				:top="offsetY"
-				@input="(e) => emit('inputFillOffset', e)"
-				@change="(e) => emit('changeFillOffset', e)"
+				:left="offset.x"
+				:top="offset.y"
+				@input="inputFillOffset"
+				@change="changeFillOffset"
 				:show-input="false"
 			/>
 		</div>
@@ -79,29 +79,6 @@
 	import Slider from "../tools/Slider.vue";
 	import { useI18n } from "vue-i18n";
 	const { t } = useI18n();
-
-	const props = defineProps({
-		object: {
-			required: true,
-			type: Object,
-		},
-	});
-	const angle = computed(
-		() => getTransformScaleAngle(props.object.fill?.patternTransform).angle
-	);
-	const scale = computed(() => {
-		const patternTransform = props.object.fill?.patternTransform;
-		const scaleValue = getTransformScaleAngle(patternTransform).scale * 100;
-		return Number(Number(scaleValue).toFixed(2));
-	});
-	const gapX = computed(() => props.object.fill_?.gapX || 0);
-	const gapY = computed(() => props.object.fill_?.gapY || 0);
-	const offsetX = computed(
-		() => (props.object.fill?.offsetX / props.object.width) * 100
-	);
-	const offsetY = computed(
-		() => (props.object.fill?.offsetY / props.object.height) * 100
-	);
 	const emit = defineEmits([
 		"inputFillAngle",
 		"changeFillAngle",
@@ -112,13 +89,63 @@
 		"inputFillGap",
 		"changeFillGap",
 	]);
-	const inputFillScale = (e) => {
+
+	const props = defineProps({
+		object: {
+			required: true,
+			type: Object,
+		},
+	});
+	const angle = computed(
+		() => getTransformScaleAngle(props.object.fill?.patternTransform).angle
+	);
+	const gapX = computed(() => props.object.fill_?.gapX || 0);
+	const gapY = computed(() => props.object.fill_?.gapY || 0);
+
+	// 缩放比例
+	const scale = computed(() => {
+		const object = props.object;
+		const patternTransform = object.fill?.patternTransform;
+		const scaleValue = getTransformScaleAngle(patternTransform).scale;
+		const scaleX = scaleValue / (object.width / object.fill_.width / 5);
+		const scaleY = scaleValue / (object.height / object.fill_.height / 5);
+		const scaleXY = object.width > object.height ? scaleX : scaleY;
+		return Number(Number(scaleXY * 100).toFixed(2));
+	});
+	const inputFillScale = (e) => setFillScale(e, true);
+	const changeFillScale = (e) => setFillScale(e, false);
+	const setFillScale = (e, isInput) => {
+		const object = props.object;
 		const scale = e / 100;
-		emit("inputFillScale", scale);
+		const scaleX = (object.width / object.fill_.width / 5) * scale;
+		const scaleY = (object.height / object.fill_.height / 5) * scale;
+		const scaleXY = object.width > object.height ? scaleX : scaleY;
+		emit(isInput ? "inputFillScale" : "changeFillScale", scaleXY);
 	};
-	const changeFillScale = (e) => {
-		const scale = e / 100;
-		emit("changeFillScale", scale);
+
+	// 偏移量
+	const offset = computed(() => {
+		const object = props.object;
+		const patternTransform = object.fill?.patternTransform;
+		const scale = getTransformScaleAngle(patternTransform).scale;
+		const offsetX = object.fill?.offsetX;
+		const offsetY = object.fill?.offsetY;
+		const twidth = object.fill_?.width;
+		const theight = object.fill_?.height;
+		const x = ((offsetX - (twidth * scale) / 2) * 100) / object.width;
+		const y = ((offsetY - (theight * scale) / 2) * 100) / object.height;
+		return { x, y };
+	});
+	const inputFillOffset = (e) => setFillOffset(e, true);
+	const changeFillOffset = (e) => setFillOffset(e, false);
+	const setFillOffset = (e, isInput) => {
+		const { left, top } = e;
+		const object = props.object;
+		const patternTransform = object.fill?.patternTransform;
+		const scale = getTransformScaleAngle(patternTransform).scale;
+		const x = (left / 100) * object.width + (object.fill_?.width * scale) / 2;
+		const y = (top / 100) * object.height + (object.fill_?.height * scale) / 2;
+		emit(isInput ? "inputFillOffset" : "changeFillOffset", { x, y });
 	};
 </script>

@@ -126,6 +153,7 @@
 	.repeat-setting {
 		user-select: none;
 		width: 228px;
+		overflow: hidden;
 		> .title {
 			line-height: 35px;
 			font-size: 14px;
--- a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
+++ b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue
@@ -439,16 +439,16 @@
 		if (!obj.oldPattern) obj.oldPattern = obj.get("fill");
 		const pattern = new fabric.Pattern({
 			...obj.get("fill"),
-			offsetX: (value.left / 100) * obj.width,
-			offsetY: (value.top / 100) * obj.height,
+			offsetX: value.x,
+			offsetY: value.y,
 		});
 		obj.set("fill", pattern);
 		props.canvas.renderAll();
 	};
 	const changeFillOffset = (value, obj) => {
 		const pattern = new fabric.Pattern({
-			offsetX: (value.left / 100) * obj.width,
-			offsetY: (value.top / 100) * obj.height,
+			offsetX: value.x,
+			offsetY: value.y,
 		});
 		changeFill(obj, pattern);
 	};
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -509,9 +509,10 @@ onMounted(async () => {
  let trailingTimeout = null;
  observer = new ResizeObserver((entries) => {
    clearTimeout(trailingTimeout);
-    trailingTimeout = setTimeout(() => {
-	  optimizeCanvasRendering(canvasManager.canvas, ()=> handleWindowResize());
-    }, 1000);
+    trailingTimeout = setTimeout(async () => {
+		if(canvasManager.awaitCanvasRun) await canvasManager.awaitCanvasRun();
+		handleWindowResize()
+    }, 100);
  });
  observer.observe(canvasContainerRef.value);
  // 使用window的resize事件代替ResizeObserver
--- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
@@ -70,8 +70,10 @@ export class CanvasManager {
    this.isFixedErasable = options.isFixedErasable || false; // 是否允许擦除固定图层
    this.eraserStateManager = null; // 橡皮擦状态管理器引用
    this.handleCanvasInit = null; // 画布初始化回调函数
+	this.partManager = options.partManager || null; 
 	this.props = options.props || {};
 	this.emit = options.emit || (() => {});
+	this.awaitCanvasRun = null;
    // 初始化画布
    this.initializeCanvas();
  }
@@ -174,7 +176,12 @@ export class CanvasManager {
  _initCanvasEvents() {
    // 添加笔刷图像转换处理回调
    this.canvas.onBrushImageConverted = async (fabricImage) => {
+	  const activeTool = this.toolManager?.activeTool?.value;
+	  if(activeTool === OperationType.PART_BRUSH){
+		this.partManager?.addPartImage(fabricImage);
+      }else{
        await this.addImageToLayer({ fabricImage, targetLayerId: null });
+	  }
      // 返回false表示使用默认行为（直接添加到画布）
      return false;
    };
@@ -1173,6 +1180,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 				blendMode: v.globalCompositeOperation,
 				gapX: 0,// 平铺模式下的间距
 				gapY: 0,// 平铺模式下的间距
+				fill_repeat: "",
 			}
 		}
 		let left = (v.left - (flLeft - flWidth * flScaleX / 2));
@@ -1208,18 +1216,19 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 			let scaleY = scale * 5 * v.fill_.height / flHeight;
 			let scaleXY = flWidth > flHeight ? scaleX : scaleY;

-			let left = fill.offsetX + v.fill_.width * scale / 2;
-			let top = fill.offsetY + v.fill_.height * scale / 2;
+			let left = fill.offsetX - v.fill_.width * scale / 2;
+			let top = fill.offsetY - v.fill_.height * scale / 2;

 			obj.scale = [scaleXY, scaleXY];
 			obj.angle = angle;
 			obj.location = [left, top];
 			obj.object.gapX = fill_.gapX;
 			obj.object.gapY = fill_.gapY;
+			obj.object.fill_repeat = fill.repeat;
 		}
-		if(obj.level2Type === "Pattern"){
+		if(sourceData.type === "print"){
 			prints.push(obj);
-		}else if(obj.level2Type === "Embroidery"){
+		}else if(sourceData.type === "trims"){
 			trims.push(obj);
 		}
 	})
@@ -1479,6 +1488,9 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
  */
  async createOtherLayers(otherData, isUpdate = false) {
 	if (!otherData) return console.warn("otherData 为空不需要添加");
+	this.canvas.loading.value = true;
+	let resolve = ()=>{};
+	this.awaitCanvasRun = ()=>(new Promise((v) => resolve = v))
 	const otherData_ = JSON.parse(JSON.stringify(otherData));
 	console.log("==========创建其他图层", otherData_);
 	
@@ -1510,6 +1522,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	const singleLayers = [];// 平铺图层
 	otherData_.printObject?.prints?.forEach((print, index) => {// 印花
 		print.name = t("Canvas.Print") + (index + 1);
+		print.type = "print";
 		if(print.ifSingle){
 			printTrimsLayers.unshift({...print});
 		}else{
@@ -1518,12 +1531,17 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	})
 	otherData_.trims?.prints?.forEach((trims, index) => {// 元素
 		trims.name = t("Canvas.Elements") + (index + 1);
+		trims.type = "trims";
 		printTrimsLayers.unshift({...trims});
 	})
 	if(isUpdate ? updateSpecialGroup : true){
 		await this.createPrintTrimsLayers(printTrimsLayers, singleLayers);
 	}
 	await this.changeCanvas();
+	console.log("==========创建其他图层成功");
+	resolve();
+	this.awaitCanvasRun = null;
+	this.canvas.loading.value = false;
  }

  // 设置画布对象的裁剪信息
@@ -1648,7 +1666,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	  let flipX = false;
 	  let flipY = false;
 	  let blendMode = BlendMode.MULTIPLY;
-	  if(item.level2Type === "Embroidery") blendMode = BlendMode.NORMAL;// 元素正常
+	  if(item.type === "trims") blendMode = BlendMode.NORMAL;// 元素正常
 	  if(item.object){
 		opacity = item.object.opacity
 		flipX = item.object.flipX
@@ -1705,15 +1723,15 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 			resolve(tcanvas);
 		}, { crossOrigin: "anonymous" });
 	  })
-	  let scaleX_ = fixedLayerObj.width / image.width * (item.scale?.[0] || 1) / 5;
-	  let scaleY_ = fixedLayerObj.height / image.height * (item.scale?.[1] || 1) / 5;
-	  let scale = fixedLayerObj.width > fixedLayerObj.height ? scaleX_ : scaleY_;
-      let offsetX = (item.location?.[0] || 0) - image.width * scale / 2
-      let offsetY = (item.location?.[1] || 0) - image.height * scale / 2
-	  let top = fixedLayerObj.top - fixedLayerObj.height * fixedLayerObj.scaleY / 2
-	  let left = fixedLayerObj.left - fixedLayerObj.width * fixedLayerObj.scaleX / 2
-	  let scaleX = fixedLayerObj.scaleX
-	  let scaleY = fixedLayerObj.scaleY
+	  let scaleX_ = flWidth / image.width * (item.scale?.[0] || 1) / 5;
+	  let scaleY_ = flHeight / image.height * (item.scale?.[1] || 1) / 5;
+	  let scale = flWidth > flHeight ? scaleX_ : scaleY_;
+      let offsetX = (item.location?.[0] || 0) + image.width * scale / 2
+      let offsetY = (item.location?.[1] || 0) + image.height * scale / 2
+	  let top = flTop - flHeight * flScaleY / 2
+	  let left = flLeft - flWidth * flScaleX / 2
+	  let scaleX = flScaleX
+	  let scaleY = flScaleY
 	  let opacity = 1
 	  let angle = 0
 	  let gapX = 0
@@ -1722,9 +1740,10 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	  let flipX = false;
 	  let flipY = false;
 	  let blendMode = BlendMode.MULTIPLY;
+	  let fill_repeat = "repeat"
 	  if(item.object){
-	    top += item.object.top * fixedLayerObj.scaleY
-	    left += item.object.left * fixedLayerObj.scaleX
+	    top += item.object.top * flScaleY
+	    left += item.object.left * flScaleX
 	    scaleX *= item.object.scaleX
 	    scaleY *= item.object.scaleY
 		opacity = item.object.opacity
@@ -1735,13 +1754,14 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		gapX = item.object.gapX
 		gapY = item.object.gapY
 		fillSource = imageAddGapToCanvas(image, gapX, gapY);
+		if(item.object.fill_repeat) fill_repeat = item.object.fill_repeat;
 	  }
      let rect = new fabric.Rect({
      	id: id,
      	layerId: id,
      	layerName: name,
-      	width: fixedLayerObj.width,
-      	height: fixedLayerObj.height,
+      	width: flWidth,
+      	height: flHeight,
      	top: top,
      	left: left,
 		scaleX: scaleX,
@@ -1753,7 +1773,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		globalCompositeOperation: blendMode,
      	fill: new fabric.Pattern({
          source: fillSource,
-          repeat: "repeat",
+          repeat: fill_repeat,
          patternTransform: createPatternTransform(scale, item.angle || 0),
          offsetX: offsetX, // 水平偏移
          offsetY: offsetY, // 垂直偏移
--- a/src/component/Canvas/CanvasEditor/managers/PartManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/PartManager.js
@@ -53,11 +53,15 @@ export class PartManager {
 		// 当前工具
 		this.activeTool = this.toolManager.activeTool;

+		this.rgba = { r: 0, g: 255, b: 0, a: 200 };
 		this.partGroup = null; // 当前选区对象
 		this.partId = "part_selector";
 		this.partCanvas = null;// 选区画布
-		// 点选工具相关
+		// 点位列表
 		this.pointList = []; // 存储点选坐标
+
+		// 绘制列表
+		this.drawList = []; // 存储绘制对象
 	}

 	/**
@@ -69,6 +73,10 @@ export class PartManager {
 		const wasActive = this.isActive;
 		this.isActive = this.tools.includes(toolId);

+		if (toolId === OperationType.PART_ERASER) {
+			this.setEraserTool();
+		}
+
 		// 如果从非选区工具切换到选区工具，初始化事件
 		if (!wasActive && this.isActive) {
 			this.initEvents();
@@ -79,10 +87,12 @@ export class PartManager {
 			this.cleanupEvents();
 			this.clearPartObject();
 			this.clearPointData();
-		}else{
-			// this.clearPointData();
 		}
-		console.log("切换工具", toolId);
+		// 如果从选区工具切换到选区工具，重置选区
+		else if (wasActive && this.isActive) {
+			// this.clearPointData();
+			// this.resetPartObject();
+		}
 	}

 	/** 初始化选区相关事件 */
@@ -222,11 +232,7 @@ export class PartManager {
 		const isLeft = button === 1;// 左键1（添加）  右键3（删除）
 		const fixedObject = this.canvasManager.getFixedLayerObject();
 		if (!fixedObject) return console.warn("未找到固定图层");
-		const { x, y } = options.absolutePointer;
-		const width = fixedObject.width * fixedObject.scaleX;
-		const height = fixedObject.height * fixedObject.scaleY;
-		const X = (x - (fixedObject.left - width / 2)) / fixedObject.scaleX;
-		const Y = (y - (fixedObject.top - height / 2)) / fixedObject.scaleY;
+		const { x, y } = this.handleMousePosition(options, fixedObject);
 		const label = isLeft ? 1 : 0;
 		const points = [];
 		const labels = [];
@@ -234,26 +240,22 @@ export class PartManager {
 			points.push([item.x, item.y]);
 			labels.push(item.label);
 		});
-		points.push([X, Y]);
+		points.push([x, y]);
 		labels.push(label);
 		const url = await this.getSegAnythingImage({
-			image_path: this.props.clothingMinIOPath,
 			type: "point",
 			points,
 			labels,
-			// type: "box",
-			// box: [0,0,0,0],
 		});
 		this.pointList.push({
-			x: X,
-			y: Y,
+			x: x,
+			y: y,
 			label: label,
 		})
 		const image1 = await this.loadImageToObject(url);
 		this.resetPartObject();
 		const group = this.partGroup;
-		const rgba = { r: 0, g: 255, b: 0, a: 200 }
-		const canvas = getObjectAlphaToCanvas(image1, null, 0, rgba);
+		const canvas = getObjectAlphaToCanvas(image1, null, 0, this.rgba);
 		this.partCanvas = canvas;
 		const image2 = new fabric.Image(canvas);
 		image2.set({
@@ -283,43 +285,39 @@ export class PartManager {

 	/** 框选工具模式下点击事件处理 */
 	_rectangleDownHandler(options) {
-		console.log(options.absolutePointer);
+		this.clearPointData();
+		const fixedObject = this.canvasManager.getFixedLayerObject();
+		if (!fixedObject) return console.warn("未找到固定图层");
+		const { x, y } = this.handleMousePosition(options, fixedObject);
+		this.pointList.push(x, y);
 	}
 	/** 框选工具模式下移动事件处理 */
-	_rectangleMoveHandler(options) {
-
-	}
+	_rectangleMoveHandler(options) { }
 	/** 框选工具模式下抬起事件处理 */
-	_rectangleUpHandler(options) {
-		console.log(options.absolutePointer);
+	async _rectangleUpHandler(options) {
+		const fixedObject = this.canvasManager.getFixedLayerObject();
+		if (!fixedObject) return console.warn("未找到固定图层");
+		const { x, y } = this.handleMousePosition(options, fixedObject);
+		this.pointList.push(x, y);
+
+		if (this.pointList.length !== 4) return console.warn("框选工具选择区域必须是矩形");
+		const url = await this.getSegAnythingImage({
+			type: "box",
+			box: [...this.pointList],
+		});
+		const image1 = await this.loadImageToObject(url);
+		this.resetPartObject();
+		const group = this.partGroup;
+		const canvas = getObjectAlphaToCanvas(image1, null, 0, this.rgba);
+		this.partCanvas = canvas;
+		const image2 = new fabric.Image(canvas);
+		image2.set({
+			originX: fixedObject.originX,
+			originY: fixedObject.originY,
+		});
+		group.add(image2);
+		this.canvas.renderAll();
 	}
-
-
-	/** 绘制工具模式下点击事件处理 */
-	_brushDownHandler(options) {
-	}
-	/** 绘制工具模式下移动事件处理 */
-	_brushMoveHandler(options) {
-
-	}
-	/** 绘制工具模式下抬起事件处理 */
-	_brushUpHandler(options) {
-	}
-
-
-	/** 擦除工具模式下抬起事件处理 */
-	_eraseUpHandler(options) {
-	}
-	/** 擦除工具模式下点击事件处理 */
-	_eraseDownHandler(options) {
-	}
-	/** 擦除工具模式下移动事件处理 */
-	_eraseMoveHandler(options) {
-
-	}
-
-
-
 	/** 获取分隔后图片 */
 	async getSegAnythingImage(obj) {
 		setTimeout(() => {
@@ -329,6 +327,7 @@ export class PartManager {
 			// const user_id = store.state.UserHabit.userDetail.userId;
 			const user_id = 24299;
 			const data = {
+				image_path: this.props.clothingMinIOPath,
 				user_id,
 				...obj,
 			}
@@ -347,6 +346,85 @@ export class PartManager {
 				});
 		});
 	}
+	/** 处理鼠标点位 */
+	handleMousePosition(options, fixedObject) {
+		const pos = options.absolutePointer;
+		const { x, y } = options.absolutePointer;
+		const width = fixedObject.width * fixedObject.scaleX;
+		const height = fixedObject.height * fixedObject.scaleY;
+		const X = (x - (fixedObject.left - width / 2)) / fixedObject.scaleX;
+		const Y = (y - (fixedObject.top - height / 2)) / fixedObject.scaleY;
+		return {
+			x: Math.round(X),
+			y: Math.round(Y),
+		}
+	}
+
+	async addPartImage(fabricImage) {
+		const scaleX = fabricImage.scaleX / this.partGroup.scaleX;
+		const scaleY = fabricImage.scaleY / this.partGroup.scaleY;
+		const top = (fabricImage.top - this.partGroup.top) / this.partGroup.scaleY;
+		const left = (fabricImage.left - this.partGroup.left) / this.partGroup.scaleX;
+		fabricImage.set({
+			scaleX,
+			scaleY,
+			top: top + this.partGroup.height / 2,
+			left: left + this.partGroup.width / 2,
+		})
+		this.drawList.push(fabricImage);
+		const tcanvas = new fabric.StaticCanvas(document.createElement("canvas"), {
+			width: this.partGroup.width,
+			height: this.partGroup.height,
+			enableRetinaScaling: false,
+		});
+		this.drawList.forEach(item => tcanvas.add(item))
+		tcanvas.renderAll();
+		const canvas = getObjectAlphaToCanvas(tcanvas, null, 0, this.rgba);
+		this.partCanvas = canvas;
+		const image = new fabric.Image(canvas);
+		image.set({
+			originX: this.partGroup.originX,
+			originY: this.partGroup.originY,
+			erasable: true,
+		});
+		this.resetPartObject();
+		this.partGroup.add(image);
+		this.canvas.renderAll();
+	}
+
+
+	/** 绘制工具模式下点击事件处理 */
+	_brushDownHandler(options) {
+	}
+	/** 绘制工具模式下移动事件处理 */
+	_brushMoveHandler(options) {
+
+	}
+	/** 绘制工具模式下抬起事件处理 */
+	_brushUpHandler(options) {
+	}
+
+
+	/** 切换到擦除工具 */
+	setEraserTool() {
+		if (!this.canvas) return console.warn("未找到画布");
+		const objects = this.canvas.getObjects();
+		objects.forEach(obj => {
+			obj.set({
+				erasable: true
+			})
+		})
+	}
+	/** 擦除工具模式下抬起事件处理 */
+	_eraseUpHandler(options) {
+	}
+	/** 擦除工具模式下点击事件处理 */
+	_eraseDownHandler(options) {
+	}
+	/** 擦除工具模式下移动事件处理 */
+	_eraseMoveHandler(options) {
+
+	}

 	/** 删除指定ID的对象 */
 	removeObjectsById(id) {
@@ -384,6 +462,7 @@ export class PartManager {
 			originY: fixedObject.originY,
 			selectable: false,
 			evented: false,
+			erasable: false,
 		})
 		this.canvas.add(group);
 		this.partGroup = group;
--- a/src/component/Canvas/CanvasEditor/managers/ToolManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/ToolManager.js
@@ -736,14 +736,39 @@ export class ToolManager {
    if (!isExecute && this.canvasManager && this.canvasManager.partManager) {
      this.canvasManager.partManager.setCurrentTool(OperationType.PART_BRUSH);
    }
+	const greenColor = "#0f0";
+	    // 确保有笔刷管理器
+    if (this.brushManager) {
+      // 设置绿色笔刷
+      this.brushManager.setBrushColor(greenColor); // 纯绿色
+      this.brushManager.setBrushOpacity(200/255); // 完全不透明
+      this.brushManager.setBrushType("pencil"); // 铅笔类型
+
+      // 更新笔刷大小（使用当前大小）
+      if (BrushStore && BrushStore.state.size) {
+        this.brushManager.setBrushSize(BrushStore.state.size);
+      }
+
+      // 更新应用到画布
+      this.brushManager.updateBrush();
+    }
+
+    // 启用笔刷指示器并设置绿色
+    this._enableBrushIndicator(greenColor);
  }
   /**
   * 设置部件选取工具--橡皮擦
   */
  setupPartEraserTool(isExecute = false) {
    if (!this.canvas) return;
-    this.canvas.isDrawingMode = false;
+    this.canvas.isDrawingMode = true;
    this.canvas.selection = false;
+	 if (this.brushManager) {
+      this.brushManager.createEraser();
+    }
+    // 启用笔刷指示器
+    this._enableBrushIndicator();
+
 	if (!isExecute && this.canvasManager && this.canvasManager.partManager) {
      this.canvasManager.partManager.setCurrentTool(OperationType.PART_ERASER);
    }
@@ -1603,6 +1628,8 @@ export class ToolManager {
      OperationType.RED_BRUSH,
      OperationType.GREEN_BRUSH,
 	  OperationType.LIQUIFY,
+	  OperationType.PART_BRUSH,
+	  OperationType.PART_ERASER,
    ];

    return brushTools.includes(currentTool);
--- a/src/component/Canvas/CanvasEditor/utils/objectHelper.js
+++ b/src/component/Canvas/CanvasEditor/utils/objectHelper.js
@@ -69,6 +69,10 @@ export async function restoreFabricObject(serializedObject, canvas) {
 */
 export function getObjectAlphaToCanvas(object, revData, diff = 30, rgba = { r: 255, g: 255, b: 255, a: 255 }) {
 	const image = object.getElement();
+	if (image.nodeName !== "IMG" && image.nodeName !== "CANVAS") {
+		console.warn("对象不是图片");
+		return null;
+	}
 	const { width, height } = image;
 	if (!width || !height) {
 		console.warn("对象没有元素");
--- a/src/component/Canvas/OverallCanvas/index.vue
+++ b/src/component/Canvas/OverallCanvas/index.vue
@@ -25,6 +25,7 @@
 		O_FLIPX: "object.flipX",
 		O_FLIPY: "object.flipY",
 		O_BLENDMODE: "object.blendMode",
+		O_FILL_REPEAT: "object.fill_repeat",
 	};
 	const ACTIONS = {
 		ADD: "add",
@@ -202,9 +203,9 @@
 		let scaleY = ((cheight / image.height) * item.scale[1]) / 5;
 		let scale = cwidth > cheight ? scaleX : scaleY;
 		let offsetX =
-			(item.location[0] * cwidth) / props.width - (image.width * scale) / 2;
+			(item.location[0] * cwidth) / props.width + (image.width * scale) / 2;
 		let offsetY =
-			(item.location[1] * cheight) / props.height -
+			(item.location[1] * cheight) / props.height +
 			(image.height * scale) / 2;
 		let angle = item.angle;
 		let gapX = item.object.gapX;
@@ -223,7 +224,7 @@
 		ctx.drawImage(image, 0, 0);
 		let pattern = new fabric.Pattern({
 			source: tcanvas,
-			repeat: "repeat",
+			repeat: item.object?.fill_repeat || "repeat",
 			patternTransform,
 			offsetX, // 水平偏移
 			offsetY, // 垂直偏移
@@ -281,6 +282,7 @@
 						case KEYS.FILL_SCALEY:
 						case KEYS.FILL_GAPX:
 						case KEYS.FILL_GAPY:
+						case KEYS.O_FILL_REPEAT:
 							let pattern = await setFill(
 								list.value.find((v) => v.token === item.token)
 							);
--- a/src/component/Canvas/canvasExample.vue
+++ b/src/component/Canvas/canvasExample.vue
@@ -417,7 +417,6 @@
 				}"
 				@change-canvas="changeCanvas"
 				@canvas-init="canvasInit"
-				isFixedErasable
 				showFixedLayer
 			>
 				<template #existsImageList>
--- a/src/component/Detail/DesignDetail.vue
+++ b/src/component/Detail/DesignDetail.vue
@@ -131,6 +131,7 @@ import { useStore } from "vuex";
 import { openGuide,driverObj__ } from "@/tool/guide";
 import { KeyValueDB } from "@/tool/indexedDB";
 import { useI18n } from 'vue-i18n'
+import { convertToEC4StyleForCustomSerise } from 'echarts/types/src/util/styleCompat.js'
 export default defineComponent({
    components:{
 		detailLeft,model,detailRight,canvasBox
@@ -331,21 +332,23 @@ export default defineComponent({
 		}
 		const setClothes = async (list:any,str:string)=>{
 			let clothesList:any = []
-			await uploadElement()
 			if(detailData.isEditPattern.value == 'editSketch')await detailDom.canvasBox.submitBase64Data().then((rv)=>{
 				detailData.selectDetail.sketchString = rv
 			})
 			if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
 			if(detailDom.canvasBox && (detailData.currentDetailType != 'sketch' || detailData.isEditPattern.value == 'canvasEditor')){
-				let otherData = await updateOtherLayers('single')
-				await detailDom.canvasBox.updateOtherLayers(otherData)
+				// if(detailData.isEditPattern.value !== 'editSketch'){
+				// 	let otherDataupDateFrontBackSketch = await updateOtherLayers(detailData.isEditPattern.value == 'canvasEditor'?'all':'single')
+				// 	await detailDom.canvasBox.updateOtherLayers(otherData)
+				// }
 				await detailDom.canvasBox.privewDetail()
+				await uploadSelectDetail()
+				// await uploadElement()
 			}
 			for(let i = 0;i<list.length;i++){
 				detailData.selectDetail
 			    let {scale,offset,priority,transpose,rotate,maskUrl,maskMinioUrl} = await (detailDom.model as any).getSubmitData(list[i])
-				let gradient = null
-				let newData = list[i]?.newDetail?.[detailData.currentDetailType]
+				let newData = list[i]?.newDetail
 				// newData[0].location=[
 				// 	-233.13985,
 				// 	406.90964
@@ -355,12 +358,19 @@ export default defineComponent({
 				// 0.35822305
 				// ]	
 				let isCurrent = list[i].id == detailData?.selectDetail?.id
-				let color = (detailData.currentDetailType == 'color' && isCurrent && !detailData.isEditPattern.value)?
-				(newData?.rgba?.r?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:''):
-				(list[i].color?.rgba?.r?
-				`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:
-				'')
-				if(detailData.currentDetailType == 'sketch' && newData){
+				let color = ''
+				let gradient = null
+				// if((detailData.currentDetailType == 'color' && detailData.isEditPattern.value == 'canvasEditor') && isCurrent){
+				// 	color = newData?.color?.rgba?.r != null?`${newData?.color.rgba.r} ${newData?.color.rgba.g} ${newData?.color.rgba.b}`:''
+				// 	if(newData?.color?.gradient){
+				// 		gradient = newData?.color.gradient
+				// 	}
+				// }else if(isCurrent){
+					
+				// }
+				color = list[i].color?.rgba?.r != null?`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:''
+					gradient = list[i].gradient
+				if((detailData.currentDetailType == 'sketch' && newData?.sketch) || detailData.isEditPattern.value == 'editSketch'){
 					color = detailData.designDetail.clothes?.[0]?.color?.rgba?.r?`${detailData.designDetail.clothes?.[0].color.rgba.r} ${detailData.designDetail.clothes[0].color.rgba.g} ${detailData.designDetail.clothes[0].color.rgba.b}`:''
 					detailData.selectDetail.maskUrl = ''
 					detailData.selectDetail.maskMinioUrl = ''
@@ -375,9 +385,10 @@ export default defineComponent({
 				let data:any = {
 					changed:false,
 					color,
-					designType:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.designType:list[i].designType,
-					id:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.id:list[i].id,
-					maskMinioUrl:((newData && detailData.currentDetailType == 'sketch') || list[i].sketchString)?'':list[i]?.maskMinioUrl,
+					gradient,
+					designType:(newData?.sketch && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData?.sketch.designType:list[i].designType,
+					id:(newData?.sketch && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData?.sketch.id:list[i].id,
+					maskMinioUrl:((newData?.sketch && detailData.currentDetailType == 'sketch') || list[i].sketchString)?'':list[i]?.maskMinioUrl,
 					// maskUrl:'',
 					maskUrl:list[i]?.maskUrl || '',
 					// offset:[
@@ -389,28 +400,29 @@ export default defineComponent({
 					rotate,
 					partialDesign:list[i].partialDesign,
 					// partialDesign:detailData.isEditPattern.value?list[i].partialDesign:{},
-					path:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.minIOPath:list[i].minIOPath,
-					printObject:(newData && detailData.currentDetailType == 'print' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].printObject?list[i].printObject:{prints:[]},
+					path:(newData?.sketch && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData?.sketch.minIOPath:list[i].minIOPath,
+					printObject:((newData?.print?.length>0 && (detailData.currentDetailType == 'print' || detailData.isEditPattern.value == 'canvasEditor')) && isCurrent)?{prints:newData.print}:list[i].printObject?list[i].printObject:{prints:[]},
 					priority,
 					// scale:[
                    //                 0.5,
                    //                 0.35822305
                    //             ],
 					scale:[scale[0]?scale[0]:1,scale[1]?scale[1]:1],
-					type:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.level2Type || newData.categoryValue:list[i].type,
+					type:(newData?.sketch && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData?.sketch.level2Type || newData?.sketch.categoryValue:list[i].type,
 					sketchString:list[i].sketchString?list[i].sketchString:'',
-					trims:(newData && detailData.currentDetailType == 'element' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
-					accessory:(newData && detailData.currentDetailType == 'accessory' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
+					trims:((newData?.element?.length>0 && (detailData.currentDetailType == 'element' || detailData.isEditPattern.value == 'canvasEditor')) && isCurrent)?{prints:newData.element}:list[i].trims?.prints?list[i].trims:{prints:[]},
 				}
-				// if(!data.partialDesign.partialDesignMinioPath){
-				// 	data.partialDesign.partialDesignMinioPath = data.path
-				// }
 				printObjectToJSON(data.printObject.prints)
 				printObjectToJSON(data.trims.prints)
-				if((detailData.isEditPattern.value && list[i].color?.gradient) || (!detailData.isEditPattern.value && (list[i].newDetail?.color?.gradient || list[i].color?.gradient))){
-					gradient = list[i].newDetail?.color?.gradient || list[i].color.gradient
+				console.log(list[i],'=======',isCurrent)
+				if((list[i]?.color?.gradient)){
+				// if(list[i].color?.gradient || (!detailData.isEditPattern.value && (list[i].newDetail?.color?.gradient || list[i].color?.gradient))){
+					gradient = list[i]?.color?.gradient
+					console.log(gradient,list[i],gradient)
 					gradient.colorImg = await setGradual(gradient,320,700)
 					data.gradient = gradient
+				}else{
+					data.gradient = null
 				}
 				clothesList.push(data)
 			}
@@ -453,6 +465,7 @@ export default defineComponent({
 					let el:any = document.querySelector('.molepositon .perview_img')
 					let scale = 0
 					await new Promise<void>(async (resolve, reject) => {
+						if(!detailData.frontBack.body.path)resolve(true)
 						const img = new Image();
 						img.src = detailData.frontBack.body.path;
 						img.onload = () => {
@@ -478,6 +491,12 @@ export default defineComponent({
 			
 		}
 		const submit = async ()=>{
+			detailData.loadingShow = true
+			if(detailData.isEditPattern.value !== 'canvasEditor'){
+				if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
+				let otherData = await updateOtherLayers('single')
+				await detailDom.canvasBox.updateOtherLayers(otherData)
+			}
 			let workspace = store.state.Workspace.probjects
 			let clothes:any = await setClothes(detailData.designDetail.clothes,'sub')
 			let data = {
@@ -494,7 +513,6 @@ export default defineComponent({
 				processId:userDetail.value.userId,
 				probjectId:store.state.Workspace.probjects.id,
 			}
-			detailData.loadingShow = true
 			Https.axiosPost(Https.httpUrls.designSingle, data).then(async (rv)=>{
 				saveCanvasJSONToSession()
 				// store.commit('DesignDetail/setPraeview',rv)
@@ -526,8 +544,9 @@ export default defineComponent({
 		}
 		const previwe = async ()=>{
 			detailData.loadingShow = true
-			if((detailData.currentDetailType == 'sketch' && !detailData.isEditPattern.value) || detailData.isEditPattern.value == 'editSketch'){
+			if((detailData.currentDetailType == 'models' && !detailData.isEditPattern.value) || (detailData.currentDetailType == 'sketch' && !detailData.isEditPattern.value) || detailData.isEditPattern.value == 'editSketch'){
 				await getSubmitData('preview')
+				if(detailData.currentDetailType == 'models')return detailData.loadingShow = false
 				await getSketchSize()
 				detailDom.canvasBox.changeSketchUpdateFrontBack = async ()=>{
 					await detailDom.canvasBox.privewDetail()
@@ -544,8 +563,8 @@ export default defineComponent({
 				}
 				await detailDom.canvasBox.privewDetail()
 				await upDateFrontBackSketch()
-				saveCanvasJSONToSession()
 				await uploadSelectDetail()
+				saveCanvasJSONToSession()
 				detailData.loadingShow = false
 			}
 		}
@@ -592,11 +611,12 @@ export default defineComponent({
 			await KeyValueDB.set('canvasList', JSON.stringify(list));
 		}
 		const detailEdit = async (str:any)=>{
+			detailData.loadingShow = true
 			if(str){
 				if(detailData.isEditPattern.value && detailData.isEditPattern.value == str){
 					// await detailDom.canvasBox.saveCanvas()
 					await (detailDom.canvasBox as any).privewDetail()
-					if(detailData.isEditPattern.value == 'canvasEditor')await uploadElement()
+					if(detailData.isEditPattern.value == 'canvasEditor')await uploadSelectDetail()
 					detailData.isEditPattern.value = ''
 				}else{
 					// if(detailData.isEditPattern.value && (str == 'canvasEditor' || str == 'redGreenExample')){
@@ -604,14 +624,20 @@ export default defineComponent({
 					// }
 					detailDom.canvasBox.editFront(str)
 					if(str == 'canvasEditor'){
+						if((detailData.currentDetailType == 'print' || detailData.currentDetailType == 'element') && !detailDom.detailRight?.privewDetail){
+							store.commit('DesignDetail/changeCanvasKey')
+						}else{
+							if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
 							let otherData = await updateOtherLayers('single')
 							await detailDom.canvasBox.updateOtherLayers(otherData)
 						}
+					}
 					detailData.isEditPattern.value = str
 				}
 			}else{
 				detailData.isEditPattern.value = ''
 			}
+			detailData.loadingShow = false
 		}
 		const getColorName = (color:any)=>{
 			let rgb:any = [color.r, color.g, color.b];
@@ -633,14 +659,14 @@ export default defineComponent({
 					});
 			})
 		}
-		const updateOtherLayers = async (str:any='all')=>{//更新到画布图层
+		const updateOtherLayers = async (str:any='all',type:any='noFirst')=>{//更新到画布图层
 			let otherData:any = {}
-			if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
 			if(str == 'all'){
+				// await uploadSelectDetail()
 				otherData = {
-					color: detailData.selectDetail.newDetail?.color?.r?detailData.selectDetail.newDetail?.color:detailData.selectDetail.color,
-					printObject: detailData.selectDetail.newDetail?.print?.length>0?{prints:detailData.selectDetail.newDetail?.print}:detailData.selectDetail.printObject || null,
-					trims: detailData.selectDetail.newDetail?.element?.length>0?detailData.selectDetail.newDetail?.element:detailData.selectDetail.trims || null,
+					color: detailData.selectDetail.color,
+					printObject: detailData.selectDetail.printObject || null,
+					trims: detailData.selectDetail.trims || null,
 				}	
 			}else if(str == 'single'){
 				otherData = {
@@ -661,10 +687,11 @@ export default defineComponent({
 					}
 				}
 				if(detailData.currentDetailType == 'print'){
-					otherData.printObject = detailData.selectDetail.newDetail?.print?.length>0?{prints:detailData.selectDetail.newDetail?.print}:detailData.selectDetail.printObject || null
+					if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
+					otherData.printObject = {prints:detailData.selectDetail.newDetail?.print || []}
 				}
 				if(detailData.currentDetailType == 'element'){
-					otherData.trims = detailData.selectDetail.newDetail?.element?.length>0?{prints:detailData.selectDetail.newDetail?.element}:detailData.selectDetail.trims || null
+					otherData.trims = {prints:detailData.selectDetail.newDetail?.element || []}
 				}
 			}
 			return otherData
@@ -683,11 +710,15 @@ export default defineComponent({
 					str:'print'
 				}
 				store.commit('DesignDetail/setNewDetail',printValue)
-				if(allInfo.color?.color?.rgba){
-					let canvasColor = allInfo.color.color;
-					let colorData:any = await getColorName(allInfo.color.color?.rgba)
+				if(allInfo.color?.color?.rgba || allInfo.color?.color?.gradient){
 					let value:any = {
-						data:{
+						str:'color',
+						data:{},
+					}
+					let canvasColor = allInfo.color.color;
+					if(allInfo.color?.color?.rgba){
+						let colorData:any = await getColorName(allInfo.color.color?.rgba)
+						value.data = {
 							hsv:{
 								h:colorData.h,
 								s:colorData.s,
@@ -697,8 +728,7 @@ export default defineComponent({
 							tcx:colorData.tcx,
 							rgba:canvasColor.rgba,
 							hex:rgbaToHex([canvasColor.rgba.r,canvasColor.rgba.g,canvasColor.rgba.b]),
-						},
-						str:'color'
+						}
 					}
 					if(canvasColor.gradient){
 						value.data.gradient = canvasColor.gradient
@@ -720,9 +750,11 @@ export default defineComponent({
 		const uploadSelectDetail = async ()=>{//更新选中的detail
 			// await detailDom.canvasBox.saveCanvas()
 			const allInfo = await (detailDom.canvasBox as any).getCanvasElement()
+			console.log(allInfo)
 			let color:any = {}
-			if(allInfo.color?.color?.rgba){
+			if(allInfo.color?.color?.rgba || allInfo.color?.color?.gradient){
 				let canvasColor = allInfo.color.color;
+				if(canvasColor?.rgba?.r != null){
 					let colorData:any = await getColorName(allInfo.color.color?.rgba)
 					color = {
 						hsv:{
@@ -735,33 +767,36 @@ export default defineComponent({
 						rgba:canvasColor.rgba,
 						hex:rgbaToHex([canvasColor.rgba.r,canvasColor.rgba.g,canvasColor.rgba.b]),
 					}
-				if(canvasColor.gradient){
+				}
+				if(canvasColor?.gradient){
 					color.gradient = canvasColor.gradient
 				}
-				if(detailData.currentDetailType == 'color'){
-					detailData.detailLeftColorKey++
+				console.log(color,'color')
 			}
-			}
-			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 || []
 				detailData.selectDetail.color = color
 			}else{
 				if(detailData.currentDetailType == 'color'){
-					delete detailData.selectDetail.newDetail.color
+					if(detailData.selectDetail.newDetail?.color)delete detailData.selectDetail.newDetail.color
 					detailData.selectDetail.color = color
+					detailData.selectDetail.gradient = color.gradient
 				}
 				if(detailData.currentDetailType == 'print'){
-					delete detailData.selectDetail.newDetail.print
+					if(detailData.selectDetail.newDetail?.print)delete detailData.selectDetail.newDetail.print
 					detailData.selectDetail.printObject.prints = allInfo.prints || []
 				}
 				if(detailData.currentDetailType == 'element'){
-					delete detailData.selectDetail.newDetail.element
+					if(detailData.selectDetail.newDetail?.element)delete detailData.selectDetail.newDetail.element
 					detailData.selectDetail.trims.prints = allInfo.trims || []
 				}
 			}
-			
+			if(detailData.currentDetailType == 'color'){
+				detailData.detailLeftColorKey++
+			}
 			
 		}
 		const canvasReload = async ()=>{
--- a/src/component/Detail/canvas/index.vue
+++ b/src/component/Detail/canvas/index.vue
@@ -287,7 +287,7 @@ export default defineComponent({
 			return detailDom?.editCanvas?.getJSON()
 		}
 		const saveCanvas = async (canvasData:any)=>{
-			const index = detailData.designDetail.clothes.findIndex(item => item.id === canvasData.id);
+			const index = detailData.designDetail.clothes.findIndex(item => item.id === canvasData?.id);
 			await new Promise<void>((resolve, reject) => {
 				if(!detailDom?.editCanvas)return resolve()
 				let canvasJSON = detailDom?.editCanvas?.getJSON()
@@ -338,7 +338,7 @@ export default defineComponent({
 		// 	},3000)
 		// }
 		const canvasLoadJsonSuccess = async ()=>{
-			let otherData = await props.updateOtherLayers()
+			let otherData = await props.updateOtherLayers('all','first')
 			await updateOtherLayers(otherData)
 			if(detailData.changeSketchUpdateFrontBack){
 				await detailData.changeSketchUpdateFrontBack()
--- a/src/component/Detail/detailLeft/colorBox/index.vue
+++ b/src/component/Detail/detailLeft/colorBox/index.vue
@@ -100,12 +100,17 @@ export default defineComponent({
 			tcxToColor:'',
 		})
 		watch(()=>colorData.selectColor,async (newVal,oldVal)=>{
-		    if(newVal.rgba && newVal.rgba?.r){
-				let data:any = await getColorName(newVal.rgba)
+			console.log('=======',123)
+		    if((newVal.rgba && newVal.rgba?.r != null) || newVal.gradient != null){
+			console.log('=======',123)
+				let data :any = {}
+				if(newVal.rgba?.r != null){
+					data = await getColorName(newVal.rgba)
 					newVal.name = data.name
 					newVal.tcx = data.tcx
 					colorData.colorList.list[colorData.selectDetail.id][colorData.colorList.index] = newVal
 					data.rgba = newVal.rgba
+				}
 				if(newVal.gradient){
 					data.gradient = newVal.gradient
 				}
@@ -115,6 +120,7 @@ export default defineComponent({
 				}
 				store.commit('DesignDetail/setNewDetail',value)
 			}else{
+			console.log('=======',123)
 				let value = {
 					data:{},
 					str:'color'
@@ -124,13 +130,11 @@ export default defineComponent({
 		})
 		watch(()=>colorData.selectDetail.id,(newVal,oldVal)=>{
 			if(!newVal)return
-			console.log(12312)
 			if(!colorData.colorList?.list?.[newVal]){
 				colorData.colorList.list[newVal] = []
 			}else{
 				return
 			}
-			console.log(12312)
 			let isNoSelect = false
 			let pushIndex = 0
 			for (let index = 0; index < 9; index++) {
@@ -140,14 +144,12 @@ export default defineComponent({
 				let color = colorData.allBoardData.colorBoards?.[index]
 				if(!color?.rgba && color?.rgbValue)color.rgba = color.rgbValue
 				if(
-					colorData.allBoardData.colorBoards?.[index] &&
+					(colorData.allBoardData.colorBoards?.[index] &&
 					colorData.selectDetail.color.rgba?.r == color?.rgba?.r &&
 					colorData.selectDetail.color.rgba?.g == color?.rgba?.g &&
-					colorData.selectDetail.color.rgba?.b == color?.rgba?.b ||
+					colorData.selectDetail.color.rgba?.b == color?.rgba?.b) ||
 					(JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(color?.gradient) && colorData.selectDetail.color.gradient)
-					&& colorData.selectDetail.color.rgba?.r
 				){
-					console.log(123)
 					isNoSelect = true
 					colorData.selectColor = item
 					colorData.colorList.index = index
@@ -173,9 +175,10 @@ export default defineComponent({
 				colorData.colorList.list[newVal].push(item)
 			}
 			if(!isNoSelect){
-				let color = colorData.selectDetail.newDetail?.color?.rgba?.r?colorData.selectDetail.newDetail?.color:colorData.selectDetail.color
-				if(!color?.rgba?.r)return
-				let item = {
+				let color = colorData.selectDetail.newDetail?.color?.rgba?.r != null?colorData.selectDetail.newDetail?.color:colorData.selectDetail.color
+				let item:any = {}
+				if(color?.rgba?.r != null){
+					item = {
 						hex:rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b]),
 						id:color.id,
 						rgba:{
@@ -186,6 +189,8 @@ export default defineComponent({
 						tcx:color.tcx,
 						name:color.name,
 					} as any
+				}
+
 				if(color.gradient){
 					item.gradient = color.gradient
 				} 
--- a/src/component/Detail/detailLeft/colorBox/pallet.vue
+++ b/src/component/Detail/detailLeft/colorBox/pallet.vue
@@ -119,7 +119,7 @@ export default defineComponent({
 		})
 		const palletRef = ref(null)
 		watch(()=>palletData.color_,(newVal:any)=>{
-			if(!newVal?.rgba?.r)return
+			if(newVal?.rgba?.r == null)return
 			if(palletData.color?.gradient?.gradientShow){
 				palletData.color.gradient.gradientList[palletData.color.gradient.selectIndex].rgba = {
 					r:newVal.rgba.r,
@@ -146,7 +146,7 @@ export default defineComponent({
 		},{deep: true })
 		const setOperate = ()=>{
 			if(!palletData.color.rgba)return message.info(t('DesignDetailAlter.jsContent7'))
-			palletData.color.rgba = palletData.color?.rgba?.r?palletData.color.rgba:{r:0,g:0,b:0,a:1}
+			palletData.color.rgba = palletData.color?.rgba?.r != null?palletData.color.rgba:{r:0,g:0,b:0,a:1}
 			palletData.gradient.selectIndex = 0
 			palletData.gradient.gradientShow = true
 			if(!palletData.color.gradient){
@@ -262,7 +262,7 @@ export default defineComponent({
 		const openPallet = ()=>{
 			palletData.palletShow = !palletData.palletShow
 			console.log(props.selectColor,palletData.palletShow)
-			if(palletData.palletShow && props.selectColor?.rgba?.r){
+			if(palletData.palletShow && props.selectColor?.rgba?.r != null){
 				if(props.selectColor.gradient){
 					palletData.color_.rgba = props.selectColor.gradient.gradientList[0].rgba
 				}else{
--- a/src/component/Detail/detailRight/editPrintElement.vue
+++ b/src/component/Detail/detailRight/editPrintElement.vue
@@ -314,6 +314,7 @@ export default defineComponent({
 				str:props.type,
 				id:id,
 			}
+			console.log('data',value)
 			store.commit('DesignDetail/setNewDetail',value)
 		}
 		const sort = (list:any)=>{
@@ -415,13 +416,13 @@ export default defineComponent({
 					if(!editPrintElementData.selectDetail.printObject.prints)return
 					let state = true
 					// editPrintElementData.stateOverallSingle = 'single'
-					let arr:any = editPrintElementData.selectDetail.newDetail?.print || editPrintElementData.selectDetail.printObject.prints
+					let arr:any = editPrintElementData.selectDetail.printObject.prints
 					if(props.type == 'element'){
-						arr = editPrintElementData.selectDetail.newDetail?.element || editPrintElementData.selectDetail.trims.prints
-					}
-					if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){
-						arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
+						arr = editPrintElementData.selectDetail.trims.prints
 					}
+					// if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){
+					// 	arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
+					// }
 					if(arr && arr.length > 0){
 						editPrintElementData.printStyleList[props.type].single = []
 						editPrintElementData.printStyleList[props.type].overall = []
@@ -473,6 +474,7 @@ export default defineComponent({
 			setPosition()
 		},{immediate: true,})
 		watch(()=>editPrintElementData.stateOverallSingle,(newVal)=>{
+			previewDetailPrintData()
 			let arr:any = editPrintElementData.selectDetail.newDetail?.print || editPrintElementData.selectDetail.printObject.prints
 			if(props.type == 'element'){
 				arr = editPrintElementData.selectDetail.newDetail?.element || editPrintElementData.selectDetail.trims.prints
@@ -482,9 +484,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)
 					});
--- 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)=>{
@@ -133,6 +155,7 @@
 	.repeat-setting {
 		user-select: none;
 		width: 228px;
+		overflow: hidden;
 		> .title {
 			line-height: 35px;
 			font-size: 14px;
--- 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),
--- a/src/component/Detail/model/modelPosition
+++ b/src/component/Detail/model/modelPosition
@@ -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>
--- 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 > 0?{width:observerWH.width+'px',height:observerWH.height+'px'}:{width:'100%',height:'auto','object-fit': 'contain'}"
+				 :src="designDetail.designItemUrl" alt="">
 			</div>
 		</div>
 	</div>
--- a/src/component/HomePage/ColorboardUpload.vue
+++ b/src/component/HomePage/ColorboardUpload.vue
@@ -271,7 +271,7 @@ export default defineComponent({
 		},
 		selectColor:{
 			handler(newVal,oldVal){
-				if(typeof newVal?.rgba?.r !== 'number' && typeof newVal?.rgba?.r !== 'string'){
+				if(newVal?.rgba?.r == null){
 					this.colorList[this.selectIndex] = {}
 					return	
 				}
@@ -388,7 +388,7 @@ export default defineComponent({
        //选择不同的色块
        selectColorItem(index,color){
 			let hex
-			if(color?.rgba?.r){
+			if(color?.rgba?.r != null){
 				hex = this.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a?color.rgba.a:1])
 			}else{
 				hex = '#FFFFFF'
@@ -402,7 +402,7 @@ export default defineComponent({
 			if(this.driver__.driver){
 				driverObj__.moveNext()
 			}
-			if(color?.rgba?.r){
+			if(color?.rgba?.r != null){
 	            this.selectColor = color
 	            this.selectColor.hex = hex
 			}
--- a/src/component/home/design/collection/ColorboardUpload.vue
+++ b/src/component/home/design/collection/ColorboardUpload.vue
@@ -283,7 +283,7 @@ export default defineComponent({
 		},
 		selectColor:{
 			handler(newVal,oldVal){
-				if(typeof newVal?.rgba?.r !== 'number' && typeof newVal?.rgba?.r !== 'string'){
+				if(newVal?.rgba?.r == null){
 					this.colorList[this.selectIndex] = {}
 					return	
 				}
@@ -400,7 +400,7 @@ export default defineComponent({
        //选择不同的色块
        selectColorItem(index,color){
 			let hex
-			if(color?.rgba?.r){
+			if(color?.rgba?.r != null){
 				hex = this.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a?color.rgba.a:1])
 			}else{
 				hex = '#FFFFFF'
@@ -414,7 +414,7 @@ export default defineComponent({
 			if(this.driver__.driver){
 				driverObj__.moveNext()
 			}
-			if(color?.rgba?.r){
+			if(color?.rgba?.r != null){
 	            this.selectColor = color
 	            this.selectColor.hex = hex
 			}
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -1184,7 +1184,7 @@ export default {
  CanvasTitle: {
 	ModifySketch: 'Modify Sketch',
 	ModifyItem: 'Modify Item',
-	RedGreen: 'Front and back section',
+	RedGreen: 'Edit Front and Back Section',
  },
  Canvas: {
    Canvas: 'Canvas',
--- 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';
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -615,10 +615,10 @@ export default defineComponent({
              homeMainData.openTypeChild = ''
              homeMainData.openType = ''
            }
-            if ((query?.id || query?.history) && !(await getIdExistToHistory())) {
-              router.push('/home')
-              return
-            }
+            // if ((query?.id || query?.history) && !(await getIdExistToHistory())) {
+            //   router.push('/home')
+            //   return
+            // }
          } else {
            homeMainData.openType = ''
            homeMainData.openTypeChild = ''
--- 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>