fix

src/component/Canvas/CanvasEditor/index.vue

@@ -820,7 +820,7 @@ defineExpose({
           v-if="isShowLayerPanel && !enabledRedGreenMode"
         >
           <LayersPanel
-            v-if="canvasManagerLoaded"
+            v-if="canvasManagerLoaded && canvasManager?.canvas"
             :activeLayerId="activeLayerId"
             :activeElementId="activeElementId"
             :thumbnailManager="canvasManager.thumbnailManager"

src/component/home/chat/index.vue

@@ -168,7 +168,7 @@ export default defineComponent({
 						if(data.chatList[data.chatList.length - 1].content.message)data.chatList.push({content:{message:''},role:'system'})
 						if(eventData.tools_name == 'generate_color_code'){
 							data.chatList[data.chatList.length-1].content.color = JSON.parse(JSON.parse(event.data).content).receiveCollectionElementList
-							getData = 'colorboard'
+							getData = 'colorBoard'
 						}else{
 							data.chatList[data.chatList.length-1].content.img = JSON.parse(JSON.parse(event.data).content).receiveCollectionElementList
 							getData = nameData[eventData.tools_name]

src/component/home/index.vue

@@ -314,13 +314,13 @@ export default defineComponent({
 		const historyChooseData = (dataValue:any)=>{
 			let collectionData = {
 				disposeMoodboard: dataValue.moodBoard?.moodTemplateId?[{
-					id:dataValue.moodBoard.moodTemplateId,
+					id:dataValue.moodBoard?.moodTemplateId,
-					imgUrl:dataValue.moodBoard.moodTemplateUrl,
+					imgUrl:dataValue.moodBoard?.moodTemplateUrl,
 					resData:{
-						name:dataValue.moodBoard.moodTemplateName,
+						name:dataValue.moodBoard?.moodTemplateName,
 					}
 				}]:[],
-				moodboardPosition:dataValue.moodBoard?.moodboardPosition?JSON.parse(dataValue.moodBoard.moodboardPosition):{},
+				moodboardPosition:dataValue.moodBoard?.moodboardPosition?JSON.parse(dataValue.moodBoard?.moodboardPosition):{},
 				moodboardFiles: dealViewChooseData(
 					dataValue.moodBoard?.moodBoards,"Moodboard"
 				),
@@ -352,8 +352,8 @@ export default defineComponent({
 				}
 			); 
 			}
-			if(dataValue.design.userLikeDetails)store.commit("setLikeDesignCollectionList",dataValue.design.userLikeDetails);
+			if(dataValue.design?.userLikeDetails)store.commit("setLikeDesignCollectionList",dataValue.design?.userLikeDetails);
-			store.commit("setUserGroupId", dataValue.design.userGroupId);
+			store.commit("setUserGroupId", dataValue.design?.userGroupId);
 			if(dataValue.toProduct){
 				let value = {
 					list: dataValue.toProduct,
@@ -390,7 +390,6 @@ export default defineComponent({
 				};
 				store.commit('setPatternMaking3D',patternMaking3DData)
 			}
-			
 		}
 		//统一处理选择组的渲染数据
 		const dealViewChooseData = (dataValue: any,str:string)=> {

src/component/home/tools/deReconstruction/canvas/argument.vue

@@ -1,191 +0,0 @@
-<template>
-   <div class="canvasArgument">
-		<div class="label_item">
-			<div >{{ $t('exportModel.Layer') }}:</div>
-			<i class="icon iconfont icon-shangyiceng" @click="canvasGeneral.setLayerIndex('Front')"></i>
-			<i class="icon iconfont icon-shangyiceng2" @click="canvasGeneral.setLayerIndex('Forward')"></i>
-			<i class="icon iconfont icon-xiayiceng" @click="canvasGeneral.setLayerIndex('Backwards')"></i>
-			<i class="icon iconfont icon-shangyiceng1" @click="canvasGeneral.setLayerIndex('Back')"></i>
-		</div>
-		<div class="label_item" v-show="
-			canvasGeneral.operation != 'movePosition' && 
-			canvasGeneral.operation != 'move' && 
-			canvasGeneral.brushwork.value != 'RibbonBrush' && 
-			canvasGeneral.brushwork.value != 'LongfurBrush'&& 
-			canvasGeneral.operation != 'zoomIn'  &&
-			canvasGeneral.operation != 'zoomOut' && 
-			canvasGeneral.operation != 'dashedPencil' && 
-			canvasGeneral.operation != 'dashed'">
-			<div >{{ $t('exportModel.Size') }}:</div>
-			<input @change="canvasGeneral.setFontFamily" type="range" @input="canvasGeneral.setPencilWidth" min="3" max="50" v-model="canvasGeneral.brushwork.width[canvasGeneral.operation]">
-		</div>
-		<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
-			<div >{{ $t('exportModel.Brushwork') }}:</div>
-			<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
-				style="width: 12rem "
-				@change="canvasGeneral.brushworkChange"
-				>
-				<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
-					<img style="width: 100%;" :src="item.url" alt="">
-				</a-select-option>
-			</a-select>
-		</div>
-		<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
-			<div >{{ $t('exportModel.Texture') }}:</div>
-			<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
-				style="width: 12rem "
-				@change="canvasGeneral.textureValueChange"
-				>
-				<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
-					<img :src="item.url" alt="">
-				</a-select-option>
-			</a-select>
-		</div>
-		<div class="label_item" v-show="
-			canvasGeneral.operation != 'pencil' && 
-			canvasGeneral.operation != 'eraser'&&
-			canvasGeneral.operation != 'movePosition' && 
-			canvasGeneral.operation != 'move'&&
-			canvasGeneral.operation != 'text'&&
-			canvasGeneral.operation != 'texture'&&
-			canvasGeneral.operation != ''&& 
-			canvasGeneral.operation != 'zoomIn'  && 
-			canvasGeneral.operation != 'zoomOut' && 
-			canvasGeneral.operation != 'dashedPencil' && 
-			canvasGeneral.operation != 'dashed'">
-			<div >{{ $t('exportModel.FillBack') }}:</div>
-			<div class="leftAlign">
-				<i class="icon iconfont icon-tuceng1" @click="canvasGeneral.setOperationMode('fill')" :class="{active:canvasGeneral.operationMode == 'fill'}"></i>
-				<i class="icon iconfont icon-tuceng" @click="canvasGeneral.setOperationMode('border')" :class="{active:canvasGeneral.operationMode == 'border'}"></i>
-			</div>
-		</div>
-		<!-- <div class="label_item" v-show="canvasGeneral.operation == 'movePosition'">
-			<div >{{ $t('exportModel.Layer') }}:</div>
-			<div class="leftAlign">
-				<i class="icon iconfont icon-shangyiceng" @click="canvasGeneral.setLayerIndex('Front')"></i>
-				<i class="icon iconfont icon-shangyiceng2" @click="canvasGeneral.setLayerIndex('Forward')"></i>
-				<i class="icon iconfont icon-xiayiceng" @click="canvasGeneral.setLayerIndex('Backwards')"></i>
-				<i class="icon iconfont icon-shangyiceng1" @click="canvasGeneral.setLayerIndex('Back')"></i>
-			</div>
-		</div> -->
-		<div class="label_item" v-show="(canvasGeneral.operation == '' || canvasGeneral.operation == 'text' || canvasGeneral.createPatterning.textDataShow) && canvasGeneral.operation != 'movePosition' && canvasGeneral.operation != 'move'">
-			<div>Font Family</div>
-			<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.fontFamily"
-				style="flex: 1;width: 15rem;"
-				@change="canvasGeneral.setFontFamily"
-				:style="{'font-family':canvasGeneral.fontFamily}"
-				>
-				<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
-					{{item.name}}
-				</a-select-option>
-			</a-select>
-		</div>
-		<div class="label_item" style="margin-left: auto;">
-			<span style="margin-right: 2rem;">Show Models</span>
-			<a-switch v-model:checked="isShowBg" @change="showBg" />
-		</div>
-		
-	</div>
-</template>
-
-<script lang="ts">
-	import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
-	export default defineComponent({
-		components:{},
-		setup(){
-		    let testModal = ref(true)
-			let canvasGeneral:any = inject('canvasObj')
-			const data = reactive({
-				colorHistoryList:[],
-				operation:'',
-				isShowBg:true,
-			})
-			const setOperation = (str:any)=>{
-				data.operation = str
-			}
-			const setOper = ()=>{
-				setOperation('')
-			}
-			document.addEventListener('click',setOper)
-			const closeModal = ()=>{
-				document.removeEventListener('click',setOper)
-			}
-			const showBg = ()=>{
-				canvasGeneral.showBg(data.isShowBg)
-			}
-			return {
-				canvasGeneral,
-				...toRefs(data),
-				testModal,
-				setOperation,
-				closeModal,
-				showBg,
-			}
-		}
-	});
-</script>
-
-<style lang='less' scoped>
-.canvasArgument{
-	display: flex;
-	flex-wrap: wrap;
-	height: 100%;
-	.label_item{
-		margin-right: 2rem;
-		position: relative;
-		display: flex;
-		align-items: center;
-		.leftAlign{
-			display: flex;
-		}
-		.labelHover_show{
-			position: absolute;
-			width: 100%;
-			height: 10rem;
-			top: 100%;
-			z-index: 2;
-			display: block;
-			border-radius: 4px;
-			border: 1px solid;
-			padding: .5rem 1rem;
-			background: #fff;
-			div{
-				width: 2rem;
-				height: 2rem;
-				margin-right: .5rem;
-				margin-bottom: .5rem;
-				display: inline-block;
-				cursor: pointer;
-			}
-		}
-		input{
-			height: 100%;
-			width: 12rem;
-		}
-		&.wH input{
-			width: 5rem;
-		}
-		.title{
-			margin-right: 1rem;
-		}
-		.icon-xiala{
-			cursor: pointer;
-			transform: rotate(0deg);
-			height: 4rem;
-			width: 4rem;
-			transition: all .3s;
-			line-height: 4rem;
-			text-align: center;
-			&.active{
-				transform: rotate(180deg);
-			}
-		}
-	}
-	.label_item:hover{
-		// .labelHover_show{
-		// 	display: flex;
-		// }
-	}
-}
-
-</style>

src/component/home/tools/deReconstruction/canvas/canvasContent.vue

@@ -1,122 +0,0 @@
-<template>
-	<div class="canvasContent_box">
-		<div class="canvasContent" ref="canvasScaleDom">
-			<div class="generalCanvas_center canvas" ref="canvasDom">
-				<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-	import { defineComponent,computed,reactive,nextTick,toRefs,inject,createVNode, onMounted, watch} from 'vue'
-	import { Modal,message } from 'ant-design-vue';
-	import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-	import { useI18n } from 'vue-i18n'
-	import { useStore } from "vuex";
-	export default defineComponent({
-		component:{},
-		setup(props,{emit}){
-			const store = useStore();
-			let {t} = useI18n()
-			let canvasType = inject('canvasType')
-			let canvasGeneral:any = inject('canvasObj')
-			const data:any = reactive({
-				canvasDom:null,
-				isShowMark:false,
-				pencilbtnStyle:{},
-				isCanva:false,
-				selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
-			})
-			const dataDom = reactive({
-				canvasScaleDom:null as any,
-			})
-			watch(()=>data.selectObject.model.id,(newVal:any)=>{
-				if(newVal){
-					canvasGeneral.upDataRectBGImg(data.selectObject.model.url)
-				}
-			})
-			const createCanvas = ()=>{
-				if(data.isCanva)return
-				nextTick(async ()=>{
-					let width = dataDom.canvasScaleDom.offsetWidth
-					let canvasSize = {width,height:width}
-					data.isCanva = true
-					let img = data.selectObject.model.url
-					await canvasGeneral.canvasInit(data.canvasDom,canvasSize,img,'',{noErasable:true})
-					let oldCanvas = store.state.HomeStoreModule.canvasData.deReconstruction
-					if(oldCanvas)canvasGeneral.setLoadFromJSON(oldCanvas, () => {});
-					// if(oldCanvas)canvasGeneral.canvas.loadFromJSON(oldCanvas, () => {});
-				})
-			}
-			const openMode = (data:any)=>{
-				let {yes,no} = data
-				console.log(yes,no);
-				Modal.confirm({
-						title: '是否栅格化',
-						icon: createVNode(ExclamationCircleOutlined),
-						okText: 'Yes',
-						cancelText: 'No',
-						mask:false,
-						centered:true,
-						onOk() {
-							yes()
-						},
-						onCancel(){
-							no()
-						}
-					});
-				yes()
-			}
-			const openSetData = ()=>{
-				createCanvas()
-			}
-			onMounted(()=>{
-			})
-			return {
-				canvasGeneral,
-				...toRefs(data),
-				...toRefs(dataDom),
-				openSetData,
-			}
-		}
-	});
-</script>
-
-<style lang='less' scoped>
-.canvasContent_box{
-	height: 100%;
-	width: 100%;
-	// padding: 2rem;
-	background: #e6e6e6;
-	.canvasContent{
-		height: 100%;
-		width: 100%;
-		position: relative;
-	}
-}
-
-.generalCanvas_center{
-	width: 100%;
-	height: 100%;
-	position: relative;
-	overflow: hidden;
-	&.canvas{
-	}
-	.editFrontBack_pencilbtn{
-		position: absolute;
-		z-index: 1;
-		border-radius: 50%;
-		border: 1px solid #000;
-		pointer-events: none;
-		transform: translate(-50%,-50%);
-	}
-	:deep(.canvas-container){
-		left: 50%;
-		top: 50%;
-		transform: translate(-50%,-50%);
-		// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
-	}
-}
-
-</style>

src/component/home/tools/deReconstruction/canvas/detail.vue

@@ -1,305 +0,0 @@
-<template>
-   <div class="detail" ref="detailDom"
-   @mousemove="mousemove($event)"
-	@touchmove="touchmove($event)"
-   >
-		<div class="layer">
-			<div class="layer-item button" @click="canvasGeneral.createLayer">
-				新建图层
-			</div>
-			<div class="layer-item-box-scroll">
-				<div class="layer-item-box" :style="{'height':layerList.length * 6 + 'rem'}">
-					<div class="layer-item" 
-						v-for="item,index in layerList" 
-						:key="item" 
-						:style="item?.style"
-						@click="canvasGeneral.selectLayer(item.id)"
-						@mousedown="mousedown($event,item,index)"
-						@touchstart="touchstart($event,item,index)"
-						
-						@contextmenu="openMenu($event,item,index)"
-
-						:class="{'active':item.id == canvasGeneral.layer.selectLayer.id}">
-						<!-- <div @click.stop="canvasGeneral.layerShowHide(item.id,item)">{{ item.isShow }}</div> -->
-						<i class="fi" :class="[(item.isShow)?'fi-rr-eye':'fi-rr-eye-crossed']" @click.stop="canvasGeneral.layerShowHide(item.id,item)"></i>
-						<img :src="item.img" alt="">
-						<div>
-							{{ item.name }}
-						</div>
-						<div @click.stop="canvasGeneral.layerDelete(index,item.id)" :class="{noDelete:canvasGeneral.layer.list.length == 1}">删除</div>
-					</div>
-				</div>
-			</div>
-			
-		</div>
-		<div class="layer-menu" :style="styleMenu">
-			<div class="layer-menu-item" @click="canvasGeneral.copyLayer(itemMenu.id)">复制</div>
-			<div class="layer-menu-item" @click="canvasGeneral.layerDelete(itemMenu.index,itemMenu.id)">删除</div>
-			<div class="layer-menu-item" v-if="itemMenu.groupType == 'Object'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Grid')">设置栅格化</div>
-			<div class="layer-menu-item" v-if="itemMenu.groupType == 'Grid'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Object')">取消栅格化</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-	import { defineComponent,ref,reactive,nextTick,toRefs,inject,watch,computed} from 'vue'
-	import { getMousePosition } from "@/tool/mdEvent";
-
-	export default defineComponent({
-		component:{},
-		setup(){
-			let canvasGeneral:any = inject('canvasObj')
-			const data = reactive({
-				detailDom:null as any,
-				layerList:computed(()=>canvasGeneral.layer.list) as any,
-				styleMenu:{
-					left:0+'px',
-					top:0+'px',
-					display:'none',
-				},
-				itemMenu:{} as any,
-			})
-			watch(()=>canvasGeneral.layer.list.length, (newValue, oldValue) => {
-				let sortedArr = data.layerList.map((item:any) => ({ ...item })).sort((a:any, b:any) => b.index - a.index)
-				sortedArr.forEach((item:any,index:any)=>{
-					item.index = sortedArr.length - index
-				})
-				data.layerList.forEach((item:any) => {
-					//图层高度50px 下边距10px
-					sortedArr.forEach((sortedArrItem:any)=>{
-						if(item.id == sortedArrItem.id){
-							item.index = sortedArrItem.index
-						}
-						let style = {
-							top:(data.layerList.length - item.index) * 60 + 'px',
-							transition:'all .3s',
-						}
-						item.style = style
-					})
-					
-				});
-			},{immediate:true});
-			const incident:any = reactive({
-				isDown:false,
-				selectStyleTop:null,
-				selectStyle:null,
-				downPoint:null,
-				select:null,
-				radius:25,
-			})
-			const openMenu = (event:any,item:any,index:number)=>{
-				if(event.preventDefault)event.preventDefault();
-				data.itemMenu = item;
-				data.itemMenu.index = index
-				let position = data.detailDom.getBoundingClientRect();
-				data.styleMenu = {
-					left:event.clientX - position.left+'px',
-					top:event.clientY - position.top+'px',
-					display:'block',
-				}
-			}
-			document.onclick = ()=>{
-				data.styleMenu.display = 'none'
-				data.itemMenu = {};
-			}
-			let mousedown = (event:any,item:any,index:number)=>{
-				if(event.button != 0)return
-				let e:any = getMousePosition(event,false)
-				mouseDownOperation(e,item,index)
-			}
-			let ipadDownTime:any = null
-			let touchstart = (event:any,item:any,index:number)=>{
-				let e:any = getMousePosition(event,true)
-				mouseDownOperation(e,item,index)
-				clearTimeout(ipadDownTime)
-				ipadDownTime = setTimeout(()=>{
-					openMenu(e,item,index)
-				},1000)
-
-			}
-			let mouseDownOperation = (e:any,item:any,index:number)=>{
-			    incident.isDown = true
-				incident.selectStyleTop = item.style.top
-				incident.selectStyle = item.style
-				incident.selectStyle.transition = 'none'
-				incident.select = item
-				incident.downPoint = e.clientY
-			}
-
-			let mousemove = (event:any)=>{
-				let e:any = getMousePosition(event,false)
-				mouseMoveOperation(e)
-			}
-			let touchmove = (event:any)=>{
-				let e:any = getMousePosition(event,true)
-				clearTimeout(ipadDownTime)
-				if(data.styleMenu.display != 'none')data.styleMenu.display = 'none'
-				mouseMoveOperation(e)
-			}
-			let mouseMoveOperation = (e:any)=>{
-			    if(incident.isDown){
-					let domTop = Number(incident.selectStyleTop.split('px')[0])
-					
-					let gTop = domTop + (e.clientY - incident.downPoint)
-					if(gTop < 0){
-						gTop = 0
-					}
-					incident.select.style.top = gTop + 'px'
-					data.layerList.forEach((item:any,index:number) => {
-						let itemTop = Number(item.style.top.split('px')[0])
-						if(Math.abs(gTop - itemTop) < 30 && item.id != incident.select.id){
-							let itemIndex = item.index
-							// if(gTop - itemTop > 0){
-							// 	console.log('从下往上');
-							// }
-							// if(gTop - itemTop < 0){
-							// 	console.log('从上往下');
-							// }
-							item.index = incident.select.index	
-							incident.select.index = itemIndex
-							
-						}
-					})
-					sort(data.layerList,'move')
-				}
-			}
-			const mouseUp = ()=>{
-				if(data.styleMenu.display == 'none')clearTimeout(ipadDownTime)
-				if(incident.isDown){
-					if(incident.selectStyle)incident.selectStyle.transition = 'all .3s'
-					incident.selectStyleTop = null
-					incident.isDown = false
-					incident.selectStyle = null
-					incident.select = null
-					sort(data.layerList,'up')
-				}
-			}
-			document.onmouseup = mouseUp
-			document.ontouchend = mouseUp
-			//排序
-			let time:any = null
-			let sort = (list:any,str:string)=>{
-				clearTimeout(time)
-				// list = list.sort((a:any, b:any) =>{
-				// 	return b.index - a.index; 
-				// });
-				list.forEach((item:any) => {
-					if(str == 'move'){
-						if(item.id != incident.select.id)item.style.top = (list.length - item.index) * 60 + 'px'
-					}else{
-						item.style.top = (list.length - item.index) * 60 + 'px'
-					}
-				});
-				if(str == 'up')time = setTimeout(()=>canvasGeneral.upLayerIndex(list),500)
-				
-			}
-			return {
-				canvasGeneral,
-				...toRefs(data),
-				openMenu,
-				mousedown,
-				touchstart,
-				mousemove,
-				touchmove,
-			}
-		}
-	});
-</script>
-
-<style lang='less' scoped>
-.detail{
-	width: 100%;
-	height: 100%;
-	padding: 1rem;
-	border: 1px solid #dcdfe6;
-	position: relative;
-	* {
-		-webkit-user-drag: none;
-		-moz-user-drag: none;
-		-ms-user-drag: none;
-		user-drag: none;
-		-moz-user-select: none;
-		-webkit-user-select: none;
-		-ms-user-select: none;
-		-khtml-user-select: none;
-		user-select: none;
-	}
-	.layer{
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		.layer-button{
-
-		}
-		.layer-item{
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			padding: .5rem 2rem;
-			border: 1px solid #e6e6e6;
-			margin-bottom: 10px;
-			height: 50px;
-			border-radius: 4px;
-			i{
-				font-size: 18px;
-			}
-			&.active{
-				background: #e6e6e6;
-			}
-			.noDelete{
-				background: #e6e6e6;
-				opacity: .4;
-				pointer-events: none;
-			}
-			&.button{
-				justify-content: center;
-				cursor: pointer;
-			}
-			img{
-				height: 100%;
-				width: 35px;
-				object-fit: contain;
-			}
-			div{
-				cursor: pointer;
-			}
-			&:last-child{
-				margin-bottom: 0;
-			}
-		}
-		.layer-item-box-scroll{
-			flex: 1;
-			overflow-y: auto;
-			.layer-item-box{
-				position: relative;
-				.layer-item{
-					position: absolute;
-					width: 100%;
-				}
-			}
-		}
-		
-	}
-	.layer-menu{
-	    position: absolute;
-		width: 60%;
-		line-height: 4rem;
-		background: #fff;
-		border-radius: 4px;
-		border: 1px solid;
-		overflow: hidden;
-		>div{
-			border-bottom: 1px solid;
-			padding: 0 2rem;
-			cursor: pointer;
-		}
-		>div:hover{
-			background: #e6e6e6;
-		}
-		>div:last-child{
-			border-bottom: none;
-		}
-	}
-}
-
-</style>

src/component/home/tools/deReconstruction/canvas/index.vue

@@ -1,22 +1,12 @@
 <template>
 	<div class="generalCanvas">
-		<div class="argument-box">
-			<argument ref="argument" v-if="canvasObj.canvas"></argument>
-		</div>
 		<div class="canvasBox">
-			<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
+			<editCanvas v-if="canvasLoad" ref="editCanvas"></editCanvas>
-			<div class="canvas">
-				<canvasContent ref="canvasContent"></canvasContent>
-			</div>
-			<!-- <div class="detail-box">
-				<detail ref="detail" v-if="canvasObj.canvas"></detail>
-			</div> -->
 		</div>
 		<div class="mark_loading" v-show="isShowMark">
 			<a-spin size="large" />
 		</div>
 	</div>
-	<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
 </template>
 <script>
 import {defineComponent, toRefs, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
@@ -26,20 +16,12 @@ import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import canvasGeneral from "@/tool/canvasGeneralCopy";
-import tool from "./tool.vue"
+import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
-import argument from "./argument.vue"
-import detail from "./detail.vue"
-import canvasContent from "./canvasContent.vue"
-import liquefaction from "@/component/modules/liquefaction.vue";
 
 
 export default defineComponent({
     components: {
-		tool,
+		editCanvas,
-		argument,
-		detail,
-		canvasContent,
-		liquefaction,
     },
 	emits:['setGenerateImg'],
     setup(props,{emit}) {
@@ -47,102 +29,41 @@ export default defineComponent({
 		const store = useStore();
 		const isShowMark = ref(false)
 		const component = reactive({
-			argument:ref(null),tool:ref(null),detail:ref(null),canvasContent:ref(null)
+		})
+		const data = reactive({
+			canvasLoad:false,
 		})
 		const dataDom = reactive({
-			canvasContent:null,
+			editCanvas:null,
 		})
-		let liquefaction = ref(null)
-		let liquefactionData = ref()
-		let groupDashed = ref(null)//用来判断是否需要对group添加img
-		let canvasType = 'export'
-		let canvasObj = reactive(new canvasGeneral('zz'))
-		provide('canvasType',canvasType)
-		provide('canvasObj',canvasObj)
-		provide('isShowMark',isShowMark)
-		const close = ()=>{
-			component.forEach((item)=>{
-				if(item.value.closeModal)item.value.closeModal()
-			})
-		}
-		
-		let expoet = ()=>{
-			console.log( canvasObj.selectExport());
-			console.log( canvasObj.allExport());
-
-		}
-		const setLiquefaction = async ()=>{//进入液化页面
-			canvasObj.getLiquefactionImgObj().then((data)=>{
-				if(data?.img){
-					liquefactionData.value = data
-					liquefaction.value.init(data.img)
-				}else {
-					message.info(t('exportModel.jsContent6'))
-					return null;
-				}
-			})
-			
-		}
-		const toolLiquefaction = ()=>{//工具点击按钮
-			setLiquefaction()
-		}
-		const submitLiquefaction = (rv)=>{//液化回参
-			canvasObj.setLiquefactionImgObj(liquefactionData.value,rv)
-			// liquefactionData.value.setSrc(rv, (value)=>{
-			// 	// liquefactionData.value.scaleToWidth(originalWidth);
-			// 	// liquefactionData.value.scaleToHeight(originalHeight);
-			// 	delete liquefactionData.value.minioUrl
-			// 	if(groupDashed.value && groupDashed.value._objects.length == 1){
-			// 		value.set({
-			// 			left:-groupDashed.value.width/2,	
-			// 			top:-groupDashed.value.height/2,
-			// 		})
-			// 		groupDashed.value.insertAt(value)
-			// 		// canvasObj.addDashedImg(value)
-			// 	}
-			// 	canvasObj.canvas.renderAll();
-			// 	canvasObj.updateCanvasState()
-			// });
-		}
 		const openSetData = ()=>{
-			dataDom.canvasContent.openSetData()
+			data.canvasLoad = true
+			// dataDom.canvasContent.openSetData()
 		}
-		const addImage = (data)=>{
+		const addImage = (value)=>{
-			canvasObj.addImage(data)
+			console.log(value)
+			dataDom.editCanvas.addImageToLayer(value.imgUrl)
+		}
+		const addBottomImage = (value)=>{
+			dataDom.editCanvas.changeFixedImage(value)
 		}
 		const getData = async ()=>{
-			await canvasObj.detailSubmit().then((img)=>{
+		
-				emit('setGenerateImg',img)
-			})
 		}
 		const getCanvasData = ()=>{
-			var json = canvasObj.canvas.toJSON(['src','minioUrl','custom','perPixelTargetFind','hasBorders','selectable','hasControls','erasable']);
+			
-			// console.log(JSON.stringify(json));
-			json.objects.forEach(item=>{
-				if(item.type == 'image'){
-					delete item.src
-				}
-			})
-			let canvasExport = {
-				canvas:json,
-				groupList: canvasObj.layer.list
-			}
 			return canvasExport
 		}
         onMounted(() => {
 		});
 		onBeforeUnmount(()=>{
+			data.canvasLoad = false
 			// canvasGeneral.canvasClear()
 		})
         return {
+			...toRefs(data),
 			...toRefs(dataDom),
 			isShowMark,
-			liquefaction,
-			canvasObj,
-			close,
-			expoet,
-			toolLiquefaction,
-			submitLiquefaction,
 			openSetData,
 			addImage,
 			getData,
@@ -173,49 +94,9 @@ export default defineComponent({
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
-	.argument-box,
+	> .canvasBox{
-	.canvasBox,
+		width: 100%;
-	.detail-box{
+		height: 100%;
-		:deep(i){
-			font-size: 2.5rem;
-			cursor: pointer;
-			width: 3rem;
-			height: 3rem;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			flex-shrink: 0;
-			transition: all .3s;
-			margin-bottom: .5rem;
-			&.active{
-				border: 1px solid;
-				border-radius: .4rem;
-			}
-			&.icon-xiala{
-				transform: rotate(-90deg);
-			}
-			&.icon-xialaActive{
-				transform: rotate(90deg);
-			}
-		}
-	}
-	.argument-box{
-		margin-left: 4rem;
-		height: 4rem;
-		margin-bottom: 1rem;
-	}
-	.canvasBox{
-		flex: 1;
-		overflow: hidden;
-		display: flex;
-		.canvas{
-			flex: 1;
-			overflow: hidden;
-		}
-	}
-	.detail-box{
-		width: 20%;
-		margin-left: 1rem;
 	}
 }
 </style>

src/component/home/tools/deReconstruction/canvas/tool.vue

@@ -1,167 +0,0 @@
-<template>
-   <div class="canvasTool">
-		<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
-		<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
-		<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasGeneral.operation == 'pencil'}"></i>
-		<i class="fi fi-rr-hand-paper" @click="setOperation('move')" :class="{active:canvasGeneral.operation == 'move'}"></i>
-		<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasGeneral.operation == 'movePosition'}"></i>
-		<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasGeneral.operation == 'eraser'}"></i>
-		<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''"  @click.stop="setCloseNav('tool')"></i> -->
-		<i class="fi fi-rr-square-dashed" @click="setOperation('dashed')" :class="{active:canvasGeneral.operation == 'dashed'}"></i>
-		<i class="fi fi-rr-scalpel-path" @click="setOperation('dashedPencil')" :class="{active:canvasGeneral.operation == 'dashedPencil'}"></i>
-		<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasGeneral.operation == 'zoomIn'}"></i>
-		<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasGeneral.operation == 'zoomOut'}"></i>
-		<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
-		<div class="label_item uploadImage">
-			<i class="icon fi fi-br-upload" ></i>
-			<input type="file" @change="uploadImage">
-		</div>
-		<i class="icon iconfont" @click="setOperation('text')" :class="{active:canvasGeneral.operation == 'text'}">T</i>
-		<i class="icon iconfont icon-xiala" :class="{'icon-xialaActive':isMove}" @click.stop="openMore"></i>
-		<div class="btnModal" v-show="isMove" :style="moveStyle">
-			<!-- <i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:canvasGeneral.operation == 'fold'}"></i> -->
-			<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:canvasGeneral.operation == 'rect'}"></i>
-			<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:canvasGeneral.operation == 'line'}"></i> -->
-			<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:canvasGeneral.operation == 'circle'}"></i> -->
-			<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:canvasGeneral.operation == 'triangle'}"></i>
-			<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:canvasGeneral.operation == 'ellipse'}"></i>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
-import {base64ToFile} from '@/tool/util'
-import { Https } from "@/tool/https";
-	export default defineComponent({
-		component:{},
-		emits:['toolLiquefaction'],
-		setup(props,{emit}){
-			let canvasGeneral:any = inject('canvasObj')
-			let isShowMark:any = inject('isShowMark')
-			const data:any = reactive({
-				isMove:false,
-				moveStyle:{},
-			})
-			const uploadImage = (event:any)=>{
-				isShowMark.value = true
-				const file = event.target.files[0];
-				let input = event.target
-				setOperation('movePosition')
-				if (file) {
-					const reader = new FileReader();
-					reader.onload = (e:any) => {
-						let file = base64ToFile(e.target.result,'upload')
-						let formData = new FormData();
-						formData.append("file", file);
-						let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
-						Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
-							rv.imgUrl = rv.minioUrl
-							isShowMark.value = false
-							canvasGeneral.addImage(rv)
-						})
-						input.value = ''
-					};
-					reader.readAsDataURL(file);
-				}
-			}
-			const historyState = (str:any)=>{
-				canvasGeneral.historyState(str)
-			}
-			const setOperation = (str:any)=>{
-				canvasGeneral.setOperation(str)
-			}
-			const openMore = (e:any)=>{
-				data.isMove=!data.isMove
-				if(data.isMove){
-					let domPoint = e.target.getBoundingClientRect()
-					let domParentPoint = e.target.parentElement.getBoundingClientRect()
-					const left = domPoint.left - domParentPoint.left;
-					const top = domPoint.top - domParentPoint.top;
-
-					data.moveStyle.top = top + 'px'
-					data.moveStyle.left = left + domPoint.width + 2 + 'px'
-				}
-			}
-			const setMore = ()=>{
-				data.isMove = false
-			}
-			let setLiquefaction = ()=>{
-				emit('toolLiquefaction')
-			}
-			document.addEventListener('click',setMore)
-			const closeModal = ()=>{
-				document.removeEventListener('click',setMore)
-			}
-			return {
-				canvasGeneral,
-				...toRefs(data),
-				uploadImage,
-				historyState,
-				setOperation,
-				openMore,
-				closeModal,
-				setLiquefaction,
-			}
-		}
-	});
-</script>
-
-<style lang='less' scoped>
-.canvasTool::-webkit-scrollbar{
-	display: none;
-}
-.canvasTool{
-	display: flex;
-	flex-direction: column;
-	position: relative;
-	align-items: center;
-	&.leftAlign{
-		justify-content: flex-start;
-	}
-	&.leftAlign{
-		justify-content: flex-start;
-	}
-	
-	.uploadImage{
-		width: 3rem;
-		height: 3rem;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		cursor: pointer;
-		i{
-			zoom:.8;
-		}
-		input{
-			height: 0;
-			width: 0;
-			border: none;
-		}
-	}
-	.uploadImage{
-		position: relative;
-		input{
-			position: absolute;
-			width: 100%;
-			height: 100%;
-			left: 0;
-			top: 0;
-			opacity: 0;
-			z-index: 2;
-			cursor: pointer;
-		}
-	}
-	.btnModal{
-		position: absolute;
-		z-index: 2;
-		background: #fff;
-		top: 0;
-		border: 1px solid;
-		display: flex;
-		padding: .5rem 1rem;
-		border-radius: 4px;
-	}
-}
-
-</style>

src/component/home/tools/deReconstruction/index.vue

@@ -22,13 +22,13 @@
 			<selectList @selectImgItem="selectImgItem" :segmentationType="segmentationType" :isSegmentation="true" upLoadHttpsUrl="/api/element/imageSegmentation" level1Type="Sketchboard" :randomId="false" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
 		</div>
 		<div class="canvas itemBox">
-			<!-- <canvasBox @setGenerateImg="setGenerateImg" ref="canvasBox"></canvasBox> -->
+			<canvasBox @setGenerateImg="setGenerateImg" ref="canvasBox"></canvasBox>
-			<canvasUpload :config="ceditorConfig" clothingImageUrl="https://www.minio-api.aida.com.hk/aida-sys-image/models/female/2e4815b9-1191-419d-94ed-5771239ca4a5.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20250608%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250608T161025Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=a4374c0954d11c2490ef3b86a1924cf6d423ed8ac56023b3c3ccabcdf0672620"></canvasUpload>
+			<!-- <canvasUpload :config="ceditorConfig" clothingImageUrl="https://www.minio-api.aida.com.hk/aida-sys-image/models/female/2e4815b9-1191-419d-94ed-5771239ca4a5.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20250608%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20250608T161025Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=a4374c0954d11c2490ef3b86a1924cf6d423ed8ac56023b3c3ccabcdf0672620"></canvasUpload> -->
 		</div>
 		<div class="finished itemBox">
 			<div class="btnTop">
 				<div class="gallery_btn" @click="getCanvasImg">Generate line</div>
-				<div v-show="!generateImg?.[0]?.isLike" class="icon iconfont icon-jushoucang icon_like" @click="generateLike('like')"></div>
+				<div v-show="!generateImg?.[0]?.isLike && generateImg" class="icon iconfont icon-jushoucang icon_like" @click="generateLike('like')"></div>
 				<div v-show="generateImg?.[0]?.isLike" class="icon iconfont icon-jushoucanggift" @click="generateLike('noLike')"></div>
 			</div>
 			<div class="content">
@@ -231,7 +231,8 @@ export default defineComponent({
 				position: relative;
 			}
 			&.finished{
-				width: 58rem;
+				width: 45rem;
+				// width: 58rem;
 				display: flex;
 				flex-direction: column;
 				> .btnTop{

src/store/uploadFile/uploadFile.ts

@@ -288,6 +288,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
 					state.allBoardData[key] = data[key]	
 				}
 			}
+			console.log(JSON.parse(JSON.stringify(state.allBoardData)))
 			if(Object.keys(data).length === 0){
 				state.chooseIsDesign.value = true
 			}

src/tool/https.js

@@ -36,7 +36,7 @@ axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;   //配置接口地址
 const CancelToken = axios.CancelToken;
 const source = CancelToken.source();
 // console.log(process.env.VUE_APP_BASE_URL);
-const filterHttpsUrl = ['/api/portfolio/page','/api/portfolio/detail','/api/account/preLogin','/api/account/schoolLogin','/api/account/enterpriseLogin']
+const filterHttpsUrl = ['/api/portfolio/page','/api/portfolio/detail','/api/account/preLogin','/api/account/schoolLogin','/api/account/enterpriseLogin','/api/account/login']
 //POST传参序列化(添加请求拦截器)
 axios.interceptors.request.use((config) => {
     //在发送请求之前做某件事

src/views/HomeMain.vue

@@ -225,7 +225,7 @@
 					You can use these features only after becoming a regular user~
 				</div>
 				<div class="router" v-else-if="!getLangIsShowMark">
-					<home ref="home" @setNewProject="()=>leftShow=!leftShow" @setTask="setTask"></home>
+					<home ref="home" @setNewProject="()=>leftShow=true" @setTask="setTask"></home>
 				</div>
 			</div>
 		</div>

src/views/HomeView/library.vue

@@ -774,7 +774,7 @@ export default defineComponent({
                 level1Type:selectCode.value,
                 level2Type:design,
                 page:1,
-				ageGroup:pageData.ageGroup,
+				ageGroup:selectCode.value == 'Sketchboard'?pageData.ageGroup:'',
 				modelSex:sex.value?sex.value:'',
                 pictureName:searchPictureName.value,
                 size:pageSize.value,