From 608a4dec89f4ace96ecfa7a14a12adbed7bb4f68 Mon Sep 17 00:00:00 2001
From: X1627315083 <1627315083@qq.com>
Date: Thu, 22 May 2025 14:26:47 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=88=9B=E5=BB=BA=E9=A1=B9?=
 =?UTF-8?q?=E7=9B=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/HomePage/Generate.vue           |    4 +-
 .../HomePage/NewCollectionReview.vue          |   51 +-
 src/component/home/chat/index.vue             |   14 +-
 src/component/home/design/collection.vue      |  120 ++
 .../design/collection/ColorboardUpload.vue    | 1468 +++++++++++++++++
 .../design/collection/MoodboardUpload.vue     |  743 +++++++++
 .../design/collection/PrintboardUpload.vue    | 1000 +++++++++++
 .../design/collection/SketchboardUpload.vue   |  962 +++++++++++
 src/component/home/design/collection/more.vue |  128 ++
 src/component/home/design/index.vue           |   18 +-
 src/component/home/index.vue                  |   30 +-
 src/component/home/newProject/index.vue       |   54 +-
 src/store/uploadFile/uploadFile.ts            |    1 +
 13 files changed, 4545 insertions(+), 48 deletions(-)
 create mode 100644 src/component/home/design/collection.vue
 create mode 100644 src/component/home/design/collection/ColorboardUpload.vue
 create mode 100644 src/component/home/design/collection/MoodboardUpload.vue
 create mode 100644 src/component/home/design/collection/PrintboardUpload.vue
 create mode 100644 src/component/home/design/collection/SketchboardUpload.vue
 create mode 100644 src/component/home/design/collection/more.vue

diff --git a/src/component/HomePage/Generate.vue b/src/component/HomePage/Generate.vue
index bfaa85ec..e781ffa3 100644
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -13,7 +13,7 @@
 			</div> -->
         </div>
         <div class="input_border" >
-			<div class="input_box  Guide_1_5" :class="[inputShow?'active':'',type_.type2 =='Sketchboard'?'Guide_1_9_2':'',driver__.driver?'showEvents':'']">
+			<div class="input_box  Guide_1_5" :class="[inputShow?'active':'',]">
 				<div class="input_box_btnBox" v-if="scene?.value != 'extract'">
 					<div class="upload_item" v-show="sketchboardList?.length != 0">
 						<div
@@ -186,7 +186,7 @@
 				</div>
 			</div>
         </div>
-        <div class="generage_img Guide_1_6" :class="{Guide_1_13_2:type_.type2 == 'Sketchboard',Guide_1_2_9:type_.type2 == 'Printboard',showEvents : driver__.driver}" :style="[isGenerate?'overflow:hidden':'']">
+        <div class="generage_img" :style="[isGenerate?'overflow:hidden':'']">
             <div
                 class="generage_img_item"
                 v-for="(item, index) in fileList"
diff --git a/src/component/HomePage/NewCollectionReview.vue b/src/component/HomePage/NewCollectionReview.vue
index ec4ff894..3e826a6a 100644
--- a/src/component/HomePage/NewCollectionReview.vue
+++ b/src/component/HomePage/NewCollectionReview.vue
@@ -1,11 +1,15 @@
 <template>
     <!-- 生成collention缩略图用的 -->
     <div class="collection_review">
-        <div class="collection_review_mark"></div>
+        <!-- <div class="collection_review_mark"></div> -->
         <!-- <div class="img_block_item" v-if="allBoardData?.moodTemplateId">
             <MoodTemplate :fileList="allBoardData?.moodboardFiles" :moodTemplateId="allBoardData?.moodTemplateId"></MoodTemplate>
         </div> -->
         <div class="img_block_item" v-if="allBoardData?.disposeMoodboard?.length != 0 && allBoardData?.disposeMoodboard?.[0] != null">
+			<div class="title">
+				<div>Moodboard</div>
+				<i class="fi fi-rr-edit" @click="openCollection('moodBoard')"></i>
+			</div>
             <div  v-for="(mood) in allBoardData?.disposeMoodboard" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_disposeMoodboard" >
                 <div class="all_img_item_block">
                     <img class="all_img_content cover_img" :src="mood?.imgUrl" > 
@@ -13,6 +17,10 @@
             </div>
         </div>
 		<div class="img_block_item" v-else>
+			<div class="title" v-if="allBoardData?.moodboardFiles?.length>0">
+				<div>Moodboard</div>
+				<i class="fi fi-rr-edit" @click="openCollection('moodBoard')"></i>
+			</div>
 			<div  v-for="(mood) in allBoardData?.moodboardFiles" :key="mood" v-show="mood?.imgUrl != ''" class="lager_img_item lager_img_moodboard" >
                 <div class="all_img_item_block">
                     <img class="all_img_content cover_img" :src="mood?.imgUrl" > 
@@ -20,7 +28,11 @@
             </div>
         </div>
 
-        <div class="img_block_item">
+        <div class="img_block_item" v-if="allBoardData?.printboardFiles?.length>0 || allBoardData?.generatePrintFiles?.length>0">
+			<div class="title">
+				<div>Printboard</div>
+				<i class="fi fi-rr-edit" @click="openCollection('printBoard')"></i>
+			</div>
             <div class="small_img_item"  v-for="(print) in allBoardData?.printboardFiles" :key="print">
                 <div class="all_img_item_block">
                     <img class="all_img_content cover_img" :src="print?.imgUrl"> 
@@ -33,7 +45,11 @@
             </div>
         </div>
 
-        <div class="img_block_item">
+        <div class="img_block_item" v-if="allBoardData?.colorBoards?.length>0">
+			<div class="title">
+				<div>Colorboard</div>
+				<i class="fi fi-rr-edit" @click="openCollection('colorBoard')"></i>
+			</div>
             <div class="color_item"  v-for="(color) in allBoardData?.colorBoards" :key="color">
                 <div class="color_content" v-if="!color?.gradient" :style="{background:`rgb(${color?.rgbValue?.r},${color?.rgbValue?.g},${color?.rgbValue?.b},${color?.rgbValue?.a})`}"></div>
                 <div class="color_content" v-else :style="{height:'11rem','background-image':color?.gradient?`linear-gradient(${color?.gradient.angle}deg,${setGradient(color?.gradient)}`:'none'}"></div>
@@ -52,6 +68,10 @@
             </div>
         </div> -->
 		<div class="img_block_item img_block_item_sketch">
+			<div class="title" v-if="allBoardData?.sketch">
+				<div>Sketchboard</div>
+				<i class="fi fi-rr-edit" @click="openCollection('sketchBoard')"></i>
+			</div>
             <div class="lager_img_item" :class="'lager_img_item'+index" v-for="(item,index) in sketch" :key="item">
 				<div class="all_img_item_block" v-for="v in item" :key="sketch">
                     <img class="all_img_content" :src="v?.urlWithWhiteSide">
@@ -75,18 +95,23 @@ import MoodTemplate from '@/component/HomePage/MoodTemplate.vue'
 import { useStore } from "vuex";
 export default defineComponent({
     components:{MoodTemplate},
-    setup() {
+	emits:['openCollection'],
+    setup(props, { emit }) {
         const store:any = useStore();
 		let sketch:any = ref([[],[],[]])
 		let sketchList:any = computed(()=>{
 			return store.state.UploadFilesModule.showSketchboard})
         let allBoardData:any = computed(()=>{
 			return store.state.UploadFilesModule.allBoardData})
+		const openCollection = (str:any)=>{
+			emit('openCollection',str)
+		}
         return {
 			store,
             allBoardData,
 			sketch,
 			sketchList,
+			openCollection,
         }
     },
 	data(){
@@ -113,8 +138,10 @@ export default defineComponent({
 						this.imgOpen = true
 					}
 				}else{
-					this.setSketch()
-					this.imgOpen = true
+					nextTick(()=>{
+						this.setSketch()
+						this.imgOpen = true
+					})
 				}
 				
 			
@@ -215,6 +242,18 @@ export default defineComponent({
         // &.color_block_item{
         //     padding: 0 0.5rem 0 0.3rem;
         // }
+		> .title{
+			display: flex;
+			font-size: 1.4rem;
+			font-weight: 900;
+			align-items: center;
+			justify-content: space-between;
+			> i{
+				font-size: 2rem;	
+				display: flex;
+				cursor: pointer;
+			}
+		}
         .lager_img_item{
             display: inline-block;
             width: 20.4rem;
diff --git a/src/component/home/chat/index.vue b/src/component/home/chat/index.vue
index 56759922..4267ab6c 100644
--- a/src/component/home/chat/index.vue
+++ b/src/component/home/chat/index.vue
@@ -57,8 +57,8 @@
 					</div>
 					<div class="sendBox">
 						<div class="enableThinking" :class="{active:enableThinking}" @click="()=>enableThinking = !enableThinking">Deep Thinking</div>
-						<div class="maxNum">{{ chatContent.length }}/10000</div>
-						<div class="send" :class="{active:chatContent.length>0}" @click="sendChat">
+						<div class="maxNum">{{ chatContent?.length }}/10000</div>
+						<div class="send" :class="{active:chatContent?.length>0}" @click="sendChat">
 							<i class="fi fi-ss-paper-plane-top"></i>
 						</div>
 					</div>
@@ -118,7 +118,12 @@ export default defineComponent({
 		const sendChat = ()=>{
 			if(!data.isFinish)return
 			if(!data.chatContent)return
-			let fileList = JSON.parse(JSON.stringify(data.filList))
+			let fileList
+			if(data.filList){
+				fileList = JSON.parse(JSON.stringify(data.filList))
+			}else{
+				fileList = []
+			}
 			let fileUrl = (fileList.filter((item:any)=>item.type == 'file').length > 0) ? fileList.filter((item:any)=>item.type == 'file')[0].minioPath : ''
 			let imageUrlList = (fileList.filter((item:any)=>item.type == 'image').length > 0)? fileList.filter((item:any)=>item.type == 'image').map((item:any)=>item.minioPath).join(',') : ''
 			data.chatList.push({content:{message:data.chatContent,think:''},role:'user',fileList:fileList})
@@ -148,13 +153,14 @@ export default defineComponent({
 						data.chatList[data.chatList.length-1].content.think+=JSON.parse(event.data).content
 					}
 				}else{
+					let list = ['[MOOD_SIGNAL]','[PRINT_SIGNAL]','[SKETCH_SIGNAL]']
 					if(JSON.parse(event.data).status == "[DESIGN_SIGNAL]"){
 
 					}else if(JSON.parse(event.data).status == "[COLOR_SIGNAL]"){
 						data.chatList.push({content:{message:''},role:'system'})
 						data.chatList[data.chatList.length-1].content.color = JSON.parse(JSON.parse(event.data).tools_data).receiveCollectionElementList
 						data.chatList.push({content:{message:''},role:'system'})
-					}else{
+					}else if(list.indexOf(JSON.parse(event.data).status)>-1){
 						data.chatList.push({content:{message:''},role:'system'})
 						data.chatList[data.chatList.length-1].content.img = JSON.parse(JSON.parse(event.data).tools_data).receiveCollectionElementList
 						data.chatList.push({content:{message:''},role:'system'})
diff --git a/src/component/home/design/collection.vue b/src/component/home/design/collection.vue
new file mode 100644
index 00000000..9aa056b7
--- /dev/null
+++ b/src/component/home/design/collection.vue
@@ -0,0 +1,120 @@
+<template>
+	<div class="collectionModal" ref="collectionModal"></div>
+	<a-modal
+		class="collection generalModel"
+		v-model:visible="habitSetStyle"
+		:footer="null"
+		width="75%"
+		:get-container="() => $refs.collectionModal"
+		:maskClosable="false"
+		:centered="true"
+		:closable="false"
+		:mask="true"
+		:keyboard="false"
+		:destroyOnClose="true"
+		:zIndex="1000"
+	>
+		<div class="generalModel_btn">
+			<div class="generalModel_closeIcon" @click.stop="cleardata()">
+				<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+					<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+					<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
+					<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
+				</svg>
+			</div>
+		</div>
+		<div class="designOpenrtion_content">
+			<!-- <div class="modal_title_text">
+				<div>Setting</div>
+			</div> -->
+			<div class="collectionBox">
+				<MoodboardUpload ref="moodBoard" v-if="openType == 'moodBoard'"></MoodboardUpload>
+                <PrintboardUpload ref="printBoard" v-if="openType == 'printBoard'"></PrintboardUpload>
+                <ColorboardUpload ref="colorBoard" v-if="openType == 'colorBoard'"></ColorboardUpload>
+                <SketchboardUpload ref="sketchBoard" v-if="openType == 'sketchBoard'"></SketchboardUpload>
+			</div>
+		</div>
+		<div class="mark_loading" v-show="isShowMark">
+			<a-spin size="large" />
+		</div>
+	</a-modal>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import { init } from 'echarts/core';
+import MoodboardUpload from './collection/MoodboardUpload.vue';
+import PrintboardUpload from './collection/PrintboardUpload.vue';
+import ColorboardUpload from './collection/ColorboardUpload.vue';
+import SketchboardUpload from './collection/SketchboardUpload.vue';
+
+export default defineComponent({
+	components:{
+		MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,
+	},
+	props:{
+	},
+	emits:['getHistory'],
+	setup(props,{emit}) {
+		const store = useStore();
+		const data = reactive({
+			habitSetStyle:false,
+			isShowMark:false,
+			openType:'',
+		})
+		let driver__:any = computed(()=>{
+			return store.state.Guide.guide
+		}) 
+		provide('driver__',driver__) 
+		const dataDom = reactive({
+			moodBoard:null as any,
+			printBoard:null as any,
+			colorBoard:null as any,
+			sketchBoard:null as any,
+		}) as any
+		const init = (value:any)=>{
+			data.habitSetStyle = true
+			data.openType = value
+			nextTick(()=>{
+				dataDom[value].openSetData()
+			})
+		}
+		let cleardata = ()=>{
+			data.habitSetStyle = false
+			if(data.openType)store.dispatch('setAllBoardData',{type:data.openType})
+		}
+		
+		return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			cleardata,
+			init,
+		}
+	},
+	provide() {
+		return {
+		}
+	},
+})
+</script>
+<style lang="less" scoped>
+	.collectionModal{
+		:deep(.designOpenrtion_content){
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+			height: 100%;
+			.collectionBox{
+				width: 100%;
+				height: 100%;
+				display: flex;
+				.collection_modal_item{
+					overflow: hidden;
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/component/home/design/collection/ColorboardUpload.vue b/src/component/home/design/collection/ColorboardUpload.vue
new file mode 100644
index 00000000..8bd4f40c
--- /dev/null
+++ b/src/component/home/design/collection/ColorboardUpload.vue
@@ -0,0 +1,1468 @@
+<template>
+    <div class="colorboard_upload_modal">
+		<!-- <div class="modal_layout">
+			<div class="modal_text">
+				<div>{{ $t('ColorboardUpload.Thumbnail') }}</div>
+			</div>
+			<div class="modal_img">
+				<div class="modal_img_item" v-for="color,index in colorList" :class="[ index == 1?'Guide_1_11_1':'',driver__.driver?'showEvents':'']" :key="color" >
+					<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`,'background-image':color?.gradient?`linear-gradient(${color?.gradient?.angle}deg,${setGradient(color.gradient)})`:'none'}">
+					</div>
+				</div>
+				<div>
+					<span class="started_btn" @click="clearCurrentColor">{{ $t('ColorboardUpload.Clear') }}</span>
+				</div>
+			</div>
+		</div> -->
+		<div class="modal_left">
+			<div class="right_content_line right_content_line_upload">
+				<div class="upload_right_header">
+					<span>{{ $t('ColorboardUpload.UploadImage') }}</span>
+				</div>
+				<div class="upload_centetn">
+					<div class="upload_item">
+						<div class="upload_file_item upload_file_item_show">
+							<i v-show="fileList.length == 0" class="fi fi-rr-square-plus"></i>
+							<div v-show="fileList.length > 0" class="upload_file_item upload_file_item_upload" 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>
+							<div class="upload_file_item_scale" :style="[(driver__.driver && (driver__.index == 19 || driver__.index == 18))?'display :flex;':'']">
+								<div style="position: relative;">
+									<a-upload
+									:title="$t('ColorboardUpload.uploadTitle')"
+									:capture="null"
+									:max-count="1"
+									list-type="picture-card"
+									:customRequest="function(){}"
+									@change="fileUploadChange"
+									:before-upload="beforeUpload"
+									accept=".jpg,.png,.jpeg,.bmp"
+									class=" Guide_1_10"
+									>
+									<div  class="upload_tip_block">
+										<i class="fi fi-br-upload"></i>
+									</div>
+								</a-upload>
+								</div>
+								<div :title="$t('ColorboardUpload.selectTitle')" class="upload_file_item" @click="setPrintImg()">
+									<i class="fi fi-rr-picture"></i>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="upload_color" :style="[driver__.driver?'    overflow: hidden !important;':'']">
+						<div v-for="color,index in selectColorList" :key="color" @click="setUplpadColor(color)" class="upload_color_item" :class="[ index == 0?'Guide_1_11':'',index == 1?'Guide_1_11_2':'',]">
+							<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 :title="pantongNameList[index]">
+						</div>
+					</div>
+					<div class="upload_color_btn" :title="isSelectSuccessively?$t('ColorboardUpload.SelectSuccessivelyOnTitle'):$t('ColorboardUpload.SelectSuccessivelyOffTitle')" v-show="selectColorList.length>0">
+						<span>{{$t('ColorboardUpload.SelectSuccessively')}}</span>
+						<a-switch :checked="isSelectSuccessively" @click="()=>isSelectSuccessively = !isSelectSuccessively" checked-children="ON" un-checked-children="OFF"/>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="modal_right">
+			<div class="right_content_line">
+				<div class="upload_right_header">
+					<span>{{ $t('ColorboardUpload.Palette') }}</span>
+				</div>
+				<div class="color_setting_block">
+					<!-- <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">
+								{{ $t('ColorboardUpload.HEX') }}
+							</div>
+							<div v-show="!colorBlockHex">
+								{{ $t('ColorboardUpload.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 class="color_setting_operateSingle">
+						<!-- <div class="started_btn" @click="setOperate">
+							{{ colorList[selectIndex]?.gradient?.gradientShow? 'Gradual':'Single'}}
+						</div> -->
+						<div class="color_setting_btn" :class="{active:!colorList[selectIndex]?.gradient?.gradientShow}">{{ $t('ColorboardUpload.Single') }}</div>
+						<a-switch :checked="colorList[selectIndex]?.gradient?.gradientShow"  @click="setOperate"/>
+						<div class="color_setting_btn" :class="{active:colorList[selectIndex]?.gradient?.gradientShow}">{{ $t('ColorboardUpload.Gradual') }}</div>
+
+					</div>
+					<div class="color_setting_operate" v-if="colorList[selectIndex]?.gradient?.gradientShow">
+						<div class="color_setting_operate_item color_setting_operate_control">
+							<div class="operate_item_box">
+								<div>{{ $t('ColorboardUpload.Alignment') }}</div>
+							</div>
+							<div class="operate_item_box operate_item_angle">
+								<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle($event,'mousedown')" @touchstart="mousedownGradientAngle($event,'touchstart')">
+									<div :style="{'transform':`rotate(${colorList[selectIndex].gradient.angle}deg)`}"></div>
+								</div>
+								<!-- <input type="number"> -->
+							</div>
+							<div class="operate_item_box operate_item_delete">
+								<i class="fi fi-rr-trash" @click="deleteGradientItem"></i>
+							</div>
+						</div>
+						<div class="color_setting_operate_item color_setting_operate_input">
+							<div class="color_setting_operate_bg" @click="addGradient($event)" :style="{'background-image':colorList[selectIndex]?.gradient?`linear-gradient(90deg,${setGradient(colorList[selectIndex].gradient)})`:'none'}">
+							</div>
+							<div v-for="item,index in colorList[selectIndex].gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == colorList[selectIndex].gradient.selectIndex}" :style="{'left':item.left,'background-color':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @mousedown="mousedownGradient($event,item,index,'mousedown')" @touchstart="mousedownGradient($event,item,index,'touchstart')"></div>
+						</div>
+					</div>
+				</div>
+				<!-- <div class="color_review_block">
+					<div class="clear_button" @click="clearCurrentColor()">Clear</div>
+				</div> -->
+			</div>
+			
+			<div class="right_content_line" style="margin-left: 8rem; flex: 1;">
+				<div class="upload_right_header">
+					<span>{{ $t('ColorboardUpload.Thumbnail') }}</span>
+				</div>
+				<div class="modal_img">
+					<div class="modal_img_item" v-for="color,index in colorList" :class="[ index == 1?'Guide_1_11_1':'',driver__.driver?'showEvents':'']" :key="color" >
+						<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`,'background-image':color?.gradient?`linear-gradient(${color?.gradient?.angle}deg,${setGradient(color.gradient)})`:'none'}">
+						</div>
+						<div class="delete" v-if="color.rgba?.r" @click="clearCurrentColor(index)">
+							<span class="icon iconfont icon-shanchu"></span>
+						</div>
+					</div>
+				</div>
+				<div class="upload_right_header">
+					<span>{{ $t('ColorboardUpload.ColorCode') }}</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()"/>
+					<div class="get_color_button" @click="getTcxColor()">
+						<!-- <span class="icon iconfont icon-huoquduixiang"></span> -->
+						<span class="get_color_des">{{ $t('ColorboardUpload.ExtractColor') }}</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 :title="pantongName">
+					</div> -->
+				</div>
+			</div>
+		</div>
+		<selectImgList ref="selectImgList" @setImgGetColor="setImgGetColor"></selectImgList>
+    </div>
+</template>
+<script>
+import { Chrome,Slider,Sketch,Material,Compact,Swatches,} from '@ans1998/vue3-color'
+import { Https } from "@/tool/https";
+import GO from "@/tool/GO";
+import { defineComponent, h,ref,inject, nextTick } from 'vue'
+import { LoadingOutlined } from '@ant-design/icons-vue';
+import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'
+import {useStore} from 'vuex'
+import ColorThief from '@/tool/colorthief/colorthief'
+import { message,Upload} from 'ant-design-vue';
+import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
+import selectImgList from "@/component/HomePage/selectImgList.vue";
+import { useI18n } from 'vue-i18n';
+export default defineComponent({
+    components:{
+        Chrome,
+        Slider,
+		Sketch,
+		selectImgList,
+    },
+	props: {
+		collectionStep: {
+			type: Number,
+		}
+	},
+    setup(){
+		// console.log(isMoible());
+        let fileList = ref([])
+        let colorList = ref([{},{},{},{},{},{},{},{}])
+        let selectColor = ref({
+			rgba:{},
+		}) //顔色选择器默认颜色
+		let selectColorList = ref({
+		})
+		let driver__ = inject('driver__')
+		let {t} = useI18n()
+		let gradient = ref({
+			gradientList:[
+				{
+					rgba:{
+						r:117,
+						g:119,
+						b:255,
+						a:1,
+					},
+					left:'0%'
+				},{
+					rgba:{
+						r:0,
+						g:222,
+						b:152,
+						a:1,
+					},
+					left:'100%'
+				},
+			],
+			angle:45,
+			selectIndex:-1,
+			gradientShow:false,
+		})
+		let isSelectSuccessively = ref(false)
+        return {
+            fileList,
+            colorList,
+            selectColor,
+			selectColorList,
+			driver__,
+			t,
+			gradient,
+			isSelectSuccessively,
+        }
+    },
+    watch:{
+        // selectColor(newVal,oldVal){
+		// 	console.log(this.selectIndex);
+        //     this.colorList[this.selectIndex] = newVal.rgba
+        //     let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
+        //     this.setColorboardList(colorList)
+		// 	// this.clearSelectColor()
+        // },
+		collectionStep:{
+			handler(newVal,oldVal){
+				if(newVal != 3)return
+				const backIcon = document.createElement('div');
+				if(backIcon.classList.contains('vc-sketch-color-wrap'))return
+				backIcon.classList.add('vc-sketch-color-wrap')
+				let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
+				dropperDom.appendChild(backIcon);
+				backIcon.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.info(this.t('ColorboardUpload.jsContent1'))
+					}
+				})
+			}
+		},
+		selectColor:{
+			handler(newVal,oldVal){
+				if(typeof newVal?.rgba?.r !== 'number' && typeof newVal?.rgba?.r !== 'string'){
+					this.colorList[this.selectIndex] = {}
+					return	
+				}
+				this.colorList[this.selectIndex].rgba = newVal.rgba
+				if(this.colorList[this.selectIndex]?.gradient && this.colorList[this.selectIndex]?.gradient?.selectIndex>-1 && this.colorList[this.selectIndex]?.gradient?.gradientShow){
+					this.colorList[this.selectIndex].gradient.gradientList[this.colorList[this.selectIndex].gradient.selectIndex].rgba = {
+						r:newVal.rgba.r,
+						g:newVal.rgba.g,
+						b:newVal.rgba.b,
+						a:1,
+					}
+				}
+				let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
+				this.setColorboardList(colorList)
+			},
+			immediate: true
+		},
+    },
+    computed:{
+        getSelectRGB(selectColor){
+            return (selectColor)=>{
+                let rgba = selectColor.rgba
+                let data = {
+                    r:rgba?.r,
+                    g:rgba?.g,
+                    b:rgba?.b,
+                    a:rgba?.a,
+					// 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
+                }
+				if(data.a != 1 || data.a != 0){
+					data.hex = selectColor.hex8?selectColor.hex8:selectColor.hex
+				}
+                return data
+            }
+        },
+		setGradient(){
+			// return this.setGradientAngle(gradient)
+			return (gradient)=>{
+				let gradientStr = ''
+				if(!gradient.gradientList)return
+				gradient.gradientList.sort((a, b) => {
+					let aArr = a.left.split('%')[0]
+					let bArr = b.left.split('%')[0]
+					return aArr - bArr;
+				});
+				gradient.gradientList.forEach((item,index)=>{
+					let str = ','
+					if(gradient.gradientList.length == index+1)str = ''
+					gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 
+
+				})
+				return `${gradientStr}`
+			}
+			
+		}
+    },
+    data(){
+        return{
+            
+            reviewColor:{}, //预览的颜色
+            selectIndex:0,//选中的文件索引
+            tcxColor:'',
+            pantongName:'',//潘通值
+			pantongNameList:[],
+            indicator : h(LoadingOutlined, {
+                style: {
+                    fontSize: '2.4rem',
+                },
+                spin: true,
+            }),
+            upload:{
+                isPin:0,
+				gender:'',
+                level1Type:'Moodboard',
+                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+            },
+            uploadUrl:'',
+            store:useStore(),
+			colorPickerVisible: true,
+			colorBlockHex:true,
+			getColorBg:false,
+        }
+    },
+    mounted(){
+		nextTick(()=>{
+			this.uploadUrl = getUploadUrl()
+			
+		})
+       
+		// this.clearSelectColor()
+		// if ("EyeDropper" in window) {
+		// 	console.log(true);
+		// }
+		// else {
+		// 	console.log(false);
+		// }
+    },
+    methods:{
+		clearSelectColor(){
+			// let colorBg0 = document.getElementsByClassName('colorboard_upload_modal')[0].getElementsByClassName('color_block_bg')[0]
+			// let colorBg1 = document.getElementsByClassName('colorboard_upload_modal')[0].getElementsByClassName('color_block_bg')[1]
+			// if(this.selectColor?.rgba?.r || this.selectColor?.rgb?.r){
+			// 	colorBg0.style.opacity = 1
+			// 	colorBg1.style.opacity = 1
+			// }else{
+ 			// 	colorBg0.style.opacity = 0
+			// 	colorBg1.style.opacity = 0
+			// }
+		},
+        //选择不同的色块
+        selectColorItem(index,color){
+			let hex
+			if(color?.rgba?.r){
+				hex = this.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a?color.rgba.a:1])
+			}else{
+				hex = '#FFFFFF'
+			}
+            this.selectIndex = index
+            this.tcxColor = ''
+            this.pantongName = ''
+            this.pantongNameList = []
+			this.reviewColor= {}
+			this.getColorBg = false
+			if(this.driver__.driver){
+				driverObj__.moveNext()
+			}
+			if(color?.rgba?.r){
+	            this.selectColor = color
+	            this.selectColor.hex = hex
+			}
+        },
+
+        //通过tcx获取颜色
+        getTcxColor(){
+            if(!this.tcxColor){
+                return
+            }
+			let pattern = /^\d{2}-\d{4}$/;
+			if(pattern.test(this.tcxColor)){
+				Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + this.tcxColor).then((rv) =>{
+					if(rv && rv.name){
+						// let hex = this.rgbaToHex([color.r,color.g,color.b])
+						let hex = this.rgbaToHex([rv.r,rv.g,rv.b,rv.a?rv.a:1])
+						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].rgba =  {r:rv.r, g:rv.g, b:rv.b}
+						this.pantongName = rv.name
+						let colorList =this.colorList.filter((v) => Object.keys(v).length)
+						this.setColorboardList(colorList)
+						this.getColorBg = true
+					}else{
+						message.info(this.t('ColorboardUpload.jsContent2'))
+					}
+				})
+			}else{
+				message.info(this.t('ColorboardUpload.jsContent5'))
+			}
+          
+        },
+
+        //清除当前的颜色
+        clearCurrentColor(index){
+            this.selectColor = {}
+            // this.fileList = []
+			this.reviewColor={}
+			this.colorList[index] = {}
+            this.pantongName = ''
+			this.colorList[index] = {}
+			let colorList =this.colorList.filter((v) => Object.keys(v).length)
+			this.setColorboardList(colorList)
+
+            // this.pantongNameList = []
+            this.tcxColor = ''
+        },
+
+        fileUploadChange(data){
+            let file = data.file
+            let fileData = file.originFileObj
+            var reader = new FileReader();
+            reader.onload = (e) => {
+                let data_new;
+                if (typeof e.target.result === 'object') {
+                // 把Array Buffer转化为blob 如果是base64不需要
+                    data_new = window.URL.createObjectURL(new Blob([e.target.result]));
+                } else {
+                    data_new = e.target.result;
+                }
+                file.imgUrl = data_new
+                file.status = 'done'
+                this.fileList[0] = file
+                this.getImgColor()
+				// nextTick().then(()=>{
+				// 	if(this.driver__.driver){
+				// 		driverObj__.moveNext()
+				// 	}
+				// })
+            };
+            // 转化为base64S
+            reader.readAsDataURL(fileData)
+        },
+		getImgColor(){
+			setTimeout(()=>{
+				const img = new Image();
+				let colorImage = this.$refs.colorImage
+				const colorThief = new ColorThief();
+				img.onload = async () => {
+					let domImg = colorImage[0];
+					// let color = colorThief.getColor(domImg)
+					let selectColorList = [];
+					let selectColor = colorThief.getPalette(img,9)
+					//排序
+					let obj = {
+						max : 5,
+						min: 5,
+					}
+					let colorSort
+					await GO.setColor(selectColor,this.fileList[0].imgUrl,obj).then(
+						(rv) => {
+							if(rv){
+								colorSort = rv.ratio
+							}
+						}
+					)
+					colorSort.sort((a, b) => {
+						var a_num = a.ratio;
+						var b_num = b.ratio;
+						return b_num - a_num;
+					});
+					selectColor = []
+					colorSort.forEach(v=>{
+						selectColor.push(v.rgb)
+					})
+					selectColor = selectColor.join('&')
+					selectColor = selectColor.split("&")
+					let color = selectColor[0].split(',')
+					let colorHex = this.rgbaToHex(color)
+					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}
+					// console.log(this.colorList);
+					// console.log(selectColorList);
+					// let colorListIndex = []
+					// this.colorList.forEach((item,index)=>{
+					// 	if(!item.rgba){
+					// 		colorListIndex.push(index)
+					// 	}
+					// })
+					// for (let index = 0; index < selectColorList.length; index++) {
+					// 	this.colorList[colorListIndex[0]] = selectColorList[index]
+					// 	colorListIndex.splice(0,1)										
+					// }
+					nextTick().then(()=>{
+						if(this.driver__.driver){
+							driverObj__.moveNext()
+						}
+					})
+					img.remove()
+				};
+				img.src = colorImage[0].src;
+			},100)
+		},
+		rgbaToHex(rgba) { // rgba转16进制
+            let hex = '#';
+			rgba.forEach((i,index) => {
+				if(index == 3){
+					hex += Math.round(i * 255).toString(16)
+				}else{
+					hex += Number(i).toString(16).padStart(2, '0');
+				}
+			});
+          
+            return hex;
+        },
+		setUplpadColor(color){
+			nextTick().then(()=>{
+				if(this.isSelectSuccessively){
+					for (let index = 0; index < this.colorList.length; index++) {
+						if(!this.colorList[index].rgba){
+							this.selectIndex = index
+							this.selectColor = color
+							break
+						}
+					}
+				}else{
+					this.selectColor = color
+					if(this.driver__.driver){
+						driverObj__.moveNext()
+					}
+				}
+				
+			})
+			
+		},
+        beforeUpload(file){
+            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
+            if (!isJpgOrPng) {
+                message.info(this.t('ColorboardUpload.jsContent3'));
+            }
+            const isLt2M = file.size / 1024 / 1024 < 5;
+            if (!isLt2M) {
+                message.info(this.t('ColorboardUpload.jsContent4'));
+            }
+            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
+        },
+
+        deleteFile(index){
+            this.fileList.splice(index, 1)
+			this.selectColorList = []
+        },
+
+        //通过HSV获取颜色
+        getHsvColor(color){
+            // let hsv = rgbToHsv(color)
+            this.pantongName = ''
+			// {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) 
+						});
+					}
+                }
+            ).catch(res=>{
+            });
+        },
+
+        setColorboardList(colorList){
+            let  newColorList = colorList.map((v)=>{
+				console.log(v)
+                let data = {
+                    id:'',
+                    name:v?.name?v?.name:'',
+                    rgbValue:v.rgba,
+                    gradient:v.gradient,
+
+                }
+                return data
+            })
+            this.store.commit('setColorboardList',newColorList)
+        },
+
+        openSetData(){
+            let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
+			let hex
+            colorList.forEach((ele, index) => {
+				this.colorList[index] = ele
+				hex = this.rgbaToHex([ele.rgbValue.r,ele.rgbValue.g,ele.rgbValue.b,ele.rgbValue.a?ele.rgbValue.a:1])
+                this.colorList[index].rgba = ele.rgbValue
+				this.colorList[index].gradient = ele.gradient
+				this.colorList[index].name = ele.name
+            });
+			if(this.colorList[0]?.gradient && this.colorList[0]?.gradient?.selectIndex>-1 && this.colorList[0]?.gradient?.gradientShow){
+				this.selectColor = {rgba:this.colorList[0].gradient.gradientList[0].rgba,hex:hex} //顔色选择器默认颜色
+			}else{
+				this.selectColor = {rgba:this.colorList[0].rgba,hex:hex} //顔色选择器默认颜色
+			}
+            this.store.commit('setColorboardList',colorList)
+        },
+		addGradient(event){
+			let gradientWidth = event.target.clientWidth
+			let left = event.offsetX/gradientWidth
+			this.colorList[this.selectIndex].gradient.gradientList.push({
+				rgba:this.selectColor.rgba,
+				left:left.toFixed(2)*100+'%'
+			})
+		},
+		deleteGradientItem(){
+			if(this.colorList[this.selectIndex].gradient.gradientList.length <= 2)return
+			this.colorList[this.selectIndex].gradient.gradientList.splice(this.colorList[this.selectIndex].gradient.selectIndex,1)
+		},
+		mousedownGradient(event,item,index,str){
+			let moible = isMoible()
+			if(moible && str == 'mousedown'){
+				return
+			}else if(!moible && str == 'touchstart'){
+				return
+			}
+			event.stopPropagation();
+			this.colorList[this.selectIndex].gradient.selectIndex = index
+			let gradientRgba = item.rgba
+			let rgba = [gradientRgba.r,gradientRgba.g,gradientRgba.b,gradientRgba.a?gradientRgba.a:1]
+			let hex = this.rgbaToHex(rgba)
+            this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
+			// isMoible()  true为移动端
+			let gradientWidth = document.querySelector('.colorboard_upload_modal .color_setting_operate_bg').clientWidth
+			let position = {
+				x:moible?event.touches[0].screenX:event?.x,
+				left:event.target.style.left?event.target.style.left.split('%')[0]:0
+			}
+			let mousedownGradient = (e)=>{
+				let left = ((moible?e.touches[0].screenX:e.x) - position.x)/gradientWidth*100+Number(position.left)
+				left = (left<0?0:left>100?100:left)
+				item.left = left+'%'
+			}
+			let mouseupGradient = ()=>{
+				if(moible){
+					window.removeEventListener('touchmove',mousedownGradient)
+					window.removeEventListener('touchend',mouseupGradient)
+				}else{
+					window.removeEventListener('mousemove',mousedownGradient)
+					window.removeEventListener('mouseup',mouseupGradient)
+				}
+			}
+			if(moible){
+				window.addEventListener('touchmove',mousedownGradient)
+				window.addEventListener('touchend',mouseupGradient)
+			}else{
+				window.addEventListener('mousemove',mousedownGradient)
+				window.addEventListener('mouseup',mouseupGradient)
+			}
+			// event.target.addEventListener('touchmove',)
+		},
+		mousedownGradientAngle(event,str){
+			let moible = isMoible()
+			if(moible && str == 'mousedown'){
+				return
+			}else if(!moible && str == 'touchstart'){
+				return
+			}
+			event.stopPropagation();
+			// isMoible()  true为移动端
+			let domPosition = event.target.getBoundingClientRect()
+			let position = {
+				x:domPosition.x+domPosition.width/2,
+				y:domPosition.y+domPosition.height/2,
+			}
+			let angle
+
+			let mousedownGradientAngle = (e)=>{
+				let X = position.x 
+				let Y = position.y
+				let x = (moible?e.touches[0].clientX:e?.x) - X
+				let y = Y -( moible?e.touches[0].clientY:e?.y)
+				angle = Math.atan2(x,y)*(180 / Math.PI)
+				// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
+				this.colorList[this.selectIndex].gradient.angle = angle
+
+			}
+			let mouseupGradientAngle = ()=>{
+				if(moible){
+					window.removeEventListener('touchmove',mousedownGradientAngle)
+					window.removeEventListener('touchend',mouseupGradientAngle)
+				}else{
+					window.removeEventListener('mousemove',mousedownGradientAngle)
+					window.removeEventListener('mouseup',mouseupGradientAngle)
+				}
+			}
+			if(moible){
+				window.addEventListener('touchmove',mousedownGradientAngle)
+				window.addEventListener('touchend',mouseupGradientAngle)
+			}else{
+				window.addEventListener('mousemove',mousedownGradientAngle)
+				window.addEventListener('mouseup',mouseupGradientAngle)
+			}
+		},
+		setOperate(){
+			// this.colorList[this.selectIndex]
+			this.selectColor.rgba = this.selectColor.rgba.r?this.selectColor.rgba:{r:0,g:0,b:0,a:1}
+			this.gradient.selectIndex = 0
+			this.gradient.gradientShow = true
+			this.colorList[this.selectIndex].rgba = this.selectColor.rgba
+			if(!this.colorList[this.selectIndex].gradient){
+				if(this.selectColor.rgba.r){
+					this.gradient.gradientList[this.gradient.selectIndex].rgba = {
+						r:this.selectColor.rgba.r,
+						g:this.selectColor.rgba.g,
+						b:this.selectColor.rgba.b,
+						a:1,
+					}
+				}
+				this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
+			}else{
+				this.selectColor = {rgba:this.colorList[this.selectIndex].gradient.gradientList[0].rgba}
+				this.colorList[this.selectIndex].gradient = null
+			}
+			let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
+			this.setColorboardList(colorList)
+		},
+		setPrintImg(){
+			let printImgListData = JSON.parse(JSON.stringify(this.store?.state?.UploadFilesModule.printboard))
+			let moodImgListData = JSON.parse(JSON.stringify(this.store?.state?.UploadFilesModule.moodboard))
+			let imgListData = [...moodImgListData,...printImgListData]
+			if(imgListData?.length==0){
+				message.info(this.t('ColorboardUpload.jsContent6'))
+				return 
+			}
+			let selectImgList = this.$refs.selectImgList;
+			// selectImgList.selectImgListMask = true
+			// selectImgList.styleList = this.styleList
+			selectImgList.init(imgListData);
+		},
+		setImgGetColor(data){
+			data.status = 'await'
+			this.fileList[0] = data
+			fetch(data.imgUrl)
+			.then(response => response.blob())
+				.then(blob => {
+					const reader = new FileReader();
+					reader.readAsDataURL(blob);
+					reader.onloadend = () => {
+						this.fileList[0].status = 'done'
+						const base64data = reader.result;
+						this.fileList[0].imgUrl = base64data
+						nextTick(()=>{
+							this.getImgColor()
+						})
+					};
+			})
+			
+		}
+    }
+})
+</script>
+<style lang="less">
+.colorboard_upload_modal{
+    // padding: 1rem 1rem 1.8rem 1rem;
+    height: 100%;
+    // background: #F2F3FB;
+	position: relative;
+	flex: 1;
+    display: flex;
+	justify-content: space-between;
+	.modal_left,.modal_right{
+		background: #f7f8fa;
+		border-radius: 3rem;
+		padding: 2rem 3rem;
+	}
+	.modal_left{
+		display: flex;
+		flex-direction: column;
+		margin-right: 2rem;
+		width: 33rem;
+	}
+	.modal_right{
+		flex: 1;
+		display: flex;
+		overflow: hidden;
+	}
+	.upload_right_header{
+		padding-bottom: 2rem;
+		font-weight: bold;
+		line-height: calc(2.4rem*1.2);
+		font-size: var(--aida-fsize1-8);
+		color: #333333;
+		display: flex;
+		align-items: center;
+
+		.color_edit{
+			font-size: calc(2rem*1.2);
+			margin-right: calc(1rem*1.2);
+		}
+
+	}
+
+	
+	.right_content_line{
+		// padding-left: calc(3rem*1.2);
+		position: relative;
+		// padding-right: calc(3rem*1.2);
+		// margin-right: 2.4rem;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		
+		.upload_centetn{
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			overflow: hidden;
+		}
+		.upload_item{
+			position: relative;
+		}
+		.upload_centetn::-webkit-scrollbar {
+			display: none;
+		}
+		.upload_file_item_show{
+			position: relative;
+		}
+		.upload_file_item_scale{
+			position: absolute;
+			width: 28rem;
+			height: 14rem;
+			z-index: 2;
+			top: 100%;
+			left: 50%;
+			display: none;
+			transform: translateX(-50%);
+			border-radius: 4px;
+			box-shadow: 0 0px 4px 0px rgba(0, 0, 0, 0.3);
+			overflow: hidden;
+			background: #fff;
+			>div,>span{
+				background: #fafafa                            ;
+				width: 50%;
+			}
+		}
+		.upload_file_item_show:hover{
+			border-bottom: none;
+			.upload_file_item_scale{
+				display: flex;
+			}
+		} 
+		.modal_img{
+			width: 100%;
+			display: flex;
+			flex-wrap: wrap;
+			margin-bottom: 3rem;
+			justify-content: space-between;
+			.modal_img_item{
+				width: calc(100% / 8 - 2rem);
+				aspect-ratio: 1 / 1;
+				position: relative;
+				>div{
+					width: 100%;
+					height: 100%;
+					border: 1px solid #DCDCEC;
+				}
+				.select_upload_color{
+					border: 1px solid #000;
+				}
+				> .delete{
+					position: absolute;
+					width: 100%;
+					height: 30%;
+					bottom: 0;
+					display: none;
+					top: auto;
+					left: 0;
+					background: rgba(0, 0, 0, .2);
+					align-items: center;
+					justify-content: center;
+					cursor: pointer;
+					border: none;
+					> span{
+						font-size: 2rem;
+						color: #fff;
+					}
+				}
+				&:hover{
+					> .delete{
+					    display: flex;
+					}
+				}
+			}
+		}
+		.fi-rr-square-plus,.fi-rr-picture{
+			zoom: 6;
+			display: flex;
+		}
+		.upload_file_item{
+			// margin: 0 2rem 2rem 0;
+			margin: 0;
+			// width: 16.5rem;
+			// height: 16.5rem;
+			// width: calc(12rem*1.2);
+			// height: calc(12rem*1.2);
+			width: 100%;
+			aspect-ratio: 1 / 1;
+			// border: 1px solid #F5F5F5;
+			vertical-align: top;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border: 1px dashed transparent;
+			background: linear-gradient(#fff, #fff) padding-box, repeating-linear-gradient(-45deg, #fff 0, #fff 0.3em, #000 0, #000 0.6em);
+			.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;
+					max-height: 100%;
+					max-width: 100%;
+					object-fit: cover;
+				}
+
+				.delete_file_block{
+					display: none;
+					width: 100%;
+					height: calc(4rem*1.2);
+					background: rgba(0,0,0,0.2);
+					font-size: calc(1.6rem*1.2);
+					color: #FFFFFF;
+					line-height: calc(4rem*1.2);
+					text-align: center;
+					position: absolute;
+					left: 0;
+					bottom: 0;
+				}
+			}
+		}
+
+		.upload_img_icon{
+			width: calc(4.6rem*1.2);
+		}
+		.upload_color{
+			display: flex;
+			width: 100%;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			overflow-y: auto;
+			&.upload_color::-webkit-scrollbar {
+				display: none;
+			}
+			.upload_color_item{
+				width: calc(50% - 2rem);
+				aspect-ratio: 1 / 1;
+				margin: 1rem;
+				position: relative;
+				cursor: pointer;
+				.upload_color_item_bg{
+					width: 100%;
+					height: 100%;
+				}
+				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{
+				}
+			}
+		}
+		.upload_color_btn{
+			white-space: nowrap;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 4rem;
+			font-weight: 600;
+			font-size: 1.8rem;
+			>span{
+				margin-right: 1rem;
+			}
+		}
+		.color_setting_block{
+			background: linear-gradient(70deg, #eee4f3, #f3f4e6);
+
+			border-radius: calc(1rem*1.2);
+			overflow: hidden;
+			// box-shadow: 2px 2px 8px #000;
+			box-shadow: 2px 2px 8px rgba(0,0,0,.3);
+			.vc-chrome{
+				background: rgba(0,0,0,0);
+				box-shadow:none;
+			}
+			.chrome_color{
+				// width: calc(17.5rem*1.2);
+				// width: 24rem;
+				width: 100%;
+				// height: 16.5rem;
+				overflow: hidden;
+
+				.vc-chrome-saturation-wrap{
+					height: 100%;
+					// width: calc(16rem*1.2);
+					// width: 100%;
+					width: 90%;
+					height: calc(14rem*1.2);
+					max-height: calc(17rem*1.2);
+					max-width: 23rem;
+					margin: calc(.7rem*1.2) auto;
+					padding-bottom: 0;
+				}
+				.vc-chrome-body{
+					padding: 0;
+					width: 90%;
+					margin: calc(0.5rem*1.2) auto;
+					margin: 0 auto;
+					background: rgba(0,0,0,0);
+					margin-bottom: calc(1rem*1.2);
+					// display: none;
+					.vc-chrome-fields-wrap{
+						margin-top: 5%;
+						padding: 0;
+						position: relative;
+						.vc-chrome-toggle-btn{
+							width: calc(3.2rem*1.2);
+							.vc-chrome-toggle-icon{
+								height: auto;
+								margin-right: calc(-0.4rem*1.2);
+								margin-top: 0rem;
+								display: flex;
+								flex-direction: column;
+								align-items: center;
+								svg{
+									width: calc(2.4rem*1.2) !important;
+									height: calc(2.4rem*1.2) !important;
+								}
+							}
+						}
+						.vc-chrome-fields{
+							.vc-chrome-field{
+								padding-left: calc(.6rem*1.2);
+							}
+							.vc-input__label{
+								font-size: calc(1.6rem*1.2);
+							}
+							.vc-input__input{
+								font-size: calc(1.1rem*1.2);
+								height: calc(2.1rem*1.2);
+							}
+						}
+						.ant-upload-list{
+							
+						}
+						.vc-sketch-color-wrap{
+							// background-image: url(../../../../../../assets/images/homePage/dropper.png);
+							background-image: url(../../../../assets/images/homePage/dropper.png);
+							// background-image: url(@../../../../assets/images/homePage/裁剪后1.jpg);
+							// background-image: url(@../../../../assets/images/homePage/裁剪后2.jpg);
+							// background-image: url(@../../../../assets/images/homePage/裁剪后3.jpg);
+							background-size: calc(1.5rem*1.2);
+							background-repeat: no-repeat;
+							background-position: 50%;
+							cursor: pointer;
+							margin: 0;
+							width: calc(2.2rem*1.2);
+							height: calc(2.2rem*1.2);
+							padding: calc(.7rem*1.2);
+							border: 1px solid;
+							position: absolute;
+							bottom: calc(-.5rem*1.2);
+							right: calc(.5rem*1.2);
+							border-radius: calc(.5rem*1.2);
+						}
+						.vc-chrome-fields{
+							.vc-input__label{
+								margin-top: calc(1rem*1.2);
+							}
+						}
+						.vc-chrome-fields:nth-child(2){
+							>:last-of-type {
+								display: none;
+							}
+						}
+						.vc-chrome-fields:nth-child(3){
+							>:last-of-type {
+								display: none;
+							}
+						}
+					}
+					.vc-chrome-controls{
+						align-items: center;
+						flex-direction: row-reverse;
+						.vc-chrome-color-wrap{
+							// width: 3.6rem;
+							margin-left: calc(2rem*1.2);
+							width: auto;
+							.vc-chrome-active-color,.vc-checkerboard{
+								width: calc(3rem*1.2);
+								height: calc(3rem*1.2);
+								border-radius: 50%;
+							}
+						}
+						.vc-chrome-hue-wrap,.vc-chrome-alpha-wrap{
+							.vc-hue{
+								border-radius: 15px;
+							}
+							.vc-alpha{
+								border-radius: 15px;
+								overflow: hidden;
+							}
+							height: calc(1rem*1.2);
+							.vc-hue-picker{
+								width: calc(1.4rem*1.2);
+								height: calc(1.4rem*1.2);
+							}
+							.vc-alpha-picker{
+								width: calc(1.4rem*1.2);
+								height: calc(1.4rem*1.2);
+								transform: translate(calc(-.6rem*1.2),calc(-.4rem*1.2));
+							}
+						}
+						.vc-chrome-alpha-wrap{
+							display: none;
+						}
+						.vc-chrome-hue-wrap{
+							margin-bottom: .5rem;
+						}
+					}
+				}
+				.vc-chrome-saturation-wrap .vc-saturation-circle{
+					width: calc(1rem*1.2);
+					height: calc(1rem*1.2);
+				}
+			}
+
+			
+			.color_block{
+				// margin-top: calc(1rem;
+				// display: flex;
+				// justify-content: space-between;
+				// font-size: calc(1.6rem;
+				width: 100%;
+				padding: 0 5%;
+				padding-bottom: 5%;
+				margin: calc(0.5rem*1.2) auto;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				.color_right{
+					width: 13rem;
+					font-size: calc(1.2rem*1.2);
+					color: #666666;
+					.color_rgb_block{
+						display: flex;
+						.rgb_item{
+							margin-left: calc(.2rem*1.2);
+						}
+					}
+				}
+				.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: .25rem .6rem;
+						box-shadow: inset 0 0 0 1px #ccc;
+						border-radius: .5rem;
+						justify-content: space-around;
+						text-transform:uppercase;
+						.color_block_bg{
+							width: 1.8rem;
+							height: 2.5rem;
+							// margin-right: .5rem;
+							display: flex;
+							justify-content: space-between;
+						}
+					}
+					.color_block_bg{
+					}
+				}
+				
+			}
+			.color_setting_operateSingle{
+				text-align: center;
+				margin: 1rem 0;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				.color_setting_btn{
+					margin: 0 1rem;
+					font-size: 2rem;
+					color: rgba(0, 0, 0, 0.5);
+					&.active{
+						color: rgba(0, 0, 0, 0.7);
+						font-weight: 900;
+					}
+				}
+			}
+			.color_setting_operate{
+				*{
+					-webkit-touch-callout: none; /* iOS Safari */
+					-webkit-user-select: none; /* Safari */
+					-moz-user-select: none; /* Firefox */
+					-ms-user-select: none; /* Internet Explorer/Edge */
+					user-select: none;
+				}
+				.color_setting_operate_item{
+					display: flex;
+					justify-content: space-around;
+					align-items: center;
+					.operate_item_box{
+					}
+				}
+				.color_setting_operate_control{
+					.operate_item_delete,.operate_item_angle{
+						cursor: pointer;
+					}
+					.operate_item_delete{
+						i{
+						display: flex;
+							font-size: 3rem;
+						}
+					}
+					.operate_item_angle{
+						.operate_item_angle_box{
+							border-radius: 50%;
+							width: 4rem;
+							height: 4rem;
+							border: solid 2px #39215b;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							cursor: pointer;
+							>div{
+								height: 100%;
+								width: 1rem;
+								position: relative;
+								pointer-events:none;
+							}
+							>div::before{
+								position: absolute;
+								content: "";
+								top: 0.2rem;
+								width: 1rem;
+								height: 1rem;
+								border-radius: 50%;
+								background: #39215b;
+							}
+						}
+					}
+				}
+				.color_setting_operate_input{
+					width: 80%;
+					// padding: 0 10%;
+					margin: 1.2rem 10%;
+					border-radius: 10%;
+					position: relative;
+					height: 2.5rem;
+					.color_setting_operate_bg{
+						border-radius: .5rem;
+						width: 100%;
+						height: 2.5rem;
+						background: #fff;
+						position: absolute;
+					}
+				}
+				.color_setting_operate_btn{
+					position: absolute;
+					top: 50%;
+					transform: translate(-50%,-50%);
+					left: 0;
+					width: 1rem;
+					height: 110%;
+					border: .2rem solid;
+					border-radius: .5rem;
+					cursor: pointer;
+					box-sizing: content-box;
+					z-index: 2;
+					&.active{
+						border: .3rem solid;
+					}
+				}
+				.color_setting_operate_btn:hover{
+					border: .3rem solid;
+				}
+			}
+		}
+		.get_color_block{
+			display: flex;
+			flex-direction: column;
+			width: 32rem;
+			.get_color_input,.get_color_button{
+				width: 100%;
+				border-radius: 5rem;
+				font-weight: 600;
+			}
+			.get_color_input{
+				background: #FFFFFF;
+				border: 1px solid #000;
+				padding: calc(1rem*1.2) calc(1.3rem*1.2);
+				box-sizing: border-box;
+				font-size: calc(1.4rem*1.2);
+				font-size: var(--aida-fsize1-8);
+				text-align: left;
+
+				&::placeholder {
+					color: #B7B7B7;
+				}
+			}
+			
+			.get_color_button{
+				margin-top: 2rem;
+				background: #bdbdbd;
+				display: inline-block;
+				color: #000;
+				line-height: 5rem;
+				text-align: center;
+				font-size: var(--aida-fsize1-8);
+				vertical-align: middle;
+				cursor: pointer;
+				.get_color_des{
+					vertical-align: middle;
+				}
+			}
+			// .get_color_bg{
+			// 	width: calc(18rem*1.2);
+			// 	height: calc(18rem*1.2);
+			// 	position: relative;
+			// 	left: 50%;
+			// 	transform: translateX(-50%);
+			// 	margin-top: calc(1.5rem*1.2);
+			// 	img{
+			// 		opacity: 0;
+			// 		position: absolute;
+			// 		top: 0;
+			// 		width: 100%;
+			// 		height: 100%;
+			// 	}
+			// }
+		}
+	}
+
+	.upload_item{
+		margin-bottom: calc(2rem*1.2);
+		.ant-upload-picture-card-wrapper{
+			.ant-upload-list{
+				.ant-upload-select-picture-card{
+					// margin: 0 2rem 2rem 0;
+					margin: 0;
+					display: inline-block;
+					width: calc(12rem*1.2);
+					height: calc(12rem*1.2);
+					border: 1px solid #F5F5F5;
+					vertical-align: top;
+					i{
+						zoom: 4;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/component/home/design/collection/MoodboardUpload.vue b/src/component/home/design/collection/MoodboardUpload.vue
new file mode 100644
index 00000000..6d654026
--- /dev/null
+++ b/src/component/home/design/collection/MoodboardUpload.vue
@@ -0,0 +1,743 @@
+<template>
+    <div class="collection_modal_item">
+        <div class="modal_left" >
+            <div class="switch_type_list" >
+                <div
+                    @click.stop="open(1)"
+                    class="switch_type_item"
+                    :class="[openClick == 1 ? 'select_swtich' : '']"
+                >
+                    <span>{{ $t('MoodboardUpload.Upload') }}</span>
+                </div>
+                <div
+                    @click.stop="open(2)"
+                    class="switch_type_item"
+                    :class="[openClick == 2 ? 'select_swtich' : '']"
+                >
+                    <span>{{ $t('MoodboardUpload.Library') }}</span>
+                </div>
+                <div
+                    @click.stop="open(3)"
+                    class="switch_type_item"
+                    :class="[openClick == 3 ? 'select_swtich' : '']"
+                >
+                    <span>{{ $t('MoodboardUpload.Generate') }}</span>
+                </div>
+            </div>
+            <div v-show="openClick == 1" class="moodboard_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="delete_file_block"
+                                    @click="deleteFile(file)"
+                                >
+									{{ $t('MoodboardUpload.Delete') }}
+                                </div>
+                            </div>
+                        </div>
+                        <div
+                            class="upload_file_item upload_component"
+                            v-show="moodboarList.length < 8"
+                        >
+						
+                            <a-upload
+                                :action="uploadUrl + '/api/element/upload'"
+                                list-type="picture-card"
+								:capture="null"
+                                :data="{
+                                    ...upload,
+                                }"
+                                :headers="{ Authorization: token }"
+                                :before-upload="beforeUpload"
+                                v-model:file-list="fileList"
+								:maxCount="8 - moodboarList.length+fileList.length"
+                                accept=".jpg,.png,.jpeg,.bmp"
+                                @change="(file) => fileUploadChange(file)"
+                            >
+
+                                <div
+                                    class="upload_tip_block"
+                                    v-show=" moodboarList.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 class="upload_max_tip">
+					<span class="icon iconfont icon-zhuyi"></span>
+					<span>{{ $t('MoodboardUpload.Maximum') }}</span>
+				</div>
+                <!-- <div class="upload_max_tip">
+                    <span class="icon iconfont icon-zhuyi"></span>
+                    <span
+                        >Maximum 10 images can be uploaded, Maximum 2M per
+                        image</span
+                    >
+                </div> -->
+            </div>
+            <Material
+                v-show="openClick == 2"
+                ref="Material"
+                msg="Moodboard"
+            ></Material>
+            <Generate
+                v-show="openClick == 3"
+                ref="Generate"
+                msg="Moodboard"
+            ></Generate>
+        </div>
+        <div class="modal_right"  v-show="moodboarList.length >= 1 || edieShow">
+			<div class="modal_layout" >
+				<div class="modal_text">
+					<div>
+						{{ $t('MoodboardUpload.Thumbnail') }}
+					</div>
+					<div v-show="moodboarList.length > 1" class="modal_btn started_btn"  @click="layout()">{{ $t('MoodboardUpload.layout') }}</div>
+				</div>
+				<div class="modal_img" >
+					<div class="modal_img_item" v-for="item,index in moodboarList" :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 class="modal_accomplish" v-show="modalImg[0]?.id || loadingShow">
+				<div class="modal_text">
+					<div>{{ $t('MoodboardUpload.selected') }}</div>
+					<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">{{ $t('MoodboardUpload.Edit') }}</div>
+				</div>
+				<div class="modal_img_max">
+					<div v-if="!modalImg[0]?.id" class="modal_img" id="modal_img" :class="{active:flex_direction}">
+						<div v-for="item,index in layoutList" :class="[moodb_className[index]]"  class="modal_imgItem">
+							<img :src="item.imgUrl" v-modelImg>
+						</div>
+					</div>
+					<div v-else class="modal_img">
+						<img :src="modalImg[0].imgUrl">
+					</div>
+					<div class="mark_loading" v-show="loadingShow">
+						<a-spin size="large" />
+					</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 ,computed,nextTick,inject} from "vue";
+import { LoadingOutlined } from "@ant-design/icons-vue";
+import { getCookie } from "@/tool/cookie";
+import { getUploadUrl,isMoible } from "@/tool/util";
+import { useStore } from "vuex";
+import { message, Upload } from "ant-design-vue";
+import { Https } from "@/tool/https";
+import Material from "@/component/HomePage/Material.vue";
+import Generate from "@/component/HomePage/Generate.vue";
+import MoodTemplate from "@/component/HomePage/MoodTemplate.vue";
+import layout from "@/component/HomePage/layout.vue";
+import domTurnImg from '@/tool/domTurnImg'
+import GO from "@/tool/GO";
+import moodb from "@/tool/moodb";
+import { useI18n } from "vue-i18n";
+export default defineComponent({
+    components: { Material, MoodTemplate, Generate,layout },
+    setup() {
+		const store = useStore()
+        let lessenList: any = ref([]);
+        let fileList: any = ref([]);
+        let showFileList: any = ref([]);
+        let templateModal: any = ref(false);
+        let templateFileList: any = ref([]);
+        let openClick: any = ref(1);
+		let moodb_className:any = ref([]);
+		let flex_direction:any = ref(false)//判断第二种格子类型弹性布局方式
+		let layoutList:any = []//选中后随机生成的list
+		let layoutOpen = ref(false)
+		let loadingShow = ref(false)
+		let modalImg:any= computed(()=>{
+			return store.state.UploadFilesModule.disposeMoodboard
+		})
+		let uploading:any = ref([])
+		let edieShow:any = ref()
+		let {t} = useI18n()
+
+        return {
+            fileList,
+			showFileList,
+            lessenList,
+            templateModal,
+            templateFileList,
+            openClick,
+			moodb_className,
+			flex_direction,
+			layoutList,
+			layoutOpen,
+			loadingShow,
+			modalImg,
+			uploading,
+			edieShow,
+			t,
+        };
+    },
+    data() {
+        return {
+            indicator: h(LoadingOutlined, {
+                style: {
+                    fontSize: "2.4rem",
+                },
+                spin: true,
+            }),
+            upload: {
+                isPin: 0,
+				gender:'',
+                level1Type: "Moodboard",
+                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            },
+            token: "",
+            uploadUrl: "",
+            moodTemplateId: "", //模板id
+            store: useStore(),
+			moodb_:moodb.moodb_,
+			moodboarList:computed(()=>{
+				return  useStore().state.UploadFilesModule.moodboard
+			}),
+        };
+    },
+	// watcheffect(){
+	// 	let breviaryList = this.store.state.UploadFilesModule.moodboardFiles.filter(
+    //                 (v: any) => v.checked == true
+    //             );
+	// 	this.store.commit("setMoodboardFile", breviaryList);
+	// 	console.log(22);
+	// },
+    mounted() {
+        this.token = getCookie("token") || "";
+        this.uploadUrl = getUploadUrl();
+    },
+	directives:{
+		modelImg:{
+			mounted(el) {
+				let parentNode = el.parentNode
+				if(parentNode.offsetHeight >= parentNode.offsetWidth){
+					el.style.height = 100+'%'
+					el.style.width = 'auto'
+				}else{
+					el.style.width = 100+'%'
+					el.style.height = 'auto'
+				}
+			},
+			updated (el) {
+				let parentNode = el.parentNode
+				if(parentNode.offsetHeight >= parentNode.offsetWidth){
+					el.style.height = 100+'%'
+					el.style.width = 'auto'
+				}else{
+					el.style.width = 100+'%'
+					el.style.height = 'auto'
+				}
+			}
+		}
+	},
+    methods: {
+        open(num: Number) {
+            this.openClick = num;
+			if(num ==2 ){
+				let material:any = this.$refs.Material
+				material.init('Moodboard')
+			}else if (num == 3){
+			}
+        },
+        fileUploadChange(data: any) {
+            let file = data.file;
+			let bor = true
+            if (file.status === "done") {
+                let res = JSON.parse(file.xhr.response);
+				if(res.errCode == 0){
+					file.imgUrl = res.data.url;
+					file.resData = res.data;
+					file.type_ = {
+						type1:'upload',
+						type2:'Moodboard'
+					};
+					file.id_ = GO.id++
+					file.id = res.data.id
+					let fileList = this.fileList.filter(
+						(v: any) => v.status === "done"
+					);
+					let arr =  this.store.state.UploadFilesModule.moodboard
+					if(arr.length >= 8){
+						message.info(this.t('MoodboardUpload.jsContent1'))
+					}else{
+						this.store.commit("setMoodboardFile", fileList);
+					}
+				}else{
+					bor = false
+				}
+				// this.showFileList = this.fileList
+            } else if (file.status === "error") {
+				bor = false
+            }
+			if(!bor){
+                let res:any = JSON.parse(file.xhr.response);
+				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);
+                }
+                // message.warning(file.name + this.t('MoodboardUpload.jsContent2'));
+                message.warning(res.errMsg);
+			}
+        },
+        beforeUpload(file: any) {
+            const isJpgOrPng =
+                file.type === "image/jpeg" ||
+                file.type === "image/png" ||
+                file.type === "image/jpg" ||
+                file.type === "image/bmp";
+            if (!isJpgOrPng) {
+                message.info(this.t('MoodboardUpload.jsContent3'));
+            }
+            const isLt2M = file.size / 1024 / 1024 < 5;
+            if (!isLt2M) {
+                message.info(this.t('MoodboardUpload.jsContent4'));
+            }
+            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
+        },
+
+        deleteFile(item: any) {
+			if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
+				item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:8})
+				item.state = 'delete'
+				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("setMoodboardFile", this.fileList);
+			}
+			if(this.store.state.UploadFilesModule.moodboard.length == 0){
+				this.store.commit("clearMoodTemplateId");
+				this.layoutList = []
+				this.edieShow = false
+			}
+        },
+        openSetData() {
+            let arr = JSON.parse(
+                JSON.stringify(
+                    this.store.state.UploadFilesModule.allBoardData
+                        .moodboardFiles
+                )
+            ) || [];
+			let disposeMoodboard = JSON.parse(
+                JSON.stringify(
+                    this.store.state.UploadFilesModule.allBoardData
+                        .disposeMoodboard
+                )
+            );
+			let moodboardPosition = JSON.parse(
+                JSON.stringify(
+                    this.store.state.UploadFilesModule.allBoardData
+                        .moodboardPosition
+                )
+            );
+			let setboard = {
+				generate:[] as any,
+				material:[] as any,
+				moodboard:[] as any,
+			}
+			arr.forEach((v:any)=>{
+				if(v.type_.type1 == 'generate'){
+					setboard.generate.push(v)
+				}else if(v.type_.type1 == 'material'){
+					setboard.material.push(v)
+				}else{
+					setboard.moodboard.push(v)
+				}
+			})
+			this.store.commit("setMoodboardGenerateFiles", setboard.generate);
+			this.store.commit("setMoodboardMaterialFiles", setboard.material);
+			this.store.commit("setMoodboardFile", setboard.moodboard);
+			this.store.commit("setDisposeMoodboard", disposeMoodboard[0]);
+			this.store.commit("setDisposeMoodboardPosition",moodboardPosition);
+			this.fileList = setboard.moodboard
+        },
+
+        async changeTemplateModal() {
+			if(this.modalImg[0]?.id){
+				let layout:any = this.$refs.layout
+				if(this.layoutList.length <= 0){
+					let styleObj = this.store.state.UploadFilesModule.moodboardPosition
+					if(!styleObj.domStyle)await this.layout()
+					// 
+					let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
+					this.layoutList = arr
+				}
+				if(window.screen.width<1300){
+					layout.isMobile = true
+				}else{
+					layout.isMobile = false
+				}
+				
+				layout.init()
+			}else{
+				message.info(this.t('MoodboardUpload.jsContent5'))
+			}
+			
+        },
+		async layout(){
+			if(this.loadingShow)return
+			await new Promise((resolve, reject) => {
+				this.loadingShow = true
+				this.store.commit("setDisposeMoodboard", []);
+				let arr = JSON.parse(JSON.stringify(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]
+				if( moodb.filter((item,index)=> item == 'w2h1').length != 0  && arr.length > 4){
+					this.flex_direction = true
+				}else{
+					this.flex_direction = false
+				}
+				if(this.moodb_[arr.length-1].length != 1){
+					if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
+						this.loadingShow = false
+						this.layout()
+						return resolve('')
+					}
+				}
+				this.edieShow = true
+				if(this.moodb_[arr.length-1].length == 2){
+					this.moodb_className = this.moodb_[arr.length-1][0]
+				}else{
+					this.moodb_className = this.moodb_[arr.length-1][random]
+				}
+				this.layoutOpen = true
+				//提交模板
+				// this.loadingShow = true
+				this.layoutList.forEach((v:any)=>{
+					v.setPitch = false
+				})
+				nextTick().then(()=>{
+					let layoutCentent = document.getElementById('modal_img')
+					let obj = {
+						imgStyle:[],
+						domStyle:[],
+						borStyle:[],
+						rototeStyle:[],
+						translateStyle:[],
+						angleTRStyle:[],
+						angleTLStyle:[],
+						angleBRStyle:[],
+						angleBLStyle:[],
+						class:this.moodb_className,
+					}
+					this.store.commit("setDisposeMoodboardPosition", obj);
+					domTurnImg(layoutCentent).then((rv)=>{
+						let file = rv
+						let param = new FormData(); 
+						param.append('inPin','0')
+						param.append('level1Type','Moodboard')
+						param.append('gender','')
+						param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
+						param.append('file',file);
+						let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+						Https.axiosPost(Https.httpUrls.elementUpload,param,config)
+						.then((rv: any) => {
+								let img:any = rv
+								img.imgUrl = rv.url
+								img.resData = JSON.parse(JSON.stringify(img))
+								this.store.commit("setDisposeMoodboard", img);
+								this.loadingShow = false
+								resolve('')
+							}
+						).catch(rv=>{
+							this.loadingShow = false
+						})
+					})
+					
+				})			
+			})
+			    
+		},
+		setmoodbClass(val:any){
+			this.moodb_className = val
+		}
+    },
+});
+</script>
+<style lang="less" scoped>
+.collection_modal_item {
+    // padding: 1.5rem 2.6rem 4rem;
+    height: 100%;
+	flex: 1;
+    display: flex;
+	justify-content: space-between;
+	.modal_left,.modal_right{
+		background: #f7f8fa;
+		border-radius: 3rem;
+		padding: 2rem 3rem;
+	}
+    .modal_left {
+		width: 71rem;
+		display: flex;
+		flex: 1;
+		flex-direction: column;
+		flex-shrink: 0;
+		margin-right: 2rem;
+        // width: 50rem*1.2);
+        .switch_type_list {
+            display: flex;
+            align-items: center;
+            position: relative;
+
+            .switch_type_item {
+                display: flex;
+                align-items: center;
+                // padding: 0 2rem*1.2);
+                height: calc(4rem*1.2);
+                border-radius: calc(0.8rem*1.2);
+                line-height: calc(4rem*1.2);
+                font-size: var(--aida-fsize1-8);
+                // margin-right: 2.2rem*1.2);
+                margin-right: calc(8rem*1.2);
+                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: calc(.3rem*1.2);
+                    left: 50%;
+                    transform: translateX(-50%);
+                    bottom: calc(.6rem*1.2);
+                    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: calc(1.8rem*1.2);
+                    margin-right: calc(0.8rem*1.2);
+                }
+            }
+        }
+
+        .moodboard_body {
+            padding-top: calc(2.5rem*1.2);
+			flex: 1;
+            height: calc(30rem*1.2);
+            overflow-x: hidden;
+			display: flex;
+			flex-direction: column;
+            &.moodboard_body::-webkit-scrollbar {
+                display: none;
+            }
+            .upload_img_body {
+				height: 100%;
+                overflow-y: auto;
+                margin-bottom: calc(1rem*1.2);
+            }
+
+            
+
+            .upload_max_tip {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: calc(1.4rem*1.2);
+                color: #030303;
+
+                .icon-zhuyi {
+                    font-size: calc(1.6rem*1.2);
+                    margin-right: calc(0.7rem*1.2);
+                }
+            }
+        }
+    }
+	.modal_right{
+		flex: 1;
+		display: flex;
+		min-width: calc(57rem*1.2);
+		flex-direction: column;
+		overflow: hidden;
+		.modal_layout,.modal_accomplish{
+			.modal_text{
+				font-size:var(--aida-fsize1-4);
+				font-weight: 400;
+				color: rgba(0, 0, 0, 0.45);
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+		}
+		.modal_layout{
+			.modal_img{
+				width: calc(40rem*1.2);
+				height: calc(5rem*1.2);
+				overflow-x: hidden;
+				display: flex;
+				&.modal_img::-webkit-scrollbar {
+					display: none;
+				}
+				.modal_img_item{
+					width: calc(4rem*1.2);
+					height: calc(4rem*1.2);
+					text-align: center;
+					margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
+					position: relative;
+					cursor: pointer;
+					overflow: hidden;
+					img{
+						width: auto;
+						height: 100%;
+						max-width: 100%;
+						object-fit: cover;
+					}
+					.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*1.2);
+			height: calc(30rem*1.2);
+			display: flex;
+			flex: 1;
+			flex-direction: column;
+			.modal_text{
+				padding-top: calc(2rem*1.2);
+				padding-block: calc(2rem*1.2);
+			}
+			.modal_img_max{
+				// width: calc(57rem*1.2);
+				// height: calc(35rem*1.2);
+				width: 100%;
+				aspect-ratio: 1.62 / 1;
+				position: relative;
+				.mark_loading{
+					position: absolute;
+				}
+			}
+			.modal_img{
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				flex-wrap: wrap;
+				align-items: center;
+				flex-direction: column;
+				position: relative;
+				
+				>img{
+					// height: 100%;
+					width: 100%;
+					max-height: 100%;
+					object-fit: contain;
+				}
+				&.active{
+					flex-direction: row;
+				}
+				.modal_imgItem{
+					position: relative;
+					overflow: hidden;
+					text-align: center;
+					img{
+						position: absolute;
+						top: 50%;
+						left: 50%;
+						transform: translate(-50%,-50%);
+						float: left;
+						user-select:none;
+						-webkit-user-drag: none;
+					}
+				}
+				.wh1{
+					width: 23%;
+					height: 48%;
+				}
+				.wh4{
+					width: 48.5%;
+					height: 100%;
+				}
+				.wh8{
+					width: 100%;
+					height: 48.5%;
+				}
+				.w1h2{
+					width: 23%;
+					height: 100%;
+				}
+				.w2h1{
+					width: 48.5%;
+					height: 48%;
+				}
+			}
+		}
+	}
+}
+</style>
+
diff --git a/src/component/home/design/collection/PrintboardUpload.vue b/src/component/home/design/collection/PrintboardUpload.vue
new file mode 100644
index 00000000..88c26ca3
--- /dev/null
+++ b/src/component/home/design/collection/PrintboardUpload.vue
@@ -0,0 +1,1000 @@
+<template>
+    <div class="printboard_upload_modal" :class="[driver__.driver?'showEvents':'']">
+		
+        <div class="printboard_left_upload modal_left">
+            <div class="left_upload_header">
+                <div class="upload_header_item">
+                    <div class="switch_type_list">
+                        <div
+							
+							class="switch_type_item"
+							:class="[openClick == 1 ? 'select_swtich' : '']"
+						>
+							<span @click.stop="open(1)">{{ $t('PrintboardUpload.Upload') }}</span>
+						</div>
+						<div
+							
+							class="switch_type_item"
+							:class="[openClick == 2 ? 'select_swtich' : '']"
+						>
+							<span @click.stop="open(2)">{{ $t('PrintboardUpload.Library') }}</span>
+						</div>
+						<div
+							
+							class="switch_type_item Guide_1_2_1"
+							:class="[openClick == 3 ? 'select_swtich' : '',driver__.driver?'showEvents':'']"
+						>
+							<span @click.stop="open(3)">{{ $t('PrintboardUpload.Generate') }}</span>
+							
+						</div>
+						<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
+							<div @click.stop="openPrintModel"><span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span>	</div>
+							<ul v-show="openMenu">
+								<li 
+									v-for="item,index in printCatecoryList" 
+									class="printModel_item" 
+									@click.stop="setSceneList(item)"
+									:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
+									item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
+									item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
+								>{{ item.name }}</li>
+							</ul>
+						</div>
+                    </div>
+                </div>
+            </div>
+             <div v-show="openClick == 1" class="printboard_body">
+                <div class="upload_img_body">
+                    <div class="upload_item">
+                        <div :class="['upload_file_item']" v-for="(file, index) in fileList" :key="file">
+                            <div class="upload_file_img_block">
+                                <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  v-lazy="file.imgUrl" class="upload_img" :key="file.imgUrl">
+									<sketchCategory :disignTypeList="printCatecoryList" :generateList="fileList" :isSetSketchCategory="true" :item="file" ></sketchCategory>
+
+                                    <div class="delete_like_file_block" @click.stop="deleteFile(file)">
+										<span
+											class="icon iconfont icon-shanchu"
+										></span>
+									</div>
+                                </div>
+                            </div>
+                            <!-- <div class="pin_block" v-show="file?.status === 'done'">
+                                <a-checkbox v-model:checked="file.pin">{{ $t('PrintboardUpload.PIN') }}</a-checkbox>
+                            </div> -->
+                            
+                        </div>
+                        <div class="upload_file_item upload_component" v-show="printboardList.length < 16">
+                            <a-upload
+                                :action="uploadUrl + '/api/element/upload'"
+								:capture="null"
+                                list-type="picture-card"
+                                :before-upload="beforeUpload"
+                                :data="{
+                                    ...upload
+                                }"
+                                :headers="{Authorization:token}"
+                                v-model:file-list="fileList"
+                                :customRequest="function(){}"
+								:multiple="!driver__.driver"
+                                :maxCount="16 - printboardList.length+fileList.length"
+                                accept=".jpg,.png,.jpeg,.bmp"
+                                @change="fileUploadChange"
+                                >
+								<div
+                                    class="upload_tip_block"
+									v-show="printboardList.length < 16"
+                                >
+                                    <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>{{ $t('PrintboardUpload.Maximum') }}</span>
+				</div>
+            </div>
+			<Material v-show="openClick == 2" 
+				ref="Material" 
+				msg="Printboard" 
+				@setLibrary = setSetchboardGenerate 
+				@confirmSelect="confirmSelect"
+				:disignTypeList="printCatecoryList"
+				></Material>
+			<Generate v-show="openClick == 3" ref="Generate" :scene="scene" :sketchCatecoryList="printCatecoryList" msg="Printboard"></Generate>
+        </div>
+		<div class="modal_right">
+			<div class="modal_layout">
+				<div class="modal_text">
+					<div>{{ $t('PrintboardUpload.Thumbnail') }}</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.stop="deleteFile(item)">
+						<img v-lazy="item.imgUrl">
+						<div class="checked" >
+							<i class="fi fi-rr-trash"></i>
+						</div>
+					</div>
+				</div> -->
+			</div>
+			<div class="modal_accomplish">
+				<div class="modal_img">
+					<div v-for="item,index in printboardList" :key="item" class="modal_imgItem Guide_1_2_9" :class="[driver__.driver?'showEvents':'']" >
+						<img v-lazy="item.imgUrl">
+						<sketchCategory :disignTypeList="printCatecoryList" :generateList="printboardList" :isSpread="true" :item="item" ></sketchCategory>
+						<!-- 在sketch 和print暂时关闭like -->
+						<!-- <div
+							class="delete_like_file_block left1"
+							:class="[driver__.driver?'hideEvents':'']"
+						>
+							<i v-if="!item.like || item.libraryChecked" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
+							<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
+						</div> -->
+						
+						<!-- <div class="delete_like_file_block left"  :class="[driver__.driver?'hideEvents':'']">
+							<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
+						</div>
+						<div class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteFile(item)">
+							<span class="icon iconfont icon-shanchu operate_icon"></span>
+						</div> -->
+						<div class="pin_block">
+							<label @click="()=>{if(!item?.pin)item.pin = false;item.pin = !item.pin}">
+								<i v-if="item.pin" class="fi fi-rr-check"></i>
+								<i v-else class="fi noCheck"></i>
+								<span>PIN</span>
+							</label>
+						</div>
+						<div class="moreBox" @click.stop> 
+							<more :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- 取消请求 -->
+		<scaleImage ref="scaleImage"></scaleImage>
+        <Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" @closeCropper="deletUploadFile()" :cropperFileData="cropperFileData" :isUpload="isUpload"></Cropper>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,h,ref,computed,inject,createVNode,provide, nextTick } from 'vue'
+import { LoadingOutlined } from '@ant-design/icons-vue';
+import {getCookie} from '@/tool/cookie'
+import {getUploadUrl} from '@/tool/util'
+import {useStore} from 'vuex'
+import { Https } from "@/tool/https";
+import { Modal,message,Upload} from 'ant-design-vue';
+import Cropper from '@/component/HomePage/Cropper.vue'
+import Material from '@/component/HomePage/Material.vue'
+import Generate from "@/component/HomePage/Generate.vue";
+import GO from "@/tool/GO";
+import { useI18n } from 'vue-i18n';
+import { openGuide,driverObj__ } from "@/tool/guide";
+import scaleImage from "@/component/HomePage/scaleImage.vue";
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import axios from 'axios'
+import generalMenu from "@/component/HomePage/generalMenu.vue";
+import { overflow } from 'html2canvas/dist/types/css/property-descriptors/overflow';
+import more from './more.vue'
+
+export default defineComponent({
+    components:{
+        Cropper,
+        Material,
+		Generate,
+		scaleImage,
+		generalMenu,
+		sketchCategory,
+		more,
+    },
+    setup(){
+        let store:any =useStore()
+        let fileList:any = ref([]),//选中的文件id数据
+            printImgList:any = ref([]), //print的印花图片
+            moodBoards:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
+        let openClick: any = ref(1);
+		let driver__:any = inject('driver__')
+		let {t} = useI18n()
+		let isTest = ref()
+		let userInfo:any = {}
+		let useGenerate:any = ref({
+			imgId : '',
+			imgUrl:1,
+			checked:false,
+			level2Type:'',
+			designType:''
+		})
+		let workspace:any = ref({})
+		let scene = ref({
+			name:'Pattern',
+			value:'Pattern'
+		})
+		let openMenu = ref(false)
+		let printCatecoryList:any = computed(()=>{
+			return store.state.UserHabit.printType
+		})
+        return {
+            fileList,
+            printImgList,
+            moodBoards,
+			openClick,
+			driver__,
+			t,
+			isTest,
+			userInfo,
+			useGenerate,
+			workspace,
+			scene,
+			openMenu,
+			printCatecoryList,
+        }
+    },
+    computed:{
+       
+    },
+	watch:{
+	},
+    data(){
+        return {
+            swtich_type:'upload',
+            indicator : h(LoadingOutlined, {
+                style: {
+                    fontSize: '2.4rem*1.2)',
+                },
+                spin: true,
+            }),
+            upload:{
+                isPin:0,
+				gender:'',
+                level1Type:'Printboard',
+                timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+            },
+            token:'',
+            uploadUrl:'',
+            store:useStore(),
+            cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
+            currentFileNum:0, //当前上传的文件数
+            isUpload:false,
+			printboardList:computed(()=>{
+				return  useStore().state.UploadFilesModule.printboard
+			}),
+			isTextarea:false,
+			isInputFocus:false,
+        }
+    },
+    mounted(){
+		let userInfo:any = getCookie("userInfo")
+        this.userInfo = JSON.parse(userInfo);
+        this.token = getCookie('token') || ''
+		let isTest:any = getCookie('isTest')
+        this.isTest =JSON.parse(isTest)
+        this.uploadUrl = getUploadUrl()
+		this.workspace = computed(()=>{
+			return  this.store?.state?.Workspace?.workspace
+		})
+		let Generate:any = this.$refs.Generate
+
+		if(this.driver__.driver){
+			Generate.searchPictureName = 'Elegant floral print for high-fashion attire'
+		}else{
+			Generate.searchPictureName = ''
+		}
+    },
+     methods:{
+		setSetchboardGenerate(item:any){
+			this.useGenerate.imgId = item.imgId
+			this.useGenerate.imgUrl = item.imgUrl
+			this.useGenerate.level2Type = item.level2Type
+			this.useGenerate.designType = item.designType
+			let Material:any = this.$refs.Material
+			let generate:any = this.$refs.Generate
+
+			if(item.designType == 'collection'){
+			}else {
+				generate.sketchboardList.forEach((item:any) => {
+					item.checked = false
+				});
+			}
+		},
+		open(num: Number) {
+            this.openClick = num;
+			let material:any = this.$refs.Material
+			if(num == 2){
+				material.init('Printboard')
+			}
+			if(num == 3){
+				this.scene = this.printCatecoryList[0]
+				nextTick().then(()=>{
+					if(this.driver__.driver){
+						driverObj__.moveNext()
+					}
+				})
+			}
+        },
+        fileUploadChange(data:any){
+            let file = data.file
+			
+			// let res = JSON.parse(data?.xhr?.response);
+			file.id_ = GO.id++
+			file.type_ = {
+				type1:'upload',
+				type2:'Printboard'
+			};
+			file.pin = false;
+			// file.id = res.data.id?res.data.id:""
+            let Cropper:any = this.$refs.Cropper
+            if(this.currentFileNum === 1){
+                var reader = new FileReader();
+				
+                reader.onload = (e:any) => {
+                    let data_new;
+                    if (typeof e.target.result === 'object') {
+                    // 把Array Buffer转化为blob 如果是base64不需要
+                    data_new = window.URL.createObjectURL(new Blob([e.target.result]));
+                    } else {
+                    data_new = e.target.result;
+                    }
+                    Cropper.getOptionImg(data_new)
+					
+					
+                };
+                // 转化为base64
+                // reader.readAsDataURL(file)
+                // 转化为blob
+                reader.readAsArrayBuffer(file.originFileObj);
+                this.cropperFileData = file
+                Cropper.changeShowModal(true)
+				nextTick().then(()=>{
+					if(this.driver__.driver){
+						driverObj__.moveNext()
+					}
+				})
+            }else{
+                this.customRequest(file)
+            }
+        },
+
+        beforeUpload(file:any,fileList:any){
+            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
+            if (!isJpgOrPng) {
+                message.info(this.t('PrintboardUpload.jsContent1'));
+            }
+            const isLt2M = file.size / 1024 / 1024 < 5;
+            if (!isLt2M) {
+                message.info(this.t('PrintboardUpload.jsContent2'));
+            }
+            if(isJpgOrPng && isLt2M){
+                this.currentFileNum = fileList.length
+            }else{
+                return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
+            }
+            
+        },
+
+        deleteFile(item:any){
+            // this.fileList.splice(item, 1)
+            // this.store.commit('setPrintboardFile',this.fileList)
+			if(item.type_.type1 == 'generate' || item.type_.type1 == 'material'){
+				item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:16})
+				item.state = 'delete'
+				this.store.commit("addGenerateMaterialFils", item);
+			}else{
+				this.fileList = this.store.state.UploadFilesModule.printboardFiles
+				let moodboard 
+				this.store.state.UploadFilesModule.printboardFiles.forEach((items:any,index:Number)=>{
+					if(items.id_ == item.id_){
+						moodboard = index
+						
+					}
+				})
+				this.fileList.splice(moodboard,1)
+				this.store.commit("setPrintboardFile", this.fileList);
+			}
+        },
+		likeFile(item:any,str:string){
+			if(str == 'like'){
+				let data = {
+					generateDetailId:item.id,
+					level1Type:"Printboard",
+					level2Type: item.categoryValue,
+					gender:this.workspace.sexEnum.value,
+					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+				}
+				Https.axiosPost(Https.httpUrls.generateLike, data).then(
+					(rv) => {
+						item.like = true
+					}
+				).catch(res=>{
+				});
+			}else{
+				let data = {
+					generateDetailId:item.id,
+					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+				}
+				Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
+					(rv) => {
+						item.like = false
+					}
+				).catch(res=>{
+				});
+			}
+
+		},
+        
+        customRequest(data:any){
+            let new_data = {
+                ...this.upload,
+                file:data.originFileObj
+            }
+            let fileUid = data.uid
+            Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
+                (rv: any) => {
+                    if (rv) {
+                        for(let file of this.fileList){
+                            if(fileUid === file.uid){
+                                file.status = 'done'
+                                file.imgUrl = rv.url
+                                file.pin = false
+                                file.id = rv.id
+								file.category = this.printCatecoryList[0].name
+								file.categoryValue = this.printCatecoryList[0].value
+                                file.resData = rv
+								
+                            }
+                        }
+                        let fileList = this.fileList.filter((v:any)=> v.status === 'done')
+                        this.store.commit('setPrintboardFile',fileList)
+                    }
+                }
+            ).catch((res)=>{
+                let index = -1
+                this.fileList.forEach((ele:any,index1:any) => {
+                    if(fileUid === ele.uid){
+                        index = index1
+                    }
+                });
+                if(index > -1){
+                    this.fileList.splice(index, 1)
+                }
+            });
+        },
+
+        closeCropper(type:any){
+            if(this.isUpload){
+                return
+            }
+            if(type == 'error'){
+                let index = -1
+                this.fileList.forEach((ele:any,index1:any) => {
+                    if(this.cropperFileData.uid === ele.uid){
+                        index = index1
+                    }
+                });
+                if(index > -1){
+                    this.fileList.splice(index, 1)
+                }
+            }
+            let Cropper:any = this.$refs.Cropper
+            Cropper.closeCropper()
+
+        },
+
+        deletUploadFile(){
+            let index = -1
+            this.fileList.forEach((ele:any,index1:any) => {
+                if(this.cropperFileData.uid === ele.uid){
+                    index = index1
+                }
+            });
+            if(index > -1){
+                this.fileList.splice(index, 1)
+            }
+        },
+
+
+        handleCropperSuccess(event:any){
+            let {file, fileData} =event
+            let new_data = {
+                ...this.upload,
+                file:file
+            }
+            if(this.isUpload){
+                return
+            }
+            this.isUpload = true
+            const hide = message.loading('loading', 0);
+            Https.axiosPost('/api/element/upload', new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
+                (rv: any) => {
+                    for(let file of this.fileList){
+                        if(fileData.uid === file.uid){
+                            file.status = 'done'
+                            file.imgUrl = rv.url
+                            file.id = rv.id
+                            file.resData = rv
+							file.category = this.printCatecoryList[0].name
+							file.categoryValue = this.printCatecoryList[0].value
+                        }
+                    }
+                    let fileList = this.fileList.filter((v:any)=> v.status === 'done')
+                    this.isUpload = false
+                    this.closeCropper('success')
+                    this.cropperFileData = {name:'',uid:''}
+                    this.store.commit('setPrintboardFile',fileList)
+                    hide()
+					nextTick().then(()=>{
+						if(this.driver__.driver){
+							driverObj__.moveNext()
+						}
+					})
+                }
+            ).catch(res=>{
+                let index = -1
+                this.fileList.forEach((ele:any,index1:any) => {
+                    if(fileData.uid === ele.uid){
+                        index = index1
+                    }
+                });
+                if(index > -1){
+                    this.fileList.splice(index, 1)
+                }
+                this.cropperFileData = {name:'',uid:''}
+                this.isUpload = false
+                this.closeCropper('error')
+                hide()
+            });
+        },
+
+        openSetData(){
+			this.useGenerate = {
+				imgId : '',
+				imgUrl:1,
+				checked:false,
+				level2Type:'',
+				designType:'',
+			}
+            let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles)) || []
+			let setboard = {
+				generate:[] as any,
+				material:[] as any,
+				moodboard:[] as any,
+			}
+			arr.forEach((v:any)=>{
+				v.pin = v.pin == 1?true:false
+				this.printCatecoryList.forEach((item:any) => {
+					if(v.level2Type == item.value){
+						v.category=item.name
+						v.categoryValue=item.value
+					}
+				});
+				if(v.type_.type1 == 'generate'){
+					setboard.generate.push(v)
+				}else if(v.type_.type1 == 'material'){
+					setboard.material.push(v)
+				}else{
+					setboard.moodboard.push(v)
+				}
+			})
+			this.store.commit("setPrintboardGenerateFiles", setboard.generate);
+			this.store.commit("setPrintboardMaterialFiles", setboard.material);
+			this.store.commit("setPrintboardFile", setboard.moodboard);
+			this.fileList = setboard.moodboard
+            // this.printImgList = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.generatePrintFiles))
+            this.store.commit('setPrintboardFile',this.fileList)
+            // this.store.commit('setGeneratePrintFile',this.printImgList)
+
+        },
+
+        confirmSelect(event:any){
+            for(let item of event){
+                let data = {
+                    imgUrl:item.url,
+                    resData:item,
+                    pin:false,
+                    id:item.id,
+                    status:'done',
+                }
+                if(this.fileList.length == 15){
+                    message.warning(this.t('PrintboardUpload.jsContent3'))
+                    break
+                }
+                this.fileList.push(data)
+            }
+            this.store.commit('setPrintboardFile',this.fileList)
+            
+        },
+		scaleImage(index:any){
+			let scaleImage:any = this.$refs.scaleImage
+			scaleImage.isLike = false
+			scaleImage.init(this.printboardList,index)
+		},
+		setSceneList(data:any){
+			if(this.scene.value === data.value) return
+			this.scene = data
+			let generate:any = this.$refs.Generate
+			generate.sketchboardList = []
+			generate.searchPictureName = ''
+			this.openMenu = false
+		},
+		openPrintModel(){
+			if(this.openMenu)return
+			document.addEventListener('click',this.removePrintModel)
+			this.openMenu = true
+		},
+		removePrintModel(){
+			this.openMenu = false
+			document.removeEventListener('click',this.removePrintModel)
+		}
+     }
+
+})
+</script>
+<style lang="less" scoped>
+.printboard_upload_modal{
+    // padding: calc(1rem*1.2) calc(1rem*1.2) calc(1.8rem*1.2) calc(1rem*1.2);
+	height: 100%;
+    flex: 1;
+    display: flex;
+	justify-content: space-between;
+	.modal_left,.modal_right{
+		background: #f7f8fa;
+		border-radius: 3rem;
+		padding: 2rem 3rem;
+	}
+    .printboard_left_upload{
+		display: flex;
+		flex-direction: column;
+		margin-right: 2rem;
+		width: 71rem;
+        .switch_type_list {
+            display: flex;
+            align-items: center;
+            position: relative;
+			z-index: 11;
+            .switch_type_item {
+                display: flex;
+                align-items: center;
+                // padding: 0 2rem*1.2);
+                height: calc(4rem*1.2);
+                border-radius: calc(0.8rem*1.2);
+                line-height: calc(4rem*1.2);
+                font-size: var(--aida-fsize1-8);
+                // margin-right: 2.2rem*1.2);
+                margin-right: calc(8rem*1.2);
+                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: calc(.3rem*1.2);
+                    left: 50%;
+                    transform: translateX(-50%);
+                    bottom: calc(.6rem*1.2);
+                    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: calc(1.8rem*1.2);
+                    margin-right: calc(0.8rem*1.2);
+                }
+            }
+			.printMenu{
+				margin-right: 0;
+				margin-top: auto;
+				position: relative;
+				margin-left: 2rem;
+				>div{
+					width: 14rem;
+					font-size: var(--aida-fsize1-6);
+					border: 0;
+					i{
+						transition: all .3s;
+						display: inline-block;
+						margin-left: 1rem;
+					}
+					.forbidden{
+						transform: rotate(180deg);
+					}
+				}
+				ul{
+					width: 14rem;
+				}
+			}
+			.switch_type_item:nth-child(3){
+				margin: 0;
+			}
+        }
+
+        .printboard_body{
+			display: flex;
+			flex-direction: column;
+            // height: calc(100% - 5rem*1.2));
+			flex: 1;
+			padding-top: calc(2.5rem*1.2);
+			height: calc(30rem*1.2);
+			overflow-x: hidden;
+			&.printboard_body::-webkit-scrollbar {
+            display: none;
+        }
+            .upload_img_body{
+                height: calc(100% - 3rem*1.2);
+                overflow-y: auto;
+                margin-bottom: calc(1rem*1.2);
+				&.upload_img_body::-webkit-scrollbar {
+					display: none;
+				}
+            }
+		
+            .upload_file_item{
+				// margin: 0 2rem*1.2) 2rem*1.2) 0;
+				display: inline-block;
+				// width: 10rem;
+				// height: 10rem;
+				width: calc(25% - 2rem);
+				aspect-ratio: 1 / 1;
+				border: 1px solid #f5f5f5;
+				vertical-align: top;
+				position: relative;
+				text-align: center;
+				img{
+					width: auto;
+					object-fit: cover;
+					height: 100%;
+					max-width: 100%;
+				}
+
+              .upload_file_img_block{
+				height: 100%;
+			  }
+
+                &.upload_component{
+                }
+				.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%;
+						width: auto;
+						max-width: 100%;
+						object-fit: cover;
+					}
+					&:hover .more{
+						display: block;
+					}
+				}
+			}
+			.upload_max_tip {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: calc(1.4rem*1.2);
+                color: #030303;
+
+                .icon-zhuyi {
+                    font-size: calc(1.6rem*1.2);
+                    margin-right: calc(0.7rem*1.2);
+                }
+            }
+        }
+    }
+	
+	.modal_right{
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+		.modal_layout{
+			.modal_text{
+				font-size: var(--aida-fsize1-4);
+				font-weight: 400;
+				color: rgba(0, 0, 0, 0.45);
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+		}
+		.modal_layout{
+			padding-bottom: 4.8rem;
+			.modal_img{
+				width: calc(40rem*1.2);
+				height: calc(5rem*1.2);
+				overflow-x: hidden;
+				display: flex;
+				flex-direction: row;
+				&.modal_img::-webkit-scrollbar {
+					display: none;
+				}
+				.modal_img_item{
+					width: calc(4rem*1.2);
+					height: calc(4rem*1.2);
+					margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
+					position: relative;
+					cursor: pointer;
+					text-align: center;
+					overflow: hidden;
+					img{
+						width: auto;
+						height: 100%;
+						object-fit: cover;
+						max-width: 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*1.2);
+			overflow-x: hidden;
+			height: calc(30rem*1.2);
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			position: relative;
+			.mark_loading{
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				z-index: 99;
+			}
+            // overflow-x: hidden;
+			&.modal_accomplish::-webkit-scrollbar {
+                display: none;
+            }
+			.modal_text{
+				padding-top: calc(2rem*1.2);
+				padding-block: calc(2rem*1.2);
+			}
+			.modal_img{
+				flex: 1;
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: flex-start;
+				position: relative;
+				align-content: flex-start;
+				.modal_imgItem:hover .more{
+					// display: block;
+					opacity: 1;
+				}
+				.modal_imgItem{
+					margin: 1rem;
+					margin-bottom: 5rem;
+					display: inline-block;
+					// width: calc(10rem*1.2);
+					// height: calc(10rem*1.2);
+					width: calc(33.33% - 2rem);
+					aspect-ratio: 1 / 1;
+					border: 1px solid #f5f5f5;
+					position: relative;
+					cursor: pointer;
+					text-align: center;
+					.moreBox{
+						position: absolute;
+						right: 1rem;
+						top: 1rem;
+						// opacity: 0;
+						width: 3.5rem;
+						height: 3.5rem;
+						transition: all 0.3s ease-in-out;
+					}
+					&.modal_imgItem:nth-child(even) {
+					}
+					img{
+						object-fit: cover;
+						height: 100%;
+						max-width: 100%;
+						width: auto;
+					}
+					.pin_block{
+						position: absolute;
+						left: 1rem;
+						top: 1rem;
+						width: 8rem;
+						height: 3.5rem;
+						border-radius: 3rem;
+						background: rgba(0,0,0,.7);
+						color: #fff;
+						>label{
+							width: 100%;
+							height: 100%;
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							cursor: pointer;
+							padding-right: 1rem;
+							padding-left: .2rem;
+						}
+						i{
+							width: 3rem;
+							height: 3rem;
+							border-radius: 50%;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							font-size: 2rem;
+							background: #000;
+							&.noCheck{
+								background: inherit;
+								border: 2px solid #fff;
+							}
+						}
+						span{
+							font-size: 1.8rem;
+							font-weight: 600;
+						}
+					}
+					&.active{
+						opacity: 0.5;
+					// border: 2px solid;
+						border-radius: calc(1rem*1.2);
+						transform: scale(0.9);
+						img {
+						}
+						
+						.more{
+							pointer-events:none
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+
+</style>
diff --git a/src/component/home/design/collection/SketchboardUpload.vue b/src/component/home/design/collection/SketchboardUpload.vue
new file mode 100644
index 00000000..24aad8e5
--- /dev/null
+++ b/src/component/home/design/collection/SketchboardUpload.vue
@@ -0,0 +1,962 @@
+<template>
+    <div class="sketchboard_upload_modal">
+        <div class="modal_left">
+            <div class="switch_type_list" :class="[driver__.driver?'showEvents':'']">
+                <div
+                    @click.stop="open(1)"
+                    class="switch_type_item"
+                    :class="[openClick == 1 ? 'select_swtich' : '']"
+                >
+                    <span>{{ $t('SketchboardUpload.Upload') }}</span>
+                </div>
+                <div
+                    @click.stop="open(2)"
+                    class="switch_type_item"
+                    :class="[openClick == 2 ? 'select_swtich' : '']"
+                >
+                    <span>{{ $t('SketchboardUpload.Library') }}</span>
+                </div>
+                <div
+                    @click.stop="open(3)"
+                    class="switch_type_item Guide_1_9"
+                    :class="[openClick == 3 ? 'select_swtich' : '', driver__.driver?'showEvents':'']"
+                >
+                    <span>{{ $t('SketchboardUpload.Generate') }}</span>
+                </div>
+				<div v-show="openClick == 3" class="generalMenu_printModel printMenu">
+					<div @click.stop="openPrintModel"> <span>{{ scene.name }}<i class="icon iconfont icon-xiala" :class="{forbidden:openMenu}"></i></span>
+						</div>
+					<ul v-show="openMenu">
+						<li 
+							v-for="item,index in sketchStyleList" 
+							class="printModel_item" 
+							@click.stop="setSceneList(item)"
+							:title="item.value == 'Pattern'?$t('PrintboardUpload.PatternTitle'):
+							item.value == 'Logo'?$t('PrintboardUpload.LogoTitle'):
+							item.value == 'Slogan'?$t('PrintboardUpload.SloganTitle'):''"
+						>{{ item.name }}</li>
+					</ul>
+				</div>
+            </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" />
+								<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="file" :driver__="driver__.driver"></sketchCategory>
+                                <div
+                                    class="delete_like_file_block"
+                                    @click.stop="deleteFile(file)"
+                                >
+                                    <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"
+                                    >{{ $t('SketchboardUpload.PIN') }}</a-checkbox
+                                >
+                            </div> -->
+                        </div>
+                        <div
+                            class="upload_file_item upload_component"
+                            v-show="sketchboardList.length < 20"
+                        >
+                            <a-upload
+                                :action="uploadUrl + '/api/element/upload'"
+								:capture="null"
+                                list-type="picture-card"
+                                :data="{
+                                    ...upload,
+									gender:workspace.sex,
+                                }"
+								:multiple="!driver__.driver"
+                                :before-upload="beforeUpload"
+                                :headers="{ Authorization: token }"
+                                v-model:file-list="fileList"
+                                :maxCount="20 - sketchboardList.length+fileList.length"
+                                accept=".jpg,.png,.jpeg,.bmp"
+                                @change="(file) => fileUploadChange(file)"
+                            >
+								<div
+                                    class="upload_tip_block"
+									v-show="sketchboardList.length < 20"
+                                >
+                                    <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>{{ $t('SketchboardUpload.Maximum',{maxImg:20}) }}</span>
+				</div>
+            </div>
+
+            <Material
+                v-show="openClick == 2"
+                ref="Material"
+                msg="Sketchboard"
+                @confirmSelect="confirmSelect"
+				:disignTypeList="sketchCatecoryList"
+				@setLibrary = setSetchboardGenerate
+            ></Material>
+            <Generate
+                v-show="openClick == 3"
+                ref="Generate"
+                msg="Sketchboard"
+				:scene="scene"
+				:gender="workspace.sex"
+				:sketchCatecoryList="sketchCatecoryList"
+            ></Generate>
+        </div>
+		<div class="modal_right">
+			<div class="modal_layout">
+				<div class="modal_text">
+					<div>{{ $t('SketchboardUpload.Thumbnail') }}</div>
+					<!-- <div class="modal_btn started_btn" @click="layout()">layout</div> -->
+				</div>
+				<!-- <div class="modal_img modal_img_x" v-mousewheel>
+					<div class="mousewheel">
+						<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>
+			<div class="modal_accomplish">
+				<div class="modal_img">
+					<div v-for="item,index in sketchboardList" :key="item" class="modal_imgItem" :class="[driver__.driver?'showEvents':'']" >
+						<img v-lazy="item.imgUrl">
+						<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="sketchboardList" :isSpread="true" :item="item" :driver__="driver__.driver"></sketchCategory>
+						<!-- 在sketch 和print暂时关闭like -->
+						<!-- <div
+							class="delete_like_file_block left1"
+							:class="[driver__.driver?'hideEvents':'']"
+						>
+							<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like')"></i>
+							<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike')"></i>
+						</div> -->
+						<div class="pin_block">
+							<label @click="()=>{if(!item?.pin)item.pin = false;item.pin = !item.pin}">
+								<i v-if="item.pin" class="fi fi-rr-check"></i>
+								<i v-else class="fi noCheck"></i>
+								<span>PIN</span>
+							</label>
+						</div>
+						<div class="moreBox" @click.stop> 
+							<more :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<scaleImage ref="scaleImage"></scaleImage>
+		
+		<!-- <layout ref="layout" :moodb_className="moodb_className" :flex_direction="flex_direction" @setmoodbClass="setmoodbClass"></layout> -->
+       	
+		
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, h, ref, createVNode,computed,inject, nextTick } 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, Modal } from "ant-design-vue";
+import Material from "@/component/HomePage/Material.vue";
+import Generate from "@/component/HomePage/Generate.vue";
+import scaleImage from "@/component/HomePage/scaleImage.vue";
+import { Https } from "@/tool/https";
+import { openGuide,driverObj__ } from "@/tool/guide";
+import { useI18n } from "vue-i18n";
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import more from './more.vue'
+
+export default defineComponent({
+    components: { Material, Generate,scaleImage,sketchCategory,more },
+    setup() {
+        let fileList: any = ref([
+		]);
+        let openClick: any = ref(1);
+		
+        let store:any =useStore()
+
+		let sketchCatecoryList:any = computed(()=>{
+			return store.state.Workspace.probjects.positionList
+		})
+		let sketchCatecoryAllList:any = computed(()=>{
+			return store.state.Workspace.workspaceAllPosition
+		})
+		let workspace:any = computed(()=>{
+			return store.state.Workspace.probjects
+		})
+		let sketchboardList:any = computed(()=>{
+			return store.state.UploadFilesModule.sketchboard
+		})
+		let {t} = useI18n()
+		let driver__:any = inject('driver__')
+		let isTest = ref()
+		let useGenerate:any = ref({
+			imgId : '',
+			imgUrl:1,
+			checked:false,
+			level2Type:'',
+			designType:'',
+		})
+		
+		let openMenu = ref(false)
+		let sketchStyleList:any = computed(()=>{
+			return store.state.UserHabit.SketchGenerateType
+		})
+		let scene = ref({
+			name: t('SketchboardUpload.GenerateSketch'),
+			value:'generate'
+		})
+        return {
+            fileList,
+            openClick,
+			store,
+			sketchCatecoryList,
+			sketchCatecoryAllList,
+			workspace,
+			sketchboardList,
+			t,
+			driver__,
+			isTest,
+			useGenerate,
+			scene,
+			openMenu,
+			sketchStyleList,
+        };
+    },
+    data() {
+        return {
+            swtich_type: "upload",
+            indicator: h(LoadingOutlined, {
+                style: {
+                    fontSize: "2.4rem",
+                },
+                spin: true,
+            }),
+            upload: {
+                isPin: 0,
+                level1Type: "Sketchboard",
+                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+            },
+            token: "",
+            uploadUrl: "",
+			isTextarea:false,
+			isInputFocus:false,
+        };
+    },
+    computed: {
+        getSketchLabel(value) {
+            return (value: any) => {
+                let lable = "";
+                for (let item of this.sketchCatecoryList) {
+                    if (item.value === value) {
+                        lable = item.label;
+                        break;
+                    }
+                }
+                return lable;
+            };
+        },
+    },
+	directives:{
+		mousewheel:{
+			mounted (el) {
+				// let bodyDom:any = document.getElementsByClassName('right_content_block')[0]
+				let dom:any = document.getElementsByClassName('modal_img_x')
+				let mouseover = ()=>{
+					// bodyDom.classList.add('active')
+				}
+				let mouseleave = ()=>{
+					// bodyDom.classList.remove('active')
+				}
+				dom.forEach((item:any) => {
+					item.addEventListener('mouseover',mouseover)
+					item.addEventListener('mouseleave',mouseleave)
+				});
+				
+			
+				el.addEventListener('wheel',(e:WheelEvent)=>{
+					let num = 0
+					if(e.deltaY > 0){
+						num = 25
+					}else{
+						num = -25
+					}
+					el.scrollBy(num, 0);
+				},true)
+			}
+		}
+	},
+	watch:{
+		sketchboardList:{
+			handler(newVal:any,oldVal:any){
+				if(newVal.length>=2 && this.driver__.driver&& newVal.length!=oldVal.length){
+					if(this.driver__.driver){
+						// driverObj__.moveTo(22)
+					}
+				}
+			}
+		},
+		driver__:{
+			handler(newVal,oldVal){
+				if(newVal.index >= 15 && newVal.index <= 16){
+					if(this.driver__.driver){
+						// driverObj__.moveTo(15)
+					}
+				}else{
+				}
+			}
+		}
+	},
+    mounted() {
+        this.token = getCookie("token") || "";
+        let isTest:any = getCookie('isTest')
+        this.isTest =JSON.parse(isTest)
+        this.uploadUrl = getUploadUrl();
+		let Generate:any = this.$refs.Generate
+		if(this.driver__.driver){
+		Generate.searchPictureName = 'A detailed sketch of an elegant blouse with a high neck, flowing sleeves, and lace trim, highlighting texture and style.'
+		}else{
+			Generate.searchPictureName = ''
+		}
+    },
+    methods: {
+		setSetchboardGenerate(item:any){
+			this.useGenerate.imgId = item.imgId
+			this.useGenerate.imgUrl = item.imgUrl
+			this.useGenerate.level2Type = item.level2Type
+			this.useGenerate.designType = item.designType
+			let Material:any = this.$refs.Material
+			let generate:any = this.$refs.Generate
+
+			if(item.designType == 'collection'){
+			}else {
+				generate.sketchboardList.forEach((item:any) => {
+					item.checked = false
+				});
+			}
+		},
+        open(num: Number) {
+            this.openClick = num;
+            if (num == 2) {
+                let material: any = this.$refs.Material;
+                material.init("Sketchboard");
+            } else if (num == 3) {
+                // let Generate:any = this.$refs.Generate
+                // Generate.init('generate')
+				nextTick().then(()=>{
+					if(this.driver__.driver){
+						driverObj__.moveNext()
+					}
+				})
+            }
+        },
+		scaleImage(index:any){
+			let scaleImage:any = this.$refs.scaleImage
+			scaleImage.isLike = false
+			scaleImage.init(this.sketchboardList,index)
+		},
+		
+        fileUploadChange(data: any) {
+            let file = data.file;
+			let bor = true
+            if (file.status === "done") {
+				let res = JSON.parse(file.xhr.response);
+				if(res.errCode == 0){
+					let category:any={
+						value:'',
+						name:'',
+					}
+					this.sketchCatecoryList.forEach((item:any) => {
+						if(item.value == res.data.level2Type){
+							category.value = item?.value
+							category.name = item?.name
+						}
+					});
+					file.imgUrl = res.data.url;
+					file.resData = res.data;
+					// file.pin = false;
+					//category用来数据处理
+					file.categoryValue = category?.value;
+					file.category = category?.name;
+					file.categoryShow = false;
+					file.id_ = GO.id++
+					file.id = res.data.id
+					file.type_ = {
+						type1:'upload',
+						type2:'Sketchboard'
+					};
+					let fileList = this.fileList.filter(
+						(v: any) => v.status === "done"
+					);
+					this.store.commit("setSketchboardFile", fileList);
+				}else{
+					bor = false
+				}
+            } else if (file.status === "error") {
+				bor = false
+            }
+			if(!bor){
+				let index = -1;
+                let res:any = JSON.parse(file.xhr.response);
+                this.fileList.forEach((ele: any, index1: any) => {
+                    if (file.uid === ele.uid) {
+                        index = index1;
+                    }
+                });
+                if (index > -1) {
+                    this.fileList.splice(index, 1);
+                }
+                // message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
+                message.warning(res.errMsg);
+			}
+        },
+
+        beforeUpload(file: any) {
+            const isJpgOrPng =
+                file.type === "image/jpeg" ||
+                file.type === "image/png" ||
+                file.type === "image/jpg" ||
+                file.type === "image/bmp";
+            if (!isJpgOrPng) {
+                message.info(this.t('SketchboardUpload.jsContent2'));
+            }
+            const isLt2M = file.size / 1024 / 1024 < 5;
+            if (!isLt2M) {
+                message.info(this.t('SketchboardUpload.jsContent3'));
+            }
+            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
+        },
+        deleteFile(item: any) {
+			if(item?.type_?.type1 == 'generate' || item?.type_?.type1 == 'material'){
+				item.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:20})
+				item.state = 'delete'
+				this.store.commit("addGenerateMaterialFils", item);
+			}else{
+				this.fileList = this.store.state.UploadFilesModule.sketchboardFiles
+				let moodboard 
+				this.store.state.UploadFilesModule.sketchboardFiles.forEach((items:any,index:Number)=>{
+					if(items.id_ == item.id_){
+						moodboard = index
+						
+					}
+				})
+				this.fileList.splice(moodboard,1)
+				this.store.commit("setSketchboardFile", this.fileList);
+			}
+        },
+		likeFile(item:any,str:string){
+			if(str == 'like'){
+				let data = {
+					generateDetailId:item.id,
+					level1Type:"Sketchboard",
+					level2Type: item.categoryValue?item.categoryValue:item.level2Type,
+					gender:this.workspace.sex,
+					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+				}
+				Https.axiosPost(Https.httpUrls.generateLike, data).then(
+					(rv) => {
+						item.like = true
+					}
+				).catch(res=>{
+				});
+			}else{
+				let data = {
+					generateDetailId:item.id,
+					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+				}
+				Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
+					(rv) => {
+						item.like = false
+					}
+				).catch(res=>{
+				});
+			}
+
+		},
+        openSetData() {
+			this.useGenerate = {
+				imgId : '',
+				imgUrl:1,
+				checked:false,
+				level2Type:'',
+				designType:''
+			}
+            let arr = JSON.parse(
+                JSON.stringify(
+                    this.store.state.UploadFilesModule.allBoardData
+                        .sketchboardFiles
+                )
+            ) || [];
+			let setboard = {
+				generate:[] as any,
+				material:[] as any,
+				moodboard:[] as any,
+			}
+			
+			arr.forEach((v:any)=>{
+				v.pin = v.pin == 1?true:false
+				this.sketchCatecoryAllList.forEach((item:any) => {
+					if(v.level2Type == item.value){
+						v.category=item.name
+						v.categoryValue=item.value
+					}
+				});
+				if(v.type_.type1 == 'generate'){
+					setboard.generate.push(v)
+				}else if(v.type_.type1 == 'material'){
+					setboard.material.push(v)
+				}else{
+					setboard.moodboard.push(v)
+				}
+			})
+			this.store.commit("setSketchboardGenerateFiles", setboard.generate);
+			this.store.commit("setSketchboardMaterialFiles", setboard.material);
+			this.store.commit("setSketchboardFile", setboard.moodboard);
+			this.fileList = setboard.moodboard
+        },
+        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,
+                };
+                if (this.fileList.length == 15) {
+                    message.warning(
+                        this.t('SketchboardUpload.jsContent4')
+                    );
+                    break;
+                }
+                this.fileList.push(data);
+            }
+            this.store.commit("setSketchboardFile", this.fileList);
+        },
+		setSceneList(data:any){
+			if(this.scene.value === data.value) return
+			this.scene = data
+			let generate:any = this.$refs.Generate
+			generate.sketchboardList = []
+			generate.searchPictureName = ''
+			this.openMenu = false
+		},
+		openPrintModel(){
+			if(this.openMenu)return
+			document.addEventListener('click',this.removePrintModel)
+			this.openMenu = true
+		},
+		removePrintModel(){
+			this.openMenu = false
+			document.removeEventListener('click',this.removePrintModel)
+		}
+    },
+});
+</script>
+<style lang="less" scoped>
+.sketchboard_upload_modal {
+	height: 100%;
+	width: 100%;
+    display: flex;
+	.modal_left,.modal_right{
+		background: #f7f8fa;
+		border-radius: 3rem;
+		padding: 2rem 3rem;
+	}
+	.modal_left {
+		width: 71rem;
+		margin-right: 2rem;
+		display: flex;
+		flex-direction: column;
+		.switch_type_list {
+            display: flex;
+            align-items: center;
+            position: relative;
+
+            .switch_type_item {
+                display: flex;
+                align-items: center;
+                // padding: 0 2rem*1.2);
+                height: calc(4rem*1.2);
+                border-radius: calc(0.8rem*1.2);
+                line-height: calc(4rem*1.2);
+                font-size: var(--aida-fsize1-8);
+                // margin-right: 2.2rem*1.2);
+                margin-right: calc(8rem*1.2);
+                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: calc(.3rem*1.2);
+                    left: 50%;
+                    transform: translateX(-50%);
+                    bottom: calc(.6rem*1.2);
+                    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: calc(1.8rem*1.2);
+                    margin-right: calc(0.8rem*1.2);
+                }
+            }
+			.printMenu{
+				margin-right: 0;
+				margin-left: 2rem;
+				margin-top: auto;
+				position: relative;
+				>div{
+					width: 18rem;
+					font-size: var(--aida-fsize1-6);
+					border: 0;
+					i{
+						transition: all .3s;
+						display: inline-block;
+						margin-left: 1rem;
+					}
+					.forbidden{
+						transform: rotate(180deg);
+					}
+				}
+				ul{
+					width: 18rem;
+				}
+			}
+			.switch_type_item:nth-child(3){
+				margin: 0;
+			}
+        }
+		.sketchboard_body {
+			// height: calc(100% - 5rem*1.2));
+			flex: 1;
+			padding-top: calc(2.5rem*1.2);
+			height: calc(30rem*1.2);
+			overflow-x: hidden;
+			display: flex;
+			flex-direction: column;
+        &.moodboard_body::-webkit-scrollbar {
+            display: none;
+        }
+        .upload_img_body {
+            height: calc(100% - 3rem*1.2);
+            overflow-y: auto;
+            margin-bottom: calc(1rem*1.2);
+			&.upload_img_body::-webkit-scrollbar {
+					display: none;
+				}
+        }
+
+       
+		.upload_file_item{
+			// margin: 0 2rem*1.2) 2rem*1.2) 0;
+			display: inline-block;
+			width: calc(25% - 2rem);
+			aspect-ratio: 1 / 1;
+			border: 1px solid #f5f5f5;
+			vertical-align: top;
+			position: relative;
+			img{
+				width: 100%;
+				height: 100%;
+			}
+			&.upload_component {
+                    border: none;
+                }
+               
+			.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%;
+                }
+				&:hover .delete_like_file_block{
+						// display: block;
+						opacity: 1;
+					}
+               
+
+               
+            }
+			
+		}
+		.upload_max_tip {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: calc(1.4rem*1.2);
+			color: #030303;
+
+			.icon-zhuyi {
+				font-size: calc(1.6rem*1.2);
+				margin-right: calc(0.7rem*1.2);
+			}
+		}
+    }
+	}
+	
+	.modal_right{
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		.modal_layout,.modal_accomplish{
+			.modal_text{
+				font-size: var(--aida-fsize1-4);
+				font-weight: 400;
+				color: rgba(0, 0, 0, 0.45);
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+		}
+		.modal_layout{
+			padding-bottom: 4.8rem;
+			.modal_img{
+				width: calc(40rem*1.2);
+				height: calc(5rem*1.2);
+				// overflow-x: hidden;
+				display: flex;
+				flex-direction: row;
+				overflow-y: hidden;
+				&.modal_img::-webkit-scrollbar {
+					display: none;
+				}
+				.mousewheel{
+					display: flex;
+				}
+				.modal_img_item{
+					width: calc(4rem*1.2);
+					height: calc(4rem*1.2);
+					margin: 0 calc(1rem*1.2) calc(1rem*1.2) 0;
+					position: relative;
+					text-align: center;
+					cursor: pointer;
+					overflow: hidden;
+					flex-shrink: 0;
+					img{
+						// width: 100%;
+						width: auto;
+						height: 100%;
+						object-fit: contain;
+					}
+					.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*1.2);
+			overflow-x: hidden;
+			height: calc(30rem*1.2);
+			display: flex;
+			flex-direction: column;
+			flex: 1;
+			position: relative;
+			.mark_loading{
+				position: absolute;
+				z-index: 99;
+			}
+            // overflow-x: hidden;
+			&.modal_accomplish::-webkit-scrollbar {
+                display: none;
+            }
+			.modal_text{
+				padding-top: calc(2rem*1.2);
+				padding-block:calc(2rem*1.2);
+			}
+			.input_box{
+				z-index: 1;
+				input{
+					&.forbidden{
+						cursor:not-allowed;
+					}
+				}
+			}
+			.modal_img{
+				flex: 1;
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: flex-start;
+				align-content: flex-start;
+				position: relative;
+				.modal_imgItem{
+					margin: 1rem;
+					margin-bottom: 5rem;
+					display: inline-block;
+					// width: calc(10rem*1.2);
+					// height: calc(10rem*1.2);
+					width: calc(33.33% - 2rem);
+					aspect-ratio: 1 / 1;
+					border: 1px solid #f5f5f5;
+					position: relative;
+					cursor: pointer;
+					text-align: center;
+					.moreBox{
+						position: absolute;
+						right: 1rem;
+						top: 1rem;
+						// opacity: 0;
+						width: 3.5rem;
+						height: 3.5rem;
+						transition: all 0.3s ease-in-out;
+					}
+					&.modal_imgItem:nth-child(even) {
+						margin-right: 0;
+					}
+					&:hover .delete_like_file_block{
+						display: block;
+						opacity: 1;
+					}
+					img{
+						object-fit: contain;
+						width: 100%;
+						height: 100%;
+					}
+					.pin_block{
+						position: absolute;
+						left: 1rem;
+						top: 1rem;
+						width: 8rem;
+						height: 3.5rem;
+						border-radius: 3rem;
+						background: rgba(0,0,0,.7);
+						color: #fff;
+						>label{
+							width: 100%;
+							height: 100%;
+							display: flex;
+							align-items: center;
+							justify-content: space-between;
+							cursor: pointer;
+							padding-right: 1rem;
+							padding-left: .2rem;
+						}
+						i{
+							width: 3rem;
+							height: 3rem;
+							border-radius: 50%;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							font-size: 2rem;
+							background: #000;
+							&.noCheck{
+								background: inherit;
+								border: 2px solid #fff;
+							}
+						}
+						span{
+							font-size: 1.8rem;
+							font-weight: 600;
+						}
+					}
+					&.active{
+						opacity: 0.5;
+					// border: 2px solid;
+						border-radius: calc(1rem*1.2);
+						transform: scale(0.9);
+						// img {
+						// }
+						.operate_file_block{
+							pointer-events:none
+						}
+						.pin_block{
+							pointer-events:none
+						}
+						.delete_like_file_block{
+							pointer-events:none
+						}
+					}
+					
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/src/component/home/design/collection/more.vue b/src/component/home/design/collection/more.vue
new file mode 100644
index 00000000..4b460b96
--- /dev/null
+++ b/src/component/home/design/collection/more.vue
@@ -0,0 +1,128 @@
+<template>
+    <div class="more">
+		<i class="fi fi-br-menu-dots-vertical" @click.stop="openList"></i>
+		<div class="more_box" v-show="show">
+			<div class="item" v-if="moreList.includes('edit')" @click.stop="setMore('edit')">
+				<i class="fi fi-rr-edit"></i>
+				<div class="text">{{ $t('more.edit') }}</div>
+			</div>
+			<div class="item" v-if="moreList.includes('enlargement')" @click.stop="setMore('enlargement')">
+				<i class="fi fi-bs-expand-arrows-alt"></i>
+				<div class="text">{{ $t('more.enlargement') }}</div>
+			</div>
+			<div class="item" v-if="moreList.includes('down')" @click.stop="setMore('down')">
+				<i class="fi fi-br-download"></i>
+				<div class="text">{{ $t('more.down') }}</div>
+			</div>
+			<div class="item" v-if="moreList.includes('delete')" @click.stop="setMore('delete')">
+				<span class="icon iconfont icon-shanchu operate_icon"></span>
+				<div class="text">{{ $t('more.delete') }}</div>
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import { downloadIamge } from "@/tool/util";
+
+export default defineComponent({
+    components:{
+    },
+	props:{
+		moreList:{type:Array,default:()=>[]},
+		item:{type:Object,default:()=>{}},
+		index:{type:Number,default:0},
+	},
+	emits:['deleteFile','scaleImage'],
+    setup(props,{emit}) {
+        const store = useStore();
+		const data = reactive({
+			show:false
+		})
+		
+		const dataDom = reactive({
+		})
+		const openList = ()=>{
+			data.show = true
+			document.addEventListener('click',setShow)
+		}
+		const setShow = ()=>{
+			data.show = false
+			document.removeEventListener('click',setShow)
+		}
+		const setMore = (str:any)=>{
+			if(str == 'delete'){
+				emit("deleteFile",props.item);
+			}else if(str == 'edit'){
+				emit("scaleImage",props.index);
+			}else if(str == 'down'){
+				console.log(props.item);
+				downloadIamge(props.item.url)
+			}else if(str == 'enlargement'){
+				emit("scaleImage",props.index);
+			}
+			setShow()
+		}
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			openList,
+			setMore,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .more{
+		position: relative;
+		width: 100%;
+		height: 100%;
+		> .fi{
+			width: 100%;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: rgba(0,0,0,.7);
+			color: #fff;
+			border-radius: .6rem;
+		}
+		> .more_box{
+			position: absolute;
+			background: rgba(0,0,0,.7);
+			right: 0;
+			margin-top: .5rem;
+			color: #fff;
+			border-radius: .6rem;
+			padding: 1rem 0;
+			font-size: 1.4rem;
+			// width: 12rem;
+			text-align: left;
+			> .item{
+				display: flex;
+				align-items: center;
+				padding: 1rem 1.3rem;
+				> i,> span{
+					margin-right: 1rem;
+				}
+				> .text{
+					white-space: nowrap;
+				}
+				&:hover{
+					background: rgba(0,0,0,.3);
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/component/home/design/index.vue b/src/component/home/design/index.vue
index 05a98a94..cf2171ba 100644
--- a/src/component/home/design/index.vue
+++ b/src/component/home/design/index.vue
@@ -18,8 +18,7 @@
 													</span>
 											</div>
 										</div>	
-										<NewCollectionReview id="collectionReview"></NewCollectionReview>
-
+										<NewCollectionReview id="collectionReview" @openCollection="openCollection"></NewCollectionReview>
 									</div>
 								</div>
 								<div v-show="isMannequinShow" class="left_info_hint">
@@ -155,7 +154,7 @@
 				</div>
 			</div>
 		</div>
-	
+		<collectionModal ref="collectionModal"></collectionModal>
 		<!-- <DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail> -->
 		<!-- 导出缩略图的蒙层 start-->
 		<div class="mark_loading" v-show="isShowMark">
@@ -190,11 +189,13 @@ import i18n from "@/lang";
 import { useI18n } from "vue-i18n";
 import { getMousePosition } from "@/tool/mdEvent";
 import { removeClass } from "element-plus/es/utils";
+import collectionModal from './collection.vue'
 const FileSaver = require("file-saver");
 
 export default defineComponent({
 	name: "homePage",
 	components: {
+		collectionModal,
 		// HeaderComponent,
 		NewCollectionReview,
 		affiche,
@@ -273,6 +274,9 @@ export default defineComponent({
 				value:'',
 			},
 		])
+		const dataDom = reactive({
+			collectionModal:null as any,
+		})
 		provide('exportNav',exportNav)
 		let isShowOperate = ref(false)
 		let {t} = useI18n()
@@ -558,7 +562,9 @@ export default defineComponent({
 				generateElList[i].el.style.top = parseInt(String((generateElList.length - 1 - generateElList[i].sort) / 3)) * (height +10) + 'px';
 			}
 		}
-		
+		const openCollection = (str:string)=>{
+			dataDom.collectionModal.init(str)
+		}
 		return {
 			store,
 			likeDesignCollectionList,
@@ -586,6 +592,7 @@ export default defineComponent({
 			setDesignItemStyle,
 			showDesignMark,
 			...toRefs(collItemSize),
+			...toRefs(dataDom),
 			likeItemDom,
 			collItemDom,
 			domHidden,
@@ -600,7 +607,8 @@ export default defineComponent({
 			mouseenter,
 			setLikeDislLike,
 			posiitonData,
-			moveItem
+			moveItem,
+			openCollection,
 		};
 	},
 	data() {
diff --git a/src/component/home/index.vue b/src/component/home/index.vue
index 245870e2..c73fb8fd 100644
--- a/src/component/home/index.vue
+++ b/src/component/home/index.vue
@@ -14,10 +14,10 @@
 			</div>
 		</div>
 	</div>
-	<chat ref="chat" @chatChange="chatChange" v-if="openType"></chat>
+	<chat ref="chatDom" @chatChange="chatChange" v-show="openType == 'history'"></chat>
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive} from 'vue'
+import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
@@ -43,7 +43,7 @@ export default defineComponent({
 			isShowMark:false,
 			routeQuery:{} as any,
 			selectObject:computed(()=>store.state.Workspace.probjects) as any,//选择的项目
-
+			chatData:null as any,
 		})
 		const setIsShowMark = (boolean:boolean)=>{
 			data.isShowMark = boolean
@@ -52,10 +52,10 @@ export default defineComponent({
 		const dataDom = reactive({
 			design:null as any,
 			newPorject:null as any,
+			chatDom:null as any,
 		})
 		watch(() => route.query,
 			(query, oldQuery) => {
-				console.log(route)
 				data.routeQuery = query
 				const key = Object.keys(query)?.[0]
 				if(key){
@@ -173,9 +173,23 @@ export default defineComponent({
 			// nextTick(()=>{
 			// 	dataDom.workflow.isUpdataPorject = true
 			// })
-
+			setChatData()
 			getCollection()	
 		}
+		const setChatData = ()=>{
+			if(!data.chatData)return
+			console.log(dataDom.chatDom?.enableThinking,data.chatData)
+			nextTick(()=>{
+				dataDom.chatDom.enableThinking = data.chatData.enableThinking
+				dataDom.chatDom.filList = data.chatData.filList
+				dataDom.chatDom.chatContent = data.chatData.chatContent
+				dataDom.chatDom.isFinish = true
+				dataDom.chatDom.isChattingRecords = true
+				dataDom.chatDom.sendChat()
+				data.chatData = null
+			})
+			
+		}
 		// const setitemData = (arr:any)=>{
 		// 	return new Promise((resolve,reject)=>{
 		// 	    nextTick(()=>{
@@ -365,9 +379,11 @@ export default defineComponent({
 				getCollection()
 			}
 		}
-		const newProject = (id:any)=>{
+		const newProject = (value:any)=>{
 			props.settingGetHistory()
-			router.push(`home?history=${id}`)
+			router.push(`home?history=${value.id}`)
+			data.chatData = value
+			
 		}
 		return{
 			...toRefs(dataDom),
diff --git a/src/component/home/newProject/index.vue b/src/component/home/newProject/index.vue
index d33ca620..dd57f023 100644
--- a/src/component/home/newProject/index.vue
+++ b/src/component/home/newProject/index.vue
@@ -135,33 +135,39 @@ export default defineComponent({
 			let fileList = JSON.parse(JSON.stringify(data.filList))
 			let fileUrl = (fileList.filter((item:any)=>item.type == 'file').length > 0) ? fileList.filter((item:any)=>item.type == 'file')[0].minioPath : ''
 			let imageUrlList = (fileList.filter((item:any)=>item.type == 'image').length > 0)? fileList.filter((item:any)=>item.type == 'image').map((item:any)=>item.minioPath).join(',') : ''
-			// Https.axiosGet(Https.httpUrls.chatCreateProject, {params:{prompt:data.chatContent,process:data.selectFlow.value,fileUrl:fileUrl,imageUrlList}}).then((rv)=>{
-			// 	if(rv){
-			// 		data.loadingShow = false
-			// 		emit('newProject',rv)
-			// 	}
-			// }).catch(()=>{
-			// 	data.loadingShow = false
-			// })
-			let projectId = ''
-			const eventSource = new EventSource(`${process.env.VUE_APP_BASE_URL}${Https.httpUrls.llmStream}?token=${getCookie('token')}&prompt=${data.chatContent}&projectId=&fileUrl=${fileUrl}&imageUrlList=${imageUrlList}&enableThinking=${data.enableThinking}&process=${data.selectFlow.value}`);
-			eventSource.onmessage = function(event) {
-				let eventData = JSON.parse(event.data)
-				if(eventData.status == "[PROJECT_CREATE_SIGNAL]"){
-					projectId = JSON.parse(eventData.tools_data).projectId
-				}
-			};
-			eventSource.onerror = function(error) {
-				if (eventSource.readyState === EventSource.CLOSED) {
-					// data.chatList[data.chatList.length-1].content.message='服务器繁忙，请稍后再试。'
-				} else {
-					if(projectId){
-			 			emit('newProject',projectId)
+			Https.axiosGet(Https.httpUrls.chatCreateProject, {params:{prompt:data.chatContent,process:data.selectFlow.value,fileUrl:fileUrl,imageUrlList}}).then((rv)=>{
+				if(rv){
+					data.loadingShow = false
+					let value = {
+						id:rv,
+						fileList:fileList,
+						chatContent:data.chatContent,
+						enableThinking:data.enableThinking,
 					}
-					eventSource.close()
+					emit('newProject',value)
 				}
+			}).catch(()=>{
 				data.loadingShow = false
-			};
+			})
+			// let projectId = ''
+			// const eventSource = new EventSource(`${process.env.VUE_APP_BASE_URL}${Https.httpUrls.llmStream}?token=${getCookie('token')}&prompt=${data.chatContent}&projectId=&fileUrl=${fileUrl}&imageUrlList=${imageUrlList}&enableThinking=${data.enableThinking}&process=${data.selectFlow.value}`);
+			// eventSource.onmessage = function(event) {
+			// 	let eventData = JSON.parse(event.data)
+			// 	if(eventData.status == "[PROJECT_CREATE_SIGNAL]"){
+			// 		projectId = JSON.parse(eventData.tools_data).projectId
+			// 	}
+			// };
+			// eventSource.onerror = function(error) {
+			// 	if (eventSource.readyState === EventSource.CLOSED) {
+			// 		// data.chatList[data.chatList.length-1].content.message='服务器繁忙，请稍后再试。'
+			// 	} else {
+			// 		if(projectId){
+			//  			emit('newProject',projectId)
+			// 		}
+			// 		eventSource.close()
+			// 	}
+			// 	data.loadingShow = false
+			// };
 		}
 		const handleFileUpload = (event:any)=>{
 			if (event.target.files[0].size > 5 * 1024 * 1024) { // 5MB
diff --git a/src/store/uploadFile/uploadFile.ts b/src/store/uploadFile/uploadFile.ts
index cb71de22..8835621f 100644
--- a/src/store/uploadFile/uploadFile.ts
+++ b/src/store/uploadFile/uploadFile.ts
@@ -351,6 +351,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
 				state.allBoardData.moodTemplateId = state.moodTemplateId
 				if(state.moodboard.length > 0)currentState = true
 			}else if(str == 'printBoard'){
+				console.log(state.printboard)
 				state.allBoardData.printboardFiles = state.printboard
 				if(state.printboard.length > 0)currentState = true
 			}else if(str == 'sketchBoard'){