fix

src/component/Canvas/argument.vue

@@ -20,7 +20,7 @@
 			<div class="title">{{ $t('exportModel.Color') }}</div>
 			<input type="color" @input="canvasGeneral.setPencilColor" v-model="canvasGeneral.brushwork.color">
 			<span class="icon iconfont icon-xiala" @click.stop="setOperation('color')" :class="{active: operation == 'color'}"></span>
-			<div class="labelHover_show" v-show="operation == 'color'" @click.stop="">
+			<div class="labelHover_show color" v-show="operation == 'color'" @click.stop="">
 				<div v-for="item in canvasGeneral.colorHistoryList" :style="{'background':item}" @click="canvasGeneral.setColorHistory(item)"></div>
 			</div>
 		</div>
@@ -97,14 +97,39 @@
 				</a-select-option>
 			</a-select>
 		</div>
+		<div class="label_item" v-if="elementList" v-show="
+			canvasGeneral.operation != 'dashedPencil' && 
+			canvasGeneral.operation != 'dashed'">
+			<div>{{ $t('exportModel.select') }}:</div>
+			<span class="icon iconfont icon-xiala" @click.stop="setOperation('element')" :class="{active: operation == 'element'}"></span>
+			<div class="labelHover_show element" v-show="operation == 'element'"  @click.stop="">
+				<div v-for="titleItem,key in elementList" class="elementItem">
+					<div class="titleItem">{{ titleItem?.name }}</div>
+					<div class="titleImgList">
+						<div  class="titleImgItem" v-for="imgItem in titleItem?.list">
+							<img :src="imgItem?.url || imgItem?.designOutfitUrl || imgItem?.imgUrl || imgItem?.minioUrl" @click="addImage(imgItem)" alt="">
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		
 	</div>
 </template>
 
 <script lang="ts">
-	import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
+	import { defineComponent,ref,reactive,computed,toRefs,inject} from 'vue'
+	import { useStore } from "vuex";
 	export default defineComponent({
 		components:{},
+		props:{
+			elementList:{
+				type:Object,
+				default:()=>{return {}}	
+			}
+		},
 		setup(){
+			const store = useStore();
 		    let testModal = ref(true)
 			let canvasGeneral:any = inject('canvasObj')
 			const data = reactive({
@@ -121,12 +146,17 @@
 			const closeModal = ()=>{
 				document.removeEventListener('click',setOper)
 			}
+			const addImage = (item:any)=>{
+				if(!item.minioUrl)item.minioUrl = item.imgUrl 
+				canvasGeneral.addImage(item)
+			}
 			return {
 				canvasGeneral,
 				...toRefs(data),
 				testModal,
 				setOperation,
 				closeModal,
+				addImage
 			}
 		}
 	});
@@ -156,13 +186,37 @@
 			border: 1px solid;
 			padding: .5rem 1rem;
 			background: #fff;
-			div{
-				width: 2rem;
-				height: 2rem;
-				margin-right: .5rem;
-				margin-bottom: .5rem;
-				display: inline-block;
-				cursor: pointer;
+			&.color{
+				div{
+					width: 2rem;
+					height: 2rem;
+					margin-right: .5rem;
+					margin-bottom: .5rem;
+					display: inline-block;
+					cursor: pointer;
+				}
+			}
+			&.element{
+				height: auto;
+				max-height: 40rem;
+				overflow-y: auto;
+				>.elementItem{
+					margin-bottom: 1rem;
+					> .titleImgList{
+						display: flex;
+						flex-wrap: wrap;
+						.titleImgItem{
+							width: 50%;
+							padding: 1rem;
+							> img{
+								width: 100%;
+								height: 100%;
+								object-fit: contain;
+								cursor: pointer;
+							}
+						}
+					}
+				}
 			}
 		}
 		input{
@@ -170,7 +224,6 @@
 			width: 12rem;
 		}
 		&.wH input{
-			width: 5rem;
 		}
 		.title{
 			margin-right: 1rem;

src/component/Canvas/canvasContent.vue

@@ -17,10 +17,12 @@
 	import { defineComponent,ref,reactive,nextTick,toRefs,inject,createVNode, onMounted} from 'vue'
 	import { Modal,message } from 'ant-design-vue';
 	import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+	import { useStore } from "vuex";
 	import { useI18n } from 'vue-i18n'
 	export default defineComponent({
 		component:{},
 		setup(){
+			const store = useStore();
 			let {t} = useI18n()
 			let canvasType = inject('canvasType')
 			let canvasGeneral:any = inject('canvasObj')
@@ -33,12 +35,17 @@
 				
 			})
 			const createCanvas = (canvasSize:any)=>{
-				data.isPresuppose = false
-				nextTick(()=>{
-					canvasGeneral.canvasInit(data.canvasDom,canvasSize)
-					console.log(canvasGeneral);
-
+				return new Promise(async (resolve,reject)=>{
+					data.isPresuppose = false
+					await nextTick(async ()=>{
+						await canvasGeneral.canvasInit(data.canvasDom,{
+							width:data.canvasDom.offsetWidth,
+							height:data.canvasDom.offsetHeight,
+						})
+						resolve('')	
+					})
 				})
+				
 			}
 			const openMode = (data:any)=>{
 				let {yes,no} = data
@@ -95,6 +102,13 @@
 				let canvasSize = {width,height}
 				createCanvas(canvasSize)
 			}
+			const openSetData =async ()=>{
+				let oldCanvas = store.state.HomeStoreModule.canvasData?.canvas
+				if(oldCanvas){
+					await createCanvas({})
+					canvasGeneral.setLoadFromJSON(oldCanvas, () => {});
+				}
+			}
 			onMounted(()=>{
 				if(canvasType == 'export'){
 					data.isPresuppose = true
@@ -107,6 +121,7 @@
 				canvasGeneral,
 				...toRefs(data),
 				setPresuppose,
+				openSetData,
 			}
 		}
 	});

src/component/Canvas/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="generalCanvas">
 		<div class="argument-box">
-			<argument ref="argument" v-if="canvasObj.canvas"></argument>
+			<argument ref="argument" v-if="canvasObj.canvas" :elementList="elementList"></argument>
 		</div>
 		<div class="canvasBox">
 			<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
@@ -15,11 +15,16 @@
 		<div class="mark_loading" v-show="isShowMark">
 			<a-spin size="large" />
 		</div>
+		<div style="display: flex; justify-content: center; margin-top: 2rem;">
+			<div class="gallery_btn" style="margin: 0 2rem;" @click="setShare">{{ $t('exportModel.Share') }}</div>
+			<div class="gallery_btn" style="margin: 0 2rem;" @click="setExport">{{ $t('exportModel.Export') }}</div>
+		</div>
+		<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
+		<!-- <publish ref="publish" @clearPublish="()=>{}"></publish> -->
 	</div>
-	<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
 </template>
 <script>
-import {defineComponent, computed, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
+import {defineComponent, computed, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted, toRefs,
 } from "vue";
 import {message} from 'ant-design-vue'
 import { Https } from "@/tool/https";
@@ -32,6 +37,8 @@ import detail from "./detail.vue"
 import canvasContent from "./canvasContent.vue"
 import liquefaction from "@/component/modules/liquefaction.vue";
 
+import JSZip, { forEach } from "jszip";
+import publish from "@/component/WorksPage/publish.vue";
 
 export default defineComponent({
     components: {
@@ -39,26 +46,34 @@ export default defineComponent({
 		argument,
 		detail,
 		canvasContent,
-		liquefaction,
+		liquefaction,publish
     },
     setup(props,{emit}) {
 		const { t } = useI18n();
 		const store = useStore();
 		const isShowMark = ref(false)
-		const component = reactive({
-			argument:ref(null),tool:ref(null),detail:ref(null),canvasContent:ref(null)
-		})
 		let liquefaction = ref(null)
 		let liquefactionData = ref()
 		let groupDashed = ref(null)//用来判断是否需要对group添加img
 		let canvasType = 'export'
-		let canvasObj = reactive(new canvasGeneral())
+		let canvasObj = reactive(new canvasGeneral('export'))
+		const dataDom = reactive({
+			argument:null,
+			canvasContent:null,
+			tool:null,
+			detail:null,
+			publish:null,
+		})
+		let data = reactive({
+			elementList:null,
+			showCanvas:false,
+		})
 		provide('canvasType',canvasType)
 		provide('canvasObj',canvasObj)
 		provide('isShowMark',isShowMark)
 		const close = ()=>{
-			component.forEach((item)=>{
-				if(item.value.closeModal)item.value.closeModal()
+			dataDom.forEach((item)=>{
+				if(item.closeModal)item.closeModal()
 			})
 		}
 		
@@ -100,6 +115,140 @@ export default defineComponent({
 			// 	canvasObj.updateCanvasState()
 			// });
 		}
+		const getCanvasData = ()=>{
+			if(!canvasObj.canvas)return
+			var json = canvasObj.canvas.toJSON(['src','minioUrl','custom','perPixelTargetFind','hasBorders','selectable','hasControls','erasable']);
+			// console.log(JSON.stringify(json));
+			json.objects.forEach(item=>{
+				if(item.type == 'image'){
+					delete item.src
+				}
+			})
+			let canvasExport = {
+				canvas:json,
+				groupList: canvasObj.layer.list
+			}
+			return canvasExport
+		}
+		const openSetData = async ()=>{
+			let arr = store.state.Workspace.projectList
+			let obj = {}
+			for (let index = 0; index < arr.length; index++) {
+				const item = arr[index];
+				await new Promise((resolve, reject) => {
+					store.dispatch('getProjectCanvasData',item.value).then((value)=>{
+						const keys = Object.keys(value)[0];
+						if(!value[keys] || value[keys].length == 0){
+							resolve('')
+							return
+						}
+						let rv = {
+							list:value[keys],
+							name:item.name,
+						}
+						obj[keys] = rv
+						resolve('')
+					})
+				})
+				
+			}
+			data.elementList = obj
+			if(data.showCanvas)return
+			data.showCanvas = true
+			dataDom.canvasContent.openSetData()
+		}
+		let setShare = async ()=>{
+			dataDom.publish.publishMask = true
+			canvasObj.detailSubmit().then((img)=>{
+				let data = {
+					"imgUrl":img,
+					userlikeGroupId:store.state.Workspace.probjects.id,
+				}
+				dataDom.publish.init(data)
+			})
+			
+		}
+		//设置导出
+        let setExport = async () => {
+            var imageDataURL = await canvasObj.detailSubmit()
+            let a = document.createElement("a");
+            let img = [];
+            let index = 0;
+            img.push({
+                imgUrl: imageDataURL,
+                name: "collection.png",
+            });
+            let num = 0;
+			console.log(data.elementList)
+            for (let key in data.elementList) {
+               for (let index = 0; index < data.elementList[key].list.length; index++) {
+					const item = data.elementList[key].list[index];
+					let url = item.imgUrl || item.url || item.designOutfitUrl || item.minioUrl
+					let name = url?.split(".").pop().split("?").shift();
+					img.push({imgUrl:url,name:`element${index}.${name}`})
+			   }
+            }
+			console.log(img)
+            downImg(img);
+        };
+        let getImgArrayBuffer = (url) => {
+            return new Promise((resolve, reject) => {
+                //通过请求获取文件blob格式
+                let xmlhttp = new XMLHttpRequest();
+                xmlhttp.open("GET", url, true);
+                xmlhttp.responseType = "blob";
+				xmlhttp.withCredentials = false; 
+                xmlhttp.onload = function () {
+                    if (this.status == 200) {
+                        resolve(this.response);
+                    } else {
+                        reject(this.status);
+                    }
+                };
+                xmlhttp.send();
+            });
+        };
+        let downImg = (imagesParams) => {
+            let zip = new JSZip();
+            let cache = {};
+            let promises = [];
+            for (let item of imagesParams) {
+                const promise = getImgArrayBuffer(item.imgUrl).then((data) => {
+                    // 下载文件, 并存成ArrayBuffer对象(blob)
+                    zip.file(item.name, data, { binary: true }); // 逐个添加文件
+                    cache[item.title] = data;
+                })
+                promises.push(promise);
+            }
+			Promise.all(promises)
+                .then(() => {
+					function downloadBlob(blob, filename) {
+						const link = document.createElement('a');
+						const url = URL.createObjectURL(blob);
+						link.href = url;
+						link.download = filename;
+						document.body.appendChild(link);
+						link.click();
+						URL.revokeObjectURL(url);
+						document.body.removeChild(link);
+					}
+                    zip.generateAsync({ type: "blob" }).then((content) => {
+                        // 生成二进制流
+						downloadBlob(content,'DesignFiles')
+                        // FileSaver.saveAs(content, "DesignFiles"); // 利用file-saver保存文件  自定义文件名
+                        isShowMark.value = false;
+
+                    });
+					setSubmit()//导出的时候保存
+					initAligningGuidelines(canvas,true)
+
+                })
+                .catch((res) => {
+                    // message.warning(t('HomeView.jsContent3'));
+                    isShowMark.value = false;
+					initAligningGuidelines(canvas,true)
+                });
+        };
         onMounted(() => {
 		});
 		onBeforeUnmount(()=>{
@@ -108,11 +257,17 @@ export default defineComponent({
         return {
 			isShowMark,
 			liquefaction,
+			...toRefs(dataDom),
+			...toRefs(data),
 			canvasObj,
 			close,
 			expoet,
 			toolLiquefaction,
 			submitLiquefaction,
+			getCanvasData,
+			openSetData,
+			setShare,
+			setExport,
         };
     },
     data(prop) {
@@ -145,14 +300,15 @@ export default defineComponent({
 		:deep(i){
 			font-size: 2.5rem;
 			cursor: pointer;
-			width: 3rem;
-			height: 3rem;
+			width: 5rem;
+			height: 5rem;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			flex-shrink: 0;
 			transition: all .3s;
 			margin-bottom: .5rem;
+			padding: 1rem;
 			&.active{
 				border: 1px solid;
 				border-radius: .4rem;

src/component/Detail/DesignDetail.vue

@@ -774,11 +774,11 @@ export default defineComponent({
 				this.store.commit("setDesignItemDetail", designItemDetail);
 			}
 			this.currentIndex = 0
-			let workspace = this.store.state.Workspace.workspace
+			let workspace = this.store.state.Workspace.probjects
 			let data = {
                 designItemId:designItemDetail.designItemId,
 				// designItemId:designItemDetail.designItemId,
-				gender:workspace?.sex,
+				gender:workspace?.sex == 'Male'?1:0,
 				designSingleItemDTOList:clothes,
 				isPreview:false,
 				sketchString:'',

src/component/Detail/DesignDetailAlter.vue

@@ -85,6 +85,7 @@
 
 									:data="{
 										...upload,
+										gender:workspace.sex,
 									}"
 									:headers="{ Authorization: token }"
 									v-model:file-list="uploadList"
@@ -312,7 +313,7 @@ export default defineComponent({
 		})
 		let workspace = ref({})
 		let sketchCatecoryList = computed(()=>{
-			return store.state.Workspace.workspacePosition
+			return store.state.Workspace.probjects.positionList
 		})
 		let designElementsType = computed(()=>{
 			return store.state.UserHabit.designElementsType;
@@ -418,7 +419,6 @@ export default defineComponent({
                 spin: true,
             }),
 			getPantongNameTime:true,
-			workspaceCom:{}
         }
     },
 	directives:{
@@ -523,10 +523,6 @@ export default defineComponent({
 			},
 			immediate: true
 		},
-		workspaceCom(newVal,oldVal){
-			this.workspace = newVal
-			this.upload.gender = newVal?.sexEnum?.value
-		},
     },
 	mounted () {
 		this.token = getCookie("token") || "";
@@ -638,9 +634,6 @@ export default defineComponent({
 			}
 			let DesignDetailEnd = this.$refs.DesignDetailEnd
 			DesignDetailEnd.init(num)
-			this.workspaceCom = computed(()=>{
-				return  this.store?.state?.Workspace?.workspace
-			})
 		},
 		
 		deleteFile(num){
@@ -794,13 +787,13 @@ export default defineComponent({
 			if(this.selectCode == 'Printboard' || this.selectCode == 'DesignElements' || this.selectCode == 'Sketchboard'){
 				level2Type = this.designType
 			}
-			let workspace = this.store.state.Workspace.workspace
+			let workspace = this.store.state.Workspace.probjects
             let data = {
                 // level1Type:'Printboard',
                 level1Type:this.selectCode,
                 // level2Type:'Pattern',
                 level2Type:level2Type,
-				modelSex:workspace?.sex,
+				modelSex:workspace?.sex == 'Male'?1:0,
                 page:this.currentPage,
                 pictureName:this.searchPictureName,
                 size:this.pageSize+this.clothesList.length,
@@ -1222,7 +1215,7 @@ export default defineComponent({
                     // height: 4rem*1.2);
                     // line-height: 3.8rem*1.2);
                     // background: #FFFFFF;
-                    border: calc(0.1rem*1.2) solid #F1F1F1;
+                    border: calc(0.1rem*1.2) solid #000;
                     // font-size: 1.6rem*1.2);
 					font-size: calc(1.2rem*1.2);
                     font-weight: 400;

src/component/Detail/habitSetStyle.vue

@@ -28,7 +28,7 @@
 			<div class="modal_title_text_intro"></div>
 		</div>
 		<div class="habitSetStyle_content_bottom">
-			<div class="content_bottom_item" v-for="item in styleList">
+			<div class="content_bottom_item" v-for="item in mannequinStyle">
 				<div class="content_bottom_item_border" :class="{active:item.name == selectStyle.name}" @click="setItemSelect(item)">
 					{{ item.name}}
 				</div>
@@ -61,7 +61,12 @@ import { downloadIamge } from "@/tool/util";
 import { useI18n } from "vue-i18n";
 export default defineComponent({
 emits:['setParentData','setWorkspaceStyle'],
-
+props:{
+	mannequinStyle:{
+		type:Array,
+		default:()=>[]
+	}
+},
 setup(props,{emit}) {
 	let habitSetStyle: any = ref(false);//弹窗
 	let habitSetStyleMask:any = ref(false)//弹窗遮罩
@@ -94,9 +99,9 @@ setup(props,{emit}) {
 	}
 	let init = (data:any)=>{
 		habitSetStyle.value = true
-		if(habitSetStyleData.styleList.length == 0){
-			getStyleList()
-		}
+		// if(habitSetStyleData.styleList.length == 0){
+		// 	getStyleList()
+		// }
 		oldDataId = data.styleId
 		habitSetStyleData.selectStyle.id = data.styleId 
 		habitSetStyleData.selectStyle.name = data.styleName 
@@ -130,25 +135,27 @@ setup(props,{emit}) {
 		if(oldDataId == data.id){
 			cleardata()
 		}else{
-			let _this = this
-			Modal.confirm({
-				title: t('Habit.jsContent3'),
-				icon: createVNode(ExclamationCircleOutlined),
-				okText: 'Yes',
-				cancelText: 'No',
-				mask:false,
-				centered:true,
-				zIndex:1050,
-				onOk() {
-					data.isRevampModel = true
-					emit('setWorkspaceStyle',data)
-					cleardata()
-				},
-				onCancel() {
-					emit('setWorkspaceStyle',data)
-					cleardata()
-				},
-			});
+			// let _this = this
+			// Modal.confirm({
+			// 	title: t('Habit.jsContent3'),
+			// 	icon: createVNode(ExclamationCircleOutlined),
+			// 	okText: 'Yes',
+			// 	cancelText: 'No',
+			// 	mask:false,
+			// 	centered:true,
+			// 	zIndex:1050,
+			// 	onOk() {
+			// 		data.isRevampModel = true
+			// 		emit('setWorkspaceStyle',data)
+			// 		cleardata()
+			// 	},
+			// 	onCancel() {
+			// 		emit('setWorkspaceStyle',data)
+			// 		cleardata()
+			// 	},
+			// });
+			emit('setWorkspaceStyle',data)
+			cleardata()
 		}
 	}
 	let setClear = ()=>{

src/component/DetailCopy/designDetail.vue

@@ -128,7 +128,11 @@ export default defineComponent({
 				value:false,
 			},// 是否编辑图案
 			childKey:0,
+			singleOveral:{
+				value:'overall'
+			}
 		})
+		provide('singleOveral',detailData.singleOveral)
 		provide('isEditPattern',detailData.isEditPattern)
 		const closeModal = ()=>{
 			sessionStorage.removeItem('oppositeRevocation')
@@ -165,6 +169,8 @@ export default defineComponent({
 							}
 						});
 					})
+					detailData.singleOveral.value = rv.singleOverall
+					console.log(detailData.singleOveral)
 					detailData.designDetailShow = true
                     store.commit('DesignDetailCopy/setDesignDetail',rv)
 					// this.deleteShow = false
@@ -269,7 +275,7 @@ export default defineComponent({
 			return clothesList
 		}
 		const getSubmitData = async (str:string)=>{
-			let workspace = store.state.Workspace.workspace
+			let workspace = store.state.Workspace.probjects
 			if(!detailData.selectDetail.path && !detailData.selectDetail.newDetail?.sketch?.minIOPath)return
 			let clothes:any = await setClothes([detailData.selectDetail])
 			let data = {
@@ -277,7 +283,7 @@ export default defineComponent({
 				designSingleItemDTOList:clothes,
 				isPreview:true,
 				// ifSubmit:designItemDetail.isPreview,
-				gender:workspace?.sex,
+				gender:workspace?.sex == 'Male'?1:0,
 				sketchString:'',
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
 				processId:userDetail.value.userId,
@@ -295,14 +301,14 @@ export default defineComponent({
             });
 		}
 		const submit = async ()=>{
-			let workspace = store.state.Workspace.workspace
+			let workspace = store.state.Workspace.probjects
 			let clothes:any = await setClothes(detailData.designDetail.clothes)
 			let data = {
 				designItemId:detailData.designDetail.designItemId,
 				designSingleItemDTOList:clothes,
 				isPreview:false,
 				// ifSubmit:designItemDetail.isPreview,
-				gender:workspace?.sex,
+				gender:workspace?.sex == 'Male'?1:0,
 				sketchString:'',
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
 				processId:userDetail.value.userId,
@@ -408,6 +414,7 @@ export default defineComponent({
 	:deep(.detailText){
 		font-size: 1.8rem;
 		font-weight: 600;
+		
 	}
     .designDetailModal{
 		position: absolute;
@@ -419,6 +426,9 @@ export default defineComponent({
 		transform: translate(-50%,-50%);
 		z-index: 2;
 		:deep(.ant-modal-wrap){
+			.ant-modal-body{
+				padding: 0;
+			}
 			// position: absolute;
 			// top: 0;
 			// left: 0;

src/component/DetailCopy/detailLeft/module/currentList.vue

@@ -2,10 +2,10 @@
 <template>
     <div class="uploadList">
 		<div class="uploadList_box">
-			<div class="content_img_item" v-for="(file) in currentList[currentDetailType]" :key="file.id">
+			<div class="content_img_item" v-for="(file) in currentList[type]" :key="file.id">
 				<div class="content_img_item_block" :class="{active:file?.checked}">
 					<img v-lazy="file.imgUrl" :key="file.imgUrl" :alt="file.name" @click.stop="selectImgItem(file)"/>
-					<sketchCategory :disignTypeList="catecoryList" :generateList="allBoardData.sketchboardFiles" :item="file" :isSpread="true"></sketchCategory>
+					<sketchCategory v-model:disignTypeList="catecoryList" :generateList="allBoardData.sketchboardFiles" :item="file" :isSpread="true"></sketchCategory>
 				</div>
 			</div>
 		</div>
@@ -29,7 +29,12 @@ export default defineComponent({
 		    type:Object,
 			default:()=>[] as any,
 			required:true
-		}
+		},
+		type:{
+		    type:String,
+			default:'' as any,
+			required:true
+		},
 	},
 	emits:['selectImgItem'],
     setup(props,{emit}) {
@@ -38,9 +43,9 @@ export default defineComponent({
 		const detailData = reactive({
 			allBoardData:computed(()=>store.state.UploadFilesModule.allBoardData),
 			currentList:{
-				sketch:[],
-				print:[],
-				color:[],
+				sketch:computed(()=>store.state.UploadFilesModule.allBoardData.sketchboardFiles),
+				print:computed(()=>store.state.UploadFilesModule.allBoardData.printboardFiles),
+				color:computed(()=>store.state.UploadFilesModule.allBoardData.colorBoards),
 			},
 			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
 
@@ -56,11 +61,11 @@ export default defineComponent({
 		}
 	
 		onMounted(()=>{
-			detailData.currentList = {
-				sketch:detailData.allBoardData.sketchboardFiles,
-				print:detailData.allBoardData.printboardFiles,
-				color:detailData.allBoardData.colorBoards,
-			}
+			// detailData.currentList = {
+			// 	sketch:detailData.allBoardData.sketchboardFiles,
+			// 	print:detailData.allBoardData.printboardFiles,
+			// 	color:detailData.allBoardData.colorBoards,
+			// }
 			
 		})
         return{

src/component/DetailCopy/detailLeft/module/libraryList.vue

@@ -57,6 +57,10 @@ export default defineComponent({
 			default:'' as any,
 			required:true
 		},
+		randomId:{
+			type:Boolean,
+			default:true
+		},
 		level1Type:{
 		    type:String,
 			default:'' as any,
@@ -100,9 +104,11 @@ export default defineComponent({
 			let id = file.id
 			if(type == 'sketch'){
 				id = Number(file.id + (randomNum + ''))
-				if(hasDuplicateId(id)){
-					selectImgItem(file)
-					return
+				if(props.randomId){
+					if(hasDuplicateId(id)){
+						selectImgItem(file)
+						return
+					}
 				}
 			}
 			let data = JSON.parse(JSON.stringify(file))
@@ -113,7 +119,7 @@ export default defineComponent({
 		const getLibraryList = ()=>{
             detailData.isShowLoading = true
 			let level2Type = ''
-			let workspace = store.state.Workspace.workspace
+			let workspace = store.state.Workspace.probjects
 			// let type = store.state.DesignDetailCopy.currentDetailType
             let data = {
                 level1Type:props.level1Type,

src/component/DetailCopy/detailLeft/module/selectList.vue

@@ -26,13 +26,13 @@
 		</div>
 		<div class="print_content_list">
 			<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element'">
-				<currentList ref="currentList" :level1Type="level1Type" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
+				<currentList ref="currentList" :level1Type="level1Type" :type="type" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
 			</div>
 			<div class="content_item" v-show="selectTitle == 'upload'">
 				<uploadList @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadList>
 			</div>
 			<div class="content_item" v-show="selectTitle == 'library'">
-				<libraryList @selectImgItem="selectImgItem" :level1Type="level1Type" :type="type" ref="libraryList" :catecoryList="catecoryList"></libraryList>
+				<libraryList @selectImgItem="selectImgItem" :randomId="randomId" :level1Type="level1Type" :type="type" ref="libraryList" :catecoryList="catecoryList"></libraryList>
 			</div>
 		</div>
     </div>
@@ -58,6 +58,11 @@ export default defineComponent({
 			type:Array,
 			default:()=>[]
 		},
+		randomId:{
+			type:Boolean,
+			default:true,
+			required:false
+		},
 		type:{
 		    type:String,
 			default:'' as any,

src/component/DetailCopy/detailLeft/module/uploadList.vue

@@ -75,7 +75,7 @@ export default defineComponent({
 			upload:{
                 isPin: 0,
                 level1Type: props.level1Type,
-				gender:store.state.Workspace.workspace.sex,
+				gender:store.state.Workspace.probjects.sex ,
                 timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
 			},
 			token:getCookie("token"),

src/component/DetailCopy/detailLeft/sketch.vue

@@ -35,7 +35,7 @@ export default defineComponent({
 			selectTitle:'current',
 			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			sketchCatecoryList:computed(()=>{
-				return store.state.Workspace.workspacePosition
+				return store.state.Workspace.probjects.positionList
 			}),
 			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType)
 		})

src/component/DetailCopy/model/modelNav.vue

@@ -4,7 +4,7 @@
 			<i v-if="item?.id != selectDetail?.id" class="fi fi-rr-trash" @click.stop="deleteDetailItem(item?.id)"></i>
 			<img :src="item.path" alt="">
 		</div>
-		<div v-if="currentDetailType == 'sketch' || currentDetailType == ''" :class="{active:!selectDetail?.id && currentDetailType == 'sketch'}" class="modelNav_item add" @click="addSketch">
+		<div v-show="singleOveral.value == 'overall'" v-if="currentDetailType == 'sketch' || currentDetailType == '' " :class="{active:!selectDetail?.id && currentDetailType == 'sketch'}" class="modelNav_item add" @click="addSketch">
 			+
 		</div>
     </div>
@@ -32,7 +32,8 @@ export default defineComponent({
 			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
 			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
 			frontBack:{} as any,
-			isEditPattern:inject('isEditPattern') as any
+			isEditPattern:inject('isEditPattern') as any,
+			singleOveral:inject('singleOveral') as any
 		})
 		watch(()=>detailData.frontBack_,(newFollowVue)=>{
 			detailData.frontBack = newFollowVue

src/component/DetailCopy/model/modelPosition.vue

@@ -1,14 +1,14 @@
 <template>
     <div class="molepositon" :class="{active:!imgDesignImg}">
 		<div class="designOpenrtion_imgMask" v-if="frontBack?.body" :style="frontBack?.body?.style">
-			<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
+			<div class="designOpenrtion_print" :class="{active:singleOveral.value == 'single'}" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
 				<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
 			</div>
-			<img class="perview_img" v-detailBody="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'"  v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
-			<div class="detail_modal_item_front" v-for="item,index in frontBack.front"  @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)"  :style="item.style">
+			<img v-show="singleOveral.value == 'overall'" class="perview_img" v-detailBody="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'"  v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
+			<div  class="detail_modal_item_front" :class="{active:singleOveral.value == 'single'}" v-for="item,index in frontBack.front"  @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)"  :style="item.style">
 				<img :src="item.imageUrl" alt="">
 			</div>
-			<div class="designOpenrtion_btn">
+			<div class="designOpenrtion_btn" v-show="singleOveral.value != 'overall'">
 				<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
 					<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
 					<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
@@ -18,7 +18,7 @@
 			</div>
 		</div>
 		<div class="designOpenrtion_imgMask" v-else>
-			<img src="" alt="">
+			<!-- <img src="" alt=""> -->
 		</div>
     </div>
 	<div class="molepositon" :class="{active:imgDesignImg}">
@@ -55,8 +55,8 @@ export default defineComponent({
 		const detailData = reactive({
 			frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
 			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
-			isEditPattern:inject('isEditPattern') as any
-
+			isEditPattern:inject('isEditPattern') as any,
+			singleOveral:inject('singleOveral') as any
 		})
 		const selectItem = reactive({
 		    selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
@@ -418,6 +418,7 @@ export default defineComponent({
 			.detail_modal_item_front,.designOpenrtion_print{
 				z-index: 2;
 				height: 100%;
+				
 				img{
 					width: 100%;
 					height: 100%;
@@ -425,6 +426,11 @@ export default defineComponent({
 					user-select:none;
 					-webkit-user-drag: none;
 				}
+				&.active{
+					> img{
+						object-fit: contain;
+					}
+				}
 				.modal_imgItem{
 					position: absolute;
 					overflow: hidden;

src/component/HomePage/Generate.vue

@@ -194,7 +194,7 @@
 				<a-spin size="large" />
 			</div>
         </div>
-		<scaleImage ref="scaleImage" :isCanvas="type_.type2 == 'Sketchboard'" :workspace="workspace"></scaleImage>
+		<scaleImage ref="scaleImage" :isCanvas="type_.type2 == 'Sketchboard'" :sex="workspace.sex"></scaleImage>
 		<createSlogan ref="createSlogan" @setSloganData="setSloganData"></createSlogan>
 		<UpgradePlan ref="UpgradePlan"></UpgradePlan>
     </div>
@@ -252,7 +252,9 @@ export default defineComponent({
 		// let printBoards:any = computed(()=>{return store.state.UploadFilesModule.printboard})
 		// let moodboarList:any = computed(()=>{return store.state.UploadFilesModule.moodboard})
 		// let sketchCatecoryList:any = ref([])
-		let workspace:any = ref({})
+		let workspace:any = computed(()=>{
+			return store.state.Workspace.probjects
+		})
 		let isGenerate = ref(false)//判断是否正在进行generate
 		let inputShow = ref(false)//表示是否出现红框
 		let inputTime = ref()
@@ -355,7 +357,6 @@ export default defineComponent({
                 type1: "generate",
                 type2: prop.msg,
             },
-			workspaceCom:{},
 			isTextarea:false,
 			isInputFocus:false,
         };
@@ -372,9 +373,6 @@ export default defineComponent({
 		let isTest:any = getCookie('isTest')
         this.isTest =JSON.parse(isTest)
         this.uploadUrl = getUploadUrl();
-		this.workspaceCom = computed(()=>{
-			return  this.store?.state?.Workspace?.workspace
-		})
 		// if()
 		if(this.type_.type2 == 'Printboard'){
 			this.printModelList = [
@@ -421,10 +419,6 @@ export default defineComponent({
 				
 			}
 		},
-		workspaceCom(newVal,oldVal){
-			this.workspace = newVal
-			this.upload.gender = newVal?.sexEnum?.value
-		},
 		scene:{
 			handler(newVal,oldVal){
 				if(this.type_.type2 == 'Printboard' && newVal.value == 'Slogan'){
@@ -504,7 +498,7 @@ export default defineComponent({
 			this.loadingShow = true
 			let data = {
 				"elementId": this.sketchboardList[0].id,
-				gender:this.workspace.sexEnum.value,
+				gender:this.workspace.sex,
 				"style": this.printModel.value,
 				"styleImageId": this.printModel?.id?this.printModel?.id:''
 			}
@@ -597,7 +591,7 @@ export default defineComponent({
 				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
 				version:this.speedData.value,//为1就是Print
 				isTestUser:this.driver__.driver?false:this.isTest,
-				gender:this.workspace.sexEnum.value,
+				gender:this.workspace.sex,
 				sloganBase64:base64,
 			}
 			this.generateLevel2Type = data.level2Type
@@ -652,7 +646,7 @@ export default defineComponent({
 			let dataNum = dataList.length
 			let state = true
 			this.generateTime = setInterval(()=>{
-				if(!this.isGenerate || !this.remGenerate)return
+				if(!this.isGenerate || this.remGenerate)return
 				if(!state)return
 				state = false
 				Https.axiosPost(Https.httpUrls.generateResult, data).then(
@@ -875,7 +869,7 @@ export default defineComponent({
 					generateDetailId:item.id,
 					level1Type:this.type_.type2,
 					level2Type: level2Type,
-					gender:this.workspace.sexEnum.value,
+					gender:this.workspace.sex,
 					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
 				}
 				Https.axiosPost(Https.httpUrls.generateLike, data).then(
@@ -928,7 +922,7 @@ export default defineComponent({
 			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.upload.gender)
+				param.append('gender',this.workspace.sex)
 				param.append('level1Type',this.upload.level1Type)
 				param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
 				param.append('file',e.clipboardData.files[0]);

src/component/HomePage/Material.vue

@@ -29,9 +29,11 @@
 					
 				</div>
                 <div class="my_material_header_right">
-                    <div class="content_search_block">
-                        <input class="search_input" :placeholder="$t('Material.inputContent1')" v-model="searchPictureName"  @keydown.enter="getLibraryList('')">
-                        <div class="search_icon_block" @click.stop="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div>
+                    <div class="content_search_block generalModel_state">
+						<div class="generalModel_state_item">
+							<input class="search_input" :placeholder="$t('Material.inputContent1')" v-model="searchPictureName"  @keydown.enter="getLibraryList('')">
+	                        <div class="gallery_btn" @click.stop="getLibraryList('')"><span class="icon iconfont icon-sousuo"></span></div>
+						</div>
                     </div>
                 </div>
             </div>
@@ -50,7 +52,7 @@
 					<div v-show="!load.isNoData" class="material_content_list_loding">
 						<span class="page_loading" v-show="!isShowLoading" v-observe></span>
 						<span v-show="isShowLoading">
-							<img src="@/assets/images/homePage/loading.gif" alt="">
+							<a-spin size="large" />
 						</span>
 					</div>
 					<!-- <div v-show="total > imgList?.length && total != 0" class="material_content_list_loding" v-observe>
@@ -367,8 +369,8 @@ export default defineComponent({
         //选择所有的图片
         async getLibraryList(str:any){
 			if(this.load.isShowMark && !this.load.isNoData)return
-			let workspace = JSON.parse(JSON.stringify(this.store.state.Workspace.workspace))
-			if(this.searchPictureName != this.isOldSearchPictureName || this.workspace?.sexEnum?.value != workspace.sexEnum.value){
+			let probjects = JSON.parse(JSON.stringify(this.store.state.Workspace.probjects))
+			if(this.searchPictureName != this.isOldSearchPictureName || this.workspace.sex != probjects.sex){
 				this.imgList = []
 				this.currentPage = 1
 			}else{
@@ -380,7 +382,7 @@ export default defineComponent({
             let data = {
                 level1Type:this.selectCode,
                 level2Type: this.selectCode == 'Moodboard'?'':this.disignType.value,
-				modelSex:workspace?.sexEnum.value,
+				modelSex:probjects?.sex,
                 page: this.currentPage,
                 // page:this.currentPage,
                 pictureName:this.searchPictureName,
@@ -427,7 +429,7 @@ export default defineComponent({
 					}else{
 						this.imgList.push(...aa)
 					}
-					this.workspace = workspace
+					this.workspace = probjects
 					// this.imgList = aa
                     this.isShowLoading = false
                 }
@@ -486,7 +488,7 @@ export default defineComponent({
 			.select_block{
 				border: calc(0.1rem* 1.2) solid #F1F1F1;
 				margin-right: calc(2.3rem*1.2);
-				height: 4rem;
+				height: auto;
 				.ant-select-selector{
 					height: 90%;
 				}
@@ -496,44 +498,13 @@ export default defineComponent({
             display: flex;
             justify-content: space-between;
             align-items: center;
-
-            .content_search_block{
-                margin-right: calc(5rem*1.2);
-                display: flex;
-
-                .search_input{
-                    width: calc(15rem*1.2);
-                    padding-left: calc(1.5rem*1.2);
-                    // height: 4rem*1.2);
-                    // line-height: 3.8rem*1.2);
-                    // background: #FFFFFF;
-                    border:calc( 0.1rem*1.2) solid #F1F1F1;
-                    // font-size: 1.6rem*1.2);
-					font-size: calc(1.2rem*1.2);
-                    font-weight: 400;
-					height: 4rem;
-
-                    &::placeholder {
-                        color: #C2C2C2;
-                    }
-                }
-
-                .search_icon_block{
-                    width: calc(5rem*1.2);
-                    // height: calc(3rem*1.2);
-					height: 100%;
-                    line-height: calc(3rem*1.2);
-                    text-align: center;
-                    background: #343579;
-                    cursor: pointer;
-
-                    .icon-sousuo{
-                        font-size: calc(2rem*1.2);
-                        color: #FFFFFF;
-                    }
-                }
-            }
-
+			.generalModel_state_item{
+				margin: 0;
+				.gallery_btn{
+					margin-left: 2rem;
+				}
+			}
+			
             .icon_close{
                 color: rgba(174, 178, 183, 1);
                 font-size: calc(2.4rem*1.2);

src/component/HomePage/NewCollectionReview.vue

@@ -176,7 +176,6 @@ export default defineComponent({
 						// this.sketch[arr[0].num]?.push(this.sketchList[i])
 						let dom = document.getElementsByClassName('collection_review')[0]?.getElementsByClassName('lager_img_item'+arr[0].num)[0]
 						let img = dom.querySelector('.element:last-child')
-						// console.log([sketch1.height,sketch2.height,sketch3.height]);
 						await new Promise((resolve:any)=>{
 							image.onload = ()=>{
 								sketchH[index]+=image.height * (300/image.width)

src/component/HomePage/SketchboardUpload.vue

@@ -209,7 +209,7 @@ export default defineComponent({
         let store:any =useStore()
 
 		let sketchCatecoryList:any = computed(()=>{
-			return store.state.Workspace.workspacePosition
+			return store.state.Workspace.probjects.positionList
 		})
 		let sketchCatecoryAllList:any = computed(()=>{
 			return store.state.Workspace.workspaceAllPosition

src/component/HomePage/collectionModal.vue

@@ -103,10 +103,10 @@ export default defineComponent({
 			return store.state.Guide.guide
 		})
 		let workspace:any = computed(()=>{
-			return store.state.Workspace.workspace
+			return store.state.Workspace.probjects
 		})
 		let position:any = computed(()=>{
-			return store.state.Workspace.workspacePosition
+			return store.state.Workspace.probjects.positionList
 		})
 		let showCollectionModal:any=ref(false)
 		let collectionStep=ref(1)
@@ -248,7 +248,7 @@ export default defineComponent({
 			let numBottom = 0
 			let top:any
 			let bottom:any
-			if(this.workspace.sexEnum.value == "Female"){
+			if(this.workspace.sex != "male"){
 				top = ['Outwear','Dress','Blouse']
 				bottom = ['Trousers','Skirt']
 			}else{

src/component/HomePage/generalMenu.vue

@@ -7,11 +7,11 @@
 					<span style="text-align: center;">{{ $t('Generate.referenceImage') }}</span>
 				</template>
 				<span v-if="item?.label">{{ item?.label }}</span>
-				<span v-else>{{ item.name }}</span>
+				<span v-else>{{ item?.name }}</span>
 			</a-popover>
 			<div v-else>
 				<span v-if="item?.label">{{ item?.label }}</span>
-				<span v-else>{{ item.name }}</span>
+				<span v-else>{{ item?.name }}</span>
 			</div>
 			<div class="icon iconfont icon-xiala" :class="{active:openClick}"></div>
 		</div>
@@ -44,11 +44,11 @@
 
 					</template>
 					<span v-if="item?.label">{{ item?.label }}</span>
-					<span v-else>{{ item.name }}</span>
+					<span v-else>{{ item?.name }}</span>
 				</a-popover>
 				<div v-else>
 					<span v-if="item?.label">{{ item?.label }}</span>
-					<span v-else>{{ item.name }}</span>
+					<span v-else>{{ item?.name }}</span>
 				</div>
 			</li>
 		</ul>
@@ -179,14 +179,13 @@ import { message, Upload, Modal } from "ant-design-vue";
                 type1: "generate",
                 type2: 'Sketchboard',
             },
-			workspaceCom:{},
 			isTextarea:false,
 			isInputFocus:false,
         };
     },
     mounted() {
         this.uploadUrl = getUploadUrl();
-		this.upload.gender = this.store?.state?.Workspace?.workspace?.sexEnum?.value
+		this.upload.gender = this.store.state.Workspace.probjects.sex
 	}
  });
  </script>

src/component/HomePage/index/editContent/nav.vue

@@ -1,72 +0,0 @@
-<template>
-    <div class="homeNav">
-		<div class="navList" :class="{active:selectKey == item.value}" v-for="item in navListData" :key="item.value"  @click="setNav(item.value, $event)">
-			{{ item.name }}
-		</div>
-    </div>
-</template>
-<script lang="ts">
-import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
-// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-import { Https } from "@/tool/https";
-import { useStore } from "vuex";
-import { useI18n } from 'vue-i18n'
-
-export default defineComponent({
-    components:{
-    },
-	props:{
-		selectKey:{type:String,default:''},
-		navListData:{type:Array,default:()=>[]},
-	},
-	emits:['setSelectKey'],
-    setup(props,{emit}) {
-        const store = useStore();
-		const data = reactive({
-			
-		})
-		
-		const dataDom = reactive({
-		})
-		const setNav = (str:any,event:any)=>{
-			let data = {
-				str:str == props.selectKey?'':str,
-				dom:event.target,
-				posiiton:'nav',
-			}
-			
-			emit("setSelectKey", data);
-			// emit("update:selectKey", str);
-		}
-        return{
-			...toRefs(dataDom),
-			...toRefs(data),
-			setNav,
-        }
-    },
-
-	provide() {
-		return {
-		}
-	},
-		
-})
-</script>
-<style lang="less" scoped>
-    .homeNav{
-		padding: 5rem 0;
-		background: #f7f8fa;
-		> div{
-			width: 5rem;
-			height: 5rem;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			cursor: pointer;
-			&.active{
-				background: #ebebeb;
-			}
-		}
-	}
-</style>

src/component/HomePage/index/editContent/navBox.vue

@@ -1,170 +0,0 @@
-<template>
-    <div class="homeNavBox">
-		<div class="navList">
-			<img src="@/assets/images/homePage/homeNavBg.png" alt="">
-			<div class="navListItem" :class="[selectKey == item.value?'active':'',`item${item.task}`]" v-for="item in navListData" :key="item.value" @dblclick.stop="setNav(item.value,$event)"  @click.stop="setSelect(item.value)">
-				<div class="background"></div>
-				<div class="text">
-					{{ item.name }}
-				</div>
-			</div>
-		</div>
-    </div>
-</template>
-<script lang="ts">
-import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
-// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-import { Https } from "@/tool/https";
-import { useStore } from "vuex";
-import { useI18n } from 'vue-i18n'
-
-export default defineComponent({
-    components:{
-    },
-	props:{
-		selectKey:{type:String,default:''},
-		navListData:{type:Array,default:()=>[]},
-	},
-	emits:['setSelectKey'],
-    setup(props,{emit}) {
-        const store = useStore();
-		const data = reactive({
-			
-		})
-		const dataTime = reactive({
-			clickTime:null as any,
-		})
-		const dataDom = reactive({
-			navList:null as any
-		})
-		const setNav = (str:any,event:any)=>{
-			clearTimeout(dataTime.clickTime)
-			let data = {
-				str:str == props.selectKey?'':str,
-				dom:event.target,
-				posiiton:'navBox'
-			}
-			emit("setSelectKey", data);
-			// emit("update:selectKey", str);
-		}
-		const setSelect = ()=>{
-			clearTimeout(dataTime.clickTime)
-			dataTime.clickTime = setTimeout(()=>{//防止双击和单机都执行的问题
-				console.log(123123);
-			},200)
-		}
-        return{
-			...toRefs(dataDom),
-			...toRefs(data),
-			setNav,
-			setSelect,
-        }
-    },
-
-	provide() {
-		return {
-		}
-	},
-		
-})
-</script>
-<style lang="less" scoped>
-    .homeNavBox{
-		width: 100%;
-		height: 100%;
-		position: relative;
-		> .navList{
-			position: absolute;
-			left: 50%;
-			top: 50%;
-			transform: translate(-50%, -50%);
-			> img{
-				width: 98rem;
-			}
-			> .navListItem{
-				width: 22rem;
-				height: 10rem;
-				border-radius: 2rem;
-				border: 2px solid #000;
-				position: absolute;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				transition: all .2s;
-				overflow: hidden;
-				cursor: pointer;
-				&.item1-1{
-					top: -5rem;
-					left: -22rem;
-					// transform: translateX(-100%);
-				}
-				&.item1-2{
-					top: 9rem;
-					left: -22rem;
-					// transform: translateX(-100%);
-				}
-				&.item1-3{
-					top: 23rem;
-					left: -22rem;
-					// transform: translateX(-100%);
-				}
-				&.item1-4{
-					top: 37rem;
-					left: -22rem;
-					// transform: translateX(-100%);
-				}
-				&.item1-5{
-					top: 51rem;
-					left: -22rem;
-					// transform: translateX(-100%);
-				}
-				&.item2-1{
-					top: 23rem;
-					left: 8rem;
-				}
-				&.item3-1{
-					top: 23rem;
-					left: 38rem;
-				}
-				&.item4-1{
-					top: 12rem;
-					left: 68rem;
-				}
-				&.item4-2{
-					top: 34rem;
-					left: 68rem;
-				}
-				&.item5-1{
-					top: 23rem;
-					left: 98rem;
-				}
-				.background{
-					background: #d6eb77;
-					transition: all .3s;
-					position: absolute;
-					top: 0;
-					left: 0;
-					width: 100%;
-					height: 100%;
-				}
-				.text{
-					position: relative;
-				}
-				&.active{
-					border: 3px solid #000;
-					.background{
-						opacity: .5;
-					}
-				}
-				&:hover{
-					border: 3px solid #000;
-					.background{
-						opacity: .5;
-					}
-				}
-			}
-		}
-		
-	}
-</style>

src/component/HomePage/index/index.vue

@@ -1,42 +1,225 @@
 <template>
     <div class="start">
-		<div class="createProject" v-if="false">
-
+		<div class="createProject" v-if="!selectObject?.type">
+			<div v-if="state == 1" class="createProjectBtn">
+				<div @click="createProject" class="gallery_btn gallery_btn_radius">New Project</div>
+				<div @click="getHistoryProject" class="gallery_btn white gallery_btn_radius">Resume Project</div>
+			</div>
+			<div v-else-if="state == 2" class="selectProjectBtn">
+				<div style="width: 100%; margin: 2rem;">Please choose your workflow</div>
+				<div class="porjectBox">
+					<div class="selectProjectBtn_title" v-for="item in opjectList" :key="item.value" @click="selectProject(item)">{{item.title}}</div>
+				</div>
+			</div>
 		</div>
-		<editContent v-else></editContent>
+		<workflow v-else ref="workflow" @goHome="()=>state = 1" :workflowType="selectObject.type" :httpWorkflowType="selectObject.httpType"></workflow>
+		<div class="mark_loading" v-show="isShowMark">
+			<a-spin size="large" />
+		</div>
+		<affiche ref="affiche"></affiche>
     </div>
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
+import { defineComponent,computed,onMounted,nextTick,onBeforeMount,toRefs, reactive,watch} from 'vue'
 // import setDesignItem from '@/component/Detail/setDesignItem2.vue'
-import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
-import { Https } from "@/tool/https";
 import { useStore } from "vuex";
+import {useRoute} from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import editContent from './editContent/index.vue'
+import workflow from './workflow/index.vue'
+// import workspace from './model/workspace.vue'
+import { Https } from "@/tool/https";
+import router from '@/router';
+import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
+import {projectList} from '@/tool/listData'
+import affiche from "@/component/HomePage/affiche.vue";
 
-
-import { gsap, TweenMax } from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
 export default defineComponent({
     components:{
-		editContent
+		workflow,affiche
     },
     setup(props,{emit}) {
         const store = useStore();
+		const route = useRoute()
+		const {t} = useI18n()
 		const data = reactive({
-
-			
-		})
-		const dataTime = reactive({
-			selectTime:null as any,
+			state:1,//状态 1:创建项目 2:选择项目
+			selectObject:computed(()=>store.state.Workspace.probjects) as any,//选择的项目
+			userDetail:computed(()=>{
+				return store.state.UserHabit.userDetail
+			}),
+			opjectList:[
+				{
+					title:'Series Design',
+					value:'seriesDesign',
+					httpValue:'SERIES_DESIGN',
+				},{
+					title:'Single Product Design',
+					value:'singleProductDesign',
+					httpValue:'SINGLE_DESIGN',
+				},{
+					title:'Sketch Design',
+					value:'sketchDesign',
+					httpValue:'SKETCH_COLLAGE_PROCESS',
+				},{
+					title:'Print Design',
+					value:'printDesign',
+					httpValue:'PRINT_DESIGN',
+				},{
+					title:'Product Design',
+					value:'productDrawingDesign',
+					httpValue:'FINISHED_PRODUCT',
+				},{
+					title:'3D Pattern Making',
+					value:'printingDesign3D',
+					httpValue:'THREE_D_PLATE_MAKING',
+				},
+			],//项目列表
+			isShowMark:false,
 		})
 		const dataDom = reactive({
+			affiche:null as any,
+			workflow:null as any
+		})
+		const createProject =()=>{
+			data.state = 2
+			createData()
+		} 
+		const createData = ()=>{
+			store.commit("clearAllData");
+			store.commit("clearAllCollection");
+			store.commit("setAllBoardDataChoose",{});
+			store.commit("clearShowSketchboard",{});
+			store.commit("clearAllCollection");
+		}
+		const selectProject =(item:any)=>{
+			let data = {
+				type:item.value,
+				httpType:item.httpValue,//项目类型
+			}
+			store.commit('setProbject',data)
+			let list:any = projectList
+			store.commit('setProjectList',list[item.value])
+		} 
+		const getHistoryProject = ()=>{
+			router.push('/home/history')
+		}
+		const getHistory = ()=>{
+			let value = {
+				id:route.params.id,
+			}
+			if(!route.params.id)return
+			createData()
+			Https.axiosPost(Https.httpUrls.selectHistoryProject,value).then((rv: any) => {
+				let type:any = data.opjectList.find(obj => obj.httpValue === rv.process);
+				//取出数组对象某个值
+				let storeData = {
+					name:'测试项目',
+					id:rv.id,
+					type:type?.value,
+					httpType:rv.process,//项目类型
+					style:rv.workspaceVO.style,
+					styleId:rv.workspaceVO.styleId,
+					styleName:rv.workspaceVO.styleName,
+					sex:rv.workspaceVO.sex,
+					systemDesignerPercentage:rv.workspaceVO.systemDesignerPercentage,
+					position:{
+						label:rv.workspaceVO.positionEnum.value,
+						value:rv.workspaceVO.positionEnum.name
+					},
+					positionList:[],
+					model:{}
+				}
+				let model:any = {}
+				let position = []
+				if(data.selectObject.sex == "Female"){
+				// if(rv.workspaceVO.sex == "Female"){
+					model = {
+						id:rv.workspaceVO.mannequinFemaleId,
+						type:rv.workspaceVO.mannequinFemaleType,
+						url:rv.workspaceVO.femalePresignedUrl,
+					}
+					position = store.state.UserHabit.FemalePosition
+				}else{
+					model = {
+						id:rv.workspaceVO.mannequinMaleId,
+						type:rv.workspaceVO.mannequinMaleType,
+						url:rv.workspaceVO.malePresignedUrl,
+					}
+					position = store.state.UserHabit.MalePosition
+				}
+				storeData.model = model
+				data.selectObject.positionList = position
+				storeData.positionList = position
+				store.commit('setProbject',storeData)
+				let list:any = projectList
+				store.commit('setProjectList',list[type.value])
+				nextTick(()=>{
+					dataDom.workflow.isUpdataPorject = true
+				})
+			})
+		}
+		// watch(()=>data.opjectList.type,(newVal,oldVal)=>{
+		// 	console.log(newVal,oldVal);
+			
+		    
+		// })
+		onMounted(async ()=>{
+			let test:any = getCookie('isTest')
+			let isTest =JSON.parse(test)
+			//判断账号剩余时间是否太短
+			let isModalOne = JSON.parse(sessionStorage.getItem("isTimeOne") as any)
+			// if(!data.userDetail.isBeginner || data.userDetail.systemUser == 0)return
+			if(!isModalOne){//判断是否是试用用户
+			// if(!isTest && !isModalOne){//判断是否是试用用户
+				await new Promise(async (resolve) => {
+					if(isTest){
+						// openGuide()
+						resolve('')
+					}else{
+						await Https.axiosPost(Https.httpUrls.getExpiredTime,{}).then((rv: any) => {
+							if (rv) {
+								let dateNow = Date.now()
+								let date:any =  new Date(dateNow)
+								let rvDate:any = new Date(rv);
+								let diffInMilliseconds = Math.abs(date - rvDate); // 获取时间差的毫秒数
+								let days = Math.floor(diffInMilliseconds / (24 * 60 * 60 * 1000)); // 计算天数
+								let hours = Math.floor((diffInMilliseconds % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)); // 计算小时数
+								let minutes = Math.floor((diffInMilliseconds % (60 * 60 * 1000)) / (60 * 1000)); // 计算分钟数
+								if(days < 5){
+									setTimeout(() => {
+										let text = {
+											str:`${t('HomeView.jsContent4',{days:days,hours:hours})}<a href="https://code-create.com.hk/aida" target="_blank">${t('HomeView.jsContent8')}</a>`,
+											title:`${t('HomeView.jsContent7')}`,
+										}
+			    						dataDom.affiche.init(text)
+									}, 500);
+								}else{
+									// openGuide()
+								}
+								resolve('')
+							}else{
+								// openGuide()
+								resolve('')
+							}
+						})
+					}
+				})
+			}else if(!isModalOne && isTest){
+			}else{
+				// openGuide()
+			}
+			getHistory()
+		})
+		onBeforeMount(()=>{
+		    // data.selectObject = null
+			// store.commit('createProbject')
 		})
-		
         return{
 			...toRefs(dataDom),
 			...toRefs(data),
+			createProject,
+			selectProject,
+			getHistoryProject,
         }
     },
 
@@ -53,5 +236,49 @@ export default defineComponent({
 		height: 100%;
 		overflow: hidden;
 		position: relative;
+		
+		> .createProject{
+			width: 100%;
+			height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			> .createProjectBtn,> .selectProjectBtn{
+				display: flex;
+			}
+			> .createProjectBtn{
+				> div{
+					margin: 1rem;
+					width: 19rem;
+				}
+			}
+			> .selectProjectBtn{
+				flex-direction: column;
+				> .porjectBox{
+					display: flex;
+					> .selectProjectBtn_title{
+						padding: 2rem;
+						width: 21rem;
+						height: 26rem;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						border-radius: 2rem;
+						border: 1px solid #000;
+						text-align: center;
+						background: #f6f6f6;
+						color: #000;
+						transition: all .3s;
+						font-size: 2rem;
+						font-weight: 600;
+						margin: 0 2rem;
+						&:hover{
+							background: #000;
+							color: #fff;
+						}
+					}
+				}
+			}
+		}
 	}
 </style>

src/component/HomePage/index/model/collection/ColorboardUpload.vue

@@ -148,9 +148,9 @@
 					<div class="modal_img_item" v-for="color,index in colorList" :class="[ index == 1?'Guide_1_11_1':'',driver__.driver?'showEvents':'']" :key="color" >
 						<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color.rgba?.r},${color.rgba?.g},${color.rgba?.b},${color.rgba?.a})`,'background-image':color?.gradient?`linear-gradient(${color?.gradient?.angle}deg,${setGradient(color.gradient)})`:'none'}">
 						</div>
-					</div>
-					<div style="width: 100%;">
-						<span class="started_btn" @click="clearCurrentColor">{{ $t('ColorboardUpload.Clear') }}</span>
+						<div class="delete" v-if="color.rgba?.r" @click="clearCurrentColor(index)">
+							<span class="icon iconfont icon-shanchu"></span>
+						</div>
 					</div>
 				</div>
 				<div class="upload_right_header">
@@ -446,13 +446,13 @@ export default defineComponent({
         },
 
         //清除当前的颜色
-        clearCurrentColor(){
+        clearCurrentColor(index){
             this.selectColor = {}
             // this.fileList = []
 			this.reviewColor={}
-			this.colorList[this.selectIndex] = {}
+			this.colorList[index] = {}
             this.pantongName = ''
-			this.colorList[this.selectIndex] = {}
+			this.colorList[index] = {}
 			let colorList =this.colorList.filter((v) => Object.keys(v).length)
 			this.setColorboardList(colorList)
 
@@ -667,7 +667,7 @@ export default defineComponent({
             this.store.commit('setColorboardList',newColorList)
         },
 
-        recollection(){
+        openSetData(){
             let colorList = this.store.state.UploadFilesModule.allBoardData.colorBoards
 			let hex
             colorList.forEach((ele, index) => {
@@ -894,6 +894,8 @@ export default defineComponent({
 			height: 100%;
 			display: flex;
 			flex-direction: column;
+			flex: 1;
+			overflow: hidden;
 		}
 		.upload_item{
 			position: relative;
@@ -937,6 +939,7 @@ export default defineComponent({
 			.modal_img_item{
 				width: calc(100% / 8 - 2rem);
 				aspect-ratio: 1 / 1;
+				position: relative;
 				>div{
 					width: 100%;
 					height: 100%;
@@ -945,6 +948,29 @@ export default defineComponent({
 				.select_upload_color{
 					border: 1px solid #000;
 				}
+				> .delete{
+					position: absolute;
+					width: 100%;
+					height: 30%;
+					bottom: 0;
+					display: none;
+					top: auto;
+					left: 0;
+					background: rgba(0, 0, 0, .2);
+					align-items: center;
+					justify-content: center;
+					cursor: pointer;
+					border: none;
+					> span{
+						font-size: 2rem;
+						color: #fff;
+					}
+				}
+				&:hover{
+					> .delete{
+					    display: flex;
+					}
+				}
 			}
 		}
 		.fi-rr-square-plus,.fi-rr-picture{
@@ -1074,7 +1100,8 @@ export default defineComponent({
 				.vc-chrome-saturation-wrap{
 					height: 100%;
 					// width: calc(16rem*1.2);
-					width: 100%;
+					// width: 100%;
+					width: 90%;
 					height: calc(14rem*1.2);
 					max-height: calc(17rem*1.2);
 					max-width: 23rem;
@@ -1124,7 +1151,8 @@ export default defineComponent({
 							
 						}
 						.vc-sketch-color-wrap{
-							background-image: url(@../../../../../../../assets/images/homePage/dropper.png);
+							// background-image: url(../../../../../../assets/images/homePage/dropper.png);
+							background-image: url(../../../../../assets/images/homePage/dropper.png);
 							// background-image: url(@../../../../assets/images/homePage/裁剪后1.jpg);
 							// background-image: url(@../../../../assets/images/homePage/裁剪后2.jpg);
 							// background-image: url(@../../../../assets/images/homePage/裁剪后3.jpg);
@@ -1264,6 +1292,7 @@ export default defineComponent({
 				align-items: center;
 				.color_setting_btn{
 					margin: 0 1rem;
+					font-size: 2rem;
 					color: rgba(0, 0, 0, 0.5);
 					&.active{
 						color: rgba(0, 0, 0, 0.7);

src/component/HomePage/index/model/collection/MoodboardUpload.vue

@@ -108,13 +108,13 @@
                 msg="Moodboard"
             ></Generate>
         </div>
-        <div v-show="moodboarList.length" class="modal_right">
-			<div class="modal_layout">
+        <div class="modal_right"  v-show="moodboarList.length >= 1 || edieShow">
+			<div class="modal_layout" >
 				<div class="modal_text">
 					<div>
 						{{ $t('MoodboardUpload.Thumbnail') }}
 					</div>
-					<div class="modal_btn started_btn"  @click="layout()">{{ $t('MoodboardUpload.layout') }}</div>
+					<div v-show="moodboarList.length > 1" class="modal_btn started_btn"  @click="layout()">{{ $t('MoodboardUpload.layout') }}</div>
 				</div>
 				<div class="modal_img" >
 					<div class="modal_img_item" v-for="item,index in moodboarList" :key="item" @click="deleteFile(item)">
@@ -125,7 +125,7 @@
 					</div>
 				</div>
 			</div>
-			<div v-show="moodboarList.length > 1 || edieShow" class="modal_accomplish">
+			<div class="modal_accomplish" v-show="modalImg[0]?.id || loadingShow">
 				<div class="modal_text">
 					<div>{{ $t('MoodboardUpload.selected') }}</div>
 					<div class="modal_btn started_btn" @click.stop="changeTemplateModal()">{{ $t('MoodboardUpload.Edit') }}</div>
@@ -358,13 +358,13 @@ export default defineComponent({
 				this.edieShow = false
 			}
         },
-        recollection() {
+        openSetData() {
             let arr = JSON.parse(
                 JSON.stringify(
                     this.store.state.UploadFilesModule.allBoardData
                         .moodboardFiles
                 )
-            );
+            ) || [];
 			let disposeMoodboard = JSON.parse(
                 JSON.stringify(
                     this.store.state.UploadFilesModule.allBoardData

src/component/HomePage/index/model/collection/PrintboardUpload.vue

@@ -152,7 +152,7 @@
 							</label>
 						</div>
 						<div class="moreBox" @click.stop> 
-							<more :moreList="['edit','down','enlargement']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
+							<more :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
 						</div>
 					</div>
 				</div>
@@ -551,7 +551,7 @@ export default defineComponent({
             });
         },
 
-        recollection(){
+        openSetData(){
 			this.useGenerate = {
 				imgId : '',
 				imgUrl:1,
@@ -559,7 +559,7 @@ export default defineComponent({
 				level2Type:'',
 				designType:'',
 			}
-            let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles))
+            let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.allBoardData.printboardFiles)) || []
 			let setboard = {
 				generate:[] as any,
 				material:[] as any,

src/component/HomePage/index/model/collection/SketchboardUpload.vue

@@ -89,6 +89,7 @@
                                 list-type="picture-card"
                                 :data="{
                                     ...upload,
+									gender:workspace.sex,
                                 }"
 								:multiple="!driver__.driver"
                                 :before-upload="beforeUpload"
@@ -170,7 +171,7 @@
 							</label>
 						</div>
 						<div class="moreBox" @click.stop> 
-							<more :moreList="['edit','down','enlargement']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
+							<more :moreList="['edit','down','enlargement','delete']" :item="item" :index="index" @deleteFile="deleteFile" @scaleImage="scaleImage"></more>
 						</div>
 					</div>
 				</div>
@@ -211,12 +212,14 @@ export default defineComponent({
         let store:any =useStore()
 
 		let sketchCatecoryList:any = computed(()=>{
-			return store.state.Workspace.workspacePosition
+			return store.state.Workspace.probjects.positionList
 		})
 		let sketchCatecoryAllList:any = computed(()=>{
 			return store.state.Workspace.workspaceAllPosition
 		})
-		let workspace:any = ref({})
+		let workspace:any = computed(()=>{
+			return store.state.Workspace.probjects
+		})
 		let sketchboardList:any = computed(()=>{
 			return store.state.UploadFilesModule.sketchboard
 		})
@@ -268,12 +271,10 @@ export default defineComponent({
             upload: {
                 isPin: 0,
                 level1Type: "Sketchboard",
-				gender:'',
                 timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
             },
             token: "",
             uploadUrl: "",
-			workspaceCom:{},
 			isTextarea:false,
 			isInputFocus:false,
         };
@@ -322,10 +323,6 @@ export default defineComponent({
 		}
 	},
 	watch:{
-		workspaceCom(newVal,oldVal){
-			this.workspace = newVal
-			this.upload.gender = newVal?.sexEnum?.value
-		},
 		sketchboardList:{
 			handler(newVal:any,oldVal:any){
 				if(newVal.length>=2 && this.driver__.driver&& newVal.length!=oldVal.length){
@@ -351,9 +348,6 @@ export default defineComponent({
         let isTest:any = getCookie('isTest')
         this.isTest =JSON.parse(isTest)
         this.uploadUrl = getUploadUrl();
-		this.workspaceCom = computed(()=>{
-			return  this.store?.state?.Workspace?.workspace
-		})
 		let Generate:any = this.$refs.Generate
 		if(this.driver__.driver){
 		Generate.searchPictureName = 'A detailed sketch of an elegant blouse with a high neck, flowing sleeves, and lace trim, highlighting texture and style.'
@@ -491,7 +485,7 @@ export default defineComponent({
 					generateDetailId:item.id,
 					level1Type:"Sketchboard",
 					level2Type: item.categoryValue?item.categoryValue:item.level2Type,
-					gender:this.workspace.sexEnum.value,
+					gender:this.workspace.sex,
 					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
 				}
 				Https.axiosPost(Https.httpUrls.generateLike, data).then(
@@ -514,7 +508,7 @@ export default defineComponent({
 			}
 
 		},
-        recollection() {
+        openSetData() {
 			this.useGenerate = {
 				imgId : '',
 				imgUrl:1,
@@ -527,12 +521,13 @@ export default defineComponent({
                     this.store.state.UploadFilesModule.allBoardData
                         .sketchboardFiles
                 )
-            );
+            ) || [];
 			let setboard = {
 				generate:[] as any,
 				material:[] as any,
 				moodboard:[] as any,
 			}
+			
 			arr.forEach((v:any)=>{
 				v.pin = v.pin == 1?true:false
 				this.sketchCatecoryAllList.forEach((item:any) => {
@@ -597,6 +592,7 @@ export default defineComponent({
 <style lang="less" scoped>
 .sketchboard_upload_modal {
 	height: 100%;
+	width: 100%;
     display: flex;
 	.modal_left,.modal_right{
 		background: #f7f8fa;
@@ -618,7 +614,6 @@ export default defineComponent({
                 align-items: center;
                 // padding: 0 2rem*1.2);
                 height: calc(4rem*1.2);
-                background: #fff;
                 border-radius: calc(0.8rem*1.2);
                 line-height: calc(4rem*1.2);
                 font-size: var(--aida-fsize1-8);

src/component/HomePage/index/model/collection/more.vue

@@ -4,19 +4,19 @@
 		<div class="more_box" v-show="show">
 			<div class="item" v-if="moreList.includes('edit')" @click.stop="setMore('edit')">
 				<i class="fi fi-rr-edit"></i>
-				{{ $t('more.edit') }}
+				<div class="text">{{ $t('more.edit') }}</div>
 			</div>
 			<div class="item" v-if="moreList.includes('enlargement')" @click.stop="setMore('enlargement')">
 				<i class="fi fi-bs-expand-arrows-alt"></i>
-				{{ $t('more.enlargement') }}
+				<div class="text">{{ $t('more.enlargement') }}</div>
 			</div>
 			<div class="item" v-if="moreList.includes('down')" @click.stop="setMore('down')">
 				<i class="fi fi-br-download"></i>
-				{{ $t('more.down') }}
+				<div class="text">{{ $t('more.down') }}</div>
 			</div>
 			<div class="item" v-if="moreList.includes('delete')" @click.stop="setMore('delete')">
 				<span class="icon iconfont icon-shanchu operate_icon"></span>
-				{{ $t('more.delete') }}
+				<div class="text">{{ $t('more.delete') }}</div>
 			</div>
 		</div>
     </div>
@@ -111,10 +111,14 @@ export default defineComponent({
 			text-align: left;
 			> .item{
 				display: flex;
+				align-items: center;
 				padding: 1rem 1.3rem;
 				> i,> span{
 					margin-right: 1rem;
 				}
+				> .text{
+					white-space: nowrap;
+				}
 				&:hover{
 					background: rgba(0,0,0,.3);
 				}

src/component/HomePage/index/model/deReconstruction/canvas/argument.vue

@@ -0,0 +1,183 @@
+<template>
+   <div class="canvasArgument">
+		<div class="label_item" v-show="
+			canvasGeneral.operation != 'movePosition' && 
+			canvasGeneral.operation != 'move' && 
+			canvasGeneral.brushwork.value != 'RibbonBrush' && 
+			canvasGeneral.brushwork.value != 'LongfurBrush'&& 
+			canvasGeneral.operation != 'zoomIn'  &&
+			canvasGeneral.operation != 'zoomOut' && 
+			canvasGeneral.operation != 'dashedPencil' && 
+			canvasGeneral.operation != 'dashed'">
+			<div >{{ $t('exportModel.Size') }}:</div>
+			<input @change="canvasGeneral.setFontFamily" type="range" @input="canvasGeneral.setPencilWidth" min="3" max="50" v-model="canvasGeneral.brushwork.width[canvasGeneral.operation]">
+		</div>
+		<div class="label_item" v-show="canvasGeneral.operation == 'pencil'">
+			<div >{{ $t('exportModel.Brushwork') }}:</div>
+			<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.brushwork.value"
+				style="width: 12rem "
+				@change="canvasGeneral.brushworkChange"
+				>
+				<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.brushList" :value="item.value">
+					<img style="width: 100%;" :src="item.url" alt="">
+				</a-select-option>
+			</a-select>
+		</div>
+		<div class="label_item texture" v-show="canvasGeneral.operation == 'texture'">
+			<div >{{ $t('exportModel.Texture') }}:</div>
+			<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.texture.value"
+				style="width: 12rem "
+				@change="canvasGeneral.textureValueChange"
+				>
+				<a-select-option class="label_select_item" v-for="item in canvasGeneral.texture.list" :value="item.value">
+					<img :src="item.url" alt="">
+				</a-select-option>
+			</a-select>
+		</div>
+		<div class="label_item" v-show="
+			canvasGeneral.operation != 'pencil' && 
+			canvasGeneral.operation != 'eraser'&&
+			canvasGeneral.operation != 'movePosition' && 
+			canvasGeneral.operation != 'move'&&
+			canvasGeneral.operation != 'text'&&
+			canvasGeneral.operation != 'texture'&&
+			canvasGeneral.operation != ''&& 
+			canvasGeneral.operation != 'zoomIn'  && 
+			canvasGeneral.operation != 'zoomOut' && 
+			canvasGeneral.operation != 'dashedPencil' && 
+			canvasGeneral.operation != 'dashed'">
+			<div >{{ $t('exportModel.FillBack') }}:</div>
+			<div class="leftAlign">
+				<i class="icon iconfont icon-tuceng1" @click="canvasGeneral.setOperationMode('fill')" :class="{active:canvasGeneral.operationMode == 'fill'}"></i>
+				<i class="icon iconfont icon-tuceng" @click="canvasGeneral.setOperationMode('border')" :class="{active:canvasGeneral.operationMode == 'border'}"></i>
+			</div>
+		</div>
+		<!-- <div class="label_item" v-show="canvasGeneral.operation == 'movePosition'">
+			<div >{{ $t('exportModel.Layer') }}:</div>
+			<div class="leftAlign">
+				<i class="icon iconfont icon-shangyiceng" @click="canvasGeneral.setLayerIndex('Front')"></i>
+				<i class="icon iconfont icon-shangyiceng2" @click="canvasGeneral.setLayerIndex('Forward')"></i>
+				<i class="icon iconfont icon-xiayiceng" @click="canvasGeneral.setLayerIndex('Backwards')"></i>
+				<i class="icon iconfont icon-shangyiceng1" @click="canvasGeneral.setLayerIndex('Back')"></i>
+			</div>
+		</div> -->
+		<div class="label_item" v-show="(canvasGeneral.operation == '' || canvasGeneral.operation == 'text' || canvasGeneral.createPatterning.textDataShow) && canvasGeneral.operation != 'movePosition' && canvasGeneral.operation != 'move'">
+			<div>Font Family</div>
+			<a-select ref="select" class="label_select" size="small" v-model:value="canvasGeneral.fontFamily"
+				style="flex: 1;width: 15rem;"
+				@change="canvasGeneral.setFontFamily"
+				:style="{'font-family':canvasGeneral.fontFamily}"
+				>
+				<a-select-option class="label_select_item" v-for="item in canvasGeneral.pencilList.textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
+					{{item.name}}
+				</a-select-option>
+			</a-select>
+		</div>
+		<div class="label_item" style="margin-left: auto;">
+			<span style="margin-right: 2rem;">Show Models</span>
+			<a-switch v-model:checked="isShowBg" @change="showBg" />
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+	import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
+	export default defineComponent({
+		components:{},
+		setup(){
+		    let testModal = ref(true)
+			let canvasGeneral:any = inject('canvasObj')
+			const data = reactive({
+				colorHistoryList:[],
+				operation:'',
+				isShowBg:true,
+			})
+			const setOperation = (str:any)=>{
+				data.operation = str
+			}
+			const setOper = ()=>{
+				setOperation('')
+			}
+			document.addEventListener('click',setOper)
+			const closeModal = ()=>{
+				document.removeEventListener('click',setOper)
+			}
+			const showBg = ()=>{
+				canvasGeneral.showBg(data.isShowBg)
+			}
+			return {
+				canvasGeneral,
+				...toRefs(data),
+				testModal,
+				setOperation,
+				closeModal,
+				showBg,
+			}
+		}
+	});
+</script>
+
+<style lang='less' scoped>
+.canvasArgument{
+	display: flex;
+	flex-wrap: wrap;
+	height: 100%;
+	.label_item{
+		margin-right: 2rem;
+		position: relative;
+		display: flex;
+		align-items: center;
+		.leftAlign{
+			display: flex;
+		}
+		.labelHover_show{
+			position: absolute;
+			width: 100%;
+			height: 10rem;
+			top: 100%;
+			z-index: 2;
+			display: block;
+			border-radius: 4px;
+			border: 1px solid;
+			padding: .5rem 1rem;
+			background: #fff;
+			div{
+				width: 2rem;
+				height: 2rem;
+				margin-right: .5rem;
+				margin-bottom: .5rem;
+				display: inline-block;
+				cursor: pointer;
+			}
+		}
+		input{
+			height: 100%;
+			width: 12rem;
+		}
+		&.wH input{
+			width: 5rem;
+		}
+		.title{
+			margin-right: 1rem;
+		}
+		.icon-xiala{
+			cursor: pointer;
+			transform: rotate(0deg);
+			height: 4rem;
+			width: 4rem;
+			transition: all .3s;
+			line-height: 4rem;
+			text-align: center;
+			&.active{
+				transform: rotate(180deg);
+			}
+		}
+	}
+	.label_item:hover{
+		// .labelHover_show{
+		// 	display: flex;
+		// }
+	}
+}
+
+</style>

src/component/HomePage/index/model/deReconstruction/canvas/canvasContent.vue

@@ -0,0 +1,118 @@
+<template>
+	<div class="canvasContent_box">
+		<div class="canvasContent" ref="canvasScaleDom">
+			<div class="generalCanvas_center canvas" ref="canvasDom">
+				<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="canvasGeneral.pencilbtnStyle"></div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+	import { defineComponent,computed,reactive,nextTick,toRefs,inject,createVNode, onMounted} from 'vue'
+	import { Modal,message } from 'ant-design-vue';
+	import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+	import { useI18n } from 'vue-i18n'
+	import { useStore } from "vuex";
+	export default defineComponent({
+		component:{},
+		setup(props,{emit}){
+			const store = useStore();
+			let {t} = useI18n()
+			let canvasType = inject('canvasType')
+			let canvasGeneral:any = inject('canvasObj')
+			const data:any = reactive({
+				canvasDom:null,
+				isShowMark:false,
+				pencilbtnStyle:{},
+				isCanva:false,
+				selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+			})
+			const dataDom = reactive({
+				canvasScaleDom:null as any,
+			})
+			const createCanvas = ()=>{
+				console.log(123123,data.isCanvas)
+				if(data.isCanva)return
+				nextTick(async ()=>{
+					let width = dataDom.canvasScaleDom.offsetWidth
+					let canvasSize = {width,height:width}
+					data.isCanva = true
+					let img = data.selectObject.model.url
+					await canvasGeneral.canvasInit(data.canvasDom,canvasSize,img,'',{noErasable:true})
+					let oldCanvas = store.state.HomeStoreModule.canvasData.deReconstruction
+					if(oldCanvas)canvasGeneral.setLoadFromJSON(oldCanvas, () => {});
+					// if(oldCanvas)canvasGeneral.canvas.loadFromJSON(oldCanvas, () => {});
+				})
+			}
+			const openMode = (data:any)=>{
+				let {yes,no} = data
+				console.log(yes,no);
+				Modal.confirm({
+						title: '是否栅格化',
+						icon: createVNode(ExclamationCircleOutlined),
+						okText: 'Yes',
+						cancelText: 'No',
+						mask:false,
+						centered:true,
+						onOk() {
+							yes()
+						},
+						onCancel(){
+							no()
+						}
+					});
+				yes()
+			}
+			const openSetData = ()=>{
+				createCanvas()
+			}
+			onMounted(()=>{
+			})
+			return {
+				canvasGeneral,
+				...toRefs(data),
+				...toRefs(dataDom),
+				openSetData,
+			}
+		}
+	});
+</script>
+
+<style lang='less' scoped>
+.canvasContent_box{
+	height: 100%;
+	width: 100%;
+	// padding: 2rem;
+	background: #e6e6e6;
+	.canvasContent{
+		height: 100%;
+		width: 100%;
+		position: relative;
+	}
+}
+
+.generalCanvas_center{
+	width: 100%;
+	height: 100%;
+	position: relative;
+	overflow: hidden;
+	&.canvas{
+	}
+	.editFrontBack_pencilbtn{
+		position: absolute;
+		z-index: 1;
+		border-radius: 50%;
+		border: 1px solid #000;
+		pointer-events: none;
+		transform: translate(-50%,-50%);
+	}
+	:deep(.canvas-container){
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%,-50%);
+		// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
+	}
+}
+
+</style>

src/component/HomePage/index/model/deReconstruction/canvas/detail.vue

@@ -0,0 +1,305 @@
+<template>
+   <div class="detail" ref="detailDom"
+   @mousemove="mousemove($event)"
+	@touchmove="touchmove($event)"
+   >
+		<div class="layer">
+			<div class="layer-item button" @click="canvasGeneral.createLayer">
+				新建图层
+			</div>
+			<div class="layer-item-box-scroll">
+				<div class="layer-item-box" :style="{'height':layerList.length * 6 + 'rem'}">
+					<div class="layer-item" 
+						v-for="item,index in layerList" 
+						:key="item" 
+						:style="item?.style"
+						@click="canvasGeneral.selectLayer(item.id)"
+						@mousedown="mousedown($event,item,index)"
+						@touchstart="touchstart($event,item,index)"
+						
+						@contextmenu="openMenu($event,item,index)"
+
+						:class="{'active':item.id == canvasGeneral.layer.selectLayer.id}">
+						<!-- <div @click.stop="canvasGeneral.layerShowHide(item.id,item)">{{ item.isShow }}</div> -->
+						<i class="fi" :class="[(item.isShow)?'fi-rr-eye':'fi-rr-eye-crossed']" @click.stop="canvasGeneral.layerShowHide(item.id,item)"></i>
+						<img :src="item.img" alt="">
+						<div>
+							{{ item.name }}
+						</div>
+						<div @click.stop="canvasGeneral.layerDelete(index,item.id)" :class="{noDelete:canvasGeneral.layer.list.length == 1}">删除</div>
+					</div>
+				</div>
+			</div>
+			
+		</div>
+		<div class="layer-menu" :style="styleMenu">
+			<div class="layer-menu-item" @click="canvasGeneral.copyLayer(itemMenu.id)">复制</div>
+			<div class="layer-menu-item" @click="canvasGeneral.layerDelete(itemMenu.index,itemMenu.id)">删除</div>
+			<div class="layer-menu-item" v-if="itemMenu.groupType == 'Object'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Grid')">设置栅格化</div>
+			<div class="layer-menu-item" v-if="itemMenu.groupType == 'Grid'" @click="canvasGeneral.setGridOrObject(itemMenu.id,'Object')">取消栅格化</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+	import { defineComponent,ref,reactive,nextTick,toRefs,inject,watch,computed} from 'vue'
+	import { getMousePosition } from "@/tool/mdEvent";
+
+	export default defineComponent({
+		component:{},
+		setup(){
+			let canvasGeneral:any = inject('canvasObj')
+			const data = reactive({
+				detailDom:null as any,
+				layerList:computed(()=>canvasGeneral.layer.list) as any,
+				styleMenu:{
+					left:0+'px',
+					top:0+'px',
+					display:'none',
+				},
+				itemMenu:{} as any,
+			})
+			watch(()=>canvasGeneral.layer.list.length, (newValue, oldValue) => {
+				let sortedArr = data.layerList.map((item:any) => ({ ...item })).sort((a:any, b:any) => b.index - a.index)
+				sortedArr.forEach((item:any,index:any)=>{
+					item.index = sortedArr.length - index
+				})
+				data.layerList.forEach((item:any) => {
+					//图层高度50px 下边距10px
+					sortedArr.forEach((sortedArrItem:any)=>{
+						if(item.id == sortedArrItem.id){
+							item.index = sortedArrItem.index
+						}
+						let style = {
+							top:(data.layerList.length - item.index) * 60 + 'px',
+							transition:'all .3s',
+						}
+						item.style = style
+					})
+					
+				});
+			},{immediate:true});
+			const incident:any = reactive({
+				isDown:false,
+				selectStyleTop:null,
+				selectStyle:null,
+				downPoint:null,
+				select:null,
+				radius:25,
+			})
+			const openMenu = (event:any,item:any,index:number)=>{
+				if(event.preventDefault)event.preventDefault();
+				data.itemMenu = item;
+				data.itemMenu.index = index
+				let position = data.detailDom.getBoundingClientRect();
+				data.styleMenu = {
+					left:event.clientX - position.left+'px',
+					top:event.clientY - position.top+'px',
+					display:'block',
+				}
+			}
+			document.onclick = ()=>{
+				data.styleMenu.display = 'none'
+				data.itemMenu = {};
+			}
+			let mousedown = (event:any,item:any,index:number)=>{
+				if(event.button != 0)return
+				let e:any = getMousePosition(event,false)
+				mouseDownOperation(e,item,index)
+			}
+			let ipadDownTime:any = null
+			let touchstart = (event:any,item:any,index:number)=>{
+				let e:any = getMousePosition(event,true)
+				mouseDownOperation(e,item,index)
+				clearTimeout(ipadDownTime)
+				ipadDownTime = setTimeout(()=>{
+					openMenu(e,item,index)
+				},1000)
+
+			}
+			let mouseDownOperation = (e:any,item:any,index:number)=>{
+			    incident.isDown = true
+				incident.selectStyleTop = item.style.top
+				incident.selectStyle = item.style
+				incident.selectStyle.transition = 'none'
+				incident.select = item
+				incident.downPoint = e.clientY
+			}
+
+			let mousemove = (event:any)=>{
+				let e:any = getMousePosition(event,false)
+				mouseMoveOperation(e)
+			}
+			let touchmove = (event:any)=>{
+				let e:any = getMousePosition(event,true)
+				clearTimeout(ipadDownTime)
+				if(data.styleMenu.display != 'none')data.styleMenu.display = 'none'
+				mouseMoveOperation(e)
+			}
+			let mouseMoveOperation = (e:any)=>{
+			    if(incident.isDown){
+					let domTop = Number(incident.selectStyleTop.split('px')[0])
+					
+					let gTop = domTop + (e.clientY - incident.downPoint)
+					if(gTop < 0){
+						gTop = 0
+					}
+					incident.select.style.top = gTop + 'px'
+					data.layerList.forEach((item:any,index:number) => {
+						let itemTop = Number(item.style.top.split('px')[0])
+						if(Math.abs(gTop - itemTop) < 30 && item.id != incident.select.id){
+							let itemIndex = item.index
+							// if(gTop - itemTop > 0){
+							// 	console.log('从下往上');
+							// }
+							// if(gTop - itemTop < 0){
+							// 	console.log('从上往下');
+							// }
+							item.index = incident.select.index	
+							incident.select.index = itemIndex
+							
+						}
+					})
+					sort(data.layerList,'move')
+				}
+			}
+			const mouseUp = ()=>{
+				if(data.styleMenu.display == 'none')clearTimeout(ipadDownTime)
+				if(incident.isDown){
+					if(incident.selectStyle)incident.selectStyle.transition = 'all .3s'
+					incident.selectStyleTop = null
+					incident.isDown = false
+					incident.selectStyle = null
+					incident.select = null
+					sort(data.layerList,'up')
+				}
+			}
+			document.onmouseup = mouseUp
+			document.ontouchend = mouseUp
+			//排序
+			let time:any = null
+			let sort = (list:any,str:string)=>{
+				clearTimeout(time)
+				// list = list.sort((a:any, b:any) =>{
+				// 	return b.index - a.index; 
+				// });
+				list.forEach((item:any) => {
+					if(str == 'move'){
+						if(item.id != incident.select.id)item.style.top = (list.length - item.index) * 60 + 'px'
+					}else{
+						item.style.top = (list.length - item.index) * 60 + 'px'
+					}
+				});
+				if(str == 'up')time = setTimeout(()=>canvasGeneral.upLayerIndex(list),500)
+				
+			}
+			return {
+				canvasGeneral,
+				...toRefs(data),
+				openMenu,
+				mousedown,
+				touchstart,
+				mousemove,
+				touchmove,
+			}
+		}
+	});
+</script>
+
+<style lang='less' scoped>
+.detail{
+	width: 100%;
+	height: 100%;
+	padding: 1rem;
+	border: 1px solid #dcdfe6;
+	position: relative;
+	* {
+		-webkit-user-drag: none;
+		-moz-user-drag: none;
+		-ms-user-drag: none;
+		user-drag: none;
+		-moz-user-select: none;
+		-webkit-user-select: none;
+		-ms-user-select: none;
+		-khtml-user-select: none;
+		user-select: none;
+	}
+	.layer{
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		.layer-button{
+
+		}
+		.layer-item{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: .5rem 2rem;
+			border: 1px solid #e6e6e6;
+			margin-bottom: 10px;
+			height: 50px;
+			border-radius: 4px;
+			i{
+				font-size: 18px;
+			}
+			&.active{
+				background: #e6e6e6;
+			}
+			.noDelete{
+				background: #e6e6e6;
+				opacity: .4;
+				pointer-events: none;
+			}
+			&.button{
+				justify-content: center;
+				cursor: pointer;
+			}
+			img{
+				height: 100%;
+				width: 35px;
+				object-fit: contain;
+			}
+			div{
+				cursor: pointer;
+			}
+			&:last-child{
+				margin-bottom: 0;
+			}
+		}
+		.layer-item-box-scroll{
+			flex: 1;
+			overflow-y: auto;
+			.layer-item-box{
+				position: relative;
+				.layer-item{
+					position: absolute;
+					width: 100%;
+				}
+			}
+		}
+		
+	}
+	.layer-menu{
+	    position: absolute;
+		width: 60%;
+		line-height: 4rem;
+		background: #fff;
+		border-radius: 4px;
+		border: 1px solid;
+		overflow: hidden;
+		>div{
+			border-bottom: 1px solid;
+			padding: 0 2rem;
+			cursor: pointer;
+		}
+		>div:hover{
+			background: #e6e6e6;
+		}
+		>div:last-child{
+			border-bottom: none;
+		}
+	}
+}
+
+</style>

src/component/HomePage/index/model/deReconstruction/canvas/index.vue

@@ -0,0 +1,221 @@
+<template>
+	<div class="generalCanvas">
+		<div class="argument-box">
+			<argument ref="argument" v-if="canvasObj.canvas"></argument>
+		</div>
+		<div class="canvasBox">
+			<tool ref="tool" v-if="canvasObj.canvas" @toolLiquefaction="toolLiquefaction"></tool>
+			<div class="canvas">
+				<canvasContent ref="canvasContent"></canvasContent>
+			</div>
+			<!-- <div class="detail-box">
+				<detail ref="detail" v-if="canvasObj.canvas"></detail>
+			</div> -->
+		</div>
+		<div class="mark_loading" v-show="isShowMark">
+			<a-spin size="large" />
+		</div>
+	</div>
+	<liquefaction ref="liquefaction" @submitLiquefaction="submitLiquefaction"></liquefaction>
+</template>
+<script>
+import {defineComponent, toRefs, provide, h, ref, nextTick, onBeforeUnmount, reactive, onMounted,
+} from "vue";
+import {message} from 'ant-design-vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from "vue-i18n";
+import canvasGeneral from "@/tool/canvasGeneralCopy";
+import tool from "./tool.vue"
+import argument from "./argument.vue"
+import detail from "./detail.vue"
+import canvasContent from "./canvasContent.vue"
+import liquefaction from "@/component/modules/liquefaction.vue";
+
+
+export default defineComponent({
+    components: {
+		tool,
+		argument,
+		detail,
+		canvasContent,
+		liquefaction,
+    },
+	emits:['setGenerateImg'],
+    setup(props,{emit}) {
+		const { t } = useI18n();
+		const store = useStore();
+		const isShowMark = ref(false)
+		const component = reactive({
+			argument:ref(null),tool:ref(null),detail:ref(null),canvasContent:ref(null)
+		})
+		const dataDom = reactive({
+			canvasContent:null,
+		})
+		let liquefaction = ref(null)
+		let liquefactionData = ref()
+		let groupDashed = ref(null)//用来判断是否需要对group添加img
+		let canvasType = 'export'
+		let canvasObj = reactive(new canvasGeneral('zz'))
+		provide('canvasType',canvasType)
+		provide('canvasObj',canvasObj)
+		provide('isShowMark',isShowMark)
+		const close = ()=>{
+			component.forEach((item)=>{
+				if(item.value.closeModal)item.value.closeModal()
+			})
+		}
+		
+		let expoet = ()=>{
+			console.log( canvasObj.selectExport());
+			console.log( canvasObj.allExport());
+
+		}
+		const setLiquefaction = async ()=>{//进入液化页面
+			canvasObj.getLiquefactionImgObj().then((data)=>{
+				if(data?.img){
+					liquefactionData.value = data
+					liquefaction.value.init(data.img)
+				}else {
+					message.info(t('exportModel.jsContent6'))
+					return null;
+				}
+			})
+			
+		}
+		const toolLiquefaction = ()=>{//工具点击按钮
+			setLiquefaction()
+		}
+		const submitLiquefaction = (rv)=>{//液化回参
+			canvasObj.setLiquefactionImgObj(liquefactionData.value,rv)
+			// liquefactionData.value.setSrc(rv, (value)=>{
+			// 	// liquefactionData.value.scaleToWidth(originalWidth);
+			// 	// liquefactionData.value.scaleToHeight(originalHeight);
+			// 	delete liquefactionData.value.minioUrl
+			// 	if(groupDashed.value && groupDashed.value._objects.length == 1){
+			// 		value.set({
+			// 			left:-groupDashed.value.width/2,	
+			// 			top:-groupDashed.value.height/2,
+			// 		})
+			// 		groupDashed.value.insertAt(value)
+			// 		// canvasObj.addDashedImg(value)
+			// 	}
+			// 	canvasObj.canvas.renderAll();
+			// 	canvasObj.updateCanvasState()
+			// });
+		}
+		const openSetData = ()=>{
+			dataDom.canvasContent.openSetData()
+		}
+		const addImage = (data)=>{
+			canvasObj.addImage(data)
+		}
+		const getData = async ()=>{
+			await canvasObj.detailSubmit().then((img)=>{
+				emit('setGenerateImg',img)
+			})
+		}
+		const getCanvasData = ()=>{
+			var json = canvasObj.canvas.toJSON(['src','minioUrl','custom','perPixelTargetFind','hasBorders','selectable','hasControls','erasable']);
+			// console.log(JSON.stringify(json));
+			json.objects.forEach(item=>{
+				if(item.type == 'image'){
+					delete item.src
+				}
+			})
+			let canvasExport = {
+				canvas:json,
+				groupList: canvasObj.layer.list
+			}
+			return canvasExport
+		}
+        onMounted(() => {
+		});
+		onBeforeUnmount(()=>{
+			// canvasGeneral.canvasClear()
+		})
+        return {
+			...toRefs(dataDom),
+			isShowMark,
+			liquefaction,
+			canvasObj,
+			close,
+			expoet,
+			toolLiquefaction,
+			submitLiquefaction,
+			openSetData,
+			addImage,
+			getData,
+			getCanvasData,
+        };
+    },
+    data(prop) {
+        return {
+		};
+    },
+	computed: {
+	},
+    watch: {
+      
+    },
+    mounted() {},
+
+    methods: {
+		
+	},
+});
+</script>
+<style lang="less" scoped>
+.generalCanvas{
+	width: 100%;
+	height: 100%;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	.argument-box,
+	.canvasBox,
+	.detail-box{
+		:deep(i){
+			font-size: 2.5rem;
+			cursor: pointer;
+			width: 3rem;
+			height: 3rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-shrink: 0;
+			transition: all .3s;
+			margin-bottom: .5rem;
+			&.active{
+				border: 1px solid;
+				border-radius: .4rem;
+			}
+			&.icon-xiala{
+				transform: rotate(-90deg);
+			}
+			&.icon-xialaActive{
+				transform: rotate(90deg);
+			}
+		}
+	}
+	.argument-box{
+		margin-left: 4rem;
+		height: 4rem;
+		margin-bottom: 1rem;
+	}
+	.canvasBox{
+		flex: 1;
+		overflow: hidden;
+		display: flex;
+		.canvas{
+			flex: 1;
+			overflow: hidden;
+		}
+	}
+	.detail-box{
+		width: 20%;
+		margin-left: 1rem;
+	}
+}
+</style>

src/component/HomePage/index/model/deReconstruction/canvas/tool.vue

@@ -0,0 +1,167 @@
+<template>
+   <div class="canvasTool">
+		<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
+		<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
+		<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasGeneral.operation == 'pencil'}"></i>
+		<i class="fi fi-rr-hand-paper" @click="setOperation('move')" :class="{active:canvasGeneral.operation == 'move'}"></i>
+		<i class="icon iconfont icon-move" @click="setOperation('movePosition')" :class="{active:canvasGeneral.operation == 'movePosition'}"></i>
+		<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasGeneral.operation == 'eraser'}"></i>
+		<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''"  @click.stop="setCloseNav('tool')"></i> -->
+		<i class="fi fi-rr-square-dashed" @click="setOperation('dashed')" :class="{active:canvasGeneral.operation == 'dashed'}"></i>
+		<i class="fi fi-rr-scalpel-path" @click="setOperation('dashedPencil')" :class="{active:canvasGeneral.operation == 'dashedPencil'}"></i>
+		<i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:canvasGeneral.operation == 'zoomIn'}"></i>
+		<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:canvasGeneral.operation == 'zoomOut'}"></i>
+		<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
+		<div class="label_item uploadImage">
+			<i class="icon fi fi-br-upload" ></i>
+			<input type="file" @change="uploadImage">
+		</div>
+		<i class="icon iconfont" @click="setOperation('text')" :class="{active:canvasGeneral.operation == 'text'}">T</i>
+		<i class="icon iconfont icon-xiala" :class="{'icon-xialaActive':isMove}" @click.stop="openMore"></i>
+		<div class="btnModal" v-show="isMove" :style="moveStyle">
+			<!-- <i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:canvasGeneral.operation == 'fold'}"></i> -->
+			<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:canvasGeneral.operation == 'rect'}"></i>
+			<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:canvasGeneral.operation == 'line'}"></i> -->
+			<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:canvasGeneral.operation == 'circle'}"></i> -->
+			<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:canvasGeneral.operation == 'triangle'}"></i>
+			<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:canvasGeneral.operation == 'ellipse'}"></i>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent,ref,reactive,nextTick,toRefs,inject} from 'vue'
+import {base64ToFile} from '@/tool/util'
+import { Https } from "@/tool/https";
+	export default defineComponent({
+		component:{},
+		emits:['toolLiquefaction'],
+		setup(props,{emit}){
+			let canvasGeneral:any = inject('canvasObj')
+			let isShowMark:any = inject('isShowMark')
+			const data:any = reactive({
+				isMove:false,
+				moveStyle:{},
+			})
+			const uploadImage = (event:any)=>{
+				isShowMark.value = true
+				const file = event.target.files[0];
+				let input = event.target
+				setOperation('movePosition')
+				if (file) {
+					const reader = new FileReader();
+					reader.onload = (e:any) => {
+						let file = base64ToFile(e.target.result,'upload')
+						let formData = new FormData();
+						formData.append("file", file);
+						let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+						Https.axiosPost(Https.httpUrls.canvasElementUpload, formData,config).then((rv)=>{
+							rv.imgUrl = rv.minioUrl
+							isShowMark.value = false
+							canvasGeneral.addImage(rv)
+						})
+						input.value = ''
+					};
+					reader.readAsDataURL(file);
+				}
+			}
+			const historyState = (str:any)=>{
+				canvasGeneral.historyState(str)
+			}
+			const setOperation = (str:any)=>{
+				canvasGeneral.setOperation(str)
+			}
+			const openMore = (e:any)=>{
+				data.isMove=!data.isMove
+				if(data.isMove){
+					let domPoint = e.target.getBoundingClientRect()
+					let domParentPoint = e.target.parentElement.getBoundingClientRect()
+					const left = domPoint.left - domParentPoint.left;
+					const top = domPoint.top - domParentPoint.top;
+
+					data.moveStyle.top = top + 'px'
+					data.moveStyle.left = left + domPoint.width + 2 + 'px'
+				}
+			}
+			const setMore = ()=>{
+				data.isMove = false
+			}
+			let setLiquefaction = ()=>{
+				emit('toolLiquefaction')
+			}
+			document.addEventListener('click',setMore)
+			const closeModal = ()=>{
+				document.removeEventListener('click',setMore)
+			}
+			return {
+				canvasGeneral,
+				...toRefs(data),
+				uploadImage,
+				historyState,
+				setOperation,
+				openMore,
+				closeModal,
+				setLiquefaction,
+			}
+		}
+	});
+</script>
+
+<style lang='less' scoped>
+.canvasTool::-webkit-scrollbar{
+	display: none;
+}
+.canvasTool{
+	display: flex;
+	flex-direction: column;
+	position: relative;
+	align-items: center;
+	&.leftAlign{
+		justify-content: flex-start;
+	}
+	&.leftAlign{
+		justify-content: flex-start;
+	}
+	
+	.uploadImage{
+		width: 3rem;
+		height: 3rem;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		i{
+			zoom:.8;
+		}
+		input{
+			height: 0;
+			width: 0;
+			border: none;
+		}
+	}
+	.uploadImage{
+		position: relative;
+		input{
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			left: 0;
+			top: 0;
+			opacity: 0;
+			z-index: 2;
+			cursor: pointer;
+		}
+	}
+	.btnModal{
+		position: absolute;
+		z-index: 2;
+		background: #fff;
+		top: 0;
+		border: 1px solid;
+		display: flex;
+		padding: .5rem 1rem;
+		border-radius: 4px;
+	}
+}
+
+</style>

src/component/HomePage/index/model/deReconstruction/index.vue

@@ -0,0 +1,200 @@
+<template>
+	<div class="deReconstruction">
+		<div class="selectSektch itemBox">
+			<selectList @selectImgItem="selectImgItem" level1Type="Sketchboard" :randomId="false" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
+		</div>
+		<div class="canvas itemBox">
+			<canvasBox @setGenerateImg="setGenerateImg" ref="canvasBox"></canvasBox>
+		</div>
+		<div class="finished itemBox">
+			<div class="btnTop">
+				<div class="gallery_btn" @click="getCanvasImg">Generate line</div>
+				<div v-show="!generateImg?.[0]?.isLike" class="icon iconfont icon-jushoucang icon_like" @click="generateLike('like')"></div>
+				<div v-show="generateImg?.[0]?.isLike" class="icon iconfont icon-jushoucanggift" @click="generateLike('noLike')"></div>
+			</div>
+			<div class="content">
+				<img v-if="generateImg?.[0]?.url" :src="generateImg?.[0]?.url" alt="">
+				<sketchCategory v-if="generateImg?.[0]?.url" v-model:disignTypeList="sketchCatecoryList" :item="generateImg[0]" :isSpread="false"></sketchCategory>
+			</div>
+			<div class="btnBottom" @click="getCanvasData">
+				<div class="gallery_btn">Download</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, inject} from 'vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import selectList from '@/component/DetailCopy/detailLeft/module/selectList.vue'
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import canvasBox from "./canvas/index.vue";
+export default defineComponent({
+	components:{
+		selectList,sketchCategory,canvasBox
+	},
+	props:{
+	},
+	emits:[],
+	setup(props,{emit}) {
+		const store = useStore();
+		const data = reactive({
+			sketchCatecoryList:computed(()=>{
+				return store.state.Workspace.probjects.positionList
+			}),
+			generateImg:computed(()=>store.state.HomeStoreModule.deReconstruction) as any,
+		})
+		const setIsShowMark:any = inject('setIsShowMark')
+		const dataDom = reactive({
+			canvasBox:null as any,
+		})
+		const selectImgItem = (data:any)=>{
+			data.minioUrl = data.url
+			dataDom.canvasBox.addImage(data)
+		}
+		const openSetData = ()=>{
+			dataDom.canvasBox.openSetData()
+		}
+		const getCanvasImg = ()=>{
+			dataDom.canvasBox.getData()
+		}
+		const setGenerateImg = (base64:any)=>{
+			let value = {
+				"collagePicture": base64,
+				"gender": store.state.Workspace.probjects.sex,
+				"projectId": store.state.Workspace.probjects.id
+			}
+			setIsShowMark(true)
+			Https.axiosPost(Https.httpUrls.genSketchRecon,value).then((rv)=>{
+				if(rv){
+					data.sketchCatecoryList.forEach((item:any)=>{
+						if(item.value == rv.category){
+							rv.categoryValue = item.value
+							rv.category = item.name
+						}
+					})
+					rv.isLike = false
+					let value = {
+						list: [rv],
+						str:'add',
+						index:-1,
+					}
+					store.commit('setDeReconstruction',value)
+					setIsShowMark(false)
+				}
+			})
+		}
+		const generateLike = (str:string)=>{
+			if(data.generateImg[0].id == -1)return
+			if(str == 'like'){
+				let value={
+					"gender": store.state.Workspace.probjects.sex,
+					"generateDetailId": data.generateImg[0].id,
+					"level1Type": "Sketchboard",
+					"level2Type": data.generateImg[0].categoryValue,
+					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+				}
+				Https.axiosPost(Https.httpUrls.generateLike,value).then((rv)=>{
+					if(rv){
+						data.generateImg[0].isLike = true
+					}
+				})
+			}else{
+				let value = {
+					"generateDetailId": data.generateImg[0].id,
+					timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
+				}
+				Https.axiosGet(Https.httpUrls.generateDislike, {params:value}).then(
+					(rv) => {
+						data.generateImg[0].isLike = false
+					}
+				).catch(res=>{
+				});
+			}
+		}
+		const setCanvas = (str:string)=>{
+			dataDom.canvasBox.setCanvas(str)
+		}
+		const getCanvasData = ()=>{
+			let data = dataDom.canvasBox.getCanvasData()
+			return data
+		}
+		return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			selectImgItem,
+			openSetData,
+			getCanvasImg,
+			setGenerateImg,
+			generateLike,
+			getCanvasData,
+			setCanvas,
+		}
+	},
+	provide() {
+		return {
+		}
+	},
+})
+</script>
+<style lang="less" scoped>
+	.deReconstruction{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		display: flex;
+		> .itemBox{
+			margin-right: 2rem;
+			padding: 2rem;
+			background: #f7f8fa;
+			border-radius: 3rem;
+			// flex: 1;
+			&.selectSektch{
+				width: 37rem;
+				flex-shrink: 0;
+			}
+			&.canvas{
+				flex: 1;
+			}
+			&.finished{
+				width: 58rem;
+				display: flex;
+				flex-direction: column;
+				> .btnTop{
+					display: flex;
+					justify-content: space-between;
+					> .icon{
+						cursor: pointer;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						font-size: 2rem;
+						width: 6rem;
+						height: 6rem;
+						border: 1px solid;
+						border-radius: 50%;
+					}
+				}
+				> .content{
+					flex: 1;
+					// overflow: hidden;
+					margin: 10rem 0;
+					position: relative;
+					> img{
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+				}
+				> .btnBottom{
+					text-align: right;
+				}
+			}
+		}
+		> .itemBox:last-child{
+			margin-right: 0;
+		}
+	}
+</style>

src/component/HomePage/index/model/design/index.vue

@@ -8,32 +8,8 @@
 				<div class="designPage_body">
 					<div class="designPage_left" ref="hidden">
 						<div class="designPage_left_content" :class="{'active':(domHidden)}">
-							<!-- 空状态 start-->
-							<div class="home_left_null" v-show="!isHaveReviewCollection">
-								<div>
-									<div id="Guide_1_1" class="new_collection_button Guide_1_1" @click="startNewCollection()">
-										{{ $t('HomeView.GetStarted') }}
-									</div>
-								</div>
-								<div class="is_finish_loading" v-show="isFinishLoading">
-									<a-spin size="large"></a-spin>
-								</div>
-							</div>
-							<!-- 空状态 end-->
-
 							<!-- 有图状态 start-->
-							<div class="home_left_info" v-show="isHaveReviewCollection">
-								<div class="left_info_top">
-									<!-- <div class="button_second" @click="startNewCollection()">
-										{{ $t('HomeView.Start') }}
-									</div> -->
-									<div class="gallery_btn white button_margin" @click="recollection()">
-										{{ $t('HomeView.Edit') }}
-									</div>
-									<div class="gallery_btn white button_margin" @click="resetCollection()">
-										{{ $t('HomeView.Reset') }}
-									</div>
-								</div>
+							<div class="home_left_info">
 								<div class="left_info_content scroll_style">
 									<div class="left_info_content_body" ref="collection_canvas">
 										<NewCollectionReview id="collectionReview"></NewCollectionReview>
@@ -57,6 +33,7 @@
 						<!-- <div class="right_top" ref="hidden" :class="{'active':domHidden}"> -->
 							<div class="right_top_left">
 								<div class="gallery_btn white Guide_1_15" @click="designNewCollection()">
+								<!-- <div class="gallery_btn white Guide_1_15" @click="designNewCollection()"> -->
 									{{ $t('HomeView.Design') }}
 								</div>
 								<div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
@@ -203,8 +180,6 @@
 		</KeepAlive>
 		<productImg ref="productImg" @setTask="setTask"></productImg>
 		<!-- <DesignDetail ref="designDetail" @finishRedesign="finishRedesign"></DesignDetail> -->
-		<ExportNewCoolection id="exportNewCoolection"></ExportNewCoolection>
-
 		<!-- 导出缩略图的蒙层 start-->
 		<div class="mark_loading" v-show="isShowMark">
 			<a-spin size="large" />
@@ -235,7 +210,6 @@ import { defineComponent, h, ref, computed, reactive, toRefs, inject,provide,nex
 // import HeaderComponent from "@/component/HomePage/Header.vue";
 import CollectionModal from "@/component/HomePage/collectionModal.vue";
 import NewCollectionReview from "@/component/HomePage/NewCollectionReview.vue";
-import ExportNewCoolection from "@/component/HomePage/ExportNewCoolection.vue";
 import productImg from "@/component/HomePage/productImg.vue";
 import generalCanvas from "@/component/modules/generalCanvas.vue";
 import affiche from "@/component/HomePage/affiche.vue";
@@ -262,7 +236,6 @@ export default defineComponent({
 		CollectionModal,
 		NewCollectionReview,
 		DesignDetail,
-		ExportNewCoolection,
 		affiche,
 		productImg,
 		generalCanvas,
@@ -273,6 +246,7 @@ export default defineComponent({
   },
   deactivated() {
   },
+  props:['isState'],
 	setup(props,{emit}) {
 		const store = useStore();
 		let likeDesignCollectionList: any = computed(() => {
@@ -347,7 +321,7 @@ export default defineComponent({
 		})
 		let likeDesignItemIdList = ref([])
 		let workspacePosition:any = computed(()=>{
-			return store.state.Workspace.workspacePosition
+			return store.state.Workspace.probjects.positionList
 		})
 		let allBoardData:any = computed(()=>{
 			return store.state.UploadFilesModule.allBoardData})
@@ -440,8 +414,6 @@ export default defineComponent({
 		}
 
 		const setDeleteDesign = (value:any,index:any)=>{
-			console.log(value);
-			
 			store.commit("setDeleteDesignCollectionList",index);
 			let collItem = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId == value.designItemId)[0]
 			posiitonData.value.generateElList = posiitonData.value.generateElList.filter((item:any)=>item.userLikeSortId != value.designItemId)
@@ -451,8 +423,6 @@ export default defineComponent({
 					item.sort-=1
 				}
 			})
-			console.log(posiitonData.value.likeElList);
-			
 			moveItem('')
 		}
 		const cancelDeleteDesign = (index:any)=>{
@@ -670,7 +640,6 @@ export default defineComponent({
 	},
 	data() {
 		return {
-			isHaveReviewCollection: false,
 			isFinishLoading: false,
 			isShowMark: false, //导出的loading蒙层
 			indicator: h(LoadingOutlined, {
@@ -713,103 +682,25 @@ export default defineComponent({
 		sessionStorage.setItem('domHidden',JSON.stringify(this.domHidden))
 		sessionStorage.setItem('recycleDomHidden',JSON.stringify(this.recycleDomHidden))
 		sessionStorage.setItem('collValue',JSON.stringify(this.collValue))
-		this.sortDesignCollection()
-		window.removeEventListener('resize', this.setDesignItemPosition)
-
+		if(this.$props.isState)this.sortDesignCollection()
+		window.removeEventListener('resize', this.setItemPosition)
 	},
 	async mounted() {
-		
-		// if(JSON.parse( getCookie('isFirst') as any)){
-		// }
-		let test:any = getCookie('isTest')
-        let isTest =JSON.parse(test)
-		this.store.dispatch('get_clothingType')
-		//判断账号剩余时间是否太短
-		let isModalOne = JSON.parse(sessionStorage.getItem("isTimeOne") as any)
-	
-		if(!getCookie('isBeginner') || this.userDetail.systemUser == 0)return
-		// if(this.store.state.UserHabit.bindEmail.isBindEmail)return
-		if(!isModalOne){//判断是否是试用用户
-		// if(!isTest && !isModalOne){//判断是否是试用用户
-			await new Promise(async (resolve) => {
-				if(isTest){
-					openGuide()
-					resolve('')
-				}else{
-					await Https.axiosPost(Https.httpUrls.getExpiredTime,{}).then((rv: any) => {
-						if (rv) {
-							let dateNow = Date.now()
-							let date:any =  new Date(dateNow)
-							let rvDate:any = new Date(rv);
-							let diffInMilliseconds = Math.abs(date - rvDate); // 获取时间差的毫秒数
-							let days = Math.floor(diffInMilliseconds / (24 * 60 * 60 * 1000)); // 计算天数
-							let hours = Math.floor((diffInMilliseconds % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)); // 计算小时数
-							let minutes = Math.floor((diffInMilliseconds % (60 * 60 * 1000)) / (60 * 1000)); // 计算分钟数
-							if(days < 5){
-								setTimeout(() => {
-									let text = {
-										str:`${this.t('HomeView.jsContent4',{days:days,hours:hours})}<a href="https://code-create.com.hk/aida" target="_blank">${this.t('HomeView.jsContent8')}</a>`,
-										title:`${this.t('HomeView.jsContent7')}`,
-									}
-									this.affiche(text)
-								}, 500);
-							}else{
-								openGuide()
-							}
-							resolve('')
-						}else{
-							openGuide()
-							resolve('')
-						}
-					})
-				}
-				
-
-			})
-		}else if(!isModalOne && isTest){
-		}else{
-			openGuide()
-		}
-		let noRefresh = this.$route.params.noRefresh; //判断是否主动刷新还是路由跳转过来的 true 路由跳转过来的
 		window.addEventListener('beforeunload', (event)=>{
 			this.store.commit("clearAllCollection");
 		});
-		if (this.$route.name == "homePage") {
-			let colorBoards =
-				this.store.state.UploadFilesModule.allBoardData.colorBoards ||
-				[];
-			if (colorBoards.length) {
-				this.isHaveReviewCollection = true;
-			}
-		} else {
-			// this.store.commit("setUserGroupId", this.$route.params.id);
-			// this.store.commit("clearAllCollection");
-		}
-		if (this.$route.params.id) {
-			if(this.$route.params.type == 'History'){
-				this.getHistoryChoose(this.$route.params.id, "normal");
-			}else if(this.$route.params.type == 'Works'){
-				this.getWorks(this.$route.params.id, "normal");
-			}
-			this.store.commit("setDesignCollectionList",[]);
-		} else {
-			// this.store.commit("clearAllData");
-		}
-		// let dataa:any = {
-		// 	designItemId: 63094,
-		// 	designItemUrl: null,
-		// 	designOutfitId: 62798,
-		// 	designOutfitUrl:''
+		// if (this.$route.params.id) {
+		// 	if(this.$route.params.type == 'History'){
+		// 		this.getHistoryChoose(this.$route.params.id, "normal");
+		// 	}else if(this.$route.params.type == 'Works'){
+		// 		this.getWorks(this.$route.params.id, "normal");
+		// 	}
+		// 	this.store.commit("setDesignCollectionList",[]);
+		// } else {
 		// }
-		// let designDetail: any = this.$refs.designDetail;
-		// 	let data = {
-		// 		design: dataa,
-		// 		index: 0,
-		// 		collectionList: [],
-		// 		type: 'dislike',
-		// 	};
+		
 		// 	designDetail.showDesignDetailModal(data);
-		window.addEventListener('resize', this.setDesignItemPosition)
+		window.addEventListener('resize', this.setItemPosition)
 		this.setSystemDesigner(0)
 		this.setDesignItemStyle()
 	},
@@ -846,7 +737,7 @@ export default defineComponent({
 		// addTeam (team:any) {
 		// this.likeDesignCollectionList.push(team)
 		// },
-		setDesignItemPosition(){
+		setItemPosition(){
 			this.setSystemDesigner(0)
 			this.setDesignItemStyle()
 		},
@@ -855,8 +746,6 @@ export default defineComponent({
 			    let affiche:any = this.$refs.affiche
 				affiche.init(text)
 			})
-			
-			// affiche.afficheMask = true
 		},
 		
 		//判断模特和当前start的sketch是否匹配
@@ -918,13 +807,11 @@ export default defineComponent({
 					_this.store.commit("clearAllCollection");
 					_this.store.commit("setAllBoardDataChoose",{});
 					_this.store.commit("clearShowSketchboard",{});
-					_this.isHaveReviewCollection = false
 				}
 			});
 		},
 		//完成设计
 		finishCollection() {
-			this.isHaveReviewCollection = true;
 			this.isFinishLoading = false;
 		},
 		getContainer() {
@@ -1105,24 +992,25 @@ export default defineComponent({
 				moodboardPosition,
 			} = this.store.state.UploadFilesModule.allBoardData;
 			this.randomNum()
-			let workspace = this.store.state.Workspace.workspace
+			let workspace = this.store.state.Workspace.probjects
 			let data: any = {
 				colorBoards: this.getColorBoard(colorBoards),
 				// marketingSketchs: this.getBoardId(marketingSketchFiles),
 				moodBoards: this.getBoardId(moodboardFiles),
 				printBoards: this.getPrintId(printboardFiles),
 				sketchBoards: this.getSkecthBoard(sketchboardFiles),
-				moodboardPosition: JSON.stringify(moodboardPosition),
-				switchCategory: !workspace.overallSingle ?"": workspace.position,
-				singleOverall: !workspace.overallSingle ? "overall" : "single",
+				moodboardPosition: moodboardPosition?JSON.stringify(moodboardPosition):null,
+				switchCategory: workspace.type == "seriesDesign"?"": workspace.position.value,
+				singleOverall: workspace.type == "seriesDesign" ? "overall" : 'single',
 				systemScale: workspace.systemDesignerPercentage?workspace.systemDesignerPercentage*.01:.3,
 				// templateId: 3377,
-				templateId: workspace.mannequinId?workspace.mannequinId:'',
-				modelType:workspace.mannequinType,
-				modelSex:workspace.sex,
-				moodTemplateId: disposeMoodboard[0] ? String(disposeMoodboard[0].id) : null,
+				templateId: workspace.model.id,
+				modelType:workspace.model.type,
+				modelSex:workspace?.sex,
+				moodTemplateId: disposeMoodboard?.[0] ? String(disposeMoodboard[0].id) : null,
 				timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-				processId:this.designRandom
+				processId:this.designRandom,
+				projectId:workspace.id
 			};
 			// data.moodboardPosition = JSON.stringify(this.store.state.UploadFilesModule.moodboardPosition)
 			this.setSystemDesigner(0)
@@ -1130,16 +1018,10 @@ export default defineComponent({
 				num:0,
 				currentNum:0,
 			}
-			let isLoad = false
-			if(designCollectionId == -1){
-				isLoad = true
-			} else if (designCollectionId) {
+			if(designCollectionId) {
 				data.collectionId = designCollectionId;
 			}
-			if(!isLoad){
-				// this.designProgress = 0;
-				// this.isShowMark = true;
-			}
+		
 			let arr = []
 			for (let index = 0; index < 8; index++) {
 				let floor = Math.floor(Math.random() * 90000000) + 10000000
@@ -1189,6 +1071,7 @@ export default defineComponent({
 			this.designRandom = String(Math.floor(Math.random() * 9000000000000000) + 1000000000000000)
 		},
 		getBoardId(boardData: any) {
+			boardData = boardData || []
 			let dataList = boardData.map((v: any) => {
 				let data: any = {
 					id: v.resData.id,
@@ -1200,6 +1083,7 @@ export default defineComponent({
 		},
 
 		getPrintId(boardData: any) {
+			boardData = boardData || []
 			let dataList = boardData.map((v: any) => {
 				let data: any = {
 					id: v.resData.id,
@@ -1213,6 +1097,7 @@ export default defineComponent({
 		},
 
 		getSkecthBoard(boardData: any) {
+			boardData = boardData || []
 			let sketchBoards = boardData.map((v: any) => {
 				let data = {
 					designType: v.resData.designType,
@@ -1226,6 +1111,7 @@ export default defineComponent({
 		},
 
 		getColorBoard(boardData: any) {
+			boardData = boardData || []
 			let colorBoards = boardData.map((v: any) => {
 				let data = {
 					id: v.id,
@@ -1406,7 +1292,6 @@ export default defineComponent({
 				"setDesignCollectionId",
 				data.collection.collectionId
 			);
-			this.isHaveReviewCollection = true;
 			if (type === "normal") {
 
 				let likeDesignCollectionList = data.userLikeDetails.map(
@@ -1503,6 +1388,11 @@ export default defineComponent({
 			productImg.init(this.userGroupId)			
 			
 		},
+		openSetData(button:any){
+			if(button == 'design'){
+				this.designNewCollection()
+			}
+		},
 		//销毁图片详情
 		setDetailDestroy() {
 		    // let designDetail: any = this.$refs.designDetail;
@@ -1563,14 +1453,9 @@ export default defineComponent({
 .designPage {
 	width: 100%;
 	height: 100%;
-	padding-right:5rem;
-	// overflow: hidden;
-	// min-width: 1440px;
+	// padding-right:5rem;
+	overflow: initial !important;
 	position: relative;
-	// left: 50%;
-	// margin-left: -50%;
-	// transform: translateX(-50%);
-	
 	.page_content {
 		position: relative;
 		
@@ -1616,7 +1501,7 @@ export default defineComponent({
 			position: absolute;
 			width: 100%;
 			height: 100%;
-			padding-bottom: 4rem;
+			// padding-bottom: 4rem;
 			box-sizing: border-box;
 			z-index:1;
 			.designPage_body {
@@ -1646,71 +1531,16 @@ export default defineComponent({
 							padding-right: 0;
 							width: 0;
 						}
-						.home_left_null {
-							display: flex;
-							align-items: center;
-							justify-content: center;
-							text-align: center;
-							width: 100%;
-							height: 100%;
-							position: relative;
-							background: #f6f6fa;
-							border-radius: 2rem;
-							overflow: hidden;
-
-							.home_null_icon {
-								display: block;
-								width: 32.3rem;
-							}
-
-							.new_collection_button {
-								padding: .5rem 5rem;
-								height: 4rem;
-								line-height: 4rem;
-								background: #fff;
-								font-size: 1.3rem;
-								color: #000000;
-								margin: 1.2rem auto 0;
-								text-align: center;
-								cursor: pointer;
-								display: inline-block;
-								box-sizing: initial;
-								border: 2px solid #000;
-								font-weight: 600;
-								border-radius: 15px;
-							}
-
-							.is_finish_loading {
-								width: 100%;
-								height: 100%;
-								position: absolute;
-								left: 0;
-								top: 0;
-								background: #ffffff;
-								display: flex;
-								align-items: center;
-								justify-content: center;
-							}
-						}
-
 						.home_left_info {
 							height: 100%;
 							display: flex;
+							background: #f6f6fa;
+							border-radius: 2rem;
 							flex-direction: column;
-							.left_info_top {
-								padding: 0 0 1.3rem 0;
-								display: flex;
-
-								.button_margin {
-									margin-left: 2rem;
-								}
-							}
-
 							.left_info_content {
 								width: 100%;
 								height: calc(100% - 6.9rem);
 								overflow-y: auto;
-								background: #ffffff;
 								&.left_info_content::-webkit-scrollbar {
 									display: none;
 								}

src/component/HomePage/index/model/mannequin/index.vue

@@ -0,0 +1,428 @@
+<template>
+	<div class="mannequin">
+		<div class="top">
+			<div class="left">
+				<!-- <div class="text">Style：</div>
+				<div class="text" style="margin: 0 9rem 0 4rem;">{{ selectObject?.styleName }}</div>
+				<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div> -->
+				<div class="text">Style：</div>
+				<div class="generalModel_state" style="width: 20rem;">
+					<div class="generalModel_state_item" style="margin: 0; width: 100%;">
+						<a-select
+							v-model:value="selectObject.style"
+							:options="mannequinStyleList"
+							@change="setWorkspaceStyle"
+							style="width:100%"
+							size="large"
+							:fieldNames="{ label: 'name', value: 'value' }"
+						>
+							<template #suffixIcon
+								><span
+									class="icon iconfont icon-xiala"
+									style="color: #343579"
+								></span
+							></template>
+						</a-select>
+					</div>
+				</div>
+			</div>
+			<div class="right">
+				<div class="text" :class="{active:systemUser}">{{ $t('Habit.System') }}</div>
+				<a-switch class="switch" :disabled="libraryList?.[0]==null?true:false" :checked="!systemUser"  @click="setSystemUser" />
+				<div class="text" :class="{active:!systemUser}">{{ $t('Habit.User') }}</div>
+			</div>
+		</div>
+		<div class="model" v-mousewheel>
+			<div class="item" v-for="item,index in modelList" :key="item.id" :class="[item.id == selectObject.model.id?'active':'',!systemUser?'library':'']" @click="setSelectKey(item)">
+				<img :src="item.presignedUrl" alt="">
+				<span v-show="!systemUser" class="icon iconfont icon-tianxie" @click.stop="setEdit(item,!systemUser?'Library':'System','edit')"></span>
+				<span v-show="!systemUser" class="icon iconfont icon-shanchu" @click.stop="deleteSinglePic(item,index)"></span>
+				<span class="icon add" v-if="systemUser" :title="'Add to your library'">+</span>
+			</div>
+			<div class="uploadBox">
+				<div class="upload" v-if="!systemUser">
+					<a-upload
+						:capture="null"
+						:before-upload="beforeUpload"
+						:maxCount="1"
+						accept=".jpg,.png,.jpeg,.bmp"
+						@change="fileUploadChange"
+						>
+						<i class="fi fi-br-upload"></i>
+						<div style="margin-top: 1rem; font-size: 1.8rem;">Upload mannequin</div>
+					</a-upload>
+					
+				</div>
+			</div>
+			
+		</div>
+		<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle"></habitSetStyle>
+		<edit ref="edit" @submit="getModel"></edit>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted, watch} from 'vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import habitSetStyle from "@/component/Detail/habitSetStyle.vue";
+import edit from './edit.vue';
+import { Modal,message,Upload,CascaderProps } from 'ant-design-vue';
+export default defineComponent({
+	components:{
+		habitSetStyle,edit
+	},
+	props:{
+	},
+	setup(props,{emit}) {
+		const {t} = useI18n()
+		const store = useStore();
+		const data = reactive({
+			systemList:[],
+			libraryList:[],
+			modelList:[],
+			systemUser:true,
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+			mannequinStyleList:[],
+			mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//女性衣服位置
+		})
+		watch(()=>data.mannequinStyle,(newValue,oldValue)=>{
+			if(newValue != oldValue){
+				data.mannequinStyleList = JSON.parse(JSON.stringify(newValue))
+				data.mannequinStyleList.unshift({
+					name:'No style',
+					value:'',
+					id:'',  
+				})
+			}
+		},{immediate:true})
+
+		const dataDom = reactive({
+			habitSetStyle:null as any,
+			edit:null as any,
+		})
+		const getModel = ()=>{
+			let value = {
+				sex:data.selectObject.sex,
+				style:data.selectObject?.style?data.selectObject?.style:'',
+				ageGroup:store.state.Workspace.probjects.ageGroup,
+			}
+			Https.axiosGet(Https.httpUrls.getMannequins,{params:value}).then((rv: any) => {
+				if (rv) {
+					rv.forEach((item:any) => {
+						if(item.type == 'System'){
+							data.systemList = item.modelList
+						}else{
+							data.libraryList = item.modelList
+						}
+					});
+					if(data.libraryList?.[0]==null)data.systemUser=true
+					if(!data.systemUser){
+						data.modelList = data.libraryList
+					}else{
+						data.modelList = data.systemList
+					}
+				}
+			})
+		}
+		const setSelectKey = (item:any)=>{
+			let value = {
+				model:{
+					id:item.id,
+					url:item.presignedUrl,
+					type:data.systemUser?'System':'Library',
+				}
+			}
+			store.commit('setProbject',value)
+		}
+		const setSystemUser = ()=>{
+			data.systemUser = !data.systemUser
+			if(!data.systemUser){
+				data.modelList = data.libraryList
+			}else{
+				data.modelList = data.systemList
+			}
+		}
+		const setStyle = ()=>{
+			dataDom.habitSetStyle.init(data.selectObject);
+		}
+		const setWorkspaceStyle = (item:any,value:any)=>{
+			data.selectObject.styleName = value.name
+			data.selectObject.style = value.value
+			data.selectObject.styleId = value.id
+			getModel()
+		}
+		const openSetData = ()=>{
+
+		}
+		const setEdit = (item:any,type:any,editOrUpload:any)=>{
+			dataDom.edit.showPlacementModal(item,data.selectObject.sex,type,editOrUpload);
+		}
+		const beforeUpload = (file:any,fileList:any)=>{
+            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
+            if (!isJpgOrPng) {
+                message.info(t('LibraryPage.jsContent3'));
+            }
+            const isLt2M = file.size / 1024 / 1024 < 5;
+            if (!isLt2M) {
+                message.info(t('LibraryPage.jsContent4'));
+            }
+			if(isJpgOrPng && isLt2M){
+				// currentUploadFileNum = fileList.length
+            }else{
+                return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
+            }
+        }
+		const fileUploadChange = (data:any)=>{
+            let file = data.file
+			let reader = new FileReader();
+			reader.onload = (e:any) => {
+				let data_new;
+				data_new = window.URL.createObjectURL(new Blob([e.target.result]));
+				setEdit({url:data_new,file:file.originFileObj},'Library','upload')
+				
+			};
+			reader.readAsArrayBuffer(file.originFileObj);
+            
+        }
+		const deleteSinglePic = (item:any,index:number)=>{
+            Modal.confirm({
+                title: t('LibraryPage.jsContent1'),
+                icon: createVNode(ExclamationCircleOutlined),
+                okText: 'Yes',
+                cancelText: 'No',
+				mask:false,
+                centered:true,
+                onOk() {
+                    confirmDeletePic(item,index,'')
+                }
+            });
+		}
+		 //确定删除图片 有data则是单个
+		const confirmDeletePic = (item:any,index:any,nData:any)=>{
+			let newData = {
+				libraryIds:[item.id],
+				deleteModelConfirm:item.deleteModelConfirm?item.deleteModelConfirm : 0,
+				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,  
+			}
+			if(nData)newData = nData
+			Https.axiosPost(Https.httpUrls.batchDeleteLibrary, newData).then(
+				(rv: any) => {
+					getModel()
+					// let id = this.store.state.Workspace.workspace.id
+					// Https.axiosGet(Https.httpUrls.workspaceDetail,{params:{id:id}}).then((rv: any) => {
+					// 	if (rv) {
+					// 		if(rv.sexEnum.name == 'Female'){
+					// 			rv.mannequinUrl = rv.femalePresignedUrl
+					// 			rv.mannequinType = rv.mannequinFemaleType
+					// 			rv.mannequinId = rv.mannequinFemaleId
+					// 		}else if(rv.sexEnum.name == 'Male'){
+					// 			rv.mannequinUrl = rv.malePresignedUrl
+					// 			rv.mannequinType = rv.mannequinMaleType
+					// 			rv.mannequinId = rv.mannequinMaleId
+					// 		}
+					// 		this.store.commit("setWorkspace", rv);
+					// 	}
+					// })
+				}
+			).catch((res)=>{
+				// if(res.errCode === 2){
+				// 	Modal.confirm({
+				// 		title: res.errMsg,
+				// 		icon: createVNode(ExclamationCircleOutlined),
+				// 		okText: 'Yes',
+				// 		cancelText: 'No',
+				// 		mask:false,
+				// 		zIndex:99999,
+				// 		centered:true,
+				// 		onOk () {
+				// 			newData.deleteModelConfirm = 1
+				// 			confirmDeletePic('',index,newData)
+				// 		},
+				// 		onCancel(){
+				// 		}
+				// 	});
+				// }
+			});
+        }
+		onMounted(()=>{
+			getModel()
+		})
+		return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			setSelectKey,
+			setSystemUser,
+			setStyle,
+			setWorkspaceStyle,
+			openSetData,
+			setEdit,
+
+			beforeUpload,
+			fileUploadChange,
+			getModel,
+			deleteSinglePic
+		}
+	},
+	directives:{
+		mousewheel:{
+			mounted (el) {
+				el.addEventListener('wheel',(e:WheelEvent)=>{
+					let num = 0
+					if(e.deltaY > 0){
+						num = 25
+					}else{
+						num = -25
+					}
+					el.scrollBy(num, 0);
+				},{ passive: true })
+			}
+		},
+	},
+	provide() {
+		return {
+		}
+	},
+})
+</script>
+<style lang="less" scoped>
+	.mannequin{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		background: #fff;
+		font-weight: 600;
+		font-size: 1.8rem;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		> .top,> .model{
+			width: 130rem;
+		}
+		> .top{
+			display: flex;
+			justify-content: space-between;
+			margin: 4rem 0 3rem;
+			> .left,> .right{
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+			> .right{
+				> .switch{
+					margin: 0 2rem;
+				}
+				> .text{
+					color: rgba(0, 0, 0, 0.5);
+					&.active{
+						color: rgba(0, 0, 0, 1);
+						font-weight: 900;
+					}
+				}
+			}
+		}
+		> .model{
+			height: 70rem;
+			width: auto;
+			max-width: 130rem;
+			display: flex;
+			flex-direction: row;
+			overflow-y: auto;
+			max-height: calc(100% - 20rem);
+			position: relative;
+			> .item{
+				width: 25rem;
+				height: 55rem;
+				margin: auto 0;
+				flex-shrink: 0;
+				cursor: pointer;
+				margin-right: 1rem;
+				padding: 0 1rem;
+				position: relative;
+				&:last-child{
+					margin-right: 0;
+				}
+				&.active{
+					border-radius: 2rem;
+					border: 2px solid #000;
+				}
+				> .icon{
+					display: none;
+					position: absolute;
+					top: 2rem;
+					font-size: 2.5rem;
+				}
+				> .icon-tianxie{
+					right: 2rem;
+				}
+				> .icon-shanchu{
+					left: 2rem;
+					font-size: 2.7rem;
+				}
+				> .add{
+					top: 1rem;
+					right: 2rem;
+					padding: 1rem;
+					border-radius: 50%;
+				}
+				> img{
+					width: 100%;
+					height: 100%;
+					object-fit: contain;
+				}
+				&.item{
+					&:hover{
+						> .icon-tianxie{
+							display: block;
+						}
+						> .add {
+							display: flex;
+						}
+					}
+				}
+				&.library{
+					&:hover{
+						>.icon-shanchu{
+							display: block;
+						}
+					}
+				}
+			}
+			> .uploadBox{
+				padding-left: 2rem;
+				right: .5rem;
+				position: sticky;
+				flex-shrink: 0;
+				background: #fff;
+				margin: auto 0;
+				> .upload{
+					height: 55rem;
+					width: 29rem;
+					border: 1px dashed transparent;
+					background: linear-gradient(#fff, #fff) padding-box, repeating-linear-gradient(-45deg, #fff 0, #fff 0.3em, #000 0, #000 0.6em);
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					flex-direction: column;
+					cursor: pointer;
+					i{
+						font-size: 4rem;
+						border-radius: 50%;
+						width: 5rem;
+						height: 5rem;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						margin: 0 auto;
+					}
+					:deep(.ant-upload-list-text){
+						display: none;
+						
+					}
+				}
+			}
+			
+		}
+	}
+</style>

src/component/HomePage/index/model/patternMaking3D/download.vue

@@ -0,0 +1,192 @@
+<template>
+	<div class="threeDownPage" ref="threeDownPage">
+		<a-modal class="generalModel" 
+            v-model:visible="threeDown" 
+            :footer="null" 
+            width="77rem"
+			height="65rem"
+            :maskClosable="false"
+			:mask="false"
+            :centered="true"
+			:closable="false"
+			:get-container="() => $refs.threeDownPage"
+			wrapClassName="#app"
+			:keyboard="false"
+        >
+			<div class="generalModel_btn">
+				<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+					<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="black"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="black"/>
+					</svg>
+				</div>
+			</div>
+			<div style="display: flex; flex-direction: column; height: 100%;">
+				<div class="modal_title_text" style="text-align: center;">
+					<div>Please select the image size</div>
+				</div>
+				<div class="content">
+					<div class="downItem" v-for="item,key in loadList">
+						<div class="title">{{ key }}</div>
+						<div class="keyList">
+							<div class="item" :class="{active:(DSizeItem == select?.size && key == select?.sizeType)}" v-for="DSizeItem in item" @click="downloadIamge(DSizeItem,key)">
+								{{ DSizeItem  }}
+							</div>
+						</div>
+					</div>
+				</div>
+				<div style="width: 100%; display: flex; margin-top: auto;">
+					<div class="gallery_btn" @click="setDown" style="width: 13rem; margin-left: auto;">Download</div>
+				</div>
+			</div>
+			
+			<div class="mark_loading" v-show="isShowMark">
+				<a-spin size="large" />
+			</div>
+		</a-modal>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import { getCookie } from "@/tool/cookie";
+import { Modal,message } from 'ant-design-vue';
+import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'
+
+export default defineComponent({
+	components:{
+	},
+	props:{
+	},
+	emits:['submitBrandAdd'],
+	setup(props,{emit}) {
+		const {t} = useI18n()
+		const store = useStore();
+		const data = reactive({
+			threeDown:false,
+			isShowMark:Object(''),
+			loadList:{
+				aa:[{a:1}],
+				bb:[{a:1}],
+				cc:[{a:1}]
+			},
+			select:{
+				sizeType:'',
+				size:'',
+				threeDSimpleId:-1,
+			},
+		})
+		const dataDom = reactive({
+		})
+		const cancelDsign = ()=>{
+			data.threeDown = false;
+		}
+		const getDowList = (id:any)=>{
+			data.isShowMark = true
+			let value = {
+				threeDSimpleId:id,
+				// threeDSimpleId:id,
+			}
+			Https.axiosPost(Https.httpUrls.getThreeDSize,{},{params:value}).then((res:any)=>{
+				data.loadList = res.sizeTypeMap
+				data.isShowMark = false
+				data.select.threeDSimpleId = id
+			}).catch((err:any)=>{
+				data.isShowMark = false	
+			})
+		}
+		const setDown = ()=>{
+			data.isShowMark = true
+			let value = {
+				...data.select,
+			}
+			Https.axiosGet(Https.httpUrls.downloadZip,{params:value,env:{binary:true,binaryType:'application/octet-stream'}}).then((res:any)=>{
+				console.log(res)
+				//anchor 标签下载
+				let a = document.createElement('a');
+				a.href = res.url;
+				a.download = 'model.zip'; // 设置下载的文件名
+				a.click(); // 触发下载
+				URL.revokeObjectURL(a.href); // 释放 URL 对象
+
+				data.isShowMark = false
+			}).catch((err:any)=>{
+				data.isShowMark = false	
+			})
+		}
+		const openDown = (id:any)=>{
+			data.threeDown = true;
+			getDowList(id)
+		}
+		const downloadIamge = (DSizeItem:any,key:any)=>{
+			data.select.sizeType = key
+			data.select.size = DSizeItem
+		}
+		return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			cancelDsign,
+			setDown,
+			openDown,
+			downloadIamge,
+		}
+	},
+	provide() {
+		return {
+		}
+	},
+})
+</script>
+<style lang="less" scoped>
+	.threeDownPage{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		:deep(.generalModel){
+			.content{
+				display: flex;
+				flex-direction: column;
+				flex: 1;
+				> .downItem{
+					display: flex;
+					font-size: 2rem;
+					font-weight: 600;
+					margin-bottom: 1rem;
+					text-align: center;
+					> .title{
+						margin-right: 1.5rem;
+						width: 3.5rem;
+						text-align: right;
+						white-space: nowrap;
+					}
+					> .keyList{
+						display: flex;
+						flex-wrap: wrap;
+						> .item{
+							font-weight: 300;
+							width: 5.5rem;
+							height: 5.5rem;
+							border: 1px solid #000;
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							transition: all .3s;
+							&.active{
+								background: #000;
+								color: #fff;
+							}
+							&:hover{
+								background: #000;
+								color: #fff;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

src/component/HomePage/index/model/patternMaking3D/index.vue

@@ -0,0 +1,273 @@
+<template>
+	<div class="patternMaking3D">
+		<div class="selectModel">
+			<div class="heard">Clothing</div>
+			<div class="list">
+				<div v-for="item in modelList" class="modelItem" :class="{active:item.id == selectModel.id}" @click="setSelectModel(item)">
+					<img :src="item.url" alt="">
+				</div>
+				<div v-show="!isNoData" class="material_content_list_loding">
+					<span class="page_loading" v-show="!isShowLoading" v-observe></span>
+					<span v-show="isShowLoading">
+						<a-spin size="large" />
+					</span>
+				</div>
+			</div>
+		</div>
+		<div class="model" v-show="selectModel.id != -1">
+			<div class="heard">
+				<div class="text">Technical sketch</div>
+				<div class="switch">
+					back
+					<a-switch v-model:checked="isFront" />
+					front
+				</div>
+			</div>
+			<div class="modelBox">
+				<div v-show="!imgOrThree" class="img">
+					<img v-show="isFront" :src="selectModel.threeDLayoutList?.[0]?.url" alt="">
+					<img v-show="!isFront" :src="selectModel.threeDLayoutList?.[1]?.url" alt="">
+				</div>
+				<threeBox v-show="imgOrThree" ref="threeBox"></threeBox>
+			</div>
+			<div class="gallery_btn" v-show="!imgOrThree" @click="setImgOrThree(true)">3D view</div>			
+			<div class="gallery_btn" v-show="imgOrThree" @click="setImgOrThree(false)">Img view</div>			
+		</div>
+		<div class="flatPatterm" v-show="selectModel.id != -1">
+			<div class="heard">Flat pattern</div>
+			<div class="modelBox">
+				<div class="img">
+					<img :src="selectModel.threeDPatternLayoutUrl" alt="">
+				</div>
+			</div>
+			<div class="gallery_btn" @click="openDown()">Download</div>	
+		</div>
+		<div class="download">
+			<download ref="download"></download>
+		</div>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import threeBox from "./three.vue"
+import download from "./download.vue"
+export default defineComponent({
+	components:{
+		threeBox,download
+	},
+	props:{
+	},
+	emits:[],
+	setup(props,{emit}) {
+		const store = useStore();
+		const data = reactive({
+			selectModel:{
+				id:-1,
+			} as any,
+			modelList:[] as any,
+			isShowMark:false,
+			isNoData:false,
+			isShowLoading:false,
+			currentPage:1,
+			pageSize:10,
+			imgOrThree:false,
+			isFront:false,
+		})
+		const setSelectModel = (item:any)=>{
+			data.isShowMark = true
+			const value = {
+				threeDSimpleId:item.id,
+			}
+			Https.axiosPost(Https.httpUrls.getLayoutDetail,{},{params:value}).then((res:any)=>{
+				data.selectModel = res
+				data.selectModel.id = item.id
+				data.isShowMark = false
+				data.imgOrThree = false
+				// if(data.imgOrThree){
+				// 	dataDom.threeBox.openSetData()
+				// }
+				store.commit('setPatternMaking3D',item.id)
+			}).catch((err:any)=>{
+				data.isShowMark = false	
+			})
+		}
+		const dataDom = reactive({
+			threeBox:null as any,
+			download:null as any,
+		})
+		const openSetData = ()=>{
+			nextTick(()=>{
+				let id =  store.state.HomeStoreModule.patternMaking3D
+				if(id && data.selectModel.id == -1)setSelectModel({id})
+			})	
+		}
+		const getModelList = ()=>{
+			if(data.isShowMark && !data.isNoData)return
+            let value = {
+                page: data.currentPage,
+                size:data.pageSize,
+				
+            }
+            data.isShowLoading = true
+            Https.axiosPost(Https.httpUrls.threeDPage,value).then(
+                (rv: any) => {
+					if(rv.content.length == 0)data.isNoData = true
+                    data.isShowLoading = false
+					data.modelList.push(...rv.content)
+                }
+            ).catch((res)=>{
+				data.isNoData = true
+            });
+		}
+		const setImgOrThree = (boolean:boolean)=>{
+			data.imgOrThree = boolean
+			if(boolean){
+				nextTick(()=>{
+					dataDom.threeBox.openSetData(data.selectModel)
+					// dataDom.threeBox.openSetData(data.selectModel.threeDPatternLayoutUrl)
+				})
+			}
+		}
+		const downList = ()=>{
+			let value = {
+				
+			}
+			Https.axiosGet(Https.httpUrls.threeDPage,value).then(
+				
+			)
+		}
+		const openDown = ()=>{
+			dataDom.download.openDown(data.selectModel.id)
+		}
+		return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			setSelectModel,
+			openSetData,
+			getModelList,
+			setImgOrThree,
+			openDown,
+		}
+	},
+	directives:{
+		observe:{
+			mounted (el,binding) {
+				// console.log(binding.instance);
+				let this_:any = binding.instance
+				this_.isShowMark = false
+				this_.isNoData = false
+				let parentDom = el.parentNode
+				this_.getModelList()
+				new IntersectionObserver(
+				(entries, observer) => {
+						// 如果不是相交，则直接返回
+						// console.log(entries[0]);
+						if (!entries[0].intersectionRatio) return;
+						this_.currentPage += 1
+						this_.getModelList()
+					},
+				).observe(el);
+			},
+		},
+	},
+	provide() {
+		return {
+		}
+	},
+})
+</script>
+<style lang="less" scoped>
+	.patternMaking3D{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		overflow: hidden;
+		display: flex;
+		font-size: 1.4rem;
+		> .selectModel,> .model,>.flatPatterm{
+			padding: 3rem 2rem;
+			display: flex;
+			flex-direction: column;
+			> .heard{
+				font-size: 2rem;
+				font-weight: 600;
+				display: flex;
+				justify-content: space-between;
+				width: 100%;
+				> .switch{
+					font-weight: 400;
+				}
+			}
+		}
+		> .selectModel{
+			width: 70rem;
+			flex-shrink: 0;
+			height: 100%;
+			background: #f7f8fa;
+			border-radius: 3rem;
+			> .list{
+				flex: 1;
+				display: flex;
+			    flex-wrap: wrap;
+				overflow-y: auto;
+				align-content: flex-start;
+				> .modelItem{
+					width: calc(100% / 4 - 1rem);
+					margin: .5rem;
+					aspect-ratio: 1 / 1.2;	
+					border-radius: 2rem;
+					border: 2px solid #D4D4D4;
+					cursor: pointer;
+					> img{
+						width: 100%;
+						height: 100%;
+						object-fit: cover;
+					}
+					&.active{
+						border: 2px solid #000;
+					}
+				}
+			}
+		}
+		> .model ,> .flatPatterm{
+			flex: 1;
+			overflow: hidden;
+			align-items: center;
+			> .modelBox{
+				width: 100%;
+				height: 20rem;
+				height: 75rem;
+				margin: auto;
+				>.img{
+					width: 100%;
+					height: 100%;
+					img{
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+				}
+			}
+		}
+		
+		.material_content_list_loding{
+			text-align: center;
+			height: 50px;
+			width: 100%;
+			.page_loading{
+				display: block;
+				width: 50px;
+				height: 50px;
+				margin: 0 auto;
+			}
+		}
+		.download{
+			width: 0;
+			height: 0;
+		}
+	}
+</style>

src/component/HomePage/index/model/patternMaking3D/three.vue

@@ -0,0 +1,391 @@
+<template>
+	<div class="three">
+		<div class="model" ref="threeDom">
+
+		</div>
+		<div class="load" v-show="load.state">
+			<i class="fi fi-rr-cubes"></i>
+			<div class="text">Load...</div>
+			<div class="loadBox">
+				<div class="schedule" :style="{width:load.progress+'%'}"></div>
+			</div>
+		</div>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,shallowRef,provide,nextTick,onMounted,toRefs, reactive} from 'vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+
+// @ts-ignore
+import * as THREE from 'three';
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
+import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
+import { OutlinePass } from "three/addons/postprocessing/OutlinePass.js";
+import gsap from 'gsap';
+import { env } from 'echarts';
+
+export default defineComponent({
+	components:{
+	},
+	props:{
+	},
+	emits:[],
+	setup(props,{emit}) {
+		const store = useStore();
+		const data = reactive({
+			scene:shallowRef() as any,//场景
+			group:shallowRef() as any,//组
+			camera:shallowRef() as any,//相机
+			renderer:shallowRef() as any,//渲染器
+			pointLight:shallowRef() as any,//光
+			controls:shallowRef() as any,//监听鼠标、键盘事件
+			load:{
+				state:false,
+				progress:0 as any,
+			}
+		})
+		const dataDom = reactive({
+			threeDom:null as any,
+		})
+		const init = ()=>{
+			data.scene = new THREE.Scene();
+			data.group = new THREE.Group()
+			data.scene.add(data.group)
+
+			//创建相机对象
+			// this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
+			data.camera = new THREE.PerspectiveCamera(45, dataDom.threeDom.offsetWidth / dataDom.threeDom.offsetHeight, 0.1, 10000);
+			data.camera.position.set(0, 90, 6); //设置相机位置
+			data.camera.lookAt(data.scene.position); //设置相机方向(指向的场景对象)
+
+				/**
+			 * 创建渲染器对象
+			 */
+			let width = dataDom.threeDom.offsetWidth; //窗口宽度
+			let height = dataDom.threeDom.offsetHeight; //窗口高度
+			data.renderer = new THREE.WebGLRenderer({
+				antialias: true,
+				logarithmicDepthBuffer: true,//深度缓存 防止模型闪烁重影
+			});
+
+			// data.renderer.outpuEncoding = THREE?.RGBEEncoding//设置输出颜色编码格式
+
+			data.renderer.toneMapping = THREE.ACESFilmicToneMapping;//设置色调
+			data.renderer.toneMappingExposure = 1.3;
+
+			data.renderer.shadowMap.enabled = true;
+			data.renderer.setPixelRatio(window.devicePixelRatio);
+			data.renderer.setSize(width, height); //设置渲染区域尺寸
+			data.renderer.setClearColor(0xffffff, 1); //设置背景颜色 
+			dataDom.threeDom.innerHTML = '';
+			dataDom.threeDom.appendChild(data.renderer.domElement);
+			// 设置渲染器大小
+			//环境光
+			let ambient = new THREE.AmbientLight(0xffffff,.8);
+			data.scene.add(ambient);
+			data.controls = new OrbitControls(data.camera,data.renderer.domElement)//监听鼠标、键盘事件;
+			// data.controls.minDistance = 500; // 设置相机与焦点的最小距离
+			// data.controls.maxDistance = 4000; // 设置相机与焦点的最大距离
+			data.controls.mouseButtons = {
+				// LEFT:THREE.MOUSE.PAN, // 左键 拖动(默认旋转：ROTATE)
+				LEFT:THREE.MOUSE.ROTATE, // 左键 拖动(默认旋转：ROTATE)
+				MIDDLE:THREE.MOUSE.DOLLY, // 滑轮 缩放
+				RIGHT:THREE.MOUSE.PAN // 右键 旋转（默认拖动：PAN）
+				// RIGHT:THREE.MOUSE.ROTAafTE // 右键 旋转（默认拖动：PAN）
+			}
+			/**
+			 * 光源设置
+			 */
+			//点光源
+			/**
+			 * AmbientLight	环境光
+				PointLight	点光源
+				DirectionalLight	平行光，比如太阳光
+				SpotLight	聚光源
+			 */
+			data.pointLight = new THREE.DirectionalLight(0xffffff,.5);
+			data.pointLight.intensity = 1.2
+			data.pointLight.castShadow = true//开启阴影
+			data.pointLight.shadow.mapSize = new THREE.Vector2(width, height)
+			data.scene.add(data.pointLight); //点光源添加到场景中
+			// data.pointLight.position.set(400, 200, 300); //点光源位置
+			data.pointLight.position.y = 400;
+			data.pointLight.position.z = 200;
+			data.pointLight.position.x = 200;
+			let floorGeometry = new THREE.PlaneGeometry(5000, 3000)//地板大小
+			let floorMaterial = new THREE.MeshPhongMaterial({ color: "#7e7ab0", })
+			let floorMesh = new THREE.Mesh(floorGeometry, floorMaterial);
+			floorMesh.rotation.x = -0.5 * Math.PI;
+			floorMesh.receiveShadow = true;
+			floorMesh.position.y = -0.001;
+			data.scene.add(floorMesh);
+			const textureLoader = new THREE.TextureLoader();
+			// const texture = textureLoader.load('/3dModel/sketch-thick.jpg');
+			data.scene.background = new THREE.Color("#eee");
+			// data.scene.background = texture;
+
+			let openModel = (event:any)=>{
+				let mouse=new THREE.Vector2();
+				let raycaster=new THREE.Raycaster();
+				mouse.x=(event.clientX/window.innerWidth)*2-1;
+				mouse.y=-(event.clientY/window.innerHeight)*2+1;
+				raycaster.setFromCamera(mouse, data.camera);
+				let intersects = raycaster.intersectObjects(data.scene.children);
+				return intersects
+			}
+
+			dataDom.threeDom.ondblclick = (event:any)=>{
+				let intersects = openModel(event);
+				if(!intersects || intersects.length<=0) return
+				const bbox = new THREE.Box3().setFromObject(intersects[0].object);
+				const size = new THREE.Vector3();
+				let target2 = bbox.getCenter(size);//获取选中包围起来后的中心坐标
+				animateCamera(data.camera.position,intersects[0].point,data.controls.target,target2)
+			}
+			let isTweening = false;
+			function animateCamera(current1:any, target1:any, current2:any, target2:any){
+				if (isTweening) return
+				isTweening = true
+				let options = {
+					x1: current1.x, // 相机当前位置x
+					y1: current1.y, // 相机当前位置y
+					z1: current1.z, // 相机当前位置z
+					x2: current2.x, // 控制当前的中心点x
+					y2: current2.y, // 控制当前的中心点y
+					// z2: current2.z  // 控制当前的中心点z
+				}
+				gsap.to(options,{
+					x1: 0, // 新的相机位置x
+					y1: target2.y, // 新的相机位置y
+					z1: 2500, // 新的相机位置z
+					x2: 0, // 新的控制中心点位置x
+					y2: target2.y, // 新的控制中心点位置x
+					duration:1,
+					ease:'linear',
+					onUpdate:()=>{
+						data.camera.position.x = options.x1;
+						data.camera.position.y = options.y1;
+						data.camera.position.z = options.z1;
+						data.controls.target.x = options.x2;
+						data.controls.target.y = options.y2;
+						// data.controls.target.z = object.z2;
+						data.controls.update();
+					},
+					onComplete:()=>{
+						isTweening = false
+					}
+					// z2: target2.z  // 新的控制中心点位置x
+				})
+			}
+			// let setHighlight = (obj:any)=>{
+			// 	outlinePass.selectedObjects = obj;
+			// }
+
+
+			data.controls.enableDamping = true;
+			let animate = function () {
+				requestAnimationFrame(animate);
+				// data.renderer.render(data.scene, data.camera);
+				// model.rotation.x += 0.01; //旋转物体
+				var vector = data.camera.position.clone()
+				data.controls.update();
+				data.renderer.render(data.scene, data.camera);
+				// point.position.set(vector.x,vector.y,vector.z);
+				// group.rotation.y += 0.01; 
+
+				// composer.render();
+			};
+			animate();
+		}
+		const setModel = async (url:any)=>{
+			clearModel()
+			await addModel(url)
+			// addMaterial()
+		}
+		const addMaterial = ()=>{
+			//添加图片材质
+			data.load.state = true
+			let textureLoader = new THREE.TextureLoader()
+			textureLoader.load('/3dModel/texture0.webp', // 图片放在public/textures目录下
+				(texture:any) => {
+				// 3. 配置纹理参数
+				texture.wrapS = THREE.RepeatWrapping;
+				texture.wrapT = THREE.RepeatWrapping;
+				texture.repeat.set(1, 1); // 纹理重复次数
+				texture.anisotropy = 32;  // 提高纹理清晰度
+				data.group?.traverse((child:any) => {
+					if (child.isMesh) {
+						// 5. 创建新材质（根据需求选择材质类型）
+						const newMaterial = new THREE.MeshStandardMaterial({
+							map: texture,        // 基础颜色贴图
+							roughness: 0.7,      // 表面粗糙度 (0-1)
+							metalness: 0.2,      // 金属质感 (0-1)
+							side: THREE.DoubleSide // 双面渲染
+						});
+						console.log(child)
+						// 6. 替换原有材质
+						child.material = newMaterial;
+						
+						// 7. 如果需要单独控制某些子模型的UV
+						if (child.geometry.attributes.uv) {
+							// 可以在这里修改UV坐标
+							const uvs = child.geometry.attributes.uv.array;
+							// ...UV操作逻辑...
+						}
+					}
+					data.load.state = false
+				},(xhr:any) => { // 加载进度回调
+					console.log(xhr.loaded , xhr.total)
+					const percent = xhr.total == 0?100:(xhr.loaded / xhr.total * 100).toFixed(2);
+					data.load.progress = percent
+					// updateProgressBar(Number(percent));
+				},(error:any) => {
+					console.error('纹理加载失败:', error);
+					data.load.state = false
+				});
+			})
+		}
+		const addModel = async (url:any)=>{
+			await new Promise((resolve, reject) => {
+				var fbxLoader = new GLTFLoader();
+				let drac = new DRACOLoader()
+				drac.setDecoderPath('/draco/')
+				fbxLoader.setDRACOLoader(drac)
+				// fbxLoader.load('/3dModel/222/1111.glb',
+				fbxLoader.load(url,
+				
+				(obj:any) => {
+					let scene = obj.scene;
+					var box = new THREE.Box3().setFromObject(scene);
+					var center = box.getCenter(new THREE.Vector3());
+					data.controls.target.copy(center);
+					// data.controls.autoRotate  = true
+					data.camera.position.y = center.y;
+					data.camera.position.z = 1000;
+					data.pointLight.position.y = 250;
+					data.pointLight.position.z = 1250;
+					data.group.add(scene);
+					resolve('')
+				},(xhr:any) => { // 加载进度回调
+					console.log(xhr.loaded , xhr.total)
+					const percent = xhr.total == 0?100:(xhr.loaded / xhr.total * 100).toFixed(2);
+					console.log(`模型加载进度: ${percent}%`);
+					data.load.progress = percent
+					// updateProgressBar(Number(percent));
+				},(error:any) => { // 加载失败回调
+					console.error('模型加载失败:', error);
+					reject('')
+				})	
+			})
+		}
+		const clearModel = ()=>{
+			const oldGroup:any = data.group;
+			data.group = new THREE.Group();
+			data.scene.add(data.group);
+			data.scene.remove(oldGroup);
+		}
+		// const loadThree = ()=>{
+
+		// 	init()
+		// }
+		const getModelUrl = (value:any)=>{
+			console.log(12314343)
+			return new Promise((resolve, reject) => {
+
+				// Https.axiosGet(Https.httpUrls.getThreeDGlb,{params:{threeDSimpleId:value.id},env:{binary:true}}).then((rv)=>{
+				// 	//二进制流转本地路径
+					
+				// 	console.log(rv)
+				// 	resolve(rv)
+				// }).catch(()=>{
+				// 	reject('')
+				// })
+				// //fetch get请求携带token
+
+				
+				// fetch("https://develop.api.aida.com.hk/api/project/getThreeDGlb?threeDSimpleId=1", {
+				// 	headers:{
+				// 		authorization:'Bearer-eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiI4OCIsInN1YiI6IntcImNvdW50cnlcIjpcIkNoaW5hXCIsXCJpZFwiOjg4LFwibGFuZ3VhZ2VcIjpcIkVOR0xJU0hcIixcInVzZXJuYW1lXCI6XCJzaGJcIn0iLCJpYXQiOjE3NDMzNDkwNjQsImlzcyI6IkRXSiIsImF1dGhvcml0aWVzIjoiW10iLCJleHAiOjE3NTE5ODkwNjR9.gmL0JufYy9wd23qCY-ibwhgpXZ2X68WAiHSeC99I4x7cipWyxLaQmuIBk2SJSdWBm0tTN2Mx-etXO9a7MtQmpw',
+				// 	}
+				// }).then(res => {
+	 			// 	return res.blob();
+				// }).then((res) => {
+	 			// 	var url = URL.createObjectURL(res);
+	 			// 	console.log(url, res)
+				// 	resolve(url)
+				// }).catch(err => {
+	 			// 	console.log(err);
+				// })
+				resolve(value.threeDSimpleUrl)
+			})
+		}
+		const openSetData = async (value:any)=>{
+			if(!data.scene){
+				init()
+			}
+			data.load.state = true
+			const modeUrl = await getModelUrl(value)
+			await setModel(modeUrl)
+			data.load.state = false
+		}
+		onMounted(()=>{
+		})
+		return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			openSetData,
+		}
+	},
+	provide() {
+		return {
+		}
+	},
+})
+</script>
+<style lang="less" scoped>
+	.three{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		flex: 1;
+		overflow: hidden;
+		> .model{
+			width: 100%;
+			height: 100%;
+		}
+		> .load{
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			top: 0;
+			left: 0;
+			background: rgba(0, 0, 0, .2);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			flex-direction: column;
+			color: #fff;
+			> i{
+				font-size: 3rem;
+			}
+			> .loadBox{
+				width: 15rem;
+				height: 1rem;
+				border-radius: 1rem;
+				background: #fff;
+				overflow: hidden;
+				> .schedule{
+					height: 100%;
+					background: greenyellow;
+				}
+			}
+		}
+	}
+</style>

src/component/HomePage/index/model/poseTransfer/index.vue

@@ -0,0 +1,536 @@
+<template>
+	<div class="poseTransfer">
+		<div class="configuratioBox" :class="{active:button.left}">
+			<div class="configuratio">
+				<div class="title">Give pose for them to select</div>
+				<div class="content">
+					<!-- <selectList @selectImgItem="selectImgItem" level1Type="Printboard" type="print"></selectList> -->
+					<div class="selectImg">
+						<div class="head">
+							<div class="text">Current</div>
+						</div>
+						<div class="imgBox">
+							<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in currentList" @click="selectImgItem(item)">
+								<img :src="item.imgUrl || item.url" alt="">	
+							</div>
+							<div class="item" :class="{active:item.id == selectImg.id}" v-for="item in fileList" @click="selectImgItem(item)">
+								<img :src="item.imgUrl || item.url" alt="">	
+							</div>
+							<div class="upload_item item">
+								<div class="upload_file_item">
+									<a-upload
+										:action="getUploadUrl() + '/api/history/toProductImageElementUpload'"
+										list-type="picture-card"
+										:capture="null"
+										:data="{
+											...upload,
+										}"
+										:headers="{ Authorization: token }"
+										:before-upload="beforeUpload"
+										v-model:file-list="fileList"
+										:multiple="true"
+										accept=".jpg,.png,.jpeg,.bmp"
+										@change="(file) => fileUploadChange(file)"
+									>
+										<div
+											class="upload_tip_block"
+										>
+											<i class="fi fi-br-upload"></i>
+											<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
+										</div>
+									</a-upload>
+								</div>	
+							</div>
+
+						</div>
+					</div>
+					<div class="poses">
+						<div class="head">
+							<div class="text">Target poses</div>
+						</div>
+						<div class="imgBox">
+							<div class="item" v-for="item in currentList">
+								<img :src="item.imgUrl" alt="">	
+							</div>
+						</div>
+					</div>
+				</div>	
+			</div>
+			<div class="generate">
+				<div class="gallery_btn" v-show="!isGenerate" @click="getgenerate">
+					{{ $t('Generate.Generate') }}
+				</div>
+				<div v-show="isGenerate && !remGenerate" class="gallery_btn">
+					<i class="fi fi-br-loading"></i>
+				</div>
+				<div v-show="remGenerate" @click="removeGenerate" class="gallery_btn">
+					{{$t('Generate.Close')}}
+				</div>
+			</div>
+		</div>
+		<div class="likeBox">
+			<div class="element">
+				<div class="title">Selected Product</div>
+				<div class="content">
+					<generalDrag ref="generalDragLeft" v-if="isState" :list="likeList" :isVideo="true" @setBtn="likeSetBtn"></generalDrag>
+				</div>
+				<div class="btnLeft" @click="setSize('left')">
+					<span class="icon iconfont icon-xiala" :class="{'active':button.left}"></span>
+				</div>
+				<div class="btnRight" @click="setSize('right')">
+					<span class="icon iconfont icon-xiala" :class="{'active':button.right}"></span>
+				</div>
+			</div>
+		</div>
+		<div class="noLikeBox" :class="{active:button.right}">
+			<div class="element">
+				<div class="title">Generate Product</div>
+				<div class="content">
+					<generalDrag ref="generalDragRight" v-if="isState" :list="noLikeList" :isVideo="true" @setBtn="noLikeSetBtn"></generalDrag>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,inject,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { Upload,message,Modal } from 'ant-design-vue';
+import { useI18n } from 'vue-i18n'
+import generalDrag from '@/component/modules/generalDrag.vue';
+import { getUploadUrl,isMoible,getMinioUrl } from "@/tool/util";
+import { getCookie,setCookie } from "@/tool/cookie";
+import  showViewVideo from "@/tool/mount";
+
+// import selectList from '@/component/DetailCopy/module/selectList.vue';
+export default defineComponent({
+	components:{
+		generalDrag,
+		// selectList,
+	},
+	props:{
+		isState:{
+			type:Boolean,
+			default:false,
+		}
+	},
+	emits:[],
+	setup(props,{emit}) {
+		const {t} = useI18n()
+		const store = useStore();
+		const data:any = reactive({
+			button:{
+				left:false,
+				right:false,
+			},
+			currentList:[],
+			fileList:[],
+			selectImg:{},
+			token:getCookie('token'),
+			upload:{
+				projectId:store.state.Workspace.probjects.id
+			},
+			waitList:[],
+			likeList:computed(()=>store.state.HomeStoreModule.poseTransfer),
+			noLikeList:[{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},],
+			isGenerate:false,//判断是否正在进行generate
+			remGenerate:false,
+			removeGenerate:false,
+		})
+		const setIsShowMark:any = inject('setIsShowMark')
+		const dataDom = reactive({
+			generalDragLeft:null as any,
+			generalDragRight:null as any,
+			scaleVideo:null as any,
+		})
+		const selectImgItem = (item:any)=>{
+			data.selectImg = item
+			data.selectImg.minioUrl = getMinioUrl(item.url)
+		}
+		const openSetData = ()=>{
+			// dataDom.generalDrag.openSetData()
+			data.currentList = store.state.UploadFilesModule.modularData.toProduct
+			setIsShowMark(false)
+		}
+		const setSize = (str:any)=>{
+			data.button[str] = !data.button[str]
+			setItemPosition()
+		}
+		const setItemPosition = ()=>{
+			setTimeout(()=>{
+				dataDom.generalDragLeft.setItemPosition()
+				dataDom.generalDragRight.setItemPosition()
+			},200)
+		}
+		const getgenerate = ()=>{
+			if(!data.selectImg.minioUrl)return
+			if(data.isGenerate)return
+
+			data.isGenerate = true
+			data.remGenerateTime = setTimeout(()=>{
+				data.remGenerate = true
+			},10000)
+			let value = {
+				poseId:1,
+				projectId:store.state.Workspace.probjects.id,
+				productImage:data.selectImg.minioUrl,
+			}
+			Https.axiosGet(Https.httpUrls.poseTransform,{params:value}).then((rv)=>{
+				data.noLikeList.unshift({taskId:rv})
+				setGenerate(rv)
+			}).catch((res:any)=>{
+				data.isGenerate = false
+				clearInterval(data.remGenerateTime)
+				data.remGenerate = false
+			})
+		}
+		const setGenerate = (dataList:any)=>{
+			let list = dataList
+			let dataNum = dataList.length
+			let state = true
+			data.generateTime = setInterval(()=>{
+				if(!data.isGenerate || data.remGenerate)return
+				if(!state)return
+				state = false
+				Https.axiosGet(Https.httpUrls.poseTransformResult,{params:{taskId:list}}).then(
+					(rv) => {
+						rv=[rv]
+						state = true
+						if(data.isGenerate){//防止取消后有正在执行的获取状态
+							// data.waitList = rv.filter((item:any)=>item.status != 'Success' && item.status != 'Fail' && item.status != 'Invalid')
+							rv.forEach((element:any) => {
+								if(element.status == 'Success'){
+									element.url = element.firstFrameUrl
+									let index = data.noLikeList.findIndex((obj:any) => obj.taskId === element.taskId);
+									data.noLikeList[index] = element
+									list = list.filter((item:any) => item !== element.taskId);
+								}
+							});
+							data.waitList = list
+							if((list.length == 0)|| (rv.filter((item:any)=>item.status == 'Invalid').length ==list.length)){
+								if(rv.filter((item:any)=>item.status == 'Invalid').length ==dataNum){
+									message.info(t('Generate.effectPoor'));
+								}else{
+								}
+								
+								// this.store.dispatch('getCredits')
+								clearInterval(data.generateTime)
+								clearInterval(data.remGenerateTime)
+								data.remGenerate = false
+								data.isGenerate = false
+							}
+						}
+					}
+				).catch(res=>{
+					clearInterval(data.generateTime)
+					clearInterval(data.remGenerateTime)
+					data.isGenerate = false
+					data.remGenerate = false
+				});
+			},1000)
+		}
+		const removeGenerate = ()=>{
+			//取消操作
+			data.isGenerate = false
+			data.remGenerate = false
+			clearInterval(data.generateTime)
+			if(data.waitList){
+				// let str = data.waitList.map((obj:any) => obj.taskId).join(',');
+				let value = {
+					uniqueId:data.waitList,
+					userId:store.state.UserHabit.userDetail.userId,
+					timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+					type: 'PoseTransferation'
+				}
+				Https.axiosGet(Https.httpUrls.generateStopWaiting, {params:value}).then(
+					(rv) => {
+						data.waitList = []
+						data.noLikeList = data.noLikeList.filter((item:any)=>item.status == 'Success')
+					}
+				).catch(res=>{
+				});
+			}
+		}
+		let beforeUpload = (file: any)=>{
+            const isJpgOrPng =
+                file.type === "image/jpeg" ||
+                file.type === "image/png" ||
+                file.type === "image/jpg" ||
+                file.type === "image/bmp";
+            if (!isJpgOrPng) {
+                message.info(useI18n().t('MoodboardUpload.jsContent3'));
+            }
+            const isLt2M = file.size / 1024 / 1024 < 5;
+            if (!isLt2M) {
+                message.info(useI18n().t('MoodboardUpload.jsContent4'));
+            }
+            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
+        }
+		const fileUploadChange = (value: any)=> {
+            let file = value.file;
+			let bor = true
+            if (file.status === "done") {
+                let res = JSON.parse(file.xhr.response);
+				if(res.errCode == 0){
+					file.imgUrl = res.data.url;
+					file.id = res.data.id
+					file.isChecked = true
+					file.type = 'ProductElement'
+					// if(props.productimgMenu.value == 'Relight'){
+					// 	file.type = "ToProductImage"
+					// }
+					data.selectImg = res.data
+					data.fileList.filter((v: any) => v.status === "done");
+				}else{
+					bor = false
+				}
+				// this.showFileList = productImgData.fileList
+            } else if (file.status === "error") {
+				bor = false
+            }
+        }
+		const likeSetBtn = (id:any,str:string)=>{
+			data.likeList.forEach((item:any,index:any)=>{
+				if(item.id == id){
+					if(str == 'zoom'){
+						showViewVideo({url:item.videoUrl})
+					}else if(str == 'like'){
+						likeFile(item,'noLike',index)
+					}
+				}
+			})
+			
+		}
+		const noLikeSetBtn = (id:any,str:string)=>{
+			data.noLikeList.forEach((item:any,index:any)=>{
+				if(item.id == id){
+					if(str == 'zoom'){
+						showViewVideo({url:item.videoUrl})
+					}else if(str == 'like'){
+						likeFile(item,'like',index)
+					}
+				}
+			})
+		}
+		let likeFile = (item:any,str:any,index:any) =>{
+			let url
+			let value = {
+			}
+			if(str == 'like'){
+				value = {
+					likeOrDislike:'like',
+					transformedId:item.id,
+				}
+			}else{
+				value = {
+					likeOrDislike:'dislike',
+					transformedId:item.id,
+				}
+			}
+			Https.axiosPost(Https.httpUrls.poselikeOrDisike, {},{params:value}).then(
+				(rv) => {
+					if(str == 'like'){
+						let value = {
+							list:[item],
+							str:'add',
+							index:-1,
+						}
+						store.commit("setPoseTransfer", value);
+						data.noLikeList.splice(index,1)
+					}else{
+						let value = {
+							list:[item],
+							str:'splice',
+							index:index,
+						}
+						data.noLikeList.push(item)
+						store.commit("setPoseTransfer", value);
+						
+					}
+				}
+			).catch(res=>{
+			});
+		}
+		onMounted(()=>{
+
+		})
+		return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			openSetData,
+			selectImgItem,
+			setSize,
+			setItemPosition,
+			getgenerate,
+			getUploadUrl,
+			beforeUpload,
+			fileUploadChange,
+			removeGenerate,
+			likeSetBtn,
+			noLikeSetBtn,
+		}
+	},
+	provide() {
+		return {
+		}
+	},
+})
+</script>
+<style lang="less" scoped>
+	.poseTransfer{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		font-size: 2rem;
+		font-weight: 900;
+		display: flex;
+		> .configuratioBox{
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			&.active{
+				width: 0;
+				overflow: hidden;
+			}
+			> .generate{
+				margin-top: auto;
+			}
+		}
+		> .configuratioBox > .configuratio{
+			padding-right: 3.8rem;
+			width: 31.8rem;
+			> .title{
+				// font-size: 2.6rem;
+			}
+			> .content{
+				margin-top: 4rem;
+				> .selectImg,> .poses{
+					display: flex;
+					flex-direction: column;
+					> .imgBox{
+						flex: 1;
+						max-height: 45rem;
+						margin-top: 2rem;
+						display: flex;
+						flex-wrap: wrap;
+						justify-content: space-between;
+						width: 100%;
+						overflow: hidden;
+						overflow-y: auto;
+						> .item{
+							width: calc(100% / 2 - .5rem);
+							margin-bottom: 1rem;
+							cursor: pointer;
+							border-radius: 2rem;
+							border: 2px solid #8e8e8e;
+							overflow: hidden;
+							display: flex;
+							justify-content: center;
+							flex-shrink: 0;
+							height: 25rem;
+							&.active{
+								border: 2px solid;
+							}
+							> img{
+								width: 100%;
+								object-fit: contain;
+							}
+						}
+						> .upload_item{
+							border: none;
+						}
+					}
+					> .head{
+						color: #000;
+						font-weight: 600;
+						> .text{
+							display: inline-block;
+						}
+					}
+				}
+				> .selectImg{
+					> .head{
+						> .text{
+							position: relative;
+							&::before {
+								position: absolute;
+								content: "";
+								display: block;
+								background: #000;
+								height: calc(.4rem*1.2);
+								left: 50%;
+								transform: translateX(-50%);
+								bottom: -.5rem;
+								width: 0px;
+								width: 100%;
+								transition: 0.3s all;
+							}
+						}
+					}
+				}
+				> .poses{
+					margin-top: 3rem;
+				}
+			}
+		}
+		> .likeBox ,> .noLikeBox{
+
+			margin-top: 1.8rem;
+			flex: 1;
+			position: relative;
+			> .element{
+				width: 100%;
+				height: 100%;
+				display: flex;
+				flex-direction: column;
+				> .btnLeft,> .btnRight{
+					position: absolute;
+					width: 4rem;
+					height: 7rem;
+					background: #fff;
+					border: 2px solid;
+					border-right: none;
+					border-radius: 2rem 0 0 2rem;
+					top: 50%;
+					transform: translate(-100%,-50%);
+					left: 0;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					z-index: 2;
+					cursor: pointer;
+					>span{
+						transition: all .3s;
+						transform: rotate(90deg);
+						&.active{
+							transform: rotate(270deg);
+						}
+					}
+				}
+				> .btnRight{
+					left: calc(100% + 4rem) ;
+					transform: translate(-100%,-50%) rotate(180deg);
+				}
+				> .content{
+					flex: 1;
+					padding: 1.7rem 2rem;
+					border-radius: 3rem;
+					background: #f7f8fa;
+				}
+				> .title{
+					margin-bottom: 2rem;
+				}
+			}
+			
+		}
+		> .noLikeBox{
+			padding-left: 2.3rem;
+			&.active{
+				flex: 0;
+				overflow: hidden;
+			}
+		}
+	}
+</style>

src/component/HomePage/index/workflow/content/index.vue

@@ -0,0 +1,244 @@
+<template>
+	<div class="contentBox">
+		<seriesDesign v-if="selectObject.id && workflowType == 'seriesDesign'" ref="seriesDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></seriesDesign>
+		<singleProductDesign v-if="selectObject.id && workflowType == 'singleProductDesign'" ref="singleProductDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></singleProductDesign>
+		<sketchDesign v-if="selectObject.id && workflowType == 'sketchDesign'" ref="sketchDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></sketchDesign>
+		<productDrawingDesign v-if="selectObject.id && workflowType == 'productDrawingDesign'" ref="productDrawingDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></productDrawingDesign>
+		<printingDesign3D v-if="selectObject.id && workflowType == 'printingDesign3D'" ref="printingDesign3D" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></printingDesign3D>
+		<printDesign v-if="selectObject.id && workflowType == 'printDesign'" ref="printDesign" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></printDesign>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,inject,watch,nextTick,provide,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import seriesDesign from './seriesDesign.vue'
+import printDesign from './printDesign.vue'
+import singleProductDesign from './singleProductDesign.vue'
+import sketchDesign from './sketchDesign.vue'
+import productDrawingDesign from './productDrawingDesign.vue'
+import printingDesign3D from './printingDesign3D.vue'
+import { rgbToHsv, dataURLtoBlob } from "@/tool/util";
+
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+export default defineComponent({
+    components:{
+		seriesDesign,printDesign,singleProductDesign,sketchDesign,productDrawingDesign,printingDesign3D
+    },
+	props:{
+		selectKey_:String,
+		workflowType:String,
+		httpWorkflowType:String,
+	},
+    setup(props,{emit}) {
+        const store = useStore();
+		const data = reactive({
+			navListData:computed(()=>store.state.Workspace.projectList),
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+			userDetail:computed(()=>{
+				return store.state.UserHabit.userDetail
+			}),
+		})
+		const dataDom:any = reactive({
+			seriesDesign:null as any,
+			singleProductDesign:null as any,
+			printDesign:null as any,
+			sketchDesign:null as any,
+			productDrawingDesign:null as any,
+			printingDesign3D:null as any,
+		})
+		//处理design数据
+		const setDesignData = (str:any)=>{
+			if(str == 'workspace')return
+			return new Promise(async (resolve,reject)=>{
+				if(str == "colorBoard")await setColor()
+				// if(str == "sketchBoard")await setSketch()
+				let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
+				let value = {
+				    type:str,
+					objectName:data.selectObject.type,
+				}
+				if(allBoardData.indexOf(str) != -1){
+					await store.dispatch('setAllBoardData',value)
+				}else{
+					let value = {
+						type:str,
+						objectName:data.selectObject.type,
+					}
+					store.dispatch('setModularData',value)
+				}
+				saveProject(str)
+				resolve('')
+			})
+		}
+		const saveCanvas = (value:any,str:any)=>{
+			let json = dataDom[data.selectObject.type][str].getCanvasData()
+			let blob = new Blob([JSON.stringify(json)], { type: "application/json" });
+			let formData = new FormData();
+			// let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+			formData.append("file", blob, "data.json");
+			formData.append('module', str);
+			formData.append('projectId', value.projectId);
+			let config = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+			Https.axiosPost(Https.httpUrls.exportSave, formData,config).then((rv)=>{
+				// message.success(t('exportModel.jsContent7'))
+            })
+		}
+		const saveProject = (str:any)=>{
+			let value:any = {
+				projectId:data.selectObject.id,
+			}
+			if(str == 'deReconstruction' || str == 'canvas'){
+				saveCanvas(value,str)
+				return
+			}
+			store.dispatch('getProjectData',str).then((data)=>{
+				if(!data[str])return
+				value[str] = data[str]
+				
+				Https.axiosPost(Https.httpUrls.saveModuleContent, value).then((rv)=>{
+					if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
+				})
+			})
+		}
+		const setSketch = ()=>{
+
+		}
+		const setColor = ()=>{
+			return new Promise((resolve,reject)=>{
+			    let colorBoards = store.state.UploadFilesModule.colorBoards;
+				if(colorBoards.length == 0)return resolve('')
+				let data: any = [];
+				for (let v of colorBoards) {
+					let color: any = [v.rgbValue.r, v.rgbValue.g, v.rgbValue.b];
+					let hsv = rgbToHsv(color);
+					v.hsv = hsv[0] + hsv[1] + hsv[2];
+					data.push({
+						h: hsv[0],
+						s: hsv[1],
+						v: hsv[2],
+					});
+				}
+				Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
+					.then((rv: any) => {
+						if (rv) {
+							rv.forEach((ele: any, index: number) => {
+								colorBoards[index].id = ele.id;
+								colorBoards[index].tcx = ele.tcx;
+								colorBoards[index].name = ele.name;
+							});
+							store.commit("setColorboardList", colorBoards);
+							resolve('');
+						}
+					})
+					.catch((res) => {
+						reject();
+					});
+			})
+		}
+		const setModule = (value:any)=>{//选中设置数据
+			// setStoreData(value)//设置数据或者清除数据
+			if(dataDom[data.selectObject.type]?.open)dataDom[data.selectObject.type].open(value.str,value.button)
+		}
+		const setStoreData = async (data:any)=>{
+			let {value,select} = data
+			let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard']
+		    if (select) {
+				await setDesignData(value)
+				if(allBoardData.indexOf(value) != -1){
+					store.commit('setAllBoardData',value)
+				}else{
+					let data = {
+						data:'',
+						type:value
+					}
+					store.commit('setModularData',data)
+				}
+			}else{
+				if(allBoardData.indexOf(value) != -1){
+					store.commit('clearAllBoardData',value)
+				}else{
+					let data = {
+						data:null,
+						type:value
+					}
+					store.commit('setModularData',data)
+				}
+			}
+			
+		}
+		const unfold = ()=>{
+			dataDom[data.selectObject.type].unfold()
+		}
+		watch(()=>props.selectKey_,async (newVal,oldVal)=>{
+			if((!!newVal && !!oldVal) || (!newVal && !!oldVal)){
+				setDesignData(oldVal)
+			}
+			// if(newVal == '' && oldVal != ''){
+			// 	//选择数据
+			// 	if(data.navListData.value[index]?.select){
+			// 		setDesignData(oldVal)
+			// 	}
+			// }
+		})
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			setModule,
+			unfold,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	.contentBox{
+		display: flex;
+		width: 100%;
+		height: 100%;
+		> .contentBox{
+			position: relative;
+			flex: 1;
+			overflow: hidden;
+			> .content,
+			>.homeContent{
+				width: 100%;
+				height: 100%;
+				padding: 4rem;
+				// padding: 3rem;
+			}
+			> .content{
+				position: absolute;
+				top: 0;
+				left: 0;
+				transform: scale(0);
+				background: #ff6666;
+				display: flex;
+				flex-direction: column;
+				> *{
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
+				}
+				> .back{
+					width: auto;
+					height: auto;
+					cursor: pointer;
+				}
+			}
+			> .homeContent{
+				// background: #91ff66;
+				position: absolute;
+			}
+		}
+	}
+</style>

src/component/HomePage/index/workflow/content/printDesign.vue

@@ -0,0 +1,214 @@
+<template>
+	<div class="seriesDesign">
+		<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
+		<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
+		<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import workspace from '../../workflow/workspace.vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
+import canvasUpload from "@/component/Canvas/index.vue";
+
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+export default defineComponent({
+    components:{ 
+		PrintboardUpload,canvasUpload,workspace
+    },
+	props:{
+		selectKey_:{
+			type:String,
+			default:''
+		},
+		workflowType:String,
+		httpWorkflowType:String,
+	},
+    setup(props,{emit}) {
+        const store = useStore();
+		let driver__:any = computed(()=>{
+			return store.state.Guide.guide
+		}) 
+		provide('driver__',driver__) 
+		//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
+		const data = reactive({
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+		})
+		const dataDom:any = reactive({
+			printBoard:null as any,
+			canvas:null as any,
+		})
+		const open = (str:any)=>{
+			nextTick(()=>{
+				if(dataDom[str]?.openSetData){
+					dataDom[str].openSetData()
+				}
+			})
+		}
+		const setitemData = (arr:any)=>{
+			return new Promise((resolve,reject)=>{
+			    nextTick(()=>{
+					arr.forEach((rv:any)=>{
+						let arr = ['design','patternMaking3D'] 						
+						if(arr.indexOf(rv) > -1 || !dataDom[rv])return
+						dataDom[rv].openSetData()
+					})
+					resolve('')
+				})
+			})
+		}
+		const unfold = ()=>{
+			if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
+		}
+		const getCollection = ()=>{
+			let value:any = {
+				 "id":data.selectObject.id,
+				"moduleList":["printBoard", ]
+			}
+			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
+				historyChooseData(rv)
+				let allBoardData = ['printBoard']
+				let canvasData = ['canvas']
+				for (let index = 0; index < canvasData.length; index++) {
+					const item = canvasData[index];
+					await getCanvasData(item)
+				}
+				await setitemData(allBoardData)
+				allBoardData.forEach((item)=>{
+					let value = {
+						type:item,
+						objectName:data.selectObject.type,
+					}
+					let arr  = ['sketchBoard','moodBoard','printBoard','colorBoard']
+					if(arr.indexOf(item) != -1){
+						store.dispatch('setAllBoardData',value)
+					}else{
+						store.dispatch('setModularData',value)
+					}
+				})
+
+			})
+		}
+		const getCanvasData = (str:any)=>{
+			return new Promise((resolve, reject) => {
+				let value = {
+					module:str,
+					projectId:data.selectObject.id,
+				}
+				Https.axiosPost(Https.httpUrls.exportSearch, value)
+				.then((rv) => {
+					store.commit("setCanvasData", {type:str,file:rv});
+					resolve('')
+				})
+				.catch((rv) => {
+					resolve(null)
+				});
+			})
+		}
+		const historyChooseData = (data:any)=>{
+			let collectionData = {
+				printboardFiles: dealViewChooseData(
+					data.printBoard,"Printboard"
+				),
+				generatePrintFiles: [],
+			};
+			store.commit("setAllBoardDataChoose", collectionData);
+		}
+		//统一处理选择组的渲染数据
+		const dealViewChooseData = (data: any,str:string)=> {
+			if (!data) {
+				return [];
+			}
+			let filesList = data.map((v: any) => {
+				let newData: any = {
+					imgUrl: v.url?v.url:v.designOutfitUrl,
+					id: v.id,
+					status: "done",
+					resData: v,
+					type_:{
+						type1:'material',
+						type2:v.level1Type
+					}
+				};
+				if (v.level1Type === "Sketchboard") {
+					newData.pin = v.isPin;
+					newData.categoryValue = v.level2Type;
+					newData.level2Type = v.level2Type;
+				}
+				if (v.level1Type === "Printboard") {
+					newData.pin = v.isPin;
+					newData.level2Type = v.level2Type;
+					newData.categoryValue = v.level2Type;
+				}
+				return newData;
+			});
+			return filesList;
+		}
+		onMounted(()=>{
+			nextTick(()=>{
+				getCollection()
+			})
+		})
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			open,
+			unfold,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	.seriesDesign{
+		display: flex;
+		width: 100%;
+		height: 100%;
+		> .contentBox{
+			position: relative;
+			flex: 1;
+			overflow: hidden;
+			> .content,
+			>.homeContent{
+				width: 100%;
+				height: 100%;
+				padding: 4rem;
+				// padding: 3rem;
+			}
+			> .content{
+				position: absolute;
+				top: 0;
+				left: 0;
+				transform: scale(0);
+				background: #ff6666;
+				display: flex;
+				flex-direction: column;
+				> *{
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
+				}
+				> .back{
+					width: auto;
+					height: auto;
+					cursor: pointer;
+				}
+			}
+			> .homeContent{
+				// background: #91ff66;
+				position: absolute;
+			}
+		}
+	}
+</style>

src/component/HomePage/index/workflow/content/printingDesign3D.vue

@@ -0,0 +1,156 @@
+<template>
+	<div class="seriesDesign">
+		<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
+		<patternMaking3D ref="patternMaking3D" class="patternMaking3D" :isState="selectKey_ =='patternMaking3D'" v-show="selectKey_ == 'patternMaking3D'"></patternMaking3D>
+		<!-- <canvasUpload></canvasUpload> -->
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import patternMaking3D from '../../model/patternMaking3D/index.vue'
+import canvasUpload from "@/component/Canvas/test.vue";
+import workspace from '../../workflow/workspace.vue'
+
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+export default defineComponent({
+    components:{ 
+		patternMaking3D,canvasUpload,workspace
+    },
+	props:{
+		selectKey_:{
+			type:String,
+			default:''
+		},
+		workflowType:String,
+		httpWorkflowType:String,
+	},
+    setup(props,{emit}) {
+        const store = useStore();
+		let driver__:any = computed(()=>{
+			return store.state.Guide.guide
+		}) 
+		provide('driver__',driver__) 
+		//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
+		const data = reactive({
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+		})
+		const dataDom:any = reactive({
+			patternMaking3D:null as any,
+		})
+		const open = (str:any)=>{
+			nextTick(()=>{
+				if(dataDom[str]?.openSetData){
+					dataDom[str].openSetData()
+				}
+			})
+		}
+		const setitemData = (arr:any)=>{
+			return new Promise((resolve,reject)=>{
+			    nextTick(()=>{
+					arr.forEach((rv:any)=>{
+						let arr = ['design','patternMaking3D']
+						if(arr.indexOf(rv) > -1 || !dataDom[rv])return
+						dataDom[rv].openSetData()
+					})
+					resolve('')
+				})
+			})
+		}
+		const unfold = ()=>{
+			if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
+		}
+		const getCollection = ()=>{
+			let value:any = {
+				 "id":data.selectObject.id,
+				"moduleList":["patternMaking3D", ]
+			}
+			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
+				historyChooseData(rv)
+				let allBoardData = ['patternMaking3D']
+				await setitemData(allBoardData)
+				allBoardData.forEach((item)=>{
+					let value = {
+						type:item,
+						objectName:data.selectObject.type,
+					}
+					let arr  = ['sketchBoard','moodBoard','printBoard','colorBoard']
+					if(arr.indexOf(item) != -1){
+						store.dispatch('setAllBoardData',value)
+					}else{
+						store.dispatch('setModularData',value)
+					}
+				})
+
+			})
+		}
+		const historyChooseData = (value:any)=>{
+			store.commit('setPatternMaking3D',value.threeDSimpleId)
+		}
+		onMounted(()=>{
+			nextTick(()=>{
+				getCollection()
+			})
+		})
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			open,
+			unfold,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	.seriesDesign{
+		display: flex;
+		width: 100%;
+		height: 100%;
+		> .contentBox{
+			position: relative;
+			flex: 1;
+			overflow: hidden;
+			> .content,
+			>.homeContent{
+				width: 100%;
+				height: 100%;
+				padding: 4rem;
+				// padding: 3rem;
+			}
+			> .content{
+				position: absolute;
+				top: 0;
+				left: 0;
+				transform: scale(0);
+				background: #ff6666;
+				display: flex;
+				flex-direction: column;
+				> *{
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
+				}
+				> .back{
+					width: auto;
+					height: auto;
+					cursor: pointer;
+				}
+			}
+			> .homeContent{
+				// background: #91ff66;
+				position: absolute;
+			}
+		}
+	}
+</style>

src/component/HomePage/index/workflow/content/productDrawingDesign.vue

@@ -0,0 +1,213 @@
+<template>
+	<div class="seriesDesign">
+		<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
+		<toProduct ref="toProduct" 
+			:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}" 
+			class="toProduct" 
+		 	:isState="selectKey_ =='toProduct'" 
+			v-show="selectKey_ == 'toProduct'"
+		></toProduct>
+		<toProduct ref="relight" 
+			:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}" 
+			class="relight" 
+			:isState="selectKey_ =='relight'"	
+			v-show="selectKey_ == 'relight'"
+		></toProduct>
+		<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
+		<poseTransfer ref="poseTransfer" class="poseTransfer" :isState="selectKey_ =='poseTransfer'" v-show="selectKey_ == 'poseTransfer'"></poseTransfer>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import workspace from '../../workflow/workspace.vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import toProduct from '../../model/toProduct/index.vue'
+import poseTransfer from '../../model/poseTransfer/index.vue'
+import canvasUpload from "@/component/Canvas/index.vue";
+
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+export default defineComponent({
+    components:{ 
+		workspace,toProduct,canvasUpload,poseTransfer
+    },
+	props:{
+		selectKey_:{
+			type:String,
+			default:''
+		},
+		workflowType:String,
+		httpWorkflowType:String,
+	},
+    setup(props,{emit}) {
+        const store = useStore();
+		let driver__:any = computed(()=>{
+			return store.state.Guide.guide
+		}) 
+		provide('driver__',driver__) 
+		//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
+		const data = reactive({
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+		})
+		const dataDom:any = reactive({
+			toProduct:null as any,  
+			relight:null as any,
+			poseTransfer:null as any,
+			canvas:null as any,
+		})
+		const open = (str:any)=>{
+			console.log(str)
+			nextTick(()=>{
+				if(dataDom[str]?.openSetData){
+					dataDom[str].openSetData()
+				}
+			})
+		}
+		const setitemData = (arr:any)=>{
+			return new Promise((resolve,reject)=>{
+			    nextTick(()=>{
+					arr.forEach((rv:any)=>{
+						let arr = ['design','patternMaking3D'] 						
+						if(arr.indexOf(rv) > -1 || !dataDom[rv])return
+						dataDom[rv].openSetData()
+					})
+					resolve('')
+				})
+			})
+		}
+		const unfold = ()=>{
+			if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
+		}
+		const getCollection = ()=>{
+			let value:any = {
+				 "id":data.selectObject.id,
+				"moduleList":['toProduct','relight','poseTransfer']
+			}
+			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
+				historyChooseData(rv)//设置历史数据
+				let allBoardData = ['toProduct','relight','poseTransfer']
+				let canvasData = ['canvas']
+				for (let index = 0; index < canvasData.length; index++) {
+					const item = canvasData[index];
+					await getCanvasData(item)
+				}
+				await setitemData(allBoardData)
+				//还有一个canvas
+				allBoardData.forEach((item)=>{
+					let value = {
+						type:item,
+						objectName:data.selectObject.type,
+					}
+					store.dispatch('setModularData',value)
+				})
+
+			})
+		}
+		const getCanvasData = (str:any)=>{
+			return new Promise((resolve, reject) => {
+				let value = {
+					module:str,
+					projectId:data.selectObject.id,
+				}
+				Https.axiosPost(Https.httpUrls.exportSearch, value)
+				.then((rv) => {
+					store.commit("setCanvasData", {type:str,file:rv});
+					resolve('')
+				})
+				.catch((rv) => {
+					resolve(null)
+				});
+			})
+		}
+		const historyChooseData = (data:any)=>{
+			if(data.toProduct){
+				let value = {
+					list: data.toProduct,
+					str:'add',
+					index:-1,
+				}
+				store.commit("setToProductImage", value);
+			}
+			if(data.relight){
+				let value = {
+					list: data.relight,
+					str:'add',
+					index:-1,
+				}
+				store.commit("setRelightList", value);
+			}
+			if(data.poseTransfer){
+				let value = {
+					list: data.poseTransfer,
+					str:'add',
+					index:-1,
+				}
+				store.commit("setPoseTransfer", value);
+			}
+		}
+		onMounted(()=>{
+			nextTick(()=>{
+				getCollection()
+			})
+		})
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			open,
+			unfold,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	.seriesDesign{
+		display: flex;
+		width: 100%;
+		height: 100%;
+		> .contentBox{
+			position: relative;
+			flex: 1;
+			overflow: hidden;
+			> .content,
+			>.homeContent{
+				width: 100%;
+				height: 100%;
+				padding: 4rem;
+				// padding: 3rem;
+			}
+			> .content{
+				position: absolute;
+				top: 0;
+				left: 0;
+				transform: scale(0);
+				background: #ff6666;
+				display: flex;
+				flex-direction: column;
+				> *{
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
+				}
+				> .back{
+					width: auto;
+					height: auto;
+					cursor: pointer;
+				}
+			}
+			> .homeContent{
+				// background: #91ff66;
+				position: absolute;
+			}
+		}
+	}
+</style>

src/component/HomePage/index/workflow/content/seriesDesign.vue

@@ -0,0 +1,334 @@
+<template>
+	<div class="seriesDesign">
+		<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
+		<design ref="design" class="design" :isState="selectKey_ =='design'" v-show="selectKey_ == 'design'"></design>
+		<MoodboardUpload ref="moodBoard" class="moodBoard" :isState="selectKey_ =='moodBoard'" v-show="selectKey_ == 'moodBoard'"></MoodboardUpload>
+		<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
+		<ColorboardUpload ref="colorBoard" class="colorBoard" :isState="selectKey_ =='colorBoard'" v-show="selectKey_ == 'colorBoard'"></ColorboardUpload>
+		<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
+		<mannequin ref="mannequin" class="mannequin" :isState="selectKey_ =='mannequin'" v-show="selectKey_ == 'mannequin'"></mannequin>
+		<toProduct ref="toProduct" 
+			:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}" 
+			class="toProduct" 
+		 	:isState="selectKey_ =='toProduct'" 
+			v-show="selectKey_ == 'toProduct'"
+		></toProduct>
+		<toProduct ref="relight" 
+			:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}" 
+			class="relight" 
+			:isState="selectKey_ =='relight'"	
+			v-show="selectKey_ == 'relight'"
+		></toProduct>
+		<poseTransfer ref="poseTransfer" class="poseTransfer" :isState="selectKey_ =='poseTransfer'" v-show="selectKey_ == 'poseTransfer'"></poseTransfer>
+		<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import workspace from '../../workflow/workspace.vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import design from '../../model/design/index.vue'
+import MoodboardUpload from '../../model/collection/MoodboardUpload.vue'
+import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
+import ColorboardUpload from '../../model/collection/ColorboardUpload.vue'
+import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
+import mannequin from '../../model/mannequin/index.vue'
+import toProduct from '../../model/toProduct/index.vue'
+import poseTransfer from '../../model/poseTransfer/index.vue'
+import canvasUpload from "@/component/Canvas/index.vue";
+
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+export default defineComponent({
+    components:{ 
+		workspace,design,MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,mannequin,toProduct,canvasUpload,poseTransfer
+    },
+	props:{
+		selectKey_:{
+			type:String,
+			default:''
+		},
+		workflowType:String,
+		httpWorkflowType:String,
+	},
+    setup(props,{emit}) {
+        const store = useStore();
+		let driver__:any = computed(()=>{
+			return store.state.Guide.guide
+		}) 
+		provide('driver__',driver__) 
+		//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
+		const data = reactive({
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+		})
+		const dataDom:any = reactive({
+			moodBoard:null as any,
+			printBoard:null as any,
+			colorBoard:null as any,
+			sketchBoard:null as any,
+			mannequin:null as any,
+			toProduct:null as any,  
+			design:null as any,
+			relight:null as any,
+			poseTransfer:null as any,
+			canvas:null as any,
+		})
+		const open = (str:any,button:any)=>{
+			nextTick(()=>{
+				if(dataDom[str]?.openSetData){
+					dataDom[str].openSetData(button)
+				}
+			})
+		}
+		const setitemData = (arr:any)=>{
+			return new Promise((resolve,reject)=>{
+			    nextTick(()=>{
+					arr.forEach((rv:any)=>{
+						let arr = ['design','patternMaking3D'] 						
+						if(arr.indexOf(rv) > -1 || !dataDom[rv])return
+						dataDom[rv].openSetData()
+					})
+					resolve('')
+				})
+			})
+		}
+		const unfold = ()=>{
+			if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
+		}
+		const getCollection = ()=>{
+			let value:any = {
+				 "id":data.selectObject.id,
+				"moduleList":["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight','poseTransfer']
+			}
+			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
+				historyChooseData(rv)//设置历史数据
+				let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','design','toProduct','relight','poseTransfer']
+				let canvasData = ['canvas']
+				for (let index = 0; index < canvasData.length; index++) {
+					const item = canvasData[index];
+					await getCanvasData(item)
+				}
+				await setitemData(allBoardData)
+				//还有一个canvas
+				if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
+				allBoardData.forEach((item)=>{
+					let value = {
+						type:item,
+						objectName:data.selectObject.type,
+					}
+					let arr  = ['sketchBoard','moodBoard','printBoard','colorBoard']
+					if(arr.indexOf(item) != -1){
+						store.dispatch('setAllBoardData',value)
+					}else{
+						store.dispatch('setModularData',value)
+					}
+				})
+
+			})
+		}
+		const getCanvasData = (str:any)=>{
+			return new Promise((resolve, reject) => {
+				let value = {
+					module:str,
+					projectId:data.selectObject.id,
+				}
+				Https.axiosPost(Https.httpUrls.exportSearch, value)
+				.then((rv) => {
+					store.commit("setCanvasData", {type:str,file:rv});
+					resolve('')
+				})
+				.catch((rv) => {
+					resolve(null)
+				});
+			})
+		}
+		const historyChooseData = (data:any)=>{
+			let collectionData = {
+				disposeMoodboard: data.moodBoard?.moodTemplateId?[{
+					id:data.moodBoard.moodTemplateId,
+					imgUrl:data.moodBoard.moodTemplateUrl,
+					resData:{
+						name:data.moodBoard.moodTemplateName,
+					}
+				}]:[],
+				moodboardPosition:data.moodBoard?.moodboardPosition?JSON.parse(data.moodBoard.moodboardPosition):{},
+				moodboardFiles: dealViewChooseData(
+					data.moodBoard?.moodBoards,"Moodboard"
+				),
+				printboardFiles: dealViewChooseData(
+					data.printBoard,"Printboard"
+				),
+				generatePrintFiles: [],
+				colorBoards: dealViewChooseColor(
+					data.colorBoard
+				),
+				sketchboardFiles: dealViewChooseData(
+					data.sketchBoard,"Sketchboard"
+				),
+			};
+			if(data.moodBoard?.moodTemplateId)store.commit("setMoodTemplateId", data.moodBoard.moodTemplateId);
+			store.commit("setAllBoardDataChoose", collectionData);
+			// store.commit('clearShowSketchboard')
+			store.commit("setShowSketchboard", data.sketchBoards);
+			let likeDesignCollectionList:any = []
+			if(data.design?.userLikeDetails){
+				data.design?.userLikeDetails.map(
+				(v: any) => {
+					let data = {
+						...v, 
+						groupDetailId: v.id,
+						designItemUrl: v.designOutfitUrl,
+						designItemId: v.designItemId,
+					};
+					return data;
+				}
+			); 
+			}
+			store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
+			store.commit("setUserGroupId", data.design.userGroupId);
+			console.log(data.toProduct)
+			if(data.toProduct){
+				let value = {
+					list: data.toProduct,
+					str:'add',
+					index:-1,
+				}
+				store.commit("setToProductImage", value);
+			}
+			if(data.relight){
+				let value = {
+					list: data.relight,
+					str:'add',
+					index:-1,
+				}
+				store.commit("setRelightList", value);
+			}
+			if(data.poseTransfer){
+				let value = {
+					list: data.poseTransfer,
+					str:'add',
+					index:-1,
+				}
+				store.commit("setPoseTransfer", value);
+			}
+		}
+		//统一处理选择组的渲染数据
+		const dealViewChooseData = (data: any,str:string)=> {
+			if (!data) {
+				return [];
+			}
+			let filesList = data.map((v: any) => {
+				let newData: any = {
+					imgUrl: v.url?v.url:v.designOutfitUrl,
+					id: v.id,
+					status: "done",
+					resData: v,
+					type_:{
+						type1:'material',
+						type2:v.level1Type
+					}
+				};
+				if (v.level1Type === "Sketchboard") {
+					newData.pin = v.isPin;
+					newData.categoryValue = v.level2Type;
+					newData.level2Type = v.level2Type;
+				}
+				if (v.level1Type === "Printboard") {
+					newData.pin = v.isPin;
+					newData.level2Type = v.level2Type;
+					newData.categoryValue = v.level2Type;
+				}
+				return newData;
+			});
+			return filesList;
+		}
+		//统一处理选择组的渲染数据
+		const dealViewChooseColor = (data: any)=>{
+			let colorList = data.map((v: any) => {
+				let rgbValue = v.rgbValue.split(" ");
+				let newData: any = {
+					id: v.id,
+					name: v.name,
+					tcx: v.tcx || "",
+					rgbValue: {
+						r: rgbValue[0],
+						g: rgbValue[1],
+						b: rgbValue[2],
+						a: 1,
+					},
+				};
+				if(v.gradient){
+					newData.gradient = v.gradient;
+				}else{
+					delete newData.gradient;
+				}
+				return newData;
+			});
+			return colorList;
+		}
+		onMounted(()=>{
+			nextTick(()=>{
+				getCollection()
+			})
+		})
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			open,
+			unfold,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	.seriesDesign{
+		display: flex;
+		width: 100%;
+		height: 100%;
+		> .contentBox{
+			position: relative;
+			flex: 1;
+			overflow: hidden;
+			> .content,
+			>.homeContent{
+				width: 100%;
+				height: 100%;
+				padding: 4rem;
+				// padding: 3rem;
+			}
+			> .content{
+				position: absolute;
+				top: 0;
+				left: 0;
+				transform: scale(0);
+				background: #ff6666;
+				display: flex;
+				flex-direction: column;
+				> *{
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
+				}
+				> .back{
+					width: auto;
+					height: auto;
+					cursor: pointer;
+				}
+			}
+			> .homeContent{
+				// background: #91ff66;
+				position: absolute;
+			}
+		}
+	}
+</style>

src/component/HomePage/index/workflow/content/singleProductDesign.vue

@@ -0,0 +1,319 @@
+<template>
+	<div class="seriesDesign">
+		<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
+		<design ref="design" class="design" :isState="selectKey_ =='design'" v-show="selectKey_ == 'design'"></design>
+		<MoodboardUpload ref="moodBoard" class="moodBoard" :isState="selectKey_ =='moodBoard'" v-show="selectKey_ == 'moodBoard'"></MoodboardUpload>
+		<PrintboardUpload ref="printBoard" class="printBoard" :isState="selectKey_ =='printBoard'" v-show="selectKey_ == 'printBoard'"></PrintboardUpload>
+		<ColorboardUpload ref="colorBoard" class="colorBoard" :isState="selectKey_ =='colorBoard'" v-show="selectKey_ == 'colorBoard'"></ColorboardUpload>
+		<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
+		<toProduct ref="toProduct" 
+			:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}" 
+			class="toProduct" 
+		 	:isState="selectKey_ =='toProduct'" 
+			v-show="selectKey_ == 'toProduct'"
+		></toProduct>
+		<toProduct ref="relight" 
+			:productimgMenu="{value:'Relight',label:$t('ProductImg.Relight')}" 
+			class="relight" 
+			:isState="selectKey_ =='relight'"	
+			v-show="selectKey_ == 'relight'"
+		></toProduct>
+		<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import workspace from '../../workflow/workspace.vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import design from '../../model/design/index.vue'
+import MoodboardUpload from '../../model/collection/MoodboardUpload.vue'
+import PrintboardUpload from '../../model/collection/PrintboardUpload.vue'
+import ColorboardUpload from '../../model/collection/ColorboardUpload.vue'
+import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
+import toProduct from '../../model/toProduct/index.vue'
+import canvasUpload from "@/component/Canvas/index.vue";
+
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+export default defineComponent({
+    components:{ 
+		workspace,design,MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,toProduct,canvasUpload,
+    },
+	props:{
+		selectKey_:{
+			type:String,
+			default:''
+		},
+		workflowType:String,
+		httpWorkflowType:String,
+	},
+    setup(props,{emit}) {
+        const store = useStore();
+		let driver__:any = computed(()=>{
+			return store.state.Guide.guide
+		}) 
+		provide('driver__',driver__) 
+		const data = reactive({
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+		})
+		const dataDom:any = reactive({
+			moodBoard:null as any,
+			printBoard:null as any,
+			colorBoard:null as any,
+			sketchBoard:null as any,
+			toProduct:null as any,  
+			design:null as any,
+			relight:null as any,
+			canvas:null as any,
+		})
+		const open = (str:any)=>{
+			nextTick(()=>{
+				if(dataDom[str]?.openSetData){
+					dataDom[str].openSetData()
+				}
+			})
+		}
+		const setitemData = (arr:any)=>{
+			return new Promise((resolve,reject)=>{
+			    nextTick(()=>{
+					arr.forEach((rv:any)=>{
+						let arr = ['design','patternMaking3D'] 						
+						if(arr.indexOf(rv) > -1 || !dataDom[rv])return
+						dataDom[rv].openSetData()
+					})
+					resolve('')
+				})
+			})
+		}
+		const unfold = ()=>{
+			if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
+		}
+		const getCollection = ()=>{
+			let value:any = {
+				 "id":data.selectObject.id,
+				"moduleList":["moodBoard", "printBoard", "colorBoard", "sketchBoard",'design','toProduct','relight']
+			}
+			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
+				historyChooseData(rv)
+				let allBoardData = ['sketchBoard','moodBoard','printBoard','colorBoard','design','toProduct','relight']
+				let canvasData = ['canvas']
+				for (let index = 0; index < canvasData.length; index++) {
+					const item = canvasData[index];
+					await getCanvasData(item)
+				}
+				await setitemData(allBoardData)
+				//还有一个canvas
+				if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
+				allBoardData.forEach((item)=>{
+					let value = {
+						type:item,
+						objectName:data.selectObject.type,
+					}
+					let arr  = ['sketchBoard','moodBoard','printBoard','colorBoard']
+					if(arr.indexOf(item) != -1){
+						store.dispatch('setAllBoardData',value)
+					}else{
+						store.dispatch('setModularData',value)
+					}
+				})
+
+			})
+		}
+		const getCanvasData = (str:any)=>{
+			return new Promise((resolve, reject) => {
+				let value = {
+					module:str,
+					projectId:data.selectObject.id,
+				}
+				Https.axiosPost(Https.httpUrls.exportSearch, value)
+				.then((rv) => {
+					store.commit("setCanvasData", {type:str,file:rv});
+					resolve('')
+				})
+				.catch((rv) => {
+					resolve(null)
+				});
+			})
+		}
+		const historyChooseData = (data:any)=>{
+			let collectionData = {
+				disposeMoodboard: data.moodBoard?.moodTemplateId?[{
+					id:data.moodBoard.moodTemplateId,
+					imgUrl:data.moodBoard.moodTemplateUrl,
+					resData:{
+						name:data.moodBoard.moodTemplateName,
+					}
+				}]:[],
+				moodboardPosition:data.moodBoard?.moodboardPosition?JSON.parse(data.moodBoard.moodboardPosition):{},
+				moodboardFiles: dealViewChooseData(
+					data.moodBoard?.moodBoards,"Moodboard"
+				),
+				printboardFiles: dealViewChooseData(
+					data.printBoard,"Printboard"
+				),
+				generatePrintFiles: [],
+				colorBoards: dealViewChooseColor(
+					data.colorBoard
+				),
+				sketchboardFiles: dealViewChooseData(
+					data.sketchBoard,"Sketchboard"
+				),
+			};
+			if(data.moodBoard?.moodTemplateId)store.commit("setMoodTemplateId", data.moodBoard.moodTemplateId);
+			store.commit("setAllBoardDataChoose", collectionData);
+			// store.commit('clearShowSketchboard')
+			store.commit("setShowSketchboard", data.sketchBoards);
+			let likeDesignCollectionList:any = []
+			if(data.design?.userLikeDetails){
+				data.design?.userLikeDetails.map(
+				(v: any) => {
+					let data = {
+						...v, 
+						groupDetailId: v.id,
+						designItemUrl: v.designOutfitUrl,
+						designItemId: v.designItemId,
+					};
+					return data;
+				}
+			); 
+			}
+			store.commit("setLikeDesignCollectionList",data.design.userLikeDetails);
+			store.commit("setUserGroupId", data.design.userGroupId);
+			if(data.toProduct){
+				let value = {
+					list: data.toProduct,
+					str:'add',
+					index:-1,
+				}
+				store.commit("setToProductImage", value);
+			}
+			if(data.relight){
+				let value = {
+					list: data.relight,
+					str:'add',
+					index:-1,
+				}
+				store.commit("setRelightList", value);
+			}
+
+		}
+		//统一处理选择组的渲染数据
+		const dealViewChooseData = (data: any,str:string)=> {
+			if (!data) {
+				return [];
+			}
+			let filesList = data.map((v: any) => {
+				let newData: any = {
+					imgUrl: v.url?v.url:v.designOutfitUrl,
+					id: v.id,
+					status: "done",
+					resData: v,
+					type_:{
+						type1:'material',
+						type2:v.level1Type
+					}
+				};
+				if (v.level1Type === "Sketchboard") {
+					newData.pin = v.isPin;
+					newData.categoryValue = v.level2Type;
+					newData.level2Type = v.level2Type;
+				}
+				if (v.level1Type === "Printboard") {
+					newData.pin = v.isPin;
+					newData.level2Type = v.level2Type;
+					newData.categoryValue = v.level2Type;
+				}
+				return newData;
+			});
+			return filesList;
+		}
+		//统一处理选择组的渲染数据
+		const dealViewChooseColor = (data: any)=>{
+			let colorList = data.map((v: any) => {
+				let rgbValue = v.rgbValue.split(" ");
+				let newData: any = {
+					id: v.id,
+					name: v.name,
+					tcx: v.tcx || "",
+					rgbValue: {
+						r: rgbValue[0],
+						g: rgbValue[1],
+						b: rgbValue[2],
+						a: 1,
+					},
+				};
+				if(v.gradient){
+					newData.gradient = v.gradient;
+				}else{
+					delete newData.gradient;
+				}
+				return newData;
+			});
+			return colorList;
+		}
+		onMounted(()=>{
+			nextTick(()=>{
+				getCollection()
+			})
+		})
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			open,
+			unfold,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	.seriesDesign{
+		display: flex;
+		width: 100%;
+		height: 100%;
+		> .contentBox{
+			position: relative;
+			flex: 1;
+			overflow: hidden;
+			> .content,
+			>.homeContent{
+				width: 100%;
+				height: 100%;
+				padding: 4rem;
+				// padding: 3rem;
+			}
+			> .content{
+				position: absolute;
+				top: 0;
+				left: 0;
+				transform: scale(0);
+				background: #ff6666;
+				display: flex;
+				flex-direction: column;
+				> *{
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
+				}
+				> .back{
+					width: auto;
+					height: auto;
+					cursor: pointer;
+				}
+			}
+			> .homeContent{
+				// background: #91ff66;
+				position: absolute;
+			}
+		}
+	}
+</style>

src/component/HomePage/index/workflow/content/sketchDesign.vue

@@ -0,0 +1,223 @@
+<template>
+	<div class="seriesDesign">
+		<workspace ref="workspace" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType" class="workspace" :isState="selectKey_ =='workspace'" v-show="selectKey_ == 'workspace'"></workspace>
+		<SketchboardUpload ref="sketchBoard" class="sketchBoard" :isState="selectKey_ =='sketchBoard'" v-show="selectKey_ == 'sketchBoard'"></SketchboardUpload>
+		<deReconstruction ref="deReconstruction" class="deReconstruction" :isState="selectKey_ =='deReconstruction'" v-show="selectKey_ == 'deReconstruction'"></deReconstruction>
+		<canvasUpload ref="canvas" class="canvas" :isState="selectKey_ =='canvas'" v-show="selectKey_ == 'canvas'"></canvasUpload>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import workspace from '../../workflow/workspace.vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import SketchboardUpload from '../../model/collection/SketchboardUpload.vue'
+import deReconstruction from '../../model/deReconstruction/index.vue'
+import canvasUpload from "@/component/Canvas/index.vue";
+
+import { gsap, TweenMax } from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+export default defineComponent({
+    components:{ 
+		workspace,SketchboardUpload,deReconstruction,canvasUpload
+    },
+	props:{
+		selectKey_:{
+			type:String,
+			default:''
+		},
+		workflowType:String,
+		httpWorkflowType:String,
+	},
+    setup(props,{emit}) {
+        const store = useStore();
+		let driver__:any = computed(()=>{
+			return store.state.Guide.guide
+		}) 
+		provide('driver__',driver__) 
+		//['moodBoard','printBoard','colorBoard','sketchBoard','mannequin','toProduct]
+		const data = reactive({
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+		})
+		const dataDom:any = reactive({
+			sketchBoard:null as any,
+			deReconstruction:null as any,
+			canvas:null as any,
+		})
+		const open = (str:any)=>{
+			nextTick(()=>{
+				if(dataDom[str]?.openSetData){
+					dataDom[str].openSetData(str)
+				}
+			})
+		}
+		const setitemData = (arr:any)=>{
+			return new Promise((resolve,reject)=>{
+			    nextTick(()=>{
+					arr.forEach((rv:any)=>{
+						if(rv == 'design' || rv == 'deReconstruction' || rv == 'canvas' || !dataDom[rv])return
+						dataDom[rv].openSetData()
+					})
+					resolve('')
+				})
+			})
+		}
+		const unfold = ()=>{
+			if(dataDom?.[props.selectKey_]?.setItemPosition)dataDom[props.selectKey_].setItemPosition()
+		}
+		const getCollection = ()=>{
+			let value:any = {
+				 "id":data.selectObject.id,
+				"moduleList":["sketchBoard",'deReconstruction']
+			}
+			Https.axiosPost(Https.httpUrls.getModuleContent,value).then(async (rv)=>{
+				historyChooseData(rv)
+				let allBoardData = ['sketchBoard','deReconstruction']
+				let canvasData = ['deReconstruction','canvas']
+				for (let index = 0; index < canvasData.length; index++) {
+					const item = canvasData[index];
+					await getCanvasData(item)
+				}
+				await setitemData(allBoardData)
+				//还有一个canvas
+				if(rv.boundingBox)store.commit('setShowSketchboard',rv.boundingBox)
+				allBoardData.forEach((item)=>{
+					let value = {
+						type:item,
+						objectName:data.selectObject.type,
+					}
+					let arr  = ['sketchBoard','moodBoard','printBoard','colorBoard']
+					if(arr.indexOf(item) != -1){
+						store.dispatch('setAllBoardData',value)
+					}else{
+						store.dispatch('setModularData',value)
+					}
+				})
+
+			})
+		}
+		const getCanvasData = (str:any)=>{
+			return new Promise((resolve, reject) => {
+				let value = {
+					module:str,
+					projectId:data.selectObject.id,
+				}
+				Https.axiosPost(Https.httpUrls.exportSearch, value)
+				.then((rv) => {
+					store.commit("setCanvasData", {type:str,file:rv});
+					resolve('')
+				})
+				.catch((rv) => {
+					resolve(null)
+				});
+			})
+		}
+		const historyChooseData = (data:any)=>{
+			let collectionData = {
+				sketchboardFiles: dealViewChooseData(
+					data.sketchBoard,"Sketchboard"
+				),
+			};
+			store.commit("setAllBoardDataChoose", collectionData);
+			if(data.deReconstruction){
+				data.deReconstruction.url = data.deReconstruction.collageSketchUrl
+				data.deReconstruction.isLike = data.deReconstruction.liked
+				let value = {
+					list: [data.deReconstruction],
+					str:'add',
+					index:-1,
+				}
+				store.commit("setDeReconstruction", value);
+			}
+		} 
+		//统一处理选择组的渲染数据
+		const dealViewChooseData = (data: any,str:string)=> {
+			if (!data) {
+				return [];
+			}
+			let filesList = data.map((v: any) => {
+				let newData: any = {
+					imgUrl: v.url?v.url:v.designOutfitUrl,
+					id: v.id,
+					status: "done",
+					resData: v,
+					type_:{
+						type1:'material',
+						type2:v.level1Type
+					}
+				};
+				if (v.level1Type === "Sketchboard") {
+					newData.pin = v.isPin;
+					newData.categoryValue = v.level2Type;
+					newData.level2Type = v.level2Type;
+				}
+				return newData;
+			});
+			return filesList;
+		}
+		
+		onMounted(()=>{
+			nextTick(()=>{
+				getCollection()
+			})
+		})
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			open,
+			unfold,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	.seriesDesign{
+		display: flex;
+		width: 100%;
+		height: 100%;
+		> .contentBox{
+			position: relative;
+			flex: 1;
+			overflow: hidden;
+			> .content,
+			>.homeContent{
+				width: 100%;
+				height: 100%;
+				padding: 4rem;
+				// padding: 3rem;
+			}
+			> .content{
+				position: absolute;
+				top: 0;
+				left: 0;
+				transform: scale(0);
+				background: #ff6666;
+				display: flex;
+				flex-direction: column;
+				> *{
+					width: 100%;
+					height: 100%;
+					overflow: hidden;
+				}
+				> .back{
+					width: auto;
+					height: auto;
+					cursor: pointer;
+				}
+			}
+			> .homeContent{
+				// background: #91ff66;
+				position: absolute;
+			}
+		}
+	}
+</style>

src/component/HomePage/index/workflow/index.vue

@@ -1,34 +1,44 @@
 <template>
-	<div class="home">
-		<navList @setSelectKey="setSelectKey" :navListData="navListData" :selectKey="selectKey"></navList>
-		<div class="contentBox">
+	<div class="workflow" v-show="isUpdataPorject || selectObject.id">
+		<navList @setSelectKey="setSelectKey" @unfold="unfold" @goHome="goHome" :navListData="navListData" :selectKey="selectKey"></navList>
+		<div class="contentBox" :style="[{overflow:selectKey == 'canvas'?'hidden':''}]">
 			<div class="homeContent" ref="parent">
-				<navListBox @setSelectKey=setSelectKey :navListData="navListData" :selectKey="selectKey"></navListBox>
+				<navListBox 
+					@setSelectKey=setSelectKey 
+					:navListData="navListData" 
+					:selectKey="selectKey" 
+					:workflowType="workflowType" 
+					v-model:isShowMark="isShowMark"
+				></navListBox>
 			</div>
 			<div class="content">
-				<div class="back" @click="setBack()">&lt; Back</div>
-				<design class="design" v-if="selectKey_ == 'design'"></design>
-				<MoodboardUpload class="moodBoard" v-if="selectKey_ == 'moodBoard'"></MoodboardUpload>
-				<PrintboardUpload class="printBoard" v-if="selectKey_ == 'printBoard'"></PrintboardUpload>
-				<ColorboardUpload class="colorBoard" v-if="selectKey_ == 'colorBoard'"></ColorboardUpload>
-				<SketchboardUpload class="sketchBoard" v-if="selectKey_ == 'sketchBoard'"></SketchboardUpload>
+				<div class="back">
+					<div class="title">
+						{{ navListData?.find((item:any) => item.value === selectKey_)?.name }}
+					</div>
+					<div class="text" @click="setBack()"><i class="fi fi-bs-down-left-and-up-right-to-center"></i></div>
+				</div>
+				<content ref="content" :selectKey_="selectKey_" :workflowType="workflowType" :httpWorkflowType="httpWorkflowType"></content>
 			</div>
 		</div>
 	</div>
+	<div v-show="!isUpdataPorject && !selectObject.id" class="workflow">
+		<workspace :workflowType="workflowType" @setProject="setProject" :httpWorkflowType="httpWorkflowType"></workspace>
+	</div>
+	<div class="mark_loading" v-show="isShowMark">
+		<a-spin size="large" />
+	</div>
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive} from 'vue'
+import { defineComponent,computed,ref,watch,nextTick,provide,toRefs, reactive, onMounted} from 'vue'
 // import setDesignItem from '@/component/Detail/setDesignItem2.vue'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
-import design from './design/index.vue'
-import MoodboardUpload from './collection/MoodboardUpload.vue'
-import PrintboardUpload from './collection/PrintboardUpload.vue'
-import ColorboardUpload from './collection/ColorboardUpload.vue'
-import SketchboardUpload from './collection/SketchboardUpload.vue'
 
+import content from './content/index.vue'
+import workspace from './workspace.vue'
 import navList from './nav.vue'
 import navListBox from './navBox.vue'
 
@@ -37,8 +47,20 @@ import { gsap, TweenMax } from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
 export default defineComponent({
     components:{
-		design,MoodboardUpload,PrintboardUpload,ColorboardUpload,SketchboardUpload,navList,navListBox
+		content,navList,navListBox,workspace
     },
+	//props
+	props:{
+		workflowType:{
+			type:String,
+
+		},
+		httpWorkflowType:{
+			type:String,
+			default:''
+		}
+    },
+	emits:['goHome'],
     setup(props,{emit}) {
         const store = useStore();
 		let driver__:any = computed(()=>{
@@ -47,89 +69,55 @@ export default defineComponent({
 		provide('driver__',driver__)
 
 		const data = reactive({
-			
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
 			selectKey:'',
 			selectKey_:'',
+			isShowMark:false,
+			isUpdataPorject:false as any,
 			adminData:{
 				position:'',
 				dom:null as any,
 				parentDom:null as any,
 			},
-			navListData:[
-				{
-					icon:'',
-					value:'design',
-					name:'1',
-					task:'1-1',
-				},{
-					icon:'',
-					value:'moodBoard',
-					name:'2',
-					task:'1-2',
-				},{
-					icon:'',
-					value:'printBoard',
-					name:'3',
-					task:'1-3',
-				},{
-					icon:'',
-					value:'colorBoard',
-					name:'3',
-					task:'1-4',
-				},{
-					icon:'',
-					value:'sketchBoard',
-					name:'3',
-					task:'1-5',
-				},{
-					icon:'',
-					value:'color3',
-					name:'3',
-					task:'2-1',
-				},{
-					icon:'',
-					value:'color4',
-					name:'3',
-					task:'3-1',
-				},{
-					icon:'',
-					value:'color5',
-					name:'3',
-					task:'4-1',
-				},{
-					icon:'',
-					value:'color6',
-					name:'3',
-					task:'4-2',
-				},{
-					icon:'',
-					value:'color7',
-					name:'3',
-					task:'5-1',
-				},
-			],
+			navListData:computed(()=>{
+				return store.state.Workspace.projectList
+			}),
 		})
+		const setIsShowMark = (boolean:boolean)=>{
+			data.isShowMark = boolean
+		}
+		provide('setIsShowMark',setIsShowMark)
 		const dataTime = reactive({
 			selectTime:null as any,
 		})
 		const dataDom = reactive({
-			parent:null as any
-		})
+			parent:null as any,
+			content:null as any
+		})		
 		const setBack = ()=>{
 			data.selectKey = ''
 			updataPage()
 		}
-		const setSelectKey = (value:any)=>{
+		const setProject = (value:any)=>{
+			// data.isUpdataPorject = data
+			if(value == 'set'){
+				data.isUpdataPorject = true
+			}else{
+				data.isUpdataPorject = false
+			}
+		}
+		const setSelectKey = async (value:any)=>{
 			let {str,dom,position} = value
 			data.adminData.dom = dom
 			data.adminData.parentDom = value?.parentDom
 			data.adminData.position = position
 			data.selectKey = str
 			updataPage()
+			if(value.str)dataDom.content.setModule(value)
 		}
 		const updataPage = ()=>{
 			let {dom,position} = data.adminData
-			let contentDom:any = document.querySelectorAll('.home .content')[0]
+			let contentDom:any = document.querySelectorAll('.workflow .content')[0]
 			clearTimeout(dataTime.selectTime)
 			let {top,left,width,height} = dom.getBoundingClientRect()
 			let parentPosition = dataDom.parent.getBoundingClientRect()
@@ -158,39 +146,26 @@ export default defineComponent({
 						x = 0
 						y = dom.offsetTop + dom.offsetHeight / 2
 					}
+					// dataDom.content.open({selectKey:data.selectKey_,workflowType:props.workflowType})
 					contentDom.style.transformOrigin = `${x}px ${y}px`
 					gsap.to(contentDom,.5, {scale:1,opacity:1,ease: "power2.inOut"},);
 				})
 			}
 		}
-		// watch(()=>data.selectKey,(newVal:any,oldVal:any)=>{
-		// 	let navDom:any = document.querySelectorAll('.home .navList')
-		// 	let contentDom:any = document.querySelectorAll('.home .content')[0]
-		// 	clearTimeout(dataTime.selectTime)
-		// 	if(oldVal && newVal == ''){
-		// 		dataTime.selectTime
-		// 		let index = data.navListData.findIndex(item => item.value === oldVal);
-		// 		let top = navDom[index].offsetTop + navDom[index].offsetHeight / 2
-		// 		contentDom.style.transformOrigin = `0px ${top}px`
-		// 		gsap.to(contentDom,.5, {scale:0,opacity:1,ease: "power2.inOut"},);
-		// 		dataTime.selectTime = setTimeout(() => {
-		// 			data.selectKey_ = newVal
-		// 		}, 500);
-		// 	}else{
-		// 		data.selectKey_ = newVal
-		// 		nextTick(()=>{
-		// 			let index = data.navListData.findIndex(item => item.value === newVal);
-		// 			let top = navDom[index].offsetTop + navDom[index].offsetHeight / 2
-		// 			contentDom.style.transformOrigin = `0px ${top}px`
-		// 			gsap.to(contentDom,.5, {scale:1,opacity:1,ease: "power2.inOut"},);
-		// 		})
-		// 	}
-		// })
+		const goHome = ()=>{
+			emit("goHome");
+		}
+		const unfold = ()=>{
+			dataDom.content.unfold()
+		}
         return{
 			...toRefs(dataDom),
 			...toRefs(data),
 			setBack,
+			setProject,
 			setSelectKey,
+			unfold,
+			goHome,
         }
     },
 
@@ -202,7 +177,7 @@ export default defineComponent({
 })
 </script>
 <style lang="less" scoped>
-	.home{
+	.workflow{
 		display: flex;
 		width: 100%;
 		height: 100%;
@@ -214,25 +189,40 @@ export default defineComponent({
 			>.homeContent{
 				width: 100%;
 				height: 100%;
-				padding: 3rem;
+				padding: 4rem;
+				padding-top: 3rem;
+				// padding: 3rem;
 			}
 			> .content{
 				position: absolute;
 				top: 0;
 				left: 0;
 				transform: scale(0);
-				background: #ff6666;
+				// background: #ff6666;
+				background: #fff;
 				display: flex;
 				flex-direction: column;
 				> *{
 					width: 100%;
 					height: 100%;
-					overflow: hidden;
 				}
 				> .back{
 					width: auto;
 					height: auto;
-					cursor: pointer;
+					display: flex;
+					padding-bottom: 1rem;
+					> .title{
+						font-size: 2rem;
+						font-weight: 600;
+					}
+					> .text{
+						cursor: pointer;
+						margin-left: auto;
+						> i{
+							font-size: 3rem;
+							display: flex;
+						}
+					}
 				}
 			}
 			> .homeContent{

src/component/HomePage/index/workflow/nav.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="homeNav" :class="{active:isUnfold}">
+		<div class="navList unfold" @click="setUnfold" :title="'Expand the sidebar'" :class="{active:isUnfold}">
+			<!-- <i class="fi fi-rr-window-maximize"></i> -->
+			<svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" fill="currentColor" viewBox="0 0 24 24">
+				<path fill-rule="evenodd" d="M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2V5H6Zm4 0v14h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-8ZM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Z" clip-rule="evenodd"></path>
+			</svg>
+			<span v-show="isUnfold">Module</span>
+		</div>
+		<div class="border"></div>
+		<div class="navList unfold" @click="goHome">
+			<i class="fi fi-sr-home"></i>
+			<span v-show="isUnfold">Home</span>
+		</div>
+		<div class="navList" :class="{active:selectKey == 'workspace'}" @click="setNav('workspace', $event)">
+			<i class="fi fi-rr-settings-sliders"></i>
+			<span v-show="isUnfold">Settings</span>
+		</div>
+		<div class="border"></div>
+		<div class="navList list" :class="{active:selectKey == item.value}" v-for="item in navListData" :key="item.value"  @click="setNav(item.value, $event)">
+			<i :class="item.icon"></i>
+			<span v-show="isUnfold">{{ item.name }}</span>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+
+export default defineComponent({
+    components:{
+    },
+	props:{
+		selectKey:{type:String,default:''},
+		navListData:{type:Array,default:()=>[]},
+	},
+	emits:['setSelectKey','unfold','goHome'],
+    setup(props,{emit}) {
+        const store = useStore();
+		const data = reactive({
+			isUnfold:false
+		})
+		
+		const dataDom = reactive({
+		})
+		const setNav = (str:any,event:any)=>{
+			let data = {
+				str:str == props.selectKey?'':str,
+				dom:event.target,
+				posiiton:'nav',
+			}
+			
+			emit("setSelectKey", data);
+			// emit("update:selectKey", str);
+		}
+		const setUnfold = ()=>{
+			data.isUnfold = !data.isUnfold
+			emit("unfold");
+		}
+		const goHome = ()=>{
+			store.commit('createProbject')
+			emit("goHome");
+		}
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			setNav,
+			setUnfold,
+			goHome,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .homeNav{
+		padding: 5rem 0rem;
+		background: #f7f8fa;
+		transition: all .3s;
+		width: 7rem;
+		overflow: hidden;
+		&.active{
+			width: 20rem;
+		}
+		> div{
+			display: flex;
+			cursor: pointer;
+			border-radius: 1rem;
+			margin: 0 1rem;
+			&.active{
+				background: #ebebeb;
+			}
+			&.unfold{
+				&.active{
+					border: 1px solid #000000;
+				}
+			}
+			> i,> svg{
+				font-size: 2rem;
+				margin-right: 1rem;
+				display: flex;
+				width: 5rem;
+				height: 5rem;
+				align-items: center;
+				justify-content: center;
+				flex-shrink: 0;
+			}
+			> svg{
+				padding: 1rem;
+			}
+			> span{
+				font-size: 1.8rem;
+				line-height: 5rem;
+				white-space: nowrap;
+			}
+		}
+		.border{
+			border-bottom: 1px solid #D9D9D9;
+			margin: 1rem 0;
+		}
+	}
+</style>

src/component/HomePage/index/workflow/navBox.vue

@@ -0,0 +1,228 @@
+<template>
+    <div class="homeNavBox">
+		<div class="navList">
+			<img :class="workflowType" v-if="workflowType == 'seriesDesign'" src="@/assets/images/homePage/seriesDesign.png" alt="">
+			<img :class="workflowType" v-if="workflowType == 'singleProductDesign'" src="@/assets/images/homePage/singleProductDesign.png" alt="">
+			<img :class="workflowType" v-if="workflowType == 'printDesign'" src="@/assets/images/homePage/3DPrintingDesign.png" alt="">
+			<img :class="workflowType" v-if="workflowType == 'productDrawingDesign'" src="@/assets/images/homePage/productDrawingDesign.png" alt="">
+			<img :class="workflowType" v-if="workflowType == 'printingDesign3D'" src="@/assets/images/homePage/3DPrintingDesign.png" alt="">
+			<img :class="workflowType" v-if="workflowType == 'sketchDesign'" src="@/assets/images/homePage/sketchDesign.png" alt="">
+			<div class="navListItem" 
+				v-for="item in navListData" :key="item.value"
+				:class="[
+					(item?.select || (selectObject.model.id > -1 && item.value == 'mannequin'))?'active':'',
+					`item${item.task}`,
+					workflowType,
+					]" 
+			 @click.stop="setNav(item.value,$event)" >
+			  <!-- @click.stop="setSelect(item)" -->
+				<div class="background"></div>
+				<div class="text">
+					<i :class="[item.icon,item.value == 'design'?'active':'']" @click.stop="setNav(item.value,$event,'design')"></i>{{ item.name }}
+				</div>
+				<!-- <div class="designIcon" v-if="item.value == 'design'"><i class="fi fi-rr-magic-wand"></i></div> -->
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+
+export default defineComponent({
+    components:{
+    },
+	props:{
+		selectKey:{type:String,default:''},
+		isShowMark:{type:Boolean,default:false},
+		workflowType:{type:String,default:''},
+	},
+	emits:['setSelectKey','setModule'],
+    setup(props,{emit}) {
+        const store = useStore();
+		const data = reactive({
+			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+			navListData:computed(()=>store.state.Workspace.projectList),
+		})
+		const dataTime = reactive({
+			clickTime:null as any,
+		})
+		const dataDom = reactive({
+			navList:null as any
+		})
+		const setNav = async (str:any,event:any,button:string)=>{
+			clearTimeout(dataTime.clickTime)
+			let data = {
+				str:str == props.selectKey?'':str,
+				dom:event.target,
+				posiiton:'navBox',
+				button,
+			}
+			emit("setSelectKey", data);
+			// emit("update:selectKey", str);
+		}
+		const setSelect = (item:any)=>{
+			clearTimeout(dataTime.clickTime)
+			dataTime.clickTime = setTimeout(async ()=>{//防止双击和单机都执行的问题
+				if (item.select) {
+					let data = {
+						select:false,
+						value:item.value
+					}
+					emit('setModule',data)
+					item.select = false
+				}else{
+					let data = {
+						select:true,
+						value:item.value
+					}
+					emit('setModule',data)
+					item.select = true
+				}
+				
+			},200)
+		}
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			setNav,
+			setSelect,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .homeNavBox{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		> .navList{
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			img{
+				&.seriesDesign{width: 98rem;height: 58rem;}
+				&.singleProductDesign{width: 98rem;height: 43rem;}
+				&.printDesign{width: 8rem;height: 1.3rem;}
+				&.printingDesign3D{width: 8rem;height: 1.3rem;}
+				&.productDrawingDesign{width: 38rem;height: 23rem;}
+				&.sketchDesign{width: 38rem;height: 1.3rem;}
+			}
+			> .navListItem{
+				width: 22rem;
+				height: 10rem;
+				border-radius: 2rem;
+				border: 2px solid #000;
+				position: absolute;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				transition: all .2s;
+				overflow: hidden;
+				cursor: pointer;
+				&.seriesDesign{
+					&.item1-1{top: -5rem;left: -22rem;}
+					&.item1-2{top: 9rem;left: -22rem;}
+					&.item1-3{top: 23rem;left: -22rem;}
+					&.item1-4{top: 37rem;left: -22rem;}
+					&.item1-5{top: 51rem;left: -22rem;}
+					&.item2-1{top: 23rem;left: 8rem;}
+					&.item3-1{top: 23rem;left: 38rem;}
+					&.item4-1{top: 12rem;left: 68rem;}
+					&.item4-2{top: 34rem;left: 68rem;}
+					&.item5-1{top: 23rem;left: 98rem;}
+				}
+				&.singleProductDesign{
+					&.item1-1{top: -5rem;left: -22rem;}
+					&.item1-2{top: 9rem;left: -22rem;}
+					&.item1-3{top: 23rem;left: -22rem;}
+					&.item1-4{top: 37rem;left: -22rem;}
+					&.item1-5{top: 51rem;left: -22rem;}
+					&.item2-1{top: 16.5rem;left: 8rem;}
+					&.item3-1{top: 16.5rem;left: 38rem;}
+					&.item4-1{top: 16.5rem;left: 68rem;}
+					&.item5-1{top: 16.5rem;left: 98rem;}
+				}
+				&.printDesign,&.printingDesign3D{
+					&.item1-1{top: -3rem;left: -22rem;}
+					&.item2-1{top: -3rem;left: 8rem;}
+				}
+				&.productDrawingDesign{
+					&.item1-1{top: 6.5rem;left: -22rem;}
+					&.item2-1{top: -4rem;left: 8rem;}
+					&.item2-2{top: 17rem;left: 8rem;}
+					&.item3-1{top: 6.5rem;left: 38rem;}
+				}
+				&.sketchDesign{
+					&.item1-1{top: -2.5rem;left: -22rem;}
+					&.item2-1{top: -2.5rem;left: 8rem;}
+					&.item3-1{top: -2.5rem;left: 38rem;}
+				}
+				.background{
+					// background: #e8e8e8;
+					background: #e8e8e8;
+					transition: all .3s;
+					position: absolute;
+					top: 0;
+					left: 0;
+					width: 100%;
+					height: 100%;
+				}
+				.text{
+					position: relative;
+					display: flex;
+					align-items: center;
+					> i{
+						font-size: 2rem;
+						margin-right: 1rem;
+						display: flex;
+						&.active{
+							box-shadow: #000 0px 0px 10px;
+							border-radius: 1rem;
+							padding: .5rem;
+						}
+					}
+				}
+				> .designIcon{
+					opacity: 1;
+					position: absolute;
+					bottom: 1rem;
+					right: 1rem;
+					cursor: pointer;
+					box-shadow: #000 0px 0px 10px;
+					border-radius: 1rem;
+					> i{
+						display: flex;
+						padding: .5rem;
+						font-size: 2rem;
+						
+					}
+				}
+				&.active{
+					border: 3px solid #000;
+					.background{
+						opacity: .5;
+					}
+				}
+				&:hover{
+					border: 3px solid #000;
+					.background{
+						opacity: .5;
+					}
+				}
+			}
+		}
+		
+	}
+</style>

src/component/HomePage/index/workflow/workspace.vue

@@ -0,0 +1,345 @@
+<template>
+    <div class="workspace">
+		<div class="workspaceBox">
+			<div class="title marginBottom">Porject setting </div>
+			<div class="projectName marginBottom" v-if="show.title">
+				<div class="text">Project name: <span style="color: red;">*</span></div>
+				<div class="input">
+					<input type="text" v-model="selectObject.name">
+					<!-- <i class="fi fi-rr-edit"></i> -->
+				</div>
+			</div>
+			<div class="gender marginBottom" v-if="show.style">
+				<div class="text">Age</div>
+				<div class="radio">
+					<label>
+						<input type="radio" name="ageGroup" v-model="selectObject.ageGroup" value="Adult">
+						<span>Adult</span>
+					</label>
+					<label>
+						<input type="radio" name="ageGroup" v-model="selectObject.ageGroup" value="Child">
+						<span>Child</span>
+					</label>
+				</div>
+			</div>
+			<div class="gender marginBottom">
+				<div class="text">Gender：</div>
+				<div class="radio">
+					<label>
+						<input type="radio" name="gender" v-model="selectObject.sex" value="Female">
+						<span>Female</span>
+					</label>
+					<label>
+						<input type="radio" name="gender" v-model="selectObject.sex" value="Male">
+						<span>Male</span>
+					</label>
+				</div>
+			</div>
+			<div class="style marginBottom" v-if="show.style">
+				<div class="text">Style：</div>
+				<div class="text">{{ selectObject?.styleName?selectObject?.styleName:'No style' }}</div>
+				<div class="gallery_btn" style="line-height: 5rem;" @click="setStyle">{{ $t('Habit.Select') }}</div>
+			</div>
+			<div class="systemDesigner marginBottom" v-if="show.systemDesigner">
+				<a-slider class="system_silder"
+                    v-model:value="selectObject.systemDesignerPercentage"
+					:tip-formatter="formatter"
+					:tooltipVisible="false"
+				>
+                </a-slider>
+                <div class="text">
+                    <div class="left">
+						{{ $t('Habit.System') }}<span>({{systemDesigner.designer}}%)</span>
+					</div>
+                    <div class="right">
+					
+						{{ $t('Habit.Designer') }}<span>({{systemDesigner.system}}%)</span>
+					</div>
+                </div>
+			</div>
+			<div class="position marginBottom" v-show="show.position">
+				<generalMenu  :dataList="selectObject.positionList" @setprintModel="setprintModel" :item="selectObject.position"></generalMenu>
+			</div>
+			<div class="complete">
+				<div class="gallery_btn" @click="complete">Complete</div>
+			</div>
+		</div>
+		<habitSetStyle ref="habitSetStyle" @setWorkspaceStyle="setWorkspaceStyle" :mannequinStyle="mannequinStyle"></habitSetStyle>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,watch,nextTick,onBeforeMount,toRefs, reactive, onMounted, inject} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+// import workspace from './model/workspace.vue'
+import router from '@/router';
+import habitSetStyle from "@/component/Detail/habitSetStyle.vue";
+import generalMenu from "@/component/HomePage/generalMenu.vue";
+import { Https } from '@/tool/https';
+import { position } from 'html2canvas/dist/types/css/property-descriptors/position';
+import { id } from 'element-plus/es/locale';
+import { message } from 'ant-design-vue';
+export default defineComponent({
+    components:{
+		habitSetStyle,generalMenu
+    },
+	props:{
+	    workflowType:{
+	        type:String,
+			default:''
+	    },
+		httpWorkflowType:{
+	        type:String,
+			default:''
+	    }
+	},
+	emits:['setProject'],
+    setup(props,{emit}) {
+		const { t } = useI18n();
+        const store = useStore();
+		const data = reactive({
+			selectObject_:computed(()=>store.state.Workspace.probjects),//选择的项目
+			selectObject:{} as any,
+			femalePosition:computed(()=>store.state.UserHabit.FemalePosition),//男性衣服位置
+			malePosition:computed(()=>store.state.UserHabit.MalePosition),//女性衣服位置
+			mannequinStyle:computed(()=>store.state.UserHabit.mannequinStyle),//女性衣服位置
+			show:{
+				title:true,
+				gender:false,
+				style:false,
+				systemDesigner:false,
+				position:false,
+			},
+			systemDesigner:{
+				system:0,
+				designer:0,
+			},
+			setIsShowMark:inject('setIsShowMark') as any,
+		})
+		watch(()=>data.selectObject_,(newVal)=>{
+			data.selectObject = JSON.parse(JSON.stringify(newVal))
+		})
+		const dataDom = reactive({
+			habitSetStyle:null as any,
+		})
+		const setStyle = ()=>{
+			dataDom.habitSetStyle.init(data.selectObject);
+		}
+		const setWorkspaceStyle = (value:any)=>{
+			data.selectObject.styleName = value.name
+			data.selectObject.style = value.value
+			data.selectObject.styleId = value.id
+			// store.commit('setProbject',data)
+		}
+		const setprintModel = (value:any)=>{
+			console.log(value);
+			
+			data.selectObject.position = value
+		}
+		const formatter = (value: number)=>{
+			data.systemDesigner.system = 100 - value
+			data.systemDesigner.designer = value
+			let num = Math.abs((value-50)*2)
+			return `${num}%`;
+		}
+		const complete = ()=>{
+			if(!data.selectObject.name){
+				message.info(t('PrintboardUpload.jsContent7'))
+				return
+			}
+			let value = {
+				name:data.selectObject.name,
+				process:props.httpWorkflowType,
+				styleId:data.show.style?data.selectObject.sylteId:null,
+				id:data.selectObject.id,
+				workspace:{
+					sex:data.selectObject.sex,
+					// sex:data.show.gender?data.selectObject.sex:null,
+					systemDesignerPercentage:data.show.systemDesigner?data.selectObject.systemDesignerPercentage:null,
+					position:data.show.position?data.selectObject.position.value:'Overall',
+					// position:data.selectObject,
+				} as any,
+
+			}
+			Https.axiosPost(Https.httpUrls.saveOrUpdate,value).then((rv)=>{
+				if(rv){
+					data.selectObject.id = rv.id
+					let model:any = {}
+					let position = []
+					if(data.selectObject.sex == "Female"){
+					// if(rv.workspaceVO.sex == "Female"){
+						model = {
+							id:rv.workspaceVO.mannequinFemaleId,
+							type:rv.workspaceVO.mannequinFemaleType,
+							url:rv.workspaceVO.malePresignedUrl,
+						}
+						position = store.state.UserHabit.FemalePosition
+					}else{
+						model = {
+							id:rv.workspaceVO.mannequinMaleId,
+							type:rv.workspaceVO.mannequinMaleType,
+							url:rv.workspaceVO.malePresignedUrl,
+						}
+						position = store.state.UserHabit.MalePosition
+					}
+					// model.url = rv.workspaceVO.malePresignedUrl
+					data.selectObject.model = model
+					data.selectObject.positionList = position
+					store.commit('setProbject',data.selectObject)
+					emit('setProject','set')
+				}
+			})
+		}
+		const openSetData = ()=>{
+
+		}
+		onMounted(()=>{
+			data.selectObject = JSON.parse(JSON.stringify(data.selectObject_))
+			data.show.gender = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign' || props.workflowType == 'printingDesign3D')
+			data.show.style = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
+			data.show.systemDesigner = (props.workflowType == 'seriesDesign' || props.workflowType == 'singleProductDesign')
+			data.show.position = (props.workflowType == 'singleProductDesign')
+			
+			if(!data.mannequinStyle && props.workflowType == 'seriesDesign'){
+				data.setIsShowMark(true)
+				Https.axiosPost(Https.httpUrls.getStyleList, {}).then(
+					(rv) => {
+						data.setIsShowMark(false)
+						rv.forEach((item:any) => {
+							let name = item.value
+							item.value = item.name
+							item.name = name
+						});
+						data.selectObject.style = rv[0].value
+						data.selectObject.styleName = rv[0].name
+						data.selectObject.styleId = rv[0].id
+						store.commit('setMannequinStyle',rv)
+					}
+				).catch(res=>{
+					data.setIsShowMark(false)
+				});
+			}
+		})
+		watch(()=>data.selectObject.sex,(newVal)=>{
+			if(newVal == 'Male'){
+				data.selectObject.positionList = data.malePosition
+			}else{
+				data.selectObject.positionList = data.femalePosition
+			}
+			data.selectObject.position = data.selectObject.positionList[0]
+		})
+        return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			setStyle,
+			setWorkspaceStyle,
+			setprintModel,
+			formatter,
+			complete,
+			openSetData,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+	.workspace{
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		position: relative;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-weight: 600;
+		font-size: 1.8rem;
+		> .workspaceBox{
+			width: 55rem;
+			padding: 0 5rem;
+			> .marginBottom{
+				margin-bottom: 3rem;
+			}
+			> .title{
+				font-size: 2.7rem;
+				> span{
+					color: #999999;
+					font-size: 1.4rem;
+				}
+			}
+			> .projectName{
+				> .text{
+					margin-bottom: 2rem;
+				}
+				> .input{
+					padding: 1rem 2rem;
+					// padding: 2rem 2.7rem;
+					font-size: 1.6rem;
+					border-radius: 1.6rem;
+					border: 2px solid #D0D0D0;
+					display: flex;
+					> input{
+						flex: 1;
+						border: none;
+					}
+					> i{
+						display: flex;
+						color: #999999;
+						align-items: center;
+						font-size: 2.4rem;
+					}
+				}
+			}
+			> .gender{
+				display: flex;
+				> .text{
+					width: 8rem;
+				}
+				> .radio{
+					display: flex;
+					margin-left: 4.5rem;
+					> label{
+						display: flex;
+						margin-right: 4rem;
+						>input{
+							margin-right: 1.5rem;
+						}
+					}
+				}
+			}
+			> .style{
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+			}
+			> .systemDesigner{
+				> .text{
+					display: flex;
+					justify-content: space-between;
+				}
+			}
+			> .position{
+				:deep(.generalMenu_printModel){
+					position: relative;
+					margin: 0;
+					> div,> ul{
+						width: 100%;
+						border-radius: 1.6rem;
+						border: 2px solid #D0D0D0;
+					}
+				}
+			}
+			> .complete{
+				width: 100%;
+				text-align: right;
+				> div{
+				}
+			}
+		}
+	}
+</style>

src/component/HomePage/scaleImage.vue

@@ -167,9 +167,9 @@ export default defineComponent({
 			type:Boolean,
 			default:false,
 		},
-		workspace:{
-			type:Object,
-			default:{}
+		sex:{
+			type:String,
+			default:''
 		},
 	},
     setup(props:any,{emit}) {
@@ -360,7 +360,7 @@ export default defineComponent({
 			let data = {
 				"base64": rv,
 				"category": scaleImageList.value[scaleImageIndex.value]?.categoryValue || scaleImageList.value[scaleImageIndex.value]?.level2Type,
-				"gender": props.workspace.sexEnum.value,
+				"gender": props.sex,
 				"originalId":scaleImageList.value[scaleImageIndex.value]?.id,
 				"isOverride":isOverlay,
 			}

src/component/LibraryPage/ModelPlacement.vue

@@ -249,6 +249,7 @@ export default defineComponent({
         showPlacementModal(data:any,sex:any){
 			// this.sex = arr[0].value
 			this.sex = sex
+			console.log(data)
             this.placementShow = true
             this.printObject = {
                 ...data

src/component/LibraryPage/brandDetail.vue

@@ -0,0 +1,408 @@
+<template>
+	<div class="brandDetail">
+		<div class="title">
+			<div @click="back" class="back">&lt; Back</div>
+			<div>
+				<div class="gallery_btn" @click="compute">Compute</div>
+				<div>
+					<a-progress :percent="100" size="small" :showInfo="false" />
+				</div>
+			</div>
+		</div>
+		<div class="userDetail">
+			<div class="logo">
+				<img :src="logoUrl" alt="">
+				<div class="upload_box">
+					<i class="fi fi-rr-camera"></i>
+					<a-upload
+						class="upload"
+						:capture="null"
+						list-type="picture-card"
+						:before-upload="beforeUpload"
+						:customRequest="function(){}"
+						:maxCount="1"
+						accept=".jpg,.png,.jpeg,.bmp"
+						>
+						<div
+							class="upload_tip_block"
+						>
+							<i class="fi fi-br-upload"></i>
+							<!-- <img :src="uploadUrl?uploadUrl:userDetail.avatar" alt=""> -->
+						</div>
+					</a-upload>
+				</div>
+			</div>
+			<div class="info">
+				<div class="name">
+					<span v-if="!isEditUserName">{{ brandName }}</span>
+					<input v-else type="text" v-model="brandName">
+					<i v-if="!isEditUserName" class="fi fi-rr-edit" @click="openEdit('userName')"></i>
+					<i v-else class="fi fi-br-check" @click="editChek('userName')"></i>
+				</div>
+				<div class="slogan">
+					<div>Brand slonan:</div>
+					<span v-if="!isEditDescribe">{{ brandSlogan }}</span>
+					<input v-else type="text" v-model="brandSlogan">
+					<i v-if="!isEditDescribe" class="fi fi-rr-edit" @click="openEdit('brandSlogan')"></i>
+					<i v-else class="fi fi-br-check" @click="editChek('brandSlogan')"></i>
+				</div>
+			</div>
+		</div>
+		<div class="content">
+			<div style="display: flex;">
+				<a-upload
+					class="upload"
+					:capture="null"
+					:before-upload="beforeUpload"
+					:customRequest="customRequest "
+					:multiple="true"
+					:maxCount="15"
+					accept=".jpg,.png,.jpeg,.bmp"
+				>
+					<div class="gallery_btn">Upload</div>
+				</a-upload>
+			</div>
+			<div class="imgBox">
+				<div class="imgItem" v-for="item,index in imgList" :key="item.id">
+					<img :src="item.url" alt="">
+				</div>
+			</div>
+			<div class="total">
+				<a-pagination
+					v-model:current="currentPage"
+					v-model:pageSize="pageSize"
+					:total="total"
+					:showQuickJumper="true"
+					:showSizeChanger="false"
+					@change="changePage"
+				/>
+			</div>
+		</div>
+		<div class="mark_loading" v-show="isShowMark">
+			<a-spin size="large" />
+		</div>
+		<Cropper ref="Cropper" @handleCropperSuccess="handleCropperSuccess" :cropperFileData="cropperFileData" :isRound="true"></Cropper>
+		<!-- <loadBrandDNA ref="loadBrandDNA"></loadBrandDNA> -->
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { Modal,message } from 'ant-design-vue';
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import Cropper from '@/component/HomePage/Cropper.vue'
+// import loadBrandDNA from '@/component/LibraryPage/loadBrandDNA.vue'
+import { getCookie } from "@/tool/cookie";
+
+export default defineComponent({
+	components:{
+		Cropper
+	},
+	
+	emits:['update:isShowMark','handleBack'],
+	props: {
+		isShowMark:{type:Boolean,default:false},
+	},
+	setup(props,{emit}) {
+		const store = useStore();
+		const data = reactive({
+            cropperFileData:{name:'',uid:''}, //裁剪的原始文件数据
+			uploadUrl:'',
+			uploadFile:undefined,
+			isEditUserName:false,
+			isEditDescribe:false,
+			brandName:'',
+			brandSlogan:'',
+			minioUrl:'',
+			detail:{} as any,
+			logoUrl:'',
+			uploadList:[],
+			upload:{},
+			token:getCookie("token"),
+			isShowMark:false,
+			imgList:[],
+			total:0,
+			pageSize:10,
+			currentPage:1,
+		})
+		const dataDom = reactive({
+			Cropper:null as any,
+			loadBrandDNA:null as any,
+		})
+		const customRequest = (event:any)=>{
+			console.log(data.detail)
+            let new_data = {
+                file:event.file,
+				brandId:data.detail.id,
+            }
+            data.isShowMark = true
+            Https.axiosPost(Https.httpUrls.brandDNAUpload, new_data,{headers:{'Content-Type': 'multipart/form-data'}}).then(
+                (rv: any) => {
+					getLibraryList()
+					data.isShowMark = false
+                }
+            ).catch((res)=>{
+                getLibraryList()
+				data.isShowMark = false
+            });
+        }
+		let  fileUploadChange = (data:any)=>{
+            let file = data.file
+			// file.id = res.data.id?res.data.id:""
+			var reader = new FileReader();
+			reader.onload = (e:any) => {
+				let data_new;
+				if (typeof e.target.result === 'object') {
+				// 把Array Buffer转化为blob 如果是base64不需要
+				data_new = window.URL.createObjectURL(new Blob([e.target.result]));
+				} else {
+				data_new = e.target.result;
+				}
+				dataDom.Cropper.getOptionImg(data_new)
+			};
+			reader.readAsArrayBuffer(file.originFileObj);
+			dataDom.Cropper.changeShowModal(true)
+        }
+		let  getLibraryList = ()=>{
+            let value = {
+				// classificationIdList:labelArr,
+                level1Type:'BrandDNA',
+                level2Type:'',
+                page:data.currentPage,
+				// modelSex:sex.value?sex.value:'',
+                // pictureName:searchPictureName.value,
+                size:data.pageSize,
+				brandId:data.detail.id,
+				// intersection:intersection.value,
+			}
+			data.isShowMark = true
+			Https.axiosPost(Https.httpUrls.queryLibraryPage,value).then(
+				(rv: any) => {
+					data.imgList = rv.content
+					data.total = rv.total
+					data.isShowMark = false
+				}
+			).catch((res)=>{
+				data.isShowMark = false
+			});
+        }
+		let beforeUpload=(file:any,fileList:any)=>{
+            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
+            if (!isJpgOrPng) {
+                message.info(useI18n().t('PrintboardUpload.jsContent1'));
+            }
+            const isLt2M = file.size / 1024 / 1024 < 5;
+            if (!isLt2M) {
+                message.info(useI18n().t('PrintboardUpload.jsContent2'));
+            }
+        }
+		let handleCropperSuccess = (event:any)=>{
+            let {file, fileData,base64} =event
+			data.uploadUrl = base64
+			data.uploadFile = file
+            dataDom.Cropper.closeCropper()
+			if(!data.uploadFile)return
+			let param = new FormData(); 
+			param.append('file',data.uploadFile);
+			let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+			Https.axiosPost(Https.httpUrls.brandLogoUpload,param,config)
+			.then((rv)=>{
+				data.logoUrl = rv.minioUrl
+				data.minioUrl = rv.brandLogo
+				uploadBrand()
+			})
+		}
+		const openEdit = (str:string)=>{
+			if(str == 'userName'){
+				data.isEditUserName = true
+			}
+			if(str == 'brandSlogan'){
+				data.isEditDescribe = true
+			}
+		}
+		const editChek = (str:string)=>{
+			if(str == 'userName')data.isEditUserName = false
+			if(str == 'brandSlogan')data.isEditDescribe = false
+			uploadBrand()
+		}
+		const getBranDetailData = (value:any)=>{
+			data.detail = value
+			data.brandName = value.brandName;
+			data.brandSlogan = value.brandSlogan;
+			data.logoUrl = value.minioUrl
+			data.minioUrl = value.brandLogo
+			getLibraryList()
+			// emit("update:isShowMark",true)
+			// setTimeout(()=>{
+			// 	emit("update:isShowMark",false)
+			// },2000)
+		}
+		const back = ()=>{
+			emit("handleBack")
+		}
+		const uploadBrand = ()=>{
+			let value = {
+				"brandLogo": data.minioUrl,
+				"brandName": data.brandName,
+				"brandSlogan": data.brandSlogan,
+				"id": data.detail.id,
+			}
+			Https.axiosPost(Https.httpUrls.brandDNASaveOrUpdate,value).then((res:any)=>{
+			}).catch((err:any)=>{
+				// console.log(err)
+			})
+		}
+		const compute = ()=>{
+
+		}
+        const changePage = (current:number, pageSize:number)=>{
+			data.currentPage = current
+            data.pageSize = pageSize
+		}
+		return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			getBranDetailData,
+			fileUploadChange,
+			back,
+			customRequest,
+			beforeUpload,
+			handleCropperSuccess,
+			openEdit,
+			editChek,
+			compute,
+			changePage,
+		}
+	},
+	provide() {
+		return {
+		}
+	},
+})
+</script>
+<style lang="less" scoped>
+	.brandDetail{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		font-weight: 600;
+		font-size: 2.2rem;
+		display: flex;
+		flex-direction: column;
+		> .title{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			> .back{
+				font-weight: 400;
+				font-size: 2rem;
+				cursor: pointer;
+			}
+		}
+		> .userDetail{
+			display: flex;
+			margin-top: 4rem;
+			align-items: center;
+			> .logo{
+				position: relative;
+				margin-right: 3rem;
+				> img{
+					width: 10rem;
+					height: 10rem;
+					object-fit: contain;
+					border-radius: 50%;
+				}
+				> .upload_box{
+					position: absolute;
+					bottom: 0;
+					right: 0;
+					> i{
+						width: 4rem;
+						height: 4rem;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						border-radius: 50%;
+						background: rgba(0,0,0,.5);
+						color: #fff;
+						font-size: 2rem;
+					}
+					> .upload{
+						position: absolute;
+						width: 100%;
+						height: 100%;
+						top: 0;
+						left: 0;
+						overflow: hidden;
+						opacity: 0;
+					}
+				}
+			}
+			> .info{
+				> .name, > .slogan{
+					display: flex;
+					align-items: center;
+					> i{
+						cursor: pointer;
+						margin-left: 1rem;
+						display: flex;
+					}	
+					> div{
+						margin-right: 1rem;
+					}
+					> input{
+						min-width: 20rem;
+						height: 3.6rem;
+						border-radius: 4rem;
+						border: 1px solid;
+						padding-left: 1.5rem;
+					}
+				}
+				> .name{
+					margin-bottom: 1rem;
+				}
+			}
+		}
+		> .content{
+			flex: 1;
+			display: flex;
+			overflow: hidden;
+			flex-direction: column;
+			:deep(.upload){
+				position: relative;
+				overflow: hidden;
+				margin-left: auto;
+				> .ant-upload-list{
+					display: none;
+				}
+			}
+			> .imgBox{
+				flex: 1;
+				display: flex;
+				align-content: flex-start;
+				flex-wrap: wrap;
+				> .imgItem{
+					width: 100px;
+					margin: 1rem;
+					aspect-ratio:  1 / 2.5;
+					> img{
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+				}
+			}
+			> .total{
+				text-align: center;
+			}
+			// > .upload_item{
+			// 	width: 10rem;
+			// 	height: 10rem;
+			// 	align-items: center;
+			// 	justify-content: center;
+			// }
+		}
+	}
+</style>

src/component/LibraryPage/createBrand.vue

@@ -0,0 +1,362 @@
+<template>
+	<div class="createBrand" ref="createBrand">
+		<a-modal class="generalModel" 
+            v-model:visible="showLoadsBrandDNA" 
+            :footer="null" 
+            width="98rem"
+			height="65rem"
+            :maskClosable="false"
+			:mask="false"
+            :centered="true"
+			:closable="false"
+			:get-container="() => $refs.createBrand"
+			wrapClassName="#app"
+			:keyboard="false"
+        >
+			<div class="generalModel_btn">
+				<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+					<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="black"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="black"/>
+					</svg>
+				</div>
+			</div>
+			<div class="modal_title_text">
+				<div>Add brand</div>
+			</div>
+			<div class="content">
+				<div class="left">
+					<div class="item">
+						<div class="text">Brand Name <span style="color: red;">*</span></div>
+						<input type="text" v-model="brandName">
+					</div>
+					<div class="item">
+						<div class="text">Brand Slogen <span style="color: red;">*</span></div>
+						<input type="text" v-model="brandSlogan">
+					</div>
+					<div class="item">
+						<div class="text">Brand Logo <span style="color: red;">*</span></div>
+						<div class="imgItemBox">
+							<div class="imgItem" v-for="(item,index) in uploadList" :key="index">
+								<img :src="item.url" alt="">
+								<span class="icon iconfont icon-shanchu" @click.stop="deleteFile(index)"></span>
+							</div>
+							<div class="upload_item" v-show="uploadList.length < 1">
+								<div class="upload_file_item upload_component">
+									<a-upload
+										:action="uploadUrl + '/api/history/brandLogoUpload'"
+										list-type="picture-card"
+										:capture="null"
+										:headers="{ Authorization: token }"
+										v-model:file-list="uploadList"
+										:before-upload="beforeUpload"
+										:maxCount="8"
+										accept=".jpg,.png,.jpeg,.bmp"
+										@change="(file) => upFileUploadChange(file)"
+									>
+										<div
+											class="upload_tip_block"
+										>
+											<i class="fi fi-br-upload"></i>
+											<!-- <img class="upload_img_icon" src="@/assets/images/homePage/add_file.png"> -->
+										</div>
+									</a-upload>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="or">
+					<div class="text">or</div>
+				</div>
+				<div class="right">
+					<div class="item">
+						<div class="text">Brand Name </div>
+						<textarea v-model="generateText" :placeholder="'Please enter the name, logo, and slogan you want to generate'"></textarea>
+					</div>
+					<div class="btn">
+						<div class="gallery_btn" style="width: 13rem;" v-show="!isGenerateLoad" @click="generate">Generate</div>
+						<div class="gallery_btn" style="width: 13rem;" v-show="isGenerateLoad">					
+							<i class="fi fi-br-loading"></i>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div style="width: 100%; display: flex;">
+				<div class="gallery_btn" @click="submitAddBrand" style="width: 13rem; margin-left: auto;">OK</div>
+			</div>
+			<div class="mark_loading" v-show="isShowMark">
+				<a-spin size="large" />
+			</div>
+		</a-modal>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import { getCookie } from "@/tool/cookie";
+import { Modal,message } from 'ant-design-vue';
+import {getUploadUrl,rgbToHsv,isMoible} from '@/tool/util'
+
+export default defineComponent({
+	components:{
+	},
+	props:{
+	},
+	emits:['submitBrandAdd'],
+	setup(props,{emit}) {
+		const {t} = useI18n()
+		const store = useStore();
+		const data = reactive({
+			uploadList:[] as any,
+			uploadUrl:getUploadUrl(),
+			token:getCookie("token"),
+			showLoadsBrandDNA:false,
+			brandName:'',
+			brandSlogan:'',
+			isShowMark:false,
+			generateText:'',
+			isGenerateLoad:false,
+		})
+		const dataDom = reactive({
+		})
+		const cancelDsign = ()=>{
+			data.showLoadsBrandDNA = false;
+		}
+		const upFileUploadChange = (value:any)=>{
+            let file = value.file;
+			let bor = true
+            if (file.status === "done") {
+                let res = JSON.parse(file.xhr.response);
+				if(res.errCode == 0){
+					file.url = res.data.minioUrl;
+					file.minioUrl = res.data.brandLogo;
+					let fileList = data.uploadList.filter(
+						(v:any) => v.status === "done"
+					);
+					data.uploadList = fileList
+				}else{
+					bor = false
+				}
+            } else if (file.status === "error") {
+				bor = false
+            }
+			if(!bor){
+                let res = JSON.parse(file.xhr.response);
+				let index = -1;
+                data.uploadList.forEach((ele:any, index1:any) => {
+                    if (file.uid === ele.uid) {
+                        index = index1;
+                    }
+                });
+                if (index > -1) {
+                    data.uploadList.splice(index, 1);
+                }
+                message.warning(res.errMsg);
+			}
+			
+        }
+		let beforeUpload=(file:any,fileList:any)=>{
+            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/bmp';
+            if (!isJpgOrPng) {
+                message.info(t('PrintboardUpload.jsContent1'));
+            }
+            const isLt2M = file.size / 1024 / 1024 < 5;
+            if (!isLt2M) {
+                message.info(t('PrintboardUpload.jsContent2'));
+            }
+        }
+		const submitAddBrand = ()=>{
+			if(!data.brandName || !data.brandSlogan || !data.uploadList?.[0]?.minioUrl){
+                message.info(t('PrintboardUpload.jsContent7'));
+				return
+			}
+			data.isShowMark = true
+			let value = {
+				"brandLogo": data.uploadList?.[0]?.minioUrl,
+				"brandName": data.brandName,
+				"brandSlogan": data.brandSlogan,
+			}
+			Https.axiosPost(Https.httpUrls.brandDNASaveOrUpdate,value).then((res:any)=>{
+				data.isShowMark = false
+				cancelDsign()
+				emit('submitBrandAdd')
+			}).catch((err:any)=>{
+				// console.log(err)
+				data.isShowMark = false
+			})
+		}
+		const openAddBrand = ()=>{
+			data.showLoadsBrandDNA = true;
+			data.brandName = '';
+			data.brandSlogan = '';
+			data.uploadList = [];
+		}
+		const deleteFile = (index:number)=>{
+			data.uploadList.splice(index,1)
+		}
+		const generate = ()=>{
+			if(!data.generateText){
+                message.info(t('PrintboardUpload.jsContent6'));
+				return
+			}
+			let value = {
+				prompt:data.generateText
+			}
+			data.isGenerateLoad = true
+			Https.axiosPost(Https.httpUrls.brandDNAGenerate,{},{params:value}).then((res:any)=>{
+				console.log(res)
+				data.brandName = res.brandName;
+				data.brandSlogan = res.brandSlogan;
+				data.uploadList = [{minioUrl:res.brandLogo,url:res.minioUrl}];
+				data.isGenerateLoad = false
+			}).catch((err:any)=>{
+				data.isGenerateLoad = false	
+			})
+		}
+		return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			cancelDsign,
+			upFileUploadChange,
+			beforeUpload,
+			submitAddBrand,
+			deleteFile,
+			openAddBrand,
+			generate,
+		}
+	},
+	provide() {
+		return {
+		}
+	},
+})
+</script>
+<style lang="less" scoped>
+	.createBrand{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		:deep(.generalModel){
+			.content{
+				display: flex;
+				> .left,>.right{
+					flex-shrink: 0;
+					> .item{
+						font-size: 1.8rem;
+						font-weight: 600;
+						> .text{
+							margin-bottom: 1rem;
+						}
+					}
+				}
+				> .left{
+					width: 32rem;
+					padding-right: 2rem;
+					> .item{
+						margin-bottom: 2rem;
+						&:last-child{
+							margin-bottom: 0;	
+						}
+						> input{
+							width: 100%;
+							border: 2px solid #000;
+							border-radius: 4rem;
+							padding: 1.5rem 2rem;
+
+						}
+						> .imgItemBox{
+							height: 10rem;
+							> .imgItem{
+								width: 10rem;
+								height: 10rem;
+								position: relative;
+								border-radius: 50%;
+								overflow: hidden;
+								img{
+									width: 100%;
+									height: 100%;
+									object-fit: contain;
+								}
+								> .icon{
+									position: absolute;
+									right: 2rem;
+									top: 2rem;
+									display: none;
+									cursor: pointer;
+								}
+								&:hover{
+									> .icon{
+										display: block;
+									}
+								}
+							}
+							> .upload_item{
+								width: 10rem;
+								height: 10rem;
+								align-items: center;
+								justify-content: center;
+							}
+						}
+						
+					}
+				}
+				> .or{
+					flex: 1;
+					color: #eaeaea;
+					position: relative;
+					font-size: 1.8rem;
+					> .text{
+						position: absolute;
+						top: 50%;
+						left: 50%;
+						transform: translate(-50%,-50%);
+					}
+					&::after,
+					&::before{
+						content: '';
+						display: block;
+						width: 1px;
+						height: 45%;
+						left: 50%;
+						transform: translateX(-50%);
+						position: absolute;
+						background: #eaeaea;
+					}
+					&::after{
+						top: 0;
+					}
+					&::before{
+						bottom: 0;
+					}
+				}
+				> .right{
+					width: 47rem;
+					padding-left: 2rem;
+					> .item{
+						> textarea{
+							resize: none;
+							width: 100%;
+							border: 2px solid #000;
+							padding: 1.5rem 2rem;
+							border-radius: 2rem;
+							height: 17rem;
+						}
+					}
+					> .btn{
+						display: flex;
+						width: 100%;
+						> .gallery_btn{
+							margin-left: auto;
+						}
+					}
+					
+				}
+			}
+		}
+	}
+</style>

src/component/LibraryPage/loadBrandDNA.vue

@@ -0,0 +1,68 @@
+<template>
+	<div class="loadsBrandDNA" ref="loadsBrandDNA">
+		<a-modal class="generalModel" 
+            v-model:visible="showLoadsBrandDNA" 
+            :footer="null" 
+            width="70rem"
+            :maskClosable="false"
+			:mask="false"
+            :centered="true"
+			:closable="false"
+			:get-container="() => $refs.loadsBrandDNA"
+			wrapClassName="#app"
+			:keyboard="false"
+        >
+			<div class="generalModel_btn">
+				<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
+					<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
+						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="black"/>
+						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="black"/>
+					</svg>
+				</div>
+			</div>
+			<div>1231425324</div>
+		</a-modal>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+export default defineComponent({
+	components:{
+	},
+	props:{
+	},
+	emits:[],
+	setup(props,{emit}) {
+		const store = useStore();
+		const data = reactive({
+			showLoadsBrandDNA:true,
+		})
+		const dataDom = reactive({
+		})
+		const cancelDsign = ()=>{
+			data.showLoadsBrandDNA = false;
+		}
+		return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			cancelDsign,
+		}
+	},
+	provide() {
+		return {
+		}
+	},
+})
+</script>
+<style lang="less" scoped>
+	.loadsBrandDNA{
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+</style>

src/component/WorksPage/publish.vue

@@ -114,7 +114,7 @@ export default defineComponent({
 			},
 		})
 		let portfolio:any = inject('portfolio')
-		let setPortfolio:any = inject('setPortfolio')
+		// let setPortfolio:any = inject('setPortfolio')
 		let tagList = ref([
 			// {id:1,tagName:'#AiDAworkshop_2024',title:'The process is simple: use AiDA to post your design work on the "Gallery ", and the one with the most likes(at least 20 likes) will be invited to the AiDA Workshop offline event in Hong Kong on November 14th, to exchange ideas with the Royal College of Art (RCA), Jae Lim, co-founder of the renowned fashion brand BESFXXK, and outstanding designers! '},
 			{id:3,tagName:'#NewYear_2025',title:"✨New Year 2025！🎉Let's kick off the year with a burst of inspiration and design!"}
@@ -263,7 +263,7 @@ export default defineComponent({
 						tagsDTO:publishData.subPublishDate.tagsDTO,
 					}
 					cleardata()
-					setPortfolio(obj)
+					// setPortfolio(obj)
 					message.success(t('Publish.jsContent4'))
                 })
                 .catch((rv) => {

src/component/modules/generalDrag.vue

@@ -0,0 +1,327 @@
+<template>
+	<div class="generalDrag" ref="generalDragDom">
+		<div class="item" v-show="showMark" :style="likeStyle">
+			<a-spin size="large" class="content_img_flex"></a-spin>
+		</div>
+		<div v-for="item in list" :key="item.id" class="item"
+			:style="likeStyle"
+			@mousedown.stop="designMousedown(getMousePosition($event,false),item.id,'disLike')" 
+			@touchstart.passive="designMousedown(getMousePosition($event,true),item.id,'disLike')"
+		>
+			
+			<img v-if="item.url" 
+				@mouseenter.stop="gifPlay($event,item)"
+				@mouseleave.stop="gifPause($event,item)" 
+				:src="item.url" 
+				alt=""
+			>
+			<a-spin v-else size="large" class="content_img_flex"></a-spin>
+			<div class="btn like" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'like')">
+				<i class="fi fi-rr-heart"></i>
+			</div>
+			<div class="btn down" v-if="isVideo" @click.stop="down(item)">
+				<i class="fi fi-rr-heart"></i>
+			</div>
+			<div class="btn zoom" v-if="item.url" @click.stop="()=>$emit('setBtn',item.id,'zoom')">
+				<i class="fi fi-bs-expand-arrows-alt"></i>
+			</div>
+		</div>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,onMounted,toRefs, reactive,onBeforeUnmount, watch} from 'vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import { getMousePosition } from "@/tool/mdEvent"
+export default defineComponent({
+	components:{
+	},
+	props:{
+		selectKey:{type:String,default:''},
+		list:{type:Array,default:()=>[]},
+		isVideo:{type:Boolean,default:false},
+		showMark:{type:Boolean,default:false},
+	},
+	emits:['setBtn','setSort'],
+	setup(props,{emit}) {
+		const store = useStore();
+		const data = reactive({
+			selectIndex:0,
+		})
+		const dataDom = reactive({
+			generalDragDom:null as any,
+		})
+		const collItemSize = reactive({
+			collValue:15,
+			minCollValue:2,
+			maxCollValue:20,
+			likeStyle:{
+				width:'100px',
+				// width:'240px',
+				height:'200px',
+				// height:'370px',
+				position:'absolute',
+			},
+			itemStyle:{
+				width:100,
+				height:154,
+			},
+			scale:[1,1.54],
+			collTime:null as any,
+			isMove:false,
+			elList:[] as any,
+		})
+		const designMousedown = (e:any,Id:number,str:string)=>{
+			let item:any  = collItemSize.elList.filter((item:any)=>item.id == Id)[0]
+			if(!item)return
+			item.el.style.zIndex = 2;
+			item.el.style.transition = 'all 0s';
+			let startX = e.clientX,
+			startY = e.clientY,
+			left = item.el.offsetLeft,
+			top = item.el.offsetTop;
+			collItemSize.isMove = false
+			let moveFun = (e:any) => {
+				collItemSize.isMove = true
+				let X = e.clientX - startX + left;
+				let Y = e.clientY - startY + top;
+				item.el.style.left = `${X}px`;
+				item.el.style.top = `${Y}px`;
+				reRange(item, X, Y,str);
+			};
+			let mouseUpFun = ()=>{
+				document.removeEventListener('mousemove',mouseMove)
+				document.removeEventListener('touchmove',touchmove)
+
+				document.removeEventListener('mouseup',mouseUpFun) 
+				document.removeEventListener('touchend',mouseUpFun) 
+				item.el.style.zIndex = 1;
+				item.el.style.transition = 'top,left .5s';
+				moveItem();
+				if(str == 'like')sortDesignCollection()
+			}
+			let mouseMove = function(event:any){
+				let e = getMousePosition(event,false)
+				moveFun(e)
+			}
+			let touchmove = function(event:any){
+				let e = getMousePosition(event,true)
+				moveFun(e)
+			}
+
+			document.addEventListener('mousemove',mouseMove)
+			document.addEventListener('touchmove',touchmove)
+
+			document.addEventListener('mouseup',mouseUpFun) 
+			document.addEventListener('touchend',mouseUpFun) 
+		}
+		//排序  从大到小
+		const sortDesignCollection = ()=> {
+			// let arrData:any = []
+			// likeDesignCollectionList.value.forEach((likeItem:any)=>{
+			//     let item = collItemSize.elList.filter((item:any)=>item.id == likeItem.id)[0]
+			// 	likeItem.sort = item.sort + 1
+			// 	let obj = {
+			// 		id:likeItem.id,
+			// 		"sort": item.sort + 1,
+			// 		"userLikeGroupId": likeItem.userLikeGroupId,
+			// 		"userLikeId": likeItem.id
+			// 	}
+			// 	arrData.push(obj)
+			// })
+			// let data = {
+			// 	"userLikeGroupId": userGroupId.value,
+			// 	"userLikeSortList": arrData
+			// }
+			// Https.axiosPost(Https.httpUrls.designSort, data).then((rv:any)=>{
+			// })
+		}
+		const reRange = (item:any, x:number, y:number,str:string)=>{
+			let elList:any = collItemSize.elList
+			let index = data.selectIndex
+			let value = collItemSize.maxCollValue - collItemSize.collValue
+			let width,height,num
+			num = value
+			width = collItemSize.itemStyle.width
+			height = collItemSize.itemStyle.height
+			
+			let moveIndex = Math.round(x / (width + 10)) + Math.round(y / (height + 10)) * num;
+			moveIndex = elList.length - 1 - moveIndex
+			moveIndex = moveIndex < 0 ? 0 : moveIndex;
+			moveIndex = moveIndex > elList.length - 1 ? elList.length - 1 : moveIndex;
+			if(moveIndex != index){
+				data.selectIndex = moveIndex;
+
+				let currentSort = item.sort;
+				for(let i = 0;i < elList.length;i++){
+					if(currentSort < moveIndex){
+						if(elList[i].sort > currentSort && elList[i].sort <= moveIndex){
+							elList[i].sort -= 1;
+						};
+					}else if(currentSort > moveIndex){
+						if(elList[i].sort < currentSort && elList[i].sort >= moveIndex){
+							elList[i].sort += 1;
+						};
+					}
+				};
+				elList[item.index].sort = moveIndex;
+				moveItem();
+			}
+		}
+		const moveItem = ()=>{
+			let value = collItemSize.maxCollValue - collItemSize.collValue
+			// let num = str == 'like'?value:3
+			for(let i = 0;i < collItemSize.elList.length;i++){
+				collItemSize.elList[i].el.style.left = (collItemSize.elList.length - 1 - collItemSize.elList[i].sort) % value * (collItemSize.itemStyle.width +10) + 'px';
+				collItemSize.elList[i].el.style.top = parseInt(String((collItemSize.elList.length - 1 - collItemSize.elList[i].sort) / value)) * (collItemSize.itemStyle.height +10) + 'px';
+			}
+			
+		}
+		const setItemPosition = ()=>{
+			let parent = dataDom.generalDragDom.offsetWidth
+			let elArr = dataDom.generalDragDom.children
+			let value = collItemSize.maxCollValue - collItemSize.collValue
+			collItemSize.itemStyle.width = (parent - ((value-1)*10)) / value
+			// collItemSize.itemStyle.width = (parent - (value * 10)) / value
+			collItemSize.itemStyle.height = collItemSize.itemStyle.width * 1.54
+			collItemSize.likeStyle.width = collItemSize.itemStyle.width + 'px'
+			collItemSize.likeStyle.height = collItemSize.itemStyle.height + 'px'
+			collItemSize.elList = []
+			let arr:any = props.list
+			for(let i = 0;i < arr.length;i++){
+				collItemSize.elList.push({
+					el: elArr[i+1], 
+					sort: arr.length - i -1, 
+					// sort: props.list[i].sort?props.list[i].sort:props.list.length - i -1, 
+					index: i,
+					id:arr[i].id,
+				});
+			}
+			moveItem()
+		} 
+		watch(()=>props.list.length,(val)=>{
+			nextTick(()=>{
+				if(props.list.length>0){
+					setItemPosition()
+				}
+				
+			})
+		},{immediate: true})
+		// watch(()=>props.showMark,(val)=>{
+		// 	let elArr = dataDom.generalDragDom.children
+		// 	collItemSize.elList.forEach((item:any)=>{
+		// 		if(val){
+		// 			item.sort --
+		// 		}else{
+		// 			console.log(item);
+		// 			item.sort ++
+		// 		}
+		// 	})
+		// 	if(val){
+		// 		// collItemSize.elList.unshift({
+		// 		// 	el: elArr[0], 
+		// 		// 	sort: collItemSize.elList.length, 
+		// 		// 	index: -1,
+		// 		// 	id:-1,
+		// 		// });
+		// 	}else{
+		// 		// let index = collItemSize.elList.findIndex((item:any)=>item.id == -1)
+		// 		// if(index>=0)collItemSize.elList.splice(index,1)
+		// 	}
+		// 	console.log(collItemSize.elList)
+		// 	moveItem()
+		// })
+		const gifPlay = (e:any,item:any)=>{
+			if(!props.isVideo)return
+			e.target.src = item.gifUrl//使用gif图片
+			// e.target.src = ''//使用gif图片
+		}
+		const gifPause = (e:any,item:any)=>{
+			if(!props.isVideo)return
+			e.target.src = item.url//静态图片
+			// e.target.src = ''//静态图片
+		}
+		const down = (item:any)=>{
+            const videoUrl = item.videoUrl;  // 视频文件 URL
+            const fileName = 'video.mp4';  // 下载时保存的文件名
+
+            const link = document.createElement('a');
+            link.href = videoUrl;
+            link.download = fileName;
+            
+            // 触发下载
+            link.click();
+		}
+		onMounted(()=>{
+			window.addEventListener('resize', setItemPosition)
+			// nextTick(()=>{
+			// 	setItemPosition()
+			// })
+		})
+		onBeforeUnmount(()=>{
+			window.removeEventListener('resize', setItemPosition)
+		})
+		return{
+			...toRefs(dataDom),
+			...toRefs(data),
+			...toRefs(collItemSize),
+			setItemPosition,
+			getMousePosition,
+			designMousedown, 
+			gifPlay,
+			gifPause,
+			down,
+		}
+	},
+	provide() {
+		return {
+		}
+	},
+})
+</script>
+<style lang="less" scoped>
+	.generalDrag{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		overflow-y: auto;
+		overflow-x: hidden;
+		> .item{
+			border-radius: 2rem;
+			border: 2px solid;
+			position: absolute;
+			transition: all .3s;
+			overflow: hidden;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: #fff;
+			> img{
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+			}	
+			> .btn{
+				position: absolute;
+				top: 2rem;
+				cursor: pointer;
+				display: none;
+				&.like{
+					left: 2rem;
+				}
+				&.zoom{
+					right: 2rem;
+				}
+				>i{
+					display: flex;
+				}
+			}
+			&:hover{
+				> .btn{
+					display: block;
+				}
+			}
+		}
+	} 
+</style>