From 7ab32c9c775e97740dac3106fe0182a8f79fd11a Mon Sep 17 00:00:00 2001
From: X1627315083 <1627315083@qq.com>
Date: Mon, 23 Jun 2025 09:27:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=B9=B6=E7=94=BB=E5=B8=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../commands/ObjectLayerCommands.js           |  50 ++++
 src/component/Canvas/CanvasEditor/index.vue   |  47 ++--
 .../CanvasEditor/managers/CanvasManager.js    |   5 +-
 src/component/DetailCopy/canvas/index.vue     | 100 +++++--
 src/component/DetailCopy/canvas/index1.vue    | 243 ++++++++++++++++++
 .../detailLeft/module/selectList.vue          |   8 +-
 .../detailLeft/module/uploadList.vue          |   1 -
 .../detailLeft/module/uploadSegmentation.vue  |  10 +-
 src/component/home/design/index.vue           |   7 +
 src/component/home/design/tools.vue           |  23 +-
 .../tools/deReconstruction/canvas/index.vue   |  43 +++-
 .../home/tools/deReconstruction/index.vue     |   5 +-
 src/component/modules/generalMiniCanvas.vue   |  30 ++-
 src/views/HomeMain.vue                        |   4 +
 14 files changed, 518 insertions(+), 58 deletions(-)
 create mode 100644 src/component/DetailCopy/canvas/index1.vue

diff --git a/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js b/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js
index ad082a9a..da61fba7 100644
--- a/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js
+++ b/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js
@@ -480,6 +480,12 @@ export class ChangeFixedImageCommand extends Command {
     this.position.x = options.left || this.canvas.width / 2;
     this.position.y = options.top || this.canvas.height / 2;
 
+    this.canvasWidth = options?.canvasWidth?.value || this.canvas.width;
+    this.canvasHeight = options?.canvasHeight?.value || this.canvas.height;
+
+    // 底图加载方式   1.平铺   2.拉伸   3.拉伸平铺  4.拉伸平铺并裁剪  5.包含
+    this.imageMode = options?.imageMode || ""; // 默认 contains, stretch,tile， stretchTile, stretchTileCrop
+
     // 用于回滚的状态
     this.previousImage = null;
     this.previousTransform = null;
@@ -679,6 +685,7 @@ export class ChangeFixedImageCommand extends Command {
   async applyImageToLayer(newImage) {
     await optimizeCanvasRendering(this.canvas, async () => {
       // 设置基本属性
+
       newImage.set({
         id: this.targetLayer?.fabricObject?.id || this.newObjectId,
         layerId: this.targetLayer.id,
@@ -718,6 +725,49 @@ export class ChangeFixedImageCommand extends Command {
         });
       }
 
+      // 如果是包含  则需要根据图像模式调整大小
+      switch (this.imageMode) {
+        case "stretch":
+          // 拉伸模式 - 填充整个画布
+          newImage.scaleToWidth(this.canvasWidth);
+          newImage.scaleToHeight(this.canvasHeight);
+          break;
+        case "tile":
+          // 平铺模式 - 保持原始大小
+          newImage.scaleX = 1;
+          newImage.scaleY = 1;
+          break;
+        case "stretchTile":
+          // 拉伸平铺模式 - 填充整个画布，但保持宽高比
+          newImage.scaleToWidth(this.canvasWidth);
+          newImage.scaleToHeight(this.canvasHeight);
+          break;
+        case "stretchTileCrop":
+          // 拉伸平铺并裁剪模式 - 填充整个画布，可能
+          // 会裁剪图像以适应画布
+          newImage.scaleToWidth(this.canvasWidth);
+          newImage.scaleToHeight(this.canvasHeight);
+          // 这里可以添加裁剪逻辑，如果需要的话
+          // 例如使用fabric.Image.clipPath来裁剪图像
+          break;
+        case "contains":
+          // 包含模式 - 保证图像在画布内完整显示
+          // 既要考虑画布的宽高比，也要考虑图像的宽高比
+          // 图片缩放后要保证最长边能完全显示在画布内
+          const canvasAspect = this.canvasWidth / this.canvasHeight;
+          const imageAspect = newImage.width / newImage.height;
+          // 保证图像在画布内完整显示 - 既要考虑画布的宽高比，也要考虑图像的宽高比
+          // 图片缩放后要保证最长边能完全显示在画布内
+          if (imageAspect > canvasAspect) {
+            // 图像更宽
+            newImage.scaleToWidth(this.canvasWidth);
+          } else {
+            // 图像更高
+            newImage.scaleToHeight(this.canvasHeight);
+          }
+          break;
+      }
+
       // 使用帮助函数在指定z-index位置插入新图像
       if (this.previousZIndex !== undefined && this.previousZIndex >= 0) {
         const insertSuccess = insertObjectAtZIndex(
diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue
index d84e52f6..8aa22502 100644
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -78,10 +78,10 @@ const imageUploadRef = ref(null);
 const currentZoom = ref(100);
 
 // 画布设置
-const canvasWidth = ref(CanvasConfig.width);
-const canvasHeight = ref(CanvasConfig.height);
-const canvasColor = ref(CanvasConfig.backgroundColor);
-const layerWidth = ref(CanvasConfig.layerWidth);
+const canvasWidth = ref(props.config.width);
+const canvasHeight = ref(props.config.height);
+const canvasColor = ref(props.config.backgroundColor);
+// const layerWidth = ref(CanvasConfig.layerWidth);
 const brushSize = ref(CanvasConfig.brushSize); // 画笔大小
 const canvasManagerLoaded = ref(false); //  画布是否加载完成
 
@@ -315,29 +315,26 @@ onMounted(async () => {
       }
     }
 
-    // 如果初始化有默认底图，设置底图 - 红绿图模式不通过初始化重置底图了
-    if (!isRedGreenMode.value && props.clothingImageUrl) {
-      nextTick(() => {
-        setTimeout(() => {
-          try {
-            canvasManager?.changeFixedImage?.(props.clothingImageUrl, {
-              undoable: false, // 不可撤销操作
-              ...(props?.clothingImageOpts || {}),
-            });
-          } catch (error) {
-            console.error("更换底图失败:", error);
-          }
-        }, 92); // 延迟 确保更新底图完成
-      });
-
-      this.canvasManager?.centerBackgroundLayer?.(
-        this.canvas.width,
-        this.canvas.height
-      );
-    }
-
     // 初始设置
     handleWindowResize(); // 设置画布大小
+  } else if (!isRedGreenMode.value && props.clothingImageUrl) {
+    nextTick(() => {
+      setTimeout(() => {
+        try {
+          canvasManager?.changeFixedImage?.(props.clothingImageUrl, {
+            undoable: false, // 不可撤销操作
+            ...(props?.clothingImageOpts || {}),
+          });
+        } catch (error) {
+          console.error("更换底图失败:", error);
+        }
+      }, 92); // 延迟 确保更新底图完成
+    });
+
+    canvasManager?.centerBackgroundLayer?.(
+      canvasManager.canvas.width,
+      canvasManager.canvas.height
+    );
   }
 });
 
diff --git a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
index 3cf78b26..89db592f 100644
--- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
+++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js
@@ -659,12 +659,15 @@ export class CanvasManager {
       console.error("图层管理器未设置，无法更改固定图层图片");
       return;
     }
+
     const command = new ChangeFixedImageCommand({
       canvas: this.canvas,
       layerManager: this.layerManager,
       imageUrl: imageUrl,
       targetLayerType: options.targetLayerType || "fixed", // background/fixed
-      options: options,
+      canvasWidth: this.canvasWidth,
+      canvasHeight: this.canvasHeight,
+      ...options,
     });
 
     command.undoable =
diff --git a/src/component/DetailCopy/canvas/index.vue b/src/component/DetailCopy/canvas/index.vue
index b715a5cb..0be4a02b 100644
--- a/src/component/DetailCopy/canvas/index.vue
+++ b/src/component/DetailCopy/canvas/index.vue
@@ -2,8 +2,8 @@
     <div class="canvasBox">
 		<!-- designDetailShow -->
 		<!-- :class="[driver__.driver?'hideEvents':'']" -->
-		 <div class="canvasContent">
-			<div class="argument-box">
+		 <div class="canvasContent" ref="canvasContent">
+			<!-- <div class="argument-box">
 				<argument 
 					ref="argument" 
 					class="argument" 
@@ -12,22 +12,37 @@
 					@setFrontBackColor="setFrontBackColor"
 					:isEditFrontBack="isEditFrontBack">
 				</argument>
-			</div>
-			<div class="content-bottom">
-				<div class="tool-box">
+			</div> -->
+			<div class="content-bottom" ref="canvasContent">
+				<!-- <div class="tool-box">
 					<tool ref="tool" class="tool" v-if="canvasObj.id || frontBackCanvasObj.id" @toolLiquefaction="toolLiquefaction" @editFront="editFront" :isEditFrontBack="isEditFrontBack"></tool>
-				</div>
+				</div> -->
 				<div class="contet">
 					<div class="canvas" v-show="!isEditFrontBack" @click.stop>
-						<canvasContent ref="canvasContent"></canvasContent>
+						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
+							:clothingImageUrl="selectDetail.undividedLayer" 
+							:clothing-image-opts="{
+								imageMode:'contains',
+							}"
+							ref="editCanvas"></editCanvas>
+						<!-- <canvasContent ref="canvasContent"></canvasContent> -->
 					</div>
 					<div class="editFrontBack" v-if="isEditFrontBack" @click.stop>
-						<editFrontBack 
+						<!-- <editFrontBack 
 							:patchData="frontBack" 
 							:imgDomIndex="imgDomIndex" 
 							
 							ref="editFrontBack">
-						</editFrontBack>
+						</editFrontBack> -->
+						<editCanvas v-if="isEditFrontBack" :config="canvasConfig" 
+							:enabledRedGreenMode="true"
+							:clothingImageUrl="selectDetail.undividedLayer" 
+							:redGreenImageUrl="frontBack.front[imgDomIndex].maskUrl"
+							@trigger-red-green-mouseup="frontBackChange"
+							:clothing-image-opts="{
+								imageMode:'contains',
+							}"
+							ref="editCanvasBackFront"></editCanvas>
 					</div>
 				</div>
 				
@@ -35,6 +50,9 @@
 					<div class="gallery_btn" @click="privewDetail">Finish</div>
 				</div> -->
 			</div>
+			<div class="Finish">
+				<div class="gallery_btn" @click="editFront">EditFrontBack</div>
+			</div>
 		 </div>
 		
 		<!-- <div class="mark_loading" v-show="isShowMark">
@@ -51,6 +69,8 @@ import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
 import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 import editFrontBack from '@/component/Detail/editFrontBack.vue'
+import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
+import { formatTime,segmentImage } from "@/tool/util";
 
 
 import canvasGeneral from "@/tool/canvasGeneralCopy";
@@ -60,7 +80,7 @@ import tool from "./tool.vue"
 
 export default defineComponent({
     components:{
-		tool,argument,canvasContent,editFrontBack
+		tool,argument,editFrontBack,editCanvas
     },
     setup(props,{emit}) {
         const store = useStore();
@@ -69,6 +89,8 @@ export default defineComponent({
 		const detailDom = reactive({
 			editFrontBack:null as any,
 			model:null,
+			editCanvas:null as any,
+			canvasContent:null as any,
 		})
 		const userDetail = computed(()=>{
 			return store.state.UserHabit.userDetail
@@ -84,6 +106,9 @@ export default defineComponent({
 			isEditFrontBack:false,
 		    selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
 			frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
+			canvasLoad:false,
+			canvasConfig:{
+			} as any,
 		})
 		watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
 			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
@@ -112,14 +137,16 @@ export default defineComponent({
 			detailData.isEditFrontBack = !detailData.isEditFrontBack
 			if(detailData.isEditFrontBack){
 				nextTick(()=>{
-			    	detailDom.editFrontBack.init(detailData.frontBack.front[detailData.imgDomIndex],'')
-					//关闭开启键盘事件
-				    detailData.canvasObj.currentOperation = false
-				    detailData.frontBackCanvasObj.currentOperation = true
+					setCanvas(detailData.frontBack.front[detailData.imgDomIndex].maskUrl).then(()=>{
+						detailData.isEditFrontBack = true
+					})
+			    	// detailDom.editFrontBack.init(detailData.frontBack.front[detailData.imgDomIndex],'')
+				    // detailData.canvasObj.currentOperation = false
+				    // detailData.frontBackCanvasObj.currentOperation = true
 				})
 			}else{
-				detailData.canvasObj.currentOperation = true
-				detailData.frontBackCanvasObj.currentOperation = false
+				// detailData.canvasObj.currentOperation = true
+				// detailData.frontBackCanvasObj.currentOperation = false
 			}
 		}
 		const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
@@ -129,9 +156,49 @@ export default defineComponent({
 		const setFrontBackColor = (data:any)=>{
 			detailDom.editFrontBack.setBackground(data)
 		}
+		const setCanvas = (url:any)=>{
+			return new Promise((res,rev)=>{
+				let img = new Image()
+				img.onload = ()=>{
+					let wH = [1,1]
+					let domHeight = detailDom.canvasContent.offsetHeight - 200
+					let imgHeight = img.height
+					wH = [1,domHeight/imgHeight]
+					console.log(domHeight,img.height,img.width)
+					console.log(detailData.selectDetail.undividedLayer)
+					console.log(detailData.canvasConfig)
+					detailData.canvasConfig.width = img.width * wH[1]
+					detailData.canvasConfig.height = domHeight
+
+					res('')
+				}
+				img.src = url
+			})
+		}
+		const frontBackChange = (value:any)=>{
+			let full = detailData.frontBack.front[detailData.imgDomIndex].undividedLayer
+			let size = {
+				...detailData.canvasConfig,
+			}
+			segmentImage(value,full,size).then((rv)=>{
+				detailData.frontBack.front[detailData.imgDomIndex].imageUrl = rv.targetFrontUrl
+				detailData.frontBack.back[detailData.imgDomIndex].imageUrl = rv.targetBackUrl
+				detailData.frontBack.front[detailData.imgDomIndex].maskUrl = value
+				store.commit('DesignDetailCopy/updataDetailItem',{maskUrl:value})
+			})
+
+		}
 		onBeforeUnmount(()=>{
+			detailData.canvasLoad = false
 			privewDetail()
 		})
+		onMounted(()=>{
+			nextTick(()=>{
+				setCanvas(detailData.selectDetail.undividedLayer).then(()=>{
+					detailData.canvasLoad = true
+				})
+			})
+		})
         return{
 			...toRefs(detailDom),
 			...toRefs(detailData),
@@ -139,6 +206,7 @@ export default defineComponent({
 			editFront,
 			privewDetail,
 			setFrontBackColor,
+			frontBackChange,
         }
     },
 	provide() {
diff --git a/src/component/DetailCopy/canvas/index1.vue b/src/component/DetailCopy/canvas/index1.vue
new file mode 100644
index 00000000..b715a5cb
--- /dev/null
+++ b/src/component/DetailCopy/canvas/index1.vue
@@ -0,0 +1,243 @@
+<template>
+    <div class="canvasBox">
+		<!-- designDetailShow -->
+		<!-- :class="[driver__.driver?'hideEvents':'']" -->
+		 <div class="canvasContent">
+			<div class="argument-box">
+				<argument 
+					ref="argument" 
+					class="argument" 
+					v-if="canvasObj.id || frontBackCanvasObj.id" 
+					@toolLiquefaction="toolLiquefaction" 
+					@setFrontBackColor="setFrontBackColor"
+					:isEditFrontBack="isEditFrontBack">
+				</argument>
+			</div>
+			<div class="content-bottom">
+				<div class="tool-box">
+					<tool ref="tool" class="tool" v-if="canvasObj.id || frontBackCanvasObj.id" @toolLiquefaction="toolLiquefaction" @editFront="editFront" :isEditFrontBack="isEditFrontBack"></tool>
+				</div>
+				<div class="contet">
+					<div class="canvas" v-show="!isEditFrontBack" @click.stop>
+						<canvasContent ref="canvasContent"></canvasContent>
+					</div>
+					<div class="editFrontBack" v-if="isEditFrontBack" @click.stop>
+						<editFrontBack 
+							:patchData="frontBack" 
+							:imgDomIndex="imgDomIndex" 
+							
+							ref="editFrontBack">
+						</editFrontBack>
+					</div>
+				</div>
+				
+				<!-- <div class="Finish">
+					<div class="gallery_btn" @click="privewDetail">Finish</div>
+				</div> -->
+			</div>
+		 </div>
+		
+		<!-- <div class="mark_loading" v-show="isShowMark">
+			<a-spin size="large" />
+		</div> -->
+    </div>
+    
+</template>
+<script lang="ts">
+import { defineComponent,computed,onBeforeUnmount,provide,nextTick,watch,toRefs, reactive} from 'vue'
+import { Https } from "@/tool/https";
+import { Modal,message } from 'ant-design-vue';
+import {getUploadUrl,isMoible,setGradual} from '@/tool/util'
+import { useStore } from "vuex";
+import { useI18n } from 'vue-i18n'
+import editFrontBack from '@/component/Detail/editFrontBack.vue'
+
+
+import canvasGeneral from "@/tool/canvasGeneralCopy";
+import argument from './argument.vue'
+import canvasContent from './canvasContent.vue'
+import tool from "./tool.vue"
+
+export default defineComponent({
+    components:{
+		tool,argument,canvasContent,editFrontBack
+    },
+    setup(props,{emit}) {
+        const store = useStore();
+        const {t} = useI18n();
+      
+		const detailDom = reactive({
+			editFrontBack:null as any,
+			model:null,
+		})
+		const userDetail = computed(()=>{
+			return store.state.UserHabit.userDetail
+		})
+		const detailData = reactive({
+			canvasObj:new canvasGeneral('aa'),
+			frontBackCanvasObj:new canvasGeneral('vv'),
+			isShowMark:false,
+			liquefactionData:null as any,
+			liquefaction:null as any,
+			canvasType:'export',
+			imgDomIndex:-1,
+			isEditFrontBack:false,
+		    selectDetail:computed(()=>store.state.DesignDetailCopy.selectDetail),
+			frontBack:computed(()=>store.state.DesignDetailCopy.frontBack),
+		})
+		watch(()=>detailData.selectDetail,(newValue,oldValue)=>{
+			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
+			// privewDetail(oldValue)
+		},{immediate: true})
+		provide('frontBackCanvasObj',detailData.frontBackCanvasObj)
+		provide('canvasObj',detailData.canvasObj)
+		provide('isShowMark',detailData.isShowMark)
+		provide('canvasType',detailData.canvasType)
+
+		const setLiquefaction = async ()=>{//进入液化页面
+			detailData.canvasObj.getLiquefactionImgObj().then((data)=>{
+				if(data?.img){
+					detailData.liquefactionData = data
+					detailData.liquefaction.init(data.img)
+				}else {
+					message.info(t('exportModel.jsContent6'))
+					return null;
+				}
+			})
+		}
+		const toolLiquefaction = ()=>{//工具点击按钮
+			setLiquefaction()
+		}
+		const editFront = ()=>{//编辑前后片
+			detailData.isEditFrontBack = !detailData.isEditFrontBack
+			if(detailData.isEditFrontBack){
+				nextTick(()=>{
+			    	detailDom.editFrontBack.init(detailData.frontBack.front[detailData.imgDomIndex],'')
+					//关闭开启键盘事件
+				    detailData.canvasObj.currentOperation = false
+				    detailData.frontBackCanvasObj.currentOperation = true
+				})
+			}else{
+				detailData.canvasObj.currentOperation = true
+				detailData.frontBackCanvasObj.currentOperation = false
+			}
+		}
+		const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
+			let data = await detailData.canvasObj.detailSubmit()
+			if(oldSelectDetail.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = data
+		}
+		const setFrontBackColor = (data:any)=>{
+			detailDom.editFrontBack.setBackground(data)
+		}
+		onBeforeUnmount(()=>{
+			privewDetail()
+		})
+        return{
+			...toRefs(detailDom),
+			...toRefs(detailData),
+			toolLiquefaction,
+			editFront,
+			privewDetail,
+			setFrontBackColor,
+        }
+    },
+	provide() {
+		return {
+		}
+	},
+	mounted(){
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .canvasBox{
+		flex: 1;
+		overflow: hidden;
+		// top: -100%;
+		display: flex;
+		align-items: center;
+		.tool-box{
+			width: 4rem;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+		}
+		.Finish{
+			margin-top: auto;
+			> .gallery_btn{
+				cursor: pointer;
+			}
+		}
+		.argument-box{
+			height: 4rem;
+			width: 100%;
+			margin-bottom: 3rem;
+			margin-left: 4rem;
+		}
+		.argument-box,
+		.content-bottom,
+		.detail-box{
+			
+			:deep(i){
+				font-size: 2.5rem;
+				cursor: pointer;
+				width: 3rem;
+				height: 3rem;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				flex-shrink: 0;
+				transition: all .3s;
+				margin-bottom: .5rem;
+				&.active{
+					border: 1px solid;
+					border-radius: .4rem;
+				}
+				&.icon-xiala{
+					transform: rotate(-90deg);
+				}
+				&.icon-xialaActive{
+					transform: rotate(90deg);
+				}
+				&.eventNone{
+					cursor: no-drop;	
+					border: none;
+					opacity: .5;
+				}
+			}
+		}
+		.canvasContent{
+			height: 100%;
+			// height: 70rem;
+			width: 100%;
+			border: 2px solid #000;
+			border-radius: 3rem;
+			padding: 4rem;
+			display: flex;
+			flex-direction: column;
+		}
+		.content-bottom{
+			flex: 1;
+			overflow: hidden;
+			display: flex;
+			> .contet{
+				flex: 1;
+				overflow: hidden;
+				position: relative;
+				.canvas,.editFrontBack{
+					width: 100%;
+					height: 100%;
+				}
+				.editFrontBack{
+					z-index: 2;
+					position: absolute;
+					top: 0;
+					left: 0;
+				}
+			}
+		}
+		
+	}
+</style>
\ No newline at end of file
diff --git a/src/component/DetailCopy/detailLeft/module/selectList.vue b/src/component/DetailCopy/detailLeft/module/selectList.vue
index e373daa9..07eb917b 100644
--- a/src/component/DetailCopy/detailLeft/module/selectList.vue
+++ b/src/component/DetailCopy/detailLeft/module/selectList.vue
@@ -25,12 +25,12 @@
 			</div>
 		</div>
 		<div class="print_content_list">
-			<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element'">
+			<div class="content_item" v-show="selectTitle == 'current'" v-if="type != 'element' && deReconstructionList.length == 0">
 				<currentList ref="currentList" :level1Type="level1Type" :type="type" @selectImgItem="selectImgItem" :catecoryList="catecoryList"></currentList>
 			</div>
 			<div class="content_item" v-show="selectTitle == 'upload'" v-if="type != 'element'">
 				<uploadList v-if="!isSegmentation" @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadList>
-				<uploadSegmentation v-if="isSegmentation" :segmentationType="segmentationType" @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadSegmentation>
+				<uploadSegmentation v-if="isSegmentation" :segmentationType="segmentationType" :deReconstructionList=deReconstructionList @selectImgItem="selectImgItem" :level1Type="level1Type" :catecoryList="catecoryList"></uploadSegmentation>
 			</div>
 			<div class="content_item" v-show="selectTitle == 'library'">
 				<libraryList :isSegmentation="isSegmentation" @selectImgItem="selectImgItem" :randomId="randomId" :level1Type="level1Type" :type="type" ref="libraryList" :catecoryList="catecoryList"></libraryList>
@@ -90,6 +90,10 @@ export default defineComponent({
 		    type:Boolean,
 			default:true,
 			required:false	
+		},
+		deReconstructionList:{
+			type:Array,
+			default:()=>[]
 		}
 	},
 	emits:['selectImgItem'],
diff --git a/src/component/DetailCopy/detailLeft/module/uploadList.vue b/src/component/DetailCopy/detailLeft/module/uploadList.vue
index e55c051a..9526f576 100644
--- a/src/component/DetailCopy/detailLeft/module/uploadList.vue
+++ b/src/component/DetailCopy/detailLeft/module/uploadList.vue
@@ -2,7 +2,6 @@
 <template>
     <div class="uploadList">
 		<div class="uploadList_box">
-
 			<div class="content_img_item" v-for="(file) in uploadList" :key="file.id">
 				<div class="content_img_item_block" :class="{active:file?.checked}">
 					<img v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
diff --git a/src/component/DetailCopy/detailLeft/module/uploadSegmentation.vue b/src/component/DetailCopy/detailLeft/module/uploadSegmentation.vue
index e4909f84..a1db7652 100644
--- a/src/component/DetailCopy/detailLeft/module/uploadSegmentation.vue
+++ b/src/component/DetailCopy/detailLeft/module/uploadSegmentation.vue
@@ -2,10 +2,10 @@
 <template>
     <div class="uploadList">
 		<div class="uploadList_box">
-
 			<div class="content_img_item" v-for="(file) in uploadList" :key="file.id">
 				<div class="content_img_item_block" :class="{active:file?.checked}">
 					<img v-lazy="file.url" :key="file.url" :alt="file.name" @click.stop="selectImgItem(file)"/>
+					<sketchCategory :disignTypeList="deReconstructionList" :generateList="uploadList" :item="file" :isSetSketchCategory="true"></sketchCategory>
 				</div>
 			</div>
 			<div class="upload_item">
@@ -55,6 +55,10 @@ export default defineComponent({
 			type:String,
 			default:'' as any,
 		},
+		deReconstructionList:{
+			type:Array,
+			default:()=>[]
+		}
 	},
 	emits:['selectImgItem'],
     setup(props,{emit}) {
@@ -115,6 +119,10 @@ export default defineComponent({
 
 				Https.axiosPost(Https.httpUrls.imageSegmentation, param, config)
 					.then((rv: any) => {
+						rv.forEach((item:any)=>{
+							item.category = props.deReconstructionList[0].name
+							item.categoryValue = props.deReconstructionList[0].value
+						})
 						detailData.uploadList.unshift(...rv);
 						detailData.isShowMark = false;
 					})
diff --git a/src/component/home/design/index.vue b/src/component/home/design/index.vue
index c61350a8..bece5b69 100644
--- a/src/component/home/design/index.vue
+++ b/src/component/home/design/index.vue
@@ -50,6 +50,9 @@
 										</div>
 									</div>
 								</div>
+								<div class="gallery_btn" @click="openCanvas()" style="margin-left: auto;">
+									Canvas
+								</div>
 								
 								<!-- <div class="gallery_btn white button_margin_14 Guide_1_30" v-show="designCollectionId"
 									@click="resDesignCollection()">
@@ -435,6 +438,9 @@ export default defineComponent({
 		const openEditTools = ()=>{
 			dataDom.designTools.init(speed.speedData.value,likeDesignCollectionList.value)
 		}
+		const openCanvas = ()=>{
+			dataDom.designTools.init('editCanvas')
+		}
 		const editToolsSuccess = ()=>{
 			nextTick().then(()=>{
 				designData.isUnfold = true
@@ -1155,6 +1161,7 @@ export default defineComponent({
 			openSpeed,
 			setSpeed,
 			openEditTools,
+			openCanvas,
 			editToolsSuccess,
 
 			likeItemDom,
diff --git a/src/component/home/design/tools.vue b/src/component/home/design/tools.vue
index 9f394a16..69a802ad 100644
--- a/src/component/home/design/tools.vue
+++ b/src/component/home/design/tools.vue
@@ -28,7 +28,7 @@
 			<!-- <div class="modal_title_text">
 				<div>Setting</div>
 			</div> -->
-			<div class="collectionBox">
+			<div class="collectionBox" :class="{editCanvas:openType == 'editCanvas'}">
 				<toProductRelight ref="toProduct" 
 					:productimgMenu="{value:'ToProductImage',label:$t('ProductImg.ProductImage')}" 
 					:isDesignPage="true"
@@ -46,6 +46,10 @@
 					v-if="openType == 'relight'"
 				></toProductRelight>
 				<poseTransfer v-if="openType == 'poseTransfer'" :isDesignPage="true" @setLike="designLike" ref="poseTransfer"></poseTransfer>
+				<div class="canvasBox" ref="canvasBox">
+					<editCanvas v-if="openType == 'editCanvas'" ref="editCanvas"
+					></editCanvas>
+				</div>
 			</div>
 		</div>
 		<div class="mark_loading" v-show="isShowMark">
@@ -61,10 +65,11 @@ import { useStore } from "vuex";
 import { useI18n } from 'vue-i18n'
 import toProductRelight from '../tools/toProduct/index.vue'
 import poseTransfer from '../tools/poseTransfer/index.vue'
+import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
 
 export default defineComponent({
 	components:{
-		toProductRelight,poseTransfer
+		toProductRelight,poseTransfer,editCanvas
 	},
 	props:{
 	},
@@ -83,12 +88,14 @@ export default defineComponent({
 			toProduct:null as any,
 			relight:null as any,
 			poseTransfer:null as any,
+			editCanvas:null as any,
 		}) as any
 		const init = (value:any,list:any)=>{
 			data.designTools = true
 			data.openType = value
+			if(value == 'editCanvas')
+			return
 			data.likeDesignList = list
-			console.log(list)
 			nextTick(()=>{
 				let fileList = [] as any
 				if(value == 'toProduct'){
@@ -169,6 +176,16 @@ export default defineComponent({
 			height: 100%;
 			> .collectionBox{
 				height: 100%;
+				&.editCanvas{
+					padding-top: 5rem;
+					padding-right: 5rem;
+					display: flex;
+				}
+				> .canvasBox{
+					height: 100%;
+					flex:1;
+					position: relative;
+				}
 			}
 		}
 		.fullScreen{
diff --git a/src/component/home/tools/deReconstruction/canvas/index.vue b/src/component/home/tools/deReconstruction/canvas/index.vue
index f1ad7524..b9be3580 100644
--- a/src/component/home/tools/deReconstruction/canvas/index.vue
+++ b/src/component/home/tools/deReconstruction/canvas/index.vue
@@ -1,7 +1,13 @@
 <template>
 	<div class="generalCanvas">
-		<div class="canvasBox">
-			<editCanvas v-if="canvasLoad" ref="editCanvas"></editCanvas>
+		<div class="canvasBox" ref="canvasBox">
+			<editCanvas v-if="canvasLoad" ref="editCanvas"
+			 :config="canvasConfig"
+			:clothingImageUrl="modelUrl" 
+			:clothing-image-opts="{
+				imageMode:'contains',
+			}"
+			></editCanvas>
 		</div>
 		<div class="mark_loading" v-show="isShowMark">
 			<a-spin size="large" />
@@ -17,7 +23,7 @@ import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
 import canvasGeneral from "@/tool/canvasGeneralCopy";
 import editCanvas from "@/component/Canvas/CanvasEditor/index.vue";
-
+import defaultModel from "@/assets/images/homePage/defaultModel.png"
 
 export default defineComponent({
     components: {
@@ -32,17 +38,20 @@ export default defineComponent({
 		})
 		const data = reactive({
 			canvasLoad:false,
+			canvasConfig:{},
+			modelUrl:'',
 		})
 		const dataDom = reactive({
 			editCanvas:null,
+			canvasBox:null
 		})
 		const openSetData = ()=>{
-			data.canvasLoad = true
 			// dataDom.canvasContent.openSetData()
 		}
 		const addImage = (value)=>{
 			console.log(value)
-			dataDom.editCanvas.addImageToLayer(value.imgUrl)
+			// dataDom.editCanvas.addImageToLayer(value.imgUrl)
+			dataDom.editCanvas.addImageToLayer(value.url)
 		}
 		const addBottomImage = (value)=>{
 			dataDom.editCanvas.changeFixedImage(value)
@@ -54,7 +63,31 @@ export default defineComponent({
 			
 			return canvasExport
 		}
+		const setCanvas = (url)=>{
+			return new Promise((res,rev)=>{
+				let img = new Image()
+				console.log(url)
+				img.onload = ()=>{
+					let wH = [1,1]
+					let domHeight = dataDom.canvasBox.offsetHeight - 200
+					let imgHeight = img.height
+					wH = [1,domHeight/imgHeight]
+					data.canvasConfig.width = img.width * wH[1]
+					data.canvasConfig.height = domHeight
+					console.log(data.canvasConfig,123123123)
+					data.canvasLoad = true
+					res('')
+				}
+				img.src = url
+			})
+		}
         onMounted(() => {
+			nextTick(()=>{
+				let url = new URL(defaultModel, import.meta.url).href
+				data.modelUrl = url
+				setCanvas(url).then(()=>{
+				})
+			})
 		});
 		onBeforeUnmount(()=>{
 			data.canvasLoad = false
diff --git a/src/component/home/tools/deReconstruction/index.vue b/src/component/home/tools/deReconstruction/index.vue
index ed2c11a0..08ae2352 100644
--- a/src/component/home/tools/deReconstruction/index.vue
+++ b/src/component/home/tools/deReconstruction/index.vue
@@ -19,7 +19,7 @@
 					<input type="radio" value="sketch" v-model="segmentationType">
 				</label> -->
 			</div>
-			<selectList @selectImgItem="selectImgItem" :segmentationType="segmentationType" :isSegmentation="true" upLoadHttpsUrl="/api/element/imageSegmentation" level1Type="Sketchboard" :randomId="false" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
+			<selectList @selectImgItem="selectImgItem" :deReconstructionList="segmentationTypeList" :isSegmentation="true" upLoadHttpsUrl="/api/element/imageSegmentation" level1Type="Sketchboard" :randomId="false" type="sketch" :catecoryList="sketchCatecoryList"></selectList>
 		</div>
 		<div class="canvas itemBox">
 			<canvasBox @setGenerateImg="setGenerateImg" ref="canvasBox"></canvasBox>
@@ -66,6 +66,7 @@ export default defineComponent({
 				return store.state.Workspace.probjects.positionList
 			}),
 			segmentationType:'product',
+			segmentationTypeList:[{value:'product',name:'product'},{value:'sketch',name:'sketch'}],
 			generateImg:computed(()=>store.state.HomeStoreModule.deReconstruction) as any,
 			ceditorConfig:{
 				width: 800,
@@ -206,6 +207,8 @@ export default defineComponent({
 			// flex: 1;
 			&.selectSektch{
 				width: 37rem;
+				display:flex;
+				flex-direction: column;
 				flex-shrink: 0;
 				> .type{
 					display: flex;
diff --git a/src/component/modules/generalMiniCanvas.vue b/src/component/modules/generalMiniCanvas.vue
index 9ccfb6b4..95d9afff 100644
--- a/src/component/modules/generalMiniCanvas.vue
+++ b/src/component/modules/generalMiniCanvas.vue
@@ -1,8 +1,14 @@
 <template>
 	<div class="generalCanvas">
 		<div class="canvasBox" ref="canvasBox">
-			<editCanvas v-if="canvasLoad" :config="canvasConfig" :clothingImageUrl="imgUrl" ref="editCanvas"></editCanvas>
+			<editCanvas v-if="canvasLoad" :config="canvasConfig" 
+				:clothingImageUrl="imgUrl" 
+				:clothing-image-opts="{
+					imageMode:'contains',
+				}"
+				ref="editCanvas"></editCanvas>
 		</div>
+		<div class="gallery_btn" @click="canvasSave" style="width: min-content;margin: 0 auto;">Save</div>
 		<div class="mark_loading" v-show="isShowMark">
 			<a-spin size="large" />
 		</div>
@@ -63,14 +69,31 @@ export default defineComponent({
 			
 			return canvasExport
 		}
+		const canvasSave = ()=>{
+			dataDom.editCanvas.exportImage({isContainBg:false,isContainFixed:true}).then((rv)=>{
+				emit('submitBase64Data',rv)
+			})
+		}
         onMounted(() => {
 			if(props.imgUrl){
 				let img = new Image()
 				img.onload = ()=>{
-					let domHeight = dataDom.canvasBox.offsetHeight
+					let wH = [1,1]
+					// if(img.width > img.height){
+					// 	let domHeight = dataDom.canvasBox.offsetWidth
+					// 	let imgWidth = img.width
+					// 	data.canvasConfig.height = domHeight
+					// 	data.canvasConfig.width = imgHeight/domHeight * img.width
+					// }else{
+						
+					// }
+					
+					let domHeight = dataDom.canvasBox.offsetHeight - 200
 					let imgHeight = img.height
+					wH = [1,domHeight/imgHeight]
+					console.log(domHeight,img.height,img.width)
 					data.canvasConfig.height = domHeight
-					data.canvasConfig.width = imgHeight/domHeight * img.width
+					data.canvasConfig.width = wH[1] * img.width
 					// canvasWH.value = height
 					// // canvasBox.style.width = height+'px'
 					// let wScale = 1
@@ -107,6 +130,7 @@ export default defineComponent({
 			addImage,
 			getData,
 			getCanvasData,
+			canvasSave,
         };
     },
     data(prop) {
diff --git a/src/views/HomeMain.vue b/src/views/HomeMain.vue
index 7aaf9a27..281da38e 100644
--- a/src/views/HomeMain.vue
+++ b/src/views/HomeMain.vue
@@ -455,6 +455,9 @@ export default defineComponent({
 			}
 			getUnreadCount()
 			nextTick(()=>{
+				homeMainData.historyData.isShowLoading = false
+				homeMainData.historyData.isNoData = false
+				homeMainData.historyData.page = 1
 				setPorfolioDom()
 			})
 		})
@@ -540,6 +543,7 @@ export default defineComponent({
 			}
 		}
 		const getHistory = ()=>{
+			console.log(123)
 			if(homeMainData.historyData.isShowLoading && !homeMainData.historyData.isNoData)return
 			homeMainData.historyData.isShowLoading = true
 			let data = {