画布内容储存,pose等入参回显

2025-07-22 18:16:33 +08:00
parent c06fd06d82
commit 3652e0a384
22 changed files with 429 additions and 322 deletions
--- a/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue
@@ -635,7 +635,7 @@ function buildContextMenuItems(layer) {
  contextMenuItems.value = [
    // 重命名
    {
-      label: "重命名",
+      label: t('Canvas.Rename'),
      icon: "CFont",
      disabled: isMultiple || layer.isBackground || layer.isFixed,
      action: () => startEditing(layer),
@@ -643,14 +643,14 @@ function buildContextMenuItems(layer) {
    { type: "divider" },
    // 复制
    {
-      label: isMultiple ? `复制 ${selectedLayers.length} 个图层` : "复制图层",
+      label: isMultiple ? `${t('Canvas.Copy')} ${selectedLayers.length} ${t('Canvas.Layers')}` : t('Canvas.copyLayer'),
      icon: "CPaste",
      disabled: !canCopyLayers.value,
      action: () => copySelectedLayers(),
    },
    // 删除
    {
-      label: isMultiple ? `删除 ${selectedLayers.length} 个图层` : "删除图层",
+      label: isMultiple ? `${t('Canvas.delete')} ${selectedLayers.length} ${t('Canvas.Layers')}` : t('Canvas.deleteLayer'),
      icon: "CDelete",
      disabled: layer.isBackground || layer.isFixed || !canDeleteLayers(),
      danger: true,
@@ -688,7 +688,7 @@ function buildContextMenuItems(layer) {
    // },
    // 组合图层
    {
-      label: "组合图层",
+      label: t('Canvas.groupLayer'),
      icon: "CPicture",
      disabled: layer.isBackground || layer.isFixed || !layerManager?.canRasterizeLayer?.(layer.id),
      action: () => {
@@ -698,7 +698,7 @@ function buildContextMenuItems(layer) {
    },
    // 导出图层
    {
-      label: "导出图层",
+      label: t('Canvas.exportLayer'),
      icon: "CExport",
      disabled: layer.isBackground || layer.isFixed || !layerManager?.canRasterizeLayer?.(layer.id),
      action: () => {
@@ -709,11 +709,11 @@ function buildContextMenuItems(layer) {
    { type: "divider" },
    // 分组操作 - 带子菜单
    {
-      label: "分组操作",
+      label: t('Canvas.groupingOperation'),
      icon: "CGroup",
      children: [
        {
-          label: "创建组",
+          label: t('Canvas.createGroup'),
          icon: "CCreateGroup",
          disabled: !canGroupLayers.value,
          action: () => {
@@ -722,7 +722,7 @@ function buildContextMenuItems(layer) {
          },
        },
        {
-          label: "解组",
+          label: t('Canvas.unzipGroup'),
          icon: "CCancelGroup",
          disabled: !canUngroupLayers.value,
          action: () => {
@@ -743,7 +743,7 @@ function buildContextMenuItems(layer) {
    },
    // 图层操作 - 带子菜单
    {
-      label: "图层操作",
+      label: t('Canvas.layerOperation'),
      icon: "CLayout",
      children: [
        // // 锁定/解锁
@@ -761,7 +761,7 @@ function buildContextMenuItems(layer) {
        // },
        // { type: "divider" },
        {
-          label: "置顶",
+          label: t('Canvas.sticekToTop'),
          icon: "CBottom",
          inverIcon: true, // 倒置图标
          disabled: layer.isBackground || layer.isFixed || !layerManager?.canMoveToTop?.(layer.id),
@@ -771,7 +771,7 @@ function buildContextMenuItems(layer) {
          },
        },
        {
-          label: "向上移动",
+          label: t('Canvas.MoveUpOneLayer'),
          icon: "CUp",
          disabled: layer.isBackground || layer.isFixed || !layerManager?.canMoveToTop?.(layer.id),
          action: () => {
@@ -780,7 +780,7 @@ function buildContextMenuItems(layer) {
          },
        },
        {
-          label: "向下移动",
+          label: t('Canvas.MoveDownOneLayer'),
          icon: "CDown",
          disabled:
            layer.isBackground || layer.isFixed || !layerManager?.canMoveToBottom?.(layer.id),
@@ -790,7 +790,7 @@ function buildContextMenuItems(layer) {
          },
        },
        {
-          label: "置底",
+          label: t('Canvas.SinkToBottom'),
          icon: "CBottom",
          disabled:
            layer.isBackground || layer.isFixed || !layerManager?.canMoveToBottom?.(layer.id),
--- a/src/component/Canvas/CanvasEditor/components/SelectionPanel.vue
+++ b/src/component/Canvas/CanvasEditor/components/SelectionPanel.vue
@@ -4,7 +4,7 @@
      <!-- 顶部选区类型工具栏 -->
      <div class="toolbar-section">
        <div class="toolbar-header">
-          <div class="header-title">{{ t("选区工具") }}</div>
+          <div class="header-title">{{ t("Canvas.LassoTool") }}</div>
          <!-- 移除关闭按钮，完全通过工具切换控制显示隐藏 -->
        </div>

@@ -17,7 +17,7 @@
            @click="setSelectionType(OperationType.LASSO)"
          >
            <svg-icon name="CFree" size="20" />
-            <span>{{ $t("手绘") }}</span>
+            <span>{{ $t("Canvas.freehandSketching") }}</span>
          </div>
          <div
            :class="[
@@ -27,7 +27,7 @@
            @click="setSelectionType(OperationType.LASSO_RECTANGLE)"
          >
            <svg-icon name="CRectangle" size="26" />
-            <span>{{ $t("矩形") }}</span>
+            <span>{{ $t("Canvas.rectangle") }}</span>
          </div>
          <div
            :class="[
@@ -37,7 +37,7 @@
            @click="setSelectionType(OperationType.LASSO_ELLIPSE)"
          >
            <svg-icon name="CEllipse" size="24" />
-            <span>{{ $t("椭圆") }}</span>
+            <span>{{ $t("Canvas.ellipse") }}</span>
          </div>
        </div>

@@ -48,15 +48,15 @@
        <div class="tool-actions">
          <div class="action-btn" @click="copySelectionToNewLayer">
            <svg-icon name="CPaste" size="16" />
-            <span class="btn-text">{{ $t("创建") }}</span>
+            <span class="btn-text">{{ $t("Canvas.creation") }}</span>
          </div>
          <div class="action-btn" @click="cutSelectionToNewLayer">
            <svg-icon name="CCut" size="26" />
-            <span class="btn-text">{{ $t("创建并拷贝") }}</span>
+            <span class="btn-text">{{ $t("Canvas.CreateAndCopy") }}</span>
          </div>
          <div class="action-btn" @click="clearSelectionContent">
            <svg-icon name="CClear" size="18" />
-            <span class="btn-text">{{ $t("清除选择内容") }}</span>
+            <span class="btn-text">{{ $t("Canvas.TheClearlySelectedContent") }}</span>
          </div>
          <!-- <button
            class="action-btn"
--- a/src/component/Canvas/CanvasEditor/index.vue
+++ b/src/component/Canvas/CanvasEditor/index.vue
@@ -135,6 +135,12 @@ const lastSelectLayerId = ref(null); // 最后选择的图层ID
 // 当前选择的工具
 const activeTool = ref(CanvasConfig.defaultTool); // 默认工具

+
+//监听画布元素宽度是否发生变化
+let observer = null
+let observerTime = null//加入防抖
+
+
 // 管理器实例
 let canvasManager = null;
 let layerManager = null;
@@ -407,10 +413,22 @@ onMounted(async () => {
      }, 300);
    });
  });
-
+  
+	observer = new ResizeObserver(entries => {
+		for (let entry of entries) {
+			clearTimeout(observerTime)
+			observerTime = setTimeout(()=>{
+				nextTick(()=>{
+					handleWindowResize()
+				})
+			},100)
+			// const { width } = entry.contentRect;
+		}
+	});
+	observer.observe(canvasContainerRef.value);
  // 使用window的resize事件代替ResizeObserver
  // 只有当窗口大小变化时才更新画布尺寸
-  window.addEventListener("resize", handleWindowResize);
+//   window.addEventListener("resize", handleWindowResize);
 });

 watchEffect(() => {
@@ -454,11 +472,13 @@ onBeforeUnmount(() => {
  redGreenModeManager = null;

  // 移除window resize事件监听
-  window.removeEventListener("resize", handleWindowResize);
+//   window.removeEventListener("resize", handleWindowResize);
+	observer.unobserve(canvasContainerRef.value);
 });

 // 窗口大小变化处理函数
 function handleWindowResize() {
+	console.log(132)
  // 使用requestAnimationFrame来防止频繁更新
  requestAnimationFrame(() => {
    // 更新画布大小并自动居中所有元素
--- a/src/component/HomePage/Generate.vue
+++ b/src/component/HomePage/Generate.vue
@@ -289,35 +289,35 @@ export default defineComponent({
 		let speed = reactive({
 			speedList:[
 				{
-					title:'Generate using Wanxiang',
-					label:'WX',
+					title:'',
+					label:t('speedList.generateWx'),
 					value:'wx',
 				},{
-					title:'Generate image in high quality low speed',
-					label:'High',
+					title:'',
+					label:t('speedList.generateFlux'),
 					value:'high',
 				},{
-					title:'Generate image in fast speed basics quality',
-					label:'Normal',
+					title:'',
+					label:t('speedList.generateNormal'),
 					value:'fast',

 				},{
 					title:'',
-					label:'FLUX',
+					label:t('speedList.generateFlux'),
 					value:'flux',
 				},
 			],
 			extractList:[
 				{
-					title:'Note: The extracted line art might have minor variations from the original.',
-					label:'FLUX',
+					title:'',
+					label:t('speedList.generateFlux'),
 					value:'flux',
 				},
 			],
 			speedState:false,
 			speedData:{
-				title:'Generate using Wanxiang',
-				label:'WX',
+				title:'',
+				label:t('speedList.generateWx'),
 				value:'wx',
 			},
 		})
--- a/src/component/HomePage/scaleImage.vue
+++ b/src/component/HomePage/scaleImage.vue
@@ -226,25 +226,25 @@ export default defineComponent({
 			speedTypeList:{
 				poseTransfer:[
 					{
-						title:'Generate high-quality images',
-						label:'High',
+						title:'',
+						label:t('speedList.High'),
 						value:'',
 					},{
-						title:'Generate using Wanxiang',
-						label:'WX',
+						title:'',
+						label:t('speedList.generateWx'),
 						value:'wx',
 					},
 				],
 				toPorductImg:[
 					{
 						title:'',
-						label:'FLUX',
-						relightLabel:'Edit',
+						label:t('speedList.toproductFlus'),
+						relightLabel:t('speedList.relightEdit'),
 						value:'flux',
 					},{
-						title:'Generate with high quality',
-						label:'High',
-						relightLabel:'Relight',
+						title:'',
+						label:t('speedList.toproductBasic'),
+						relightLabel:t('speedList.changeBackground'),
 						value:'',
 					},
 				]
@@ -252,8 +252,8 @@ export default defineComponent({
 			speedState:false,
 			speedData:{
 				title:'',
-				label:'FLUX',
-				relightLabel:'Edit',
+				label:t('speedList.toproductFlus'),
+				relightLabel:t('speedList.relightEdit'),
 				value:'flux',
 			},
 		})
@@ -521,6 +521,31 @@ export default defineComponent({
    mounted() {
    },
    methods: {
+		setUserData(item:any){
+			console.log(item)
+			this.productimgSearchName = item.prompt
+			this.productimgSimilarity = 100 - item.imageStrength * 100
+			this.productimgRelightDirection = item.direction
+			console.log(this.productimgSearchName)
+			let list = this.speedTypeList.toPorductImg
+			if(list.length == 0)return
+			let modelName = ''
+			if(!item.modelName){
+				modelName = ''
+			}else{
+				modelName = item.modelName
+			}
+			list.forEach((item:any)=>{
+				if(modelName == item.value){
+					this.speedData = item
+				}
+			})
+		},
+		clearUserData(){
+			this.productimgSearchName = ''
+			this.productimgSimilarity = 30
+			this.productimgRelightDirection = ''
+		},
 		init(list:any,index:any,dialogueIndex:any){
 			this.scaleImage = true
 			this.scaleImageList = list
@@ -534,6 +559,7 @@ export default defineComponent({
 			}
 			this.speedData = JSON.parse(JSON.stringify(this.speedList[0]))
 			document.addEventListener('keydown',this.setKeydown)
+			this.setUserData(list[index])
 			this.$nextTick()
 			this.ifMaximumLength()
 		},
--- a/src/component/home/design/collection/more.vue
+++ b/src/component/home/design/collection/more.vue
@@ -75,7 +75,7 @@ export default defineComponent({
 		}
 		const saveBase64Img = (rv)=>{
 			console.log(rv)
-
+			console.log(props.item)
 		}
        return{
 			...toRefs(dataDom),
--- a/src/component/home/design/editDesignType/index.vue
+++ b/src/component/home/design/editDesignType/index.vue
@@ -238,7 +238,7 @@ setup(props:any,{emit}) {
 		productimgSimilarity:30,
 		productimgBrightenValue:1,
 		productimgUpload:props.productData.upload,
-		productimgRelightDirection:props.productData.RelightDirection,
+		productimgRelightDirection:'Bottom Light',
 		productimgRelightDirectionList:props.productData.RelightDirectionList,
 		selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
 		likeDesignCollectionList:computed(() => {
@@ -258,35 +258,35 @@ setup(props:any,{emit}) {
 		speedTypeList:{
 			poseTransfer:[
 				{
-					title:'Generate high-quality images',
-					label:'High',
+					title:'',
+					label:t('speedList.High'),
 					value:'',
 				},{
-					title:'Generate using Wanxiang',
-					label:'WX',
+					title:'',
+					label:t('speedList.wx'),
 					value:'wx',
 				},
 			],
 			toPorductImg:[
 				{
 					title:'',
-					label:'FLUX',
-					relightLabel:'Edit',
+					label:t('speedList.toproductFlus'),
+					relightLabel:t('speedList.relightEdit'),
 					value:'flux',
 				},{
-					title:'Generate with high quality',
-					label:'High',
-					relightLabel:'Relight',
+					title:'',
+					label:t('speedList.toproductBasic'),
+					relightLabel:t('speedList.changeBackground'),
 					value:'',
 				},
 			]
 		},
 		speedState:false,
 		speedData:{
-			title:'Generate high-quality images',
-			relightLabel:'Relight',
-			label:'High',
-			value:'',
+			title:'',
+			label:t('speedList.toproductFlus'),
+			relightLabel:t('speedList.relightEdit'),
+			value:'flux',
 		},
 	})
 	const openSpeed = ()=>{
@@ -317,7 +317,6 @@ setup(props:any,{emit}) {
 	let prductimgTime:any = null
 	const getData = ()=>{
 		let obj = null as any
-		console.log(productimg.scaleImageList[productimg.scaleImageIndex])
 		if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'ToProductImage'){
 			obj = {
 				elementId:productimg.scaleImageList[productimg.scaleImageIndex].designOutfitId||productimg.scaleImageList[productimg.scaleImageIndex].elementId,
@@ -409,12 +408,16 @@ setup(props:any,{emit}) {
 				let arr:any = []
 				
 				if(productimg.scaleImageList[productimg.scaleImageIndex]?.resultType == 'PoseTransfer'){
-					arr.push(rv.taskId)
+					rv = [rv]
+					// arr.push(rv.taskId)
 				}else{
-					rv.forEach((item:any)=>{
-						arr.push(item.taskId)  
-					})
+					// rv.forEach((item:any)=>{
+					// 	arr.push(item.taskId)  
+					// })
 				}
+				rv.forEach((item:any)=>{
+					arr.push(item.taskId)  
+				})
 				productimg.generateCourse = {
 					...rv[0],
 					parentId:productimg.selectGenerate?.parentId || productimg.selectGenerate.userLikeGroupId,
@@ -528,7 +531,48 @@ setup(props:any,{emit}) {
 			});
 		}
 	}
+	const setUserData = (item:any)=>{
+		console.log(item)
+		productimg.productimgSearchName = item.prompt
+		productimg.productimgSimilarity = 100 - item.imageStrength * 100
+		productimg.productimgRelightDirection = item.direction
+		if(item.poseId){
+			let index = 0;
+			productimg.poseList.forEach((poseItem,poseIndex)=>{
+				if(Number(poseItem.id) == item.poseId){
+					index = poseIndex
+				}
+			})
+			setSelectPose(productimg.poseList[index],index)
+		}
+		let list = [] as any
+		if(item.resultType == 'PoseTransfer'){
+			list = speed.speedTypeList.poseTransfer
+		}else if(item.resultType == 'ToProductImage' || item.resultType == 'Relight'){
+			list = speed.speedTypeList.toPorductImg
+		}
+		if(list.length == 0)return
+		let modelName = ''
+		if(!item.modelName){
+			modelName = ''
+		}else{
+			modelName = item.modelName
+		}
+		list.forEach((item:any)=>{
+			
+			if(modelName == item.value){
+				speed.speedData = item
+			}
+		})
+	}
+	const clearUserData = ()=>{
+		productimg.productimgSearchName = ''
+		productimg.productimgSimilarity = 30
+		productimg.productimgRelightDirection = ''
+	}
 	let init = async (list:any,index:any,dialogueIndex:any,status:any,listType:string)=>{
+		productimg.scaleImageList = list
+		productimg.scaleImageIndex = index
 		scaleImage.value = true
 		productimg.openType = status
 		if(status == 'add'){
@@ -549,20 +593,23 @@ setup(props:any,{emit}) {
 			if(( (list[index].resultType == 'PoseTransfer' && !list[index].gifUrl) || (list[index].resultType !== 'PoseTransfer' && !list[index].url))){
 				productimg.productimgIsProductimg = true
 				productimg.productimgRemProductimg = true
+				productimg.generateCourse = {
+					...list[index]
+				}
 				setPrductimg([list[index].taskId])
 			}
 		}
+		productimg.productimgRelightDirection = JSON.parse(JSON.stringify(props.productData.RelightDirection))
+		
 		productimg.selectGenerate.parentId =  list[index].parentId || list[index].userLikeSortId
 		if(productimg.productimgSearchName){
 			await nextTick()
 			ifMaximumLength()
 		}
-		
 		if(productimg.poseList.length == 0 && list[index].resultType == 'PoseTransfer'){
-			getPoseList()		
+			await getPoseList()		
 		}
 		productimg.isGenerate = false
-		productimg.scaleImageList = list
 		if(productimg.scaleImageList[index].resultType == "PoseTransfer"){
 			speed.speedList = speed.speedTypeList.poseTransfer
 		}
@@ -572,15 +619,23 @@ setup(props:any,{emit}) {
 			speed.speedList = [speed.speedTypeList.toPorductImg[0],speed.speedTypeList.toPorductImg[1]]
 		}
 		speed.speedData = JSON.parse(JSON.stringify(speed.speedList[0]))
-		productimg.scaleImageIndex = index
+		if(status != 'add'){
+			setUserData(list[index])
+		}
 		if(dialogueIndex)robotAssits.value = dialogueIndex
 	}
-	const getPoseList = ()=>{
-		Https.axiosGet(Https.httpUrls.getAllPose).then((rv)=>{
-			rv[0].isChecked = true
-			productimg.selectPose = rv[0]?.id || 1
-			productimg.poseList = rv
-		})	
+	const getPoseList = async ()=>{
+		await new Promise((resolve, reject) => {
+			Https.axiosGet(Https.httpUrls.getAllPose).then((rv)=>{
+				rv[0].isChecked = true
+				productimg.selectPose = rv[0]?.id || 1
+				productimg.poseList = rv
+				resolve('')
+			}).catch(()=>{
+				resolve('')
+			})	
+		})
+		
 	}
 	const gifPlay = (e:any,item:any)=>{
 		e.target.src = item.gif || item.gifUrl//使用gif图片
@@ -629,15 +684,22 @@ setup(props:any,{emit}) {
 			
 		}
 		let emitData = {
-				status:productimg.openType,
-				generateCourse:[{
-					...productimg.generateCourse,
-				}]
-			}
-			emit('upDataDesignLikeList',emitData)
+			status:productimg.openType,
+			generateCourse:[{
+				...productimg.generateCourse,
+			}]
+		}
+		emit('upDataDesignLikeList',emitData)
+		productimg.generateCourse = null
 		productimg.openType = ''
-		
 		scaleImage.value = false
+		clearInterval(prductimgTime)
+		clearInterval(remPrductimgTime)
+		clearUserData()
+		productimg.scaleImageList = []
+		productimg.scaleImageIndex = -1
+		productimg.productimgIsProductimg = false
+		productimg.productimgRemProductimg= false
 	}
 	const ifMaximumLength = async ()=>{
 		await nextTick()
--- a/src/component/home/design/index.vue
+++ b/src/component/home/design/index.vue
@@ -900,7 +900,7 @@ export default defineComponent({
 			clearInterval(prductimgTime.Relight)
 			dataDom.editDesignType.init(arr,index,null,status,listType)
 			dataDom.editDesignType.isLike = false
-			dataDom.editDesignType.productimgRelightDirection = editDesignType.RelightDirection
+			// dataDom.editDesignType.productimgRelightDirection = editDesignType.RelightDirection
 			dataDom.editDesignType.isComparison = true
 		}
 		const addGenerateImg = async (data:any)=>{
@@ -1085,17 +1085,20 @@ export default defineComponent({
 						list[index]?.childList.push(generateCourseItem)
 					}
 				}else{
-					console.log(generateCourseItem)
 					let index = list.findIndex((item:any)=>(item.userLikeSortId == generateCourseItem.parentId))
-					if(!list[index]?.childList){
-						list[index].childList = []
-					}
-					if(data.status == 'add'){
-						upDataSort(generateCourseItem,index)
-						list[index]?.childList.push(generateCourseItem)
-					}else{
-						let childIndex = list[index].childList.findIndex((item:any)=>(item.id == generateCourseItem.id))
-						list[index].childList[childIndex] = generateCourseItem
+					console.log(index)
+					console.log(list[index])
+					if(index != -1){
+						if(!list[index]?.childList){
+							list[index].childList = []
+						}
+						if(data.status == 'add'){
+							upDataSort(generateCourseItem,index)
+							list[index]?.childList.push(generateCourseItem)
+						}else{
+							let childIndex = list[index].childList.findIndex((item:any)=>(item.id == generateCourseItem.id))
+							list[index].childList[childIndex] = generateCourseItem
+						}
 					}
 				}
 			})
@@ -1109,6 +1112,7 @@ export default defineComponent({
 			list.forEach((item:any)=>{
 				if(!item?.childList)item.childList = []
 				item.childList.forEach((childItem:any)=>{
+					console.log(childItem)
 					if(childItem.resultType == 'PoseTransfer'){
 						if(!childItem.status && !childItem?.firstFrameUrl){
 							poseTransfer.push(childItem.taskId)
--- a/src/component/home/design/tools.vue
+++ b/src/component/home/design/tools.vue
@@ -50,7 +50,10 @@
 				<poseTransfer v-if="openType == 'poseTransfer'" :source="source" :isDesignPage="true" @setLike="designLike" ref="poseTransfer"></poseTransfer>
 				<div v-if="openType == 'editCanvas'" class="canvasBox" :class="{editCanvas:openType == 'editCanvas'}">
 					<div class="canvas" ref="canvasBox">
-						<editCanvas @changeCanvas="changeCanvas" ref="editCanvas">
+						<editCanvas 
+							@changeCanvas="changeCanvas" 
+							:canvasJSON="canvasJSON"
+							ref="editCanvas">
 							<template #existsImageList>
 								<ExistsImageList :list="canvasSelectList" @select="handleImageSelect" />
 							</template>
@@ -75,6 +78,7 @@ import { defineComponent,computed,ref,provide,nextTick,inject,toRefs, reactive,
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { Https } from "@/tool/https";
 import { useStore } from "vuex";
+import { downloadIamge,getMinioUrl } from "@/tool/util";
 import { useI18n } from 'vue-i18n'
 import toProductRelight from '../tools/toProduct/index.vue'
 import poseTransfer from '../tools/poseTransfer/index.vue'
@@ -101,6 +105,7 @@ export default defineComponent({
 			isShowMark:false,
 			openType:'',
 			selectObject:computed(()=>store.state.Workspace.probjects),//选择的项目
+			canvasJSON:computed(()=>store.state.HomeStoreModule.canvasData.canvas),
 			createProbject:inject('createProbject',()=>{}) as any,
 			likeDesignList:[],
 			canvasSelectList:[] as any,
@@ -256,15 +261,19 @@ export default defineComponent({
 			if(list.length > 0){
 				data.canvasSelectList.push(obj)
 			}
-			console.log(mannquinList)
 		}
 		const handleImageSelect = (value:any)=>{
 			dataDom.editCanvas.addImageToLayer(value.url)
 		}
 		const saveCanvas = ()=>{
 			let canvasJSON = dataDom.editCanvas.getJSON()
-			if(!canvasJSON)return
-			let blob = new Blob([canvasJSON], { type: "application/json" });
+			let canvasData = JSON.parse(canvasJSON)
+			if(!canvasData)return
+			canvasData.canvas.objects.forEach((objectsItem:any) => {
+				if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
+			});
+			console.log(canvasData)
+			let blob = new Blob([JSON.stringify(canvasData)], { type: "application/json" });
 			let formData = new FormData();
 			formData.append("file", blob, "data.json");
 			formData.append("module", "canvas");
--- a/src/component/home/index.vue
+++ b/src/component/home/index.vue
@@ -4,7 +4,11 @@
 			<a-spin size="large" />
 		</div>
 		<div class="show">
-			<router-view v-if="(openType && openType != 'history' && !routeQuery.id) || $route.path != '/home'" @setTask="setTask">
+			<router-view v-if="
+				(openType && openType != 'history' && !routeQuery.id) || 
+				$route.path != '/home'" 
+				@setTask="setTask"
+			>
 			</router-view>
 			<div v-else-if="routeQuery.id || openType == 'history'" class="function">
 				<design :key="componentKey" ref="design"></design>
@@ -198,7 +202,6 @@ export default defineComponent({
 			// 	dataDom.workflow.isUpdataPorject = true
 			// })
 			setChatData()
-			console.log(123123)
 			if(route.name == 'tools'){
 				getCollection('tools',null)	
 			}else{
--- a/src/component/home/newProject/index.vue
+++ b/src/component/home/newProject/index.vue
@@ -7,9 +7,9 @@
 					<div class="select">
 						<div class="item" @click="setFlow(item)" :class="{active:item.title == selectFlow.title}" v-for="item in flowList">{{ item.title }}</div>
 					</div>
-					<div class="describe">
+					<!-- <div class="describe">
 						<p v-for="item in selectFlow.describe">{{ item }}</p>
-					</div>
+					</div> -->
 				</div>
 				<div class="chatOrSetting">
 					<div class="select">
@@ -290,8 +290,8 @@ export default defineComponent({
 					margin-top: 4.8rem;
 					width: 100%;
 					border-radius: 2.4rem;
-					border: 1px solid #0000001a;
-					padding: 1.2rem;
+					// border: 1px solid #0000001a;
+					// padding: 1.2rem;
 					> .select{
 						border: 1px solid #0000001a;
 						border-radius: 2.4rem;
--- a/src/component/home/tools/deReconstruction/canvas/index.vue
+++ b/src/component/home/tools/deReconstruction/canvas/index.vue
@@ -64,9 +64,13 @@ export default defineComponent({
 			isHiddenModel:true,
 			canvasConfig:{},
 			probjects:computed(()=>store.state.Workspace.probjects),
+			canvasJSON:computed(()=>store.state.HomeStoreModule.canvasData.deReconstruction),
 			undoStack:0,
 			changeImageUrl:'',
 		})
+		watch(()=>data.canvasJSON,(newVal)=>{
+			dataDom.editCanvas.loadJSON(newVal)
+		})
 		const dataDom = reactive({
 			editCanvas:null,
 			canvasBox:null
--- a/src/component/home/tools/poseTransfer/index.vue
+++ b/src/component/home/tools/poseTransfer/index.vue
@@ -177,12 +177,12 @@ export default defineComponent({
 		let speed = reactive({
 			speedList:[
 				{
-					title:'Generate high-quality content',
-					label:'High',
+					title:'',
+					label:t('speedList.High'),
 					value:'',
 				},{
-					title:'Generate using Wanxiang',
-					label:'WX',
+					title:'',
+					label:t('speedList.wx'),
 					value:'wx',
 				},
 			],
--- a/src/component/home/tools/toProduct/index.vue
+++ b/src/component/home/tools/toProduct/index.vue
@@ -283,13 +283,13 @@ export default defineComponent({
 			speedList:[
 				{
 					title:'',
-					label:'FLUX',
-					relightLabel:'Edit',
+					label:t('speedList.toproductFlus'),
+					relightLabel:t('speedList.relightEdit'),
 					value:'flux',
 				},{
-					title:'Generate with high quality',
-					label:'High',
-					relightLabel:'Relight',
+					title:'',
+					label:t('speedList.toproductBasic'),
+					relightLabel:t('speedList.changeBackground'),
 					value:'',
 				},
 			],
@@ -700,12 +700,12 @@ export default defineComponent({
 			})
 			scaleImage.value.isProductimg = isLike
 			// scaleImage.value.isProductimg = false
-			scaleImage.value.init(arr,index)
 			scaleImage.value.isLike = false
 			scaleImage.value.productimgSearchName = productImgData.searchName[props.productimgMenu.value]
 			scaleImage.value.productimgSimilarity = productImgData.similarity
 			scaleImage.value.productimgBrightenValue = productImgData.brightenValue
 			scaleImage.value.productimgRelightDirection = RelightDirection.value
+			scaleImage.value.init(arr,index)
 			scaleImage.value.isComparison = true
 		}
 		let generalIsMenuShow:any = {}
--- a/src/component/modules/generalMiniCanvas.vue
+++ b/src/component/modules/generalMiniCanvas.vue
@@ -54,16 +54,21 @@ export default defineComponent({
 		})
 		const data = reactive({
 			canvasLoad:false,
+			canvasJSON:computed(()=>store.state.HomeStoreModule.canvasData.canvas),
 			canvasConfig:{

 			},
 		})
+		watch(()=>data.canvasJSON,(newVal)=>{
+			dataDom.editCanvas.loadJSON(newVal)
+		})
 		const dataDom = reactive({
 			editCanvas:null,
 			canvasBox:null,
 		})
 		const openSetData = ()=>{
 			data.canvasLoad = true
+
 		}
 		const canvasLoadAddImg = (url,id)=>{
 			dataDom.editCanvas.addImageToLayer(url,{layerId:dataDom.editCanvas.layers[0].id,imageMode:'contains',undoable:false})
--- a/src/component/toolsPage/index.vue
+++ b/src/component/toolsPage/index.vue
@@ -155,6 +155,7 @@ export default defineComponent({
 			if(!store.state.Workspace.probjects.id)await createProbject()
 			time = setTimeout(()=>{
 				let canvasData = JSON.parse(canvasJSON)
+				if(!canvasData)return
 				canvasData.canvas.objects.forEach((objectsItem:any) => {
 					if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
 				});