diff --git a/components.d.ts b/components.d.ts
index e62b27e1..73145d49 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -10,23 +10,15 @@ declare module 'vue' {
   export interface GlobalComponents {
     ABadge: typeof import('ant-design-vue/es')['Badge']
     ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
-    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADatePicker: typeof import('ant-design-vue/es')['DatePicker']
     ADrawer: typeof import('ant-design-vue/es')['Drawer']
-    ADropdown: typeof import('ant-design-vue/es')['Dropdown']
-    AImage: typeof import('ant-design-vue/es')['Image']
-    AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
     AMenu: typeof import('ant-design-vue/es')['Menu']
     AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
     AModal: typeof import('ant-design-vue/es')['Modal']
     APagination: typeof import('ant-design-vue/es')['Pagination']
-    APopover: typeof import('ant-design-vue/es')['Popover']
     ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
     ASelect: typeof import('ant-design-vue/es')['Select']
-    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
-    ASlider: typeof import('ant-design-vue/es')['Slider']
-    ASpace: typeof import('ant-design-vue/es')['Space']
     ASpin: typeof import('ant-design-vue/es')['Spin']
     ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
     ASwitch: typeof import('ant-design-vue/es')['Switch']
diff --git a/src/assets/icons/Folder.svg b/src/assets/icons/Folder.svg
new file mode 100644
index 00000000..abfd060d
--- /dev/null
+++ b/src/assets/icons/Folder.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="288.000000pt" height="288.000000pt" viewBox="0 0 288.000000 288.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,288.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M379 2446 c-101 -36 -179 -116 -209 -214 -19 -62 -20 -93 -20 -792 0
+-701 1 -730 20 -793 26 -83 88 -155 168 -194 l57 -28 1045 0 1045 0 47 22
+c101 46 170 138 188 250 6 32 10 329 10 668 0 659 -3 692 -54 774 -35 54 -101
+108 -163 131 -52 19 -78 20 -626 20 l-572 0 -46 53 c-25 29 -70 66 -100 82
+l-54 30 -350 2 c-269 2 -358 0 -386 -11z m710 -175 c20 -11 42 -25 48 -33 6
+-7 48 -92 92 -188 85 -183 118 -229 196 -274 73 -43 119 -46 635 -46 l490 0 0
+-517 c0 -496 -1 -519 -20 -547 -10 -17 -36 -40 -57 -53 l-38 -23 -993 0 c-968
+0 -994 0 -1031 20 -22 11 -48 35 -60 53 -21 34 -21 40 -21 777 0 737 0 743 21
+777 12 18 37 42 57 53 34 18 60 19 340 20 280 0 306 -1 341 -19z m1381 -174
+c53 -28 80 -75 80 -139 l0 -48 -506 0 c-498 0 -507 0 -541 21 -31 19 -74 88
+-103 165 l-10 24 519 0 518 0 43 -23z"/>
+</g>
+</svg>
diff --git a/src/assets/images/icon/library.png b/src/assets/images/icon/library.png
new file mode 100644
index 00000000..60b8e7bf
Binary files /dev/null and b/src/assets/images/icon/library.png differ
diff --git a/src/assets/images/icon/upload_black.png b/src/assets/images/icon/upload_black.png
new file mode 100644
index 00000000..635249c7
Binary files /dev/null and b/src/assets/images/icon/upload_black.png differ
diff --git a/src/assets/images/icon/upload_gray.png b/src/assets/images/icon/upload_gray.png
new file mode 100644
index 00000000..4e109e29
Binary files /dev/null and b/src/assets/images/icon/upload_gray.png differ
diff --git a/src/component/Account/frontPage/bindPage.vue b/src/component/Account/frontPage/bindPage.vue
index 7ec33f51..825781f4 100644
--- a/src/component/Account/frontPage/bindPage.vue
+++ b/src/component/Account/frontPage/bindPage.vue
@@ -111,28 +111,46 @@ export default defineComponent({
 			.catch((res) => {accountHomeData.loadingShow = false});
 		}
 		const ungroupWeiXinModel = ()=>{
-			Https.axiosGet(Https.httpUrls.unbindWeChat,).then((rv)=>{
-				message.success(t('frontPage.jsContent1'));
-				let value = {
-					accountExtendList:{
-						WeChat:undefined,
-						Google:accountHomeData.userDetail.accountExtendList?.Google
-					}
+				Modal.confirm({
+				title: t('frontPage.UnbindTip'),
+				okText: t('Yes'),
+				cancelText: t('No'),
+				mask:false,
+				centered:true,
+				onOk() {
+					Https.axiosGet(Https.httpUrls.unbindWeChat,).then((rv)=>{
+						message.success(t('frontPage.jsContent1'));
+						let value = {
+							accountExtendList:{
+								WeChat:undefined,
+								Google:accountHomeData.userDetail.accountExtendList?.Google
+							}
+						}
+						store.commit("upUserDetail", value)
+					})
 				}
-				store.commit("upUserDetail", value)
-			})
+			});
 		}
 		const ungroupGoogleModel = ()=>{
-			Https.axiosGet(Https.httpUrls.unbindGoogle,).then((rv)=>{
-				let value = {
-					accountExtendList:{
-						WeChat:accountHomeData.userDetail.accountExtendList?.WeChat,
-						Google:undefined,
-					}
+			Modal.confirm({
+				title: t('frontPage.UnbindTip'),
+				okText: t('Yes'),
+				cancelText: t('No'),
+				mask:false,
+				centered:true,
+				onOk() {
+					Https.axiosGet(Https.httpUrls.unbindGoogle,).then((rv)=>{
+						let value = {
+							accountExtendList:{
+								WeChat:accountHomeData.userDetail.accountExtendList?.WeChat,
+								Google:undefined,
+							}
+						}
+						store.commit("upUserDetail", value)
+						message.success(t('frontPage.jsContent1'));
+					})
 				}
-				store.commit("upUserDetail", value)
-				message.success(t('frontPage.jsContent1'));
-			})
+			});
 		}
 		const modifyEmail = ()=>{
 			bindPageDom.bindEmail.init('Modify')
diff --git a/src/component/HomePage/Generate copy.vue b/src/component/HomePage/Generate copy.vue
new file mode 100644
index 00000000..8b420cf9
--- /dev/null
+++ b/src/component/HomePage/Generate copy.vue	
@@ -0,0 +1,1268 @@
+<template>
+    <div class="generate">
+        <div class="generate_checkbox" >
+			<generalMenu v-if="type_.type2 == 'Printboard' || type_.type2 == 'Sketchboard'" :dataList="printCatecoryList" @setprintModel="setCatecorySceneList" :item="scene" width="14rem" style="padding: 0;"></generalMenu>
+			<generalMenu v-if="(type_.type2 == 'Printboard' && scene.value == 'Pattern')" :dataList="printModelList" @setprintModel="setprintModel" :item="printModel"></generalMenu>
+        </div>
+        <div class="input_border" >
+			<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
+							class="upload_file_item Guide_1_2_7"
+							v-for="(file, index) in sketchboardList"
+							:key="file"
+							:class="[driver__.driver?'showEvents':'']"
+						>
+							<div
+								class="upload_file_item_content"
+								v-show="file?.status === 'uploading'"
+							>
+								<a-spin size="small" :indicator="indicator" tip="Uploading..." />
+							</div>
+							<div
+								class="upload_file_item_content"
+								v-show="file?.status === 'done' || file?.base64"
+							>
+								<img :src="file?.imgUrl" class="upload_img" />
+								<div class="delete_like_file_block"  :class="[driver__.driver?'hideEvents':'']">
+									<span class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></span>
+								</div>
+							</div>
+						</div>
+					</div>
+					<a-dropdown>
+						<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}"></i>
+						<template #overlay>
+							<a-menu>
+								<a-menu-item>
+										<a-upload
+											class="search_upImg"
+											:capture="null"
+											:action="uploadUrl + '/api/element/upload'"
+											list-type="picture-card"
+											:data="{
+												...upload,
+											}"
+											:maxCount='1'
+											:headers="{ Authorization: token }"
+											v-model:file-list="sketchboardList"
+											:before-upload="beforeUpload"
+											accept=".jpg,.png,.jpeg,.bmp"
+											@change="(file) => fileUploadChange(file)"
+										>
+										<div class="drop-container">
+										<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'"></i>
+											<div style="font-size: 1.2rem;">{{ $t('PrintboardUpload.Upload') }}</div>
+										</div>
+										</a-upload>
+								</a-menu-item>
+								<a-menu-item>
+									<div class="drop-container" @click.stop="handleOpenLibrarySelect">
+										<i class="fi fi-rr-followcollection"></i>
+										<div style="font-size: 1.2rem;">{{ $t('PrintboardUpload.Library') }}</div>
+									</div>
+								</a-menu-item>
+							</a-menu>
+						</template>
+					</a-dropdown>
+					<textarea 
+						class="textarea"  
+						@input="ifMaximumLength" 
+						:placeholder="(scene?.value == 'Slogan' && type_.type2 == 'Printboard')?isSloganHint:$t('Generate.inputContent1')"
+						:maxlength='inputShow?0:9999' 
+						@keydown.enter.prevent="getgenerate()"
+						@click="inputFocus()"
+						v-model="searchPictureName"
+						@paste="onPaste"
+
+					></textarea>
+					
+					<i v-show="scene?.value == 'Slogan'" :title="$t('Generate.sloganTitle')" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
+					<!-- <i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
+					<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i> -->
+				</div>
+				<div class="input_box_btnBox sketch" v-else >
+					<div class="upload_item"  v-show="sketchboardList.length > 0">
+						<div
+							class="upload_file_item"
+							v-for="(file, index) in sketchboardList"
+							:key="file"
+							:class="[driver__.driver?'showEvents':'']"
+						>
+							<div
+								class="upload_file_item_content"
+								v-show="file?.status === 'uploading'"
+							>
+								<a-spin size="small" :indicator="indicator" tip="Uploading..." />
+							</div>
+							<div
+								class="upload_file_item_content"
+								v-show="file?.status === 'done' || file?.base64"
+							>
+								<img :src="file?.imgUrl" class="upload_img" />
+								<div class="delete_like_file_block"  :class="[driver__.driver?'hideEvents':'']">
+									<i class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></i>
+								</div>
+							</div>
+						</div>
+					</div>
+					<i class="fi fi-br-upload" style="margin-left: 2rem;"  v-show="sketchboardList.length == 0" :title="$t('Generate.uploadproduct')">
+						<a-upload
+							class="search_upImg"
+							:capture="null"
+							:action="uploadUrl + '/api/element/upload'"
+							list-type="picture-card"
+							:data="{
+								...upload,
+							}"
+							:maxCount='1'
+							:headers="{ Authorization: token }"
+							v-model:file-list="sketchboardList"
+							:before-upload="beforeUpload"
+							accept=".jpg,.png,.jpeg,.bmp"
+							@change="(file) => fileUploadChange(file)"
+						>
+						</a-upload>
+					</i>
+					<!-- <div :title="$t('Generate.style')">
+						<generalMenu :dataList="printModelList" :isCanvas="type_.type2 == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
+					</div> -->
+				</div>
+				<textarea 
+					v-show="isTextarea"
+					class="search_textarea "  
+					@input="ifMaximumLength" 
+					:maxlength='inputShow?0:9999' 
+					@keydown.enter="getgenerate()"
+					@click.stop=""
+					v-model="searchPictureName"
+				></textarea>
+				<div class="generage_btn_box">
+					<div class="generage_btn started_btn"  v-show="!isGenerate">
+						<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getgenerate()"></i>
+						<div class="icon iconfont icon-xiala" 
+							v-show="(type_.type2 == 'Sketchboard') || 
+							(type_.type2 == 'Printboard' && scene.value == 'Pattern') || type_.type2 == 'Moodboard'"  :class="{active:speedState}" @click.stop="openSpeed"></div>
+						<div class="content" v-show="speedState && scene?.value != 'extract'">
+							<div v-for="item in speedList" 
+								v-show="(type_.type2 == 'Moodboard') || 
+								(type_.type2 == 'Sketchboard' && item?.value != 'high') || 
+								(type_.type2 == 'Printboard')" 
+								:key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
+						</div>
+						<div class="content" v-show="speedState && scene?.value == 'extract'">
+							<div v-for="item in extractList" :class="{active:item.value == speedData.value}" :key="item.value" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
+						</div>
+					</div>
+					<div class="generage_btn started_btn" v-show="isGenerate && !remGenerate">
+						<i class="fi fi-br-loading" ></i>
+					</div>
+					<div class="generage_btn started_btn" v-show="remGenerate" @click.stop="removeGenerate">
+						{{$t('Generate.Close')}}
+					</div>
+					
+				</div>
+				<!-- <div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click="getgenerate">
+					<i class="fi fi-br-loading"></i>
+				</div>
+				<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}">
+					{{$t('Generate.Close')}}
+				</div> -->
+				<span class="inputShowText" ref="inputShowText"></span>
+			</div>
+            <div class="search_keyword" v-if="workspace?.allKeywordsByStyle" v-show="isInputFocus" @click.stop="">
+				<div class="search_keyword_center" >
+					<div class="search_keyword_center_left">
+						<div v-if="type_.type2 == 'Printboard'" v-for="item in styleRecommend" @click.stop="cliSetKeyword(item)" class="search_keyword_center_item"> {{item}} </div>
+						<div v-for="item in workspace?.allKeywordsByStyle?.[type_.type2]" @click.stop="cliSetKeyword(item)" class="search_keyword_center_item"> {{item}} </div>
+					</div>
+				</div>
+			</div>
+        </div>
+        <div class="generage_img" :style="[isGenerate?'overflow:hidden':'']">
+            <div
+                class="generage_img_item"
+                v-for="(item, index) in fileList"
+                :key="item.imgUrl"
+                @click="generageAdd(item)"
+                :class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'']"
+            >
+				<img v-if="item?.imgUrl" v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
+				<div v-else class="loading">
+					<a-spin size="large" ></a-spin>
+				</div>
+				<sketchCategory v-show="item?.imgUrl" v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" :isSpread="type_.type2 == 'Printboard'" :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="item" :driver__="driver__.driver" :driverClass="{'class1': type_.type2 == 'Sketchboard'?'Guide_1_13':'','class2':type_.type2 == 'Sketchboard'?'Guide_1_13_1':''}"></sketchCategory>
+				<div
+					v-show="item?.imgUrl"
+					class="delete_like_file_block left1"
+				>
+					<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like',index)"></i>
+					<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike',index)"></i>
+				</div>
+				<div v-show="item?.imgUrl" class="delete_like_file_block left">
+					<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
+				</div>
+				<div v-show="item?.imgUrl" class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
+					<span class="icon iconfont icon-shanchu operate_icon"></span>
+				</div>
+            </div>
+			<div class="mark_loading" v-show="loadingShow">
+				<a-spin size="large" />
+			</div>
+        </div>
+		<scaleImage ref="scaleImage" :imgType="type_.type2" :sex="workspace.sex"></scaleImage>
+		<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
+			<SelectImages
+				radio
+				full-data
+				ref="selectImages"
+				@select="handleImageSelect"
+				:api="Https.httpUrls.queryLibraryPage"
+				isLibrary/>
+    </div>
+</template>
+<script lang="ts">
+import { LoadingOutlined } from "@ant-design/icons-vue";
+import { message, Upload, Modal } from "ant-design-vue";
+import { defineComponent, computed, reactive, createVNode, h, ref,watch, nextTick, inject, toRefs, getCurrentInstance, onMounted, onUnmounted, } from "vue";
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import GO from "@/tool/GO";
+import { getCookie } from "@/tool/cookie";
+import { getUploadUrl } from "@/tool/util";
+// import { forEach } from "jszip";
+import scaleImage from "@/component/HomePage/scaleImage.vue";
+import generalMenu from "@/component/HomePage/generalMenu.vue";
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
+import createSlogan from "@/component/HomePage/createSlogan.vue";
+import { useI18n } from "vue-i18n";
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import SelectImages from '@/component/common/SelectImages.vue'
+
+export default defineComponent({
+	components: {
+		scaleImage,	
+		generalMenu,
+		createSlogan,
+		sketchCategory,
+		SelectImages
+	},
+    props: ["msg",'sketchCatecoryList','gender'],
+	emits:['setLibrary'],
+    setup(props) {
+        // console.log(prop.msg);
+        let userDetail:any= computed(()=>{
+			return store.state.UserHabit.userDetail
+		})
+		const instance  = getCurrentInstance()
+		
+		let printModelList:any = ref([])
+		let sketchStyleList:any = ref([])
+		let printModel:any = ref({
+			num:'',
+			id:'',
+			optype:false,
+			value:'Painting Style',
+			label:useI18n().t('Generate.Model1')
+		})
+
+
+		let printCatecoryList:any = computed(()=>{
+			if(props.msg == 'Sketchboard'){
+				return store.state.UserHabit.SketchGenerateType
+			}else if(props.msg == 'Printboard'){
+				return store.state.UserHabit.printType
+			}
+		})
+
+		
+        let searchPictureName = ref("");
+        let searchPictureSeed:any = ref(0);
+        let store = useStore();
+        let fileList: any = ref([
+          
+        ]);
+		let scene = ref({
+		})
+		let sketchboardList:any = ref([])
+		const setCatecorySceneList = (data:any)=>{
+			if(scene.value.value === data.value) return
+			scene.value = data
+			sketchboardList.value = []
+			searchPictureName.value = ''
+		}
+		let level2Type = ref('')
+		// let printBoards:any = computed(()=>{return store.state.UploadFilesModule.printboard})
+		// let moodboarList:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
+		// let sketchCatecoryList:any = ref([])
+		let workspace:any = computed(()=>{
+			return store.state.Workspace.probjects
+		})
+		let upload = ref({
+			isPin: 0,
+			level1Type: props.msg,
+			ageGroup:workspace.ageGroup,
+			gender: props.gender,
+			timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+		})
+		let isGenerate = ref(false)//判断是否正在进行generate
+		let inputShow = ref(false)//表示是否出现红框
+		let inputTime = ref()
+		let driver__:any = inject('driver__')
+		let {t} = useI18n()
+		let isTest = ref()
+		let generateTime:any = ref()
+		let generateProceedList:any = ref([])
+		let remGenerate:any = ref(false)
+		let remGenerateTime:any = ref()
+		let styleRecommend:any = []
+		// let styleRecommend:any = inject('styleRecommend')
+		let generateLevel2Type = ''
+		let isSloganHint:any = ref(' ')
+		let loadingShow =ref(false)
+		let speed = reactive({
+			speedList:[
+				{
+					title:'',
+					label:t('speedList.generateWx'),
+					value:'advanced',
+				},{
+					title:'',
+					label:t('speedList.toproductFlus'),
+					value:'high',
+				},{
+					title:'',
+					label:t('speedList.generateNormal'),
+					value:'normal',
+				},
+				// {
+				// 	title:'',
+				// 	label:t('speedList.generateFlux'),
+				// 	value:'flux',
+				// },
+			],
+			extractList:[
+				{
+					title:'',
+					label:t('speedList.generateFlux'),
+					value:'flux',
+				},
+			],
+			speedState:false,
+			speedData:{
+				title:'',
+				label:t('speedList.generateWx'),
+				value:'advanced',
+			},
+		})
+		const openSpeed = ()=>{
+			if(speed.speedState){
+				removeOpenSpeed()
+			}else{
+				instance.appContext.config.globalProperties.$dropdownEvents.closeAll()
+				speed.speedState = true
+			}
+
+		}
+		const removeOpenSpeed = ()=>{
+			speed.speedState = false
+		}
+		watch(()=>scene.value,(newVal,oldVal)=>{
+			if(newVal.value == 'extract'){
+				speed.speedData = speed.extractList[0]
+			}else if(newVal.value == 'Logo' || newVal.value == 'Slogan'){
+				speed.speedData.value = ''
+				speed.speedData.label = ''
+			}else{
+				// if(newVal.value == "Pattern" || props.msg == 'Sketchboard'){
+				// 	speed.speedData = speed.speedList[1]
+				// }else{
+				// 	speed.speedData = speed.speedList[0]
+				// }
+				speed.speedData = speed.speedList[0]
+			}
+		})
+		const setSpeed = (item:any)=>{
+			speed.speedData = item
+		}
+		onMounted(() => {
+			if(props.msg == 'Sketchboard'){
+				scene.value = {
+					name: t('SketchboardUpload.GenerateSketch'),
+					value:'generate'
+				}
+			}else if(props.msg == 'Printboard'){
+				scene.value = {
+					name: t('SketchboardUpload.GenerateSketch'),
+					value:'Pattern'
+				}
+			}
+			instance.appContext.config.globalProperties.$dropdownEvents.onClose(removeOpenSpeed)
+			// if(props.msg == 'Sketchboard'){
+			// 	speed.speedData = speed.speedList[1]
+			// }
+		})
+
+		onUnmounted(() => {
+			instance.appContext.config.globalProperties.$dropdownEvents.offClose(removeOpenSpeed)
+		})
+        return {
+			userDetail,
+            searchPictureName,
+			searchPictureSeed,
+            store,
+            fileList,
+			sketchboardList,
+			level2Type,
+			printModel,
+			printModelList,
+			sketchStyleList,
+			isGenerate,
+			printCatecoryList,
+			scene,
+
+			// printBoards,
+			// moodboarList,
+			// sketchCatecoryList,
+			workspace,
+			inputShow,
+			inputTime,
+			driver__,
+			t,
+			isTest,
+			generateTime,
+			generateProceedList,
+			remGenerate,
+			remGenerateTime,
+			styleRecommend,
+			generateLevel2Type,
+			isSloganHint,
+			loadingShow,
+			...toRefs(speed),
+			openSpeed,
+			setSpeed,
+			upload,
+			Https,
+			setCatecorySceneList,
+        };
+    },
+    data(prop) {
+        return {
+            indicator: h(LoadingOutlined, {
+                style: {
+                    fontSize: "2.4rem",
+                },
+                spin: true,
+            }),
+            
+            token: "",
+            uploadUrl: "",
+           
+            type_: {
+                type1: "generate",
+                type2: prop.msg,
+            },
+			isTextarea:false,
+			isInputFocus:false,
+        };
+    },
+	
+    mounted() {
+        // this.fileList.forEach((item,index)=>{
+        // 	item.checked = true
+        // 	item.type_ = 'generate'
+        // 	item.id_ = GO.id++
+        // })
+        // this.store.commit("addGenerateFils", this.fileList);
+        this.token = getCookie("token") || "";
+		let isTest:any = getCookie('isTest')
+        this.isTest =JSON.parse(isTest)
+        this.uploadUrl = getUploadUrl();
+		// if()
+		if(this.type_.type2 == 'Printboard'){
+			this.printModelList = [
+				{
+					num:1,
+					optype:false,
+					value:'Painting Style',
+					label:useI18n().t('Generate.Model1')
+				},{
+					num:2,
+					optype:false,
+					value:'Illustration Style',
+					label:useI18n().t('Generate.Model2')
+				},{
+					num:3,
+					optype:false,
+					value:'Real Style',
+					label:useI18n().t('Generate.Model3')
+				},
+			]
+		}else if(this.type_.type2 == 'Sketchboard'){
+			this.printModelList = JSON.parse(JSON.stringify(this.store.state.UserHabit.SketchStyle))
+			let imgList = ['/image/sketch/sketch-thick.jpg','/image/sketch/sketch-medium.jpg','/image/sketch/sketch-fine.jpg']
+			this.printModelList.forEach((item:any,index:number)=>{
+				item.img = imgList[index]
+			})
+			if(this.printModelList[3])this.printModelList[3].img = -1
+
+		}
+		this.printModel = this.printModelList[0]
+		
+		
+    },
+	watch:{
+		driver__:{
+			handler(newVal,oldVal){
+				if(this.type_.type2 == 'Printboard'){
+					if(newVal.index >= 14 && newVal.index < 15){
+					}else{
+					}
+				}else if(this.type_.type2 == 'Sketchboard'){
+					
+				}
+				
+			}
+		},
+		scene:{
+			handler(newVal,oldVal){
+				if(this.type_.type2 == 'Printboard' && newVal.value == 'Slogan'){
+					let sloganType = [this.t('Generate.BlueYelStarryNight'),this.t('Generate.GreenCthulhu'),this.t('Generate.RedYelFireStyle'),this.t('Generate.CyberpunkStyle'),this.t('Generate.CitySkyline'),this.t('Generate.RedMaple'),this.t('Generate.GoldSunflower'),this.t('Generate.EmrldJungle'),this.t('Generate.PinkSakura')]
+					var randomNumber = Math.floor(Math.random() * sloganType.length);
+					this.isSloganHint = sloganType[randomNumber]
+				}else{
+					this.isSloganHint = ''
+				}
+			}
+		}
+		// moodboarList(newVal,oldVal){
+		// 	if(newVal.length>=1 || this.sketchboardList.length >= 2){
+		// 	}else{
+		// 		this.printModel = {
+		// 			num:'',
+		// 			optype:false,
+		// 			value:'Painting Style',
+		// 			name:this.t('Generate.Model'+1)
+		// 		}
+		// 	}
+		// },
+	},
+    computed: {
+        getSketchLabel(value: any) {
+            return (value: any) => {
+                let lable = "";
+                for (let item of this.sketchCatecoryList) {
+                    if (item.value === value) {
+                        lable = item.label;
+                        break;
+                    }
+                }
+                return lable;
+            };
+        },
+    },
+    methods: {
+        generageAdd(data: any) {
+			if(!data?.imgUrl)return
+            data.type_ = this.type_;
+			data.type_.type1 = data.designType?data.designType:this.type_.type1
+			data.resData = JSON.parse(JSON.stringify(data))
+			let maxImg = 8
+			if(this.type_.type2 == 'Sketchboard'){
+				maxImg = 20
+			}
+			let parent:any = this.$parent
+			if(parent.isUseGenerate){
+				// parent.useGenerate.designType = 'collection'
+				this.$emit('setLibrary',data)
+				return
+			}
+			data.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:maxImg})
+            this.store.commit("addGenerateMaterialFils", data);
+			// console.log(this.fileList);
+        },
+        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('Generate.jsContent1'));
+            }
+            const isLt2M = file.size / 1024 / 1024 < 5;
+            if (!isLt2M) {
+                message.info(this.t('Generate.jsContent2'));
+            }
+            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
+        },
+		setprintModel(value:any){
+			this.printModel = value
+		},
+		imageToSketch(){
+			if((!this.printModel?.id && !this.printModel?.value) || !this.sketchboardList?.[0]?.id)return message.info(this.t('Generate.jsContent4'));
+			this.loadingShow = true
+			let data = {
+				"elementId": this.sketchboardList[0].id,
+				gender:this.workspace.sex,
+				"style": this.printModel.value,
+				"styleImageId": this.printModel?.id?this.printModel?.id:''
+			}
+			Https.axiosPost(Https.httpUrls.imageToSketch, data).then((rv)=>{
+				if(rv){
+					this.sketchCatecoryList.forEach((itemCategory:any) => {
+						if(itemCategory.value == rv.category){
+							rv.categoryValue = itemCategory?.value
+							rv.category = itemCategory?.name
+						}
+					});
+					this.fileList.push({
+						imgUrl:rv.url,
+						categoryValue:rv.categoryValue,
+						category:rv.category,
+						id:rv.id,
+						status:'Success',
+					})
+					this.loadingShow = false
+				}
+			}).catch(()=>{
+				this.loadingShow = false
+			})
+		},
+		getgenerate(){
+			// if(this.scene?.value == 'extract'){
+			// 	this.imageToSketch()
+			// 	return
+			// }
+			this.isTextarea = false
+			this.isInputFocus = false
+			if(this.isGenerate)return
+			clearInterval(this.remGenerateTime)
+			let httpsUrl = Https.httpUrls.generatePrepare
+			let data
+			if(this.scene?.value == 'extract'){
+				httpsUrl = Https.httpUrls.imageToSketch
+				if((!this.printModel?.id && !this.printModel?.value) || !this.sketchboardList?.[0]?.id)return message.info(this.t('Generate.jsContent4'));
+				data = {
+					"elementId": this.sketchboardList[0].id,
+					gender:this.workspace.sex,
+					"style": this.printModel.value,
+					"styleImageId": this.printModel?.id?this.printModel?.id:'',
+					modelName:this.speedData.value,//为1就是Print
+				}
+			}else{
+				if(this.searchPictureName){
+					let arr = this.searchPictureName.split(/\s+/).length
+					if(arr > 250){
+						message.info(
+						this.t('Generate.jsContent4')
+						);
+						return
+					}
+				}else{
+					if(this.sketchboardList?.[0]?.imgUrl){
+
+					}else{
+						message.info(
+							this.t('Generate.jsContent5')
+						);
+						return
+					}
+				}
+				let level2Type = ''
+				let collectionElementId = ''
+				let base64 = ''
+				if(this.sketchboardList?.[0]){
+					collectionElementId = this.sketchboardList[0].id
+					if(this.sketchboardList[0].base64){
+						base64 = this.sketchboardList[0].imgUrl
+					}
+				}
+				let sloganText = ''
+				sloganText = this.searchPictureName
+				if(this.upload.level1Type == "Sketchboard"){
+					level2Type = this.sketchboardList?.[0]?.categoryValue?this.sketchboardList[0].categoryValue:''
+					if(this.workspace.styleName){
+						sloganText = `${this.workspace.styleName},${sloganText}`
+					}
+				}else if(this.upload.level1Type == "Printboard"){
+					level2Type = this.scene?.value
+					if(level2Type == 'Slogan' && this.searchPictureName == ''){
+						sloganText = this.isSloganHint
+					}else if(level2Type == 'Pattern'){
+						sloganText = `${this.printModel.value},${sloganText}`
+					}
+					if(!base64 && level2Type == 'Slogan'){
+						message.info(this.t('Generate.jsContent10'));
+						return
+					}
+				}
+				data = {
+					generateType:'text',
+					designType:'collection',
+					collectionElementId:collectionElementId,
+					level1Type:this.upload.level1Type,
+					level2Type:level2Type,
+					text:sloganText,
+					seed:this.searchPictureSeed,
+					userId:this?.userDetail?.userId,
+					timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+					modelName:this.speedData.value,//为1就是Print
+					isTestUser:this.driver__.driver?false:this.isTest,
+					gender:this.workspace.sex,
+					sloganBase64:base64,
+					ageGroup:this.workspace.ageGroup
+				}
+				this.generateLevel2Type = data.level2Type
+			}
+			
+			
+			this.isGenerate = true
+			// this.remGenerateTime = setTimeout(()=>{
+			// },10000)
+			Https.axiosPost(httpsUrl, data).then(
+                (rv) => {
+					if(this.scene?.value == 'extract'){
+						rv = {
+							uniqueId:[rv]
+						}
+					}
+					let rvData = rv.uniqueId.map((item:any)=>{
+						return{taskId:item,status:''}
+					})
+					this.remGenerate = true//出现取消按钮
+					this.fileList.unshift(...rvData)
+					this.setGenerate(rv.uniqueId)
+                }
+            ).catch(res=>{
+				this.generateLevel2Type = ''
+				this.isGenerate = false
+				clearInterval(this.remGenerateTime)
+				this.remGenerate = false
+
+				if(res.errCode === 2){
+					let this_ = this
+					Modal.confirm({
+						title: res.errMsg,
+						icon: createVNode(ExclamationCircleOutlined),
+						okText: 'Yes',
+						cancelText: 'No',
+						mask:false,
+						zIndex:99999,
+						centered:true,
+						onOk() {
+							this_.store.commit("setUpgradePlan", true);
+						},
+						onCancel(){
+							
+						}
+					});
+				}
+            });
+		},
+		setGenerate(dataList:any){
+			let data = dataList
+			let dataNum = dataList.length
+			let state = true
+			this.generateTime = setInterval(()=>{
+				if(!this.isGenerate)return
+				if(!state)return
+				state = false
+				Https.axiosPost(Https.httpUrls.generateResult, data).then(
+					(rv) => {
+						state = true
+						if(this.isGenerate){//防止取消后有正在执行的获取状态
+							this.generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
+							rv.forEach((element:any) => {
+								if(element.status == 'Success'){
+									element.imgUrl = element.url
+									element.id_ = GO.id++
+									let index = this.fileList.findIndex((item:any)=>item.taskId == element.taskId)
+									this.fileList[index] = element
+									// this.fileList.unshift(element)
+									data = data.filter((item:any) => item !== element.taskId);
+									if(this.type_.type2 == 'Sketchboard'){
+										this.sketchCatecoryList.forEach((itemCategory:any) => {
+											if(itemCategory.value == element.category){
+												element.categoryValue = itemCategory?.value
+												element.category = itemCategory?.name
+											}
+										});
+									}else{
+										element.categoryValue = this.scene?.value
+										element.category = this.scene?.name
+									}
+								}else if(element.status == 'Fail' || element.status == 'Invalid'){
+									data = data.filter((item:any) => item !== element.taskId);
+									this.fileList = this.fileList.filter((item:any) => item.taskId !== element.taskId);
+									// message.info(this.t('Generate.everyTimeEffectPoor'));
+								}
+							});
+							if((data.length == 0)){
+								if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
+									message.info(this.t('Generate.effectPoor'));
+								}else{
+								}
+								
+								this.store.dispatch('getCredits')
+								clearInterval(this.generateTime)
+								clearInterval(this.remGenerateTime)
+								this.remGenerate = false
+								this.isGenerate = false
+								this.generateLevel2Type = ''
+							}
+						}
+					}
+				).catch(res=>{
+					clearInterval(this.generateTime)
+					clearInterval(this.remGenerateTime)
+					this.isGenerate = false
+					this.remGenerate = false
+					this.generateLevel2Type = ''
+				});
+			},5000)
+		},
+		removeGenerate(){
+			//取消操作
+			this.isGenerate = false
+			this.remGenerate = false
+			clearInterval(this.generateTime)
+			if(this.generateProceedList){
+				let str = this.generateProceedList.map((obj:any) => obj.taskId).join(',');
+				let type = 'Generate'
+				if(this.generateLevel2Type == 'Logo'){
+					type = 'Logo'
+				}
+				let data = {
+					uniqueId:str,
+					userId:this?.userDetail?.userId,
+					timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+					type: type
+				}
+				
+				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
+					(rv) => {
+						this.generateProceedList.forEach((generateProceedListItem:any)=>{
+							this.fileList = this.fileList.filter((item:any) => generateProceedListItem.taskId!== item.taskId);
+						})
+						this.generateProceedList = []
+					}
+				).catch(res=>{
+				});
+			}
+		},
+		setTextareaShow(){
+			this.isTextarea = !this.isTextarea
+			if(this.isTextarea){
+				document.addEventListener('click',this.setTextareaShow)
+			}else{
+				document.removeEventListener('click',this.setTextareaShow)
+			}
+		},
+		cliSetKeyword(value:any){
+			let str = ''
+			if(this.searchPictureName[this.searchPictureName.length-1] != ',' && this.searchPictureName.length != 0){
+				str = ','
+			}
+			if(this.upload.level1Type == "Moodboard"){
+				if(this.workspace?.allKeywordsByStyle['Printboard'].indexOf(value) == -1){
+					this.styleRecommend.push(value)
+					this.styleRecommend = [...new Set(this.styleRecommend)]
+				}
+			}
+			this.searchPictureName += str + value
+		},
+		ifSeedValue(e:any){
+			if(this.searchPictureSeed == ''){
+				this.searchPictureSeed = 0
+			}
+		},
+		ifMaximumLength(event:any){
+			clearTimeout(this.inputTime)
+			let inputBox = document.getElementsByClassName('generate')[0].getElementsByClassName('input_box')[0]
+			let input = inputBox.getElementsByClassName('search_input')[0]
+			let textarea = event.target as HTMLTextAreaElement;
+			const scrollTop = textarea.scrollTop;
+  
+			// 2. 计算单行高度
+			const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20; // 默认20px
+			
+			// 3. 重置高度为1行
+			textarea.style.height = lineHeight + 'px';
+			
+			// 4. 计算实际需要的高度
+			const newHeight = Math.max(lineHeight, textarea.scrollHeight);
+			
+			// 5. 应用新高度并恢复滚动位置
+			textarea.style.height = newHeight + 'px';
+			textarea.scrollTop = scrollTop;
+			this.inputTime = setTimeout(()=>{
+				// let num1 = ((input as HTMLInputElement).value.match(/ /g) || []).length
+				// let num2 = (input as HTMLInputElement).value.split(' ').length
+				if(this.searchPictureName?.split(/\s+/).length > 250){
+					(this.$refs.inputShowText as any).innerHTML = this.t('Generate.maximumLength')
+					this.inputShow = true
+				}else{
+					this.inputShow = false
+				}
+			},500)
+		},
+		inputFocus(){
+			if(this.isInputFocus) return
+		    this.isInputFocus = true
+			let setDomCli = ()=>{
+				this.isInputFocus = false
+				document.removeEventListener('click',setDomCli)
+			}
+			setTimeout(()=>{
+				document.addEventListener('click',setDomCli)
+			},200)
+		},
+        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:'',
+					}
+					if(this.sketchCatecoryList && this.type_.type2 == 'Sketchboard'){
+						this.sketchCatecoryList.forEach((item:any) => {
+							if(item.name == res.data.level2Type){
+								category.value = item?.value
+								category.name = item?.name
+							}
+						});
+					}
+					file.id = res.data.id;
+					file.imgUrl = res.data.url;
+					file.resData = res.data;
+					file.type_ = "upload";
+					file.id_ = GO.id++;
+					file.categoryValue = category?.value;
+					file.category = category?.name;
+					//判断是否粘贴来的图片
+					let paste = this.sketchboardList.filter((v: any) => v.id === file.id);
+					if(paste.length == 0)this.sketchboardList.push(file);
+					this.sketchboardList = this.sketchboardList.filter((v: any) => v.status === "done");
+					nextTick().then(()=>{
+						if(this.driver__.driver && this.type_.type2 == 'Printboard'){
+							driverObj__.moveNext()
+						}
+					})
+				}else{
+					bor = false
+				}
+                
+            } else if (file.status === "error") {
+					bor = false
+            }
+			if(!bor){
+				let index = -1;
+                let res:any = JSON.parse(file.xhr.response);
+                this.sketchboardList.forEach((ele: any, index1: any) => {
+                    if (file.uid === ele.uid) {
+                        index = index1;
+                    }
+                });
+                if (index > -1) {
+                    this.sketchboardList.splice(index, 1);
+                }
+                // message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
+                message.warning(res.errMsg);
+			}
+        },
+		setSlogan(){
+			let createSlogan:any = this.$refs.createSlogan
+			createSlogan.init()
+		},
+		setSloganData(data:any){
+			this.sketchboardList = data
+		},
+        deleteFile(item: any) {
+			if(this.scene?.value == 'Slogan' && this.type_.type2 == 'Printboard'){
+				let createSlogan:any = this.$refs.createSlogan
+				createSlogan.isDeleteSlogan = true
+			}
+			this.sketchboardList.splice(item, 1);
+			// if((this.sketchboardList.length<2 && this.moodboarList.length == 0) || this.sketchboardList.length == 0){
+			// 	this.printModel = {
+			// 		num:'',
+			// 		optype:false,
+			// 		value:'Painting Style',
+			// 		label:this.t('Generate.Model'+1)
+			// 	}
+			// }
+        },
+		likeFile(item:any,str:string,index:number){
+			if(str == 'like'){
+				let level2Type = ''
+				if(this.upload.level1Type == "Sketchboard"){
+					level2Type = item.categoryValue
+				}else if(this.upload.level1Type == "Printboard"){
+					level2Type = this.scene?.value
+				}
+				let data = {
+					generateDetailId:item.id,
+					level1Type:this.type_.type2,
+					level2Type: level2Type,
+					gender:this.workspace.sex,
+					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+				}
+				Https.axiosPost(Https.httpUrls.generateLike, data).then(
+					(rv) => {
+						item.like = true
+						
+					}
+				).catch(res=>{
+				});
+				this.fileList[index].state = ''
+				this.generageAdd(item)
+			}else{
+				this.fileList[index].state = 'delete'
+				this.generageAdd(item)
+				let data = {
+					generateDetailId:item.id,
+					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+				}
+				Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
+					(rv) => {
+						item.like = false
+					}
+				).catch(res=>{
+				});
+			}
+		},
+		deleteGenerate(index:any){
+			// if(this.isGenerate)return
+			let num = this.fileList.length
+			let _this = this
+            Modal.confirm({
+                title: this.t('LibraryPage.jsContent1'),
+                icon: createVNode(ExclamationCircleOutlined),
+                okText: 'Yes',
+                cancelText: 'No',
+				mask:false,
+                centered:true,
+                onOk() {
+					let a = _this.fileList.length - num
+					_this.fileList.splice(index-a,1)
+                }
+            });
+		},
+		scaleImage(index:any){
+			let scaleImage:any = this.$refs.scaleImage
+			scaleImage.init(this.fileList,index)
+		},
+        closeModal() {
+            // this.myMaterialModalShow = false
+            this.searchPictureName = "";
+        },
+		onPaste(e:any){
+			if(this.sketchboardList.length != 0)return
+			if(e.clipboardData.files[0] && !this.isTextarea && this.upload.level1Type !== 'Moodboard' && this.scene?.value != 'Slogan' && this.scene?.value != 'Logo'){
+				let param = new FormData(); 
+				param.append('inPin','0')
+				param.append('gender',this.workspace.sex)
+				param.append('ageGroup',this.workspace.ageGroup)
+				param.append('level1Type',this.upload.level1Type)
+				param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
+				param.append('file',e.clipboardData.files[0]);
+				let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+				Https.axiosPost(Https.httpUrls.elementUpload, param, config).then((v)=>{
+					let value = {data:v,errCode : 0}
+					v.status = 'done'
+					let data = {
+						file:{
+							status: 'done',
+							xhr:{
+								response:JSON.stringify(value)
+							}
+						}
+					}
+					this.fileUploadChange(data)
+					
+				})
+			}
+			
+		},
+		handleOpenLibrarySelect(){
+			let selectImages:any = this.$refs.selectImages
+			selectImages.init()
+		},
+		handleImageSelect(data:any){
+			const	file={
+				status: 'done',
+				...data,
+				errCode:0,
+				imgUrl:data.url,
+				xhr:{
+					response:JSON.stringify({...data,errCode:0,imgUrl:data.url,status:'done'})
+				}
+			}
+			this.sketchboardList = [file]
+		}
+    },
+});
+</script>
+<style lang="less" scoped>
+.generate {
+	flex: 1;
+    // height: 30rem;
+    // overflow-x: hidden;
+	overflow-x: hidden;
+	display: flex;
+    flex-direction: column;
+	position: relative;
+	// padding-top: calc(2.5rem*1.2);
+	.input_border{//输入框
+		padding-top: 1rem;
+		
+	}
+    
+	.mark_loading{
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		z-index: 99;
+	}
+    .generate_checkbox,
+    .generage_input {
+        display: flex;
+        align-items: center;
+        position: sticky;
+        top: 0;
+        padding-top: calc(2rem*1.2);
+        z-index: 7;
+    }
+    .generate_checkbox {
+    }
+    .generage_input {
+    }
+    .generage_img {
+        display: flex;
+		position: relative;
+        flex-wrap: wrap;
+		align-content: flex-start;
+		flex: 1;
+		overflow-y: auto;
+		&.generage_img::-webkit-scrollbar {
+        display: none;
+    }
+        .generage_img_item {
+            cursor: pointer;
+            margin: 1rem;
+			width: calc(25% - 2rem);
+			aspect-ratio: 1 / 1;
+			position: relative;
+            &.active {
+				opacity: 0.5;
+				// border: 2px solid;
+				border-radius: calc(1rem*1.2);
+				img {
+					transform: scale(0.9);
+				}
+				.delete_like_file_block{
+					pointer-events:none;
+				}
+				.operate_file_block{
+					pointer-events:none;
+				}
+			}
+			.loading{
+				width: 100%;
+				height: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+            img {
+                // width: calc(10rem*1.2);
+                // height: calc(10rem*1.2);
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+            }
+			&:hover .delete_like_file_block{
+				// display: block;
+				opacity: 1;
+			}
+			
+        }
+        .upload_item {
+            .upload_file_item {
+				// &.active {
+				// 	opacity: 0.5;
+				// 	// border: 2px solid;
+				// 	border-radius: 1rem;
+				// 	transform: scale(0.9);
+				// 	.delete_file_block{
+				// 		pointer-events:none;
+				// 	}
+				// 	.operate_file_block{
+				// 		pointer-events:none;
+				// 	}
+				// 	img {
+				// 	}
+				// }
+                .upload_file_item_content {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    height: 100%;
+                    position: relative;
+                    cursor: pointer;
+                    .upload_img {
+                        display: block;
+                        max-height: 100%;
+                        max-width: 100%;
+                    }
+
+                    .delete_file_block {
+                        display: none;
+                        width: calc(3.2rem*1.2);
+                        height: calc(3.2rem*1.2);
+                        background: rgba(0, 0, 0, 0.6);
+                        border-radius: calc(0.4rem*1.2);
+                        position: absolute;
+                        top: calc(0.9rem*1.2);
+                        right: calc(0.9rem*1.2);
+                        text-align: center;
+                        line-height: calc(3.2rem*1.2);
+                        left: auto;
+                        .icon-shanchu {
+                            font-size: calc(1.6rem*1.2);
+                            color: #fff;
+                        }
+                    }
+
+                    &:hover .delete_file_block {
+                        display: block;
+                    }
+                }
+            }
+        }
+    }
+
+	}
+
+	.search_upImg	:deep(.ant-upload.ant-upload-select-picture-card){
+		background-color: transparent;
+		border: none;
+		width: inherit;
+		height: inherit;
+		margin: 0;
+	}
+
+	.drop-container{
+		display: flex;
+		align-items: center;
+		column-gap: 1rem;
+		padding: 0.25rem 0.3rem 0.25rem;
+		
+	}
+</style>
diff --git a/src/component/HomePage/Generate.vue b/src/component/HomePage/Generate.vue
index 04cffff0..f3e15fcb 100644
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -36,32 +36,38 @@
 						<template #overlay>
 							<a-menu>
 								<a-menu-item>
-										<a-upload
-											class="search_upImg"
-											:capture="null"
-											:action="uploadUrl + '/api/element/upload'"
-											list-type="picture-card"
-											:data="{
-												...upload,
-											}"
-											:maxCount='1'
-											:headers="{ Authorization: token }"
-											v-model:file-list="sketchboardList"
-											:before-upload="beforeUpload"
-											accept=".jpg,.png,.jpeg,.bmp"
-											@change="(file) => fileUploadChange(file)"
-										>
-										<div class="drop-container">
-										<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'"></i>
-											<div>{{ $t('PrintboardUpload.Upload') }}</div>
-										</div>
-										</a-upload>
+								<a-upload
+									class="search_upImg"
+									:capture="null"
+									:action="uploadUrl + '/api/element/upload'"
+									list-type="picture-card"
+									:data="{
+									...upload
+									}"
+									:maxCount="1"
+									:headers="{ Authorization: token }"
+									v-model:file-list="sketchboardList"
+									:before-upload="beforeUpload"
+									accept=".jpg,.png,.jpeg,.bmp"
+									@change="file => fileUploadChange(file)"
+								>
+									<div class="drop-container">
+									<!-- <i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'"></i> -->
+									<SvgIcon
+										name="Folder"
+										class="upload-icon icon"
+										style="font-size: 2rem"
+									/>
+									<div style="font-size: 1.2rem;">{{ $t('PrintboardUpload.Upload') }}</div>
+									</div>
+								</a-upload>
 								</a-menu-item>
 								<a-menu-item>
-									<div class="drop-container" @click.stop="handleOpenLibrarySelect">
-										<i class="fi fi-rr-followcollection"></i>
-										<div style="font-size: 1.4rem;">{{ $t('PrintboardUpload.Library') }}</div>
-									</div>
+								<div class="drop-container" @click.stop="handleOpenLibrarySelect">
+									<i class="fi fi-rr-followcollection library-icon icon"></i>
+
+									<div style="font-size: 1.2rem;">{{ $t('PrintboardUpload.Library') }}</div>
+								</div>
 								</a-menu-item>
 							</a-menu>
 						</template>
@@ -75,170 +81,271 @@
 						@click="inputFocus()"
 						v-model="searchPictureName"
 						@paste="onPaste"
+          ></textarea>
 
-					></textarea>
-					
-					<i v-show="scene?.value == 'Slogan'" :title="$t('Generate.sloganTitle')" @click.stop="setSlogan" class="fi fi-rr-poll-h"></i>
-					<!-- <i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
+          <i
+            v-show="scene?.value == 'Slogan'"
+            :title="$t('Generate.sloganTitle')"
+            @click.stop="setSlogan"
+            class="fi fi-rr-poll-h"
+          ></i>
+          <!-- <i v-show="!isTextarea" class="fi fi-br-expand" @click.stop="setTextareaShow"></i>
 					<i v-show="isTextarea" class="fi fi-bs-compress" @click.stop="setTextareaShow"></i> -->
-				</div>
-				<div class="input_box_btnBox sketch" v-else >
-					<div class="upload_item"  v-show="sketchboardList.length > 0">
-						<div
-							class="upload_file_item"
-							v-for="(file, index) in sketchboardList"
-							:key="file"
-							:class="[driver__.driver?'showEvents':'']"
-						>
-							<div
-								class="upload_file_item_content"
-								v-show="file?.status === 'uploading'"
-							>
-								<a-spin size="small" :indicator="indicator" tip="Uploading..." />
-							</div>
-							<div
-								class="upload_file_item_content"
-								v-show="file?.status === 'done' || file?.base64"
-							>
-								<img :src="file?.imgUrl" class="upload_img" />
-								<div class="delete_like_file_block"  :class="[driver__.driver?'hideEvents':'']">
-									<i class="icon iconfont icon-shanchu operate_icon" @click.stop="deleteFile(index)"></i>
-								</div>
-							</div>
-						</div>
-					</div>
-					<i class="fi fi-br-upload" style="margin-left: 2rem;"  v-show="sketchboardList.length == 0" :title="$t('Generate.uploadproduct')">
-						<a-upload
-							class="search_upImg"
-							:capture="null"
-							:action="uploadUrl + '/api/element/upload'"
-							list-type="picture-card"
-							:data="{
-								...upload,
-							}"
-							:maxCount='1'
-							:headers="{ Authorization: token }"
-							v-model:file-list="sketchboardList"
-							:before-upload="beforeUpload"
-							accept=".jpg,.png,.jpeg,.bmp"
-							@change="(file) => fileUploadChange(file)"
-						>
-						</a-upload>
-					</i>
-					<!-- <div :title="$t('Generate.style')">
+        </div>
+        <div class="input_box_btnBox sketch" v-else>
+          <div class="upload_item" v-show="sketchboardList.length > 0">
+            <div
+              class="upload_file_item"
+              v-for="(file, index) in sketchboardList"
+              :key="file"
+              :class="[driver__.driver ? 'showEvents' : '']"
+            >
+              <div class="upload_file_item_content" v-show="file?.status === 'uploading'">
+                <a-spin size="small" :indicator="indicator" tip="Uploading..." />
+              </div>
+              <div
+                class="upload_file_item_content"
+                v-show="file?.status === 'done' || file?.base64"
+              >
+                <img :src="file?.imgUrl" class="upload_img" />
+                <div
+                  class="delete_like_file_block"
+                  :class="[driver__.driver ? 'hideEvents' : '']"
+                >
+                  <i
+                    class="icon iconfont icon-shanchu operate_icon"
+                    @click.stop="deleteFile(index)"
+                  ></i>
+                </div>
+              </div>
+            </div>
+          </div>
+          <i
+            class="fi fi-br-upload"
+            style="margin-left: 2rem"
+            v-show="sketchboardList.length == 0"
+            :title="$t('Generate.uploadproduct')"
+          >
+            <a-upload
+              class="search_upImg"
+              :capture="null"
+              :action="uploadUrl + '/api/element/upload'"
+              list-type="picture-card"
+              :data="{
+                ...upload
+              }"
+              :maxCount="1"
+              :headers="{ Authorization: token }"
+              v-model:file-list="sketchboardList"
+              :before-upload="beforeUpload"
+              accept=".jpg,.png,.jpeg,.bmp"
+              @change="file => fileUploadChange(file)"
+            ></a-upload>
+          </i>
+          <!-- <div :title="$t('Generate.style')">
 						<generalMenu :dataList="printModelList" :isCanvas="type_.type2 == 'Sketchboard'" @setprintModel="setprintModel" :item="printModel"></generalMenu>
 					</div> -->
-				</div>
-				<textarea 
-					v-show="isTextarea"
-					class="search_textarea "  
-					@input="ifMaximumLength" 
-					:maxlength='inputShow?0:9999' 
-					@keydown.enter="getgenerate()"
-					@click.stop=""
-					v-model="searchPictureName"
-				></textarea>
-				<div class="generage_btn_box">
-					<div class="generage_btn started_btn"  v-show="!isGenerate">
-						<i class="fi fi-bs-magic-wand" style="background-color: #000; font-size: 2.3rem; flex: 1;margin: 0;" @click="getgenerate()"></i>
-						<div class="icon iconfont icon-xiala" 
-							v-show="(type_.type2 == 'Sketchboard') || 
-							(type_.type2 == 'Printboard' && scene.value == 'Pattern') || type_.type2 == 'Moodboard'"  :class="{active:speedState}" @click.stop="openSpeed"></div>
-						<div class="content" v-show="speedState && scene?.value != 'extract'">
-							<div v-for="item in speedList" 
-								v-show="(type_.type2 == 'Moodboard') || 
-								(type_.type2 == 'Sketchboard' && item?.value != 'high') || 
-								(type_.type2 == 'Printboard')" 
-								:key="item.value" :class="{active:item.value == speedData.value}" @click="setSpeed(item)" :title="item.title">{{ item.label }}</div>
-						</div>
-						<div class="content" v-show="speedState && scene?.value == 'extract'">
-							<div v-for="item in extractList" :class="{active:item.value == speedData.value}" :key="item.value" @click.stop="setSpeed(item)" :title="item.title">{{ item.label }}</div>
-						</div>
-					</div>
-					<div class="generage_btn started_btn" v-show="isGenerate && !remGenerate">
-						<i class="fi fi-br-loading" ></i>
-					</div>
-					<div class="generage_btn started_btn" v-show="remGenerate" @click.stop="removeGenerate">
-						{{$t('Generate.Close')}}
-					</div>
-					
-				</div>
-				<!-- <div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click="getgenerate">
+        </div>
+        <textarea
+          v-show="isTextarea"
+          class="search_textarea"
+          @input="ifMaximumLength"
+          :maxlength="inputShow ? 0 : 9999"
+          @keydown.enter="getgenerate()"
+          @click.stop=""
+          v-model="searchPictureName"
+        ></textarea>
+        <div class="generage_btn_box">
+          <div class="generage_btn started_btn" v-show="!isGenerate">
+            <i
+              class="fi fi-bs-magic-wand"
+              style="background-color: #000; font-size: 2.3rem; flex: 1; margin: 0"
+              @click="getgenerate()"
+            ></i>
+            <div
+              class="icon iconfont icon-xiala"
+              v-show="
+                type_.type2 == 'Sketchboard' ||
+                (type_.type2 == 'Printboard' && scene.value == 'Pattern') ||
+                type_.type2 == 'Moodboard'
+              "
+              :class="{ active: speedState }"
+              @click.stop="openSpeed"
+            ></div>
+            <div class="content" v-show="speedState && scene?.value != 'extract'">
+              <div
+                v-for="item in speedList"
+                v-show="
+                  type_.type2 == 'Moodboard' ||
+                  (type_.type2 == 'Sketchboard' && item?.value != 'high') ||
+                  type_.type2 == 'Printboard'
+                "
+                :key="item.value"
+                :class="{ active: item.value == speedData.value }"
+                @click="setSpeed(item)"
+                :title="item.title"
+              >
+                {{ item.label }}
+              </div>
+            </div>
+            <div class="content" v-show="speedState && scene?.value == 'extract'">
+              <div
+                v-for="item in extractList"
+                :class="{ active: item.value == speedData.value }"
+                :key="item.value"
+                @click.stop="setSpeed(item)"
+                :title="item.title"
+              >
+                {{ item.label }}
+              </div>
+            </div>
+          </div>
+          <div class="generage_btn started_btn" v-show="isGenerate && !remGenerate">
+            <i class="fi fi-br-loading"></i>
+          </div>
+          <div
+            class="generage_btn started_btn"
+            v-show="remGenerate"
+            @click.stop="removeGenerate"
+          >
+            {{ $t('Generate.Close') }}
+          </div>
+        </div>
+        <!-- <div v-show="isGenerate && !remGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}" @click="getgenerate">
 					<i class="fi fi-br-loading"></i>
 				</div>
 				<div v-show="remGenerate" @click="removeGenerate" class="generage_btn started_btn" :class="{Guide_1_2_8:type_.type2 == 'Printboard'}">
 					{{$t('Generate.Close')}}
 				</div> -->
-				<span class="inputShowText" ref="inputShowText"></span>
-			</div>
-            <div class="search_keyword" v-if="workspace?.allKeywordsByStyle" v-show="isInputFocus" @click.stop="">
-				<div class="search_keyword_center" >
-					<div class="search_keyword_center_left">
-						<div v-if="type_.type2 == 'Printboard'" v-for="item in styleRecommend" @click.stop="cliSetKeyword(item)" class="search_keyword_center_item"> {{item}} </div>
-						<div v-for="item in workspace?.allKeywordsByStyle?.[type_.type2]" @click.stop="cliSetKeyword(item)" class="search_keyword_center_item"> {{item}} </div>
-					</div>
-				</div>
-			</div>
-        </div>
-        <div class="generage_img" :style="[isGenerate?'overflow:hidden':'']">
+        <span class="inputShowText" ref="inputShowText"></span>
+      </div>
+      <div
+        class="search_keyword"
+        v-if="workspace?.allKeywordsByStyle"
+        v-show="isInputFocus"
+        @click.stop=""
+      >
+        <div class="search_keyword_center">
+          <div class="search_keyword_center_left">
             <div
-                class="generage_img_item"
-                v-for="(item, index) in fileList"
-                :key="item.imgUrl"
-                @click="generageAdd(item)"
-                :class="[item.status != 'Success'?'hideEvents':'',item?.checked?'active':'']"
+              v-if="type_.type2 == 'Printboard'"
+              v-for="item in styleRecommend"
+              @click.stop="cliSetKeyword(item)"
+              class="search_keyword_center_item"
             >
-				<img v-if="item?.imgUrl" v-lazy="item.imgUrl" @click.stop="generageAdd(item)">
-				<div v-else class="loading">
-					<a-spin size="large" ></a-spin>
-				</div>
-				<sketchCategory v-show="item?.imgUrl" v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'" :isSpread="type_.type2 == 'Printboard'" :disignTypeList="sketchCatecoryList" :generateList="fileList" :item="item" :driver__="driver__.driver" :driverClass="{'class1': type_.type2 == 'Sketchboard'?'Guide_1_13':'','class2':type_.type2 == 'Sketchboard'?'Guide_1_13_1':''}"></sketchCategory>
-				<div
-					v-show="item?.imgUrl"
-					class="delete_like_file_block left1"
-				>
-					<i v-if="!item.like" class="fi fi-rr-heart" @click.stop="likeFile(item,'like',index)"></i>
-					<i v-else class="fi fi-sr-heart" :adminLike="!!item.like" @click.stop="likeFile(item,'noLike',index)"></i>
-				</div>
-				<div v-show="item?.imgUrl" class="delete_like_file_block left">
-					<i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
-				</div>
-				<div v-show="item?.imgUrl" class="delete_like_file_block" :title="t('LibraryPage.Delete')" @click.stop="deleteGenerate(index)">
-					<span class="icon iconfont icon-shanchu operate_icon"></span>
-				</div>
+              {{ item }}
             </div>
-			<div class="mark_loading" v-show="loadingShow">
-				<a-spin size="large" />
-			</div>
+            <div
+              v-for="item in workspace?.allKeywordsByStyle?.[type_.type2]"
+              @click.stop="cliSetKeyword(item)"
+              class="search_keyword_center_item"
+            >
+              {{ item }}
+            </div>
+          </div>
         </div>
-		<scaleImage ref="scaleImage" :imgType="type_.type2" :sex="workspace.sex"></scaleImage>
-		<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
-			<SelectImages
-				radio
-				full-data
-				ref="selectImages"
-				@select="handleImageSelect"
-				:api="Https.httpUrls.queryLibraryPage"
-				isLibrary/>
+      </div>
     </div>
+    <div class="generage_img" :style="[isGenerate ? 'overflow:hidden' : '']">
+      <div
+        class="generage_img_item"
+        v-for="(item, index) in fileList"
+        :key="item.imgUrl"
+        @click="generageAdd(item)"
+        :class="[
+          item.status != 'Success' ? 'hideEvents' : '',
+          item?.checked ? 'active' : ''
+        ]"
+      >
+        <img v-if="item?.imgUrl" v-lazy="item.imgUrl" @click.stop="generageAdd(item)" />
+        <div v-else class="loading">
+          <a-spin size="large"></a-spin>
+        </div>
+        <sketchCategory
+          v-show="item?.imgUrl"
+          v-if="type_.type2 == 'Sketchboard' || type_.type2 == 'Printboard'"
+          :isSpread="type_.type2 == 'Printboard'"
+          :disignTypeList="sketchCatecoryList"
+          :generateList="fileList"
+          :item="item"
+          :driver__="driver__.driver"
+          :driverClass="{
+            class1: type_.type2 == 'Sketchboard' ? 'Guide_1_13' : '',
+            class2: type_.type2 == 'Sketchboard' ? 'Guide_1_13_1' : ''
+          }"
+        ></sketchCategory>
+        <div v-show="item?.imgUrl" class="delete_like_file_block left1">
+          <i
+            v-if="!item.like"
+            class="fi fi-rr-heart"
+            @click.stop="likeFile(item, 'like', index)"
+          ></i>
+          <i
+            v-else
+            class="fi fi-sr-heart"
+            :adminLike="!!item.like"
+            @click.stop="likeFile(item, 'noLike', index)"
+          ></i>
+        </div>
+        <div v-show="item?.imgUrl" class="delete_like_file_block left">
+          <i class="fi fi-bs-expand-arrows-alt" @click.stop="scaleImage(index)"></i>
+        </div>
+        <div
+          v-show="item?.imgUrl"
+          class="delete_like_file_block"
+          :title="t('LibraryPage.Delete')"
+          @click.stop="deleteGenerate(index)"
+        >
+          <span class="icon iconfont icon-shanchu operate_icon"></span>
+        </div>
+      </div>
+      <div class="mark_loading" v-show="loadingShow">
+        <a-spin size="large" />
+      </div>
+    </div>
+    <scaleImage ref="scaleImage" :imgType="type_.type2" :sex="workspace.sex"></scaleImage>
+    <createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
+    <SelectImages
+      radio
+      full-data
+      ref="selectImages"
+      @select="handleImageSelect"
+      :api="Https.httpUrls.queryLibraryPage"
+      isLibrary
+    />
+  </div>
 </template>
 <script lang="ts">
-import { LoadingOutlined } from "@ant-design/icons-vue";
-import { message, Upload, Modal } from "ant-design-vue";
-import { defineComponent, computed, reactive, createVNode, h, ref,watch, nextTick, inject, toRefs, getCurrentInstance, onMounted, onUnmounted, } from "vue";
-import { Https } from "@/tool/https";
-import { useStore } from "vuex";
-import GO from "@/tool/GO";
-import { getCookie } from "@/tool/cookie";
-import { getUploadUrl } from "@/tool/util";
+import { LoadingOutlined } from '@ant-design/icons-vue'
+import { message, Upload, Modal } from 'ant-design-vue'
+import {
+  defineComponent,
+  computed,
+  reactive,
+  createVNode,
+  h,
+  ref,
+  watch,
+  nextTick,
+  inject,
+  toRefs,
+  getCurrentInstance,
+  onMounted,
+  onUnmounted
+} from 'vue'
+import { Https } from '@/tool/https'
+import { useStore } from 'vuex'
+import GO from '@/tool/GO'
+import { getCookie } from '@/tool/cookie'
+import { getUploadUrl } from '@/tool/util'
 // import { forEach } from "jszip";
-import scaleImage from "@/component/HomePage/scaleImage.vue";
-import generalMenu from "@/component/HomePage/generalMenu.vue";
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-import { openGuide,driverObj__,driverIndex__ } from "@/tool/guide";
-import createSlogan from "@/component/HomePage/createSlogan.vue";
-import { useI18n } from "vue-i18n";
-import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import scaleImage from '@/component/HomePage/scaleImage.vue'
+import generalMenu from '@/component/HomePage/generalMenu.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { openGuide, driverObj__, driverIndex__ } from '@/tool/guide'
+import createSlogan from '@/component/HomePage/createSlogan.vue'
+import { useI18n } from 'vue-i18n'
+import sketchCategory from '@/component/HomePage/sketchCategory.vue'
 import SelectImages from '@/component/common/SelectImages.vue'
 
 export default defineComponent({
@@ -561,708 +668,765 @@ export default defineComponent({
                 }
                 return lable;
             };
-        },
-    },
-    methods: {
-        generageAdd(data: any) {
-			if(!data?.imgUrl)return
-            data.type_ = this.type_;
-			data.type_.type1 = data.designType?data.designType:this.type_.type1
-			data.resData = JSON.parse(JSON.stringify(data))
-			let maxImg = 8
-			if(this.type_.type2 == 'Sketchboard'){
-				maxImg = 20
-			}
-			let parent:any = this.$parent
-			if(parent.isUseGenerate){
-				// parent.useGenerate.designType = 'collection'
-				this.$emit('setLibrary',data)
-				return
-			}
-			data.jsContent1 = this.t('uploadFile.jsContent1',{maxImg:maxImg})
-            this.store.commit("addGenerateMaterialFils", data);
-			// console.log(this.fileList);
-        },
-        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('Generate.jsContent1'));
-            }
-            const isLt2M = file.size / 1024 / 1024 < 5;
-            if (!isLt2M) {
-                message.info(this.t('Generate.jsContent2'));
-            }
-            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
-        },
-		setprintModel(value:any){
-			this.printModel = value
-		},
-		imageToSketch(){
-			if((!this.printModel?.id && !this.printModel?.value) || !this.sketchboardList?.[0]?.id)return message.info(this.t('Generate.jsContent4'));
-			this.loadingShow = true
-			let data = {
-				"elementId": this.sketchboardList[0].id,
-				gender:this.workspace.sex,
-				"style": this.printModel.value,
-				"styleImageId": this.printModel?.id?this.printModel?.id:''
-			}
-			Https.axiosPost(Https.httpUrls.imageToSketch, data).then((rv)=>{
-				if(rv){
-					this.sketchCatecoryList.forEach((itemCategory:any) => {
-						if(itemCategory.value == rv.category){
-							rv.categoryValue = itemCategory?.value
-							rv.category = itemCategory?.name
-						}
-					});
-					this.fileList.push({
-						imgUrl:rv.url,
-						categoryValue:rv.categoryValue,
-						category:rv.category,
-						id:rv.id,
-						status:'Success',
-					})
-					this.loadingShow = false
-				}
-			}).catch(()=>{
-				this.loadingShow = false
-			})
-		},
-		getgenerate(){
-			// if(this.scene?.value == 'extract'){
-			// 	this.imageToSketch()
-			// 	return
-			// }
-			this.isTextarea = false
-			this.isInputFocus = false
-			if(this.isGenerate)return
-			clearInterval(this.remGenerateTime)
-			let httpsUrl = Https.httpUrls.generatePrepare
-			let data
-			if(this.scene?.value == 'extract'){
-				httpsUrl = Https.httpUrls.imageToSketch
-				if((!this.printModel?.id && !this.printModel?.value) || !this.sketchboardList?.[0]?.id)return message.info(this.t('Generate.jsContent4'));
-				data = {
-					"elementId": this.sketchboardList[0].id,
-					gender:this.workspace.sex,
-					"style": this.printModel.value,
-					"styleImageId": this.printModel?.id?this.printModel?.id:'',
-					modelName:this.speedData.value,//为1就是Print
-				}
-			}else{
-				if(this.searchPictureName){
-					let arr = this.searchPictureName.split(/\s+/).length
-					if(arr > 250){
-						message.info(
-						this.t('Generate.jsContent4')
-						);
-						return
-					}
-				}else{
-					if(this.sketchboardList?.[0]?.imgUrl){
-
-					}else{
-						message.info(
-							this.t('Generate.jsContent5')
-						);
-						return
-					}
-				}
-				let level2Type = ''
-				let collectionElementId = ''
-				let base64 = ''
-				if(this.sketchboardList?.[0]){
-					collectionElementId = this.sketchboardList[0].id
-					if(this.sketchboardList[0].base64){
-						base64 = this.sketchboardList[0].imgUrl
-					}
-				}
-				let sloganText = ''
-				sloganText = this.searchPictureName
-				if(this.upload.level1Type == "Sketchboard"){
-					level2Type = this.sketchboardList?.[0]?.categoryValue?this.sketchboardList[0].categoryValue:''
-					if(this.workspace.styleName){
-						sloganText = `${this.workspace.styleName},${sloganText}`
-					}
-				}else if(this.upload.level1Type == "Printboard"){
-					level2Type = this.scene?.value
-					if(level2Type == 'Slogan' && this.searchPictureName == ''){
-						sloganText = this.isSloganHint
-					}else if(level2Type == 'Pattern'){
-						sloganText = `${this.printModel.value},${sloganText}`
-					}
-					if(!base64 && level2Type == 'Slogan'){
-						message.info(this.t('Generate.jsContent10'));
-						return
-					}
-				}
-				data = {
-					generateType:'text',
-					designType:'collection',
-					collectionElementId:collectionElementId,
-					level1Type:this.upload.level1Type,
-					level2Type:level2Type,
-					text:sloganText,
-					seed:this.searchPictureSeed,
-					userId:this?.userDetail?.userId,
-					timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-					modelName:this.speedData.value,//为1就是Print
-					isTestUser:this.driver__.driver?false:this.isTest,
-					gender:this.workspace.sex,
-					sloganBase64:base64,
-					ageGroup:this.workspace.ageGroup
-				}
-				this.generateLevel2Type = data.level2Type
-			}
-			
-			
-			this.isGenerate = true
-			// this.remGenerateTime = setTimeout(()=>{
-			// },10000)
-			Https.axiosPost(httpsUrl, data).then(
-                (rv) => {
-					if(this.scene?.value == 'extract'){
-						rv = {
-							uniqueId:[rv]
-						}
-					}
-					let rvData = rv.uniqueId.map((item:any)=>{
-						return{taskId:item,status:''}
-					})
-					this.remGenerate = true//出现取消按钮
-					this.fileList.unshift(...rvData)
-					this.setGenerate(rv.uniqueId)
-                }
-            ).catch(res=>{
-				this.generateLevel2Type = ''
-				this.isGenerate = false
-				clearInterval(this.remGenerateTime)
-				this.remGenerate = false
-
-				if(res.errCode === 2){
-					let this_ = this
-					Modal.confirm({
-						title: res.errMsg,
-						icon: createVNode(ExclamationCircleOutlined),
-						okText: 'Yes',
-						cancelText: 'No',
-						mask:false,
-						zIndex:99999,
-						centered:true,
-						onOk() {
-							this_.store.commit("setUpgradePlan", true);
-						},
-						onCancel(){
-							
-						}
-					});
-				}
-            });
-		},
-		setGenerate(dataList:any){
-			let data = dataList
-			let dataNum = dataList.length
-			let state = true
-			this.generateTime = setInterval(()=>{
-				if(!this.isGenerate)return
-				if(!state)return
-				state = false
-				Https.axiosPost(Https.httpUrls.generateResult, data).then(
-					(rv) => {
-						state = true
-						if(this.isGenerate){//防止取消后有正在执行的获取状态
-							this.generateProceedList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
-							rv.forEach((element:any) => {
-								if(element.status == 'Success'){
-									element.imgUrl = element.url
-									element.id_ = GO.id++
-									let index = this.fileList.findIndex((item:any)=>item.taskId == element.taskId)
-									this.fileList[index] = element
-									// this.fileList.unshift(element)
-									data = data.filter((item:any) => item !== element.taskId);
-									if(this.type_.type2 == 'Sketchboard'){
-										this.sketchCatecoryList.forEach((itemCategory:any) => {
-											if(itemCategory.value == element.category){
-												element.categoryValue = itemCategory?.value
-												element.category = itemCategory?.name
-											}
-										});
-									}else{
-										element.categoryValue = this.scene?.value
-										element.category = this.scene?.name
-									}
-								}else if(element.status == 'Fail' || element.status == 'Invalid'){
-									data = data.filter((item:any) => item !== element.taskId);
-									this.fileList = this.fileList.filter((item:any) => item.taskId !== element.taskId);
-									// message.info(this.t('Generate.everyTimeEffectPoor'));
-								}
-							});
-							if((data.length == 0)){
-								if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
-									message.info(this.t('Generate.effectPoor'));
-								}else{
-								}
-								
-								this.store.dispatch('getCredits')
-								clearInterval(this.generateTime)
-								clearInterval(this.remGenerateTime)
-								this.remGenerate = false
-								this.isGenerate = false
-								this.generateLevel2Type = ''
-							}
-						}
-					}
-				).catch(res=>{
-					clearInterval(this.generateTime)
-					clearInterval(this.remGenerateTime)
-					this.isGenerate = false
-					this.remGenerate = false
-					this.generateLevel2Type = ''
-				});
-			},5000)
-		},
-		removeGenerate(){
-			//取消操作
-			this.isGenerate = false
-			this.remGenerate = false
-			clearInterval(this.generateTime)
-			if(this.generateProceedList){
-				let str = this.generateProceedList.map((obj:any) => obj.taskId).join(',');
-				let type = 'Generate'
-				if(this.generateLevel2Type == 'Logo'){
-					type = 'Logo'
-				}
-				let data = {
-					uniqueId:str,
-					userId:this?.userDetail?.userId,
-					timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
-					type: type
-				}
-				
-				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:data}).then(
-					(rv) => {
-						this.generateProceedList.forEach((generateProceedListItem:any)=>{
-							this.fileList = this.fileList.filter((item:any) => generateProceedListItem.taskId!== item.taskId);
-						})
-						this.generateProceedList = []
-					}
-				).catch(res=>{
-				});
-			}
-		},
-		setTextareaShow(){
-			this.isTextarea = !this.isTextarea
-			if(this.isTextarea){
-				document.addEventListener('click',this.setTextareaShow)
-			}else{
-				document.removeEventListener('click',this.setTextareaShow)
-			}
-		},
-		cliSetKeyword(value:any){
-			let str = ''
-			if(this.searchPictureName[this.searchPictureName.length-1] != ',' && this.searchPictureName.length != 0){
-				str = ','
-			}
-			if(this.upload.level1Type == "Moodboard"){
-				if(this.workspace?.allKeywordsByStyle['Printboard'].indexOf(value) == -1){
-					this.styleRecommend.push(value)
-					this.styleRecommend = [...new Set(this.styleRecommend)]
-				}
-			}
-			this.searchPictureName += str + value
-		},
-		ifSeedValue(e:any){
-			if(this.searchPictureSeed == ''){
-				this.searchPictureSeed = 0
-			}
-		},
-		ifMaximumLength(event:any){
-			clearTimeout(this.inputTime)
-			let inputBox = document.getElementsByClassName('generate')[0].getElementsByClassName('input_box')[0]
-			let input = inputBox.getElementsByClassName('search_input')[0]
-			let textarea = event.target as HTMLTextAreaElement;
-			const scrollTop = textarea.scrollTop;
-  
-			// 2. 计算单行高度
-			const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20; // 默认20px
-			
-			// 3. 重置高度为1行
-			textarea.style.height = lineHeight + 'px';
-			
-			// 4. 计算实际需要的高度
-			const newHeight = Math.max(lineHeight, textarea.scrollHeight);
-			
-			// 5. 应用新高度并恢复滚动位置
-			textarea.style.height = newHeight + 'px';
-			textarea.scrollTop = scrollTop;
-			this.inputTime = setTimeout(()=>{
-				// let num1 = ((input as HTMLInputElement).value.match(/ /g) || []).length
-				// let num2 = (input as HTMLInputElement).value.split(' ').length
-				if(this.searchPictureName?.split(/\s+/).length > 250){
-					(this.$refs.inputShowText as any).innerHTML = this.t('Generate.maximumLength')
-					this.inputShow = true
-				}else{
-					this.inputShow = false
-				}
-			},500)
-		},
-		inputFocus(){
-			if(this.isInputFocus) return
-		    this.isInputFocus = true
-			let setDomCli = ()=>{
-				this.isInputFocus = false
-				document.removeEventListener('click',setDomCli)
-			}
-			setTimeout(()=>{
-				document.addEventListener('click',setDomCli)
-			},200)
-		},
-        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:'',
-					}
-					if(this.sketchCatecoryList && this.type_.type2 == 'Sketchboard'){
-						this.sketchCatecoryList.forEach((item:any) => {
-							if(item.name == res.data.level2Type){
-								category.value = item?.value
-								category.name = item?.name
-							}
-						});
-					}
-					file.id = res.data.id;
-					file.imgUrl = res.data.url;
-					file.resData = res.data;
-					file.type_ = "upload";
-					file.id_ = GO.id++;
-					file.categoryValue = category?.value;
-					file.category = category?.name;
-					//判断是否粘贴来的图片
-					let paste = this.sketchboardList.filter((v: any) => v.id === file.id);
-					if(paste.length == 0)this.sketchboardList.push(file);
-					this.sketchboardList = this.sketchboardList.filter((v: any) => v.status === "done");
-					nextTick().then(()=>{
-						if(this.driver__.driver && this.type_.type2 == 'Printboard'){
-							driverObj__.moveNext()
-						}
-					})
-				}else{
-					bor = false
-				}
-                
-            } else if (file.status === "error") {
-					bor = false
-            }
-			if(!bor){
-				let index = -1;
-                let res:any = JSON.parse(file.xhr.response);
-                this.sketchboardList.forEach((ele: any, index1: any) => {
-                    if (file.uid === ele.uid) {
-                        index = index1;
-                    }
-                });
-                if (index > -1) {
-                    this.sketchboardList.splice(index, 1);
-                }
-                // message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
-                message.warning(res.errMsg);
-			}
-        },
-		setSlogan(){
-			let createSlogan:any = this.$refs.createSlogan
-			createSlogan.init()
-		},
-		setSloganData(data:any){
-			this.sketchboardList = data
-		},
-        deleteFile(item: any) {
-			if(this.scene?.value == 'Slogan' && this.type_.type2 == 'Printboard'){
-				let createSlogan:any = this.$refs.createSlogan
-				createSlogan.isDeleteSlogan = true
-			}
-			this.sketchboardList.splice(item, 1);
-			// if((this.sketchboardList.length<2 && this.moodboarList.length == 0) || this.sketchboardList.length == 0){
-			// 	this.printModel = {
-			// 		num:'',
-			// 		optype:false,
-			// 		value:'Painting Style',
-			// 		label:this.t('Generate.Model'+1)
-			// 	}
-			// }
-        },
-		likeFile(item:any,str:string,index:number){
-			if(str == 'like'){
-				let level2Type = ''
-				if(this.upload.level1Type == "Sketchboard"){
-					level2Type = item.categoryValue
-				}else if(this.upload.level1Type == "Printboard"){
-					level2Type = this.scene?.value
-				}
-				let data = {
-					generateDetailId:item.id,
-					level1Type:this.type_.type2,
-					level2Type: level2Type,
-					gender:this.workspace.sex,
-					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
-				}
-				Https.axiosPost(Https.httpUrls.generateLike, data).then(
-					(rv) => {
-						item.like = true
-						
-					}
-				).catch(res=>{
-				});
-				this.fileList[index].state = ''
-				this.generageAdd(item)
-			}else{
-				this.fileList[index].state = 'delete'
-				this.generageAdd(item)
-				let data = {
-					generateDetailId:item.id,
-					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
-				}
-				Https.axiosGet(Https.httpUrls.generateDislike, {params:data}).then(
-					(rv) => {
-						item.like = false
-					}
-				).catch(res=>{
-				});
-			}
-		},
-		deleteGenerate(index:any){
-			// if(this.isGenerate)return
-			let num = this.fileList.length
-			let _this = this
-            Modal.confirm({
-                title: this.t('LibraryPage.jsContent1'),
-                icon: createVNode(ExclamationCircleOutlined),
-                okText: 'Yes',
-                cancelText: 'No',
-				mask:false,
-                centered:true,
-                onOk() {
-					let a = _this.fileList.length - num
-					_this.fileList.splice(index-a,1)
-                }
-            });
-		},
-		scaleImage(index:any){
-			let scaleImage:any = this.$refs.scaleImage
-			scaleImage.init(this.fileList,index)
-		},
-        closeModal() {
-            // this.myMaterialModalShow = false
-            this.searchPictureName = "";
-        },
-		onPaste(e:any){
-			if(this.sketchboardList.length != 0)return
-			if(e.clipboardData.files[0] && !this.isTextarea && this.upload.level1Type !== 'Moodboard' && this.scene?.value != 'Slogan' && this.scene?.value != 'Logo'){
-				let param = new FormData(); 
-				param.append('inPin','0')
-				param.append('gender',this.workspace.sex)
-				param.append('ageGroup',this.workspace.ageGroup)
-				param.append('level1Type',this.upload.level1Type)
-				param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
-				param.append('file',e.clipboardData.files[0]);
-				let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
-				Https.axiosPost(Https.httpUrls.elementUpload, param, config).then((v)=>{
-					let value = {data:v,errCode : 0}
-					v.status = 'done'
-					let data = {
-						file:{
-							status: 'done',
-							xhr:{
-								response:JSON.stringify(value)
-							}
-						}
-					}
-					this.fileUploadChange(data)
-					
-				})
-			}
-			
-		},
-		handleOpenLibrarySelect(){
-			let selectImages:any = this.$refs.selectImages
-			selectImages.init()
-		},
-		handleImageSelect(data:any){
-			const	file={
-				status: 'done',
-				...data,
-				errCode:0,
-				imgUrl:data.url,
-				xhr:{
-					response:JSON.stringify({...data,errCode:0,imgUrl:data.url,status:'done'})
-				}
-			}
-			this.sketchboardList = [file]
 		}
+  },
+  methods: {
+    generageAdd(data: any) {
+      if (!data?.imgUrl) return
+      data.type_ = this.type_
+      data.type_.type1 = data.designType ? data.designType : this.type_.type1
+      data.resData = JSON.parse(JSON.stringify(data))
+      let maxImg = 8
+      if (this.type_.type2 == 'Sketchboard') {
+        maxImg = 20
+      }
+      let parent: any = this.$parent
+      if (parent.isUseGenerate) {
+        // parent.useGenerate.designType = 'collection'
+        this.$emit('setLibrary', data)
+        return
+      }
+      data.jsContent1 = this.t('uploadFile.jsContent1', { maxImg: maxImg })
+      this.store.commit('addGenerateMaterialFils', data)
+      // console.log(this.fileList);
     },
-});
+    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('Generate.jsContent1'))
+      }
+      const isLt2M = file.size / 1024 / 1024 < 5
+      if (!isLt2M) {
+        message.info(this.t('Generate.jsContent2'))
+      }
+      return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE
+    },
+    setprintModel(value: any) {
+      this.printModel = value
+    },
+    imageToSketch() {
+      if (
+        (!this.printModel?.id && !this.printModel?.value) ||
+        !this.sketchboardList?.[0]?.id
+      )
+        return message.info(this.t('Generate.jsContent4'))
+      this.loadingShow = true
+      let data = {
+        elementId: this.sketchboardList[0].id,
+        gender: this.workspace.sex,
+        style: this.printModel.value,
+        styleImageId: this.printModel?.id ? this.printModel?.id : ''
+      }
+      Https.axiosPost(Https.httpUrls.imageToSketch, data)
+        .then(rv => {
+          if (rv) {
+            this.sketchCatecoryList.forEach((itemCategory: any) => {
+              if (itemCategory.value == rv.category) {
+                rv.categoryValue = itemCategory?.value
+                rv.category = itemCategory?.name
+              }
+            })
+            this.fileList.push({
+              imgUrl: rv.url,
+              categoryValue: rv.categoryValue,
+              category: rv.category,
+              id: rv.id,
+              status: 'Success'
+            })
+            this.loadingShow = false
+          }
+        })
+        .catch(() => {
+          this.loadingShow = false
+        })
+    },
+    getgenerate() {
+      // if(this.scene?.value == 'extract'){
+      // 	this.imageToSketch()
+      // 	return
+      // }
+      this.isTextarea = false
+      this.isInputFocus = false
+      if (this.isGenerate) return
+      clearInterval(this.remGenerateTime)
+      let httpsUrl = Https.httpUrls.generatePrepare
+      let data
+      if (this.scene?.value == 'extract') {
+        httpsUrl = Https.httpUrls.imageToSketch
+        if (
+          (!this.printModel?.id && !this.printModel?.value) ||
+          !this.sketchboardList?.[0]?.id
+        )
+          return message.info(this.t('Generate.jsContent4'))
+        data = {
+          elementId: this.sketchboardList[0].id,
+          gender: this.workspace.sex,
+          style: this.printModel.value,
+          styleImageId: this.printModel?.id ? this.printModel?.id : '',
+          modelName: this.speedData.value //为1就是Print
+        }
+      } else {
+        if (this.searchPictureName) {
+          let arr = this.searchPictureName.split(/\s+/).length
+          if (arr > 250) {
+            message.info(this.t('Generate.jsContent4'))
+            return
+          }
+        } else {
+          if (this.sketchboardList?.[0]?.imgUrl) {
+          } else {
+            message.info(this.t('Generate.jsContent5'))
+            return
+          }
+        }
+        let level2Type = ''
+        let collectionElementId = ''
+        let base64 = ''
+        if (this.sketchboardList?.[0]) {
+          collectionElementId = this.sketchboardList[0].id
+          if (this.sketchboardList[0].base64) {
+            base64 = this.sketchboardList[0].imgUrl
+          }
+        }
+        let sloganText = ''
+        sloganText = this.searchPictureName
+        if (this.upload.level1Type == 'Sketchboard') {
+          level2Type = this.sketchboardList?.[0]?.categoryValue
+            ? this.sketchboardList[0].categoryValue
+            : ''
+          if (this.workspace.styleName) {
+            sloganText = `${this.workspace.styleName},${sloganText}`
+          }
+        } else if (this.upload.level1Type == 'Printboard') {
+          level2Type = this.scene?.value
+          if (level2Type == 'Slogan' && this.searchPictureName == '') {
+            sloganText = this.isSloganHint
+          } else if (level2Type == 'Pattern') {
+            sloganText = `${this.printModel.value},${sloganText}`
+          }
+          if (!base64 && level2Type == 'Slogan') {
+            message.info(this.t('Generate.jsContent10'))
+            return
+          }
+        }
+        data = {
+          generateType: 'text',
+          designType: 'collection',
+          collectionElementId: collectionElementId,
+          level1Type: this.upload.level1Type,
+          level2Type: level2Type,
+          text: sloganText,
+          seed: this.searchPictureSeed,
+          userId: this?.userDetail?.userId,
+          timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+          modelName: this.speedData.value, //为1就是Print
+          isTestUser: this.driver__.driver ? false : this.isTest,
+          gender: this.workspace.sex,
+          sloganBase64: base64,
+          ageGroup: this.workspace.ageGroup
+        }
+        this.generateLevel2Type = data.level2Type
+      }
+
+      this.isGenerate = true
+      // this.remGenerateTime = setTimeout(()=>{
+      // },10000)
+      Https.axiosPost(httpsUrl, data)
+        .then(rv => {
+          if (this.scene?.value == 'extract') {
+            rv = {
+              uniqueId: [rv]
+            }
+          }
+          let rvData = rv.uniqueId.map((item: any) => {
+            return { taskId: item, status: '' }
+          })
+          this.remGenerate = true //出现取消按钮
+          this.fileList.unshift(...rvData)
+          this.setGenerate(rv.uniqueId)
+        })
+        .catch(res => {
+          this.generateLevel2Type = ''
+          this.isGenerate = false
+          clearInterval(this.remGenerateTime)
+          this.remGenerate = false
+
+          if (res.errCode === 2) {
+            let this_ = this
+            Modal.confirm({
+              title: res.errMsg,
+              icon: createVNode(ExclamationCircleOutlined),
+              okText: 'Yes',
+              cancelText: 'No',
+              mask: false,
+              zIndex: 99999,
+              centered: true,
+              onOk() {
+                this_.store.commit('setUpgradePlan', true)
+              },
+              onCancel() {}
+            })
+          }
+        })
+    },
+    setGenerate(dataList: any) {
+      let data = dataList
+      let dataNum = dataList.length
+      let state = true
+      this.generateTime = setInterval(() => {
+        if (!this.isGenerate) return
+        if (!state) return
+        state = false
+        Https.axiosPost(Https.httpUrls.generateResult, data)
+          .then(rv => {
+            state = true
+            if (this.isGenerate) {
+              //防止取消后有正在执行的获取状态
+              this.generateProceedList = rv.filter(
+                (item: any) =>
+                  item.status != 'Success' &&
+                  item.status != 'Fail' &&
+                  item.status != 'Invalid'
+              )
+              rv.forEach((element: any) => {
+                if (element.status == 'Success') {
+                  element.imgUrl = element.url
+                  element.id_ = GO.id++
+                  let index = this.fileList.findIndex(
+                    (item: any) => item.taskId == element.taskId
+                  )
+                  this.fileList[index] = element
+                  // this.fileList.unshift(element)
+                  data = data.filter((item: any) => item !== element.taskId)
+                  if (this.type_.type2 == 'Sketchboard') {
+                    this.sketchCatecoryList.forEach((itemCategory: any) => {
+                      if (itemCategory.value == element.category) {
+                        element.categoryValue = itemCategory?.value
+                        element.category = itemCategory?.name
+                      }
+                    })
+                  } else {
+                    element.categoryValue = this.scene?.value
+                    element.category = this.scene?.name
+                  }
+                } else if (element.status == 'Fail' || element.status == 'Invalid') {
+                  console.log(data)
+                  data = data.filter((item: any) => item !== element.taskId)
+                  console.log(data)
+                  this.fileList = this.fileList.filter(
+                    (item: any) => item.taskId !== element.taskId
+                  )
+                  // message.info(this.t('Generate.everyTimeEffectPoor'));
+                }
+              })
+              if (data.length == 0) {
+                if (
+                  rv.filter((item: any) => item.status == 'Invalid').length == dataNum
+                ) {
+                  message.info(this.t('Generate.effectPoor'))
+                } else {
+                }
+
+                this.store.dispatch('getCredits')
+                clearInterval(this.generateTime)
+                clearInterval(this.remGenerateTime)
+                this.remGenerate = false
+                this.isGenerate = false
+                this.generateLevel2Type = ''
+              }
+            }
+          })
+          .catch(res => {
+            clearInterval(this.generateTime)
+            clearInterval(this.remGenerateTime)
+            this.isGenerate = false
+            this.remGenerate = false
+            this.generateLevel2Type = ''
+          })
+      }, 5000)
+    },
+    removeGenerate() {
+      //取消操作
+      this.isGenerate = false
+      this.remGenerate = false
+      clearInterval(this.generateTime)
+      if (this.generateProceedList) {
+        let str = this.generateProceedList.map((obj: any) => obj.taskId).join(',')
+        let type = 'Generate'
+        if (this.generateLevel2Type == 'Logo') {
+          type = 'Logo'
+        }
+        let data = {
+          uniqueId: str,
+          userId: this?.userDetail?.userId,
+          timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+          type: type
+        }
+
+        Https.axiosGet(Https.httpUrls.generateStopWaiting, { params: data })
+          .then(rv => {
+            this.generateProceedList.forEach((generateProceedListItem: any) => {
+              this.fileList = this.fileList.filter(
+                (item: any) => generateProceedListItem.taskId !== item.taskId
+              )
+            })
+            this.generateProceedList = []
+          })
+          .catch(res => {})
+      }
+    },
+    setTextareaShow() {
+      this.isTextarea = !this.isTextarea
+      if (this.isTextarea) {
+        document.addEventListener('click', this.setTextareaShow)
+      } else {
+        document.removeEventListener('click', this.setTextareaShow)
+      }
+    },
+    cliSetKeyword(value: any) {
+      let str = ''
+      if (
+        this.searchPictureName[this.searchPictureName.length - 1] != ',' &&
+        this.searchPictureName.length != 0
+      ) {
+        str = ','
+      }
+      if (this.upload.level1Type == 'Moodboard') {
+        if (this.workspace?.allKeywordsByStyle['Printboard'].indexOf(value) == -1) {
+          this.styleRecommend.push(value)
+          this.styleRecommend = [...new Set(this.styleRecommend)]
+        }
+      }
+      this.searchPictureName += str + value
+    },
+    ifSeedValue(e: any) {
+      if (this.searchPictureSeed == '') {
+        this.searchPictureSeed = 0
+      }
+    },
+    ifMaximumLength(event: any) {
+      clearTimeout(this.inputTime)
+      let inputBox = document
+        .getElementsByClassName('generate')[0]
+        .getElementsByClassName('input_box')[0]
+      let input = inputBox.getElementsByClassName('search_input')[0]
+      let textarea = event.target as HTMLTextAreaElement
+      const scrollTop = textarea.scrollTop
+
+      // 2. 计算单行高度
+      const lineHeight = parseInt(getComputedStyle(textarea).lineHeight) || 20 // 默认20px
+
+      // 3. 重置高度为1行
+      textarea.style.height = lineHeight + 'px'
+
+      // 4. 计算实际需要的高度
+      const newHeight = Math.max(lineHeight, textarea.scrollHeight)
+
+      // 5. 应用新高度并恢复滚动位置
+      textarea.style.height = newHeight + 'px'
+      textarea.scrollTop = scrollTop
+      this.inputTime = setTimeout(() => {
+        // let num1 = ((input as HTMLInputElement).value.match(/ /g) || []).length
+        // let num2 = (input as HTMLInputElement).value.split(' ').length
+        if (this.searchPictureName?.split(/\s+/).length > 250) {
+          ;(this.$refs.inputShowText as any).innerHTML = this.t('Generate.maximumLength')
+          this.inputShow = true
+        } else {
+          this.inputShow = false
+        }
+      }, 500)
+    },
+    inputFocus() {
+      if (this.isInputFocus) return
+      this.isInputFocus = true
+      let setDomCli = () => {
+        this.isInputFocus = false
+        document.removeEventListener('click', setDomCli)
+      }
+      setTimeout(() => {
+        document.addEventListener('click', setDomCli)
+      }, 200)
+    },
+    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: ''
+          }
+          if (this.sketchCatecoryList && this.type_.type2 == 'Sketchboard') {
+            this.sketchCatecoryList.forEach((item: any) => {
+              if (item.name == res.data.level2Type) {
+                category.value = item?.value
+                category.name = item?.name
+              }
+            })
+          }
+          file.id = res.data.id
+          file.imgUrl = res.data.url
+          file.resData = res.data
+          file.type_ = 'upload'
+          file.id_ = GO.id++
+          file.categoryValue = category?.value
+          file.category = category?.name
+          //判断是否粘贴来的图片
+          let paste = this.sketchboardList.filter((v: any) => v.id === file.id)
+          if (paste.length == 0) this.sketchboardList.push(file)
+          this.sketchboardList = this.sketchboardList.filter(
+            (v: any) => v.status === 'done'
+          )
+          console.log('插入图片', this.sketchboardList)
+          nextTick().then(() => {
+            if (this.driver__.driver && this.type_.type2 == 'Printboard') {
+              driverObj__.moveNext()
+            }
+          })
+        } else {
+          bor = false
+        }
+      } else if (file.status === 'error') {
+        bor = false
+      }
+      if (!bor) {
+        let index = -1
+        let res: any = JSON.parse(file.xhr.response)
+        this.sketchboardList.forEach((ele: any, index1: any) => {
+          if (file.uid === ele.uid) {
+            index = index1
+          }
+        })
+        if (index > -1) {
+          this.sketchboardList.splice(index, 1)
+        }
+        // message.warning(file.name + this.t('SketchboardUpload.jsContent1'));
+        message.warning(res.errMsg)
+      }
+    },
+    setSlogan() {
+      let createSlogan: any = this.$refs.createSlogan
+      createSlogan.init()
+    },
+    setSloganData(data: any) {
+      this.sketchboardList = data
+    },
+    deleteFile(item: any) {
+      if (this.scene?.value == 'Slogan' && this.type_.type2 == 'Printboard') {
+        let createSlogan: any = this.$refs.createSlogan
+        createSlogan.isDeleteSlogan = true
+      }
+      this.sketchboardList.splice(item, 1)
+      // if((this.sketchboardList.length<2 && this.moodboarList.length == 0) || this.sketchboardList.length == 0){
+      // 	this.printModel = {
+      // 		num:'',
+      // 		optype:false,
+      // 		value:'Painting Style',
+      // 		label:this.t('Generate.Model'+1)
+      // 	}
+      // }
+    },
+    likeFile(item: any, str: string, index: number) {
+      if (str == 'like') {
+        let level2Type = ''
+        if (this.upload.level1Type == 'Sketchboard') {
+          level2Type = item.categoryValue
+        } else if (this.upload.level1Type == 'Printboard') {
+          level2Type = this.scene?.value
+        }
+        let data = {
+          generateDetailId: item.id,
+          level1Type: this.type_.type2,
+          level2Type: level2Type,
+          gender: this.workspace.sex,
+          timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+        }
+        Https.axiosPost(Https.httpUrls.generateLike, data)
+          .then(rv => {
+            item.like = true
+          })
+          .catch(res => {})
+        this.fileList[index].state = ''
+        this.generageAdd(item)
+      } else {
+        this.fileList[index].state = 'delete'
+        this.generageAdd(item)
+        let data = {
+          generateDetailId: item.id,
+          timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+        }
+        Https.axiosGet(Https.httpUrls.generateDislike, { params: data })
+          .then(rv => {
+            item.like = false
+          })
+          .catch(res => {})
+      }
+    },
+    deleteGenerate(index: any) {
+      // if(this.isGenerate)return
+      let num = this.fileList.length
+      let _this = this
+      Modal.confirm({
+        title: this.t('LibraryPage.jsContent1'),
+        icon: createVNode(ExclamationCircleOutlined),
+        okText: 'Yes',
+        cancelText: 'No',
+        mask: false,
+        centered: true,
+        onOk() {
+          let a = _this.fileList.length - num
+          _this.fileList.splice(index - a, 1)
+        }
+      })
+    },
+    scaleImage(index: any) {
+      let scaleImage: any = this.$refs.scaleImage
+      scaleImage.init(this.fileList, index)
+    },
+    closeModal() {
+      // this.myMaterialModalShow = false
+      this.searchPictureName = ''
+    },
+    onPaste(e: any) {
+      if (this.sketchboardList.length != 0) return
+      if (
+        e.clipboardData.files[0] &&
+        !this.isTextarea &&
+        this.upload.level1Type !== 'Moodboard' &&
+        this.scene?.value != 'Slogan' &&
+        this.scene?.value != 'Logo'
+      ) {
+        let param = new FormData()
+        param.append('inPin', '0')
+        param.append('gender', this.workspace.sex)
+        param.append('ageGroup', this.workspace.ageGroup)
+        param.append('level1Type', this.upload.level1Type)
+        param.append('timeZone', Intl.DateTimeFormat().resolvedOptions().timeZone)
+        param.append('file', e.clipboardData.files[0])
+        let config: any = {
+          headers: { 'Content-Type': 'multipart/form-data', 'Accept': '*/*' }
+        }
+        Https.axiosPost(Https.httpUrls.elementUpload, param, config).then(v => {
+          let value = { data: v, errCode: 0 }
+          v.status = 'done'
+          let data = {
+            file: {
+              status: 'done',
+              xhr: {
+                response: JSON.stringify(value)
+              }
+            }
+          }
+          this.fileUploadChange(data)
+        })
+      }
+    },
+    handleOpenLibrarySelect() {
+      let selectImages: any = this.$refs.selectImages
+      selectImages.init()
+    },
+    handleImageSelect(data: any) {
+      const file = {
+        status: 'done',
+        ...data,
+        errCode: 0,
+        imgUrl: data.url,
+        xhr: {
+          response: JSON.stringify({
+            ...data,
+            errCode: 0,
+            imgUrl: data.url,
+            status: 'done'
+          })
+        }
+      }
+      this.sketchboardList = [file]
+    }
+  }
+})
 </script>
 <style lang="less" scoped>
 .generate {
-	flex: 1;
-    // height: 30rem;
-    // overflow-x: hidden;
-	overflow-x: hidden;
-	display: flex;
-    flex-direction: column;
-	position: relative;
-	// padding-top: calc(2.5rem*1.2);
-	.input_border{//输入框
-		padding-top: 1rem;
-		
-	}
-    
-	.mark_loading{
-		position: absolute;
-		width: 100%;
-		height: 100%;
-		z-index: 99;
-	}
-    .generate_checkbox,
-    .generage_input {
+  flex: 1;
+  // height: 30rem;
+  // overflow-x: hidden;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  // padding-top: calc(2.5rem*1.2);
+  .input_border {
+    //输入框
+    padding-top: 1rem;
+  }
+
+  .mark_loading {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 99;
+  }
+  .generate_checkbox,
+  .generage_input {
+    display: flex;
+    align-items: center;
+    position: sticky;
+    top: 0;
+    padding-top: calc(2rem * 1.2);
+    z-index: 7;
+  }
+  .generate_checkbox {
+  }
+  .generage_input {
+  }
+  .generage_img {
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    flex: 1;
+    overflow-y: auto;
+    &.generage_img::-webkit-scrollbar {
+      display: none;
+    }
+    .generage_img_item {
+      cursor: pointer;
+      margin: 1rem;
+      width: calc(25% - 2rem);
+      aspect-ratio: 1 / 1;
+      position: relative;
+      &.active {
+        opacity: 0.5;
+        // border: 2px solid;
+        border-radius: calc(1rem * 1.2);
+        img {
+          transform: scale(0.9);
+        }
+        .delete_like_file_block {
+          pointer-events: none;
+        }
+        .operate_file_block {
+          pointer-events: none;
+        }
+      }
+      .loading {
+        width: 100%;
+        height: 100%;
         display: flex;
         align-items: center;
-        position: sticky;
-        top: 0;
-        padding-top: calc(2rem*1.2);
-        z-index: 7;
+        justify-content: center;
+      }
+      img {
+        // width: calc(10rem*1.2);
+        // height: calc(10rem*1.2);
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+      &:hover .delete_like_file_block {
+        // display: block;
+        opacity: 1;
+      }
     }
-    .generate_checkbox {
-    }
-    .generage_input {
-    }
-    .generage_img {
-        display: flex;
-		position: relative;
-        flex-wrap: wrap;
-		align-content: flex-start;
-		flex: 1;
-		overflow-y: auto;
-		&.generage_img::-webkit-scrollbar {
-        display: none;
-    }
-        .generage_img_item {
-            cursor: pointer;
-            margin: 1rem;
-			width: calc(25% - 2rem);
-			aspect-ratio: 1 / 1;
-			position: relative;
-            &.active {
-				opacity: 0.5;
-				// border: 2px solid;
-				border-radius: calc(1rem*1.2);
-				img {
-					transform: scale(0.9);
-				}
-				.delete_like_file_block{
-					pointer-events:none;
-				}
-				.operate_file_block{
-					pointer-events:none;
-				}
-			}
-			.loading{
-				width: 100%;
-				height: 100%;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-			}
-            img {
-                // width: calc(10rem*1.2);
-                // height: calc(10rem*1.2);
-				width: 100%;
-				height: 100%;
-				object-fit: contain;
+    .upload_item {
+      .upload_file_item {
+        // &.active {
+        // 	opacity: 0.5;
+        // 	// border: 2px solid;
+        // 	border-radius: 1rem;
+        // 	transform: scale(0.9);
+        // 	.delete_file_block{
+        // 		pointer-events:none;
+        // 	}
+        // 	.operate_file_block{
+        // 		pointer-events:none;
+        // 	}
+        // 	img {
+        // 	}
+        // }
+        .upload_file_item_content {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+          position: relative;
+          cursor: pointer;
+          .upload_img {
+            display: block;
+            max-height: 100%;
+            max-width: 100%;
+          }
+
+          .delete_file_block {
+            display: none;
+            width: calc(3.2rem * 1.2);
+            height: calc(3.2rem * 1.2);
+            background: rgba(0, 0, 0, 0.6);
+            border-radius: calc(0.4rem * 1.2);
+            position: absolute;
+            top: calc(0.9rem * 1.2);
+            right: calc(0.9rem * 1.2);
+            text-align: center;
+            line-height: calc(3.2rem * 1.2);
+            left: auto;
+            .icon-shanchu {
+              font-size: calc(1.6rem * 1.2);
+              color: #fff;
             }
-			&:hover .delete_like_file_block{
-				// display: block;
-				opacity: 1;
-			}
-			
-        }
-        .upload_item {
-            .upload_file_item {
-				// &.active {
-				// 	opacity: 0.5;
-				// 	// border: 2px solid;
-				// 	border-radius: 1rem;
-				// 	transform: scale(0.9);
-				// 	.delete_file_block{
-				// 		pointer-events:none;
-				// 	}
-				// 	.operate_file_block{
-				// 		pointer-events:none;
-				// 	}
-				// 	img {
-				// 	}
-				// }
-                .upload_file_item_content {
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    height: 100%;
-                    position: relative;
-                    cursor: pointer;
-                    .upload_img {
-                        display: block;
-                        max-height: 100%;
-                        max-width: 100%;
-                    }
+          }
 
-                    .delete_file_block {
-                        display: none;
-                        width: calc(3.2rem*1.2);
-                        height: calc(3.2rem*1.2);
-                        background: rgba(0, 0, 0, 0.6);
-                        border-radius: calc(0.4rem*1.2);
-                        position: absolute;
-                        top: calc(0.9rem*1.2);
-                        right: calc(0.9rem*1.2);
-                        text-align: center;
-                        line-height: calc(3.2rem*1.2);
-                        left: auto;
-                        .icon-shanchu {
-                            font-size: calc(1.6rem*1.2);
-                            color: #fff;
-                        }
-                    }
-
-                    &:hover .delete_file_block {
-                        display: block;
-                    }
-                }
-            }
+          &:hover .delete_file_block {
+            display: block;
+          }
         }
+      }
     }
+  }
+}
 
-	}
+.search_upImg :deep(.ant-upload.ant-upload-select-picture-card) {
+  background-color: transparent;
+  border: none;
+  width: inherit;
+  height: inherit;
+  margin: 0;
+}
 
-	.search_upImg	:deep(.ant-upload.ant-upload-select-picture-card){
-		background-color: transparent;
-		border: none;
-		width: inherit;
-		height: inherit;
-		margin: 0;
-	}
+.drop-container {
+  display: flex;
+  align-items: center;
+  // column-gap: 1rem;
+  justify-content: space-between;
+  padding: 0.25rem 0.3rem 0.25rem;
+  width: 7rem;
+  box-sizing: border-box;
+  // &,
+  // i {
+  //   font-size: 1.6rem;
+  // }
 
-	.drop-container{
-		display: flex;
-		align-items: center;
-		column-gap: 1rem;
-		padding: 0.25rem 0.3rem 0.25rem;
-		
-	}
+  .upload-icon {
+    font-size: 1.6rem !important;
+    align-items: normal;
+    justify-content: start;
+    :deep(.svg-icon) {
+      font-size: inherit !important;
+    }
+  }
+  .library-icon {
+    font-size: 1.4rem;
+	display: flex;
+  }
+}
+.fi-br-upload {
+  &:hover {
+    background-color: #f5f5f5;
+    border-radius: 5px;
+  }
+}
 </style>
diff --git a/src/component/home/tools/toProduct/index.vue b/src/component/home/tools/toProduct/index.vue
index cd6228a4..f281ad1a 100644
--- a/src/component/home/tools/toProduct/index.vue
+++ b/src/component/home/tools/toProduct/index.vue
@@ -45,8 +45,8 @@
 										}"
 										:headers="{ Authorization: token }"
 										:before-upload="beforeUpload"
+										:multiple="!!upload.projectId"
 										v-model:file-list="fileList[productimgMenu.value]"
-										:multiple="true"
 										accept=".jpg,.png,.jpeg,.bmp"
 										@change="(file) => fileUploadChange(file)"
 									>
@@ -323,6 +323,9 @@ export default defineComponent({
 		watch(()=>store.state.HomeStoreModule.uploadElement.length,(newVal,oldVal)=>{
 			if(props.isDesignPage)return
 			productImgData.fileList[props.productimgMenu.value] = store.state.HomeStoreModule.uploadElement
+			if(productImgData.fileList[props.productimgMenu.value][0]){
+				productImgData.fileList[props.productimgMenu.value][0].isChecked = true
+			}
 		})
 		const productImgDom = reactive({
 			generalDragLeft:null as any,
@@ -435,11 +438,14 @@ export default defineComponent({
 					// if(props.productimgMenu.value == 'Relight'){
 					// 	file.type = "ToProductImage"
 					// }
-					productImgData.fileList[props.productimgMenu.value].filter((v: any) => v.status === "done");
+					let storeData = {
+						str:'add',
+						list:[file]
+					}
+					store.commit('setUploadElement',storeData)
 				}else{
 					bor = false
 				}
-				// this.showFileList = productImgData.fileList
             } else if (file.status === "error") {
 				bor = false
             }
@@ -468,9 +474,6 @@ export default defineComponent({
 			}
             return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
         }
-		let deleteFile = (index:any)=>{
-			productImgData.fileList[props.productimgMenu.value].splice(index,1)
-		}
 		let setGenerate = (item:any)=>{
 			item.isChecked = !item.isChecked
 		}
@@ -893,7 +896,6 @@ export default defineComponent({
 			setproduct,
 			fileUploadChange,
 			beforeUpload,
-			deleteFile,
 			setGenerate,
 			setUploadDelete,
 			likeFile,
diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index 4ad24d17..1b459be2 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -825,6 +825,7 @@ export default {
     Modify: "修改",
     jsContent1: "取消绑定成功",
     jsContent2: "当前网络无法加载谷歌",
+		UnbindTip: "确认取消绑定吗？",
   },
   Renew: {
     title: "选择你的最佳计划",
@@ -1413,5 +1414,7 @@ export default {
 	ToProductImage:'产品图',
 	Relight:'打光',
 	ChatRobot:'对话生成',
+	Yes:'是',
+	No:'否',
   },
 };
diff --git a/src/lang/en.ts b/src/lang/en.ts
index 1f2da2f7..621e7464 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -825,6 +825,7 @@ export default {
     Modify: "Modify",
     jsContent1: "Successful discharge",
     jsContent2: "The current network cannot load Google",
+		UnbindTip: "Are you sure to cancel the binding?",
   },
   Renew: {
     title: "Find Your Ideal Plan",
@@ -1413,5 +1414,7 @@ export default {
 	ToProductImage:'ToProductImage',
 	Relight:'Relight',
 	ChatRobot:'ChatRobot',
+	Yes:'Yes',
+	No:'No',
   },
 };