fix

2025-04-01 15:25:15 +08:00
parent 70ed89049a
commit b6e5f05f06
101 changed files with 11533 additions and 1015 deletions
--- a/src/component/HomePage/index/editContent/nav.vue
+++ b/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>
--- a/src/component/HomePage/index/editContent/navBox.vue
+++ b/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>
--- a/src/component/HomePage/index/index.vue
+++ b/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>
--- a/src/component/HomePage/index/editContent/collection/ColorboardUpload.vue
+++ b/src/component/HomePage/index/editContent/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);
--- a/src/component/HomePage/index/editContent/collection/MoodboardUpload.vue
+++ b/src/component/HomePage/index/editContent/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
--- a/src/component/HomePage/index/editContent/collection/PrintboardUpload.vue
+++ b/src/component/HomePage/index/editContent/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,
--- a/src/component/HomePage/index/editContent/collection/SketchboardUpload.vue
+++ b/src/component/HomePage/index/editContent/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);
--- a/src/component/HomePage/index/editContent/collection/more.vue
+++ b/src/component/HomePage/index/editContent/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);
 				}
--- a/src/component/HomePage/index/model/deReconstruction/canvas/argument.vue
+++ b/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>
--- a/src/component/HomePage/index/model/deReconstruction/canvas/canvasContent.vue
+++ b/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>
--- a/src/component/HomePage/index/model/deReconstruction/canvas/detail.vue
+++ b/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>
--- a/src/component/HomePage/index/model/deReconstruction/canvas/index.vue
+++ b/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>
--- a/src/component/HomePage/index/model/deReconstruction/canvas/tool.vue
+++ b/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>
--- a/src/component/HomePage/index/model/deReconstruction/index.vue
+++ b/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>
--- a/src/component/HomePage/index/editContent/design/index.vue
+++ b/src/component/HomePage/index/editContent/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;
 								}
--- a/src/component/HomePage/index/model/mannequin/edit.vue
+++ b/src/component/HomePage/index/model/mannequin/edit.vue
--- a/src/component/HomePage/index/model/mannequin/index.vue
+++ b/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>
--- a/src/component/HomePage/index/model/patternMaking3D/download.vue
+++ b/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>
--- a/src/component/HomePage/index/model/patternMaking3D/index.vue
+++ b/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>
--- a/src/component/HomePage/index/model/patternMaking3D/three.vue
+++ b/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>
--- a/src/component/HomePage/index/model/poseTransfer/index.vue
+++ b/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>
--- a/src/component/HomePage/index/model/toProduct/index.vue
+++ b/src/component/HomePage/index/model/toProduct/index.vue
--- a/src/component/HomePage/index/workflow/content/index.vue
+++ b/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>
--- a/src/component/HomePage/index/workflow/content/printDesign.vue
+++ b/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>
--- a/src/component/HomePage/index/workflow/content/printingDesign3D.vue
+++ b/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>
--- a/src/component/HomePage/index/workflow/content/productDrawingDesign.vue
+++ b/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>
--- a/src/component/HomePage/index/workflow/content/seriesDesign.vue
+++ b/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>
--- a/src/component/HomePage/index/workflow/content/singleProductDesign.vue
+++ b/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>
--- a/src/component/HomePage/index/workflow/content/sketchDesign.vue
+++ b/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>
--- a/src/component/HomePage/index/editContent/index.vue
+++ b/src/component/HomePage/index/editContent/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{
--- a/src/component/HomePage/index/workflow/nav.vue
+++ b/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>
--- a/src/component/HomePage/index/workflow/navBox.vue
+++ b/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>
--- a/src/component/HomePage/index/workflow/workspace.vue
+++ b/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>