detail页面调整

src/component/Detail/DesignDetail.vue

@@ -727,13 +727,14 @@ export default defineComponent({
 			sessionStorage.setItem('revocation', JSON.stringify(revocation));
 			this.clearSelect()
 		},
-		setSubmitItem(str:any,sub:any){
+		async setSubmitItem(str:any,sub:any){
 			//sub判断是不是点击新增图层又直接点击删除
 			let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let clothes:any = []
 			let num = -1
 			// let zIndex = 10
-			designItemDetail.clothes.forEach((item:any,index:number) => {
+			for(let index = 0;index<designItemDetail.clothes.length;index++){
+			    let item = designItemDetail.clothes[index]
 				let clothesItem:any = {
 					color: `${item.color.r} ${item.color.g} ${item.color.b}`,
 					id:item.id,
@@ -757,7 +758,7 @@ export default defineComponent({
 				}
 				if(item.gradient){
 					let gradient = item.gradient
-					gradient.colorImg = setGradual(item.gradient,320,700)
+					gradient.colorImg = await setGradual(item.gradient,320,700)
 					clothesItem.gradient = item.gradient
 				}else{
 					delete clothesItem.gradient
@@ -767,7 +768,7 @@ export default defineComponent({
 				}else{
 					clothes.push(clothesItem)
 				}
-			});
+			}
 			if(num != -1){
 				designItemDetail.clothes.splice(num,1)
 				this.store.commit("setDesignItemDetail", designItemDetail);

src/component/Detail/DesignDetailEnd.vue

@@ -352,7 +352,7 @@ export default defineComponent({
 			DesignElementsOperation.init()
 		},
 		//提交
-		setPreview(str){
+		async setPreview(str){
             let designItemDetail = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designItemDetail))
 			let index 
 			let data = JSON.parse(JSON.stringify(this.store.state.DesignDetailModule.designPreviewData))
@@ -400,7 +400,7 @@ export default defineComponent({
 			}
 			if(this.colorList[this.selectIndex].gradient){
 				let gradient = this.colorList[this.selectIndex].gradient
-				gradient.colorImg = setGradual(gradient,320,700)
+				gradient.colorImg = await setGradual(gradient,320,700)
 				data.designSingleItemDTOList[index].gradient = gradient
 			}else{
 				delete data.designSingleItemDTOList[index].gradient

src/component/DetailCopy/designDetail.vue

@@ -1,5 +1,5 @@
 <template>
-    <div ref="designDetailModal" class="designDetailModal">
+    <div ref="designDetailModal" class="designDetailModal" v-if="designDetailShow">
 		<!-- designDetailShow -->
 		<!-- :class="[driver__.driver?'hideEvents':'']" -->
         <a-modal class="Guide_1_18 generalModel fullScreen" 
@@ -12,6 +12,7 @@
 			:mask="false"
             :centered="true"
 			:keyboard="false"
+			:destroyOnClose="true"
 			:closable="false"
         >
 			<div class="content">
@@ -22,32 +23,46 @@
 						</div>
 					</div>
 					<div class="nav_list">
-						<div class="nav_item active">
+						<div class="nav_item" :class="{active:currentDetailType == 'sketch'}" @click="setCurrentDetail('sketch')">
 							<img src="@/assets/images/icon/details_sketch.png" alt="">
 							<div class="detailText">Apparel</div>
 						</div>
-						<div class="nav_item">
+						<div class="nav_item" :class="{active:currentDetailType == 'print'}" @click="setCurrentDetail('print')">
 							<img src="@/assets/images/icon/details_print.png" alt="">
 							<div class="detailText">Print</div>
 						</div>
-						<div class="nav_item">
+						<div class="nav_item" :class="{active:currentDetailType == 'color'}" @click="setCurrentDetail('color')">
 							<img src="@/assets/images/icon/details_color.png" alt="">
 							<div class="detailText">Color</div>
 						</div>
-						<div class="nav_item">
+						<div class="nav_item" :class="{active:currentDetailType == 'element'}" @click="setCurrentDetail('element')">
 							<img src="@/assets/images/icon/details_elements.png" alt="">
 							<div class="detailText">Elements</div>
 						</div>
 					</div>
 				</div>
-				<div class="item">
-					<sketchLeft></sketchLeft>
+				<div class="item detailLeft">
+					<detailLeft v-if="selectDetail && selectDetail.id && currentDetailType"></detailLeft>
 				</div>
-				<div class="item">
-					<model></model>
+				<div class="item model">
+					<model ref="model"></model>
+					<div>
+						<div class="gallery_btn" @click="submit">Submit</div>
+						<div class="gallery_btn" @click="previwe">Preview</div>
+					</div>
+				</div>
+				<div class="item detailRight">
+					<div class="submit">
+					</div>
+					<div class="contentRight" v-if="selectDetail && selectDetail.id && currentDetailType">
+						<detailRight></detailRight>
+					</div>
+					<!-- 画布 -->
+					<!-- <div class="content" v-else-if="selectDetail && selectDetail.id">
+					</div> -->
+					<div class="submit bottom">
+					</div>
 				</div>
-				<div></div>
-				<div class="gallery_btn submit">Submit</div>
 			</div>
 			
         </a-modal>
@@ -59,8 +74,9 @@
 </template>
 <script lang="ts">
 import { defineComponent,computed,onBeforeUnmount,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
-import sketchLeft from './sketchLeft.vue'
+import detailLeft from './detailLeft/index.vue'
 import model from './model/index.vue'
+import detailRight from './detailRight/index.vue'
 
 // import setDesignItem from '@/component/Detail/setDesignItem2.vue'
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
@@ -73,31 +89,33 @@ import { useI18n } from 'vue-i18n'
 import addDetails from '@/component/Detail/addDetails.vue'
 export default defineComponent({
     components:{
-		sketchLeft,model
+		detailLeft,model,detailRight
     },
-    setup() {
+	emits:['destroy'],
+    setup(props,{emit}) {
         const store = useStore();
       
-		
+		const detailDom = reactive({
+			model:null
+		})
 		const userDetail = computed(()=>{
 			return store.state.UserHabit.userDetail
 		})
 		const detailData = reactive({
-			designDetail:store.state.DesignDetailCopy.designDetail,
+			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
+			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			designDetailShow:false,
 			loadingShow:false,
 		})
 		const closeModal = ()=>{
 			detailData.designDetailShow = false
+			emit('destroy')
 		}
 		
 		const showDesignDetailModal = (data:any,str:any)=>{
-			// this.moible = isMoible()
-			// this.designItemId = data.design.designItemId
-			// this.designOutfitId = data.design.designOutfitId
+			
             let url = Https.httpUrls.getDesignDetail + `?designItemId=${data.design.designItemId}&designPythonOutfitId=${data.design.designOutfitId}`
-            // let url = Https.httpUrls.getDesignDetail + `?designItemId=61204&designPythonOutfitId=60908`
-            // this.parentData = data
             detailData.loadingShow = true
             Https.axiosGet(url).then(
                 async (rv: any) => {
@@ -109,6 +127,14 @@ export default defineComponent({
 							item.layersObject[0] = item.layersObject[1]
 							item.layersObject[1] = a
 						}
+						item.color.rgba = {
+							r:item.color.r,
+							g:item.color.g,
+							b:item.color.b,
+						}
+						if(item.gradient){
+							item.color.gradient = item.gradient
+						}
 						if(item.printObject.prints == null)item.printObject.prints = []
 						item.printObject.prints.forEach((element:any) => {
 							if(!element.designType){
@@ -117,7 +143,7 @@ export default defineComponent({
 						});
 					})
 					detailData.designDetailShow = true
-                    store.commit('designDeatailCopy/setDesignDetail',rv)
+                    store.commit('DesignDetailCopy/setDesignDetail',rv)
 					// this.deleteShow = false
 
 					setRevocation(rv,'')
@@ -145,14 +171,114 @@ export default defineComponent({
 		}
 		const setRevocation = (designItemDetail:any,data:any)=>{//设置撤销
 
+		}
+		const setCurrentDetail = (str:string)=>{
+			store.commit('DesignDetailCopy/setCurrentDetailType',str)
+		}
+		const setClothes = async (list:any)=>{
+			let clothesList:any = []
+			for(let i = 0;i<list.length;i++){
+			    let {scale,offset,priority,maskUrl,maskMinioUrl} = (detailDom.model as any).getSubmitData(list[i])
+				let gradient = null
+				let newData = list[i]?.newDetail?.[detailData.currentDetailType]
+				let isCurrent = list[i].id == detailData?.selectDetail?.id
+				let data:any = {
+					changed:false,
+					color:(newData && detailData.currentDetailType == 'color' && isCurrent)?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`,
+					designType:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.designType:list[i].designType,
+					id:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.id:list[i].id,
+					// maskMinioUrl:'',
+					// maskUrl:'',
+					offset,
+					path:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.minIOPath:list[i].minIOPath,
+					printObject:list[i].printObject,
+					priority,
+					scale,
+					type:(newData && detailData.currentDetailType == 'sketch' && isCurrent)?newData.level2Type:list[i].type,
+					sketchString:'',
+					trims:list[i].trims,
+				}
+				if((list[i].color?.gradient || list[i].newDetail?.color?.gradient)){
+					gradient = list[i].newDetail?.color?.gradient || list[i].color.gradient
+					gradient.colorImg = await setGradual(gradient,320,700)
+					data.gradient = gradient
+				}
+				clothesList.push(data)
+			}
+			return clothesList
+		}
+		const getSubmitData = async (str:string)=>{
+			let workspace = store.state.Workspace.workspace
+			let clothes:any = await setClothes([detailData.selectDetail])
+			let data = {
+				designItemId:detailData.designDetail.designItemId,
+				designSingleItemDTOList:clothes,
+				isPreview:true,
+				// ifSubmit:designItemDetail.isPreview,
+				gender:workspace?.sex,
+				sketchString:'',
+				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+				processId:userDetail.value.userId,
+			}
+			detailData.loadingShow = true
+			Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{
+				store.commit('DesignDetailCopy/setPraeview',rv)
+				detailData.loadingShow = false
+			}).catch(res=>{ 
+				detailData.loadingShow = false
+            });
+		}
+		const submit = async ()=>{
+			let workspace = store.state.Workspace.workspace
+			let clothes:any = await setClothes(detailData.designDetail.clothes)
+			let data = {
+				designItemId:detailData.designDetail.designItemId,
+				designSingleItemDTOList:clothes,
+				isPreview:false,
+				// ifSubmit:designItemDetail.isPreview,
+				gender:workspace?.sex,
+				sketchString:'',
+				timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone,
+				processId:userDetail.value.userId,
+			}
+			detailData.loadingShow = true
+			Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{
+				// store.commit('DesignDetailCopy/setPraeview',rv)
+				let designCollectionList = store.state.HomeStoreModule.designCollectionList
+				let likeDesignCollectionList = store.state.HomeStoreModule.likeDesignCollectionList
+				designCollectionList.forEach((item:any) => {
+					if(item.designItemId == rv.designItemId){
+						item.designOutfitUrl = rv.designItemUrl
+					}
+				});
+				likeDesignCollectionList.forEach((item:any) => {
+					if(item.designItemId == rv.designItemId){
+						item.designOutfitUrl = rv.designItemUrl
+					}
+				});
+				store.commit('setDesignCollectionList',designCollectionList)
+				store.commit('setLikeDesignCollectionList',likeDesignCollectionList)
+				closeModal()
+				detailData.loadingShow = false
+			}).catch(res=>{ 
+				detailData.loadingShow = false
+            });
+		}
+		const previwe = ()=>{
+			let data = getSubmitData('preview')
+			store.dispatch('DesignDetailCopy/setSubmit',data)
 		}
 		onBeforeUnmount(()=>{
-			detailData.designDetail = null
+			store.commit('DesignDetailCopy/clearDesignDetail')
 		})
         return{
+			...toRefs(detailDom),
 			...toRefs(detailData),
             closeModal,
 			showDesignDetailModal,
+			setCurrentDetail,
+			previwe,
+			submit,
         }
     },
 	provide() {
@@ -204,9 +330,14 @@ export default defineComponent({
 		font-weight: 600;
 	}
     .designDetailModal{
-		position: relative;
-		top: -100%;
+		position: absolute;
+		// top: -100%;
+		width: 100%;
 		height: 100%;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%,-50%);
+		z-index: 2;
 		:deep(.ant-modal-wrap){
 			position: absolute;
 			top: 0;
@@ -219,6 +350,36 @@ export default defineComponent({
 			width: 100%;
 			> .item{
 				height: 100%;
+				&.detailLeft{
+					width: 34rem;
+				}
+				&.model{
+					width: 50rem;
+					margin: 0 10rem;
+					display: flex;
+					flex-direction: column;
+				}
+				&.detailRight{
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+					padding-bottom: calc(6rem + 1rem);
+					overflow: hidden;
+					> .contentRight{
+						display: flex;
+						flex: 1;
+						overflow: hidden;
+					}
+				}
+				> .submit{
+					display: flex;
+					justify-content: flex-end;
+					margin-bottom: 1rem;
+					&.bottom{
+						margin-top: 1rem;
+						margin-bottom: 0;
+					}
+				}
 			}
 			> .nav{
 				margin-right: 5rem;
@@ -258,10 +419,7 @@ export default defineComponent({
 					}
 				}
 			}
-			> .submit{
-				margin-left: auto;
-
-			}
+			
 		}
 		
 	}

src/component/DetailCopy/detailLeft/color/index.vue

@@ -0,0 +1,318 @@
+<template>
+    <div class="color">
+		<div class="detailText">Palette</div>
+		<div class="pallet">
+			<pallet :selectColor="selectColor" @selectUplpadColor="selectUplpadColor"></pallet>
+		</div>
+		<div class="detailText">New color</div>
+		<div class="colorBox">
+			<div v-for="item,index in colorList.list[selectDetail.id]" @click="setSelectColor(item,index)" class="colorBoxItem" :class="{active:colorList.index == index}">
+				<div v-show="!item.gradient" class="background" :style="{'background-color':item.hex}"></div>
+				<div v-show="!item.gradient" class="text">{{ item.hex }}</div>
+				<div v-show="!item.gradient" class="text">{{ item.name }}</div>
+				<div v-show="item.gradient" class="backgroundImg" :style="{'background-image':`linear-gradient(${item.gradient?.angle}deg,${setGradient(item.gradient)})`}"></div>
+			</div>
+		</div>
+		<div class="detailText">Upload Image</div>
+		<div class="uploadImage">
+			<upload @selectUplpadColor="selectUplpadColor"></upload>
+		</div>
+		<div class="detailText">Color Code</div>
+		<div class="colorCode">
+			<div class="generalModel_state">
+				<div class="generalModel_state_item">
+					<input class="search_input" placeholder="Tcx value（e.g:19-4052)" v-model="tcxToColor" style="width: 100%;" @keydown.enter="getTcxColor()">
+				</div>
+			</div>
+			<div class="getTcxColorBtn" @click="getTcxColor">Extract Color</div>
+		</div>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive, onMounted} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { useStore } from "vuex";
+import { Https } from "@/tool/https";
+import { useI18n } from 'vue-i18n'
+import { rgbaToHex,rgbToHsv } from "@/tool/util"
+import { message,Upload} from 'ant-design-vue';
+
+import upload from './upload.vue'
+import pallet from './pallet.vue'
+export default defineComponent({
+    components:{
+		upload,pallet
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+        const {t} = useI18n();
+		const colorData = reactive({
+			selectTitle:'current',
+			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+			allBoardData:computed(()=>store.state.UploadFilesModule.allBoardData),
+			colorList:{
+				list:{},
+				index:-1,
+			} as any,
+			selectColor:{} as any,
+			setGradient:computed(()=>{
+				return (gradient:any)=>{
+					let gradientStr = ''
+					if(!gradient?.gradientList)return
+					gradient.gradientList.sort((a:any, b:any) => {
+						let aArr = a.left.split('%')[0]
+						let bArr = b.left.split('%')[0]
+						return aArr - bArr;
+					});
+					gradient.gradientList.forEach((item:any,index:any)=>{
+						let str = ','
+						if(gradient.gradientList.length == index+1)str = ''
+						gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 
+
+					})
+					return `${gradientStr}`
+				}
+			}),
+			tcxToColor:'',
+		})
+		watch(()=>colorData.selectColor,async (newVal,oldVal)=>{
+		    if(!newVal?.name && newVal.rgba){
+				let data:any = await getColorName(newVal.rgba)
+				newVal.name = data.name
+				newVal.tcx = data.tcx
+				colorData.colorList.list[colorData.selectDetail.id][colorData.colorList.index] = newVal
+				store.commit('DesignDetailCopy/setNewDetail',newVal)
+			}
+		})
+		watch(()=>colorData.selectDetail.id,(newVal,oldVal)=>{
+			if(!colorData.colorList?.list?.[newVal]){
+				colorData.colorList.list[newVal] = []
+			}else{
+				return
+			}
+			let isNoSelect = false
+			let isOneChecked = false
+			for (let index = 0; index < 9; index++) {
+				colorData.allBoardData.colorBoards
+				let item:any = {}
+				item = colorData.allBoardData.colorBoards[index]
+				if(
+					colorData.allBoardData.colorBoards?.[index] &&
+					colorData.selectDetail.color.rgba.r == colorData.allBoardData.colorBoards?.[index]?.rgba?.[0] &&
+					colorData.selectDetail.color.rgba.g == colorData.allBoardData.colorBoards?.[index]?.rgba?.[1] &&
+					colorData.selectDetail.color.rgba.b == colorData.allBoardData.colorBoards?.[index]?.rgba?.[2] &&
+					JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(colorData.allBoardData.colorBoards?.[index]?.gradient)
+				){
+					if(!isOneChecked){
+						isOneChecked = true
+						if(colorData.allBoardData.colorBoards?.[index].gradient){
+							item.gradient = colorData.allBoardData.colorBoards?.[index].gradient
+						} 
+						colorData.selectColor = item
+						colorData.colorList.index = index
+					}
+				}else{
+					if(!isNoSelect){
+						item = {
+							hex:rgbaToHex([colorData.selectDetail.color.rgba.r,colorData.selectDetail.color.rgba.g,colorData.selectDetail.color.rgba.b]),
+							id:colorData.selectDetail.color.id,
+							rgba:{
+								r:colorData.selectDetail.color.rgba.r,
+								g:colorData.selectDetail.color.rgba.g,
+								b:colorData.selectDetail.color.rgba.b,
+							},
+							tcx:colorData.selectDetail.color.tcx,
+							name:colorData.selectDetail.color.name,
+						}
+						if(colorData.selectDetail.color.gradient){
+							item.gradient = colorData.selectDetail.color.gradient
+						} 
+						colorData.colorList.index = index
+						colorData.selectColor = item
+						isNoSelect = true
+					}else{
+						item = {}
+					}
+				}
+				colorData.colorList.list[newVal].push(item)
+			}
+			
+		},{immediate: true})
+		const selectImgItem = ()=>{
+
+		}
+		const getColorName = (color:any)=>{
+			
+			let rgb:any = [color.r, color.g, color.b];
+			let hsv = rgbToHsv(rgb);
+			let data = [{
+				h: hsv[0],
+				s: hsv[1],
+				v: hsv[2],
+			}]
+			return new Promise((resolve, reject) => {
+			    Https.axiosPost(Https.httpUrls.getRgbByHsvBatch, data)
+					.then((rv) => {
+						if (rv) {
+							resolve(rv[0])
+						}
+					})
+					.catch((res) => {
+						resolve({name:'--',tcx:'--'})
+					});
+			})
+			
+			
+		}
+		const selectUplpadColor = (item:any)=>{
+			colorData.selectColor = JSON.parse(JSON.stringify(item))
+		}
+		const setSelectColor = (item:any,index:number)=>{
+			colorData.colorList.index = index
+			if(item.rgba){
+				colorData.selectColor = item
+			}else{
+				// colorData.colorList.list[colorData.selectDetail.id][index] = {}
+				colorData.selectColor = {}
+			}
+		}
+		const getTcxColor = ()=>{
+			 if(!colorData.tcxToColor){
+                return
+            }
+			let pattern = /^\d{2}-\d{4}$/;
+			if(pattern.test(colorData.tcxToColor)){
+				Https.axiosGet(Https.httpUrls.getRgbByTcx + '?tcx=' + colorData.tcxToColor).then((rv) =>{
+					if(rv && rv.name){
+						let hex = rgbaToHex([rv.r,rv.g,rv.b,rv.a? rv.a :1])
+						let value = {
+							hex:hex,
+							rgba:{
+								r:rv.r,
+								g:rv.g,
+								b:rv.b,
+							},
+							name:rv.name,
+							tcx:rv.tcx,
+							id:rv.id,
+						}
+						colorData.selectColor = value
+					}else{
+						message.info(t('DesignDetailAlter.jsContent6'))
+					}
+				})
+			}else{
+				message.info(t('ColorboardUpload.jsContent5'))
+			}
+		}
+		onMounted(()=>{
+			if(colorData.allBoardData.colorBoards){
+				colorData.allBoardData.colorBoards.forEach((item:any)=>{
+					item.rgba = item.rgbValue
+					let rgba = [item.rgbValue.r,item.rgbValue.g,item.rgbValue.b]
+					item.hex = rgbaToHex(rgba)
+				})
+			}
+			
+		})
+        return{
+			...toRefs(colorData),
+
+			selectImgItem,
+			selectUplpadColor,
+			setSelectColor,
+			getTcxColor,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .color{
+		// width: 34rem;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		> .detailText{
+			margin-bottom: 1rem;
+		}
+		> .pallet{
+			margin-bottom: 4.5rem;
+		}
+		> .colorBox{
+			margin-bottom: 3rem;
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			> .colorBoxItem{
+				margin: 1rem 0;
+				width: 32%;
+				height: 11rem;
+				border-radius: .5rem;
+				border: 1px solid #999;
+				cursor: pointer;
+				display: flex;
+				flex-direction: column;
+				&.active{
+					border: 2px solid #000;
+				}
+				> .background{
+					flex: 1;
+					height: 7rem;
+					width: 100%;
+				}
+				> .text{
+					font-weight: 600;
+					line-height: 2rem;
+					text-align: center;
+				}
+				> .backgroundImg{
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+		> .uploadImage{
+			margin-bottom: 3rem;
+			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);
+			height: 10rem;
+			width: 100%;
+			border-radius: .5rem;
+		}
+		> .colorCode{
+			margin-bottom: 3rem;
+			> .generalModel_state{
+				> .generalModel_state_item{
+					width: 100%;
+					margin: 0;
+					input{
+						background: #f4f4f4;
+					}
+				}
+			}
+			> .getTcxColorBtn{
+				background: #BDBDBD;
+				border-radius: 5rem;
+				line-height: 6rem;
+				text-align: center;
+				margin-top: 2rem;
+				cursor: pointer;
+				width: 100%;
+				transition: all .3s;
+				&:hover{
+					background: #d4d4d4;
+				}
+			}
+		}
+		
+	}
+</style>

src/component/DetailCopy/detailLeft/color/pallet.vue

@@ -0,0 +1,636 @@
+<template>
+    <div class="pallet">
+		<div class="palletColo" @click="openPallet">
+			<div v-show="!selectColor.gradient" class="palletBackColor" :title="selectColor.name" :style="{'background-color':selectColor.hex}">
+				{{ selectColor.hex }}
+			</div>
+			<div v-show="selectColor.gradient" class="palletBackColor" :style="{'background-image':`linear-gradient(${selectColor.gradient?.angle}deg,${setGradient(selectColor.gradient)})`}">
+			</div>
+		</div>
+		<div class="palletBox">
+			<div v-show="palletShow" class="color_setting_block">
+				<Chrome class="chrome_color" v-model="color_"></Chrome>
+				<div class="color_setting_operateSingle">
+					<div class="color_setting_btn" :class="{active:!color?.gradient?.gradientShow}">{{ $t('ColorboardUpload.Single') }}</div>
+					<a-switch :checked="color?.gradient?.gradientShow"  @click="setOperate"/>
+					<div class="color_setting_btn" :class="{active:color?.gradient?.gradientShow}">{{ $t('ColorboardUpload.Gradual') }}</div>
+				</div>
+				<div class="color_setting_operate" v-if="color?.gradient?.gradientShow">
+					<div class="color_setting_operate_item color_setting_operate_control">
+						<div class="operate_item_box">
+							<div>{{ $t('ColorboardUpload.Alignment') }}</div>
+						</div>
+						<div class="operate_item_box operate_item_angle">
+							<div class="operate_item_angle_box" @mousedown="mousedownGradientAngle(getMousePosition($event,false))" @touchstart="mousedownGradientAngle(getMousePosition($event,true))">
+								<div :style="{'transform':`rotate(${color.gradient.angle}deg)`}"></div>
+							</div>
+						</div>
+						<div class="operate_item_box operate_item_delete">
+							<i class="fi fi-rr-trash" @click="deleteGradientItem"></i>
+						</div>
+					</div>
+					<div class="color_setting_operate_item color_setting_operate_input">
+						<div class="color_setting_operate_bg" @click="addGradient($event)" :style="{'background-image':color?.gradient?`linear-gradient(90deg,${setGradient(color.gradient)})`:'none'}">
+						</div>
+						<div v-for="item,index in color.gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == color.gradient.selectIndex}" :style="{'left':item.left,'background-color':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @mousedown="mousedownGradient(getMousePosition($event,false),item,index,)" @touchstart="mousedownGradient(getMousePosition($event,true),item,index,)"></div>
+					</div>
+				</div>
+			</div>
+		</div>
+		
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,onMounted,toRefs, reactive} from 'vue'
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import { message,Upload} from 'ant-design-vue';
+import { Sketch, Chrome} from '@ans1998/vue3-color'
+import { getMousePosition } from "@/tool/mdEvent";
+import { rgbaToHex } from "@/tool/util"
+import { color } from 'echarts/core';
+export default defineComponent({
+    components:{
+		Chrome,
+    },
+	props:{
+	    selectColor:{
+	        type:Object,
+			default:()=>{}
+	    },
+	},
+	emits:['selectUplpadColor'],
+    setup(props,{emit}) {
+		const {t} = useI18n()
+        const store = useStore();
+		const palletData = reactive({
+			palletShow:false,
+			palletList:[],
+			color_:{} as any,
+			color:{} as any,
+			updataSelectColorTime:null as any,
+			gradient:{
+				gradientList:[
+					{
+						rgba:{
+							r:117,
+							g:119,
+							b:255,
+							a:1,
+						},
+						left:'0%'
+					},{
+						rgba:{
+							r:0,
+							g:222,
+							b:152,
+							a:1,
+						},
+						left:'100%'
+					},
+				],
+				angle:45,
+				selectIndex:-1,
+				gradientShow:false,
+			},
+			setGradient:computed(()=>{
+				return (gradient:any)=>{
+					let gradientStr = ''
+					if(!gradient?.gradientList)return
+					gradient.gradientList.sort((a:any, b:any) => {
+						let aArr = a.left.split('%')[0]
+						let bArr = b.left.split('%')[0]
+						return aArr - bArr;
+					});
+					gradient.gradientList.forEach((item:any,index:any)=>{
+						let str = ','
+						if(gradient.gradientList.length == index+1)str = ''
+						gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}` 
+
+					})
+					return `${gradientStr}`
+				}
+			})
+			
+		})
+		const getpalletListDom = reactive({
+		})
+		watch(()=>palletData.color_,(newVal:any)=>{
+			if(!newVal?.rgba?.r)return
+			if(palletData.color?.gradient?.gradientShow){
+				palletData.color.gradient.gradientList[palletData.color.gradient.selectIndex].rgba = {
+					r:newVal.rgba.r,
+					g:newVal.rgba.g,
+					b:newVal.rgba.b,
+					a:newVal.rgba.a,
+				}
+			}else{
+				palletData.color = newVal
+			}
+		})
+		watch(()=>palletData.color,(newVal:any)=>{
+			clearTimeout(palletData.updataSelectColorTime)
+			palletData.updataSelectColorTime = setTimeout(()=>{
+				if(JSON.stringify(props.selectColor) != JSON.stringify(newVal)){
+					newVal.name = ''
+					newVal.tcx = ''
+					let rgba = [newVal.rgba.r,newVal.rgba.g,newVal.rgba.b]
+					let hex = rgbaToHex(rgba)
+					newVal.hex = hex
+					emit('selectUplpadColor',newVal)
+				}
+			},400)
+		},{deep: true })
+		const setOperate = ()=>{
+			palletData.color.rgba = palletData.color?.rgba?.r?palletData.color.rgba:{r:0,g:0,b:0,a:1}
+			palletData.gradient.selectIndex = 0
+			palletData.gradient.gradientShow = true
+			if(!palletData.color.gradient){
+				if(palletData.color.rgba.r){
+					palletData.gradient.gradientList[palletData.gradient.selectIndex].rgba = {
+						r:palletData.color.rgba.r,
+						g:palletData.color.rgba.g,
+						b:palletData.color.rgba.b,
+						a:1,
+					}
+				}
+				palletData.color.gradient = JSON.parse(JSON.stringify(palletData.gradient))
+			}else{
+				palletData.color.rgba = palletData.color.gradient.gradientList[0].rgba
+				palletData.color.gradient = null
+			}
+		}
+		const deleteGradientItem = ()=>{
+			if(palletData.color.gradient.gradientList.length <= 2)return
+			palletData.color.gradient.gradientList.splice(palletData.color.gradient.selectIndex,1)
+		}
+		const addGradient = (event:any)=>{
+			let gradientWidth = event.target.clientWidth
+			let left:any = event.offsetX/gradientWidth
+			palletData.color.gradient.gradientList.push({
+				rgba:palletData.color_.rgba,
+				left:left.toFixed(2)*100+'%'
+			})
+		}
+		const mousedownGradientAngle = (event:any)=>{
+			// isMoible()  true为移动端
+			let domPosition = event.target.getBoundingClientRect()
+			let position = {
+				x:domPosition.x+domPosition.width/2,
+				y:domPosition.y+domPosition.height/2,
+			}
+			let angle
+			let mousedown = function(event:any){
+				let e = getMousePosition(event,false)
+				mouseDownOperation(e)
+			}
+
+			let touchstart = function(event:any){
+				let e = getMousePosition(event,true)
+				mouseDownOperation(e)
+			}
+			let mouseDownOperation = (e:any)=>{
+				let X = position.x 
+				let Y = position.y
+				let x = (e.clientX) - X
+				let y = Y -( e.clientY)
+				angle = Math.atan2(x,y)*(180 / Math.PI)
+				// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
+				palletData.color.gradient.angle = angle
+
+			}
+			let mouseupGradientAngle = ()=>{
+				window.removeEventListener('touchmove',touchstart)
+				window.removeEventListener('touchend',mouseupGradientAngle)
+				
+				window.removeEventListener('mousemove',mousedown)
+				window.removeEventListener('mouseup',mouseupGradientAngle)
+			}
+			window.addEventListener('touchmove',touchstart)
+			window.addEventListener('touchend',mouseupGradientAngle)
+
+			window.addEventListener('mousemove',mousedown)
+			window.addEventListener('mouseup',mouseupGradientAngle)
+		}
+
+		const mousedownGradient = (event:any,item:any,index:number)=>{
+			palletData.color.gradient.selectIndex = index
+			
+			
+            // this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
+			let gradientWidth = (document.querySelector('.pallet .color_setting_operate_bg') as any).clientWidth
+			let position = {
+				x:event.clientX,
+				left:event.target.style.left?event.target.style.left.split('%')[0]:0
+			}
+			let mousedown = function(event:any){
+				let e = getMousePosition(event,false)
+				mousedownGradient(e)
+			}
+
+			let touchstart = function(event:any){
+				let e = getMousePosition(event,true)
+				mousedownGradient(e)
+			}
+			let mousedownGradient = (e:any)=>{
+				let left = ((e.clientX) - position.x)/gradientWidth*100+Number(position.left)
+				left = (left<0?0:left>100?100:left)
+				item.left = left+'%'
+			}
+
+			let mouseupGradientAngle = ()=>{
+				window.removeEventListener('touchmove',touchstart)
+				window.removeEventListener('touchend',mouseupGradientAngle)
+				window.removeEventListener('mousemove',mousedown)
+				window.removeEventListener('mouseup',mouseupGradientAngle)
+			}
+			window.addEventListener('touchmove',touchstart)
+			window.addEventListener('touchend',mouseupGradientAngle)
+
+			window.addEventListener('mousemove',mousedown)
+			window.addEventListener('mouseup',mouseupGradientAngle)
+			
+			
+		}
+		const selectImgItem = ()=>{
+
+		}
+		const openPallet = ()=>{
+			palletData.palletShow = !palletData.palletShow
+			if(palletData.palletShow && props.selectColor?.rgba?.r){
+				if(props.selectColor.gradient){
+					palletData.color_.rgba = props.selectColor.gradient.gradientList[0].rgba
+				}else{
+					palletData.color_ = JSON.parse(JSON.stringify(props.selectColor))
+				}
+			
+				palletData.color = JSON.parse(JSON.stringify(props.selectColor))
+			}
+		}
+		onMounted(()=>{
+			nextTick().then(()=>{
+				const backIcon = document.createElement('div');
+				backIcon.classList.add('vc-sketch-color-wrap')
+				let dropperDom = document.getElementsByClassName("pallet")?.[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
+				dropperDom.appendChild(backIcon);
+				backIcon.addEventListener('click',async ()=>{
+					try {
+						const dropper = new EyeDropper();
+						const result = await dropper.open();
+						let hex = result.sRGBHex.replace("#", "");
+						// 将十六进制颜色码拆分成红、绿、蓝三个部分
+						const r = parseInt(hex.substring(0, 2), 16);
+						const g = parseInt(hex.substring(2, 4), 16);
+						const b = parseInt(hex.substring(4, 6), 16);
+						palletData.color = {rgba:{r:r,g:g,b:b,a:1},hex:result.sRGBHex}
+						// return `rgb(${r}, ${g}, ${b})`;
+						// box.style.backgroundColor = label.textContent = result.sRGBHex;
+					} catch (e) {
+						message.info(t('DesignDetailAlter.jsContent1'))
+					}
+				})
+			})
+		})
+        return{
+			...toRefs(palletData),
+			...toRefs(getpalletListDom),
+
+			openPallet,
+			selectImgItem,
+			setOperate,
+			deleteGradientItem,
+			addGradient,
+			mousedownGradientAngle,
+			mousedownGradient,
+			getMousePosition,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .pallet{
+		position: relative;
+		> .palletColo{
+			width: 100%;
+			height: 5.5rem;
+			border-radius: .5rem;
+			border: 1px solid #000;
+			padding: .5rem .6rem;
+			cursor: pointer;
+			> .palletBackColor{
+				width: 100%;
+				height: 100%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+		> .palletBox{
+			position: absolute;
+			width: 100%;
+			z-index: 2;
+			> .color_setting_block{
+				margin: auto;
+				background: linear-gradient(70deg, #eee4f3, #f3f4e6);
+				width: 100%;
+				border-radius: calc(1rem*1.2);
+				overflow: hidden;
+				box-shadow: 2px 2px 8px rgba(0,0,0,.3);
+				.vc-chrome{
+					background: rgba(0,0,0,0);
+					box-shadow:none;
+				}
+				:deep(.chrome_color){
+					width: 100%;
+					overflow: hidden;
+
+					.vc-chrome-saturation-wrap{
+						width: 30rem;
+						height: 30rem;
+						margin: 2rem auto;
+						padding-bottom: 0;
+					}
+					.vc-chrome-body{
+						padding: 0;
+						width: 90%;
+						margin: 2 auto;
+						margin: 0 auto;
+						background: rgba(0,0,0,0);
+						margin-bottom: 3rem;
+						// display: none;
+						.vc-chrome-fields-wrap{
+							margin-top: 5%;
+							padding: 0;
+							position: relative;
+							.vc-chrome-toggle-btn{
+								width: calc(3.2rem*1.2);
+								.vc-chrome-toggle-icon{
+									height: auto;
+									margin-right: calc(-0.4rem*1.2);
+									margin-top: calc(0rem*1.2);
+									display: flex;
+									flex-direction: column;
+									align-items: center;
+									svg{
+										width: calc(2.4rem*1.2) !important;
+										height: calc(2.4rem*1.2) !important;
+									}
+								}
+							}
+							.vc-chrome-fields{
+								.vc-chrome-field{
+									padding-left: calc(.6rem*1.2);
+								}
+								.vc-input__label{
+									font-size: calc(1.6rem*1.2);
+								}
+								.vc-input__input{
+									font-size: 2rem;
+									height: 4rem;
+								}
+							}
+							.ant-upload-list{
+								
+							}
+							.vc-sketch-color-wrap{
+								background-image: url(@../../../../../../assets/images/homePage/dropper.png);
+								background-size: 3rem;
+								background-repeat: no-repeat;
+								background-position: 50%;
+								cursor: pointer;
+								margin: 0;
+								width: 4rem;
+								height: 4rem;
+								padding: calc(.7rem*1.2);
+								border: 1px solid;
+								position: absolute;
+								bottom: -2rem;
+								right: 0rem;
+								border-radius: calc(.5rem*1.2);
+								
+							}
+							.vc-chrome-fields{
+								.vc-input__label{
+									margin-top: calc(1rem*1.2);
+								}
+							}
+							.vc-chrome-fields:nth-child(2){
+								>:last-of-type {
+									display: none;
+								}
+							}
+							.vc-chrome-fields:nth-child(3){
+								>:last-of-type {
+									display: none;
+								}
+							}
+						}
+						.vc-chrome-controls{
+							align-items: center;
+							flex-direction: row-reverse;
+							.vc-chrome-color-wrap{
+								// width: 3.6rem*1.2);
+								margin-left: calc(2rem*1.2);
+								width: auto;
+								.vc-chrome-active-color{
+									border-radius: 50%;
+								}
+								.vc-chrome-active-color,.vc-checkerboard{
+									width: calc(3rem*1.2);
+									height: calc(3rem*1.2);
+								}
+							}
+							.vc-chrome-hue-wrap,.vc-chrome-alpha-wrap{
+								.vc-hue{
+									border-radius: 15px;
+								}
+								.vc-alpha{
+									border-radius: 15px;
+									overflow: hidden;
+								}
+								height: 2rem;
+								margin: 0;
+								.vc-hue-pointer{
+									transform: translateX(-1.25rem);
+								}
+								.vc-hue-picker{
+									width: 2.5rem;
+									height: 2.5rem;
+									border-radius: 50%;
+									transform: translate(0px,-3px);
+								}
+							}
+							.vc-chrome-alpha-wrap{
+								display: none;
+							}
+						}
+					}
+					.vc-chrome-saturation-wrap .vc-saturation-circle{
+						width: calc(1rem*1.2);
+						height: calc(1rem*1.2);
+					}
+				}
+				.color_block{
+						// margin-top: calc(1rem;
+						// display: flex;
+						// justify-content: space-between;
+						// font-size: calc(1.6rem;
+						width: 100%;
+						padding: 0 5%;
+						padding-bottom: 5%;
+						margin: calc(0.5rem*1.2) auto;
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
+						.color_right{
+							width: 13rem;
+							font-size: calc(1.2rem*1.2);
+							color: #666666;
+							.color_rgb_block{
+								display: flex;
+								.rgb_item{
+									margin-left: calc(.2rem*1.2);
+								}
+							}
+						}
+						.color_left{
+							cursor: pointer;
+							color: rgb(153, 153, 153);
+						}
+						.color_right,.color_left{
+							>div{
+								display: flex;
+								align-items: center;
+							}
+							.color_HEX_block,.color_rgb_block{
+								padding: .25rem .6rem;
+								box-shadow: inset 0 0 0 1px #ccc;
+								border-radius: .5rem;
+								justify-content: space-around;
+								text-transform:uppercase;
+								.color_block_bg{
+									width: 1.8rem;
+									height: 2.5rem;
+									// margin-right: .5rem;
+									display: flex;
+									justify-content: space-between;
+								}
+							}
+							.color_block_bg{
+							}
+						}
+						
+					}
+					.color_setting_operateSingle{
+						text-align: center;
+						margin: 1rem 0;
+						display: flex;
+						justify-content: center;
+						.color_setting_btn{
+							margin: 0 1rem;
+							color: rgba(0, 0, 0, 0.5);
+							&.active{
+								color: rgba(0, 0, 0, 0.7);
+			                    font-weight: 900;
+							}
+						}
+					}
+					.color_setting_operate{
+						*{
+							-webkit-touch-callout: none; /* iOS Safari */
+							-webkit-user-select: none; /* Safari */
+							-moz-user-select: none; /* Firefox */
+							-ms-user-select: none; /* Internet Explorer/Edge */
+							user-select: none;
+						}
+						.color_setting_operate_item{
+							display: flex;
+							justify-content: space-around;
+							align-items: center;
+							.operate_item_box{
+							}
+						}
+						.color_setting_operate_control{
+							.operate_item_delete,.operate_item_angle{
+								cursor: pointer;
+							}
+							.operate_item_delete{
+								i{
+								display: flex;
+									font-size: 3rem;
+								}
+							}
+							.operate_item_angle{
+								.operate_item_angle_box{
+									border-radius: 50%;
+									width: 4rem;
+									height: 4rem;
+									border: solid 2px #39215b;
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									cursor: pointer;
+									>div{
+										height: 100%;
+										width: 1rem;
+										position: relative;
+										pointer-events:none;
+									}
+									>div::before{
+										position: absolute;
+										content: "";
+										top: 0.2rem;
+										width: 1rem;
+										height: 1rem;
+										border-radius: 50%;
+										background: #39215b;
+									}
+								}
+							}
+						}
+						.color_setting_operate_input{
+							width: 80%;
+							// padding: 0 10%;
+							margin: 1.2rem 10%;
+							border-radius: 10%;
+							position: relative;
+							height: 2.5rem;
+							.color_setting_operate_bg{
+								border-radius: .5rem;
+								width: 100%;
+								height: 2.5rem;
+								background: #fff;
+								position: absolute;
+							}
+						}
+						.color_setting_operate_btn{
+							position: absolute;
+							top: 50%;
+							transform: translate(-50%,-50%);
+							left: 0;
+							width: 1rem;
+							height: 110%;
+							border: .2rem solid;
+							border-radius: .5rem;
+							cursor: pointer;
+							box-sizing: content-box;
+							z-index: 2;
+							&.active{
+								border: .3rem solid;
+							}
+						}
+						.color_setting_operate_btn:hover{
+							border: .3rem solid;
+						}
+					}
+			}	
+		}
+	}
+</style>

src/component/DetailCopy/detailLeft/color/upload.vue

@@ -0,0 +1,258 @@
+<template>
+    <div class="upload">
+		<div class="successfullyUpload" v-show="uploadList?.[selectDetail.id]?.length >= 1">
+			<div class="img">
+				<div class="upload_file_item" v-for="(file) in uploadList?.[selectDetail.id]" :key="file">
+					<div class="upload_file_item_content" v-show="file.status !== 'done'">
+						<a-spin  :indicator="indicator" tip="Uploading..."/>
+					</div>
+					<div class="upload_file_item_content"  v-show="file.status === 'done'">
+						<img  :src="file?.imgUrl" class="upload_img">
+						<div class="delete_file_block" @click="colorDeleteFile(index)">{{ $t('DesignDetailAlter.Delete') }}</div>
+					</div>
+				</div>
+			</div>
+			<div class="color">
+				<div v-for="item in colorList?.[selectDetail.id]" :key="item" @click="selectColor(item)" :style="{'background-color': item.hex}"></div>	
+			</div>
+		</div>
+		<a-upload
+			:capture="null"
+			v-show="!uploadList?.[selectDetail.id] || uploadList?.[selectDetail.id]?.length < 1"
+			list-type="picture-card"
+			:customRequest="function(){}"
+			@change="fileUploadChange"
+			:before-upload="beforeUpload"
+			:action="null"
+			accept=".jpg,.png,.jpeg,.bmp"
+			>
+			<div  class="upload_tip_block">
+				<i class="fi fi-rr-picture"></i>
+			</div>
+		</a-upload>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,h,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
+import { message,Upload} from 'ant-design-vue';
+import { useStore } from "vuex";
+import GO from "@/tool/GO";
+import { LoadingOutlined } from '@ant-design/icons-vue';
+import { useI18n } from 'vue-i18n'
+import { rgbaToHex } from "@/tool/util"
+export default defineComponent({
+    components:{
+    },
+	emits:['selectUplpadColor'],
+    setup(props,{emit}) {
+		const {t} = useI18n();
+        const store = useStore();
+		const colorUpload = reactive({
+			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+			
+			uploadList:{} as any,
+			indicator: h(LoadingOutlined, {
+                style: {
+                    fontSize: "2.4rem",
+                },
+                spin: true,
+            }),
+			colorList:{} as any,
+
+		})
+		
+		const fileUploadChange = (data:any)=>{
+            let file:any = data.file
+            let fileData = file.originFileObj
+            var reader = new FileReader();
+            reader.onload = (e:any) => {
+                let data_new;
+                if (typeof e.target.result === 'object') {
+                // 把Array Buffer转化为blob 如果是base64不需要
+                    data_new = window.URL.createObjectURL(new Blob([e.target.result]));
+                } else {
+                    data_new = e.target.result;
+                }
+                file.imgUrl = data_new
+                file.status = 'done'
+				if(!colorUpload.uploadList[colorUpload.selectDetail.id])colorUpload.uploadList[colorUpload.selectDetail.id]=[]
+				colorUpload.uploadList[colorUpload.selectDetail.id].push(file)
+
+				setTimeout(async ()=>{
+					const img = new Image();
+					// let colorImage = this.$refs.colorImage
+					img.src = file.imgUrl;
+
+					img.onload = async () => {
+						const colorThief = new ColorThief();
+						// let domImg = colorImage[0];
+						// let color = colorThief.getColor(img)
+						// let colorHex = this.rgbaToHex(color)
+						let selectColorList:any = [];
+						let selectColor = colorThief.getPalette(img,8)
+						//排序
+						let obj = {
+							max : 5,
+							min: 5,
+						}
+
+						let colorSort:any
+						await GO.setColor(selectColor,file.imgUrl,obj).then(
+							(rv:any) => {
+								if(rv){
+									colorSort = rv.ratio
+								}
+							}
+						)
+						colorSort.sort((a:any, b:any) => {
+							var a_num = a.ratio;
+							var b_num = b.ratio;
+							return b_num - a_num;
+						});
+						selectColor = []
+						colorSort.forEach((v:any)=>{
+							selectColor.push(v.rgb)
+						})
+						selectColor = selectColor.join('&')
+						selectColor = selectColor.split("&")
+						let color = selectColor[0].split(',')
+						let colorHex = rgbaToHex(color)
+
+						let colorLi:any = []
+						new Set(selectColor).forEach((item:any)=>{
+							colorLi.push(item.split(","))
+						})
+						colorLi.forEach((element:any) => {
+							let colorLiHex = rgbaToHex(element)
+							selectColorList.push(
+								{rgba:{r:element[0],g:element[1],b:element[2],a:1},hex:colorLiHex}
+							)
+						});
+						if(!colorUpload.colorList[colorUpload.selectDetail.id])colorUpload.colorList[colorUpload.selectDetail.id]=[]
+						colorUpload.colorList[colorUpload.selectDetail.id] = selectColorList
+						// this.getHsvColor(selectColorList)
+						// this.selectColor = {rgba:{r:color[0],g:color[1],b:color[2],a:1},hex:colorHex}
+						img.remove()
+					};
+                },100)
+            };
+            // 转化为base64S
+            reader.readAsDataURL(fileData)
+        }
+		const 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(t('DesignDetailAlter.jsContent4'));
+            }
+            const isLt2M = file.size / 1024 / 1024 < 5;
+            if (!isLt2M) {
+                message.info(t('DesignDetailAlter.jsContent5'));
+            }
+            return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
+        }
+		const selectColor = (color:any)=>{
+			emit('selectUplpadColor',color)
+		}
+		const colorDeleteFile = ()=>{
+			colorUpload.uploadList[colorUpload.selectDetail.id] = []
+			colorUpload.colorList[colorUpload.selectDetail.id] = []
+		}
+        return{
+			...toRefs(colorUpload),
+
+			fileUploadChange,
+			beforeUpload,
+			colorDeleteFile,
+			selectColor,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .upload{
+		// width: 34rem;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		:deep(.ant-upload-picture-card-wrapper){
+			height: 100%;
+			width: 100%;
+			.ant-upload-list{
+				height: 100%;
+				width: 100%;
+				.ant-upload-select-picture-card{
+					height: 100%;
+					width: 100%;
+					border: none;
+					margin: 0;
+					background: #fff;
+					&:hover{
+						border: none;
+					}
+				}
+			}
+			.upload_tip_block{
+				i{
+					font-size: 4rem;
+					display: flex;
+				}
+			}
+		}
+		> .successfullyUpload{
+			width: 100%;
+			display: flex;
+			> .color{
+				display: flex;
+				margin-left: 1rem;
+				flex-wrap: wrap;
+				align-items: center;
+				> div{
+					margin: .5rem;
+					width: 3rem;
+					height: 3rem;
+					cursor: pointer;
+				}
+			}
+			> .img{
+				> .upload_file_item{
+					> .upload_file_item_content{
+						width: 9rem;
+						height: 9rem;
+						position: relative;
+						&:hover{
+							> .delete_file_block{
+								display: block;
+							}
+						}
+						> .delete_file_block{
+							display: none;
+							cursor: pointer;
+							position: absolute;
+							bottom: 0;
+							line-height: 3rem;
+							background: rgba(0, 0, 0, 0.6);
+							color: #fff;
+							width: 100%;
+							text-align: center;
+						}
+						> img{
+							width: 100%;
+							height: 100%;
+							object-fit: contain;
+						}
+					}
+					
+				}
+			}
+		}
+	
+	}
+</style>

src/component/DetailCopy/detailLeft/index.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="detailLeft">
+		<sketch v-show="currentDetailType == 'sketch'"></sketch>
+		<print v-show="currentDetailType == 'print'"></print>
+		<color v-show="currentDetailType == 'color'"></color>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import sketch from './sketch.vue'
+import print from './print.vue'
+import color from './color/index.vue'
+
+export default defineComponent({
+    components:{
+		sketch,print,color
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+		const detailData = reactive({
+			selectTitle:'upload',
+			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
+		})
+		const getDetailListData = reactive({
+			total:0,
+			pageSize:10,
+			currentPage:1,
+		})
+		const getDetailListDom = reactive({
+			libraryList:null as any,
+		})
+		
+		
+        return{
+			...toRefs(detailData),
+			...toRefs(getDetailListData),
+			...toRefs(getDetailListDom),
+			
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .detailLeft{
+		width: 34rem;
+		// width: 100%;
+		height: 100%;
+	}
+</style>

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

@@ -0,0 +1,122 @@
+
+<template>
+    <div class="uploadList">
+		<div class="uploadList_box">
+			<div class="content_img_item" v-for="(file) in currentList[currentDetailType]" :key="file.id">
+				<div class="content_img_item_block" :class="{active:file?.checked}">
+					<img v-lazy="file.imgUrl" :key="file.imgUrl" :alt="file.name" @click.stop="selectImgItem(file)"/>
+					<sketchCategory :disignTypeList="catecoryList" :generateList="allBoardData.sketchboardFiles" :item="file" :isSpread="true"></sketchCategory>
+				</div>
+			</div>
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,watch,toRefs, reactive, onMounted} from 'vue'
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import { getCookie } from "@/tool/cookie";
+import { message,Upload} from 'ant-design-vue';
+import {getMinioUrl} from '@/tool/util'
+import { useI18n } from 'vue-i18n'
+export default defineComponent({
+    components:{
+		sketchCategory
+    },
+	props:{
+		catecoryList:{
+		    type:Object,
+			default:()=>[] as any,
+			required:true
+		}
+	},
+    setup(props,{emit}) {
+		const {t} = useI18n();
+        const store = useStore();
+		const detailData = reactive({
+			allBoardData:computed(()=>store.state.UploadFilesModule.allBoardData),
+			currentList:{
+				sketch:[],
+				print:[],
+				color:[],
+			},
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
+
+		})
+		
+		const getDetailListData = reactive({
+			
+		})
+		const selectImgItem = (file:any)=>{
+			if(!file.resData.minIOPath)file.resData.minIOPath = getMinioUrl(file.resData.url)
+			store.commit('DesignDetailCopy/setNewDetail',file.resData)
+		}
+	
+		onMounted(()=>{
+			console.log(detailData.allBoardData);
+			detailData.currentList = {
+				sketch:detailData.allBoardData.sketchboardFiles,
+				print:detailData.allBoardData.printboardFiles,
+				color:detailData.allBoardData.colorBoards,
+			}
+			
+		})
+        return{
+			...toRefs(detailData),
+			...toRefs(getDetailListData),
+
+			selectImgItem,
+        }
+    },
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .uploadList{
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		> .uploadList_box{
+			width: 100%;
+			flex: 1;
+			overflow-y: auto;
+			display: flex;
+			flex-wrap: wrap;
+			margin-top: 1rem;
+			justify-content: space-between;
+			align-content: flex-start;
+			&::-webkit-scrollbar{display: none;}
+			> .content_img_item{
+				> .content_img_item_block{
+					width: calc((34rem - 2rem) / 2);
+					height: calc((34rem - 2rem) / 2);
+					position: relative;
+					margin-bottom: 2rem;
+
+					> img{
+						cursor: pointer;
+						width: 100%;
+						height: 100%;
+						object-fit: contain;
+					}
+				}
+			}
+			> .material_content_list_loding{
+				width: 100%;
+				height: calc((34rem - 2rem) / 2);
+			}
+			> .upload_item{
+				width: calc((34rem - 2rem) / 2);
+				height: calc((34rem - 2rem) / 2);
+				align-items: center;
+				justify-content: center;
+			}
+		}
+		
+	}
+</style>

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

@@ -61,6 +61,7 @@ export default defineComponent({
 			designTypeList:[] as any,
 			designType:'',
 			searchPictureName:'',
+			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
 		})
 		const getDetailListData = reactive({
 			total:0,
@@ -72,15 +73,45 @@ export default defineComponent({
 			detailData.designType = detailData.designTypeList[0].value
 			getLibraryList()
 		}
-		const selectImgItem = ()=>{
-
+		const hasDuplicateId = (id:any)=>{
+			let arr = detailData.designDetail.clothes
+			for (let i = 0; i < arr.length; i++) {
+				if (arr[i].id === id) {
+				return true;
+				}
+			}
+			return false;
+		}
+		const selectImgItem = (file:any)=>{
+			let randomNum = Math.floor(100 + Math.random() * 900);
+			let type = store.state.DesignDetailCopy.currentDetailType
+			let id = file.id
+			if(type == 'sketch'){
+				id = Number(file.id + (randomNum + ''))
+				if(hasDuplicateId(id)){
+					selectImgItem(file)
+					return
+				}
+			}
+			let data = JSON.parse(JSON.stringify(file))
+			data.id = id
+			store.commit('DesignDetailCopy/setNewDetail',data)
 		}
 		const getLibraryList = ()=>{
             detailData.isShowLoading = true
 			let level2Type = ''
 			let workspace = store.state.Workspace.workspace
+			let type = store.state.DesignDetailCopy.currentDetailType
+			let leve1Type
+			if(type == 'sketch'){
+				leve1Type = 'Sketchboard'
+			}else if(type == 'print'){
+				leve1Type = 'Printboard'
+			}else if(type == 'element'){
+				leve1Type = 'DesignElements'
+			}
             let data = {
-                level1Type:'Sketchboard',
+                level1Type:leve1Type,
                 // level2Type:'Pattern',
                 level2Type:detailData.designType,
 				modelSex:workspace?.sex,
@@ -204,7 +235,7 @@ export default defineComponent({
 					height: calc((34rem - 2rem) / 2);
 					position: relative;
 					margin-bottom: 2rem;
-
+					cursor: pointer;
 					> img{
 						width: 100%;
 						height: 100%;

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

@@ -80,8 +80,9 @@ export default defineComponent({
 			pageSize:10,
 			currentPage:1,
 		})
-		const selectImgItem = ()=>{
-
+		const selectImgItem = (file:any)=>{
+			// let data = JSON.parse(JSON.stringify(file))
+			store.commit('DesignDetailCopy/setNewDetail',file)
 		}
 		const upFileUploadChange = (data:any)=>{
             let file = data.file;
@@ -115,6 +116,8 @@ export default defineComponent({
 					let fileList = detailData.uploadList.filter(
 						(v:any) => v.status === "done"
 					);
+					console.log(file);
+					
 					detailData.uploadList = fileList
 					// this.selectImgItem(detailData.uploadList[detailData.uploadList.length-1])
 				}else{
@@ -150,6 +153,16 @@ export default defineComponent({
             return (isJpgOrPng && isLt2M) || Upload.LIST_IGNORE;
         }
 		onMounted(()=>{
+			let type = store.state.DesignDetailCopy.currentDetailType
+			let leve1Type:any
+			if(type == 'sketch'){
+				leve1Type = 'Sketchboard'
+			}else if(type == 'print'){
+				leve1Type = 'Printboard'
+			}else if(type == 'element'){
+				leve1Type = 'DesignElements'
+			}
+			detailData.upload.level1Type = leve1Type
 		})
         return{
 			...toRefs(detailData),
@@ -190,6 +203,7 @@ export default defineComponent({
 					margin-bottom: 2rem;
 
 					> img{
+						cursor: pointer;
 						width: 100%;
 						height: 100%;
 						object-fit: contain;

src/component/DetailCopy/detailLeft/print.vue

@@ -0,0 +1,215 @@
+<template>
+    <div class="print">
+		<div class="detailText">Current Print</div>
+		<div class="select_print">
+			<img :class="{active:printList.length == 1}" v-for="item in printList" :src="item.path" alt="">
+			<!-- <img :src="selectDetail.path" alt="">
+			{{ selectDetail }} -->
+			<div v-if="printList.length == 0">
+				<i class="fi fi-rr-picture centent"></i>
+			</div>
+		</div>
+		<div class="switch_type_list">
+			<div
+				@click.stop="openCurrent()"
+				class="switch_type_item"
+				:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
+			>
+				<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
+			</div>
+			<div
+				@click.stop="openUpload()"
+				class="switch_type_item"
+				:class="[selectTitle == 'upload' ? 'select_swtich' : '',]"
+			>
+				<span class="detailText">{{ $t('DesignDetailAlter.Upload') }}</span>
+			</div>
+			<div
+				@click.stop="openLibrary()"
+				class="switch_type_item"
+				:class="[selectTitle == 'library' ? 'select_swtich' : '']"
+			>
+				<span class="detailText">{{ $t('DesignDetailAlter.Library') }}</span>
+			</div>
+		</div>
+		<div class="print_content_list">
+			<div class="content_item" v-show="selectTitle == 'current'">
+				<currentList ref="currentList" :catecoryList="sketchCatecoryList"></currentList>
+			</div>
+			<div class="content_item" v-show="selectTitle == 'upload'">
+				<uploadList :catecoryList="sketchCatecoryList"></uploadList>
+			</div>
+			<div class="content_item" v-show="selectTitle == 'library'">
+				<libraryList ref="libraryList" :catecoryList="sketchCatecoryList"></libraryList>
+			</div>
+		</div>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { Https } from "@/tool/https";
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import libraryList from './module/libraryList.vue'
+import uploadList from './module/uploadList.vue'
+import currentList from './module/currentList.vue'
+export default defineComponent({
+    components:{
+		currentList,
+		libraryList,
+		uploadList,
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+		const detailData = reactive({
+			selectTitle:'current',
+			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+			sketchCatecoryList:computed(()=>{
+				return store.state.UserHabit.printType
+			}),
+			printList:[]
+		})
+		watch(()=>detailData.selectDetail?.printObject?.prints,(newVal,oldVal)=>{
+			detailData.printList = newVal.reduce((acc:any, curr:any) => {
+				if (!acc.some((item:any) => item.id === curr.id)) {
+					acc.push(curr);
+				}
+				return acc;
+			}, []);
+			
+		},{immediate: true})
+		const getDetailListData = reactive({
+			total:0,
+			pageSize:10,
+			currentPage:1,
+		})
+		const getDetailListDom = reactive({
+			libraryList:null as any,
+		})
+		const openCurrent = ()=>{
+			detailData.selectTitle = 'current'
+		}
+		const openUpload = ()=>{
+			detailData.selectTitle = 'upload'
+		}
+		const openLibrary = ()=>{
+			detailData.selectTitle = 'library'
+			getDetailListDom.libraryList.init()
+		}
+		const selectImgItem = ()=>{
+
+		}
+		
+        return{
+			...toRefs(detailData),
+			...toRefs(getDetailListData),
+			...toRefs(getDetailListDom),
+
+			openCurrent,
+			openUpload,
+			openLibrary,
+			selectImgItem,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .print{
+		// width: 34rem;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		> .detailText{
+			margin-bottom: 1rem;
+		}
+		> .select_print{
+			width: 100%;
+			height: 23.5rem;
+			padding: 1rem;
+			text-align: center;
+			border-radius: .5rem;
+			// border: 1px dashed #202020;
+			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);
+			margin-bottom: 3rem;
+			display: flex;
+			flex-wrap: wrap;
+			overflow: hidden;
+			justify-content: space-between;
+			overflow-y: auto;
+			> img{
+				object-fit: contain;
+				height: 9rem;
+				width: 9rem;
+				overflow-y: auto;
+				margin-bottom: 1rem;
+			}
+			> .active{
+				width: 100%;
+				height: 100%;
+				margin-bottom: 0;
+			}
+			> div{
+				height: 100%;
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				> i{
+					font-size: 10rem;
+				}
+			}
+		}
+		> .switch_type_list{
+			display: flex;
+			margin-bottom: 2.5rem;
+			> .switch_type_item:last-child{
+				margin-right: 0;
+			}
+			> .switch_type_item{
+				position: relative;
+				cursor: pointer;
+				margin-right: 6.5rem;
+			}
+			> .switch_type_item::before {
+                    position: absolute;
+                    content: "";
+                    display: block;
+                    background: #000;
+                    height: calc(.4rem*1.2);
+                    left: 50%;
+                    transform: translateX(-50%);
+                    bottom: -.5rem;
+                    width: 0px;
+                    transition: 0.3s all;
+                }
+			> .select_swtich {
+				color: #000;
+				font-weight: 600;
+				transform: scale(1.15);
+			}
+			> .select_swtich::before {
+				width: 100%;
+			}
+		}
+		> .print_content_list{
+			flex: 1;
+			overflow: hidden;
+			> .content_item{
+				height: 100%;
+				margin-top: 1rem;
+			}
+		}
+	}
+</style>

src/component/DetailCopy/detailLeft/sketch.vue

@@ -1,10 +1,17 @@
 <template>
-    <div class="sketchLeft">
+    <div class="sketch">
 		<div class="detailText">Current Print</div>
 		<div class="select_sketch">
-			<img src="https://develop.aida.com.hk/img/aida_logo_centent.b8a50882.jpg" alt="">
+			<img :src="selectDetail.path" alt="">
 		</div>
 		<div class="switch_type_list">
+			<div
+				@click.stop="openCurrent()"
+				class="switch_type_item"
+				:class="[selectTitle == 'current' ? 'select_swtich' : '',]"
+			>
+				<span class="detailText">{{ $t('DesignDetailAlter.current') }}</span>
+			</div>
 			<div
 				@click.stop="openUpload()"
 				class="switch_type_item"
@@ -21,6 +28,9 @@
 			</div>
 		</div>
 		<div class="sketch_content_list">
+			<div class="content_item" v-show="selectTitle == 'current'">
+				<currentList ref="currentList" :catecoryList="sketchCatecoryList"></currentList>
+			</div>
 			<div class="content_item" v-show="selectTitle == 'upload'">
 				<uploadList :catecoryList="sketchCatecoryList"></uploadList>
 			</div>
@@ -28,9 +38,6 @@
 				<libraryList ref="libraryList" :catecoryList="sketchCatecoryList"></libraryList>
 			</div>
 		</div>
-        <div class="mark_loading" v-show="loadingShow">
-            <a-spin size="large" />
-        </div>
     </div>
     
 </template>
@@ -41,21 +48,21 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
-import sketchCategory from "@/component/HomePage/sketchCategory.vue";
-import libraryList from './libraryList.vue'
-import uploadList from './uploadList.vue'
+// import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+import libraryList from './module/libraryList.vue'
+import uploadList from './module/uploadList.vue'
+import currentList from './module/currentList.vue'
 export default defineComponent({
     components:{
+		currentList,
 		libraryList,
 		uploadList,
-		sketchCategory,
     },
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
-			selectTitle:'upload',
-			loadingShow:false,
-			isShowLoading:false,//懒加载，加载中
+			selectTitle:'current',
+			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			sketchCatecoryList:computed(()=>{
 				return store.state.Workspace.workspacePosition
 			})
@@ -68,6 +75,9 @@ export default defineComponent({
 		const getDetailListDom = reactive({
 			libraryList:null as any,
 		})
+		const openCurrent = ()=>{
+			detailData.selectTitle = 'current'
+		}
 		const openUpload = ()=>{
 			detailData.selectTitle = 'upload'
 		}
@@ -84,6 +94,7 @@ export default defineComponent({
 			...toRefs(getDetailListData),
 			...toRefs(getDetailListDom),
 
+			openCurrent,
 			openUpload,
 			openLibrary,
 			selectImgItem,
@@ -98,8 +109,9 @@ export default defineComponent({
 })
 </script>
 <style lang="less" scoped>
-    .sketchLeft{
-		width: 34rem;
+    .sketch{
+		// width: 34rem;
+		width: 100%;
 		height: 100%;
 		display: flex;
 		flex-direction: column;
@@ -125,12 +137,13 @@ export default defineComponent({
 		> .switch_type_list{
 			display: flex;
 			margin-bottom: 2.5rem;
-			> .switch_type_item:nth-child(1){
-				margin-right: 6.5rem;
+			> .switch_type_item:last-child{
+				margin-right: 0;
 			}
 			> .switch_type_item{
 				position: relative;
 				cursor: pointer;
+				margin-right: 6.5rem;
 			}
 			> .switch_type_item::before {
                     position: absolute;

src/component/DetailCopy/detailRight/elementType.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="sketchType">
+    </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:{
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+		const detailData = reactive({
+			
+		})
+		const getDetailListData = reactive({
+		
+		})
+		const getDetailListDom = reactive({
+		})
+        return{
+			...toRefs(detailData),
+			...toRefs(getDetailListData),
+			...toRefs(getDetailListDom),
+
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .sketchType{
+		
+	}
+</style>

src/component/DetailCopy/detailRight/index.vue

@@ -0,0 +1,107 @@
+<template>
+    <div class="detailRight">
+		<!-- <div class="detailText">Current Print</div>
+		<div class="select_sketch">
+			<img src="https://develop.aida.com.hk/img/aida_logo_centent.b8a50882.jpg" alt="">
+		</div> -->
+		<sketchType v-if="currentDetailType === 'sketch'"></sketchType>
+		<printType v-if="currentDetailType === 'print'"></printType>
+		<elementType v-if="currentDetailType === 'element'"></elementType>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,provide,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { useStore } from "vuex";
+import sketchType from './sketchType.vue'
+import printType from './printType.vue'
+import elementType from './elementType.vue'
+export default defineComponent({
+    components:{
+		sketchType,printType,elementType
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+		const detailData = reactive({
+			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+			currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
+		})
+        return{
+			...toRefs(detailData),
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .detailRight{
+		height: 100%;
+		display: flex;
+		flex: 1;
+		overflow: hidden;
+		> .detailText{
+			margin-bottom: 1rem;
+		}
+		> .select_sketch{
+			width: 100%;
+			height: 23.5rem;
+			padding: 1rem 0;
+			text-align: center;
+			border-radius: .5rem;
+			// border: 1px dashed #202020;
+			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);
+			margin-bottom: 3rem;
+			> img{
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+			}
+		}
+		> .switch_type_list{
+			display: flex;
+			margin-bottom: 2.5rem;
+			> .switch_type_item:nth-child(1){
+				margin-right: 6.5rem;
+			}
+			> .switch_type_item{
+				position: relative;
+				cursor: pointer;
+			}
+			> .switch_type_item::before {
+                    position: absolute;
+                    content: "";
+                    display: block;
+                    background: #000;
+                    height: calc(.4rem*1.2);
+                    left: 50%;
+                    transform: translateX(-50%);
+                    bottom: -.5rem;
+                    width: 0px;
+                    transition: 0.3s all;
+                }
+			> .select_swtich {
+				color: #000;
+				font-weight: 600;
+				transform: scale(1.15);
+			}
+			> .select_swtich::before {
+				width: 100%;
+			}
+		}
+		> .sketch_content_list{
+			flex: 1;
+			overflow: hidden;
+			> .content_item{
+				height: 100%;
+				margin-top: 1rem;
+			}
+		}
+	}
+</style>

src/component/DetailCopy/detailRight/printType.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="printType">
+		<div class="detailText">New Print</div>
+		<div class="printContent">
+			<div>
+				<div class="content_img_item" v-for="(file) in selectList" :key="file.id">
+					<div class="content_img_item_block" :class="{active:file?.checked}">
+						<img v-lazy="file.path" :key="file.path" :alt="file.name"/>
+						<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="selectList" :item="file" :isSpread="true"></sketchCategory>
+					</div>
+				</div>
+				<div v-if="selectDetail?.newDetail?.[currentDetailType]" class="content_img_item" v-for="(file) in selectDetail.newDetail?.[currentDetailType]" :key="file.id">
+					<div class="content_img_item_block" :class="{active:file?.checked}">
+						<img v-lazy="file.url" :key="file.paurlth" :alt="file.name"/>
+						<sketchCategory :disignTypeList="sketchCatecoryList" :generateList="selectDetail.newDetail?.[currentDetailType]" :item="file" :isSpread="true"></sketchCategory>
+					</div>
+				</div>
+				<!-- <img v-for="item in selectList" :src="item.path" alt="">
+				<img v-for="item in selectDetail?.newDetail?.[currentDetailType]?selectDetail.newDetail?.[currentDetailType]:[]" :src="item?.url" :key="item" :title="selectDetail.type" alt=""> -->
+			</div>
+		</div>
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,watch,nextTick,createVNode,toRefs, reactive} from 'vue'
+// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import sketchCategory from "@/component/HomePage/sketchCategory.vue";
+export default defineComponent({
+    components:{
+		sketchCategory
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+		const detailData = reactive({
+			sketchCatecoryList:computed(()=>{
+				return store.state.UserHabit.printType
+			}),
+		    selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+		    currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
+			selectList:[],
+		})
+		watch(()=>detailData.selectDetail?.printObject?.prints,(newVal,oldVal)=>{
+			detailData.selectList = newVal.reduce((acc:any, curr:any) => {
+				if (!acc.some((item:any) => item.id === curr.id)) {
+					acc.push(curr);
+				}
+				return acc;
+			}, []);
+		},{immediate: true})
+		const getDetailListData = reactive({
+			
+		})
+		const getDetailListDom = reactive({
+		})
+        return{
+			...toRefs(detailData),
+			...toRefs(getDetailListData),
+			...toRefs(getDetailListDom),
+
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .printType{
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		> .detailText{
+			margin-bottom: 1rem;
+		}
+		> .printContent{
+			flex: 1;
+			overflow: hidden;
+			> div{
+				max-height: 100%;
+				display: flex;
+				flex-wrap: wrap;
+				overflow-y: auto;
+				// display: flex;
+				// flex-wrap: wrap;
+				> .content_img_item{
+					margin: 1rem;
+					> .content_img_item_block{
+						width: 30rem;
+						height: 30rem;
+						position: relative;
+
+						> img{
+							cursor: pointer;
+							width: 100%;
+							height: 100%;
+							object-fit: contain;
+						}
+					}
+				}
+			}
+			
+		}
+	}
+</style>

src/component/DetailCopy/detailRight/sketchType.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="sketchType">
+		<div class="detailText">New Apparel</div>
+		<div class="sketchContent">
+			<img :src="selectDetail?.newDetail?.[currentDetailType]?selectDetail.newDetail?.[currentDetailType].url:selectDetail.path" :title="selectDetail.type" alt="">
+		</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:{
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+		const detailData = reactive({
+		    selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+		    currentDetailType:computed(()=>store.state.DesignDetailCopy.currentDetailType),
+		})
+		const getDetailListData = reactive({
+		
+		})
+		const getDetailListDom = reactive({
+		})
+        return{
+			...toRefs(detailData),
+			...toRefs(getDetailListData),
+			...toRefs(getDetailListDom),
+
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .sketchType{
+		margin: auto 0;
+		width: 100%;
+		> .detailText{
+			margin-bottom: 1rem;
+		}
+		> .sketchContent{
+			> img{
+				width: 100%;
+				object-fit: contain;
+				max-height: 60rem;
+			}
+		}
+	}
+</style>

src/component/DetailCopy/model/index.vue

@@ -1,21 +1,25 @@
 <template>
     <div class="modelindex">
-		<div class="detail_btn">
-			<!-- 全屏 --> 
-			<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
-			<!-- 编辑 -->
-			<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail(3)"></i>
-			<!-- <i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
-			<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i> -->
+		<div class="modelindex_left">
+			<modelNav></modelNav>
+		</div>
+		<div class="modelindex_right">
+			<div class="detail_btn">
+				<!-- 全屏 --> 
+				<i class="fi fi-bs-expand-arrows-alt" @click="showDesignImgDetail(2)"></i>
+				<!-- 编辑 -->
+				<i class="fi fi-rr-edit" :title="$t('DesignDetail.editTitle')" @click="showDesignImgDetail(3)"></i>
+				<!-- <i v-show="!body && !deleteShow" :title="$t('DesignDetail.DetailTitle')" class="fi fi-rr-trash" @click="deleteNav(0)"></i>
+				<i v-show="!body && deleteShow" class="fi fi-br-check" @click="deleteNav(1)"></i> -->
 
-			<!-- 层 -->
-			<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="mouseupDesignImg"></i> -->
-			<!-- <i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
-			<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i> -->
-		</div>
-		<div>
-			<position></position>
+				<!-- 层 -->
+				<!-- <i class="fi fi-rr-copy" :title="$t('DesignDetail.compareTitle')" @mousedown="mousedownDesignImg" @mouseup="mouseupDesignImg" @touchstart="mousedownDesignImg" @touchend="mouseupDesignImg"></i> -->
+				<!-- <i v-show="revocationShow>1" class="icon iconfont icon-chehui" @click="revocation"></i>
+				<i v-show="oppositeRevocationShow>=1" class="icon iconfont icon-fanchehui" @click="oppositeRevocation"></i> -->
+			</div>
+			<position ref="position"></position>
 		</div>
+		
     </div>
 </template>
 <script lang="ts">
@@ -26,9 +30,10 @@ import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 import position from './modelPosition.vue';
+import modelNav from './modelNav.vue';
 export default defineComponent({
     components:{
-		position,
+		position,modelNav
     },
     setup(props,{emit}) {
         const store = useStore();
@@ -39,12 +44,15 @@ export default defineComponent({
 			total:0,
 			pageSize:10,
 			currentPage:1,
-			designDetail:store.state.DesignDetailCopy.designDetail,
+			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
 		})
 		const getDetailListDom = reactive({
 			libraryList:null as any,
+			position:null as any,
 		})
-		
+		const getSubmitData = (value:any)=>{
+			return getDetailListDom.position.getSubmitData(value)
+		}
 		const showDesignImgDetail = ()=>{
 
 		}
@@ -55,6 +63,7 @@ export default defineComponent({
 			...toRefs(detailData),
 			...toRefs(getDetailListData),
 			...toRefs(getDetailListDom),
+			getSubmitData,
 			showDesignImgDetail,
 			deleteNav,
         }
@@ -69,11 +78,33 @@ export default defineComponent({
 </script>
 <style lang="less" scoped>
     .modelindex{
-		width: 80rem;
+		width: 100%;
 		height: 100%;
 		display: flex;
-		flex-direction: column;
 		padding-top: 3rem;
+		flex: 1;
 		overflow: hidden;
+		.modelindex_right,.modelindex_left{
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			justify-content: center;
+		}
+		> .modelindex_right{
+			flex: 1;
+			overflow: hidden;
+			> .detail_btn{
+				width: 100%;
+				display: flex;
+				justify-content: space-between;
+				> i{
+					font-size: 2rem;
+				}
+			}
+		}
+		.modelindex_left{
+			justify-content: center;
+		}
 	}
 </style>

src/component/DetailCopy/model/modelNav.vue

@@ -0,0 +1,82 @@
+<template>
+    <div class="modelNav">
+		<div class="modelNav_item" v-for="item,index in designvDetail.clothes" :class="{active:(selectDetail && item.id == selectDetail.id)}" @click="selectDetailItem(item,index)">
+			<img :src="item.path" alt="">
+		</div>
+		<div class="modelNav_item add" @click="">
+			+
+		</div>
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,ref,inject,watch,onBeforeUnmount,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 position from './modelPosition.vue';
+export default defineComponent({
+    components:{
+		position,
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+		const detailData = reactive({
+			selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+			frontBack_:computed(()=>store.state.DesignDetailCopy.frontBack),
+			designvDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+			frontBack:{} as any,
+		})
+		watch(()=>detailData.frontBack_,(newFollowVue)=>{
+			detailData.frontBack = newFollowVue
+		})
+		const selectDetailItem = (item:any,index:number)=>{
+			store.commit('DesignDetailCopy/setDesignColthes',item.id)
+		}
+		// onBeforeUnmount(()=>{
+		// 	detailData.selectIndex = -1
+		// })
+        return{
+			...toRefs(detailData),
+			selectDetailItem,
+        }
+    },
+
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .modelNav{
+		> .modelNav_item{
+			width: 12rem;
+			height: 12rem;
+			padding: 1rem;
+			border-radius: 2rem;
+			border: 2px solid #B4B4B4;
+			margin-bottom: 1.5rem;
+			cursor: pointer;
+			&:last-child{
+			    margin-bottom: 0;
+			}
+			&.active{
+				border: 3px solid #000;
+			}
+			> img{
+				width: 100%;
+				height: 100%;
+				object-fit: contain;
+			}
+			&.add{
+				font-size: 8rem;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+		}
+	}
+</style>

src/component/DetailCopy/model/modelPosition.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="molepositon">
-		<div class="designOpenrtion_imgMask" :style="frontBack?.body?.style">
+		<div class="designOpenrtion_imgMask" v-if="frontBack?.body" :style="frontBack?.body?.style">
 			<div class="designOpenrtion_print" v-for="item,index in frontBack.back" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="frontBack.front[index].style">
 				<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
 			</div>
-			<img class="perview_img" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'"  v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
+			<img class="perview_img" v-detailBody="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'"  v-lazy="frontBack?.body?.layersObject?.[0].imageUrl || ''">
 			<div class="detail_modal_item_front" v-for="item,index in frontBack.front"  @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)"  :style="item.style">
 				<img :src="item.imageUrl" alt="">
 			</div>
@@ -14,10 +14,12 @@
 					<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
 					<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
 					<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
-					<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
 				</ul>
 			</div>
 		</div>
+		<div class="designOpenrtion_imgMask" v-else>
+			<img src="" alt="">
+		</div>
     </div>
 </template>
 <script lang="ts">
@@ -28,39 +30,45 @@ import { Https } from "@/tool/https";
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 import { getMousePosition } from "@/tool/mdEvent";
+import newFollowVue from '@/component/Account/message/newFollow.vue';
 export default defineComponent({
     components:{
     },
     setup(props,{emit}) {
         const store = useStore();
 		const detailData = reactive({
-			frontBack:{
-				front:{},
-				back:{},
-				body:{},
-			},
-			frontBackc:store.state.DesignDetailModule.designItemDetail,
-			designDetail:store.state.DesignDetailCopy.designDetail,
+			frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
+			designDetail:computed(()=>store.state.DesignDetailCopy.designDetail),
+		})
+		const selectItem = reactive({
+		    selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+		    imgDomIndex:-1,
+		    printZIndex:store.state.DesignDetailCopy.printZIndex,
+			imgDom:null as any,
+			direction:'',
+		})
+		watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
+			if(newValue.id == oldValue?.id)return
+			selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
 		})
-		
 		const getDetailListDom = reactive({
 			libraryList:null as any,
 		})
 
 		//设置尺寸
 		const itemSizeMousedown = (direction:any,event:any)=>{
-			// this.direction = direction
-			// this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
-			// this.frontBack.front[this.imgDomIndex].designOpenrtionBtn = true
-			// let imgDomWH = this.imgDom.getBoundingClientRect()
-			// let li = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_btn_top")[0].offsetWidth/2
-			// if(this.direction == 'right' || this.direction == 'bottom'){
-			// 	this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
-			// 	this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
-			// }else{
-			// 	this.frontBack.front[this.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
-			// 	this.frontBack.front[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
-			// }
+			selectItem.direction = direction
+			selectItem.imgDom = document.getElementsByClassName('molepositon')[0].getElementsByClassName("detail_modal_item_front")[selectItem.imgDomIndex]
+			detailData.frontBack.front[selectItem.imgDomIndex].designOpenrtionBtn = true
+			let imgDomWH = selectItem.imgDom.getBoundingClientRect()
+			let li = (document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_btn_top")[0] as any).offsetWidth/2
+			if(selectItem.direction == 'right' || selectItem.direction == 'bottom'){
+				detailData.frontBack.front[selectItem.imgDomIndex].centers.left = imgDomWH.x+event.offsetX-li
+				detailData.frontBack.front[selectItem.imgDomIndex].centers.top = imgDomWH.y+event.offsetY-li
+			}else{
+				detailData.frontBack.front[selectItem.imgDomIndex].centers.left = imgDomWH.x+event.offsetX+imgDomWH.width-li
+				detailData.frontBack.front[selectItem.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
+			}
 			
 			document.addEventListener('mousemove', sizeMouseMove);
 			document.addEventListener('touchmove', sizeTouchmove);
@@ -76,60 +84,60 @@ export default defineComponent({
 			sizeMouseMoveOperation(e)
 		}
 		const sizeMouseup = (e:any)=>{
-			// this.frontBack.front[this.imgDomIndex].style={
-			// 	right:'auto',
-			// 	left:this.imgDom.offsetLeft+'px',
-			// 	bottom:'auto',
-			// 	top:this.imgDom.offsetTop+'px',
-			// 	height:this.imgDom.offsetHeight+'px',
-			// 	width:this.imgDom.offsetWidth+'px',
-			// 	zIndex:this.printZIndex
-			// }
-			// this.frontBack.back[this.imgDomIndex].style.zIndex = this.printZIndex
+			detailData.frontBack.front[selectItem.imgDomIndex].style={
+				right:'auto',
+				left:selectItem.imgDom.offsetLeft+'px',
+				bottom:'auto',
+				top:selectItem.imgDom.offsetTop+'px',
+				height:selectItem.imgDom.offsetHeight+'px',
+				width:selectItem.imgDom.offsetWidth+'px',
+				zIndex:selectItem.printZIndex
+			}
+			detailData.frontBack.back[selectItem.imgDomIndex].style.zIndex = selectItem.printZIndex
 			document.removeEventListener('mousemove',sizeMouseMove)
 			document.removeEventListener('touchmove',sizeTouchmove)
 			document.removeEventListener('mouseup',sizeMouseup) 
 			document.removeEventListener('touchend',sizeMouseup) 
 		}
 		const sizeMouseMoveOperation = (e:any)=> {
-			// let imgDomWH = this.imgDom.getBoundingClientRect()
-			// let parentNode =this.imgDom.parentNode
-			// let width = imgDomWH.width
-			// let height = imgDomWH.height
-			// let w,h
-			// let num = height/width
-			// //判断移动四个边
-			// if(this.direction == 'right'){
-			// 	w = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)
-			// 	h = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)*num
-			// 	width = w+'px'
-			// 	// height = w*num+'px'
-			// }else if(this.direction == 'top'){
-			// 	num = width/height
-			// 	this.frontBack.front[this.imgDomIndex].style.top = 'auto'
-			// 	// this.printStyleList[this.imgDomIndex].style.left = 'auto'
-			// 	this.frontBack.front[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
-			// 	w = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)*num
-			// 	h = (this.frontBack.front[this.imgDomIndex].centers.top - e.clientY)
+			let imgDomWH = selectItem.imgDom.getBoundingClientRect()
+			let parentNode =selectItem.imgDom.parentNode
+			let width = imgDomWH.width
+			let height = imgDomWH.height
+			let w,h
+			let num = height/width
+			//判断移动四个边
+			if(selectItem.direction == 'right'){
+				w = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)
+				h = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)*num
+				width = w+'px'
+				// height = w*num+'px'
+			}else if(selectItem.direction == 'top'){
+				num = width/height
+				detailData.frontBack.front[selectItem.imgDomIndex].style.top = 'auto'
+				// this.printStyleList[selectItem.imgDomIndex].style.left = 'auto'
+				detailData.frontBack.front[selectItem.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - selectItem.imgDom.offsetTop+'px'
+				w = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)*num
+				h = (detailData.frontBack.front[selectItem.imgDomIndex].centers.top - e.clientY)
 				
-			// 	height = h+'px'
-			// 	// width = h*num+'px'
-			// }else if(this.direction == 'bottom'){
-			// 	num = width/height
-			// 	h = (e.clientY - this.frontBack.front[this.imgDomIndex].centers.top)
-			// 	height = h+'px'
-			// 	// width = h*num+'px'
-			// }else if(this.direction == 'left'){
-			// 	this.frontBack.front[this.imgDomIndex].style.left = 'auto'
-			// 	this.frontBack.front[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
-			// 	w = (this.frontBack.front[this.imgDomIndex].centers.left - e.clientX)
+				height = h+'px'
+				// width = h*num+'px'
+			}else if(selectItem.direction == 'bottom'){
+				num = width/height
+				h = (e.clientY - detailData.frontBack.front[selectItem.imgDomIndex].centers.top)
+				height = h+'px'
+				// width = h*num+'px'
+			}else if(selectItem.direction == 'left'){
+				detailData.frontBack.front[selectItem.imgDomIndex].style.left = 'auto'
+				detailData.frontBack.front[selectItem.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - selectItem.imgDom.offsetLeft+'px'
+				w = (detailData.frontBack.front[selectItem.imgDomIndex].centers.left - e.clientX)
 				
-			// 	width = w+'px'
-			// 	// height = w*num+'px'
-			// }
-			// //判断尺寸是否到边
-			// this.frontBack.front[this.imgDomIndex].style.width = width
-			// this.frontBack.front[this.imgDomIndex].style.height = height
+				width = w+'px'
+				// height = w*num+'px'
+			}
+			//判断尺寸是否到边
+			detailData.frontBack.front[selectItem.imgDomIndex].style.width = width
+			detailData.frontBack.front[selectItem.imgDomIndex].style.height = height
 		}
 		// 设置移动
 		const mouseMove = (event:any)=>{
@@ -147,52 +155,140 @@ export default defineComponent({
 			document.removeEventListener('touchend',mouseup) 
 		}
 		const mouseMoveOperation = (e:any)=>{
-		// 	let imgDomWH = this.imgDom.getBoundingClientRect()
-		// 	let parentNode = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
-		// 	let x = (e.clientX - this.frontBack.front[this.imgDomIndex].centers.left)+'px'
-		// 	let y = ( e.clientY - this.frontBack.front[this.imgDomIndex].centers.top)+'px'
-		// 	this.frontBack.front[this.imgDomIndex].style.left = x
-		// 	this.frontBack.front[this.imgDomIndex].style.top = y
+			let imgDomWH = selectItem.imgDom.getBoundingClientRect()
+			let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
+			let x = (e.clientX - detailData.frontBack.front[selectItem.imgDomIndex].centers.left)+'px'
+			let y = ( e.clientY - detailData.frontBack.front[selectItem.imgDomIndex].centers.top)+'px'
+			detailData.frontBack.front[selectItem.imgDomIndex].style.left = x
+			detailData.frontBack.front[selectItem.imgDomIndex].style.top = y
 		}
-
-		const itemMoveMousedown = (index:any,e:any)=>{
-			// this.imgDomIndex = index
-			// this.frontBack.front.forEach((v)=>{
-			// 	v.designOpenrtionBtn = false
+		const clothesOpenActive = (index:number)=>{
+			// this.designItemDetail.clothes.forEach((item)=>{
+			// 	item.clothesOpenItem = false
 			// })
-			// this.clothesOpenActive(index)
-			// let event = e||window.event
-			// this.imgDom = document.getElementsByClassName('design_compile_content')[0].getElementsByClassName("detail_modal_item_front")[this.imgDomIndex]
-			// this.frontBack.front[index].designOpenrtionBtn = true
-			// this.frontBack.front[index].style.zIndex = this.printZIndex++
-			// this.frontBack.back[index].style.zIndex = this.printZIndex
-			// let imgDomWH = this.imgDom.getBoundingClientRect()
-			// let left = Number(this.frontBack.front[index].style.left.replace(/px/g,''))
-			// let top = Number(this.frontBack.front[index].style.top.replace(/px/g,''))
-			// this.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left
-			// this.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
+			// if(index != -1){
+			// 	this.designItemDetail.clothes[index].clothesOpenItem = true
+			// }
+		}
+		const itemMoveMousedown = (index:any,e:any)=>{
+			store.commit('DesignDetailCopy/setDesignColthes',detailData.frontBack.front[index].id)
+			selectItem.imgDomIndex = index
+			detailData.frontBack.front.forEach((v:any)=>{
+				v.designOpenrtionBtn = false
+			})
+			clothesOpenActive(index)
+			let event = e||window.event
+			selectItem.imgDom = document.getElementsByClassName('molepositon')[0].getElementsByClassName("detail_modal_item_front")[selectItem.imgDomIndex]
+			detailData.frontBack.front[index].designOpenrtionBtn = true
+			detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
+			detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
+			let imgDomWH = selectItem.imgDom.getBoundingClientRect()
+			let left = Number(detailData.frontBack.front[index].style.left.replace(/px/g,''))
+			let top = Number(detailData.frontBack.front[index].style.top.replace(/px/g,''))
+			detailData.frontBack.front[index].centers.left = imgDomWH.x+event.offsetX-left
+			detailData.frontBack.front[index].centers.top = imgDomWH.y+event.offsetY-top
+
 			document.addEventListener('mousemove', mouseMove);
 			document.addEventListener('touchmove', touchmove);
 			document.addEventListener('mouseup', mouseup);
 			document.addEventListener('touchend', mouseup);
 		}
-		const showDesignImgDetail = ()=>{
-
+		const sort = (arr:any)=>{
+			arr.sort((a:any, b:any) => {
+				var a_num = a.style.zIndex;
+				var b_num = b.style.zIndex;
+				return a_num - b_num;
+			});
+			return arr
+		}
+		const getSubmitData = (value:any)=>{
+			let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
+			let ratio = detailData.frontBack.body.layersObject[0].imageSize[0]/parentNode.width
+			let arr:any = sort(detailData.frontBack.front)
+			// let arr:any = sort(JSON.parse(JSON.stringify(detailData.frontBack.front)))
+			let num = 10
+			arr.forEach((item:any)=>{
+				item.priority = num++
+			})
+			let data:any = {
+				scale:[],
+				offset:[],
+				priority:-1,
+				maskUrl:'',
+				maskMinioUrl:'',
+			}
+			for (let index = 0; index < arr.length; index++) {
+				if(value.id == arr[index].id){
+					let y = ((arr[index]?.style?.top.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[0])
+					let x = ((arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0) as any - arr[index]?.position[1])
+					let scaleWidth = arr[index]?.imageSize?Number(((arr[index]?.style?.width.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[0]/arr[index].scale[0])).toFixed(2)):1
+					let scaleHeight = arr[index]?.imageSize?Number(((arr[index]?.style?.height.replace(/px/g,'')*ratio)/(arr[index]?.imageSize[1]/arr[index].scale[1])).toFixed(2)):1
+					// let widthScale = (arr[index].style.width.replace(/px/g,'')/arr[index].style.height.replace(/px/g,'')).toFixed(2)
+					data.scale = [scaleWidth,scaleHeight]
+					let top = y == 0 ? value.layersObject[0].offset[1]:y+value.layersObject[0].offset[1]
+					let left = x == 0 ? value.layersObject[0].offset[0]:x+value.layersObject[0].offset[0]
+					data.offset = [left,top]
+					data.maskUrl = arr[index].maskUrl
+					data.maskMinioUrl = arr[index].maskMinioUrl
+					// data.priority = arr[index].style.zIndex
+					data.priority = arr[index].priority
+					arr[index].similarity = true
+					// item.offset = [(arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
+					break
+				}
+			}
+			
+			return data
 		}
 		const deleteNav = ()=>{
 
 		}
+		const setpitch = (item:any,index:any)=>{
+			detailData.frontBack.front.forEach((v:any)=>{
+				v.designOpenrtionBtn = false
+			})
+			detailData.frontBack.front[index].designOpenrtionBtn = true
+			detailData.frontBack.front[index].style.zIndex = selectItem.printZIndex++
+			detailData.frontBack.back[index].style.zIndex = selectItem.printZIndex
+			clothesOpenActive(index)
+		}
         return{
 			...toRefs(detailData),
 			...toRefs(getDetailListDom),
 			
 			itemSizeMousedown,
 			itemMoveMousedown,
-			showDesignImgDetail,
 			deleteNav,
+			setpitch,
+			getSubmitData,
+			getMousePosition,
         }
     },
+	directives:{
+		detailBody:{
+			mounted (el,data:any) {
+				let sacle = 0
+				const img = new Image();
+				img.onload = () => {
+					// resolve(img)
+					sacle = el.parentNode.offsetWidth / img.width
+					data.instance.frontBack.front.forEach((item:any,index:number) => {
+						for (const key in item.style) {
+							if(key == 'zIndex')return
+							item.style[key] = item.style[key]*sacle+'px'
+						}
+						for (const key in data.instance.frontBack.back[index].style) {
+							if(key == 'zIndex')return
+							data.instance.frontBack.back[index].style[key] = data.instance.frontBack.back[index].style[key]*sacle+'px'
+						}
+					});
 
+					console.log(el.parentNode.offsetWidth);
+				};
+				img.src = data.value;
+			}
+		}
+	},
 	provide() {
 		return {
 		}
@@ -202,27 +298,133 @@ export default defineComponent({
 </script>
 <style lang="less" scoped>
     .molepositon{
-		width: 80rem;
-		height: 100%;
+		width: 30rem;
+		height: 80rem;
 		display: flex;
 		flex-direction: column;
+		// margin: auto 0;
 		padding-top: 3rem;
 		> .designOpenrtion_imgMask{
 			width: auto;
 			height: auto;
 			position: relative;
-			height: calc(100% - 1.2rem - 4.8rem - 20%);
+			height: 100%;
 			// overflow: hidden;
 			>img{
 				z-index: 2;
 				position: relative;
+				width: 100%;
+				// height: 100%;
+				object-fit: contain;
 			}
 			>div{
 				position: absolute;
-				width: 100%;
-				height: 100%;
 				top: 0;
 			}
+			.detail_modal_item_front,.designOpenrtion_print{
+				z-index: 2;
+				img{
+					width: 100%;
+					height: 100%;
+					float: left;
+					user-select:none;
+					-webkit-user-drag: none;
+				}
+				.modal_imgItem{
+					position: absolute;
+					overflow: hidden;
+					top: 0;
+					
+				}
+			}
+			.designOpenrtion_print{
+				z-index: 1 !important;
+			}
+			> .designOpenrtion_btn{
+				z-index: 9999;
+				ul{
+					list-style: none;
+					// width: 100%;
+					// height: 100%;
+					position: absolute;
+					top: 0;
+					left: 0;
+					box-sizing: border-box;
+					border: 2px solid rgb(20, 188, 255);
+					padding: 0;
+					-webkit-user-drag: none;
+					user-select:none;
+					opacity: 0;
+					margin: 0;
+					
+					li{
+						cursor: pointer;
+						// border-radius: 50%;
+						width: calc(2rem*1.2);
+						height: calc(2rem*1.2);
+						background-color: rgb(20, 188, 255);
+						position: absolute;
+						pointer-events: none;
+					}
+					&.active{
+						opacity: 1;
+						z-index: 999 !important;
+						li{
+							pointer-events: auto;
+						}
+					}
+					.designOpenrtion_btn_top,.designOpenrtion_btn_bottom{
+						left: 50%;
+						transform: translate(-50%,-50%) ;
+						cursor: n-resize;
+					}
+					.designOpenrtion_btn_top{
+						top: 0;
+					}
+					.designOpenrtion_btn_bottom{
+						top: 100%;
+					}
+					.designOpenrtion_btn_left,.designOpenrtion_btn_right{
+						top: 50%;
+						transform: translate(-50%,-50%) ;
+						cursor: e-resize;
+					}
+					.designOpenrtion_btn_left{
+						left: 0;
+					}
+					.designOpenrtion_btn_right{
+						left: 100%;
+					}
+					.designOpenrtion_rotote{
+						top: 50%;
+						left: 50%;
+						transform: translate(-50%,-50%);
+						width: 0;
+						height: 0;
+					}
+					.designOpenrtion_rotote::after{
+						position: absolute;
+						content: "";
+						background-color: #14bcff;
+						width: 2px;
+						height: 30px;
+						left: 50%;
+						bottom: 0;
+						transform: translateX(-50%);
+					}
+					.designOpenrtion_rotote::before{
+						position: absolute;
+						content: "";
+						background-color: #14bcff;
+						top: calc(50% - 30px);
+						left: 50%;
+						transform: translate(-50%,-50%) ;
+						width: calc(1.5rem*1.2);
+						height: calc(1.5rem*1.2);
+						border-radius: 50%;
+					}
+				}
+			}
 		}
 	}
 </style>

src/component/HomePage/collectionModal.vue

@@ -148,7 +148,7 @@ export default defineComponent({
         }
     },
     methods:{
-        nextStep(){
+        async nextStep(){
 			let colorBoards = this.store.state.UploadFilesModule.colorBoards
 			if(this.collectionStep == 1){
 				let disposeMoodboard = this.store.state.UploadFilesModule.disposeMoodboard
@@ -165,11 +165,12 @@ export default defineComponent({
 			
 			if(this.collectionStep == 3){
 				if(colorBoards.length >= 1){
-					colorBoards.forEach((colorItem:any) => {
-						if(colorItem.gradient){
-							colorItem.gradient.colorImg = setGradual(colorItem.gradient,320,700)
+					for (let index = 0; index < colorBoards.length; index++) {
+						if(colorBoards[index].gradient){
+							colorBoards[index].gradient.colorImg = await setGradual(colorBoards[index].gradient,320,700)
 						}
-					});
+						
+					}
 					this.store.commit('setColorboardList',colorBoards)
 				}else{
 					message.info(this.$t('collectionModal.jsContent3'))

src/component/HomePage/sketchCategory.vue

@@ -51,7 +51,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent,ref ,nextTick, computed,watch} from "vue";  
+import { defineComponent,ref ,nextTick, computed,watch, onMounted} from "vue";  
 import { Https } from "@/tool/https";
 import { openGuide,driverObj__ } from "@/tool/guide";
 export default defineComponent({
@@ -134,6 +134,17 @@ export default defineComponent({
             ).catch((res)=>{
             });
 		}
+		onMounted(()=>{
+			if(!props.item.category){
+				props.disignTypeList.forEach((item:any) => {
+					if(item.value == props.item.level2Type){
+						props.item.category = item.name
+						props.item.categoryValue = item.value
+					}
+				});
+			}
+				
+		})
         return {
             showFileCategory,
 			selectFileCategory,