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

src/component/Canvas/CanvasEditor/commands/RedGreenCommands.js

@@ -159,6 +159,8 @@ export class BatchInitializeRedGreenModeCommand extends Command {
             absolutePositioned: true,
             opacity: 0.01, // 设置为几乎透明
             id: generateId("redGreenImageMask_"),
+			rx: 15,
+			ry: 15,
           });
           // this.canvas.add(this.redGreenImageMask);
           this.canvas.clipPath = this.redGreenImageMask;

src/component/Canvas/CanvasEditor/components/HeaderMenu.vue

@@ -22,6 +22,7 @@ const props = defineProps({
     default: true, // 是否显示图层面板
   },
   isBackgroundChangeable: Boolean,
+  isChangeCanvasSize: Boolean,
 });
 
 const emit = defineEmits([
@@ -284,6 +285,7 @@ onMounted(() => {
         <div class="setting-group">
           <span class="setting-label">{{ $t("Canvas.width") }}</span>
           <a-input-number
+		    :disabled="!isChangeCanvasSize"
             :value="canvasWidth?.toFixed(2)"
             class="setting-input"
             :min="1"
@@ -300,6 +302,7 @@ onMounted(() => {
         <div class="setting-group">
           <span class="setting-label">{{ $t("Canvas.height") }}</span>
           <a-input-number
+		    :disabled="!isChangeCanvasSize"
             :value="canvasHeight?.toFixed(2)"
             class="setting-input"
             :min="1"

src/component/Canvas/CanvasEditor/index.vue

@@ -75,6 +75,10 @@ const props = defineProps({
     type: Object,
     default: () => CanvasConfig, // 默认配置
   },
+  isChangeCanvasSize: {
+    type: Boolean,
+    default: true, // 是否允许修改画布大小
+  },
   showLayersPanel: {
     type: Boolean,
     default: true, // 是否显示图层面板
@@ -503,7 +507,7 @@ onMounted(async () => {
     clearTimeout(trailingTimeout);
     trailingTimeout = setTimeout(() => {
 	  optimizeCanvasRendering(canvasManager.canvas, ()=> handleWindowResize());
-    }, 200);
+    }, 1000);
   });
   observer.observe(canvasContainerRef.value);
   // 使用window的resize事件代替ResizeObserver
@@ -566,38 +570,38 @@ async function handleWindowResize() {
   if(!canvasManager) return;
   await updateCanvasSize();
   // 确保显示的缩放信息是最新的
-  currentZoom.value = Math.round(canvasManager.canvas.getZoom() * 100);
+  await setInitZoom();
-  setInitZoom();
   await new Promise(requestAnimationFrame);
   await layerManager?.updateLayersObjectsInteractivity?.();
 }
 
-function setInitZoom(){
+async function setInitZoom(){
-  if (props.config.initZoom) {
+  if (props.config.initZoom && !props.enabledRedGreenMode) {
     const width = canvasManager.width;
     const height = canvasManager.height;
-    const cwidth = props.config.width;
+    const cwidth = canvasWidth.value;
-    const cheight = props.config.height;
+    const cheight = canvasHeight.value;
     let zoom = Math.min(1, width / cwidth, height / cheight);
     if (zoom < 1) zoom -= 0.05;
-    setZoom(zoom); // 设置画布缩放
+    await setZoom(zoom); // 设置画布缩放
+  }else{
+    currentZoom.value = Math.round(canvasManager.canvas.getZoom() * 100);
   }
 }
 
 function resetZoom() {
   canvasManager.resetZoom();
 }
-function setZoom(zoom) {
+async function setZoom(zoom) {
-  setTimeout(() => {
+  await new Promise(requestAnimationFrame);
-    if (!canvasManager) return;
+  if (!canvasManager) return;
-    const newZoom = Math.max(zoom, 0.1);
+  const newZoom = Math.max(zoom, 0.1);
-    // 使用画布中心作为缩放点
+  // 使用画布中心作为缩放点
-    const centerPoint = {
+  const centerPoint = {
-      x: canvasManager.canvas.width / 2,
+    x: canvasManager.canvas.width / 2,
-      y: canvasManager.canvas.height / 2,
+    y: canvasManager.canvas.height / 2,
-    };
+  };
-    canvasManager.animateZoom(centerPoint, newZoom);
+  canvasManager.animateZoom(centerPoint, newZoom);
-  });
 }
 
 function zoomIn() {
@@ -1034,6 +1038,11 @@ defineExpose({
 	width = 0,// 导出的图片宽度
 	height = 0, // 导出的图片高度
   } = {}) => {
+	console.log('导出图片',{isContainFixed,
+isContainFixedOther,
+isPrintTrimsNoRepeat,
+isPrintTrimsRepeat,
+isContainNormalLayer})
     var base64 = await canvasManager.exportImage({
       isContainBg,
       isContainFixed,
@@ -1047,6 +1056,7 @@ defineExpose({
       expPicType,
       isEnhanceImg,
     });
+	console.log('导出图片完成',)
 	if(width > 0 && height > 0){
 		base64 = await resizeImage(base64, width, height);
 	}
@@ -1190,7 +1200,7 @@ defineExpose({
         :brushSize="brushSize"
         :enabledRedGreenMode="enabledRedGreenMode"
         :showLayersPanel="showLayersPanel"
-        :isBackgroundChangeable="isBackgroundChangeable"
+        :isChangeCanvasSize="props.isChangeCanvasSize"
         @update:canvasWidth="canvasWidth = $event"
         @update:canvasHeight="canvasHeight = $event"
         @update:canvasColor="canvasColor = $event"
@@ -1467,7 +1477,7 @@ defineExpose({
 	position: absolute;
 }
 
-.background-grid {
+.canvas-container {
   --offsetX: 50%;
   --offsetY: 50%;
   --size: 10px;

src/component/Canvas/CanvasEditor/managers/CanvasManager.js

@@ -459,6 +459,14 @@ export class CanvasManager {
 	const fheight = fixedLayerObj.height * fixedLayerObj.scaleY
 	const bwidth = backgroundObject.width * backgroundObject.scaleX
 	const bheight = backgroundObject.height * backgroundObject.scaleY
+	console.log(fixedLayerObj.width,
+		fixedLayerObj.scaleX,
+		fixedLayerObj.height,
+		fixedLayerObj.scaleY,
+		backgroundObject.width,
+backgroundObject.scaleX,
+backgroundObject.height,
+backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	if(Math.abs(fwidth/bwidth - fheight/bheight) < 0.1) return;
 	this.canvasWidth.value = fwidth
 	this.canvasHeight.value = fheight
@@ -1304,6 +1312,7 @@ export class CanvasManager {
         canvasColor: this.canvasColor.value,
         activeLayerId: this.layerManager?.activeLayerId?.value,
       };
+	  this.FixJsonIdLoss(data);
       console.log("获取画布JSON数据...", data);
 	  return JSON.stringify(data);
     } catch (error) {
@@ -1311,7 +1320,6 @@ export class CanvasManager {
       throw new Error("获取画布JSON失败");
     }
   }
-
   loadJSON(json, calllBack) {
 
     // 确保传入的json是字符串格式
@@ -1324,10 +1332,11 @@ export class CanvasManager {
     try {
       const parsedJson = JSON.parse(json);
       console.log("加载画布JSON数据:", parsedJson);
+	  this.FixJsonIdLoss(parsedJson);
       this.canvasWidth.value = parsedJson.canvasWidth || this.width;
       this.canvasHeight.value = parsedJson.canvasHeight || this.height;
       this.canvasColor.value = parsedJson.canvasColor || this.backgroundColor;
-
+      
       // eslint-disable-next-line no-async-promise-executor
       return new Promise(async (resolve, reject) => {
         const tempLayers = parsedJson?.layers || [];
@@ -1441,6 +1450,22 @@ export class CanvasManager {
       throw new Error("解析JSON失败，请检查输入格式: " + error.message);
     }
   }
+  /** 修复JSON数据中的ID丢失问题 */
+  FixJsonIdLoss(json){
+	const layers = json?.layers || [];
+	const objects = json?.canvas?.objects || [];
+	layers.forEach((layer) => {
+		if(!layer.fabricObjects?.length && !layer.fabricObject){
+			const obj = objects?.find((o) => o.layerId === layer.id);
+			if(!obj) return;
+			layer.fabricObjects = [{
+				id: obj.id,
+				type: obj.type,
+			}]
+		}
+	})
+  }
+
 
   /**
    * 创建其他图层：印花、颜色、元素...

src/component/Canvas/CanvasEditor/utils/imageHelper.js

@@ -2208,8 +2208,13 @@ export const resizeImage = async (base64, width, height) => {
       const canvas = document.createElement("canvas");
       canvas.width = width;
       canvas.height = height;
+	  const scale = height / img.height;
+	  const w = img.width * scale;
+	  const h = img.height * scale;
+	  const x = (width - w) / 2;
+	  const y = 0;
       const ctx = canvas.getContext("2d");
-      ctx.drawImage(img, 0, 0, width, height);
+      ctx.drawImage(img, x, y, w, h);
       resolve(canvas.toDataURL());
     };
     img.onerror = reject;

src/component/Canvas/OverallCanvas/index.vue

@@ -304,7 +304,7 @@
 				} else if (item.action === ACTIONS.DELETE) {
 					DeleteItemByToken(item.token);
 				} else if (item.action === ACTIONS.ADD) {
-					DeleteItemByToken(item.token);
+					DeleteItemByToken(item.data.token);
 					list.value.push(item.data);
 					await addObject(item.data);
 				}

src/component/Detail/DesignDetail.vue

@@ -129,6 +129,7 @@ import { Modal,message } from 'ant-design-vue';
 import {getUploadUrl,segmentImage,setGradual,rgbToHsv,rgbaToHex} from '@/tool/util'
 import { useStore } from "vuex";
 import { openGuide,driverObj__ } from "@/tool/guide";
+import { KeyValueDB } from "@/tool/indexedDB";
 import { useI18n } from 'vue-i18n'
 export default defineComponent({
     components:{
@@ -190,7 +191,7 @@ export default defineComponent({
 		watch(()=>detailData.selectDetail,async (newValue,oldValue)=>{
 			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
 			if(newValue?.path)await getSketchSize()
-			if(newValue?.id && oldValue?.id && (newValue.id != oldValue.id)){
+			if(newValue?.id && (newValue?.id != oldValue?.id)){
 				store.commit('DesignDetail/changeCanvasKey')
 			}
 			// privewDetail(oldValue)
@@ -198,9 +199,9 @@ export default defineComponent({
 		provide('getCanvasIfEdit',detailData.getCanvasIfEdit)
 		provide('singleOveral',detailData.singleOveral)
 		provide('isEditPattern',detailData.isEditPattern)
-		const closeModal = ()=>{
+		const closeModal = async ()=>{
-			sessionStorage.removeItem('oppositeRevocation')
+			await KeyValueDB.remove('oppositeRevocation')
-			sessionStorage.removeItem('revocation')
+			await KeyValueDB.remove('revocation')
 			detailData.designDetailShow = false
 			emit('destroy')
 		}
@@ -214,10 +215,9 @@ export default defineComponent({
 				Https.axiosGet(url).then(
 					async (rv: any) => {
 						//清除画布JSON数据
-						sessionStorage.removeItem('canvasList');
+						await KeyValueDB.remove('canvasList');
-						sessionStorage.removeItem('revocation');
+						await KeyValueDB.remove('revocation');
-						sessionStorage.removeItem('oppositeRevocation');
+						await KeyValueDB.remove('oppositeRevocation');
-						sessionStorage.setItem('key', 'value');
 						store.commit('DesignDetail/setDesignDetail',rv)
 						rv.clothes.forEach((item:any)=>{
 							let a
@@ -272,24 +272,24 @@ export default defineComponent({
 			
 		}
 		//撤回
-		const setRevocation = ()=>{//设置撤销
+		const setRevocation = async ()=>{//设置撤销
 			let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail))
-			let revocation:any = JSON.parse((sessionStorage.getItem("revocation") as any))
+			let revocation:any = JSON.parse((await KeyValueDB.get("revocation") as any) || 'null')
 			if(!revocation)revocation = []
-			// let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
+			// let oppositeRevocation = JSON.parse((await KeyValueDB.get("oppositeRevocation") as any))
 			// if(revocation?.[0]?.designItemId != itemDetail.designItemId || revocation?.[0]?.designItemId == undefined){
 			// 	revocation = []
 			// }
 			revocation.push({designData:itemDetail,position:null})
 			detailData.revocationShow = revocation?.length
-			sessionStorage.setItem('revocation', JSON.stringify(revocation));
+			await KeyValueDB.set('revocation', JSON.stringify(revocation));
-			sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
+			await KeyValueDB.set('oppositeRevocation',JSON.stringify([]));
 		}
 		provide('setRevocation',setRevocation)
 
-		const revocation = ()=>{//撤回
+		const revocation = async ()=>{//撤回
-			let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
+			let oppositeRevocation = JSON.parse((await KeyValueDB.get("oppositeRevocation") as any) || 'null')
-			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
+			let revocation = JSON.parse((await KeyValueDB.get("revocation") as any) || 'null')
 			if(revocation.length <= 1)return
 			oppositeRevocation.push(revocation[revocation.length-1])
 			revocation.splice(revocation.length-1,1)
@@ -301,14 +301,14 @@ export default defineComponent({
 				store.commit('DesignDetail/setFrontBack',revocation[revocation.length-1].position)
 			}
 			store.commit('DesignDetail/setDesignColthes',detailData.selectDetail.id)
-			sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
+			await KeyValueDB.set('oppositeRevocation', JSON.stringify(oppositeRevocation));
-			sessionStorage.setItem('revocation', JSON.stringify(revocation));
+			await KeyValueDB.set('revocation', JSON.stringify(revocation));
 			// clearSelect()
 			detailData.positionKey++
 		}
-		const oppositeRevocation = ()=>{//反撤回
+		const oppositeRevocation = async ()=>{//反撤回
-			let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
+			let oppositeRevocation = JSON.parse((await KeyValueDB.get("oppositeRevocation") as any) || 'null')
-			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
+			let revocation = JSON.parse((await KeyValueDB.get("revocation") as any) || 'null')
 			// if(!oppositeRevocation[oppositeRevocation.length-1].designData)return
 			if(oppositeRevocation.length < 1)return
 			if(oppositeRevocation[oppositeRevocation.length-1]?.designData){
@@ -321,8 +321,8 @@ export default defineComponent({
 			detailData.revocationShow = revocation.length
 			oppositeRevocation.splice(oppositeRevocation.length-1,1)
 			detailData.oppositeRevocationShow = oppositeRevocation.length
-			sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
+			await KeyValueDB.set('oppositeRevocation', JSON.stringify(oppositeRevocation));
-			sessionStorage.setItem('revocation', JSON.stringify(revocation));
+			await KeyValueDB.set('revocation', JSON.stringify(revocation));
 			// this.clearSelect()
 			detailData.positionKey++
 		}
@@ -446,7 +446,6 @@ export default defineComponent({
 					let value = {
 						currentType : JSON.parse(JSON.stringify(detailData.currentDetailType)),
 						rv:rv,
-						fun:setRevocation
 					}
 					if(detailData?.designDetail?.newModel)detailData.designDetail.oldModel = JSON.parse(JSON.stringify(detailData.designDetail.newModel))
 
@@ -499,7 +498,7 @@ export default defineComponent({
 			Https.axiosPost(Https.httpUrls.designSingle, data).then(async (rv)=>{
 				saveCanvasJSONToSession()
 				// store.commit('DesignDetail/setPraeview',rv)
-				const sessionCanvasList = sessionStorage.getItem('canvasList');
+				const sessionCanvasList = await KeyValueDB.get('canvasList');
 				const canvasList = sessionCanvasList ? JSON.parse(sessionCanvasList) : []
 				for (let i = 0; i < canvasList.length; i++) {
 					const index = detailData.designDetail.clothes.findIndex(item => item.id === canvasList[i].id);
@@ -561,11 +560,10 @@ export default defineComponent({
 					segmentImage(detailData.selectDetail.maskUrl,partialDesign,size).then(async (rv)=>{
 						let front = detailData.frontBack.front[detailData.imgDomIndex]
 						let back = detailData.frontBack.back[detailData.imgDomIndex]
-						if(!front?.oldImageUrl)front.oldImageUrl = front.imageUrl
-						if(!front?.oldMaskUrl)front.oldMaskUrl = front.maskUrl
-						if(!back?.oldImageUrl)back.oldImageUrl = back.imageUrl
-						if(!front?.oldMaskUrl)store.commit('DesignDetail/updataDetailItem',{maskUrl:front.oldMaskUrl})
 
+						front.oldImageUrl = ''
+						front.oldMaskUrl = ''
+						back.oldImageUrl = ''
 						front.imageUrl = rv.targetFrontUrl
 						back.imageUrl = rv.targetBackUrl
 						store.commit('DesignDetail/canvasPreviewUpdata',{type:detailData.isEditPattern.value?'all':detailData.currentDetailType,callBack:setRevocation})
@@ -575,9 +573,9 @@ export default defineComponent({
 				img.src = detailData.selectDetail.path
 			})
 		}
-		const saveCanvasJSONToSession = ()=>{
+		const saveCanvasJSONToSession = async ()=>{
 			let canvasJSON = detailDom.canvasBox.getCanvasJSON()
-			const sessionCanvasList = sessionStorage.getItem('canvasList');
+			const sessionCanvasList = await KeyValueDB.get('canvasList');
 			const list = sessionCanvasList ? JSON.parse(sessionCanvasList) : []
 			let index = -1
 			list.forEach((item:any,i:number)=>{
@@ -590,7 +588,7 @@ export default defineComponent({
 			}else{
 				list[index].canvasJSON = canvasJSON
 			}
-			sessionStorage.setItem('canvasList', JSON.stringify(list));
+			await KeyValueDB.set('canvasList', JSON.stringify(list));
 		}
 		const detailEdit = async (str:any)=>{
 			if(str){
@@ -604,8 +602,10 @@ export default defineComponent({
 					// 	detailDom.canvasBox.editFront(str)
 					// }
 					detailDom.canvasBox.editFront(str)
-					let otherData = await updateOtherLayers('single')
+					if(str == 'canvasEditor'){
-					await detailDom.canvasBox.updateOtherLayers(otherData)
+						let otherData = await updateOtherLayers('single')
+						await detailDom.canvasBox.updateOtherLayers(otherData)
+					}
 					detailData.isEditPattern.value = str
 				}
 			}else{
@@ -725,12 +725,12 @@ export default defineComponent({
 			coverRevocation()
 			detailDom.detailLeft.sketchSysToLibrary()
 		}
-		const coverRevocation = ()=>{
+		const coverRevocation = async ()=>{
 			let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail))
-			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
+			let revocation = JSON.parse((await KeyValueDB.get("revocation") as any) || 'null')
 			revocation.splice(revocation.length-1,1,{designData:itemDetail,position:null})
-			sessionStorage.setItem('revocation', JSON.stringify(revocation));
+			await KeyValueDB.set('revocation', JSON.stringify(revocation));
-			sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
+			await KeyValueDB.set('oppositeRevocation',JSON.stringify([]));
 		}
 		const setSloganData = (data:any)=>{
 			detailData.selectDetail.sketchString = data
@@ -740,9 +740,9 @@ export default defineComponent({
 		}
 		onMounted(()=>{
 		})
-		onBeforeUnmount(()=>{
+		onBeforeUnmount(async ()=>{
-			sessionStorage.removeItem('oppositeRevocation')
+			await KeyValueDB.remove('oppositeRevocation')
-			sessionStorage.removeItem('revocation')
+			await KeyValueDB.remove('revocation')
 			store.commit('DesignDetail/clearDetailData')
 
 		})
@@ -775,36 +775,7 @@ export default defineComponent({
 			window.removeEventListener('beforeunload',beforeunload)
 		}
 		window.addEventListener('beforeunload',beforeunload)
-		// let url = Https.httpUrls.getDesignDetail + `?designItemId=34242&designPythonOutfitId=34004`
+		
-        //     this.loadingShow = true
-        //     Https.axiosGet(url).then(
-		// 		async (rv: any) => {
-		// 			rv.clothes.forEach((item:any)=>{
-		// 				let a
-		// 				if(item.layersObject[0].imageCategory.indexOf("back") == -1){
-		// 					a = item.layersObject[0]
-		// 					item.layersObject[0] = item.layersObject[1]
-		// 					item.layersObject[1] = a
-		// 				}
-		// 				if(item.printObject.prints == null){
-		// 					item.printObject.prints = [{}]
-		// 				}
-		// 			})
-        //             this.store.commit('setDesignItemDetail',rv)
-		// 			if(rv.others[0].printObject.path == null){
-		// 				this.body = false
-		// 			}else{
-		// 				this.body = true
-		// 			}
-		// 			this.setImgSize()
-        //             this.generateHighDesignImg = rv.highDesignUrl
-        //             this.designShowPrview = 1
-        //             this.designDetailShow = true
-        //             this.loadingShow = false
-        //         }
-        //     ).catch(rv=>{
-        //         this.loadingShow = false
-        //     })
 	},
 		
 })

src/component/Detail/canvas/index.vue

@@ -18,7 +18,8 @@
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
-							:hideCanvas="hideCanvas"
+							:isChangeCanvasSize="false"
+							:hideCanvas="hideCanvas || !isEditPattern"
 							ref="editCanvas">
 						</editCanvas>
 						<!-- <canvasContent ref="canvasContent"></canvasContent> -->
@@ -34,7 +35,7 @@
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
-							:hideCanvas="hideCanvas"
+							:hideCanvas="hideCanvas || !isEditPattern"
 							ref="editCanvasBackFront">
 						</editCanvas>
 					</div>
@@ -117,7 +118,7 @@ export default defineComponent({
 			getCanvasIfEdit:inject('getCanvasIfEdit')as any,
 			canvasInstance:null as any,
 			canvasJSON:'',
-			hideCanvas: computed(()=>(store.state.Workspace.projectPath !== route.fullPath && props.isEditPattern)),
+			hideCanvas: computed(()=>(store.state.Workspace.projectPath !== route.fullPath)),
 			otherData:computed(()=>({
 				canvasId: store.state.DesignDetail.selectDetail.canvasId,
 				color: store.state.DesignDetail.selectDetail.color,
@@ -135,38 +136,20 @@ export default defineComponent({
 		
 		const editFront = (str:any)=>{//编辑前后片
 			let canvasJSON = '' as any
-			if(detailData.currentView === 'canvasEditor'){
-				sessionStorage.setItem('sketchEdit',detailDom.editCanvas.getJSON())
-				canvasJSON = sessionStorage.getItem('frontBackEdit');
-			}else if(detailData.currentView === 'redGreenExample'){
-				sessionStorage.setItem('frontBackEdit',detailDom.editCanvasBackFront.getJSON())
-				canvasJSON = sessionStorage.getItem('sketchEdit');
-			}
 			// detailData.canvasLoad = false
 			detailData.currentView = str
-			if(canvasJSON){
+			if(detailData.currentView === 'redGreenExample'){
-				// detailData.canvasLoad = true
 				nextTick(()=>{
-					if(detailData.currentView === 'redGreenExample'){
+					setCanvas(detailData.selectDetail.path).then(()=>{
-						detailDom.editCanvas.loadJSON(canvasJSON)
+						// detailData.canvasLoad = true
-					}else{
+					})
-						detailDom.editCanvasBackFront.loadJSON(canvasJSON)
-					}
 				})
 			}else{
-				if(detailData.currentView === 'redGreenExample'){
+				nextTick(()=>{
-					nextTick(()=>{
+					setCanvas(detailData.frontBack.front[detailData.imgDomIndex].maskUrl).then(()=>{
-						setCanvas(detailData.selectDetail.path).then(()=>{
+						// detailData.canvasLoad = true
-							// detailData.canvasLoad = true
-						})
 					})
-				}else{
+				})
-					nextTick(()=>{
-						setCanvas(detailData.frontBack.front[detailData.imgDomIndex].maskUrl).then(()=>{
-							// detailData.canvasLoad = true
-						})
-					})
-				}
 			}
 		}
 		const updateOtherLayers = (obj:any)=>{
@@ -211,6 +194,7 @@ export default defineComponent({
 					// detailData.canvasConfig.height = domHeight
 					detailData.canvasConfig.width = img.width
 					detailData.canvasConfig.height = img.height
+					detailData.canvasConfig.initZoom = true
 
 					res('')
 				}
@@ -339,7 +323,6 @@ export default defineComponent({
 		const canvasLoadJsonSuccess = async ()=>{
 			let otherData = await props.updateOtherLayers()
 			await updateOtherLayers(otherData)
-
 			if(detailData.changeSketchUpdateFrontBack){
 				await detailData.changeSketchUpdateFrontBack()
 				detailData.changeSketchUpdateFrontBack = null
@@ -389,9 +372,6 @@ export default defineComponent({
 			if(front?.oldMaskUrl)front.maskUrl = front.oldMaskUrl
 			if(back?.oldImageUrl)back.imageUrl = back.oldImageUrl
 			if(front?.oldMaskUrl)store.commit('DesignDetail/updataDetailItem',{maskUrl:front.maskUrl})
-
-			sessionStorage.removeItem('frontBackEdit');
-			sessionStorage.removeItem('sketchEdit');
 			detailData.canvasLoad = false
 			// privewDetail()
 		})

src/component/Detail/detailLeft/sketch.vue

@@ -79,7 +79,6 @@ export default defineComponent({
 			if(data?.imgUrl)data.url = data.imgUrl
 			let value = {
 				data,
-				id,
 			}
 			if(detailData.currentDetailType == 'sketch'){
 				detailData.selectDetail.sketchString = ''

src/component/Detail/detailRight/editPrintElement.vue

@@ -53,7 +53,7 @@
 			</a-slider> -->
 			<a-popover
 				trigger="click"
-				placement="topRight"
+				placement="leftTop"
 				destroyTooltipOnHide
 				:title="t('Canvas.repeatSetting')"
 			>
@@ -252,7 +252,7 @@ export default defineComponent({
 				designType:data.designType,
 				ifSingle:editPrintElementData.stateOverallSingle == 'single',
 				level2Type:data.level2Type,
-				location,
+				location:editPrintElementData.stateOverallSingle == 'single'?location:[0,0],
 				minIOPath:data.minIOPath || data.originalUrl,
 				path:data.url,
 				priority:editPrintElementData.printZIndex,
@@ -276,7 +276,8 @@ export default defineComponent({
 				}else{
 					let x = Number(style.left.replace(/px/g,''))
 					let y = Number(style.top.replace(/px/g,''))
-					location = [(x*sketchWH[0]) ,(y*sketchWH[1])]
+					location = item.location
+					// location = [(x*sketchWH[0]) ,(y*sketchWH[1])]
 					scale = item.scale
 					// scale = [item.pattern.style.width/item.pattern.style.height,item.pattern.style.height/item.pattern.style.width]
 					// location = [item.pattern.style.left,item.pattern.style.top]
@@ -380,19 +381,21 @@ export default defineComponent({
 			}
 			if(item.ifSingle){
 				editPrintElementData.printStyleList[props.type].single.push(item)
-			}else{
+			}
+			if(!item.ifSingle){
 				item.token = Date.now().toString() + (editPrintElementData.printStyleList[props.type].overall.length + '')
 				// editPrintElementData.printStyleList[props.type].overall = []
 				editPrintElementData.printStyleList[props.type].overall.push(item)
-				setTimeout(()=>{
+				if(editPrintElementData.stateOverallSingle == 'overall'){
-					editPrintElementDom.pingpuRef.updataList([
+					setTimeout(()=>{
-						{
+						editPrintElementDom.pingpuRef.updataList([
-							action: ACTIONS.ADD,
+							{
-							data: item,
+								action: ACTIONS.ADD,
-						},
+								data: item,
-					]);
+							},
-				})
+						]);
-				
+					})
+				}
 			}
 		}
 		const setPosition = ()=>{
@@ -423,10 +426,10 @@ export default defineComponent({
 						editPrintElementData.printStyleList[props.type].single = []
 						editPrintElementData.printStyleList[props.type].overall = []
 						arr.forEach((item:any)=>{
-							if(!item.ifSingle){
+							// if(!item.ifSingle){
-								editPrintElementData.stateOverallSingle = 'overall',
+							// 	editPrintElementData.stateOverallSingle = 'overall',
-								state = false
+							// 	state = false
-							}
+							// }
 							getItemPosition(item)
 						})
 						setItemPosition()
@@ -470,16 +473,21 @@ export default defineComponent({
 			setPosition()
 		},{immediate: true,})
 		watch(()=>editPrintElementData.stateOverallSingle,(newVal)=>{
-			let arr = editPrintElementData.printStyleList[props.type][newVal]
+			let arr:any = editPrintElementData.selectDetail.newDetail?.print || 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]
+			}
 			if(arr.length > 0){
 				editPrintElementData.imgDomIndex = 0
-				if(newVal == 'overall'){
+					editPrintElementData.printStyleList[props.type][newVal] = []
-					editPrintElementData.printStyleList[props.type].single = []
+					// editPrintElementData.printStyleList[props.type].single = []
-					editPrintElementData.printStyleList[props.type].overall = []
+					// editPrintElementData.printStyleList[props.type].overall = []
 					arr.forEach((item:any,index:number) => {
 						getItemPosition(item)
 					});
-				}
 			}else{
 				editPrintElementData.imgDomIndex = -1
 			}
@@ -900,8 +908,7 @@ export default defineComponent({
 		}
 		const inputFillOffset = (offset:any)=>{
 			let arr = editPrintElementData.printStyleList[props.type].overall
-			let location = [offset.left * offset.size[0] / 100,offset.top * offset.size[1] / 100]
+			arr[editPrintElementData.imgDomIndex].location = [offset.left * offset.size[0] / 100,offset.top * offset.size[1] / 100]
-			arr[editPrintElementData.imgDomIndex].location = location
 			editPrintElementDom.pingpuRef.updataList([
 				{
 					action: ACTIONS.UPDATE,
@@ -1111,9 +1118,8 @@ export default defineComponent({
 		.habit_System_Designer {
 			align-items: center;
 			display: flex;
-			justify-content: flex-end;
 			margin-top: 1.8rem;
-			margin-right: .8rem;
+			margin-left: .8rem;
 
 			.ant-slider-track,
 			.ant-slider-rail {
@@ -1207,20 +1213,22 @@ export default defineComponent({
 				// width: 100%;
 				// max-height: 70%;
 				width: max-content;
+
+				overflow-y: auto;
+				overflow-x: hidden;
 				&.active{
 					flex-direction: row;
 				}
+				&::-webkit-scrollbar {
+					display: none;
+				}
 				.designOpenrtion_imgMask{
-					width: auto;
+					width: 100%;
-					height: auto;
+					height: 100%;
 					min-width: 60%;
-					overflow-y: auto;
-					overflow-x: hidden;
 					// max-height: 80%;
 					position: relative;
-					&::-webkit-scrollbar {
+					
-						display: none;
-					}
 					>img{
 						z-index: 2;
 						position: relative;

src/component/Detail/detailRight/overallSetting/RepeatSetting.vue

@@ -17,7 +17,7 @@
 				:max="1000"
 				:step="1"
 				is-input
-				:tipFormatter="(v) => `${scale}%`"
+				:tipFormatter="(v) => `${scale.toFixed(0)}%`"
 				:value="scale"
 				@input="inputFillScale"
 			/>
@@ -121,8 +121,8 @@
 	]);
 	const inputFillScale = (e) => {
 		const scale = e / 100;
-		console.log(scale)
+		console.log(scale.toFixed(2))
-		emit("inputFillScale", scale);
+		emit("inputFillScale", scale.toFixed(2));
 	};
 	const inputOffset = async (e:any)=>{
 		emit('inputFillOffset', {...e,size: await sketchSize()})

src/component/Detail/model/modelNav.vue

@@ -102,6 +102,7 @@ export default defineComponent({
 				}
 			}).then((rv)=>{
 				if(rv)store.commit('DesignDetail/setDesignColthes',item.id)
+				console.log(JSON.parse(JSON.stringify(item)),'==========')
 			})
 		}
 		const deleteDetailItem = (id:number)=>{

src/component/Detail/model/modelPosition.vue

@@ -36,6 +36,7 @@ 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';
@@ -393,11 +394,11 @@ export default defineComponent({
 			initMoveableForSelected()
 		},{immediate: true,})
 
-		const setRevocation = ()=>{
+		const setRevocation = async ()=>{
 			let frontBack = JSON.parse(JSON.stringify(detailData.frontBack))	
-			let revocation:any = JSON.parse((sessionStorage.getItem("revocation") as any))
+			let revocation:any = JSON.parse((await KeyValueDB.get("revocation") as any) || '[]')
 			revocation.push({designData:null,position:frontBack})
-			sessionStorage.setItem('revocation', JSON.stringify(revocation));
+			KeyValueDB.set('revocation', JSON.stringify(revocation));
 		}
 		const upDataDetail = async ()=>{
 			//同步到selectDetail数据中，

src/store/Detail/designDetail.ts

@@ -175,12 +175,12 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 			state.designDetail.clothes.forEach((item:any) => {
 				if(item.id == data){
 					state.selectDetail = item
-					state.frontBack.front.forEach((v:any,index:any)=>{
+					// state.frontBack.front.forEach((v:any,index:any)=>{
-						v.designOpenrtionBtn = false
+					// 	v.designOpenrtionBtn = false
-						if(v.id == data){
+					// 	if(v.id == data){
-							v.designOpenrtionBtn = true
+					// 		v.designOpenrtionBtn = true
-						}
+					// 	}
-					})
+					// })
 				}
 			});
         },
@@ -315,6 +315,24 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 					detailItem.offset = [0,0]
 					detailItem.transpose = item.transpose || [1,1]
 					detailItem.rotate = item.rotate || 0
+					function isJSONString(str) {
+						try {
+							JSON.parse(str);
+							return true;  // 解析成功，是有效的JSON字符串
+						} catch (e) {
+							return false; // 解析失败，不是有效的JSON字符串
+						}
+					}
+					item.trims?.prints?.forEach((item:any) => {
+						if(isJSONString(item.object)){
+							item.object = JSON.parse(item.object)
+						}
+					});
+					item.printObject?.prints?.forEach((item:any) => {
+						if(isJSONString(item.object)){
+							item.object = JSON.parse(item.object)
+						}
+					});
 					detailItem.printObject = item.printObject
 					detailItem.trims = item.trims
 					detailItem.type = item.type
@@ -345,7 +363,6 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 					uploadDetail(state.selectDetail)
 				}
 			}
-			if(value.fun)value.fun()
 
 		},
 		

src/tool/indexedDB.js

@@ -0,0 +1,71 @@
+const KeyValueDB = {
+	dbName: 'kvStorage',
+	storeName: 'kvStore',
+	
+	async init() {
+	  return new Promise((resolve) => {
+		const request = indexedDB.open(this.dbName, 1);
+		
+		request.onupgradeneeded = (e) => {
+		  const db = e.target.result;
+		  if (!db.objectStoreNames.contains(this.storeName)) {
+			db.createObjectStore(this.storeName);
+		  }
+		};
+		
+		request.onsuccess = () => resolve(request.result);
+	  });
+	},
+  
+	// 设置值（类似 localStorage.setItem）
+	async set(key, value) {
+	  const db = await this.init();
+	  return new Promise((resolve) => {
+		const tx = db.transaction(this.storeName, 'readwrite');
+		tx.objectStore(this.storeName).put(value, key);
+		tx.oncomplete = () => resolve();
+	  });
+	},
+  
+	// 获取值（类似 localStorage.getItem）
+	async get(key) {
+	  const db = await this.init();
+	  return new Promise((resolve) => {
+		const tx = db.transaction(this.storeName, 'readonly');
+		const request = tx.objectStore(this.storeName).get(key);
+		request.onsuccess = () => resolve(request.result);
+	  });
+	},
+  
+	// 删除值
+	async remove(key) {
+	  const db = await this.init();
+	  return new Promise((resolve) => {
+		const tx = db.transaction(this.storeName, 'readwrite');
+		tx.objectStore(this.storeName).delete(key);
+		tx.oncomplete = () => resolve();
+	  });
+	},
+  
+	// 清空所有
+	async clear() {
+	  const db = await this.init();
+	  return new Promise((resolve) => {
+		const tx = db.transaction(this.storeName, 'readwrite');
+		tx.objectStore(this.storeName).clear();
+		tx.oncomplete = () => resolve();
+	  });
+	},
+  
+	// 获取所有键
+	async keys() {
+	  const db = await this.init();
+	  return new Promise((resolve) => {
+		const tx = db.transaction(this.storeName, 'readonly');
+		const store = tx.objectStore(this.storeName);
+		const request = store.getAllKeys();
+		request.onsuccess = () => resolve(request.result);
+	  });
+	}
+  };
+  export {KeyValueDB}