修改generate流程，新增导出功能

public/index.html

@@ -16,6 +16,7 @@
 	<script src="/js/color-thief.js"></script>
 	<script src="/js/fabric.min.js"></script>
 	<script src="/js/fabric.brushes.js"></script>
+	<script src="/js/aligning_guidelines.js"></script>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>

public/js/aligning_guidelines.js

@@ -0,0 +1,230 @@
+/**
+ * Should objects be aligned by a bounding box?
+ * [Bug] Scaled objects sometimes can not be aligned by edges
+ *
+ */
+var ctx,canvasAligning
+function initAligningGuidelines(canvas,bor) {
+	ctx = canvas.getSelectionContext()
+	canvasAligning = canvas
+	setCanvasAligning(bor)
+}
+var aligningLineOffset = 5,
+	aligningLineMargin = 4,
+	aligningLineWidth = 1,
+	aligningLineColor = 'rgb(178, 204, 255)',
+	viewportTransform,
+	zoom = 1;
+
+function drawVerticalLine(coords) {
+	drawLine(
+		coords.x + 0.5,
+		coords.y1 > coords.y2 ? coords.y2 : coords.y1,
+		coords.x + 0.5,
+		coords.y2 > coords.y1 ? coords.y2 : coords.y1);
+}
+
+function drawHorizontalLine(coords) {
+	drawLine(
+		coords.x1 > coords.x2 ? coords.x2 : coords.x1,
+		coords.y + 0.5,
+		coords.x2 > coords.x1 ? coords.x2 : coords.x1,
+		coords.y + 0.5);
+}
+
+function drawLine(x1, y1, x2, y2) {
+	ctx.save();
+	ctx.lineWidth = aligningLineWidth;
+	ctx.strokeStyle = aligningLineColor;
+	ctx.beginPath();
+	ctx.moveTo(x1 * zoom + viewportTransform[4], y1 * zoom + viewportTransform[5]);
+	ctx.lineTo(x2 * zoom + viewportTransform[4], y2 * zoom + viewportTransform[5]);
+	ctx.stroke();
+	ctx.restore();
+}
+
+function isInRange(value1, value2) {
+	value1 = Math.round(value1);
+	value2 = Math.round(value2);
+	for (var i = value1 - aligningLineMargin, len = value1 + aligningLineMargin; i <= len; i++) {
+		if (i === value2) {
+			return true;
+		}
+	}
+	return false;
+}
+
+var verticalLines = [],
+	horizontalLines = [];
+	stateAligning = false
+let mouseDown = (e) => {
+	if(e.target){
+		stateAligning = true
+	}else{
+		stateAligning = false
+	}
+	viewportTransform = canvasAligning.viewportTransform;
+	zoom = canvasAligning.getZoom();
+}
+let objectMoving = (e) => {
+	var activeObject = e.target,
+		canvasAligningObjects = canvasAligning.getObjects(),
+		activeObjectCenter = activeObject.getCenterPoint(),
+		activeObjectLeft = activeObjectCenter.x,
+		activeObjectTop = activeObjectCenter.y,
+		activeObjectBoundingRect = activeObject.getBoundingRect(),
+		activeObjectHeight = activeObjectBoundingRect.height / viewportTransform[3],
+		activeObjectWidth = activeObjectBoundingRect.width / viewportTransform[0],
+		horizontalInTheRange = false,
+		verticalInTheRange = false,
+		transform = canvasAligning._currentTransform;
+
+	if (!transform) return;
+
+	// It should be trivial to DRY this up by encapsulating (repeating) creation of x1, x2, y1, and y2 into functions,
+	// but we're not doing it here for perf. reasons -- as this a function that's invoked on every mouse move
+
+	for (var i = canvasAligningObjects.length; i--;) {
+
+		if (canvasAligningObjects[i] === activeObject) continue;
+
+		var objectCenter = canvasAligningObjects[i].getCenterPoint(),
+			objectLeft = objectCenter.x,
+			objectTop = objectCenter.y,
+			objectBoundingRect = canvasAligningObjects[i].getBoundingRect(),
+			objectHeight = objectBoundingRect.height / viewportTransform[3],
+			objectWidth = objectBoundingRect.width / viewportTransform[0];
+
+		// snap by the horizontal center line
+		if (isInRange(objectLeft, activeObjectLeft)) {
+			verticalInTheRange = true;
+			verticalLines.push({
+				x: objectLeft,
+				y1: (objectTop < activeObjectTop)
+					? (objectTop - objectHeight / 2 - aligningLineOffset)
+					: (objectTop + objectHeight / 2 + aligningLineOffset),
+				y2: (activeObjectTop > objectTop)
+					? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset)
+					: (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset)
+			});
+			activeObject.setPositionByOrigin(new fabric.Point(objectLeft, activeObjectTop), 'center', 'center');
+		}
+
+		// snap by the left edge
+		if (isInRange(objectLeft - objectWidth / 2, activeObjectLeft - activeObjectWidth / 2)) {
+			verticalInTheRange = true;
+			verticalLines.push({
+				x: objectLeft - objectWidth / 2,
+				y1: (objectTop < activeObjectTop)
+					? (objectTop - objectHeight / 2 - aligningLineOffset)
+					: (objectTop + objectHeight / 2 + aligningLineOffset),
+				y2: (activeObjectTop > objectTop)
+					? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset)
+					: (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset)
+			});
+			activeObject.setPositionByOrigin(new fabric.Point(objectLeft - objectWidth / 2 + activeObjectWidth / 2, activeObjectTop), 'center', 'center');
+		}
+
+		// snap by the right edge
+		if (isInRange(objectLeft + objectWidth / 2, activeObjectLeft + activeObjectWidth / 2)) {
+			verticalInTheRange = true;
+			verticalLines.push({
+				x: objectLeft + objectWidth / 2,
+				y1: (objectTop < activeObjectTop)
+					? (objectTop - objectHeight / 2 - aligningLineOffset)
+					: (objectTop + objectHeight / 2 + aligningLineOffset),
+				y2: (activeObjectTop > objectTop)
+					? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset)
+					: (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset)
+			});
+			activeObject.setPositionByOrigin(new fabric.Point(objectLeft + objectWidth / 2 - activeObjectWidth / 2, activeObjectTop), 'center', 'center');
+		}
+
+		// snap by the vertical center line
+		if (isInRange(objectTop, activeObjectTop)) {
+			horizontalInTheRange = true;
+			horizontalLines.push({
+				y: objectTop,
+				x1: (objectLeft < activeObjectLeft)
+					? (objectLeft - objectWidth / 2 - aligningLineOffset)
+					: (objectLeft + objectWidth / 2 + aligningLineOffset),
+				x2: (activeObjectLeft > objectLeft)
+					? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset)
+					: (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset)
+			});
+			activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop), 'center', 'center');
+		}
+
+		// snap by the top edge
+		if (isInRange(objectTop - objectHeight / 2, activeObjectTop - activeObjectHeight / 2)) {
+			horizontalInTheRange = true;
+			horizontalLines.push({
+				y: objectTop - objectHeight / 2,
+				x1: (objectLeft < activeObjectLeft)
+					? (objectLeft - objectWidth / 2 - aligningLineOffset)
+					: (objectLeft + objectWidth / 2 + aligningLineOffset),
+				x2: (activeObjectLeft > objectLeft)
+					? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset)
+					: (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset)
+			});
+			activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop - objectHeight / 2 + activeObjectHeight / 2), 'center', 'center');
+		}
+
+		// snap by the bottom edge
+		if (isInRange(objectTop + objectHeight / 2, activeObjectTop + activeObjectHeight / 2)) {
+			horizontalInTheRange = true;
+			horizontalLines.push({
+				y: objectTop + objectHeight / 2,
+				x1: (objectLeft < activeObjectLeft)
+					? (objectLeft - objectWidth / 2 - aligningLineOffset)
+					: (objectLeft + objectWidth / 2 + aligningLineOffset),
+				x2: (activeObjectLeft > objectLeft)
+					? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset)
+					: (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset)
+			});
+			activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop + objectHeight / 2 - activeObjectHeight / 2), 'center', 'center');
+		}
+	}
+
+	if (!horizontalInTheRange) {
+		horizontalLines.length = 0;
+	}
+
+	if (!verticalInTheRange) {
+		verticalLines.length = 0;
+	}
+}
+let beforeRender = ()=>{
+	if(stateAligning){
+		canvasAligning.clearContext(canvasAligning.contextTop);
+	}
+}
+let afterRender = ()=>{
+	for (var i = verticalLines.length; i--;) {
+		drawVerticalLine(verticalLines[i]);
+	}
+	for (var i = horizontalLines.length; i--;) {
+		drawHorizontalLine(horizontalLines[i]);
+	}
+
+	verticalLines.length = horizontalLines.length = 0;
+}
+let mouseUp = ()=>{
+	verticalLines.length = horizontalLines.length = 0;
+	canvasAligning.renderAll();
+}
+let setCanvasAligning = (bor)=>{
+	if(bor){
+		canvasAligning.on('mouse:down', mouseDown);
+		canvasAligning.on('object:moving', objectMoving);
+		canvasAligning.on('before:render', beforeRender);
+		canvasAligning.on('after:render', afterRender);
+		canvasAligning.on('mouse:up', mouseUp);
+	}else{
+		canvasAligning.off('mouse:down', mouseDown);
+		canvasAligning.off('object:moving', objectMoving);
+		canvasAligning.off('before:render', beforeRender);
+		canvasAligning.off('after:render', afterRender);
+		canvasAligning.off('mouse:up', mouseUp);
+	}
+}

src/assets/style/style.css

@@ -1139,21 +1139,27 @@ i {
   width: 100%;
   height: 100%;
 }
-.collection_modal_body .input_box,
+.collection_modal_body .input_border,
-.design_detail_modal_component .input_box,
+.design_detail_modal_component .input_border,
-.library_page .input_box {
+.library_page .input_border {
   display: flex;
   align-items: center;
   position: sticky;
-  top: 0;
-  background: #fff;
   padding-top: calc(2.5rem*1.2);
   padding-bottom: calc(2rem*1.2);
-  z-index: 2;
+  background: #fff;
+  top: 0;
 }
-.collection_modal_body .input_box input,
+.collection_modal_body .input_border .input_box,
-.design_detail_modal_component .input_box input,
+.design_detail_modal_component .input_border .input_box,
-.library_page .input_box input {
+.library_page .input_border .input_box {
+  position: relative;
+  z-index: 2;
+  flex: 1;
+}
+.collection_modal_body .input_border input,
+.design_detail_modal_component .input_border input,
+.library_page .input_border input {
   border-radius: calc(0.5rem*1.2);
   width: 70%;
   border: 1px solid rgba(0, 0, 0, 0.15);
@@ -1162,47 +1168,48 @@ i {
   font-size: calc(1.6rem*1.2);
   font-weight: 400;
 }
-.collection_modal_body .input_box inputinput:-moz-placeholder,
+.collection_modal_body .input_border inputinput:-moz-placeholder,
-.design_detail_modal_component .input_box inputinput:-moz-placeholder,
+.design_detail_modal_component .input_border inputinput:-moz-placeholder,
-.library_page .input_box inputinput:-moz-placeholder {
+.library_page .input_border inputinput:-moz-placeholder {
   color: rgba(0, 0, 0, 0.15);
 }
-.collection_modal_body .input_box inputinput:-ms-input-placeholder,
+.collection_modal_body .input_border inputinput:-ms-input-placeholder,
-.design_detail_modal_component .input_box inputinput:-ms-input-placeholder,
+.design_detail_modal_component .input_border inputinput:-ms-input-placeholder,
-.library_page .input_box inputinput:-ms-input-placeholder {
+.library_page .input_border inputinput:-ms-input-placeholder {
   color: rgba(0, 0, 0, 0.15);
 }
-.collection_modal_body .input_box inputinput::-webkit-input-placeholder,
+.collection_modal_body .input_border inputinput::-webkit-input-placeholder,
-.design_detail_modal_component .input_box inputinput::-webkit-input-placeholder,
+.design_detail_modal_component .input_border inputinput::-webkit-input-placeholder,
-.library_page .input_box inputinput::-webkit-input-placeholder {
+.library_page .input_border inputinput::-webkit-input-placeholder {
   color: rgba(0, 0, 0, 0.15);
 }
-.collection_modal_body .input_box span,
+.collection_modal_body .input_border span,
-.design_detail_modal_component .input_box span,
+.design_detail_modal_component .input_border span,
-.library_page .input_box span {
+.library_page .input_border span {
   position: absolute;
-  bottom: calc(0rem*1.2);
+  bottom: -1.5rem;
+  left: 0;
   font-size: calc(1.2rem*1.2);
   color: red;
   opacity: 0;
   transform: scale(0.7);
   transform-origin: left bottom;
 }
-.collection_modal_body .input_box.active input,
+.collection_modal_body .input_border.active input,
-.design_detail_modal_component .input_box.active input,
+.design_detail_modal_component .input_border.active input,
-.library_page .input_box.active input {
+.library_page .input_border.active input {
   border: 1px solid #ff0001;
   box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
 }
-.collection_modal_body .input_box.active span,
+.collection_modal_body .input_border.active span,
-.design_detail_modal_component .input_box.active span,
+.design_detail_modal_component .input_border.active span,
-.library_page .input_box.active span {
+.library_page .input_border.active span {
   opacity: 1;
 }
-.collection_modal_body .input_box .generage_btn,
+.collection_modal_body .input_border .generage_btn,
-.design_detail_modal_component .input_box .generage_btn,
+.design_detail_modal_component .input_border .generage_btn,
-.library_page .input_box .generage_btn {
+.library_page .input_border .generage_btn {
-  margin: 0 auto;
+  margin-left: 2rem;
 }
 .collection_modal_body .upload_item,
 .design_detail_modal_component .upload_item,

src/assets/style/style.less

@@ -1247,15 +1247,19 @@ i{
 
 //设计input和上传按钮样式
 .collection_modal_body,.design_detail_modal_component,.library_page{
-	.input_box{
+	.input_border{
 		display: flex;
 		align-items: center;
 		position: sticky;
-		top: 0;
-		background: #fff;
 		padding-top: calc(2.5rem*1.2);
 		padding-bottom: calc(2rem*1.2);
-		z-index: 2;
+		background: #fff;
+		top: 0;
+		.input_box{
+			position: relative;
+			z-index: 2;
+			flex: 1;
+		}
 		input{
 			border-radius: calc(.5rem*1.2);
 			width: 70%;
@@ -1278,7 +1282,9 @@ i{
 		}
 		span{
 			position: absolute;
-			bottom: calc(0rem*1.2);
+			// bottom: calc(0rem*1.2);
+			bottom: -1.5rem;
+			left: 0;
 			font-size: calc(1.2rem*1.2);
 			color: red;
 			opacity: 0;
@@ -1296,7 +1302,8 @@ i{
 			}
 		}
 		.generage_btn{
-			margin: 0 auto;
+			// margin: 0 auto;
+			margin-left: 2rem;
 		}
 
 		

src/component/HomePage/ExportModel.vue

@@ -49,6 +49,7 @@
                     >	
 
                         <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>
                         <div v-if="item[0] && key == 'colorBoards'" class="exportCanvasBox_intro">Color</div>
                         <div v-if="item[0] && key == 'sketchboardFiles'" class="exportCanvasBox_intro">Sketch</div>
@@ -130,7 +131,7 @@
 								</a-select-option>
 							</a-select>
 						</label>
-						<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'texture'">
+						<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'">
 							<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>
@@ -146,6 +147,14 @@
 								<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
 							</div>
 						</label>
+						<label v-show="allSelectWidth > -1">
+							<div >{{ $t('exportModel.Width') }}</div>
+							<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
+						</label>
+						<!-- <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')">
@@ -169,9 +178,10 @@
 						<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">
-							<i class="icon iconfont icon-shangchuantupian" :class="{active:operation == 'ellipse'}"></i>
+							<i class="icon iconfont icon-shangchuantupian" ></i>
 							<input type="file" @change="uploadImage">
 						</label>
+						<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
 					</div>
 					
 				</div>
@@ -180,7 +190,7 @@
 						<div><span class="icon iconfont icon-zhuyi"></span>{{ $t('exportModel.insufficient') }}</div>
 					</div>
 					<div class="exportCanvasBox_left_btn">
-						<div class="subitOkPreviewBtn" :class="{active:credits<1}" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div>
+						<div class="subitOkPreviewBtn" :class="{active:allBoardData.printboardFiles.length<=0}" :title="allBoardData.printboardFiles.length<=0?$t('exportModel.jsContent2'):''" @click="setHDExport">{{ $t('exportModel.HDExport') }}</div>
 						<div class="subitOkPreviewBtn Guide_1_32" @click="setExport">{{ $t('exportModel.Export') }}</div>
 					</div>
 				</div>
@@ -223,7 +233,7 @@
 			</div>
 			<div class="modal_title_text">
 				<div class="modal_title_text_max">{{ $t('exportModel.SR') }}</div>
-				<div class="modal_title_text_intro">{{ $t('exportModel.requiresCredits') }}</div>
+				<div class="modal_title_text_intro">{{ $t('exportModel.requiresCredits',{data:(allExportSR.filter(item=> item.checked ).length*5)}) }}</div>
 			</div>
 			<div class="SRExport_operate">
 				<div class="SRExport_operate_box">
@@ -238,7 +248,7 @@
 					</a-select> -->
 					<div class="SRExport_operate_item_sclae" :class="{active:scaleSR==2}" @click="setScaleSR(2)">2</div>
 					<div class="SRExport_operate_item_sclae" :class="{active:scaleSR==4}" @click="setScaleSR(4)">4</div>
-					<div class="SRExport_operate_item_sclae" :class="{active:scaleSR==8}" @click="setScaleSR(8)">8</div>
+					<!-- <div class="SRExport_operate_item_sclae" :class="{active:scaleSR==8}" @click="setScaleSR(8)">8</div> -->
 				</div>
 				<div :class="['check_all_block',allChecked ? 'check_all' : '']" @click="selectAllImg()">
 					<div class="check_block"><div class="check_block_body"></div></div>
@@ -254,7 +264,7 @@
 			</div>
 			<div class="generalModelOperate_endBtn">
 				<div class="generalModelOperate_btn_cancel" @click="cancelSRExport">{{ $t('exportModel.Cancel') }}</div>
-				<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*30)?'active':'']" @click="setExportSR">OK</div>
+				<div class="generalModelOperate_btn_ok" :class="[credits < (allExportSR.filter(item=> item.checked ).length*5)?'active':'']" @click="setExportSR">OK</div>
 			</div>
 		</a-modal>
     </a-modal>
@@ -349,20 +359,17 @@ export default defineComponent({
                     isDrawingMode: false, // 开启绘图模式
                 });
 				brushIndicator = clearBrushIndicator()
-
-				JSchangeType(canvas,'init')
 				canvasOnDrop()//开启鼠标到画布事件
 				setRemoveImage()//设置元素删除
 				canvas.on("object:modified", ()=>{
 					updateCanvasState()
 				});
 				canvas.preserveObjectStacking = true;
-				console.log(canvas.wrapperEl);
 				//鼠标移动
 				// canvas.wrapperEl.onmouseover = setCanvasKeyDown;//document上添加按下和抬起事件
 				// canvas.wrapperEl.onmouseout  = clearCanvasKeyDown;//document上添加按下和抬起事件
-				canvas.on("mouse:over", event =>setCanvasKeyDown());//document上添加按下和抬起事件
+				canvas.on("mouse:over", event =>setCanvasKeyDown(event));//document上添加按下和抬起事件
-				canvas.on("mouse:out", event =>clearCanvasKeyDown(e));//document上添加按下和抬起事件
+				canvas.on("mouse:out", event =>clearCanvasKeyDown(event));//document上添加按下和抬起事件
 
 				canvas.on("mouse:move", event =>setCanvasMove(event));
 				canvas.on("mouse:out", event=>setCanvasOut(event));
@@ -376,6 +383,8 @@ export default defineComponent({
 				// 	obj.target.cornerSize = 10
 				// 	obj.target.transparentCorners = false
 				// });
+				initAligningGuidelines(canvas,true)
+				JSchangeType(canvas,'init')
 				fabric.Object.prototype.cornerSize = 10
 				fabric.Object.prototype.transparentCorners = false 
 				// setCanvasOperation()//设置监听添加修改画布元素，用来做撤回功能
@@ -502,6 +511,7 @@ export default defineComponent({
 				if(driver__.value.driver){
 					driverObj__.moveNext()
 				}
+				
             });
 			
         };
@@ -888,14 +898,15 @@ export default defineComponent({
 		}
 		//撤回
 		let historyState = (str)=> {
-			if(str == 'reverse' && reverseCanvasState.value.length > 0){
+			if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
-				canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
 				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()
-				reverseCanvasState.value.push(obj);
 				canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
+				reverseCanvasState.value.push(obj);
 				isLoadCanvas = true;
 			}else{
 				return
@@ -923,8 +934,6 @@ export default defineComponent({
 		// 监听键盘的 keydown 和 keyup 事件
 		let keyDown = []
 		let canvasKeyDown = (event) => {
-			console.log(123);
-			console.log(event);
 			if(keyDown.indexOf(event.key)>-1){
 			}else{
 				keyDown.push(event.code)
@@ -949,28 +958,34 @@ export default defineComponent({
 				})
 			}
 		let setCanvasKeyDown = (event)=>{
-			let e = event || window.event
+			// let e = event || window.event
-			e.stopPropagation();
+			// e.stopPropagation();
-			document.addEventListener('keydown',canvasKeyDown,true);
+			document.addEventListener('keydown',canvasKeyDown);
-			document.addEventListener('keyup', canvasKeyUp,true);
+			document.addEventListener('keyup', canvasKeyUp);
 		}
 		let clearCanvasKeyDown = (pointer)=>{
-			console.log(123222);
+			// var pointer = canvas.getPointer(pointer);
-			var pointer = canvas.getPointer(options.e);
+			if(!pointer?.target){
-  var x = pointer.x;
+				document.removeEventListener('keydown',canvasKeyDown);
-  var y = pointer.y;
+				document.removeEventListener('keyup', canvasKeyUp);
+			}
+			// var x = pointer.x;
+			// var y = pointer.y;
 
   // 检查是否鼠标离开了画布
-  if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
+//   if (x < 0 || x > canvas.width || y < 0 || y > canvas.height) {
-    // 执行你的操作
+//     // 执行你的操作
-    console.log('鼠标离开了画布');
+//     console.log('鼠标离开了画布');
-  }
+//   }
-			
+			// if(!x || !y){
-			document.removeEventListener('keydown',canvasKeyDown,true);
+			// 	document.removeEventListener('keydown',canvasKeyDown);
-			document.removeEventListener('keyup', canvasKeyUp,true);
+			// 	document.removeEventListener('keyup', canvasKeyUp);
+			// }	
 		}
-		let canvasPencilColor = ref('#000000')
+		let canvasPencilColor = ref('#000000')//画笔颜色
-		let canvasPencilWidth = ref(20)
+		let canvasPencilWidth = ref(20)//画笔大小
+		let allSelectWidth = ref(-1)//多选或单选的宽度
+		let allSelect = ref([])//多选或单选的宽度
 		let setOperation = (str)=>{
 			operation.value = str
 			//折线图的时候切换其他形状或者笔触需要把未完成的折线图删掉
@@ -978,23 +993,41 @@ export default defineComponent({
 			if(createPatterningIs){
 				canvas.remove(currentPatterning)
 			}
+			removeSetText()
+			initAligningGuidelines(canvas,false)
 			canvas.remove(polyLineBtn)
-
 			if(str == 'pencil'){
 				setPencil()
 			}else if(str == 'move'){
 				setMove()
-				canvas.forEachObject((obj) =>obj.selectable = true);
 				JSchangeType(canvas,'init')
+				initAligningGuidelines(canvas,true)
+
 			}else if(str == 'texture'){
 				setTexture()
 			}else if(str == 'eraser'){
 				setEraser()
+			}else if(str == 'text'){
+				setText()
+				JSchangeType(canvas,'init')
 			}else{
 				canvas.forEachObject((obj) =>obj.selectable = false);
 				canvas.isDrawingMode = false
 			}
 		}
+		let _setAllSelectTime = null
+		let setAllSelectWidth = ()=>{
+			clearTimeout(_setAllSelectTime)
+			allSelect.value.forEach((item)=>{
+				// item.width = allSelectWidth.value
+				item.scaleX = allSelectWidth.value/item.width
+				item.scaleY = item.scaleX
+				item.setCoords()
+			})
+			_setAllSelectTime = setTimeout(() => {
+				updateCanvasState('')//加载完成后记录一下
+			}, 1500);
+		}
 		let _clipboard  = null // 复制到的内容
 		let copy = () => {//复制
 			var activeObject = canvas.getActiveObject();
@@ -1091,7 +1124,7 @@ export default defineComponent({
 				radius:canvasPencilWidth.value/2,
 				fill: '#fff',
 				stroke: '#000',
-				strokeWidth: 0,
+				strokeWidth: 1,
 				originX: 'center',
 				originY: 'center',
 				visible :true,
@@ -1192,6 +1225,50 @@ export default defineComponent({
 			canvas.freeDrawingBrush.isEraser = true
 			canvas.freeDrawingBrush.width = canvasPencilWidth.value;
 		}
+		let setTextFun = (e)=>{
+			if(operation.value != 'text'){
+				return
+			}
+			
+			var clickedObject = e.target;
+			if (clickedObject instanceof fabric.Textbox) {
+			}else{
+				var pointer = canvas.getPointer(e.pointer);
+				var x = pointer.x;
+				var y = pointer.y;
+				let textbox = new fabric.Textbox('#', {
+					left: x,
+					top: y,
+					width: 150,
+					fontSize: canvasPencilWidth.value,
+					fill:canvasPencilColor.value,
+
+				})
+				canvas.add(textbox)
+				canvas.renderAll();
+				textbox.enterEditing();
+			}
+			
+		}
+		let setText = ()=>{
+			canvas.on('mouse:dblclick',setTextFun)
+		}
+		let removeSetText = ()=>{
+			canvas.off('mouse:dblclick',setTextFun)
+		}
+		// let setTextStyle = (x,y)=>{
+		// 	var group = new fabric.Group([rect.color, rect.text, rect.text1],{
+		// 		left,
+		// 		top,
+		// 		width: rect.width,
+		// 		fill: "rgb(255,255,255)",
+		// 		stroke: "#212121",
+		// 		strokeWidth: 1,
+		// 	});
+		// 	canvas.add(group);
+		// }
+		
+		
 		let setTimeOut = {
 			color:null,
 			width:null,
@@ -1263,7 +1340,6 @@ export default defineComponent({
 		}
 		let setCanvasOut = (event)=>{
 			canvas.remove(brushIndicator)//鼠标移出删除绘画范围的圆形
-			clearCanvasKeyDown()//鼠标移出关闭键盘事件
 		}
 		//设置再画布上按下
 		let setCanvasDown = (event)=>{
@@ -1325,7 +1401,16 @@ export default defineComponent({
 			}else{
 				// event.target && (event.target.bringToFront())//设置优先级
 			}
+			var selectedObjects = canvas.getActiveObjects();//获取多选选中的内容
+			if (selectedObjects.length >= 1) {
+				allSelect.value = selectedObjects
+				// allSelectWidth.value = 0
+				allSelectWidth.value = selectedObjects[0].width * selectedObjects[0].scaleX
+			}else{
+				allSelectWidth.value = -1
+			}
 			if(createPatterningIs){
+				
 				switch (operation.value) {
 					case 'line':
 						currentPatterning.set({stroke: canvasPencilColor.value})
@@ -1354,12 +1439,12 @@ export default defineComponent({
 			}
 		}
 		let setHDExport = async ()=>{//获取选中内容的位置信息
-			if(allBoardData.value.printboardFiles.length <= 0){
+			// if(allBoardData.value.printboardFiles.length <= 0){
-				message.info('Your print is empty')
+			// 	message.info('Your print is empty')
-				return
+			// 	return
-			}
+			// }
 			if(credits.value < 30){
-				message.info('Your points are less than one SR')
+				message.info( useI18.t('exportModel.jsContent3'))
 				// return
 			}
 			showSRExport.value = true
@@ -1456,18 +1541,18 @@ export default defineComponent({
 		let setExportSR = ()=>{
 			let arr = []
 			let data = []
-			if(allExportSR.value.filter(item=> item.checked ).length <= 0){
+			// if(allExportSR.value.filter(item=> item.checked ).length <= 0){
-				message.info('Your print is empty')
+			// 	message.info('Your print is empty')
-				return
+			// 	return
-			}
+			// }
 			if(credits < (allExportSR.value.filter(item=> item.checked ).length*30)){
-				message.info('Your points balance is insufficient')
+				message.info(useI18.t('exportModel.jsContent4'))
 				return
 			}
-			allExportSR.value.forEach(async (item,index)=>{
+			let allPromise = allExportSR.value.map(async (item,index)=>{
-				let obj = {}
+				if(item.checked){
-				await new Promise((resolve,reject)=>{
+					return await new Promise((resolve,reject)=>{
-					if(item.checked){
+						let obj = {}
 						obj = {
 							images:item.imgUrl,
 							scale: scaleSR.value,
@@ -1479,20 +1564,36 @@ export default defineComponent({
 							if(img.width*scaleSR.value>4069 || img.height*scaleSR.value>4069){
 								arr.push(index)
 							}
+							resolve(img)
 						}
 						img.src = item.imgUrl
-					}
+					})
-				})
+				}else{
+					return
+				}
 			})
-			if(arr.length > 0){
+			Promise.all(allPromise)
-				let str = arr.join(',')
+			.then(promiseArr => {
-				message.info(`You selected the ${str} image and zoom ratio more than 4090,`)
+				if(arr.length > 0){
-				return
+					let str = arr.join(',')
-			}
+					message.info(useI18.t('exportModel.jsContent5',{str:str}))
-			Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
+					return
-				emit('setTask',rv)
+				}
-				cancelSRExport()
+				let aa = promiseArr.filter(item=> item == undefined)
+				if(aa.length == promiseArr.length){
+					message.info(useI18.t('exportModel.jsContent6'))
+
+				}else{
+					Https.axiosPost(Https.httpUrls.prepareForSR, data).then((rv) => {
+						emit('setTask',rv)
+						cancelSRExport()
+					});
+				}
+				
+			})
+			.catch(error => {
 			});
+			
 		}
         onMounted(() => {});
         return {
@@ -1521,6 +1622,8 @@ export default defineComponent({
 			textureList,//材质列表
 			canvasPencilColor,//input选择颜色
 			canvasPencilWidth,//input选择宽度
+			setAllSelectWidth,//多选设置宽度
+			allSelectWidth,//多选设置宽度的值
 			setPencilColor,//切换颜色执行函数 给当前矩形或者笔触设置颜色
 			setPencilWidth,//切换宽度执行函数 给当前矩形或者笔触设置宽度
 			setHDExport,//高清导出选择的图片
@@ -1827,10 +1930,11 @@ export default defineComponent({
 			margin-bottom: 2rem;
 			input{
 				position: absolute;
-				top: 0rem;
+				top: .5rem;
-				right: 0rem;
+				right: .5rem;
 				z-index: 2;
-				height: 3rem;
+				height: 2rem;
+				width: 2rem;
 			}
 		}
 		img{

src/component/HomePage/Generate.vue

@@ -43,17 +43,20 @@
 				</ul>
 			</div>
         </div>
-        <div v-else class="input_box Guide_1_5" :class="[inputShow?'active':'',]">
+        <div v-else class="input_border" :class="[inputShow?'active':'',]">
-            <input
+			<div class="input_box  Guide_1_5">
-                class="search_input"
+				<input
-				@input="ifMaximumLength"
+					class="search_input"
-                :placeholder="$t('Generate.inputContent1')"
+					@input="ifMaximumLength"
-				:maxlength='inputShow?0:9999'
+					:placeholder="$t('Generate.inputContent1')"
-                v-model="searchPictureName"
+					:maxlength='inputShow?0:9999'
-                @keydown.enter="getgenerate()"
+					v-model="searchPictureName"
-            />
+					@keydown.enter="getgenerate()"
-            <div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('Generate.Generate') }}</div>
+				/>
-			<span>{{ $t('Generate.maximumLength') }}</span>
+				<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('Generate.Generate') }}</div>
+				<span>{{ $t('Generate.maximumLength') }}</span>
+			</div>
+            
         </div>
         <div v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" class="generage_img Guide_1_6">
             <div class="upload_item">
@@ -449,11 +452,11 @@ export default defineComponent({
 				this.checkbox[num].type = true
 				this.$emit('generateCheckbox',this.checkbox[0].type)
 				this.checkboxImage = this.checkbox[1].type
-				if(this.checkboxImage){
+				// if(this.checkboxImage){
-					this.sketchboardList.forEach((v:any)=>{
+				// 	this.sketchboardList.forEach((v:any)=>{
-						v.checked = false
+				// 		v.checked = false
-					})
+				// 	})
-				}
+				// }
 			})
 			if(num == 1){
 				this.level2Type = ''//点击文字生成就把衣服类型清空
@@ -750,10 +753,20 @@ export default defineComponent({
 			if(this.checkboxImage){
 				return
 			}
+			let parent:any = this.$parent
+			
 			if(item.checked){
 				item.checked = false
 				this.collectionElementid = ''
 			}else{
+				let obj = {
+					imgId : item.id,
+					imgUr: item.imgUrl,
+					level2Type:item.category,
+					designType:'collection'
+				}
+				// parent.useGenerate.designType = 'collection'
+				this.$emit('setGenerate',obj)
 				this.sketchboardList.forEach((v:any)=>{
 					if(v.checked){
 						v.checked = false
@@ -833,6 +846,7 @@ export default defineComponent({
 	flex: 1;
     // height: 30rem;
     // overflow-x: hidden;
+	overflow-x: hidden;
 	display: flex;
     flex-direction: column;
     border-right: 1px solid #e5e5e5;

src/component/HomePage/Material.vue

@@ -91,6 +91,7 @@ export default defineComponent({
     props: ["msg",'disignTypeList'],
     setup(prop) {
         let myMaterialModalShow = ref(false)
+        let store:any =useStore()
         let imgList:any = ref([])
         let isShowLoading:any = ref(false)
         let selectCode:any = ref('')
@@ -108,6 +109,8 @@ export default defineComponent({
 		let workspace:any = ref({})
 
 		let {t} = useI18n()
+		let usGenerateList = ref([])
+	
         return{
             myMaterialModalShow,
             imgList,
@@ -124,6 +127,7 @@ export default defineComponent({
 			workspace,
 			t,
 			driver__,
+			usGenerateList,
         }
     },
 	data (prop) {
@@ -259,24 +263,58 @@ export default defineComponent({
 			this.getLibraryList('')
 			
         },
-        selectImgItem(imgData:any){
+		setUseGenerate(arr:any){
-			imgData.type_ = this.type_
+			let parent:any = this.$parent
-			imgData.resData = JSON.parse(JSON.stringify(imgData))
+			this.imgList.forEach((item:any) => {
-			this.imgList.forEach((v:any)=>{
+				item.checked = false
-				v.categoryShow = false
+			});
-			})
+			if(parent.isUseGenerate){
-			let maxImg = 8
+			}else{
-			if(this.selectCode == 'Sketchboard'){
+				arr.forEach((item:any) => {
-				maxImg = 20
+					this.imgList.forEach((imgListItem:any) => {
+						if(item.id == imgListItem.id){
+							imgListItem.checked = true
+						}
+					});
+				});
 			}
-			imgData.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:maxImg})
+			
-			this.store.commit("addGenerateMaterialFils", imgData);
+		},
-			let arr =  this.store.state.UploadFilesModule.moodboardMaterialFiles
+        selectImgItem(imgData:any){
-			if(arr.length >=2 && this.selectCode == 'Moodboard'){
+			console.log(imgData);
-				if(this.driver__.driver){
+			
-					driverObj__.moveNext()
+			let parent:any = this.$parent
+			if(parent.isUseGenerate){
+				this.setUseGenerate([])
+				imgData.checked = true
+				let obj = {
+					imgId : imgData.id,
+					imgUr: imgData.imgUrl,
+					level2Type:imgData.level2Type,
+					designType:'library'
+				}
+				// parent.useGenerate.designType = 'collection'
+				this.$emit('setLibrary',obj)
+			}else{
+				imgData.type_ = this.type_
+				imgData.resData = JSON.parse(JSON.stringify(imgData))
+				this.imgList.forEach((v:any)=>{
+					v.categoryShow = false
+				})
+				let maxImg = 8
+				if(this.selectCode == 'Sketchboard'){
+					maxImg = 20
+				}
+				imgData.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:maxImg})
+				this.store.commit("addGenerateMaterialFils", imgData);
+				let arr =  this.store.state.UploadFilesModule.moodboardMaterialFiles
+				if(arr.length >=2 && this.selectCode == 'Moodboard'){
+					if(this.driver__.driver){
+						driverObj__.moveNext()
+					}
 				}
 			}
+			
         },
         //选择所有的图片
         async getLibraryList(str:any){

src/component/HomePage/PrintboardUpload.vue

@@ -84,8 +84,8 @@
 					<span>{{ $t('PrintboardUpload.Maximum') }}</span>
 				</div>
             </div>
-			<Material v-show="openClick == 2" ref="Material" msg="Printboard" @confirmSelect="confirmSelect"></Material>
+			<Material v-show="openClick == 2" ref="Material" msg="Printboard" @setLibrary = setSetchboardGenerate @confirmSelect="confirmSelect"></Material>
-			<Generate v-show="openClick == 3" ref="Generate" msg="Printboard" @generateCheckbox="getgenerateCheckbox"></Generate>
+			<Generate v-show="openClick == 3" ref="Generate" msg="Printboard" @setGenerate = setSetchboardGenerate @generateCheckbox="getgenerateCheckbox"></Generate>
         </div>
 		<div class="modal_right">
 			<div class="modal_layout">
@@ -102,11 +102,17 @@
 					</div>
 				</div>
 			</div>
-			<div v-show="openClick == 3" class="modal_accomplish">
+			<div v-show="openClick == 3 || openClick == 2" class="modal_accomplish">
-				<div class="input_box Guide_1_2_8" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
+				<div class="input_border">
-					<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
+					<div class="Guide_1_2_8 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
-					<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div>
+						<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
-					<span>{{ $t('PrintboardUpload.maximumLength') }}</span>
+						<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div>
+						<span>{{ $t('PrintboardUpload.maximumLength') }}</span>
+					</div>
+					<div>
+						<div v-show="!isUseGenerate" @click="setUseGenerate">Printboard</div>
+						<div v-show="isUseGenerate" @click="setUseGenerate">Generate</div>
+					</div>
 				</div>
 				<div class="modal_img">
 					<div v-for="item,index in generateList" class="modal_imgItem Guide_1_2_9" :class="[item?.checked?'active':'',driver__.driver?'showEvents':'']" >
@@ -191,6 +197,14 @@ export default defineComponent({
 		let generateLineUp:any = ref(-1)
 		let remGenerate:any = ref(false)
 		let remGenerateTime:any = ref()
+		let isUseGenerate = ref(false)
+		let useGenerate:any = ref({
+			imgId : '',
+			imgUrl:1,
+			checked:false,
+			level2Type:'',
+			designType:''
+		})
         return {
             fileList,
             printImgList,
@@ -211,6 +225,8 @@ export default defineComponent({
 			generateLineUp,
 			remGenerate,
 			remGenerateTime,
+			useGenerate,
+			isUseGenerate,
         }
     },
     computed:{
@@ -276,6 +292,42 @@ export default defineComponent({
 		}
     },
      methods:{
+		//设置library里面选择generate图片
+		setUseGenerate(){
+			this.isUseGenerate = !this.isUseGenerate
+			let printMaterialFiles:any = computed(()=>{
+				return this.store.state.UploadFilesModule.printMaterialFiles
+			})
+			let Material:any = this.$refs.Material
+			Material.setUseGenerate(printMaterialFiles.value)
+			if(this.isUseGenerate){
+				let generate:any = this.$refs.Generate
+				generate.checkbox.forEach((item:any)=>{
+					if(item.name == "text-image"){
+						item.type = true
+					}else{
+						item.type = false
+					}
+				})
+				this.generateCheckbox = false
+			}
+		},
+		setSetchboardGenerate(item:any){
+			this.useGenerate.imgId = item.imgId
+			this.useGenerate.imgUrl = item.imgUrl
+			this.useGenerate.level2Type = item.level2Type
+			this.useGenerate.designType = item.designType
+			let Material:any = this.$refs.Material
+			let generate:any = this.$refs.Generate
+
+			if(item.designType == 'collection'){
+				Material.setUseGenerate([])
+			}else {
+				generate.sketchboardList.forEach((item:any) => {
+					item.checked = false
+				});
+			}
+		},
 		//取消请求测试
 		canelAxios(){
 			// Https.axiosCanel()
@@ -525,6 +577,14 @@ export default defineComponent({
         },
 
         recollection(){
+			this.isUseGenerate = false
+			this.useGenerate = {
+				imgId : '',
+				imgUrl:1,
+				checked:false,
+				level2Type:'',
+				designType:'',
+			}
             let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
 			let setboard = {
 				generate:[] as any,
@@ -604,9 +664,10 @@ export default defineComponent({
 			
 			let data = {
 				generateType:generateType,
-				designType:'',
+				designType:this.useGenerate.designType,
-				collectionElementId:generage?.collectionElementid,
+				collectionElementId:this.useGenerate.imgId,
-				level1Type:generage.upload.level1Type,
+				// collectionElementId:generage?.collectionElementid,
+				level1Type:this.upload.level1Type,
 				level2Type:'',
 				text:`${generage.printModel.value},${this.captionGeneration}`,
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
@@ -645,7 +706,7 @@ export default defineComponent({
 					return
 				}
 			}else if(generateType == 'text-image'){
-				if(generage?.collectionElementid){
+				if(this.useGenerate.imgId){
 					if(this.captionGeneration){
 						let arr = this.captionGeneration.split(/\s+/).length
 						if(arr > 75){
@@ -835,16 +896,27 @@ export default defineComponent({
 			scaleImage.init(this.generateList,index)
 		},
 		generageAdd(item:any){
-			item.type_ = {
+			// if(this.isUseGenerate){
-                type1: "generate",
+			// 	let data = {
-                type2: 'Printboard',
+			// 		imgId:item.id,
-            },
+			// 		imgUrl:item.imgUrl,
-			item.resData = JSON.parse(JSON.stringify(item))
+			// 		designType:'generate',
-			item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
+			// 		level2Type:'',
-            this.store.commit("addGenerateMaterialFils", item);
+			// 	}
-			if(this.driver__.driver){
+			// 	this.setSetchboardGenerate(data)
-				driverObj__.moveNext()
+			// }else{
-			}
+				item.type_ = {
+					type1: "generate",
+					type2: 'Printboard',
+				},
+				item.resData = JSON.parse(JSON.stringify(item))
+				item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
+				this.store.commit("addGenerateMaterialFils", item);
+				if(this.driver__.driver){
+					driverObj__.moveNext()
+				}
+			// }
+			
 		}
      }
 

src/component/HomePage/SketchboardUpload.vue

@@ -151,6 +151,7 @@
                 msg="Sketchboard"
                 @confirmSelect="confirmSelect"
 				:disignTypeList="sketchCatecoryList"
+				@setLibrary = setSetchboardGenerate
             ></Material>
             <Generate
                 v-show="openClick == 3"
@@ -158,6 +159,7 @@
                 msg="Sketchboard"
 				:sketchCatecoryList="sketchCatecoryList"
                 @generateCheckbox="getgenerateCheckbox"
+				@setGenerate = setSetchboardGenerate
             ></Generate>
         </div>
 		<div class="modal_right">
@@ -178,11 +180,17 @@
 					
 				</div>
 			</div>
-			<div v-show="openClick == 3" class="modal_accomplish">
+			<div v-show="openClick == 3 || openClick == 2" class="modal_accomplish">
-				<div class="input_box Guide_1_9_2" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
+				<div class="input_border">
-					<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate()" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('SketchboardUpload.inputContent1')" v-model="captionGeneration">
+					<div class="Guide_1_9_2 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
-					<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('SketchboardUpload.Generate') }}</div>
+						<input class="search_input" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" :placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
-					<span>{{ $t('SketchboardUpload.maximumLength') }}</span>
+						<div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div>
+						<span>{{ $t('PrintboardUpload.maximumLength') }}</span>
+					</div>
+					<div>
+						<div v-show="!isUseGenerate" @click="setUseGenerate">Printboard</div>
+						<div v-show="isUseGenerate" @click="setUseGenerate">Generate</div>
+					</div>
 				</div>
 				<div class="modal_img">
 					<div v-for="item,index in generateList" class="modal_imgItem Guide_1_13_2" :class="[driver__.driver?'showEvents':'',item?.checked?'active':'']">
@@ -311,6 +319,14 @@ export default defineComponent({
 		let generateLineUp:any = ref(-1)
 		let remGenerate:any = ref(false)
 		let remGenerateTime:any = ref()
+		let isUseGenerate = ref(false)
+		let useGenerate:any = ref({
+			imgId : '',
+			imgUrl:1,
+			checked:false,
+			level2Type:'',
+			designType:'',
+		})
         return {
             fileList,
             openClick,
@@ -332,6 +348,8 @@ export default defineComponent({
 			generateLineUp,
 			remGenerate,
 			remGenerateTime,
+			useGenerate,
+			isUseGenerate,
         };
     },
     data() {
@@ -440,6 +458,41 @@ export default defineComponent({
 		}
     },
     methods: {
+		setUseGenerate(){
+			this.isUseGenerate = !this.isUseGenerate
+			let sketchMaterialFiles:any = computed(()=>{
+				return this.store.state.UploadFilesModule.sketchMaterialFiles
+			})
+			let Material:any = this.$refs.Material
+			Material.setUseGenerate(sketchMaterialFiles.value)
+			if(this.isUseGenerate){
+				let generate:any = this.$refs.Generate
+				generate.checkbox.forEach((item:any)=>{
+					if(item.name == "text-image"){
+						item.type = true
+					}else{
+						item.type = false
+					}
+				})
+				this.generateCheckbox = false
+			}
+		},
+		setSetchboardGenerate(item:any){
+			this.useGenerate.imgId = item.imgId
+			this.useGenerate.imgUrl = item.imgUrl
+			this.useGenerate.level2Type = item.level2Type
+			this.useGenerate.designType = item.designType
+			let Material:any = this.$refs.Material
+			let generate:any = this.$refs.Generate
+
+			if(item.designType == 'collection'){
+				Material.setUseGenerate([])
+			}else {
+				generate.sketchboardList.forEach((item:any) => {
+					item.checked = false
+				});
+			}
+		},
         open(num: Number) {
             this.openClick = num;
             if (num == 2) {
@@ -646,6 +699,14 @@ export default defineComponent({
 			}
 		},
         recollection() {
+			this.isUseGenerate = false
+			this.useGenerate = {
+				imgId : '',
+				imgUrl:1,
+				checked:false,
+				level2Type:'',
+				designType:''
+			}
             let arr = JSON.parse(
                 JSON.stringify(
                     this.store.state.UploadFilesModule.allBoardData
@@ -710,10 +771,10 @@ export default defineComponent({
 			let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
 			let data = {
 				generateType:generateType,
-				designType:'',
+				designType:this.useGenerate.designType,
-				collectionElementId:generage?.collectionElementid,
+				collectionElementId:this.useGenerate.imgId,
-				level1Type:generage.upload.level1Type,
+				level1Type:this.upload.level1Type,
-				level2Type:generage.level2Type,
+				level2Type:this.useGenerate.level2Type,
 				text:this.captionGeneration,
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
 				userId:this?.userInfo?.userId,
@@ -722,7 +783,7 @@ export default defineComponent({
 				gender:this.workspace.sex,
 			}
 			if(generateType == 'image'){
-				if(generage?.collectionElementid){
+				if(this.useGenerate.imgId){
 					data.text = ''
 				}else{
 					message.info(
@@ -750,7 +811,7 @@ export default defineComponent({
 					return
 				}
 			}else if(generateType == 'text-image'){
-				if(generage?.collectionElementid){
+				if(this.useGenerate.imgId){
 					if(this.captionGeneration){
 						let arr = this.captionGeneration.split(/\s+/).length
 						if(arr > 75){

src/component/LibraryPage/setLabel.vue

@@ -11,8 +11,8 @@
 	>
 		<div class="setLabel_centent">
 			<ul class="optionsItem">
-				<li class="optionsItem_title" @click.stop="" v-for="optionsItem,optionsIndex in options" :key="optionsItem.id">
+				<li class="optionsItem_title" @click="clearOpenType" v-for="optionsItem,optionsIndex in options" :key="optionsItem.id">
-					<div class="setLabel_text" :class="{active:optionsItem.checkAll}">
+					<div class="setLabel_text" @click.stop="" :class="{active:optionsItem.checkAll}">
 						<a-checkbox v-model:checked="optionsItem.checkAll" @change="onCheckAllChange(optionsItem)"></a-checkbox>
 						<span v-show="!optionsItem.openType" :title="optionsItem.classificationName">{{ optionsItem.classificationName }}</span>
 						<input v-show="optionsItem.openType" type="text" class="inputName" v-model="itemName" @keydown.enter="putName(optionsIndex,'affirm',optionsItem)">
@@ -20,7 +20,7 @@
 						<i v-show="!optionsItem.openType" @click.stop="putName(optionsIndex,'put',optionsItem)" class="fi fi-rr-edit"></i>
 					</div>
 					
-					<ul class="childrenItem active" v-mousewheel>
+					<ul class="childrenItem active" v-mousewheel  @click.stop="">
 						<li class="childrenItem_title setLabel_text" v-for="childrenItem,childrenIndex in optionsItem.childList" :class="{active:childrenItem.checkAll}" :key="childrenItem.id">
 							<a-checkbox v-model:checked="childrenItem.checkAll" @change="onCheckAllchildrenItem(optionsItem)"></a-checkbox>
 							<span v-show="!childrenItem.openType" :title="childrenItem.classificationName">{{ childrenItem.classificationName }}</span>
@@ -35,8 +35,8 @@
 						</li>
 					</ul>
 				</li>
-				<li class="newLabel setLabel_text optionsItem_title">
+				<li class="newLabel setLabel_text optionsItem_title" @click="clearOpenType">
-					<div>
+					<div @click.stop="">
 						<input v-show="openType" type="text" class="inputName" v-model="itemName"  @keydown.enter="putName(-1,'affirm','')">
 						<i @click.stop="putName(-1,'affirm','')" v-show="openType" class="fi fi-br-check"></i>
 						<div class="addLabel" v-show="!openType" @click.stop="newLabel('','')">+</div>

src/lang/cn.ts

@@ -39,6 +39,7 @@ export default {
 		EditExport:'编辑 & 导出',
 		CanvasSize:'画布大小',
 		Height:'高',
+		Width:'宽',
 		CanvasNav:'缩略图',
 		CanvasTool:'画布工具',
 		Color:'颜色',
@@ -52,10 +53,15 @@ export default {
 		HDExport:'高清导出',
 		Export:'导出',
 		SR:'请选择需要SR的图片',
-		requiresCredits:'每张图片需要消耗300积分',
+		requiresCredits:'每张图片需要消耗{data}积分',
 		Scale:'倍率',
 		Cancel:'取消',
 		jsContent1:'画布内容没有保存是否离开页面',
+		jsContent2:'我们只支持对印花进行超分',
+		jsContent3:'您的积分小于一次超分',
+		jsContent4:'您的积分余额不足',
+		jsContent5:'你选择的第 {str}张图片宽度或者高度超过4090,',
+		jsContent6:'请选择需要SR的图片',
 	},
 	upgradePlan:{
 		BuyCredlts:'购买积分',

src/lang/en.ts

@@ -40,6 +40,7 @@ export default {
 		EditExport:'Edit & Export',
 		CanvasSize:'Canvas Size',
 		Height:'Height',
+		Width:'Width',
 		CanvasNav:'Canvas Nav',
 		CanvasTool:'Canvas Tool',
 		Color:'Color',
@@ -50,14 +51,18 @@ export default {
 		Layer:'Layer',
 		More:'More',
 		insufficient:'Your points balance is insufficient, if you need to use this feature, please click the top left corner to recharge',
-		HDExport:'HD Export',
+		HDExport:'UpScale',
 		Export:'Export',
 		SR:'Please select the picture that requires SR',
-		requiresCredits:'Each picture requires 300 credits',
+		requiresCredits:'Each picture requires {data} credits',
 		Scale:'Scale',
 		Cancel:'Cancel',
 		jsContent1:'Canvas edit content is not saved, whether to leave the page',
-
+		jsContent2:'We only provide super-resolution capabilities for printboard images.',
+		jsContent3:'Your points are less than one SR',
+		jsContent4:'Your points balance is insufficient',
+		jsContent5:'You selected the {str} image and zoom ratio more than 4090,',
+		jsContent6:'Please select the picture that requires SR',
 	},
 	upgradePlan:{
 		BuyCredlts:'Buy credits',
@@ -406,7 +411,7 @@ export default {
 		Scale:'Scale',
 		Random:'Random',
 		inputContent:'Please input',
-		preview:'preview',
+		preview:'Preview',
 		jsContent1:'The above changes are not saved, being sure to continue? ',
 	},
 	uploadFile:{

src/views/HomeMain.vue

@@ -29,7 +29,7 @@
 						</div>
 					</span>
 					<i @click="getCredits" class="fi fi-br-refresh" :class="[activeCredits?'active':'']"></i>
-					<i @click="Assignment" class="fi fi-rr-gift" title="Assignment"></i>
+					<!-- <i @click="Assignment" class="fi fi-rr-gift" title="Assignment"></i> -->
 					<i @click="UpgradePlan" title="Purchase" class="fi fi-rr-shop"></i>
                 </div>
             </div>