From d41b331e3889fc9b42369295f580a947c80e3d5c Mon Sep 17 00:00:00 2001
From: WangXiaoDong <1627315083@qq.com>
Date: Mon, 21 Aug 2023 10:55:39 +0800
Subject: [PATCH] commit

---
 src/assets/images/homePage/cursor_rotate.png | Bin 0 -> 13757 bytes
 src/assets/images/homePage/dropper.png       | Bin 0 -> 9395 bytes
 src/assets/style/style.css                   | 105 ++-
 src/assets/style/style.less                  | 119 ++-
 src/component/HomePage/ColorboardUpload.vue  | 673 ++++++++++----
 src/component/HomePage/Generate.vue          | 924 ++++++++++++++-----
 src/component/HomePage/Material.vue          |  15 +-
 src/component/HomePage/MoodboardUpload.vue   |  95 +-
 src/component/HomePage/PrintboardUpload.vue  | 713 ++++++++------
 src/component/HomePage/SketchboardUpload.vue | 864 ++++++++++++-----
 src/component/HomePage/collectionModal.vue   |   7 +-
 src/component/HomePage/layout.vue            | 636 +++++++++++--
 src/store/uploadFile/moodboard.ts            |  76 ++
 src/store/uploadFile/uploadFile.ts           | 124 ++-
 src/tool/GO.ts                               |   3 +-
 src/tool/domTurnImg.js                       |  24 +
 src/tool/https.js                            |   9 +-
 vue.config.js                                |   2 +-
 18 files changed, 3227 insertions(+), 1162 deletions(-)
 create mode 100644 src/assets/images/homePage/cursor_rotate.png
 create mode 100644 src/assets/images/homePage/dropper.png
 create mode 100644 src/store/uploadFile/moodboard.ts
 create mode 100644 src/tool/domTurnImg.js

diff --git a/src/assets/images/homePage/cursor_rotate.png b/src/assets/images/homePage/cursor_rotate.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0d2884043b4a3bba844eadd3223b99659653ff6
GIT binary patch
literal 13757
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/homePage/dropper.png b/src/assets/images/homePage/dropper.png
new file mode 100644
index 0000000000000000000000000000000000000000..a44ac5c22aa9544d5ebecf3b20380a288e54955e
GIT binary patch
literal 9395
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
IyZ@R02e4ts1poj5

literal 0
HcmV?d00001

diff --git a/src/assets/style/style.css b/src/assets/style/style.css
index 121f64a1..45135af2 100644
--- a/src/assets/style/style.css
+++ b/src/assets/style/style.css
@@ -114,11 +114,12 @@ input {
   overflow-y: hidden;
 }
 .collection_modal .ant-upload.ant-upload-select-picture-card {
-  width: 16.5rem;
-  height: 16.5rem;
   background: #FFFFFF;
-  border: 0.3rem dashed #EDEDED;
-  margin: 0 2rem 2rem 0;
+  width: 6rem;
+  height: 6rem;
+  border: 0.3rem solid #ededed;
+  border-radius: 10px;
+  margin: 0;
 }
 .collection_modal .ant-upload.ant-upload-select-picture-card .upload_tip_block .icon-jiahao {
   font-size: 3.2rem;
@@ -135,6 +136,102 @@ input {
   width: auto;
   vertical-align: top;
 }
+.collection_modal_body .input_box {
+  display: flex;
+  align-items: center;
+  position: sticky;
+  top: 0;
+  background: #fff;
+  padding-top: 2.5rem;
+  padding-bottom: 2rem;
+}
+.collection_modal_body .input_box input {
+  font-size: 12px;
+  border-radius: 0.5rem;
+  width: 70%;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  padding-left: 1.5rem;
+  border: 0.1rem solid #F1F1F1;
+  font-size: 1.2rem;
+  font-weight: 400;
+}
+.collection_modal_body .input_box inputinput:-moz-placeholder {
+  color: rgba(0, 0, 0, 0.15);
+}
+.collection_modal_body .input_box inputinput:-ms-input-placeholder {
+  color: rgba(0, 0, 0, 0.15);
+}
+.collection_modal_body .input_box inputinput::-webkit-input-placeholder {
+  color: rgba(0, 0, 0, 0.15);
+}
+.collection_modal_body .input_box .generage_btn {
+  margin: 0 auto;
+}
+.collection_modal_body .upload_item {
+  display: flex;
+  flex-wrap: wrap;
+}
+.collection_modal_body .upload_item .upload_file_item {
+  margin: 0 2rem 2rem 0;
+  display: inline-block;
+  width: 10rem;
+  height: 10rem;
+  border: 1px solid #f5f5f5;
+  vertical-align: top;
+  position: relative;
+}
+.collection_modal_body .upload_item .upload_file_item.upload_component {
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-picture-card-wrapper) {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.collection_modal_body .upload_item .upload_file_item :deep(.ant-upload-select-picture-card) {
+  width: 6rem;
+  height: 6rem;
+  border: 0.3rem solid #ededed;
+  border-radius: 10px;
+  margin: 0;
+}
+.collection_modal_body .upload_item .upload_file_item .upload_file_item_content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+.collection_modal_body .upload_item .upload_file_item .upload_file_item_content:hover .delete_file_block {
+  display: block;
+}
+.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .upload_img {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+.collection_modal_body .upload_item .upload_file_item .upload_file_item_content .delete_file_block {
+  display: none;
+  width: 100%;
+  cursor: pointer;
+  height: 3rem;
+  background: rgba(0, 0, 0, 0.2);
+  font-size: 1.6rem;
+  color: #ffffff;
+  line-height: 3rem;
+  text-align: center;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+}
+.collection_modal_body .upload_item .upload_file_item .upload_img_icon {
+  width: 4.6rem;
+}
 .cut_pricture_modal .ant-modal-body {
   height: 65.4rem;
   overflow-y: hidden;
diff --git a/src/assets/style/style.less b/src/assets/style/style.less
index c9073e8b..479bf5d5 100644
--- a/src/assets/style/style.less
+++ b/src/assets/style/style.less
@@ -135,12 +135,12 @@ input{
     }
 
     .ant-upload.ant-upload-select-picture-card{
-        width: 16.5rem;
-        height: 16.5rem;
         background: #FFFFFF;
-        border: 0.3rem dashed #EDEDED;
-        margin: 0 2rem 2rem 0;
-
+		width: 6rem;
+		height: 6rem;
+		border: 0.3rem solid #ededed;
+		border-radius: 10px;
+		margin: 0;
         .upload_tip_block{
             .icon-jiahao{
                 font-size: 3.2rem;
@@ -161,6 +161,115 @@ input{
         vertical-align: top;
     }
 }
+//设计input和上传按钮样式
+.collection_modal_body{
+	.input_box{
+		display: flex;
+		align-items: center;
+		position: sticky;
+		top: 0;
+		background: #fff;
+		padding-top: 2.5rem;
+		padding-bottom: 2rem;
+		input{
+			font-size: 12px;
+			border-radius: .5rem;
+			width: 70%;
+			border: 1px solid rgba(0,0,0,.15);
+			padding-left: 1.5rem;
+			border: 0.1rem solid #F1F1F1;
+			font-size: 1.2rem;
+			font-weight: 400;
+			&input:-moz-placeholder{   
+				color: rgba(0,0,0,.15);   
+			}   
+			
+			&input:-ms-input-placeholder {   
+				color: rgba(0,0,0,.15);   
+			}   
+			
+			&input::-webkit-input-placeholder {   
+				color: rgba(0,0,0,.15);   
+			} 
+		}
+		.generage_btn{
+			margin: 0 auto;
+		}
+
+		
+	}
+	.upload_item{
+		display: flex;
+		flex-wrap: wrap;
+		.upload_file_item {
+			margin: 0 2rem 2rem 0;
+			display: inline-block;
+			// width: 16.5rem;
+			// height: 16.5rem;
+			width: 10rem;
+			height: 10rem;
+			border: 1px solid #f5f5f5;
+			vertical-align: top;
+			position: relative;
+			&.upload_component {
+				border: none;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+			:deep(.ant-upload-picture-card-wrapper) {
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+			}
+			:deep(.ant-upload-select-picture-card) {
+				width: 6rem;
+				height: 6rem;
+				border: 0.3rem solid #ededed;
+				border-radius: 10px;
+				margin: 0;
+			}
+			.upload_file_item_content {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 100%;
+				width: 100%;
+				position: relative;
+
+				&:hover .delete_file_block {
+					display: block;
+				}
+
+				.upload_img {
+					display: block;
+					height: 100%;
+					width: 100%;
+				}
+
+				.delete_file_block {
+					display: none;
+					width: 100%;
+					cursor: pointer;
+					height: 3rem;
+					background: rgba(0, 0, 0, 0.2);
+					font-size: 1.6rem;
+					color: #ffffff;
+					line-height: 3rem;
+					text-align: center;
+					position: absolute;
+					left: 0;
+					bottom: 0;
+				}
+			}
+
+			.upload_img_icon {
+				width: 4.6rem;
+			}
+		}
+	}
+}
 
 //剪裁弹窗
 .cut_pricture_modal{
diff --git a/src/component/HomePage/ColorboardUpload.vue b/src/component/HomePage/ColorboardUpload.vue
index 6472ed28..f02ff455 100644
--- a/src/component/HomePage/ColorboardUpload.vue
+++ b/src/component/HomePage/ColorboardUpload.vue
@@ -1,74 +1,108 @@
 <template>
     <div class="colorboard_upload_modal">
-        <div class="colorboard_upload_left">
-            <div class="upload_left_header">
-                <span class="color_list icon iconfont icon-diaosebanpalette3"></span>
-                <span>My Color Palette</span>
-            </div>
-            <div class="upload_left_content scroll_style">
-                <div class="upload_color_block" v-for="(color,index) in colorList" :key="color">
-                    <div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '']" :style="{background:`rgb(${color?.r},${color?.g},${color?.b})`}"></div>
-                </div>
-            </div>
-        </div>
+		<div class="modal_layout">
+			<div class="modal_text">
+				<div>Thumbnail preview of selected moodboard</div>
+			</div>
+			<div class="modal_img">
+				<div class="modal_img_item" v-for="color,index in colorList" :key="color" >
+					<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`}">
+					</div>
+				</div>
+			</div>
+		</div>
+      
         <div class="colorboard_upload_right">
             <div class="upload_right_content">
                 <div class="right_content_line">
                     <div class="upload_right_header">
-                        <span class="color_edit icon iconfont icon-yansefangan"></span>
-                        <span>Choose Color</span>
+						<i class="color_edit fi fi-bs-comments" ></i>
+                        <span>Palette</span>
                     </div>
                     <div class="color_setting_block">
-                        <Chrome class="chrome_color" v-model="selectColor"></Chrome>
-                        <Slider class="sileder_color" v-model="selectColor"></Slider>
-                        <div class="color_rgb_block">
-                            <div class="rgb_item">R:{{getSelectRGB(selectColor).r}}</div>
-                            <div class="rgb_item">G:{{getSelectRGB(selectColor).g}}</div>
-                            <div class="rgb_item">B:{{getSelectRGB(selectColor).b}}</div>
-                        </div>
-                        
+						<Sketch class="sketch_color" v-model="selectColor"  :show.sync="colorPickerVisible"/>
+                        <!-- <Chrome class="chrome_color" v-model="selectColor"></Chrome> -->
+                        <!-- <Slider class="sileder_color" v-model="selectColor"></Slider> -->
+						<div class="color_block">
+							<div class="color_left" @click="colorBlockHex = !colorBlockHex">
+								<div v-show="colorBlockHex">
+									HEX
+								</div>
+								<div v-show="!colorBlockHex">
+									RGBA
+								</div>
+							</div>
+							<div class="color_right">
+								<div class="color_HEX_block" v-show="colorBlockHex">
+									<div class="color_block_bg" :style="{'background-color':`rgba(${getSelectRGB(selectColor).r},${getSelectRGB(selectColor).g},${getSelectRGB(selectColor).b},${getSelectRGB(selectColor).a})`}"></div>
+									<div>
+										{{getSelectRGB(selectColor).hex}}
+									</div>
+								</div>
+								<div class="color_rgb_block" v-show="!colorBlockHex">
+									<div class="color_block_bg" :style="{'background-color':`rgba(${getSelectRGB(selectColor).r},${getSelectRGB(selectColor).g},${getSelectRGB(selectColor).b},${getSelectRGB(selectColor).a})`}"></div>
+									<div class="rgb_item">{{getSelectRGB(selectColor).r}},</div>
+									<div class="rgb_item">{{getSelectRGB(selectColor).g}},</div>
+									<div class="rgb_item">{{getSelectRGB(selectColor).b}}</div>
+								</div>
+							</div>
+							
+						</div>
                     </div>
 
-                    <div class="color_review_block">
+                    <!-- <div class="color_review_block">
                         <div class="color_review_content" :style="{background: reviewColor?.r || reviewColor?.r===0 ?`rgb(${reviewColor?.r},${reviewColor?.g},${reviewColor?.b})` : 'none'}"></div>
                         <div class="pantong_name" v-show="pantongName">{{pantongName}}</div>
                         <div class="clear_button" @click="clearCurrentColor()">Clear</div>
-                    </div>
+                    </div> -->
                    
                 </div>
 
-                <div class="right_content_line">
+                <div class="right_content_line right_content_line_upload">
                     <div class="upload_right_header">
-                        <span class="color_edit icon iconfont icon-yansefangan"></span>
-                        <span>Upload Color</span>
-                    </div>
-                    <div class="upload_item">
-                        <div class="upload_file_item" v-for="(file) in fileList" :key="file">
-                            <div class="upload_file_item_content" v-show="file.status !== 'done'">
-                                <a-spin  :indicator="indicator" tip="Uploading..."/>
-                            </div>
-                            <div class="upload_file_item_content"  v-show="file.status === 'done'">
-                                <img  :src="file?.imgUrl" class="upload_img" ref="colorImage">
-                                <div class="delete_file_block" @click="deleteFile(index)">Delete</div>
-                            </div>
-                        </div>
-                        <a-upload
-                            v-show="fileList.length < 1"
-                            list-type="picture-card"
-                            :customRequest="function(){}"
-                            @change="fileUploadChange"
-                            :before-upload="beforeUpload"
-                            accept=".jpg,.png,.jpeg,.bmp"
-                            >
-                            <div  class="upload_tip_block">
-                                <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
-                            </div>
-                        </a-upload>
+						<i class="color_edit fi fi-bs-comments" ></i>
+                        <span>Auto Recognize</span>
                     </div>
+					<div class="upload_centetn">
+						<div class="upload_item">
+							<div class="upload_file_item" v-for="(file) in fileList" :key="file">
+								<div class="upload_file_item_content" v-show="file.status !== 'done'">
+									<a-spin  :indicator="indicator" tip="Uploading..."/>
+								</div>
+								<div class="upload_file_item_content"  v-show="file.status === 'done'">
+									<img  :src="file?.imgUrl" class="upload_img" ref="colorImage">
+									<div class="delete_file_block" @click="deleteFile(index)">Delete</div>
+								</div>
+							</div>
+							<a-upload
+								v-show="fileList.length < 1"
+								list-type="picture-card"
+								:customRequest="function(){}"
+								@change="fileUploadChange"
+								:before-upload="beforeUpload"
+								accept=".jpg,.png,.jpeg,.bmp"
+								>
+								<div  class="upload_tip_block">
+									<i class="fi fi-rr-picture"></i>
+								</div>
+							</a-upload>
+						</div>
+						<div class="upload_color">
+							<div v-for="color,index in selectColorList" :key="color" @click="setUplpadColor(color)" class="upload_color_item">
+								<div class="upload_color_item_bg" :style="{'background-color':`rgba(${color.rgba.r},${color.rgba.g},${color.rgba.b},${color.rgba.a})`}">
+								</div>
+								<!-- <div class="upload_color_item_text">{{ pantongNameList[index] }}</div> -->
+								<img src="#" :title="pantongNameList[index]">
+							</div>
+						</div>
+					</div>
                     
-                    <div class="upload_right_header">
-                        <span class="color_edit icon iconfont icon-yansefangan"></span>
-                        <span>Key in Color Code</span>
+                   
+                </div>
+				<div class="right_content_line">
+					<div class="upload_right_header">
+						<i class="color_edit fi fi-bs-comments" ></i>
+                        <span>Color Code</span>
                     </div>
                     <div class="get_color_block">
                         <input class="get_color_input" placeholder="tcx value (e.g.: 19-4052)" v-model="tcxColor" @keydown.enter="getTcxColor()"/>
@@ -76,14 +110,17 @@
                             <span class="icon iconfont icon-huoquduixiang"></span>
                             <span class="get_color_des">Extract Color</span>
                         </div>
+						<div v-show="getColorBg" class="get_color_bg" @click="setUplpadColor(reviewColor)" :style="{'background-color':`rgba(${getSelectRGB(reviewColor).r},${getSelectRGB(reviewColor).g},${getSelectRGB(reviewColor).b},${getSelectRGB(reviewColor).a})`}">
+							<img src="#" :title="pantongName">
+						</div>
                     </div>
-                </div>
+				</div>
             </div>
         </div>
     </div>
 </template>
-<script lang="ts">
-import { Chrome,Slider } from '@ans1998/vue3-color'
+<script>
+import { Chrome,Slider,Sketch,Material,Compact,Swatches,Photoshop } from '@ans1998/vue3-color'
 import { Https } from "@/tool/https";
 import { defineComponent, h,ref } from 'vue'
 import { LoadingOutlined } from '@ant-design/icons-vue';
@@ -95,34 +132,41 @@ import { message,Upload} from 'ant-design-vue';
 export default defineComponent({
     components:{
         Chrome,
-        Slider
+        Slider,
+		Sketch
     },
     setup(){
-        let fileList:any = ref([])
-        let colorList:any = [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]
-        let selectColor:any = ref({rgba:{}}) //顔色选择器默认颜色
+        let fileList = ref([])
+        let colorList = [{},{},{},{},{},{},{},{}]
+        let selectColor = ref({
+			rgba:{},
+		}) //顔色选择器默认颜色
+		let selectColorList = ref({
+		})
         return {
             fileList,
             colorList,
             selectColor,
+			selectColorList,
         }
     },
     watch:{
-        selectColor(newVal:any,oldVal:any){
-            this.reviewColor = newVal.rgba || {}
+        selectColor(newVal,oldVal){
             this.colorList[this.selectIndex] = newVal.rgba
-            let colorList =this.colorList.filter((v:any) => v && Object.keys(v).length)
+            let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
             this.setColorboardList(colorList)
         }
     },
     computed:{
         getSelectRGB(selectColor){
-            return (selectColor:any)=>{
+            return (selectColor)=>{
                 let rgba = selectColor.rgba
                 let data = {
                     r:rgba?.r || rgba?.r===0 ? rgba?.r  : 255,
                     g:rgba?.g || rgba?.g===0 ? rgba?.g  : 255,
                     b:rgba?.b || rgba?.b===0 ? rgba?.b  : 255,
+                    a:rgba?.a || rgba?.a===1 ? rgba?.a  : 1,
+					hex:selectColor.hex == undefined ? '#FFFFFF':selectColor.hex
                 }
                 return data
             }
@@ -135,6 +179,7 @@ export default defineComponent({
             selectIndex:0,//选中的文件索引
             tcxColor:'',
             pantongName:'',//潘通值
+			pantongNameList:[],
             indicator : h(LoadingOutlined, {
                 style: {
                     fontSize: '2.4rem',
@@ -148,22 +193,59 @@ export default defineComponent({
             },
             token:'',
             uploadUrl:'',
-            store:useStore()
+            store:useStore(),
+			colorPickerVisible: true,
+			colorBlockHex:true,
+			getColorBg:false,
         }
     },
     mounted(){
         this.token = getCookie('token') || ''
         this.uploadUrl = getUploadUrl()
+		let dropperDom = document.getElementsByClassName('vc-sketch-color-wrap')[0]
+		dropperDom.addEventListener('click',async ()=>{
+			try {
+				const dropper = new EyeDropper();
+				const result = await dropper.open();
+				let hex = result.sRGBHex.replace("#", "");
+				// 将十六进制颜色码拆分成红、绿、蓝三个部分
+				const r = parseInt(hex.substring(0, 2), 16);
+				const g = parseInt(hex.substring(2, 4), 16);
+				const b = parseInt(hex.substring(4, 6), 16);
+				this.selectColor = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
+				// 返回RGB格式的字符串
+				// return `rgb(${r}, ${g}, ${b})`;
+				// box.style.backgroundColor = label.textContent = result.sRGBHex;
+			} catch (e) {
+				message.error("Your browser does not support it")
+			}
+		})
+		// if ("EyeDropper" in window) {
+		// 	console.log(true);
+		// }
+		// else {
+		// 	console.log(false);
+		// }
     },
     methods:{
+		
         //选择不同的色块
-        selectColorItem(index:any,color:any){
+        selectColorItem(index,color){
+			let hex
+			if(color.r){
+				hex = this.rgbaToHex([color.r,color.g,color.b])
+			}else{
+				hex = '#FFFFFF'
+			}
             this.selectIndex = index
-            this.reviewColor = color?.r  + ''? {r:color.r,g:color.g ,b:color.b } : {}
-            this.selectColor = color?.r + ''? {rgba:{r:color.r,g:color.g,b:color.b,a:1}} : {}
+            this.selectColor = color?.r + ''? {rgba:{r:color.r,g:color.g,b:color.b,a:1},hex:hex} : {hex:''}
             this.fileList = []
             this.tcxColor = ''
             this.pantongName = ''
+            this.pantongNameList = []
+			this.selectColorList= []
+			this.reviewColor= {}
+			this.getColorBg = false
         },
 
         //通过tcx获取颜色
@@ -173,11 +255,15 @@ export default defineComponent({
             }
             Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + this.tcxColor).then((rv) =>{
                 if(rv && rv.name){
-                    this.reviewColor = {r:rv.r, g:rv.g, b:rv.b}
+					// let hex = this.rgbaToHex([color.r,color.g,color.b])
+					let hex = this.rgbaToHex([rv.r,rv.g,rv.b])
+					this.reviewColor = rv?.r + ''? {rgba:{r:rv.r,g:rv.g,b:rv.b,a:1},hex:hex} : {hex:''}
+					this.selectColor  = this.reviewColor
                     this.colorList[this.selectIndex] =  {r:rv.r, g:rv.g, b:rv.b}
                     this.pantongName = rv.name
-                    let colorList =this.colorList.filter((v:any) => Object.keys(v).length)
+                    let colorList =this.colorList.filter((v) => Object.keys(v).length)
                     this.setColorboardList(colorList)
+					this.getColorBg = true
                 }else{
                     message.error("Can't find the TCX color")
                 }
@@ -188,15 +274,17 @@ export default defineComponent({
         clearCurrentColor(){
             this.selectColor = {}
             this.fileList = []
+			this.reviewColor={}
             this.pantongName = ''
+            this.pantongNameList = []
             this.tcxColor = ''
         },
 
-        fileUploadChange(data:any){
+        fileUploadChange(data){
             let file = data.file
             let fileData = file.originFileObj
             var reader = new FileReader();
-            reader.onload = (e:any) => {
+            reader.onload = (e) => {
                 let data_new;
                 if (typeof e.target.result === 'object') {
                 // 把Array Buffer转化为blob 如果是base64不需要
@@ -210,47 +298,110 @@ export default defineComponent({
 
                 setTimeout(()=>{
                     const colorThief = new ColorThief();
-                    let colorImage:any = this.$refs.colorImage
-                    let domImg:any = colorImage[0];
+                    let colorImage = this.$refs.colorImage
+                    let domImg = colorImage[0];
                     let color = colorThief.getColor(domImg)
-                    this.getHsvColor(color)
-                    this.reviewColor = {r:color[0],g:color[1],b:color[2]}
-                    this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1}}
+					let colorHex = this.rgbaToHex(color)
+					let selectColorList = [];
+					let selectColor = colorThief.getPalette(domImg,10)
+					selectColor = selectColor.join('&')
+					selectColor = selectColor.split("&")
+					let colorLi = []
+					new Set(selectColor).forEach((item)=>{
+						colorLi.push(item.split(","))
+					})
+					colorLi.forEach(element => {
+						let colorLiHex = this.rgbaToHex(element)
+						selectColorList.push(
+							{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
+						)
+					});
+					this.selectColorList = selectColorList
+                    this.getHsvColor(selectColorList)
+                    this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
                 },100)
             };
             // 转化为base64S
             reader.readAsDataURL(fileData)
         },
-
-        beforeUpload(file:any){
+		rgbaToHex(rgba) { // rgba转16进制
+            let hex = '#';
+            for (const i of rgba) {
+                hex += Number(i).toString(16).padStart(2, '0');
+            }
+            return hex;
+        },
+		setUplpadColor(color){
+			this.selectColor  = color
+		},
+        beforeUpload(file){
             const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
             if (!isJpgOrPng) {
                 message.error('You can only upload Image file!');
             }
-            const isLt2M = file.size / 1024 / 1024 < 2;
+            const isLt2M = file.size / 1024 / 1024 < 5;
             if (!isLt2M) {
                 message.error('Image must smaller than 5MB!');
             }
             return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
         },
 
-        deleteFile(index:any){
+        deleteFile(index){
             this.fileList.splice(index, 1)
+			this.selectColorList = []
         },
 
         //通过HSV获取颜色
-        getHsvColor(color:any){
-            let hsv = rgbToHsv(color)
+        getHsvColor(color){
+            // let hsv = rgbToHsv(color)
             this.pantongName = ''
-            Https.axiosGet(Https.httpUrls.getRgbByHsv + `?h=${hsv[0]}&s=${hsv[0]}&v=${hsv[1]}`).then((rv) =>{
-                if(rv){
-                    this.pantongName = rv.name
+			// {params:{id:3}}
+			// console.log(color);
+			let colorList = []
+			color.forEach((item,index)=>{
+				let arr = [item.rgba.r,item.rgba.g,item.rgba.b,item.rgba.a]
+				colorList.push(arr)
+			})
+			
+			let hsvList = []
+			colorList.forEach((item)=>{
+				let hsv = rgbToHsv(item)
+				if(hsvList.length == 0){
+				}else{
+					if(hsvList[0].h+5){
+					}
+				}
+				
+				let obj = {
+					h:Number(hsv[0]),
+					s:Number(hsv[1]),
+					v:Number(hsv[2]),
+				}
+				hsvList.push(obj)
+			})
+			// let data = []
+            // Https.axiosGet(Https.httpUrls.getRgbByHsv,{params:hsvList}).then((rv) =>{
+           	// // Https.axiosGet(Https.httpUrls.getRgbByHsv + `?h=${hsv[0]}&s=${hsv[0]}&v=${hsv[1]}`).then((rv) =>{
+            //     if(rv){
+            //         this.pantongName = rv.name
+			// 		console.log(rv);
+            //     }
+            // })
+			Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, hsvList).then(
+                (rv) => {
+					if(rv){
+						rv.forEach(element => {
+							this.pantongNameList.push(element.name) 
+						});
+						console.log(rv);
+					}
                 }
-            })
+            ).catch(res=>{
+            });
         },
 
-        setColorboardList(colorList:any){
-            let  newColorList = colorList.map((v:any)=>{
+        setColorboardList(colorList){
+            let  newColorList = colorList.map((v)=>{
                 let data = {
                     id:'',
                     name:'',
@@ -264,72 +415,68 @@ export default defineComponent({
 
         recollection(){
             let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
-            colorList.forEach((ele:any, index:number) => {
+            colorList.forEach((ele, index) => {
                 this.colorList[index] = ele.rgbValue
             });
-            this.reviewColor = this.colorList[0]
             this.selectColor = {rgba:this.colorList[0]}, //顔色选择器默认颜色
             this.store.commit('setColorboardList',colorList)
-        }
+        },
+		
 
     }
 })
 </script>
 <style lang="less">
 .colorboard_upload_modal{
-    padding: 1rem 1rem 1.8rem 1rem;
+    // padding: 1rem 1rem 1.8rem 1rem;
     height: 100%;
-    background: #F2F3FB;
+    // background: #F2F3FB;
+	position: relative;
     display: flex;
     justify-content: space-between;
-
-    .colorboard_upload_left{
-        width: calc(100% - 48rem);
-        height: 100%;
-        background: #FFFFFF;
-
-        .upload_left_header{
-            padding: 1.4rem 2rem 1.6rem;
-            font-size: 1.6rem;
-            color: #333333;
-            font-weight: bold;
-            display: flex;
-            align-items: center;
-            line-height: 2.4rem;
-            
-            .color_list{
-                font-size: 2.2rem;
-                margin-right: 0.7rem;
-            }
-        }
-
-        .upload_left_content{
-            padding: 1rem 1.6rem;
-            height: calc(100% - 5.4rem);
-            overflow-y: auto;
-
-            .upload_color_block{
-                padding: 0 0.4rem;
-                margin-bottom: 2.6rem;
-                display: inline-block;
-                vertical-align: top;
-
-                .upload_color{
-                    width: 11.5rem;
-                    height: 11.5rem;
-                    border: 0.1rem solid #DCDCEC;
-                    cursor: pointer;
-                }
-
-                .select_upload_color{
-                    border-color: #343579;
-                }
-            }
-        }
-    }
-
+	padding-top: 7rem;
+	.modal_layout{
+		position: absolute;
+		top: 0;
+		left: calc(47% + 3rem);
+		.modal_text{
+			font-size: 1.2rem;
+			font-weight: 400;
+			color: rgba(0, 0, 0, 0.45);
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+		.modal_img{
+			width: 40rem;
+			height: 5rem;
+			overflow-x: hidden;
+			display: flex;
+			&.modal_img::-webkit-scrollbar {
+				display: none;
+			}
+			.modal_img_item{
+				width: 4rem;
+				height: 4rem;
+				margin: 0 1rem 1rem 0;
+				position: relative;
+				cursor: pointer;
+				border: 0.1rem solid #DCDCEC;
+				.select_upload_color{
+					border: 0.1rem solid #343579;
+				}
+				.upload_color{
+					width: 100%;
+					height: 100%;
+				}
+				
+			}
+			
+			
+		}
+	}
     .colorboard_upload_right{
-        width: 47rem;
+        // width: 47rem;
         height: 100%;
         background: #FFFFFF; 
 
@@ -343,22 +490,32 @@ export default defineComponent({
             align-items: center;
 
             .color_edit{
-                font-size: 2.4rem;
-                margin-right: 0.7rem;
+                font-size: 2rem;
+                margin-right: 1rem;
+				position: absolute;
+				left: 0;
             }
 
         }
 
         .upload_right_content{
-            padding: 1rem 2.8rem;
-            height: calc(100% - 5.4rem);
+            // height: calc(100% - 5.4rem);
+			height: 100%;
             overflow-y: auto;
             overflow-x: hidden;
             display: flex;
 
             .right_content_line{
-                margin-bottom: 2.3rem;
-
+				padding-left: 3rem;
+				position: relative;
+				padding-right: 5rem;
+				.upload_centetn{
+					overflow-x: hidden;
+					height: calc(100% - 4.4rem);
+				}
+				.upload_centetn::-webkit-scrollbar {
+					display: none;
+				}
                 .color_review_block{
                     margin-right: 4rem;
 
@@ -393,10 +550,13 @@ export default defineComponent({
                 }
 
                 .upload_file_item{
-                    margin: 0 2rem 2rem 0;
+                    // margin: 0 2rem 2rem 0;
+					margin: 0;
                     display: inline-block;
-                    width: 16.5rem;
-                    height: 16.5rem;
+                    // width: 16.5rem;
+                    // height: 16.5rem;
+					width: 12rem;
+					height: 12rem;
                     border: 1px solid #F5F5F5;
                     vertical-align: top;
 
@@ -417,6 +577,7 @@ export default defineComponent({
                             display: block;
                             max-height: 100%;
                             max-width: 100%;
+							object-fit: cover;
                         }
 
                         .delete_file_block{
@@ -438,14 +599,122 @@ export default defineComponent({
                 .upload_img_icon{
                     width: 4.6rem;
                 }
-
+				.upload_color{
+					display: flex;
+					width: 12rem;
+					flex-wrap: wrap;
+					justify-content: space-between;
+					.upload_color_item{
+						width: 5rem;
+						height: 5rem;
+						position: relative;
+						margin-bottom: 2rem;
+						cursor: pointer;
+						.upload_color_item_bg{
+							width: 5rem;
+							height: 5rem;
+						}
+						img{
+							position: absolute;
+							width: 100%;
+							height: 100%;
+							opacity: 0;
+							top: 0;
+						}
+						// .upload_color_item_text{
+						// 	font-size: 12px;
+						// 	line-height: 1;
+						// 	text-align: center;
+						// }
+						div{
+						}
+					}
+				}
                 .color_setting_block{
-                    width: 16.5rem;
-                    margin-right: 4rem;
-                    margin-bottom: 7rem;
-                    .vc-chrome-body{
-                        display: none;
-                    }
+                    // width: 16.5rem;
+					width: auto;
+					background: #f0eaee;
+
+					border-radius: 10px;
+					overflow: hidden;
+					// box-shadow: 2px 2px 8px #000;
+					box-shadow: 2px 2px 8px rgba(0,0,0,.3);
+					background: linear-gradient(70deg, #eee4f3, #f3f4e6);
+					.sketch_color{
+						box-shadow: none;
+						width: 18rem;
+						background: rgba(0,0,0,0);
+						padding-top: 1rem !important;
+						max-width: 170px;
+						padding: 0;
+						.vc-sketch{
+						}
+						.vc-sketch-saturation-wrap{
+							width: 16rem;
+							height: 16rem;
+							max-height: 170px;
+							max-width: 170px;
+							margin: auto;
+							padding-bottom: 0;
+						}
+						.vc-sketch-presets{
+							display: none;
+						}
+						.vc-botton-container{
+							display: none;
+						}
+						.vc-chrome-body{
+							display: none;
+						}
+						.vc-sketch-field{
+							display: none;
+							.vc-input__input{
+								text-align: center;
+								padding: .4rem 0;
+								border-radius: 5px;
+							}
+						}
+						.vc-sketch-color-wrap{
+							border-radius: 5px;
+							box-shadow: inset 0 0 0 1px #ccc;
+							.vc-sketch-active-color{
+							}
+							.vc-sketch-active-color{
+								display: none;
+							}
+							.vc-checkerboard{
+								display: none;
+							}
+						}
+						
+						.vc-sketch-color-wrap{
+							background-image: url(@../../../../assets/images/homePage/dropper.png);
+							background-size: 15px;
+							background-repeat: no-repeat;
+							background-position: 50%;
+							cursor: pointer;
+
+						}
+						// .vc-sketch-color-wrap{
+						// 	display: none;
+						// }
+						.vc-sketch-controls{
+							width: 90%;
+							margin: .5rem auto;
+							.vc-sketch-hue-wrap,.vc-sketch-alpha-wrap{
+								.vc-hue{
+									border-radius: 15px;
+								}
+								.vc-alpha{
+									border-radius: 15px;
+									overflow: hidden;
+								}
+							}
+							.vc-sketch-alpha-wrap{
+								margin-top: .5rem;
+							}
+						}
+					}
                     .chrome_color{
                         width: 16.5rem;
                         height: 16.5rem;
@@ -485,17 +754,62 @@ export default defineComponent({
                         
                     }
 
-                    .color_rgb_block{
-                        margin-top: 1rem;
-                        display: flex;
-                        justify-content: space-between;
-                        font-size: 1.6rem;
-                        color: #343579;
+                    .color_block{
+                        // margin-top: 1rem;
+                        // display: flex;
+                        // justify-content: space-between;
+                        // font-size: 1.6rem;
+						width: 100%;
+						padding: 0 5%;
+						padding-bottom: 5%;
+						margin: 0.5rem auto;
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						.color_right{
+							width: 11rem;
+							font-size: 12px;
+							color: #666666;
+							.color_rgb_block{
+								display: flex;
+								.rgb_item{
+									margin-left: .2rem;
+								}
+							}
+						}
+						.color_left{
+							cursor: pointer;
+							color: rgb(153, 153, 153);
+						}
+						.color_right,.color_left{
+							>div{
+								display: flex;
+								align-items: center;
+							}
+							.color_HEX_block,.color_rgb_block{
+								padding: .2rem .5rem;
+								box-shadow: inset 0 0 0 1px #ccc;
+								border-radius: .4rem;
+								justify-content: space-around;
+								text-transform:uppercase;
+								.color_block_bg{
+									width: 1.5rem;
+									height: 1.5rem;
+									// margin-right: .5rem;
+									display: flex;
+									justify-content: space-between;
+								}
+							}
+							.color_block_bg{
+							}
+						}
+						
                     }
                 }
 
                 .get_color_block{
-                    
+                    display: flex;
+					flex-direction: column;
                     .get_color_input{
                         width: 19.4rem;
                         height: 3.8rem;
@@ -534,11 +848,42 @@ export default defineComponent({
                             vertical-align: middle;
                         }
                     }
+					.get_color_bg{
+						width: 18rem;
+						height: 18rem;
+						position: relative;
+						left: 50%;
+						transform: translateX(-50%);
+						margin-top: 1.5rem;
+						img{
+							opacity: 0;
+							position: absolute;
+							top: 0;
+							width: 100%;
+							height: 100%;
+						}
+					}
                 }
             }
 
             .upload_item{
-                margin-bottom: 11.6rem;
+                margin-bottom: 2rem;
+				.ant-upload-picture-card-wrapper{
+					.ant-upload-list{
+						.ant-upload-select-picture-card{
+							// margin: 0 2rem 2rem 0;
+							margin: 0;
+							display: inline-block;
+							width: 12rem;
+							height: 12rem;
+							border: 1px solid #F5F5F5;
+							vertical-align: top;
+							i{
+								zoom: 4;
+							}
+						}
+					}
+				}
             }
         }
     }
diff --git a/src/component/HomePage/Generate.vue b/src/component/HomePage/Generate.vue
index b79b6eac..9b4ba07e 100644
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -1,90 +1,219 @@
 <template>
     <div class="generate">
-		<div v-if="msg.cli == 'Sketchboard'" class="generate_checkbox">
-			<div>
-				<label>
-					<input type="checkbox" v-model="checkbox.imageOnly">
-					<span>Image Only</span>
-				</label>
-			</div>
-			<div>
-				<label>
-					<input type="checkbox" v-model="checkbox.textOnly">
-					<span>Text Only</span>
-				</label>
-			</div>
-			<div>
-				<label>
-					<input type="checkbox" v-model="checkbox.textImage">
-					<span>Text-Image</span>
-				</label>
-			</div>
-		</div>
-		<div v-else class="generage_input">
-			<input class="search_input" placeholder="Promopt input" v-model="searchPictureName"  @keydown.enter="getLibraryList()">
-			<div class="generage_btn started_btn">Generate</div>
-		</div>
-		<div v-if="msg.cli == 'Sketchboard'" class="generage_img">
-			
-		</div>
-		<div v-else class="generage_img">
-			<div class="generage_img_item" v-for="item,index in fileList" :key="item.imgUrl" @click="generageAdd(item)" :class="{active:item?.checked}">
-				<img v-lazy="item.imgUrl" alt="">
-			</div>
-		</div>
+        <div v-if="type_.type2 == 'Sketchboard'||type_.type2 == 'Printboard'"  class="generate_checkbox">
+            <div>
+                <label>
+                    <input
+                        type="checkbox"
+                        v-model="checkbox[0].type"
+                        @click="setKeyword(0)"
+                    />
+                    <span>Image Only</span>
+                </label>
+            </div>
+            <div>
+                <label>
+                    <input
+                        type="checkbox"
+                        v-model="checkbox[1].type"
+                        @click="setKeyword(1)"
+                    />
+                    <span>Text Only</span>
+                </label>
+            </div>
+            <div>
+                <label>
+                    <input
+                        type="checkbox"
+                        v-model="checkbox[2].type"
+                        @click="setKeyword(2)"
+                    />
+                    <span>Text-Image</span>
+                </label>
+            </div>
+        </div>
+        <div v-else class="input_box">
+            <input
+                class="search_input"
+                placeholder="Promopt input"
+                v-model="searchPictureName"
+                @keydown.enter="getLibraryList()"
+            />
+            <div class="generage_btn started_btn">Generate</div>
+        </div>
+        <div v-if="type_.type2 == 'Sketchboard'||type_.type2 == 'Printboard'" class="generage_img">
+            <div class="upload_item">
+                <div
+                    class="upload_file_item"
+                    v-for="(file, index) in sketchboardList"
+                    :key="file"
+					@click.stop="setSketchboardItem(file)"
+					:class="[file?.checked?'active':'',checkboxImage? 'forbidden':'']"
+                >
+                    <div
+                        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'"
+                    >
+                        <img :src="file?.imgUrl" class="upload_img" />
+                        <div class="operate_file_block">
+                            <div class="select_img_type">
+                                <div
+                                    class="select_category"
+                                    @click.stop="showFileCategory(file)"
+                                >
+                                    {{ getSketchLabel(file.category) }}
+                                    <div
+                                        :class="[
+                                            'icon',
+                                            'iconfont',
+                                            'icon-xiala',
+                                            file.categoryShow
+                                                ? 'icon_rotate'
+                                                : '',
+                                        ]"
+                                    ></div>
+                                </div>
+                                <div
+                                    class="category_list"
+                                    v-show="file.categoryShow"
+                                >
+                                    <div
+                                        :class="[
+                                            'category_item',
+                                            file.category == cate.value
+                                                ? 'select_category_item'
+                                                : '',
+                                        ]"
+                                        v-for="(
+                                            cate, index
+                                        ) in sketchCatecoryList"
+                                        :key="index"
+                                        @click.stop="selectFileCategory(file, cate)"
+                                    >
+                                        {{ cate.label }}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div
+                            class="delete_file_block"
+                            @click="deleteFile(index)"
+                        >
+                            <span class="icon iconfont icon-shanchu"></span>
+                        </div>
+                    </div>
+                </div>
+                <div
+                    class="upload_file_item upload_component"
+                    v-show="sketchboardList.length != 8"
+                >
+                    <a-upload
+                        :action="uploadUrl + '/api/element/upload'"
+                        list-type="picture-card"
+                        :data="{
+                            ...upload,
+                        }"
+						:disabled="checkbox[1].type"
+                        :headers="{ Authorization: token }"
+                        v-model:file-list="sketchboardList"
+                        :before-upload="beforeUpload"
+                        multiple
+                        :maxCount="8 - sketchboardList.length"
+                        accept=".jpg,.png,.jpeg,.bmp"
+                        @change="(file) => fileUploadChange(file)"
+                    >
+                        <div
+                            class="upload_tip_block"
+                            v-show="sketchboardList.length != 8"
+                        >
+                            <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 v-else class="generage_img">
+            <div
+                class="generage_img_item"
+                v-for="(item, index) in fileList"
+                :key="item.imgUrl"
+                @click="generageAdd(item)"
+                :class="{ active: item?.checked }"
+            >
+                <img v-lazy="item.imgUrl" alt="" />
+            </div>
+        </div>
     </div>
-    
 </template>
 <script lang="ts">
-import { defineComponent, ref} from 'vue'
+import { LoadingOutlined } from "@ant-design/icons-vue";
+import { message, Upload } from "ant-design-vue";
+import { defineComponent, computed, h, ref, nextTick } from "vue";
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
-import { message } from 'ant-design-vue';
-import GO from '@/tool/GO';
+import GO from "@/tool/GO";
+import { getCookie } from "@/tool/cookie";
+import { getUploadUrl } from "@/tool/util";
 export default defineComponent({
-	props: ["msg"],
-    setup(prop) {
-		// console.log(prop.msg);
-		let checkbox={
-			imageOnly:false,
-			textOnly:false,
-			textImage:false,
-		}
-        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 = ref([
-		{
-			imgUrl:'https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png',
-			id_:1
-			
-		},
-		{
-			imgUrl:'https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png',
-			id_:2
-			
-		},
-		{
-			imgUrl:'https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png',
-			id_:3
-			
-		},{
-			imgUrl:'https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png',
-			id_:4
-			
-		}
-			
-		])
-        return{
+    props: ["msg"],
+    setup() {
+        // console.log(prop.msg);
+        let checkbox = ref([
+            {
+                name: "image",
+                type: false,
+            },
+            {
+                name: "text",
+                type: true,
+            },
+            {
+                name: "text-image",
+                type: false,
+            },
+        ]);
+		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([
+            {
+                imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
+                id_: 1,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
+                id_: 2,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
+                id_: 3,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
+                id_: 4,
+            },
+        ]);
+		let sketchboardList:any = ref([])
+		let collectionElementid = ref()
+		let level2Type = ref('')
+        return {
             imgList,
             selectImgList,
             selectImgListIds,
@@ -96,142 +225,439 @@ export default defineComponent({
             total,
             searcMaterialhName,
             designType,
-			checkbox,
-			store,
-			fileList,
-        }
+            checkbox,
+            store,
+            fileList,
+			sketchboardList,
+			collectionElementid,
+			level2Type,
+			checkboxImage,
+        };
     },
-	mounted(){
-		// this.fileList.forEach((item,index)=>{
-		// 	item.checked = true
-		// 	item.type_ = 'generate'
-		// 	item.id_ = GO.id++
-		// })
-		// this.store.commit("addGenerateFils", this.fileList);
-
-	},
-    methods:{
+    data(prop) {
+        return {
+            indicator: h(LoadingOutlined, {
+                style: {
+                    fontSize: "2.4rem",
+                },
+                spin: true,
+            }),
+            upload: {
+                isPin: 0,
+                level1Type: prop.msg,
+                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            },
+            token: "",
+            uploadUrl: "",
+            moodboarList: computed(() => {
+                return useStore().state.UploadFilesModule.moodboard;
+            }),
+            type_: {
+                type1: "generate",
+                type2: prop.msg,
+            },
+            sketchCatecoryList: [
+                {
+                    value: "Outwear",
+                    label: "Outwear",
+                },
+                {
+                    value: "Blouse",
+                    label: "Blouse",
+                },
+                {
+                    value: "Dress",
+                    label: "Dress",
+                },
+                {
+                    value: "Trousers",
+                    label: "Trousers",
+                },
+                {
+                    value: "Skirt",
+                    label: "Skirt",
+                },
+            ],
+			
+        };
+    },
+    mounted() {
+        // this.fileList.forEach((item,index)=>{
+        // 	item.checked = true
+        // 	item.type_ = 'generate'
+        // 	item.id_ = GO.id++
+        // })
+        // this.store.commit("addGenerateFils", this.fileList);
+        this.token = getCookie("token") || "";
+        this.uploadUrl = getUploadUrl();
+		console.log(getUploadUrl());
 		
-		generageAdd(data:any){
-			data.type_ = 'generate'
-			this.store.commit("addGenerateMaterialFils", data);
-		},
-        getLibraryList(){
-            let data = {
-                level1Type:this.selectCode,
-                level2Type:this.designType,
-                page:this.currentPage,
-                pictureName:this.searchPictureName,
-                size:this.pageSize,
-            }
-            this.isShowLoading = true
-            Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
-                (rv: any) => {
-                    this.imgList = rv.content
-                    this.total = rv.total
-                    this.isShowLoading = false
+    },
+    computed: {
+        getSketchLabel(value: any) {
+            return (value: any) => {
+                let lable = "";
+                for (let item of this.sketchCatecoryList) {
+                    if (item.value === value) {
+                        lable = item.label;
+                        break;
+                    }
                 }
-            ).catch((res)=>{
-                this.isShowLoading = false
+                return lable;
+            };
+        },
+    },
+    methods: {
+        generageAdd(data: any) {
+            data.type_ = this.type_;
+            this.store.commit("addGenerateMaterialFils", data);
+        },
+        beforeUpload(file: any) {
+            const isJpgOrPng =
+                file.type === "image/jpeg" ||
+                file.type === "image/png" ||
+                file.type === "image/jpg" ||
+                file.type === "image/bmp";
+            if (!isJpgOrPng) {
+                message.error("You can only upload Image file!");
+            }
+            const isLt2M = file.size / 1024 / 1024 < 2;
+            if (!isLt2M) {
+                message.error("Image must smaller than 5MB!");
+            }
+            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
+        },
+        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
+				})
+			}
+        },
+        getLibraryList() {
+            // let data = {
+            //     level1Type: this.selectCode,
+            //     level2Type: this.designType,
+            //     page: this.currentPage,
+            //     pictureName: this.searchPictureName,
+            //     size: this.pageSize,
+            // };
+            // this.isShowLoading = true;
+            // Https.axiosPost(Https.httpUrls.queryLibraryPage, data)
+            //     .then((rv: any) => {
+            //         this.imgList = rv.content;
+            //         this.total = rv.total;
+            //         this.isShowLoading = false;
+            //     })
+            //     .catch((res) => {
+            //         this.isShowLoading = false;
+            //     });
+        },
+        fileUploadChange(data: any) {
+			console.log(data);
+			
+            let file = data.file;
+            if (file.status === "done") {
+                let res = JSON.parse(file.xhr.response);
+                file.id = res.data.id;
+                file.imgUrl = res.data.url;
+                file.resData = res.data;
+                file.type_ = "upload";
+                file.id_ = GO.id++;
+                file.category = "Outwear";
+                let fileList = this.sketchboardList.filter(
+                    (v: any) => v.status === "done"
+                );
+                let arr = this.store.state.UploadFilesModule.sketchboard;
+                if (arr.length >= 8) {
+                    message.error("You can select up to 8 images");
+                } else {
+                    // this.store.commit("setSketchboardFile", fileList);
+					this.sketchboardList = fileList
+                    // this.store.commit("clearMoodTemplateId");
+                }
+            } else if (file.status === "error") {
+                let index = -1;
+                this.sketchboardList.forEach((ele: any, index1: any) => {
+                    if (file.uid === ele.uid) {
+                        index = index1;
+                    }
+                });
+                if (index > -1) {
+                    this.sketchboardList.splice(index, 1);
+                }
+                message.error(file.name + "upload failed");
+            }
+        },
+        showFileCategory(file: any) {
+            file.categoryShow = true;
+            document.addEventListener("click", this.hiddenFileCategory);
+        },
+        selectFileCategory(file: any, cate: any) {
+            file.category = cate.value;
+			file.categoryShow = false
+            // this.store.commit("setSketchboardFile", this.sketchboardList);
+        },
+        hiddenFileCategory() {
+            for (let item of this.sketchboardList) {
+                item.categoryShow = false;
+            }
+            document.removeEventListener("click", this.hiddenFileCategory);
         },
 
-        closeModal(){
+		setSketchboardItem(item:any){
+			if(this.checkboxImage){
+				return
+			}
+			if(item.checked){
+				item.checked = false
+			}else{
+				this.sketchboardList.forEach((v:any)=>{
+					if(v.checked){
+						v.checked = false
+					}
+				})
+				item.checked = true
+			}
+			this.collectionElementid = item.id
+			this.level2Type = item.category
+		},
+        deleteFile(item: any) {
+            if (item.type_ == "generate" || item.type_ == "material") {
+                this.store.commit("addGenerateMaterialFils", item);
+            } else {
+                this.sketchboardList =
+                    this.store.state.UploadFilesModule.moodboardFiles;
+                let moodboard;
+                this.store.state.UploadFilesModule.moodboardFiles.forEach(
+                    (items: any, index: Number) => {
+                        if (items.id_ == item.id_) {
+                            moodboard = index;
+                        }
+                    }
+                );
+                this.sketchboardList.splice(moodboard, 1);
+                this.store.commit("setSketchboardFile", this.sketchboardList);
+            }
+            this.store.commit("clearMoodTemplateId");
+        },
+        closeModal() {
             // this.myMaterialModalShow = false
-            this.searchPictureName = ''
-            this.designType = null
-            this.selectImgList = []
-            this.selectImgListIds = []
-            this.imgList = []
-            this.currentPage = 1
-            this.pageSize = 10
-            this.total = 0
-        }
-    }
-})
+            this.searchPictureName = "";
+            this.designType = null;
+            this.selectImgList = [];
+            this.selectImgListIds = [];
+            this.imgList = [];
+            this.currentPage = 1;
+            this.pageSize = 10;
+            this.total = 0;
+        },
+    },
+});
 </script>
 <style lang="less">
-.generate{
-	height: 30rem;
+.generate {
+    height: 30rem;
     overflow-x: hidden;
-	border-right: 1px solid #e5e5e5;
-	&.generate::-webkit-scrollbar{display: none;}
+    border-right: 1px solid #e5e5e5;
+    &.generate::-webkit-scrollbar {
+        display: none;
+    }
 
-	.generate_checkbox,.generage_input{
-		display: flex;
-		align-items: center;
-		position: sticky;
-		top: 0;
-		background: #fff;
-		padding-top: 2.5rem;
-		padding-bottom: 2rem;
-	}
-	.generate_checkbox{
-		div{
-			margin-right: 4rem;
-			label{
-				display: flex;
-				cursor: pointer;
-				input{
-					margin-right: .5rem;
+    .generate_checkbox,
+    .generage_input {
+        display: flex;
+        align-items: center;
+        position: sticky;
+        top: 0;
+        background: #fff;
+        padding-top: 2.5rem;
+        padding-bottom: 2rem;
+        z-index: 2;
+    }
+    .generate_checkbox {
+        div {
+            margin-right: 4rem;
+            label {
+                display: flex;
+                cursor: pointer;
+                input {
+                    margin-right: 0.5rem;
                     padding-left: 1.5rem;
-				}
-				span{
-					font-size: 12px;
-					font-weight: 500;
-				}
-			}
-			
-		}
-	}
-	.generage_input{
-		input{
-			font-size: 12px;
-			padding: .3rem;
-			border-radius: .5rem;
-			width: 70%;
-			border: 1px solid rgba(0,0,0,.15);
-
-			&input:-moz-placeholder{   
-				color: rgba(0,0,0,.15);   
-			}   
-			
-			&input:-ms-input-placeholder {   
-				color: rgba(0,0,0,.15);   
-			}   
-			
-			&input::-webkit-input-placeholder {   
-				color: rgba(0,0,0,.15);   
-			} 
-		}
-		.generage_btn{
-			margin: 0 auto;
-		}
-	}
-	.generage_img{
-		display: flex;
-		flex-wrap: wrap;
-		.generage_img_item{
-			cursor: pointer;
+                }
+                span {
+                    font-size: 12px;
+                    font-weight: 500;
+                }
+            }
+        }
+    }
+    .generage_input {
+    }
+    .generage_img {
+        display: flex;
+        flex-wrap: wrap;
+        .generage_img_item {
+            cursor: pointer;
             margin: 0 2rem 2rem 0;
-			&.active{
-				opacity: .5;
-				// border: 2px solid;
-				border-radius: 1rem;
-				img{
-					transform: scale(.9);
+            &.active {
+					opacity: 0.5;
+					// border: 2px solid;
+					border-radius: 1rem;
+					img {
+						transform: scale(0.9);
+					}
 				}
-			}
-			img{
-				width: 10rem;
-				height: 10rem;
-			}
-		}
-	}
+            img {
+                width: 10rem;
+                height: 10rem;
+            }
+        }
+        .upload_item {
+            .upload_file_item {
+				&.active {
+					opacity: 0.5;
+					// border: 2px solid;
+					border-radius: 1rem;
+					transform: scale(0.9);
+					img {
+					}
+				}
+				&.forbidden{
+					cursor:not-allowed;
+					img{
+						cursor:not-allowed;
+					}
+				}
+                .upload_file_item_content {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    height: 100%;
+                    position: relative;
+                    cursor: pointer;
+                    .upload_img {
+                        display: block;
+                        max-height: 100%;
+                        max-width: 100%;
+                    }
+
+                    .delete_file_block {
+                        display: none;
+                        width: 3.2rem;
+                        height: 3.2rem;
+                        background: rgba(0, 0, 0, 0.6);
+                        border-radius: 0.4rem;
+                        position: absolute;
+                        top: 0.9rem;
+                        right: 0.9rem;
+                        text-align: center;
+                        line-height: 3.2rem;
+                        left: auto;
+                        .icon-shanchu {
+                            font-size: 1.6rem;
+                            color: #fff;
+                        }
+                    }
+
+                    &:hover .delete_file_block {
+                        display: block;
+                    }
+
+                    .operate_file_block {
+                        width: 100%;
+                        height: 3rem;
+                        font-size: 1.6rem;
+                        color: #ffffff;
+                        position: absolute;
+                        left: 0;
+                        bottom: 0;
+
+                        .select_img_type {
+                            height: 100%;
+                            line-height: 3rem;
+                            text-align: center;
+                            background: rgba(0, 0, 0, 0.6);
+                            position: relative;
+
+                            .select_category {
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+
+                                .icon-xiala {
+                                    margin-left: 0.8rem;
+                                }
+                            }
+
+                            .icon_rotate {
+                                -moz-transform: rotate(180deg);
+                                -webkit-transform: rotate(180deg);
+                                transform: rotate(180deg);
+                                animation-direction: 0.5s;
+                            }
+
+                            .category_list {
+                                position: absolute;
+                                width: 100%;
+                                cursor: pointer;
+                                position: absolute;
+                                // top: 3.1rem;
+                                margin-top: 0.2rem;
+                                left: 0;
+                                background: rgba(0, 0, 0, 0.4);
+                                border: 1px solid #343579;
+                                border-radius: 0.8rem;
+                                // overflow: hidden;
+                                z-index: 2;
+                                height: 9rem;
+                                overflow-x: hidden;
+                                &.category_list::-webkit-scrollbar {
+                                    display: none;
+                                }
+
+                                .category_item {
+                                    text-align: left;
+                                    font-size: 1.4rem;
+                                    padding: 1rem 1.9rem;
+                                    line-height: 1.6rem;
+
+                                    &.select_category_item {
+                                        background: linear-gradient(
+                                            160deg,
+                                            #ac2a3b,
+                                            #292161
+                                        );
+                                    }
+
+                                    &:hover {
+                                        background: linear-gradient(
+                                            160deg,
+                                            #ac2a3b,
+                                            #292161
+                                        );
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
-.my_material_modal{
-	border-radius: 2rem;
-    .ant-modal-close{
+.my_material_modal {
+    border-radius: 2rem;
+    .ant-modal-close {
         width: 3.6rem;
         height: 3.6rem;
         position: absolute;
@@ -239,58 +665,58 @@ export default defineComponent({
         right: -1.8rem;
     }
 
-    .ant-modal-header{
+    .ant-modal-header {
         display: none;
     }
 
-    .ant-modal-body{
-        background: #F2F3FB;
+    .ant-modal-body {
+        background: #f2f3fb;
         height: 80vh;
         min-height: 72rem;
         overflow-y: hidden;
         padding: 0;
     }
 
-    .my_material_header{
+    .my_material_header {
         display: flex;
         justify-content: space-between;
         align-items: center;
         width: 100%;
         height: 6.6rem;
-        background: #F7F7F7;
+        background: #f7f7f7;
         padding: 0 3.4rem 0 3.1rem;
 
-        .my_material_title{
+        .my_material_title {
             font-size: 1.8rem;
             color: #030303;
             font-weight: 500;
         }
 
-        .my_material_header_right{
+        .my_material_header_right {
             display: flex;
             justify-content: space-between;
             align-items: center;
 
-            .content_search_block{
+            .content_search_block {
                 margin-right: 5rem;
                 display: flex;
 
-                .search_input{
+                .search_input {
                     width: 30rem;
                     padding-left: 1.5rem;
                     height: 4rem;
                     line-height: 3.8rem;
-                    background: #FFFFFF;
-                    border: 0.1rem solid #F1F1F1;
+                    background: #ffffff;
+                    border: 0.1rem solid #f1f1f1;
                     font-size: 1.6rem;
                     font-weight: 400;
 
                     &::placeholder {
-                        color: #C2C2C2;
+                        color: #c2c2c2;
                     }
                 }
 
-                .search_icon_block{
+                .search_icon_block {
                     width: 6rem;
                     height: 4rem;
                     line-height: 4rem;
@@ -298,29 +724,27 @@ export default defineComponent({
                     background: #343579;
                     cursor: pointer;
 
-                    .icon-sousuo{
+                    .icon-sousuo {
                         font-size: 2rem;
-                        color: #FFFFFF;
+                        color: #ffffff;
                     }
                 }
             }
 
-            .icon_close{
+            .icon_close {
                 color: rgba(174, 178, 183, 1);
                 font-size: 2.4rem;
                 cursor: pointer;
             }
         }
-
-        
     }
 
-    .my_material_content{
+    .my_material_content {
         padding: 0 3rem 3.5rem 3rem;
         height: calc(100% - 6.6rem);
         position: relative;
 
-        .material_content_top{
+        .material_content_top {
             padding: 1.3rem 0 2.1rem;
             height: 7rem;
             display: flex;
@@ -328,45 +752,45 @@ export default defineComponent({
             align-items: center;
             box-sizing: border-box;
 
-            .material_content_top_title{
+            .material_content_top_title {
                 font-size: 20px;
                 color: #030303;
             }
 
-            .material_content_top_right{
+            .material_content_top_right {
                 display: flex;
                 align-items: center;
 
-                .select_block{
-                    background: #FFFFFF;
-                    color: #1A1A1A !important;
+                .select_block {
+                    background: #ffffff;
+                    color: #1a1a1a !important;
                     margin-right: 2.3rem;
 
-                    .icon-xiala{
-                        color: #1A1A1A !important;
+                    .icon-xiala {
+                        color: #1a1a1a !important;
                     }
                 }
 
-                .check_all_block{
+                .check_all_block {
                     display: flex;
                     align-items: center;
                     font-size: 1.6rem;
-                    color: #64686D;
+                    color: #64686d;
                     cursor: pointer;
 
-                    &.check_all{
-                        color: #1A1A1A;
+                    &.check_all {
+                        color: #1a1a1a;
                     }
 
-                    .check_block{
+                    .check_block {
                         width: 2.4rem;
                         height: 2.4rem;
-                        background: #EBECF4;
-                        border: 0.1rem solid #64686D;
+                        background: #ebecf4;
+                        border: 0.1rem solid #64686d;
                         padding: 0.3rem;
                         margin-right: 0.7rem;
 
-                        .check_block_body{
+                        .check_block_body {
                             width: 100%;
                             height: 100%;
                             background: #343579;
@@ -374,22 +798,21 @@ export default defineComponent({
                     }
                 }
             }
-
         }
 
-        .material_content_body{
+        .material_content_body {
             width: 100%;
             height: calc(100% - 19rem);
             overflow-y: auto;
             position: relative;
 
-            .content_img_item{
+            .content_img_item {
                 display: inline-block;
                 vertical-align: top;
                 padding: 0 1.4rem;
                 margin-bottom: 2.8rem;
 
-                .content_img_item_block{
+                .content_img_item_block {
                     border: 0.1rem solid transparent;
                     width: 16.5rem;
                     height: 16.5rem;
@@ -399,22 +822,21 @@ export default defineComponent({
                     position: relative;
                     cursor: pointer;
 
-                    &.select_item_img{
+                    &.select_item_img {
                         border-color: #343579;
                     }
 
-                    .print_content_img{
+                    .print_content_img {
                         width: 100%;
                         height: 100%;
                     }
 
-                    .content_img{
+                    .content_img {
                         max-width: 100%;
                         max-height: 100%;
                     }
-
                 }
-                .content_img_name{
+                .content_img_name {
                     width: 16.5rem;
                     height: 3.5rem;
                     line-height: 3.5rem;
@@ -426,11 +848,9 @@ export default defineComponent({
                     color: #030303;
                 }
             }
-
-            
         }
 
-        .no_data_block{
+        .no_data_block {
             width: 100%;
             height: 100%;
             display: flex;
@@ -441,25 +861,25 @@ export default defineComponent({
             top: 0;
             z-index: 99;
 
-            &.loading_block{
-                background: rgba(0,0,0,0.2);
+            &.loading_block {
+                background: rgba(0, 0, 0, 0.2);
             }
         }
 
-        .material_confirm{
+        .material_confirm {
             width: 9.8rem;
             height: 3.6rem;
             line-height: 3.6rem;
             font-size: 1.4rem;
             text-align: center;
             margin: 0 auto;
-            color: #FFFFFF;
+            color: #ffffff;
             background: #343579;
             cursor: pointer;
             margin-top: 2rem;
         }
 
-        .table_pagination{
+        .table_pagination {
             position: absolute;
             bottom: 3.5rem;
             left: 0;
diff --git a/src/component/HomePage/Material.vue b/src/component/HomePage/Material.vue
index 397ceecc..19b54f05 100644
--- a/src/component/HomePage/Material.vue
+++ b/src/component/HomePage/Material.vue
@@ -69,7 +69,8 @@ import { useStore } from "vuex";
 import GO from '@/tool/GO';
 
 export default defineComponent({
-    setup() {
+    props: ["msg"],
+    setup(prop) {
         let myMaterialModalShow = ref(false)
         let imgList = ref([])
 		let store = useStore()
@@ -122,9 +123,17 @@ export default defineComponent({
             searcMaterialhName,
             designType,
             disignTypeList,
-            boardList
+            boardList,
         }
     },
+	data (prop) {
+		return {
+			type_ : {
+				type1:'material',
+				type2:prop.msg
+			}
+		}
+	},
     methods:{
 
         init(code:any){
@@ -145,7 +154,7 @@ export default defineComponent({
             //     this.selectImgList.splice(index,1)
             //     this.selectImgListIds.splice(index,1)
             // }
-			imgData.type_ = 'material'
+			imgData.type_ = this.type_
 			this.store.commit("addGenerateMaterialFils", imgData);
         },
 
diff --git a/src/component/HomePage/MoodboardUpload.vue b/src/component/HomePage/MoodboardUpload.vue
index 79a304d3..af24090d 100644
--- a/src/component/HomePage/MoodboardUpload.vue
+++ b/src/component/HomePage/MoodboardUpload.vue
@@ -3,21 +3,21 @@
         <div class="modal_left">
             <div class="switch_type_list">
                 <div
-                    @click="open(1)"
+                    @click.stop="open(1)"
                     class="switch_type_item"
                     :class="[openClick == 1 ? 'select_swtich' : '']"
                 >
                     <span>Upload</span>
                 </div>
                 <div
-                    @click="open(2)"
+                    @click.stop="open(2)"
                     class="switch_type_item"
                     :class="[openClick == 2 ? 'select_swtich' : '']"
                 >
                     <span>Library</span>
                 </div>
                 <div
-                    @click="open(3)"
+                    @click.stop="open(3)"
                     class="switch_type_item"
                     :class="[openClick == 3 ? 'select_swtich' : '']"
                 >
@@ -95,11 +95,12 @@
                 v-show="openClick == 2"
                 ref="Material"
                 @confirmSelect="confirmSelect"
+                msg="Moodboard"
             ></Material>
             <Generate
                 v-show="openClick == 3"
                 ref="Generate"
-                :msg="sonData"
+                msg="Moodboard"
             ></Generate>
         </div>
         <div v-show="moodboarList.length" class="modal_right">
@@ -188,15 +189,9 @@ export default defineComponent({
             uploadUrl: "",
             moodTemplateId: "", //模板id
             store: useStore(),
-            sonData: {
-                cli: "Moodboard",
-            },
 			moodb_:moodb.moodb_,
 			moodboarList:computed(()=>{
-			
-				return [...useStore().state.UploadFilesModule.moodboardFiles,
-				...useStore().state.UploadFilesModule.generateFiles,
-				...useStore().state.UploadFilesModule.MaterialFiles]
+				return  useStore().state.UploadFilesModule.moodboard
 			}),
 			
         };
@@ -235,7 +230,7 @@ export default defineComponent({
                 let fileList = this.fileList.filter(
                     (v: any) => v.status === "done"
                 );
-				let arr = [...this.store.state.UploadFilesModule.generateFiles,...this.store.state.UploadFilesModule.MaterialFiles,...this.store.state.UploadFilesModule.moodboardFiles]
+				let arr =  this.store.state.UploadFilesModule.moodboard
 				if(arr.length >= 8){
 					message.error('You can select up to 8 images')
 				}else{
@@ -291,7 +286,7 @@ export default defineComponent({
         },
 
         deleteFile(item: any) {
-			if(item.type_ == 'generate' || item.type_ == 'material'){
+			if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
 				this.store.commit("addGenerateMaterialFils", item);
 				
 			}else{
@@ -303,7 +298,11 @@ export default defineComponent({
 						
 					}
 				})
+				console.log(this.fileList);
+				
 				this.fileList.splice(moodboard,1)
+				console.log(this.fileList);
+
 				this.store.commit("setMoodboardFile", this.fileList);
 			}
             this.store.commit("clearMoodTemplateId");
@@ -328,13 +327,10 @@ export default defineComponent({
 				layout.init()
         },
 		layout(){
-			let arr = [...this.store.state.UploadFilesModule.generateFiles,...this.store.state.UploadFilesModule.MaterialFiles,...this.store.state.UploadFilesModule.moodboardFiles]
+			let arr = this.store.state.UploadFilesModule.moodboard
 			this.layoutList = arr
 			var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
 			let moodb =  this.moodb_[arr.length-1][random]
-			
-			console.log(moodb.filter((item,index)=> item == 'w2h1'));
-			
 			if( moodb.filter((item,index)=> item == 'w2h1').length != 0  && arr.length > 4){
 				this.flex_direction = true
 			}else{
@@ -460,70 +456,7 @@ export default defineComponent({
                 margin-bottom: 1rem;
             }
 
-            .upload_file_item {
-                margin: 0 2rem 2rem 0;
-                display: inline-block;
-                // width: 16.5rem;
-                // height: 16.5rem;
-                width: 10rem;
-                height: 10rem;
-                border: 1px solid #f5f5f5;
-                vertical-align: top;
-                position: relative;
-                &.upload_component {
-                    border: none;
-                }
-                :deep(.ant-upload-picture-card-wrapper) {
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                }
-                :deep(.ant-upload-select-picture-card) {
-                    width: 6rem;
-                    height: 6rem;
-                    border: 0.3rem solid #ededed;
-                    border-radius: 10px;
-                    margin: 0;
-                }
-                .upload_file_item_content {
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    height: 100%;
-                    width: 100%;
-                    position: relative;
-
-                    &:hover .delete_file_block {
-                        display: block;
-                    }
-
-                    .upload_img {
-                        display: block;
-                        height: 100%;
-                        width: 100%;
-                    }
-
-                    .delete_file_block {
-                        display: none;
-                        width: 100%;
-                        cursor: pointer;
-                        height: 3rem;
-                        background: rgba(0, 0, 0, 0.2);
-                        font-size: 1.6rem;
-                        color: #ffffff;
-                        line-height: 3rem;
-                        text-align: center;
-                        position: absolute;
-                        left: 0;
-                        bottom: 0;
-                    }
-                }
-
-                .upload_img_icon {
-                    width: 4.6rem;
-                }
-            }
+            
 
             .upload_max_tip {
                 display: flex;
diff --git a/src/component/HomePage/PrintboardUpload.vue b/src/component/HomePage/PrintboardUpload.vue
index d98060cd..659ed49d 100644
--- a/src/component/HomePage/PrintboardUpload.vue
+++ b/src/component/HomePage/PrintboardUpload.vue
@@ -1,25 +1,26 @@
 <template>
     <div class="printboard_upload_modal">
+		
         <div class="printboard_left_upload">
             <div class="left_upload_header">
                 <div class="upload_header_item">
                     <div class="switch_type_list">
                         <div
-							@click="open(1)"
+							@click.stop="open(1)"
 							class="switch_type_item"
 							:class="[openClick == 1 ? 'select_swtich' : '']"
 						>
 							<span>Upload</span>
 						</div>
 						<div
-							@click="open(2)"
+							@click.stop="open(2)"
 							class="switch_type_item"
 							:class="[openClick == 2 ? 'select_swtich' : '']"
 						>
 							<span>Library</span>
 						</div>
 						<div
-							@click="open(3)"
+							@click.stop="open(3)"
 							class="switch_type_item"
 							:class="[openClick == 3 ? 'select_swtich' : '']"
 						>
@@ -27,10 +28,6 @@
 						</div>
                     </div>
                 </div>
-                <div class="upload_header_item">
-                    <div><span class="select_img_num">{{getPinLength}}</span><span class="select_tip">selected</span></div>
-                    <div v-show="fileList.length>1 || (moodBoards.length && fileList.length)" class="recollection_button" @click="generatePrint()">Generate</div>
-                </div>
             </div>
              <div v-show="openClick == 1" class="printboard_body">
                 <div class="upload_img_body">
@@ -42,7 +39,7 @@
                                 </div>
                                 <div class="upload_file_item_content" @click="selectImg(file)" v-show="file?.status === 'done'">
                                     <img  v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
-                                    <div class="delete_file_block" @click.stop="deleteFile(index,file)">Delete</div>
+                                    <div class="delete_file_block" @click.stop="deleteFile(file)">Delete</div>
                                 </div>
                             </div>
                             <div class="pin_block" v-show="file?.status === 'done'">
@@ -67,44 +64,49 @@
                                 accept=".jpg,.png,.jpeg,.bmp"
                                 @change="fileUploadChange"
                                 >
-                                <div  class="upload_tip_block" >
-                                    <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
+								<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="upload_max_tip">
-                    <span class="icon iconfont icon-zhuyi"></span>
-                    <span>Maximum 15 images can be uploaded, Maximum 2M per image</span>
-                </div>
             </div>
 			<Material v-show="openClick == 2" ref="Material" @confirmSelect="confirmSelect"></Material>
-			<Generate v-show="openClick == 3" ref="Generate" :msg="sonData"></Generate>
+			<Generate v-show="openClick == 3" ref="Generate" msg="Printboard" @generateCheckbox="getgenerateCheckbox"></Generate>
         </div>
-        <div class="generate_print">
-            <div class="generate_print_header">
-                <div class="generate_title">Generate New Print</div>
-                <div class="generate_save_button" @click="savePrint()">Save</div>
-            </div>
-            <div class="generate_print_content_block">
-                <div class="generate_print_content scroll_style">
-                    <div class="image_block" v-for="(img, index) in printImgList" :key="index">
-                        <div class="image_block_content">
-                            <img class="image_body" v-lazy="img.imgUrl" :key="img.imgUrl">
-                            <div class="delete_file_block" @click="deleteGenerateFile(index)">Delete</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="generate_loading_mark" v-show="generateloading">
-                    <a-spin size="large" />
-                </div>
-            </div>
-            
-        </div>
-
-        <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
+		<div class="modal_right">
+			<div class="modal_layout">
+				<div class="modal_text">
+					<div>Thumbnail preview of selected moodboard</div>
+					<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
+				</div>
+				<div class="modal_img">
+					<div class="modal_img_item" v-for="item,index in printboardList" :key="item" @click="deleteFile(item)">
+						<img v-lazy="item.imgUrl">
+						<div class="checked" >
+							<i class="fi fi-rr-trash"></i>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div v-show="openClick == 3" class="modal_accomplish">
+				<div class="input_box">
+					<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
+					<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
+				</div>
+				<div class="modal_img">
+					<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" @click="generageAdd(item)">
+						<img :src="item.imgUrl">
+					</div>
+				</div>
+			</div>
+		</div>
+        <!-- <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper> -->
     </div>
 </template>
 <script lang="ts">
@@ -130,11 +132,32 @@ export default defineComponent({
             printImgList:any = ref([]), //print的印花图片
             moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboardFiles})
         let openClick: any = ref(1);
+		let generateCheckbox:any = ref()
+		let generateList:any = ref([
+		{
+                imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
+                id_: 1,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
+                id_: 2,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
+                id_: 3,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
+                id_: 4,
+            },
+		])
         return {
             fileList,
             printImgList,
             moodBoards,
-			openClick
+			openClick,
+			generateCheckbox,
+			generateList,
         }
     },
     computed:{
@@ -170,9 +193,10 @@ export default defineComponent({
             currentFileNum:0, //当前上传的文件数
             isUpload:false,
             generateloading:false,
-			sonData: {
-                cli: "Printboard",
-            },
+			captionGeneration:'',
+			printboardList:computed(()=>{
+				return  useStore().state.UploadFilesModule.printboard
+			}),
 
         }
     },
@@ -232,16 +256,24 @@ export default defineComponent({
             
         },
 
-        deleteFile(index:any,file:any){
-            this.fileList.splice(index, 1)
-            this.store.commit('setPrintboardFile',this.fileList)
+        deleteFile(item:any){
+            // this.fileList.splice(item, 1)
+            // this.store.commit('setPrintboardFile',this.fileList)
+			if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
+				this.store.commit("addGenerateMaterialFils", item);
+			}else{
+				this.fileList = this.store.state.UploadFilesModule.moodboardFiles
+				let moodboard 
+				this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
+					if(items.id_ == item.id_){
+						moodboard = index
+						
+					}
+				})
+				this.fileList.splice(moodboard,1)
+				this.store.commit("setSketchboardFile", this.fileList);
+			}
         },
-
-        deleteGenerateFile(index:any){
-            this.printImgList.splice(index, 1)
-            this.store.commit('setGeneratePrintFile',this.printImgList)    
-        },
-        
         randomRange(min:any, max:any, num:any) { // min最小值，max最大值 num排除的值
             let index = Math.floor(Math.random() * (max - min)) + min;
             while(index === num){
@@ -478,111 +510,163 @@ export default defineComponent({
             }
             this.store.commit('setPrintboardFile',this.fileList)
             
-        }
-
+        },
+		getgenerateCheckbox(value:any){
+			this.generateCheckbox = value
+		},
+		getgenerate(){
+			
+			let generage:any = this.$refs.Generate
+			let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
+			let data = {
+				generateType:generateType,
+				designType:'',
+				collectionElementId:generage.collectionElementid,
+				level1Type:generage.upload.level1Type,
+				level2Type:generage.level2Type,
+				// text:this.captionGeneration,
+				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+				version:1,//为1就是Print
+			}
+			if(generateType == 'image'||generateType == 'text-image'){
+				if(generage.collectionElementid){
+				}else{
+					message.error(
+						"Please select a picture"
+					);
+					return
+				}
+			}else if(generateType == 'text'){
+				// this.beforeUpload(false)
+				// if(this.captionGeneration){
+				// }else{
+				// 	message.error(
+				// 		"Please enter content"
+				// 	);
+				// 	return
+				// }
+			}
+			if(generateType == 'text'){
+				data.collectionElementId = ''
+				data.level2Type = ''
+			}
+			Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
+                (rv) => {
+					// if(rv){
+						
+					// }
+					console.log(rv);
+					
+                }
+            ).catch(res=>{
+            });
+		},
+		generageAdd(item:any){
+			item.type_ = {
+                type1: "generate",
+                type2: 'Printboard',
+            },
+            this.store.commit("addGenerateMaterialFils", item);
+		}
      }
 
 })
 </script>
 <style lang="less" scoped>
 .printboard_upload_modal{
-    padding: 1rem 1rem 1.8rem 1rem;
-    height: 100%;
-    background: #F2F3FB;
+    // padding: 1rem 1rem 1.8rem 1rem;
+	height: 100%;
     display: flex;
-    justify-content: space-between;
-
     .printboard_left_upload{
-        width: calc(100% - 39.8rem);
-        height: 100%;
-        background: #fff;
-        padding: 0.5rem 2.2rem 2rem 2.6rem;
-        box-sizing: border-box;
-        
-        .left_upload_header{
+        // width: calc(100% - 39.8rem);
+        // height: 100%;
+        // background: #fff;
+        // padding: 0.5rem 2.2rem 2rem 2.6rem;
+        // box-sizing: border-box;
+        padding-top: 4rem;
+        width: 47%;
+        .switch_type_list {
             display: flex;
-            justify-content: space-between;
+            align-items: center;
+            position: relative;
 
-            .upload_header_item{
+            .switch_type_item {
                 display: flex;
                 align-items: center;
-
-                 .switch_type_list{
-                    display: flex;
-                    align-items: center;
-
-                    .switch_type_item{
-                        display: flex;
-                        align-items: center;
-                        padding: 0 2rem;
-                        height: 4rem;
-                        background: #fff;
-                        line-height: 4rem;
-                        font-size: 1.6rem;
-                        margin-right: 2.2rem;
-                        color: #5B5E69;
-                        cursor: pointer;
-
-                        &.select_swtich{
-                            color: #343579;
-                        }
-
-                        .switch_icon{
-                            font-size: 1.8rem;
-                            margin-right: 0.8rem;
-                        }
-                    }
-                    
+                // padding: 0 2rem;
+                height: 4rem;
+                background: #fff;
+                border-radius: 0.8rem;
+                line-height: 4rem;
+                font-size: 1.6rem;
+                // margin-right: 2.2rem;
+                margin-right: 8rem;
+                color: #000;
+                cursor: pointer;
+                position: relative;
+                text-align: center;
+                transform-origin: left;
+                transform: scale(1);
+                transition: 0.3s all;
+                &.switch_type_item::before {
+                    position: absolute;
+                    content: "";
+                    display: block;
+                    background: #000;
+                    height: 3px;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    bottom: 6px;
+                    width: 0px;
+                    transition: 0.3s all;
+                }
+                &.select_swtich {
+                    color: #000;
+                    // font-weight: 900;
+                    transform: scale(1.15);
+                }
+                &.select_swtich::before {
+                    width: 100%;
                 }
 
-                .select_img_num{
-                    font-size: 2rem;
-                    color: #030303;
-                    font-weight: bold;
+                .switch_icon {
+                    font-size: 1.8rem;
+                    margin-right: 0.8rem;
                 }
-
-                .select_tip{
-                    font-size: 1.6rem;
-                    margin-left: 0.9rem;
-                    color: #B7B7B7;
-                }
-
-                .recollection_button{
-                    padding: 0 1rem;
-                    height: 3.2rem;
-                    line-height: 3.2rem;
-                    background: #E6E6F6;
-                    font-size: 1.2rem;
-                    color: #343579;
-                    margin-left: 0.9rem;
-                    cursor: pointer;
-                }
-                
             }
-
-            
         }
 
         .printboard_body{
-            margin-top: 1rem;
             height: calc(100% - 5rem);
-            
+			padding-top: 2.5rem;
+			height: 30rem;
+			overflow-x: hidden;
+			border-right: 1px solid #e5e5e5;
+			&.printboard_body::-webkit-scrollbar {
+            display: none;
+        }
             .upload_img_body{
                 height: calc(100% - 3rem);
                 overflow-y: auto;
                 margin-bottom: 1rem;
+				&.upload_img_body::-webkit-scrollbar {
+					display: none;
+				}
             }
-
+		
             .upload_file_item{
-                margin: 0 2rem 2rem 0;
-                display: inline-block;
-                vertical-align: top;
-
-                .upload_file_img_block{
-                    width: 16.5rem;
-                    height: 16.5rem;
-                    border: 1px solid #F5F5F5;
-                }
+                margin: 0 2rem 4rem 0;
+				// margin: 0 2rem 2rem 0;
+				display: inline-block;
+				width: 10rem;
+				height: 10rem;
+				border: 1px solid #f5f5f5;
+				vertical-align: top;
+				position: relative;
+				img{
+					width: 100%;
+					height: 100%;
+				}
 
                 .pin_block{
                     text-align: center;
@@ -591,168 +675,241 @@ export default defineComponent({
 
                 &.upload_component{
                     border: none;
+					:deep(.ant-upload-picture-card-wrapper) {
+						position: absolute;
+						top: 50%;
+						left: 50%;
+						transform: translate(-50%, -50%);
+					}
+					:deep(.ant-upload-select-picture-card) {
+						width: 6rem;
+						height: 6rem;
+						border: 0.3rem solid #ededed;
+						border-radius: 10px;
+						margin: 0;
+					}
+                }
+				.checked{
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+					cursor: pointer;
+					display: none;
+					justify-content: center;
+					align-items: center;
+				}
+				&.modal_img_item:hover .checked{
+				display: flex;
+			}
+			.upload_file_item_content{
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 100%;
+                position: relative;
+                cursor: pointer;
+                .upload_img{
+                    display: block;
+                    max-height: 100%;
+                    max-width: 100%;
                 }
 
-                .upload_file_item_content{
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    height: 100%;
-                    width: 100%;
-                    position: relative;
-                    cursor: pointer;
-                    
-
-                    &:hover .delete_file_block{
-                        display: block;
-                    }
-
-                    .upload_img{
-                        display: block;
-                        height: 100%;
-                        width: 100%;
-                    }
-
-                    .delete_file_block{
-                        display: none;
-                        width: 100%;
-                        height: 4rem;
-                        background: rgba(0,0,0,0.2);
+                .delete_file_block{
+                    display: none;
+                    width: 3.2rem;
+                    height: 3.2rem;
+                    background: rgba(0,0,0,0.6);
+                    border-radius: 0.4rem;
+                    position: absolute;
+                    top: 0.9rem;
+                    right: 0.9rem;
+                    text-align: center;
+                    line-height: 3.2rem;
+					left: auto;
+                    .icon-shanchu{
                         font-size: 1.6rem;
-                        color: #FFFFFF;
-                        line-height: 4rem;
-                        text-align: center;
-                        position: absolute;
-                        left: 0;
-                        bottom: 0;
+                        color: #fff;
                     }
                 }
 
+                &:hover .delete_file_block{
+                    display: block;
+                }
+
+                .operate_file_block{
+                    width: 100%;
+                    height: 3rem;
+                    font-size: 1.6rem;
+                    color: #FFFFFF;
+                    position: absolute;
+                    left: 0;
+                    bottom: 0;
+
+                    .select_img_type{
+                        height: 100%;
+                        line-height: 3rem;
+                        text-align: center;
+                        background: rgba(0,0,0,0.6);
+                        position: relative;
+
+                        .select_category{
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+
+                            .icon-xiala{
+                                margin-left: 0.8rem;
+                            }
+                        }
+
+                        .icon_rotate{
+                            -moz-transform:rotate(180deg);
+                            -webkit-transform:rotate(180deg);
+                            transform: rotate(180deg);
+                            animation-direction: 0.5s;
+                        }
+
+                        .category_list{
+							position: absolute;
+                            width: 100%;
+                            cursor: pointer;
+                            position: absolute;
+                            // top: 3.1rem;
+							margin-top: .2rem;
+                            left: 0;
+                            background: rgba(0,0,0,0.4);
+                            border: 1px solid #343579;
+                            border-radius: 0.8rem;
+                            // overflow: hidden;
+                            z-index: 2;
+							height: 9rem;
+							overflow-x: hidden;
+							&.category_list::-webkit-scrollbar{display: none;}
+
+                            .category_item{
+                                text-align: left;
+                                font-size: 1.4rem;
+                                padding: 1rem 1.9rem;
+                                line-height: 1.6rem;
+
+                                &.select_category_item{
+                                    background: linear-gradient(160deg, #AC2A3B, #292161);
+                                }
+
+                                &:hover{
+                                    background: linear-gradient(160deg, #AC2A3B, #292161);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
                 .upload_img_icon{
                     width: 4.6rem;
                 }
             }
-
-            .upload_max_tip{
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 1.4rem;
-                color: #030303;
-
-                .icon-zhuyi{
-                    font-size: 1.6rem;
-                    margin-right: 0.7rem;
-                }
-            }
         }
     }
 
-    .generate_print{
-        width: 38.4rem;
-        height: 100%;
-        background: #fff;
-
-        .generate_print_header{
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 1rem 1rem 2.5rem 2.5rem;
-
-            .generate_title{
-                font-size: 1.6rem;
-                font-weight: bold;
-                color: #030303;
-            }
-            .generate_save_button{
-                background: #E6E6F6;
-                padding: 0.1rem;
-                padding: 0 2.7rem;
-                font-size: 1.4rem;
-                height: 3.2rem;
-                line-height: 3.2rem;
-                cursor: pointer;
-                color: #343579;
-
-            }
-        }
-
-        .generate_print_content_block{
-            height: calc(100% - 6.7rem);
-            position: relative;
-
-            .generate_loading_mark{
-                position: absolute;
-                left: 0;
-                top: 0;
-                width: 100%;
-                height: 100%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                background: rgba(0,0,0,0.4);
-                z-index: 2;
-            }
-
-            .generate_print_content{
-                overflow-y: auto;
-                height: 100%;
-                padding:0 0.8rem;
-                position: relative;
-
-                
-
-                .image_block{
-                    display: inline-block;
-                    margin-right: 1.6rem;
-                    margin-bottom: 1.6rem;
-                    width: 16.5rem;
-                    height: 16.5rem;
-                    border: 0.1rem solid #F5F5F5;
-                    vertical-align: top;
-
-                    &:nth-child(2n){
-                        margin-right: 0;
-                    }
-
-                    .image_block_content{
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        width: 100%;
-                        height: 100%;
-                        position: relative;
-
-                        &:hover .delete_file_block{
-                            display: block;
-                        }
-
-                        .delete_file_block{
-                            display: none;
-                            width: 100%;
-                            height: 4rem;
-                            background: rgba(0,0,0,0.2);
-                            font-size: 1.6rem;
-                            color: #FFFFFF;
-                            line-height: 4rem;
-                            text-align: center;
-                            position: absolute;
-                            left: 0;
-                            bottom: 0;
-                            cursor: pointer;
-                        }
-                    }
-
-                    .image_body{
-                        max-width: 100%;
-                        max-height: 100%;
-                    }
-                }
-            }
-        }
-
-        
-    }
+	.modal_right{
+		flex: 1;
+		margin-left: 3rem;
+		.modal_layout,.modal_accomplish{
+			.modal_text{
+				font-size: 1.2rem;
+				font-weight: 400;
+				color: rgba(0, 0, 0, 0.45);
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+		}
+		.modal_layout{
+			.modal_img{
+				width: 40rem;
+				height: 5rem;
+				overflow-x: hidden;
+				display: flex;
+				flex-direction: row;
+				&.modal_img::-webkit-scrollbar {
+					display: none;
+				}
+				.modal_img_item{
+					width: 4rem;
+					height: 4rem;
+					margin: 0 1rem 1rem 0;
+					position: relative;
+					cursor: pointer;
+					img{
+						width: 100%;
+						height: 100%;
+					}
+					.checked{
+						position: absolute;
+						top: 0;
+						left: 0;
+						width: 100%;
+						height: 100%;
+						cursor: pointer;
+						display: none;
+						justify-content: center;
+						align-items: center;
+					}
+					&.modal_img_item:hover .checked{
+						display: flex;
+					}
+				}
+				
+			}
+		}
+		.modal_accomplish{
+			// margin-top: 2rem;
+			height: 30rem;
+			display: flex;
+			flex-direction: column;
+			.modal_text{
+				padding-top: 2rem;
+				padding-block: 2rem;
+			}
+			.input_box{
+				input{
+					&.forbidden{
+						cursor:not-allowed;
+					}
+				}
+			}
+			.modal_img{
+				flex: 1;
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: flex-start;
+				.modal_imgItem{
+					margin: 0 2rem 2rem 0;
+					display: inline-block;
+					width: 10rem;
+					height: 10rem;
+					border: 1px solid #f5f5f5;
+					position: relative;
+					cursor: pointer;
+					img{
+						object-fit: cover;
+						width: 100%;
+						height: 100%;
+					}
+					&.active{
+						opacity: 0.5;
+					// border: 2px solid;
+						border-radius: 1rem;
+						img {
+							transform: scale(0.9);
+						}
+					}
+				}
+			}
+		}
+	}
 }
 
 
diff --git a/src/component/HomePage/SketchboardUpload.vue b/src/component/HomePage/SketchboardUpload.vue
index cd716d59..213295a8 100644
--- a/src/component/HomePage/SketchboardUpload.vue
+++ b/src/component/HomePage/SketchboardUpload.vue
@@ -1,306 +1,600 @@
 <template>
     <div class="sketchboard_upload_modal">
-        <div class="switch_type_list">
-            <div class="switch_type_item select_swtich">
-                <span>Upload</span>
+        <div class="modal_left">
+            <div class="switch_type_list">
+                <div
+                    @click.stop="open(1)"
+                    class="switch_type_item"
+                    :class="[openClick == 1 ? 'select_swtich' : '']"
+                >
+                    <span>Upload</span>
+                </div>
+                <div
+                    @click.stop="open(2)"
+                    class="switch_type_item"
+                    :class="[openClick == 2 ? 'select_swtich' : '']"
+                >
+                    <span>Library</span>
+                </div>
+                <div
+                    @click.stop="open(3)"
+                    class="switch_type_item"
+                    :class="[openClick == 3 ? 'select_swtich' : '']"
+                >
+                    <span>Generate</span>
+                </div>
             </div>
-             <div @click="openLibrary()" class="switch_type_item">
-                <span>My Library</span>
-            </div>
-        </div>
-
-         <div class="sketchboard_body">
-            <div class="upload_img_body scroll_style">
-                <div class="upload_item">
-                    <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" v-show="file?.status === 'done'">
-                            <img  :src="file?.imgUrl" class="upload_img">
-                            <div class="operate_file_block" >
-                                <!-- <div class="delete_file_block" @click="deleteFile(index)">Delete</div> -->
-                                <div class="select_img_type">
-                                    <div class="select_category" @click.stop="showFileCategory(file)">
-                                        {{getSketchLabel(file.category)}}
-                                         <div :class="['icon','iconfont', 'icon-xiala', file.categoryShow?'icon_rotate':'']"></div>
-                                    </div>
-                                    <div class="category_list" v-show="file.categoryShow">
-                                        <div :class="['category_item', file.category == cate.value?'select_category_item':'']"  v-for="(cate,index) in sketchCatecoryList" :key="index" @click="selectFileCategory(file,cate)">{{cate.label}}</div>
+            <div v-show="openClick == 1" class="sketchboard_body">
+                <div class="upload_img_body scroll_style">
+                    <div class="upload_item">
+                        <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"
+                                v-show="file?.status === 'done'"
+                            >
+                                <img :src="file?.imgUrl" class="upload_img" />
+                                <div class="operate_file_block">
+                                    <div class="select_img_type">
+                                        <div
+                                            class="select_category"
+                                            @click.stop="showFileCategory(file)"
+                                        >
+                                            {{ getSketchLabel(file.category) }}
+                                            <div
+                                                :class="[
+                                                    'icon',
+                                                    'iconfont',
+                                                    'icon-xiala',
+                                                    file.categoryShow
+                                                        ? 'icon_rotate'
+                                                        : '',
+                                                ]"
+                                            ></div>
+                                        </div>
+                                        <div
+                                            class="category_list"
+                                            v-show="file.categoryShow"
+                                        >
+                                            <div
+                                                :class="[
+                                                    'category_item',
+                                                    file.category == cate.value
+                                                        ? 'select_category_item'
+                                                        : '',
+                                                ]"
+                                                v-for="(
+                                                    cate, index
+                                                ) in sketchCatecoryList"
+                                                :key="index"
+                                                @click="
+                                                    selectFileCategory(
+                                                        file,
+                                                        cate
+                                                    )
+                                                "
+                                            >
+                                                {{ cate.label }}
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
+                                <div
+                                    class="delete_file_block"
+                                    @click="deleteFile(file)"
+                                >
+                                    <span
+                                        class="icon iconfont icon-shanchu"
+                                    ></span>
+                                </div>
                             </div>
-                            <div class="delete_file_block" @click="deleteFile(index)">
-                                <span class="icon iconfont icon-shanchu"></span>
-                            </div>
-                        </div>
-                        <div class="pin_block" v-show="file?.status === 'done'">
-                            <a-checkbox v-model:checked="file.pin">PIN</a-checkbox>
-                        </div>
-                    </div>
-                    <div class="upload_file_item upload_component" v-show="fileList.length < 15">
-                        <a-upload
-                            :action="uploadUrl + '/api/element/upload'"
-                            list-type="picture-card"
-                            :data="{
-                                ...upload
-                            }"
-                            :before-upload="beforeUpload"
-                            :headers="{Authorization:token}"
-                            v-model:file-list="fileList"
-                            multiple
-                            :maxCount="15"
-                            accept=".jpg,.png,.jpeg,.bmp"
-                            @change="(file)=>fileUploadChange(file)"
+                            <div
+                                class="pin_block"
+                                v-show="file?.status === 'done'"
                             >
-                            <div  class="upload_tip_block" v-show="fileList.length < 15">
-                                <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png">
+                                <a-checkbox v-model:checked="file.pin"
+                                    >PIN</a-checkbox
+                                >
                             </div>
-                        </a-upload>
+                        </div>
+                        <div
+                            class="upload_file_item upload_component"
+                            v-show="fileList.length < 15"
+                        >
+                            <a-upload
+                                :action="uploadUrl + '/api/element/upload'"
+                                list-type="picture-card"
+                                :data="{
+                                    ...upload,
+                                }"
+                                :before-upload="beforeUpload"
+                                :headers="{ Authorization: token }"
+                                v-model:file-list="fileList"
+                                multiple
+                                :maxCount="15"
+                                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>
             </div>
-             <div class="upload_max_tip">
-                <span class="icon iconfont icon-zhuyi"></span>
-                <span>Maximum 15 images can be uploaded, Maximum 2M per image</span>
-            </div>
+
+            <Material
+                v-show="openClick == 2"
+                ref="Material"
+                msg="Sketchboard"
+                @confirmSelect="confirmSelect"
+            ></Material>
+            <Generate
+                v-show="openClick == 3"
+                ref="Generate"
+                msg="Sketchboard"
+                @generateCheckbox="getgenerateCheckbox"
+            ></Generate>
         </div>
-
-        <Material ref="Material" @confirmSelect="confirmSelect"></Material>
-
-
+		<div class="modal_right">
+			<div class="modal_layout">
+				<div class="modal_text">
+					<div>Thumbnail preview of selected moodboard</div>
+					<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
+				</div>
+				<div class="modal_img">
+					<div class="modal_img_item" v-for="item,index in sketchboardList" :key="item" @click="deleteFile(item)">
+						<img v-lazy="item.imgUrl">
+						<div class="checked" >
+							<i class="fi fi-rr-trash"></i>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div v-show="openClick == 3" class="modal_accomplish">
+				<div class="input_box">
+					<input class="search_input" :class="{forbidden:generateCheckbox}" :readonly="generateCheckbox" placeholder="Caption generation" v-model="captionGeneration">
+					<div class="generage_btn started_btn" @click="getgenerate">Generate</div>
+				</div>
+				<div class="modal_img">
+					<div v-for="item,index in generateList" class="modal_imgItem" :class="{ active: item?.checked }" @click="generageAdd(item)">
+						<img :src="item.imgUrl">
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> -->
+       	
+		
     </div>
 </template>
 <script lang="ts">
-import { defineComponent, h,ref } from 'vue'
-import { LoadingOutlined } from '@ant-design/icons-vue';
-import {getCookie} from '@/tool/cookie'
-import {getUploadUrl} from '@/tool/util'
-import {useStore} from 'vuex'
-import { message,Upload} from 'ant-design-vue';
-import Material from '@/component/HomePage/Material.vue'
+import { defineComponent, h, ref ,computed } from "vue";
+import { LoadingOutlined } from "@ant-design/icons-vue";
+import { getCookie } from "@/tool/cookie";
+import { getUploadUrl } from "@/tool/util";
+import GO from "@/tool/GO";
+import { useStore } from "vuex";
+import { message, Upload } from "ant-design-vue";
+import Material from "@/component/HomePage/Material.vue";
+import Generate from "@/component/HomePage/Generate.vue";
+import { Https } from "@/tool/https";
 export default defineComponent({
-    components:{Material},
-    setup(){
-        let fileList:any = ref([])
+    components: { Material, Generate },
+    setup() {
+        let fileList: any = ref([]);
+        let openClick: any = ref(1);
+		let generateList:any = ref([
+		{
+                imgUrl: "https://illlustrations.co/static/32913fde3ee589609d98f16c51fcffa6/ee604/day8-printer.png",
+                id_: 1,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/3edf742257c1d1460eb2e2f998a1df96/ee604/day4-polariod.png",
+                id_: 2,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/475732e63175f7dc3bf93c84af8b3d11/ee604/day6-open-vault.png",
+                id_: 3,
+            },
+            {
+                imgUrl: "https://illlustrations.co/static/ca430674ef56f1a3a91f705670fd8512/ee604/day17-walkie-talkie.png",
+                id_: 4,
+            },
+		])
+		let generateCheckbox:any = ref()
         return {
-            fileList
-        }
+            fileList,
+            openClick,
+			generateList,
+			generateCheckbox
+        };
     },
-    data(){
-        return{
-            swtich_type:'upload',
-             indicator : h(LoadingOutlined, {
+    data() {
+        return {
+            swtich_type: "upload",
+            indicator: h(LoadingOutlined, {
                 style: {
-                    fontSize: '2.4rem',
+                    fontSize: "2.4rem",
                 },
                 spin: true,
             }),
-            upload:{
-                isPin:0,
-                level1Type:'Sketchboard',
-                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+            upload: {
+                isPin: 0,
+                level1Type: "Sketchboard",
+                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
             },
-            token:'',
-            uploadUrl:'',
-            store:useStore(),
-            sketchCatecoryList:[
+            token: "",
+            uploadUrl: "",
+            store: useStore(),
+            sketchCatecoryList: [
                 {
-                    value: 'Outwear',
+                    value: "Outwear",
                     label: "Outwear",
                 },
                 {
-                    value: 'Blouse',
+                    value: "Blouse",
                     label: "Blouse",
                 },
                 {
-                    value: 'Dress',
+                    value: "Dress",
                     label: "Dress",
                 },
                 {
-                    value: 'Trousers',
+                    value: "Trousers",
                     label: "Trousers",
                 },
                 {
-                    value: 'Skirt',
+                    value: "Skirt",
                     label: "Skirt",
                 },
             ],
-        }
+			captionGeneration:'',
+			sketchboardList:computed(()=>{
+				return  useStore().state.UploadFilesModule.sketchboard
+			}),
+        };
     },
-    computed:{
-        getSketchLabel(value){
-           return (value:any)=>{
-                let lable = '';
-                for(let item of this.sketchCatecoryList){
-                    if(item.value === value){
-                        lable = item.label
-                        break
+    computed: {
+        getSketchLabel(value) {
+            return (value: any) => {
+                let lable = "";
+                for (let item of this.sketchCatecoryList) {
+                    if (item.value === value) {
+                        lable = item.label;
+                        break;
                     }
                 }
-                return lable
-           }
-        }
-    },
-    mounted(){
-        this.token = getCookie('token') || ''
-        this.uploadUrl = getUploadUrl()
-    },
-    methods:{
-        openLibrary(){
-            let material:any = this.$refs.Material
-                material.init('Sketchboard')
+                return lable;
+            };
         },
-        fileUploadChange(data:any){
-            let file = data.file
-            if(file.status === 'done'){
-                let res = JSON.parse(file.xhr.response)
-                file.imgUrl = res.data.url
-                file.resData = res.data
-                file.pin = false
-                file.category = 'Outwear'
-                file.categoryShow = false
-                let fileList = this.fileList.filter((v:any)=> v.status === 'done')
-                this.store.commit('setSketchboardFile',fileList)
-            }else if(file.status ===  'error'){
-                let index = -1
-                this.fileList.forEach((ele:any,index1:any) => {
-                    if(file.uid === ele.uid){
-                        index = index1
+		
+    },
+    mounted() {
+        this.token = getCookie("token") || "";
+        this.uploadUrl = getUploadUrl();
+    },
+    methods: {
+        open(num: Number) {
+            this.openClick = num;
+            if (num == 2) {
+                let material: any = this.$refs.Material;
+                material.init("Moodboard");
+            } else if (num == 3) {
+                // let Generate:any = this.$refs.Generate
+                // Generate.init('generate')
+            }
+        },
+		getgenerateCheckbox(value:any){
+			this.generateCheckbox = value
+		},
+        fileUploadChange(data: any) {
+            let file = data.file;
+            if (file.status === "done") {
+				let res = JSON.parse(file.xhr.response);
+                file.imgUrl = res.data.url;
+                file.resData = res.data;
+                file.pin = false;
+                file.category = "Outwear";
+                file.categoryShow = false;
+				file.id_ = GO.id++
+				file.type_ = 'upload';
+                let fileList = this.fileList.filter(
+                    (v: any) => v.status === "done"
+                );
+                this.store.commit("setSketchboardFile", fileList);
+            } else if (file.status === "error") {
+                let index = -1;
+                this.fileList.forEach((ele: any, index1: any) => {
+                    if (file.uid === ele.uid) {
+                        index = index1;
                     }
                 });
-                if(index > -1){
-                    this.fileList.splice(index, 1)
+                if (index > -1) {
+                    this.fileList.splice(index, 1);
                 }
-                message.error(file.name + 'upload failed')
+                message.error(file.name + "upload failed");
             }
         },
 
-        beforeUpload(file:any){
-            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
+        beforeUpload(file: any) {
+            const isJpgOrPng =
+                file.type === "image/jpeg" ||
+                file.type === "image/png" ||
+                file.type === "image/jpg" ||
+                file.type === "image/bmp";
             if (!isJpgOrPng) {
-                message.error('You can only upload Image file!');
+                message.error("You can only upload Image file!");
             }
             const isLt2M = file.size / 1024 / 1024 < 2;
             if (!isLt2M) {
-                message.error('Image must smaller than 5MB!');
+                message.error("Image must smaller than 5MB!");
             }
             return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
         },
 
-        showFileCategory(file:any){
-            file.categoryShow = true
-            document.addEventListener('click', this.hiddenFileCategory)
+        showFileCategory(file: any) {
+            file.categoryShow = true;
+            document.addEventListener("click", this.hiddenFileCategory);
         },
 
-        selectFileCategory(file:any,cate:any){
-            file.category = cate.value
-            this.store.commit('setSketchboardFile',this.fileList)
+        selectFileCategory(file: any, cate: any) {
+            file.category = cate.value;
+            this.store.commit("setSketchboardFile", this.fileList);
         },
-
-        hiddenFileCategory(){
-            for(let item of this.fileList){
-                item.categoryShow = false
+        hiddenFileCategory() {
+            for (let item of this.fileList) {
+                item.categoryShow = false;
             }
-            document.removeEventListener('click', this.hiddenFileCategory)
+            document.removeEventListener("click", this.hiddenFileCategory);
         },
 
-        deleteFile(index:any){
-            this.fileList.splice(index, 1)
-            this.store.commit('setSketchboardFile',this.fileList)
+        deleteFile(item: any) {
+			if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
+				this.store.commit("addGenerateMaterialFils", item);
+			}else{
+				this.fileList = this.store.state.UploadFilesModule.moodboardFiles
+				let moodboard 
+				this.store.state.UploadFilesModule.moodboardFiles.forEach((items:any,index:Number)=>{
+					if(items.id_ == item.id_){
+						moodboard = index
+						
+					}
+				})
+				this.fileList.splice(moodboard,1)
+				this.store.commit("setSketchboardFile", this.fileList);
+			}
         },
 
-        recollection(){
-            this.fileList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.skecthboardFiles))
-            this.store.commit('setSketchboardFile',this.fileList)
+        recollection() {
+            this.fileList = JSON.parse(
+                JSON.stringify(
+                    this.store.state.UploadFilesModule.allBoardData
+                        .skecthboardFiles
+                )
+            );
+            this.store.commit("setSketchboardFile", this.fileList);
         },
-
-        confirmSelect(event:any){
-            for(let item of event){
+        confirmSelect(event: any) {
+            for (let item of event) {
                 let data = {
-                    imgUrl:item.url,
-                    resData:item,
-                    pin:false,
-                    status:'done',
-                    category:item.level2Type || 'Outwear',
-                    categoryShow:false,
+                    imgUrl: item.url,
+                    resData: item,
+                    pin: false,
+                    status: "done",
+                    category: item.level2Type || "Outwear",
+                    categoryShow: false,
+                };
+                if (this.fileList.length == 15) {
+                    message.error(
+                        "Maximum number of allowable file uploads has been exceeded"
+                    );
+                    break;
                 }
-                if(this.fileList.length == 15){
-                    message.error('Maximum number of allowable file uploads has been exceeded')
-                    break
-                }
-                this.fileList.push(data)
+                this.fileList.push(data);
             }
-            this.store.commit('setSketchboardFile',this.fileList)
-            
-        }
-    }
-})
+            this.store.commit("setSketchboardFile", this.fileList);
+        },
+		//发送请求生成图片
+		getgenerate(){
+			
+			let generage:any = this.$refs.Generate
+			let generateType = generage.checkbox.filter((v:any)=>v.type)[0].name
+			let data = {
+				generateType:generateType,
+				designType:'',
+				collectionElementId:generage.collectionElementid,
+				level1Type:generage.upload.level1Type,
+				level2Type:generage.level2Type,
+				text:this.captionGeneration,
+				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+				version:0,//为1就是Print
+			}
+			if(generateType == 'image'||generateType == 'text-image'){
+				if(generage.collectionElementid){
+				}else{
+					message.error(
+						"Please select a picture"
+					);
+					return
+				}
+			}else if(generateType == 'text'){
+				// this.beforeUpload(false)
+				if(this.captionGeneration){
+				}else{
+					message.error(
+						"Please enter content"
+					);
+					return
+				}
+			}
+			if(generateType == 'text'){
+				data.collectionElementId = ''
+				data.level2Type = ''
+			}
+			Https.axiosPost(Https.httpUrls.sketchAndPrintGenerate, data).then(
+                (rv) => {
+					// if(rv){
+						
+					// }
+					console.log(rv);
+					
+                }
+            ).catch(res=>{
+            });
+		},
+		generageAdd(item:any){
+			item.type_ = {
+                type1: "generate",
+                type2: 'Sketchboard',
+            },
+            this.store.commit("addGenerateMaterialFils", item);
+		}
+    },
+});
 </script>
 <style lang="less" scoped>
-.sketchboard_upload_modal{
-    padding: 1.5rem 2.6rem 4rem;
-    height: 100%;
-
-    .switch_type_list{
-        display: flex;
-        align-items: center;
-
-        .switch_type_item{
+.sketchboard_upload_modal {
+	height: 100%;
+    display: flex;
+	.modal_left {
+        padding-top: 4rem;
+        width: 47%;
+		.switch_type_list {
             display: flex;
             align-items: center;
-            padding: 0 2rem;
-            height: 4rem;
-            background: #fff;
-            border-radius: 0.8rem;
-            line-height: 4rem;
-            font-size: 1.6rem;
-            margin-right: 2.2rem;
-            color: #5B5E69;
-            cursor: pointer;
+            position: relative;
 
-            &.select_swtich{
-                color: #343579;
-            }
+            .switch_type_item {
+                display: flex;
+                align-items: center;
+                // padding: 0 2rem;
+                height: 4rem;
+                background: #fff;
+                border-radius: 0.8rem;
+                line-height: 4rem;
+                font-size: 1.6rem;
+                // margin-right: 2.2rem;
+                margin-right: 8rem;
+                color: #000;
+                cursor: pointer;
+                position: relative;
+                text-align: center;
+                transform-origin: left;
+                transform: scale(1);
+                transition: 0.3s all;
+                &.switch_type_item::before {
+                    position: absolute;
+                    content: "";
+                    display: block;
+                    background: #000;
+                    height: 3px;
+                    left: 50%;
+                    transform: translateX(-50%);
+                    bottom: 6px;
+                    width: 0px;
+                    transition: 0.3s all;
+                }
+                &.select_swtich {
+                    color: #000;
+                    // font-weight: 900;
+                    transform: scale(1.15);
+                }
+                &.select_swtich::before {
+                    width: 100%;
+                }
 
-            .switch_icon{
-                font-size: 1.8rem;
-                margin-right: 0.8rem;
+                .switch_icon {
+                    font-size: 1.8rem;
+                    margin-right: 0.8rem;
+                }
             }
         }
-        
-    }
-
-    .sketchboard_body{
-        margin-top: 1rem;
+		.sketchboard_body {
         height: calc(100% - 5rem);
-
-        .upload_img_body{
+        padding-top: 2.5rem;
+        height: 30rem;
+        overflow-x: hidden;
+        border-right: 1px solid #e5e5e5;
+        &.moodboard_body::-webkit-scrollbar {
+            display: none;
+        }
+        .upload_img_body {
             height: calc(100% - 3rem);
             overflow-y: auto;
             margin-bottom: 1rem;
+			&.upload_img_body::-webkit-scrollbar {
+					display: none;
+				}
         }
 
-        .upload_file_item{
-            margin: 0 2rem 2rem 0;
-            display: inline-block;
-            width: 16.5rem;
-            border: 1px solid #F5F5F5;
-            vertical-align: top;
-
-            &.upload_component{
-                border: none;
-            }
-
-            .upload_file_item_content{
+       
+		.upload_file_item{
+			margin: 0 2rem 4rem 0;
+			// margin: 0 2rem 2rem 0;
+			display: inline-block;
+			width: 10rem;
+			height: 10rem;
+			border: 1px solid #f5f5f5;
+			vertical-align: top;
+			position: relative;
+			img{
+				width: 100%;
+				height: 100%;
+			}
+			&.upload_component {
+                    border: none;
+                }
+                :deep(.ant-upload-picture-card-wrapper) {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                }
+                :deep(.ant-upload-select-picture-card) {
+                    width: 6rem;
+                    height: 6rem;
+                    border: 0.3rem solid #ededed;
+                    border-radius: 10px;
+                    margin: 0;
+                }
+			.checked{
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				cursor: pointer;
+				display: none;
+				justify-content: center;
+				align-items: center;
+			}
+			&.modal_img_item:hover .checked{
+				display: flex;
+			}
+			.upload_file_item_content{
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 height: 100%;
-                height: 16.5rem;
                 position: relative;
                 cursor: pointer;
-
                 .upload_img{
                     display: block;
                     max-height: 100%;
@@ -318,7 +612,7 @@ export default defineComponent({
                     right: 0.9rem;
                     text-align: center;
                     line-height: 3.2rem;
-
+					left: auto;
                     .icon-shanchu{
                         font-size: 1.6rem;
                         color: #fff;
@@ -331,7 +625,7 @@ export default defineComponent({
 
                 .operate_file_block{
                     width: 100%;
-                    height: 4rem;
+                    height: 3rem;
                     font-size: 1.6rem;
                     color: #FFFFFF;
                     position: absolute;
@@ -340,7 +634,7 @@ export default defineComponent({
 
                     .select_img_type{
                         height: 100%;
-                        line-height: 4rem;
+                        line-height: 3rem;
                         text-align: center;
                         background: rgba(0,0,0,0.6);
                         position: relative;
@@ -363,17 +657,21 @@ export default defineComponent({
                         }
 
                         .category_list{
-                            position: absolute;
+							position: absolute;
                             width: 100%;
                             cursor: pointer;
                             position: absolute;
-                            top: 4.1rem;
+                            // top: 3.1rem;
+							margin-top: .2rem;
                             left: 0;
                             background: rgba(0,0,0,0.4);
                             border: 1px solid #343579;
                             border-radius: 0.8rem;
-                            overflow: hidden;
+                            // overflow: hidden;
                             z-index: 2;
+							height: 9rem;
+							overflow-x: hidden;
+							&.category_list::-webkit-scrollbar{display: none;}
 
                             .category_item{
                                 text-align: left;
@@ -393,28 +691,110 @@ export default defineComponent({
                     }
                 }
             }
-            .pin_block{
-                text-align: center;
-                margin-top:1.6rem;
-            }
-
-            .upload_img_icon{
-                width: 4.6rem;
-            }
-        }
-
-        .upload_max_tip{
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 1.4rem;
-            color: #030303;
-
-            .icon-zhuyi{
-                font-size: 1.6rem;
-                margin-right: 0.7rem;
-            }
-        }
+			.pin_block{
+				
+			}
+		}
+       
     }
+	}
+   
+	.modal_right{
+		flex: 1;
+		margin-left: 3rem;
+		.modal_layout,.modal_accomplish{
+			.modal_text{
+				font-size: 1.2rem;
+				font-weight: 400;
+				color: rgba(0, 0, 0, 0.45);
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+		}
+		.modal_layout{
+			.modal_img{
+				width: 40rem;
+				height: 5rem;
+				overflow-x: hidden;
+				display: flex;
+				flex-direction: row;
+				&.modal_img::-webkit-scrollbar {
+					display: none;
+				}
+				.modal_img_item{
+					width: 4rem;
+					height: 4rem;
+					margin: 0 1rem 1rem 0;
+					position: relative;
+					cursor: pointer;
+					img{
+						width: 100%;
+						height: 100%;
+					}
+					.checked{
+						position: absolute;
+						top: 0;
+						left: 0;
+						width: 100%;
+						height: 100%;
+						cursor: pointer;
+						display: none;
+						justify-content: center;
+						align-items: center;
+					}
+					&.modal_img_item:hover .checked{
+						display: flex;
+					}
+				}
+				
+			}
+		}
+		.modal_accomplish{
+			// margin-top: 2rem;
+			height: 30rem;
+			display: flex;
+			flex-direction: column;
+			.modal_text{
+				padding-top: 2rem;
+				padding-block: 2rem;
+			}
+			.input_box{
+				input{
+					&.forbidden{
+						cursor:not-allowed;
+					}
+				}
+			}
+			.modal_img{
+				flex: 1;
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: flex-start;
+				.modal_imgItem{
+					margin: 0 2rem 2rem 0;
+					display: inline-block;
+					width: 10rem;
+					height: 10rem;
+					border: 1px solid #f5f5f5;
+					position: relative;
+					cursor: pointer;
+					img{
+						object-fit: cover;
+						width: 100%;
+						height: 100%;
+					}
+					&.active{
+						opacity: 0.5;
+					// border: 2px solid;
+						border-radius: 1rem;
+						img {
+							transform: scale(0.9);
+						}
+					}
+				}
+			}
+		}
+	}
 }
 </style>
diff --git a/src/component/HomePage/collectionModal.vue b/src/component/HomePage/collectionModal.vue
index 619325b5..fca8dda9 100644
--- a/src/component/HomePage/collectionModal.vue
+++ b/src/component/HomePage/collectionModal.vue
@@ -236,12 +236,14 @@ export default defineComponent({
 
     .collection_modal_body{
         height: 100%;
+		background-color: #fff;
     }
 }
 </style>
 <style lang="less">
 .collection_modal{
-	max-width: 1200px ;
+	// max-width: 1200px ;
+	max-width: 1150px ;
 	.ant-modal-content{
 		border-radius: 10px;
 		overflow: hidden;
@@ -251,7 +253,8 @@ export default defineComponent({
 		}
 		.ant-modal-body{
 			padding: 8rem 5rem !important;
-			height: calc(60vh - 6.4rem);
+			// height: calc(65vh - 6.4rem);
+			height: 60rem;
 		}
 	}
 }
diff --git a/src/component/HomePage/layout.vue b/src/component/HomePage/layout.vue
index 9e1db2c3..04a03398 100644
--- a/src/component/HomePage/layout.vue
+++ b/src/component/HomePage/layout.vue
@@ -4,11 +4,12 @@
             class="layout_modal"
             v-model:visible="layout"
             :footer="null"
-            width="47rem"
+            width="80%"
             :maskClosable="false"
             :centered="true"
             :closable="false"
             :mask="false"
+			:destroyOnClose="true"
         >
             <div class="layout_content">
                 <div class="layout_header">
@@ -19,14 +20,28 @@
                     ></div>
                 </div>
 				<div class="layout_nav">
-					<div v-for="item,index in layoutList" :key="item">
+					<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @click="setpitch(item)">
 						<img :src="item.imgUrl">
 					</div>
 				</div>
-				<div class="layout_centent" :class="{active:flex_direction}">
-					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem">
-						<img :src="item.imgUrl">
+				<div class="layout_centent" :class="{active:flex_direction}" id="layoutCentent">
+					<div v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="index" @click="setpitch(item)" ref="content" >
+						<img crossOrigin="anonymous" :src="item.imgUrl" draggable="false"> 
+						<ul v-show="item.setPitch" class="layout_btn" >
+							<li class="layout_btn_top" v-compile.stop="'top'"></li>
+							<li class="layout_btn_bottom" v-compile.stop="'bottom'"></li>
+							<li class="layout_btn_left" v-compile.stop="'left'"></li>
+							<li class="layout_btn_right" v-compile.stop="'right'"></li>
+							<li class="layout_rotote" v-rotote.stop></li>
+							<li class="layout_translate" v-translate.stop></li>
+							<!-- <li class="layout_translate" v-translate.stop></li> -->
+							<li class="layout_angle_tr" v-angle.stop = "'top'"></li>
+							<li class="layout_angle_tl" v-angle.stop = "'right'"></li>
+							<li class="layout_angle_br" v-angle.stop = "'bottom'"></li>
+							<li class="layout_angle_bl" v-angle.stop = "'left'"></li>
+						</ul>
 					</div>
+						<!-- <img v-for="item,index in layoutList" :key="item" :class="moodbClassName[index]" class="modal_imgItem" v-layout="item" :src="item.imgUrl"> -->
 					<!-- <draggable 
 						v-model="layoutList" 
 						group="people" 
@@ -48,12 +63,12 @@
 						</div>
 					</div>
 				</div>
-				<div class="layout_right">
+				<!-- <div class="layout_right">
 					<div v-for="item,index in moodbList" class="layout_left_items" @click="setmoodb(item)">
 						<div v-for="clasitem,clasindex in item" :class="clasitem" class="layout_left_item">
 						</div>
 					</div>
-				</div>
+				</div> -->
                 <div
                     class="button_second submit_button"
                     @click="submitTemplate()"
@@ -70,8 +85,10 @@
 import { defineComponent, h, ref ,computed,reactive, toRefs} from "vue";
 import { LoadingOutlined } from "@ant-design/icons-vue";
 import { useStore } from "vuex";
+import GO from "@/tool/GO";
 import moodb from "@/tool/moodb";
 import draggable from 'vuedraggable'
+import domTurnImg from '@/tool/domTurnImg'
 export default defineComponent({
 	props:["moodb_className",'flex_direction'],
 	components: {
@@ -83,12 +100,16 @@ export default defineComponent({
         let templateFileList: any = ref([]);
         let openClick: any = ref(1);
 		let drag = false;
+		let layoutList:any = ref([])
+		const content = ref<HTMLElement | null>(null);
         return {
             fileList,
             layout,
             templateFileList,
             openClick,
 			drag,
+			layoutList,
+			content
         };
     },
     data() {
@@ -99,31 +120,18 @@ export default defineComponent({
                 },
                 spin: true,
             }),
-            moodTemplateId: "", //模板id
+            // moodTemplateId: "", //模板id
             store: useStore(),
 
-			layoutList:computed(()=>{
-				return [...(useStore().state.UploadFilesModule.moodboardFiles),
-				...(useStore().state.UploadFilesModule.generateFiles),
-				...(useStore().state.UploadFilesModule.MaterialFiles)]
-			}),
-			layoutListaa:[
-				{
-					id_:1,
-					name:'2',
-				},
-				{
-					id_:2,
-					name:'2',
-				},
-				{
-					id_:3,
-					name:'2',
-				},
-			],
+			// layoutList:computed(()=>{
+			// 	return [...(useStore().state.UploadFilesModule.moodboardFiles),
+			// 	...(useStore().state.UploadFilesModule.generateFiles),
+			// 	...(useStore().state.UploadFilesModule.MaterialFiles)]
+			// }),
 			moodb : moodb.moodb_,
 			moodbList:{},
 			moodbClassName:[],
+			setabsolute:false,
         };
     },
 
@@ -131,44 +139,382 @@ export default defineComponent({
 		
     },
 	directives:{
+		//操作移动
 		layout:{
-			mounted (el,layout) {
-				// console.log(el,layout);
-				layout.value.style = {
-					rotate:'',
-					left:'',
-					top:'',
-					width:'',
-					height:'',
-				}
+			mounted (el,layout:any,binding) {
+				el.addEventListener('mousedown',(e: MouseEvent)=>{
+					e.stopPropagation()
+					el.parentElement.children.forEach((v:any) => {
+						v.style.left = v.offsetLeft+'px'
+						v.style.top = v.offsetTop+'px'
+
+					});
+					el.parentElement.children.forEach((v:any) => {
+						v.classList.add('active')
+					});
+					el.style.zIndex = GO.zIndex++
+					let left = el.style.left? el.style.left.replace(/px/g,'') : 0
+					let top = el.style.top? el.style.top.replace(/px/g,'') : 0
+					let mouseX = e.offsetX //鼠标点击位置到domleft距离
+					let mouseY = e.offsetY
+					let domX = e.clientX - e.offsetX - Number(left)//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
+					let domY = e.clientY - e.offsetY - Number(top)
+					let mouse = true
+					document.onmousemove = function(e:MouseEvent){
+						if(mouse){
+							el.style.left = e.x-mouseX - domX+'px'
+							el.style.top = e.y-mouseY - domY+'px'
+							if(el.offsetLeft <=0){
+								el.style.left = 0+'px'
+							}
+							if(el.offsetTop <=0){
+								el.style.top = 0+'px'
+							}
+							if(el.offsetLeft+el.offsetWidth >= el.parentNode.offsetWidth){
+								el.style.left =  el.parentNode.offsetWidth - el.offsetWidth+'px'
+							}
+							if(el.offsetTop+el.offsetHeight >= el.parentNode.offsetHeight){
+								el.style.top =  el.parentNode.offsetHeight - el.offsetHeight+'px'
+							}
+						}
+					}
+					document.onmouseup = function(){
+						mouse = false
+						// document.onmousemove = false;
+					}
+				})
 			},
 			updated (el,layout) {
 				
 			}
+		},
+		//操作大小
+		compile:{
+			mounted (el,compile) {
+				el.addEventListener('mousedown',(e: MouseEvent)=>{
+					e.stopPropagation()
+					let elParent = el.parentNode.parentNode
+					el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
+						v.style.left = v.offsetLeft+'px'
+						v.style.top = v.offsetTop+'px'
+					});
+					el.parentElement.parentNode.parentNode.children.forEach((v:any) => {
+						v.classList.add('active')
+					});
+					if(compile.value == 'right'){
+						
+					}else if(compile.value == 'left'){
+						elParent.style.right = elParent.parentNode.offsetWidth - elParent.offsetWidth - elParent.offsetLeft + 'px'
+						elParent.style.left = 'auto'
+					}else if(compile.value == 'top'){
+						elParent.style.bottom = elParent.parentNode.offsetHeight - elParent.offsetHeight - elParent.offsetTop + 'px'
+						elParent.style.top = 'auto'
+					}else if(compile.value == 'bottom'){
+						
+					}
+					
+					let gpsXY:any
+					let parent:any
+					if(compile.value == 'left' || compile.value == 'right'){
+						gpsXY = e.x
+						parent = elParent.offsetWidth
+					}else{
+						parent = elParent.offsetHeight
+						gpsXY = e.y
+					}
+					let mouse = true
+					document.onmousemove = function(e:MouseEvent){
+						if(mouse){
+							if(compile.value == 'left'){
+								elParent.style.width = parent + gpsXY - e.x + 'px' 
+							}else if(compile.value == 'right'){
+								elParent.style.width = parent + e.x - gpsXY + 'px' 
+							}else if(compile.value == 'top'){
+								elParent.style.height = parent + gpsXY - e.y + 'px' 
+							}else if(compile.value == 'bottom'){
+								elParent.style.height = parent + e.y - gpsXY + 'px' 
+
+							}
+						
+						
+							if(elParent.parentNode.offsetWidth <= elParent.offsetWidth+Number(elParent.style.right.replace(/px/g,''))){
+								elParent.style.width = elParent.parentNode.offsetWidth - Number(elParent.style.right.replace(/px/g,''))+'px'
+							}
+							if(elParent.offsetLeft + elParent.offsetWidth>=elParent.parentNode.offsetWidth){
+								elParent.style.width = elParent.parentNode.offsetWidth - elParent.offsetLeft+'px'
+							}
+							
+							if(elParent.parentNode.offsetHeight <= elParent.offsetHeight+Number(elParent.style.bottom.replace(/px/g,''))){
+								elParent.style.height = elParent.parentNode.offsetHeight - Number(elParent.style.bottom.replace(/px/g,''))+'px'
+							}
+							if(elParent.offsetTop + elParent.offsetHeight>=elParent.parentNode.offsetHeight){
+								elParent.style.height = elParent.parentNode.offsetHeight - elParent.offsetTop+'px'
+							}
+						}
+					}
+					document.onmouseup = function(){
+						mouse = false
+					}
+				})
+			}
+		},
+		//操作旋转
+		rotote:{
+			mounted(el){
+				let mouse = true;
+				let angle :any = 0
+				let num:any
+				let elParent = el.parentNode.parentNode
+
+				if(document.defaultView){
+					num = Number(document.defaultView.getComputedStyle(elParent.firstElementChild, null).transform.split(',')[3])
+				}
+				// 添加鼠标按下事件监听器
+				el.addEventListener('mousedown', (e:MouseEvent) => {
+					e.stopPropagation()
+					mouse = true;
+					let eX = e.clientX - (e.offsetX + el.offsetLeft) + el.nextSibling.offsetLeft+el.nextSibling.offsetWidth/2
+					let eY = e.clientY - (e.offsetY + el.offsetTop) + el.nextSibling.offsetTop+el.nextSibling.offsetHeight/2
+					document.addEventListener('mousemove', (e:MouseEvent) => {
+					if (mouse) {
+						let X = eX 
+						let Y = eY
+						let x:any = e.pageX - X
+						let y:any = Y - e.pageY
+						angle = Math.atan2(x,y)*(180 / Math.PI)
+						elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
+						el.style.transform = "translate(-50%,-50%) rotateZ("+ angle + "deg)"
+					}
+					});
+
+					// 添加鼠标松开事件监听器
+					document.addEventListener('mouseup', () => {
+						mouse = false;
+					});
+				});
+				//缩放
+				let timeSwitch = true
+				el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
+					el.parentNode.addEventListener('mousewheel',(e:MouseEvent) => {
+						if(timeSwitch){
+							timeSwitch = false
+							if((e as WheelEvent).deltaY > 0){
+								if(num <= 1){
+									num -= 0.05
+								}else{
+									num -= 0.1
+								}
+							}else{
+								//放大
+								if(num <= 1){
+									num += 0.05
+								}else{
+									num += 0.1
+								}
+							}
+							if(num >= 3){
+								num = 3
+							}else if (num < .2){
+								num = .2
+							}
+							setTimeout(() => {
+								timeSwitch = true
+							}, 100);
+							elParent.firstElementChild.style.transform = "translate(-50%,-50%) scale("+ num + ") rotateZ("+ angle + "deg)"
+						}
+						
+						
+					});
+				});
+			}
+			
+		},
+		angle:{
+			mounted(el,angle){
+				let mouse = false;
+				el.addEventListener('mousedown', (e:MouseEvent) => {
+					e.stopPropagation()
+					
+					el.parentNode.children.forEach((v:any) =>{
+						v.classList.add('eventNode')
+					})
+					mouse = true;
+					let elParent = el.parentNode.parentNode
+					let eX:any
+					let eY:any
+					let elParentSide = Math.sqrt(elParent.offsetWidth/2*elParent.offsetWidth/2+elParent.offsetHeight/2*elParent.offsetHeight/2)
+					el.parentNode.addEventListener('mousemove', (e:MouseEvent) => {
+					if (mouse) {
+						if(angle.value == 'right'){
+							eX = elParent.offsetWidth - e.offsetX
+							eY = elParent.offsetHeight - e.offsetY
+						}else if(angle.value == 'top'){
+							eX = elParent.offsetWidth - e.offsetX- elParent.offsetWidth
+							eY = elParent.offsetHeight - e.offsetY
+						}else if(angle.value == 'left'){
+							eX = elParent.offsetWidth - e.offsetX
+							eY = elParent.offsetHeight - e.offsetY- elParent.offsetHeight
+						}else if(angle.value == 'bottom'){
+							eX = elParent.offsetWidth - e.offsetX - elParent.offsetWidth
+							eY = elParent.offsetHeight - e.offsetY - elParent.offsetHeight
+						}
+						let mouseSide = Math.sqrt(eX*eX + eY *+eY)/2
+						// el.style.left = e.offsetX /2 +'px'
+						// el.style.top = e.offsetY /2+'px'
+						if(100 - 100 * mouseSide/elParentSide <= 50){
+							if(angle.value == 'right'){
+								
+								el.parentNode.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
+								elParent.style.borderTopLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
+								el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
+								el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
+							}else if(angle.value == 'top'){
+								el.parentNode.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
+								elParent.style.borderTopRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
+								el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
+								el.style.left = 'auto'
+								el.style.top = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
+							}else if(angle.value == 'bottom'){
+								el.parentNode.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
+								elParent.style.borderBottomRightRadius = 100 - 100 * mouseSide/elParentSide +'%'
+								el.style.right = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
+								el.style.top = 'auto'
+								el.style.left = 'auto'
+								el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
+							}else if(angle.value == 'left'){
+								el.parentNode.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
+								elParent.style.borderBottomLeftRadius = 100 - 100 * mouseSide/elParentSide +'%'
+								el.style.left = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
+								el.style.top = 'auto'
+								el.style.bottom = (100 - 100 * mouseSide/elParentSide) / 3.33-1 +'%'
+							}
+						}else{
+							if(angle.value == 'right'){
+								el.parentNode.style.borderTopLeftRadius = 50+'%'
+								elParent.style.borderTopLeftRadius = 50+'%'
+							}else if(angle.value == 'top'){
+								el.parentNode.style.borderTopRightRadius = 50+'%'
+								elParent.style.borderTopRightRadius = 50+'%'
+							}else if(angle.value == 'bottom'){
+								el.parentNode.style.borderBottomRightRadius = 50+'%'
+								elParent.style.borderBottomRightRadius = 50+'%'
+							}else if(angle.value == 'left'){
+								el.parentNode.style.borderBottomLeftRadius = 50+'%'
+								elParent.style.borderBottomLeftRadius = 50+'%'
+							}
+						}
+					}
+					});
+					// 添加鼠标松开事件监听器
+					document.addEventListener('mouseup', () => {
+						mouse = false;
+						el.parentNode.children.forEach((v:any) =>{
+							v.classList.remove('eventNode')
+						})
+					});
+					
+				});
+					
+				
+			}
+		},
+		//移动图片
+		translate:{
+			mounted (el,layout:any,binding) {
+				el.addEventListener('mousedown',(e: MouseEvent)=>{
+					e.stopPropagation()
+					let elParent = el.parentNode.parentNode
+					el.style.left = (el.offsetLeft+2)/(elParent.offsetWidth)*100+'%'
+					el.style.top =  (el.offsetTop+2)/(elParent.offsetHeight)*100+'%'
+					let left = el.style.left? el.style.left.replace(/%/g,'') : 0
+					let top = el.style.top? el.style.top.replace(/%/g,'') : 0
+					let mouseX = e.offsetX //鼠标点击位置到domleft距离
+					let mouseY = e.offsetY
+					let domX = e.clientX - e.offsetX - el.offsetLeft//鼠标到最左侧距离减去鼠标到dom距离再减去已经有的left值
+					let domY = e.clientY - e.offsetY - el.offsetTop
+					let mouse = true
+					document.onmousemove = function(e:MouseEvent){
+						if(mouse){
+							let left = ( e.x-mouseX + 2 - domX )/(elParent.offsetWidth)*100+'%'
+							let top = (e.y-mouseY + 2 - domY)/(elParent.offsetHeight)*100+'%'
+							el.style.left = left
+							el.style.top = top;
+							el.previousSibling.style.top = top
+							el.previousSibling.style.left = left
+							elParent.firstChild.style.top = top
+							elParent.firstChild.style.left = left
+							if(el.offsetLeft <=0){
+								el.style.left = 0+'%'
+								el.previousSibling.style.left = 0+'%'
+								elParent.firstChild.style.left = 0+'%'
+							}
+							if(el.offsetTop <=0){
+								el.style.top = 0+'%'
+								el.previousSibling.style.top = 0+'%'
+								elParent.firstChild.style.top = 0+'%'
+							}
+							// if(el.offsetLeft+el.offsetWidth >= el.parentNode.offsetWidth){
+							// 	// el.style.left =  el.parentNode.offsetWidth - el.offsetWidth+'%'
+							// 	console.log(2);
+							// }
+							if(el.style.left.replace(/%/g,'')>=100){
+								el.style.left = 100+'%'
+								el.previousSibling.style.left = 100+'%'
+								elParent.firstChild.style.left = 100+'%'
+							}
+							// if(el.offsetTop+el.offsetHeight >= el.parentNode.offsetHeight){
+							// 	el.style.top =  el.parentNode.offsetHeight - el.offsetHeight+'%'
+							// }
+							if(el.style.top.replace(/%/g,'')>=100){
+								el.style.top = 100+'%'
+								el.previousSibling.style.top = 100+'%'
+								elParent.firstChild.style.top = 100+'%'
+							}
+						}
+					}
+					document.onmouseup = function(){
+						mouse = false
+					}
+				})
+			},
 		}
 	},
     methods: {
 		init(){
 			this.layout = !this.layout
-			let layoutList = [...this.store.state.UploadFilesModule.moodboardFiles,
-				...this.store.state.UploadFilesModule.generateFiles,
-				...this.store.state.UploadFilesModule.MaterialFiles]
-			console.log(this.moodb[layoutList.length]);
+			let layoutList = this.store.state.UploadFilesModule.moodboard
+			this.layoutList.forEach((v:any)=>{
+				v.setPitch = false
+			})
+			this.layoutList = layoutList
+			
 			this.moodbList = this.moodb[layoutList.length-1]
 			this.moodbClassName = this.moodb_className
 		},
+		setpitch(item:any){
+			this.layoutList.forEach((v:any)=>{
+				v.setPitch = false
+			})
+			item.setPitch = true
+		},
 		setmoodb(item:any){
-			console.log(item);
 			this.moodbClassName = item
 			this.$emit('setmoodbClass',this.moodbClassName)
+			if(this.content){
+				for (item of (this.content as any)) {
+					item.classList.remove('active')
+					item.style.top = ''
+					item.style.left = ''
+					item.style.right = ''
+					item.style.bottom = ''
+					item.style.width = ''
+					item.style.height = ''
+				}
+			}
 		},
 		//开始拖拽事件
-		onStart(){
-			this.drag=true;
-		},
-		//拖拽结束事件
-		onEnd() {
-			this.drag=false;
+		layoutBtnTop(){
+
 		},
 		// setmoodbClassName(){
 		// },
@@ -196,7 +542,6 @@ export default defineComponent({
 		// 			document.body.appendChild(img);
 		// 			var w = img.offsetWidth;
 		// 			var h = img.offsetHeight;
-		// 			console.log(w,h);
 		// 			img.remove()
 		// 		})
 
@@ -214,15 +559,6 @@ export default defineComponent({
         // },
       
 
-        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;
-        },
-
         //随机重置图片顺序
         // refetchTemplate() {
         //     let arr = Array.from({ length: this.templateFileList.length });
@@ -246,12 +582,24 @@ export default defineComponent({
 		changeTemplateModal(){
 			this.layout = !this.layout
 		},
+		
         //提交模板
         submitTemplate() {
-            this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
-            this.store.commit("setMoodboardFile", this.fileList);
-            this.store.commit("setMoodTemplateId", this.moodTemplateId);
-            this.changeTemplateModal();
+            // this.fileList = JSON.parse(JSON.stringify(this.templateFileList));
+            // this.store.commit("setMoodboardFile", this.fileList);
+            // this.store.commit("setMoodTemplateId", this.moodTemplateId);
+            // this.changeTemplateModal();
+			this.layoutList.forEach((v:any)=>{
+				v.setPitch = false
+			})
+			let layoutCentent = document.getElementById('layoutCentent')
+			console.log(layoutCentent);
+			setTimeout(() => {
+			console.log(domTurnImg(layoutCentent));
+			this.layout = false
+
+			}, 0);
+			
         },
     },
 });
@@ -259,10 +607,11 @@ export default defineComponent({
 
 <style lang="less">
 .layout_modal {
-	width: 80% !important;
+	max-width: 1150px;
     .ant-modal-body {
         padding: 0;
-		height: calc(60vh - 6.4rem);
+		// height: calc(65vh - 6.4rem);
+		height: 60rem;
     }
 	.ant-modal-content{
 		border-radius: 1rem;
@@ -295,6 +644,13 @@ export default defineComponent({
 			display: flex;
 			margin-top: 2rem;
 			justify-content: center;
+			.active{
+				img{
+					border: 2px solid;
+					border-radius: 2px;
+					box-sizing: border-box;
+				}
+			}
 			img{
 				width:5rem;
                 cursor: pointer;
@@ -303,54 +659,166 @@ export default defineComponent({
 		}
 		.layout_centent{
 			display: flex;
-			height: 60%;
+			height: 55%;
+			// height: 60%;
 			flex-direction: column;
 			flex-wrap: wrap;
 			align-content: space-around;
 			width: 50%;
-			margin: auto;
-			padding: 3rem 0;
+			margin: 3rem auto;
+			overflow: hidden;
+			// padding: 3rem 0;
 			justify-content: space-between;
-			>div{
-				// width: 100%;
-				// height: 100%;
-				// display: flex;
-				// flex-direction: column;
-				// flex-wrap: wrap;
-				// align-content: space-around;
-				// margin: auto;
-				// justify-content: space-between;
-			}
+			position: relative;
+			user-select:none
 			&.active{
 				flex-direction: row;
-
-				// >div{
-				// }
+			}
+			.layout_btn{
+				list-style: none;
+				width: 100%;
+				height: 100%;
+				position: absolute;
+				top: 0;
+				left: 0;
+				box-sizing: border-box;
+				border: 2px solid rgb(20, 188, 255);
+				padding: 0;
+				-webkit-user-drag: none;
+				user-select:none;
+				li{
+					cursor: pointer;
+					// border-radius: 50%;
+					width: 1rem;
+					height: 1rem;
+					background-color: rgb(20, 188, 255);
+					position: absolute;
+					z-index: 1049;
+				}
+				.layout_btn_top,.layout_btn_bottom{
+					left: 50%;
+					transform: translate(-50%,-50%) ;
+					cursor: n-resize;
+				}
+				.layout_btn_top{
+					top: 0;
+				}
+				.layout_btn_bottom{
+					top: 100%;
+				}
+				.layout_btn_left,.layout_btn_right{
+					top: 50%;
+					transform: translate(-50%,-50%) ;
+					cursor: e-resize;
+				}
+				.layout_btn_left{
+					left: 0;
+				}
+				.layout_btn_right{
+					left: 100%;
+				}
+				.layout_rotote{
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%,-50%);
+					width: 0;
+					height: 0;
+				}
+				.layout_rotote::after{
+					position: absolute;
+					content: "";
+					background-color: #14bcff;
+					width: 2px;
+					height: 30px;
+					left: 50%;
+					bottom: 0;
+					transform: translateX(-50%);
+				}
+				.layout_rotote::before{
+					position: absolute;
+					content: "";
+					background-color: #14bcff;
+					top: calc(50% - 30px);
+					left: 50%;
+					transform: translate(-50%,-50%) ;
+					width: 1.5rem;
+					height: 1.5rem;
+					border-radius: 50%;
+				}
+				.layout_translate{
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%,-50%) ;
+					cursor: crosshair;
+					cursor: move;
+				}
+				.layout_angle_tr{
+					right: 0%;
+					top: 0;
+				}
+				.layout_angle_tl{
+					left: 0%;
+					top: 0;
+				}
+				.layout_angle_br{
+					right: 0%;
+					bottom: 0%;
+				}
+				.layout_angle_bl{
+					left: 0%;
+					bottom: 0%;
+				}
+				.eventNode{
+					pointer-events: none;
+				}
 			}
 			.layout_centent_bor{
 				
 			}
 			.modal_imgItem{
 				position: relative;
-				img{
+				// >div{
+				// 	position: absolute;
+				// 	width: 100%;
+				// 	height: 100%;
+				// }
+				overflow: hidden;
+				&.active{
 					position: absolute;
-					object-fit: cover;
-					width: 100%;
-					height: 100%;
 				}
+				img{
+					// object-fit: cover;
+					// width: 100%;
+					// height: 100%;
+					float: left;
+					user-select:none;
+					-webkit-user-drag: none;
+					position: absolute;
+					top: 50%;
+					left: 50%;
+					transform: translate(-50%,-50%) scale(1);
+				}
+				::selection {
+						// background: rgba(0,0,0,0);
+						// background: yellow;
+					}
+			
 			}
 		}
 		.wh1{
 				width: 23%;
 				height: 48%;
+				
 			}
 			.wh4{
 				width: 48.5%;
 				height: 100%;
+				
 			}
 			.w1h2{
 				width: 23%;
 				height: 100%;
+				
 			}
 			.w2h1{
 				width: 48.5%;
@@ -360,7 +828,7 @@ export default defineComponent({
 			position: absolute;
 			top: 50%;
 			transform: translateY(-50%);
-			left: 0;
+			left: 2rem;
 			overflow-x: hidden;
 			// background-color: #000;
 			width: 8%;
diff --git a/src/store/uploadFile/moodboard.ts b/src/store/uploadFile/moodboard.ts
new file mode 100644
index 00000000..4d451544
--- /dev/null
+++ b/src/store/uploadFile/moodboard.ts
@@ -0,0 +1,76 @@
+import {Module} from 'vuex'
+import {RootState} from '../index'
+import { message } from "ant-design-vue";
+import UploadFile  from './uploadFile'
+
+interface UploadList{
+    moodboardList:any,
+	generateList:any,
+	MaterialList:any,
+}
+
+const Moodboard : Module<UploadList,RootState> = {
+    state:{
+        moodboardList:[],
+		generateList:[],
+		MaterialList:[],
+    },
+    mutations:{
+        setMoodboardFile(state,files){
+			state.moodboardList = files;
+			// (UploadFile.mutations as any).setMoodboard();
+        },
+    
+		addGenerateMaterialFils(state,data){
+			let file
+			let arr = [...state.generateList,...state.MaterialList,...state.moodboardList]
+			if(data.type_ == 'generate'){
+				file = state.generateList
+			}else{
+				file = state.MaterialList
+			}
+			if(file.length == 0){
+				if(arr.length >= 8){
+					message.error('You can select up to 8 images')
+				}else{
+					data.checked = true
+					file.push(data)
+				}
+			}else{
+				let str = true
+				for (let index = 0; index < file.length; index++) {
+					if(file[index].id_ == data.id_){
+						// data.id_ = GO.id++
+						str = false
+					}
+				}
+				if(str){
+					if(arr.length >= 8){
+						message.error('You can select up to 8 images')
+					}else{
+						data.checked = true
+						file.push(data)
+					}
+				}else{
+					data.checked = false
+					file = file.filter((v:any)=> v.id_ != data.id_)
+				}
+			}
+			if(data.type_ == 'generate'){
+				state.generateList = file
+			}else{
+				state.MaterialList = file
+			}
+			// (UploadFile.mutations as any).setMoodboard();
+        },
+		setGenerateFils(state,files){
+            state.generateList = files
+			// (UploadFile.mutations as any).setMoodboard();
+        },
+    },
+    actions:{
+
+    }
+}
+
+export default Moodboard
\ No newline at end of file
diff --git a/src/store/uploadFile/uploadFile.ts b/src/store/uploadFile/uploadFile.ts
index 0af4f41c..ba55dbbd 100644
--- a/src/store/uploadFile/uploadFile.ts
+++ b/src/store/uploadFile/uploadFile.ts
@@ -3,14 +3,19 @@ import {RootState} from '../index'
 import { message } from "ant-design-vue";
 
 interface UploadFiles{
+	moodboard:any,
     moodboardFiles:any,
+	moodboardGenerateFiles:any,
+	moodboardMaterialFiles:any,
+	sketchboard:any,
+    sketchboardFiles:any,
+	sketchGenerateFiles:any,
+	sketchMaterialFiles:any,
+	printboard:any,
     printboardFiles:any,
-    generatePrintFiles:any,
-	generateFiles:any,
-	MaterialFiles:any,
-	generateList:any,
+	printGenerateFiles:any,
+	printMaterialFiles:any,
     colorBoards:any,
-    skecthboardFiles:any,
     marketingSketchFiles:any,
     allBoardData:any, //备份的所有数据，点finish之后备份
     moodTemplateId:any,
@@ -18,35 +23,50 @@ interface UploadFiles{
 
 const UploadFilesModule : Module<UploadFiles,RootState> = {
     state:{
+		moodboard:[],
         moodboardFiles:[],
+		moodboardGenerateFiles:[],
+		moodboardMaterialFiles:[],
+		sketchboard:[],
+        sketchboardFiles:[],
+		sketchGenerateFiles:[],
+		sketchMaterialFiles:[],
+		printboard:[],
         printboardFiles:[],
-        generatePrintFiles:[],
-		generateFiles:[],
-		MaterialFiles:[],
-		generateList:[],
+		printGenerateFiles:[],
+		printMaterialFiles:[],
         colorBoards:[],
-        skecthboardFiles:[],
         marketingSketchFiles:[],
         allBoardData:{},
         moodTemplateId:'',
+		
     },
     mutations:{
+		
         setMoodboardFile(state,files){
 			state.moodboardFiles = files
-        },
-        setPrintboardFile(state,files){
-            state.printboardFiles = files
-        },
-        setGeneratePrintFile(state,files){
-            state.generatePrintFiles = files
+			state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles]	
         },
 		addGenerateMaterialFils(state,data){
 			let file
-			let arr = [...state.generateFiles,...state.MaterialFiles,...state.moodboardFiles]
-			if(data.type_ == 'generate'){
-				file = state.generateFiles
+			let arr = state.moodboard
+			if(data.type_.type1 == 'generate'){
+				
+				if(data.type_.type2 == 'Moodboard'){
+					file = state.moodboardGenerateFiles
+				}else if(data.type_.type2 == 'Sketchboard'){
+					file = state.sketchGenerateFiles
+				}else if(data.type_.type2 == 'Printboard'){
+					file = state.printGenerateFiles
+				}
 			}else{
-				file = state.MaterialFiles
+				if(data.type_.type2 == 'Moodboard'){
+					file = state.moodboardMaterialFiles
+				}else if(data.type_.type2 == 'Sketchboard'){
+					file = state.sketchMaterialFiles
+				}else if(data.type_.type2 == 'Printboard'){
+					file = state.printGenerateFiles
+				}
 			}
 			if(file.length == 0){
 				if(arr.length >= 8){
@@ -75,35 +95,51 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
 					file = file.filter((v:any)=> v.id_ != data.id_)
 				}
 			}
-			if(data.type_ == 'generate'){
-				state.generateFiles = file
+			if(data.type_.type1 == 'generate'){
+				if(data.type_.type2 == 'Moodboard'){
+					state.moodboardGenerateFiles = file 
+				}else if(data.type_.type2 == 'Sketchboard'){
+					state.sketchGenerateFiles = file 
+				}else if(data.type_.type2 == 'Printboard'){
+					state.printGenerateFiles = file
+				}
 			}else{
-				state.MaterialFiles = file
+				if(data.type_.type2 == 'Moodboard'){
+					state.moodboardMaterialFiles = file 
+				}else if(data.type_.type2 == 'Sketchboard'){
+					state.sketchMaterialFiles = file 
+				}else if(data.type_.type2 == 'Printboard'){
+					state.printMaterialFiles = state.printMaterialFiles
+				}
 			}
+			state.moodboard = [...state.moodboardFiles,...state.moodboardGenerateFiles,...state.moodboardMaterialFiles]	
+			state.sketchboard = [...state.sketchboardFiles,...state.sketchGenerateFiles,...state.sketchMaterialFiles]	
+			state.printboard = [...state.printboardFiles,...state.printGenerateFiles,...state.printMaterialFiles]	
         },
-		getGenerateList(state,list){
-            state.generateList = list
+		setSketchboardFile(state,files){
+            state.sketchboardFiles = files
+			state.sketchboard = [...state.sketchboardFiles,...state.sketchGenerateFiles,...state.sketchMaterialFiles]	
+
         },
-		// setGenerateFils(state,files){
-        //     state.generateFiles = files
-        // },
+		setPrintboardFile(state,files){
+            state.printboardFiles = files
+			state.printboard = [...state.printboardFiles,...state.printGenerateFiles,...state.printMaterialFiles]	
+        },
+
+
+		
         setColorboardList(state,colorBoards){
             state.colorBoards = colorBoards
         },
-        setSketchboardFile(state,files){
-            state.skecthboardFiles = files
-        },
         setMarketingSketchFile(state,files){
             state.marketingSketchFiles = files
         },
         setAllBoardData(state){
             state.allBoardData = {
-                moodboardFiles:state.moodboardFiles,
+                moodboardFiles:state.moodboard,
                 printboardFiles:state.printboardFiles,
-                generatePrintFiles:state.generatePrintFiles,
-                generateFiles:state.generateFiles,
                 colorBoards:state.colorBoards,
-                skecthboardFiles:state.skecthboardFiles,
+                sketchboardFiles:state.sketchboard,
                 marketingSketchFiles:state.marketingSketchFiles,
                 moodTemplateId:state.moodTemplateId,
             }
@@ -112,13 +148,19 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
             state.allBoardData = data
         },
         clearAllData(state){
+            state.moodboard = []
             state.moodboardFiles = []
-            state.printboardFiles = []
-            state.generatePrintFiles=[]
-            state.generateFiles = []
-            state.MaterialFiles = []
-            state.colorBoards = []
-            state.skecthboardFiles = []
+            state.moodboardGenerateFiles = []
+            state.moodboardMaterialFiles = []
+            state.sketchboard = []
+			state.sketchboardFiles = []
+            state.sketchGenerateFiles = []
+            state.sketchMaterialFiles = []
+			state.printboard = []
+			state.printboardFiles = []
+            state.printGenerateFiles = []
+            state.printMaterialFiles = []
+			state.colorBoards = []
             state.marketingSketchFiles = []
             state.moodTemplateId = ''
         },
diff --git a/src/tool/GO.ts b/src/tool/GO.ts
index e1269108..b9b4bbec 100644
--- a/src/tool/GO.ts
+++ b/src/tool/GO.ts
@@ -1,4 +1,5 @@
 export default {
 	id : 1,
-	testUrl:'http://192.168.1.5:10086'
+	testUrl:'http://192.168.1.5:10086',
+	zIndex:2,
 }
\ No newline at end of file
diff --git a/src/tool/domTurnImg.js b/src/tool/domTurnImg.js
new file mode 100644
index 00000000..cb042028
--- /dev/null
+++ b/src/tool/domTurnImg.js
@@ -0,0 +1,24 @@
+import html2canvas from "html2canvas";
+const getJpeg = dom =>{
+	return new Promise(resolve =>{
+		html2canvas(dom,{useCORS: true,}).then(canvas =>{
+			const jpeg = canvas.toDataURL('image/jpeg',1.0);
+			resolve(base64ToFile(jpeg))
+			console.log(jpeg);
+		})
+	})
+}
+const base64ToFile = urlData =>{
+	const arr = urlData.split(',');
+	const mime = arr[0].match(/:(.*?);/)[1]
+	const bytes = atob(arr[1])
+	let n = bytes.length;
+	const ia = new Uint8Array(n)
+	while (n--){
+		ia[n] = bytes.charCodeAt(n);
+	}
+	console.log(new File([ia],'jpeg',{type:mime}));
+	return new File([ia],'jpeg',{type:mime})
+
+}
+export default getJpeg
\ No newline at end of file
diff --git a/src/tool/https.js b/src/tool/https.js
index 737e6069..c0b8e09f 100644
--- a/src/tool/https.js
+++ b/src/tool/https.js
@@ -20,7 +20,7 @@ import { message } from 'ant-design-vue';
 // 	axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;   //配置接口地址
 // }
 axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;   //配置接口地址
-
+console.log(process.env.VUE_APP_BASE_URL);
 //POST传参序列化(添加请求拦截器)
 axios.interceptors.request.use((config) => {
     //在发送请求之前做某件事
@@ -78,7 +78,7 @@ export const Https = {
         designCollection:'/api/design/designCollection', //设计 Conllection
         reDesignCollection:'/api/design/reDesignCollection',//重新设计 Conllection
         countDesignProcess:'/api/design/countDesignProcess', //统计design进度
-        getRgbByHsvBatch:'/api/element/getRgbByHsvBatch', //通过hsv值数组批量获取潘通信息
+        getRgbByHsvBatch:'http://192.168.1.6:10086/api/element/getRgbByHsvBatch', //通过hsv值数组批量获取潘通信息
         designLike:'/api/design/like', //Design Like
         designDislike: '/api/design/dislike', //Design Dislike
         queryUserGroup:'/api/history/queryUserGroup', //History用户分页分组列表
@@ -99,8 +99,9 @@ export const Https = {
         saveOrEditTemplatePoint:'/api/library/saveOrEditTemplatePoint',//保存或者编辑template打点
         libraryModelsDot:'/api/library/modelsDot',//Models打点预览
         pythonChatStream:'/api/python/chatStream',//机器人助力
-        workspaceDetail:'http://192.168.1.5:10086/api/workspace/detail',//用户习惯详情
-     
+        workspaceDetail:'http://192.168.1.6:10086/api/workspace/detail',//用户习惯详情
+        sketchAndPrintGenerate:'/api/generate/sketchAndPrint',//sketchGenerate生成图片
+
     },
 
     axiosGet(url,config) {
diff --git a/vue.config.js b/vue.config.js
index 0d42afb3..1483bb2c 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -19,7 +19,7 @@ module.exports = defineConfig({
 	// 	target: process.env.VUE_APP_BASE_URL,
     //     changeOrigin: true, //是否允许跨越
     //   }
-		'http://192.168.1.5:10086/api':{
+		'/api':{
 			target:'http://18.167.251.121:5567',
 			changeOrigin:true,
 		}