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

This commit is contained in:
李志鹏
2026-01-21 13:37:52 +08:00
6 changed files with 156 additions and 87 deletions

View File

@@ -459,6 +459,14 @@ export class CanvasManager {
const fheight = fixedLayerObj.height * fixedLayerObj.scaleY const fheight = fixedLayerObj.height * fixedLayerObj.scaleY
const bwidth = backgroundObject.width * backgroundObject.scaleX const bwidth = backgroundObject.width * backgroundObject.scaleX
const bheight = backgroundObject.height * backgroundObject.scaleY 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; if(Math.abs(fwidth/bwidth - fheight/bheight) < 0.1) return;
this.canvasWidth.value = fwidth this.canvasWidth.value = fwidth
this.canvasHeight.value = fheight this.canvasHeight.value = fheight

View File

@@ -129,6 +129,7 @@ import { Modal,message } from 'ant-design-vue';
import {getUploadUrl,segmentImage,setGradual,rgbToHsv,rgbaToHex} from '@/tool/util' import {getUploadUrl,segmentImage,setGradual,rgbToHsv,rgbaToHex} from '@/tool/util'
import { useStore } from "vuex"; import { useStore } from "vuex";
import { openGuide,driverObj__ } from "@/tool/guide"; import { openGuide,driverObj__ } from "@/tool/guide";
import { KeyValueDB } from "@/tool/indexedDB";
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
export default defineComponent({ export default defineComponent({
components:{ components:{
@@ -190,7 +191,7 @@ export default defineComponent({
watch(()=>detailData.selectDetail,async (newValue,oldValue)=>{ watch(()=>detailData.selectDetail,async (newValue,oldValue)=>{
detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id) detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
if(newValue?.path)await getSketchSize() if(newValue?.path)await getSketchSize()
if(newValue?.id && (newValue.id != oldValue.id)){ if(newValue?.id && (newValue?.id != oldValue?.id)){
store.commit('DesignDetail/changeCanvasKey') store.commit('DesignDetail/changeCanvasKey')
} }
// privewDetail(oldValue) // privewDetail(oldValue)
@@ -198,9 +199,9 @@ export default defineComponent({
provide('getCanvasIfEdit',detailData.getCanvasIfEdit) provide('getCanvasIfEdit',detailData.getCanvasIfEdit)
provide('singleOveral',detailData.singleOveral) provide('singleOveral',detailData.singleOveral)
provide('isEditPattern',detailData.isEditPattern) 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 detailData.designDetailShow = false
emit('destroy') emit('destroy')
} }
@@ -214,10 +215,9 @@ export default defineComponent({
Https.axiosGet(url).then( Https.axiosGet(url).then(
async (rv: any) => { async (rv: any) => {
//清除画布JSON数据 //清除画布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) store.commit('DesignDetail/setDesignDetail',rv)
rv.clothes.forEach((item:any)=>{ rv.clothes.forEach((item:any)=>{
let a let a
@@ -272,24 +272,26 @@ export default defineComponent({
} }
//撤回 //撤回
const setRevocation = ()=>{//设置撤销 const setRevocation = async ()=>{//设置撤销
let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail)) 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 = [] 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){ // if(revocation?.[0]?.designItemId != itemDetail.designItemId || revocation?.[0]?.designItemId == undefined){
// revocation = [] // revocation = []
// } // }
revocation.push({designData:itemDetail,position:null}) revocation.push({designData:itemDetail,position:null})
detailData.revocationShow = revocation?.length 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) 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 if(revocation.length <= 1)return
oppositeRevocation.push(revocation[revocation.length-1]) oppositeRevocation.push(revocation[revocation.length-1])
revocation.splice(revocation.length-1,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/setFrontBack',revocation[revocation.length-1].position)
} }
store.commit('DesignDetail/setDesignColthes',detailData.selectDetail.id) 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() // clearSelect()
detailData.positionKey++ 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[oppositeRevocation.length-1].designData)return
if(oppositeRevocation.length < 1)return if(oppositeRevocation.length < 1)return
if(oppositeRevocation[oppositeRevocation.length-1]?.designData){ if(oppositeRevocation[oppositeRevocation.length-1]?.designData){
@@ -321,8 +323,8 @@ export default defineComponent({
detailData.revocationShow = revocation.length detailData.revocationShow = revocation.length
oppositeRevocation.splice(oppositeRevocation.length-1,1) oppositeRevocation.splice(oppositeRevocation.length-1,1)
detailData.oppositeRevocationShow = oppositeRevocation.length 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() // this.clearSelect()
detailData.positionKey++ detailData.positionKey++
} }
@@ -499,7 +501,7 @@ export default defineComponent({
Https.axiosPost(Https.httpUrls.designSingle, data).then(async (rv)=>{ Https.axiosPost(Https.httpUrls.designSingle, data).then(async (rv)=>{
saveCanvasJSONToSession() saveCanvasJSONToSession()
// store.commit('DesignDetail/setPraeview',rv) // store.commit('DesignDetail/setPraeview',rv)
const sessionCanvasList = sessionStorage.getItem('canvasList'); const sessionCanvasList = await KeyValueDB.get('canvasList');
const canvasList = sessionCanvasList ? JSON.parse(sessionCanvasList) : [] const canvasList = sessionCanvasList ? JSON.parse(sessionCanvasList) : []
for (let i = 0; i < canvasList.length; i++) { for (let i = 0; i < canvasList.length; i++) {
const index = detailData.designDetail.clothes.findIndex(item => item.id === canvasList[i].id); const index = detailData.designDetail.clothes.findIndex(item => item.id === canvasList[i].id);
@@ -574,9 +576,9 @@ export default defineComponent({
img.src = detailData.selectDetail.path img.src = detailData.selectDetail.path
}) })
} }
const saveCanvasJSONToSession = ()=>{ const saveCanvasJSONToSession = async ()=>{
let canvasJSON = detailDom.canvasBox.getCanvasJSON() let canvasJSON = detailDom.canvasBox.getCanvasJSON()
const sessionCanvasList = sessionStorage.getItem('canvasList'); const sessionCanvasList = await KeyValueDB.get('canvasList');
const list = sessionCanvasList ? JSON.parse(sessionCanvasList) : [] const list = sessionCanvasList ? JSON.parse(sessionCanvasList) : []
let index = -1 let index = -1
list.forEach((item:any,i:number)=>{ list.forEach((item:any,i:number)=>{
@@ -589,7 +591,7 @@ export default defineComponent({
}else{ }else{
list[index].canvasJSON = canvasJSON list[index].canvasJSON = canvasJSON
} }
sessionStorage.setItem('canvasList', JSON.stringify(list)); await KeyValueDB.set('canvasList', JSON.stringify(list));
} }
const detailEdit = async (str:any)=>{ const detailEdit = async (str:any)=>{
if(str){ if(str){
@@ -727,12 +729,12 @@ export default defineComponent({
coverRevocation() coverRevocation()
detailDom.detailLeft.sketchSysToLibrary() detailDom.detailLeft.sketchSysToLibrary()
} }
const coverRevocation = ()=>{ const coverRevocation = async ()=>{
let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail)) 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}) 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)=>{ const setSloganData = (data:any)=>{
detailData.selectDetail.sketchString = data detailData.selectDetail.sketchString = data
@@ -742,9 +744,9 @@ export default defineComponent({
} }
onMounted(()=>{ onMounted(()=>{
}) })
onBeforeUnmount(()=>{ onBeforeUnmount(async ()=>{
sessionStorage.removeItem('oppositeRevocation') await KeyValueDB.remove('oppositeRevocation')
sessionStorage.removeItem('revocation') await KeyValueDB.remove('revocation')
store.commit('DesignDetail/clearDetailData') store.commit('DesignDetail/clearDetailData')
}) })

View File

@@ -18,7 +18,7 @@
:clothing-image-opts="{ :clothing-image-opts="{
imageMode:'contains', imageMode:'contains',
}" }"
:hideCanvas="hideCanvas && !isEditPattern" :hideCanvas="hideCanvas || !isEditPattern"
ref="editCanvas"> ref="editCanvas">
</editCanvas> </editCanvas>
<!-- <canvasContent ref="canvasContent"></canvasContent> --> <!-- <canvasContent ref="canvasContent"></canvasContent> -->
@@ -34,7 +34,7 @@
:clothing-image-opts="{ :clothing-image-opts="{
imageMode:'contains', imageMode:'contains',
}" }"
:hideCanvas="hideCanvas && !isEditPattern" :hideCanvas="hideCanvas || !isEditPattern"
ref="editCanvasBackFront"> ref="editCanvasBackFront">
</editCanvas> </editCanvas>
</div> </div>
@@ -135,38 +135,20 @@ export default defineComponent({
const editFront = (str:any)=>{//编辑前后片 const editFront = (str:any)=>{//编辑前后片
let canvasJSON = '' as 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.canvasLoad = false
detailData.currentView = str detailData.currentView = str
if(canvasJSON){ if(detailData.currentView === 'redGreenExample'){
// detailData.canvasLoad = true
nextTick(()=>{ nextTick(()=>{
if(detailData.currentView === 'redGreenExample'){ setCanvas(detailData.selectDetail.path).then(()=>{
detailDom.editCanvas.loadJSON(canvasJSON) // detailData.canvasLoad = true
}else{ })
detailDom.editCanvasBackFront.loadJSON(canvasJSON)
}
}) })
}else{ }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)=>{ const updateOtherLayers = (obj:any)=>{
@@ -389,9 +371,6 @@ export default defineComponent({
if(front?.oldMaskUrl)front.maskUrl = front.oldMaskUrl if(front?.oldMaskUrl)front.maskUrl = front.oldMaskUrl
if(back?.oldImageUrl)back.imageUrl = back.oldImageUrl if(back?.oldImageUrl)back.imageUrl = back.oldImageUrl
if(front?.oldMaskUrl)store.commit('DesignDetail/updataDetailItem',{maskUrl:front.maskUrl}) if(front?.oldMaskUrl)store.commit('DesignDetail/updataDetailItem',{maskUrl:front.maskUrl})
sessionStorage.removeItem('frontBackEdit');
sessionStorage.removeItem('sketchEdit');
detailData.canvasLoad = false detailData.canvasLoad = false
// privewDetail() // privewDetail()
}) })

View File

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

View File

@@ -36,6 +36,7 @@ import { Https } from "@/tool/https";
import { useStore } from "vuex"; import { useStore } from "vuex";
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { getMousePosition } from "@/tool/mdEvent"; import { getMousePosition } from "@/tool/mdEvent";
import { KeyValueDB } from "@/tool/indexedDB";
import Vue3Moveable from 'vue3-moveable'; import Vue3Moveable from 'vue3-moveable';
import Moveable from 'moveable'; import Moveable from 'moveable';
import { parse } from 'vue/compiler-sfc'; import { parse } from 'vue/compiler-sfc';
@@ -393,11 +394,11 @@ export default defineComponent({
initMoveableForSelected() initMoveableForSelected()
},{immediate: true,}) },{immediate: true,})
const setRevocation = ()=>{ const setRevocation = async ()=>{
let frontBack = JSON.parse(JSON.stringify(detailData.frontBack)) 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}) revocation.push({designData:null,position:frontBack})
sessionStorage.setItem('revocation', JSON.stringify(revocation)); KeyValueDB.set('revocation', JSON.stringify(revocation));
} }
const upDataDetail = async ()=>{ const upDataDetail = async ()=>{
//同步到selectDetail数据中 //同步到selectDetail数据中

71
src/tool/indexedDB.js Normal file
View File

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