Merge remote-tracking branch 'origin/dev_vite' into research

.env.dev

@@ -7,5 +7,7 @@ VITE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
 # VITE_APP_BASE_URL = 'https://www.api.aida.com.hk'
 # 徐佩
 # VITE_APP_BASE_URL = 'http://192.168.31.118:5567'
+# 李天祥
+# VITE_APP_BASE_URL = 'http://192.168.31.82:5567'
 # 海波
 # VITE_APP_BASE_URL = 'http://192.168.31.34:5567'

.env.dev_build

@@ -5,4 +5,3 @@ VITE_USER_NODE_ENV = 'development'
 VITE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
 
 # VITE_APP_BASE_URL = 'http://localhost:22170'
-

.prettierrc.js

@@ -0,0 +1,33 @@
+/** @type {import('prettier').Config} */
+module.exports = {
+  // 打印宽度
+  printWidth: 100,
+  // 使用 4 空格缩进
+  tabWidth: 4,
+  // 使用 4 空格缩进，不使用制表符
+  useTabs: true,
+  // 行尾使用 LF (Unix 风格)
+  endOfLine: 'lf',
+  // 语句末尾使用分号
+  semi: false,
+  // 使用单引号
+  singleQuote: false,
+  // 对象和数组末尾不添加尾随逗号
+  trailingComma: 'none',
+  // JSX 引号使用单引号
+  jsxSingleQuote: false,
+  // 括号内侧空格
+  bracketSpacing: true,
+  // JSX 标签不换行
+  bracketSameLine: false,
+  // 箭头函数参数始终使用括号
+  arrowParens: 'always',
+  // HTML、Vue、Angular 和 Markdown 使用 LF
+  htmlWhitespaceSensitivity: 'css',
+  // Vue 文件脚本和样式缩进
+  vueIndentScriptAndStyle: false,
+  // 行注释位置在注释上方，不加空格
+  proseWrap: 'preserve',
+  // 根据文件类型自动推断
+  embeddedLanguageFormatting: 'auto',
+};

public/css/fonts/fontFamily.css

@@ -1,31 +1,41 @@
 /* 字体定义 */
 @font-face {
   font-family: 'Arial';
-  src: url('./fonts/ARIAL.ttf') format('ttf');
+  src: url('./fonts/ARIAL.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'ArialBold';
-  src: url('./fonts/ARIALBD.ttf') format('ttf');
+  src: url('./fonts/ARIALBD.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'ArialMedium';
-  src: url('./fonts/ArialMdm.ttf') format('ttf');
+  src: url('./fonts/ArialMdm.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Poppins';
-  src: url('./fonts/Poppins-Regular.ttf') format('ttf');
+  src: url('./fonts/Poppins-Regular.ttf') format('truetype');
   font-weight: normal;
 }
 
 @font-face {
   font-family: 'PoppinsMedium';
-  src: url('./fonts/Poppins-Medium.ttf') format('ttf');
+  src: url('./fonts/Poppins-Medium.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'PoppinsBold';
-  src: url('./fonts/Poppins-SemiBold.ttf') format('ttf');
+  src: url('./fonts/Poppins-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'Instrument';
+  src: url('./InstrumentSans-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'InstrumentBold';
+  src: url('./InstrumentSans-Bold.ttf')  format('truetype');
 }

src/assets/icons/CFile.svg

@@ -0,0 +1 @@
+<svg focusable="false" class="" data-icon="paper-clip" width="1em" height="1em" fill="#00000073" aria-hidden="true" viewBox="64 64 896 896"><path d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"></path></svg>

src/assets/images/award/arrow_down.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="12" viewBox="0 0 22 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1L11 11L21 1" stroke="#585858" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/assets/json/events.json

@@ -1,93 +1,124 @@
 {
-	"eventsList":  [
+	"eventsList": [
+		{
+			"id": 1,
+			"title": "Just post your design work, you could have the chance to come to Hong Kong and interact with industry leaders face-to-face！",
+			"imgUrl": "/image/events/workshop-En.jpg"
+		},
 		{
-		  "id": 1,
-		  "title":"Just post your design work, you could have the chance to come to Hong Kong and interact with industry leaders face-to-face！",
-		  "imgUrl": "/image/events/workshop-En.jpg"
-		},{
 			"id": 2,
-			"title":"AiDA X SFT AI Fashion Award 2024",
+			"title": "AiDA X SFT AI Fashion Award 2024",
 			"imgUrl": "/image/events/Fashion-Award-2024.png"
 		}
-	  ],
-	"eventsItem":[
-	  {
-		  "id":1,
-		  "title":"Just post your design work, you could have the chance to come to Hong Kong and interact with industry leaders face-to-face！",
-		  "imgUrl": "/image/events/workshop-En.jpg",
-		  "textList":[
-			  {
-				  "paragraph":[
-					  {
-						  "text":"🎨AiDA Workshop!"
-					  }
-				  ]
-			  },{
-				  "paragraph":[
-					  {
-						  "text":"The process is simple: use AiDA to post your design work on the 'Gallery', and the one with the most likes(at least 20 likes) will be invited to the AiDA Workshop offline event in Hong Kong on November 14th, to exchange ideas with the Royal College of Art (RCA), Jae Lim, co-founder of the renowned fashion brand BESFXXK, and outstanding designers! "
-					  }
-				  ]
-			  },{
-				  "paragraph":[
-					  {
-						  "text":"<b>⚠️ATTENTION❗❗</b>"
-					  }
-				  ]
-			  },{
-				  "paragraph":[
-					  {
-						  "text":"1. Add the tag in the work description #AiDAworkshop_2024"
-					  },{
-						  "text":"2. One winner only"
-					  }
-				  ]
-			  },{
-				  "paragraph":[
-					  {
-						  "text":"<b>🤩Code-Create will provide (Terms and conditions apply):</b>"
-					  }
-				  ]
-			  },{
-				  "paragraph":[
-					  {
-						  "text":"✅Round-trip transportation fee (only within China)"
-					  }
-				  ]
-			  },{
-				  "paragraph":[
-					  {
-						  "text":"✅One night accommodation fee"
-					  }
-				  ]
-			  },{
-				  "paragraph":[
-					  {
-						  "text":"⌛️Deadline: October 31, 2024"
-					  }
-				  ]
-			  }
-		  ]
-	  },
-	  {
-		"id":2,
-		"title":"AiDA X SFT AI Fashion Award 2024",
-		"imgUrl": "/image/events/Fashion-Award-2024.png",
-		"textList":[
-			{
-				"paragraph":[
-					{
-						"text":"With the aim of inspiring students to innovate in fashion design using AI, Code-Create and The Hong Kong Polytechnic University School of Fashion and Textiles (SFT) have jointly launched the 'AiDA X SFT AI Fashion Award 2024'. This competition provides students with valuable practical AiDA experience, laying the foundation for the future fashion design industry and positioning them as pioneers in AI fashion."
-					}
-				]
-			},{
-				"paragraph":[
-					{
-						"text":"The competition is open to all SFT students, with the winners having the chance to win cash prizes (up to 20,000 HKD), internship opportunity at BESFXXK (will work with the renowned designer, Mr Jae Hyuk Lim, for the BESFXXK collection, that will be featured at NY Fashion Week and Paris Fashion Week) and more surprises! Scan the QR code to learn more."
-					}
-				]
-			}
-		]
+	],
+	"eventsItem": [
+		{
+			"id": 3,
+			"title": "AiDA Global Design Awards 2026",
+			"imgUrl": "/image/events/award-poster.gif",
+			"textList": [
+				{
+					"paragraph": [
+						{
+							"text": "Click the “View Details” button for more information and to join the competition! The AiDA Global Design Award 2026 is an international design competition hosted by Code‑Create, a globally leading AI fashion solutions provider, celebrating the future of creativity powered by artificial intelligence. Open to designers from Hong Kong, China, Singapore, South Korea, and beyond, the competition brings together global talent, empowering AI as a creative partner—pushing fashion beyond traditional boundaries and unlocking new possibilities where technology amplifies human imagination."
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "Participants have the opportunity to compete for cash prizes totaling up to US$9,000, gain global media exposure showcased by top international platforms, and connect with designers and industry leaders worldwide. Finalists will also attend an exclusive award ceremony in Hong Kong, with travel support provided, allowing them to showcase their talent, network with professionals, and celebrate their achievements on an international stage."
+						}
+					]
+				}
+			]
+		},
+		{
+			"id": 1,
+			"title": "Just post your design work, you could have the chance to come to Hong Kong and interact with industry leaders face-to-face！",
+			"imgUrl": "/image/events/workshop-En.jpg",
+			"textList": [
+				{
+					"paragraph": [
+						{
+							"text": "🎨AiDA Workshop!"
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "The process is simple: use AiDA to post your design work on the 'Gallery', and the one with the most likes(at least 20 likes) will be invited to the AiDA Workshop offline event in Hong Kong on November 14th, to exchange ideas with the Royal College of Art (RCA), Jae Lim, co-founder of the renowned fashion brand BESFXXK, and outstanding designers! "
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "<b>⚠️ATTENTION❗❗</b>"
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "1. Add the tag in the work description #AiDAworkshop_2024"
+						},
+						{
+							"text": "2. One winner only"
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "<b>🤩Code-Create will provide (Terms and conditions apply):</b>"
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "✅Round-trip transportation fee (only within China)"
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "✅One night accommodation fee"
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "⌛️Deadline: October 31, 2024"
+						}
+					]
+				}
+			]
+		},
+		{
+			"id": 2,
+			"title": "AiDA X SFT AI Fashion Award 2024",
+			"imgUrl": "/image/events/Fashion-Award-2024.png",
+			"textList": [
+				{
+					"paragraph": [
+						{
+							"text": "With the aim of inspiring students to innovate in fashion design using AI, Code-Create and The Hong Kong Polytechnic University School of Fashion and Textiles (SFT) have jointly launched the 'AiDA X SFT AI Fashion Award 2024'. This competition provides students with valuable practical AiDA experience, laying the foundation for the future fashion design industry and positioning them as pioneers in AI fashion."
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "The competition is open to all SFT students, with the winners having the chance to win cash prizes (up to 20,000 HKD), internship opportunity at BESFXXK (will work with the renowned designer, Mr Jae Hyuk Lim, for the BESFXXK collection, that will be featured at NY Fashion Week and Paris Fashion Week) and more surprises! Scan the QR code to learn more."
+						}
+					]
+				}
+			]
 		}
 	]
-  }
+}

src/assets/json/events_cn.json

@@ -1,93 +1,124 @@
 {
-  "eventsList":  [
-      {
-        "id": 1,
-		"title":"什么？只要发布设计作品就有机会来香港与大佬面对面交流？！",
-		"imgUrl": "/image/events/workshop-Cn.jpg"
-      },{
-        "id": 2,
-		"title":"AiDA X SFT AI时尚设计比赛2024",
-		"imgUrl": "/image/events/Fashion-Award-2024.png"
-      }
+	"eventsList": [
+		{
+			"id": 1,
+			"title": "什么？只要发布设计作品就有机会来香港与大佬面对面交流？！",
+			"imgUrl": "/image/events/workshop-Cn.jpg"
+		},
+		{
+			"id": 2,
+			"title": "AiDA X SFT AI时尚设计比赛2024",
+			"imgUrl": "/image/events/Fashion-Award-2024.png"
+		}
 	],
-  "eventsItem":[
-	{
-		"id":1,
-		"title":"什么？只要发布设计作品就有机会来香港与大佬面对面交流？！",
-		"imgUrl": "/image/events/workshop-Cn.jpg",
-		"textList":[
-			{
-				"paragraph":[
-					{
-						"text":"🎨这是一趟艺术巅峰之旅！AiDA Workshop！"
-					}
-				]
-			},{
-				"paragraph":[
-					{
-						"text":"参与过程很简单，利用AiDA 在 “Gallery广场 ”发布设计作品，最终获赞最高者(至少20个赞）将被邀请至11月14日 举办的AiDA Workshop香港线下活动，与英国皇家艺术学院（RCA）、韩国知名时尚品牌BESFXXK创始人JAE以及优秀设计师一同交流！(名额仅限1名）"
-					}
-				]
-			},{
-				"paragraph":[
-					{
-						"text":"<b>⚠️注意❗❗</b>"
-					}
-				]
-			},{
-				"paragraph":[
-					{
-						"text":"1. 作品描述添加tag: #AiDAworkshop_2024"
-					},{
-						"text":"2. 一个冠军名额"
-					}
-				]
-			},{
-				"paragraph":[
-					{
-						"text":"<b>🤩Code-Create将提供（适用条款条规）：</b>"
-					}
-				]
-			},{
-				"paragraph":[
-					{
-						"text":"✅往返机票/动车费用(仅限中国地区）"
-					}
-				]
-			},{
-				"paragraph":[
-					{
-						"text":"✅一晚酒店住宿费用"
-					}
-				]
-			},{
-				"paragraph":[
-					{
-						"text":"⌛️截止时间：2024.10.31"
-					}
-				]
-			}
-		]
-	},
-	{
-		"id":2,
-		"title":"AiDA X SFT AI时尚设计比赛2024",
-		"imgUrl": "/image/events/Fashion-Award-2024.png",
-		"textList":[
-			{
-				"paragraph":[
-					{
-						"text":"秉承着激发学生使用AI进行时尚设计的创新能力的初衷，Code-Create和香港理工大学时装及纺织学院（SFT）共同举办了“AiDA X SFT AI时尚设计比赛2024”让学生们在比赛中获得宝贵的AiDA实践经验，为未来的时尚设计行业打下了坚实的基础，成为时尚界的AI先锋。"
-					}
-				]
-			},{
-				"paragraph":[
-					{
-						"text":" 此次比赛面向全体SFT 学生，最终获奖者将赢取丰厚奖金（最高可达2万港币），获得在BESFXXK的实习机会（将与著名设计师Lim Jae Hyuk先生合作设计BESFXXK 系列，该系列将在纽约时装周和巴黎时装周上展出）及更多惊喜哦！扫描二维码获取更多比赛信息。"
-					}
-				]
-			}
-		]
-	}
-  ]
-}
+	"eventsItem": [
+		{
+			"id": 3,
+			"title": "AiDA全球设计奖 2026",
+			"imgUrl": "/image/events/award-poster-zh.gif",
+			"textList": [
+				{
+					"paragraph": [
+						{
+							"text": "秉承推动 AI 赋能创意设计的初衷，Code‑Create 举办了「AiDA 全球设计大奖 2026」，面向来自香港、中国、新加坡、韩国及全球的设计师，鼓励大家探索 AI 与时尚设计的无限可能，突破传统界限，释放科技与想象力的创新潜能。点击“查看详情”按钮获取更多比赛信息，抓住成为 AI 时尚先锋的机会吧！"
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "参赛者将有机会赢取总奖金 9,000 美元，作品还将获得国际媒体展示机会，并与全球设计师和行业领袖建立联系。入围决赛者将受邀参加在香港举办的 专属颁奖典礼，主办方提供差旅支持，让设计师在国际舞台展示才华、拓展人脉，并共同庆祝创意成果。"
+						}
+					]
+				}
+			]
+		},
+		{
+			"id": 1,
+			"title": "什么？只要发布设计作品就有机会来香港与大佬面对面交流？！",
+			"imgUrl": "/image/events/workshop-Cn.jpg",
+			"textList": [
+				{
+					"paragraph": [
+						{
+							"text": "🎨这是一趟艺术巅峰之旅！AiDA Workshop！"
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "参与过程很简单，利用AiDA 在 “Gallery广场 ”发布设计作品，最终获赞最高者(至少20个赞）将被邀请至11月14日 举办的AiDA Workshop香港线下活动，与英国皇家艺术学院（RCA）、韩国知名时尚品牌BESFXXK创始人JAE以及优秀设计师一同交流！(名额仅限1名）"
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "<b>⚠️注意❗❗</b>"
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "1. 作品描述添加tag: #AiDAworkshop_2024"
+						},
+						{
+							"text": "2. 一个冠军名额"
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "<b>🤩Code-Create将提供（适用条款条规）：</b>"
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "✅往返机票/动车费用(仅限中国地区）"
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "✅一晚酒店住宿费用"
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "⌛️截止时间：2024.10.31"
+						}
+					]
+				}
+			]
+		},
+		{
+			"id": 2,
+			"title": "AiDA X SFT AI时尚设计比赛2024",
+			"imgUrl": "/image/events/Fashion-Award-2024.png",
+			"textList": [
+				{
+					"paragraph": [
+						{
+							"text": "秉承着激发学生使用AI进行时尚设计的创新能力的初衷，Code-Create和香港理工大学时装及纺织学院（SFT）共同举办了“AiDA X SFT AI时尚设计比赛2024”让学生们在比赛中获得宝贵的AiDA实践经验，为未来的时尚设计行业打下了坚实的基础，成为时尚界的AI先锋。"
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": " 此次比赛面向全体SFT 学生，最终获奖者将赢取丰厚奖金（最高可达2万港币），获得在BESFXXK的实习机会（将与著名设计师Lim Jae Hyuk先生合作设计BESFXXK 系列，该系列将在纽约时装周和巴黎时装周上展出）及更多惊喜哦！扫描二维码获取更多比赛信息。"
+						}
+					]
+				}
+			]
+		}
+	]
+}

src/assets/style/style.css

@@ -2506,4 +2506,7 @@ textarea:focus {
 }
 .justify-center {
   justify-content: center;
+}
+.flex-1{
+	flex: 1;
 }

src/assets/style/style.less

@@ -2424,4 +2424,7 @@ textarea:focus{
 }
 .justify-center {
   justify-content: center;
+}
+.flex-1{
+	flex: 1;
 }

src/component/Administrator/Transaction/TransactionTable.vue

@@ -148,6 +148,7 @@
                     total: total,
                     showQuickJumper: true,
                     bordered: false,
+                    showTotal: (total) => `Total Transaction: ${total}`
                 }"
             >
 				<template #bodyCell="{ column, text, record, index }">
@@ -465,13 +466,16 @@ export default defineComponent({
                 (rv: any) => {
                     if (rv) {
                         // this.dataList = rv
+                        // console.log('rv----',rv);
+                        
                         filter.dataList = rv.content;
                         filterData.total = rv.total;
                         filter.tableLoading = false;
-                        filterData.totalPayer = rv.content.reduce((total: number, item: any) => {
-                            const value = item && item.status === 'Success' ? parseFloat(item.payerTotal) : 0;
-                            return total + (isNaN(value) ? 0 : value);
-                        }, 0);
+                        filterData.totalPayer = rv.totalAmount;
+                        // filterData.totalPayer = rv.content.reduce((total: number, item: any) => {
+                        //     const value = item && item.status === 'Success' ? parseFloat(item.payerTotal) : 0;
+                        //     return total + (isNaN(value) ? 0 : value);
+                        // }, 0);
 
                         // this.workspaceItem.position = this.singleTypeList[0].label
                     }

src/component/Canvas/CanvasEditor/commands/BackgroundCommands.js

@@ -207,7 +207,8 @@ export class BackgroundSizeCommand extends Command {
     this.bgLayer = this.layers.value.find((layer) => layer.isBackground);
 
     // 记录原尺寸
-    this.backgroundObject = findObjectById(this.canvas, this.bgLayer.fabricObject.id).object;
+	this.bgId = this.bgLayer.fabricObject?.id || this.bgLayer.fabricObjects?.[0]?.id;
+    this.backgroundObject = findObjectById(this.canvas, this.bgId).object;
 
     this.oldWidth = this.backgroundObject.width;
     this.oldHeight = this.backgroundObject.height;

src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js

@@ -106,7 +106,6 @@ export class FillGroupLayerBackgroundCommand extends Command {
         });
       }
     }
-
     // 判断fabricObjects是否是组对象
     const firstObj = layer.fabricObjects?.[0] || null;
     // 如果没有找到第一个对象，则直接添加到当前画布
@@ -173,8 +172,8 @@ export class FillGroupLayerBackgroundCommand extends Command {
     }
     const canvasObj = findObjectById(this.canvas, firstObj?.id)?.object;
     if (
-      (canvasObj && canvasObj.type === "group") ||
-      canvasObj._objects?.length > 0
+      canvasObj && (canvasObj.type === "group" ||
+      canvasObj._objects?.length > 0)
     ) {
       this.newFill.set({
         left: 0,

src/component/Canvas/CanvasEditor/commands/FillRepeatCommand.js

@@ -7,12 +7,11 @@ import {
 	insertObjectAtZIndex,
 	removeCanvasObjectByObject,
 	createPatternTransform,
+	getTransformScaleAngle,
 	imageAddGapToCanvas,
 } from "../utils/helper";
 import { restoreFabricObject } from "../utils/objectHelper";
 
-const scale = 0.3;// 默认缩放比例
-
 export const FillSourceToBase64 = (source) => {
 	if (source?.toDataURL) {
 		return source.toDataURL?.();
@@ -39,7 +38,6 @@ export class FillRepeatCommand extends Command {
 		this.fillRepeat = options.fillRepeat;
 		this.oldObjects = null;
 		this.oldLocked = null;
-		this.oldIsDisableUnlock = null;
 	}
 
 	async execute() {
@@ -64,17 +62,15 @@ export class FillRepeatCommand extends Command {
 				);
 			});
 			image.set({
-				id: object.id,
-				layerId: object.layerId,
-				layerName: object.layerName,
+				...this.copyObjectProperties(object),
 				...(fill_.originalInfo || {
 					top: object.top,
 					left: object.left,
 				})
 			});
 			layer.fabricObjects = [image.toObject(["id", "layerId", "layerName"])];
-			this.oldLocked = layer.locked;
-			layer.locked = false;
+			// this.oldLocked = layer.locked;
+			// layer.locked = false;
 
 			this.canvas.add(image);
 			this.canvas.remove(object);
@@ -113,23 +109,32 @@ export class FillRepeatCommand extends Command {
 			const fdObject = this.canvasManager.getFixedLayerObject();
 			const bgObject = this.canvasManager.getBackgroundLayerObject();
 			const tObject = fdObject || bgObject;
+			const tWidth = tObject.width;
+			const tHeight = tObject.height;
+
+			// const offsetX = object.fill?.hasOwnProperty("offsetX") ? object.fill.offsetX : tObject.width / 2;
+			// const offsetY = object.fill?.hasOwnProperty("offsetY") ? object.fill.offsetY : tObject.height / 2;
+			const scaleX_ = tWidth / img.width / 5;
+			const scaleY_ = tHeight / img.height / 5;
+			const scale_ = tWidth > tHeight ? scaleX_ : scaleY_;
+
+			const patternTransform = object.fill?.hasOwnProperty("patternTransform") ? object.fill.patternTransform : createPatternTransform(scale_, 0);
+			const scale = getTransformScaleAngle(patternTransform).scale;
+			const offsetX = tWidth / 2 - img.width * scale / 2;
+			const offsetY = tHeight / 2 - img.height * scale / 2;
 			const pattern = new fabric.Pattern({
 				source: img,
 				repeat: this.fillRepeat,
-				patternTransform: object.fill?.hasOwnProperty("patternTransform") ? object.fill.patternTransform : createPatternTransform(scale, 0),
-				offsetX: object.fill?.hasOwnProperty("offsetX") ? object.fill.offsetX : tObject.width / 2, // 水平偏移
-				offsetY: object.fill?.hasOwnProperty("offsetY") ? object.fill.offsetY : tObject.height / 2, // 垂直偏移
+				patternTransform,
+				offsetX, // 水平偏移
+				offsetY, // 垂直偏移
 			});
 			const rect = new fabric.Rect({
-				id: object.id,
-				layerId: object.layerId,
-				layerName: object.layerName,
+				...this.copyObjectProperties(object),
 				fill_,
 			});
 			layer.fabricObjects = [rect.toObject(["id", "layerId", "layerName"])];
-			this.oldLocked = layer.locked;
-			// this.oldIsDisableUnlock = layer.isDisableUnlock;
-			// layer.isDisableUnlock = true;
+			// this.oldLocked = layer.locked;
 			if (this.oldObjects.type === "rect") {
 				rect.set({
 					width: object.width,
@@ -148,14 +153,14 @@ export class FillRepeatCommand extends Command {
 				let scaleX = tObject.scaleX || 1;
 				let scaleY = tObject.scaleY || 1;
 				rect.set({
-					width: tObject.width,
-					height: tObject.height,
-					top: tObject.top - tObject.height * scaleY / 2,
-					left: tObject.left - tObject.width * scaleX / 2,
+					width: tWidth,
+					height: tHeight,
+					top: tObject.top - tHeight * scaleY / 2,
+					left: tObject.left - tWidth * scaleX / 2,
 					scaleX,
 					scaleY,
 				});
-				layer.locked = true;
+				// layer.locked = true;
 			}
 			rect.set("fill", pattern);
 			this.canvas.add(rect);
@@ -184,14 +189,23 @@ export class FillRepeatCommand extends Command {
 		this.canvas.remove(object);
 		this.canvas.add(this.oldObjects);
 		layer.fabricObjects = [this.oldObjects.toObject(["id", "layerId", "layerName"])];
-		layer.locked = this.oldLocked;
-		// layer.isDisableUnlock = this.oldIsDisableUnlock;
+		// layer.locked = this.oldLocked;
 		await this.layerManager?.updateLayersObjectsInteractivity();
 		await this.layerManager?.sortLayersWithTool?.();
 		this.canvas.renderAll();
 		this.canvasManager.thumbnailManager?.generateLayerThumbnail(this.layerId);
 		return true;
 	}
+
+	// 复制原对象的属性
+	copyObjectProperties(object) {
+		return {
+			id: object.id,
+			layerId: object.layerId,
+			layerName: object.layerName,
+			isPrintTrims: object.isPrintTrims,
+		}
+	}
 }
 
 
@@ -230,6 +244,10 @@ export class FillRepeatChangeCommand extends Command {
 			...this.newPattern,
 		});
 		object.set("fill", pattern);
+		if (object.globalCompositeOperation_) {
+			object.globalCompositeOperation = object.globalCompositeOperation_;
+			object.globalCompositeOperation_ = null;
+		}
 		this.canvas.renderAll();
 		return true;
 	}
@@ -276,7 +294,7 @@ export class FillRepeatGapChangeCommand extends Command {
 		this.oldGapY = null;
 	}
 
-	async execute(isUndo = false) {
+	async execute(isCommand = true, isUndo = false) {
 		const { layer } = findLayerRecursively(this.layers.value, this.layerId);
 		if (!layer || !layer.fabricObjects || layer.fabricObjects.length === 0) {
 			console.warn("图层不存在或没有 fabric 对象");
@@ -315,6 +333,10 @@ export class FillRepeatGapChangeCommand extends Command {
 		const fill = object.get("fill");
 		fill.source = imageAddGapToCanvas(image, object.fill_.gapX, object.fill_.gapY);
 		object.set("fill", new fabric.Pattern(fill));
+		if (isCommand && object.globalCompositeOperation_) {
+			object.globalCompositeOperation = object.globalCompositeOperation_;
+			object.globalCompositeOperation_ = null;
+		}
 		this.canvas.renderAll();
 		return true;
 	}
@@ -324,7 +346,7 @@ export class FillRepeatGapChangeCommand extends Command {
 			console.warn("没有旧间隙可恢复");
 			return false;
 		}
-		await this.execute(true);
+		await this.execute(true, true);
 		return true;
 	}
 

src/component/Canvas/CanvasEditor/commands/LassoCutoutCommand.js

@@ -147,11 +147,11 @@ export class LassoCutoutCommand extends CompositeCommand {
       }
 
       // 确定源图层
-      const sourceLayer = this.layerManager.getActiveLayer();
-      if (!sourceLayer) {
-        console.error("无法执行套索抠图：源图层无效");
-        return false;
-      }
+    //   const sourceLayer = this.layerManager.getActiveLayer();
+    //   if (!sourceLayer) {
+    //     console.error("无法执行套索抠图：源图层无效");
+    //     return false;
+    //   }
 
       // 获取源图层的所有对象（包括子图层）
       // const sourceObjects = this._getLayerObjects(sourceLayer);
@@ -225,7 +225,7 @@ export class LassoCutoutCommand extends CompositeCommand {
 
 			const layers = this.layerManager.layers.value;
 			var topLayerIndex = 0;
-			layers.forEach((layer, index) => {
+			if(this.originalLayer)layers.forEach((layer, index) => {
 				if (layer.id === this.originalLayer.id) {
 					topLayerIndex = index;
 				}else if (layer.children.length > 0) {

src/component/Canvas/CanvasEditor/commands/LayerCommands.js

@@ -280,8 +280,13 @@ export class PasteLayerCommand extends Command {
         isCut: undefined,
         serializedObjects: undefined,
       };
-
-      if (this.insertIndex !== undefined && this.insertIndex !== null) {
+      if(this.newLayer.isPrintTrims){
+		this.layers.value.forEach((layer) => {
+          if (layer.isPrintTrimsGroup) {
+            layer.children.unshift(this.newLayer);
+          }
+        })
+	  }else if (this.insertIndex !== undefined && this.insertIndex !== null) {
         this.layers.value.splice(this.insertIndex, 0, this.newLayer);
       } else {
         this.layers.value.push(this.newLayer);

src/component/Canvas/CanvasEditor/commands/PartCommands.js

@@ -0,0 +1,56 @@
+import { Command } from "./Command.js";
+
+/**
+ * 部件绘制命令
+ */
+export class PartDrawCommand extends Command {
+	constructor(options) {
+		super({
+			name: "部件绘制命令",
+			saveState: false,
+		});
+
+		this.canvas = options.canvas;
+		this.partManager = options.partManager;
+		this.partCanvas = options.partCanvas;
+		this.oldPartCanvas = this.partManager.partCanvas;
+	}
+	execute() {
+		this.partManager.drawPartCanvas(this.partCanvas);
+		return true;
+	}
+	undo() {
+		this.partManager.drawPartCanvas(this.oldPartCanvas);
+		return true;
+	}
+}
+/**
+ * 部件点选绘制命令
+ */
+export class PartPointDrawCommand extends Command {
+	constructor(options) {
+		super({
+			name: "部件点选绘制命令",
+			saveState: false,
+		});
+
+		this.canvas = options.canvas;
+		this.partManager = options.partManager;
+		this.partCanvas = options.partCanvas;
+		this.pointList = options.pointList;
+		this.oldPartCanvas = this.partManager.partCanvas;
+		this.oldPointList = [...this.partManager.pointList];
+	}
+	async execute() {
+		const list = [...this.pointList];
+		const canvas = this.partCanvas;
+		const res = await this.partManager.pointDrawPartCanvas(list, canvas);
+		return res;
+	}
+	async undo() {
+		const list = [...this.oldPointList];
+		const canvas = this.oldPartCanvas;
+		const res = await this.partManager.pointDrawPartCanvas(list, canvas);
+		return res;
+	}
+}

src/component/Canvas/CanvasEditor/commands/RedGreenCommands.js

@@ -159,6 +159,8 @@ export class BatchInitializeRedGreenModeCommand extends Command {
             absolutePositioned: true,
             opacity: 0.01, // 设置为几乎透明
             id: generateId("redGreenImageMask_"),
+			rx: 15,
+			ry: 15,
           });
           // this.canvas.add(this.redGreenImageMask);
           this.canvas.clipPath = this.redGreenImageMask;

src/component/Canvas/CanvasEditor/commands/StateCommands.js

@@ -25,7 +25,7 @@ export class TransformCommand extends Command {
     this.layerManager = options.layerManager;
     this.layers = options.layers || null;
     this.lastSelectLayerId = options.lastSelectLayerId || null; // 最后选择的图层ID
-
+	this.isCommand = options.isCommand == undefined ? true : options.isCommand
     const targetObject =
       findObjectById(this.canvas, this.objectId)?.object || null;
 
@@ -189,6 +189,11 @@ export class TransformCommand extends Command {
       object.set(key, value);
     });
 
+	if(this.isCommand && object.globalCompositeOperation_){
+		object.globalCompositeOperation = object.globalCompositeOperation_;
+		object.globalCompositeOperation_ = null;
+	}
+
     // 确保对象更新
     object.setCoords();
   }

src/component/Canvas/CanvasEditor/components/BrushControlPanel.vue

@@ -154,6 +154,8 @@ const isVisible = computed(() => {
     OperationType.ERASER,
     OperationType.RED_BRUSH,
     OperationType.GREEN_BRUSH,
+    OperationType.PART_BRUSH,
+    OperationType.PART_ERASER,
   ].includes(props.activeTool);
 });
 

src/component/Canvas/CanvasEditor/components/HeaderMenu.vue

@@ -11,6 +11,7 @@ const layerManager = inject("layerManager");
 const isShowLayerPanel = inject("isShowLayerPanel", ref(false));
 
 const props = defineProps({
+  title: String,
   activeTool: String,
   canvasWidth: Number,
   canvasHeight: Number,
@@ -22,6 +23,7 @@ const props = defineProps({
     default: true, // 是否显示图层面板
   },
   isBackgroundChangeable: Boolean,
+  isChangeCanvasSize: Boolean,
 });
 
 const emit = defineEmits([
@@ -273,7 +275,7 @@ onMounted(() => {
 <template>
   <div class="canvas-header">
     <div class="canvas-header-wrapper">
-      <span class="canvas-title">{{ $t('Canvas.Canvas') }}</span>
+      <span class="canvas-title">{{ props.title || $t("Canvas.Canvas") }}</span>
       <!-- 默认设置 -->
       <!-- v-if="
         !activeTool ||
@@ -284,6 +286,7 @@ onMounted(() => {
         <div class="setting-group">
           <span class="setting-label">{{ $t("Canvas.width") }}</span>
           <a-input-number
+		    :disabled="!isChangeCanvasSize"
             :value="canvasWidth?.toFixed(2)"
             class="setting-input"
             :min="1"
@@ -300,6 +303,7 @@ onMounted(() => {
         <div class="setting-group">
           <span class="setting-label">{{ $t("Canvas.height") }}</span>
           <a-input-number
+		    :disabled="!isChangeCanvasSize"
             :value="canvasHeight?.toFixed(2)"
             class="setting-input"
             :min="1"

src/component/Canvas/CanvasEditor/components/LayersPanel/LayersList.vue

@@ -242,7 +242,7 @@ const canDeleteComputed = computed(() => {
     return parentLayer?.children?.length > 1;
   }
   // 否则直接返回根图层的可删除状态
-  return props.layers.length > 3;
+  return true;
 });
 </script>
 

src/component/Canvas/CanvasEditor/components/LayersPanel/LayersPanel.vue

@@ -414,14 +414,14 @@ function deleteSelectedLayers() {
   }
 
   // 检查删除后是否还有足够的普通图层
-  const remainingNormalLayers = layers.value.filter(
-    (layer) => !layer.isBackground && !layer.isFixed && !selectedLayerIds.value.includes(layer.id)
-  ).length;
+//   const remainingNormalLayers = layers.value.filter(
+//     (layer) => !layer.isBackground && !layer.isFixed && !selectedLayerIds.value.includes(layer.id)
+//   ).length;
 
-  if (remainingNormalLayers < 1) {
-    console.warn("不能删除所有普通图层");
-    return;
-  }
+//   if (remainingNormalLayers < 1) {
+//     console.warn("不能删除所有普通图层");
+//     return;
+//   }
 
   // 确认删除
   if (selectedLayers.length > 1) {
@@ -584,15 +584,16 @@ function handleLayerClick(layer, event) {
       // 如果不是多选模式，才可激活图层
       // 1.如果是组，则设置组下的第一个子图层为活动图层
       // 2.否则直接设置活动图层
-      if (isGroupLayerType(layer) && layer.children && layer.children.length > 0) {
+      if (isGroupLayerType(layer) && layer.children && layer.children.length > 0 && !layer.isPrintTrimsGroup) {
         // 如果是组图层，设置第一个子图层为活动图层
         layerManager?.setAllActiveGroupLayerCanvasObject?.(layer);
         setActiveLayer(layer.children[0].id, { parentId: layer.id });
       } else {
+		let id = layer.isPrintTrimsGroup ? layer.children?.[0]?.id || layer.id : layer.id;
         // 选中画布中的图层对象
-        layerManager?.selectLayerObjects(layer.id);
+        layerManager?.selectLayerObjects(id);
         // 否则直接设置当前图层为活动图层
-        setActiveLayer(layer.id);
+        setActiveLayer(id);
         layerManager?.updateLayersObjectsInteractivity();
       }
     }
@@ -876,13 +877,15 @@ function toggleSelectedLayersVisibility() {
 
 function canDeleteLayers() {
   const selectedLayers = getSelectedLayers();
+  console.log(selectedLayers);
   if (selectedLayers.length === 0) return false;
-
   // 检查是否包含不能删除的图层
   const undeletableLayers = selectedLayers.filter((layer) => layer.isBackground || layer.isFixed);
 
   if (undeletableLayers.length > 0) return false;
 
+  return true
+
   // 检查删除后是否还有足够的普通图层
   const remainingNormalLayers = layers.value.filter(
     (layer) => !layer.isBackground && !layer.isFixed && !selectedLayerIds.value.includes(layer.id)

src/component/Canvas/CanvasEditor/components/PalletPanel/pallet.vue

@@ -119,7 +119,7 @@ export default defineComponent({
 		})
 		const palletRef = ref(null)
 		watch(()=>palletData.color_,(newVal:any)=>{
-			if(!newVal?.rgba?.r)return
+			if(newVal?.rgba?.r == null)return
 			if(palletData.color?.gradient?.gradientShow){
 				palletData.color.gradient.gradientList[palletData.color.gradient.selectIndex].rgba = {
 					r:newVal.rgba.r,
@@ -143,7 +143,7 @@ export default defineComponent({
 		},{deep: true })
 		const setOperate = ()=>{
 			if(!palletData.color.rgba)return message.info(t('DesignDetailAlter.jsContent7'))
-			palletData.color.rgba = palletData.color?.rgba?.r?palletData.color.rgba:{r:0,g:0,b:0,a:1}
+			palletData.color.rgba = palletData.color?.rgba?.r != null?palletData.color.rgba:{r:0,g:0,b:0,a:1}
 			palletData.gradient.selectIndex = 0
 			palletData.gradient.gradientShow = true
 			if(!palletData.color.gradient){
@@ -257,7 +257,7 @@ export default defineComponent({
 
 		}
 		const openPallet = ()=>{
-			if(palletData.palletShow && props.selectColor?.rgba?.r){
+			if(palletData.palletShow && props.selectColor?.rgba?.r != null){
 				if(props.selectColor.gradient){
 					palletData.color_.rgba = props.selectColor.gradient.gradientList[0].rgba
 				}else{

src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue

@@ -20,13 +20,13 @@
 							<img
 								src="/src/assets/images/canvas/shubiao-l.png"
 							/>
-							<span>Left Click: Add</span>
+							<span>{{ t("Canvas.LeftClickAdd") }}</span>
 						</div>
 						<div>
 							<img
 								src="/src/assets/images/canvas/shubiao-r.png"
 							/>
-							<span>Right Click: Remove</span>
+							<span>{{ t("Canvas.RightClickRemove") }}</span>
 						</div>
 					</div>
 				</div>
@@ -57,15 +57,15 @@
 							$t("Canvas.creation")
 						}}</span>
 					</div>
-					<div class="action-btn" @click="onCopyCreate">
+					<!-- <div class="action-btn" @click="onCopyCreate">
 						<svg-icon name="CCut" size="26" />
 						<span class="btn-text">{{
 							$t("Canvas.CreateAndCopy")
 						}}</span>
-					</div>
+					</div> -->
 					<div class="action-btn" @click="onReset">
 						<svg-icon name="CCut" size="26" />
-						<span class="btn-text">清空当前点位</span>
+						<span class="btn-text">{{ $t("Canvas.TheClearlySelectedContent") }}</span>
 					</div>
 				</div>
 			</div>
@@ -76,23 +76,9 @@
 <script setup>
 	import { ref, onMounted, watch } from "vue";
 	import { useI18n } from "vue-i18n";
-	import {
-		CreateSelectionCommand,
-		InvertSelectionCommand,
-		FeatherSelectionCommand,
-		FillSelectionCommand,
-	} from "../commands/SelectionCommands";
-	import { ToolCommand } from "../commands/ToolCommands";
-	import {
-		LassoCutoutCommand,
-		ClearSelectionCommand,
-		// CutSelectionToNewLayerCommand,
-	} from "../commands/LassoCutoutCommand";
-
 	import { OperationType } from "../utils/layerHelper";
-	import { ClearSelectionContentCommand } from "../commands/ClearSelectionContentCommand";
-	import { CutSelectionToNewLayerCommand } from "../commands/CutSelectionToNewLayerCommand";
-
+	// 国际化
+	const { t } = useI18n();
 	const props = defineProps({
 		canvas: {
 			type: Object,
@@ -137,32 +123,30 @@
 	const toolList = [
 		{
 			type: OperationType.PART,
-			label: "Point Selection",
+			label: t("Canvas.PointSelection"),
 			icon: "CPoint",
 			size: "20",
 		},
 		{
 			type: OperationType.PART_RECTANGLE,
-			label: "Marquee Selection",
+			label: t("Canvas.MarqueeSelection"),
 			icon: "CMarquee",
 			size: "20",
 		},
 		{
 			type: OperationType.PART_BRUSH,
-			label: "Brush Selection",
+			label: t("Canvas.BrushSelection"),
 			icon: "CBrush2",
 			size: "16",
 		},
 		{
 			type: OperationType.PART_ERASER,
-			label: "Erase",
+			label: t("Canvas.Erase"),
 			icon: "CEraser2",
 			size: "22",
 		},
 	];
 
-	// 国际化
-	const { t } = useI18n();
 
 	onMounted(() => {});
 
@@ -182,12 +166,6 @@
 				show();
 				// 根据工具类型设置选区类型
 				toolType.value = newTool;
-
-				// 更新选区管理器的选区类型
-				// if (props.partManager) {
-				// 	props.partManager.setPartType(toolType.value);
-				// 	props.partManager.setupPartEvents();
-				// }
 			} else {
 				close();
 			}
@@ -220,12 +198,6 @@
 		if (props.toolManager) {
 			props.toolManager.setToolWithCommand(type);
 		}
-
-		// // 备用方案：如果没有 toolManager，直接更新 partManager
-		// else if (props.partManager) {
-		// 	props.partManager.setPartType(type);
-		// 	props.partManager.setupPartEvents();
-		// }
 	}
 
 	// 创建
@@ -418,35 +390,11 @@
 
 	.tool-actions {
 		display: grid;
-		grid-template-columns: repeat(3, 1fr);
+		grid-template-columns: repeat(2, 1fr);
 		gap: 5px;
 		padding: 0 30px;
 	}
 
-	/* 平板适配 - 每行4个按钮 */
-	@media screen and (max-width: 768px) {
-		.tool-actions {
-			grid-template-columns: repeat(3, 1fr);
-			gap: 8px 6px;
-			padding: 0 8px;
-		}
-	}
-
-	/* 手机适配 - 每行3个按钮 */
-	@media screen and (max-width: 480px) {
-		.tool-actions {
-			grid-template-columns: repeat(3, 1fr);
-			gap: 6px 4px;
-			padding: 0 6px;
-		}
-
-		.header-btn {
-			font-size: 11px;
-			padding: 2px 4px;
-			min-width: 28px;
-		}
-	}
-
 	.action-btn {
 		display: flex;
 		// flex-direction: column;

src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue

@@ -14,7 +14,7 @@
 			<span class="label">{{ t("Canvas.scale") }}</span>
 			<slider
 				:min="1"
-				:max="500"
+				:max="1000"
 				:step="1"
 				is-input
 				:tipFormatter="(v) => `${scale}%`"
@@ -52,19 +52,19 @@
 		<div class="repeat-setting-item">
 			<span class="label">{{ t("Canvas.offset") }}</span>
 			<offset-tool
-				:left="offsetX"
-				:top="offsetY"
-				@input="(e) => emit('inputFillOffset', e)"
-				@change="(e) => emit('changeFillOffset', e)"
+				:left="offset.x"
+				:top="offset.y"
+				@input="inputFillOffset"
+				@change="changeFillOffset"
 				:show-dish="false"
 			/>
 		</div>
 		<div class="repeat-setting-item offset">
 			<offset-tool
-				:left="offsetX"
-				:top="offsetY"
-				@input="(e) => emit('inputFillOffset', e)"
-				@change="(e) => emit('changeFillOffset', e)"
+				:left="offset.x"
+				:top="offset.y"
+				@input="inputFillOffset"
+				@change="changeFillOffset"
 				:show-input="false"
 			/>
 		</div>
@@ -79,29 +79,6 @@
 	import Slider from "../tools/Slider.vue";
 	import { useI18n } from "vue-i18n";
 	const { t } = useI18n();
-
-	const props = defineProps({
-		object: {
-			required: true,
-			type: Object,
-		},
-	});
-	const angle = computed(
-		() => getTransformScaleAngle(props.object.fill?.patternTransform).angle
-	);
-	const scale = computed(() => {
-		const patternTransform = props.object.fill?.patternTransform;
-		const scaleValue = getTransformScaleAngle(patternTransform).scale * 100;
-		return Number(Number(scaleValue).toFixed(2));
-	});
-	const gapX = computed(() => props.object.fill_?.gapX || 0);
-	const gapY = computed(() => props.object.fill_?.gapY || 0);
-	const offsetX = computed(
-		() => (props.object.fill?.offsetX / props.object.width) * 100
-	);
-	const offsetY = computed(
-		() => (props.object.fill?.offsetY / props.object.height) * 100
-	);
 	const emit = defineEmits([
 		"inputFillAngle",
 		"changeFillAngle",
@@ -112,13 +89,63 @@
 		"inputFillGap",
 		"changeFillGap",
 	]);
-	const inputFillScale = (e) => {
+
+	const props = defineProps({
+		object: {
+			required: true,
+			type: Object,
+		},
+	});
+	const angle = computed(
+		() => getTransformScaleAngle(props.object.fill?.patternTransform).angle
+	);
+	const gapX = computed(() => props.object.fill_?.gapX || 0);
+	const gapY = computed(() => props.object.fill_?.gapY || 0);
+
+	// 缩放比例
+	const scale = computed(() => {
+		const object = props.object;
+		const patternTransform = object.fill?.patternTransform;
+		const scaleValue = getTransformScaleAngle(patternTransform).scale;
+		const scaleX = scaleValue / (object.width / object.fill_.width / 5);
+		const scaleY = scaleValue / (object.height / object.fill_.height / 5);
+		const scaleXY = object.width > object.height ? scaleX : scaleY;
+		return Number(Number(scaleXY * 100).toFixed(2));
+	});
+	const inputFillScale = (e) => setFillScale(e, true);
+	const changeFillScale = (e) => setFillScale(e, false);
+	const setFillScale = (e, isInput) => {
+		const object = props.object;
 		const scale = e / 100;
-		emit("inputFillScale", scale);
+		const scaleX = (object.width / object.fill_.width / 5) * scale;
+		const scaleY = (object.height / object.fill_.height / 5) * scale;
+		const scaleXY = object.width > object.height ? scaleX : scaleY;
+		emit(isInput ? "inputFillScale" : "changeFillScale", scaleXY);
 	};
-	const changeFillScale = (e) => {
-		const scale = e / 100;
-		emit("changeFillScale", scale);
+
+	// 偏移量
+	const offset = computed(() => {
+		const object = props.object;
+		const patternTransform = object.fill?.patternTransform;
+		const scale = getTransformScaleAngle(patternTransform).scale;
+		const offsetX = object.fill?.offsetX;
+		const offsetY = object.fill?.offsetY;
+		const twidth = object.fill_?.width;
+		const theight = object.fill_?.height;
+		const x = ((offsetX + (twidth * scale) / 2) * 100) / object.width;
+		const y = ((offsetY + (theight * scale) / 2) * 100) / object.height;
+		return { x, y };
+	});
+	const inputFillOffset = (e) => setFillOffset(e, true);
+	const changeFillOffset = (e) => setFillOffset(e, false);
+	const setFillOffset = (e, isInput) => {
+		const { left, top } = e;
+		const object = props.object;
+		const patternTransform = object.fill?.patternTransform;
+		const scale = getTransformScaleAngle(patternTransform).scale;
+		const x = (left / 100) * object.width - (object.fill_?.width * scale) / 2;
+		const y = (top / 100) * object.height - (object.fill_?.height * scale) / 2;
+		emit(isInput ? "inputFillOffset" : "changeFillOffset", { x, y });
 	};
 </script>
 
@@ -126,6 +153,7 @@
 	.repeat-setting {
 		user-select: none;
 		width: 228px;
+		overflow: hidden;
 		> .title {
 			line-height: 35px;
 			font-size: 14px;

src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue

@@ -22,7 +22,7 @@
 						v-for="v in activeObjects"
 						:key="v.id"
 					>
-						<div class="title">{{ v.layer?.name }}</div>
+						<!-- <div class="title">{{ v.layer?.name }}</div> -->
 						<div class="list">
 							<div
 								class="input"
@@ -125,7 +125,10 @@
 									"
 									:options="selectOptions"
 									@change="(e) => changeFillRepeat(e, v)"
-									:disabled="v.layer?.metadata?.level2Type === 'Embroidery'"
+									:disabled="
+										v.layer?.metadata?.sourceData?.type ===
+										'trims'
+									"
 								/>
 							</div>
 							<!-- 平铺设置 -->
@@ -283,10 +286,10 @@
 		activeObjects.value.forEach((v) => {
 			v.layer = props.layerManager.getLayerById(v.layerId);
 		});
-		if (activeObjects.value.length === 0) {
-			close();
-		} else {
+		if (activeObjects.value.length === 1) {
 			show();
+		} else {
+			close();
 		}
 	};
 	//取消当前选中
@@ -312,6 +315,7 @@
 			layerManager: props.layerManager,
 			layers: layers,
 			lastSelectLayerId: lastSelectLayerId,
+			isCommand,
 		});
 		if (isCommand) {
 			props.commandManager.execute(cmd);
@@ -333,6 +337,7 @@
 		const finalState = computeAngleState(angle, obj, initialState);
 		transformObject(obj, initialState, finalState, false);
 		if (!obj.hasOwnProperty("oldState")) obj.oldState = initialState;
+		props.canvasManager.beforeChangeCanvas([obj]);
 	};
 	const changeAngle = (angle, obj) => {
 		var initialState;
@@ -425,6 +430,7 @@
 		});
 		obj.set("fill", pattern);
 		props.canvas.renderAll();
+		props.canvasManager.beforeChangeCanvas([obj]);
 	};
 	const changeFillAngle = (angle, obj) => {
 		const fill = obj.get("fill");
@@ -439,16 +445,17 @@
 		if (!obj.oldPattern) obj.oldPattern = obj.get("fill");
 		const pattern = new fabric.Pattern({
 			...obj.get("fill"),
-			offsetX: (value.left / 100) * obj.width,
-			offsetY: (value.top / 100) * obj.height,
+			offsetX: value.x,
+			offsetY: value.y,
 		});
 		obj.set("fill", pattern);
 		props.canvas.renderAll();
+		props.canvasManager.beforeChangeCanvas([obj]);
 	};
 	const changeFillOffset = (value, obj) => {
 		const pattern = new fabric.Pattern({
-			offsetX: (value.left / 100) * obj.width,
-			offsetY: (value.top / 100) * obj.height,
+			offsetX: value.x,
+			offsetY: value.y,
 		});
 		changeFill(obj, pattern);
 	};
@@ -463,6 +470,7 @@
 		});
 		obj.set("fill", pattern);
 		props.canvas.renderAll();
+		props.canvasManager.beforeChangeCanvas([obj]);
 	};
 	const changeFillScale = (scale, obj) => {
 		const fill = obj.get("fill");
@@ -495,7 +503,8 @@
 			newGapY: gapY,
 			record: true,
 		});
-		cmd.execute();
+		cmd.execute(false);
+		props.canvasManager.beforeChangeCanvas([obj]);
 	};
 	const changeFillGap = (gapX, gapY, obj) => {
 		if (obj.oldFill_) {
@@ -761,7 +770,7 @@
 	}
 
 	.tool-content {
-		overflow-y: auto;
+		// overflow-y: auto;
 		max-height: 20rem;
 		margin-top: 1rem;
 		padding: 0 1.5rem;

src/component/Canvas/CanvasEditor/managers/CanvasManager.js

@@ -9,7 +9,6 @@ import {
   isGroupLayer,
   OperationType,
   OperationTypes,
-  findLayer,
   createLayer,
   LayerType,
   SpecialLayerId,
@@ -20,7 +19,6 @@ import { AnimationManager } from "./animation/AnimationManager";
 import { createCanvas } from "../utils/canvasFactory";
 import { CanvasEventManager } from "./events/CanvasEventManager";
 import CanvasConfig from "../config/canvasConfig";
-import { RedGreenModeManager } from "./RedGreenModeManager";
 import { EraserStateManager } from "./EraserStateManager";
 import {
   deepClone,
@@ -70,8 +68,11 @@ export class CanvasManager {
     this.isFixedErasable = options.isFixedErasable || false; // 是否允许擦除固定图层
     this.eraserStateManager = null; // 橡皮擦状态管理器引用
     this.handleCanvasInit = null; // 画布初始化回调函数
+	this.partManager = options.partManager || null; 
 	this.props = options.props || {};
 	this.emit = options.emit || (() => {});
+	this.awaitCanvasRun = null;
+	this.canvasChangeing = false;
     // 初始化画布
     this.initializeCanvas();
   }
@@ -174,7 +175,12 @@ export class CanvasManager {
   _initCanvasEvents() {
     // 添加笔刷图像转换处理回调
     this.canvas.onBrushImageConverted = async (fabricImage) => {
-      await this.addImageToLayer({ fabricImage, targetLayerId: null });
+	  const activeTool = this.toolManager?.activeTool?.value;
+	  if(activeTool === OperationType.PART_BRUSH){
+		this.partManager?.addDrawPartImage(fabricImage);
+      }else{
+        await this.addImageToLayer({ fabricImage, targetLayerId: null });
+	  }
       // 返回false表示使用默认行为（直接添加到画布）
       return false;
     };
@@ -196,6 +202,10 @@ export class CanvasManager {
       console.log("擦除完成", e.targets);
       // 可以在这里保存状态到命令管理器
       const affectedObjects = e.targets || [];
+	  const activeTool = this.toolManager?.activeTool?.value;
+	  if(activeTool === OperationType.PART_ERASER){
+		return this.partManager?.onErasingEnd(affectedObjects);
+      }
       const command = this.eraserStateManager.endErasing(affectedObjects);
       if (command && this.commandManager) {
         await this.commandManager?.executeCommand?.(command);
@@ -327,6 +337,7 @@ export class CanvasManager {
   setupCanvasEvents(activeElementId, layerManager) {
     // 创建画布事件管理器
     this.eventManager = new CanvasEventManager(this.canvas, {
+      canvasManager: this,
       toolManager: this.toolManager,
       animationManager: this.animationManager,
       thumbnailManager: this.thumbnailManager,
@@ -459,6 +470,14 @@ export class CanvasManager {
 	const fheight = fixedLayerObj.height * fixedLayerObj.scaleY
 	const bwidth = backgroundObject.width * backgroundObject.scaleX
 	const bheight = backgroundObject.height * backgroundObject.scaleY
+	console.log(fixedLayerObj.width,
+		fixedLayerObj.scaleX,
+		fixedLayerObj.height,
+		fixedLayerObj.scaleY,
+		backgroundObject.width,
+backgroundObject.scaleX,
+backgroundObject.height,
+backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	if(Math.abs(fwidth/bwidth - fheight/bheight) < 0.1) return;
 	this.canvasWidth.value = fwidth
 	this.canvasHeight.value = fheight
@@ -849,9 +868,9 @@ export class CanvasManager {
 
     return layerObjectByLayerId;
   }
-  getObjectsByIds(ids){
+  getObjectsByIdOrLayerId(ids){
 	const objects = this.canvas.getObjects().filter((obj) => {
-      return ids.includes(obj.id);
+      return ids.includes(obj.id) || ids.includes(obj.layerId);
     });
 	return objects;
   }
@@ -1128,7 +1147,7 @@ export class CanvasManager {
     const glayer = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
 	if(!glayer) return Promise.reject("印花和元素图层组不存在");
 	const ids = glayer.children.map((v) => v.id);
-	const objects = this.getObjectsByIds(ids);
+	const objects = this.getObjectsByIdOrLayerId(ids);
 	const fixedLayerObj = this.getFixedLayerObject();
 	if(!fixedLayerObj) return Promise.reject("固定图层不存在");
 	const flWidth = fixedLayerObj.width
@@ -1139,8 +1158,9 @@ export class CanvasManager {
 	const flScaleY = fixedLayerObj.scaleY
 	const prints = [];
 	const trims = [];
-	objects.forEach((v) => {
-		const sourceData = glayer.children.find((v_) => v_.id === v.id)?.metadata?.sourceData;
+	objects.forEach((v, i) => {
+		const label = glayer.children.find((v_) => (v_.id === v.layerId || v_.id === v.id));
+		const sourceData = label?.metadata?.sourceData;
 		if(!sourceData) return;
 		const obj = {
 			ifSingle: typeof v.fill === "string",
@@ -1152,7 +1172,7 @@ export class CanvasManager {
 			scale: [0, 0],
 			angle: v.angle,
 			name: sourceData.name,
-			priority: sourceData.priority,
+			priority: i + 1,
 			object:{
 				top: 0,
 				left: 0,
@@ -1165,6 +1185,7 @@ export class CanvasManager {
 				blendMode: v.globalCompositeOperation,
 				gapX: 0,// 平铺模式下的间距
 				gapY: 0,// 平铺模式下的间距
+				fill_repeat: "",
 			}
 		}
 		let left = (v.left - (flLeft - flWidth * flScaleX / 2));
@@ -1208,16 +1229,17 @@ export class CanvasManager {
 			obj.location = [left, top];
 			obj.object.gapX = fill_.gapX;
 			obj.object.gapY = fill_.gapY;
+			obj.object.fill_repeat = fill.repeat;
 		}
-		if(obj.level2Type === "Pattern"){
+		if(sourceData.type === "print"){
 			prints.push(obj);
-		}else if(obj.level2Type === "Embroidery"){
+		}else if(sourceData.type === "trims"){
 			trims.push(obj);
 		}
 	})
 	// prints.sort((a, b) => a.ifSingle ? 1 : -1);
-	prints.forEach((v, i) => v.priority = i + 1);
-	trims.forEach((v, i) => v.priority = i + 1);
+	// prints.forEach((v, i) => v.priority = i + 1);
+	// trims.forEach((v, i) => v.priority = i + 1);
 	return {prints, trims};
   }
   
@@ -1304,6 +1326,7 @@ export class CanvasManager {
         canvasColor: this.canvasColor.value,
         activeLayerId: this.layerManager?.activeLayerId?.value,
       };
+	  this.FixJsonIdLoss(data);
       console.log("获取画布JSON数据...", data);
 	  return JSON.stringify(data);
     } catch (error) {
@@ -1311,9 +1334,8 @@ export class CanvasManager {
       throw new Error("获取画布JSON失败");
     }
   }
-
   loadJSON(json, calllBack) {
-
+	this.canvas.loading.value = true;
     // 确保传入的json是字符串格式
     if (typeof json === "object") {
       json = JSON.stringify(json);
@@ -1322,12 +1344,13 @@ export class CanvasManager {
     }
     // 解析JSON字符串
     try {
-      const parsedJson = JSON.parse(json);
+      const parsedJson = window.testCanvasJson || JSON.parse(json);
       console.log("加载画布JSON数据:", parsedJson);
+	  this.FixJsonIdLoss(parsedJson);
       this.canvasWidth.value = parsedJson.canvasWidth || this.width;
       this.canvasHeight.value = parsedJson.canvasHeight || this.height;
       this.canvasColor.value = parsedJson.canvasColor || this.backgroundColor;
-
+      
       // eslint-disable-next-line no-async-promise-executor
       return new Promise(async (resolve, reject) => {
         const tempLayers = parsedJson?.layers || [];
@@ -1402,7 +1425,7 @@ export class CanvasManager {
               // console.log("图层关联验证结果:", isValidate);
               // 排序
               // 使用LayerSort工具重新排列画布对象（如果可用）
-              await this?.layerManager?.layerSort?.rearrangeObjects();
+              await this?.layerManager?.layerSort?.rearrangeObjectsAsync();
 
               this.layerManager.activeLayerId.value = this.layers.value[0]
                 .children?.length
@@ -1441,27 +1464,56 @@ export class CanvasManager {
       throw new Error("解析JSON失败，请检查输入格式: " + error.message);
     }
   }
+  /** 修复JSON数据中的ID丢失问题 */
+  FixJsonIdLoss(json){
+	const layerIds = [];
+	const layers = json?.layers || [];
+	const objects = json?.canvas?.objects || [];
+	layers.forEach((layer) => {
+		layerIds.push(layer.id);
+		layer.children?.forEach((child) => layerIds.push(child.id));
+		if(!layer.fabricObjects?.[0]?.id && !layer.fabricObject?.id){
+			const obj = objects?.find((o) => o.layerId === layer.id);
+			if(obj) {
+				layer.fabricObjects = [{
+					id: obj.id,
+					type: obj.type,
+				}]
+			}
+		}
+	})
+	// 排序
+	objects.sort((a, b) => {
+		if (a.isBackground) return -1;
+		if (b.isBackground) return 1;
+	})
+	// 排除的对象id
+	const excludedObjects = [SpecialLayerId.PART_SELECTOR];
+	json.canvas.objects = objects.filter((v) => {
+		// 指定ID排除
+		if(excludedObjects.includes(v.id)) return false;
+
+		if(v.isBackground || v.isFixed) return true;
+		// 当前图层不存在当前对象
+		if(!layerIds.includes(v.layerId)) return false;
+		return true
+	});
+  }
+
 
   /**
    * 创建其他图层：印花、颜色、元素...
    * @param {Object} otherData - 其他图层数据
   */
-  async createOtherLayers(otherData, isUpdate = false) {
+  async createOtherLayers(otherData) {
 	if (!otherData) return console.warn("otherData 为空不需要添加");
+	let resolve = ()=>{};
+	this.awaitCanvasRun = ()=>(new Promise((v) => resolve = v))
 	const otherData_ = JSON.parse(JSON.stringify(otherData));
 	console.log("==========创建其他图层", otherData_);
 	
-	const updateColor = !!otherData_.color;
-	const updateSpecialGroup = !!otherData_.printObject || !!otherData_.trims;
 	// 删除颜色图层和特殊组图层
-	const ids = [];
-	if(isUpdate){
-		updateColor && ids.push(SpecialLayerId.COLOR)
-		updateSpecialGroup && ids.push(SpecialLayerId.SPECIAL_GROUP)
-	}else{
-		ids.push(SpecialLayerId.COLOR)
-		ids.push(SpecialLayerId.SPECIAL_GROUP)
-	}
+	const ids = [SpecialLayerId.COLOR, SpecialLayerId.SPECIAL_GROUP];
 	this.layers.value = this.layers.value.filter((layer) => {
 	  if(ids.includes(layer.id)){
 	  	ids.push(...layer.children?.map((child) => child.id));
@@ -1469,16 +1521,21 @@ export class CanvasManager {
 	  }
 	  return true;
 	})
-	this.canvas.getObjects().forEach((v) => ids.includes(v.id) && this.canvas.remove(v))
+	this.canvas.getObjects().forEach((v) => {
+		if(ids.includes(v.id) || ids.includes(v.layerId)){
+			this.canvas.remove(v)
+		}
+	})
 
 
 	// 创建颜色图层
-	otherData_.color && await this.createColorLayer(otherData_.color);
+	await this.createColorLayer(otherData_.color);
 
 	const printTrimsLayers = [];// 印花和元素图层
 	const singleLayers = [];// 平铺图层
 	otherData_.printObject?.prints?.forEach((print, index) => {// 印花
 		print.name = t("Canvas.Print") + (index + 1);
+		print.type = "print";
 		if(print.ifSingle){
 			printTrimsLayers.unshift({...print});
 		}else{
@@ -1487,12 +1544,16 @@ export class CanvasManager {
 	})
 	otherData_.trims?.prints?.forEach((trims, index) => {// 元素
 		trims.name = t("Canvas.Elements") + (index + 1);
+		trims.type = "trims";
 		printTrimsLayers.unshift({...trims});
 	})
-	if(isUpdate ? updateSpecialGroup : true){
+	if(printTrimsLayers.length || singleLayers.length){
 		await this.createPrintTrimsLayers(printTrimsLayers, singleLayers);
 	}
 	await this.changeCanvas();
+	console.log("==========创建其他图层成功");
+	resolve();
+	this.awaitCanvasRun = null;
   }
 
   // 设置画布对象的裁剪信息
@@ -1616,8 +1677,8 @@ export class CanvasManager {
 	  let opacity = 1
 	  let flipX = false;
 	  let flipY = false;
-	  let blendMode = BlendMode.MULTIPLY;
-	  if(item.level2Type === "Embroidery") blendMode = BlendMode.NORMAL;// 元素正常
+	  let blendMode = BlendMode.NORMAL;
+	//   if(item.type === "trims") blendMode = BlendMode.NORMAL;// 元素正常
 	  if(item.object){
 		opacity = item.object.opacity
 		flipX = item.object.flipX
@@ -1642,7 +1703,7 @@ export class CanvasManager {
         hasBorders: true,
         isPrintTrims: true,
       });
-      this.canvas.add(image);
+    //   this.canvas.add(image);
 	  let layer = createLayer({
 	    id: id,
 	    name: name,
@@ -1653,7 +1714,8 @@ export class CanvasManager {
 		isPrintTrims: true,
 		blendMode: blendMode,
 	    fabricObjects: [image.toObject(["id", "layerId", "layerName"])],
-		metadata: {sourceData: item, level2Type: item.level2Type},
+		metadata: {sourceData: item},
+		object: image,
 	  })
 	  children.push(layer);
 	};
@@ -1674,15 +1736,15 @@ export class CanvasManager {
 			resolve(tcanvas);
 		}, { crossOrigin: "anonymous" });
 	  })
-	  let scaleX_ = fixedLayerObj.width / image.width * (item.scale?.[0] || 1) / 5;
-	  let scaleY_ = fixedLayerObj.height / image.height * (item.scale?.[1] || 1) / 5;
-	  let scale = fixedLayerObj.width > fixedLayerObj.height ? scaleX_ : scaleY_;
+	  let scaleX_ = flWidth / image.width * (item.scale?.[0] || 1) / 5;
+	  let scaleY_ = flHeight / image.height * (item.scale?.[1] || 1) / 5;
+	  let scale = flWidth > flHeight ? scaleX_ : scaleY_;
       let offsetX = (item.location?.[0] || 0) - image.width * scale / 2
       let offsetY = (item.location?.[1] || 0) - image.height * scale / 2
-	  let top = fixedLayerObj.top - fixedLayerObj.height * fixedLayerObj.scaleY / 2
-	  let left = fixedLayerObj.left - fixedLayerObj.width * fixedLayerObj.scaleX / 2
-	  let scaleX = fixedLayerObj.scaleX
-	  let scaleY = fixedLayerObj.scaleY
+	  let top = flTop - flHeight * flScaleY / 2
+	  let left = flLeft - flWidth * flScaleX / 2
+	  let scaleX = flScaleX
+	  let scaleY = flScaleY
 	  let opacity = 1
 	  let angle = 0
 	  let gapX = 0
@@ -1690,27 +1752,29 @@ export class CanvasManager {
 	  let fillSource = image
 	  let flipX = false;
 	  let flipY = false;
-	  let blendMode = BlendMode.MULTIPLY;
+	  let blendMode = BlendMode.NORMAL;
+	  let fill_repeat = "repeat"
 	  if(item.object){
-	    top += item.object.top * fixedLayerObj.scaleY
-	    left += item.object.left * fixedLayerObj.scaleX
+	    top += item.object.top * flScaleY
+	    left += item.object.left * flScaleX
 	    scaleX *= item.object.scaleX
 	    scaleY *= item.object.scaleY
 		opacity = item.object.opacity
 		angle = item.object.angle
 		flipX = item.object.flipX
 		flipY = item.object.flipY
-		blendMode = item.object.blendMode || BlendMode.MULTIPLY;
+		if(item.object.blendMode) blendMode = item.object.blendMode;
 		gapX = item.object.gapX
 		gapY = item.object.gapY
 		fillSource = imageAddGapToCanvas(image, gapX, gapY);
+		if(item.object.fill_repeat) fill_repeat = item.object.fill_repeat;
 	  }
       let rect = new fabric.Rect({
       	id: id,
       	layerId: id,
       	layerName: name,
-      	width: fixedLayerObj.width,
-      	height: fixedLayerObj.height,
+      	width: flWidth,
+      	height: flHeight,
       	top: top,
       	left: left,
 		scaleX: scaleX,
@@ -1722,7 +1786,7 @@ export class CanvasManager {
 		globalCompositeOperation: blendMode,
       	fill: new fabric.Pattern({
           source: fillSource,
-          repeat: "repeat",
+          repeat: fill_repeat,
           patternTransform: createPatternTransform(scale, item.angle || 0),
           offsetX: offsetX, // 水平偏移
           offsetY: offsetY, // 垂直偏移
@@ -1736,18 +1800,19 @@ export class CanvasManager {
 		},
 		isPrintTrims: true,
       });
-      this.canvas.add(rect);
+    //   this.canvas.add(rect);
 	  let layer = createLayer({
 	    id: id,
 	    name: name,
 	    type: LayerType.BITMAP,
 	    visible: true,
-	    locked: true,
+	    locked: false,
 	    opacity: opacity,
 		isPrintTrims: true,
-		blendMode: BlendMode.MULTIPLY,
+		blendMode: blendMode,
 	    fabricObjects: [rect.toObject(["id", "layerId", "layerName"])],
 		metadata: {sourceData: item},
+		object: rect,
 	  })
 	  children.push(layer);
 	};
@@ -1764,6 +1829,13 @@ export class CanvasManager {
 	//   children.push(layer);
 	// }
 	if(children.length === 0) return;
+	// 印花元素排序
+	if(new Set(children.map(v => v.metadata.sourceData.priority)).size === children.length){
+      children.sort((a, b) => b.metadata.sourceData.priority - a.metadata.sourceData.priority);
+	}
+	children.forEach(layer => {
+		this.canvas.add(layer.object);
+	});
 	const groupRect = new fabric.Rect({});
 	await this.setObjecCliptInfo(groupRect);
 	// 插入组图层
@@ -1786,12 +1858,13 @@ export class CanvasManager {
   /**
    * 画布事件变更后
   */
-  async changeCanvas(){
+  async changeCanvas(fids = [], isBeforeChange = false){
+	if(!isBeforeChange) this.canvasChangeing = false;
 	const fixedLayerObj = this.getFixedLayerObject();
 	if(!fixedLayerObj) return console.warn("固定图层对象不存在", fixedLayerObj)
 	const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
 	if(colorObject){
-		const ids = this.layerManager.getBlendModeLayerIds(SpecialLayerId.SPECIAL_GROUP);
+		const ids = this.layerManager.getBlendModeLayerIds(SpecialLayerId.SPECIAL_GROUP).filter(id => !fids.includes(id));
 		if(ids.length === 0){
 			ids.unshift(SpecialLayerId.SPECIAL_GROUP);
 			await this.setObjecCliptInfo(colorObject);
@@ -1811,6 +1884,24 @@ export class CanvasManager {
 		this.canvas.renderAll();
 	}
   }
+  /** 画布变更之前 */
+  async beforeChangeCanvas(objects){
+	if(this.canvasChangeing) return;
+	const ids = objects.filter(v => {
+		return v.isPrintTrims && v.globalCompositeOperation && v.globalCompositeOperation !== BlendMode.NORMAL
+	}).map(v => v.layerId);
+	if(ids.length > 0){
+		this.canvasChangeing = true;
+		this.canvas.getObjects().forEach(v => {
+			if(ids.includes(v.layerId)){
+				v.globalCompositeOperation_ = v.globalCompositeOperation;
+				v.globalCompositeOperation = BlendMode.NORMAL;
+			}
+		})
+		this.canvas.renderAll();
+		await this.changeCanvas(ids, true);
+	}
+  }
 
   /**
    * 缩放红绿图模式内容以适应当前画布大小

src/component/Canvas/CanvasEditor/managers/LayerManager.js

@@ -1580,7 +1580,7 @@ export class LayerManager {
   /**
    * 排序图层，确保图层顺序: 普通图层 > 固定图层 > 背景图层
    */
-  sortLayers() {
+  async sortLayers() {
     // 对图层进行排序：背景图层在最底层（数组最后），固定图层在中间
     this.layers.value.sort((a, b) => {
       // 如果a是背景图层，它应该排在后面（最底层）
@@ -1604,17 +1604,17 @@ export class LayerManager {
     });
 
     // 更新画布对象顺序
-    this._rearrangeObjects();
+    await this._rearrangeObjects();
   }
 
   /**
    * 重新排列画布上的对象以匹配图层顺序
    * @private
    */
-  _rearrangeObjects() {
+  async _rearrangeObjects() {
     if (this.layerSort) {
       // 使用LayerSort的高级排序
-      this.layerSort.rearrangeObjects();
+      await this.layerSort.rearrangeObjects();
       return;
     }
 
@@ -1750,7 +1750,7 @@ export class LayerManager {
         layer.serializedObjects = layer.fabricObjects
           .map((obj) => {
             if (typeof obj.toObject === "function") {
-              return obj.toObject(["id", "layerId", "layerName"]);
+              return obj.toObject(["id", "layerId", "layerName", "fill_"]);
             }
             return null;
           })
@@ -1763,7 +1763,7 @@ export class LayerManager {
       if (layer.fabricObject) {
         layer.serializedBackgroundObject =
           typeof layer.fabricObject.toObject === "function"
-            ? layer.fabricObject.toObject(["id", "layerId", "layerName"])
+            ? layer.fabricObject.toObject(["id", "layerId", "layerName", "fill_"])
             : null;
 
         delete layer.fabricObject;
@@ -1793,7 +1793,7 @@ export class LayerManager {
     return layer.fabricObjects
       .map((obj) => {
         const { object } = findObjectById(this.canvas, obj.id);
-        if (object) return object.toObject(["id", "layerId", "layerName"]);
+        if (object) return object.toObject(["id", "layerId", "layerName", "fill_"]);
         return false;
       })
       .filter(Boolean);
@@ -1839,6 +1839,7 @@ export class LayerManager {
 
     // 存储到剪贴板
     this.clipboardData = layerCopy;
+	console.log("复制图层:", layerCopy);
 	const input = document.createElement("input");
     input.value = "aida_copy_canvas_layer: " + layer.name;
     document.body.appendChild(input);
@@ -1884,7 +1885,7 @@ export class LayerManager {
       layerCopy.serializedObjects = layer.fabricObjects
         .map((obj) =>
           typeof obj.toObject === "function"
-            ? obj.toObject(["id", "layerId", "layerName"])
+            ? obj.toObject(["id", "layerId", "layerName", "fill_"])
             : null
         )
         .filter(Boolean);
@@ -1935,10 +1936,6 @@ export class LayerManager {
     return this.clipboardData;
   }
 
-  /**
-   * 粘贴图层
-   * @returns {string} 新创建的图层ID
-   */
   /**
    * 粘贴图层
    * @returns {string} 新创建的图层ID

src/component/Canvas/CanvasEditor/managers/PartManager.js

@@ -1,14 +1,12 @@
 import { fabric } from "fabric-with-all";
 import { traceImageContour, imageToCanvas } from "../utils/helper";
-import { OperationType } from "../utils/layerHelper";
-import { CreateSelectionCommand } from "../commands/SelectionCommands";
-import { ClearSelectionCommand } from "../commands/LassoCutoutCommand";
+import { OperationType, SpecialLayerId } from "../utils/layerHelper";
+import { LassoCutoutCommand } from "../commands/LassoCutoutCommand";
 import addIcon from "@/assets/images/canvas/add.png";
 import removeIcon from "@/assets/images/canvas/remove.png";
-import { Https } from "@/tool/https";
-import store from "@/store";
-import { createStaticCanvas } from "../utils/canvasFactory";
 import { getObjectAlphaToCanvas } from "../utils/objectHelper";
+import { Https } from "@/tool/https";
+import { PartDrawCommand, PartPointDrawCommand } from "../commands/PartCommands";
 
 
 /**
@@ -27,11 +25,31 @@ export class PartManager {
 	constructor(options = {}) {
 		this.canvas = options.canvas;
 		this.commandManager = options.commandManager;
+		this.selectionManager = options.selectionManager;
 		this.layerManager = options.layerManager;
 		this.canvasManager = options.canvasManager;
 		this.toolManager = options.toolManager;
 		this.props = options.props;
 
+		// 选区样式配置
+		this.selectionStyle = {
+			stroke: "#0096ff",
+			strokeWidth: 1,
+			strokeDashArray: [5, 5],
+			fill: "rgba(0, 150, 255, 0.1)",
+			strokeUniform: true, // 保持描边宽度不随缩放改变
+			// fill: "rgba(127, 255, 127, 0.3)",
+			// stroke: "#2AA81B",
+			// strokeWidth: 2,
+			// strokeDashArray: [8, 4],
+			// strokeLineCap: "round",// 折线端点样式
+			// strokeLineJoin: "bevel", // 折线连接样式
+			selectable: false,
+			evented: false,
+			excludeFromExport: true,
+			hoverCursor: "default",
+			moveCursor: "default",
+		};
 		// 状态
 		this.isActive = false;
 
@@ -53,11 +71,12 @@ export class PartManager {
 		// 当前工具
 		this.activeTool = this.toolManager.activeTool;
 
+		this.rgba = { r: 0, g: 255, b: 0, a: 200 };
+		this.partId = SpecialLayerId.PART_SELECTOR;
 		this.partGroup = null; // 当前选区对象
-		this.partId = "part_selector";
 		this.partCanvas = null;// 选区画布
-		// 点选工具相关
-		this.pointList = []; // 存储点选坐标
+		this.rectangleObject = null; // 矩形对象
+		this.pointList = []; // 点位列表 存储点选坐标
 	}
 
 	/**
@@ -69,6 +88,20 @@ export class PartManager {
 		const wasActive = this.isActive;
 		this.isActive = this.tools.includes(toolId);
 
+		if (toolId === OperationType.PART_ERASER) {
+			this.setEraserTool();
+		} 
+		// else if (toolId === OperationType.PART || toolId === OperationType.PART_RECTANGLE) {
+		// 	this.clearPointData();
+		// 	this.resetPartObject();
+		// }
+		// if (toolId === OperationType.PART_ERASER || toolId === OperationType.PART_BRUSH) {
+		// 	if (this.pointList.length > 0) {
+		// 		this.clearPointData();
+		// 		this.resetPartObject();
+		// 	}
+		// }
+
 		// 如果从非选区工具切换到选区工具，初始化事件
 		if (!wasActive && this.isActive) {
 			this.initEvents();
@@ -80,6 +113,10 @@ export class PartManager {
 			this.clearPartObject();
 			this.clearPointData();
 		}
+		// 如果从选区工具切换到选区工具，重置选区
+		else if (wasActive && this.isActive) {
+
+		}
 	}
 
 	/** 初始化选区相关事件 */
@@ -205,12 +242,7 @@ export class PartManager {
 	}
 
 	/** 点选工具模式下点击事件处理 */
-	_pointDownkHandler(options) {
-		// const button = options.button;
-		// const isLeft = button === 1;// 左键1（添加）  右键3（删除）
-		// const icon = `url("${isLeft ? addIcon : removeIcon}") 16 16, default`
-		// this.canvas.upperCanvasEl.style.cursor = icon;
-	}
+	_pointDownkHandler(options) { }
 	/** 点选工具模式下移动事件处理 */
 	_pointMoveHandler(options) { }
 	/** 点选工具模式下抬起事件处理 */
@@ -219,57 +251,79 @@ export class PartManager {
 		const isLeft = button === 1;// 左键1（添加）  右键3（删除）
 		const fixedObject = this.canvasManager.getFixedLayerObject();
 		if (!fixedObject) return console.warn("未找到固定图层");
-		const { x, y } = options.absolutePointer;
-		const width = fixedObject.width * fixedObject.scaleX;
-		const height = fixedObject.height * fixedObject.scaleY;
-		const X = (x - (fixedObject.left - width / 2)) / fixedObject.scaleX;
-		const Y = (y - (fixedObject.top - height / 2)) / fixedObject.scaleY;
+		const { x, y } = this.handleMousePosition(options, fixedObject);
 		const label = isLeft ? 1 : 0;
 		const points = [];
 		const labels = [];
-		this.pointList.forEach((item) => {
+		const pointList = [...this.pointList];
+		pointList.forEach((item) => {
 			points.push([item.x, item.y]);
 			labels.push(item.label);
 		});
-		points.push([X, Y]);
+		points.push([x, y]);
 		labels.push(label);
 		const url = await this.getSegAnythingImage({
-			image_path: this.props.clothingMinIOPath,
 			type: "point",
 			points,
 			labels,
-			// type: "box",
-			// box: [0,0,0,0],
 		});
-		this.pointList.push({
-			x: X,
-			y: Y,
+		pointList.push({
+			x: x,
+			y: y,
 			label: label,
 		})
 		const image1 = await this.loadImageToObject(url);
+		const canvas = getObjectAlphaToCanvas(image1, null, 0, this.rgba);
+		this.partPointDrawCommand(pointList, canvas);
+	}
+	partPointDrawCommand(list, canvas) {
+		const cmd = new PartPointDrawCommand({
+			canvas: this.canvas,
+			partManager: this,
+			partCanvas: canvas,
+			pointList: [...list],
+		})
+		if (this.commandManager?.execute) {
+			this.commandManager.execute(cmd);
+		} else {
+			cmd.execute();
+		}
+	}
+	async pointDrawPartCanvas(list, canvas) {
+		this.selectionManager.clearSelection();
+		const fixedObject = this.canvasManager.getFixedLayerObject();
+		if (!fixedObject) {
+			console.warn("未找到固定图层")
+			return false;
+		}
 		this.resetPartObject();
-		const group = this.partGroup;
-		const rgba = { r: 0, g: 255, b: 0, a: 200 }
-		const canvas = getObjectAlphaToCanvas(image1, null, 0, rgba);
+		this.pointList = [...list];
 		this.partCanvas = canvas;
 		const image2 = new fabric.Image(canvas);
 		image2.set({
 			originX: fixedObject.originX,
 			originY: fixedObject.originY,
 		});
-		group.add(image2);
-		for (let i = 0; i < this.pointList.length; i++) {
-			const item = this.pointList[i];
+		this.partGroup.add(image2);
+		for (let i = 0; i < list.length; i++) {
+			const item = list[i];
 			const icon = await this.loadImageToObject(item.label === 1 ? addIcon : removeIcon);
+			let size = 20;
+			let scaleX = size / (icon.width * this.partGroup.scaleX);
+			let scaleY = size / (icon.height * this.partGroup.scaleY);
 			icon.set({
-				left: item.x - group.width / 2,
-				top: item.y - group.height / 2,
+				scaleX: scaleX,
+				scaleY: scaleY,
+				left: item.x - this.partGroup.width / 2,
+				top: item.y - this.partGroup.height / 2,
 				originX: fixedObject.originX,
 				originY: fixedObject.originY,
 			})
-			group.add(icon);
+			this.partGroup.add(icon);
 		}
+		console.log(this.partGroup);
 		this.canvas.renderAll();
+		return true;
 	}
 	/** 清空点选数据 */
 	clearPointData() {
@@ -280,43 +334,57 @@ export class PartManager {
 
 	/** 框选工具模式下点击事件处理 */
 	_rectangleDownHandler(options) {
-		console.log(options.absolutePointer);
+		this.pointList = [];
+		const fixedObject = this.canvasManager.getFixedLayerObject();
+		if (!fixedObject) return console.warn("未找到固定图层");
+		const { x, y } = this.handleMousePosition(options, fixedObject);
+		this.pointList.push(x, y);
+
+		this.rectangleObject = new fabric.Rect({
+			left: x - fixedObject.width / 2,
+			top: y - fixedObject.height / 2,
+			width: 0,
+			height: 0,
+			...this.selectionStyle,
+			fill: "transparent", // 在绘制过程中不显示填充
+			strokeUniform: true,
+		});
+		this.partGroup.add(this.rectangleObject);
+		this.canvas.renderAll();
 	}
 	/** 框选工具模式下移动事件处理 */
 	_rectangleMoveHandler(options) {
-
+		if (!this.rectangleObject) return console.warn("未找到框选对象");
+		const fixedObject = this.canvasManager.getFixedLayerObject();
+		if (!fixedObject) return console.warn("未找到固定图层");
+		const { x, y } = this.handleMousePosition(options, fixedObject);
+		this.rectangleObject.set({
+			width: x - this.rectangleObject.left - fixedObject.width / 2,
+			height: y - this.rectangleObject.top - fixedObject.height / 2,
+		});
+		this.canvas.renderAll();
 	}
 	/** 框选工具模式下抬起事件处理 */
-	_rectangleUpHandler(options) {
-		console.log(options.absolutePointer);
+	async _rectangleUpHandler(options) {
+		if (this.rectangleObject) {
+			this.partGroup.remove(this.rectangleObject);
+			this.canvas.renderAll();
+		}
+		const fixedObject = this.canvasManager.getFixedLayerObject();
+		if (!fixedObject) return console.warn("未找到固定图层");
+		const { x, y } = this.handleMousePosition(options, fixedObject);
+		this.pointList.push(x, y);
+
+		if (this.pointList.length !== 4) return console.warn("框选工具选择区域必须是矩形");
+		const url = await this.getSegAnythingImage({
+			type: "box",
+			box: [...this.pointList],
+		});
+		const image = await this.loadImageToObject(url);
+		const data = this.partCanvas?.getContext("2d")?.getImageData(0, 0, this.partCanvas.width, this.partCanvas.height);
+		const canvas = getObjectAlphaToCanvas(image, data, 0, this.rgba, !!data);
+		this.partDrawCommand(canvas);
 	}
-
-
-	/** 绘制工具模式下点击事件处理 */
-	_brushDownHandler(options) {
-	}
-	/** 绘制工具模式下移动事件处理 */
-	_brushMoveHandler(options) {
-
-	}
-	/** 绘制工具模式下抬起事件处理 */
-	_brushUpHandler(options) {
-	}
-
-
-	/** 擦除工具模式下抬起事件处理 */
-	_eraseUpHandler(options) {
-	}
-	/** 擦除工具模式下点击事件处理 */
-	_eraseDownHandler(options) {
-	}
-	/** 擦除工具模式下移动事件处理 */
-	_eraseMoveHandler(options) {
-
-	}
-
-
-
 	/** 获取分隔后图片 */
 	async getSegAnythingImage(obj) {
 		setTimeout(() => {
@@ -326,6 +394,7 @@ export class PartManager {
 			// const user_id = store.state.UserHabit.userDetail.userId;
 			const user_id = 24299;
 			const data = {
+				image_path: this.props.clothingMinIOPath,
 				user_id,
 				...obj,
 			}
@@ -344,6 +413,128 @@ export class PartManager {
 				});
 		});
 	}
+	/** 处理鼠标点位 */
+	handleMousePosition(options, fixedObject) {
+		const pos = options.absolutePointer;
+		const { x, y } = options.absolutePointer;
+		const width = fixedObject.width * fixedObject.scaleX;
+		const height = fixedObject.height * fixedObject.scaleY;
+		const X = (x - (fixedObject.left - width / 2)) / fixedObject.scaleX;
+		const Y = (y - (fixedObject.top - height / 2)) / fixedObject.scaleY;
+		return {
+			x: Math.round(X),
+			y: Math.round(Y),
+		}
+	}
+
+
+
+	/** 绘制工具模式下点击事件处理 */
+	_brushDownHandler(options) { }
+	/** 绘制工具模式下移动事件处理 */
+	_brushMoveHandler(options) { }
+	/** 绘制工具模式下抬起事件处理 */
+	_brushUpHandler(options) { }
+	/** 绘制模式添加画笔 */
+	async addDrawPartImage(fabricImage) {
+		const scaleX = fabricImage.scaleX / this.partGroup.scaleX;
+		const scaleY = fabricImage.scaleY / this.partGroup.scaleY;
+		const top = (fabricImage.top - this.partGroup.top) / this.partGroup.scaleY;
+		const left = (fabricImage.left - this.partGroup.left) / this.partGroup.scaleX;
+		fabricImage.set({
+			scaleX,
+			scaleY,
+			top: top + this.partGroup.height / 2,
+			left: left + this.partGroup.width / 2,
+		})
+		const tcanvas = new fabric.StaticCanvas(document.createElement("canvas"), {
+			width: this.partGroup.width,
+			height: this.partGroup.height,
+			enableRetinaScaling: false,
+		});
+		if (this.partCanvas) {
+			let image = new fabric.Image(this.partCanvas);
+			tcanvas.add(image)
+		}
+		tcanvas.add(fabricImage)
+		tcanvas.renderAll();
+		const canvas = getObjectAlphaToCanvas(tcanvas, null, 0, this.rgba);
+		this.partDrawCommand(canvas);
+	}
+
+
+	/** 切换到擦除工具 */
+	setEraserTool() {
+		if (!this.canvas) return console.warn("未找到画布");
+		const objects = this.canvas.getObjects();
+		objects.forEach(obj => {
+			if (obj.id === this.partId) {
+				obj.set({
+					erasable: true
+				})
+			}
+		})
+	}
+	/** 擦除工具模式下擦除完成事件处理 */
+	async onErasingEnd(affectedObjects) {
+		console.log("擦除完成", affectedObjects);
+		const tcanvas = new fabric.StaticCanvas(document.createElement("canvas"), {
+			width: this.partGroup.width,
+			height: this.partGroup.height,
+			enableRetinaScaling: false,
+		});
+		await new Promise((resolve, reject) => {
+			this.partGroup.clone((clone) => {
+				clone.set({
+					scaleX: 1,
+					scaleY: 1,
+					top: this.partGroup.height / 2,
+					left: this.partGroup.width / 2,
+				})
+				tcanvas.add(clone);
+				resolve(clone);
+			})
+		});
+		tcanvas.renderAll();
+		const canvas = getObjectAlphaToCanvas(tcanvas, null, 0, this.rgba);
+		this.partDrawCommand(canvas);
+	}
+	/** 擦除工具模式下点击事件处理 */
+	_eraseDownHandler(options) {
+	}
+	/** 擦除工具模式下移动事件处理 */
+	_eraseMoveHandler(options) {
+	}
+	/** 擦除工具模式下抬起事件处理 */
+	_eraseUpHandler(options) {
+
+	}
+	partDrawCommand(canvas) {
+		const cmd = new PartDrawCommand({
+			canvas: this.canvas,
+			partManager: this,
+			partCanvas: canvas,
+		})
+		if (this.commandManager?.execute) {
+			this.commandManager.execute(cmd);
+		} else {
+			cmd.execute();
+		}
+	}
+	/** 绘制部件画布 */
+	drawPartCanvas(canvas) {
+		this.selectionManager.clearSelection();
+		this.partCanvas = canvas;
+		const image = new fabric.Image(canvas);
+		image.set({
+			originX: this.partGroup.originX,
+			originY: this.partGroup.originY,
+			erasable: true,
+		});
+		this.resetPartObject();
+		this.partGroup.add(image);
+		this.canvas.renderAll();
+	}
 
 	/** 删除指定ID的对象 */
 	removeObjectsById(id) {
@@ -381,6 +572,7 @@ export class PartManager {
 			originY: fixedObject.originY,
 			selectable: false,
 			evented: false,
+			erasable: true,
 		})
 		this.canvas.add(group);
 		this.partGroup = group;
@@ -392,10 +584,33 @@ export class PartManager {
 	}
 
 	/** 创建当前选区 */
-	createPart() {
+	async createPart() {
 		if (!this.partCanvas) return console.warn("没有点位画布");
 		const fixedObject = this.canvasManager.getFixedLayerObject();
 		if (!fixedObject) return console.warn("未找到固定图层");
+		// const tcanvas = new fabric.StaticCanvas(document.createElement("canvas"), {
+		// 	width: fixedObject.width,
+		// 	height: fixedObject.height,
+		// 	enableRetinaScaling: false,
+		// });
+		// await new Promise((resolve, reject) => {
+		// 	fixedObject.clone((clone) => {
+		// 		const clipPath = new fabric.Image(this.partCanvas);
+		// 		clipPath.set({
+		// 			originX: fixedObject.originX,
+		// 			originY: fixedObject.originY,
+		// 		})
+		// 		clone.set({
+		// 			scaleX: 1,
+		// 			scaleY: 1,
+		// 			clipPath: clipPath,
+		// 		})
+		// 		tcanvas.add(clone);
+		// 		resolve(clone);
+		// 	})
+		// });
+		// tcanvas.renderAll();
+
 		const scaleY = fixedObject.scaleY
 		const scaleX = fixedObject.scaleX
 		const top = fixedObject.top - fixedObject.height * scaleY / 2;
@@ -414,23 +629,26 @@ export class PartManager {
 			top: top + minY * scaleY,
 			scaleX: scaleX,
 			scaleY: scaleY,
-			fill: "rgba(127, 255, 127, 0.3)",
-			stroke: "#2AA81B",
-			strokeWidth: 2,
-			strokeDashArray: [8, 4],
-			strokeLineCap: "round",// 折线端点样式
-			strokeLineJoin: "bevel", // 折线连接样式
-			strokeUniform: true, // 保持描边宽度不随缩放改变
+			...this.selectionStyle,
 		});
-		// this.partGroup.add(path);
-		this.canvas.add(path);
-		this.canvas.renderAll();
 		this.clearPart();
+		this.selectionManager.setSelectionObject(path);
+		const cmd = new LassoCutoutCommand({
+			canvas: this.canvas,
+			layerManager: this.layerManager,
+			selectionManager: this.selectionManager,
+			toolManager: this.toolManager,
+		})
+		this.commandManager.execute(cmd)
 	}
 	/** 清空点位 */
 	clearPart() {
-		this.pointList = [];
-		this.resetPartObject(true);
+		if (this.activeTool.value === OperationType.PART) {
+			this.partPointDrawCommand([], null);
+		} else {
+			this.pointList = [];
+			this.partDrawCommand(null);
+		}
 	}
 
 	/**

src/component/Canvas/CanvasEditor/managers/ToolManager.js

@@ -197,7 +197,7 @@ export class ToolManager {
       [OperationType.PART_RECTANGLE]: {
         name: "部件选取工具-矩形",
         icon: "part",
-        cursor: "default",
+        cursor: "crosshair",
         setup: this.setupPartRectangleTool.bind(this),
       },
       [OperationType.PART_BRUSH]: {
@@ -422,7 +422,7 @@ export class ToolManager {
     if (tool && typeof tool.setup === "function") {
 	//   console.log(`画布切换工具:${tool.name}(${toolId})`)
 	  this.canvas.toolId = toolId;
-      tool.setup();
+      tool.setup(true);
     }
 
     // 通知选区管理器工具已改变
@@ -482,7 +482,7 @@ export class ToolManager {
 
     // 如有必要，可以调用当前工具的setup方法来全面恢复状态
     if (tool && typeof tool.setup === "function") {
-      tool.setup();
+      tool.setup(true);
     }
   }
 
@@ -707,45 +707,69 @@ export class ToolManager {
   /**
    * 设置部件选取工具
    */
-  setupPartTool() {
+  setupPartTool(isExecute = false) {
     if (!this.canvas) return;
     this.canvas.isDrawingMode = false;
     this.canvas.selection = false;
-	
-    if (this.canvasManager && this.canvasManager.partManager) {
+    if (!isExecute && this.canvasManager && this.canvasManager.partManager) {
       this.canvasManager.partManager.setCurrentTool(OperationType.PART);
     }
   }
   /**
    * 设置部件选取工具--矩形
    */
-  setupPartRectangleTool() {
+  setupPartRectangleTool(isExecute = false) {
     if (!this.canvas) return;
     this.canvas.isDrawingMode = false;
-    this.canvas.selection = true;
-    if (this.canvasManager && this.canvasManager.partManager) {
+    this.canvas.selection = false;
+    if (!isExecute && this.canvasManager && this.canvasManager.partManager) {
       this.canvasManager.partManager.setCurrentTool(OperationType.PART_RECTANGLE);
     }
   }
   /**
    * 设置部件选取工具--画笔
    */
-  setupPartBrushTool() {
+  setupPartBrushTool(isExecute = false) {
     if (!this.canvas) return;
     this.canvas.isDrawingMode = true;
     this.canvas.selection = false;
-    if (this.canvasManager && this.canvasManager.partManager) {
+    if (!isExecute && this.canvasManager && this.canvasManager.partManager) {
       this.canvasManager.partManager.setCurrentTool(OperationType.PART_BRUSH);
     }
+	const greenColor = "#0f0";
+	    // 确保有笔刷管理器
+    if (this.brushManager) {
+      // 设置绿色笔刷
+      this.brushManager.setBrushColor(greenColor); // 纯绿色
+      this.brushManager.setBrushOpacity(200/255); // 完全不透明
+      this.brushManager.setBrushType("pencil"); // 铅笔类型
+
+      // 更新笔刷大小（使用当前大小）
+      if (BrushStore && BrushStore.state.size) {
+        this.brushManager.setBrushSize(BrushStore.state.size);
+      }
+
+      // 更新应用到画布
+      this.brushManager.updateBrush();
+    }
+
+    // 启用笔刷指示器并设置绿色
+    this._enableBrushIndicator(greenColor);
   }
    /**
    * 设置部件选取工具--橡皮擦
    */
-  setupPartEraserTool() {
+  setupPartEraserTool(isExecute = false) {
     if (!this.canvas) return;
-    this.canvas.isDrawingMode = false;
+    this.canvas.isDrawingMode = true;
     this.canvas.selection = false;
-    if (this.canvasManager && this.canvasManager.partManager) {
+	 if (this.brushManager) {
+      this.brushManager.createEraser();
+    }
+    // 启用笔刷指示器
+    this._enableBrushIndicator();
+
+	if (!isExecute && this.canvasManager && this.canvasManager.partManager) {
       this.canvasManager.partManager.setCurrentTool(OperationType.PART_ERASER);
     }
   }
@@ -1603,7 +1627,9 @@ export class ToolManager {
       OperationType.ERASER,
       OperationType.RED_BRUSH,
       OperationType.GREEN_BRUSH,
-			OperationType.LIQUIFY,
+	  OperationType.LIQUIFY,
+	  OperationType.PART_BRUSH,
+	  OperationType.PART_ERASER,
     ];
 
     return brushTools.includes(currentTool);

src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js

@@ -6,6 +6,7 @@ import { OperationType, OperationTypes } from "../../utils/layerHelper";
 export class CanvasEventManager {
   constructor(canvas, options = {}) {
     this.canvas = canvas;
+	this.canvasManager = options.canvasManager;
     this.toolManager = options.toolManager || null;
     this.animationManager = options.animationManager;
     this.thumbnailManager = options.thumbnailManager;
@@ -691,7 +692,9 @@ export class CanvasEventManager {
           // 清除临时状态记录
           delete activeObj._initialTransformState;
         }
-      }
+      }else{
+		this.canvasManager.changeCanvas();
+	  }
 
       if (this.thumbnailManager && e.target) {
         if (e.target.id) {
@@ -975,6 +978,13 @@ export class CanvasEventManager {
       // 添加调试日志(可选)
       // console.log(`捕获对象 ${obj.id} (${obj.type}) 的初始变换状态`);
     }
+    const arrs = [];
+    if (e.target._objects) {
+      e.target._objects.forEach((v) => arrs.push(v));
+    } else {
+      arrs.push(e.target);
+    }
+    this.canvasManager.beforeChangeCanvas(arrs);
   }
 
   /**

src/component/Canvas/CanvasEditor/utils/LayerSort.js

@@ -30,27 +30,30 @@ export class LayerSort {
     if (canvasObjects.length === 0) return;
 
     // 使用画布渲染优化
-    await optimizeCanvasRendering(this.canvas, () => {
-      // 计算每个对象应该在的 z-index 位置
-      const objectZIndexMap = this.calculateObjectZIndexes();
+	await new Promise((resolve) => {
+		optimizeCanvasRendering(this.canvas, () => {
+		// 计算每个对象应该在的 z-index 位置
+		const objectZIndexMap = this.calculateObjectZIndexes();
 
-      // 按照新的 z-index 排序对象
-      const sortedObjects = canvasObjects
-        .map((obj) => ({
-          object: obj,
-          targetZIndex: objectZIndexMap.get(obj.id) ?? -1,
-        }))
-        .filter((item) => item.targetZIndex >= 0) // 过滤掉无效对象
-        .sort((a, b) => a.targetZIndex - b.targetZIndex);
+		// 按照新的 z-index 排序对象
+		const sortedObjects = canvasObjects
+			.map((obj) => ({
+			object: obj,
+			targetZIndex: objectZIndexMap.get(obj.id) ?? -1,
+			}))
+			.filter((item) => item.targetZIndex >= 0) // 过滤掉无效对象
+			.sort((a, b) => a.targetZIndex - b.targetZIndex);
 
-      // 使用 fabric.js 的 moveTo 方法重新排序
-      sortedObjects.forEach((item, index) => {
-        const currentIndex = this.canvas.getObjects().indexOf(item.object);
-        if (currentIndex !== index && currentIndex !== -1) {
-          // 将对象移动到正确的位置
-          this.canvas.moveTo(item.object, index);
-        }
-      });
+		// 使用 fabric.js 的 moveTo 方法重新排序
+		sortedObjects.forEach((item, index) => {
+			const currentIndex = this.canvas.getObjects().indexOf(item.object);
+			if (currentIndex !== index && currentIndex !== -1) {
+			// 将对象移动到正确的位置
+			this.canvas.moveTo(item.object, index);
+			}
+		});
+		resolve();
+		});
     });
   }
 
@@ -71,17 +74,17 @@ export class LayerSort {
       // if (!layer.visible) {
       //   continue;
       // }
-
+	  let id = layer.fabricObject?.id || layer.fabricObjects?.[0]?.id || null;
       // 处理不同类型的图层
-      if (layer.isBackground && layer.fabricObject) {
+      if (layer.isBackground && id) {
         // 背景图层对象放在最底层
-        zIndexMap.set(layer.fabricObject.id, currentZIndex++);
-      } else if (layer.isFixed && layer.fabricObject) {
+        zIndexMap.set(id, currentZIndex++);
+      } else if (layer.isFixed && id) {
         // 固定图层对象
-        zIndexMap.set(layer.fabricObject.id, currentZIndex++);
-      } else if (layer.isFixedOther && layer.fabricObject) {
+        zIndexMap.set(id, currentZIndex++);
+      } else if (layer.isFixedOther && id) {
         // 其他固定图层对象
-        zIndexMap.set(layer.fabricObject.id, currentZIndex++);
+        zIndexMap.set(id, currentZIndex++);
       } else if (!layer.isBackground && !layer.isFixed) {
         // 普通图层
         currentZIndex = this.processLayerObjects(
@@ -91,7 +94,6 @@ export class LayerSort {
         );
       }
     }
-
     return zIndexMap;
   }
 

src/component/Canvas/CanvasEditor/utils/helper.js

@@ -1045,6 +1045,7 @@ export async function imageToCanvas(image, scale = 1, sr = false) {
 /**
  * 图片边界跟踪算法(透明底)
  * @param {HTMLCanvasElement} canvas - canvas元素
+ * @param {Number} scale - 缩放比例
  * @returns {Array} 边界点数组 [{x, y}, ...]
 */
 export	function traceImageContour(canvas) {

src/component/Canvas/CanvasEditor/utils/imageHelper.js

@@ -2208,8 +2208,13 @@ export const resizeImage = async (base64, width, height) => {
       const canvas = document.createElement("canvas");
       canvas.width = width;
       canvas.height = height;
+	  const scale = height / img.height;
+	  const w = img.width * scale;
+	  const h = img.height * scale;
+	  const x = (width - w) / 2;
+	  const y = 0;
       const ctx = canvas.getContext("2d");
-      ctx.drawImage(img, 0, 0, width, height);
+      ctx.drawImage(img, x, y, w, h);
       resolve(canvas.toDataURL());
     };
     img.onerror = reject;

src/component/Canvas/CanvasEditor/utils/layerHelper.js

@@ -24,6 +24,7 @@ export const LayerType = {
 export const SpecialLayerId = {
   SPECIAL_GROUP: "group_special", // 特殊组
   COLOR: "special_color", // 颜色图层
+  PART_SELECTOR: "part_selector", // 部件选择器图层
 }
 
 

src/component/Canvas/CanvasEditor/utils/objectHelper.js

@@ -65,10 +65,15 @@ export async function restoreFabricObject(serializedObject, canvas) {
  * @param {ImageData} revData - 相反的ImageData，白通道的相同位置是否为透明，revData为白色为透明，黑色为不透明
  * @param {number} diff - 差值，默认 25
  * @param {Object} rgba - 自定义 rgba 值，默认 { r: 255, g: 255, b: 255, a: 255 }
+ * @param {boolean} isMerge - 是否合并，true=合并revData，false=反转revData
  * @returns {HTMLCanvasElement|null} 包含黑白通道的画布，或 null 如果失败
 */
-export function getObjectAlphaToCanvas(object, revData, diff = 30, rgba = { r: 255, g: 255, b: 255, a: 255 }) {
+export function getObjectAlphaToCanvas(object, revData, diff = 30, rgba = { r: 255, g: 255, b: 255, a: 255 }, isMerge = false) {
 	const image = object.getElement();
+	if (image.nodeName !== "IMG" && image.nodeName !== "CANVAS") {
+		console.warn("对象不是图片");
+		return null;
+	}
 	const { width, height } = image;
 	if (!width || !height) {
 		console.warn("对象没有元素");
@@ -89,18 +94,20 @@ export function getObjectAlphaToCanvas(object, revData, diff = 30, rgba = { r: 2
 		const revG = revData?.data[i + 1] || 0;
 		const revB = revData?.data[i + 2] || 0;
 		const revA = revData?.data[i + 3] || 0;
+		let isHave = false;
 		if (r || g || b || a) {
 			if (revR > diff || revG > diff || revB > diff || revA > diff) {
-				data.data[i + 0] = 0;
-				data.data[i + 1] = 0;
-				data.data[i + 2] = 0;
-				data.data[i + 3] = 0;
+				isHave = false;
 			} else {
-				data.data[i + 0] = rgba.r;
-				data.data[i + 1] = rgba.g;
-				data.data[i + 2] = rgba.b;
-				data.data[i + 3] = rgba.a;
+				isHave = true;
 			}
+		}
+		if (isMerge && (revR || revG || revB || revA)) isHave = true;
+		if (isHave) {
+			data.data[i + 0] = rgba.r;
+			data.data[i + 1] = rgba.g;
+			data.data[i + 2] = rgba.b;
+			data.data[i + 3] = rgba.a;
 		} else {
 			data.data[i + 0] = 0;
 			data.data[i + 1] = 0;

src/component/Canvas/CanvasEditor/utils/selectionToImage.js

@@ -184,16 +184,17 @@ const createClippedDataURLByCanvas = async ({
     // console.log("🖼️ 使用图像遮罩裁剪方法生成DataURL");
 
     // 使用优化后的边界计算，确保包含描边区域
-    // const optimizedBounds = calculateOptimizedBounds(
-    //   clippingObject,
-    //   fabricObjects
-    // );
-	const optimizedBounds = {
-		left: clippingObject.left - clippingObject.width / 2,
-		top: clippingObject.top - clippingObject.height / 2,
-		width: clippingObject.width,
-		height: clippingObject.height,
-	}
+    const optimizedBounds = calculateOptimizedBounds(
+      clippingObject,
+      fabricObjects
+    );
+	console.log("📐 优化后的选区边界框:", optimizedBounds);
+	// const optimizedBounds = {
+	// 	left: clippingObject.left - clippingObject.width / 2,
+	// 	top: clippingObject.top - clippingObject.height / 2,
+	// 	width: clippingObject.width,
+	// 	height: clippingObject.height,
+	// }
 
     // 使用高分辨率以保证质量
     const pixelRatio = window.devicePixelRatio || 1;

src/component/Canvas/ExistsImageList/index.vue

@@ -375,6 +375,7 @@ const confirm = ()=>{
 /* 图片网格 */
 .image-grid {
   display: grid;
+  align-content: start;
   grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
   gap: 16px;
   min-height: 20rem;

src/component/Canvas/OverallCanvas/index.vue

@@ -25,6 +25,7 @@
 		O_FLIPX: "object.flipX",
 		O_FLIPY: "object.flipY",
 		O_BLENDMODE: "object.blendMode",
+		O_FILL_REPEAT: "object.fill_repeat",
 	};
 	const ACTIONS = {
 		ADD: "add",
@@ -223,7 +224,7 @@
 		ctx.drawImage(image, 0, 0);
 		let pattern = new fabric.Pattern({
 			source: tcanvas,
-			repeat: "repeat",
+			repeat: item.object?.fill_repeat || "repeat",
 			patternTransform,
 			offsetX, // 水平偏移
 			offsetY, // 垂直偏移
@@ -281,6 +282,7 @@
 						case KEYS.FILL_SCALEY:
 						case KEYS.FILL_GAPX:
 						case KEYS.FILL_GAPY:
+						case KEYS.O_FILL_REPEAT:
 							let pattern = await setFill(
 								list.value.find((v) => v.token === item.token)
 							);

src/component/Canvas/canvasExample.vue

@@ -333,6 +333,7 @@
 	]);
 	const canvasLoadJsonSuccess = () => {
 		console.log("画布加载JSON成功");
+		return;
 		canvasEditor.value?.updateOtherLayers({
 			color: { rgba: { r: 255, g: 0, b: 0, a: 1 } },
 			printObject: {
@@ -342,32 +343,34 @@
 						level2Type: "Pattern",
 						designType: "Library",
 						path: "/src/assets/images/canvas/yinhua1.jpg",
-						location: [250, 780],
-						scale: [1.2, 1.6],
+						location: [800, 600],
+						scale: [1, 1],
 						angle: 0,
+						priority: 1,
 						object: {
-							top: 600,
-							left: 800,
+							top: 300,
+							left: 400,
 							scaleX: 0.5,
 							scaleY: 0.5,
 							opacity: 1,
-							angle: 45,
+							angle: 0,
 							flipX: false,
 							flipY: false,
-							blendMode: "multiply",
+							// blendMode: "multiply",
 							gapX: 0,
 							gapY: 0,
 						},
 					},
-					// {
-					// 	ifSingle: true,
-					// 	level2Type: "Pattern",
-					// 	designType: "Library",
-					// 	path: "/src/assets/images/canvas/yinhua1.jpg",
-					// 	location: [550, 650],
-					// 	scale: [0.15, 0.2],
-					// 	angle: 0,
-					// },
+					{
+						ifSingle: true,
+						level2Type: "Pattern",
+						designType: "Library",
+						path: "/src/assets/images/canvas/yinhua1.jpg",
+						location: [550, 650],
+						scale: [0.15, 0.2],
+						angle: 0,
+						priority: 2,
+					},
 					// {
 					// 	ifSingle: true,
 					// 	level2Type: "Pattern",
@@ -376,6 +379,7 @@
 					// 	location: [700, 400],
 					// 	scale: [0.1, 0.133],
 					// 	angle: 0,
+					// 	priority: 3,
 					// },
 				],
 			},
@@ -411,13 +415,13 @@
 				:clothingMinIOPath="clothingMinIOPath"
 				:clothingImageUrl="clothingImageUrl"
 				:clothingImageUrl2="clothingImageUrlInit"
+				@canvasLoadJsonSuccess="canvasLoadJsonSuccess"
 				:config="editorConfig"
 				:clothing-image-opts="{
 					imageMode: 'contains', // 设置底图包含在画布内
 				}"
 				@change-canvas="changeCanvas"
 				@canvas-init="canvasInit"
-				isFixedErasable
 				showFixedLayer
 			>
 				<template #existsImageList>
@@ -445,7 +449,16 @@
 		</div>
 	</div>
 </template>
-
+<style>
+	body > .lower-canvas {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 800px !important;
+		height: 600px !important;
+		z-index: 99999999;
+	}
+</style>
 <style scoped lang="less">
 	* {
 		margin: 0;

src/component/Canvas/index.vue

@@ -7,7 +7,7 @@
         :enabledRedGreenMode="false"
       />
     </div>
-	<div class="btn">123
+	<div class="btn">
 		<div class="gallery_btn" @click="exportElement">Export</div>
 	</div>
   </div>

src/component/Canvas/test.vue

@@ -53,7 +53,7 @@
 		};
 	});
 	// 边界追踪
-	function traceImageContour(canvas) {
+	function traceImageContour(canvas, scale = 1) {
 		const ctx = canvas.getContext("2d");
 		const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 		const data = imageData.data;

src/component/Detail/DesignDetail.vue

@@ -129,7 +129,9 @@ import { Modal,message } from 'ant-design-vue';
 import {getUploadUrl,segmentImage,setGradual,rgbToHsv,rgbaToHex} from '@/tool/util'
 import { useStore } from "vuex";
 import { openGuide,driverObj__ } from "@/tool/guide";
+import { KeyValueDB } from "@/tool/indexedDB";
 import { useI18n } from 'vue-i18n'
+import { convertToEC4StyleForCustomSerise } from 'echarts/types/src/util/styleCompat.js'
 export default defineComponent({
     components:{
 		detailLeft,model,detailRight,canvasBox
@@ -190,7 +192,7 @@ export default defineComponent({
 		watch(()=>detailData.selectDetail,async (newValue,oldValue)=>{
 			detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
 			if(newValue?.path)await getSketchSize()
-			if(newValue?.id && (newValue.id != oldValue.id)){
+			if(newValue?.id && (newValue?.id != oldValue?.id)){
 				store.commit('DesignDetail/changeCanvasKey')
 			}
 			// privewDetail(oldValue)
@@ -198,9 +200,9 @@ export default defineComponent({
 		provide('getCanvasIfEdit',detailData.getCanvasIfEdit)
 		provide('singleOveral',detailData.singleOveral)
 		provide('isEditPattern',detailData.isEditPattern)
-		const closeModal = ()=>{
-			sessionStorage.removeItem('oppositeRevocation')
-			sessionStorage.removeItem('revocation')
+		const closeModal = async ()=>{
+			await KeyValueDB.remove('oppositeRevocation')
+			await KeyValueDB.remove('revocation')
 			detailData.designDetailShow = false
 			emit('destroy')
 		}
@@ -214,10 +216,9 @@ export default defineComponent({
 				Https.axiosGet(url).then(
 					async (rv: any) => {
 						//清除画布JSON数据
-						sessionStorage.removeItem('canvasList');
-						sessionStorage.removeItem('revocation');
-						sessionStorage.removeItem('oppositeRevocation');
-						sessionStorage.setItem('key', 'value');
+						await KeyValueDB.remove('canvasList');
+						await KeyValueDB.remove('revocation');
+						await KeyValueDB.remove('oppositeRevocation');
 						store.commit('DesignDetail/setDesignDetail',rv)
 						rv.clothes.forEach((item:any)=>{
 							let a
@@ -272,24 +273,24 @@ export default defineComponent({
 			
 		}
 		//撤回
-		const setRevocation = ()=>{//设置撤销
+		const setRevocation = async ()=>{//设置撤销
 			let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail))
-			let revocation:any = JSON.parse((sessionStorage.getItem("revocation") as any))
+			let revocation:any = JSON.parse((await KeyValueDB.get("revocation") as any) || 'null')
 			if(!revocation)revocation = []
-			// let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
+			// let oppositeRevocation = JSON.parse((await KeyValueDB.get("oppositeRevocation") as any))
 			// if(revocation?.[0]?.designItemId != itemDetail.designItemId || revocation?.[0]?.designItemId == undefined){
 			// 	revocation = []
 			// }
 			revocation.push({designData:itemDetail,position:null})
 			detailData.revocationShow = revocation?.length
-			sessionStorage.setItem('revocation', JSON.stringify(revocation));
-			sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
+			await KeyValueDB.set('revocation', JSON.stringify(revocation));
+			await KeyValueDB.set('oppositeRevocation',JSON.stringify([]));
 		}
 		provide('setRevocation',setRevocation)
 
-		const revocation = ()=>{//撤回
-			let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
-			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
+		const revocation = async ()=>{//撤回
+			let oppositeRevocation = JSON.parse((await KeyValueDB.get("oppositeRevocation") as any) || 'null')
+			let revocation = JSON.parse((await KeyValueDB.get("revocation") as any) || 'null')
 			if(revocation.length <= 1)return
 			oppositeRevocation.push(revocation[revocation.length-1])
 			revocation.splice(revocation.length-1,1)
@@ -301,14 +302,14 @@ export default defineComponent({
 				store.commit('DesignDetail/setFrontBack',revocation[revocation.length-1].position)
 			}
 			store.commit('DesignDetail/setDesignColthes',detailData.selectDetail.id)
-			sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
-			sessionStorage.setItem('revocation', JSON.stringify(revocation));
+			await KeyValueDB.set('oppositeRevocation', JSON.stringify(oppositeRevocation));
+			await KeyValueDB.set('revocation', JSON.stringify(revocation));
 			// clearSelect()
 			detailData.positionKey++
 		}
-		const oppositeRevocation = ()=>{//反撤回
-			let oppositeRevocation = JSON.parse((sessionStorage.getItem("oppositeRevocation") as any))
-			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
+		const oppositeRevocation = async ()=>{//反撤回
+			let oppositeRevocation = JSON.parse((await KeyValueDB.get("oppositeRevocation") as any) || 'null')
+			let revocation = JSON.parse((await KeyValueDB.get("revocation") as any) || 'null')
 			// if(!oppositeRevocation[oppositeRevocation.length-1].designData)return
 			if(oppositeRevocation.length < 1)return
 			if(oppositeRevocation[oppositeRevocation.length-1]?.designData){
@@ -321,8 +322,8 @@ export default defineComponent({
 			detailData.revocationShow = revocation.length
 			oppositeRevocation.splice(oppositeRevocation.length-1,1)
 			detailData.oppositeRevocationShow = oppositeRevocation.length
-			sessionStorage.setItem('oppositeRevocation', JSON.stringify(oppositeRevocation));
-			sessionStorage.setItem('revocation', JSON.stringify(revocation));
+			await KeyValueDB.set('oppositeRevocation', JSON.stringify(oppositeRevocation));
+			await KeyValueDB.set('revocation', JSON.stringify(revocation));
 			// this.clearSelect()
 			detailData.positionKey++
 		}
@@ -330,22 +331,25 @@ export default defineComponent({
 			store.commit('DesignDetail/setCurrentDetailType',str)
 		}
 		const setClothes = async (list:any,str:string)=>{
+			console.log(JSON.parse(JSON.stringify(list)))
 			let clothesList:any = []
-			await uploadElement()
 			if(detailData.isEditPattern.value == 'editSketch')await detailDom.canvasBox.submitBase64Data().then((rv)=>{
 				detailData.selectDetail.sketchString = rv
 			})
 			if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
 			if(detailDom.canvasBox && (detailData.currentDetailType != 'sketch' || detailData.isEditPattern.value == 'canvasEditor')){
-				let otherData = await updateOtherLayers('single')
-				await detailDom.canvasBox.updateOtherLayers(otherData)
+				// if(detailData.isEditPattern.value !== 'editSketch'){
+				// 	let otherDataupDateFrontBackSketch = await updateOtherLayers(detailData.isEditPattern.value == 'canvasEditor'?'all':'single')
+				// 	await detailDom.canvasBox.updateOtherLayers(otherData)
+				// }
 				await detailDom.canvasBox.privewDetail()
+				await uploadSelectDetail()
+				// await uploadElement()
 			}
 			for(let i = 0;i<list.length;i++){
 				detailData.selectDetail
 			    let {scale,offset,priority,transpose,rotate,maskUrl,maskMinioUrl} = await (detailDom.model as any).getSubmitData(list[i])
-				let gradient = null
-				let newData = list[i]?.newDetail?.[detailData.currentDetailType]
+				let newData = list[i]?.newDetail
 				// newData[0].location=[
 				// 	-233.13985,
 				// 	406.90964
@@ -355,13 +359,27 @@ export default defineComponent({
 				// 0.35822305
 				// ]	
 				let isCurrent = list[i].id == detailData?.selectDetail?.id
-				let color = (detailData.currentDetailType == 'color' && isCurrent && !detailData.isEditPattern.value)?
-				(newData?.rgba?.r?`${newData.rgba.r} ${newData.rgba.g} ${newData.rgba.b}`:''):
-				(list[i].color?.rgba?.r?
-				`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:
-				'')
-				if(detailData.currentDetailType == 'sketch' && newData){
-					color = detailData.designDetail.clothes?.[0]?.color?.rgba?.r?`${detailData.designDetail.clothes?.[0].color.rgba.r} ${detailData.designDetail.clothes[0].color.rgba.g} ${detailData.designDetail.clothes[0].color.rgba.b}`:''
+				let color = ''
+				let gradient = null
+				// if((detailData.currentDetailType == 'color' && detailData.isEditPattern.value == 'canvasEditor') && isCurrent){
+				// 	color = newData?.color?.rgba?.r != null?`${newData?.color.rgba.r} ${newData?.color.rgba.g} ${newData?.color.rgba.b}`:''
+				// 	if(newData?.color?.gradient){
+				// 		gradient = newData?.color.gradient
+				// 	}
+				// }else if(isCurrent){
+					
+				// }
+				console.log(JSON.parse(JSON.stringify(detailData.selectDetail.color)),'=====')
+				color = list[i].color?.rgba?.r != null?`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:''
+					gradient = list[i].gradient
+				if((detailData.currentDetailType == 'sketch' && newData?.sketch) || detailData.isEditPattern.value == 'editSketch'){
+					if(detailData.isEditPattern.value == 'editSketch'){
+						color = detailData.selectDetail?.color?.rgba?.r != null?`${detailData.selectDetail.color.rgba.r} ${detailData.selectDetail.color.rgba.g} ${detailData.selectDetail.color.rgba.b}`:''
+						gradient = detailData.selectDetail?.gradient || null
+					}else{
+						color = detailData.designDetail.clothes?.[0]?.color?.rgba?.r?`${detailData.designDetail.clothes?.[0].color.rgba.r} ${detailData.designDetail.clothes[0].color.rgba.g} ${detailData.designDetail.clothes[0].color.rgba.b}`:''
+						gradient = detailData.designDetail.clothes?.[0]?.gradient || null
+					}
 					detailData.selectDetail.maskUrl = ''
 					detailData.selectDetail.maskMinioUrl = ''
 				}
@@ -375,9 +393,10 @@ export default defineComponent({
 				let data:any = {
 					changed:false,
 					color,
-					designType:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.designType:list[i].designType,
-					id:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.id:list[i].id,
-					maskMinioUrl:((newData && detailData.currentDetailType == 'sketch') || list[i].sketchString)?'':list[i]?.maskMinioUrl,
+					gradient,
+					designType:(newData?.sketch && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData?.sketch.designType:list[i].designType,
+					id:(newData?.sketch && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData?.sketch.id:list[i].id,
+					maskMinioUrl:((newData?.sketch && detailData.currentDetailType == 'sketch') || list[i].sketchString)?'':list[i]?.maskMinioUrl,
 					// maskUrl:'',
 					maskUrl:list[i]?.maskUrl || '',
 					// offset:[
@@ -389,28 +408,29 @@ export default defineComponent({
 					rotate,
 					partialDesign:list[i].partialDesign,
 					// partialDesign:detailData.isEditPattern.value?list[i].partialDesign:{},
-					path:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.minIOPath:list[i].minIOPath,
-					printObject:(newData && detailData.currentDetailType == 'print' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].printObject?list[i].printObject:{prints:[]},
+					path:(newData?.sketch && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData?.sketch.minIOPath:list[i].minIOPath,
+					printObject:((newData?.print?.length>0 && (detailData.currentDetailType == 'print' || detailData.isEditPattern.value == 'canvasEditor')) && isCurrent)?{prints:newData.print}:list[i].printObject?list[i].printObject:{prints:[]},
 					priority,
 					// scale:[
                     //                 0.5,
                     //                 0.35822305
                     //             ],
 					scale:[scale[0]?scale[0]:1,scale[1]?scale[1]:1],
-					type:(newData && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData.level2Type || newData.categoryValue:list[i].type,
+					type:(newData?.sketch && detailData.currentDetailType == 'sketch' && isCurrent && !detailData.isEditPattern.value)?newData?.sketch.level2Type || newData?.sketch.categoryValue:list[i].type,
 					sketchString:list[i].sketchString?list[i].sketchString:'',
-					trims:(newData && detailData.currentDetailType == 'element' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
-					accessory:(newData && detailData.currentDetailType == 'accessory' && isCurrent && !detailData.isEditPattern.value)?{prints:newData}:list[i].trims?.prints?list[i].trims:{prints:[]},
+					trims:((newData?.element?.length>0 && (detailData.currentDetailType == 'element' || detailData.isEditPattern.value == 'canvasEditor')) && isCurrent)?{prints:newData.element}:list[i].trims?.prints?list[i].trims:{prints:[]},
 				}
-				// if(!data.partialDesign.partialDesignMinioPath){
-				// 	data.partialDesign.partialDesignMinioPath = data.path
-				// }
 				printObjectToJSON(data.printObject.prints)
 				printObjectToJSON(data.trims.prints)
-				if((detailData.isEditPattern.value && list[i].color?.gradient) || (!detailData.isEditPattern.value && (list[i].newDetail?.color?.gradient || list[i].color?.gradient))){
-					gradient = list[i].newDetail?.color?.gradient || list[i].color.gradient
+				console.log(list[i],'=======',isCurrent)
+				if((list[i]?.color?.gradient)){
+				// if(list[i].color?.gradient || (!detailData.isEditPattern.value && (list[i].newDetail?.color?.gradient || list[i].color?.gradient))){
+					gradient = list[i]?.color?.gradient
+					console.log(gradient,list[i],gradient)
 					gradient.colorImg = await setGradual(gradient,320,700)
 					data.gradient = gradient
+				}else{
+					data.gradient = null
 				}
 				clothesList.push(data)
 			}
@@ -446,7 +466,6 @@ export default defineComponent({
 					let value = {
 						currentType : JSON.parse(JSON.stringify(detailData.currentDetailType)),
 						rv:rv,
-						fun:setRevocation
 					}
 					if(detailData?.designDetail?.newModel)detailData.designDetail.oldModel = JSON.parse(JSON.stringify(detailData.designDetail.newModel))
 
@@ -454,6 +473,7 @@ export default defineComponent({
 					let el:any = document.querySelector('.molepositon .perview_img')
 					let scale = 0
 					await new Promise<void>(async (resolve, reject) => {
+						if(!detailData.frontBack.body.path)resolve(true)
 						const img = new Image();
 						img.src = detailData.frontBack.body.path;
 						img.onload = () => {
@@ -479,6 +499,12 @@ export default defineComponent({
 			
 		}
 		const submit = async ()=>{
+			detailData.loadingShow = true
+			if(detailData.isEditPattern.value !== 'canvasEditor' && detailDom.canvasBox){
+				if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
+				let otherData = await updateOtherLayers('single')
+				await detailDom.canvasBox.updateOtherLayers(otherData)
+			}
 			let workspace = store.state.Workspace.probjects
 			let clothes:any = await setClothes(detailData.designDetail.clothes,'sub')
 			let data = {
@@ -495,11 +521,10 @@ export default defineComponent({
 				processId:userDetail.value.userId,
 				probjectId:store.state.Workspace.probjects.id,
 			}
-			detailData.loadingShow = true
 			Https.axiosPost(Https.httpUrls.designSingle, data).then(async (rv)=>{
 				saveCanvasJSONToSession()
 				// store.commit('DesignDetail/setPraeview',rv)
-				const sessionCanvasList = sessionStorage.getItem('canvasList');
+				const sessionCanvasList = await KeyValueDB.get('canvasList');
 				const canvasList = sessionCanvasList ? JSON.parse(sessionCanvasList) : []
 				for (let i = 0; i < canvasList.length; i++) {
 					const index = detailData.designDetail.clothes.findIndex(item => item.id === canvasList[i].id);
@@ -525,10 +550,12 @@ export default defineComponent({
 				detailData.loadingShow = false
             });
 		}
-		const previwe = async ()=>{
+		const previwe = async ()=>{ 
 			detailData.loadingShow = true
-			if((detailData.currentDetailType == 'sketch' && !detailData.isEditPattern.value) || detailData.isEditPattern.value == 'editSketch'){
+			if((detailData.currentDetailType == 'models' && !detailData.isEditPattern.value) || (detailData.currentDetailType == 'sketch' && !detailData.isEditPattern.value) || detailData.isEditPattern.value == 'editSketch'){
 				await getSubmitData('preview')
+				if(detailData.currentDetailType == 'models')return detailData.loadingShow = false
+				detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == detailData.selectDetail.id)
 				await getSketchSize()
 				detailDom.canvasBox.changeSketchUpdateFrontBack = async ()=>{
 					await detailDom.canvasBox.privewDetail()
@@ -545,6 +572,7 @@ export default defineComponent({
 				}
 				await detailDom.canvasBox.privewDetail()
 				await upDateFrontBackSketch()
+				await uploadSelectDetail()
 				saveCanvasJSONToSession()
 				detailData.loadingShow = false
 			}
@@ -562,9 +590,9 @@ export default defineComponent({
 						let front = detailData.frontBack.front[detailData.imgDomIndex]
 						let back = detailData.frontBack.back[detailData.imgDomIndex]
 
-						front.oldImageUrl = ''
-						front.oldMaskUrl = ''
-						back.oldImageUrl = ''
+						if(front?.oldImageUrl)front.oldImageUrl = ''
+						if(front?.oldMaskUrl)front.oldMaskUrl = ''
+						if(back?.oldImageUrl)back.oldImageUrl = ''
 						front.imageUrl = rv.targetFrontUrl
 						back.imageUrl = rv.targetBackUrl
 						store.commit('DesignDetail/canvasPreviewUpdata',{type:detailData.isEditPattern.value?'all':detailData.currentDetailType,callBack:setRevocation})
@@ -574,9 +602,9 @@ export default defineComponent({
 				img.src = detailData.selectDetail.path
 			})
 		}
-		const saveCanvasJSONToSession = ()=>{
+		const saveCanvasJSONToSession = async ()=>{
 			let canvasJSON = detailDom.canvasBox.getCanvasJSON()
-			const sessionCanvasList = sessionStorage.getItem('canvasList');
+			const sessionCanvasList = await KeyValueDB.get('canvasList');
 			const list = sessionCanvasList ? JSON.parse(sessionCanvasList) : []
 			let index = -1
 			list.forEach((item:any,i:number)=>{
@@ -589,14 +617,15 @@ export default defineComponent({
 			}else{
 				list[index].canvasJSON = canvasJSON
 			}
-			sessionStorage.setItem('canvasList', JSON.stringify(list));
+			await KeyValueDB.set('canvasList', JSON.stringify(list));
 		}
 		const detailEdit = async (str:any)=>{
+			detailData.loadingShow = true
 			if(str){
 				if(detailData.isEditPattern.value && detailData.isEditPattern.value == str){
 					// await detailDom.canvasBox.saveCanvas()
 					await (detailDom.canvasBox as any).privewDetail()
-					if(detailData.isEditPattern.value == 'canvasEditor')await uploadElement()
+					if(detailData.isEditPattern.value == 'canvasEditor')await uploadSelectDetail()
 					detailData.isEditPattern.value = ''
 				}else{
 					// if(detailData.isEditPattern.value && (str == 'canvasEditor' || str == 'redGreenExample')){
@@ -604,15 +633,20 @@ export default defineComponent({
 					// }
 					detailDom.canvasBox.editFront(str)
 					if(str == 'canvasEditor'){
-						let otherData = await updateOtherLayers('single')
-						console.log(otherData,'============')
-						await detailDom.canvasBox.updateOtherLayers(otherData)
+						if((detailData.currentDetailType == 'print' || detailData.currentDetailType == 'element') && !detailDom.detailRight?.privewDetail){
+							store.commit('DesignDetail/changeCanvasKey')
+						}else{
+							if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
+							let otherData = await updateOtherLayers('single')
+							await detailDom.canvasBox.updateOtherLayers(otherData)
+						}
 					}
 					detailData.isEditPattern.value = str
 				}
 			}else{
 				detailData.isEditPattern.value = ''
 			}
+			detailData.loadingShow = false
 		}
 		const getColorName = (color:any)=>{
 			let rgb:any = [color.r, color.g, color.b];
@@ -634,14 +668,14 @@ export default defineComponent({
 					});
 			})
 		}
-		const updateOtherLayers = async (str:any='all')=>{//更新到画布图层
+		const updateOtherLayers = async (str:any='all',type:any='noFirst')=>{//更新到画布图层
 			let otherData:any = {}
-			if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
 			if(str == 'all'){
+				// await uploadSelectDetail()
 				otherData = {
-					color: detailData.selectDetail.newDetail?.color?.r?detailData.selectDetail.newDetail?.color:detailData.selectDetail.color,
-					printObject: detailData.selectDetail.newDetail?.print?.length>0?{prints:detailData.selectDetail.newDetail?.print}:detailData.selectDetail.printObject || null,
-					trims: detailData.selectDetail.newDetail?.element?.length>0?detailData.selectDetail.newDetail?.element:detailData.selectDetail.trims || null,
+					color: detailData.selectDetail.color,
+					printObject: detailData.selectDetail.printObject || null,
+					trims: detailData.selectDetail.trims || null,
 				}	
 			}else if(str == 'single'){
 				otherData = {
@@ -653,7 +687,7 @@ export default defineComponent({
 					let color = detailData.selectDetail.newDetail?.color
 					// let colorData:any = await getColorName(color?.rgba)
 					if(detailData.selectDetail.newDetail?.color){
-						if(color.r){
+						if(color.r != null){
 							color.rgba = {r:color.r,g:color.g,b:color.b,a:color.a}
 						}else{
 							color.rgba = {}
@@ -662,10 +696,11 @@ export default defineComponent({
 					}
 				}
 				if(detailData.currentDetailType == 'print'){
-					otherData.printObject = detailData.selectDetail.newDetail?.print?.length>0?{prints:detailData.selectDetail.newDetail?.print}:detailData.selectDetail.printObject || null
+					if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
+					otherData.printObject = {prints:detailData.selectDetail.newDetail?.print || []}
 				}
 				if(detailData.currentDetailType == 'element'){
-					otherData.trims = detailData.selectDetail.newDetail?.element?.length>0?{prints:detailData.selectDetail.newDetail?.element}:detailData.selectDetail.trims || null
+					otherData.trims = {prints:detailData.selectDetail.newDetail?.element || []}
 				}
 			}
 			return otherData
@@ -674,27 +709,25 @@ export default defineComponent({
 			if(detailData.isEditPattern.value == 'canvasEditor'){
 				// await detailDom.canvasBox.saveCanvas()
 				const allInfo = await (detailDom.canvasBox as any).getCanvasElement()
-				if(allInfo.trims?.length > 0){
-					// detailData.selectDetail.trims.prints = allInfo.trims
-					let value = {
-						data:allInfo.trims,
-						str:'element'
-					}
-					store.commit('DesignDetail/setNewDetail',value)
+				let trimsValue = {
+					data:allInfo.trims || [],
+					str:'element'
 				}
-				if(allInfo.prints?.length > 0){
-					// detailData.selectDetail.printObject.prints = allInfo.prints
-					let value = {
-						data:allInfo.prints,
-						str:'print'
-					}
-					store.commit('DesignDetail/setNewDetail',value)
+				store.commit('DesignDetail/setNewDetail',trimsValue)
+				let printValue = {
+					data:allInfo.prints || [],
+					str:'print'
 				}
-				if(allInfo.color?.color?.rgba){
-					let canvasColor = allInfo.color.color;
-					let colorData:any = await getColorName(allInfo.color.color?.rgba)
+				store.commit('DesignDetail/setNewDetail',printValue)
+				if(allInfo.color?.color?.rgba || allInfo.color?.color?.gradient){
 					let value:any = {
-						data:{
+						str:'color',
+						data:{},
+					}
+					let canvasColor = allInfo.color.color;
+					if(allInfo.color?.color?.rgba){
+						let colorData:any = await getColorName(allInfo.color.color?.rgba)
+						value.data = {
 							hsv:{
 								h:colorData.h,
 								s:colorData.s,
@@ -704,8 +737,7 @@ export default defineComponent({
 							tcx:colorData.tcx,
 							rgba:canvasColor.rgba,
 							hex:rgbaToHex([canvasColor.rgba.r,canvasColor.rgba.g,canvasColor.rgba.b]),
-						},
-						str:'color'
+						}
 					}
 					if(canvasColor.gradient){
 						value.data.gradient = canvasColor.gradient
@@ -715,9 +747,65 @@ export default defineComponent({
 					if(detailData.currentDetailType == 'color'){
 						detailData.detailLeftColorKey++
 					}
+				}else{
+					let value = {
+						data:{},
+						str:'color'
+					}
+					store.commit('DesignDetail/setNewDetail',value)
 				}
 			}
 		}
+		const uploadSelectDetail = async ()=>{//更新选中的detail
+			// await detailDom.canvasBox.saveCanvas()
+			const allInfo = await (detailDom.canvasBox as any).getCanvasElement()
+			let color:any = {}
+			if(allInfo.color?.color?.rgba || allInfo.color?.color?.gradient){
+				let canvasColor = allInfo.color.color;
+				if(canvasColor?.rgba?.r != null){
+					let colorData:any = await getColorName(allInfo.color.color?.rgba)
+					color = {
+						hsv:{
+							h:colorData.h,
+							s:colorData.s,
+							v:colorData.v,
+						},
+						name:colorData.name,
+						tcx:colorData.tcx,
+						rgba:canvasColor.rgba,
+						hex:rgbaToHex([canvasColor.rgba.r,canvasColor.rgba.g,canvasColor.rgba.b]),
+					}
+				}
+				if(canvasColor?.gradient){
+					color.gradient = canvasColor.gradient
+				}
+			}
+
+			if(detailData.isEditPattern.value == 'canvasEditor'){
+				delete detailData.selectDetail.newDetail
+				detailData.selectDetail.trims.prints = allInfo.trims || []
+				detailData.selectDetail.printObject.prints = allInfo.prints || []
+				detailData.selectDetail.color = color
+			}else{
+				if(detailData.currentDetailType == 'color'){
+					if(detailData.selectDetail.newDetail?.color)delete detailData.selectDetail.newDetail.color
+					detailData.selectDetail.color = color
+					detailData.selectDetail.gradient = color.gradient
+				}
+				if(detailData.currentDetailType == 'print'){
+					if(detailData.selectDetail.newDetail?.print)delete detailData.selectDetail.newDetail.print
+					detailData.selectDetail.printObject.prints = allInfo.prints || []
+				}
+				if(detailData.currentDetailType == 'element'){
+					if(detailData.selectDetail.newDetail?.element)delete detailData.selectDetail.newDetail.element
+					detailData.selectDetail.trims.prints = allInfo.trims || []
+				}
+			}
+			if(detailData.currentDetailType == 'color'){
+				detailData.detailLeftColorKey++
+			}
+			
+		}
 		const canvasReload = async ()=>{
 			if(detailData.isEditPattern.value){
 				await detailDom.canvasBox.saveCanvas()
@@ -727,12 +815,12 @@ export default defineComponent({
 			coverRevocation()
 			detailDom.detailLeft.sketchSysToLibrary()
 		}
-		const coverRevocation = ()=>{
+		const coverRevocation = async ()=>{
 			let itemDetail = JSON.parse(JSON.stringify(detailData.designDetail))
-			let revocation = JSON.parse((sessionStorage.getItem("revocation") as any))
+			let revocation = JSON.parse((await KeyValueDB.get("revocation") as any) || 'null')
 			revocation.splice(revocation.length-1,1,{designData:itemDetail,position:null})
-			sessionStorage.setItem('revocation', JSON.stringify(revocation));
-			sessionStorage.setItem('oppositeRevocation',JSON.stringify([]));
+			await KeyValueDB.set('revocation', JSON.stringify(revocation));
+			await KeyValueDB.set('oppositeRevocation',JSON.stringify([]));
 		}
 		const setSloganData = (data:any)=>{
 			detailData.selectDetail.sketchString = data
@@ -742,9 +830,9 @@ export default defineComponent({
 		}
 		onMounted(()=>{
 		})
-		onBeforeUnmount(()=>{
-			sessionStorage.removeItem('oppositeRevocation')
-			sessionStorage.removeItem('revocation')
+		onBeforeUnmount(async ()=>{
+			await KeyValueDB.remove('oppositeRevocation')
+			await KeyValueDB.remove('revocation')
 			store.commit('DesignDetail/clearDetailData')
 
 		})

src/component/Detail/canvas/index.vue

@@ -6,25 +6,27 @@
 			<div class="content-bottom" ref="canvasContent">
 				<div class="contet">
 					<div class="canvas" :class="{'active': currentView === 'canvasEditor'}"@click.stop>
-						<!-- :clothingMinIOPath="selectDetail.minIOPath" 部件选取 -->
 						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
+							:title="t('CanvasTitle.ModifyItem')"
 							@canvasInit="editSketchCanvasInit"
 							is-edit
 							:clothingImageUrl="selectDetail.path"
-							:clothingImageUrl2="selectDetail.layersObject[0].maskUrl"
+							:clothingImageUrl2="selectDetail.maskUrl || selectDetail.layersObject[0].maskUrl"
 							showFixedLayer
 							:canvasJSON="canvasJSON"
 							@canvasLoadJsonSuccess="canvasLoadJsonSuccess"
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
-							:hideCanvas="hideCanvas && !isEditPattern"
+							:isChangeCanvasSize="false"
+							:hideCanvas="hideCanvas || !isEditPattern"
 							ref="editCanvas">
 						</editCanvas>
 						<!-- <canvasContent ref="canvasContent"></canvasContent> -->
 					</div>
 					<div class="editFrontBack" v-if="currentView === 'redGreenExample'" @click.stop>
 						<editCanvas v-if="canvasLoad" :config="canvasConfig" 
+							:title="t('CanvasTitle.RedGreen')"
 							@canvasInit="editFrontBackCanvasInit"
 							:enabledRedGreenMode="true"
 							:clothingImageUrl="selectDetail.path" 
@@ -34,12 +36,12 @@
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
-							:hideCanvas="hideCanvas && !isEditPattern"
+							:hideCanvas="hideCanvas || !isEditPattern"
 							ref="editCanvasBackFront">
 						</editCanvas>
 					</div>
 					<div class="editSketch" v-if="currentView === 'editSketch'" @click.stop>
-						<generalMiniCanvas ref="generalMiniCanvas" :btnShow="false" :imgUrl="selectDetail.sketchString || selectDetail.path"></generalMiniCanvas>
+						<generalMiniCanvas ref="generalMiniCanvas" :isChangeCanvasSize="false" :canvasTitle="t('CanvasTitle.ModifySketch')" :btnShow="false" :imgUrl="selectDetail.sketchString || selectDetail.path"></generalMiniCanvas>
 					</div>
 				</div>
 				
@@ -49,9 +51,9 @@
 			</div>
 		 </div>
 		
-		<div class="mark_loading" v-show="isShowMark">
+		<!-- <div class="mark_loading" v-show="isShowMark">
 			<a-spin size="large" />
-		</div>
+		</div> -->
     </div>
     
 </template>
@@ -135,38 +137,20 @@ export default defineComponent({
 		
 		const editFront = (str:any)=>{//编辑前后片
 			let canvasJSON = '' as any
-			if(detailData.currentView === 'canvasEditor'){
-				sessionStorage.setItem('sketchEdit',detailDom.editCanvas.getJSON())
-				canvasJSON = sessionStorage.getItem('frontBackEdit');
-			}else if(detailData.currentView === 'redGreenExample'){
-				sessionStorage.setItem('frontBackEdit',detailDom.editCanvasBackFront.getJSON())
-				canvasJSON = sessionStorage.getItem('sketchEdit');
-			}
 			// detailData.canvasLoad = false
 			detailData.currentView = str
-			if(canvasJSON){
-				// detailData.canvasLoad = true
+			if(detailData.currentView === 'redGreenExample'){
 				nextTick(()=>{
-					if(detailData.currentView === 'redGreenExample'){
-						detailDom.editCanvas.loadJSON(canvasJSON)
-					}else{
-						detailDom.editCanvasBackFront.loadJSON(canvasJSON)
-					}
+					setCanvas(detailData.selectDetail.path).then(()=>{
+						// detailData.canvasLoad = true
+					})
 				})
 			}else{
-				if(detailData.currentView === 'redGreenExample'){
-					nextTick(()=>{
-						setCanvas(detailData.selectDetail.path).then(()=>{
-							// detailData.canvasLoad = true
-						})
+				nextTick(()=>{
+					setCanvas(detailData.frontBack.front[detailData.imgDomIndex].maskUrl).then(()=>{
+						// detailData.canvasLoad = true
 					})
-				}else{
-					nextTick(()=>{
-						setCanvas(detailData.frontBack.front[detailData.imgDomIndex].maskUrl).then(()=>{
-							// detailData.canvasLoad = true
-						})
-					})
-				}
+				})
 			}
 		}
 		const updateOtherLayers = (obj:any)=>{
@@ -211,6 +195,7 @@ export default defineComponent({
 					// detailData.canvasConfig.height = domHeight
 					detailData.canvasConfig.width = img.width
 					detailData.canvasConfig.height = img.height
+					detailData.canvasConfig.initZoom = true
 
 					res('')
 				}
@@ -259,8 +244,11 @@ export default defineComponent({
 		}
 
 
-		const frontBackChange = (value:any)=>{
-			let full = detailData.selectDetail.partialDesign.partialDesignBase64 || detailData.selectDetail.path
+		const frontBackChange = async (value:any)=>{
+			if(!detailData.selectDetail.partialDesign.partialDesignPath && !detailData.selectDetail.partialDesign.partialDesignBase64){
+				await privewDetail()
+			}
+			let full = detailData.selectDetail.partialDesign.partialDesignBase64 || detailData.selectDetail.partialDesign.partialDesignPath || detailData.selectDetail.path
 			let size = {
 				...detailData.canvasConfig,
 			}
@@ -301,14 +289,29 @@ export default defineComponent({
 			return detailDom?.editCanvas?.getJSON()
 		}
 		const saveCanvas = async (canvasData:any)=>{
-			const index = detailData.designDetail.clothes.findIndex(item => item.id === canvasData.id);
+			const index = detailData.designDetail.clothes.findIndex(item => item.id === canvasData?.id);
 			await new Promise<void>((resolve, reject) => {
-				let canvasJSON = JSON.parse(canvasData.canvasJSON)
-				if(!canvasJSON)return resolve()
-				// canvasData.canvas.objects.forEach((objectsItem:any) => {
-				// 	if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
-				// });
-				let blob = new Blob([JSON.stringify(canvasJSON)], { type: "application/json" });
+				if(!detailDom?.editCanvas)return resolve()
+				let canvasJSON = detailDom?.editCanvas?.getJSON()
+				let canvasData = JSON.parse(canvasJSON)
+				if(!canvasData)return resolve()
+				function deepProcessObjects(data:any, callback:any) {
+					if (!Array.isArray(data)) return data;
+					return data.map(item => {
+						callback(item)
+						const processedItem = {...item};
+						if (processedItem.objects && 
+							Array.isArray(processedItem.objects) && 
+							processedItem.objects.length > 0) {
+						processedItem.objects = deepProcessObjects(processedItem.objects, callback);
+						}
+						return processedItem;
+					});
+				}
+				canvasData.canvas.objects = deepProcessObjects(canvasData.canvas.objects,(item:any)=>{
+					if(item.type == 'image')item.minioUrl = getMinioUrl(item.src)
+				})
+				let blob = new Blob([JSON.stringify(canvasData)], { type: "application/json" });
 				let formData = new FormData();
 				formData.append("file", blob, "data.json");
 				formData.append("designItemDetailId", detailData.selectDetail.id);
@@ -337,7 +340,7 @@ export default defineComponent({
 		// 	},3000)
 		// }
 		const canvasLoadJsonSuccess = async ()=>{
-			let otherData = await props.updateOtherLayers()
+			let otherData = await props.updateOtherLayers('all','first')
 			await updateOtherLayers(otherData)
 			if(detailData.changeSketchUpdateFrontBack){
 				await detailData.changeSketchUpdateFrontBack()
@@ -388,9 +391,6 @@ export default defineComponent({
 			if(front?.oldMaskUrl)front.maskUrl = front.oldMaskUrl
 			if(back?.oldImageUrl)back.imageUrl = back.oldImageUrl
 			if(front?.oldMaskUrl)store.commit('DesignDetail/updataDetailItem',{maskUrl:front.maskUrl})
-
-			sessionStorage.removeItem('frontBackEdit');
-			sessionStorage.removeItem('sketchEdit');
 			detailData.canvasLoad = false
 			// privewDetail()
 		})
@@ -429,6 +429,7 @@ export default defineComponent({
         return{
 			...toRefs(detailDom),
 			...toRefs(detailData),
+			t,
 			editFront,
 			privewDetail,
 			setFrontBackColor,

src/component/Detail/detailLeft/colorBox/index.vue

@@ -100,12 +100,15 @@ export default defineComponent({
 			tcxToColor:'',
 		})
 		watch(()=>colorData.selectColor,async (newVal,oldVal)=>{
-		    if(newVal.rgba && newVal.rgba?.r){
-				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
-				data.rgba = newVal.rgba
+		    if((newVal.rgba && newVal.rgba?.r != null) || newVal.gradient != null){
+				let data :any = {}
+				if(newVal.rgba?.r != null){
+					data = await getColorName(newVal.rgba)
+					newVal.name = data.name
+					newVal.tcx = data.tcx
+					colorData.colorList.list[colorData.selectDetail.id][colorData.colorList.index] = newVal
+					data.rgba = newVal.rgba
+				}
 				if(newVal.gradient){
 					data.gradient = newVal.gradient
 				}
@@ -124,13 +127,12 @@ export default defineComponent({
 		})
 		watch(()=>colorData.selectDetail.id,(newVal,oldVal)=>{
 			if(!newVal)return
-			console.log(12312)
-			if(!colorData.colorList?.list?.[newVal]){
-				colorData.colorList.list[newVal] = []
-			}else{
-				return
-			}
-			console.log(12312)
+			colorData.colorList.list[newVal] = []
+			// if(!colorData.colorList?.list?.[newVal]){
+			// 	colorData.colorList.list[newVal] = []
+			// }else{
+			// 	// return
+			// }
 			let isNoSelect = false
 			let pushIndex = 0
 			for (let index = 0; index < 9; index++) {
@@ -140,14 +142,12 @@ export default defineComponent({
 				let color = colorData.allBoardData.colorBoards?.[index]
 				if(!color?.rgba && color?.rgbValue)color.rgba = color.rgbValue
 				if(
-					colorData.allBoardData.colorBoards?.[index] &&
+					(colorData.allBoardData.colorBoards?.[index] && color?.rgba &&
 					colorData.selectDetail.color.rgba?.r == color?.rgba?.r &&
 					colorData.selectDetail.color.rgba?.g == color?.rgba?.g &&
-					colorData.selectDetail.color.rgba?.b == color?.rgba?.b ||
-					(JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(color?.gradient) && colorData.selectDetail.color.gradient)
-					&& colorData.selectDetail.color.rgba?.r
+					colorData.selectDetail.color.rgba?.b == color?.rgba?.b) ||
+					((JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(color?.gradient) && colorData.selectDetail.color.gradient))
 				){
-					console.log(123)
 					isNoSelect = true
 					colorData.selectColor = item
 					colorData.colorList.index = index
@@ -173,19 +173,22 @@ export default defineComponent({
 				colorData.colorList.list[newVal].push(item)
 			}
 			if(!isNoSelect){
-				let color = colorData.selectDetail.newDetail?.color?.rgba?.r?colorData.selectDetail.newDetail?.color:colorData.selectDetail.color
-				if(!color?.rgba?.r)return
-				let item = {
-					hex:rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b]),
-					id:color.id,
-					rgba:{
-						r:color.rgba.r,
-						g:color.rgba.g,
-						b:color.rgba.b,
-					},
-					tcx:color.tcx,
-					name:color.name,
-				} as any
+				let color = colorData.selectDetail.newDetail?.color?.rgba?.r != null?colorData.selectDetail.newDetail?.color:colorData.selectDetail.color
+				let item:any = {}
+				if(color?.rgba?.r != null){
+					item = {
+						hex:rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b]),
+						id:color.id,
+						rgba:{
+							r:color.rgba.r,
+							g:color.rgba.g,
+							b:color.rgba.b,
+						},
+						tcx:color.tcx,
+						name:color.name,
+					} as any
+				}
+
 				if(color.gradient){
 					item.gradient = color.gradient
 				} 

src/component/Detail/detailLeft/colorBox/pallet.vue

@@ -119,7 +119,7 @@ export default defineComponent({
 		})
 		const palletRef = ref(null)
 		watch(()=>palletData.color_,(newVal:any)=>{
-			if(!newVal?.rgba?.r)return
+			if(newVal?.rgba?.r == null)return
 			if(palletData.color?.gradient?.gradientShow){
 				palletData.color.gradient.gradientList[palletData.color.gradient.selectIndex].rgba = {
 					r:newVal.rgba.r,
@@ -146,7 +146,7 @@ export default defineComponent({
 		},{deep: true })
 		const setOperate = ()=>{
 			if(!palletData.color.rgba)return message.info(t('DesignDetailAlter.jsContent7'))
-			palletData.color.rgba = palletData.color?.rgba?.r?palletData.color.rgba:{r:0,g:0,b:0,a:1}
+			palletData.color.rgba = palletData.color?.rgba?.r != null?palletData.color.rgba:{r:0,g:0,b:0,a:1}
 			palletData.gradient.selectIndex = 0
 			palletData.gradient.gradientShow = true
 			if(!palletData.color.gradient){
@@ -262,7 +262,7 @@ export default defineComponent({
 		const openPallet = ()=>{
 			palletData.palletShow = !palletData.palletShow
 			console.log(props.selectColor,palletData.palletShow)
-			if(palletData.palletShow && props.selectColor?.rgba?.r){
+			if(palletData.palletShow && props.selectColor?.rgba?.r != null){
 				if(props.selectColor.gradient){
 					palletData.color_.rgba = props.selectColor.gradient.gradientList[0].rgba
 				}else{

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

@@ -40,11 +40,29 @@ export default defineComponent({
     setup(props,{emit}) {
 		const {t} = useI18n();
         const store = useStore();
+		const updateCatecory = (arr)=>{
+			arr.forEach((v:any) => {
+				if(props.catecoryList)props.catecoryList.forEach((item:any) => {
+					if(v.level2Type == item.value && !v.category){
+						v.category=item.name
+						v.categoryValue=item.value
+					}
+				})
+			});
+		}
 		const detailData = reactive({
 			allBoardData:computed(()=>store.state.UploadFilesModule.allBoardData),
 			currentList:{
-				sketch:computed(()=>store.state.UploadFilesModule.allBoardData.sketchboardFiles),
-				print:computed(()=>store.state.UploadFilesModule.allBoardData.printboardFiles),
+				sketch:computed(()=>{
+					let sketch = store.state.UploadFilesModule.allBoardData.sketchboardFiles
+					updateCatecory(sketch)
+					return sketch
+				}),
+				print:computed(()=>{
+					let print = store.state.UploadFilesModule.allBoardData.printboardFiles
+					updateCatecory(print)
+					return print
+				}),
 				color:computed(()=>store.state.UploadFilesModule.allBoardData.colorBoards),
 				models:computed(()=>store.state.Workspace.probjects.model),
 			},

src/component/Detail/detailLeft/sketch.vue

@@ -76,10 +76,10 @@ export default defineComponent({
 				selectImgItem(data)
 				return
 			}
+			data.id = id
 			if(data?.imgUrl)data.url = data.imgUrl
 			let value = {
 				data,
-				id,
 			}
 			if(detailData.currentDetailType == 'sketch'){
 				detailData.selectDetail.sketchString = ''

src/component/Detail/detailRight/editPrintElement.vue

@@ -53,7 +53,7 @@
 			</a-slider> -->
 			<a-popover
 				trigger="click"
-				placement="topRight"
+				placement="leftTop"
 				destroyTooltipOnHide
 				:title="t('Canvas.repeatSetting')"
 			>
@@ -89,8 +89,8 @@
 							<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${item.pattern?.transform?.rotateZ}deg)`}" class="designOpenrtion_imgItme" draggable="false"> 
 						</div>
 					</div>
-					<!-- <img :src="selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg"> -->
-					<img :src="stateOverallSingle == 'single'?(selectDetail.undividedLayer||selectDetail.path):(selectDetail.undividedLayerColor || selectDetail.path)" alt="" class="designOpenrtion_sketch" ref="sketchImg" @load="()=>isSketchLoad = true">
+					<!-- <img :src="selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg" @load="()=>isSketchLoad = true"> -->
+					<img :src="(selectDetail.path)" alt="" class="designOpenrtion_sketch" ref="sketchImg" @load="()=>isSketchLoad = true">
 					<img :src="selectDetail.sketchMask" alt="" class="designOpenrtion_sketchMask" ref="sketchMask">
 					<div class="designOpenrtion_btn" v-if="stateOverallSingle == 'single'" >
 						<ul v-for="item,index in printStyleList[type][stateOverallSingle]" :key="item" :class="{active:item?.pattern.designOpenrtionBtn?item?.pattern.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item?.pattern.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
@@ -160,7 +160,6 @@ export default defineComponent({
 			selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
 			currentDetailType:computed(()=>store.state.DesignDetail.currentDetailType),
 			currentPrintElement:computed(()=>store.state.DesignDetail.currentPrintElement),
-			systemDesignerPercentage:0,
 			printStyleList:{
 				print:{
 					single:[],
@@ -174,7 +173,6 @@ export default defineComponent({
 			type:props.type,
 			imgDomIndex:-1,
 			direction:'',//判断点的那条边
-			printZIndex:2,//印花优先级
 			sketchWH:{
 				width:0,
 				height:0,
@@ -225,6 +223,7 @@ export default defineComponent({
 				img.onload = ()=>{
 					let imgScale = img.width / img.height
 					let zoom = 2
+					console.log(editPrintElementData.sketchWH)
 					let width = editPrintElementData.sketchWH.width / zoom
 					let height = width / editPrintElementData.sketchWH.height
 					
@@ -234,29 +233,47 @@ export default defineComponent({
 					let sketchH = editPrintElementData.sketchWH.height * editPrintElementData.sketchWH.scale[1]
 					let x = sketchW / 2 - (sketchW * (width / editPrintElementData.sketchWH.width)/2)
 					let y = sketchH / 2 -(sketchH * height/2)
-					if(!editPrintElementData.stateOverallSingle == 'single'){
+					if(editPrintElementData.stateOverallSingle !== 'single'){
 						x = sketchW / 2
 						y = sketchH / 2
 					}
 					let location = [x,y]
 					resolve({scale,location})
 				}
-				img.src = item.url
+				img.src = item.url || item.path
 			})
 		}
 		const addPrintELement = async (data:any)=>{
 			if(!editPrintElementData.isSketchLoad)return
 			let {scale,location} = await setScaleLocation(data)
+			let printIndex = 1
+			let allElementPrint = []
+			if(props.type == 'print'){
+				allElementPrint = [
+					...(editPrintElementData.printStyleList.print.single || []),
+					...(editPrintElementData.printStyleList.print.overall || []),
+					...(editPrintElementData.selectDetail.trims.prints || []),
+				]
+			}else{
+				allElementPrint = [
+					...(editPrintElementData.printStyleList.element.single || []),
+					...(editPrintElementData.selectDetail.printObject.prints || []),
+				]
+			}
+			if(allElementPrint.length >= 1){
+				printIndex = Math.max(...allElementPrint.map(item => Number(item.priority))) + 1
+			}
 			let item = {
 				angle:0,
 				designType:data.designType,
 				ifSingle:editPrintElementData.stateOverallSingle == 'single',
 				level2Type:data.level2Type,
-				location:editPrintElementData.stateOverallSingle == 'single'?location:[0,0],
+				location:location,
+				// location:editPrintElementData.stateOverallSingle == 'single'?location:[0,0],
 				minIOPath:data.minIOPath || data.originalUrl,
 				path:data.url,
-				priority:editPrintElementData.printZIndex,
-				scale,
+				priority:printIndex,
+				scale:editPrintElementData.stateOverallSingle == 'single'?scale:[1,1],
 				globalCompositeOperation:'',
 			}
 			getItemPosition(item)
@@ -283,10 +300,10 @@ export default defineComponent({
 					// location = [item.pattern.style.left,item.pattern.style.top]
 				}
 				let value  ={
-					angle : item.pattern.transform.rotateZ,
+					angle:0,
 					// angle : !this.overallSingle ? 0:item.pattern.transform.rotateZ,
 					location : location,
-					priority:index,
+					priority:item.priority,
 					scale: scale,
 					designType:item.designType,
 					level2Type:item.level2Type,
@@ -295,16 +312,22 @@ export default defineComponent({
 					ifSingle:!!item.ifSingle,
 					globalCompositeOperation:'',
 				}
-				if(item.object)value.object = item.object
+				if(item.object)value.object = item.object;
+				value.angle = value.ifSingle?item.pattern.transform.rotateZ:item.angle
+				
 				return value
 			}
 			if(editPrintElementData.printStyleList[props.type].single.length>0){
 				sort(editPrintElementData.printStyleList[props.type].single)
 			}
+			if(editPrintElementData.printStyleList[props.type].overall.length>0){
+				sort(editPrintElementData.printStyleList[props.type].overall)
+			}
 			editPrintElementData.printStyleList[props.type].overall.forEach((item:any)=>{
 				data.push(setData(item,index))
 				index++ 
 			})
+			console.log(editPrintElementData.printStyleList[props.type].single)
 			editPrintElementData.printStyleList[props.type].single.forEach((item:any)=>{
 				data.push(setData(item,index))
 				index++ 
@@ -314,6 +337,7 @@ export default defineComponent({
 				str:props.type,
 				id:id,
 			}
+			console.log('data',value)
 			store.commit('DesignDetail/setNewDetail',value)
 		}
 		const sort = (list:any)=>{
@@ -335,10 +359,9 @@ export default defineComponent({
 				top = item.location[1] / editPrintElementData.sketchWH.scale[1]
 			}else{
 				//overall
-				editPrintElementData.systemDesignerPercentage = item.scale[0]*1000
 				left = item.location[0] / editPrintElementData.sketchWH.scale[0]
 				top = item.location[1] / editPrintElementData.sketchWH.scale[1]
-				editPrintElementData.systemDesignerPercentage = item.scale?.[0]?item.scale[0]*100:30
+				item.scale = item.scale || [1,1]
 			}
 			let pattern = {
 				centers:{left:0,top:0},
@@ -356,7 +379,6 @@ export default defineComponent({
 				},
 				designOpenrtionBtn:false
 			}
-			editPrintElementData.printZIndex++
 			item.pattern = pattern
 			
 			if(item.object){
@@ -371,7 +393,8 @@ export default defineComponent({
 					angle: 0,
 					flipX: false,
 					flipY: false,
-					blendMode: "multiply",
+					// blendMode: "multiply",
+					blendMode: "source-over",
 					gapX: 0,
 					gapY: 0,
 				}
@@ -381,66 +404,66 @@ export default defineComponent({
 			}
 			if(item.ifSingle){
 				editPrintElementData.printStyleList[props.type].single.push(item)
-			}else{
+			}
+			if(!item.ifSingle){
 				item.token = Date.now().toString() + (editPrintElementData.printStyleList[props.type].overall.length + '')
 				// editPrintElementData.printStyleList[props.type].overall = []
 				editPrintElementData.printStyleList[props.type].overall.push(item)
-				setTimeout(()=>{
-					editPrintElementDom.pingpuRef.updataList([
-						{
-							action: ACTIONS.ADD,
-							data: item,
-						},
-					]);
-				})
-				
+				if(editPrintElementData.stateOverallSingle == 'overall'){
+					setTimeout(()=>{
+						editPrintElementDom.pingpuRef.updataList([
+							{
+								action: ACTIONS.ADD,
+								data: item,
+							},
+						]);
+					})
+				}
 			}
 		}
-		const setPosition = ()=>{
-			nextTick(()=>{
-				let img = new Image
-				img.onload = ()=>{
-					// let sketchScale = editPrintElementData.selectDetail.layersObject[0].scale
-					let sketchScale = [1,1]
-					let scaleX = img.width * sketchScale[0] / editPrintElementDom.sketchImg.offsetWidth
-					let scaleY = img.height * sketchScale[1] / editPrintElementDom.sketchImg.offsetHeight
+		const setPosition = async ()=>{
+			await new Promise<void>((resolve, reject) => {
+				nextTick(()=>{
+					let img = new Image
+					img.onload = ()=>{
+						// let sketchScale = editPrintElementData.selectDetail.layersObject[0].scale
+						let sketchScale = [1,1]
+						let scaleX = img.width * sketchScale[0] / editPrintElementDom.sketchImg.offsetWidth
+						let scaleY = img.height * sketchScale[1] / editPrintElementDom.sketchImg.offsetHeight
 
-					editPrintElementData.sketchWH = {
-						width:editPrintElementDom.sketchImg.offsetWidth,
-						height:editPrintElementDom.sketchImg.offsetHeight,
-						scale:[scaleX,scaleY],
+						editPrintElementData.sketchWH = {
+							width:editPrintElementDom.sketchImg.offsetWidth,
+							height:editPrintElementDom.sketchImg.offsetHeight,
+							scale:[scaleX,scaleY],
+						}
+						if(!editPrintElementData.selectDetail.printObject.prints)return
+						let state = true
+						// editPrintElementData.stateOverallSingle = 'single'
+						let arr:any = editPrintElementData.selectDetail.printObject.prints
+						if(props.type == 'element'){
+							arr = editPrintElementData.selectDetail.trims.prints
+						}
+						// if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){
+						// 	arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
+						// }
+						if(arr && arr.length > 0){
+							editPrintElementData.printStyleList[props.type].single = []
+							editPrintElementData.printStyleList[props.type].overall = []
+							arr.forEach((item:any)=>{
+								// if(!item.ifSingle){
+								// 	editPrintElementData.stateOverallSingle = 'overall',
+								// 	state = false
+								// }
+								getItemPosition(item)
+							})
+							setItemPosition()
+						}
+						resolve('')
 					}
-					if(!editPrintElementData.selectDetail.printObject.prints)return
-					let state = true
-					// editPrintElementData.stateOverallSingle = 'single'
-					let arr:any = editPrintElementData.selectDetail.newDetail?.print || editPrintElementData.selectDetail.printObject.prints
-					if(props.type == 'element'){
-						arr = editPrintElementData.selectDetail.newDetail?.element || editPrintElementData.selectDetail.trims.prints
-					}
-					if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){
-						arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
-					}
-					if(arr && arr.length > 0){
-						editPrintElementData.printStyleList[props.type].single = []
-						editPrintElementData.printStyleList[props.type].overall = []
-						arr.forEach((item:any)=>{
-							if(!item.ifSingle){
-								editPrintElementData.stateOverallSingle = 'overall',
-								state = false
-							}
-							getItemPosition(item)
-						})
-						setItemPosition()
-					}
-					// if(props.type == 'print'){
-					// 	editPrintElementData.overallSingle = state
-					// }
-				}
-				// undividedLayer
-				//计算宽高使用editPrintElementData.selectDetail.path
-				// img.src = editPrintElementData.selectDetail.path
-				img.src = editPrintElementData.selectDetail.undividedLayer?editPrintElementData.selectDetail.undividedLayer:editPrintElementData.selectDetail.path
+					img.src = editPrintElementData.selectDetail.path
+				})
 			})
+			
 		}
 		// watch(()=>editPrintElementData.selectDetail?.id,(newVal)=>{
 		// 	if(!newVal)return
@@ -471,16 +494,21 @@ export default defineComponent({
 			setPosition()
 		},{immediate: true,})
 		watch(()=>editPrintElementData.stateOverallSingle,(newVal)=>{
-			let arr = editPrintElementData.printStyleList[props.type][newVal]
+			previewDetailPrintData()
+			let arr:any = editPrintElementData.selectDetail.newDetail?.print || editPrintElementData.selectDetail.printObject.prints
+			if(props.type == 'element'){
+				arr = editPrintElementData.selectDetail.newDetail?.element || editPrintElementData.selectDetail.trims.prints
+			}
+			if(editPrintElementData.selectDetail.newDetail?.[editPrintElementData.currentDetailType]){
+				arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType]
+			}
 			if(arr.length > 0){
 				editPrintElementData.imgDomIndex = 0
-				if(newVal == 'overall'){
 					editPrintElementData.printStyleList[props.type].single = []
 					editPrintElementData.printStyleList[props.type].overall = []
 					arr.forEach((item:any,index:number) => {
 						getItemPosition(item)
 					});
-				}
 			}else{
 				editPrintElementData.imgDomIndex = -1
 			}
@@ -509,7 +537,6 @@ export default defineComponent({
 			let scale = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('scale(')[1]?.split(')')[0])
 			let rotateZ = Number(editPrintElementDom.imgDom.children[0].style.transform?.split('rotateZ(')[1]?.split('deg')[0])
 			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.designOpenrtionBtn = true
-			// editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.style.zIndex = editPrintElementData.printZIndex++
 			editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle][index].pattern.transform = {
 				scale:scale,
 				rotateZ:rotateZ?rotateZ:0,
@@ -643,7 +670,6 @@ export default defineComponent({
 				top:editPrintElementDom.imgDom.offsetTop+'px',
 				height:editPrintElementDom.imgDom.offsetHeight+'px',
 				width:editPrintElementDom.imgDom.offsetWidth+'px',
-				// zIndex:editPrintElementData.printZIndex
 			}
 			document.removeEventListener('mousemove',sizeMouseMove)
 			document.removeEventListener('touchmove',sizeTouchmove)
@@ -795,7 +821,8 @@ export default defineComponent({
 						};
 					}
 				};
-				elList[item.index].sort = moveIndex;
+				let index =  elList.findIndex((elListItem:any)=>item.id == elListItem.id)
+				elList[index].sort = moveIndex;
 				moveItem();
 			}
 		}
@@ -826,6 +853,7 @@ export default defineComponent({
 			collItemSize.elList.forEach((elItem:any)=>{
 				let clothesIndex = arr.findIndex((item:any)=>item.uniqueId == elItem.uniqueId)
 				arr[clothesIndex].pattern.style.zIndex = elItem.sort
+				arr[clothesIndex].priority = elItem.id.split('_')[0]
 				// let clothesId = editPrintElementData.designDetail.clothes[clothesIndex].id
 				// editPrintElementData.designDetail.clothes[clothesIndex].priority = elItem.sort
 				// let frontIndex = editPrintElementData.frontBack_.front.findIndex((item:any)=>item.id == clothesId)
@@ -846,7 +874,6 @@ export default defineComponent({
 			let arr:any = editPrintElementData.printStyleList[props.type][editPrintElementData.stateOverallSingle]
 
 			arr.forEach((item,index) => {item.uniqueId  = `${Date.now()}_${index}`});
-
 			const sortedArray = [...arr].sort((a, b) => a.priority - b.priority);
 			const sortMap = {} as any;
 			sortedArray.forEach((item, index) => {
@@ -857,7 +884,8 @@ export default defineComponent({
 					el: elArr[i], 
 					// sort: elArr.length - i -1, 
 					sort: sortMap[arr[i].priority],
-					index: i,
+					id: `${arr[i].priority}_${Date.now() + i}`,
+					// index: i,
 					uniqueId:arr[i]?.uniqueId || 99999,
 				});
 			}
@@ -889,6 +917,7 @@ export default defineComponent({
 		}
 		const inputFillAngle = (angle:any)=>{
 			let arr = editPrintElementData.printStyleList[props.type].overall
+			console.log(angle)
 			arr[editPrintElementData.imgDomIndex].angle = angle
 			editPrintElementDom.pingpuRef.updataList([
 				{
@@ -1111,9 +1140,8 @@ export default defineComponent({
 		.habit_System_Designer {
 			align-items: center;
 			display: flex;
-			justify-content: flex-end;
 			margin-top: 1.8rem;
-			margin-right: .8rem;
+			margin-left: .8rem;
 
 			.ant-slider-track,
 			.ant-slider-rail {
@@ -1207,20 +1235,22 @@ export default defineComponent({
 				// width: 100%;
 				// max-height: 70%;
 				width: max-content;
+
+				overflow-y: auto;
+				overflow-x: hidden;
 				&.active{
 					flex-direction: row;
 				}
+				&::-webkit-scrollbar {
+					display: none;
+				}
 				.designOpenrtion_imgMask{
-					width: auto;
-					height: auto;
+					width: 100%;
+					height: 100%;
 					min-width: 60%;
-					overflow-y: auto;
-					overflow-x: hidden;
 					// max-height: 80%;
 					position: relative;
-					&::-webkit-scrollbar {
-						display: none;
-					}
+					
 					>img{
 						z-index: 2;
 						position: relative;

src/component/Detail/detailRight/overallSetting/RepeatSetting.vue

@@ -1,6 +1,5 @@
 <template>
-	<div class="repeat-setting">
-		{{  }}
+	<div class="repeat-setting" v-if="!mask">
 		<div class="repeat-setting-item">
 			<span class="label">{{ t("Canvas.angle") }}</span>
 			<angle-tool
@@ -17,7 +16,7 @@
 				:max="1000"
 				:step="1"
 				is-input
-				:tipFormatter="(v) => `${scale.toFixed(0)}%`"
+				:tipFormatter="(v) => `${Number(scale)?.toFixed(0)}%`"
 				:value="scale"
 				@input="inputFillScale"
 			/>
@@ -26,7 +25,7 @@
 		<div class="repeat-setting-item">
 			<span class="label">Gap X</span>
 			<slider
-				:min="0"
+				:min="1"
 				:max="1000"
 				:step="1"
 				is-input
@@ -40,7 +39,7 @@
 		<div class="repeat-setting-item">
 			<span class="label">Gap Y</span>
 			<slider
-				:min="0"
+				:min="1"
 				:max="1000"
 				:step="1"
 				is-input
@@ -85,8 +84,15 @@
 	const scale = computed(() => {
 		// let scaleValue = props.object?.scale/10;
 		// return props.object?.scale/10;
-		return props.object?.scale[0] * 100;
+		return (props.object?.scale[0] * 100).toFixed(0);
 	});
+	const scalePrint = computed(() => {
+		let index = sketchWH.value[0] > sketchWH.value[1]?0:1;
+		return sketchWH.value[index] / printWH.value[index] * scale.value / 5;
+	});
+	const printWH = ref([0,0])
+	const sketchWH = ref([0,0])
+	const mask = ref(false)
 	const offset = ref([0,0])
 	const sketchSize:any = async ()=>{
 		let img = new Image();
@@ -102,10 +108,27 @@
 		});
 		return size
 	}
+	const printSize:any = async ()=>{
+		let img = new Image();
+		let size = [0,0];
+		img.src = props.sketchPath;	
+		console.log(props.sketchPath)
+		await new Promise((resolve, reject) => {
+			img.onload = () => {
+				size = [img.width, img.height]
+				resolve([img.width, img.height]);
+			}
+			img.onerror = reject;
+		});
+		return size
+	}
 	watch (() => props.object.path || props.object.location, async () => {
-		let size = await sketchSize();
-		offset.value[0] = props.object.location[0] / size[0] * 100;
-		offset.value[1] = props.object.location[1] / size[1] * 100;
+		mask.value = true
+		sketchWH.value = await sketchSize();
+		printWH.value = await printSize();
+		offset.value[0] = props.object.location[0] / sketchWH.value[0] * 100;
+		offset.value[1] = props.object.location[1] / sketchWH.value[1] * 100;
+		mask.value = false
 	},{immediate: true})
 	const gapX = computed(() => props.object.object?.gapX || 0);
 	const gapY = computed(() => props.object.object?.gapY || 0);
@@ -121,7 +144,6 @@
 	]);
 	const inputFillScale = (e) => {
 		const scale = e / 100;
-		console.log(scale.toFixed(2))
 		emit("inputFillScale", scale.toFixed(2));
 	};
 	const inputOffset = async (e:any)=>{
@@ -133,6 +155,7 @@
 	.repeat-setting {
 		user-select: none;
 		width: 228px;
+		overflow: hidden;
 		> .title {
 			line-height: 35px;
 			font-size: 14px;

src/component/Detail/model/modelNav.vue

@@ -9,7 +9,7 @@
 			@click="selectDetailItem(item,index)">
 			<div class="iconList">
 				<i class="fi fi-rr-add" :class="{ active:item.scope == 'sys'}" @click.stop="sketchSystemToLibrary(item)"></i>
-				<i class="fi fi-rr-trash" @click.stop="deleteDetailItem(item?.id)"></i>
+				<i v-if="probjects?.httpType !== 'SINGLE_DESIGN'" class="fi fi-rr-trash" @click.stop="deleteDetailItem(item?.id)"></i>
 			</div>
 			<img :src="item.path" alt="">
 			<div class="type">{{ getTypeLang(item.type) }}</div>
@@ -41,6 +41,7 @@ export default defineComponent({
         const store = useStore();
 		const {t} = useI18n()
 		const detailData = reactive({
+			probjects:computed(()=>store.state.Workspace.probjects),
 			selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
 			frontBack_:computed(()=>store.state.DesignDetail.frontBack),
 			designDetail:computed(()=>store.state.DesignDetail.designDetail),

src/component/Detail/model/modelPosition copy.vue

@@ -0,0 +1,705 @@
+<template>
+    <div class="molepositon" :class="{active:!imgDesignImg}">
+		<div class="designOpenrtion_imgMask" v-if="frontBack?.body?.path" :style="frontBack?.body?.style">
+			<div class="designOpenrtion_print" v-for="item,index in frontBack.back" :style="frontBack.front[index].style">
+				<img :style="item.imageUrl?'':'display:none;'" :src="item.imageUrl" alt="">
+			</div>
+			<img class="perview_img" @load="setPrintSize()" ref="detailBody" :key="designDetail.designItemId" :src="frontBack?.body?.path" :style="'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'">
+			<!-- <div  class="detail_modal_item_front" ref="target"  v-for="item,index in frontBack.front"  @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)"  :style="item.style">
+				<img :src="item.imageUrl" alt="">
+			</div> -->
+			<div  class="detail_modal_item_front" :ref="el => { setElementRef(el, index) }" v-for="item,index in frontBack.front" :class="{'active':item.id == selectDetail?.id}" :style="item.style">
+				<img :src="item.imageUrl" alt="">
+			</div>
+			<div ref="moveableContainer" class="moveableContainer"></div>
+		</div>
+		<div class="designOpenrtion_imgMask" v-if="!frontBack?.body?.path">
+			<div class="designOpenrtion_print">
+				<img v-if="frontBack.back?.[0].imageUrl" :src="frontBack.back?.[0].imageUrl" style="object-fit: cover;" alt="">
+			</div>
+			<div class="detail_modal_item_front" style="position: relative;">
+				<img :src="frontBack.front?.[0].imageUrl || selectDetail?.path" style="object-fit: cover;" alt="">
+			</div>
+			<!-- <img @load="setSelectSketch()" :src="designDetail?.currentFullBodyView || selectDetail?.undividedLayer" style="object-fit: cover;" alt=""> -->
+		</div>
+    </div>
+	<div class="molepositon imgDesignImg" :class="{active:imgDesignImg}">
+		<div class="designOpenrtion_imgMask" style="width: 100%;height: 100%;">
+			<div class="detail_modal_item_front">
+				<img
+				style="object-fit: cover;"
+				:style="observerWH.width > 0?{width:observerWH.width+'px',height:observerWH.height+'px'}:{width:'100%',height:'auto','object-fit': 'contain'}"
+				 :src="designDetail.designItemUrl" alt="">
+			</div>
+		</div>
+	</div>
+</template>
+<script lang="ts">
+import { defineComponent,computed,inject,watch,nextTick,createVNode,toRefs, reactive, onUnmounted} 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 { getMousePosition } from "@/tool/mdEvent";
+import { KeyValueDB } from "@/tool/indexedDB";
+import Vue3Moveable from 'vue3-moveable';
+import Moveable from 'moveable';
+import { parse } from 'vue/compiler-sfc';
+import { scale } from 'echarts/types/src/scale/helper.js';
+export default defineComponent({
+    components:{
+    },
+	props:{
+	    imgDesignImg:{
+            default:false,
+			type:Boolean,
+		}
+	},
+	emits:['addSketch'],
+    setup(props,{emit}) {
+		const {t} = useI18n()
+        const store = useStore();
+		const detailData = reactive({
+			frontBack:computed(()=>store.state.DesignDetail.frontBack),
+			designDetail:computed(()=>store.state.DesignDetail.designDetail),
+			selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
+			isEditPattern:inject('isEditPattern') as any,
+			singleOveral:inject('singleOveral') as any,
+			detailBody:null as any,
+			observer:null as any,
+			observerWH:{
+				width:0,
+				height:0,
+			},
+		})
+		const selectItem = reactive({
+		    selectDetail:computed(()=>store.state.DesignDetail.selectDetail),
+		    imgDomIndex:-1,
+		    printZIndex:store.state.DesignDetail.printZIndex,
+			imgDom:null as any,
+			direction:'',
+		})
+		
+		watch(()=>detailData.frontBack?.body?.path,(newVal)=>{
+			setPrintSize()
+		})
+		const setPrintSize = ()=>{
+			nextTick(()=>{
+				let sacle = 0
+				const img = new Image();
+				let dom = document.querySelector('.molepositon .perview_img') as any
+				if(!detailData.frontBack?.body?.path || !dom)return
+				img.onload = () => {
+					//监听模特图片宽度设置整体图片宽度
+					if (detailData.observer) {
+						detailData.observer.disconnect()
+					}
+					detailData.observerWH.width = dom.width
+					detailData.observerWH.height = dom.height
+					detailData.observer = new ResizeObserver((entries) => {
+						if(entries[0].contentRect.width == 0)return
+						detailData.observerWH.width = Math.floor(entries[0].contentRect.width)
+						detailData.observerWH.height = Math.floor(entries[0].contentRect.height)
+					})
+					detailData.observer.observe(dom)
+
+
+					if(detailData.designDetail.clothes.length == 0){
+						store.commit('DesignDetail/addDesignColthes')
+						emit('addSketch')
+						return
+					}
+					if(!detailData.selectDetail?.id){
+						let item = detailData.designDetail.clothes.reduce((max, current) => {
+							return current.priority > max.priority ? current : max;
+						});
+						store.commit('DesignDetail/setDesignColthes',item.id)
+					}
+					// resolve(img)
+					sacle = dom.parentNode.offsetWidth / img.width
+					detailData.frontBack.front.forEach((item:any,index:number) => {
+						for (const key in item.style) {
+							if(key == 'zIndex')return
+							let value = item.style[key]
+							if(typeof value !== 'number'){
+								value = value.replace('px','')
+								item.style[key] = value
+							}else{
+								item.style[key] = value*sacle+'px'
+							}
+							// item.style[key] = value*sacle+'px'
+						}
+						for (const key in detailData.frontBack.back[index].style) {
+							if(key == 'zIndex')return
+							if(key == 'transform')return
+							let value = detailData.frontBack.back[index].style[key]
+							if(typeof value !== 'number'){
+								value = value.replace('px','')
+								detailData.frontBack.back[index].style[key] = value
+							}else{
+								detailData.frontBack.back[index].style[key] = value*sacle+'px'
+							}
+							// detailData.frontBack.back[index].style[key] = value*sacle+'px'
+						}
+					});
+					setTimeout(() => {
+						initMoveableForSelected()
+					},500);
+				};
+				img.src = detailData.frontBack?.body?.path;
+			})
+		}
+		const getDetailListDom = reactive({
+			libraryList:null as any,
+			moveableContainer:null as any,//控件层
+		})
+		
+		const elementRefs = ref([]) as any;
+		const moveableInstance = ref(null) as any;
+		const setElementRef = (el, index) => {
+			elementRefs.value[index] = el;
+		};
+		const updateRect = ()=>{
+			setTimeout(() => {
+				if(moveableInstance.value)moveableInstance.value.updateRect()
+			}, 200);
+		}
+		const initMoveableForSelected = () => {
+			// 销毁旧的实例
+			if(selectItem.imgDomIndex == -1)return
+			if (moveableInstance.value) {
+				moveableInstance.value.destroy();
+			}
+			
+			const selectedEl = elementRefs.value[selectItem.imgDomIndex];
+			if (!selectedEl) return;
+			if(!selectedEl.style.left)return
+			moveableInstance.value = new Moveable(getDetailListDom.moveableContainer, {
+				target: selectedEl,
+				draggable: true,
+				scalable: true,
+				rotatable: true,
+				keepRatio: false, // 等比缩放
+				snappable: true,
+				snapThreshold: 5,
+				edge: false,
+			});
+			let startPosition = {//记录初始位置
+				left: 0,
+				top: 0,
+			}
+			moveableInstance.value.on('scaleStart', ({ target, direction }) => {
+				const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
+				if (!frontStyle.mirror){
+					let scaleX = frontStyle.style.transform.match(/scaleX\(([-\d.]+)\)/);
+					let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/);
+					frontStyle.mirror = { x: scaleX[1] == '-1' ? true : false, y: scaleY[1] == '-1' ? true : false };
+				}
+			});
+			moveableInstance.value.on('rotateStart', ({ target, direction }) => {
+				const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
+				if (!frontStyle.mirror){
+					let scaleX = frontStyle.style.transform.match(/scaleX\(([-\d.]+)\)/);
+					let scaleY = frontStyle.style.transform.match(/scaleY\(([-\d.]+)\)/);
+					frontStyle.mirror = { x: scaleX[1] == '-1' ? true : false, y: scaleY[1] == '-1' ? true : false };
+				}
+			});
+			moveableInstance.value.on('dragStart', ({ target, clientX, clientY }) => {
+				startPosition = {
+					left:parseFloat(selectedEl.style.left.replace('px','')) || 0,
+					top:parseFloat(selectedEl.style.top.replace('px','')) || 0,
+				}
+			});
+			// 拖拽
+			moveableInstance.value.on('drag', ({ target, beforeTranslate }) => {
+				let x = startPosition.left + beforeTranslate[0]
+				let y = startPosition.top + beforeTranslate[1]
+				detailData.frontBack.front[selectItem.imgDomIndex].style.left = x + 'px'
+				detailData.frontBack.front[selectItem.imgDomIndex].style.top = y + 'px'
+			});
+			const updateElementTransform = (element, rotateDeg = null) => {
+				
+				const currentTransform = element.style?.transform || '';
+				// 1. 提取当前的所有rotate
+				const currentRotates = (currentTransform.match(/rotate[XYZ]?\([^)]+\)/g) || []);
+				// 2. 获取除镜像和rotate外的其他所有变换
+				let otherTransforms = currentTransform
+					.replace(/scaleX\(-1\)|scaleY\(-1\)/g, '') // 移除镜像
+					.replace(/rotate[XYZ]?\([^)]+\)/g, '')    // 移除rotate
+					.replace(/\s+/g, ' ')
+					.trim();
+				// 3. 构建新transform
+				const transforms = [];
+				// 镜像部分
+				if (element.mirror.x) transforms.push('scaleX(-1)');
+				if (element.mirror.y) transforms.push('scaleY(-1)');
+				if (otherTransforms) transforms.push(otherTransforms);
+				if (rotateDeg !== null) {
+					transforms.push(`rotate(${rotateDeg}deg)`);
+				} else if (currentRotates.length > 0) {
+					transforms.push(...currentRotates);
+				}
+				element.style.transform = transforms.join(' ').trim();
+			};
+
+			moveableInstance.value.on('scale', ({ target, delta, direction }) => {
+				const frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
+				if (!frontStyle.mirror) frontStyle.mirror = { x: false, y: false };
+				
+				const width = parseFloat(frontStyle.style.width);
+				const height = parseFloat(frontStyle.style.height);
+				let left = parseFloat(frontStyle.style.left) || 0;
+				let top = parseFloat(frontStyle.style.top) || 0;
+				let rotation = 0;
+				// 获取原始比例
+				const originalRatio = width / height;
+				if (frontStyle.style.transform) {
+					const transform = frontStyle.style.transform;
+					const match = transform.match(/rotate\(([-\d.]+)deg\)/);
+					if (match) {
+						rotation = parseFloat(match[1]);
+					}
+				}
+				// 根据旋转角度重新计算控制点的方向
+				function getAdjustedCorner(originalCorner, rotationAngle) {
+					const angleRad = rotationAngle * (Math.PI / 180);
+					const cosA = Math.cos(angleRad);
+					const sinA = Math.sin(angleRad);
+					const newX = originalCorner.x * cosA - originalCorner.y * sinA;
+					const newY = originalCorner.x * sinA + originalCorner.y * cosA;
+					const threshold = 0.5;
+					return {
+						x: Math.abs(newX) > threshold ? (newX > 0 ? 1 : -1) : 0,
+						y: Math.abs(newY) > threshold ? (newY > 0 ? 1 : -1) : 0
+					};
+				}
+				
+				if (rotation !== 0) {
+					direction = getAdjustedCorner({x: direction[0], y: direction[1]}, rotation);
+					direction = [direction.x, direction.y];
+				}
+				
+				// 判断是否是对角线方向（需要等比缩放）
+				const isDiagonal = Math.abs(direction[0]) === 1 && Math.abs(direction[1]) === 1;
+				
+				// 处理轴缩放，包含镜像翻转逻辑
+				const processAxis = (axis, val, deltaVal, dir, originalPosition, originalSize, keepRatio = false, otherAxisResult = null) => {
+					let newVal = val * deltaVal;
+					const mirrorKey = axis === 'width' ? 'x' : 'y';
+					const isWidth = axis === 'width';
+					
+					// 检查是否需要镜像翻转（当值小于等于0时）
+					if (newVal <= 0) {
+						frontStyle.mirror[mirrorKey] = !frontStyle.mirror[mirrorKey];
+						newVal = Math.abs(newVal);
+						
+						updateElementTransform(frontStyle);
+						
+						// 镜像翻转后，位置需要根据原始锚点调整
+						if (dir === -1) {
+							// 从左上/右上缩放时，位置保持不变
+							return { 
+								newVal, 
+								adjustPos: originalPosition,
+								shouldFlip: true 
+							};
+						} else {
+							// 从左下/右下缩放时，位置需要调整
+							const newPosition = originalPosition + (originalSize - newVal) * (frontStyle.mirror[mirrorKey] ? -1 : 1);
+							return { 
+								newVal, 
+								adjustPos: newPosition,
+								shouldFlip: true 
+							};
+						}
+					}
+					const shouldMove = (!frontStyle.mirror[mirrorKey] && dir === -1) || 
+									(frontStyle.mirror[mirrorKey] && dir === 1);
+					if (keepRatio && otherAxisResult) {
+						newVal = isWidth ? 
+							otherAxisResult.newVal * originalRatio : 
+							otherAxisResult.newVal / originalRatio;
+					}
+					let adjustPos;
+					if (shouldMove) {
+						adjustPos = originalPosition - (newVal - originalSize);
+					} else {
+						adjustPos = originalPosition;
+					}
+					return { 
+						newVal, 
+						adjustPos,
+						shouldFlip: false
+					};
+				};
+
+					// 自由缩放
+					const widthResult = processAxis('width', width, delta[0], direction[0], left, width);
+					const heightResult = processAxis('height', height, delta[1], direction[1], top, height);
+					
+					frontStyle.style.left = widthResult.adjustPos + 'px';
+					frontStyle.style.top = heightResult.adjustPos + 'px';
+					frontStyle.style.width = widthResult.newVal + 'px';
+					frontStyle.style.height = heightResult.newVal + 'px';
+				// }
+			});
+			
+			// 旋转
+			moveableInstance.value.on('rotate', ({ target, beforeRotate }) => {
+				let frontStyle = detailData.frontBack.front[selectItem.imgDomIndex];
+				// 确保镜像状态存在
+				if (!frontStyle.mirror) frontStyle.mirror = { x: false, y: false };
+				
+				const { x: isMirroredX, y: isMirroredY } = frontStyle.mirror;
+				
+				// 计算实际旋转角度
+				let actualRotate = beforeRotate;
+				
+				// 关键逻辑：当镜像状态不同时（一个true一个false），旋转方向反转
+				if (isMirroredX !== isMirroredY) {
+					actualRotate = -beforeRotate;
+				}
+				
+				// 确保角度在 0-360 度范围内
+				actualRotate = actualRotate % 360;
+				
+				// 如果角度为负数，转换为正数
+				if (actualRotate < 0) {
+					actualRotate += 360;
+				}
+				
+				// 确保角度在 [0, 360) 范围内
+				actualRotate = ((actualRotate % 360) + 360) % 360;
+				
+				updateElementTransform(frontStyle, actualRotate.toFixed(2));
+			});
+			// 调整大小
+			moveableInstance.value.on('resize', ({ target, width, height }) => {
+				// console.log(width, height)
+				// detailData.frontBack.front[selectItem.imgDomIndex].style.width = width
+				// detailData.frontBack.front[selectItem.imgDomIndex].style.height = height
+			});
+			moveableInstance.value.on('dragEnd', ({ target, clientX, clientY }) => {
+				startPosition = {
+					left:0,
+					top:0,
+				}
+				upDataDetail()
+			});
+			moveableInstance.value.on('scaleEnd', () => {
+				upDataDetail()
+			});
+			moveableInstance.value.on('rotateEnd', () => {
+				upDataDetail()
+			});
+		};
+		watch(()=>selectItem.selectDetail,(newValue,oldValue)=>{
+			if(!newValue && newValue?.id == oldValue?.id)return
+			selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id)
+			initMoveableForSelected()
+		},{immediate: true,})
+
+		const setRevocation = async ()=>{
+			let frontBack = JSON.parse(JSON.stringify(detailData.frontBack))	
+			let revocation:any = JSON.parse((await KeyValueDB.get("revocation") as any) || '[]')
+			revocation.push({designData:null,position:frontBack})
+			KeyValueDB.set('revocation', JSON.stringify(revocation));
+		}
+		const upDataDetail = async ()=>{
+			//同步到selectDetail数据中，
+			// getDetailListData.designDetail
+			let {scale,offset,priority,transpose,rotate,position,imageSize} = await getSubmitData(selectItem.selectDetail)
+			selectItem.selectDetail.layersObject[0].scale = scale
+			selectItem.selectDetail.layersObject[1].scale = scale
+			selectItem.selectDetail.layersObject[0].offset = offset
+			selectItem.selectDetail.layersObject[1].offset = offset
+			selectItem.selectDetail.layersObject[0].priority = priority
+			selectItem.selectDetail.layersObject[1].priority = priority
+			selectItem.selectDetail.layersObject[0].rotate = rotate
+			selectItem.selectDetail.layersObject[1].rotate = rotate
+			selectItem.selectDetail.layersObject[0].transpose = transpose
+			selectItem.selectDetail.layersObject[1].transpose = transpose
+			selectItem.selectDetail.layersObject[0].position = position
+			selectItem.selectDetail.layersObject[1].position = position
+			selectItem.selectDetail.layersObject[0].imageSize = imageSize
+			selectItem.selectDetail.layersObject[1].imageSize = imageSize
+			setRevocation()
+		}
+		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 = async (value:any)=>{
+			let parentNode = document.getElementsByClassName('molepositon')[0].getElementsByClassName("designOpenrtion_imgMask")[0].getBoundingClientRect()
+			if(!detailData.frontBack?.body?.layersObject?.[0]?.imageSize){
+				return{
+					scale:value.layersObject[0].scale,
+					offset:value.layersObject[0].offset,
+					priority:value.layersObject[0].priority,
+				} 
+			}
+			let ratio = detailData.frontBack.body.layersObject[0].imageSize[0]/parentNode.width
+
+			let scale = 0
+			let dom:any = document.querySelector('.molepositon .perview_img')
+			const img = new Image();
+			img.src =  detailData.frontBack?.body?.path;
+			await new Promise<void>((resolve, reject) => {
+				img.onload = () => {
+					scale = dom.parentNode.offsetWidth / img.width
+					resolve()
+				};
+			})
+			// 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:null,
+				offset:null,
+				priority:'',
+				maskUrl:'',
+				maskMinioUrl:'',
+				position:null,
+				imageSize:null,
+			}
+			let state = false
+			for (let index = 0; index < arr.length; index++) {
+				if(value.id == arr[index].id){
+					state = true
+					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 positionX = Number((arr[index]?.style?.left.replace(/px/g,'')/scale)).toFixed(2)
+					let positionY = Number((arr[index]?.style?.top.replace(/px/g,'')/scale)).toFixed(2)
+					let imageSizeW = Number((arr[index]?.style?.width.replace(/px/g,'')/scale)).toFixed(2)
+					let imageSizeH = Number((arr[index]?.style?.height.replace(/px/g,'')/scale)).toFixed(2)
+
+					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)
+
+					let transformStr = arr[index]?.style?.transform
+					let scaleX = transformStr.match(/scaleX\(([-\d.]+)\)/)
+					let scaleY = transformStr.match(/scaleY\(([-\d.]+)\)/)
+					let rotate = transformStr.match(/rotate\(([-\d.]+)deg\)/);
+					data.transpose = [parseFloat(scaleX?.[1] || 1),parseFloat(scaleY?.[1] || 1)]
+					data.rotate = parseFloat(rotate?.[1] || 0)
+					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?left:0,top?top:0]
+					data.position = [positionY,positionX]
+					data.imageSize = [imageSizeW,imageSizeH]
+					// data.offset = [left?left:0,top?top:0]
+					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
+				}
+			}
+			if(!state){
+				data.scale = [1,1]
+				data.offset = [0,0]
+				data.priority = 10+arr.length
+			}
+			return data
+		}
+		const deleteNav = ()=>{
+
+		}
+		const updataPosition = ()=>{
+			let url = detailData.frontBack?.body?.path
+			let sacle = 0
+			const img = new Image();
+				img.onload = () => {
+					let dom:any = document.querySelector('.molepositon .perview_img')
+					// resolve(img)
+					sacle = dom.parentNode.offsetWidth / img.width
+					detailData.frontBack.front.forEach((item:any,index:number) => {
+						for (const key in item.style) {
+							if(key == 'zIndex')return
+							if(key == 'transform')return
+							item.style[key] = item.style[key]*sacle+'px'
+						}
+						for (const key in detailData.frontBack.back[index].style) {
+							if(key == 'zIndex')return
+							if(key == 'transform')return
+							detailData.frontBack.back[index].style[key] = detailData.frontBack.back[index].style[key]*sacle+'px'
+						}
+					});
+				};
+				img.src = url;
+		}
+		onUnmounted(()=>{
+			if (detailData.observer) {
+				detailData.observer.disconnect()
+			}
+			if (moveableInstance.value) {
+				moveableInstance.value.destroy();
+			}
+		})
+        return{
+			...toRefs(detailData),
+			...toRefs(selectItem),
+			...toRefs(getDetailListDom),
+			setElementRef,
+
+			setPrintSize,
+			deleteNav,
+			getSubmitData,
+			getMousePosition,
+			updataPosition,
+			updateRect,
+        }
+    },
+	
+	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'
+						}
+					});
+				};
+				img.src = data.value;
+			},
+			updated (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].replace(/px/g,'')*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].replace(/px/g,'')*sacle+'px'
+						}
+					});
+				};
+				img.src = data.value;
+			}
+		}
+	},
+	provide() {
+		return {
+		}
+	},
+		
+})
+</script>
+<style lang="less" scoped>
+    .molepositon{
+		// width: 30rem;
+		// width: calc(66 * .470rem);
+		width: calc(66 * .457rem);
+		height: 66rem;
+		display: flex;
+		flex-direction: column;
+		// margin: auto 0;
+		// padding-top: 3rem;
+		position: relative;
+		display: none;
+		&.active{
+			display: flex;
+			z-index: 2;
+			align-items: center;
+			justify-content: center;
+		}
+		&.imgDesignImg{
+			> .designOpenrtion_imgMask{
+				.detail_modal_item_front{
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					img{
+						// height: auto;
+					}
+				}
+			}	
+		}
+		.moveableContainer{
+			:deep(.moveable-origin){
+				opacity: 0;
+			}
+			:deep(.moveable-control){
+				border-radius: 0;
+			}
+			:deep(.moveable-rotation-control){
+				border-radius: 50%;
+			}
+		}
+		> .designOpenrtion_imgMask{
+			width: auto;
+			height: auto;
+			position: relative;
+			// height: 100%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			>img{
+				z-index: 2;
+				position: relative;
+				width: 100%;
+				height: auto;
+				// height: 100%;
+				// object-fit: contain;
+			}
+			>div{
+				position: absolute;
+				top: 0;
+			}
+			
+			.detail_modal_item_front,.designOpenrtion_print{
+				z-index: 2;
+				height: 100%;
+				width: 100%;
+				pointer-events: none;
+				&.active{
+					pointer-events: auto;
+				}
+				img{
+					width: 100%;
+					// height: ;
+					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;
+			}
+		}
+	}
+</style>

src/component/Events/eventsDetail.vue

@@ -1,142 +1,175 @@
 <template>
-    <div class="eventsDetail_page" :class="{active:isScroll}">
-		<div class="eventsDetail_title ">
+	<div class="eventsDetail_page" :class="{ active: isScroll }">
+		<div class="eventsDetail_title">
 			<div class="modal_title_text" @click="setBack">
 				<i class="fi fi-sr-left"></i>
-				<div class="eventsDetail_title_text">{{ $t('event.back') }}</div>
+				<div class="eventsDetail_title_text">{{ $t("event.back") }}</div>
 			</div>
 		</div>
 		<div class="eventsDetail_content">
 			<div class="eventsDetail_content_left">
-				<fullScreenImg :src="eventsDetail.imgUrl" width="100%" :center="true"></fullScreenImg>
+				<fullScreenImg
+					:src="eventsDetail.imgUrl"
+					width="100%"
+					:center="true"
+				></fullScreenImg>
 			</div>
 			<div class="eventsDetail_content_right">
-				<div class="modal_title_text">
+				<div class="modal_title_text modal_title_text-header flex space-between">
 					<div>{{ eventsDetail.title }}</div>
+					<div class="detail-btn" v-if="eventsDetail.id === 3" @click="openDetail">
+						{{ $t("event.detail") }}
+					</div>
 				</div>
-				<div class="modal_title_text" v-for="item in eventsDetail.textList">
+				<div class="modal_title_text content" v-for="item in eventsDetail.textList">
 					<div class="eventsDetail_content_right_btn_box">
-						<div class="eventsDetail_content_right_btn" v-for="buttonItem,buttonIndex in item?.button" @click="openButton(buttonItem,buttonIndex)">
-							<div v-show="!loadingShow[buttonIndex]" class="started_btn">{{ buttonItem.text }}</div>
-							<div v-show="loadingShow[buttonIndex]" class="started_btn"><i class="fi fi-br-loading"></i></div>
+						<div
+							class="eventsDetail_content_right_btn"
+							v-for="(buttonItem, buttonIndex) in item?.button"
+							@click="openButton(buttonItem, buttonIndex)"
+						>
+							<div v-show="!loadingShow[buttonIndex]" class="started_btn">
+								{{ buttonItem.text }}
+							</div>
+							<div v-show="loadingShow[buttonIndex]" class="started_btn">
+								<i class="fi fi-br-loading"></i>
+							</div>
 						</div>
 					</div>
-					<div class="modal_title_text_intro" v-for="introItem in item?.paragraph" :class="{active:introItem.display == 'flex'}" v-detailText="introItem.text">
-					</div>
+					<div
+						class="modal_title_text_intro"
+						v-for="introItem in item?.paragraph"
+						:class="{ active: introItem.display == 'flex' }"
+						v-detailText="introItem.text"
+					></div>
 				</div>
 			</div>
 		</div>
-	
-    </div>
+	</div>
 </template>
 <script lang="ts">
-import { LoadingOutlined } from "@ant-design/icons-vue";
-import { defineComponent,h ,toRefs,ref,reactive,onMounted,nextTick,provide,computed} from 'vue'
+import { LoadingOutlined } from "@ant-design/icons-vue"
+import {
+	defineComponent,
+	h,
+	toRefs,
+	ref,
+	reactive,
+	onMounted,
+	nextTick,
+	provide,
+	computed
+} from "vue"
 // import RobotAssist from "@/component/HomePage/RobotAssist.vue";
-import { Https } from "@/tool/https";
-import { message, Upload, Modal } from "ant-design-vue";
-import fullScreenImg from '@/component/HomePage/fullScreenImg.vue'
-import { useRouter } from 'vue-router';
-import { useI18n } from "vue-i18n";
-import generalMenu from "@/component/HomePage/generalMenu.vue";
-import eventData from "@/assets/json/events.json";
-import eventDataCn from "@/assets/json/events_cn.json";
-import { useStore } from "vuex";
+import { Https } from "@/tool/https"
+import { message, Upload, Modal } from "ant-design-vue"
+import fullScreenImg from "@/component/HomePage/fullScreenImg.vue"
+import { useRouter } from "vue-router"
+import { useI18n } from "vue-i18n"
+import generalMenu from "@/component/HomePage/generalMenu.vue"
+import eventData from "@/assets/json/events.json"
+import eventDataCn from "@/assets/json/events_cn.json"
+import { useStore } from "vuex"
+
 export default defineComponent({
-    components: {
+	components: {
 		generalMenu,
-		fullScreenImg,
-    },
-	props:{
-		isScroll:{
-			 type:Boolean,
-			 default:true,
-		 },
+		fullScreenImg
 	},
-    setup() {
-		const router = useRouter();
-        const store = useStore();
-		let filter:any = reactive({
-			eventsDetail: {
-			},
-			getListDate:{
-				"getLikePortfolio": 0,
-				"getMyPortfolio": 0,
-				page:1,
-				size:10,
-			},
-			isShowMark:false,
-			isNoData:false,//如果数据为空就不加载
-			loadingShow:{},
-		})
-		let likeFile = (item:any,type:string) => {
+	props: {
+		isScroll: {
+			type: Boolean,
+			default: true
 		}
-		let setBack = ()=>{
-			router.go(-1);
+	},
+	setup() {
+		const { t, locale } = useI18n()
+		const router = useRouter()
+		const store = useStore()
+		let filter: any = reactive({
+			eventsDetail: {},
+			getListDate: {
+				getLikePortfolio: 0,
+				getMyPortfolio: 0,
+				page: 1,
+				size: 10
+			},
+			isShowMark: false,
+			isNoData: false, //如果数据为空就不加载
+			loadingShow: {}
+		})
+		let likeFile = (item: any, type: string) => {}
+		let setBack = () => {
+			router.go(-1)
 			// router.push('/home/events')
-		} 
-		let openButton = (data:any,index:number)=>{
-			if(filter.loadingShow[index]){
+		}
+		let openButton = (data: any, index: number) => {
+			if (filter.loadingShow[index]) {
 				return
 			}
 			filter.loadingShow[index] = true
-			Https.axiosGet(data.https).then(
-                (rv: any) => {
-					if(rv){
+			Https.axiosGet(data.https)
+				.then((rv: any) => {
+					if (rv) {
 						message.success(data.success)
 						filter.loadingShow[index] = false
 					}
-                }
-            ).catch(res=>{
-                filter.loadingShow[index] = false
-            });
+				})
+				.catch((res) => {
+					filter.loadingShow[index] = false
+				})
 		}
-		onMounted (()=>{
-			const { t, locale } = useI18n();
-			const currentLocale = locale.value;
-			let eventLangData:any
-			if(currentLocale == 'ENGLISH'){
+		const openDetail = () => {
+			let language = locale.value === "ENGLISH" ? "en" : "zh"
+			let url = `https://aida-global-design-awards.com.hk/${language}`
+			window.open(url, "_blank")
+
+		//	router.push("/award/index")
+		}
+		onMounted(() => {
+			const currentLocale = locale.value
+			let eventLangData: any
+			if (currentLocale == "ENGLISH") {
 				eventLangData = eventData
-			}else{
+			} else {
 				eventLangData = eventDataCn
 			}
-			eventLangData.eventsItem.forEach((item:any)=>{
-				if(item.id == router.currentRoute.value.query.eventId){
-					filter.eventsDetail = item;
+			eventLangData.eventsItem.forEach((item: any) => {
+				if (item.id == router.currentRoute.value.query.eventId) {
+					filter.eventsDetail = item
 				}
 			})
 		})
-        return {
+		return {
 			...toRefs(filter),
 			likeFile,
 			setBack,
 			openButton,
-        }
-    },
-	directives:{
-		detailText:{
-			mounted (el,binding) {
+			openDetail
+		}
+	},
+	directives: {
+		detailText: {
+			mounted(el, binding) {
 				el.innerHTML = binding.value
 			}
 		}
 	},
-    async mounted(){
-	
-    },
+	async mounted() {}
 })
 </script>
 <style lang="less">
 .eventsDetail_page {
 	min-height: 100%;
-    width: 100%;
+	width: 100%;
 	padding: 0 6rem;
 	padding-top: 5rem;
 
-	&.active{
+	&.active {
 		display: flex;
 		flex-direction: column;
 		height: 100%;
-		.eventsDetail_content{
+		.eventsDetail_content {
 			overflow-y: auto;
 			width: 100%;
 		}
@@ -146,7 +179,7 @@ export default defineComponent({
 		min-height: auto;
 		padding-bottom: 10rem;
 	}
-	.eventsDetail_title{
+	.eventsDetail_title {
 		display: flex;
 		padding: 2rem 0rem;
 		align-items: center;
@@ -154,21 +187,21 @@ export default defineComponent({
 		top: 0;
 		z-index: 222;
 		background: #fff;
-		.modal_title_text{
+		.modal_title_text {
 			cursor: pointer;
 			display: flex;
 			margin-bottom: 0;
 		}
-		.modal_title_text:hover .eventsDetail_title_text{
+		.modal_title_text:hover .eventsDetail_title_text {
 			text-decoration: underline;
 		}
-		i{
+		i {
 			display: flex;
 			align-items: center;
 			margin-right: 1rem;
 		}
 	}
-	.eventsDetail_content{
+	.eventsDetail_content {
 		border-top: 1px solid #f0f0f0;
 		display: flex;
 		justify-content: space-between;
@@ -176,59 +209,69 @@ export default defineComponent({
 		@media (max-width: 768px) {
 			flex-direction: column;
 		}
-		.eventsDetail_content_left,.eventsDetail_content_right{
+		.eventsDetail_content_left,
+		.eventsDetail_content_right {
 			width: 50%;
 			@media (max-width: 768px) {
 				width: 100%;
 			}
 		}
-		.eventsDetail_content_left{
+		.eventsDetail_content_left {
 			width: 40%;
 			max-height: 60rem;
 			@media (max-width: 768px) {
 				width: 100%;
 			}
-			.ant-image{
+			.ant-image {
 				// height: auto;
 				height: 100%;
 			}
-			.eventsDetail_content_left_img{
+			.eventsDetail_content_left_img {
 				width: 100%;
 				cursor: zoom-in;
 			}
 		}
-		.eventsDetail_content_right{
-			.modal_title_text{
-				letter-spacing: .4rem;
+		.eventsDetail_content_right {
+			.modal_title_text {
+				letter-spacing: 0.4rem;
 				font-weight: 600;
-				.modal_title_text_intro{
+				&-header {
+					display: flex;
+					flex-wrap: wrap;
+					align-items: flex-end;
+					justify-content: space-between;
+					gap: 1rem;
+					> div:first-child {
+						flex: 1;
+						min-width: 0;
+					}
+				}
+				.modal_title_text_intro {
 					display: block;
-					&.active{
+					&.active {
 						display: flex;
 						justify-content: space-between;
 					}
-					li{
+					li {
 						width: 48%;
-						
 					}
-					em{
+					em {
 						// font-family: auto;
 					}
-					a{
+					a {
 						display: inline;
 					}
 				}
-				.eventsDetail_content_right_btn_box{
+				.eventsDetail_content_right_btn_box {
 					display: flex;
 					justify-content: space-evenly;
-					.eventsDetail_content_right_btn{
+					.eventsDetail_content_right_btn {
 					}
 				}
-				
 			}
-			.modal_title_text:last-child{
+			.modal_title_text:last-child {
 			}
-			.modal_title_text:last-child::after{
+			.modal_title_text:last-child::after {
 				content: "";
 				display: block;
 				border-top: 3px solid;
@@ -237,4 +280,17 @@ export default defineComponent({
 		}
 	}
 }
-</style>
+.detail-btn {
+	// width: 11rem;
+	padding: 0 1.4rem;
+	height: 4rem;
+	line-height: 4rem;
+	text-align: center;
+	color: #fff;
+	border-radius: 2rem;
+	background-color: #000;
+	font-size: 1.4rem;
+	white-space: nowrap;
+	cursor: pointer;
+}
+</style>

src/component/HomePage/ColorboardUpload.vue

@@ -271,7 +271,7 @@ export default defineComponent({
 		},
 		selectColor:{
 			handler(newVal,oldVal){
-				if(typeof newVal?.rgba?.r !== 'number' && typeof newVal?.rgba?.r !== 'string'){
+				if(newVal?.rgba?.r == null){
 					this.colorList[this.selectIndex] = {}
 					return	
 				}
@@ -388,7 +388,7 @@ export default defineComponent({
         //选择不同的色块
         selectColorItem(index,color){
 			let hex
-			if(color?.rgba?.r){
+			if(color?.rgba?.r != null){
 				hex = this.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a?color.rgba.a:1])
 			}else{
 				hex = '#FFFFFF'
@@ -402,7 +402,7 @@ export default defineComponent({
 			if(this.driver__.driver){
 				driverObj__.moveNext()
 			}
-			if(color?.rgba?.r){
+			if(color?.rgba?.r != null){
 	            this.selectColor = color
 	            this.selectColor.hex = hex
 			}

src/component/HomePage/Generate.vue

@@ -853,9 +853,7 @@ export default defineComponent({
           level2Type = this.sketchboardList?.[0]?.categoryValue
             ? this.sketchboardList[0].categoryValue
             : ''
-          if (this.workspace.styleName) {
-            sloganText = `${this.workspace.styleName},${sloganText}`
-          }
+            sloganText = `${this.workspace.styleName || 'all'},${sloganText}`
         } else if (this.upload.level1Type == 'Printboard') {
           level2Type = this.scene?.value
           if (level2Type == 'Slogan' && this.searchPictureName == '') {
@@ -925,7 +923,9 @@ export default defineComponent({
               },
               onCancel() {}
             })
-          }
+          }else{
+			this.fileList = this.fileList.filter((item: any) => item.imgUrl)
+		  }
         })
     },
     setGenerate(dataList: any) {

src/component/HomePage/UpgradePlan.vue

@@ -7,6 +7,7 @@
 			:get-container="() => $refs.upgradePlan"
             width="35%"
 			height="auto"
+			zIndex="9999999"
             :maskClosable="false"
             :centered="true"
 			:closable="false"

src/component/LoginPage/login/enterprise.vue

@@ -790,7 +790,6 @@ export default defineComponent({
       .login_form_content {
         margin-top: 4rem;
         position: relative;
-
         &[state="2"] {
           > * {
             opacity: 0;

src/component/LoginPage/login/personal.vue

@@ -854,6 +854,10 @@ export default defineComponent({
             font-size: 2.2rem;
             font-weight: bold;
             color: #030303;
+			@media (max-width: 767px) {
+				font-size: 1.2rem;
+				margin-left: .5rem;
+			}
           }
           .email_last_step_block_icon {
             cursor: pointer;

src/component/LoginPage/login/school.vue

@@ -826,7 +826,6 @@ export default defineComponent({
       .login_form_content {
         margin-top: 4rem;
         position: relative;
-
         &[state="2"] {
           > * {
             opacity: 0;

src/component/LoginPage/verificationCodeInput.vue

@@ -161,6 +161,13 @@
 		font-size: 2.4rem;
 		line-height: 8.7rem;
 		outline: none;
+		@media (max-width: 767px) {
+			border-radius: .7rem;
+			width: 3.5rem;
+			height: 3.5rem;
+			font-size: 1.8rem;
+			line-height: 3.5rem;
+		}
 	}
 	input:last-of-type {
 		margin-right: 0;

src/component/common/SelectImages.vue

@@ -20,7 +20,7 @@
         </div>
 
         <!-- 图片网格 -->
-        <div class="image-grid" @scroll="handleScroll">
+        <div class="image-grid" v-show="list.length > 0" @scroll="handleScroll">
           <div
             v-for="(item, index) in list"
             :key="index"
@@ -460,6 +460,7 @@ defineExpose({
   padding: 20px;
   // overflow-y: auto;
   flex: 1;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 20px;
@@ -516,11 +517,13 @@ defineExpose({
 /* 图片网格 */
 .image-grid {
   display: grid;
+  align-content: start;
   overflow-y: auto;
   grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
   gap: 16px;
-  min-height: 22rem;
-  max-height: 50rem;
+  flex: 1;
+//   min-height: 22rem;
+//   max-height: 50rem;
   padding-bottom: 2rem;
 
   @media screen and (max-width: 768px) {
@@ -615,9 +618,9 @@ defineExpose({
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: 60px 20px;
   color: #666;
   min-height: 300px;
+  margin: auto 0;
 
   .empty-icon {
     font-size: 48px;

src/component/home/design/collection/ColorboardUpload.vue

@@ -283,7 +283,7 @@ export default defineComponent({
 		},
 		selectColor:{
 			handler(newVal,oldVal){
-				if(typeof newVal?.rgba?.r !== 'number' && typeof newVal?.rgba?.r !== 'string'){
+				if(newVal?.rgba?.r == null){
 					this.colorList[this.selectIndex] = {}
 					return	
 				}
@@ -400,7 +400,7 @@ export default defineComponent({
         //选择不同的色块
         selectColorItem(index,color){
 			let hex
-			if(color?.rgba?.r){
+			if(color?.rgba?.r != null){
 				hex = this.rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b,color.rgba.a?color.rgba.a:1])
 			}else{
 				hex = '#FFFFFF'
@@ -414,7 +414,7 @@ export default defineComponent({
 			if(this.driver__.driver){
 				driverObj__.moveNext()
 			}
-			if(color?.rgba?.r){
+			if(color?.rgba?.r != null){
 	            this.selectColor = color
 	            this.selectColor.hex = hex
 			}

src/component/home/design/index.vue

@@ -379,6 +379,7 @@ export default defineComponent({
 	setup(props,{emit}) {
 		const {t,locale} = useI18n()
 		const store = useStore();
+		const route = useRoute()
 		const editDesignType = reactive({
 			selectProbject:computed(()=>{
 				return store.state.Workspace.probjects
@@ -624,6 +625,7 @@ export default defineComponent({
 			collItemSize.collTime = setTimeout(()=>{
 			nextTick(()=>{
 				let parentWidth = likeItemDom.value.parentElement.offsetWidth
+				if(parentWidth == 0)return
 				collItemSize.widthValue.value = collItemSize.widthValue.value == -1?100:collItemSize.widthValue.value
 				collItemSize.widthValue.value = collItemSize.widthValue.value > parentWidth?parentWidth:collItemSize.widthValue.value
 				collItemSize.collValue = Math.floor(parentWidth / collItemSize.widthValue.value)
@@ -634,7 +636,6 @@ export default defineComponent({
 				
 				collItemSize.collStyle.width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0] + 'px'
 				collItemSize.collStyle.height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1] + 'px'
-
 				collItemSize.likeStyle.width = collItemSize.itemStyle.width + 'px'
 				collItemSize.likeStyle.height = collItemSize.itemStyle.height + 'px'
 				let elArr = likeItemDom.value.children

src/component/home/design/tools.vue

@@ -56,7 +56,7 @@
 							@changeCanvas="changeCanvas" 
 							@trigger-library="triggerLibrary"
 							:canvasJSON="canvasJSON"
-							:hideCanvas="hideCanvas"
+							:hideCanvas="hideCanvas || !key"
 							ref="editCanvas">
 							<template #existsImageList>
 								<ExistsImageList :list="canvasSelectList" @select="handleImageSelect" />
@@ -135,7 +135,7 @@ export default defineComponent({
 			unLikeList:[],
 			locale:null as any,
 			t:null as any,
-
+			key:true as any
 		})
 		const dataDom = reactive({
 			toProduct:null as any,
@@ -271,7 +271,7 @@ export default defineComponent({
 			allCollectionStr.forEach((itemStr:any)=>{
 				let list = [] as any
 				allCollection[itemStr.value].forEach((imgItem)=>{
-					list.push({url:imgItem.url || imgItem.imgUrl})
+					list.push({url:imgItem?.url || imgItem?.imgUrl})
 				})
 				let obj = {
 					value:itemStr.value,
@@ -335,9 +335,22 @@ export default defineComponent({
 			let canvasData = JSON.parse(canvasJSON)
 			
 			if(!canvasData)return
-			canvasData.canvas.objects.forEach((objectsItem:any) => {
-				if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
-			});
+			function deepProcessObjects(data:any, callback:any) {
+				if (!Array.isArray(data)) return data;
+				return data.map(item => {
+					callback(item)
+					const processedItem = {...item};
+					if (processedItem.objects && 
+						Array.isArray(processedItem.objects) && 
+						processedItem.objects.length > 0) {
+					processedItem.objects = deepProcessObjects(processedItem.objects, callback);
+					}
+					return processedItem;
+				});
+			}
+			canvasData.canvas.objects = deepProcessObjects(canvasData.canvas.objects,(item:any)=>{
+				if(item.type == 'image')item.minioUrl = getMinioUrl(item.src)
+			})
 			let blob = new Blob([JSON.stringify(canvasData)], { type: "application/json" });
 			let formData = new FormData();
 			formData.append("file", blob, "data.json");
@@ -449,9 +462,11 @@ export default defineComponent({
 				imgUrl:imageDataURL,
 				userlikeGroupId:'',
 			}
+			data.key = false
 			dataDom.publish.init(value)
 		}
 		const setPublish = ()=>{
+			data.key = true
 			saveCanvas()
 		}
 		return{

src/component/home/index.vue

@@ -196,9 +196,9 @@ export default defineComponent({
 				type:rv.process == 'SERIES_DESIGN'?'seriesDesign':'singleProductDesign',
 				httpType:rv.process,//项目类型
 				ageGroup:rv.workspaceVO?.ageGroup,
-				style:rv.workspaceVO?.style,
-				styleId:rv.workspaceVO?.styleId,
-				styleName:rv.workspaceVO?.styleName,
+				style:rv.workspaceVO?.style || '',
+				styleId:rv.workspaceVO?.styleId || null,
+				styleName:rv.workspaceVO?.styleName || '',
 				sex:rv.workspaceVO?.sex,
 				userBrandDnaImg:rv.workspaceVO?.userBrandDnaImg,
 				userBrandDnaName:rv.workspaceVO?.userBrandDnaName,

src/component/home/newProject/setting.vue

@@ -94,9 +94,9 @@ export default defineComponent({
 				type:rv.process == 'SERIES_DESIGN'?'seriesDesign':'singleProductDesign',
 				httpType:rv.process,//项目类型
 				ageGroup:rv.workspaceVO.ageGroup,
-				style:rv.workspaceVO.style,
-				styleId:rv.workspaceVO.styleId,
-				styleName:rv.workspaceVO.styleName,
+				style:rv.workspaceVO.style || '',
+				styleId:rv.workspaceVO.styleId || null,
+				styleName:rv.workspaceVO.styleName || '',
 				sex:rv.workspaceVO.sex,
 				userBrandDnaImg:rv.workspaceVO.userBrandDnaImg,
 				userBrandDnaName:rv.workspaceVO.userBrandDnaName,

src/component/home/newProject/workspace.vue

@@ -179,9 +179,9 @@ export default defineComponent({
 			dataDom.brandDNA.init(data.selectObject);
 		}
 		const setWorkspaceStyle = (value:any)=>{
-			data.selectObject.styleName = value.name
-			data.selectObject.style = value.value
-			data.selectObject.styleId = value.id
+			data.selectObject.styleName = value.name || ''
+			data.selectObject.style = value.value || ''
+			data.selectObject.styleId = value.id || null
 			// store.commit('setProbject',data)
 		}
 		const setWorkspaceBrandDNA = (value:any)=>{
@@ -238,9 +238,9 @@ export default defineComponent({
 						// type:rv.process == 'SERIES_DESIGN'?'seriesDesign':'singleProductDesign',
 						// httpType:rv.process,//项目类型
 						ageGroup:rv.workspaceVO?.ageGroup,
-						style:rv.workspaceVO?.style,
-						styleId:rv.workspaceVO?.styleId,
-						styleName:rv.workspaceVO?.styleName,
+						style:rv.workspaceVO?.style || '',
+						styleId:rv.workspaceVO?.styleId || null,
+						styleName:rv.workspaceVO?.styleName || '',
 						sex:rv.workspaceVO?.sex,
 						userBrandDnaImg:rv.workspaceVO?.userBrandDnaImg,
 						userBrandDnaName:rv.workspaceVO?.userBrandDnaName,

src/component/home/tools/deReconstruction/index.vue

@@ -206,11 +206,22 @@ export default defineComponent({
 			if(!canvasJSON)return
 			if(!store.state.Workspace.probjects?.id)return
 			let canvasData = JSON.parse(canvasJSON)
-			console.log(canvasData)
-			canvasData.canvas.objects.forEach((objectsItem:any) => {
-				if(objectsItem.type == 'image')objectsItem.minioUrl = getMinioUrl(objectsItem.src)
-				
-			});
+			function deepProcessObjects(data:any, callback:any) {
+				if (!Array.isArray(data)) return data;
+				return data.map(item => {
+					callback(item)
+					const processedItem = {...item};
+					if (processedItem.objects && 
+						Array.isArray(processedItem.objects) && 
+						processedItem.objects.length > 0) {
+					processedItem.objects = deepProcessObjects(processedItem.objects, callback);
+					}
+					return processedItem;
+				});
+			}
+			canvasData.canvas.objects = deepProcessObjects(canvasData.canvas.objects,(item:any)=>{
+				if(item.type == 'image')item.minioUrl = getMinioUrl(item.src)
+			})
 			let blob = new Blob([JSON.stringify(canvasData)], { type: "application/json" });
 			let formData = new FormData();
 			formData.append("file", blob, "data.json");

src/component/home/tools/poseTransfer/index.vue

@@ -352,7 +352,8 @@ export default defineComponent({
   props: {
     isDesignPage: {
       type: Boolean,
-      default: false
+      default: false,
+      required:false
     },
     source: {
       type: String,
@@ -773,7 +774,7 @@ export default defineComponent({
           data.lastSelectImg = res.data
         }
       }
-      // 同步尾帧文件列表到全局 store
+      // 同步尾帧文件列表到全局 store（使用专门的 lastFrameList）
       store.commit('setPoseTransferLastFrameList', {
         str: 'set',
         list: [file]
@@ -989,6 +990,7 @@ export default defineComponent({
           if (data.lastSelectImg?.id === item.id) {
             data.lastSelectImg = {}
           }
+          // 使用专门的 lastFrameList mutation 清空列表
           store.commit('setPoseTransferLastFrameList')
         } else {
           // 如果删除的是当前选中的首帧，清空选中状态
@@ -1176,10 +1178,10 @@ export default defineComponent({
         firstFrameList.value = store.state.HomeStoreModule.uploadElement.filter(
           item => item.frameType === 'first'
         )
-
-        lastFrameList.value = store.state.HomeStoreModule.uploadElement.filter(
-          item => item.frameType === 'last'
-        )
+        // 注意：尾帧通过专门的 watch (lastFrameList) 监听，不需要从这里过滤
+        // lastFrameList.value = store.state.HomeStoreModule.uploadElement.filter(
+        //   item => item.frameType === 'last'
+        // )
         // 更新 showFirstFrameList 中项的选中状态
         showFirstFrameList.value.forEach((listItem: any) => {
           if (listItem.id == data.selectImg.id) {

src/component/mainPage/signUp/index.vue

@@ -111,7 +111,7 @@ export default defineComponent({
             type: 'personal',
             info: '您的AI时尚设计助手',
             price: 'HK$0',
-            detail: '自注册之日起 5 天内 · 50 个积分',
+            detail: '自注册之日起 7 天内 · 50 个积分',
             highlight: '',
             discounts: '9折优惠',
             detailList: [
@@ -190,7 +190,7 @@ export default defineComponent({
             type: 'personal',
             info: '您的AI时尚设计助手',
             price: 'HK$0',
-            detail: '自注册之日起 5 天内 · 50 个积分',
+            detail: '自注册之日起 7 天内 · 50 个积分',
             highlight: '',
             discounts: '9折优惠',
             detailList: [
@@ -255,7 +255,7 @@ export default defineComponent({
             type: 'personal',
             info: 'Your AI Fashion Design Assistant',
             price: 'HK$0',
-            detail: '5 days from sign-up · 50 credits',
+            detail: '7 days from sign-up · 50 credits',
             highlight: '',
             discounts: '10% off',
             detailList: [
@@ -334,7 +334,7 @@ export default defineComponent({
             type: 'personal',
             info: 'Your AI Fashion Design Assistant',
             price: 'HK$0',
-            detail: '5 days from sign-up · 50 credits',
+            detail: '7 days from sign-up · 50 credits',
             highlight: '',
             discounts: '10% off',
             detailList: [

src/component/mainPage/signUp/registerModel.vue

@@ -79,7 +79,7 @@
 										Forgot password？
 									</div> -->
                 </div>
-                <div class="password_input_block">
+                <div class="password_input_block" v-show="emailStap !== 2">
                   <div v-show="passwordConditionShow" class="conditionShow">
                     <div class="item">
                       <div class="icon">
@@ -144,12 +144,13 @@
                     @click="changePasswordType()"
                   ></div>
                 </div>
-                <span style="font-weight: 400; opacity: 0.7"
+                <span style="font-weight: 400; opacity: 0.7"  v-show="emailStap !== 2"
                   >{{ userI18n[selectUserI18n].inputPasswordTip }}</span
                 >
-                <div class="login_form_title marign_top30">{{ userI18n[selectUserI18n].Email }}</div>
+                <div class="login_form_title marign_top30"  v-show="emailStap !== 2">{{ userI18n[selectUserI18n].Email }}</div>
                 <input
                   class="login_form_input"
+				   v-show="emailStap !== 2"
                   :placeholder="userI18n[selectUserI18n].inputEmail"
                   v-model="email"
                   @keydown.enter="submitPerLogin()"
@@ -915,8 +916,13 @@ export default defineComponent({
       .login_form_content {
         margin-top: 4rem;
         position: relative;
+		min-height: 34rem;
 		@media (max-width: 768px) {
 			margin-top: 2.4rem;
+			min-height: auto;
+			&[state="2"] {
+				height: 20rem;
+			}
 		}
         &[state="2"] {
           > * {
@@ -1015,6 +1021,9 @@ export default defineComponent({
         // margin-top: 4rem;
         .email_last_step_bottom {
           padding: 0 40px;
+			@media (max-width: 767px) {
+				padding: 0 2rem;	
+			}
         }
         .email_last_step_block {
           padding: 10px;
@@ -1028,6 +1037,10 @@ export default defineComponent({
             font-size: 2.2rem;
             font-weight: bold;
             color: #030303;
+			@media (max-width: 767px) {
+				font-size: 1.2rem;
+				margin-left: .5rem;
+			}
           }
           .email_last_step_block_icon {
             cursor: pointer;
@@ -1229,6 +1242,9 @@ export default defineComponent({
     font-weight: bold;
     color: #000;
     cursor: pointer;
+	@media (max-width: 767px) {
+		font-size: 1rem;
+	}
   }
 
   .email_last_step_des {
@@ -1237,16 +1253,25 @@ export default defineComponent({
     justify-content: space-between;
     margin-top: 4rem;
     margin-bottom: 2rem;
-
+	@media (max-width: 767px) {
+		margin-top: 2rem;
+		margin-bottom: 1rem;
+	}
     .sent_email_content {
       font-size: 1.8rem;
       font-weight: bold;
       color: #a5b0c2;
+	  @media (max-width: 767px) {
+		font-size: 1.2rem;
+	  }
     }
 
     .email_tip_content {
       font-size: 1.4rem;
       color: #030303;
+		@media (max-width: 767px) {
+			font-size: 1.2rem;
+		}
     }
   }
 }

src/component/modules/generalMiniCanvas.vue

@@ -2,11 +2,13 @@
 	<div class="generalCanvas">
 		<div class="canvasBox" ref="canvasBox">
 			<editCanvas v-if="canvasLoad" :config="canvasConfig" 
+				:title="canvasTitle"
 				@canvasInit="canvasInit"
 				@changeCanvas="changeCanvas"
 				is-general
 				:hideCanvas="hideCanvas"
 				:isBackgroundChangeable="false"
+				:isChangeCanvasSize="isChangeCanvasSize"
 				ref="editCanvas"></editCanvas>
 		</div>
 		<div class="btn" v-if="btnShow">
@@ -35,6 +37,14 @@ export default defineComponent({
 		editCanvas,
     },
 	props:{
+		canvasTitle:{
+			type:String,
+			default:''
+		},
+		isChangeCanvasSize:{
+			type:Boolean,
+			default:true
+		},
 		imgUrl:{
 			type:String,
 			default:''
@@ -174,6 +184,7 @@ export default defineComponent({
         return {
 			...toRefs(data),
 			...toRefs(dataDom),
+			...toRefs(props),
 			isShowMark,
 			canvasLoadAddImg,
 			getCanvasData,

src/component/modules/habitSetStyle.vue

@@ -102,9 +102,9 @@ setup(props,{emit}) {
 		// if(habitSetStyleData.styleList.length == 0){
 		// 	getStyleList()
 		// }
-		oldDataId = data.styleId
-		habitSetStyleData.selectStyle.id = data.styleId 
-		habitSetStyleData.selectStyle.name = data.styleName 
+		oldDataId = data.styleId || null
+		habitSetStyleData.selectStyle.id = data.styleId || null
+		habitSetStyleData.selectStyle.name = data.styleName  || ''
 		// habitSetStyleData.selectStyleId = 'feng2'
 	}
 	let setCover = (item:any)=>{

src/component/toolsPage/index.vue

@@ -165,9 +165,22 @@ export default defineComponent({
 			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)
-				});
+				function deepProcessObjects(data:any, callback:any) {
+					if (!Array.isArray(data)) return data;
+					return data.map(item => {
+						callback(item)
+						const processedItem = {...item};
+						if (processedItem.objects && 
+							Array.isArray(processedItem.objects) && 
+							processedItem.objects.length > 0) {
+						processedItem.objects = deepProcessObjects(processedItem.objects, callback);
+						}
+						return processedItem;
+					});
+				}
+				canvasData.canvas.objects = deepProcessObjects(canvasData.canvas.objects,(item:any)=>{
+					if(item.type == 'image')item.minioUrl = getMinioUrl(item.src)
+				})
 				let blob = new Blob([JSON.stringify(canvasData)], { type: "application/json" });
 				let formData = new FormData();
 				formData.append("file", blob, "data.json");

src/lang/cn.ts

@@ -1147,6 +1147,11 @@ export default {
     System: '系统',
     Library: '库'
   },
+  CanvasTitle: {
+	ModifySketch: '修改草图',
+	ModifyItem: '修改单品',
+	RedGreen: '编辑前片后片',
+  },
   Canvas: {
     Canvas: '画布',
     layer: '图层',
@@ -1498,6 +1503,12 @@ export default {
 	CompositeLuminosity: '亮度',
 	CompositeLuminosityTip: '亮度：保留原图像颜色，改变新图像亮度',
 	GarmentPartSelector: '服装部件选取',
+	LeftClickAdd: '左键添加',
+	RightClickRemove: '右键移除',
+	PointSelection: '点选',
+	MarqueeSelection: '框选',
+	BrushSelection: '画笔',
+	Erase: '擦除',
   },
   speedList: {
     High: '高级',
@@ -1521,7 +1532,8 @@ export default {
     LiquefactionTool: '液化工具'
   },
   event: {
-    back: '返回'
+    back: '返回',
+    detail:'查看详情'
   },
   admin: {
     allUser: '所有用户',

src/router/index.ts

@@ -53,6 +53,12 @@ const routes: Array<RouteRecordRaw> = [
     meta: { enter: "all" },
     component: () => import("@/views/Register.vue"),
   },
+  {
+    path: "/register/:lang",
+    name: "registerLang",
+    meta: { enter: "all" },
+    component: () => import("@/views/Register.vue"),
+  },
   {
     path: "/upgrade",
     name: "upgrade",
@@ -437,8 +443,8 @@ const routes: Array<RouteRecordRaw> = [
         component:()=>import('@/views/AwardPage/index.vue')
       },
       {
-        path:'apply',
-        name:'Apply',
+        path:'contestants',
+        name:'Contestants',
         component:()=>import('@/views/AwardPage/apply.vue')
       }
     ]
@@ -532,7 +538,7 @@ function isTimeRangePassed(timeRange) {
 router.beforeEach((to: any, from, next) => {
 	store.commit("set_view_loading", true);
   //系统维护时间
-	const time = '2025-12-19T21:00:00 - 2025-12-19T22:00:00';
+	const time = '2026-01-23T21:00:00 - 2026-01-23T22:00:00';
 	if (isTimeRangePassed(time) == 'in_progress') {
 	  // 	系统维护
 		const toName = to.name === 'upgrade';

src/store/Detail/designDetail.ts

@@ -81,7 +81,7 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 						left:v.layersObject[i].position?.[1],
 						width:v.layersObject[i].imageSize?.[0],
 						height:v.layersObject[i].imageSize?.[1],
-						transform:`rotate(${v.layersObject[i]?.rotate || 0}deg) scaleX(${v.layersObject[i].transpose?.[0] || 1}) scaleY(${v.layersObject[i].transpose?.[1] || 1})`,
+						transform:`rotate(${v.layersObject?.[i]?.rotate || 0}deg) scaleX(${v.layersObject[i].transpose?.[0] || 1}) scaleY(${v.layersObject[i].transpose?.[1] || 1})`,
 					}
 					v.layersObject[i].centers={
 						left:0,
@@ -277,7 +277,7 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 									width:item.layersObject[i].imageSize?.[0] * scale + 'px',
 									height:item.layersObject[i].imageSize?.[1] * scale + 'px',
 									zIndex:v?.style?.zIndex?v.style.zIndex:v.priority?v.priority:state.frontBack.front.length,
-									transform:`rotate(${item.layersObject?.[i]?.rotate || 0}deg) scaleX(${item.layersObject[i].transpose?.[0] || 1}) scaleY(${item.layersObject[i].transpose?.[1] || 1})`,
+									transform:`scaleX(${item.layersObject[i].transpose?.[0] || 1}) scaleY(${item.layersObject[i].transpose?.[1] || 1}) rotate(${item.layersObject?.[i]?.rotate || 0}deg)`,
 								}
 								item.layersObject[i].centers={
 									left:0,
@@ -315,6 +315,24 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 					detailItem.offset = [0,0]
 					detailItem.transpose = item.transpose || [1,1]
 					detailItem.rotate = item.rotate || 0
+					function isJSONString(str) {
+						try {
+							JSON.parse(str);
+							return true;  // 解析成功，是有效的JSON字符串
+						} catch (e) {
+							return false; // 解析失败，不是有效的JSON字符串
+						}
+					}
+					item.trims?.prints?.forEach((item:any) => {
+						if(isJSONString(item.object)){
+							item.object = JSON.parse(item.object)
+						}
+					});
+					item.printObject?.prints?.forEach((item:any) => {
+						if(isJSONString(item.object)){
+							item.object = JSON.parse(item.object)
+						}
+					});
 					detailItem.printObject = item.printObject
 					detailItem.trims = item.trims
 					detailItem.type = item.type
@@ -345,7 +363,6 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 					uploadDetail(state.selectDetail)
 				}
 			}
-			if(value.fun)value.fun()
 
 		},
 		

src/store/homeStore/homeStore.ts

@@ -74,7 +74,7 @@ const HomeStoreModule : Module<DesignDetail,RootState> = {
         },
 		setPoseTransferLastFrameList(state,data){
 			// 支持两种方式：set 替换整个列表；add/删除与 uploadElement 一致
-			if(data.str === 'set'){
+			if(data?.str === 'set'){
 				state.lastFrameList = data.list || []
 				return
 			}else{

src/store/userHabit/userHabit.ts

@@ -77,7 +77,7 @@ const userHabit : Module<UserHabit,RootState> = {
 			followeeCount: '-',
 			followerCount: '-',
 			accountExtendList:null,
-			systemList:[],
+			systemList:[1],
 			expireTime:null,
 			language:'',
 			organizationId: null,
@@ -194,7 +194,7 @@ const userHabit : Module<UserHabit,RootState> = {
 				followeeCount: '-',
 				followerCount: '-',
 				accountExtendList:null,
-				systemList:[],
+				systemList:[1],
 				expireTime:null,
 				language:'',
 				organizationId: null,
@@ -407,7 +407,7 @@ const userHabit : Module<UserHabit,RootState> = {
 								item.name = name
 							});
 							// const {t} = useI18n()
-							rv.unshift({name:t('Model.all'),value:'',id:''})
+							rv.unshift({name:t('Model.all'),value:'',id:null})
 							store.commit('setMannequinStyle',rv)
 							resolve('')
 						}

src/store/workspace/workspace.ts

@@ -74,7 +74,8 @@ const Workspace: Module<DesignDetail, RootState> = {
     },
     setProbject(state, data) {
       for (const key in data) {
-        if (data[key] == undefined) continue
+		let list = ['styleName','styleId','style']
+        if (data[key] == undefined && !list.includes(key)) continue
         state.probjects[key] = data[key]
       }
     },

src/tool/https.js

@@ -2,133 +2,150 @@ import axios from 'axios'
 // import qs from 'qs'
 // import message from '@/components/public/message/src'
 import router from '@/router/index'
-import {getCookie,clonAllCookie} from '@/tool/cookie'
+import { getCookie, clonAllCookie } from '@/tool/cookie'
 // import cookie from '@/tools/cookie.js'
 
-axios.defaults.timeout = 60000;                        //响应时间
+axios.defaults.timeout = 60000 //响应时间
 // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';        //配置请求头
-axios.defaults.headers.post["Content-Type"] = "application/json";
+axios.defaults.headers.post['Content-Type'] = 'application/json'
 
-
-axios.defaults.headers.post['lang'] = 'en';        //配置语言请求头
-axios.defaults.withCredentials = true;  //跨域携带cookie
-import { message } from 'ant-design-vue';
-import store from '@/store';
+axios.defaults.headers.post['lang'] = 'en' //配置语言请求头
+axios.defaults.withCredentials = true //跨域携带cookie
+import { message } from 'ant-design-vue'
+import store from '@/store'
 // if(import.meta.env.VITE_USER_NODE_ENV == "development"){
 // 	axios.defaults.baseURL = "";   //配置接口地址
 // }else{
 // 	axios.defaults.baseURL = import.meta.env.VITE_APP_BASE_URL;   //配置接口地址
 // }
-// let httpIp 
+// let httpIp
 // if(import.meta.env.VITE_USER_NODE_ENV == 'development'){
 // 	httpIp = 'http://192.168.1.12:10086'
 // }else{
 // 	httpIp = ''
 // }
-let httpIp = import.meta.env.VITE_USER_NODE_ENV == 'development' ? "" : "";
+let httpIp = import.meta.env.VITE_USER_NODE_ENV == 'development' ? '' : ''
 // let httpIp = import.meta.env.VITE_USER_NODE_ENV == 'development' ? "https://192.168.1.8:10086" : "";
 
-axios.defaults.baseURL = httpIp;   //配置接口地址
+axios.defaults.baseURL = httpIp //配置接口地址
 // console.log(axios.defaults.baseURL);
-axios.defaults.baseURL = import.meta.env.VITE_APP_BASE_URL;   //配置接口地址
+axios.defaults.baseURL = import.meta.env.VITE_APP_BASE_URL //配置接口地址
 console.log(import.meta.env.VITE_APP_BASE_URL)
 
 // 创建取消令牌
-const CancelToken = axios.CancelToken;
-const source = CancelToken.source();
+const CancelToken = axios.CancelToken
+const source = CancelToken.source()
 // console.log(import.meta.env.VITE_APP_BASE_URL);
 let isLoginTime = false
 //POST传参序列化(添加请求拦截器)
-axios.interceptors.request.use((config) => {
-    //在发送请求之前做某件事
+axios.interceptors.request.use(
+	config => {
+		//在发送请求之前做某件事
 
-
-	
-	// config.cancelToken = source.token
-    if(config.method  === 'post' || config.method  === 'put' || config.method  === 'delete'){
-        // config.data = qs.stringify(config.data);
-        // config.data = JSON.stringify(config.data);
-    }
-    // config.headers.Authorization = 'Bearer-eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiIyIiwic3ViIjoie1wiaWRcIjoyLFwidXNlcm5hbWVcIjpcImxpcnNcIn0iLCJpYXQiOjE2NjU3NDEwODcsImlzcyI6IkRXSiIsImF1dGhvcml0aWVzIjoiW10iLCJleHAiOjE2NzQzODEwODd9.ShM9R_NNFD7oo1OvxrEgg7PFeWinOuAKkuInUCMQupp66s64Hhv8tN0Wwr83nIN4rHPqtn95wmd4msWcvaFYJA'; 
-	config.headers.Authorization = getCookie('token'); 
-    return config;
-},(error) =>{
-    return Promise.reject(error);
-});
-const binaryToUrl = (binary,type = 'application/json',res)=>{
-	let blob = new Blob([binary], {'content-type':type});
-	let url = URL.createObjectURL(blob);
+		// config.cancelToken = source.token
+		if (
+			config.method === 'post' ||
+			config.method === 'put' ||
+			config.method === 'delete'
+		) {
+			// config.data = qs.stringify(config.data);
+			// config.data = JSON.stringify(config.data);
+		}
+		// config.headers.Authorization = 'Bearer-eyJhbGciOiJIUzUxMiJ9.eyJqdGkiOiIyIiwic3ViIjoie1wiaWRcIjoyLFwidXNlcm5hbWVcIjpcImxpcnNcIn0iLCJpYXQiOjE2NjU3NDEwODcsImlzcyI6IkRXSiIsImF1dGhvcml0aWVzIjoiW10iLCJleHAiOjE2NzQzODEwODd9.ShM9R_NNFD7oo1OvxrEgg7PFeWinOuAKkuInUCMQupp66s64Hhv8tN0Wwr83nIN4rHPqtn95wmd4msWcvaFYJA';
+		config.headers.Authorization = getCookie('token')
+		return config
+	},
+	error => {
+		return Promise.reject(error)
+	}
+)
+const binaryToUrl = (binary, type = 'application/json', res) => {
+	let blob = new Blob([binary], { 'content-type': type })
+	let url = URL.createObjectURL(blob)
 	return url
 }
 //返回状态判断(添加响应拦截器)
-axios.interceptors.response.use((res) =>{
-	// if(res.data.data == null){
-	// 	message.warning(res.data.errMsg)
-    //     return Promise.reject(res.data);
-	// }else 
-	if(res?.config?.env?.binary){
-		let url = binaryToUrl(res.data,res.config.env.binaryType,res)
-		return Promise.resolve({url,data:res.data})
-	}
-	if (res?.data) {
-		if (res?.data?.errCode === 0) {
-            // message.error(res?.data?.errMsg)
-            return Promise.resolve(res?.data?.data);
-        } else if(res?.data?.errCode === 1){
-			message.warning(res?.data?.errMsg)
-            return Promise.reject(res?.data);
-        } else if(res?.data?.errCode === 2){
-            return Promise.reject(res?.data);
-		}else if(res?.data?.errCode === -1){
-			message.error(res?.data?.errMsg)
-            return Promise.reject(res?.data);
-		}
+axios.interceptors.response.use(
+	res => {
+		// 允许透传完整响应：请求时传 config.fullData = true
 
-    } else {
-		if (res?.data?.errCode === 0) {
-			message.warning(res?.data?.errMsg)
-			return Promise.reject(res?.data);
-        } else if(res?.data?.errCode === 1){
-			message.warning(res?.data?.errMsg)
-            return Promise.reject(res?.data);
-        } else if(res?.data?.errCode === 2){
-            return Promise.reject(res?.data);
-		}else if(res?.data?.errCode === -1){
-			message.error(res?.data?.errMsg)
-            return Promise.reject(res?.data);
+		// if(res.data.data == null){
+		// 	message.warning(res.data.errMsg)
+		//     return Promise.reject(res.data);
+		// }else
+		if (res?.config?.env?.binary) {
+			let url = binaryToUrl(res.data, res.config.env.binaryType, res)
+			return Promise.resolve({ url, data: res.data })
 		}
-    }
-}, function(error) {
-    if(error?.response?.status === 401 && router.currentRoute._value.name != 'setIdentification'){//如果是记录浏览器页面就不跳转login
-		clonAllCookie()
-		if(!isLoginTime){
-			isLoginTime = true
-			let isSystemUserRouteList = ['/Square']//如果是这两个页面就无需跳转未登录页
-			let sSystemUser = false
-			for (let index = 0; index < isSystemUserRouteList.length; index++) {
-				if(router.currentRoute.value.path.indexOf(isSystemUserRouteList[index]) > -1){
-					sSystemUser = true
-					break
+		if (res?.data) {
+			if (res?.data?.errCode === 0) {
+				// message.error(res?.data?.errMsg)
+				if (res?.config?.fullData) {
+					return Promise.resolve(res.data)
 				}
+				return Promise.resolve(res?.data?.data)
+			} else if (res?.data?.errCode === 1) {
+				message.warning(res?.data?.errMsg)
+				return Promise.reject(res?.data)
+			} else if (res?.data?.errCode === 2) {
+				return Promise.reject(res?.data)
+			} else if (res?.data?.errCode === -1) {
+				message.error(res?.data?.errMsg)
+				return Promise.reject(res?.data)
 			}
-			if(!sSystemUser){
-				router.replace('/')
+		} else {
+			if (res?.data?.errCode === 0) {
+				message.warning(res?.data?.errMsg)
+				return Promise.reject(res?.data)
+			} else if (res?.data?.errCode === 1) {
+				message.warning(res?.data?.errMsg)
+				return Promise.reject(res?.data)
+			} else if (res?.data?.errCode === 2) {
+				return Promise.reject(res?.data)
+			} else if (res?.data?.errCode === -1) {
+				message.error(res?.data?.errMsg)
+				return Promise.reject(res?.data)
 			}
-			message.warning('Please login and try again~')
-			store.commit('createDetail')
-			store.commit('createProbject')
-			store.commit('createProjectPath')
-			setTimeout(()=>[
-				isLoginTime = false
-			],2000)
 		}
-		// source.cancel('取消后续接口调用');
-        return Promise.reject()
-    }
-    let data_new = error?.response?.data
-    // message.error(data_new?.errMsg || 'Error: server exception')
-    return Promise.reject(data_new);
-});
+	},
+	function (error) {
+		if (
+			error?.response?.status === 401 &&
+			router.currentRoute._value.name != 'setIdentification'
+		) {
+			//如果是记录浏览器页面就不跳转login
+			clonAllCookie()
+			if (!isLoginTime) {
+				isLoginTime = true
+				let isSystemUserRouteList = ['/Square'] //如果是这两个页面就无需跳转未登录页
+				let sSystemUser = false
+				for (let index = 0; index < isSystemUserRouteList.length; index++) {
+					if (
+						router.currentRoute.value.path.indexOf(
+							isSystemUserRouteList[index]
+						) > -1
+					) {
+						sSystemUser = true
+						break
+					}
+				}
+				if (!sSystemUser) {
+					router.replace('/')
+				}
+				message.warning('Please login and try again~')
+				store.commit('createDetail')
+				store.commit('createProbject')
+				store.commit('createProjectPath')
+				setTimeout(() => [(isLoginTime = false)], 2000)
+			}
+			// source.cancel('取消后续接口调用');
+			return Promise.reject()
+		}
+		let data_new = error?.response?.data
+		// message.error(data_new?.errMsg || 'Error: server exception')
+		return Promise.reject(data_new)
+	}
+)
 export const Https = {
 	httpUrls: {
 		interfaceUrl: '',
@@ -447,9 +464,16 @@ export const Https = {
 		segAnything: `/api/python/segAnything`, //分割Anything
 
 		// award页面
-		uploadPDF: '/api/global-award/uploads/pdf', // 上传pdf
-		uploadVideo: '/api/global-award/uploads/video', // 上传video
-    
+		checkEmail: '/api/global-award/checkEmail', // 检查邮箱是否存在
+		checkOTP: '/api/global-award/checkCode', // 检查验证码是否正确
+		initPdfUpload: '/api/global-award/uploads/pdf/init', // 初始化pdf上传
+		initVideoUpload: '/api/global-award/uploads/video/init', // 初始化video上传
+		uploadPDF: '/api/global-award/uploads/pdf/chunk', // 上传pdf
+		uploadVideo: '/api/global-award/uploads/video/chunk', // 上传video
+		uploadPDFComplete: '/api/global-award/uploads/pdf/complete', // 上传pdf完成
+		uploadVideoComplete: '/api/global-award/uploads/video/complete', // 上传video完成
+		submitForm: '/api/global-award/contestants/save', // 提交表单
+		getContestantByID: '/api/global-award/contestants/' // 获取表单
 	},
 
 	axiosGet(url, config) {