1

.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,130 @@
 {
-	"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"
+		},
+		{
+			"id": 3,
+			"title": "AiDA Global Design Awards 2026",
+			"imgUrl": "/image/events/award-poster.gif"
 		}
-	  ],
-	"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",
+			"tips": "For inquiries: awards2026@code-create.com.hk",
+			"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 worldwide 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 allowance, 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,130 @@
 {
-  "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"
+		},
+		{
+			"id": 3,
+			"title": "AiDA全球设计奖 2026",
+			"imgUrl": "/image/events/award-poster-zh.gif"
+		}
 	],
-  "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",
+			"tips": "如有疑问，请联系：awards2026@code-create.com.hk",
+			"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/Account/message/system.vue

@@ -1,22 +1,37 @@
 <template>
-    <div class="account_systemMessage">
+	<div class="account_systemMessage">
 		<div class="account_generalMessage_title modal_title_text">
 			<!-- <span>系统消息</span> -->
-			<div class="account_generalMessage_title_setting" @click="allRead">{{$t('account.AllRead')}}</div>
+			<div class="account_generalMessage_title_setting" @click="allRead">
+				{{ $t("account.AllRead") }}
+			</div>
 		</div>
-		<div class="account_generalMessage_item modal_title_text" v-for="item in dataList" :key="item.id" @click="setRead(item)">
+		<div
+			class="account_generalMessage_item modal_title_text"
+			v-for="item in dataList"
+			:key="item.id"
+			@click="setRead(item)"
+		>
 			<a-badge :dot="item.isRead == 0"></a-badge>
 			<div class="account_generalMessage_item_title">
-				<div class="account_generalMessage_item_title_text" :title="item.content">{{ item.content.title }}</div>
+				<div class="account_generalMessage_item_title_text" :title="item.content">
+					{{ item.content.title }}
+				</div>
 				<div class="modal_title_text_intro">{{ item.createTime }}</div>
 			</div>
 			<div class="modal_title_text_intro">
 				{{ item.content.content }}
-				<span v-if="item.content.link" class="account_generalMessage_item_link">{{ item.content.link }}</span>
+				<span v-if="item.content.link" class="account_generalMessage_item_link">{{
+					item.content.link
+				}}</span>
 			</div>
 		</div>
-		<div class="account_generalMessage_item  modal_title_text" style="display:flex;justify-content: center;" v-if="dataList.length == 0 && isNoData">
-			{{$t('account.dataNull')}}
+		<div
+			class="account_generalMessage_item modal_title_text"
+			style="display: flex; justify-content: center"
+			v-if="dataList.length == 0 && isNoData"
+		>
+			{{ $t("account.dataNull") }}
 		</div>
 		<div class="page_loading_box" v-show="!isNoData">
 			<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
@@ -24,120 +39,138 @@
 				<a-spin size="large" />
 			</span>
 		</div>
-    </div>
+	</div>
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
-import { Https } from "@/tool/https";
-import { useRouter,useRoute } from 'vue-router'
-import { useStore } from "vuex";
-import { useI18n } from 'vue-i18n'
+import {
+	defineComponent,
+	computed,
+	ref,
+	reactive,
+	nextTick,
+	toRefs,
+	createVNode,
+	onMounted
+} from "vue"
+import { Https } from "@/tool/https"
+import { useRouter, useRoute } from "vue-router"
+import { useStore } from "vuex"
+import { useI18n } from "vue-i18n"
+import { isValidUrl } from "@/tool/util"
 export default defineComponent({
-    components:{
-    },
+	components: {},
 	// emits:['putListData'],
-    props:['setReadStatus','setAllmessage','getHistory'],
-    setup(prop,{emit}) {
+	props: ["setReadStatus", "setAllmessage", "getHistory"],
+	setup(prop, { emit }) {
 		const router = useRouter()
-        const store = useStore();
+		const store = useStore()
 		let accountMessage = reactive({
 			dataList: [],
-			page:1,
-			size:10,
+			page: 1,
+			size: 10,
 			isNoData: false,
-			isShowMark: false,
+			isShowMark: false
 		})
-		let loadingDom:any = ref(null)
-		let setmessageList = ()=>{
+		let loadingDom: any = ref(null)
+		let setmessageList = () => {
 			accountMessage.isShowMark = true
 			let data = {
 				page: accountMessage.page,
-				size: accountMessage.size,
+				size: accountMessage.size
 			}
-			prop.getHistory(data).then((rv:any)=>{
-				accountMessage.isShowMark = false
-				
-				if(rv.content.length == 0) {
+			prop.getHistory(data)
+				.then((rv: any) => {
+					accountMessage.isShowMark = false
+
+					if (rv.content.length == 0) {
+						accountMessage.isNoData = true
+					} else {
+						rv.content.forEach((item: any) => {
+							item.content = JSON.parse(item.content)
+						})
+						accountMessage.dataList.push(...rv.content)
+					}
+				})
+				.catch(() => {
+					accountMessage.isShowMark = false
 					accountMessage.isNoData = true
-				}else{
-					rv.content.forEach((item:any) => {
-						item.content = JSON.parse(item.content)
-					});
-					accountMessage.dataList.push(...rv.content)
+				})
+		}
+		let setRead = (item: any) => {
+			let content = item.content.content
+			if (isValidUrl(content)) {
+				if (import.meta.env.VITE_APP_BASE_URL === "https://develop.api.aida.com.hk") {
+					content += "&env=dev"
 				}
-			}).catch(() => {
-				accountMessage.isShowMark = false
-				accountMessage.isNoData = true
-			})
-		}
-		let setRead = (item:any)=>{
-			prop.setReadStatus(item).then((rv:any)=>{
-				item.isRead = 1
-			}).catch((err:any)=>{
-			})
-		}
-		let allRead = ()=>{
-			// emit('setAllmessage')
-			prop.setAllmessage().then(()=>{
-				accountMessage.dataList.forEach((item:any)=>{
+				window.open(content, "_blank")
+			}
+
+			prop.setReadStatus(item)
+				.then((rv: any) => {
 					item.isRead = 1
 				})
-			}).catch((err:any)=>{
-			})
+				.catch((err: any) => {})
+		}
+		let allRead = () => {
+			// emit('setAllmessage')
+			prop.setAllmessage()
+				.then(() => {
+					accountMessage.dataList.forEach((item: any) => {
+						item.isRead = 1
+					})
+				})
+				.catch((err: any) => {})
 		}
 		// provide('exhibitionList',exhibitionList)
-		onMounted (()=>{
+		onMounted(() => {
 			accountMessage.isNoData = false
 			accountMessage.page = 0
-			let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
+			let imgParent: any = document.querySelector(".account_systemMessage .page_loading")
 			new IntersectionObserver(
 				(entries, observer) => {
 					// 如果不是相交，则直接返回
 					// console.log(entries[0]);
-					if (!entries[0].intersectionRatio) return;
-					accountMessage.page+=1
+					if (!entries[0].intersectionRatio) return
+					accountMessage.page += 1
 					setmessageList()
-				},
+				}
 				// { root:worksPage }
-			).observe(loadingDom.value);
+			).observe(loadingDom.value)
 		})
-        return{
-           ...toRefs(accountMessage),
-		   setmessageList,
-		   setRead,
-		   allRead,
-		   loadingDom,
-        }
-    },
-    data(){
-        return{
-            
-        }
-    },
+		return {
+			...toRefs(accountMessage),
+			setmessageList,
+			setRead,
+			allRead,
+			loadingDom
+		}
+	},
+	data() {
+		return {}
+	}
 })
 </script>
 <style lang="less" scoped>
-.account_systemMessage{
+.account_systemMessage {
 	width: 100%;
-	.account_generalMessage_item{
+	.account_generalMessage_item {
 		font-size: var(--aida-fsize1-6);
-		.account_generalMessage_item_title{
+		.account_generalMessage_item_title {
 			display: flex;
 			align-items: center;
 			margin-bottom: 2rem;
-			.account_generalMessage_item_title_text{
+			.account_generalMessage_item_title_text {
 				max-width: 80%;
-				white-space: nowrap;      
-				overflow: hidden;          
+				white-space: nowrap;
+				overflow: hidden;
 				text-overflow: ellipsis;
 			}
-			.modal_title_text_intro{
+			.modal_title_text_intro {
 				margin-left: 4rem;
-				
 			}
 		}
 	}
-	.modal_title_text_intro{
+	.modal_title_text_intro {
 		word-break: break-word;
 		white-space: pre-wrap;
 		font-family: Arial, sans-serif;

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/Administrator/allUserPoerations.vue

@@ -321,6 +321,7 @@ export default defineComponent({
         data = setEditData()
         if (!data.userName || !data.userEmail || !data.validEndTime || !data.systemUser)
           return message.warning('Please check the input box marked with *')
+		delete data.userName
         Https.axiosPost(Https.httpUrls.modifyUser, {}, { params: data }).then(rv => {
           if (rv) {
             cancelDsign()

src/component/Administrator/globalAwardPopularity.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="admin_page globalAwardPopularity" ref="adminPage">
+        <div class="admin_table_search">
+			<div class="admin_state">
+				<div class="admin_state_item">
+					<span>Current Time:</span>
+					<span>{{ currentTimeStr }}</span>
+				</div>
+				<div class="admin_state_item">
+					<span>Raw Visi Count:</span>
+					<span>{{ rawVisitCount }}</span>
+				</div>
+				<div class="admin_state_item">
+					<span>Unique Visit Count:</span>
+					<span>{{ uniqueVisitCount }}</span>
+				</div>
+				
+			</div>
+			<div class="admin_search">
+				<div class="admin_search_item" @click="getGlobalAwardPopularity">
+					<i class="fi fi-br-refresh"></i>
+				</div>
+			</div>
+		</div>
+        <!-- <div class="admin_table_content" ref="questionnaireTable">
+			
+        </div> -->
+    </div>
+</template>
+<script lang="ts">
+import { defineComponent, ref, createVNode,toRefs, computed,reactive, onMounted, nextTick } from "vue";
+import { Https } from "@/tool/https";
+import type { TableColumnsType } from 'ant-design-vue';
+
+export default defineComponent({
+    components: {},
+    setup() {
+		const currentTime = ref(new Date())
+		const currentTimeStr = computed(()=>{
+			return currentTime.value.toLocaleString()
+		})
+		const rawVisitCount = ref(0)
+		const uniqueVisitCount = ref(0)
+		const getGlobalAwardPopularity = () => {
+			Https.axiosGet(Https.httpUrls.getGlobalAwardPopularity,).then((rv)=>{
+				currentTime.value = new Date()
+				rawVisitCount.value = rv.rawVisitCount
+				uniqueVisitCount.value = rv.uniqueVisitCount
+			})
+        }
+		onMounted(()=>{
+			getGlobalAwardPopularity()
+		})
+        return {
+			currentTimeStr,
+			getGlobalAwardPopularity,
+			rawVisitCount,
+			uniqueVisitCount,
+		};
+    },
+    data() {
+        return {
+		};
+    },
+    mounted() {
+		
+	},
+    methods: {},
+});
+</script>
+<style lang="less" scoped>
+.admin_page.globalAwardPopularity{
+	.admin_table_search{
+		// flex: 1;
+		width: min-content;
+		justify-content: flex-start;
+		border-radius: 2rem;
+		box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
+		margin-left: 2rem;
+		flex-wrap: nowrap;
+		gap: 3rem;
+	}
+	.admin_state{
+		flex-direction: column;
+		width: auto;
+		cursor: auto;
+		.admin_state_item{
+			> span{
+				font-size: 2rem;
+			}
+		}
+	}
+	.admin_search{
+		i{
+			display: flex;
+		}
+	}
+}
+</style>

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/components/ToolsSidebar.vue

@@ -55,6 +55,7 @@ commandManager.setChangeCallback((info) => {
   emit("undo-redo-status-changed", {
     canUndo: canUndo.value,
     canRedo: canRedo.value,
+	type: info.type,
     commandManager,
   });
 });

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

@@ -409,7 +409,7 @@ export class BrushIndicator {
         //   this.show(e.e);
 		this._mouseEnterHandler && this._mouseEnterHandler(e)
         } else {
-          // requestIdleCallback(() => {
+          // setTimeout(() => {
           //   this.updatePosition(e.e);
           // });
 

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/RedGreenModeManager.js

@@ -133,11 +133,12 @@ export class RedGreenModeManager {
     this.canvas.on("mouse:up", (event) => {
       // 可以在这里添加更多逻辑，比如生成图片或更新状态
       nextTick(() => {
-        requestIdleCallback(async () => {
+        setTimeout(async () => {
           if (!this.isInitialized) {
             console.warn("红绿图模式未初始化，无法处理鼠标事件");
             return;
           }
+		  console.log("鼠标抬起事件触发", this.onImageGenerated);
           if (this.onImageGenerated) {
             const imageData = await this.canvasManager.exportImage({
               restoreOpacityInRedGreen: true, // 恢复红绿图模式下的透明度

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

@@ -37,7 +37,6 @@ export class ThumbnailManager {
 
     // 延迟执行，避免阻塞UI
     fabricObjects.length > 0 &&
-      requestIdleCallback(() => {
         setTimeout(async () => {
           const base64 = await this._generateLayerThumbnailNow(fabricObjects, layer);
           // this.layerThumbnails.set(layerId, base64);
@@ -55,7 +54,6 @@ export class ThumbnailManager {
             console.error("生成图层缩略图时出错:", error);
           }
         });
-      });
   }
 
   /**
@@ -65,7 +63,7 @@ export class ThumbnailManager {
   generateAllLayerThumbnails(layers) {
     if (!layers || !Array.isArray(layers)) return;
 
-    requestIdleCallback(() => {
+    setTimeout(() => {
       setTimeout(() => {
         layers.forEach((layer) => {
           if (layer && layer.id) {

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/command/CommandManager.js

@@ -180,7 +180,7 @@ export class CommandManager {
       this._recordPerformance("execute", command.constructor.name, duration);
 
       // 通知状态变化
-      this._notifyStateChange();
+      this._notifyStateChange("execute");
 
       console.log(`✅ 命令执行成功: ${command.constructor.name}`);
       return result;
@@ -219,7 +219,7 @@ export class CommandManager {
       this._recordPerformance("undo", command.constructor.name, duration);
 
       // 通知状态变化
-      this._notifyStateChange();
+      this._notifyStateChange("undo");
 
       console.log(`✅ 命令撤销成功: ${command.constructor.name}`);
       return result;
@@ -258,7 +258,7 @@ export class CommandManager {
       this._recordPerformance("redo", command.constructor.name, duration);
 
       // 通知状态变化
-      this._notifyStateChange();
+      this._notifyStateChange("redo");
 
       console.log(`✅ 命令重做成功: ${command.constructor.name}`);
       return result;
@@ -298,7 +298,7 @@ export class CommandManager {
 
     this.undoStack = [];
     this.redoStack = [];
-    this._notifyStateChange();
+    this._notifyStateChange("clear");
     // console.log("📝 命令历史已清空");
   }
 
@@ -417,10 +417,12 @@ export class CommandManager {
    * 通知状态变化
    * @private
    */
-  _notifyStateChange() {
+  _notifyStateChange(type) {
     if (this.onStateChange) {
       try {
-        this.onStateChange(this.getState());
+		const obj = this.getState();
+		obj.type = type;
+        this.onStateChange(obj);
       } catch (error) {
         console.error("状态变化回调执行失败:", error);
       }

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/managers/liquify/LiquifyRealTimeUpdater.js

@@ -85,7 +85,7 @@ export class LiquifyRealTimeUpdater {
 
     if (isDrawing && this.config.useDirectUpdate) {
       // 拖拽过程中使用快速更新（降低质量以提高性能）
-      this._fastUpdate(imageData);
+      await this._fastUpdate(imageData);
     } else {
       // 拖拽结束后使用完整更新（最高质量）
       await this._fullUpdate(imageData);
@@ -124,7 +124,7 @@ export class LiquifyRealTimeUpdater {
    * @param {ImageData} imageData 图像数据
    * @private
    */
-  _fastUpdate(imageData) {
+  async _fastUpdate(imageData) {
     if (!this.targetObject || !this.targetObject._element) {
       return;
     }
@@ -138,12 +138,14 @@ export class LiquifyRealTimeUpdater {
 
       // 直接更新fabric对象的图像源（使用PNG格式保持质量）
       const targetElement = this.targetObject._element;
-
       // 方案1: 直接设置src属性（最高性能）
       const dataURL = this.tempCanvas.toDataURL("image/png", quality);
-
       if (targetElement.src !== dataURL) {
-        targetElement.src = dataURL;
+        // targetElement.src = dataURL;
+		const image = new Image();
+		image.src = dataURL;
+		await image.decode();
+		this.targetObject.setElement(image);
 
         // 关键优化：直接设置fabric对象为脏状态，但不立即渲染
         // this.targetObject.dirty = false; // 标记为不需要立即渲染
@@ -153,7 +155,7 @@ export class LiquifyRealTimeUpdater {
         // 使用requestAnimationFrame进行批量渲染优化
         // if (!this.renderingScheduled && !this.config.skipRenderDuringDrag) {
         //   this.renderingScheduled = true;
-        //   requestIdleCallback(() => {
+        //   setTimeout(() => {
         //     this.canvas.renderAll();
         //     this.renderingScheduled = false;
         //   });

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>
@@ -443,9 +447,26 @@
 				</template>
 			</CanvasEditor>
 		</div>
+		<img src="" alt="" id="canvas-test-dom">
 	</div>
 </template>
-
+<style>
+	body > .lower-canvas {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 800px !important;
+		height: 600px !important;
+		z-index: 99999999;
+	}
+	#canvas-test-dom{
+		position: fixed;
+		z-index: 9999999999;
+		top: 0;
+		left: 0;
+		pointer-events: none;
+	}
+</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++
 		}
@@ -331,21 +332,23 @@ export default defineComponent({
 		}
 		const setClothes = async (list:any,str:string)=>{
 			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 +358,26 @@ 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){
+					
+				// }
+				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 +391,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 +406,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 +464,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 +471,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 +497,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 +519,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 +548,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()
@@ -538,13 +563,17 @@ export default defineComponent({
 				}
 			}else{
 				//走画布合成图片并且直接分割
-				if(detailData.isEditPattern.value !== 'canvasEditor'){
-					if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
+				if(detailData.isEditPattern.value !== 'canvasEditor' && detailData.isEditPattern.value !== 'redGreenExample'){
+					if(detailData.isEditPattern.value !== 'canvasEditor'){
+						if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
+					}
 					let otherData = await updateOtherLayers('single')
 					await detailDom.canvasBox.updateOtherLayers(otherData)
 				}
+				
 				await detailDom.canvasBox.privewDetail()
 				await upDateFrontBackSketch()
+				await uploadSelectDetail()
 				saveCanvasJSONToSession()
 				detailData.loadingShow = false
 			}
@@ -562,9 +591,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 +603,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 +618,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' || detailData.isEditPattern.value == 'redGreenExample')await uploadSelectDetail()
 					detailData.isEditPattern.value = ''
 				}else{
 					// if(detailData.isEditPattern.value && (str == 'canvasEditor' || str == 'redGreenExample')){
@@ -604,15 +634,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 +669,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 +688,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 +697,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 +710,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 +738,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 +748,63 @@ 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' || detailData.isEditPattern.value == 'redGreenExample'){
+				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 +814,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 +829,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)=>{
@@ -179,7 +163,6 @@ export default defineComponent({
 		const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
 			// if(!detailDom.editCanvas)return
 			return new Promise(async (res,reject)=>{
-				console.log(detailDom.editCanvas)
 				await detailDom.editCanvas.exportImage({
 					isContainFixed:true,
 					width:props.sketchSize.width,
@@ -211,6 +194,7 @@ export default defineComponent({
 					// detailData.canvasConfig.height = domHeight
 					detailData.canvasConfig.width = img.width
 					detailData.canvasConfig.height = img.height
+					detailData.canvasConfig.initZoom = true
 
 					res('')
 				}
@@ -259,15 +243,28 @@ export default defineComponent({
 		}
 
 
-		const frontBackChange = (value:any)=>{
-			let full = detailData.selectDetail.partialDesign.partialDesignBase64 || detailData.selectDetail.path
+		const frontBackChange = async (value:any)=>{
+			let front = detailData.frontBack.front[detailData.imgDomIndex]
+			let back = detailData.frontBack.back[detailData.imgDomIndex]
+			store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
+			await nextTick()
+			if(!detailData.selectDetail.partialDesign.partialDesignPath && !detailData.selectDetail.partialDesign.partialDesignBase64){
+				await privewDetail()
+			}else{
+				await detailDom.editCanvas.exportImage({
+					isFrontBackUpdata: true,
+					isContainFixed:true,
+					width:props.sketchSize.width,
+					height:props.sketchSize.height,
+				}).then((rv)=>{
+					if(detailData.selectDetail?.partialDesign)detailData.selectDetail.partialDesign.partialDesignBase64 = rv
+				})
+			}
+			let full = detailData.selectDetail.partialDesign.partialDesignBase64 || detailData.selectDetail.partialDesign.partialDesignPath || detailData.selectDetail.path
 			let size = {
 				...detailData.canvasConfig,
 			}
-			store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
 			segmentImage(value,full,size).then(async (rv)=>{
-				let front = detailData.frontBack.front[detailData.imgDomIndex]
-				let back = detailData.frontBack.back[detailData.imgDomIndex]
 				if(!front?.oldImageUrl)front.oldImageUrl = front.imageUrl
 				if(!front?.oldMaskUrl)front.oldMaskUrl = front.maskUrl
 				if(!back?.oldImageUrl)back.oldImageUrl = back.imageUrl
@@ -279,7 +276,6 @@ export default defineComponent({
 				back.imageUrl = rv.targetBackUrl
 				// store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
 			})
-
 		}
 		const editSketchCanvasInit = async (value:any)=>{
 			detailData.canvasInstance = value
@@ -301,14 +297,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 +348,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 +399,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 +437,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){
@@ -372,6 +394,7 @@ export default defineComponent({
 					flipX: false,
 					flipY: false,
 					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/index.vue

@@ -124,7 +124,11 @@ export default defineComponent({
 		const handleResize = ()=>{ 
 			clearTimeout(time)
 			time = setTimeout(()=>{
-				store.commit('DesignDetail/setDesignDetail',getDetailListData.designDetail)
+				let data = {
+					...getDetailListData.designDetail,
+					fromType:'resize',
+				}
+				store.commit('DesignDetail/setDesignDetail',data)
 				getDetailListDom.position?.updataPosition?.()
 				getDetailListDom.modelNav?.setItemPosition?.()
 				getDetailListDom.position?.updateRect?.()

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,185 @@
 <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"
+					:class="{ award: eventsDetail.id === 3 }"
+				>
 					<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 class="tips" v-if="eventsDetail.tips">{{ eventsDetail.tips }}</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" : "cn"
+			let url = `https://aida-global-design-awards.com.hk/${language}`
+			// 如果是dev环境把域名换成http://192.168.31.198
+
+			if (import.meta.env.VITE_APP_BASE_URL === "https://develop.api.aida.com.hk") {
+				url += "?env=dev"
+			}
+			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 +189,7 @@ export default defineComponent({
 		min-height: auto;
 		padding-bottom: 10rem;
 	}
-	.eventsDetail_title{
+	.eventsDetail_title {
 		display: flex;
 		padding: 2rem 0rem;
 		align-items: center;
@@ -154,21 +197,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,65 +219,100 @@ 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.3rem;
 				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::after{
+			// .modal_title_text:last-child {
+			// }
+			.modal_title_text:last-child::after {
 				content: "";
 				display: block;
 				border-top: 3px solid;
 				height: 6rem;
 			}
+			.modal_title_text.award:last-child:after {
+				display: none;
+			}
 		}
 	}
 }
-</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;
+}
+.tips{
+	color: rgba(0, 0, 0, 0.45);
+	font-size: var(--aida-fsize1-4);
+	font-weight: 400;
+	letter-spacing: 0.3rem;
+}
+.modal_title_text.content.award{
+	line-height: 1.3;
+}
+</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

@@ -531,7 +531,7 @@ export default defineComponent({
       }
     )
     const setSpeed = (item: any) => {
-      speed.speedData = item
+      speed.speedData = {...item}
     }
     onMounted(() => {
       if (props.msg == 'Sketchboard') {
@@ -734,7 +734,9 @@ export default defineComponent({
       let maxImg = 8
       if (this.type_.type2 == 'Sketchboard') {
         maxImg = 20
-      }
+      }else if(this.type_.type2 == 'Printboard'){
+		maxImg = 16
+	}
       let parent: any = this.$parent
       if (parent.isUseGenerate) {
         // parent.useGenerate.designType = 'collection'
@@ -853,9 +855,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 +925,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/HomePage/renew.vue

@@ -205,7 +205,7 @@
         </div>
         <div class="payment">
           <div class="allocation">
-            <div class="selectType">
+            <!-- <div class="selectType">
               <div class="text">{{ $t('Renew.Payment') }}:</div>
               <label>
                 <input
@@ -227,7 +227,7 @@
                 />
                 {{ $t('Renew.Alipay') }}
               </label>
-            </div>
+            </div> -->
           </div>
           <div class="gallery_btn gallery_btn_radius" @click="payment">
             {{ $t('upgradePlan.Continue') }}

src/component/HomePage/scaleVideo.vue

@@ -77,17 +77,10 @@ export default defineComponent({
 		left: 50%;
 		top: 50%;
 		transform: translate(-50%,-50%);
-		width: 80%;
-		height: auto;
-		max-height: 80vh;
 		position: absolute;
-		width: max-content;
 		video{
-			width: 100%;
-			max-height: 80vh;
-			height: 100%;
-			object-fit: contain;
-			width: max-content;
+			max-height:80vh;
+			max-width:80vw;
 		}
 		.general_video_btn{
 			color: #fff;

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
@@ -744,6 +745,12 @@ export default defineComponent({
 					"userLikeId": likeItem.id
 				}
 				arrData.push(obj)
+				designData.selectLikeDesign.forEach((v:any)=>{
+					if(v.id === likeItem.id){
+						v.oldSort = v.sort
+						v.sort = likeItem.sort
+					}
+				})
 			})
 			let data = {
 				"userLikeGroupId": userGroupId.value,
@@ -1303,9 +1310,9 @@ export default defineComponent({
 					})
 					return
 				}
-				const parents = designData.selectLikeDesign.filter((item:any) => item.resultType === 'Design');
+				const parents = designData.selectLikeDesign.filter((item:any) => item.resultType === 'Design').filter((item:any) => likeDesignCollectionList.value.some((v:any) => (v.id === item.id)));
 				parents.map((parent:any) => {
-					parent.sort = parent.oldSort||parent.sort
+					parent.sort = likeDesignCollectionList.value.find((v:any) => v.id === parent.id)?.sort || parent.oldSort||parent.sort
 					delete parent.oldSort
 					return {
 					...parent,
@@ -1532,7 +1539,7 @@ export default defineComponent({
 					this.observerData.time = setTimeout(()=>{
 						
 						this.setSystemDesigner(0)
-						this.setDesignItemStyle()
+						// this.setDesignItemStyle()
 					},100)
 					// const { width } = entry.contentRect;
 				}
@@ -1930,6 +1937,7 @@ export default defineComponent({
 			this.disLikeLoading = true;
 			Https.axiosPost(Https.httpUrls.designDislike, data)
 				.then((rv: any) => {
+					console.log(rv)
 					if (rv) {
 						this.recycleDomHidden = true
 						this.store.commit("addDesignCollectionList", [design]);

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

@@ -41,10 +41,10 @@
 				<div class="center">{{ selectObject?.styleName?selectObject?.styleName:$t('Header.All') }}</div>
 				<div class="gallery_btn" @click="setStyle">{{ $t('Habit.Select') }}</div>
 			</div>
-			<div class="style brand marginBottom">
+			<!-- <div class="style brand marginBottom">
 				<div class="text">{{$t('Habit.Brand')}}:</div>
 				<div class="gallery_btn" @click="setBrandDNA">{{ $t('Habit.Select') }}</div>
-			</div>
+			</div> -->
 			<div class="brandImg" v-if="selectObject.userBrandDna"><img :src="selectObject.userBrandDnaImg"></div>
 			<div class="brandDNAStrenght marginBottom" v-if="selectObject.userBrandDna">
 				<div class="text" style="font-size: 1.6rem;">
@@ -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,