Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite

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

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 && (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,26 @@ 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')
+			console.log(itemDetail,revocation,'=========')
 			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')
+			console.log(oppositeRevocation,revocation,'=========')
 			if(revocation.length <= 1)return
 			oppositeRevocation.push(revocation[revocation.length-1])
 			revocation.splice(revocation.length-1,1)
@@ -301,14 +303,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 +323,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++
 		}
@@ -499,7 +501,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);
@@ -574,9 +576,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)=>{
@@ -589,7 +591,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){
@@ -727,12 +729,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
@@ -742,9 +744,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')
 
 		})

src/component/Detail/canvas/index.vue

@@ -18,7 +18,7 @@
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
-							:hideCanvas="hideCanvas && !isEditPattern"
+							:hideCanvas="hideCanvas || !isEditPattern"
 							ref="editCanvas">
 						</editCanvas>
 						<!-- <canvasContent ref="canvasContent"></canvasContent> -->
@@ -34,7 +34,7 @@
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
-							:hideCanvas="hideCanvas && !isEditPattern"
+							:hideCanvas="hideCanvas || !isEditPattern"
 							ref="editCanvasBackFront">
 						</editCanvas>
 					</div>
@@ -135,25 +135,8 @@ 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){
-				// detailData.canvasLoad = true
-				nextTick(()=>{
-					if(detailData.currentView === 'redGreenExample'){
-						detailDom.editCanvas.loadJSON(canvasJSON)
-					}else{
-						detailDom.editCanvasBackFront.loadJSON(canvasJSON)
-					}
-				})
-			}else{
 			if(detailData.currentView === 'redGreenExample'){
 				nextTick(()=>{
 					setCanvas(detailData.selectDetail.path).then(()=>{
@@ -168,7 +151,6 @@ export default defineComponent({
 				})
 			}
 		}
-		}
 		const updateOtherLayers = (obj:any)=>{
 			if(!detailDom.editCanvas)return
 			return new Promise(async (res,reject)=>{
@@ -389,9 +371,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/detailRight/editPrintElement.vue

@@ -379,9 +379,10 @@ export default defineComponent({
 					item.object.blendMode = 'source-over'
 				}
 			}
-			if(item.ifSingle){
+			if(item.ifSingle && editPrintElementData.stateOverallSingle == 'single'){
 				editPrintElementData.printStyleList[props.type].single.push(item)
-			}else{
+			}
+			if(!item.ifSingle && editPrintElementData.stateOverallSingle == 'overall'){
 				item.token = Date.now().toString() + (editPrintElementData.printStyleList[props.type].overall.length + '')
 				// editPrintElementData.printStyleList[props.type].overall = []
 				editPrintElementData.printStyleList[props.type].overall.push(item)
@@ -424,10 +425,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()
@@ -471,16 +472,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
 			}
@@ -1112,7 +1118,7 @@ export default defineComponent({
 			align-items: center;
 			display: flex;
 			margin-top: 1.8rem;
-			margin-right: .8rem;
+			margin-left: .8rem;
 
 			.ant-slider-track,
 			.ant-slider-rail {
@@ -1206,20 +1212,22 @@ export default defineComponent({
 				// width: 100%;
 				// max-height: 70%;
 				width: max-content;
+
+				overflow-y: auto;
+				overflow-x: hidden;
 				&.active{
 					flex-direction: row;
 				}
-				.designOpenrtion_imgMask{
-					width: auto;
-					height: auto;
-					min-width: 60%;
-					overflow-y: auto;
-					overflow-x: hidden;
-					// max-height: 80%;
-					position: relative;
 				&::-webkit-scrollbar {
 					display: none;
 				}
+				.designOpenrtion_imgMask{
+					width: 100%;
+					height: 100%;
+					min-width: 60%;
+					// max-height: 80%;
+					position: relative;
+					
 					>img{
 						z-index: 2;
 						position: relative;

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/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}