添加画布颜色历史

src/assets/iconfont2/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4292253 */
-  src: url('iconfont.woff2?t=1727254748810') format('woff2'),
+  src: url('iconfont.woff2?t=1727415711578') format('woff2'),
-       url('iconfont.woff?t=1727254748810') format('woff'),
+       url('iconfont.woff?t=1727415711578') format('woff'),
-       url('iconfont.ttf?t=1727254748810') format('truetype');
+       url('iconfont.ttf?t=1727415711578') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-caizhi:before {
+  content: "\e647";
+}
+
 .icon-IC-yehua:before {
   content: "\e61b";
 }

src/component/Account/account.vue

@@ -1,8 +1,8 @@
 <template>
     <div class="account_page">
-		<div class="account_page_titleImg">
+		<!-- <div class="account_page_titleImg">
 			<img src="https://code-create.com.hk/wp-content/uploads/2022/12/about_banner-1.jpg" alt="">
-		</div>
+		</div> -->
 		<div class="account_page_content_box">
 			<div class="account_page_content">
 				<div class="account_page_content_left">

src/component/Account/accountFollowFans.vue

@@ -130,6 +130,9 @@ export default defineComponent({
 	}
 	.account_followFans_body{
 		padding-bottom: 3rem;
+		:deep(.ant-badge){
+			font-size: var(--aida-fsize2);
+		}
 		:deep(.ant-tabs-nav){
 			padding: 0rem 5rem;
 			.ant-tabs-nav-wrap{

src/component/Account/accountMessage.vue

@@ -193,6 +193,9 @@ export default defineComponent({
 	}
 	.account_message_body{
 		padding-bottom: 3rem;
+		:deep(.ant-badge){
+			font-size: var(--aida-fsize2);
+		}
 		:deep(.ant-tabs-nav){
 			padding: 0rem 5rem;
 			.ant-tabs-nav-wrap{

src/component/Account/followFans/fans.vue

@@ -15,7 +15,7 @@
 						<img :src="item.avatar" alt="">
 					</div>
 					<div class="account_generalMessage_item_right_title">
-						<div class="">{{ item.senderUserName }}</div>
+						<div class="">{{ item.userName }}</div>
 						<div class="modal_title_text_intro">{{ item.createTime }}</div>
 					</div>
 				</div>
@@ -88,14 +88,15 @@ export default defineComponent({
 		}
 		let setFollow = (item:any) =>{
 			let url = Https.httpUrls.porfolioFollow
-			if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
+			// if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
 			Https.axiosGet(url, {params:{followeeId:item.senderId}})
 			.then((rv) => {
-				if(item.isFollow == 1){
+				searchFollowFansList()
-					item.isFollow = 0
+				// if(item.isFollow == 1){
-				}else{
+				// 	item.isFollow = 0
-					item.isFollow = 1
+				// }else{
-				}
+				// 	item.isFollow = 1
+				// }
 			})
 		}
 		let openOtherUsers = (item:any)=>{

src/component/Account/followFans/follow.vue

@@ -16,7 +16,7 @@
 						<img :src="item.avatar" alt="">
 					</div>
 					<div class="account_generalMessage_item_right_title">
-						<div class="">{{ item.senderUserName }}</div>
+						<div class="">{{ item.userName }}</div>
 						<div class="modal_title_text_intro">{{ item.createTime }} </div>
 					</div>
 				</div>
@@ -88,15 +88,17 @@ export default defineComponent({
 			})
 		}
 		let setFollow = (item:any) =>{
-			let url = Https.httpUrls.porfolioFollow
+			// let url = Https.httpUrls.porfolioFollow
-			if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
+			// if(item.isFollow == 1)url = Https.httpUrls.porfolioCancelFollow
+			let url = Https.httpUrls.porfolioCancelFollow
 			Https.axiosGet(url, {params:{followeeId:item.senderId}})
 			.then((rv) => {
-				if(item.isFollow == 1){
+				searchFollowFansList()
-					item.isFollow = 0
+				// if(item.isFollow == 1){
-				}else{
+				// 	item.isFollow = 0
-					item.isFollow = 1
+				// }else{
-				}
+				// 	item.isFollow = 1
+				// }
 			})
 		}
 		let openOtherUsers = (item:any)=>{

src/component/Administrator/questionnaire.vue

@@ -134,7 +134,6 @@ export default defineComponent({
 				Https.axiosGet(Https.httpUrls.getAllQuestionnaire).then((res:any)=>{
 					if(res){
 						dataList.value = res
-						console.log(dataList);
 						// console.log(allEchartsList.value);
 						
 						resolve('')

src/component/Administrator/recentActiveUser.vue

@@ -273,7 +273,6 @@ export default defineComponent({
 				if (rv) {
 					// this.dataList = rv
 					filter.dataList = rv.records
-					console.log(rv);
 					filterData.total = rv.total
 					filter.tableLoading = false
 					

src/component/Administrator/trialUserConversionRateChart.vue

@@ -51,9 +51,6 @@ export default defineComponent({
                     let data: any = [];
 					for (let [key, value] of entries) {
 						let str 
-						console.log(key);
-						
-						
 						if(key != 'conversionRate'){
 							if(key == 'trialToOfficialCount'){
 								str = 'Trial To Official'

src/component/Detail/DesignElementsMobile.vue

@@ -452,8 +452,6 @@ export default defineComponent({
 				if(sketch.offsetHeight < item.location[1]/sketchNum){
 					top = sketch.offsetHeight +'px'
 				}
-				console.log(sketch.offsetWidth,this.sketch.width.replace(/rem/g,''));
-				
 				this.printStyleList[index]={
 					centers:{
 						left:0,

src/component/Detail/addDetails.vue

@@ -1,7 +1,7 @@
 <template>
     <a-modal
         class="addDetails_modal generalModel"
-        v-model:visible="showPayOrder"
+        v-model:visible="addDetails"
         :footer="null"
         width="50%"
         :maskClosable="false"
@@ -21,350 +21,40 @@
 				<div>{{ $t('addDetails.AddDetails') }}</div>
 				<div class="modal_title_text_intro"></div>
 			</div>
-			<div class="addDetails_canvasCenter">
+			<generalMiniCanvas :imgUrl="imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
-				<div class="addDetails_center_btn addDetails_center_item" :class="{spread:spreadState}">
-					<!-- <div @click="setOperation('')" class="addDetails_center_btn_item">
-						<div>新增</div>
-					</div> -->
-					<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
-					<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
-					<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
-					<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
-					<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
-					<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
-					<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
-				</div>
-				<div class="exportCanvasBox_center_box">
-					<div class="exportCanvasBox_center">
-						<!-- <div class="editFrontBack_bgImg" v-show="loadingShow">
-							<img :src="imgData?.undividedLayer" alt="">
-						</div> -->
-					</div>
-					<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
-				</div>
-			</div>
-			
-			<div class="exportCanvasBox_submit" @click="setSubmit">
-				<div class="started_btn">
-					{{ $t('addDetails.submit') }}
-				</div>
-			</div>
-			
 		</div>
 		<div></div>
     </a-modal>
-	<!-- <div class="mark_loading" v-show="loadingShow">
-		<a-spin size="large" />
-	</div> -->
 </template>
 <script>
 import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
-import { Https } from "@/tool/https";
+import generalMiniCanvas from "../modules/generalMiniCanvas.vue";
-import { formatTime } from "@/tool/util";
-import { setCookie, getCookie } from "@/tool/cookie";
-import { Modal, message } from "ant-design-vue";
-import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
-import allOrder from "@/component/Pay/allOrder.vue";
-import creditsDetail from "@/component/Pay/creditsDetail.vue";
-import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
-import { useI18n } from "vue-i18n";
-import { getMousePosition } from "@/tool/mdEvent";
 export default defineComponent({
     components: {
-		creditsDetail,
+		generalMiniCanvas,
-		allOrder,
     },
 	emits: ['setSloganData'],
     setup(props,{emit}) {
-        let presentState = ref('paypal');
+        let addDetail = reactive({
-        let showPayOrder = ref(false);
+			imgUrl:''
-        let loadingShow = ref(false);
+		});
-        let { t } = useI18n();
+        let addDetails = ref(false);
-        let canvas = reactive({});
-		let scale = 2;
-		let ratio = [1,1]
-		let exportWH = 512
-		let pencilbtnStyle = ref({
-			background:'',
-			width:0+'px',
-			height:0+'px',
-			display:'none',
-			left:0+'px',
-			top:0+'px',
-		})
-		let canvasBtn = reactive({
-			canvasState:'move',
-			canvasPencilWidth:{
-				pencil:4,
-				eraser:4,
-			},
-			spreadState:false,
-		})
-		let canvasWH = ref(0);
-		onMounted(()=>{
-		})
-		let exportUrl = ''
-		let reverseCanvasState = ref([])//存放canvas操作
-		let normalCanvasState = ref([])//存放canvas操作
-		let canvasState = ref()//存放canvas操作
-		let keyDown = []//监听键盘的 keydown 和 keyup 事件
 		let init = (data,index)=>{
-			normalCanvasState.value = []
+			addDetails.value = true
-			reverseCanvasState.value = []
+			addDetail.imgUrl = data.path
-            showPayOrder.value = true;
-			ratio = [1,1]
-			exportWH = 512
-			nextTick(()=>{
-				let canvasBox = document.querySelector(".addDetails_modal .exportCanvasBox_center");
-				document.removeEventListener('mousemove', mouseMove);
-				document.removeEventListener('touchmove', touchmove);
-				let img = new Image();
-
-				img.onload = function(){
-					loadingShow.value = true
-					let height = canvasBox.offsetHeight;
-					canvasWH.value = height
-					canvasBox.style.width = height+'px'
-					let wScale = 1
-					let hScale = 1
-					if(img.width>img.height){
-						hScale = img.height/img.width
-						exportWH = img.width
-					}else{
-						wScale = img.width/img.height
-						exportWH = img.height
         }
-					ratio = [wScale,hScale]
+		let submitBase64Data = (data)=>{
-					canvas = canvasGeneral.canvasInit(canvasBox,{
-						width:canvasWH.value * wScale,
-						height:canvasWH.value * hScale,
-					})
-					scale = img.height/canvas.height
-					pencilbtnStyle.value.background = rgba
-					
-					fabric.Object.prototype.cornerSize = 10
-					fabric.Object.prototype.transparentCorners = false 
-					exportUrl = data.path
-					fabric.Image.fromURL(data.path, function(img) {
-						// 设置背景图对象的宽度和高度与 canvas 相同
-						img.scaleToWidth(canvas.width);
-						img.scaleToHeight(canvas.height);
-						img.set({
-							scaleX: canvas.width / img.width,
-							scaleY: canvas.height / img.height
-						});
-						// 将背景图添加到 canvas 的底层
-						canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
-						if(!fabric.Object.prototype.controls.deleteControl){
-							JSSetRemoveImage(deleteObj)
-						}else{
-							fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
-						}
-						setPencilWidth()
-						updateCanvasState()
-					},{ crossOrigin: "Anonymous" });
-					// 鼠标抬起事件
-					canvas.on('mouse:up', function(event) {
-						if(canvasBtn.canvasState != 'move'){
-							updateCanvasState('mouseUp')
-						}
-					});
-
-					//画布上移动
-					document.addEventListener('mousemove', mouseMove);
-					document.addEventListener('touchmove', touchmove);
-					setOperation('pencil')
-					img.remove()
-				}
-				img.src = data.path
-				
-			})
-        }
-		let canvasKeyDown = (event) => {
-			if(keyDown.indexOf(event.key)>-1){
-			}else{
-				keyDown.push(event.code)
-				if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
-					historyState('reverse')
-				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
-					historyState('')
-				}
-			}
-		}
-		let canvasKeyUp = (event) =>{
-				keyDown = keyDown.filter(function(item) {
-					return event.code !== item;
-				})
-				
-			}
-		let clearCanvas = ()=>{
-		    canvasBtn.canvasState = 'move'
-		    canvasBtn.spreadState = false
-			document.removeEventListener("keydown", canvasKeyDown);
-			document.removeEventListener("keyup", canvasKeyUp);
-		}
-		let rgba = 'rgba(0, 0, 0, 1)'
-		let mouseMove = (event)=>{
-			let e = getMousePosition(event,false)
-			setCanvasMove(e)
-		}
-		let touchmove = (event)=>{
-			let e = getMousePosition(event,true)
-			setCanvasMove(e)
-		}
-		let setCanvasMove = (event)=>{
-			if(canvas.isDrawingMode){
-				canvas.setCursor('none');
-			}
-			let canvasCenterBox = document.querySelector(".addDetails_modal .exportCanvasBox_center_box");
-			if(!canvasCenterBox)return
-			let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
-			let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
-			pencilbtnStyle.value.left = parentX + "px"
-			pencilbtnStyle.value.top =  parentY+'px'
-		}
-		let setOperation = (str)=>{
-			canvasBtn.canvasState = str
-			if(str == 'move'){
-				setMove()
-				pencilbtnStyle.value.display = `none`
-			}else if(str == 'pencil'){
-				setPencil()
-				pencilbtnStyle.value.display = `block`
-			}else if(str == 'eraser'){
-				setEraser()
-				pencilbtnStyle.value.display = `block`
-			}
-		}
-		let setMove = ()=>{
-			canvas.isDrawingMode = false
-			canvas.forEachObject((obj) =>obj.selectable = true);
-		}
-		let setPencil = ()=>{
-			canvas.isDrawingMode = true//开启绘画模式
-			canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
-			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
-			canvas.freeDrawingBrush.color = rgba
-			pencilbtnStyle.value.background = rgba
-			canvas.freeDrawingBrush.isEraser = false
-			setPencilWidth()
-		}
-		let setEraser = ()=>{
-			canvas.isDrawingMode = true
-			let eraser = new fabric.EraserBrush(canvas)
-            canvas.freeDrawingBrush = eraser
-			canvas.requestRenderAll();
-			canvas.freeDrawingBrush.isEraser = true
-			pencilbtnStyle.value.background = `rgb(255,255,255)`
-			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
-			setPencilWidth()
-		}
-		let deleteObj = ()=> {
-			// if(!canvas.getActiveObjects()){
-			// 	return
-			// }
-			let target = canvas.getActiveObjects()
-			target.forEach((item)=>{
-				canvas.fxRemove(item, {
-					onComplete(){
-					canvas.discardActiveObject(); // 丢弃当前选中的对象
-					canvas.renderAll(); // 重新渲染 Canvas
-					}
-				})
-				canvas.FX_DURATION = 300
-			})
-		}
-		let setTimeOutWidth
-		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
-			clearTimeout(setTimeOutWidth)
-			setTimeOutWidth = setTimeout(()=>{
-				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
-				pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
-				pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
-			},300)
-		}
-		let updateCanvasState = (str) =>{
-			if(str != 'mouseUp'){
-			}
-			const canvasAsJson = JSON.stringify(canvas.toJSON());
-			normalCanvasState.value.push(canvasAsJson);
-		}
-		//撤回
-		let historyState = (str)=> {
-			if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
-				let obj = reverseCanvasState.value.pop()
-				// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
-				canvasState.value = obj 
-				normalCanvasState.value.push(obj);
-			}else if(str == '' && normalCanvasState.value.length > 1){
-				let obj = normalCanvasState.value.pop()
-				canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
-				reverseCanvasState.value.push(obj);
-			}else{
-				return
-			}
-			canvas.loadFromJSON(canvasState.value, () => {});
-		}
-		let setSubmit = ()=>{
-			var allObjects = canvas.getObjects('path');
-			// if(allObjects.length == 0){
-			// 	return message.info(t('addDetails.jsContent1'))
-			// }
-			var canvasDom = document.createElement("canvas");
-			let exportCanvas = new fabric.Canvas(canvasDom, {
-				backgroundColor: "rgba(255, 255, 255,1)",
-				width: exportWH * ratio[0],
-				height: exportWH * ratio[1],
-				isDrawingMode: false, // 开启绘图模式
-			});
-			canvas.backgroundImage.clone((back)=>{
-				back.set({
-					scaleX:1,
-					scaleY:1,
-					left:back.left*scale,
-					top:back.top*scale ,
-				})
-				exportCanvas.backgroundImage = back
-				allObjects.forEach((item,index)=>{
-					// let obj = fabric.util.object.clone(item);
-					if(item.type == 'circle')return
-					let obj 
-					item.clone((cloned)=>{
-						obj = cloned
-					})
-					obj.set(
-						{
-							scaleX:(item.scaleX?item.scaleX:1)*scale,
-							scaleY:(item.scaleY?item.scaleY:1)*scale,
-							left:item.left*scale,
-							top:item.top*scale,
-						}
-					)
-					exportCanvas.add(obj)
-				})
-				let data = exportCanvas.toDataURL('jpg')
-				cancelDsign()
-				clearCanvas()
 			emit('setSloganData',data)
-			})
+			cancelDsign()
 		}
 		let cancelDsign = ()=>{
-			document.removeEventListener('keydown',canvasKeyDown);
+			addDetails.value = false
-			document.removeEventListener('keyup', canvasKeyUp);
-			showPayOrder.value = false
 		}
         return {
-            presentState,
+			...toRefs(addDetail),
-            showPayOrder,
+			addDetails,
-			loadingShow,
-            t,
-			pencilbtnStyle,
-			...toRefs(canvasBtn),
 			init,
-			setOperation,
+			submitBase64Data,
-			setPencilWidth,
-			historyState,
-			setSubmit,
 			cancelDsign,
         };
     },
@@ -385,135 +75,10 @@ export default defineComponent({
     }
 	.addDetails_center{
 		position: relative;
-		// width: calc(512px / 2);
-		// width: 256px;
 		height: 100%;
 		display: flex;
 		flex-direction: column;
-		// height: calc(512px / 2);
 		margin: 0 auto;
-		.addDetails_center_item{
-			// position: relative;
-			background: #fff;
-			position: absolute;
-			
-			display: flex;
-			border: 0.2rem solid #c4c4c4;
-			width: 25rem;
-			border-radius: 4px; /* 设置圆角半径 */
-			flex-wrap: wrap;
-			.addDetails_center_btn_item{
-				display: flex;
-				align-items: center;
-				padding: 1rem 0;
-			}
-		}
-		.addDetails_center_btn{
-				z-index: 2;
-				// left: 50%;
-				// transform: translate(-50%,-135%);
-				// transition: all .3s;
-				padding: 1rem 1.5rem;
-				// transform: translate(-50%,0);
-				position: relative;
-				width: 100%;
-				flex-direction: row;
-				input{
-					// width: 100%;
-					// margin-top: 1rem;
-					flex: 1;
-				}
-				.icon-xiala{
-					position: absolute;	
-					width: 2rem;
-					bottom: 0;
-					transform: translate(-50%, 90%);
-					left: 50%;
-					width: 6rem;
-					background: #fff;
-					text-align: center;
-					cursor: pointer;
-					&.icon-xiala::before{
-						transition: all .3s;
-					}
-					&.btnRotate::before{
-						transform: rotate(180deg);
-						display: block;
-					}
-				}
-				i{
-					font-size: 2.5rem;
-					cursor: pointer;
-					width: 4rem;
-					height: 4rem;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					&.active{
-						border: 1px solid;
-						border-radius: .4rem;
-					}
-				}
-				&.spread{
-					transform: translate(-50%,0);
-				}
-			}
-		.addDetails_canvasCenter{
-			flex: 1;
-			overflow: hidden;
-			display: flex;
-			flex-direction: column;
-			position: relative;
-			margin: 0 auto;
-		}
-		.exportCanvasBox_center_box{
-			padding: 3rem;
-			height: 100%;
-			flex: 1;
-			position: relative;
-			width: 100%;
-			background: #e6e6e6;
-			&:hover{
-				cursor: none;
-			}
-			.editFrontBack_pencilbtn{
-				position: absolute;
-				z-index: 1;
-				border-radius: 50%;
-				border: 1px solid #000;
-				pointer-events: none;
-				transform: translate(-50%,-50%);
-			}
-		}
-		.exportCanvasBox_center{
-			height: 100%;
-			flex: 1;
-			position: relative;
-			overflow: hidden;
-			background: #e6e6e6;
-			// overflow: scroll;
-			.canvas-container{
-				left: 50%;
-				top: 50%;
-				transform: translate(-50%,-50%);
-			}
-			.editFrontBack_pencilbtn{
-				position: absolute;
-				z-index: 1;
-				border-radius: 50%;
-				border: 1px solid #000;
-				pointer-events: none;
-				transform: translate(-50%,-50%);
-			}
-		}
-		.exportCanvasBox_center:hover{
-			.addDetails_center_btn{
-				// transform: translate(-50%,-101%);
-				// &.spread{
-				// 	transform: translate(-50%,0);
-				// }
-			}
-		}
 	}
 	.exportCanvasBox_submit{
 		margin-top: 2.4rem;

src/component/Detail/editFrontBack.vue

@@ -36,6 +36,7 @@ import creditsDetail from "@/component/Pay/creditsDetail.vue";
 import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
 import { getMousePosition } from "@/tool/mdEvent";
 import { useI18n } from "vue-i18n";
+import canvasGeneral from "@/tool/canvasGeneral";
 export default defineComponent({
     components: {
 		creditsDetail,
@@ -68,6 +69,7 @@ export default defineComponent({
 			if(newVal == -1) return
 			imgDomIndex = newVal
 			props.patchData.front.imageUrl=  ''
+			clearTimeout(setTimeSubmit)
 			init(props.patchData.front[newVal],'')
 		})
 		let canvasBtn = reactive({
@@ -92,14 +94,12 @@ export default defineComponent({
 			imgData.value = data
 			nextTick(()=>{
 				let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
-				var canvasDom = document.createElement("canvas");
 				document.addEventListener("keydown", canvasKeyDown);
 				document.addEventListener("keyup", canvasKeyUp);
 				document.removeEventListener('mousemove', mouseMove);
 				document.removeEventListener('touchmove', touchmove);
-				canvasBox.appendChild(canvasDom);
 				let img = new Image();
-				img.onload = function(){
+				img.onload = async function(){
 					loadingShow.value = true
 					let height = canvasBox.offsetHeight;
 					canvasWH.value = height
@@ -124,6 +124,7 @@ export default defineComponent({
 					fabric.Object.prototype.cornerSize = 10
 					fabric.Object.prototype.transparentCorners = false 
 					exportUrl = data.maskUrl
+					await new Promise((resolve, reject) => {
 						fabric.Image.fromURL(data.maskUrl, function(img) {
 							// 设置背景图对象的宽度和高度与 canvas 相同
 							img.scaleToWidth(canvas.width);
@@ -146,7 +147,10 @@ export default defineComponent({
 							}
 							setPencilWidth()
 							updateCanvasState()
+							resolve('')
 						},{ crossOrigin: "Anonymous" });
+					})
+					
 					// 鼠标抬起事件
 					canvas.on('mouse:up', function(event) {
 						if(canvasBtn.canvasState != 'move'){
@@ -286,16 +290,16 @@ export default defineComponent({
 		}
 		let setTimeSubmit = null
 		let createSetTimeSubmit = ()=>{
-			clearTimeout(setTimeSubmit)
-			setTimeSubmit = setTimeout(()=>{
 			setSubmit()
-			},1000)
 		}
 		let updateCanvasState = (str) =>{
 			if(str != 'mouseUp'){
 				// editFrontBackPencilbtn.value.style.display = 'none'
 			}else{
+				clearTimeout(setTimeSubmit)
+				setTimeSubmit = setTimeout(()=>{
 					createSetTimeSubmit()
+				},1000)
 			}
 			const canvasAsJson = JSON.stringify(canvas.toJSON());
 			normalCanvasState.value.push(canvasAsJson);
@@ -505,6 +509,7 @@ export default defineComponent({
 		height: 100%;
 		flex: 1;
 		position: relative;
+		overflow: hidden;
 		width: 100%;
 		background: #e6e6e6;
 		&:hover{

src/component/Events/eventsDetail.vue

@@ -85,8 +85,6 @@ export default defineComponent({
 			Https.axiosGet(data.https).then(
                 (rv: any) => {
 					if(rv){
-						console.log(rv);
-						
 						message.success(data.success)
 						filter.loadingShow[index] = false
 					}

src/component/HomePage/ExportModel.vue

@@ -47,7 +47,6 @@
 							class="exportCanvasBox_allItem"
 							v-for="(item,key) in allBoardData"
 						>	
-
 							<div v-if="item[0] && key == 'disposeMoodboard'" class="exportCanvasBox_intro">Entirety Moodboard</div>
 							<div v-if="item[0] && key == 'printboardFiles'" class="exportCanvasBox_intro">Printboard</div>
 							<div v-if="item[0] && key == 'moodboardFiles'" class="exportCanvasBox_intro">Moodboard</div>
@@ -64,10 +63,9 @@
 										<div>{{colorItem.name}}</div>
 									</div>
 								</div>
-								
 							</div>
-
 							<div
+								v-if="key != 'moodboardPosition'"
 								class="exportCanvasBox_item"
 								v-for="imgItem in item"
 								:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
@@ -83,27 +81,29 @@
 					</div>
 				</div>
 				<div class="exportCanvasBox_operation_bor_item exportCanvasBox_left_tool_item_column">
-					<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
+					<div class="label_item" v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
 						<div >{{ $t('exportModel.Color') }}</div>
 						<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
-					</label>
+						<div class="labelHover_show exportCanvasBox_imgbor">
-					<label v-show="operation != 'move'">
+							<div v-for="item in colorHistoryList" :style="{'background':item}" @click="setColorHistory(item)"></div>
+						</div>
+					</div>
+					<div class="label_item" v-show="operation != 'move'">
 						<div >{{ $t('exportModel.Size') }}:</div>
 						<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
-					</label>
+					</div>
-					<label v-show="operation == 'pencil'">
+					<div class="label_item" v-show="operation == 'pencil'">
 						<div >{{ $t('exportModel.Brushwork') }}:</div>
 						<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
 							style="flex: 1"
 							@change="brushworkChange"
 							>
-							<!-- v-model:value="brushwork" -->
 							<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
 								<img :src="item.url" alt="">
 							</a-select-option>
 						</a-select>
-					</label>
+					</div>
-					<label v-show="operation == 'texture'" class="texture">
+					<div class="label_item texture" v-show="operation == 'texture'">
 						<div >{{ $t('exportModel.Texture') }}:</div>
 						<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
 							style="flex: 1"
@@ -114,15 +114,15 @@
 								<img :src="item.url" alt="">
 							</a-select-option>
 						</a-select>
-					</label>
+					</div>
-					<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
+					<div class="label_item" v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
 						<div >{{ $t('exportModel.FillBack') }}:</div>
 						<div class="exportCanvasBox_left_tool_item leftAlign">
 							<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
 							<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
 						</div>
-					</label>
+					</div>
-					<label v-show="operation === 'move'">
+					<div class="label_item" v-show="operation === 'move'">
 						<div >{{ $t('exportModel.Layer') }}:</div>
 						<div class="exportCanvasBox_left_tool_item top">
 							<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
@@ -130,12 +130,12 @@
 							<i class="icon iconfont icon-xiayiceng" @click="setLayerIndex('Backwards')"></i>
 							<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
 						</div>
-					</label>
+					</div>
-					<!-- <label v-show="allSelectWidth > -1 && operation != 'move'">
+					<!-- <div class="label_item" v-show="allSelectWidth > -1 && operation != 'move'">
 						<div >{{ $t('exportModel.Width') }}</div>
 						<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
-					</label> -->
+					</div> -->
-					<label v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
+					<div class="label_item" v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
 						<div>Font Family</div>
 						<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
 							style="flex: 1"
@@ -146,11 +146,11 @@
 								{{item.name}}
 							</a-select-option>
 						</a-select>
-					</label>
+					</div>
 					<!-- <label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
 						<div >{{ $t('exportModel.Height') }}</div>
 						<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
-					</label> -->
+					</div> -->
 				</div>
 				<!-- <div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
 					{{ $t('exportModel.More') }}
@@ -1527,18 +1527,20 @@ export default defineComponent({
 		let setTimeOut = {
 			color:null,
 			width:null,
+			colorHistory:null,
 		}//给切换颜色设置防抖
-		let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
+		let colorHistoryList = ref(['rgb(0, 0, 0)'])
-			clearTimeout(setTimeOut.color)
+		let setColorHistory = (value)=>{
-			setTimeOut.color = setTimeout(()=>{
+			canvasPencilColor.value = value
+			pencilColor()
+		}
+		let pencilColor = ()=>{
 			if(createText.set){
 				setFontFamily()
 				return
 			}
 			// brushIndicator.fill = canvasPencilColor.value;
-				
 			if(canvas.freeDrawingBrush.isEraser){
-
 			}else{
 				pencilbtnStyle.value.background = canvasPencilColor.value
 			}
@@ -1549,9 +1551,16 @@ export default defineComponent({
 			}else{
 				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
 			}
-
+		}
-
+		let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
-			},100)
+			clearTimeout(setTimeOut.color)
+			clearTimeout(setTimeOut.colorHistory)
+			setTimeOut.color = setTimeout(()=>{
+				pencilColor()
+			},200)
+			setTimeOut.colorHistory = setTimeout(()=>{
+				colorHistoryList.value.push(canvasPencilColor.value)
+			},1000)
 		}
 		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
 			clearTimeout(setTimeOut.width)
@@ -1956,7 +1965,6 @@ export default defineComponent({
 		let submitLiquefaction = (rv)=>{
 			const originalWidth = liquefactionData.width * liquefactionData.scaleX; // 保存原始宽度
 			const originalHeight = liquefactionData.height * liquefactionData.scaleY; // 保存原始高度
-			console.log(liquefactionData);
 			liquefactionData.setSrc(rv, function() {
 				liquefactionData.scaleToWidth(originalWidth);
 				liquefactionData.scaleToHeight(originalHeight);
@@ -1971,7 +1979,6 @@ export default defineComponent({
 				liquefactionData = activeObjects[0]
 				liquefaction.value.init(activeObjects[0])
 			} else {
-				console.log('No object selected.');
 				message.info(useI18.t('exportModel.jsContent6'))
 				return null;
 			}
@@ -2031,6 +2038,8 @@ export default defineComponent({
 			canvasPencilWidth,//input选择宽度
 			setAllSelectWidth,//多选设置宽度
 			allSelectWidth,//多选设置宽度的值
+			colorHistoryList,//历史颜色
+			setColorHistory,//设置历史颜色
 			setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
 			setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
 			setHDExport,//高清导出选择的图片
@@ -2192,7 +2201,7 @@ export default defineComponent({
 			.exportCanvasBox_left_tool{
 				margin: 0;
 			}
-			label {
+			.label_item,label {
                 display: flex;
 				align-items: center;
 				width: 23%;
@@ -2340,8 +2349,29 @@ export default defineComponent({
 				flex: 1;
 				margin-left: 8rem;
 				display: flex;
-				label{
+				.label_item{
 					margin-right: 2rem;
+					position: relative;
+					.labelHover_show{
+						position: absolute;
+						width: 100%;
+						height: 10rem;
+						top: 100%;
+						z-index: 2;
+						flex-wrap: wrap;
+						div{
+							width: 3rem;
+							height: 3rem;
+							margin-right: 1rem;
+							margin-bottom: 1rem;
+							cursor: pointer;
+						}
+					}
+				}
+				.label_item:hover{
+					.labelHover_show{
+						display: flex;
+					}
 				}
 			}
 			.exportCanvasBox_left_tool_item{

src/component/HomePage/Generate.vue

@@ -114,7 +114,7 @@
 						</a-upload>
 					</i>
 					<div :title="$t('Generate.style')">
-						<generalMenu :dataList="printModelList" @setprintModel="setprintModel" :item="printModel"></generalMenu>
+						<generalMenu :dataList="printModelList" :isCanvas="type_.type2 == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
 					</div>
 				</div>
 				<textarea 

src/component/HomePage/MoodboardUpload.vue

@@ -440,7 +440,9 @@ export default defineComponent({
 				// let layout:any = isMoible() ? this.$refs.layoutMobile : this.$refs.layout
 				let layout:any = this.$refs.layout
 				if(this.layoutList.length <= 0){
-					// await this.layout()
+					let styleObj = this.store.state.UploadFilesModule.moodboardPosition
+					if(!styleObj.domStyle)await this.layout()
+					// 
 					let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
 					this.layoutList = arr
 				}

src/component/HomePage/collectionModal.vue

@@ -66,6 +66,7 @@ import ColorboardUpload from '@/component/HomePage/ColorboardUpload.vue'
 import SketchboardUpload from '@/component/HomePage/SketchboardUpload.vue'
 import MarketingSketchUpload from '@/component/HomePage/MarketingSketchUpload.vue'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
 import { Modal,message } from 'ant-design-vue';
 import { Https } from "@/tool/https";
 import {useStore} from 'vuex'
@@ -83,7 +84,13 @@ export default defineComponent({
         SketchboardUpload,
         MarketingSketchUpload
     },
-	setup(){
+	props:{
+		getDesignData: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(props){
 		const store = useStore()
 		let {t} = useI18n()
 		let driver__:any = computed(()=>{
@@ -285,9 +292,46 @@ export default defineComponent({
 			})
 			return bor
 		},
+		getPantongName() {
+			let colorBoards = this.store.state.UploadFilesModule.colorBoards;
+			let data: any = [];
+			for (let v of colorBoards) {
+				let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
+				let hsv = rgbToHsv(color);
+				v.hsv = hsv[0] + hsv[1] + hsv[2];
+				data.push({
+					h: hsv[0],
+					s: hsv[1],
+					v: hsv[2],
+				});
+			}
+			
+			return new Promise((resolve: any, reject: any) => {
+				Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
+					.then((rv: any) => {
+						if (rv) {
+							rv.forEach((ele: any, index: number) => {
+								colorBoards[index].id = ele.id;
+								colorBoards[index].tcx = ele.tcx;
+								colorBoards[index].name = ele.name;
+							});
+							this.store.commit("setColorboardList", colorBoards);
+							resolve();
+						}
+					})
+					.catch((res) => {
+						reject();
+					});
+			});
+		},
         //完成
         async finishCollection(){
 			this.isShowMark = true
+			this.store.commit('clearAllId')
+			this.$emit('finishCollection')
+			await this.getPantongName()
+			this.store.commit("setAllBoardData");
+
 			let sketchList = this.store.state.UploadFilesModule.sketchboard
 			let arr:any = []
 			sketchList.forEach((item:any) => {
@@ -299,12 +343,14 @@ export default defineComponent({
 				}
 				arr.push(obj)
 			});
-			let data = {sketchBoards:arr}
+			// let data = {sketchBoards:arr}
+			let data = this.getDesignData(-1)
+			data.moodboardPosition = JSON.stringify(this.store.state.UploadFilesModule.moodboardPosition)
+			data.collectionId = this.store.state.HomeStoreModule.designCollectionId?this.store.state.HomeStoreModule.designCollectionId:null
 			if(!await this.isPinOpen(sketchList)){
 				this.isShowMark = false
 				return
 			}
-			
 			let elList = document.querySelectorAll('.img_block_item_sketch img')
 			Https.axiosPost(Https.httpUrls.sketchBoardsBoundingBox, data)
 				.then((rv: any) => {
@@ -314,7 +360,6 @@ export default defineComponent({
 					GO.id = 0
 					this.showCollectionModal =false
 					this.collectionStep = 1
-					this.$emit('finishCollection')
 					if(this.driver__.driver){
 						driverObj__.moveNext()
 					}

src/component/HomePage/generalMenu.vue

@@ -1,17 +1,21 @@
 <template>
 	<div class="generalMenu_printModel">
 		<div @click.stop="openPrintModel" :class="driverClass.class1">
-			<a-popover>
+			<a-popover v-if="isCanvas">
 				<template #content>
 					<img style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
 				</template>
 				<span v-if="item.label">{{ item.label }}</span>
 				<span v-else>{{ item.name }}</span>
 			</a-popover>
+			<div v-else>
+				<span v-if="item.label">{{ item.label }}</span>
+				<span v-else>{{ item.name }}</span>
+			</div>
 		</div>
 		<ul :class="driverClass.class2" v-show="openClick">
 			<li v-for="item,index in dataList" :class="{active:deleteItem == index}" class="printModel_item" @click="setprintModel(item,index)">
-				<a-popover placement="right">
+				<a-popover placement="right" v-if="isCanvas">
 					<template #content>
 						<img v-if="item.img != -1" style="width: 10rem;height: 10rem;object-fit: contain;" :src="item.img" alt="">
 						<div v-else-if="item.img == -1" class="generalMenu_printModel_upload ">
@@ -37,7 +41,10 @@
 					<span v-if="item.label">{{ item.label }}</span>
 					<span v-else>{{ item.name }}</span>
 				</a-popover>
-				
+				<div v-else>
+					<span v-if="item.label">{{ item.label }}</span>
+					<span v-else>{{ item.name }}</span>
+				</div>
 			</li>
 		</ul>
 	</div>
@@ -64,6 +71,10 @@ import { message, Upload, Modal } from "ant-design-vue";
 			 type:Boolean,
 			 default:false,
 		 },
+		 isCanvas:{
+			 type:Boolean,
+			 default:false,
+		 },
 		 deleteItem:{
 			type:Number,
 			default:-1

src/component/HomePage/layout.vue

@@ -140,9 +140,7 @@ export default defineComponent({
 		let layoutList:any = ref([])
 		const content:any = ref<HTMLElement | null>(null);
 		let loadingShow = ref(false)
-		let styleObj:any = computed(()=>{
+		let styleObj:any = {}
-			return store.state.UploadFilesModule.moodboardPosition
-		})
 		let moodItemScale = ref(0)
 		let domObj = {
 			dom:['img','ul','.layout_rotote','.layout_translate','.layout_angle_tr','.layout_angle_tl','.layout_angle_br','.layout_angle_bl'],
@@ -692,6 +690,7 @@ export default defineComponent({
     methods: {
 		init(){
 			let parentList:any = this.$parent
+			this.styleObj = this.store.state.UploadFilesModule.moodboardPosition
 			parentList = parentList.layoutList
 			this.layout = true
 			// let layoutList = this.store.state.UploadFilesModule.moodboard
@@ -756,7 +755,7 @@ export default defineComponent({
 					zIndex: obj['z-index']?obj['z-index']:1
 				}
 			});
-			const sortedNums = nums.sort((a, b) => a.zIndex - b.zIndex);
+			const sortedNums = nums.sort((a:any, b:any) => a.zIndex - b.zIndex);
 			
 			GO.zIndex = sortedNums.length + 1
 			// GO.zIndex = sortedNums[sortedNums.length - 1].zIndex + 1
@@ -817,8 +816,9 @@ export default defineComponent({
         //提交模板
         submitTemplate() {
 			this.loadingShow = true
+			this.setDomStyle()
 			this.styleObj.domStyle = this.setIndex(this.styleObj.domStyle)//index统一排序设置值
-			this.store.commit("setDisposeMoodboardPosition", this.styleObj);
+			this.store.commit("setDisposeMoodboardPosition", JSON.parse(JSON.stringify(this.styleObj)));
 			this.layoutList.forEach((v:any)=>{
 				v.setPitch = false
 			})
@@ -841,7 +841,6 @@ export default defineComponent({
 							this.loadingShow = false
 							this.store.commit("setDisposeMoodboard", rv);
 
-							this.setDomStyle()
 
 						}
 					).catch(rv=>{

src/component/HomePage/scaleImage.vue

@@ -110,7 +110,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="scaleImage_nav" @keydown="handleKeyDown">
+		<div class="scaleImage_nav">
 			<div class="nav_left">
 				<i class="fi fi-rr-arrow-small-left" @click="lastStep()"></i>
 			</div>
@@ -163,7 +163,7 @@ export default defineComponent({
 	},
     setup(props:any,{emit}) {
 		const store = useStore();
-		
+		let {t} = useI18n()
 		let productimg = reactive({
 			isProductimg:false,
 			productimgSearchName:'',
@@ -301,12 +301,34 @@ export default defineComponent({
 				});
 			}
 		}
-		let submitBase64Data = (rv:any)=>{
+		let submitBase64Data = async (rv:any)=>{
 			loadingShow.value = true
+			let isOverlay = false
+			await new Promise<void>((resolve, reject) => {
+				Modal.confirm({
+					title: t('scaleImage.overlayOrNot'),
+					icon: createVNode(ExclamationCircleOutlined),
+					okText: 'Yes',
+					cancelText: 'No',
+					mask:false,
+					centered:true,
+					onOk() {
+						resolve()
+						isOverlay = true
+
+					},
+					onCancel(){
+						isOverlay = false
+						resolve()
+					}
+				});
+			})
 			let data = {
 				"base64": rv,
 				"category": scaleImageList.value[scaleImageIndex.value]?.categoryValue,
 				"gender": props.workspace.sexEnum.value,
+				"originalId":scaleImageList.value[scaleImageIndex.value]?.id,
+				"isOverride":isOverlay,
 			}
 			Https.axiosPost(Https.httpUrls.modifySketch, data).then(
 				(rv) => {
@@ -314,25 +336,9 @@ export default defineComponent({
 					rv.status = 'Success'
 					rv.category = scaleImageList.value[scaleImageIndex.value]?.category
 					rv.categoryValue = scaleImageList.value[scaleImageIndex.value]?.categoryValue
-					delete rv.url
+					isOverlay?(scaleImageList.value[scaleImageIndex.value] = rv):(scaleImageList.value.unshift(rv))
-					Modal.confirm({
-						title: useI18n().t('scaleImage.overlayOrNot'),
-						icon: createVNode(ExclamationCircleOutlined),
-						okText: 'Yes',
-						cancelText: 'No',
-						mask:false,
-						centered:true,
-						onOk() {
-							scaleImageList.value[scaleImageIndex.value] = rv
 					loadingShow.value = false
 					scaleImage.value = false
-						},
-						onCancel(){
-							scaleImageList.value.unshift(rv)
-							loadingShow.value = false
-							scaleImage.value = false
-						}
-					});
 				}
 			).catch(res=>{
 				loadingShow.value = false

src/component/modules/generalCanvas.vue

@@ -1,20 +1,23 @@
 <template>
 	<div class="generalCanvas">
 		<div class="generalCanvas_left">
-			<label>
+			<div class="label_item">
 				<div>{{ $t('exportModel.Height') }}:</div>
 				<input type="number" @input="setMaxInput('height', 30000)" v-model="canvasWH.height" />
-			</label>
+			</div>
 			<div class="generalCanvas_operation_bor_item generalCanvas_left_tool_item_column">
-				<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
+				<div class="label_item" v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
 					<div >{{ $t('exportModel.Color') }}</div>
 					<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
-				</label>
+					<div class="labelHover_show exportCanvasBox_imgbor">
-				<label v-show="operation != 'move'">
+						<div v-for="item in colorHistoryList" :style="{'background':item}" @click="setColorHistory(item)"></div>
+					</div>
+				</div>
+				<div class="label_item" v-show="operation != 'move'">
 					<div >{{ $t('exportModel.Size') }}:</div>
 					<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
-				</label>
+				</div>
-				<label v-show="operation == 'pencil'">
+				<div class="label_item" v-show="operation == 'pencil'">
 					<div >{{ $t('exportModel.Brushwork') }}:</div>
 					<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
 						style="flex: 1"
@@ -24,8 +27,8 @@
 							<img :src="item.url" alt="">
 						</a-select-option>
 					</a-select>
-				</label>
+				</div>
-				<label v-show="operation == 'texture'" class="texture">
+				<div class="label_item texture" v-show="operation == 'texture'">
 					<div >{{ $t('exportModel.Texture') }}:</div>
 					<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
 						style="flex: 1"
@@ -35,15 +38,15 @@
 							<img :src="item.url" alt="">
 						</a-select-option>
 					</a-select>
-				</label>
+				</div>
-				<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
+				<div class="label_item" v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
 					<div >{{ $t('exportModel.FillBack') }}:</div>
 					<div class="generalCanvas_left_tool_item leftAlign">
 						<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
 						<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
 					</div>
-				</label>
+				</div>
-				<label v-show="operation === 'move'">
+				<div class="label_item" v-show="operation === 'move'">
 					<div >{{ $t('exportModel.Layer') }}:</div>
 					<div class="generalCanvas_left_tool_item top">
 						<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
@@ -51,8 +54,8 @@
 						<i class="icon iconfont icon-xiayiceng" @click="setLayerIndex('Backwards')"></i>
 						<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
 					</div>
-				</label>
+				</div>
-				<label v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
+				<div class="label_item" v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
 					<div>Font Family</div>
 					<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
 						style="flex: 1"
@@ -62,7 +65,7 @@
 							{{item.name}}
 						</a-select-option>
 					</a-select>
-				</label>
+				</div>
 			
 			</div>
 		</div>
@@ -83,10 +86,10 @@
 						<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
 						<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
 						<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
-						<label class="uploadImage">
+						<div class="label_item uploadImage">
 							<i class="icon iconfont icon-shangchuantupian" ></i>
 							<input type="file" @change="uploadImage">
-						</label>
+						</div>
 						<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
 				</div>
 			</div>
@@ -100,7 +103,7 @@
 	</div>
 </template>
 <script>
-import {defineComponent, computed, h, ref, nextTick, inject, reactive, onMounted,
+import {defineComponent, computed, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
 } from "vue";
 import { Https } from "@/tool/https";
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
@@ -759,18 +762,20 @@ export default defineComponent({
 		let setTimeOut = {
 			color:null,
 			width:null,
+			colorHistory:null,
 		}//给切换颜色设置防抖
-		let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
+		let colorHistoryList = ref(['rgb(0, 0, 0)'])
-			clearTimeout(setTimeOut.color)
+		let setColorHistory = (value)=>{
-			setTimeOut.color = setTimeout(()=>{
+			canvasPencilColor.value = value
+			pencilColor()
+		}
+		let pencilColor = ()=>{
 			if(createText.set){
 				setFontFamily()
 				return
 			}
 			// brushIndicator.fill = canvasPencilColor.value;
-				
 			if(canvas.freeDrawingBrush.isEraser){
-
 			}else{
 				pencilbtnStyle.value.background = canvasPencilColor.value
 			}
@@ -781,9 +786,16 @@ export default defineComponent({
 			}else{
 				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
 			}
-
+		}
-
+		let setPencilColor = ()=>{//切换颜色给铅笔设置颜色
-			},100)
+			clearTimeout(setTimeOut.color)
+			clearTimeout(setTimeOut.colorHistory)
+			setTimeOut.color = setTimeout(()=>{
+				pencilColor()
+			},200)
+			setTimeOut.colorHistory = setTimeout(()=>{
+				colorHistoryList.value.push(canvasPencilColor.value)
+			},1000)
 		}
 		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
 			clearTimeout(setTimeOut.width)
@@ -1000,6 +1012,9 @@ export default defineComponent({
 			fontFamily.value = arr[0].value
 			init()
 		});
+		onBeforeUnmount(()=>{
+			canvasGeneral.canvasClear()
+		})
         return {
 			toSvg,
 			t,
@@ -1029,6 +1044,8 @@ export default defineComponent({
 			canvasPencilWidth,//input选择宽度
 			setAllSelectWidth,//多选设置宽度
 			allSelectWidth,//多选设置宽度的值
+			colorHistoryList,//历史颜色
+			setColorHistory,//设置历史颜色
 			setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
 			setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
 			brushworkChange,//切换笔触的回调
@@ -1173,7 +1190,7 @@ export default defineComponent({
 			align-items: flex-start;
 			position: relative;
 			flex-direction: row;
-			>label{
+			>.label_item{
 				width: 20%;
 			}
 			.generalCanvas_title {
@@ -1273,8 +1290,29 @@ export default defineComponent({
 				flex: 1;
 				margin-left: 8rem;
 				display: flex;
-				label{
+				.label_item{
 					margin-right: 2rem;
+					position: relative;
+					.labelHover_show{
+						position: absolute;
+						width: 100%;
+						height: 10rem;
+						top: 100%;
+						z-index: 2;
+						flex-wrap: wrap;
+						div{
+							width: 3rem;
+							height: 3rem;
+							margin-right: 1rem;
+							margin-bottom: 1rem;
+							cursor: pointer;
+						}
+					}
+				}
+				.label_item:hover{
+					.labelHover_show{
+						display: flex;
+					}
 				}
 			}
 			.generalCanvas_left_tool_item{

src/component/modules/generalMiniCanvas.vue

@@ -30,7 +30,7 @@
 	</div>
 </template>
 <script>
-import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+import { defineComponent, ref, reactive, watch, onMounted, onBeforeUnmount, nextTick, toRefs } from "vue";
 import { Https } from "@/tool/https";
 import { formatTime } from "@/tool/util";
 import { setCookie, getCookie } from "@/tool/cookie";
@@ -98,6 +98,9 @@ export default defineComponent({
 		onMounted(()=>{
 			init()
 		})
+		onBeforeUnmount(()=>{
+			canvasGeneral.canvasClear()
+		})
 		let reverseCanvasState = ref([])//存放canvas操作
 		let normalCanvasState = ref([])//存放canvas操作
 		let canvasState = ref()//存放canvas操作
@@ -460,6 +463,7 @@ export default defineComponent({
 		height: 100%;
 		flex: 1;
 		position: relative;
+		overflow: hidden;
 		width: 100%;
 		background: #e6e6e6;
 		&:hover{

src/store/uploadFile/uploadFile.ts

@@ -61,6 +61,8 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
         },
 		setDisposeMoodboardPosition(state,files){
 			state.moodboardPosition = files
+			console.log(state.moodboardPosition);
+			
         },
 		setMoodboardGenerateFiles(state,files){
 			state.moodboardGenerateFiles = files

src/tool/canvasGeneral.js

@@ -104,7 +104,6 @@ class myCanvas {
 		this.canvas.on("object:added", (event)=>{
 			if(!this.isLoadCanvas)this.updateCanvasState('')
 		});
-
 		return this.canvas
 	}
 
@@ -135,10 +134,8 @@ class myCanvas {
 	canvasClear(){
 		let oldCanvasDom = this.canvasDomParent.querySelector('.canvas-container')
 		let oldCanvasDom1 =  this.canvasDomParent.querySelector('canvas')
-	
 		if(oldCanvasDom)oldCanvasDom.remove()
 		if(oldCanvasDom1)oldCanvasDom1.remove()
-
 		document.removeEventListener("keydown", this.canvasKeyDown);
 		document.removeEventListener("keyup", this.canvasKeyUp);
 	

src/tool/domTurnImg.js

@@ -30,7 +30,6 @@ function base64ToFile(base64,filename) {
    
    // 创建 File 对象
    const file = new File([byteArray], filename, { type: 'image/jpeg' }); // 根据需要的类型进行修改
-   console.log(file);
    return file;
 }
 	//base64转成blob

src/tool/webSocket.js

@@ -7,7 +7,6 @@ class MyWs {
 		this.messageUrl = http+'/notification'
 	}
 	linkWs(url) {
-		console.log(this.ws && this.ws.readyState == 1);
 		if (this.ws && this.ws.readyState == 1) return
 		this.ws = new WebSocket(url)
 		this.ws.onmessage = (e)=>{
@@ -17,14 +16,11 @@ class MyWs {
 				console.error('websocket',error)
 			}
 		}
-		console.log(this.ws);
 	}
 	static receiveText(data,call){
-		console.log('receive',data);
 		MyEvent.emit('getMessage',data)
 	}
 	sendMessage(data) {
-		console.log(this);
 		if (this.ws && this.ws.readyState == 1) {
 			let obj = {
 				cmd: 1,
@@ -50,7 +46,6 @@ class MyWs {
 		}
 	}
  	send(obj) {
-		console.log(2323);
 		this.ws.send(JSON.stringify(obj))
 	}
 	close(){

src/views/HomeMain.vue

@@ -596,7 +596,8 @@ export default defineComponent({
 						// 	this.$router.push("/home")
 						// }
 						this.store.commit('clearAllData')
-						window.location.reload()
+						// window.location.reload()
+						window.location.href = '/home';
                     }
 				}
 			})

src/views/HomeView/HomeView.vue

@@ -195,7 +195,7 @@
 			</div>
 		</div>
 		<KeepAlive>
-			<CollectionModal ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
+			<CollectionModal :getDesignData="getDesignData" ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
 		</KeepAlive>
 		<productImg ref="productImg" @setTask="setTask"></productImg>
 		<DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail>
@@ -616,53 +616,9 @@ export default defineComponent({
 		},
 		//完成设计
 		finishCollection() {
-			let _this = this;
+			this.isHaveReviewCollection = true;
-			_this.isFinishLoading = true;
+			this.isFinishLoading = false;
-			this.getPantongName()
-				.then((res) => {
-					_this.store.commit("setAllBoardData");
-					_this.isHaveReviewCollection = true;
-					_this.isFinishLoading = false;
-				})
-				.catch((res) => {
-					_this.isFinishLoading = false;
-				});
 		},
-
-		//查询颜色的潘通值和txc
-		getPantongName() {
-			let colorBoards = this.store.state.UploadFilesModule.colorBoards;
-			let data: any = [];
-			for (let v of colorBoards) {
-				let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
-				let hsv = rgbToHsv(color);
-				v.hsv = hsv[0] + hsv[1] + hsv[2];
-				data.push({
-					h: hsv[0],
-					s: hsv[1],
-					v: hsv[2],
-				});
-			}
-			
-			return new Promise((resolve: any, reject: any) => {
-				Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
-					.then((rv: any) => {
-						if (rv) {
-							rv.forEach((ele: any, index: number) => {
-								colorBoards[index].id = ele.id;
-								colorBoards[index].tcx = ele.tcx;
-								colorBoards[index].name = ele.name;
-							});
-							this.store.commit("setColorboardList", colorBoards);
-							resolve();
-						}
-					})
-					.catch((res) => {
-						reject();
-					});
-			});
-		},
-
 		getContainer() {
 			return document.querySelector("#system_silder");
 		},
@@ -781,11 +737,16 @@ export default defineComponent({
 				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
 				processId:this.designRandom
 			};
-			if (designCollectionId) {
+			let isLoad = false
+			if(designCollectionId == -1){
+				isLoad = true
+			} else if (designCollectionId) {
 				data.collectionId = designCollectionId;
 			}
+			if(!isLoad){
 				this.designProgress = 0;
 				this.showDesignMark = true;
+			}
 			return data;
 		},
 
@@ -1001,7 +962,7 @@ export default defineComponent({
 						name:data.collection.moodTemplateName,
 					}
 				}]:[],
-				moodboardPosition:data.collection.moodboardPosition?data.collection.moodboardPosition:{},
+				moodboardPosition:data.collection.moodboardPosition?JSON.parse(data.collection.moodboardPosition):{},
 				moodboardFiles: this.dealViewChooseData(
 					data.collection.moodBoards,"Moodboard"
 				),

src/views/HomeView/history.vue

@@ -324,8 +324,6 @@ export default defineComponent({
 							this.store.commit("setAllBoardDataChoose",{});
 							this.store.commit("clearShowSketchboard",{});
 						}
-						console.log(this.store.state.HomeStoreModule.userGroupId,record);
-						
                     }
                 );
             }

src/views/emailVerify.vue

@@ -1,32 +1,33 @@
 <template>
-    <div class="emailVerify" :class="{'active': forbid}">
+    <div class="emailVerify">
         <main class="main">
-            <h1 id="title">Welcome</h1>
+            <div class="survey-form">
-            <p id="description" v-if="!forbid">Please take the survey</p>
+				<h1 id="title"><span>√</span>邮箱修改成功</h1>
-            
+				<div class="text">
+					<p id="description">您的新邮箱为：*********************</p>
+				</div>
+				<div class="mark_loading" v-show="!isSucceed">
+				</div>
+			</div>
         </main>
     </div>
+	<div class="mark_loading" v-show="isShowMark">
+		<a-spin size="large" />
+	</div>
 </template>
 
 <script lang="ts">
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Modal,message } from 'ant-design-vue';
+import { useRoute } from 'vue-router';
 import { Https } from "@/tool/https";
 import { defineComponent, toRefs,ref, reactive, createVNode } from "vue";
 export default defineComponent({
     setup() {
+		const route = useRoute();
         let feedbackData:any = reactive({
-			userName:'',
+			isShowMark:false,
-			gender:'Female',
+			isSucceed:false,
-			occupation:'',
-			country:'',
-			email:'',
-			age:'20-30',
-			helpful:[],
-			improve:[],
-			isSubscribe:'',
-			reasonForNotSubscribe:[],
-			designTools:'',
 		});
 		let setSubmit = (value:any)=>{
 			Https.axiosPost(Https.httpUrls.questionnaire, value).then(
@@ -36,12 +37,10 @@ export default defineComponent({
 			).catch(res=>{
 			});
 		}
-		let forbid = ref(false)
 		
         return {
             ...toRefs(feedbackData),
             setSubmit,
-			forbid,
         };
     },
 
@@ -63,73 +62,58 @@ export default defineComponent({
     text-align: center;
     line-height: 1.5;
     // background: linear-gradient(180deg, #f3f3e6 0%, #eee4f3 100%);
-    margin: 1rem;
-	height: 100%;
 	overflow-y: auto;
-	&.active{
+	*{
-		#title {
+		padding: 0;
-			font-size: 3rem;
+		margin: 0;
-		}
-		#description {
-			font-size: 1.4rem;
-		}
-		#survey-form {
-			width: 90%;
-			padding: 1.5rem;
-			font-size: 1.2rem;
-		}
-		p{
-			font-size: 1.4rem;
-		}
-		input,
-		#dropdown {
-			padding: 5px;
-		}
-
-		textarea {
-			max-height: 125px;
-			padding: 5px;
-		}
-		input[type="radio"],
-		input[type="checkbox"] {
-			width: 1rem;
-			height: 1rem;
-		}
-		input,select{
-			height: 3.5rem;	
-		}
 	}
 	.main{
 		background: linear-gradient(45deg, #eee4f3, #f3f4e6);
-		padding: 2rem;
+		// background: #f5f5f5;
+		width: 100vw;
+		height: 100vh;
 	}
     #title {
         font-size: 6rem;
         margin: 0;
 		font-weight: 900;
     }
-
+	#title{
-    #description {
+		display: flex;
-        font-size: 2.8rem;
+		align-items: center;
-        font-style: italic;
+		span{
+			background: #39215b;
+			width: 8rem;
+			height: 8rem;
+			border-radius: 50%;
+			color: #fff;
+			display: block;
+			font-size: 6rem;
+			line-height: 8rem;
+			text-align: center;
+			margin: 10px;
 		}
-	
+	}
-    #survey-form {
+    .survey-form {
 		position: relative;
-        background: rgba(255, 255, 255, 0.2);
+		background: rgba(255, 255, 255);
-        width: 60%;
+		width: 50%;
 		left: 50%;
-        transform: translateX(-50%);
+		top: 50%;
-        text-align: left;
+		transform: translate(-50%, -50%);
-        border-radius: 15px;
-        padding: 3rem;
-        box-shadow: -1px 1px 5px 0.5px;
 		font-size: 2.4rem;
 		display: flex;
-        flex-wrap: wrap;
+		flex-direction: column;
-		justify-content: space-between;
+		align-items: center;
-		&.active{
+		justify-content: center;
-			transition: width 1s ease;
+		border-radius: 2rem;
+		padding: 4rem 0;
+		.mark_loading{
+			background: #fff;
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			top: 0;
 		}
     }
 	
@@ -138,117 +122,9 @@ export default defineComponent({
             width: 75%;
         }
     }
-    h2 {
+    
-        width: 100%;
-		font-weight: 900;
-    }
-    .section {
-        display: flex;
-        flex-direction: column;
-        margin: 1rem;
-        width: 100%;
-    }
-	.section:last-child{
-		margin-bottom: 4rem;
-	}
-    .w40 {
-        width: 40%;
-    }
-	.fontColor{
-		color: rgb(255, 2, 2);
-	}
 	p{
 		font-size: 2.8rem;
 	}
-    p,
-    label {
-        font-weight: bold;
-        margin: 0;
-        margin-left: 5px;
-    }
-	
-    input,
-    #dropdown {
-        border: none;
-        border-radius: 5px;
-        padding: 10px;
-        outline: 0;
-    }
-
-    input:focus,
-    #dropdown:focus {
-        border: 2px solid rgb(173, 173, 173);
-    }
-	input,select{
-		height: 7rem;	
-	}
-    input,
-    button,
-    select,
-    textarea {
-		cursor: pointer;
-        font-family: inherit;
-        font-size: inherit;
-    }
-
-    input[type="radio"],
-    input[type="checkbox"] {
-        display: inline-block;
-        width: 2rem;
-        height: 2rem;
-        vertical-align: middle;
-        margin: 0;
-    }
-	label{
-		vertical-align: baseline;
-		cursor: pointer;
-		.others-input{
-			background: rgba(255, 255, 255, 0);
-			border-top: none;
-			border-right: none;
-			border-left: none;
-			border-radius: 0;
-			border-bottom: 2px solid;
-		}
-		.others-input:focus{
-			border: none;
-			border-bottom: 2px solid;
-		}
-		span{
-			vertical-align: top;
-		}
-		textarea{
-			width: 80%;
-			vertical-align: top;
-			margin-left: 1rem;
-
-		}
-	}
-    textarea {
-        min-height: 75%;
-		max-height: 250px;
-        width: 100%;
-        resize: vertical;
-        border: none;
-        border-radius: 10px;
-        padding: 10px;
-        box-sizing: border-box;
-    }
-
-    #submit {
-        background: green;
-		background: #39215b;
-
-        border: none;
-        border-radius: 10px;
-        color: white;
-        font-size: 3rem;
-        transition: all 0.3s ease-in;
-    }
-
-    #submit:hover {
-        background: darkgreen;
-		background: #543087;
-    }
 }
 </style>