From 73c2d1d41e98539abf79e22d54f2572d7943c299 Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Wed, 21 Jan 2026 10:09:29 +0800 Subject: [PATCH 1/3] fix --- src/component/Detail/canvas/index.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/component/Detail/canvas/index.vue b/src/component/Detail/canvas/index.vue index 1e9181f4..2d07d7e2 100644 --- a/src/component/Detail/canvas/index.vue +++ b/src/component/Detail/canvas/index.vue @@ -18,7 +18,7 @@ :clothing-image-opts="{ imageMode:'contains', }" - :hideCanvas="hideCanvas && !isEditPattern" + :hideCanvas="hideCanvas || !isEditPattern" ref="editCanvas"> @@ -34,7 +34,7 @@ :clothing-image-opts="{ imageMode:'contains', }" - :hideCanvas="hideCanvas && !isEditPattern" + :hideCanvas="hideCanvas || !isEditPattern" ref="editCanvasBackFront"> From 4688f234d9289260fd7c869dbd67ed388d7b810a Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Wed, 21 Jan 2026 10:38:03 +0800 Subject: [PATCH 2/3] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=8D=B0=E8=8A=B1?= =?UTF-8?q?=E7=BC=96=E8=BE=91=E7=95=8C=E9=9D=A2=E9=87=8D=E5=A4=8D=E5=AF=B9?= =?UTF-8?q?=E7=94=BB=E5=B8=83=E4=B8=8A=E6=B7=BB=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/Detail/DesignDetail.vue | 2 +- .../Detail/detailRight/editPrintElement.vue | 28 +++++++++++-------- 2 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue index 96baf9ff..20538dad 100644 --- a/src/component/Detail/DesignDetail.vue +++ b/src/component/Detail/DesignDetail.vue @@ -190,7 +190,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) diff --git a/src/component/Detail/detailRight/editPrintElement.vue b/src/component/Detail/detailRight/editPrintElement.vue index a93bd5fa..31d38a5a 100644 --- a/src/component/Detail/detailRight/editPrintElement.vue +++ b/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){ - editPrintElementData.stateOverallSingle = 'overall', - state = false - } + // if(!item.ifSingle){ + // editPrintElementData.stateOverallSingle = 'overall', + // 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].single = [] - editPrintElementData.printStyleList[props.type].overall = [] + editPrintElementData.printStyleList[props.type][newVal] = [] + // editPrintElementData.printStyleList[props.type].single = [] + // editPrintElementData.printStyleList[props.type].overall = [] arr.forEach((item:any,index:number) => { getItemPosition(item) }); - } }else{ editPrintElementData.imgDomIndex = -1 } From 70537847bcb177b74a30b561d801ee1cde112da2 Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Wed, 21 Jan 2026 11:55:43 +0800 Subject: [PATCH 3/3] =?UTF-8?q?=E4=BF=AE=E5=A4=8Ddetail=E6=92=A4=E5=9B=9E?= =?UTF-8?q?=E5=AD=98=E5=82=A8=E6=95=B0=E6=8D=AE=E8=BF=87=E5=A4=A7=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CanvasEditor/managers/CanvasManager.js | 8 +++ src/component/Detail/DesignDetail.vue | 68 +++++++++--------- src/component/Detail/canvas/index.vue | 37 +++------- .../Detail/detailRight/editPrintElement.vue | 18 ++--- src/component/Detail/model/modelPosition.vue | 7 +- src/tool/indexedDB.js | 71 +++++++++++++++++++ 6 files changed, 136 insertions(+), 73 deletions(-) create mode 100644 src/tool/indexedDB.js diff --git a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js index bf7ea1a6..59194e9e 100644 --- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js +++ b/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 diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue index 20538dad..5ef65b19 100644 --- a/src/component/Detail/DesignDetail.vue +++ b/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:{ @@ -198,9 +199,9 @@ export default defineComponent({ provide('getCanvasIfEdit',detailData.getCanvasIfEdit) provide('singleOveral',detailData.singleOveral) provide('isEditPattern',detailData.isEditPattern) - const closeModal = ()=>{ - sessionStorage.removeItem('oppositeRevocation') - sessionStorage.removeItem('revocation') + const closeModal = async ()=>{ + await KeyValueDB.remove('oppositeRevocation') + 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'); - sessionStorage.removeItem('revocation'); - sessionStorage.removeItem('oppositeRevocation'); - sessionStorage.setItem('key', 'value'); + await KeyValueDB.remove('canvasList'); + await KeyValueDB.remove('revocation'); + await KeyValueDB.remove('oppositeRevocation'); 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)); - sessionStorage.setItem('oppositeRevocation',JSON.stringify([])); + await KeyValueDB.set('revocation', JSON.stringify(revocation)); + await KeyValueDB.set('oppositeRevocation',JSON.stringify([])); } provide('setRevocation',setRevocation) - const revocation = ()=>{//撤回 - let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any)) - let revocation = JSON.parse((sessionStorage.getItem("revocation") as any)) + const revocation = async ()=>{//撤回 + let oppositeRevocation = JSON.parse((await KeyValueDB.get("oppositeRevocation") as any) || 'null') + 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)); - sessionStorage.setItem('revocation', JSON.stringify(revocation)); + await KeyValueDB.set('oppositeRevocation', JSON.stringify(oppositeRevocation)); + await KeyValueDB.set('revocation', JSON.stringify(revocation)); // clearSelect() detailData.positionKey++ } - const oppositeRevocation = ()=>{//反撤回 - let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any)) - let revocation = JSON.parse((sessionStorage.getItem("revocation") as any)) + const oppositeRevocation = async ()=>{//反撤回 + let oppositeRevocation = JSON.parse((await KeyValueDB.get("oppositeRevocation") as any) || 'null') + 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)); - sessionStorage.setItem('revocation', JSON.stringify(revocation)); + await KeyValueDB.set('oppositeRevocation', JSON.stringify(oppositeRevocation)); + 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)); - sessionStorage.setItem('oppositeRevocation',JSON.stringify([])); + await KeyValueDB.set('revocation', JSON.stringify(revocation)); + await KeyValueDB.set('oppositeRevocation',JSON.stringify([])); } const setSloganData = (data:any)=>{ detailData.selectDetail.sketchString = data @@ -742,9 +744,9 @@ export default defineComponent({ } onMounted(()=>{ }) - onBeforeUnmount(()=>{ - sessionStorage.removeItem('oppositeRevocation') - sessionStorage.removeItem('revocation') + onBeforeUnmount(async ()=>{ + await KeyValueDB.remove('oppositeRevocation') + await KeyValueDB.remove('revocation') store.commit('DesignDetail/clearDetailData') }) diff --git a/src/component/Detail/canvas/index.vue b/src/component/Detail/canvas/index.vue index 5db6e238..e6cd4c03 100644 --- a/src/component/Detail/canvas/index.vue +++ b/src/component/Detail/canvas/index.vue @@ -135,38 +135,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){ - // detailData.canvasLoad = true + if(detailData.currentView === 'redGreenExample'){ nextTick(()=>{ - if(detailData.currentView === 'redGreenExample'){ - detailDom.editCanvas.loadJSON(canvasJSON) - }else{ - detailDom.editCanvasBackFront.loadJSON(canvasJSON) - } + setCanvas(detailData.selectDetail.path).then(()=>{ + // detailData.canvasLoad = true + }) }) }else{ - if(detailData.currentView === 'redGreenExample'){ - nextTick(()=>{ - setCanvas(detailData.selectDetail.path).then(()=>{ - // detailData.canvasLoad = true - }) + nextTick(()=>{ + setCanvas(detailData.frontBack.front[detailData.imgDomIndex].maskUrl).then(()=>{ + // detailData.canvasLoad = true }) - }else{ - nextTick(()=>{ - setCanvas(detailData.frontBack.front[detailData.imgDomIndex].maskUrl).then(()=>{ - // detailData.canvasLoad = true - }) - }) - } + }) } } const updateOtherLayers = (obj:any)=>{ @@ -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() }) diff --git a/src/component/Detail/detailRight/editPrintElement.vue b/src/component/Detail/detailRight/editPrintElement.vue index 31d38a5a..1ab70eae 100644 --- a/src/component/Detail/detailRight/editPrintElement.vue +++ b/src/component/Detail/detailRight/editPrintElement.vue @@ -1118,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 { @@ -1212,20 +1212,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; - height: auto; + width: 100%; + 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; diff --git a/src/component/Detail/model/modelPosition.vue b/src/component/Detail/model/modelPosition.vue index c606f961..51da1ef3 100644 --- a/src/component/Detail/model/modelPosition.vue +++ b/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数据中， diff --git a/src/tool/indexedDB.js b/src/tool/indexedDB.js new file mode 100644 index 00000000..c6555325 --- /dev/null +++ b/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} \ No newline at end of file