product

package-lock.json

@@ -18,6 +18,7 @@
         "element-plus": "^2.4.2",
         "file-saver": "^2.0.5",
         "fingerprintjs2": "^2.1.4",
+        "gsap": "^3.12.5",
         "html2canvas": "^1.4.1",
         "jszip": "^3.10.1",
         "md5": "^2.3.0",
@@ -6893,6 +6894,11 @@
       "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
       "dev": true
     },
+    "node_modules/gsap": {
+      "version": "3.12.5",
+      "resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.12.5.tgz",
+      "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ=="
+    },
     "node_modules/gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz",
@@ -17722,6 +17728,11 @@
       "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
       "dev": true
     },
+    "gsap": {
+      "version": "3.12.5",
+      "resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.12.5.tgz",
+      "integrity": "sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ=="
+    },
     "gzip-size": {
       "version": "6.0.0",
       "resolved": "https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz",

package.json

@@ -7,7 +7,7 @@
     "build": "vue-cli-service build",
     "serve:test": "vue-cli-service serve --mode test",
     "build:test": "vue-cli-service build --mode test_build",
-	"serve:dev": "vue-cli-service serve --mode dev",
+    "serve:dev": "vue-cli-service serve --mode dev",
     "build:dev": "vue-cli-service build --mode dev_build",
     "lint": "vue-cli-service lint"
   },
@@ -22,6 +22,7 @@
     "element-plus": "^2.4.2",
     "file-saver": "^2.0.5",
     "fingerprintjs2": "^2.1.4",
+    "gsap": "^3.12.5",
     "html2canvas": "^1.4.1",
     "jszip": "^3.10.1",
     "md5": "^2.3.0",

src/assets/style/style.css

@@ -38,7 +38,7 @@ li {
   border: 2px solid;
 }
 .button_second {
-  width: 11.85rem;
+  width: 14rem;
   text-align: center;
   height: 4rem;
   line-height: 4rem;
@@ -1166,7 +1166,8 @@ li {
 .design_detail_modal_component .ant-modal-body,
 .designOpenrtion_modal .ant-modal-body,
 .library_page .ant-modal-body,
-.Export .ant-modal-body {
+.Export .ant-modal-body,
+.productImg_modal .ant-modal-body {
   overflow-y: hidden;
 }
 .collection_modal .ant-upload.ant-upload-select-picture-card,
@@ -1175,7 +1176,8 @@ li {
 .design_detail_modal_component .ant-upload.ant-upload-select-picture-card,
 .designOpenrtion_modal .ant-upload.ant-upload-select-picture-card,
 .library_page .ant-upload.ant-upload-select-picture-card,
-.Export .ant-upload.ant-upload-select-picture-card {
+.Export .ant-upload.ant-upload-select-picture-card,
+.productImg_modal .ant-upload.ant-upload-select-picture-card {
   background: #FFFFFF;
   width: calc(6rem*1.2);
   height: calc(6rem*1.2);
@@ -1189,7 +1191,8 @@ li {
 .design_detail_modal_component .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
 .designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
 .library_page .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
-.Export .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao {
+.Export .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao,
+.productImg_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao {
   font-size: calc(3.2rem*1.2);
   color: #B7B7B7;
 }
@@ -1199,7 +1202,8 @@ li {
 .design_detail_modal_component .ant-upload.ant-upload-select-picture-card .ant-upload-text,
 .designOpenrtion_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text,
 .library_page .ant-upload.ant-upload-select-picture-card .ant-upload-text,
-.Export .ant-upload.ant-upload-select-picture-card .ant-upload-text {
+.Export .ant-upload.ant-upload-select-picture-card .ant-upload-text,
+.productImg_modal .ant-upload.ant-upload-select-picture-card .ant-upload-text {
   font-size: calc(1.6rem*1.2);
   color: #B7B7B7;
 }
@@ -1209,7 +1213,8 @@ li {
 .design_detail_modal_component .ant-upload-list-picture-card-container,
 .designOpenrtion_modal .ant-upload-list-picture-card-container,
 .library_page .ant-upload-list-picture-card-container,
-.Export .ant-upload-list-picture-card-container {
+.Export .ant-upload-list-picture-card-container,
+.productImg_modal .ant-upload-list-picture-card-container {
   display: none !important;
 }
 .collection_modal .ant-upload-picture-card-wrapper,
@@ -1218,7 +1223,8 @@ li {
 .design_detail_modal_component .ant-upload-picture-card-wrapper,
 .designOpenrtion_modal .ant-upload-picture-card-wrapper,
 .library_page .ant-upload-picture-card-wrapper,
-.Export .ant-upload-picture-card-wrapper {
+.Export .ant-upload-picture-card-wrapper,
+.productImg_modal .ant-upload-picture-card-wrapper {
   width: auto;
   vertical-align: top;
 }
@@ -1323,10 +1329,20 @@ textarea:focus {
   flex: 1;
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
 }
-.collection_modal_body .input_border .input_box.active input,
+.collection_modal_body .input_border .input_box .inputShowText,
-.design_detail_modal_component .input_border .input_box.active input,
+.design_detail_modal_component .input_border .input_box .inputShowText,
-.library_page .input_border .input_box.active input {
+.library_page .input_border .input_box .inputShowText {
+  width: 100%;
+  display: none;
+}
+.collection_modal_body .input_border .input_box.active .input_box_btnBox,
+.design_detail_modal_component .input_border .input_box.active .input_box_btnBox,
+.library_page .input_border .input_box.active .input_box_btnBox,
+.collection_modal_body .input_border .input_box.active textarea,
+.design_detail_modal_component .input_border .input_box.active textarea,
+.library_page .input_border .input_box.active textarea {
   border: 1px solid #ff0001;
   box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
 }
@@ -1334,6 +1350,8 @@ textarea:focus {
 .design_detail_modal_component .input_border .input_box.active span,
 .library_page .input_border .input_box.active span {
   opacity: 1;
+  display: block;
+  color: rgba(255, 0, 0.7);
 }
 .collection_modal_body .input_border .search_keyword,
 .design_detail_modal_component .input_border .search_keyword,
@@ -1376,6 +1394,7 @@ textarea:focus {
   padding: 0.5rem 1rem;
   color: #fff;
   font-weight: 600;
+  font-size: 1.2rem;
   cursor: pointer;
 }
 .collection_modal_body .input_border .search_keyword .search_keyword_center .search_keyword_center_item:last-child,
@@ -1391,6 +1410,11 @@ textarea:focus {
   display: flex;
   float: left;
 }
+.collection_modal_body .input_border .input_box_btnBox .ant-spin-text,
+.design_detail_modal_component .input_border .input_box_btnBox .ant-spin-text,
+.library_page .input_border .input_box_btnBox .ant-spin-text {
+  font-size: 1.2rem;
+}
 .collection_modal_body .input_border .upload_item .upload_file_item,
 .design_detail_modal_component .input_border .upload_item .upload_file_item,
 .library_page .input_border .upload_item .upload_file_item {
@@ -1444,8 +1468,15 @@ textarea:focus {
   z-index: 4;
   width: 4rem;
   align-items: center;
+  background-color: #fff;
   justify-content: center;
 }
+.collection_modal_body .input_border .fi.fi-br-loading,
+.design_detail_modal_component .input_border .fi.fi-br-loading,
+.library_page .input_border .fi.fi-br-loading {
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+}
 .collection_modal_body .input_border .fi.active,
 .design_detail_modal_component .input_border .fi.active,
 .library_page .input_border .fi.active {
@@ -1489,7 +1520,7 @@ textarea:focus {
   width: var(--width);
   border-radius: 4px;
   height: 20rem;
-  top: 0.2rem;
+  top: 0rem;
   border: 1px solid #dcdfe6;
 }
 .collection_modal_body .input_border .generage_btn,
@@ -1664,6 +1695,32 @@ textarea:focus {
   padding: 8rem 5rem !important;
   overflow-y: hidden;
 }
+.generalScroll {
+  /* 进度 */
+  /* 轨道 */
+}
+.generalScroll.generalScroll::-webkit-scrollbar {
+  width: calc(1rem*1.2);
+  height: calc(1rem*1.2);
+  transition: all 0.3s;
+}
+.generalScroll.generalScroll::-webkit-scrollbar-thumb {
+  border-radius: calc(1rem*1.2);
+  background: rgba(238, 238, 244, 0);
+}
+.generalScroll.generalScroll::-webkit-scrollbar-track {
+  border-radius: calc(1rem*1.2);
+  background: rgba(238, 238, 244, 0);
+}
+.generalScroll.generalScroll:hover {
+  /* 轨道 */
+}
+.generalScroll.generalScroll:hover.generalScroll::-webkit-scrollbar-thumb {
+  background: #543087;
+}
+.generalScroll.generalScroll:hover.generalScroll::-webkit-scrollbar-track {
+  background: rgba(84, 48, 135, 0.2);
+}
 .scroll_style::-webkit-scrollbar-button:single-button {
   display: block;
   border-style: solid;

src/assets/style/style.less

@@ -42,7 +42,7 @@ input:focus{
 	border: 2px solid;
 }
 .button_second{
-    width: 11.85rem;
+    width: 14rem;
     text-align: center;
     // background: #343579;
     height: 4rem;
@@ -1305,7 +1305,7 @@ input:focus{
 	}
 }
 //collection 弹窗
-.collection_modal,.generalModel_modal,.payOrder_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page,.Export{
+.collection_modal,.generalModel_modal,.payOrder_modal,.design_detail_modal_component,.designOpenrtion_modal,.library_page,.Export,.productImg_modal{
 	
     .ant-modal-body{
         overflow-y: hidden;
@@ -1407,7 +1407,7 @@ textarea:focus{
 	outline: none; /* 清除默认焦点样式 */
 }
 //设计input和上传按钮样式
-.collection_modal_body,.design_detail_modal_component,.library_page{
+.collection_modal_body,.design_detail_modal_component,.library_page,{
 	.input_border{
 		z-index: 2;
 		display: flex;
@@ -1424,15 +1424,21 @@ textarea:focus{
 			flex: 1;
 			display: flex;
 			align-items: center;
+			flex-wrap: wrap;
+			.inputShowText{
+				width: 100%;
+				display: none;
+			}
 			&.active{
-				input{
+				.input_box_btnBox,textarea{
 					// color: rgb(255, 0, .7);
 					border: 1px solid rgb(255, 0, .7);
 					box-shadow: 0px 0px 3px 1px rgba(255, 0, 0, 0.2);
-					
 				}
 				span{
 					opacity: 1;
+					display: block;
+					color: rgba(255, 0, .7);
 				}
 			}
 		}
@@ -1468,6 +1474,7 @@ textarea:focus{
 					padding: .5rem 1rem;
 					color: #fff;
 					font-weight: 600;
+					font-size: 1.2rem;
 					cursor: pointer;
 				}
 				.search_keyword_center_item:last-child{
@@ -1480,6 +1487,9 @@ textarea:focus{
 			width: var(--width);
 			display: flex;
 			float: left;
+			.ant-spin-text{
+				font-size: 1.2rem;
+			}
 		}
 		.upload_item{
 			.upload_file_item{
@@ -1523,8 +1533,12 @@ textarea:focus{
 			z-index: 4;
 			width: 4rem;
 			align-items: center;
-
+			background-color: #fff;
 			justify-content: center;
+			&.fi-br-loading{
+				height: 100%;
+				background-color: rgba(0, 0, 0, 0);
+			}
 			&.active{
 				transform: rotate(180deg);
 			}
@@ -1558,7 +1572,7 @@ textarea:focus{
 			width: var(--width);
 			border-radius: 4px;
 			height: 20rem;
-			top: .2rem;
+			top: 0rem;
 			border: 1px solid #dcdfe6;
 		}
 		
@@ -1729,7 +1743,33 @@ textarea:focus{
         overflow-y: hidden;
     }
 }
-
+.generalScroll{
+	&.generalScroll::-webkit-scrollbar {
+		width: calc(1rem*1.2);
+		height: calc(1rem*1.2);
+		transition: all .3s;
+	}
+	/* 进度 */
+	&.generalScroll::-webkit-scrollbar-thumb {
+		border-radius: calc(1rem*1.2);
+		background: rgba(238, 238, 244, 0);
+	}
+	/* 轨道 */
+	&.generalScroll::-webkit-scrollbar-track {
+		border-radius: calc(1rem*1.2);
+		background: rgba(238, 238, 244, 0);
+	}
+	&.generalScroll:hover {
+		// overflow-x: scroll;
+		&.generalScroll::-webkit-scrollbar-thumb {
+			background: #543087;
+		}
+		/* 轨道 */
+		&.generalScroll::-webkit-scrollbar-track {
+			background: rgba(84, 48, 135,.2);
+		}
+	}
+}
 .scroll_style{
     &::-webkit-scrollbar-button:single-button {
         // background-color: #ffffff;

src/component/Detail/habit.vue

@@ -129,7 +129,7 @@
 				<div class="habit_btn">
 					<div class="model_current">
 					<div class="model_text">{{ $t('Habit.Current') }}</div>
-					<div class="model_img">
+					<div class="model_img generalScroll">
 						<img :src="workspaceItem.mannequinUrl" alt="">
 					</div>
 				</div>
@@ -149,14 +149,14 @@
 						{{ $t('Habit.User') }}	
 						</div>
 					</div>
-					<div class="model_img" v-show="systemSeleves" v-mousewheel>
+					<div class="model_img generalScroll" v-show="systemSeleves" v-mousewheel>
 						<div class="model_img_item">
 							<div v-for="(item,index) in mannequins?.[0]?.modelList" :key="item.id">
 								<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'Library')" :class="[driver__.index == 4?driver__.driver?'Guide_img':'':'']">
 							</div>
 						</div>
 					</div>
-					<div class="model_img" v-show="!systemSeleves" v-mousewheel>
+					<div class="model_img generalScroll" v-show="!systemSeleves" v-mousewheel>
 						<div class="model_img_item">
 							<div v-for="(item,index) in mannequins?.[1]?.modelList" :key="item.id">
 								<img :src="item?.presignedUrl" alt="" @click="setMannequins(item,'System')" :class="[driver__.index == 4?driver__.driver?'Guide_img':'':'']">
@@ -1128,33 +1128,7 @@ export default defineComponent({
 				flex: 1;
 				align-items: center;
 				overflow-x: auto;
-				&.model_img::-webkit-scrollbar {
+				
-					/* 竖轴的宽度 */
-					width: calc(1rem*1.2);
-					/* 横轴的高度 */
-					height: calc(1rem*1.2);
-					transition: all .3s;
-				}
-				/* 进度 */
-				&.model_img::-webkit-scrollbar-thumb {
-					border-radius: calc(1rem*1.2);
-					background: rgba(238, 238, 244, 0);
-				}
-				/* 轨道 */
-				&.model_img::-webkit-scrollbar-track {
-					border-radius: calc(1rem*1.2);
-					background: rgba(238, 238, 244, 0);
-				}
-				&.model_img:hover {
-					// overflow-x: scroll;
-					&.model_img::-webkit-scrollbar-thumb {
-						background: #543087;
-					}
-					/* 轨道 */
-					&.model_img::-webkit-scrollbar-track {
-						background: rgba(84, 48, 135,.2);
-					}
-				}
 				>div{
 					display: flex;
 					

src/component/HomePage/ExportModel.vue

@@ -465,7 +465,8 @@ export default defineComponent({
 													position.y = maxHeight;
 												}
 											}
-											setCanvasImage(img,key,position.x,position.y)//设置图片
+											console.log(allItem,key);
+											setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
 											position.height = img.height * scaleWH + margin;
 											if (key == "sketchboardFiles") {
 												if (sketchGroupingItem.length <3) {
@@ -611,7 +612,27 @@ export default defineComponent({
 			}
 			return imgWidth
 		}
-		let setCanvasImage = (img,key,left,top)=>{
+		let setCanvasImage = (img,key,left,top,data)=>{
+			// data
+			console.log(data);
+			let imgId = 0
+			let designType = ''//表示收藏或者generate
+			let level1Type = ''//表示sketch或者print
+			if(key == 'disposeMoodboard'){
+				imgId = data.id
+
+			}else if(key == 'moodboardFiles'){
+				
+			}else if(key == 'sketchboardFiles'){
+
+			}else if(key == 'printboardFiles'){
+				
+			}else if(key == 'likeDesignCollectionList'){
+				
+			}else if(key == 'upImgFiles'){
+				
+			}
+			// let id = 
 			let proportion = img.height / img.width; //计算图形宽高比例
 			let imgWidth = setImageWidth(key)
 			let scaleWH = imgWidth / img.width; //计算放到画布上缩小倍率
@@ -916,6 +937,10 @@ export default defineComponent({
 		//设置画布监听修改添加事件，用来做撤回功能
 		let updateCanvasState = (str) =>{
 				const canvasAsJson = JSON.stringify(canvas.toJSON());
+				console.log(canvas.toJSON());
+				var json = canvas.toJSON(['aaaID']);
+				const d = canvas.toObject(['myFabricType1', 'myFabricType2'])
+				console.log(json,d);
 				if(str == 'loadingCompleted'){
 					// reverseCanvasState.value.push(canvasAsJson);
 				}
@@ -1128,7 +1153,7 @@ export default defineComponent({
 				const reader = new FileReader();
 				reader.onload = (e) => {
 					fabric.Image.fromURL(e.target.result,(img) => {
-						setCanvasImage(img,"sketchboardFiles",0,canvas.wrapperEl.parentNode.scrollTop)
+						setCanvasImage(img,"upImgFiles",0,canvas.wrapperEl.parentNode.scrollTop,e.target.result)
 						canvas.add(img);
 					},{ crossOrigin: "Anonymous" })
 					input.value = ''

src/component/HomePage/Generate.vue

@@ -1,40 +1,6 @@
 <template>
     <div class="generate">
-        <div v-if="type_.type2 == 'Sketchboard'|| type_.type2 == 'Printboard'"  class="generate_checkbox Guide_1_2_2" :class="[driver__.driver?'hideEvents':'']">
+        <div v-if="type_.type2 == 'Printboard' && scene.value == 'Pattern'"  class="generate_checkbox Guide_1_2_2" :class="[driver__.driver?'hideEvents':'']">
-            <!-- <div v-show="type_.type2 != 'Sketchboard'">
-                <label>
-                    <input
-                        type="checkbox"
-                        v-model="checkbox[0].type"
-                        @click="setKeyword(0)"
-                    />
-                    <span>{{ $t('Generate.ImageOnly') }}</span>
-                </label>
-            </div>
-            <div>
-                <label
-				:class="[driver__.driver ? driver__.index == 29?'showEvents':'':'',type_.type2 == 'Sketchboard'?'Guide_1_9_1':'']"
-				>
-                    <input
-                        type="checkbox"
-                        v-model="checkbox[1].type"
-                        @click="setKeyword(1)"
-                    />
-                    <span>{{ $t('Generate.TextOnly') }}</span>
-                </label>
-            </div>
-            <div>
-                <label class="Guide_1_2_3" :class="[driver__.driver?'showEvents':'']">
-                    <input
-                        type="checkbox"
-                        v-model="checkbox[2].type"
-                        @click="setKeyword(2)"
-                    />
-                    <span>{{ $t('Generate.TextImage') }}</span>
-                </label>
-            </div> -->
-			<!-- <generalMenu :dataList="checkbox" @setprintModel="emitSetKeyword" :item="selectCheckbox" :deleteItem="type_.type2 == 'Sketchboard'?0:-1" :driver__="driver__.driver" :driverClass="{class1: '',class2:'',classList:{item1:'',item2:'',item3:''}}"></generalMenu> -->
-
 			<generalMenu :dataList="printModelList" @setprintModel="setprintModel" :item="printModel" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_2_4',class2:'Guide_1_2_5'}"></generalMenu>
 			<!-- <generalMenu :dataList="sceneList" @setprintModel="setSceneList" :item="scene"></generalMenu> -->
 			<!-- <div v-if="type_.type2 == 'Printboard'" class="printModel">
@@ -54,26 +20,19 @@
 							class="upload_file_item Guide_1_2_7"
 							v-for="(file, index) in sketchboardList"
 							:key="file"
-							:class="[checkboxImage? 'forbidden':'',driver__.driver?'showEvents':'']"
+							:class="[driver__.driver?'showEvents':'']"
 						>
 							<div
 								class="upload_file_item_content"
 								v-show="file?.status === 'uploading'"
 							>
-								<a-spin :indicator="indicator" tip="Uploading..." />
+								<a-spin size="small" :indicator="indicator" tip="Uploading..." />
 							</div>
 							<div
 								class="upload_file_item_content"
 								v-show="file?.status === 'done' || file?.base64"
 							>
 								<img :src="file?.imgUrl" class="upload_img" />
-								<!-- <div
-									class="delete_file_block"
-									:class="[driver__.driver?'hideEvents':'']"
-									@click.stop="deleteFile(index)"
-								>
-									<span class="icon iconfont icon-shanchu"></span>
-								</div> -->
 								<div class="delete_like_file_block"  :class="[driver__.driver?'hideEvents':'']">
 									<span class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></span>
 								</div>
@@ -89,7 +48,7 @@
 						@keydown.enter="getgenerate()"
 						@click="inputFocus()"
 					/>
-					<i class="fi fi-br-upload" v-show="!isTextarea && upload.level1Type !== 'Moodboard'">
+					<i class="fi fi-br-upload" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
 						<a-upload
 							class="search_upImg"
 							:capture="null"
@@ -107,10 +66,9 @@
 						>
 						</a-upload>
 					</i>
+					<i v-show="scene?.value == 'Slogan'" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
 					<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
 					<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i>
-					<i v-show="scene?.value == 'slogan'" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
-				<!-- <i class="icon iconfont icon-xiala" :class="{active:isTextarea}" @click.stop="setTextareaShow"></i> -->
 				</div>
 				<textarea 
 					v-show="isTextarea"
@@ -131,7 +89,7 @@
 				<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn">
 					{{$t('Generate.Close')}}
 				</div>
-				<span ref="inputShowText"></span>
+				<span class="inputShowText" ref="inputShowText"></span>
 			</div>
             <div class="search_keyword" v-show="isInputFocus" @click.stop="">
 				<div class="search_keyword_center">
@@ -172,7 +130,7 @@
                 </div>
             </div>
         </div> -->
-        <div class="generage_img Guide_1_6"  :style="[loadingShow?'overflow:hidden':'']">
+        <div class="generage_img Guide_1_6"  :style="[isGenerate?'overflow:hidden':'']">
             <div
                 class="generage_img_item"
                 v-for="(item, index) in fileList"
@@ -181,6 +139,7 @@
                 :class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'']"
             >
 				<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
+				<sketchCategory v-if="type_.type2 == 'Sketchboard'" :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="item" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_13',class2:'Guide_1_13_1'}"></sketchCategory>
 				<div
 					class="delete_like_file_block left1"
 					:class="[driver__.driver?'hideEvents':'',]"
@@ -196,10 +155,6 @@
 				</div>
             </div>
         </div>
-		<div class="mark_loading" v-show="loadingShow">
-			<a-spin size="large" />
-			<div v-show="remGenerate" :class="[driver__.driver?'hideEvents':'']" class="mark_loading_btn" @click="removeGenerate">{{$t('Generate.Close')}}</div>
-		</div>
 		<scaleImage ref="scaleImage"></scaleImage>
 		<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
     </div>
@@ -220,33 +175,18 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
 import createSlogan from "@/component/HomePage/createSlogan.vue";
 import { useI18n } from "vue-i18n";
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
 export default defineComponent({
 	components: {
 		scaleImage,	
 		generalMenu,
 		createSlogan,
+		sketchCategory,
 	},
     props: ["msg",'sketchCatecoryList','scene'],
     setup(props) {
         // console.log(prop.msg);
-        let checkbox = ref([
+        
-            {
-                name: "image",
-                type: true,
-				label:useI18n().t('Generate.ImageOnly'),
-            },
-            {
-                name: "text",
-                type: false,
-				label:useI18n().t('Generate.TextOnly'),
-            },
-            {
-                name: "text-image",
-                type: false,
-				label:useI18n().t('Generate.TextImage')
-            },
-        ]);
-		let selectCheckbox = checkbox.value[0]
 		let printModelList = ref([
 			{
 				num:'',
@@ -271,69 +211,37 @@ export default defineComponent({
 			value:'Painting Style',
 			label:useI18n().t('Generate.Model1')
 		})
-		let checkboxImage = ref()
-        let imgList = ref([]);
-        let selectImgList: any = ref([]);
-        let selectImgListIds: any = ref([]);
-        let isShowLoading: any = ref(false);
-        let selectCode: any = ref("");
-        let currentPage: any = ref(1);
         let searchPictureName = ref("");
-        let pageSize = ref(20);
-        let total = ref(0);
-        let searcMaterialhName: any = ref(""); //搜索名字
-        let designType: any = ref(null);
         let store = useStore();
         let fileList: any = ref([
           
         ]);
 		let sketchboardList:any = ref([])
-		let collectionElementid = ref()
 		let level2Type = ref('')
-		
 		// let printBoards:any = computed(()=>{return store.state.UploadFilesModule.printboard})
 		// let moodboarList:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
 		// let sketchCatecoryList:any = ref([])
 		let workspace:any = ref({})
-
-		let loadingShow = ref(false)
 		let isGenerate = ref(false)//判断是否正在进行generate
 		let inputShow = ref(false)//表示是否出现红框
 		let inputTime = ref()
 		let driver__:any = inject('driver__')
 		let {t} = useI18n()
-		let isMmerge = ref(false)
 		let isTest = ref()
 		let userInfo:any = {}
-		let generateId:any = ref([])
 		let generateTime:any = ref()
 		let generateProceedList = ref([])
 		let remGenerate:any = ref(false)
 		let remGenerateTime:any = ref()
 		let scene:any = props.scene
         return {
-            imgList,
-            selectImgList,
-            selectImgListIds,
-            isShowLoading,
-            selectCode,
-            currentPage,
             searchPictureName,
-            pageSize,
-            total,
-            searcMaterialhName,
-            designType,
-            checkbox,
-			selectCheckbox,
             store,
             fileList,
 			sketchboardList,
-			collectionElementid,
 			level2Type,
-			checkboxImage,
 			printModel,
 			printModelList,
-			loadingShow,
 			isGenerate,
 			scene,
 
@@ -345,10 +253,8 @@ export default defineComponent({
 			inputTime,
 			driver__,
 			t,
-			isMmerge,
 			isTest,
 			userInfo,
-			generateId,
 			generateTime,
 			generateProceedList,
 			remGenerate,
@@ -376,6 +282,7 @@ export default defineComponent({
                 type1: "generate",
                 type2: prop.msg,
             },
+			workspaceCom:{},
 			isTextarea:false,
 			isInputFocus:false,
         };
@@ -394,39 +301,15 @@ export default defineComponent({
 		let isTest:any = getCookie('isTest')
         this.isTest =JSON.parse(isTest)
         this.uploadUrl = getUploadUrl();
-		this.workspace = computed(()=>{
+		this.workspaceCom = computed(()=>{
 			return  this.store?.state?.Workspace?.workspace
 		})
-		if(this.type_.type2 == 'Sketchboard'){
-			this.checkbox=[
-				{
-					name: "image",
-					type: false,
-					label:useI18n().t('Generate.ImageOnly'),
-				},
-				{
-					name: "text",
-					type: true,
-					label:useI18n().t('Generate.TextOnly'),
-				},
-				{
-					name: "text-image",
-					type: false,
-					label:useI18n().t('Generate.TextImage')
-				},
-			]
-			this.selectCheckbox = this.checkbox[1]
-
-		}
-
-		this.$emit('generateCheckbox',this.checkbox[0].type)
     },
 	watch:{
 		driver__:{
 			handler(newVal,oldVal){
 				if(this.type_.type2 == 'Printboard'){
 					if(newVal.index >= 14 && newVal.index < 15){
-						this.setKeyword(newVal.index-14)
 					}else{
 					}
 				}else if(this.type_.type2 == 'Sketchboard'){
@@ -435,7 +318,8 @@ export default defineComponent({
 				
 			}
 		},
-		workspace(newVal,oldVal){
+		workspaceCom(newVal,oldVal){
+			this.workspace = newVal
 			this.upload.gender = newVal?.sexEnum?.name
 		},
 		// moodboarList(newVal,oldVal){
@@ -480,7 +364,6 @@ export default defineComponent({
 				driverObj__.moveNext()
 			}
         },
-		
         beforeUpload(file: any) {
             const isJpgOrPng =
                 file.type === "image/jpeg" ||
@@ -495,61 +378,12 @@ export default defineComponent({
                 message.info(this.t('Generate.jsContent2'));
             }
             return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
-        },
-		emitSetKeyword(data:any){
-			this.selectCheckbox = data
-			this.checkbox.forEach((item:any,index:any) => {
-				if(item.name == data.name){
-					this.setKeyword(index)
-				}
-			});
-		},
-        setKeyword(num: any) {
-            this.checkbox.forEach((v: any) => {
-                v.type = false;
-            });
-			
-			nextTick().then(()=>{
-				this.checkbox[num].type = true
-				this.$emit('generateCheckbox',this.checkbox[0].type)
-				this.checkboxImage = this.checkbox[1].type
-				// if(this.checkboxImage){
-				// 	this.sketchboardList.forEach((v:any)=>{
-				// 		v.checked = false
-				// 	})
-				// }
-			})
-			if(num == 1){
-				this.level2Type = ''//点击文字生成就把衣服类型清空
-			}
-			if(num == 2 || num == 1){
-				if(this.driver__.driver){
-					driverObj__.moveNext()
-				}
-			}
         },
 		setprintModel(value:any){
 			this.printModel = value
 		},
 		getgenerate(){
 			clearInterval(this.remGenerateTime)
-			// this.remGenerate = false
-			// // if(this.isTest){//试用用户禁止使用
-			// // 	message.info(
-			// // 		this.t('isTest.available')
-			// // 		);
-			// // 	return
-			// // }
-			// if(this.isGenerate){
-			// 	return
-			// }
-			// // if(!this.searchPictureName){
-			// // 	message.info(
-			// // 		this.t('Generate.jsContent3')
-			// // 		);
-			// // 	return
-			// // }
-			
 			if(this.searchPictureName){
 				let arr = this.searchPictureName.split(/\s+/).length
 				if(arr > 250){
@@ -559,7 +393,7 @@ export default defineComponent({
 					return
 				}
 			}else{
-				if(this.sketchboardList[0].imgUrl){
+				if(this.sketchboardList?.[0]?.imgUrl){
 
 				}else{
 					message.info(
@@ -569,23 +403,36 @@ export default defineComponent({
 				}
 				
 			}
+			let level2Type = ''
+			let collectionElementId = ''
+			let base64 = ''
+			if(this.sketchboardList?.[0]){
+				level2Type = this.sketchboardList[0].categoryValue?this.sketchboardList[0].categoryValue:''
+				collectionElementId = this.sketchboardList[0].id
+				if(this.sketchboardList[0].base64){
+					base64 = this.sketchboardList[0].imgUrl
+				}
+			}
+			if(this.upload.level1Type == "Sketchboard"){
+				
+				console.log(this.sketchboardList);
+			}else if(this.upload.level1Type == "Printboard"){
+				level2Type = this.scene?.value
+			}
 			let data = {
-				generateType:'',
+				generateType:'text',
 				designType:'collection',
-				collectionElementId:this.sketchboardList[0].id?this.sketchboardList[0].id:'',
+				collectionElementId:collectionElementId,
 				level1Type:this.upload.level1Type,
-				level2Type:this.scene?.value?this.scene?.value:'',
+				level2Type:level2Type,
 				text:this.searchPictureName,
 				userId:this?.userInfo?.userId,
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
 				version:1,//为1就是Print
 				isTestUser:this.driver__.driver?false:this.isTest,
-				gender:'',
+				gender:this.workspace.sexEnum.name,
-				base64:this.sketchboardList[0].base64?this.sketchboardList[0].imgUrl:'',
+				base64:base64,
 			}
-			console.log(data);
-			
-			return
 			this.isGenerate = true
 			Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
                 (rv) => {
@@ -610,31 +457,6 @@ export default defineComponent({
             ).catch(res=>{
 				this.isGenerate = false
             });
-			// Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
-            //     (rv) => {
-			// 		console.log(rv)
-			// 		if(rv){
-			// 			this.fileList = []
-			// 			let arr
-			// 			rv.generatedCollectionItems.forEach((v:any,index:number)=>{
-			// 				arr = {
-			// 					id:rv.generatedCollectionItems[index].generateItemId,
-			// 					imgUrl:rv.generatedCollectionItems[index].generateItemUrl,
-			// 					like:rv.generatedCollectionItems[index].isLiked
-			// 				}
-			// 			this.fileList.push(arr)
-			// 			this.loadingShow = false
-			// 			})
-			// 			nextTick().then(()=>{
-			// 				if(this.driver__.driver){
-			// 					driverObj__.moveNext()
-			// 				}
-			// 			})
-			// 		}
-            //     }
-            // ).catch(res=>{
-			// 	this.loadingShow = false
-            // });
 		},
 		setGenerate(dataList:any){
 			this.remGenerateTime = setTimeout(()=>{
@@ -653,6 +475,12 @@ export default defineComponent({
 									element.id_ = GO.id++
 									this.fileList.unshift(element)
 									data = data.filter((item:any) => item !== element.taskId);
+									this.sketchCatecoryList.forEach((itemCategory:any) => {
+										if(itemCategory.value == element.category){
+											element.categoryValue = itemCategory?.name
+											element.category = itemCategory?.value
+										}
+									});
 								}
 							});
 							if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==data.length)){
@@ -794,39 +622,7 @@ export default defineComponent({
 		setSloganData(data:any){
 			this.sketchboardList = data
 		},
-		// setSketchboardItem(item:any){
-		// 	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
-		// 			}
-		// 		})
-		// 		item.checked = true
-		// 		this.collectionElementid = item.id
-		// 	}
-		// 	this.level2Type = item.category
-		// 	if(this.driver__.driver){
-		// 		driverObj__.moveNext()
-		// 	}
-		// },
         deleteFile(item: any) {
-			this.collectionElementid = ''
 			this.sketchboardList.splice(item, 1);
 			// if((this.sketchboardList.length<2 && this.moodboarList.length == 0) || this.sketchboardList.length == 0){
 			// 	this.printModel = {
@@ -839,10 +635,18 @@ export default defineComponent({
         },
 		likeFile(item:any,str:string){
 			if(str == 'like'){
+				console.log();
+				
+				let level2Type = ''
+				if(this.upload.level1Type == "Sketchboard"){
+					level2Type = item.category
+				}else if(this.upload.level1Type == "Printboard"){
+					level2Type = this.scene?.value
+				}
 				let data = {
 					generateDetailId:item.id,
-					level1Type:"Moodboard",
+					level1Type:this.type_.type2,
-					level2Type: '',
+					level2Type: level2Type,
 					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
 				}
 				Https.axiosPost(Https.httpUrls.generateLike, data).then(
@@ -888,13 +692,6 @@ export default defineComponent({
         closeModal() {
             // this.myMaterialModalShow = false
             this.searchPictureName = "";
-            this.designType = null;
-            this.selectImgList = [];
-            this.selectImgListIds = [];
-            this.imgList = [];
-            this.currentPage = 1;
-            // this.pageSize = 10;
-            this.total = 0;
         },
     },
 });
@@ -930,21 +727,6 @@ export default defineComponent({
         z-index: 2;
     }
     .generate_checkbox {
-		z-index: 10;
-        div {
-            label {
-                display: flex;
-                cursor: pointer;
-                input {
-                    margin-right: calc(0.5rem*1.2);
-                    padding-left: calc(1.5rem*1.2);
-                }
-                span {
-                    font-size: calc(1.2rem*1.2);
-                    font-weight: 500;
-                }
-            }
-        }
     }
     .generage_input {
     }
@@ -959,16 +741,19 @@ export default defineComponent({
             margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
 			position: relative;
             &.active {
-					opacity: 0.5;
+				opacity: 0.5;
-					// border: 2px solid;
+				// border: 2px solid;
-					border-radius: calc(1rem*1.2);
+				border-radius: calc(1rem*1.2);
-					img {
+				img {
-						transform: scale(0.9);
+					transform: scale(0.9);
-					}
-					.delete_like_file_block{
-						pointer-events:none;
-					}
 				}
+				.delete_like_file_block{
+					pointer-events:none;
+				}
+				.operate_file_block{
+					pointer-events:none;
+				}
+			}
             img {
                 width: calc(10rem*1.2);
                 height: calc(10rem*1.2);
@@ -995,13 +780,6 @@ export default defineComponent({
 				// 	img {
 				// 	}
 				// }
-				&.forbidden{
-					cursor:not-allowed;
-					img{
-						cursor:not-allowed;
-					}
-				}
-				
                 .upload_file_item_content {
                     display: flex;
                     align-items: center;

src/component/HomePage/Material.vue

@@ -22,17 +22,17 @@
 					<div v-for="item,index in imgList" :key="item" class="content_img_item" :class="[ item?.checked ? 'active':''  , selectCode == 'Moodboard' ? 'moodb':''  ]" >
 						<img :src="item?.imgUrl" @click.stop="selectImgItem(item)">
 						<sketchCategory v-if="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="imgList" :item="item" :isSetSketchCategory="true"></sketchCategory>
-						<div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
+						<!-- <div v-if="selectCode == 'Sketchboard' || selectCode == 'Printboard'" class="pin_block">
 							<a-checkbox v-model:checked="item.pin">{{ $t('Material.PIN') }}</a-checkbox>
-						</div>
+						</div> -->
 					</div>
 					<div v-show="total > imgList?.length && total != 0" class="material_content_list_loding" v-observe>
 						<img src="@/assets/images/homePage/loading.gif" alt="">
 					</div>
                 </div>
-                <div class="no_data_block loading_block" v-show="isShowLoading">
+                <!-- <div class="no_data_block loading_block" v-show="isShowLoading">
                     <a-spin size="large"></a-spin>
-                </div>
+                </div> -->
              
             </div>
         <!-- </a-modal> -->
@@ -519,7 +519,7 @@ export default defineComponent({
 			&.material_content_body::-webkit-scrollbar{display: none;}
 
             .content_img_item{
-				margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
+				margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
 				display: inline-block;
 				width: calc(10rem*1.2);
 				height: calc(10rem*1.2);

src/component/HomePage/PrintboardUpload.vue

@@ -53,9 +53,9 @@
 									</div>
                                 </div>
                             </div>
-                            <div class="pin_block" v-show="file?.status === 'done'">
+                            <!-- <div class="pin_block" v-show="file?.status === 'done'">
                                 <a-checkbox v-model:checked="file.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
-                            </div>
+                            </div> -->
                             
                         </div>
                         <div class="upload_file_item upload_component" v-show="printboardList.length < 8">
@@ -92,7 +92,7 @@
 				</div>
             </div>
 			<Material v-show="openClick == 2" ref="Material" msg="Printboard" @setLibrary = setSetchboardGenerate @confirmSelect="confirmSelect"></Material>
-			<Generate v-show="openClick == 3" ref="Generate" :scene="scene" msg="Printboard" @setGenerate = setSetchboardGenerate @generateCheckbox="getgenerateCheckbox"></Generate>
+			<Generate v-show="openClick == 3" ref="Generate" :scene="scene" msg="Printboard"></Generate>
         </div>
 		<div class="modal_right">
 			<div class="modal_layout">
@@ -100,90 +100,40 @@
 					<div>{{ $t('PrintboardUpload.Thumbnail') }}</div>
 					<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
 				</div>
-				<div class="modal_img">
+				<!-- <div class="modal_img">
 					<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click.stop="deleteFile(item)">
 						<img v-lazy="item.imgUrl">
 						<div class="checked" >
 							<i class="fi fi-rr-trash"></i>
 						</div>
 					</div>
-				</div>
+				</div> -->
 			</div>
-			<div v-show="openClick == 3" class="modal_accomplish">
+			<div class="modal_accomplish">
-				<div class="input_border">
+				<div class="modal_img">
-					<div class="Guide_1_2_8 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
+					<div v-for="item,index in printboardList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[driver__.driver?'showEvents':'']" >
-						<div class="input_box_btnBox">
+						<img v-lazy="item.imgUrl">
-							<input class="search_input" 
+						<!-- <div
-								@click="inputFocus()"
-								@input="ifMaximumLength" 
-								@keydown.enter="getgenerate" 
-								:maxlength='inputShow?0:9999' 
-								:class="{forbidden:generateCheckbox}" 
-								:readonly="generateCheckbox" 
-								:placeholder="$t('PrintboardUpload.inputContent1')" v-model="captionGeneration">
-							<i class="icon iconfont icon-xiala" :class="{active:isTextarea,forbidden:generateCheckbox}" @click.stop="setTextareaShow"></i>
-						</div>
-						<textarea class="search_textarea" v-show="isTextarea && !generateCheckbox" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" v-model="captionGeneration">
-						</textarea>
-						<!-- <div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div> -->
-						<!-- <div v-show="!isGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
-							{{ $t('PrintboardUpload.Generate') }}
-						</div> -->
-						<div v-show="!isGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
-							{{ $t('PrintboardUpload.Generate') }}
-							<!-- <div v-show="isGenerate"><a-spin size="large" /></div> -->
-						</div>
-						<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
-							<i class="fi fi-br-loading"></i>
-						</div>
-						<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn">
-							{{$t('Generate.Close')}}
-						</div>
-						<span ref="inputShowText"></span>
-					</div>
-					<div class="search_keyword" v-show="isInputFocus" @click.stop="">
-						<div class="search_keyword_center">
-							<div class="search_keyword_center_left">
-								<div v-for="item in workspace?.keyWord?.[upload.level1Type]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
-							</div>
-						</div>
-					</div>
-					<!-- <div>
-						<div v-show="!isUseGenerate" @click="setUseGenerate">Printboard</div>
-						<div v-show="isUseGenerate" @click="setUseGenerate">Generate</div>
-					</div> -->
-				</div>
-				<div class="modal_img" :style="[loadingShow?'overflow:hidden':'']">
-					<div v-for="item,index in generateList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'',driver__.driver?'showEvents':'']" >
-						<!-- <img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt=""> -->
-						<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
-						<div
 							class="delete_like_file_block left1"
 							:class="[driver__.driver?'hideEvents':'']"
 						>
 							<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
 							<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
-						</div>
+						</div> -->
 						<div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
 							<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
 						</div>
-						<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
+						<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteFile(item)">
 							<span class="icon iconfont icon-shanchu operate_icon"></span>
 						</div>
 						<div class="pin_block">
 							<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
 						</div>
 					</div>
-					
 				</div>
-				<div class="mark_loading" v-show="loadingShow">
-						<a-spin size="large" />
-						<div v-show="remGenerate" :class="[driver__.driver?'hideEvents':'']" class="mark_loading_btn" @click="removeGenerate">{{$t('Generate.Close')}}</div>
-					</div>
 			</div>
 		</div>
 		<!-- 取消请求 -->
-		<!-- <button @click="canelAxios">9999999999999999999</button> -->
 		<scaleImage ref="scaleImage"></scaleImage>
         <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
     </div>
@@ -220,28 +170,12 @@ export default defineComponent({
         let store:any =useStore()
         let fileList:any = ref([]),//选中的文件id数据
             printImgList:any = ref([]), //print的印花图片
-            moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboard}),
+            moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
-            printBoards:any = computed(()=>{
-				return store.state.UploadFilesModule.printboard
-				
-			})
         let openClick: any = ref(1);
-		let generateCheckbox:any = ref()
-		let generateList:any = ref([
-		])
-		let loadingShow = ref(false)
-		let isGenerate = ref(false)
-		let inputShow = ref(false)
-		let inputTime = ref()
 		let driver__:any = inject('driver__')
 		let {t} = useI18n()
 		let isTest = ref()
 		let userInfo:any = {}
-		let generateTime:any = ref()
-		let generateProceedList = ref([])
-		let remGenerate:any = ref(false)
-		let remGenerateTime:any = ref()
-		let isUseGenerate = ref(false)
 		let useGenerate:any = ref({
 			imgId : '',
 			imgUrl:1,
@@ -252,43 +186,31 @@ export default defineComponent({
 		let workspace = ref({})
 		let sceneList = ref([
 			{
-				label:'pattern',
+				label:'Pattern',
-				value:'pattern'
+				value:'Pattern'
 			},{
-				label:'slogan',
+				label:'Slogan',
-				value:'slogan'
+				value:'Slogan'
 			},{
-				label:'logo',
+				label:'Logo',
-				value:'logo'
+				value:'Logo'
 			},
 		])
 		let scene = ref({
-			label:'pattern',
+			label:'Pattern',
-			value:'pattern'
+			value:'Pattern'
 		})
 		let openMenu = ref(false)
         return {
             fileList,
             printImgList,
             moodBoards,
-			printBoards,
 			openClick,
-			generateCheckbox,
-			generateList,
-			loadingShow,
-			isGenerate,
-			inputShow,
-			inputTime,
 			driver__,
 			t,
 			isTest,
 			userInfo,
-			generateProceedList,
-			generateTime,
-			remGenerate,
-			remGenerateTime,
 			useGenerate,
-			isUseGenerate,
 			workspace,
 			sceneList,
 			scene,
@@ -296,24 +218,9 @@ export default defineComponent({
         }
     },
     computed:{
-        // getPinLength(){
+       
-        //     let selectLength:any =  0 
-        //     for(let item of this.printBoards){
-        //         if(item.pin){
-        //             selectLength++
-        //         }
-        //     }
-        //     return selectLength
-        // }
     },
 	watch:{
-		printBoards:{
-			handler(newVal:any,oldVal:any){
-				// if(newVal.length>=2 && this.driver__.driver && newVal.length!=oldVal.length){
-				// 	driverObj__.moveTo(7)
-				// }
-			}
-		}
 	},
     data(){
         return {
@@ -340,7 +247,6 @@ export default defineComponent({
 			printboardList:computed(()=>{
 				return  useStore().state.UploadFilesModule.printboard
 			}),
-			source:axios.CancelToken.source(),
 			isTextarea:false,
 			isInputFocus:false,
         }
@@ -362,26 +268,6 @@ 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
@@ -391,19 +277,12 @@ export default defineComponent({
 			let generate:any = this.$refs.Generate
 
 			if(item.designType == 'collection'){
-				Material.setUseGenerate([])
 			}else {
 				generate.sketchboardList.forEach((item:any) => {
 					item.checked = false
 				});
 			}
 		},
-		//取消请求测试
-		canelAxios(){
-			// Https.axiosCanel()
-			this.source.cancel('请求被取消');
-			this.source = axios.CancelToken.source()
-		},
 		open(num: Number) {
             this.openClick = num;
 			let material:any = this.$refs.Material
@@ -525,21 +404,6 @@ export default defineComponent({
 			}
 
 		},
-		deleteGenerate(index:any){
-			if(this.isGenerate)return
-			let _this = this
-            Modal.confirm({
-                title: this.t('LibraryPage.jsContent1'),
-                icon: createVNode(ExclamationCircleOutlined),
-                okText: 'Yes',
-                cancelText: 'No',
-				mask:false,
-                centered:true,
-                onOk() {
-					_this.generateList.splice(index,1)
-                }
-            });
-		},
         
         customRequest(data:any){
             let new_data = {
@@ -661,7 +525,6 @@ export default defineComponent({
         },
 
         recollection(){
-			this.isUseGenerate = false
 			this.useGenerate = {
 				imgId : '',
 				imgUrl:1,
@@ -711,337 +574,17 @@ export default defineComponent({
             }
             this.store.commit('setPrintboardFile',this.fileList)
             
-        },
-		getgenerateCheckbox(value:any){
-			this.generateCheckbox = value
-		},
-		setTextareaShow(){
-			if(this.generateCheckbox) return
-			this.isTextarea = !this.isTextarea
-		},
-		cliSetKeyword(value:any){
-			let str = ''
-			if(this.captionGeneration[this.captionGeneration.length-1] != ',' && this.captionGeneration.length != 0){
-				str = ','
-			}
-			this.captionGeneration += str + value
-		},
-		ifMaximumLength(){
-			this.inputTime = setTimeout(()=>{
-				if(this.captionGeneration?.split(/\s+/).length > 250){
-					(this.$refs.inputShowText as any).innerHTML = this.t('PrintboardUpload.maximumLength')
-					this.inputShow = true
-				}else{
-					this.inputShow = false
-				}
-			},500)
-		},
-		inputFocus(){
-			if(this.isInputFocus) return
-			if(this.generateCheckbox) return
-		    this.isInputFocus = true
-			let setDomCli = ()=>{
-				this.isInputFocus = false
-				document.removeEventListener('click',setDomCli)
-			}
-			setTimeout(()=>{
-				document.addEventListener('click',setDomCli)
-			},200)
-		},
-		getgenerate(){
-			clearInterval(this.remGenerateTime)
-			this.remGenerate = false
-			// if(this.isTest){//试用用户禁止使用
-			// 	message.warning(
-			// 		this.t('isTest.available')
-			// 		);
-			// 	return
-			// }
-			if(this.isGenerate){
-				return
-			}
-			let generage:any = this.$refs.Generate
-
-			if(generage.printModel.num == 'Generate'){
-				this.generatePrint()
-				return
-			}
-			//如果是通过moodboard随即图片生成
-			let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
-			
-			let data = {
-				generateType:generateType,
-				// designType:this.useGenerate.designType,
-				designType:'collection',
-				collectionElementId:this.useGenerate.imgId,
-				// collectionElementId:generage?.collectionElementid,
-				level1Type:this.upload.level1Type,
-				level2Type:'',
-				text:`${generage.printModel.value},${this.captionGeneration}`,
-				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-				userId:this?.userInfo?.userId,
-				isTestUser:this.driver__.driver?false:this.isTest,
-				version:1,//为1就是Print
-				gender:'',
-			}
-			if(generateType == 'image'){
-				if(generage?.collectionElementid){
-					data.text = generage.printModel.value
-					
-				}else{
-					message.info(
-						this.t('PrintboardUpload.jsContent4')
-					);
-					return
-				}
-			}else if(generateType == 'text'){
-				data.collectionElementId = ''
-				data.level2Type = ''
-				// this.beforeUpload(false)
-				if(this.captionGeneration){
-					let arr = this.captionGeneration.split(/\s+/).length
-					if(arr > 250){
-						message.info(
-							this.t('PrintboardUpload.jsContent5')
-						);
-					return
-
-					}
-				}else{
-					message.info(
-						this.t('PrintboardUpload.jsContent6')
-					);
-					return
-				}
-			}else if(generateType == 'text-image'){
-				if(this.useGenerate.imgId){
-					if(this.captionGeneration){
-						let arr = this.captionGeneration.split(/\s+/).length
-						if(arr > 250){
-							message.info(
-								this.t('PrintboardUpload.jsContent5')
-							);
-						return
-						}
-					}else{
-						message.info(
-							this.t('PrintboardUpload.jsContent6')
-						);
-						return
-					}
-				}else{
-					message.info(
-						this.t('PrintboardUpload.jsContent4')
-					);
-					return
-				}
-			}
-			this.isGenerate = true
-			//取消请求
-			// Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data,{cancelToken: this.source?.token}).then(
-			Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
-                (rv) => {
-					if(data.isTestUser){
-						if(rv.leftUsageCount >= 1){
-							message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:this.t('collectionModal.Printboard')}));
-						}else if(rv.leftUsageCount == 0){
-							message.warning(this.t('Generate.jsContent9',{str:this.t('collectionModal.Printboard')}));
-							this.isGenerate = false
-							return
-						}
-					}
-					// rv.uniqueId.forEach((item:any) => {
-					// 	let arr:any = {}
-					// 	arr.taskId = item
-					// 	arr.status = 'execution'
-					// 	this.generateList.unshift(arr)
-					// });
-					this.setGenerate(rv.uniqueId)
-					
-                }
-            ).catch(res=>{
-				this.isGenerate = false
-            });
-		},
-		setGenerate(dataList:any){
-			this.remGenerateTime = setTimeout(()=>{
-				this.remGenerate = true
-			},10000)
-			let data = dataList
-			let dataNum = dataList.length
-			this.generateTime = setInterval(()=>{
-				Https.axiosPost(Https.httpUrls.generateResult, data).then(
-					(rv) => {
-						if(this.isGenerate){//防止取消后有正在执行的获取状态
-							this.generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' &&  item.status != 'Invalid')
-							rv.forEach((element:any) => {
-								if(element.status == 'Success'){
-									element.imgUrl = element.url
-									element.id_ = GO.id++
-									this.generateList.unshift(element)
-									data = data.filter((item:any) => item !== element.taskId);
-								}
-							});
-							if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length == data.length)){
-								if(rv.filter((item:any)=>item.status == 'Invalid').length == dataNum){
-									message.info(this.t('Generate.effectPoor'));
-								}
-								nextTick().then(()=>{
-									if(this.driver__.driver){
-										driverObj__.moveNext()
-									}
-								})
-								clearInterval(this.generateTime)
-								clearInterval(this.remGenerateTime)
-								this.remGenerate = false
-								this.isGenerate = false
-							}
-						}
-						
-					}
-				).catch(res=>{
-					clearInterval(this.generateTime)
-					clearInterval(this.remGenerateTime)
-					this.remGenerate = false
-					this.isGenerate = false
-				});
-			},1000)
-		},
-		removeGenerate(){
-			//取消操作
-			this.isGenerate = false
-			this.remGenerate = false
-			clearInterval(this.generateTime)
-			if(this.generateProceedList){
-				let str = this.generateProceedList.map((obj:any) => obj.taskId).join(',');
-				let data = {uniqueId:str,userId:this?.userInfo?.userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
-				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
-					(rv) => {
-						this.generateProceedList = []
-					}
-				).catch(res=>{
-				});
-			}
-		},
-		randomRange(min:any, max:any, num:any) { // min最小值，max最大值 num排除的值
-            let index = Math.floor(Math.random() * (max - min)) + min;
-            while(index === num){
-                index = Math.floor(Math.random() * (max - min)) + min;
-            }
-            return index
-            
-        },
-		
-		generatePrint(){
-            let data:any = {}
-            //随机获取图片id
-			let generage:any = this.$refs.Generate
-			let generateList = generage.sketchboardList
-			let isGenerateListChecked = generateList.filter((item:any) => item.checked)
-            if(!this.moodBoards.length){ //mood没有图片
-                let index1 = -1
-                let index2 = -2
-                if(isGenerateListChecked.length == 0){ //没pin住
-                    index1 = this.randomRange(0, generateList.length, -1)
-                    index2 = this.randomRange(0, generateList.length, index1)
-                }else if(isGenerateListChecked.lengthh === 1){ //pin住1个
-                    generateList.forEach((element:any,index:number) => {
-                        if(element.checked){
-                            index1 = index
-                        }
-                    });
-                    index2 = this.randomRange(0, generateList.length, index1)
-                }else{      //pin住多个
-                    let selectIndexList:any = []
-                    generateList.forEach((element:any,index:number) => {
-                        if(element.pin){
-                            selectIndexList.push(index)
-                        }
-                    });
-                    index1 = this.randomRange(0, selectIndexList.length, -1) //pin住的中随机选一个
-                    index2 = this.randomRange(0, generateList.length, selectIndexList[index1]) //除了选中的外再来一个
-                }
-                data = {
-                    select1Id:generateList[index1].id,
-                    select2Id:generateList[index2].id
-                }
-            }else{
-                let index1 = this.randomRange(0, this.moodBoards.length, -1)
-                let index2 = -2
-                if(isGenerateListChecked.length == 0){ //没pin住
-                    index2 = this.randomRange(0, generateList.length, -1)
-                }else if(isGenerateListChecked.lengthh === 1){ //pin住1个
-                    generateList.forEach((element:any,index:number) => {
-                        if(element.pin){
-                            index2 = index
-                        }
-                    });
-                }else{      //pin住多个
-                    let selectIndexList:any = []
-                    generateList.forEach((element:any,index:number) => {
-                        if(element.pin){
-                            selectIndexList.push(index)
-                        }
-                    });
-                    index2 = this.randomRange(0, selectIndexList.length, -1) //pin住的中随机选一个
-                }
-                data = {
-                    select1Id:this.moodBoards[index1].resData.id,
-                    select2Id:generateList[index2].id
-                }
-            }
-            data.timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone,
-            this.loadingShow = true
-            Https.axiosPost(Https.httpUrls.elementGeneratePrint, data).then((rv) =>{
-                if(rv){
-					this.generateList = []
-					let value = {
-						id:rv.generateItemId,
-						imgUrl:rv.generateItemUrl,
-						id_:GO.id++,
-						like:rv.isLiked
-					}
-					this.generateList.push(value)
-					this.loadingShow = false
-                    
-                }
-            }).catch(res=>{
-                this.loadingShow = false
-            })
-
         },
 		scaleImage(index:any){
 			let scaleImage:any = this.$refs.scaleImage
-			scaleImage.init(this.generateList,index)
+			scaleImage.init(this.printboardList,index)
-		},
-		generageAdd(item:any){
-			// if(this.isUseGenerate){
-			// 	let data = {
-			// 		imgId:item.id,
-			// 		imgUrl:item.imgUrl,
-			// 		designType:'generate',
-			// 		level2Type:'',
-			// 	}
-			// 	this.setSetchboardGenerate(data)
-			// }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()
-				}
-			// }
-			
 		},
 		setSceneList(data:any){
 			if(this.scene.value === data.value) return
 			this.scene = data
 			console.log(data);
 			let generate:any = this.$refs.Generate
+			generate.sketchboardList = []
 			generate.scene = data
 			this.openMenu = false
 		},
@@ -1163,7 +706,7 @@ export default defineComponent({
             }
 		
             .upload_file_item{
-                margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
+                margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
 				// margin: 0 2rem*1.2) 2rem*1.2) 0;
 				display: inline-block;
 				width: calc(10rem*1.2);
@@ -1252,7 +795,7 @@ export default defineComponent({
 		margin-left: calc(3rem*1.2);
 		display: flex;
 		flex-direction: column;
-		.modal_layout,.modal_accomplish{
+		.modal_layout{
 			.modal_text{
 				font-size: var(--aida-fsize1-4);
 				font-weight: 400;
@@ -1263,6 +806,7 @@ export default defineComponent({
 			}
 		}
 		.modal_layout{
+			padding-bottom: 4.8rem;
 			.modal_img{
 				width: calc(40rem*1.2);
 				height: calc(5rem*1.2);
@@ -1326,11 +870,6 @@ export default defineComponent({
 				padding-top: calc(2rem*1.2);
 				padding-block: calc(2rem*1.2);
 			}
-			.input_box{
-				input{
-					
-				}
-			}
 			.modal_img{
 				flex: 1;
 				display: flex;
@@ -1338,11 +877,17 @@ export default defineComponent({
 				justify-content: flex-start;
 				position: relative;
 				align-content: flex-start;
+				.modal_imgItem:hover .delete_like_file_block{
+					// display: block;
+					opacity: 1;
+				}
 				.modal_imgItem{
 					margin: 0 calc(2rem*1.2) calc(5rem*1.2) 0;
 					display: inline-block;
-					width: calc(10rem*1.2);
+					// width: calc(10rem*1.2);
-					height: calc(10rem*1.2);
+					// height: calc(10rem*1.2);
+					width: 30rem;
+					height: 30rem;
 					border: 1px solid #f5f5f5;
 					position: relative;
 					cursor: pointer;
@@ -1352,10 +897,7 @@ export default defineComponent({
 						max-width: 100%;
 						width: auto;
 					}
-					&:hover .delete_like_file_block{
+					
-						// display: block;
-						opacity: 1;
-					}
 					&.active{
 						opacity: 0.5;
 					// border: 2px solid;

src/component/HomePage/SketchboardUpload.vue

@@ -56,14 +56,14 @@
                                     ></span>
                                 </div>
                             </div>
-                            <div
+                            <!-- <div
                                 class="pin_block"
                                 v-show="file?.status === 'done'"
                             >
                                 <a-checkbox v-model:checked="file.pin"
                                     >{{ $t('SketchboardUpload.PIN') }}</a-checkbox
                                 >
-                            </div>
+                            </div> -->
                         </div>
                         <div
                             class="upload_file_item upload_component"
@@ -114,8 +114,6 @@
                 ref="Generate"
                 msg="Sketchboard"
 				:sketchCatecoryList="sketchCatecoryList"
-                @generateCheckbox="getgenerateCheckbox"
-				@setGenerate = setSetchboardGenerate
             ></Generate>
         </div>
 		<div class="modal_right">
@@ -124,7 +122,7 @@
 					<div>{{ $t('SketchboardUpload.Thumbnail') }}</div>
 					<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
 				</div>
-				<div class="modal_img modal_img_x" v-mousewheel>
+				<!-- <div class="modal_img modal_img_x" v-mousewheel>
 					<div class="mousewheel">
 						<div class="modal_img_item" v-for="item,index in sketchboardList" :key="item" @click="deleteFile(item)">
 							<img v-lazy="item.imgUrl">
@@ -134,79 +132,33 @@
 						</div>
 					</div>
 					
-				</div>
+				</div> -->
 			</div>
-			<div v-show="openClick == 3" class="modal_accomplish">
+			<div class="modal_accomplish">
-				<div class="input_border">
+				<div class="modal_img">
-					<div class="Guide_1_9_2 input_box" :class="[inputShow?'active':'',driver__.driver?'showEvents':'']">
+					<div v-for="item,index in sketchboardList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[driver__.driver?'showEvents':'']" >
-						<div class="input_box_btnBox">
+						<img v-lazy="item.imgUrl">
-							<input class="search_input" 
+						<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :item="item" :driver__="driver__.driver"></sketchCategory>
-								@click="inputFocus()"
+
-								@input="ifMaximumLength" 
+						<!-- <div
-								@keydown.enter="getgenerate" 
-								:maxlength='inputShow?0:9999' 
-								:class="{forbidden:generateCheckbox}" 
-								:readonly="generateCheckbox" 
-								:placeholder="$t('PrintboardUpload.inputContent1')" 
-								v-model="captionGeneration">
-							<i class="icon iconfont icon-xiala" :class="{active:isTextarea,forbidden:generateCheckbox}" @click.stop="setTextareaShow"></i>
-						</div>
-						<textarea class="search_textarea" v-show="isTextarea && !generateCheckbox" @input="ifMaximumLength" @keydown.enter="getgenerate" :maxlength='inputShow?0:9999' :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" v-model="captionGeneration">
-						</textarea>
-						<!-- <div class="generage_btn started_btn" @click.stop="getgenerate">{{ $t('PrintboardUpload.Generate') }}</div> -->
-						<div v-show="!isGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
-							{{ $t('LibraryPage.Generate') }}
-						</div>
-						<div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" @click.stop="getgenerate">
-							<i class="fi fi-br-loading"></i>
-						</div>
-						<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn">
-							{{$t('Generate.Close')}}
-						</div>
-						<span ref="inputShowText"></span>
-					</div>
-					<div class="search_keyword" v-show="isInputFocus" @click.stop="">
-						<div class="search_keyword_center">
-							<div class="search_keyword_center_left">
-								<div v-for="item in workspace?.keyWord?.[upload.level1Type]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
-							</div>
-						</div>
-					</div>
-					<!-- <div>
-						<div v-show="!isUseGenerate" @click="setUseGenerate">Printboard</div>
-						<div v-show="isUseGenerate" @click="setUseGenerate">Generate</div>
-					</div> -->
-				</div>
-				<div class="modal_img" :style="[loadingShow?'overflow:hidden':'']">
-					<div v-for="item,index in generateList" class="modal_imgItem Guide_1_13_2" :class="[item.status != 'Success'?'hideEvents':'',driver__.driver?'showEvents':'',item?.checked?'active':'']" :key="item">
-						<!-- <img v-show="item.status != 'Success'" src="@/assets/images/homePage/loading.gif" alt=""> -->
-						<img v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
-						<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="generateList" :item="item" :driver__="driver__.driver" :driverClass="{class1: 'Guide_1_13',class2:'Guide_1_13_1'}"></sketchCategory>
-						<div
 							class="delete_like_file_block left1"
+							:class="[driver__.driver?'hideEvents':'']"
 						>
 							<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
-							<i v-else class="fi fi-sr-heart" :adminLike="!!item.like"  @click.stop="likeFile(item,'noLike')"></i>
+							<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
-						</div>
+						</div> -->
 						<div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
 							<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
 						</div>
-						<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
+						<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteFile(item)">
 							<span class="icon iconfont icon-shanchu operate_icon"></span>
 						</div>
 						<div class="pin_block">
-							<a-checkbox v-model:checked="item.pin">{{ $t('SketchboardUpload.PIN') }}</a-checkbox>
+							<a-checkbox v-model:checked="item.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
 						</div>
 					</div>
-					
 				</div>
-				<div class="mark_loading" v-show="loadingShow">
-						<a-spin size="large" />
-						
-						<div v-show="remGenerate" class="mark_loading_btn" :class="[driver__.driver?'hideEvents':'']" @click="removeGenerate">{{$t('Generate.Close')}}</div>
-					</div>
 			</div>
-			
 		</div>
 		<scaleImage ref="scaleImage"></scaleImage>
 		
@@ -238,20 +190,13 @@ export default defineComponent({
         let fileList: any = ref([
 		]);
         let openClick: any = ref(1);
-		let generateList:any = ref([
+		
-		])
         let store:any =useStore()
 
-		let generateCheckbox:any = ref()
-		let loadingShow = ref(false)
-		let isGenerate = ref(false)
-			
 		let sketchCatecoryList:any = computed(()=>{
 			return store.state.Workspace.workspacePosition
 		})
 		let workspace:any = ref({})
-		let inputShow = ref(false)
-		let inputTime = ref()
 		let sketchboardList:any = computed(()=>{
 			return store.state.UploadFilesModule.sketchboard
 		})
@@ -259,11 +204,6 @@ export default defineComponent({
 		let driver__:any = inject('driver__')
 		let isTest = ref()
 		let userInfo:any = {}
-		let generateTime:any = ref()
-		let generateProceedList = ref([])
-		let remGenerate:any = ref(false)
-		let remGenerateTime:any = ref()
-		let isUseGenerate = ref(false)
 		let useGenerate:any = ref({
 			imgId : '',
 			imgUrl:1,
@@ -274,26 +214,15 @@ export default defineComponent({
         return {
             fileList,
             openClick,
-			generateList,
 			store,
-			generateCheckbox,
-			loadingShow,
-			isGenerate,
 			sketchCatecoryList,
 			workspace,
-			inputShow,
-			inputTime,
 			sketchboardList,
 			t,
 			driver__,
 			isTest,
 			userInfo,
-			generateTime,
-			remGenerate,
-			generateProceedList,
-			remGenerateTime,
 			useGenerate,
-			isUseGenerate,
         };
     },
     data() {
@@ -314,6 +243,7 @@ export default defineComponent({
             token: "",
             uploadUrl: "",
 			captionGeneration:'',
+			workspaceCom:{},
 			isTextarea:false,
 			isInputFocus:false,
         };
@@ -362,7 +292,8 @@ export default defineComponent({
 		}
 	},
 	watch:{
-		workspace(newVal,oldVal){
+		workspaceCom(newVal,oldVal){
+			this.workspace = newVal
 			this.upload.gender = newVal?.sexEnum?.name
 		},
 		sketchboardList:{
@@ -392,7 +323,7 @@ export default defineComponent({
         let isTest:any = getCookie('isTest')
         this.isTest =JSON.parse(isTest)
         this.uploadUrl = getUploadUrl();
-		this.workspace = computed(()=>{
+		this.workspaceCom = computed(()=>{
 			return  this.store?.state?.Workspace?.workspace
 		})
 		if(this.driver__.driver){
@@ -402,25 +333,6 @@ 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
@@ -430,7 +342,6 @@ export default defineComponent({
 			let generate:any = this.$refs.Generate
 
 			if(item.designType == 'collection'){
-				Material.setUseGenerate([])
 			}else {
 				generate.sketchboardList.forEach((item:any) => {
 					item.checked = false
@@ -454,11 +365,9 @@ export default defineComponent({
         },
 		scaleImage(index:any){
 			let scaleImage:any = this.$refs.scaleImage
-			scaleImage.init(this.generateList,index)
+			scaleImage.init(this.sketchboardList,index)
-		},
-		getgenerateCheckbox(value:any){
-			this.generateCheckbox = value
 		},
+		
         fileUploadChange(data: any) {
             let file = data.file;
 			let bor = true
@@ -529,10 +438,6 @@ export default defineComponent({
             }
             return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
         },
-		setTextareaShow(){
-			if(this.generateCheckbox) return
-			this.isTextarea = !this.isTextarea
-		},
 		cliSetKeyword(value:any){
 			let str = ''
 			if(this.captionGeneration[this.captionGeneration.length-1] != ',' && this.captionGeneration.length != 0){
@@ -540,34 +445,6 @@ export default defineComponent({
 			}
 			this.captionGeneration += str + value
 		},
-		ifMaximumLength(){
-			clearTimeout(this.inputTime)
-			let inputBox = document.getElementsByClassName('sketchboard_upload_modal')[0].getElementsByClassName('input_box')[0]
-			let input = inputBox.getElementsByClassName('search_input')[0]
-			this.inputTime = setTimeout(()=>{
-				// let num1 = ((input as HTMLInputElement).value.match(/ /g) || []).length
-				// let num2 = (input as HTMLInputElement).value.split(' ').length
-				
-				if(this.captionGeneration?.split(/\s+/).length > 250){
-					(this.$refs.inputShowText as any).innerHTML = this.t('SketchboardUpload.maximumLength')
-					this.inputShow = true
-				}else{
-					this.inputShow = false
-				}
-			},500)
-		},
-		inputFocus(){
-			if(this.isInputFocus) return
-			if(this.generateCheckbox) return
-		    this.isInputFocus = true
-			let setDomCli = ()=>{
-				this.isInputFocus = false
-				document.removeEventListener('click',setDomCli)
-			}
-			setTimeout(()=>{
-				document.addEventListener('click',setDomCli)
-			},200)
-		},
         deleteFile(item: any) {
 			if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
 				item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
@@ -585,51 +462,7 @@ export default defineComponent({
 				this.store.commit("setSketchboardFile", this.fileList);
 			}
         },
-		likeFile(item:any,str:string){
-			if(str == 'like'){
-				let data = {
-					generateDetailId:item.id,
-					level1Type:"Sketchboard",
-					level2Type: item.category,
-					gender:this.workspace.sex,
-					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
-				}
-				Https.axiosPost(Https.httpUrls.generateLike, data).then(
-					(rv) => {
-						item.like = true
-					}
-				).catch(res=>{
-				});
-			}else{
-				let data = {
-					generateDetailId:item.id,
-					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
-				}
-				Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
-					(rv) => {
-						item.like = false
-					}
-				).catch(res=>{
-				});
-			}
-		},
-		deleteGenerate(index:any){
-			if(this.isGenerate)return
-			let _this = this
-            Modal.confirm({
-                title: this.t('LibraryPage.jsContent1'),
-                icon: createVNode(ExclamationCircleOutlined),
-                okText: 'Yes',
-                cancelText: 'No',
-				mask:false,
-                centered:true,
-                onOk() {
-					_this.generateList.splice(index,1)
-                }
-            });
-		},
         recollection() {
-			this.isUseGenerate = false
 			this.useGenerate = {
 				imgId : '',
 				imgUrl:1,
@@ -682,202 +515,6 @@ export default defineComponent({
             }
             this.store.commit("setSketchboardFile", this.fileList);
         },
-		//发送请求生成图片
-		getgenerate(){
-			clearInterval(this.remGenerateTime)
-			this.remGenerate = false
-			// this.sketchCatecoryList = this.store.state.Workspace.workspacePosition
-			let sketchCatecoryList = this.sketchCatecoryList
-			// if(this.isTest){//试用用户禁止使用
-			// 	message.warning(
-			// 		this.t('isTest.available')
-			// 		);
-			// 	return
-			// }
-			if(this.isGenerate){
-				return
-			}
-			let generage:any = this.$refs.Generate
-			let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
-			let data = {
-				generateType:generateType,
-				// designType:this.useGenerate.designType,
-				designType:'collection',
-				collectionElementId:this.useGenerate.imgId,
-				level1Type:this.upload.level1Type,
-				level2Type:this.useGenerate.level2Type,
-				text:this.captionGeneration,
-				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-				userId:this?.userInfo?.userId,
-				isTestUser:this.driver__.driver?false:this.isTest,
-				version:1,//为1就是Print
-				gender:this.workspace.sex,
-			}
-			if(generateType == 'image'){
-				if(this.useGenerate.imgId){
-					data.text = ''
-				}else{
-					message.info(
-						this.t('PrintboardUpload.jsContent4')
-					);
-					return
-				}
-			}else if(generateType == 'text'){
-				data.collectionElementId = ''
-				data.level2Type = ''
-				// this.beforeUpload(false)
-				if(this.captionGeneration){
-					let arr = this.captionGeneration.split(/\s+/).length
-					if(arr > 250){
-						message.info(
-							this.t('PrintboardUpload.jsContent5')
-						);
-					return
-
-					}
-				}else{
-					message.info(
-						this.t('PrintboardUpload.jsContent6')
-					);
-					return
-				}
-			}else if(generateType == 'text-image'){
-				if(this.useGenerate.imgId){
-					if(this.captionGeneration){
-						let arr = this.captionGeneration.split(/\s+/).length
-						if(arr > 250){
-							message.info(
-								this.t('PrintboardUpload.jsContent5')
-							);
-						return
-						}
-					}else{
-						message.info(
-							this.t('PrintboardUpload.jsContent6')
-						);
-						return
-					}
-				}else{
-					message.info(
-						this.t('PrintboardUpload.jsContent4')
-					);
-					return
-				}
-			}
-
-			this.isGenerate = true
-			Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
-                (rv) => {
-					if(data.isTestUser){
-						if(rv.leftUsageCount >= 1){
-							message.warning(this.t('Generate.jsContent8',{num:rv.leftUsageCount,str:this.t('collectionModal.Printboard')}));
-						}else if(rv.leftUsageCount == 0){
-							message.warning(this.t('Generate.jsContent9',{str:this.t('collectionModal.Printboard')}));
-							this.isGenerate = false
-							return
-						}
-					}
-					// rv.uniqueId.forEach((item:any) => {
-					// 	let arr:any = {}
-					// 	arr.taskId = item
-					// 	arr.status = 'execution'
-					// 	this.generateList.unshift(arr)
-					// });
-					this.setGenerate(rv.uniqueId)
-					
-                }
-            ).catch(res=>{
-				this.isGenerate = false
-            });
-		},
-		setGenerate(dataList:any){
-			let generage:any = this.$refs.Generate
-			let sketchCatecoryList = this.sketchCatecoryList
-			let categoryValue:any
-			let data = dataList
-			let dataNum = dataList.length
-			this.remGenerateTime = setTimeout(()=>{
-				this.remGenerate = true
-			},10000)
-			generage.sketchboardList.forEach((item:any) => {
-				if(item.checked){
-					categoryValue = item.categoryValue
-				}
-			});
-			this.generateTime = setInterval(()=>{
-				// let data = this.generateList.filter((item:any)=>item.status != 'Success').map((obj:any) => obj.taskId);
-				Https.axiosPost(Https.httpUrls.generateResult, data).then(
-					(rv) => {
-						if(this.isGenerate){//防止取消后有正在执行的获取状态
-							this.generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' &&  item.status != 'Invalid')
-							rv.forEach((element:any) => {
-								if(element.status === 'Success'){
-									element.imgUrl = element.url
-									element.id_ = GO.id++
-									this.sketchCatecoryList.forEach((itemCategory:any) => {
-										if(itemCategory.value == element.category){
-											element.categoryValue = itemCategory?.name
-											element.category = itemCategory?.value
-										}
-									});
-									this.generateList.unshift(element)
-									data = data.filter((item:any) => item !== element.taskId);
-								}
-							});
-							if((data.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length == data.length)){
-								if(rv.filter((item:any)=>item.status == 'Invalid').length == dataNum){
-									message.info(this.t('Generate.effectPoor'));
-								}
-								nextTick().then(()=>{
-									if(this.driver__.driver){
-										driverObj__.moveNext()
-									}
-								})
-								clearInterval(this.generateTime)
-								clearInterval(this.remGenerateTime)
-								this.remGenerate = false
-								this.isGenerate = false
-							}
-						}
-					}
-				).catch(res=>{
-					clearInterval(this.generateTime)
-					clearInterval(this.remGenerateTime)
-					this.remGenerate = false
-					this.isGenerate = false
-				});
-			},1000)
-		},
-		removeGenerate(){
-			//取消操作
-			this.isGenerate = false
-			this.remGenerate = false
-			clearInterval(this.generateTime)
-			if(this.generateProceedList){
-				let str = this.generateProceedList.map((obj:any) => obj.taskId).join(',');
-				let data = {uniqueId:str,userId:this?.userInfo?.userId,timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone}
-				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
-					(rv) => {
-						this.generateProceedList = []
-					}
-				).catch(res=>{
-				});
-			}
-		},
-		generageAdd(item:any){
-			item.type_ = {
-                type1: "generate",
-                type2: 'Sketchboard',
-            },
-			item.resData = JSON.parse(JSON.stringify(item))
-			item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
-            this.store.commit("addGenerateMaterialFils", item);
-			nextTick().then(()=>{
-				if(this.driver__.driver){
-					driverObj__.moveNext()
-				}
-			})
-		}
     },
 });
 </script>
@@ -963,7 +600,7 @@ export default defineComponent({
 
        
 		.upload_file_item{
-			margin: 0 calc(2rem*1.2) calc(4rem*1.2) 0;
+			margin: 0 calc(2rem*1.2) calc(2rem*1.2) 0;
 			// margin: 0 2rem*1.2) 2rem*1.2) 0;
 			display: inline-block;
 			width: calc(10rem*1.2);
@@ -1058,6 +695,7 @@ export default defineComponent({
 			}
 		}
 		.modal_layout{
+			padding-bottom: 4.8rem;
 			.modal_img{
 				width: calc(40rem*1.2);
 				height: calc(5rem*1.2);
@@ -1144,6 +782,8 @@ export default defineComponent({
 					display: inline-block;
 					width: calc(10rem*1.2);
 					height: calc(10rem*1.2);
+					width: 30rem;
+					height: 30rem;
 					border: 1px solid #f5f5f5;
 					position: relative;
 					cursor: pointer;
@@ -1152,7 +792,7 @@ export default defineComponent({
 						opacity: 1;
 					}
 					img{
-						object-fit: cover;
+						object-fit: contain;
 						width: 100%;
 						height: 100%;
 					}

src/component/HomePage/createSlogan.vue

@@ -101,6 +101,7 @@ export default defineComponent({
         let { t } = useI18n();
         let canvas = reactive({});
 		let scale = 2;
+		let exportWH = 512
 		let canvasWH = ref(0);
 		let textData = reactive({
 			fill:'#000000',
@@ -143,6 +144,7 @@ export default defineComponent({
 				let height = canvasBox.offsetHeight;
 				canvasBox.style.width = height+'px'
 				canvasWH.value = height
+				scale = exportWH/canvasWH.value
 				var canvasDom = document.createElement("canvas");
 				let oldCanvasDom = canvasBox.querySelector('canvas')
 				if(oldCanvasDom)canvasBox.removeChild(oldCanvasDom); // 清空原有内容

src/component/HomePage/productImg.vue

@@ -0,0 +1,500 @@
+<template>
+		<a-modal
+            class="productImg_modal generalModel"
+            v-model:visible="productImg"
+            :footer="null"
+            width="78%"
+            :maskClosable="false"
+            :centered="true"
+            :closable="false"
+            :mask="productImgMask"
+			:keyboard="false"
+			:destroyOnClose="true"
+        >
+		<div class="generalModel_btn">
+			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+				<i class="fi fi-rr-cross-small"></i>
+			</div>
+		</div>
+		<div class="productImg_content">
+			<div class="modal_title_text">
+				<div>Finalize</div>
+				<div class="modal_title_text_intro"></div>
+			</div>
+			<div class="productImg_content_bottom">
+				<div class="productImg_left">
+					<div class="productImg_content_item_title">Select Collection</div>
+					<div class="productImg_content_item_imgBox generalScroll" v-mousewheel>
+						<div class="content_item_imgBox_itemImg" v-for="item in likeDesignCollectionList" :key="item.id" >
+							<img v-lazy="item.designOutfitUrl" alt="">
+						</div>
+					</div>
+					<div class="productImg_content_item_title">Up Load</div>
+					<div class="productImg_content_item_imgBox generalScroll upload_item" v-mousewheel>
+                        <div class="upload_file_item" v-for="(file, index) in fileList" :key="file">
+                            <div class="upload_file_item_content" v-show="file?.status === 'uploading'" >
+                                <a-spin
+                                    :indicator="indicator"
+                                    tip="Uploading..."
+                                />
+                            </div>
+                            <div
+                                class="upload_file_item_content content_item_imgBox_itemImg"
+                                v-show="file?.status === 'done'"
+                            >
+                                <img :src="file?.imgUrl" class="upload_img" />
+								<div class="content_item_imgBox_itemImg_delete" @click="deleteFile(index)">
+									<i class="fi fi-rr-trash"></i>
+								</div>
+                            </div>
+                        </div>
+                        <div class="upload_file_item upload_component ">
+						<!-- :action="uploadUrl + '/api/history/toProductImageElementUpload'" -->
+                            <a-upload
+                                :action="uploadUrl + '/api/element/upload'"
+                                list-type="picture-card"
+								:capture="null"
+                                :data="{
+                                    ...upload,
+                                }"
+                                :headers="{ Authorization: token }"
+                                :before-upload="beforeUpload"
+                                v-model:file-list="fileList"
+								:multiple="true"
+								:maxCount="8"
+                                accept=".jpg,.png,.jpeg,.bmp"
+                                @change="(file) => fileUploadChange(file)"
+                            >
+
+                                <div
+                                    class="upload_tip_block"
+                                >
+                                    <i class="fi fi-br-upload"></i>
+                                    <!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
+                                </div>
+                            </a-upload>
+                        </div>
+                    </div>
+					<div class="productImg_content_item_title">Magic Tools</div>
+
+
+				</div>
+				<div class="productImg_right">
+					<div class="productImg_content_item_title">Selected Product</div>
+					<div class="productImg_right_item_box generalScroll" v-mousewheel>
+						<div class="productImg_right_item" v-for="item,index in generateList" :key="item">
+							<img v-lazy="item.url" alt="">
+							<div class="productImg_right_item_like">
+								<i class="fi fi-rr-heart" @click.stop="likeFile(item,'like',index)"></i>
+							</div>
+						</div>
+					</div>
+					<div class="productImg_content_item_title productImg_right_titleBtn">
+						Selected Product
+						<div class="button_second">Export</div>
+					</div>
+					<div class="productImg_right_item_box generalScroll" v-mousewheel>
+						<div class="productImg_right_item" v-for="item,index in likeList" :key="item">
+							<img v-lazy="item.url" alt="">
+							<div class="productImg_right_item_like">
+								<i class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike',index)"></i>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="mark_loading" v-show="isShowMark">
+			<a-spin size="large" />
+		</div>
+		<ExportModel ref="ExportModel" @setTask="setTask"></ExportModel>
+	</a-modal>
+</template>
+
+<script lang="ts">
+import { LoadingOutlined } from "@ant-design/icons-vue";
+import { defineComponent,watch,createVNode, h, ref ,toRefs,computed,reactive,triggerRef, nextTick} from "vue";
+// import { getCookie } from "@/tool/cookie";
+import { Https } from "@/tool/https";
+import { getCookie,setCookie } from "@/tool/cookie";
+// import domTurnImg from '@/tool/domTurnImg'
+import { getUploadUrl,isMoible } from "@/tool/util";
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Upload,message,Modal } from 'ant-design-vue';
+import { downloadIamge } from "@/tool/util";
+import { useI18n } from "vue-i18n";
+import ExportModel from "@/component/HomePage/ExportModel.vue";
+import { useStore } from "vuex";
+export default defineComponent({
+	components:{
+		ExportModel,
+	},
+    setup(props,{emit}) {
+		const store = useStore();
+		const {t} = useI18n()
+        let productImg: any = ref(false);//弹窗
+		let productImgMask:any = ref(false)//弹窗遮罩
+		let productImgData:any = reactive({
+			isShowMark:false,
+			fileList:[],
+			generateList:[
+				{
+					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
+					id:2,
+				}
+			],
+			likeList:[
+				{
+					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
+					id:1,
+				},{
+					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
+					id:1,
+				},{
+					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
+					id:1,
+				},{
+					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
+					id:1,
+				},{
+					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
+					id:1,
+				},{
+					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
+					id:1,
+				},{
+					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
+					id:1,
+				},{
+					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
+					id:1,
+				},{
+					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
+					id:1,
+				},{
+					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
+					id:1,
+				},{
+					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
+					id:1,
+				},{
+					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
+					id:1,
+				},{
+					url:'https://www.minio.aida.com.hk:9000/aida-results/result_ebc01b0e-1c13-11ef-b404-0242ac120002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T080213Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=0f4b856a1246dd2d1076c69b220833c9c27b349f9a2f30cf036cf59339ce9679',
+					id:1,
+				},
+			],
+		})
+		let likeDesignCollectionList: any = computed(() => {
+			return store.state.HomeStoreModule.likeDesignCollectionList;
+		});
+		let init = ()=>{
+			productImg.value = true
+			console.log(likeDesignCollectionList);
+			
+		}
+		let cancelDsign = ()=>{
+			Modal.confirm({
+                title: 'Your changes will be lost if you navigate away from this page. Are you sure you want to leave this page?',
+                icon: createVNode(ExclamationCircleOutlined),
+                okText: 'Yes',
+                cancelText: 'No',
+				mask:false,
+                centered:true,
+                onOk() {
+					cleardata()
+                }
+            });
+		}
+		let cleardata = ()=>{
+		    productImg.value = false
+			productImgData.isShowMark = false
+		}
+
+		let fileUploadChange = (data: any)=> {
+            let file = data.file;
+			let bor = true
+            if (file.status === "done") {
+                let res = JSON.parse(file.xhr.response);
+				if(res.errCode == 0){
+					file.imgUrl = res.data.url;
+					// file.type_ = {
+					// 	type1:'upload',
+					// 	type2:'Moodboard'
+					// };
+					file.id = res.data.id
+					productImgData.fileList.filter((v: any) => v.status === "done");
+				}else{
+					bor = false
+				}
+				// this.showFileList = productImgData.fileList
+            } else if (file.status === "error") {
+				bor = false
+            }
+        }
+		let beforeUpload = (file: any)=>{
+            const isJpgOrPng =
+                file.type === "image/jpeg" ||
+                file.type === "image/png" ||
+                file.type === "image/jpg" ||
+                file.type === "image/bmp";
+            if (!isJpgOrPng) {
+                message.info(useI18n().t('MoodboardUpload.jsContent3'));
+            }
+            const isLt2M = file.size / 1024 / 1024 < 2;
+            if (!isLt2M) {
+                message.info(useI18n().t('MoodboardUpload.jsContent4'));
+            }
+            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
+        }
+		let deleteFile = (index:any)=>{
+			productImgData.fileList.splice(index,1)
+		}
+		let likeFile = (item:any,str:any,index:any) =>{
+			if(str == 'like'){
+			    productImgData.likeList.push(item)
+			    productImgData.generateList.splice(index,1)
+				
+			}else{
+			    productImgData.generateList.push(item)
+			    productImgData.likeList.splice(index,1)
+			}
+		}
+		let setExport = ()=>{
+		    // let exportModel:any = this.$refs.ExportModel
+			// exportModel.init()
+		}
+		let setTask = (data:any)=>{
+			emit('setTask',data)
+		}
+        return {
+            productImg,
+			productImgMask,
+			...toRefs(productImgData),
+			likeDesignCollectionList,
+			init,
+			cancelDsign,
+			fileUploadChange,
+			beforeUpload,
+			deleteFile,
+			likeFile,
+			setExport,
+			setTask,
+        };
+    },
+	directives:{
+		mousewheel:{
+			mounted (el) {
+				el.addEventListener('wheel',(e:WheelEvent)=>{
+					let num = 0
+					if(e.deltaY > 0){
+						num = 25
+					}else{
+						num = -25
+					}
+					el.scrollBy(num, 0);
+				},{ passive: true })
+			}
+		},
+	},
+    data() {
+        return {
+			indicator: h(LoadingOutlined, {
+                style: {
+                    fontSize: "2.4rem",
+                },
+                spin: true,
+            }),
+            // moodTemplateId: "", //模板id
+			token: "",
+            uploadUrl: "",
+			upload: {
+                isPin: 0,
+				gender:'',
+                level1Type: "Moodboard",
+                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            },
+        };
+    },
+    mounted() {
+		this.token = getCookie("token") || "";
+        this.uploadUrl = getUploadUrl();
+    },
+    methods: {
+		// init(list:any,index:any,dialogueIndex:any){
+			
+		// },
+		// cancelDsign(){
+		// 	this.productImg = false
+		// 	// this.productImgList = []
+		// 	// this.productImgIndex = 0
+		// },
+		// download(){
+		// 	// downloadIamge(this.productImgList[this.productImgIndex].imgUrl)
+		// },
+		// setScaleImageIndex(index:any){
+		// 	// this.productImgIndex = index
+		// 	// console.log(this.productImgIndex);
+			
+		// },
+		// LikeFile(item:any,str:string){
+		// 	let parent:any = this.$parent
+		// 	parent.likeFile(item,str)
+		// },
+    },
+});
+</script>
+
+<style lang="less">
+.productImg_modal {
+	.productImg_page{
+		overflow-y: auto;
+		height: 100%;
+		&.productImg_page::-webkit-scrollbar{display: none;}
+	}
+	.productImg_content{
+		display: flex;
+	    flex-direction: column;
+		height: 100%;
+		.modal_title_text{
+			height: 4rem;
+		}
+	}
+	.productImg_content_bottom{
+		height: calc(100% - 4rem - 2.4rem);
+		--border-color: #c4c4c4;
+		display: flex;
+		justify-content: space-between;
+		flex: 1;
+		.upload_item{
+
+		}
+		.upload_file_item{
+			display: flex;
+			margin-right: 1rem;
+			&.upload_file_item:last-child{
+				margin-right: 0rem;
+			}
+		}
+		.productImg_content_item_title{
+			font-weight: 600;
+			font-size: 1.8rem;
+			margin-bottom: 1rem;
+		}
+		.productImg_content_item_intro{
+			font-size: 1.4rem;
+		}
+		.productImg_content_item_imgBox{
+			display: flex;
+			overflow-x: auto;
+			width: auto;
+			margin-bottom: 2rem;
+			align-items: center;
+			.content_item_imgBox_itemImg{
+				display: flex;
+				margin-right: 1rem;
+				position: relative;
+				height: 12rem;
+				img{
+					width: 100%;
+					object-fit: contain;
+				}
+				&.content_item_imgBox_itemImg:hover{
+					.content_item_imgBox_itemImg_delete{
+						display: block;
+						cursor: pointer;
+					}
+				}
+				.content_item_imgBox_itemImg_delete{
+					display: none;	
+					width: 100%;
+					height: 100%;
+					background: rgba(0,0,0,.2);
+					position: absolute;
+					i{
+						position: absolute;
+						left: 50%;
+						top: 50%;
+						transform: translate(-50%,-50%);
+						color: #fff;
+					}
+				}
+
+			}
+			.content_item_imgBox_itemImg:last-child{
+				margin-right: 0;
+			}
+		}
+		.productImg_left,.productImg_right{
+			display: flex;
+			flex-direction: column;
+		}
+		.productImg_content_item:last-child{
+			margin-bottom: 0;
+		}
+		.productImg_left{
+			width: 25%;
+			// width: 45%;
+			.productImg_content_item_imgBox{
+				.content_item_imgBox_itemImg{
+					width: 5rem;
+					flex-shrink: 0;
+				}
+			}
+		}
+		.productImg_right{
+			width: 75%;
+			padding-left: 2rem;
+			height: 100%;
+			justify-content: space-between;
+			.productImg_right_item_box{
+				height: 40%;
+				display: flex;
+				overflow-x: auto;
+				background: #f6f6fa;
+				border-radius: 2rem;
+				margin-bottom: 2%;
+				padding: 0 1.5rem;
+				.productImg_right_item{
+					height: 100%;
+					padding: 1rem 0;
+					margin-right: 1rem;
+					position: relative;
+					img{
+						height: 100%;
+					}
+					
+					.productImg_right_item_like{
+						display: none;
+						position: absolute;
+						top: 1rem;
+						right: 2rem;
+						cursor: pointer;
+						.fi-sr-heart{
+							color: red;
+						}
+					}
+				}
+				.productImg_right_item:hover{
+					.productImg_right_item_like{
+						display: block;
+					}	
+				}
+				.productImg_right_item:last-child{
+					margin-right: 0;
+				}
+			}
+			.productImg_right_item_box:last-child{
+				margin-bottom: 0;
+			}
+			.productImg_right_titleBtn{
+				display: flex;
+				justify-content: space-between;
+			}
+		
+		}
+	
+	}
+}
+</style>

src/component/HomePage/sketchCategory.vue

@@ -34,7 +34,7 @@
 						cate, index
 					) in disignTypeList"
 					:key="index"
-					@click="
+					@click.stop="
 						selectFileCategory(
 							item,
 							cate

src/component/WorksPage/Falls.vue

@@ -0,0 +1,337 @@
+<template>
+	<div class="Falls">
+		<div class="falls_item" v-fadeIn="isScroll" v-for="item in list" :key="item.id"
+			:style="{
+				width: item.style.width + 'px',
+				height: item.style.height + 'px',
+				top: item.style.top + 'px',
+				left: item.style.left + 'px',
+			}"
+		>
+			<!-- 图片 -->
+			<div class="falls_item_img">
+				<img
+					v-lazy="item.designPythonOutfitUrl"
+					:style="{
+						height: item.style.imgHeihgt + 'px',
+					}"
+				/>	
+			</div>
+			
+			<!-- 文字 -->
+			<div class="falls_item_bottom">
+				<div class="falls_item_text" :title="item.text">
+					{{item.text}}
+				</div>
+				<div class="falls_item_content">
+					<div class="falls_item_user">
+						<img src="http://121.40.53.210:3000/falls/5.png" alt="">
+						<div class="falls_item_user_detail">
+							<div>{{item.name}}</div>
+							<span>地区</span>
+						</div>
+					</div>
+					<div class="falls_item_detail">
+						<div>
+							<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
+								<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+							</svg>
+							<span>321</span>
+						</div>
+						<div>
+							<i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></i>
+							<i v-else class="fi fi-rr-social-network"></i>
+							<span>321</span>
+						</div>
+						<div>
+							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
+								<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
+								<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
+							</svg>
+							<span>321</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		
+	</div>
+</template>
+
+<script>
+import { defineComponent,h ,toRefs,ref,reactive,onMounted,onBeforeDestroy,nextTick,provide,computed} from 'vue'
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+export default defineComponent({
+	props:{
+		isScroll:{
+			 type:Boolean,
+			 default:true,
+		 },
+	},
+	setup(){
+		let list = ref([])
+		let wait_list = ref([])
+		let width = ref(300)
+		let num_x = ref(1)
+		let gap_x = ref(0)
+		let gap_y = ref(0)
+		let poss = ref([])
+		let loading = ref(false)
+		let computedHeight = 0
+		return{
+		    list,
+			wait_list,
+			width,
+			num_x,
+			gap_x,
+			gap_y,
+			poss,
+			loading,
+			computedHeight,
+		}
+	},
+	directives:{
+		fadeIn:{
+			mounted (el,binding) {
+				let dom
+				if(binding.value){
+					dom = document.querySelector('.works_page .page_content')
+				}else{
+					dom = document.querySelector('.homeRecommend_content_body')
+				}
+				gsap.registerPlugin(ScrollTrigger);
+				let tl1 = gsap.timeline();
+				tl1.from(el,1, {y:'30px',opacity:0},)
+				ScrollTrigger.create({
+					trigger: el, // 触发器元素
+					start: "top 90%", // 滚动触发器的起始滚动位置
+					end: '100% 80%',   // 滚动触发器的结束滚动位置
+					// markers: true, // 开启标注功能
+					scrub: true,
+					animation:tl1,
+					scroller:dom,//设置指定元素为滚动依据
+					scrub:2,
+					// onUpdate:(v)=>{
+					// 	if(v.progress < 0.1){
+					// 		v.trigger?.classList.remove('active')
+					// 	}else{
+					// 		v.trigger?.classList.add('active')
+					// 		// v.trigger?.classList.add('active')
+					// 	}
+					// }
+				});
+			}
+		},
+	},
+		mounted () {
+			this.resize()
+			window.addEventListener("resize", this.resize);
+			let domFalls = document.querySelector('.Falls')
+			let domCss = getComputedStyle(domFalls);
+			const paddingBottom = domCss.getPropertyValue('--paddingBottom').split('px')[0]*1;
+			const textMarginTop = domCss.getPropertyValue('--textMarginTop').split('px')[0]*1;
+			const textHeight = domCss.getPropertyValue('--textHeight').split('px')[0]*1;
+			const contentHeight = domCss.getPropertyValue('--contentHeight').split('px')[0]*1;
+			this.computedHeight = paddingBottom + textMarginTop + textHeight + contentHeight;
+		},
+		beforeDestroy () {
+			this.wait_list = []
+			window.removeEventListener("resize", this.resize);
+		},
+		// 挂载方法
+		methods: {
+			push(arr) {
+				this.wait_list = this.wait_list.concat(arr);
+				if (!this.loading) {
+					this.loading = true;
+					this.loadImg();
+				}
+			},
+			loadImg() {
+				if (this.wait_list.length <= 0) {
+					this.loading = false;
+					this.$emit("loadend");
+					return;
+				}
+				
+				let url = this.wait_list[0].designPythonOutfitUrl;
+				let data = this.wait_list[0]
+				let img = document.createElement("img");
+				img.src = url;
+				img.style.width = this.width + "px";
+				img.style.maxHeight = this.width+330 + "px";
+				img.style.position = "absolute";
+				img.style.top = "-99999px";
+				document.body.appendChild(img);
+				img.addEventListener("load", () => {
+					var idx = 0;
+					var pos_num = this.poss[idx];
+					for (var i = 1; i < this.poss.length; i++) {
+						if (pos_num > this.poss[i]) {
+							idx = i;
+							pos_num = this.poss[i];
+						}
+					}
+					let width = img.offsetWidth;
+					let height = img.offsetHeight+this.computedHeight;
+					let top = this.poss[idx] + this.gap_y;
+					let left = (idx + 1) * this.gap_x + idx * width;
+					let imgHeight = height - this.computedHeight
+					this.poss[idx] = top + height;
+					let obj = {
+						designPythonOutfitUrl:url,
+						style: { width, height, top, left, imgHeight },
+						...data
+					};
+					this.list.push(obj);
+					img.remove();
+					this.wait_list.splice(0, 1);
+					this.$el.style.height =
+						Math.max(...this.poss) + this.gap_y + "px";
+					if (this.wait_list.length <= 0) {
+						this.loading = false;
+						this.$emit("loadend");
+					} else {
+						this.loadImg();
+					}
+				});
+			},
+			resize() {
+				var t_width = this.$el.offsetWidth;
+				var width = this.width;
+				var num_x = parseInt(t_width / (width + 20));
+				if (num_x < 1) num_x = 1;
+				var remain = t_width - width * num_x;
+				var gap_x = remain / (num_x + 1);
+				this.gap_x = gap_x;
+				this.gap_y = gap_x > 30 ? 30 : gap_x;
+				this.num_x = num_x;
+				var poss = [];
+				for (var i = 0; i < num_x; i++) poss.push(0);
+				this.poss = poss;
+				this.reset();
+			},
+			reset() {
+				for (let i = 0; i < this.list.length; i++) {
+					let width = this.list[i].style.width;
+					let height = this.list[i].style.height;
+					var idx = 0;
+					var pos_num = this.poss[idx];
+					for (var j = 1; j < this.poss.length; j++) {
+						if (pos_num > this.poss[j]) {
+							idx = j;
+							pos_num = this.poss[j];
+						}
+					}
+					let top = this.poss[idx] + this.gap_y;
+					let left = (idx + 1) * this.gap_x + idx * width;
+					this.poss[idx] = top + height;
+					this.list[i].style = { width, height, top, left };
+				}
+				this.$el.style.height = Math.max(...this.poss) + this.gap_y + "px";
+			},
+		},
+})
+</script>
+
+<style lang='less' scoped>
+	.Falls {
+		width: 100%;
+		height: auto;
+		position: relative;
+		--paddingBottom:10px;
+		--textMarginTop:10px;
+		--textHeight:25px;
+		--contentHeight:35px;
+		.falls_item{
+			position: absolute;
+			transition: all 0.15s;
+			display: flex;
+			flex-direction: column;
+			background: #fff;
+			border-radius: 2rem;
+			overflow: hidden;
+			padding-bottom: var(--paddingBottom);
+			&.falls_item:hover{
+				.falls_item_img{
+					img{
+						transform: scale(1.1);
+					}
+				}
+			}
+			.falls_item_img{
+				cursor: pointer;
+				width: 100%;
+				overflow: hidden;
+				img{
+					width: 100%;
+					object-fit: cover;
+					transition: all .3s;
+				}
+			}
+			.falls_item_bottom{
+				padding: 0 10px;
+				.falls_item_text{
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					font-weight: 600;
+					font-size: 18px;
+					margin-top: var(--textMarginTop);
+					height: var(--textHeight);
+				}
+				.falls_item_content{
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					color: #525252;
+					height: var(--contentHeight);
+					.falls_item_user{
+						width: 50%;
+						display: flex;
+						align-items: center;
+						img{
+							width: 25px;
+							height: 25px;
+							border-radius: 50%;
+							margin-right: 10px;
+						}
+						.falls_item_user_detail{
+							line-height: 1;
+							width: 60%;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+							color: #000;
+							div{
+								font-size: 16px;
+							}
+							span{
+								font-size: 12px;
+								color: #525252;
+							}
+						}
+					}
+					.falls_item_detail{
+						display: flex;
+						width: 40%;
+						justify-content: space-between;
+						>div{
+							svg,i{
+								width: 10px;
+								height: 10px;
+							}
+							span{
+								margin-left: 3px;
+								font-size: 12px;
+							}
+						}
+					}
+				}
+			}
+			
+
+		}
+	}
+</style>

src/router/index.ts

@@ -10,8 +10,12 @@ const routes: Array<RouteRecordRaw> = [
 	{
 		path: "/",
 		// redirect重定向
-		redirect: "/login"
+		// redirect: "/login"
 		// redirect: "/upgrade"
+		name: "HomeRecommend",
+		component: _import('HomeRecommend'),
+		children:[]
+
 	},
 	{
 		path: '/login',
@@ -36,6 +40,7 @@ const routes: Array<RouteRecordRaw> = [
 		children:[
 			{
 				path: "",
+				name:'""',
 				redirect: "home/homePage"
 			},
 			{

src/store/userHabit/userHabit.ts

@@ -1,22 +1,31 @@
 import {Module} from 'vuex'
 import {RootState} from '../index'
 import { Https } from "@/tool/https";
-interface DesignDetail{
+interface UserHabit{
     clothingType:any,
 	credits:any,
     // devise:any,
     // deviseType:any,
     // system_per:any,
     // model:any,
-    
+	printType:any,
+	designElementsType:any,
+	FemalePosition:any,
+	MalePosition:any,
+	Position:any,
 }
 
-const HomeStoreModule : Module<DesignDetail,RootState> = {
+const userHabit : Module<UserHabit,RootState> = {
     state:{
         clothingType:[],
 		credits:{
 			value:0
 		},
+		printType:[],
+		designElementsType:[],
+		FemalePosition:[],
+		MalePosition:[],
+		Position:[],
     },
     mutations:{
         res_clothingType(state,data){
@@ -25,6 +34,25 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
 		setCredits(state,data){
 			state.credits.value = data
 		},
+		setPrintType(state,data){
+			state.printType = data
+		},
+		setDesignElementsType(state,data){
+			state.designElementsType = data
+		},
+		setFemalePosition(state,data){
+			state.FemalePosition = data
+		},
+		setMalePosition(state,data){
+			state.MalePosition = data
+		},
+		setPosition(state,data){
+			if(data == 'Female'){
+				state.Position = state.FemalePosition
+			}else{
+				state.Position = state.MalePosition
+			}
+		},
     },
 
     actions:{
@@ -54,9 +82,51 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
 					resolve(true)
 				});
 			})
-			
+		},
+		getLangType(context){
+			Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'DesignElementsEnum'}}).then((rv: any) => {
+				if (rv) {
+					rv.forEach((item:any) => {
+						let name = item.name
+						item.name = item.value
+						item.value = name
+					});
+					context.commit('setDesignElementsType',rv)
+				}
+			})
+			Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'PrintboardLevel2TypeEnum'}}).then((rv: any) => {
+				if (rv) {
+					rv.forEach((item:any) => {
+						let name = item.name
+						item.name = item.value
+						item.value = name
+					});
+					context.commit('setPrintType',rv)
+				}
+			})
+			Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'FemalePosition'}}).then((rv: any) => {
+				if (rv) {
+					rv.forEach((item:any) => {
+						let name = item.name
+						item.name = item.value
+						item.value = name
+					});
+					context.commit('setFemalePosition',rv)
+				}
+			})
+			Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:'MalePosition'}}).then((rv: any) => {
+				if (rv) {
+					rv.forEach((item:any) => {
+						let name = item.name
+						item.name = item.value
+						item.value = name
+					});
+					context.commit('setMalePosition',rv)
+					context.commit('setPosition','MalePosition')
+				}
+			})
 		}
     }
 }
 
-export default HomeStoreModule
+export default userHabit

src/views/HomeMain.vue

@@ -208,6 +208,8 @@ export default defineComponent({
 		}
 		this.getCredits()
 		this.getLang('')
+		//语言适配
+		this.store.dispatch('getLangType')
     },
     methods: {
 		setTask(data){
@@ -394,13 +396,15 @@ export default defineComponent({
 .homeMain_max{
 	position: relative;
 	display: flex;
-	height: 100%;
+	height: 100vh;
 	flex-direction: column;
 	.homeMain_content_body{
 		flex: 1;
+		height: calc(100vh - 7rem);
 	}
 }
 .homeMain_heade {
+	flex-shrink: 0;
     display: flex;
 	justify-content: space-between;
 	// padding: 0 30px;

src/views/HomeRecommend.vue

@@ -0,0 +1,376 @@
+<template>
+    <div class="homeRecommend_max Guide_1_16_1">
+        <header class="homeRecommend_heade">
+            <div class="homeRecommend_right_content">
+                <div class="homeRecommend_user_content">
+                    <img
+						class="homeRecommend_logo"
+						@click="turnToNewPage('https://www.aidlab.hk/en/')"
+						src="@/assets/images/loginPage/aida_logo.png"
+					/>
+                </div>
+            </div>
+			<div class="homeRecommend_right">
+				<div class="started_btn" @click="setLogin">登录</div>
+				<div class="started_btn started_btn2">注册</div>
+			</div>
+        </header>
+		<div class="homeRecommend_content_body">
+			<div class="homeRecommend_content_body_recommend" id="aaaa">
+				<div class="content_body_recommend_left">
+					<img class="content_body_img1 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+					<img class="content_body_img2 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+					<img class="content_body_img3 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+					<img class="content_body_img4 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+					<img class="content_body_img5 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+				</div>
+				<div class="content_body_recommend_center content_body_text">
+					<div class="content_body_recommend_center_title">
+						<h1>全球<div>最佳创作者</div>齐聚AIDA</h1>
+					</div>
+					<div class="content_body_recommend_center_btn">
+						<a class="started_btn" href="https://code-create.com.hk/aida/" target="_blank">立即购买</a>
+						<a class="started_btn" href="https://code-create.com.hk/aida-trial/" target="_blank">立即试用</a>
+					</div>
+				</div>
+				<div class="content_body_recommend_right">
+					<img class="content_body_img1 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+					<img class="content_body_img2 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+					<img class="content_body_img3 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+					<img class="content_body_img4 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+					<img class="content_body_img5 content_body_img" src="https://www.minio.aida.com.hk:9000/aida-users/83/print/a62e60ac-f588-11ee-a728-0242ac160004_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240530%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240530T021835Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=79c44f3b98ec7efa46c8b64050aa9c6ef58e7ec9b7944328492b51b7f249a1e8" alt="">
+				</div>
+			</div>
+			<Works :isScroll="false"></Works>
+		</div>
+		<div class="homeRecommend_content_adminTop" @click="setAdminUp">
+			<i class="fi fi-rr-arrow-small-up"></i>
+		</div>
+    </div>
+	
+</template>
+<script >
+import { defineComponent, createVNode, ref , nextTick } from "vue";
+import { isEmail } from "@/tool/util";
+import { setCookie, getCookie, WriteCookie,clonAllCookie } from "@/tool/cookie";
+import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
+import Habit from "@/component/Detail/habit.vue";
+import { Https } from "@/tool/https";
+import { Modal, message } from "ant-design-vue";
+import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
+import Works from "@/views/HomeView/Works.vue";
+import { useStore } from "vuex";
+import { setLang } from "@/tool/guide";
+import { useI18n } from "vue-i18n";
+import { useRouter } from 'vue-router';
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+export default defineComponent({
+    components: {
+        VerificationCodeInput,
+		Habit,
+		Works,
+    },
+	setup(){
+        const store = useStore();
+		const router = useRouter();
+		let setLogin = ()=>{
+			router.push("/login");
+		}
+		let setAdminUp = ()=>{
+			let scrollDom = document.querySelector('.homeRecommend_content_body')
+			scrollDom.scrollTo({
+				top: 0,
+				behavior: 'smooth' // 平滑滚动到顶部
+			});
+		}
+		return {
+			setLogin,
+			setAdminUp,
+		}
+	},
+    data() {
+        return {
+        };
+    },
+	watch: {
+		// credits.value(newVal,oldVal){
+		// 	console.log(String(newVal).length);
+		// }
+	},
+    mounted() {
+		nextTick().then(()=>{
+			let dom = document.querySelector('.homeRecommend_content_body')
+			let codeTween = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_img')
+			let codeTweenText = document.querySelectorAll('.homeRecommend_content_body_recommend .content_body_text')
+			for (let index = 0; index < codeTween.length; index++) {
+				gsap.from(codeTween[index],.5, {scale:.6 },);
+				gsap.registerPlugin(ScrollTrigger);
+				let tl1 = gsap.timeline();
+				tl1.to(codeTween[index],1, {y:'-30px',opacity:0},)
+				ScrollTrigger.create({
+					trigger: codeTween[index], // 触发器元素
+					start: "top 0%", // 滚动触发器的起始滚动位置
+					end: '200% 20%',   // 滚动触发器的结束滚动位置
+					// markers: true, // 开启标注功能
+					scrub: true,
+					animation:tl1,
+					scroller:dom,//设置指定元素为滚动依据
+					scrub:2,
+					// onUpdate:(v)=>{
+					// 	if(v.progress < 0.1){
+					// 		v.trigger?.classList.remove('active')
+					// 	}else{
+					// 		v.trigger?.classList.add('active')
+					// 		// v.trigger?.classList.add('active')
+					// 	}
+					// }
+				});
+			}
+			gsap.registerPlugin(ScrollTrigger);
+			let tl1 = gsap.timeline();
+			tl1.from(codeTweenText,1, {'margin-top':'30px',opacity:1},)
+			ScrollTrigger.create({
+				trigger: codeTweenText, // 触发器元素
+				start: "top 0%", // 滚动触发器的起始滚动位置
+				end: '200% 20%',   // 滚动触发器的结束滚动位置
+				// markers: true, // 开启标注功能
+				scrub: true,
+				animation:tl1,
+				scroller:dom,//设置指定元素为滚动依据
+				scrub:2,
+				
+			});
+		})
+    },
+    methods: {
+		
+    },
+});
+</script>
+
+<style lang="less" scoped>
+.homeRecommend_max{
+	position: relative;
+	display: flex;
+	height: 100%;
+	flex-direction: column;
+	.homeRecommend_content_body{
+		flex: 1;
+	}
+}
+.homeRecommend_heade {
+    display: flex;
+	justify-content: space-between;
+	// padding: 0 30px;
+	padding: 0 9rem;
+    width: 100%;
+    height: 7rem;
+	flex-shrink: 0;
+    background: rgba(255, 255, 255, 0.2);
+    // border-bottom: 0.1rem solid rgba(3, 3, 3, 0.1);
+    position: relative;
+    align-items: center;
+
+	z-index: 1049;
+	background-color: #fff;
+	.homeRecommend_right{
+		width: 33%;
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		.started_btn2{
+			color: #000;
+			background: #fff;
+			border: 2px solid #39215b;
+			margin-left: 2rem;
+		}
+	}
+    .homeRecommend_logo {
+        width: 14.4rem;
+        height: 3.2rem;
+		margin-top: 0;
+    }
+    .homeRecommend_right_content {
+        top: 0;
+		left: 0;
+        display: flex;
+		width: 33%;
+		height: 100%;
+		align-items: center;
+		overflow: hidden;
+        .homeRecommend_user_content {
+            display: flex;
+            align-items: center;
+            position: relative;
+            height: 3.7rem;
+			&.marLeft2{
+				margin-left: 2rem;
+			}
+            .username {
+                font-size: 1.8rem;
+                color: #1a1a1a;
+                margin: 0 0.8rem;
+				font-weight: 900;
+				span{
+					margin: .7rem;
+				}
+            }
+            .icon-xiala {
+                font-size: 1.4rem;
+                cursor: pointer;
+				transition: .3s all;
+            }
+            .icon_rotate {
+                -moz-transform: rotate(180deg);
+                -webkit-transform: rotate(180deg);
+                transform: rotate(180deg);
+                animation-direction: 0.5s;
+            }
+        }
+    }
+    
+}
+.homeRecommend_content_body{
+	overflow-y: auto;
+	overflow-x: hidden;
+	&.homeRecommend_content_body::-webkit-scrollbar {
+		display: none;
+	}
+	.homeRecommend_content_body_recommend{
+		// display: flex;
+		// justify-content: center;
+		position: relative;
+		border-bottom: 1px solid #ececec;
+		
+		.content_body_recommend_left,
+		.content_body_recommend_right{
+			position: absolute;
+			top: 0;
+			img{
+				border-radius: 2rem;
+				position: absolute;
+				width: 20px;
+				object-fit: cover;
+			}
+			
+		}
+		--margin:3rem;
+		.content_body_recommend_right{
+			right: 0;
+			.content_body_img1{
+				width: 20rem;
+				top: 10rem;
+				right: calc(20rem + var(--margin));
+			}
+			.content_body_img2{
+				width: 15rem;
+				top: calc(30rem + var(--margin));
+				right: calc(20rem + var(--margin));
+			}
+			.content_body_img3{
+				top: 38rem;
+				width: 30rem;
+				right: calc(-13rem + var(--margin));
+			}
+			.content_body_img4{
+				width: 20rem;
+				top: 51rem;
+				right: calc(20rem + var(--margin));
+			}
+			.content_body_img5{
+				width: 20rem;
+				top: 15rem;
+				right: 0;
+			}
+		}
+		.content_body_recommend_left{
+			left: 0;
+			.content_body_img1{
+				width: 15rem;
+				top: 5rem;
+				left: calc(20rem + var(--margin));
+			}
+			.content_body_img2{
+				width: 25rem;
+				top: calc(20rem + var(--margin));
+				left: calc(20rem + var(--margin));
+			}
+			.content_body_img3{
+				width: 20rem;
+				top: calc(10rem + var(--margin));
+				left: calc(0 + var(--margin));
+			}
+			.content_body_img4{
+				width: 30rem;
+				top: 36rem;
+				left: calc(-13rem + var(--margin));
+			}
+			.content_body_img5{
+				width: 20rem;
+				top: 51rem;
+				left: calc(20rem + var(--margin));
+			}
+			.content_body_img6{
+				width: 20rem;
+				top: 20rem;
+				left: calc(0 + var(--margin));
+			}
+		}
+		.content_body_recommend_center{
+			padding: 20rem 0;
+			text-align: center;
+			width: 50%;
+			position: relative;
+			left: 50%;
+			transform: translateX(-50%);
+			z-index: 2;
+			opacity: 0;
+			.content_body_recommend_center_title{
+				h1{
+					line-height: 1;
+					font-size: 13rem;
+					font-weight: 600;
+					div{
+						color: #341e57;
+					}
+				}
+			}
+			.content_body_recommend_center_btn{
+				display: flex;
+				justify-content: center;
+				cursor: pointer;
+				a{
+					margin: 0 2rem;
+				}
+			}
+		}
+	}
+}
+.homeRecommend_content_adminTop{
+	position: fixed;
+	bottom: 5rem;
+	right: 5rem;
+	width: 7rem;
+	height: 7rem;
+	cursor: pointer;
+	border-radius: 50%;
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+	display: flex;
+    align-items: center;
+    justify-content: center;
+	background: #fff;
+	z-index: 999;
+	i{
+		display: flex;
+		font-size: 3rem;
+		transition: all .3s;
+	}
+	&.homeRecommend_content_adminTop:hover{
+		i{
+			transform: scale(1.2);
+		}
+	}
+}
+
+</style>

src/views/HomeView/HomeView.vue

@@ -117,7 +117,8 @@
 								<div class="right_content_export" v-show="likeDesignCollectionList.length">
 									<!-- <div class="button_second Guide_1_31" @click="exportCanvas()"> -->
 									<div class="button_second Guide_1_31" @click="exportModel()">
-										{{ $t('HomeView.Export') }}
+										<!-- {{ $t('HomeView.Export') }} -->
+										finalize collection
 									</div>
 									<!-- <div
 										:class="[
@@ -194,9 +195,9 @@
 		<KeepAlive>
 			<CollectionModal ref="collectionModal" @finishCollection="finishCollection()"></CollectionModal>
 		</KeepAlive>
+		<productImg ref="productImg" @setTask="setTask"></productImg>
 		<DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail>
 		<ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection>
-		<ExportModel ref="ExportModel" @setTask="setTask"></ExportModel>
 		<!-- 导出缩略图的蒙层 start-->
 		<div class="mark_loading" v-show="isShowMark">
 			<a-spin size="large" />
@@ -227,7 +228,7 @@ import { defineComponent, h, ref, computed ,inject,provide,nextTick,createVNode}
 import CollectionModal from "@/component/HomePage/collectionModal.vue";
 import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
 import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
-import ExportModel from "@/component/HomePage/ExportModel.vue";
+import productImg from "@/component/HomePage/productImg.vue";
 import affiche from "@/component/HomePage/affiche.vue";
 import DesignDetail from "@/component/Detail/DesignDetail.vue";
 // import RobotAssist from "@/component/HomePage/RobotAssist.vue";
@@ -252,10 +253,10 @@ export default defineComponent({
 		NewCollectionReview,
 		DesignDetail,
 		ExportNewCoolection,
-		ExportModel,
 		affiche,
 		// RobotAssist,
-		draggable
+		draggable,
+		productImg
 	},
 	setup(props,{emit}) {
 		const store = useStore();
@@ -1074,8 +1075,10 @@ export default defineComponent({
             document.removeEventListener("click", this.closeShowOperateContent);
         },
 		exportModel(){
-			let exportModel:any = this.$refs.ExportModel
+			
-			exportModel.init()
+			let productImg:any = this.$refs.productImg
+			productImg.productImgMask = true
+			productImg.init()			
 		},
 
 		//打开图片详情

src/views/HomeView/Works.vue

@@ -1,59 +1,27 @@
 <template>
-    <div class="works_page">
+    <div class="works_page" :class="{active:isScroll}">
 		<!-- <div class="modal_title_text">
 			<div>Works</div>
 		</div> -->
-		<div class="modal_title_text">
+		<div class="modal_title_text modal_search">
-			<div v-for="item in worksType" :key="item" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">{{ item.name }}</div>
+			<div v-for="item in worksType" :key="item" v-show="isScroll?true:(item.value != 'myWorks')" class="modal_title_text_assistant" @click="setWorksSelect(item)" :class="{active:item.value == worksSelect}">
-		</div>
+				{{ item.name }}
-        <div class="page_content">
+			</div>
-			<div class="page_content_item" v-for="item,index in worksList" :key="item">
+			<div class="modal_search_menu">
-				<div class="page_content_item_img"  @click.stop="getImgScale(index)">
+				<generalMenu :dataList="menuList" @setprintModel="setprintModel" :item="selectMenu"></generalMenu>
-					<img v-lazy="item.designPythonOutfitUrl" alt="">
-					<div class="delete_like_file_block" >
-						<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
-						<i v-else class="fi fi-sr-heart" @click.stop="likeFile(item,'noLike')"></i>
-					</div>
-				</div>
-				<div class="page_content_item_text">
-					<div class="page_content_item_text_name" :title="item.portfolioName">
-						{{item.portfolioName}}
-					</div>
-					<div class="page_content_item_text_bottom">
-						<div>
-							<svg xmlns="http://www.w3.org/2000/svg" width="2.5rem" height="2.5rem" viewBox="0 0 16 16" fill="none" role="img" :style="{color:'#9e9ea7',fill: 'currentColor'}">
-								<path d="M10.7408 2C13.0889 2 14.6667 4.235 14.6667 6.32C14.6667 10.5425 8.11856 14 8.00004 14C7.88152 14 1.33337 10.5425 1.33337 6.32C1.33337 4.235 2.91115 2 5.2593 2C6.60745 2 7.48893 2.6825 8.00004 3.2825C8.51115 2.6825 9.39263 2 10.7408 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
-							</svg>
-							<span>321</span>
-							<!-- <span>{{ item.likeNum }}</span> -->
-						</div>
-						<div>
-							<i v-if="true" class="fi fi-sr-thumbs-up" style="color:rgba(158, 158, 167);"></i>
-							<i v-else class="fi fi-rr-social-network"></i>
-							<span>321</span>
-						</div>
-						<div>
-							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" role="img" style="color: #9e9ea7;fill: currentColor;">
-								<path d="M8 3C4.36992 3 1.98789 6.21774 1.18763 7.49059C1.09079 7.64462 1.04237 7.72163 1.01527 7.84042C0.99491 7.92964 0.99491 8.07036 1.01527 8.15958C1.04237 8.27837 1.09079 8.35539 1.18763 8.50941C1.98789 9.78226 4.36992 13 8 13C11.6301 13 14.0121 9.78226 14.8124 8.50941L14.8124 8.50939C14.9092 8.35538 14.9576 8.27837 14.9847 8.15958C15.0051 8.07036 15.0051 7.92964 14.9847 7.84042C14.9576 7.72163 14.9092 7.64462 14.8124 7.4906L14.8124 7.49059C14.0121 6.21774 11.6301 3 8 3Z" fill="currentColor"></path>
-								<path d="M8 10C9.10457 10 10 9.10457 10 8C10 6.89543 9.10457 6 8 6C6.89543 6 6 6.89543 6 8C6 9.10457 6.89543 10 8 10Z" fill="white"></path>
-							</svg>
-							<span>321</span>
-							<!-- <span>{{ item.lookNum }}</span> -->
-						</div>
-						<!-- <div>
-							<i class="fi fi-rr-comment-alt-dots"></i>
-							<span>{{ item.lookNum }}</span>
-						</div> -->
-					</div>
-				</div>
 			</div>
 		</div>
+        <div class="page_content" >
+			<Falls ref="fall" @loadend="isShowMark = false" :isScroll="isScroll"></Falls>
+			<div class="page_loading_box">
+				<span class="page_loading" v-show="!isShowMark"></span>
+				<span v-show="isShowMark">
+					<a-spin size="large" />
+				</span>
+			</div>
+		</div>
+		
 		<newScaleImage ref="newScaleImage"></newScaleImage>
-        <!-- 蒙层 start-->
-        <div class="mark_loading" v-show="isShowMark">
-            <a-spin size="large" />
-        </div>
-        <!-- 蒙层 end-->
 		<!-- <RobotAssist></RobotAssist> -->
 
     </div>
@@ -73,10 +41,21 @@ import newScaleImage from "@/component/WorksPage/newScaleImage.vue";
 import { useI18n } from "vue-i18n";
 import { ElCascader } from 'element-plus'
 import { remove } from "jszip";
+import generalMenu from "@/component/HomePage/generalMenu.vue";
+
+import Falls from "@/component/WorksPage/Falls.vue";
 export default defineComponent({
     components: {
         newScaleImage,
+		Falls,
+		generalMenu,
     },
+	props:{
+		isScroll:{
+			 type:Boolean,
+			 default:true,
+		 },
+	},
     setup() {
 		let filter:any = reactive({
 			worksSelect: 'all',
@@ -93,101 +72,121 @@ export default defineComponent({
 					name: 'freehand sketching',
 					value: 'freehandSketching'
 				},
+				{
+					name: 'My Works',
+					value: 'myWorks'
+				},
 			],
 			worksList: [
 				{
-					imgUrl: 'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad',
+					designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/2.png',
+					text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
 					name:'bbb',
 					lookNum:'999',
 					likeNum:'123',
 					like: true,
 				},
 				{
-					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
+					text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
 					name:'aaa',
 					lookNum:'213',
 					likeNum:'123',
 					like: false,
 				},{
-					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
+					text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
 					name:'aaa',
 					lookNum:'213',
 					likeNum:'123',
 					like: false,
 				},{
-					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
+					text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
 					name:'aaa',
 					lookNum:'213',
 					likeNum:'123',
 					like: false,
 				},{
-					imgUrl: 'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad',
+					designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/2.png',
+					text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
 					name:'aaa',
 					lookNum:'213',
 					likeNum:'123',
 					like: false,
 				},{
-					imgUrl: 'https://www.minio.aida.com.hk:9000/aida-users/83/print/296f19da-bd0c-11ee-9529-b48351119060_0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240507%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240507T072105Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=befcc3f0e0c4c258595df3722d59fbeb6e09cbbf3510b8167a1c56efa5a354ad',
+					designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/2.png',
+					text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
 					name:'bbb',
 					lookNum:'999',
 					likeNum:'123',
 					like: true,
 				},{
-					imgUrl: 'https://cdn.dribbble.com/userupload/14368520/file/original-253a09d85fc1d5ff83c96c046d535ff7.jpg?resize=450x338&vertical=center',
+					designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/11.png',
+					text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
 					name:'bbb',
 					lookNum:'999',
 					likeNum:'123',
 					like: true,
 				},{
-					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
+					text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
 					name:'aaa',
 					lookNum:'213',
 					likeNum:'123',
 					like: false,
 				},{
-					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
+					text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
 					name:'aaa',
 					lookNum:'213',
 					likeNum:'123',
 					like: false,
 				},{
-					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
+					text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
 					name:'aaa',
 					lookNum:'213',
 					likeNum:'123',
 					like: false,
 				},{
-					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
+					text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
 					name:'aaa',
 					lookNum:'213',
 					likeNum:'123',
 					like: false,
 				},{
-					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
+					text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
 					name:'aaa',
 					lookNum:'213',
 					likeNum:'123',
 					like: false,
 				},{
-					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
+					text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
 					name:'aaa',
 					lookNum:'213',
 					likeNum:'123',
 					like: false,
 				},{
-					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
+					text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
 					name:'aaa',
 					lookNum:'213',
 					likeNum:'123',
 					like: false,
 				},{
-					imgUrl: 'https://www.minio.aida.com.hk:9000/aida-results/result_eabc59d4-110a-11ef-bb36-0242ac160002.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20240514%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240514T093050Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=64f2098d15a2ebf5883946c472bbeecaed1a443c618e1f15d92f44b97cb63542',
+					designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/1.png',
+					text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
 					name:'aaa',
 					lookNum:'213',
 					likeNum:'123',
 					like: false,
 				},{
-					imgUrl: 'https://cdn.dribbble.com/userupload/14355607/file/original-930ddf037011f7acd6bd810a5cb6f0fc.jpg?resize=450x338&vertical=center',
+					designPythonOutfitUrl: 'http://121.40.53.210:3000/falls/5.png',
+					text:'ak jsdlasfj ;ljaf;lks j;lsfjl;askdfj l;kajg; lkjsdf;lgk jskl;gf jskl;',
 					name:'aaa',
 					lookNum:'213',
 					likeNum:'123',
@@ -198,9 +197,36 @@ export default defineComponent({
 				page:1,
 				size:10,
 			},
-			isShowMark:false
+			isShowMark:false,
+			isNoData:false,//如果数据为空就不加载
+		})
+		let menuList:any = ref([
+			{
+			    label:'全部',
+				value:'all',
+			},{
+				label:'男装',
+				value:'man',
+			},{
+				label:'女装',
+				value:'woman',
+			},{
+				label:'鞋子',
+				value:'shoes',
+			},{
+				label:'包包',
+				value:'bag',
+			},{
+				label:'配饰',
+				value:'accessories',
+			}
+		])
+		let selectMenu:any = ref({
+			label:'全部',
+			value:'all',
 		})
 		let newScaleImage:any = ref()
+		let fall:any = ref()
 		let setWorksSelect = (val:any) => {
 			filter.worksSelect = val.value
 		}
@@ -211,25 +237,49 @@ export default defineComponent({
 			newScaleImage.value.init(filter.worksList,index)
 		}
 		let getPorfolio = ()=>{
-			let data = filter.getListDate
+			// let data = filter.getListDate
-			Https.axiosPost(Https.httpUrls.getPorfolio, data)
+			// Https.axiosPost(Https.httpUrls.getPorfolio, data)
-                .then((rv) => {
+            //     .then((rv) => {
-					console.log(rv);
+			// 		console.log(rv);
-					filter.worksList = rv.content
+			// 		filter.worksList = rv.content
-                })
+            //     })
-                .catch((rv) => {});
+            //     .catch((rv) => {});
+			if(filter.isShowMark && !filter.isNoData)return
+			filter.isShowMark = true
+			setTimeout(() => {
+				filter.isShowMark = false
+				fall.value.push(filter.worksList);
+			}, 1000);
 		}
 		let {t} = useI18n()
+		let setprintModel= (data:any)=>{
+			selectMenu.value = data
+		}
 		onMounted (()=>{
 			getPorfolio()
+			let worksPage:any = document.querySelector('.works_page')
+			let imgParent:any = document.querySelector('.page_loading')
+			new IntersectionObserver(
+				(entries, observer) => {
+					// 如果不是相交，则直接返回
+					// console.log(entries[0]);
+					if (!entries[0].intersectionRatio) return;
+					getPorfolio()
+				},
+				// { root:worksPage }
+			).observe(imgParent);
 		})
         return {
 			...toRefs(filter),
+			menuList,
+			selectMenu,
 			newScaleImage,
+			fall,
 			setWorksSelect,
 			likeFile,
 			getImgScale,
 			t,
+			setprintModel,
         }
     },
 	data() {
@@ -273,14 +323,20 @@ export default defineComponent({
 	font-size: 14px;
 }
 .works_page {
+	border-radius: 4rem;
     width: 100%;
-	overflow: hidden;
+	// overflow: hidden;
-    height: 100%;
+    // height: 100%;
+	height: auto;
 	padding: 0 9rem;
 	// min-width: 1440px;
 	position: relative;
+	padding-top: 5rem;
+	
 	.modal_title_text{
 		display: flex;
+		margin: 0;
+		padding-bottom: 2.4rem;
 		.modal_title_text_assistant{
 			padding: 1rem 3rem;
 			border-radius: 2rem;
@@ -295,84 +351,36 @@ export default defineComponent({
 			background: #39215b;
 			color: #fff;
 		}
+		.modal_search_menu{
+			margin-left: auto;
+			z-index: 10;
+			.generalMenu_printModel{
+				margin-right: 0;
+			}
+		}
 	}
     .page_content {
         position: relative;
-		display: flex;
+		height: auto;
-		flex-wrap: wrap;
+		background: #f7f8fa;
-		overflow-y: auto;
+		.page_loading_box{
-		height: 125rem;
+			text-align: center;
-		align-content: flex-start;
+			.page_loading{
-		.page_content_item{
+				display: block;
-			display: flex;
+				width: 20px;
-			flex-direction: column;
+				height: 20px;
-			margin-right: 4rem;
-			margin-bottom: 4rem;
-			width: 30rem;
-		}
-		.page_content_item_text,.page_content_item_img{
-			display: flex;
-		}
-		.page_content_item_img{
-			width: 30rem;
-			height: 30rem;
-			overflow: hidden;
-			padding: 2rem 0;
-			justify-content: center;
-			border-radius: 2rem;
-			position: relative;
-			img{
-				// width: 100%;
-				cursor: pointer;
-				max-height: 100%;
-				object-fit: cover;
-				transform: scale(1.15);
-				transition: all 0.5s;
-			}
-			.delete_like_file_block{
-				cursor: pointer;
-			}
-			&:hover{
-				.delete_like_file_block{
-					display: block;
-				}
-				img{
-					transform: scale(1);
-				}
-			}
-		}
-		.page_content_item_text{
-			justify-content: space-between;
-			align-items: center;
-			>div{
-				font-size: 2rem;
-			}
-			.page_content_item_text_name{
-				width: 30%;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-			}
-			.page_content_item_text_bottom{
-				width: 70%;
-				display: flex;
-				align-items: center;
-				justify-content: flex-end;
-				>div{
-					display: flex;
-					align-items: center;
-					font-size: 2rem;
-					margin-right: 1rem;
-					i{
-						display: flex;
-						font-size: 2rem;
-					}
-					span{
-						margin-left: calc(var(--padding) / 2);
-					}
-				}
 			}
 		}
     }
+	&.active{
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		.page_content{
+			overflow-y: auto;
+			width: 100%;
+		}
+	}
+	
 }
 </style>

src/views/HomeView/library.vue

@@ -16,7 +16,7 @@
 										<i :class="[menu.icon]"></i>
 										<div>{{menu.title}}</div>
 									</div>
-									<div v-show="menu.children.length" :class="['icon','iconfont', 'icon-xiala', menu.showChildren?'icon_rotate':'']"></div>
+									<!-- <div v-show="menu.children.length" :class="['icon','iconfont', 'icon-xiala', menu.showChildren?'icon_rotate':'']"></div> -->
 								</div>
 								<div v-show="menu.showChildren && menu.children.length">
 									<div :class="['menu_item','child_menu_item', selectCode==child.code ? 'select_menu_item' :'']" v-for="child in menu.children" :key="child.title" @click="selectMenuItem(child,index)">
@@ -37,10 +37,11 @@
                             </div>
 
                             <div class="librart_headr_right">
-                                <div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'Models'">
+                                <div class="select_block" v-show="selectCode == 'Sketchboard' || selectCode == 'Models'|| selectCode == 'DesignElements'|| selectCode == 'Printboard'" >
 									<a-select
                                         ref="select"
-                                        v-model:value="sex.value"
+										v-show="selectCode != 'DesignElements' && selectCode != 'Printboard'"
+                                        v-model:value="sex"
                                         :options="sexList"
                                         @change="sexChange"
                                     >
@@ -53,10 +54,26 @@
                                     </a-select>
                                     <a-select
                                         ref="select"
-										v-show="selectCode == 'Sketchboard' && uploadGenerate != 'Generate'"
+										v-show="designTypeList[selectCode]?.[0]?.value && selectCode != 'Sketchboard'"
-                                        v-model:value="designType.value"
+                                        v-model:value="designType"
-                                        :options="disignTypeList"
+                                        :options="designTypeList[selectCode]"
                                         @change="handleChange"
+										:fieldNames="{ label: 'name', value: 'value' }"
+                                    >
+                                        <template #suffixIcon
+                                            ><span
+                                                class="icon iconfont icon-xiala"
+                                                style="color: #343579"
+                                            ></span
+                                        ></template>
+                                    </a-select>
+									<a-select
+                                        ref="select"
+										v-show="designTypeList[selectCode]?.[0]?.value && selectCode == 'Sketchboard' && uploadGenerate != 'Generate'"
+                                        v-model:value="designType.value"
+                                        :options="designTypeList[selectCode]"
+                                        @change="handleChange"
+										:fieldNames="{ label: 'name', value: 'value' }"
                                     >
                                         <template #suffixIcon
                                             ><span
@@ -169,57 +186,78 @@
                             </div>
 							<div class="right_content_body" v-show="uploadGenerate !='Upload'">
 								<div class="content_body_header content_body_header_generate">
-									<div class="content_body_header_right" >
+									<div class="content_body_header_right"></div>
-										<div class="content_body_header_right" v-show="selectCode != 'Moodboard'">
+									<div v-show="selectCode == 'Printboard'" class="printModel">
-											<div class="checkboxItem" v-show="selectCode != 'Sketchboard'">
+										<div @click.stop="PrintModel">{{ printModel.name }}</div>
-												<label>
+										<ul v-show="printModel.optype">
-													<input
+											<li class="printModel_item" @click="setprintModel(1)">{{ $t('LibraryPage.Model1') }}</li>
-														type="checkbox"
+											<li class="printModel_item" @click="setprintModel(2)">{{ $t('LibraryPage.Model2') }}</li>
-														v-model="checkbox[0].type"
+											<li class="printModel_item" @click="setprintModel(3)">{{ $t('LibraryPage.Model3') }}</li>
-														@click="setKeyword(0)"
+										</ul>
-													/>
-													<span>{{ $t('LibraryPage.ImageOnly') }}</span>
-												</label>
-											</div>
-											<div class="checkboxItem">
-												<label>
-													<input
-														type="checkbox"
-														v-model="checkbox[1].type"
-														@click="setKeyword(1)"
-													/>
-													<span>{{ $t('LibraryPage.TextOnly') }}</span>
-												</label>
-											</div>
-											<div class="checkboxItem">
-												<label>
-													<input
-														type="checkbox"
-														v-model="checkbox[2].type"
-														@click="setKeyword(2)"
-													/>
-													<span>{{ $t('LibraryPage.TextImage') }}</span>
-												</label>
-											</div>
-										</div>
 									</div>
 									<div class="input_border">
 										<div class="input_box" :class="{active:inputShow}">
-											<input 
+											<div class="input_box_btnBox">
-												class="search_input " 
+												<div class="upload_item">
-												@input="ifMaximumLength" 
+													<div
-												:maxlength='inputShow?0:9999' 
+														class="upload_file_item"
-												:class="{active:checkbox[0].type && selectCode != 'Moodboard'}" 
+														v-for="(file, index) in selectGenerateList"
-												@keydown.enter="getgenerate" :readonly="checkbox[0].type  && selectCode != 'Moodboard'" 
+														:key="file"
-												:placeholder="$t('LibraryPage.inputContent2')" 
+													>
-												v-model="captionGeneration">
+														<div
-											<i class="icon iconfont icon-xiala" :class="{active:isTextarea, forbidden:checkbox[0].type&& selectCode != 'Moodboard'}" @click.stop="setTextareaShow"></i>
+															class="upload_file_item_content"
+															v-show="file?.status === 'uploading'"
+														>
+															<a-spin :indicator="indicator" tip="Uploading..." />
+														</div>
+														<div
+															class="upload_file_item_content"
+															v-show="file?.status === 'done' || file?.base64"
+														>
+															<img :src="file?.imgUrl" class="upload_img" />
+															<div class="delete_like_file_block"  :class="[driver__.driver?'hideEvents':'']">
+																<span class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></span>
+															</div>
+														</div>
+													</div>
+												</div>
+												<input 
+													class="search_input " 
+													@input="ifMaximumLength" 
+													:maxlength='inputShow?0:9999' 
+													@keydown.enter="getgenerate"  
+													@click="inputFocus()"
+													:placeholder="$t('LibraryPage.inputContent2')" 
+													v-model="captionGeneration">
+												<i class="fi fi-br-upload" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
+													<a-upload
+														class="search_upImg"
+														:capture="null"
+														:action="uploadUrl + '/api/element/upload'"
+														list-type="picture-card"
+														:before-upload="beforeUpload"
+														:data="{
+															...upload
+														}"
+														:headers="{Authorization:token}"
+														v-model:file-list="selectGenerateList"
+														multiple
+														:maxCount="1"
+														accept=".jpg,.png,.jpeg,.bmp"
+														@change="generateFileUploadChange"
+													>
+													</a-upload>
+												</i>
+												<i v-show="scene?.value == 'Slogan'" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
+												<i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
+												<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i>
+											</div>
 											<textarea 
 												v-show="isTextarea "
 												class="search_textarea "  
 												@input="ifMaximumLength" 
 												:maxlength='inputShow?0:9999' 
-												@keydown.enter="getgenerate" :readonly="checkbox[0].type  && selectCode != 'Moodboard'" 
+												@keydown.enter="getgenerate" 
 												v-model="captionGeneration"
 											></textarea>
 											<div v-show="!isGenerate[selectCode]" class="generage_btn started_btn" @click.stop="getgenerate">
@@ -232,67 +270,16 @@
 											<div v-show="remGenerate[selectCode]" @click="removeGenerate" class="generage_btn started_btn">
 												{{$t('Generate.Close')}}
 											</div>
-											<span ref="inputShowText"></span>
+											<span class="inputShowText" ref="inputShowText"></span>
 										</div>
-									</div>
+										<div class="search_keyword" v-show="isInputFocus" @click.stop="">
-									<div v-show="selectCode == 'Printboard'" class="printModel">
+											<div class="search_keyword_center">
-										<div @click.stop="PrintModel">{{ printModel.name }}</div>
+												<div class="search_keyword_center_left">
-										<ul v-show="printModel.optype">
+													<div v-for="item in workspace?.keyWord?.[selectCode]" @click.stop="cliSetKeyword(item.name)" class="search_keyword_center_item"> {{item.name}} </div>
-											<li class="printModel_item" @click="setprintModel(1)">{{ $t('LibraryPage.Model1') }}</li>
-											<li class="printModel_item" @click="setprintModel(2)">{{ $t('LibraryPage.Model2') }}</li>
-											<li class="printModel_item" @click="setprintModel(3)">{{ $t('LibraryPage.Model3') }}</li>
-										</ul>
-									</div>
-									<div  v-show="selectCode != 'Moodboard'" class="upload_item">
-										<div
-											class="upload_file_item"
-											v-for="(file, index) in selectGenerateList"
-											:key="file"
-											:class="[file?.checked?'active':'']"
-										>
-											<div
-												class="upload_file_item_content"
-												v-show="file?.status === 'uploading'"
-											>
-												<a-spin :indicator="indicator" tip="Uploading..." />
-											</div>
-											<div class="upload_file_item_content" @click.stop="setSketchboardItem(file)" v-show="file?.status === 'done'">
-												<img :src="file?.imgUrl" class="upload_img" />
-												
-												<div class="delete_file_block rightTop" @click.stop="deleteFile(index)" >
-													<span class="icon iconfont icon-shanchu"></span>
 												</div>
 											</div>
 										</div>
-										
-										<div
-											class="upload_component upload_file_item"
-											v-show="selectGenerateList.length <= 2"
-										>
-											<a-upload
-												:capture="null"
-												:action="uploadUrl + '/api/element/upload'"
-												list-type="picture-card"
-												:before-upload="beforeUpload"
-												:disabled="checkbox[1].type"
-												:data="{
-													...upload
-												}"
-												:headers="{Authorization:token}"
-												v-model:file-list="selectGenerateList"
-												multiple
-												:maxCount="3"
-												accept=".jpg,.png,.jpeg,.bmp"
-												@change="generateFileUploadChange"
-												>
-												<div class="upload_tip_block">
-													<i class="fi fi-br-upload"></i>
-													<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
-												</div>
-											</a-upload>
-										</div>
 									</div>
-									
                                 </div>
 
                                 <div class="content_body_table scroll_style">
@@ -318,7 +305,7 @@
                                                     </div>
 												</div>
                                             </div>
-											<sketchCategory  v-show="selectCode == 'Sketchboard'" :disignTypeList="disignTypeList" :generateList="generateList['Sketchboard']" :item="img"></sketchCategory>
+											<sketchCategory  v-show="selectCode == 'Sketchboard'" :disignTypeList="designTypeList[selectCode]" :generateList="generateList['Sketchboard']" :item="img"></sketchCategory>
                                         </div>
                                         <div class="content_img_name"></div>
                                     </div>
@@ -351,7 +338,7 @@
 </template>
 <script lang="ts">
 import { LoadingOutlined } from "@ant-design/icons-vue";
-import { defineComponent,h ,ref,createVNode,nextTick,provide,computed} from 'vue'
+import { defineComponent,h ,ref,createVNode,nextTick,reactive,provide,computed} from 'vue'
 // import HeaderComponent from "@/component/HomePage/Header.vue";
 import ModelPlacement from '@/component/LibraryPage/ModelPlacement.vue';
 import setLabel from '@/component/LibraryPage/setLabel.vue';
@@ -382,14 +369,15 @@ export default defineComponent({
 		sketchCategory,
     },
     setup() {
-		
+        const store = useStore();
         let menuList = computed(()=>{
 			return [
 				{title:useI18n().t('LibraryPage.Moodboard'),code:'Moodboard',icon:'fi fi-rr-grid',showChildren:false,children:[]},
 				{title:useI18n().t('LibraryPage.Prints'),code:'Printboard',icon:'fi fi-rs-objects-column',showChildren:false,children:[]},
 				// {title:'Sketches',code:'SketchboardFirst',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[{title:'Apparel',code:'Sketchboard'}]},
 				{title:useI18n().t('LibraryPage.Sketches'),code:'Sketchboard',icon:'fi icon iconfont icon-a-waitao_changkuanwaitao11x',showChildren:false,children:[]},
-				// {title:'Market Sketch',code:'MarketingSketch',icon:'icon-fuwushichang',showChildren:false,children:[]},
+				// {title:'Market Sketch',code:'Elements',icon:'icon-fuwushichang',showChildren:false,children:[]},
+				{title:'Design Elements',code:'DesignElements',icon:'fi fi-rs-people',showChildren:false,children:[]},
 				{title:useI18n().t('LibraryPage.Mannequins'),code:'Models',icon:'fi fi-rs-people',showChildren:false,children:[]},
 
 			]
@@ -397,15 +385,32 @@ export default defineComponent({
         let selectImgList:any = ref([])
         let selectCode:any = ref('Moodboard')
         let searchPictureName = ref('')
-        let newSearchPictureName = ref('')
+        let designType:any = ref({
-        let designType:any = ref('Outwear')
+			name:'',
-        let sex:any = ref('Meal')
+			value:''
-		let sexList:any = [
+		})
-               
+        let sex:any = ref({
-            ]
+			label:'',
-        let disignTypeList:any = [
+			value:''
-              
+		})
-            ]
+		const sexList:any = ref([])
+		const printType = computed(() => {
+			return store.state.UserHabit.printType;
+		});
+		const designElementsType = computed(() => {
+			return store.state.UserHabit.designElementsType;
+		});
+		const positionType = computed(() => {
+			return store.state.UserHabit.Position;
+		});
+		
+		let designTypeList:any = ref({
+			Sketchboard:positionType,
+			Moodboard:[],
+			Printboard:printType,
+			Models:[],
+			DesignElements:designElementsType,
+		})
         let imgList = ref([])
         let currentPage:any = ref(1)
         let pageSize:any = ref(18)
@@ -413,32 +418,17 @@ export default defineComponent({
         let uploadUrl:any = ref('')
         let currentUploadFileNum:any = ref(0) //当次上传文件数量
         let isShowMark:any = ref(false) //蒙层
-        let store = useStore();
 		let uploadGenerate:any = ref('Upload')
-		let checkbox = ref([
-            {
-                name: "image",
-                type: true,
-            },
-            {
-                name: "text",
-                type: false,
-            },
-            {
-                name: "text-image",
-                type: false,
-            },
-        ]);
 		let inputShow = ref(false)
 		let generateCheckbox:any = ref()
-		let captionGeneration:any = ref()
+		let captionGeneration:any = ref('')
 		let inputTime = ref()
 		let generateList:any = ref({
 			Sketchboard:[],
 			Moodboard:[],
 			Printboard:[],
-			Models:[]
+			Models:[],
-
+			DesignElements:[],
 		})
 		let selectGenerateList:any = ref([])
 		let printModel = ref({
@@ -449,7 +439,6 @@ export default defineComponent({
 		let {t} = useI18n()
 		let type:any = {
 			selectCode:selectCode,
-			designType:designType
 		}
 		provide('type',type)
 		let value = ref({
@@ -466,27 +455,32 @@ export default defineComponent({
 			Sketchboard:'',
 			Moodboard:'',
 			Printboard:'',
-			Models:''
+			Models:'',
+			DesignElements:'',
 		})
 		let generateProceedList = ref([])
 		let isGenerate:any = ref({
 			Sketchboard:false,
 			Moodboard:false,
 			Printboard:false,
-			Models:false
+			Models:false,
+			DesignElements:false,
 		})
 		let remGenerate:any = ref({
 			Sketchboard:false,
 			Moodboard:false,
 			Printboard:false,
-			Models:false
+			Models:false,
+			DesignElements:false,
 		})
 		let remGenerateTime:any = ref({
 			Sketchboard:'',
 			Moodboard:'',
 			Printboard:'',
-			Models:''
+			Models:'',
+			DesignElements:'',
 		})
+		let scene:any = ref({})
 		let dragIdx:any=ref(0)
 		let getLibraryListInputTime:any = ref()
 		const options:any = ref([
@@ -500,15 +494,15 @@ export default defineComponent({
 			label:'classificationName',
 		}
 		let isTextarea = ref(false)
+		let workspace:any = ref({})
         return {
             menuList,
             selectImgList,
             selectCode,
             searchPictureName,
-			newSearchPictureName,
 			sexList,
 			sex,
-            disignTypeList,
+			designTypeList,
             designType,
             imgList,
             currentPage,
@@ -519,7 +513,6 @@ export default defineComponent({
             isShowMark,
 			store,
 			uploadGenerate,
-			checkbox,
 			inputShow,
 			generateCheckbox,
 			captionGeneration,
@@ -537,11 +530,13 @@ export default defineComponent({
 			isGenerate,
 			remGenerate,
 			remGenerateTime,
+			scene,
 			dragIdx,
 			getLibraryListInputTime,
 			props,
 			options,
 			isTextarea,
+			workspace,
         }
     },
 	data(this_) {
@@ -560,6 +555,7 @@ export default defineComponent({
                 timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
             },
             token: "",
+			isInputFocus:false,
         };
     },
 	watch:{
@@ -585,6 +581,9 @@ export default defineComponent({
 		this.getClass()
 		this.getSex()
         this.token = getCookie("token") || "";
+		this.workspace = computed(()=>{
+			return  this.store?.state?.Workspace?.workspace
+		})
     },
     methods:{
 
@@ -606,31 +605,36 @@ export default defineComponent({
 			})
 		},
 		async getPosition(){
-			let params
+			// let params
-			if(this.sex.value == 'Female'){
+			// if(this.sex.value == 'Female'){
-				params = 'FemalePosition'
+			// 	params = 'FemalePosition'
-			}else{
+			// }else{
-				params = 'MalePosition'
+			// 	params = 'MalePosition'
-			}
+			// }
-			await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
+			this.store.commit('setPosition',this.sex.value)
-				if (rv) {
+			this.designType = this.designTypeList.Sketchboard[0]
-					let arr:any = []
+
-					rv.forEach((item:any) => {
+			// await Https.axiosGet(Https.httpUrls.workspaceenumValues,{params:{enumName:params}}).then((rv: any) => {
-						arr.push({
+			// 	if (rv) {
-							value:item.name,
+			// 		let arr:any = []
-							label:item.value,
+			// 		rv.forEach((item:any) => {
-							name:item.value
+			// 			arr.push({
-						})
+			// 				value:item.name,
-					});
+			// 				label:item.value,
-					this.designType = arr[0]
+			// 				name:item.value
-					this.disignTypeList = arr
+			// 			})
-					// this.workspaceItem.position = this.totalTypeList[0].label
+			// 		});
-				}
+			// 		this.designType = arr[0]
-			})
+			// 		this.designTypeList['Sketchboard'] = arr
+			// 		// this.workspaceItem.position = this.totalTypeList[0].label
+			// 	}
+			// })
 		},
 		likeFile(item:any,str:string){
-            let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? item.category : ''
+			let designType = ''
-
+			if(this.selectCode == 'Sketchboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
+				designType = this.designType.value
+			}
 			if(str == 'like'){
 				let data = {
 					generateDetailId:item.id,
@@ -668,42 +672,29 @@ export default defineComponent({
 					this.total = 0,
 					this.searchPictureName = ''
 					this.imgList = [],
-					// this.sex = 'Female',
-					// this.designType = 'Outwear',
 					this.selectImgList = []
 					this.isTextarea = false
 					this.value.labelValue = []
-					this.getLibraryList('')
+					if(this.designTypeList[this.selectCode].length >= 1){
-					this.getClass()
+						this.designType = this.designTypeList[this.selectCode][0]
+					}else{
+						this.designType = {
+							name:'',
+							value:'',
+						}
+					}
 					if(this.selectCode == 'Models')this.uploadGenerate = 'Upload'
-					
+					if(this.selectCode == 'Printboard')this.uploadGenerate = 'Upload'
+					if(this.selectCode != 'DesignElements'){
+						this.getClass()
+					}
+					this.getLibraryList('')
 					this.captionGeneration = ''
 					this.selectGenerateList = []
-					// this.generateList = {
-					// 	'Sketchboard':[],
-					// 	'Moodboard':[],
-					// 	'Printboard':[]
-					// }
 					this.inputShow = false
 				}
 				this.upload.level1Type = menu.code
             }
-			if(this.selectCode == 'Sketchboard'){
-				this.checkbox=[
-					{
-						name: "image",
-						type: false,
-					},
-					{
-						name: "text",
-						type: true,
-					},
-					{
-						name: "text-image",
-						type: false,
-					},
-				]
-			}
         },
 
 		async sexChange(){
@@ -933,7 +924,10 @@ export default defineComponent({
 			// 	message.info(this.t('isTest.image'));
 			// 	return
 			// }
-            let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType.value : ''
+			let designType = ''
+			if(this.selectCode == 'Sketchboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
+				designType = this.designType.value
+			}
             let new_data = {
                 file:event.file,
                 level1Type:this.selectCode,
@@ -1001,7 +995,10 @@ export default defineComponent({
 			this.value.labelValue.forEach((item:any)=>{
 				labelArr.push(item[item.length-1])
 			})
-            let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType.value : ''
+            let designType = ''
+			if(this.selectCode == 'Sketchboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Printboard'){
+				designType = this.designType.value
+			}
             let data = {
 				classificationIdList:labelArr,
                 level1Type:this.selectCode,
@@ -1020,13 +1017,12 @@ export default defineComponent({
             this.isShowMark = true
             Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
                 (rv: any) => {
-					if(rv.content.length == 0 && this.currentPage != 1){
+					if(rv.content?.length == 0 && this.currentPage != 1){
 						this.currentPage = 1
 						this.getLibraryList('')
 					}else{
 						this.imgList = rv.content
 						this.total = rv.total
-						this.newSearchPictureName = this.searchPictureName
 						this.isShowMark = false
 					}
                 }
@@ -1050,25 +1046,17 @@ export default defineComponent({
         placementClick(data:any){
             let placementModal:any = isMoible() ? this.$refs.ModelPlacementMobile : this.$refs.ModelPlacement
             placementModal.showPlacementModal(data,this.sex)
-        },
-		//generate
-		setKeyword(num: any) {
-            this.checkbox.forEach((v: any) => {
-                v.type = false;
-            });
-			nextTick().then(()=>{
-				this.checkbox[num].type = true
-				if(this.checkbox[1].type){
-					this.selectGenerateList.forEach((v:any)=>{
-						v.checked = false
-					})
-				}
-			})
         },
 		setTextareaShow(){
-			if(this.checkbox[0].type && this.selectCode != 'Moodboard') return
 			this.isTextarea = !this.isTextarea
 		},
+		cliSetKeyword(value:any){
+			let str = ''
+			if(this.captionGeneration[this.captionGeneration.length-1] != ',' && this.captionGeneration.length != 0){
+				str = ','
+			}
+			this.captionGeneration += str + value
+		},
 		ifMaximumLength(){
 			clearTimeout(this.inputTime)
 			this.inputTime = setTimeout(()=>{
@@ -1080,16 +1068,41 @@ export default defineComponent({
 				}
 			},500)
 		},
+		inputFocus(){
+			if(this.isInputFocus) return
+		    this.isInputFocus = true
+			let setDomCli = ()=>{
+				this.isInputFocus = false
+				document.removeEventListener('click',setDomCli)
+			}
+			setTimeout(()=>{
+				document.addEventListener('click',setDomCli)
+			},200)
+		},
 		generateFileUploadChange(data:any){
 			let file = data.file;
 			let bor = true
             if (file.status === "done") {
                 let res:any = JSON.parse(file.xhr.response);
 				if(res.errCode == 0){
+					let category:any={
+						value:'',
+						name:'',
+					}
 					file.id = res.data.id;
 					file.imgUrl = res.data.url;
 					file.resData = res.data;
 					file.type_ = "upload";
+					if(this.designTypeList[this.selectCode] && this.selectCode == 'Sketchboard'){
+						this.designTypeList[this.selectCode].forEach((item:any) => {
+							if(item.name == res.data.level2Type){
+								category.value = item?.value
+								category.name = item?.name
+							}
+						});
+					}
+					file.categoryValue = category?.value;
+					file.category = category?.name;
 				}else{
 					bor = false
 				}
@@ -1115,21 +1128,6 @@ export default defineComponent({
 		   this.selectGenerateList.splice(index, 1);
 
         },
-		setSketchboardItem(item:any){
-			if(this.checkbox[1].type){
-				return
-			}
-			if(item.checked){
-				item.checked = false
-			}else{
-				this.selectGenerateList.forEach((v:any)=>{
-					if(v.checked){
-						v.checked = false
-					}
-				})
-				item.checked = true
-			}
-		},
 		PrintModel(){
 			if(!this.printModel.optype){
 				document.addEventListener('click',this.removePrintModel)
@@ -1154,79 +1152,36 @@ export default defineComponent({
 			if(this.isGenerate[selectCodeStr]){
 				return
 			}
-			let arr = ["Painting Style","Illustration Style","Real Style"]
+			let level2Type = ''
-			let generateType = this.checkbox.filter((v:any)=>v.type)[0].name
+			let collectionElementId = ''
-			if(selectCodeStr == 'Moodboard'){
+			let base64 = ''
-				generateType = this.checkbox[1].name
+			if(this.selectGenerateList?.[0]){
+				level2Type = this.selectGenerateList[0].categoryValue?this.selectGenerateList[0].categoryValue:''
+				collectionElementId = this.selectGenerateList[0].id
+				if(this.selectGenerateList[0].base64){
+					base64 = this.selectGenerateList[0].imgUrl
+				}
 			}
-			let generageImg = this.selectGenerateList.filter((v:any)=>v.checked)[0]
+			if(this.selectCode == "Sketchboard"){
+				console.log(this.selectGenerateList);
+			}else if(this.selectCode == "Printboard"){
+				level2Type = this.scene?.value
+			}
+			let arr = ["Painting Style","Illustration Style","Real Style"]
 			let data = {
-				generateType:generateType,
+				generateType:'text',
 				designType:'collection',
-				collectionElementId:generageImg?.id,
+				collectionElementId:collectionElementId,
 				level1Type:selectCodeStr,
-				level2Type:selectCodeStr == 'Sketchboard'?this.designType.value:'',
+				level2Type:level2Type,
 				userId:(this?.userInfo as any).userId,
 				isTestUser:this.driver__.driver?false:this.isTest,
 				text:selectCodeStr == 'Printboard'?`${arr[this.printModel.num-1]},${this.captionGeneration}`:this.captionGeneration,
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
 				version:1,//为1就是Print
 				gender:selectCodeStr == 'Sketchboard'?this.sex.value:'',
+				base64:base64,
 			}
-			if(generateType == 'image'){
-				if(generageImg?.id){
-					data.text = arr[this.printModel.num-1]
-				}else{
-					message.info(
-						this.t('LibraryPage.jsContent9')
-					);
-					return
-				}
-			}else if(generateType == 'text'){
-				data.collectionElementId = ''
-				data.level2Type = ''
-				// this.beforeUpload(false)
-				if(this.captionGeneration){
-					let arr = this.captionGeneration.split(/\s+/).length
-					if(arr > 250){
-						message.info(
-							this.t('LibraryPage.jsContent6')
-						);
-					return
-
-					}
-				}else{
-					message.info(
-						this.t('LibraryPage.jsContent7')
-					);
-					return
-				}
-				
-			}else if(generateType == 'text-image'){
-				if(generageImg?.id){
-					if(this.captionGeneration){
-						let arr = this.captionGeneration.split(/\s+/).length
-						if(arr > 250){
-							message.info(
-								this.t('LibraryPage.jsContent6')
-							);
-						return
-
-						}
-					}else{
-						message.info(
-							this.t('LibraryPage.jsContent7')
-						);
-						return
-					}
-				}else{
-					message.info(
-						this.t('LibraryPage.jsContent9')
-					);
-					return
-				}
-			}
-			// this.isShowMark = true
 			this.isGenerate[selectCodeStr] = true
 			this.isTextarea = false
 			Https.axiosPost(Https.httpUrls.generatePrepare, data).then(
@@ -1249,12 +1204,6 @@ export default defineComponent({
 							return
 						}
 					}
-					// rv.uniqueId.forEach((item:any) => {
-					// 	let arr:any = {}
-					// 	arr.taskId = item
-					// 	arr.status = 'execution'
-					// 	this.generateList[selectCodeStr].unshift(arr)
-					// });
 					this.setGenerate(selectCodeStr,rv.uniqueId)
 					
                 }
@@ -1278,7 +1227,7 @@ export default defineComponent({
 							rv.forEach((element:any) => {
 								if(element.status === 'Success'){
 									element.imgUrl = element.url
-									this.disignTypeList.forEach((itemCategory:any) => {
+									this.designTypeList[this.selectCode].forEach((itemCategory:any) => {
 										if(itemCategory.value == element.category){
 											element.categoryValue = itemCategory?.label
 											element.category = itemCategory?.value
@@ -1376,7 +1325,6 @@ export default defineComponent({
 
 		},
 		getClass(){
-			let designType = this.selectCode == 'Sketchboard' || this.selectCode == 'MarketingSketch' ? this.designType.value : ''
 			let data = {
 				"classificationIdList": [],
 				"classificationName": "",
@@ -1449,7 +1397,8 @@ export default defineComponent({
                 display: flex;
 				padding-top: 2rem;
                 .library_body_left{
-                    width: 27.5rem;
+                    // width: 27.5rem;
+					width: 36.5rem;
                     height: 100%;
                     background: rgba(255,255,255,0.4);
 					margin-right: 5rem;
@@ -1715,132 +1664,58 @@ export default defineComponent({
 										}
 									}
 									.input_border{
+										padding-bottom: 0;
 										background: rgba(0, 0, 0, 0);
-										padding: 0;
+										width: 50rem;
-										.input_box{
+										.input_box_btnBox{
-											background:initial;
+											background: #fff;
-											position: relative;
+											align-items: center;
-											padding: 1.5rem 0;
+											.search_input{
-											padding: 0;
-											// &:hover{
-											// 	.search_textarea{
-											// 		display: block
-											// 	}
-											// }
-										
-											input{
-												width: 30rem;
 												height: 3rem;
-												&.active{
-													cursor: no-drop;
-												}
-											}
-											.icon-xiala{
-												display: inline-block;
-
-												cursor: pointer;
-												transition: all .3s;
-												&.active{
-													transform: rotate(180deg);
-												}
-												&.forbidden{
-													cursor: no-drop;
-												}
-											}
-											.search_textarea{
-												z-index:3;
-												height: auto;
-												position: absolute;
-												left: 0;
-												width: 30rem;
-												border-radius: 4px;
-												height: 20rem;
-												top: .5rem;
-												border: 1px solid #dcdfe6;
-												&.forbidden{
-													cursor: no-drop;
-												}
-											}
-											.started_btn{
-											}
-											
-											.generage_btn{
-												margin: 0 3rem;
 											}
 										}
 									}
 									
 									.printModel{
-											font-size: 1.4rem;
+										font-size: 1.4rem;
-											font-weight: 500;
+										font-weight: 500;
-											>div{
+										margin-right: 2rem;
-												width: 13rem;
+										>div{
-												// display: flex;
+											width: 13rem;
-												display: block;
+											// display: flex;
-												border-radius: 1rem;
+											display: block;
-												margin: 0;
+											border-radius: 1rem;
-												border: 2px solid;
+											margin: 0;
+											border: 2px solid;
+											cursor: pointer;
+											white-space: nowrap; 
+											overflow: hidden;
+											text-overflow: ellipsis;
+											padding: 0 1rem;
+											text-align: center;
+										}
+										ul{
+											position: absolute;
+											width: 13rem;
+											text-align: center;
+											margin-top: .3rem;
+											border-radius: 1rem;
+											overflow: hidden;
+											z-index: 3;
+											li{
+												background: #c5c4c8;
+												line-height: 2;
 												cursor: pointer;
 												white-space: nowrap; 
 												overflow: hidden;
 												text-overflow: ellipsis;
 												padding: 0 1rem;
-												text-align: center;
+												&.printModel_item:hover{
-											}
+													background: #949396;
-											ul{
-												position: absolute;
-												width: 13rem;
-												text-align: center;
-												margin-top: .3rem;
-												border-radius: 1rem;
-												overflow: hidden;
-												z-index: 3;
-												li{
-													background: #c5c4c8;
-													line-height: 2;
-													cursor: pointer;
-													white-space: nowrap; 
-													overflow: hidden;
-													text-overflow: ellipsis;
-													padding: 0 1rem;
-													&.printModel_item:hover{
-														background: #949396;
-													}
 												}
 											}
 										}
-									.upload_item{
-										margin-left: 4rem;
-										.upload_file_item{
-											width: 8rem;
-											height: 8rem;
-											margin: 0;
-											margin-right: 2rem;
-											.delete_file_block{
-												width: 3rem;
-												height: 3rem;
-												display: flex;
-												align-items: center;
-												justify-content: center;
-												opacity: 0;
-												span{
-													font-size: 1.4rem;
-												}
-											}
 										}
-										.upload_component{
-											margin: 0;
-										}
-										
-									}
-									.upload_item:hover{
-										.upload_file_item{
-											.delete_file_block{
-												opacity: 1;
-											}
-										}
-
-									}
 								}
 								
                             }