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

.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/json/events.json

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

src/assets/json/events_cn.json

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

src/assets/style/style.css

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

src/assets/style/style.less

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

src/component/Administrator/SE/allUser/index.vue

@@ -18,7 +18,7 @@
 		  </div>
 		  <div class="admin_state_item">
 			<span>{{ $t('admin.UserName') }}:</span>
-			<a-select
+			<!-- <a-select
 			  v-model:value="ids"
 			  mode="multiple"
 			  style="width: 230px"
@@ -28,7 +28,8 @@
 			  max-tag-count="responsive"
 			  :options="allUserList"
 			  @keydown.enter="gettrialList"
-			></a-select>
+			></a-select> -->
+			 <SelectUser v-model="ids" labelKey="label" valueKey="label" multiple />
 		  </div>
 		</div>
 		<div class="admin_search">
@@ -180,9 +181,10 @@
   import { Modal, message, Input } from 'ant-design-vue'
   import { ExclamationCircleOutlined, MoreOutlined } from '@ant-design/icons-vue'
   import allUserPoerationsVue from './addAllUser.vue'
-  import { useI18n } from 'vue-i18n'
+	import { useI18n } from 'vue-i18n'
+	import SelectUser from '@/component/common/SelectUser.vue'
   export default defineComponent({
-	components: { allUserPoerationsVue, MoreOutlined },
+	components: { allUserPoerationsVue, MoreOutlined, SelectUser },
 	setup() {
 	  const store: any = useStore()
 	  const currentOrganizationId = computed(

src/component/Administrator/Transaction/TransactionTable.vue

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

src/component/Canvas/CanvasEditor/commands/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/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/LayersPanel/LayersPanel.vue

@@ -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();
       }
     }

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

@@ -132,8 +132,8 @@
 		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;
+		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);
@@ -143,8 +143,8 @@
 		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;
+		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>

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");
@@ -444,6 +450,7 @@
 		});
 		obj.set("fill", pattern);
 		props.canvas.renderAll();
+		props.canvasManager.beforeChangeCanvas([obj]);
 	};
 	const changeFillOffset = (value, obj) => {
 		const pattern = new fabric.Pattern({
@@ -463,6 +470,7 @@
 		});
 		obj.set("fill", pattern);
 		props.canvas.renderAll();
+		props.canvasManager.beforeChangeCanvas([obj]);
 	};
 	const changeFillScale = (scale, obj) => {
 		const fill = obj.get("fill");
@@ -495,7 +503,8 @@
 			newGapY: gapY,
 			record: true,
 		});
-		cmd.execute();
+		cmd.execute(false);
+		props.canvasManager.beforeChangeCanvas([obj]);
 	};
 	const changeFillGap = (gapX, gapY, obj) => {
 		if (obj.oldFill_) {
@@ -761,7 +770,7 @@
 	}
 
 	.tool-content {
-		overflow-y: auto;
+		// overflow-y: auto;
 		max-height: 20rem;
 		margin-top: 1rem;
 		padding: 0 1.5rem;

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

@@ -9,7 +9,6 @@ import {
   isGroupLayer,
   OperationType,
   OperationTypes,
-  findLayer,
   createLayer,
   LayerType,
   SpecialLayerId,
@@ -20,7 +19,6 @@ import { AnimationManager } from "./animation/AnimationManager";
 import { createCanvas } from "../utils/canvasFactory";
 import { CanvasEventManager } from "./events/CanvasEventManager";
 import CanvasConfig from "../config/canvasConfig";
-import { RedGreenModeManager } from "./RedGreenModeManager";
 import { EraserStateManager } from "./EraserStateManager";
 import {
   deepClone,
@@ -73,6 +71,8 @@ export class CanvasManager {
 	this.partManager = options.partManager || null; 
 	this.props = options.props || {};
 	this.emit = options.emit || (() => {});
+	this.awaitCanvasRun = null;
+	this.canvasChangeing = false;
     // 初始化画布
     this.initializeCanvas();
   }
@@ -177,7 +177,7 @@ export class CanvasManager {
     this.canvas.onBrushImageConverted = async (fabricImage) => {
 	  const activeTool = this.toolManager?.activeTool?.value;
 	  if(activeTool === OperationType.PART_BRUSH){
-		this.partManager?.addPartImage(fabricImage);
+		this.partManager?.addDrawPartImage(fabricImage);
       }else{
         await this.addImageToLayer({ fabricImage, targetLayerId: null });
 	  }
@@ -202,6 +202,10 @@ export class CanvasManager {
       console.log("擦除完成", e.targets);
       // 可以在这里保存状态到命令管理器
       const affectedObjects = e.targets || [];
+	  const activeTool = this.toolManager?.activeTool?.value;
+	  if(activeTool === OperationType.PART_ERASER){
+		return this.partManager?.onErasingEnd(affectedObjects);
+      }
       const command = this.eraserStateManager.endErasing(affectedObjects);
       if (command && this.commandManager) {
         await this.commandManager?.executeCommand?.(command);
@@ -333,6 +337,7 @@ export class CanvasManager {
   setupCanvasEvents(activeElementId, layerManager) {
     // 创建画布事件管理器
     this.eventManager = new CanvasEventManager(this.canvas, {
+      canvasManager: this,
       toolManager: this.toolManager,
       animationManager: this.animationManager,
       thumbnailManager: this.thumbnailManager,
@@ -863,9 +868,9 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 
     return layerObjectByLayerId;
   }
-  getObjectsByIds(ids){
+  getObjectsByIdOrLayerId(ids){
 	const objects = this.canvas.getObjects().filter((obj) => {
-      return ids.includes(obj.id);
+      return ids.includes(obj.id) || ids.includes(obj.layerId);
     });
 	return objects;
   }
@@ -1142,7 +1147,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
     const glayer = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
 	if(!glayer) return Promise.reject("印花和元素图层组不存在");
 	const ids = glayer.children.map((v) => v.id);
-	const objects = this.getObjectsByIds(ids);
+	const objects = this.getObjectsByIdOrLayerId(ids);
 	const fixedLayerObj = this.getFixedLayerObject();
 	if(!fixedLayerObj) return Promise.reject("固定图层不存在");
 	const flWidth = fixedLayerObj.width
@@ -1153,8 +1158,9 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	const flScaleY = fixedLayerObj.scaleY
 	const prints = [];
 	const trims = [];
-	objects.forEach((v) => {
-		const sourceData = glayer.children.find((v_) => v_.id === v.id)?.metadata?.sourceData;
+	objects.forEach((v, i) => {
+		const label = glayer.children.find((v_) => (v_.id === v.layerId || v_.id === v.id));
+		const sourceData = label?.metadata?.sourceData;
 		if(!sourceData) return;
 		const obj = {
 			ifSingle: typeof v.fill === "string",
@@ -1166,7 +1172,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 			scale: [0, 0],
 			angle: v.angle,
 			name: sourceData.name,
-			priority: sourceData.priority,
+			priority: i + 1,
 			object:{
 				top: 0,
 				left: 0,
@@ -1179,6 +1185,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 				blendMode: v.globalCompositeOperation,
 				gapX: 0,// 平铺模式下的间距
 				gapY: 0,// 平铺模式下的间距
+				fill_repeat: "",
 			}
 		}
 		let left = (v.left - (flLeft - flWidth * flScaleX / 2));
@@ -1214,14 +1221,15 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 			let scaleY = scale * 5 * v.fill_.height / flHeight;
 			let scaleXY = flWidth > flHeight ? scaleX : scaleY;
 
-			let left = fill.offsetX - v.fill_.width * scale / 2;
-			let top = fill.offsetY - v.fill_.height * scale / 2;
+			let left = fill.offsetX + v.fill_.width * scale / 2;
+			let top = fill.offsetY + v.fill_.height * scale / 2;
 
 			obj.scale = [scaleXY, scaleXY];
 			obj.angle = angle;
 			obj.location = [left, top];
 			obj.object.gapX = fill_.gapX;
 			obj.object.gapY = fill_.gapY;
+			obj.object.fill_repeat = fill.repeat;
 		}
 		if(sourceData.type === "print"){
 			prints.push(obj);
@@ -1230,8 +1238,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		}
 	})
 	// prints.sort((a, b) => a.ifSingle ? 1 : -1);
-	prints.forEach((v, i) => v.priority = i + 1);
-	trims.forEach((v, i) => v.priority = i + 1);
+	// prints.forEach((v, i) => v.priority = i + 1);
+	// trims.forEach((v, i) => v.priority = i + 1);
 	return {prints, trims};
   }
   
@@ -1327,7 +1335,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
     }
   }
   loadJSON(json, calllBack) {
-
+	this.canvas.loading.value = true;
     // 确保传入的json是字符串格式
     if (typeof json === "object") {
       json = JSON.stringify(json);
@@ -1458,9 +1466,12 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
   }
   /** 修复JSON数据中的ID丢失问题 */
   FixJsonIdLoss(json){
+	const layerIds = [];
 	const layers = json?.layers || [];
 	const objects = json?.canvas?.objects || [];
 	layers.forEach((layer) => {
+		layerIds.push(layer.id);
+		layer.children?.forEach((child) => layerIds.push(child.id));
 		if(!layer.fabricObjects?.[0]?.id && !layer.fabricObject?.id){
 			const obj = objects?.find((o) => o.layerId === layer.id);
 			if(obj) {
@@ -1476,6 +1487,17 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		if (a.isBackground) return -1;
 		if (b.isBackground) return 1;
 	})
+	// 排除的对象id
+	const excludedObjects = [SpecialLayerId.PART_SELECTOR];
+	json.canvas.objects = objects.filter((v) => {
+		// 指定ID排除
+		if(excludedObjects.includes(v.id)) return false;
+
+		if(v.isBackground || v.isFixed) return true;
+		// 当前图层不存在当前对象
+		if(!layerIds.includes(v.layerId)) return false;
+		return true
+	});
   }
 
 
@@ -1483,22 +1505,15 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
    * 创建其他图层：印花、颜色、元素...
    * @param {Object} otherData - 其他图层数据
   */
-  async createOtherLayers(otherData, isUpdate = false) {
+  async createOtherLayers(otherData) {
 	if (!otherData) return console.warn("otherData 为空不需要添加");
+	let resolve = ()=>{};
+	this.awaitCanvasRun = ()=>(new Promise((v) => resolve = v))
 	const otherData_ = JSON.parse(JSON.stringify(otherData));
 	console.log("==========创建其他图层", otherData_);
 	
-	const updateColor = !!otherData_.color;
-	const updateSpecialGroup = !!otherData_.printObject || !!otherData_.trims;
 	// 删除颜色图层和特殊组图层
-	const ids = [];
-	if(isUpdate){
-		updateColor && ids.push(SpecialLayerId.COLOR)
-		updateSpecialGroup && ids.push(SpecialLayerId.SPECIAL_GROUP)
-	}else{
-		ids.push(SpecialLayerId.COLOR)
-		ids.push(SpecialLayerId.SPECIAL_GROUP)
-	}
+	const ids = [SpecialLayerId.COLOR, SpecialLayerId.SPECIAL_GROUP];
 	this.layers.value = this.layers.value.filter((layer) => {
 	  if(ids.includes(layer.id)){
 	  	ids.push(...layer.children?.map((child) => child.id));
@@ -1506,11 +1521,15 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	  }
 	  return true;
 	})
-	this.canvas.getObjects().forEach((v) => ids.includes(v.id) && this.canvas.remove(v))
+	this.canvas.getObjects().forEach((v) => {
+		if(ids.includes(v.id) || ids.includes(v.layerId)){
+			this.canvas.remove(v)
+		}
+	})
 
 
 	// 创建颜色图层
-	otherData_.color && await this.createColorLayer(otherData_.color);
+	await this.createColorLayer(otherData_.color);
 
 	const printTrimsLayers = [];// 印花和元素图层
 	const singleLayers = [];// 平铺图层
@@ -1528,10 +1547,13 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		trims.type = "trims";
 		printTrimsLayers.unshift({...trims});
 	})
-	if(isUpdate ? updateSpecialGroup : true){
+	if(printTrimsLayers.length || singleLayers.length){
 		await this.createPrintTrimsLayers(printTrimsLayers, singleLayers);
 	}
 	await this.changeCanvas();
+	console.log("==========创建其他图层成功");
+	resolve();
+	this.awaitCanvasRun = null;
   }
 
   // 设置画布对象的裁剪信息
@@ -1655,8 +1677,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	  let opacity = 1
 	  let flipX = false;
 	  let flipY = false;
-	  let blendMode = BlendMode.MULTIPLY;
-	  if(item.type === "trims") blendMode = BlendMode.NORMAL;// 元素正常
+	  let blendMode = BlendMode.NORMAL;
+	//   if(item.type === "trims") blendMode = BlendMode.NORMAL;// 元素正常
 	  if(item.object){
 		opacity = item.object.opacity
 		flipX = item.object.flipX
@@ -1681,7 +1703,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
         hasBorders: true,
         isPrintTrims: true,
       });
-      this.canvas.add(image);
+    //   this.canvas.add(image);
 	  let layer = createLayer({
 	    id: id,
 	    name: name,
@@ -1692,7 +1714,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		isPrintTrims: true,
 		blendMode: blendMode,
 	    fabricObjects: [image.toObject(["id", "layerId", "layerName"])],
-		metadata: {sourceData: item, level2Type: item.level2Type},
+		metadata: {sourceData: item},
+		object: image,
 	  })
 	  children.push(layer);
 	};
@@ -1716,8 +1739,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	  let scaleX_ = flWidth / image.width * (item.scale?.[0] || 1) / 5;
 	  let scaleY_ = flHeight / image.height * (item.scale?.[1] || 1) / 5;
 	  let scale = flWidth > flHeight ? scaleX_ : scaleY_;
-      let offsetX = (item.location?.[0] || 0) + image.width * scale / 2
-      let offsetY = (item.location?.[1] || 0) + image.height * scale / 2
+      let offsetX = (item.location?.[0] || 0) - image.width * scale / 2
+      let offsetY = (item.location?.[1] || 0) - image.height * scale / 2
 	  let top = flTop - flHeight * flScaleY / 2
 	  let left = flLeft - flWidth * flScaleX / 2
 	  let scaleX = flScaleX
@@ -1729,7 +1752,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	  let fillSource = image
 	  let flipX = false;
 	  let flipY = false;
-	  let blendMode = BlendMode.MULTIPLY;
+	  let blendMode = BlendMode.NORMAL;
+	  let fill_repeat = "repeat"
 	  if(item.object){
 	    top += item.object.top * flScaleY
 	    left += item.object.left * flScaleX
@@ -1739,10 +1763,11 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		angle = item.object.angle
 		flipX = item.object.flipX
 		flipY = item.object.flipY
-		blendMode = item.object.blendMode || BlendMode.MULTIPLY;
+		if(item.object.blendMode) blendMode = item.object.blendMode;
 		gapX = item.object.gapX
 		gapY = item.object.gapY
 		fillSource = imageAddGapToCanvas(image, gapX, gapY);
+		if(item.object.fill_repeat) fill_repeat = item.object.fill_repeat;
 	  }
       let rect = new fabric.Rect({
       	id: id,
@@ -1761,7 +1786,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		globalCompositeOperation: blendMode,
       	fill: new fabric.Pattern({
           source: fillSource,
-          repeat: "repeat",
+          repeat: fill_repeat,
           patternTransform: createPatternTransform(scale, item.angle || 0),
           offsetX: offsetX, // 水平偏移
           offsetY: offsetY, // 垂直偏移
@@ -1775,18 +1800,19 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		},
 		isPrintTrims: true,
       });
-      this.canvas.add(rect);
+    //   this.canvas.add(rect);
 	  let layer = createLayer({
 	    id: id,
 	    name: name,
 	    type: LayerType.BITMAP,
 	    visible: true,
-	    locked: true,
+	    locked: false,
 	    opacity: opacity,
 		isPrintTrims: true,
-		blendMode: BlendMode.MULTIPLY,
+		blendMode: blendMode,
 	    fabricObjects: [rect.toObject(["id", "layerId", "layerName"])],
 		metadata: {sourceData: item},
+		object: rect,
 	  })
 	  children.push(layer);
 	};
@@ -1803,6 +1829,13 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	//   children.push(layer);
 	// }
 	if(children.length === 0) return;
+	// 印花元素排序
+	if(new Set(children.map(v => v.metadata.sourceData.priority)).size === children.length){
+      children.sort((a, b) => b.metadata.sourceData.priority - a.metadata.sourceData.priority);
+	}
+	children.forEach(layer => {
+		this.canvas.add(layer.object);
+	});
 	const groupRect = new fabric.Rect({});
 	await this.setObjecCliptInfo(groupRect);
 	// 插入组图层
@@ -1825,12 +1858,13 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
   /**
    * 画布事件变更后
   */
-  async changeCanvas(){
+  async changeCanvas(fids = [], isBeforeChange = false){
+	if(!isBeforeChange) this.canvasChangeing = false;
 	const fixedLayerObj = this.getFixedLayerObject();
 	if(!fixedLayerObj) return console.warn("固定图层对象不存在", fixedLayerObj)
 	const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
 	if(colorObject){
-		const ids = this.layerManager.getBlendModeLayerIds(SpecialLayerId.SPECIAL_GROUP);
+		const ids = this.layerManager.getBlendModeLayerIds(SpecialLayerId.SPECIAL_GROUP).filter(id => !fids.includes(id));
 		if(ids.length === 0){
 			ids.unshift(SpecialLayerId.SPECIAL_GROUP);
 			await this.setObjecCliptInfo(colorObject);
@@ -1850,6 +1884,24 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		this.canvas.renderAll();
 	}
   }
+  /** 画布变更之前 */
+  async beforeChangeCanvas(objects){
+	if(this.canvasChangeing) return;
+	const ids = objects.filter(v => {
+		return v.isPrintTrims && v.globalCompositeOperation && v.globalCompositeOperation !== BlendMode.NORMAL
+	}).map(v => v.layerId);
+	if(ids.length > 0){
+		this.canvasChangeing = true;
+		this.canvas.getObjects().forEach(v => {
+			if(ids.includes(v.layerId)){
+				v.globalCompositeOperation_ = v.globalCompositeOperation;
+				v.globalCompositeOperation = BlendMode.NORMAL;
+			}
+		})
+		this.canvas.renderAll();
+		await this.changeCanvas(ids, true);
+	}
+  }
 
   /**
    * 缩放红绿图模式内容以适应当前画布大小

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

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

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

@@ -1,14 +1,12 @@
 import { fabric } from "fabric-with-all";
 import { traceImageContour, imageToCanvas } from "../utils/helper";
-import { OperationType } from "../utils/layerHelper";
-import { CreateSelectionCommand } from "../commands/SelectionCommands";
-import { ClearSelectionCommand } from "../commands/LassoCutoutCommand";
+import { OperationType, SpecialLayerId } from "../utils/layerHelper";
+import { LassoCutoutCommand } from "../commands/LassoCutoutCommand";
 import addIcon from "@/assets/images/canvas/add.png";
 import removeIcon from "@/assets/images/canvas/remove.png";
-import { Https } from "@/tool/https";
-import store from "@/store";
-import { createStaticCanvas } from "../utils/canvasFactory";
 import { getObjectAlphaToCanvas } from "../utils/objectHelper";
+import { Https } from "@/tool/https";
+import { PartDrawCommand, PartPointDrawCommand } from "../commands/PartCommands";
 
 
 /**
@@ -27,11 +25,31 @@ export class PartManager {
 	constructor(options = {}) {
 		this.canvas = options.canvas;
 		this.commandManager = options.commandManager;
+		this.selectionManager = options.selectionManager;
 		this.layerManager = options.layerManager;
 		this.canvasManager = options.canvasManager;
 		this.toolManager = options.toolManager;
 		this.props = options.props;
 
+		// 选区样式配置
+		this.selectionStyle = {
+			stroke: "#0096ff",
+			strokeWidth: 1,
+			strokeDashArray: [5, 5],
+			fill: "rgba(0, 150, 255, 0.1)",
+			strokeUniform: true, // 保持描边宽度不随缩放改变
+			// fill: "rgba(127, 255, 127, 0.3)",
+			// stroke: "#2AA81B",
+			// strokeWidth: 2,
+			// strokeDashArray: [8, 4],
+			// strokeLineCap: "round",// 折线端点样式
+			// strokeLineJoin: "bevel", // 折线连接样式
+			selectable: false,
+			evented: false,
+			excludeFromExport: true,
+			hoverCursor: "default",
+			moveCursor: "default",
+		};
 		// 状态
 		this.isActive = false;
 
@@ -54,14 +72,11 @@ 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.drawList = []; // 存储绘制对象
+		this.rectangleObject = null; // 矩形对象
+		this.pointList = []; // 点位列表 存储点选坐标
 	}
 
 	/**
@@ -75,7 +90,17 @@ export class PartManager {
 
 		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) {
@@ -90,8 +115,7 @@ export class PartManager {
 		}
 		// 如果从选区工具切换到选区工具，重置选区
 		else if (wasActive && this.isActive) {
-			// this.clearPointData();
-			// this.resetPartObject();
+
 		}
 	}
 
@@ -218,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) { }
 	/** 点选工具模式下抬起事件处理 */
@@ -236,7 +255,8 @@ export class PartManager {
 		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);
 		});
@@ -247,34 +267,63 @@ export class PartManager {
 			points,
 			labels,
 		});
-		this.pointList.push({
+		pointList.push({
 			x: x,
 			y: y,
 			label: label,
 		})
 		const image1 = await this.loadImageToObject(url);
-		this.resetPartObject();
-		const group = this.partGroup;
 		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();
+		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() {
@@ -285,16 +334,42 @@ export class PartManager {
 
 	/** 框选工具模式下点击事件处理 */
 	_rectangleDownHandler(options) {
-		this.clearPointData();
+		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) { }
+	_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();
+	}
 	/** 框选工具模式下抬起事件处理 */
 	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);
@@ -305,18 +380,10 @@ export class PartManager {
 			type: "box",
 			box: [...this.pointList],
 		});
-		const image1 = await this.loadImageToObject(url);
-		this.resetPartObject();
-		const group = this.partGroup;
-		const canvas = getObjectAlphaToCanvas(image1, null, 0, this.rgba);
-		this.partCanvas = canvas;
-		const image2 = new fabric.Image(canvas);
-		image2.set({
-			originX: fixedObject.originX,
-			originY: fixedObject.originY,
-		});
-		group.add(image2);
-		this.canvas.renderAll();
+		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);
 	}
 	/** 获取分隔后图片 */
 	async getSegAnythingImage(obj) {
@@ -360,7 +427,16 @@ export class PartManager {
 		}
 	}
 
-	async addPartImage(fabricImage) {
+
+
+	/** 绘制工具模式下点击事件处理 */
+	_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;
@@ -371,15 +447,83 @@ export class PartManager {
 			top: top + this.partGroup.height / 2,
 			left: left + this.partGroup.width / 2,
 		})
-		this.drawList.push(fabricImage);
 		const tcanvas = new fabric.StaticCanvas(document.createElement("canvas"), {
 			width: this.partGroup.width,
 			height: this.partGroup.height,
 			enableRetinaScaling: false,
 		});
-		this.drawList.forEach(item => tcanvas.add(item))
+		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({
@@ -392,40 +536,6 @@ export class PartManager {
 		this.canvas.renderAll();
 	}
 
-
-	/** 绘制工具模式下点击事件处理 */
-	_brushDownHandler(options) {
-	}
-	/** 绘制工具模式下移动事件处理 */
-	_brushMoveHandler(options) {
-
-	}
-	/** 绘制工具模式下抬起事件处理 */
-	_brushUpHandler(options) {
-	}
-
-
-	/** 切换到擦除工具 */
-	setEraserTool() {
-		if (!this.canvas) return console.warn("未找到画布");
-		const objects = this.canvas.getObjects();
-		objects.forEach(obj => {
-			obj.set({
-				erasable: true
-			})
-		})
-	}
-	/** 擦除工具模式下抬起事件处理 */
-	_eraseUpHandler(options) {
-	}
-	/** 擦除工具模式下点击事件处理 */
-	_eraseDownHandler(options) {
-	}
-	/** 擦除工具模式下移动事件处理 */
-	_eraseMoveHandler(options) {
-
-	}
-
 	/** 删除指定ID的对象 */
 	removeObjectsById(id) {
 		const objects = this.canvas.getObjects().filter(obj => obj.id === id);
@@ -462,7 +572,7 @@ export class PartManager {
 			originY: fixedObject.originY,
 			selectable: false,
 			evented: false,
-			erasable: false,
+			erasable: true,
 		})
 		this.canvas.add(group);
 		this.partGroup = group;
@@ -474,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;
@@ -496,23 +629,26 @@ export class PartManager {
 			top: top + minY * scaleY,
 			scaleX: scaleX,
 			scaleY: scaleY,
-			fill: "rgba(127, 255, 127, 0.3)",
-			stroke: "#2AA81B",
-			strokeWidth: 2,
-			strokeDashArray: [8, 4],
-			strokeLineCap: "round",// 折线端点样式
-			strokeLineJoin: "bevel", // 折线连接样式
-			strokeUniform: true, // 保持描边宽度不随缩放改变
+			...this.selectionStyle,
 		});
-		// this.partGroup.add(path);
-		this.canvas.add(path);
-		this.canvas.renderAll();
 		this.clearPart();
+		this.selectionManager.setSelectionObject(path);
+		const cmd = new LassoCutoutCommand({
+			canvas: this.canvas,
+			layerManager: this.layerManager,
+			selectionManager: this.selectionManager,
+			toolManager: this.toolManager,
+		})
+		this.commandManager.execute(cmd)
 	}
 	/** 清空点位 */
 	clearPart() {
-		this.pointList = [];
-		this.resetPartObject(true);
+		if (this.activeTool.value === OperationType.PART) {
+			this.partPointDrawCommand([], null);
+		} else {
+			this.pointList = [];
+			this.partDrawCommand(null);
+		}
 	}
 
 	/**

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

@@ -197,7 +197,7 @@ export class ToolManager {
       [OperationType.PART_RECTANGLE]: {
         name: "部件选取工具-矩形",
         icon: "part",
-        cursor: "default",
+        cursor: "crosshair",
         setup: this.setupPartRectangleTool.bind(this),
       },
       [OperationType.PART_BRUSH]: {
@@ -721,7 +721,7 @@ export class ToolManager {
   setupPartRectangleTool(isExecute = false) {
     if (!this.canvas) return;
     this.canvas.isDrawingMode = false;
-    this.canvas.selection = true;
+    this.canvas.selection = false;
     if (!isExecute && this.canvasManager && this.canvasManager.partManager) {
       this.canvasManager.partManager.setCurrentTool(OperationType.PART_RECTANGLE);
     }

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

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

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

@@ -30,27 +30,30 @@ export class LayerSort {
     if (canvasObjects.length === 0) return;
 
     // 使用画布渲染优化
-    await optimizeCanvasRendering(this.canvas, () => {
-      // 计算每个对象应该在的 z-index 位置
-      const objectZIndexMap = this.calculateObjectZIndexes();
+	await new Promise((resolve) => {
+		optimizeCanvasRendering(this.canvas, () => {
+		// 计算每个对象应该在的 z-index 位置
+		const objectZIndexMap = this.calculateObjectZIndexes();
 
-      // 按照新的 z-index 排序对象
-      const sortedObjects = canvasObjects
-        .map((obj) => ({
-          object: obj,
-          targetZIndex: objectZIndexMap.get(obj.id) ?? -1,
-        }))
-        .filter((item) => item.targetZIndex >= 0) // 过滤掉无效对象
-        .sort((a, b) => a.targetZIndex - b.targetZIndex);
+		// 按照新的 z-index 排序对象
+		const sortedObjects = canvasObjects
+			.map((obj) => ({
+			object: obj,
+			targetZIndex: objectZIndexMap.get(obj.id) ?? -1,
+			}))
+			.filter((item) => item.targetZIndex >= 0) // 过滤掉无效对象
+			.sort((a, b) => a.targetZIndex - b.targetZIndex);
 
-      // 使用 fabric.js 的 moveTo 方法重新排序
-      sortedObjects.forEach((item, index) => {
-        const currentIndex = this.canvas.getObjects().indexOf(item.object);
-        if (currentIndex !== index && currentIndex !== -1) {
-          // 将对象移动到正确的位置
-          this.canvas.moveTo(item.object, index);
-        }
-      });
+		// 使用 fabric.js 的 moveTo 方法重新排序
+		sortedObjects.forEach((item, index) => {
+			const currentIndex = this.canvas.getObjects().indexOf(item.object);
+			if (currentIndex !== index && currentIndex !== -1) {
+			// 将对象移动到正确的位置
+			this.canvas.moveTo(item.object, index);
+			}
+		});
+		resolve();
+		});
     });
   }
 

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/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,9 +65,10 @@ 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("对象不是图片");
@@ -93,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,6 +415,7 @@
 				:clothingMinIOPath="clothingMinIOPath"
 				:clothingImageUrl="clothingImageUrl"
 				:clothingImageUrl2="clothingImageUrlInit"
+				@canvasLoadJsonSuccess="canvasLoadJsonSuccess"
 				:config="editorConfig"
 				:clothing-image-opts="{
 					imageMode: 'contains', // 设置底图包含在画布内
@@ -444,7 +449,16 @@
 		</div>
 	</div>
 </template>
-
+<style>
+	body > .lower-canvas {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 800px !important;
+		height: 600px !important;
+		z-index: 99999999;
+	}
+</style>
 <style scoped lang="less">
 	* {
 		margin: 0;

src/component/Canvas/index.vue

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

src/component/Canvas/test.vue

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

src/component/Detail/DesignDetail.vue

@@ -131,6 +131,7 @@ 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
@@ -330,18 +331,20 @@ export default defineComponent({
 			store.commit('DesignDetail/setCurrentDetailType',str)
 		}
 		const setClothes = async (list:any,str:string)=>{
+			console.log(JSON.parse(JSON.stringify(list)))
 			let clothesList:any = []
 			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')){
-				if(detailData.isEditPattern.value !== 'editSketch'){
-					let otherData = await updateOtherLayers(detailData.isEditPattern.value == 'canvasEditor'?'all':'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 uploadElement()
+				await uploadSelectDetail()
+				// await uploadElement()
 			}
 			for(let i = 0;i<list.length;i++){
 				detailData.selectDetail
@@ -358,17 +361,25 @@ export default defineComponent({
 				let isCurrent = list[i].id == detailData?.selectDetail?.id
 				let color = ''
 				let gradient = null
-				if((detailData.currentDetailType == 'color' || detailData.isEditPattern.value == 'canvasEditor') && isCurrent){
-					color = `${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?`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:''
+				// if((detailData.currentDetailType == 'color' && detailData.isEditPattern.value == 'canvasEditor') && isCurrent){
+				// 	color = newData?.color?.rgba?.r != null?`${newData?.color.rgba.r} ${newData?.color.rgba.g} ${newData?.color.rgba.b}`:''
+				// 	if(newData?.color?.gradient){
+				// 		gradient = newData?.color.gradient
+				// 	}
+				// }else if(isCurrent){
+					
+				// }
+				console.log(JSON.parse(JSON.stringify(detailData.selectDetail.color)),'=====')
+				color = list[i].color?.rgba?.r != null?`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:''
 					gradient = list[i].gradient
-				}
-				if(detailData.currentDetailType == 'sketch' && newData?.sketch){
-					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}`:''
+				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 = ''
 				}
@@ -411,10 +422,15 @@ export default defineComponent({
 				}
 				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)
 			}
@@ -484,6 +500,11 @@ 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 = {
@@ -529,11 +550,12 @@ export default defineComponent({
 				detailData.loadingShow = false
             });
 		}
-		const previwe = async ()=>{
+		const previwe = async ()=>{ 
 			detailData.loadingShow = true
 			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()
@@ -568,9 +590,9 @@ export default defineComponent({
 						let front = detailData.frontBack.front[detailData.imgDomIndex]
 						let back = detailData.frontBack.back[detailData.imgDomIndex]
 
-						front.oldImageUrl = ''
-						front.oldMaskUrl = ''
-						back.oldImageUrl = ''
+						if(front?.oldImageUrl)front.oldImageUrl = ''
+						if(front?.oldMaskUrl)front.oldMaskUrl = ''
+						if(back?.oldImageUrl)back.oldImageUrl = ''
 						front.imageUrl = rv.targetFrontUrl
 						back.imageUrl = rv.targetBackUrl
 						store.commit('DesignDetail/canvasPreviewUpdata',{type:detailData.isEditPattern.value?'all':detailData.currentDetailType,callBack:setRevocation})
@@ -598,11 +620,12 @@ export default defineComponent({
 			await KeyValueDB.set('canvasList', JSON.stringify(list));
 		}
 		const detailEdit = async (str:any)=>{
+			detailData.loadingShow = true
 			if(str){
 				if(detailData.isEditPattern.value && detailData.isEditPattern.value == str){
 					// await detailDom.canvasBox.saveCanvas()
 					await (detailDom.canvasBox as any).privewDetail()
-					if(detailData.isEditPattern.value == 'canvasEditor')await uploadElement()
+					if(detailData.isEditPattern.value == 'canvasEditor')await uploadSelectDetail()
 					detailData.isEditPattern.value = ''
 				}else{
 					// if(detailData.isEditPattern.value && (str == 'canvasEditor' || str == 'redGreenExample')){
@@ -610,14 +633,20 @@ export default defineComponent({
 					// }
 					detailDom.canvasBox.editFront(str)
 					if(str == 'canvasEditor'){
-						let otherData = await updateOtherLayers('single')
-						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];
@@ -641,9 +670,8 @@ export default defineComponent({
 		}
 		const updateOtherLayers = async (str:any='all',type:any='noFirst')=>{//更新到画布图层
 			let otherData:any = {}
-			console.log('detailData.selectDetail.newDetail',detailData.selectDetail)
 			if(str == 'all'){
-				await uploadSelectDetail()
+				// await uploadSelectDetail()
 				otherData = {
 					color: detailData.selectDetail.color,
 					printObject: detailData.selectDetail.printObject || null,
@@ -659,7 +687,7 @@ export default defineComponent({
 					let color = detailData.selectDetail.newDetail?.color
 					// let colorData:any = await getColorName(color?.rgba)
 					if(detailData.selectDetail.newDetail?.color){
-						if(color.r){
+						if(color.r != null){
 							color.rgba = {r:color.r,g:color.g,b:color.b,a:color.a}
 						}else{
 							color.rgba = {}
@@ -734,7 +762,7 @@ export default defineComponent({
 			let color:any = {}
 			if(allInfo.color?.color?.rgba || allInfo.color?.color?.gradient){
 				let canvasColor = allInfo.color.color;
-				if(canvasColor?.rgba?.r){
+				if(canvasColor?.rgba?.r != null){
 					let colorData:any = await getColorName(allInfo.color.color?.rgba)
 					color = {
 						hsv:{
@@ -748,13 +776,11 @@ export default defineComponent({
 						hex:rgbaToHex([canvasColor.rgba.r,canvasColor.rgba.g,canvasColor.rgba.b]),
 					}
 				}
-				if(canvasColor.gradient){
+				if(canvasColor?.gradient){
 					color.gradient = canvasColor.gradient
 				}
-				if(detailData.currentDetailType == 'color'){
-					detailData.detailLeftColorKey++
-				}
 			}
+
 			if(detailData.isEditPattern.value == 'canvasEditor'){
 				delete detailData.selectDetail.newDetail
 				detailData.selectDetail.trims.prints = allInfo.trims || []
@@ -762,19 +788,22 @@ export default defineComponent({
 				detailData.selectDetail.color = color
 			}else{
 				if(detailData.currentDetailType == 'color'){
-					delete detailData.selectDetail.newDetail.color
+					if(detailData.selectDetail.newDetail?.color)delete detailData.selectDetail.newDetail.color
 					detailData.selectDetail.color = color
+					detailData.selectDetail.gradient = color.gradient
 				}
 				if(detailData.currentDetailType == 'print'){
-					delete detailData.selectDetail.newDetail.print
+					if(detailData.selectDetail.newDetail?.print)delete detailData.selectDetail.newDetail.print
 					detailData.selectDetail.printObject.prints = allInfo.prints || []
 				}
 				if(detailData.currentDetailType == 'element'){
-					delete detailData.selectDetail.newDetail.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 ()=>{

src/component/Detail/canvas/index.vue

@@ -6,13 +6,12 @@
 			<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"
@@ -52,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>
@@ -245,8 +244,11 @@ export default defineComponent({
 		}
 
 
-		const frontBackChange = (value:any)=>{
-			let full = detailData.selectDetail.partialDesign.partialDesignBase64 || detailData.selectDetail.path
+		const frontBackChange = async (value:any)=>{
+			if(!detailData.selectDetail.partialDesign.partialDesignPath && !detailData.selectDetail.partialDesign.partialDesignBase64){
+				await privewDetail()
+			}
+			let full = detailData.selectDetail.partialDesign.partialDesignBase64 || detailData.selectDetail.partialDesign.partialDesignPath || detailData.selectDetail.path
 			let size = {
 				...detailData.canvasConfig,
 			}
@@ -287,7 +289,7 @@ 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) => {
 				if(!detailDom?.editCanvas)return resolve()
 				let canvasJSON = detailDom?.editCanvas?.getJSON()

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,13 +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)
+					((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
@@ -172,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,6 +76,7 @@ export default defineComponent({
 				selectImgItem(data)
 				return
 			}
+			data.id = id
 			if(data?.imgUrl)data.url = data.imgUrl
 			let value = {
 				data,

src/component/Detail/detailRight/editPrintElement.vue

@@ -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++ 
@@ -336,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},
@@ -357,7 +379,6 @@ export default defineComponent({
 				},
 				designOpenrtionBtn:false
 			}
-			editPrintElementData.printZIndex++
 			item.pattern = pattern
 			
 			if(item.object){
@@ -372,7 +393,8 @@ export default defineComponent({
 					angle: 0,
 					flipX: false,
 					flipY: false,
-					blendMode: "multiply",
+					// blendMode: "multiply",
+					blendMode: "source-over",
 					gapX: 0,
 					gapY: 0,
 				}
@@ -399,51 +421,49 @@ export default defineComponent({
 				}
 			}
 		}
-		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
@@ -517,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,
@@ -651,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)
@@ -803,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();
 			}
 		}
@@ -834,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)
@@ -854,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) => {
@@ -865,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,
 				});
 			}
@@ -897,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([
 				{

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

@@ -16,7 +16,7 @@
 				:max="1000"
 				:step="1"
 				is-input
-				:tipFormatter="(v) => `${scale.toFixed(0)}%`"
+				:tipFormatter="(v) => `${Number(scale)?.toFixed(0)}%`"
 				:value="scale"
 				@input="inputFillScale"
 			/>
@@ -25,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
@@ -39,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
@@ -84,7 +84,7 @@
 	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;

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

@@ -28,7 +28,7 @@
 			<div class="detail_modal_item_front">
 				<img
 				style="object-fit: cover;"
-				:style="observerWH.width == '0px'?{width:observerWH.width+'px',height:observerWH.height+'px'}:{'object-fit': 'contain'}"
+				: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>

src/component/Events/eventsDetail.vue

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

src/component/HomePage/ColorboardUpload.vue

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

src/component/HomePage/Generate.vue

@@ -853,9 +853,7 @@ export default defineComponent({
           level2Type = this.sketchboardList?.[0]?.categoryValue
             ? this.sketchboardList[0].categoryValue
             : ''
-          if (this.workspace.styleName) {
-            sloganText = `${this.workspace.styleName},${sloganText}`
-          }
+            sloganText = `${this.workspace.styleName || 'all'},${sloganText}`
         } else if (this.upload.level1Type == 'Printboard') {
           level2Type = this.scene?.value
           if (level2Type == 'Slogan' && this.searchPictureName == '') {

src/component/HomePage/UpgradePlan.vue

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

src/component/LoginPage/login/enterprise.vue

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

src/component/LoginPage/login/school.vue

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

src/component/common/SelectImages.vue

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

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

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

src/component/home/design/index.vue

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

src/component/home/design/tools.vue

@@ -56,7 +56,7 @@
 							@changeCanvas="changeCanvas" 
 							@trigger-library="triggerLibrary"
 							:canvasJSON="canvasJSON"
-							:hideCanvas="hideCanvas"
+							:hideCanvas="hideCanvas || !key"
 							ref="editCanvas">
 							<template #existsImageList>
 								<ExistsImageList :list="canvasSelectList" @select="handleImageSelect" />
@@ -135,7 +135,7 @@ export default defineComponent({
 			unLikeList:[],
 			locale:null as any,
 			t:null as any,
-
+			key:true as any
 		})
 		const dataDom = reactive({
 			toProduct:null as any,
@@ -271,7 +271,7 @@ export default defineComponent({
 			allCollectionStr.forEach((itemStr:any)=>{
 				let list = [] as any
 				allCollection[itemStr.value].forEach((imgItem)=>{
-					list.push({url:imgItem.url || imgItem.imgUrl})
+					list.push({url:imgItem?.url || imgItem?.imgUrl})
 				})
 				let obj = {
 					value:itemStr.value,
@@ -462,9 +462,11 @@ export default defineComponent({
 				imgUrl:imageDataURL,
 				userlikeGroupId:'',
 			}
+			data.key = false
 			dataDom.publish.init(value)
 		}
 		const setPublish = ()=>{
+			data.key = true
 			saveCanvas()
 		}
 		return{

src/component/home/index.vue

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

src/component/home/newProject/setting.vue

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

src/component/home/newProject/workspace.vue

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

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

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

src/component/mainPage/signUp/index.vue

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

src/component/mainPage/signUp/registerModel.vue

@@ -916,9 +916,13 @@ export default defineComponent({
       .login_form_content {
         margin-top: 4rem;
         position: relative;
+		min-height: 34rem;
 		@media (max-width: 768px) {
 			margin-top: 2.4rem;
-			height: 20rem;
+			min-height: auto;
+			&[state="2"] {
+				height: 20rem;
+			}
 		}
         &[state="2"] {
           > * {

src/component/modules/habitSetStyle.vue

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

src/lang/cn.ts

@@ -1503,6 +1503,12 @@ export default {
 	CompositeLuminosity: '亮度',
 	CompositeLuminosityTip: '亮度：保留原图像颜色，改变新图像亮度',
 	GarmentPartSelector: '服装部件选取',
+	LeftClickAdd: '左键添加',
+	RightClickRemove: '右键移除',
+	PointSelection: '点选',
+	MarqueeSelection: '框选',
+	BrushSelection: '画笔',
+	Erase: '擦除',
   },
   speedList: {
     High: '高级',
@@ -1526,7 +1532,8 @@ export default {
     LiquefactionTool: '液化工具'
   },
   event: {
-    back: '返回'
+    back: '返回',
+    detail:'查看详情'
   },
   admin: {
     allUser: '所有用户',

src/router/index.ts

@@ -53,6 +53,12 @@ const routes: Array<RouteRecordRaw> = [
     meta: { enter: "all" },
     component: () => import("@/views/Register.vue"),
   },
+  {
+    path: "/register/:lang",
+    name: "registerLang",
+    meta: { enter: "all" },
+    component: () => import("@/views/Register.vue"),
+  },
   {
     path: "/upgrade",
     name: "upgrade",

src/store/Detail/designDetail.ts

@@ -81,7 +81,7 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 						left:v.layersObject[i].position?.[1],
 						width:v.layersObject[i].imageSize?.[0],
 						height:v.layersObject[i].imageSize?.[1],
-						transform:`rotate(${v.layersObject[i]?.rotate || 0}deg) scaleX(${v.layersObject[i].transpose?.[0] || 1}) scaleY(${v.layersObject[i].transpose?.[1] || 1})`,
+						transform:`rotate(${v.layersObject?.[i]?.rotate || 0}deg) scaleX(${v.layersObject[i].transpose?.[0] || 1}) scaleY(${v.layersObject[i].transpose?.[1] || 1})`,
 					}
 					v.layersObject[i].centers={
 						left:0,
@@ -277,7 +277,7 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 									width:item.layersObject[i].imageSize?.[0] * scale + 'px',
 									height:item.layersObject[i].imageSize?.[1] * scale + 'px',
 									zIndex:v?.style?.zIndex?v.style.zIndex:v.priority?v.priority:state.frontBack.front.length,
-									transform:`rotate(${item.layersObject?.[i]?.rotate || 0}deg) scaleX(${item.layersObject[i].transpose?.[0] || 1}) scaleY(${item.layersObject[i].transpose?.[1] || 1})`,
+									transform:`scaleX(${item.layersObject[i].transpose?.[0] || 1}) scaleY(${item.layersObject[i].transpose?.[1] || 1}) rotate(${item.layersObject?.[i]?.rotate || 0}deg)`,
 								}
 								item.layersObject[i].centers={
 									left:0,

src/store/homeStore/homeStore.ts

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

src/store/userHabit/userHabit.ts

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

src/store/workspace/workspace.ts

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

src/tool/listData.js

@@ -272,12 +272,12 @@ const navTypeList = (t)=>{
 				// },
 
 
-				// {
-				// 	icon:'fi fi-rr-puzzle-alt',
-				// 	value:'deReconstruction',
-				// 	label:t('Header.toolsDeReconstruction'),
-				// 	router:'tools=deReconstruction'
-				// },
+				{
+					icon:'fi fi-rr-puzzle-alt',
+					value:'deReconstruction',
+					label:t('Header.toolsDeReconstruction'),
+					router:'tools=deReconstruction'
+				},
 				{
 					icon:'fi fi-ss-box-open',
 					value:'toProduct',
@@ -294,18 +294,18 @@ const navTypeList = (t)=>{
 					label:t('Header.toolsToTransferPose'),
 					router:'tools=poseTransfer'
 				},
-				// {
-				// 	icon:'fi fi-rr-cubes',
-				// 	value:'patternMaking3D',
-				// 	label:t('Header.toolsPatternMaking'),
-				// 	router:'tools=patternMaking3D'
-				// },
-				// {
-				// 	icon:'fi fi-rr-pen-swirl',
-				// 	value:'canvasUpload',
-				// 	label:t('Header.toolsCanvas'),
-				// 	router:'tools=canvasUpload'
-				// },
+				{
+					icon:'fi fi-rr-cubes',
+					value:'patternMaking3D',
+					label:t('Header.toolsPatternMaking'),
+					router:'tools=patternMaking3D'
+				},
+				{
+					icon:'fi fi-rr-pen-swirl',
+					value:'canvasUpload',
+					label:t('Header.toolsCanvas'),
+					router:'tools=canvasUpload'
+				},
 			]
 		},
 		library:{

src/views/AwardPage/components/ApplySection.vue

@@ -1,28 +1,152 @@
 <template>
-	<div class="apply-container container flex flex-col" ref="applyRef">
-		<div class="title" ref="applyTitleRef">How to Apply</div>
-		<div class="sub-title" ref="applySubTitleRef">Requirments</div>
-		<div class="requirments-list flex" ref="reqListRef">
-			<div class="left flex flex-col space-between">
-				<div class="item-box" v-for="item in leftRequirment" :key="item.type">
-					<div class="item-header flex align-center">
-						<img src="@/assets/images/award/bloom_logo.png" class="logo" />
-						<div class="item-title">{{ item.type }}</div>
+	<div
+		class="apply-container flex flex-col"
+		id="apply"
+		ref="applyRef"
+	>
+		<div
+			class="title animation-element"
+			ref="applyTitleRef"
+		>
+			{{ $t('AwardsPage.howToApply') }}
+		</div>
+		<div
+			class="sub-title animation-element"
+			ref="applySubTitleRef"
+		>
+			{{ $t('AwardsPage.stepByStep') }}
+		</div>
+		<div
+			class="requirments-list flex flex-col"
+			ref="reqListRef"
+		>
+			<div class="top flex">
+				<div
+					class="item-box animation-element"
+					v-for="(item, index) in leftRequirment"
+					:key="item.type"
+					:ref="el => { if(el) itemRefs[index] = el }"
+					:style="{ background: item.background || '#fff' }"
+				>
+					<div class="item-header flex flex-center">
+						<div class="item-title">{{ $t(item.type) }}</div>
 					</div>
-					<div class="context" v-for="el in item.desc">
-						{{ el }}
+					<div class="context-container flex flex-center">
+						<div
+							class="context"
+							v-for="el in item.desc"
+						>
+							{{ $t(el) }}
+						</div>
+						<div
+							class="list"
+							v-if="item.listTitle"
+						>
+							<div class="list-title">{{ $t(item.listTitle) }}</div>
+							<ul class="list-items">
+								<li
+									class="list-item"
+									v-for="el in item.list"
+								>
+									{{ $t(el) }}
+								</li>
+							</ul>
+						</div>
 					</div>
 				</div>
 			</div>
-			<div class="right">
-				<div class="item-box">
-					<div class="item-box">
-						<div class="item-header flex align-center">
-							<img src="@/assets/images/award/bloom_logo.png" class="logo" />
-							<div class="item-title">{{ rightRequirment.type }}</div>
+			<div class="bottom flex">
+				<div class="step-3 flex flex-col animation-element" ref="step3Ref">
+					<div class="header">{{ $t('AwardsPage.step3Title') }}</div>
+					<div class="content flex">
+						<div class="content-left flex flex-col space-between">
+							<div class="content-item">
+								<div class="item-header flex align-center">
+									<div class="point"></div>
+									<div>{{ $t('AwardsPage.processVideo') }}</div>
+								</div>
+								<div class="desc-wrapper flex flex-col space-between">
+									<div class="item-desc">
+										{{ $t('AwardsPage.processVideoDesc') }}
+									</div>
+									<ul class="desc-lists">
+										<div class="desc-lists-title">
+											{{ $t('AwardsPage.videoRequirements') }}
+										</div>
+										<li>{{ $t('AwardsPage.videoFormat') }}</li>
+										<li>{{ $t('AwardsPage.videoResolution') }}</li>
+										<li>{{ $t('AwardsPage.videoDuration') }}</li>
+										<li>{{ $t('AwardsPage.videoSize') }}</li>
+									</ul>
+								</div>
+							</div>
+							<div class="content-item">
+								<div class="item-header flex align-center">
+									<div class="point"></div>
+									<div>{{ $t('AwardsPage.fileName') }}</div>
+								</div>
+								<div class="item-desc indent">
+									{{ $t('AwardsPage.fileNameDesc') }}
+								</div>
+							</div>
 						</div>
-						<div class="context" v-for="el in rightRequirment.desc">
-							{{ el }}
+						<div class="content-right">
+							<div class="content-item flex flex-col">
+								<div class="item-header flex align-center">
+									<div class="point"></div>
+									<div>{{ $t('AwardsPage.designPortfolio') }}</div>
+								</div>
+								<div
+									class="desc-wrapper flex-1 flex flex-col space-between"
+								>
+									<ul class="desc-lists">
+										<div class="desc-lists-title">
+											<p>
+												{{ $t('AwardsPage.submitPdf') }}
+											</p>
+											<p>{{ $t('AwardsPage.requiredStructure') }}</p>
+										</div>
+										<li>{{ $t('AwardsPage.pdfDesignTitle') }}</li>
+										<li>{{ $t('AwardsPage.pdfMoodboard') }}</li>
+										<li>{{ $t('AwardsPage.pdfConcept') }}</li>
+										<div>{{ $t('AwardsPage.pdfConceptDesc') }}</div>
+									</ul>
+									<ul class="desc-lists">
+										<div class="desc-lists-title">
+											<p>{{ $t('AwardsPage.pdfRequirements') }}</p>
+										</div>
+										<li>{{ $t('AwardsPage.pdfMaxPages') }}</li>
+										<li>{{ $t('AwardsPage.pdfMaxSize') }}</li>
+										<li>
+											{{ $t('AwardsPage.pdfLanguage') }}
+										</li>
+									</ul>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="step-4 animation-element" ref="step4Ref">
+					<div class="header flex flex-col flex-center">
+						<p>{{ $t('AwardsPage.step4Title') }}</p>
+						<p class="sub-title">{{ $t('AwardsPage.step4Subtitle') }}</p>
+					</div>
+					<div class="content">
+						<div class="content-item">
+							<div class="desc-wrapper flex-1 flex flex-col space-between">
+								<ul class="desc-lists">
+									<div class="desc-lists-title">
+										{{ $t('AwardsPage.step4Desc') }}
+									</div>
+									<li>{{ $t('AwardsPage.finalistPieces') }}</li>
+									<li>
+										{{ $t('AwardsPage.finalistBasedOn') }}
+									</li>
+									<li>
+										{{ $t('AwardsPage.finalistShipping') }}
+									</li>
+								</ul>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -32,178 +156,374 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
-import { gsap } from 'gsap'
+	import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+	import { useI18n } from 'vue-i18n'
+	import { gsap } from 'gsap'
 
-const leftRequirment = ref([
-	{
-		type: 'Video',
-		desc: ['The process of doing design']
-	},
-	{
-		type: 'Design',
-		desc: [
-			'Structure: design title, moodboard and elaboration (how will you use AiDA to design)',
-			'Design sketch: Maximum 4 outfit design with proposed materials'
-		]
+	const { t } = useI18n()
+
+	const leftRequirment = ref([
+		{
+			type: 'AwardsPage.step1Title',
+			desc: ['AwardsPage.step1Desc']
+		},
+		{
+			type: 'AwardsPage.step2Title',
+			desc: ['AwardsPage.step2Desc'],
+			listTitle: 'AwardsPage.step2ListTitle',
+			list: [
+				'AwardsPage.step2List[0]',
+				'AwardsPage.step2List[1]',
+				'AwardsPage.step2List[2]'
+			],
+			background: '#F9F9F9'
+		}
+	])
+
+	const applyRef = ref()
+	const applyTitleRef = ref()
+	const applySubTitleRef = ref()
+	const reqListRef = ref()
+	const itemRefs = ref<HTMLElement[]>([])
+	const step3Ref = ref()
+	const step4Ref = ref()
+
+	const hasPlayedAnim = ref(false)
+	let timeline: gsap.core.Timeline | null = null
+
+	let observer: IntersectionObserver | null = null
+
+	const setupApplyInitialState = () => {
+		// 设置标题和副标题的初始状态
+		const titleEls = [applyTitleRef.value, applySubTitleRef.value].filter(
+			Boolean
+		) as HTMLElement[]
+		if (titleEls.length) {
+			gsap.set(titleEls, {
+				opacity: 0,
+				scale: 0,
+				transformOrigin: '50% 50%'
+			})
+		}
+
+		// 设置步骤元素的初始状态
+		const allStepElements: HTMLElement[] = []
+		if (itemRefs.value && itemRefs.value.length > 0) {
+			allStepElements.push(...itemRefs.value)
+		}
+		if (step3Ref.value) {
+			allStepElements.push(step3Ref.value as HTMLElement)
+		}
+		if (step4Ref.value) {
+			allStepElements.push(step4Ref.value as HTMLElement)
+		}
+
+		if (allStepElements.length > 0) {
+			gsap.set(allStepElements, {
+				opacity: 0,
+				y: 50
+			})
+		}
 	}
-])
 
-const rightRequirment = ref({
-	type: 'Submission Format',
-	desc: [
-		'Naming as “AiDA global award 2026_applicantname”',
-		'Mp4\n(1080x1920pixels/20mb within 1min)',
-		'Single PDF file\n(within 15 pages, maximum 20mb)',
-		'English or native language\nwith English translation'
-	]
-})
+	const initAnimations = () => {
+		if (hasPlayedAnim.value) return
 
-const applyRef = ref<HTMLElement | null>(null)
-const applyTitleRef = ref<HTMLElement | null>(null)
-const applySubTitleRef = ref<HTMLElement | null>(null)
-const reqListRef = ref<HTMLElement | null>(null)
-const hasPlayedApplyAnim = ref(false)
-let applyObserver: IntersectionObserver | null = null
-
-const setupApplyInitialState = () => {
-	const titleEls = [applyTitleRef.value, applySubTitleRef.value].filter(
-		Boolean
-	) as HTMLElement[]
-	if (titleEls.length) {
-		gsap.set(titleEls, {
-			opacity: 0,
-			scale: 0,
-			transformOrigin: '50% 50%'
+		timeline = gsap.timeline({
+			defaults: { ease: 'back.out(1.7)' }
 		})
-	}
-	const headers = reqListRef.value?.querySelectorAll<HTMLElement>('.item-header')
-	const contexts = reqListRef.value?.querySelectorAll<HTMLElement>('.context')
-	gsap.set([headers, contexts], { opacity: 0 })
-}
 
-const playApplyAnimation = () => {
-	if (hasPlayedApplyAnim.value) return
-	const titleEls = [applyTitleRef.value, applySubTitleRef.value].filter(
-		Boolean
-	) as HTMLElement[]
-	const headers = reqListRef.value?.querySelectorAll<HTMLElement>('.item-header')
-	const contexts = reqListRef.value?.querySelectorAll<HTMLElement>('.context')
-	if (!titleEls.length) return
-
-	const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
-	tl.to(titleEls, {
-		opacity: 1,
-		scale: 1,
-		duration: 0.6,
-		ease: 'back.out(1.6)',
-		stagger: 0.1
-	})
-	if (headers?.length) {
-		tl.to(
-			headers,
-			{
+		if (applyTitleRef.value && applySubTitleRef.value) {
+			timeline.to([applyTitleRef.value, applySubTitleRef.value], {
+				scale: 1,
 				opacity: 1,
-				duration: 0.4,
+				duration: 0.6,
 				stagger: 0.1
-			},
-			'-=0.1'
-		)
-	}
-	if (contexts?.length) {
-		tl.to(
-			contexts,
-			{
+			})
+		}
+
+		const allStepElements: HTMLElement[] = []
+		if (itemRefs.value && itemRefs.value.length > 0) {
+			allStepElements.push(...itemRefs.value)
+		}
+		if (step3Ref.value) {
+			allStepElements.push(step3Ref.value as HTMLElement)
+		}
+		if (step4Ref.value) {
+			allStepElements.push(step4Ref.value as HTMLElement)
+		}
+
+		if (allStepElements.length > 0) {
+			timeline.to(allStepElements, {
 				opacity: 1,
-				duration: 0.4,
-				stagger: 0.05
-			},
-			'-=0.05'
-		)
+				y: 0,
+				duration: 0.6,
+				stagger: 0.2
+			}, '>')
+		}
+
+		hasPlayedAnim.value = true
 	}
 
-	hasPlayedApplyAnim.value = true
-	applyObserver?.disconnect()
-}
-
-onMounted(() => {
-	nextTick(() => {
-		setupApplyInitialState()
-		if ('IntersectionObserver' in window) {
-			applyObserver = new IntersectionObserver(
+	onMounted(() => {
+		nextTick(() => {
+			setupApplyInitialState()
+			observer = new IntersectionObserver(
 				(entries) => {
 					entries.forEach((entry) => {
 						if (entry.isIntersecting) {
-							playApplyAnimation()
+							initAnimations()
+							observer?.disconnect()
 						}
 					})
 				},
-				{ threshold: 0.25 }
+				{
+					threshold: 0.3,
+					rootMargin: '0px 0px -100px 0px'
+				}
 			)
-			if (applyRef.value) applyObserver.observe(applyRef.value)
-		} else {
-			playApplyAnimation()
+
+			// Start observing the component root element
+			if (applyRef.value) {
+				observer.observe(applyRef.value)
+			}
+		})
+	})
+
+	onBeforeUnmount(() => {
+		// Cleanup animation timeline
+		if (timeline) {
+			timeline.kill()
+		}
+		// Cleanup IntersectionObserver
+		if (observer) {
+			observer.disconnect()
 		}
 	})
-})
-
-onBeforeUnmount(() => {
-	applyObserver?.disconnect()
-})
 </script>
 
 <style scoped lang="less">
-.apply-container {
-	flex: 1;
-	background: url('@/assets/images/award/apply_bg.png') no-repeat;
-	background-size: 100% 100%;
-	padding: 12.7rem 0 16.9rem;
-	.title {
-		text-align: center;
-		color: #232323;
-		font-family: 'PoppinsBold';
-		font-weight: 600;
-		font-size: 4rem;
-		margin-bottom: 3rem;
+	p {
+		margin: 0;
+		padding: 0;
 	}
-	.sub-title {
-		text-align: center;
-		color: #b10000;
-		font-size: 3rem;
-		font-family: 'Arial';
-		font-weight: 400;
+	ul {
+		margin: 0;
+		padding: 0;
 	}
-	.requirments-list {
+	.animation-element{
+		will-change: opacity transform;
+	}
+	.apply-container {
 		flex: 1;
-		padding-left: 41.4rem;
-		column-gap: 17.7rem;
-		margin-top: 12rem;
-		.left {
+		height: 143.3rem;
+		background: url('@/assets/images/award/apply_bg.png') no-repeat;
+		background-size: 100% 100%;
+		padding: 12.7rem 21.4rem 12rem;
+		.title {
+			text-align: center;
 			color: #232323;
-			height: 100%;
+			font-family: 'PoppinsBold';
+			font-weight: 600;
+			font-size: 4rem;
+			margin-bottom: 3rem;
 		}
-		.item-box {
-			.item-header {
-				column-gap: 3.2rem;
-				.item-title {
-					color: #232323;
-					font-family: 'PoppinsBold';
-					font-weight: 600;
-					font-size: 2.8rem;
+		.sub-title {
+			text-align: center;
+			color: #b10000;
+			font-size: 3rem;
+			font-family: 'Arial';
+			font-weight: 400;
+			margin-bottom: 8.2rem;
+		}
+		.requirments-list {
+			flex: 1;
+			row-gap: 8.2rem;
+			.top {
+				height: 27.4rem;
+				color: #585858;
+				column-gap: 4.6rem;
+				.item-box {
+					height: 27.4rem;
 				}
 			}
-			.context {
-				margin-top: 4rem;
-				width: 46.8rem;
-				color: #585858;
-				font-family: 'Arial';
-				font-weight: 400;
-				line-height: 3rem;
-				font-size: 2.4rem;
-				padding-left: 5.6rem;
-				white-space: pre-line;
+			.item-box {
+				border-radius: 0.8rem;
+				&:nth-of-type(1) {
+					width: 47rem;
+					flex-grow: initial;
+				}
+				&:nth-of-type(2) {
+					flex: 1;
+				}
+				.item-header {
+					background-color: #424242;
+					border-radius: 0.8rem;
+					height: 7.8rem;
+					.item-title {
+						color: #fff;
+						font-family: 'PoppinsBold';
+						font-weight: 600;
+						font-size: 2.4rem;
+						text-align: center;
+						white-space: pre-line;
+					}
+				}
+				.context-container {
+					margin-top: 4rem;
+					column-gap: 7rem;
+					.list {
+						font-family: 'Instrument';
+						font-weight: 400;
+						font-size: 2.4rem;
+						line-height: 3rem;
+					}
+				}
+				.context {
+					// margin-top: 4rem;
+					// width: 46.8rem;
+					text-align: center;
+					color: #585858;
+					font-family: 'Arial';
+					font-weight: 400;
+					line-height: 3rem;
+					font-size: 2.4rem;
+					// padding-left: 5.6rem;
+					white-space: pre-line;
+				}
+			}
+			.bottom {
+				column-gap: 4.6rem;
+				height: 63.4rem;
+				.step-3 {
+					flex: 1;
+				}
+				.step-3,
+				.step-4 {
+					.header {
+						font-family: 'PoppinsBold';
+						font-weight: 600;
+						font-size: 2.4rem;
+						text-align: center;
+						height: 7.4rem;
+						line-height: 7.4rem;
+						color: #fff;
+						background-color: #b10000;
+						border-radius: 0.8rem;
+					}
+					.content {
+						padding: 4rem;
+						border-radius: 0.8rem;
+						column-gap: 6.4rem;
+						background: linear-gradient(
+							180deg,
+							#ffe8e8 0%,
+							#feefef 25%,
+							#f9f9f9 100%
+						);
+						flex: 1;
+						.content-left {
+							flex: 1;
+						}
+
+						.content-item {
+							.item-header {
+								column-gap: 2rem;
+								color: #585858;
+								font-family: 'InstrumentBold';
+								font-weight: 700;
+								font-size: 2.4rem;
+								line-height: 3rem;
+								.point {
+									width: 1.2rem;
+									height: 1.2rem;
+									background-color: #b10000;
+									border-radius: 50%;
+								}
+							}
+							.item-desc {
+								font-family: 'Instrument';
+								font-weight: 400;
+								font-size: 2.4rem;
+								color: #585858;
+								&.indent {
+									padding-left: 3.8rem;
+									line-height: 3rem;
+									padding-top: 2rem;
+								}
+							}
+							.desc-wrapper {
+								margin-top: 3rem;
+								/* 基线行高变量，供子元素计算方块垂直偏移以对齐首行 */
+								--desc-line-height: 3rem;
+								font-family: 'Instrument';
+								font-weight: 400;
+								color: #585858;
+								font-size: 2.4rem;
+								line-height: 3rem;
+								row-gap: 3rem;
+								.desc-lists {
+									/* 使用自定义方块代替浏览器 marker，保证大小为 1rem 并与文字垂直居中 */
+									padding-left: 0;
+									list-style: none;
+									li {
+										list-style: none;
+										/* 使内容对齐到首行顶部，方块通过 margin-top 调整到首行中间 */
+										display: flex;
+										align-items: flex-start;
+										gap: 1rem;
+										padding: 0;
+										margin: 0.4rem 0;
+										&::before {
+											content: '';
+											/* 固定为 1rem 方块 */
+											width: 0.5rem;
+											height: 0.5rem;
+											background-color: #585858;
+											flex: 0 0 0.5rem;
+											border-radius: 0;
+											/* 让方块垂直居中于第一行文字：(line-height - square)/2 */
+											margin-top: calc(
+												(var(--desc-line-height, 3rem) - 1rem) / 2
+											);
+										}
+									}
+								}
+							}
+						}
+						.content-right {
+							.content-item {
+								height: 100%;
+							}
+						}
+					}
+				}
+				.step-4 {
+					width: 45.1rem;
+					.header {
+						color: #fff;
+						text-align: center;
+						background-color: #424242;
+						border-radius: 0.8rem;
+						height: 7.8rem;
+						white-space: pre-line;
+						font-family: 'PoppinsBold';
+						font-weight: 600;
+						font-size: 2.4rem;
+						line-height: 1.5;
+						.sub-title {
+							font-family: 'Poppins';
+							font-weight: 400;
+							font-size: 1.8rem;
+							color: #fff;
+							margin: 0;
+						}
+					}
+					.content {
+						background: #fff;
+					}
+				}
 			}
 		}
 	}
-}
 </style>

src/views/AwardPage/components/Bloom.vue

@@ -1,43 +1,172 @@
 <template>
-	<div class="bloom container flex flex-col align-center">
+	<div class="bloom flex flex-col align-center">
 		<div
 			class="title"
 			ref="titleRef"
 		>
-			Bloom Your Creativity
+			{{ $t('AwardsPage.bloomYourCreativity') }}
 		</div>
 
 		<div
 			class="season"
 			ref="subtitleRef"
 		>
-			Theme of 2026
+			{{ $t('AwardsPage.themeOf2026') }}
 		</div>
 		<div
 			class="desc"
 			ref="textRef"
 		>
-			Where imagination meets innovation, creativity blooms. This theme celebrates
-			AI as a catalyst for fashion design, allowing your vision to flourish beyond
-			traditional boundaries. Let your ideas blossom into extraordinary designs that
-			merge human artistry with artificial intelligence.
+			<p class="section-1">
+				{{ $t('AwardsPage.bloomText.desc1.regular1') }}
+				<span class="arial-bold">
+					{{ $t('AwardsPage.bloomText.desc1.bold1') }}
+				</span>
+				{{ $t('AwardsPage.bloomText.desc1.regular2') }}
+				<span class="arial-bold">
+					{{ $t('AwardsPage.bloomText.desc1.bold2') }}
+				</span>
+				{{ $t('AwardsPage.bloomText.desc1.regular3') }}
+				<span class="arial-bold">
+					{{ $t('AwardsPage.bloomText.desc1.bold3') }}
+				</span>
+				{{ $t('AwardsPage.bloomText.desc1.regular4') }}
+				<span class="arial-bold">
+					{{ $t('AwardsPage.bloomText.desc1.bold4') }}
+				</span>
+				{{ $t('AwardsPage.bloomText.desc1.regular5') }}
+			</p>
+			<p class="section-2">
+				{{ $t('AwardsPage.bloomText.desc2.regular1') }}
+				<span class="arial-bold">
+					{{ $t('AwardsPage.bloomText.desc2.bold1') }}
+				</span>
+				{{ $t('AwardsPage.bloomText.desc2.regular2') }}
+			</p>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-		import { ref, onMounted } from 'vue'
-		import gsap from 'gsap'
+	import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+	import { useI18n } from 'vue-i18n'
+	import { gsap } from 'gsap'
 
-		const titleRef = ref<HTMLElement | null>(null)
-		const subtitleRef = ref<HTMLElement | null>(null)
-		const textRef = ref<HTMLElement | null>(null)
+	const { t } = useI18n()
 
+	const titleRef = ref<HTMLElement | null>(null)
+	const subtitleRef = ref<HTMLElement | null>(null)
+	const textRef = ref<HTMLElement | null>(null)
 
+	const hasPlayedBloomAnim = ref(false)
+	let bloomObserver: IntersectionObserver | null = null
+
+	const setupBloomInitialState = () => {
+		const titleEls = [titleRef.value, subtitleRef.value].filter(
+			Boolean
+		) as HTMLElement[]
+		if (titleEls.length) {
+			gsap.set(titleEls, {
+				opacity: 0,
+				// start larger than final size, then animate down to scale:1
+				scale: 1.6,
+				transformOrigin: '50% 50%'
+			})
+		}
+
+		if (textRef.value) {
+			// start below and hidden
+			gsap.set(textRef.value, {
+				opacity: 0,
+				y: 60
+			})
+		}
+	}
+
+	const playBloomAnimation = () => {
+		if (hasPlayedBloomAnim.value) return
+		const titleEls = [titleRef.value, subtitleRef.value].filter(
+			Boolean
+		) as HTMLElement[]
+		const textEl = textRef.value
+		if (!titleEls.length || !textEl) return
+
+		const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
+
+		tl.to(titleEls, {
+			opacity: 1,
+			scale: 1,
+			duration: 0.9,
+			ease: 'back.out(1.6)',
+			stagger: 0.12
+		})
+
+		tl.to(
+			textEl,
+			{
+				opacity: 1,
+				y: -12,
+				scale: 1.05,
+				duration: 0.3,
+				ease: 'power2.out'
+			},
+			'-=0.3'
+		)
+		tl.to(
+			textEl,
+			{
+				y: 0,
+				scale: 1,
+				duration: 0.18,
+				ease: 'bounce.out'
+			},
+			'+=0.08'
+		)
+
+		hasPlayedBloomAnim.value = true
+		bloomObserver?.disconnect()
+	}
+
+	onMounted(() => {
+		nextTick(() => {
+			setupBloomInitialState()
+			if ('IntersectionObserver' in window) {
+				bloomObserver = new IntersectionObserver(
+					entries => {
+						entries.forEach(entry => {
+							if (entry.isIntersecting) {
+								playBloomAnimation()
+							}
+						})
+					},
+					{ threshold: 0.3 }
+				)
+				if (titleRef.value) {
+					bloomObserver.observe(titleRef.value)
+				}
+			} else {
+				// fallback
+				playBloomAnimation()
+			}
+		})
+	})
+
+	onBeforeUnmount(() => {
+		bloomObserver?.disconnect()
+	})
 </script>
 
 <style scoped lang="less">
+	p {
+		margin: 0;
+		padding: 0;
+	}
+	.arial-bold {
+		font-family: 'ArialBold';
+		font-weight: 700;
+	}
 	.bloom {
+		height: 108rem;
 		padding-top: 12.8rem;
 		font-family: 'Poppins';
 		background: url('@/assets/images/award/bloom_bg.png') no-repeat;
@@ -57,12 +186,17 @@
 		}
 		.desc {
 			font-family: 'Arial';
-			font-size: 2.8rem;
+			font-weight: 400;
+			font-size: 2.4rem;
 			color: #585858;
 			text-align: center;
 			padding: 0 21.5rem;
 			line-height: 4.5rem;
 			margin-bottom: 12.3rem;
+			white-space: pre-line;
+			.section-2 {
+				margin-top: 4rem;
+			}
 		}
 	}
 </style>

src/views/AwardPage/components/JudgesSection.vue

@@ -1,8 +1,8 @@
 <template>
 	<div class="judges-container flex flex-col align-center">
-		<div class="title" ref="judgesTitleRef">Panel of Judges</div>
+		<div class="title" ref="judgesTitleRef">{{ $t('AwardsPage.panelOfJudges') }}</div>
 		<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
-		<div class="sub-title" ref="judgesSubTitleRef">Expertise</div>
+		<div class="sub-title" ref="judgesSubTitleRef">{{ $t('AwardsPage.expertise') }}</div>
 		<div class="judgement-list" ref="judgementListRef">
 			<div
 				class="judgement-item flex flex-col align-center"
@@ -10,8 +10,8 @@
 				:key="item.name"
 			>
 				<img :src="item.picture" class="picture" />
-				<div class="name">{{ item.name }}</div>
-				<div class="desc">{{ item.desc }}</div>
+				<div class="name">{{ $t(item.name) }}</div>
+				<div class="desc">{{ $t(item.desc) }}</div>
 			</div>
 		</div>
 	</div>
@@ -19,6 +19,7 @@
 
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, nextTick, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { gsap } from 'gsap'
 import jae from '@/assets/images/award/jae.png'
 import diego from '@/assets/images/award/diego.png'
@@ -27,36 +28,38 @@ import vincenzo from '@/assets/images/award/vincenzo.png'
 import tim from '@/assets/images/award/tim.png'
 import desmond from '@/assets/images/award/desmond.png'
 
+const { t } = useI18n()
+
 const judgements = [
 	{
 		picture: jae,
 		name: 'Jae Hyuk Lim',
-		desc: 'Code-create\nKorea Branch Director\nBesfxxk creative director'
+		desc: 'AwardsPage.judgesHat.jae'
 	},
 	{
 		picture: diego,
 		name: 'Diego Dultzin Lacoste',
-		desc: 'Co-founder & Chief Father\nOfficer of OnTheList\n(Hong Kong)'
+		desc: 'AwardsPage.judgesHat.diego'
 	},
 	{
 		picture: gregory,
 		name: 'Gregory de la Hogue Moran',
-		desc: 'Senior Designer at\nGabriela Heasrst (Italy)'
+		desc: 'AwardsPage.judgesHat.gregory'
 	},
 	{
 		picture: vincenzo,
 		name: 'Vincenzo La Torre',
-		desc: 'Cheif Editor of SCMP Style\n(Hong Kong)'
+		desc: 'AwardsPage.judgesHat.vincenzo'
 	},
 	{
 		picture: tim,
 		name: 'Tim Lim',
-		desc: 'Group Fashion Direction of\n Modern Media Group\n(Shanghai)'
+		desc: 'AwardsPage.judgesHat.tim'
 	},
 	{
 		picture: desmond,
 		name: 'Desmond Lim',
-		desc: 'Cheif Editor of Vogue\n(Singapore)'
+		desc: 'AwardsPage.judgesHat.desmond'
 	}
 ]
 
@@ -199,6 +202,9 @@ onBeforeUnmount(() => {
 		column-gap: 23.22rem;
 		row-gap: 8rem;
 		padding: 0 25rem 0 26.6rem;
+		div{
+			text-align: center;
+		}
 		.judgement-item {
 			overflow: hidden;
 			.picture {

src/views/AwardPage/components/PrizesSection.vue

@@ -8,14 +8,14 @@
 				class="title"
 				ref="prizesTitleRef"
 			>
-				Award & Prizes
+				{{ $t('AwardsPage.awardPrizes') }}
 			</div>
 			<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
 			<div
 				class="desc"
 				ref="prizesSubTitleRef"
 			>
-				Recongnition
+				{{ $t('AwardsPage.recognition') }}
 			</div>
 		</div>
 		<div
@@ -24,17 +24,20 @@
 		>
 			<div
 				class="prize-item flex flex-col flex-center"
+				:class="{ smaller: item.smaller }"
 				v-for="item in prizes"
 				:key="item.name"
 			>
-				<div class="prize-money">{{ item.money }}</div>
-				<div class="prize-name">{{ item.name }}</div>
+				<div class="prize-money">
+					{{ $t(item.money) }}
+				</div>
+				<div class="prize-name">{{ $t(item.name) }}</div>
 				<div class="prize-desc flex flex-col flex-center">
 					<div
 						class="desc-item"
 						v-for="el in item.desc"
 					>
-						{{ el }}
+						{{ $t(el) }}
 					</div>
 				</div>
 			</div>
@@ -44,28 +47,51 @@
 
 <script setup lang="ts">
 	import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+	import { useI18n } from 'vue-i18n'
 	import { gsap } from 'gsap'
 
+	const { t } = useI18n()
+
+	const props = defineProps({
+		isZh: {
+			type: Boolean,
+			default: false
+		}
+	})
+
 	const prizes = [
 		{
-			money: 'US$5000',
-			name: 'Grand Prize',
-			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
+			money: 'AwardsPage.grandMoney',
+			name: 'AwardsPage.grandAwards',
+			desc: [
+				'AwardsPage.cashAward',
+				'AwardsPage.awardCertificate',
+				'AwardsPage.globalMediaExposure'
+			]
 		},
 		{
-			money: 'US$3000',
-			name: 'First Runner-Up',
-			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
+			money: 'AwardsPage.goldMoney',
+			name: 'AwardsPage.goldAwards',
+			desc: [
+				'AwardsPage.cashAward',
+				'AwardsPage.awardCertificate',
+				'AwardsPage.globalMediaExposure'
+			]
 		},
 		{
-			money: 'US$2000',
-			name: 'Second Runner-Up',
-			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
+			money: 'AwardsPage.silverMoney',
+			name: 'AwardsPage.silverAwards',
+			desc: [
+				'AwardsPage.cashAward',
+				'AwardsPage.awardCertificate',
+				'AwardsPage.globalMediaExposure'
+			]
 		},
 		{
-			money: 'Certification',
-			name: 'Finalists',
-			desc: ['Award Ceritificate', 'Global Media Exposure']
+			money: 'AwardsPage.awardCertification',
+			name: 'AwardsPage.finalists',
+			desc: ['AwardsPage.TravelAllowance', 'AwardsPage.globalMediaExposure'],
+			smaller: !props.isZh
 		}
 	]
 
@@ -214,10 +240,22 @@
 						no-repeat;
 					background-size: 100% 100%;
 				}
+				&.smaller {
+					.prize-money {
+						font-size: 3.6rem;
+						line-height: 3.8rem;
+					}
+				}
 				.prize-money {
 					font-family: 'PoppinsBold';
 					font-weight: bold;
 					font-size: 4rem;
+					white-space: pre-line;
+					text-align: center;
+					line-height: 7.6rem;
+					&.smaller {
+						font-size: 3.6rem;
+					}
 				}
 				.prize-name {
 					font-family: 'PoppinsMedium';

src/views/AwardPage/components/SelectionSection.vue

@@ -3,9 +3,9 @@
 		class="selection-container container flex flex-col align-center"
 		ref="selectionRef"
 	>
-		<div class="title">Selection Criteria</div>
+		<div class="title">{{ $t('AwardsPage.selectionCriteria') }}</div>
 		<!-- <img src="@/assets/images/award/bloom_logo.png" class="logo" /> -->
-		<div class="sub-title">Evaluation</div>
+		<div class="sub-title">{{ $t('AwardsPage.evaluation') }}</div>
 		<div class="criteria-list flex" ref="criteriaListRef">
 			<div
 				class="item flex flex-col align-center"
@@ -13,8 +13,8 @@
 				:key="item.name"
 			>
 				<img :src="item.icon" class="icon" :style="item.style" />
-				<div class="name">{{ item.name }}</div>
-				<div class="desc">{{ item.desc }}</div>
+				<div class="name">{{ $t(item.name) }}</div>
+				<div class="desc">{{ $t(item.desc) }}</div>
 			</div>
 		</div>
 	</div>
@@ -22,35 +22,38 @@
 
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { gsap } from 'gsap'
 import criteria1 from '@/assets/images/award/criteria_1.png'
 import criteria2 from '@/assets/images/award/criteria_2.png'
 import criteria3 from '@/assets/images/award/criteria_3.png'
 import criteria4 from '@/assets/images/award/criteria_4.png'
 
+const { t } = useI18n()
+
 const criteriaList = ref([
 	{
 		icon: criteria1,
-		name: 'Originality',
-		desc: 'Unique perspective and innovative approach to fashion design',
+		name: 'AwardsPage.originality',
+		desc: 'AwardsPage.originalityDesc',
 		style: { width: '13rem', height: '17rem' }
 	},
 	{
 		icon: criteria2,
-		name: 'Creativity',
-		desc: 'Artistic vision and exceptional design excellence',
+		name: 'AwardsPage.creativity',
+		desc: 'AwardsPage.creativityDesc',
 		style: { width: '16rem', height: '18rem' }
 	},
 	{
 		icon: criteria3,
-		name: 'AiDA Integration',
-		desc: 'Effective application of AI design tools and functions',
+		name: 'AwardsPage.aidaIntegration',
+		desc: 'AwardsPage.aidaIntegrationDesc',
 		style: { width: '16rem', height: '18rem' }
 	},
 	{
 		icon: criteria4,
-		name: 'Execution',
-		desc: 'Quality of presentation and technical craftsmanship',
+		name: 'AwardsPage.execution',
+		desc: 'AwardsPage.executionDesc',
 		style: { width: '18.8rem', height: '18rem' }
 	}
 ])
@@ -166,6 +169,7 @@ onBeforeUnmount(() => {
 				font-size: 2.4rem;
 				color: #e0e0e0;
 				text-align: center;
+				white-space: pre-line;
 			}
 		}
 	}

src/views/AwardPage/components/Slogan.vue

@@ -0,0 +1,156 @@
+<template>
+	<div
+		class="blocks-list flex"
+		ref="root"
+		:class="{ 'in-view': inView }"
+	>
+		<div
+			class="block-item flex flex-col flex-center"
+			v-for="(item, idx) in blocksList"
+			:key="item.number"
+			:style="{ '--delay': `${idx * 0.18}s` }"
+		>
+			<div class="number">{{ $t(item.number) }}</div>
+			<div class="label">{{ $t(item.label) }}</div>
+			<div class="line"></div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref, onMounted, onUnmounted } from 'vue'
+	import { useI18n } from 'vue-i18n'
+
+	const { t } = useI18n()
+
+	const blocksList = ref([
+		{
+			number: 'AwardsPage.totalCashPrizes',
+			label: 'AwardsPage.totalCashPrizesLabel'
+		},
+		{
+			number: 'AwardsPage.globalMediaExpose',
+			label: 'AwardsPage.globalMediaExposeLabel'
+		},
+		{
+			number: 'AwardsPage.networkingOpportunities',
+			label: 'AwardsPage.networkingOpportunitiesLabel'
+		},
+		{
+			number: 'AwardsPage.awardCeremonyHongKong',
+			label: 'AwardsPage.awardCeremonyLabel'
+		}
+	])
+	const root = ref<HTMLElement | null>(null)
+	const inView = ref(false)
+	let io: IntersectionObserver | null = null
+
+	onMounted(() => {
+		io = new IntersectionObserver(
+			entries => {
+				for (const entry of entries) {
+					if (entry.isIntersecting) {
+						// 延迟 0.5s 后触发动画并断开观察
+						setTimeout(() => {
+							inView.value = true
+						}, 500)
+						if (io) {
+							io.disconnect()
+						}
+					}
+				}
+			},
+			{ threshold: 0.05 }
+		)
+		if (root.value) {
+			io.observe(root.value)
+		}
+	})
+
+	onUnmounted(() => {
+		io?.disconnect()
+	})
+</script>
+
+<style lang="less" scoped>
+	.blocks-list {
+		height: 31.4rem;
+		background: linear-gradient(98.55deg, #232323 18.22%, #898989 101.1%);
+
+		.block-item {
+			flex: 1;
+			height: 100%;
+			color: #fff;
+			position: relative;
+			text-align: center;
+			white-space: pre-line;
+			row-gap: 3rem;
+			/* text scale-in animations */
+			.number {
+				font-size: 3.6rem;
+				font-family: 'PoppinsBold';
+				font-weight: 600;
+				transform: scale(0);
+				opacity: 0;
+				will-change: transform, opacity;
+			}
+			.label {
+				font-size: 2.4rem;
+				font-family: 'Arial';
+				font-weight: 400;
+				letter-spacing: 0.05em;
+				transform: scale(0);
+				opacity: 0;
+				will-change: transform, opacity;
+			}
+			/* vertical line grows top -> bottom */
+			.line {
+				position: absolute;
+				right: 0;
+				/* 固定 top 为最终高度的一半位置，这样 height 从 0 -> 27.4rem 时会从上向下增长 */
+				top: calc(50% - 13.7rem);
+				width: 0.1rem;
+				height: 0;
+				background-color: #8d8d8d;
+				will-change: height;
+			}
+		}
+	}
+
+	/* 当组件进入视口并且等待 0.5s 后，.in-view 会加入根节点，下面规则触发动画 */
+	.in-view .block-item .number {
+		animation: scaleIn 0.48s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
+		animation-delay: var(--delay);
+	}
+
+	.in-view .block-item .label {
+		animation: scaleIn 0.48s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
+		animation-delay: calc(var(--delay) + 0.12s);
+	}
+
+	.in-view .block-item .line {
+		animation: growLine 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
+		animation-delay: calc(var(--delay) + 0.18s);
+	}
+
+	/* keyframes */
+	@keyframes scaleIn {
+		from {
+			transform: scale(0);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+
+	@keyframes growLine {
+		from {
+			height: 0;
+		}
+		to {
+			height: 27.4rem;
+		}
+	}
+</style>

src/views/AwardPage/components/Success.vue

@@ -1,24 +1,54 @@
 <template>
 	<div class="success-container flex flex-col align-center">
 		<img
-			src="@/assets/images/award/successful.png"
+			:src="info.icon"
 			alt=""
 			class="icon-img"
 		/>
-		<div class="title">Submission Successful</div>
+		<div class="title">{{ $t(info.title) }}</div>
 		<div class="desc">
-			<div>
+			{{ $t(info.desc) }}
+			<!-- <div>
 				Please review your submitted information in the AiDA in-platform message.
 			</div>
 			<div>
 				You may edit it if needed. Competition updates and results will be sent
 				via email.
-			</div>
+			</div> -->
 		</div>
 	</div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { useI18n } from 'vue-i18n'
+	import successIcon from '@/assets/images/award/successful.png'
+	import expiredIcon from '@/assets/images/award/expired.png'
+
+	const { t } = useI18n()
+	const props = defineProps({
+		isExpired: {
+			type: Boolean,
+			default: false
+		}
+	})
+
+	const info = computed(() => {
+		if (props.isExpired) {
+			return {
+				icon: expiredIcon,
+				title: 'AwardsPage.deadlinePassed',
+				desc: 'AwardsPage.deadlinePassedDesc'
+			}
+		} else {
+			return {
+				icon: successIcon,
+				title: 'AwardsPage.submissionSuccessful',
+				desc: 'AwardsPage.submissionSuccessfulDesc'
+			}
+		}
+	})
+</script>
 <style lang="less" scoped>
 	.success-container {
 		margin: 0 21.5rem;

src/views/AwardPage/components/TimeLine.vue

@@ -3,54 +3,62 @@
 		ref="containerRef"
 		class="timeline-container container flex flex-col align-center"
 	>
-		<div class="timeline-title">Competition Timeline</div>
-		<div class="desc">Shaping the Future</div>
-		<div class="timeline-point">
-			<div class="labels-row flex align-center">
+		<div class="timeline-title">{{ $t('AwardsPage.competitionTimeline') }}</div>
+		<div class="desc">{{ $t('AwardsPage.shapingTheFuture') }}</div>
+		<div
+			class="timeline-point"
+			ref="timelineRef"
+		>
+			<!-- 顶部标签行 -->
+			<div class="grid-row labels-row">
 				<div
-					class="item-label flex flex-col"
+					class="grid-cell label-cell"
 					v-for="item in points"
 					:key="'label-' + item.time"
 				>
-					<div class="main-label">{{ item.label }}</div>
+					<div class="main-label">{{ $t(item.label) }}</div>
 					<div
 						class="sub-label"
 						v-if="item.subLabel"
 					>
-						{{ item.subLabel }}
+						{{ $t(item.subLabel) }}
 					</div>
 				</div>
 			</div>
-			<!-- Icons row -->
-			<div class="icons-row flex align-center">
+			<!-- 图标行 -->
+			<div class="grid-row icons-row">
 				<div class="timeline-line"></div>
-				<img
-					src="@/assets/images/award/point.png"
-					class="point-icon"
+				<div
+					class="grid-cell icon-cell"
 					v-for="item in points"
 					:key="'icon-' + item.time"
-				/>
+				>
+					<img
+						src="@/assets/images/award/point.png"
+						class="point-icon"
+					/>
+				</div>
 			</div>
-
-			<!-- Times row -->
-			<div class="times-row flex align-center">
+			<!-- 时间行 -->
+			<div class="grid-row times-row">
 				<div
-					class="item-time"
+					class="grid-cell time-cell"
 					v-for="item in points"
 					:key="'time-' + item.time"
 				>
-					{{ item.time }}
+					{{ $t(item.time) }}
 				</div>
 			</div>
-			<!-- Descriptions row -->
-			<div class="descs-row flex align-center">
+
+			<!-- 描述行 -->
+			<div class="grid-row descs-row">
 				<div
-					class="item-desc flex justify-center"
+					class="grid-cell desc-cell"
 					v-for="item in points"
 					:key="'desc-' + item.time"
 				>
 					<div class="txt">
-						{{ item.desc }}
+						{{ $t(item.desc) }}
 					</div>
 				</div>
 			</div>
@@ -59,34 +67,46 @@
 </template>
 
 <script setup lang="ts">
-	import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+	import { nextTick, onBeforeUnmount, onMounted, ref, computed } from 'vue'
+	import { useI18n } from 'vue-i18n'
 	import { gsap } from 'gsap'
 
+	const { t } = useI18n()
+
 	const containerRef = ref<HTMLElement | null>(null)
+	const timelineRef = ref<HTMLElement | null>(null)
 	const hasAnimated = ref(false)
 
 	const points = ref([
 		{
-			label: 'Select Top 20',
-			time: 'May',
-			desc: 'Submit your design concept, mood board, and initial sketch.'
+			label: 'AwardsPage.timelineApplicationLabel',
+			subLabel: 'AwardsPage.timelineDeadlineLabel',
+			time: 'AwardsPage.timeJul15',
+			desc: 'AwardsPage.applicationDeadlineDesc'
 		},
 		{
-			label: `Top 20`,
-			subLabel: 'Collections  Finalize',
-			time: 'June',
-			desc: 'Complete collections, physical garments, and AiDA process videos due.'
+			label: 'AwardsPage.twentyFinalistsAnnounced',
+			subLabel: 'AwardsPage.announcedLabel',
+			time: 'AwardsPage.timeAug30',
+			desc: 'AwardsPage.twentyFinalistsDesc'
 		},
 		{
-			label: `Top 3`,
-			subLabel: 'Finalists Select',
-			time: 'August',
-			desc: 'Complete collections, physical garments, and AiDA process videos due.'
+			label: 'AwardsPage.finalistSubmission',
+			subLabel: 'AwardsPage.submissionLabel',
+			time: 'AwardsPage.timeSept30',
+			desc: 'AwardsPage.finalistSubmissionDesc'
 		},
 		{
-			label: 'Award  Ceremony',
-			time: 'November',
-			desc: 'Winners revealed with media coverage and live showcase.'
+			label: 'AwardsPage.receivingOutfits',
+			subLabel: 'AwardsPage.fromFinalistsLabel',
+			time: 'AwardsPage.timeOctober',
+			desc: 'AwardsPage.receivingOutfitsDesc'
+		},
+		{
+			label: 'AwardsPage.awardCeremony',
+			subLabel: 'AwardsPage.ceremonyLabel',
+			time: 'AwardsPage.timeNov12',
+			desc: 'AwardsPage.awardCeremonyDesc'
 		}
 	])
 
@@ -98,17 +118,12 @@
 		const timeline = containerRef.value.querySelector('.timeline-point')
 
 		const tl = gsap.timeline()
-		if (title && subtitle) {
-			tl.from([title, subtitle], {
-				scaleX: 0,
-				autoAlpha: 0,
-				transformOrigin: '50% 50%',
-				duration: 0.6,
-				stagger: 0.1,
-				ease: 'power2.out'
-			})
-		}
 
+		// 我们使用一个统一的开始 label，使横线、timeline 裁剪与所有文字同时启动，
+		// 点图标在它们完成后立即开始。
+		tl.addLabel('start')
+
+		// 整体 timeline 的裁剪展开（与 start 同步）
 		if (timeline) {
 			tl.fromTo(
 				timeline,
@@ -117,12 +132,14 @@
 				},
 				{
 					clipPath: 'inset(0 0% 0 0)',
-					duration: 1.6,
+					duration: 1.3,
 					ease: 'power1.out'
-				}
+				},
+				'start'
 			)
 		}
 
+		// 线条动画（与 start 同步）
 		if (line) {
 			tl.from(
 				line,
@@ -132,7 +149,38 @@
 					duration: 1.3,
 					ease: 'power1.out'
 				},
-				'-=1.1'
+				'start'
+			)
+		}
+
+		// 标题与副标题（与 start 同步）
+		if (title && subtitle) {
+			tl.from(
+				[title, subtitle],
+				{
+					scaleX: 0,
+					autoAlpha: 0.5,
+					transformOrigin: '50% 50%',
+					duration: 0.6,
+					stagger: 0.1,
+					ease: 'power2.out'
+				},
+				'start'
+			)
+		}
+
+		// 行内文字（标签、时间、描述、图标）与 start 同步开始
+		const textItems = containerRef.value.querySelectorAll('.grid-cell')
+		if (textItems && textItems.length) {
+			tl.from(
+				textItems,
+				{
+					// autoAlpha: 0.5,
+					duration: 0.7,
+					stagger: 0.08,
+					ease: 'power2.out'
+				},
+				'start'
 			)
 		}
 
@@ -145,8 +193,8 @@
 		await nextTick()
 		if (!containerRef.value) return
 		observer = new IntersectionObserver(
-			(entries) => {
-				entries.forEach((entry) => {
+			entries => {
+				entries.forEach(entry => {
 					if (entry.isIntersecting) {
 						playAnimation()
 					}
@@ -170,7 +218,7 @@
 		background: url('@/assets/images/award/timeline_bg.png') no-repeat;
 		background-size: 100% 100%;
 		position: relative;
-		padding-top: 12.8rem;
+		padding: 12.8rem 0 15.9rem;
 		width: 100%;
 		color: #fff;
 		.timeline-title {
@@ -194,42 +242,45 @@
 			will-change: clip-path;
 			flex: 1;
 			width: 100%;
-			margin-top: 12rem;
-			padding: 0 21.2rem 0 22rem;
+			margin-top: 11rem;
+			padding: 0 13.8rem;
 			position: relative;
 			z-index: 2;
 
-			.labels-row {
-				position: relative;
-				z-index: 2;
-				margin-bottom: 8rem;
-				.item-label {
-					flex: 1;
-					color: #fff;
-					font-family: 'PoppinsBold';
-					font-weight: 600;
-					font-size: 2.8rem;
-					text-align: center;
-					white-space: pre-line;
-					height: 6rem;
-					justify-content: center;
-				}
+			// 主网格布局：5列
+			display: grid;
+			grid-template-columns: repeat(5, 1fr);
+			grid-template-rows: auto auto auto auto;
+			grid-column-gap: 0;
+			grid-row-gap: 0;
+
+			// 所有 grid 子行的通用样式
+			.grid-row {
+				display: grid;
+				grid-template-columns: repeat(5, 1fr);
+				grid-column: 1 / -1;
 			}
 
+			.grid-cell {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				text-align: center;
+			}
+
+			// 图标行
 			.icons-row {
-				margin-bottom: 1.6rem;
+				align-items: center;
+				height: 6.4rem;
 				position: relative;
 				z-index: 2;
-				.point-icon {
-					width: 6.4rem;
-					height: 6.4rem;
-					display: block;
-					margin: 0 auto;
-					z-index: 2;
-				}
+				margin-bottom: 1.6rem;
+
 				.timeline-line {
-					width: calc(100% + 22rem + 21.2rem);
+					position: absolute;
+					top: 50%;
 					left: -22rem;
+					right: -21.2rem;
 					height: 0.15rem;
 					background: linear-gradient(
 						90deg,
@@ -239,39 +290,78 @@
 						rgba(199, 52, 44, 0.762376) 75.96%,
 						rgba(199, 52, 44, 0) 100%
 					);
-					position: absolute;
-					bottom: 50%;
 					transform: translateY(-50%);
 					z-index: 1;
+					pointer-events: none;
+				}
+
+				.icon-cell {
+					position: relative;
+					.point-icon {
+						width: 6.4rem;
+						height: 6.4rem;
+						display: block;
+						position: relative;
+						z-index: 2;
+					}
 				}
 			}
 
+			// 标签行
+			.labels-row {
+				margin-bottom: 8rem;
+				position: relative;
+				z-index: 2;
+				.label-cell {
+					flex-direction: column;
+					color: #fff;
+					font-family: 'PoppinsBold';
+					font-weight: 600;
+					font-size: 2.8rem;
+					white-space: pre-line;
+					justify-content: center;
+					min-height: 6rem;
+				
+					// .sub-label {
+					// 	font-family: 'Arial';
+					// 	font-weight: 400;
+					// 	font-size: 1.4rem;
+					// 	color: rgba(255, 255, 255, 0.8);
+					// 	margin-top: 0.4rem;
+					// }
+				}
+			}
+
+			// 时间行
 			.times-row {
 				margin-bottom: 6rem;
 				z-index: 2;
 				position: relative;
-				.item-time {
-					flex: 1;
+				.time-cell {
 					color: #f95750;
 					font-family: 'Arial';
 					font-weight: 400;
 					font-size: 2.8rem;
 					line-height: 4.5rem;
-					text-align: center;
 				}
 			}
 
+			// 描述行
 			.descs-row {
-				.item-desc {
-					flex: 1;
+				.desc-cell {
 					.txt {
 						font-family: 'Arial';
 						font-weight: 400;
 						font-size: 2rem;
 						text-align: center;
 						color: #e0e0e0;
-						width: 31.2rem;
-						height: 10.2rem;
+						width: 100%;
+						max-width: 31.2rem;
+						min-height: 10.2rem;
+						white-space: pre-line;
+						display: flex;
+						align-items: center;
+						justify-content: center;
 					}
 				}
 			}

src/views/AwardPage/components/UploadStatus.vue

@@ -15,13 +15,16 @@
 					class="progress-icon successful-icon"
 				/>
 			</div>
-			<div class="text">{{ text }}</div>
-      <div class="tips">{{ tips }}</div>
+			<div class="text">{{ $t(text) }}</div>
+      <div class="tips">{{ $t(tips) }}</div>
 		</div>
 	</div>
 </template>
 <script setup lang="ts">
 	import { computed, watch } from 'vue'
+	import { useI18n } from 'vue-i18n'
+
+	const { t } = useI18n()
 	const props = defineProps<{
 		status: string
 		type: 'pdf' | 'video'
@@ -29,16 +32,16 @@
 
 	const textMap: Record<string, string> = {
 		idle: '',
-		uploading: 'Upload in progress…',
-		success: 'Uploaded Successfully',
-		error: 'Upload failed'
+		uploading: 'AwardsPage.uploadInProgress',
+		success:'AwardsPage.uploadSuccess',
+		error: 'AwardsPage.fileUploadFailed'
 	}
 
 	const tips = computed(() => {
 		if (props.type === 'pdf') {
-			return 'PDF file, max 20MB'
+			return 'AwardsPage.pdfFileTip'
 		} else if (props.type === 'video') {
-			return 'Video file (MP4, MOV), 1080p, max 100MB'
+			return 'AwardsPage.videoFileTip'
 		}
 		return ''
 	})

src/views/AwardPage/container.vue

@@ -1,23 +1,26 @@
 <template>
 	<div class="award-container">
-		<div class="header flex align-center space-between">
-			<div class="header-left">
-				<img
-					src="@/assets/images/award/code_create_logo.png"
-					class="logo"
-				/>
-			</div>
-			<div
-				class="header-right flex align-center"
-				@click="handleBtnClick"
-			>
-				<div class="text">{{ btnText }}</div>
-				<img
-					src="@/assets/images/award/arrow.png"
-					alt=""
-					class="arrow"
-				/>
+		<div class="header-wrapper">
+			<div class="header flex align-center space-between">
+				<div class="header-left">
+					<img
+						src="@/assets/images/award/code_create_logo.png"
+						class="logo"
+					/>
+				</div>
+				<div
+					class="header-right flex align-center"
+					@click="handleBtnClick"
+				>
+					<div class="text">{{ btnText }}</div>
+					<img
+						src="@/assets/images/award/arrow.png"
+						alt=""
+						class="arrow"
+					/>
+				</div>
 			</div>
+			<div class="header-placeholder"></div>
 		</div>
 		<router-view />
 		<div class="footer flex space-between align-center">
@@ -80,23 +83,39 @@
 					class="close-icon"
 					@click="handleCloseQRcode"
 				/>
-				<div class="code-title">WeChat Official Account</div>
+				<div class="code-title">{{ $t('AwardsPage.wechatTitle') }}</div>
 				<img
 					src="@/assets/images/award/qrcode.jpg"
 					class="qrcode"
 				/>
-				<div class="tips">Scan the QR code in WeChat</div>
+				<div class="tips">{{ $t('AwardsPage.wechatDesc') }}</div>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { ref, computed, watch } from 'vue'
+	import { ref, computed, watch, onMounted } from 'vue'
 	import { useRoute, useRouter } from 'vue-router'
+	import { useI18n } from 'vue-i18n'
+	import { getCookie } from '@/tool/cookie'
 
 	const route = useRoute()
 	const router = useRouter()
+	const { locale } = useI18n()
+
+	onMounted(() => {
+		// 初始化语言设置
+		const loginLanguage = localStorage.getItem('loginLanguage')
+		if (loginLanguage) {
+			locale.value = loginLanguage
+		} else {
+			const userLanguage = getCookie('language')
+			if (userLanguage) {
+				locale.value = userLanguage
+			}
+		}
+	})
 
 	const showQRcode = ref(false)
 	const handleCloseQRcode = () => {
@@ -107,10 +126,10 @@
 	const btnType = ref<BtnType>('index')
 	const btnText = computed(() => {
 		if (btnType.value === 'index') {
-			return 'Submit your Application'
+			return locale.value === 'CHINESE_SIMPLIFIED' ? '提交申请' : 'Submit your Application'
 		}
 		if (btnType.value === 'form') {
-			return 'Back to Introduction'
+			return locale.value === 'CHINESE_SIMPLIFIED' ? '赛事介绍' : 'Back to Introduction'
 		}
 	})
 
@@ -141,6 +160,8 @@
 		overflow: auto;
 		height: 100vh;
 		// 隐藏滚动条箭头，只显示滚动条本体
+		box-sizing: border-box;
+
 		&::-webkit-scrollbar {
 			display: none;
 			width: 0;
@@ -149,33 +170,44 @@
 		scrollbar-width: none;
 		-ms-overflow-style: none;
 	}
-	.header {
-		height: 8rem;
-		background-color: #232323;
-		padding-left: 21.5rem;
-		padding-right: 8.6rem;
-		.header-left {
-			.logo {
-				width: 13rem;
-				height: 5rem;
-			}
+	.header-wrapper {
+		.header-placeholder {
+			height: 8rem;
 		}
-		.header-right {
-			column-gap: 1rem;
-			cursor: pointer;
-			.text {
-				font-size: 1.6rem;
-				color: #fff;
+		.header {
+			height: 8rem;
+			background-color: #232323;
+			padding-left: 21.5rem;
+			padding-right: 8.6rem;
+			box-sizing: border-box;
+			position: fixed;
+			top: 0;
+			width: 100%;
+			z-index: 9;
+			.header-left {
+				.logo {
+					width: 13rem;
+					height: 5rem;
+				}
 			}
-			.arrow {
-				width: 2.4rem;
-				height: 2.4rem;
+			.header-right {
+				column-gap: 1rem;
+				cursor: pointer;
+				.text {
+					font-size: 1.6rem;
+					color: #fff;
+				}
+				.arrow {
+					width: 2.4rem;
+					height: 2.4rem;
+				}
 			}
 		}
 	}
 	.footer {
 		height: 10rem;
 		padding-left: 21.5rem;
+		box-sizing: border-box;
 		padding-right: 22rem;
 		background-color: #232323;
 		.social-list {

src/views/AwardPage/index.vue

@@ -1,42 +1,46 @@
 <template>
-	<div class="award-page">
+	<div
+		class="award-page"
+		:class="{ 'is-zh': isZh }"
+	>
 		<div class="banner">
+			<video
+				:src="bannerUrl"
+				autoplay
+				muted
+				loop
+				class="banner-video"
+				playsinline
+				webkit-playsinline
+				x5-playsinline
+			></video>
 			<div
 				class="submit-btn flex flex-center"
 				@click="handleSubmitApplication"
 			>
-				<div>Submit your Application</div>
+				<div>{{ $t('AwardsPage.submitApplication') }}</div>
 				<img
 					src="@/assets/images/award/arrow_right.png"
 					alt=""
 					class="arrow"
 				/>
-				<div class="ddl">Application Deadline:15th March 2026</div>
-			</div>
-		</div>
-		<div class="blocks-list flex">
-			<div
-				class="block-item flex flex-col flex-center"
-				v-for="item in blocksList"
-				:key="item.number"
-			>
-				<div class="number">{{ item.number }}</div>
-				<div class="label">{{ item.label }}</div>
-				<div class="line"></div>
+				<div class="ddl">{{ $t('AwardsPage.applicationDeadline') }}</div>
 			</div>
 		</div>
 
+		<Slogan />
 		<Bloom />
 		<TimeLine />
 		<JudgesSection />
-		<PrizesSection />
+		<PrizesSection :is-zh="isZh" />
 		<ApplySection />
 		<SelectionSection />
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { ref } from 'vue'
+	import { ref, computed } from 'vue'
+	import { useI18n } from 'vue-i18n'
 	import { useRouter } from 'vue-router'
 	import JudgesSection from './components/JudgesSection.vue'
 	import SelectionSection from './components/SelectionSection.vue'
@@ -44,31 +48,25 @@
 	import PrizesSection from './components/PrizesSection.vue'
 	import TimeLine from './components/TimeLine.vue'
 	import Bloom from './components/Bloom.vue'
+	import Slogan from './components/Slogan.vue'
+
+	import banner from '@/assets/images/award/banner.mp4'
+	import bannerZh from '@/assets/images/award/banner_chinese.mp4'
 
 	const router = useRouter()
+	const { locale } = useI18n()
+
+	const isZh = computed(() => {
+		return locale.value === 'CHINESE_SIMPLIFIED'
+	})
+
+	const bannerUrl = computed(() => {
+		return isZh.value ? bannerZh : banner
+	})
 
 	const handleSubmitApplication = () => {
 		router.push('/award/contestants')
 	}
-
-	const blocksList = ref([
-		{
-			number: 'NETWORKING\n OPPORTUNITIES',
-			label: 'with international\nmedia and designers'
-		},
-		{
-			number: 'INTERNATIONAL\nMEDIA EXPOSE',
-			label: 'through\nleading outlets'
-		},
-		{
-			number: 'UP TO\nUS$9000',
-			label: 'in total prize\npool awards'
-		},
-		{
-			number: 'TRAVEL\NALLOWANCE',
-			label: 'for finalists to attend\naward ceremony'
-		}
-	])
 </script>
 
 <style lang="less" scoped>
@@ -81,16 +79,22 @@
 		height: 2.4rem;
 	}
 	.banner {
-		height: 108rem;
-		background: url('@/assets/images/award/banner.png') no-repeat;
-		background-size: 100% 100%;
+		height: 100rem;
+		// background: url('@/assets/images/award/banner.png') no-repeat;
+		// background-size: cover;
 		position: relative;
+		.banner-video {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
 		.submit-btn {
 			width: 41rem;
 			height: 6.394rem;
 			line-height: 6.394rem;
 			text-align: center;
 			border-radius: 3.2rem;
+			background-color: rgba(35, 35, 35, 0.7);
 			box-shadow: inset 0 0 1119px 0 rgba(255, 255, 255, 0.3),
 				inset -0.8px -2.4px 1.6px 0.4px rgba(255, 255, 255, 0.1),
 				inset 0.8px 2.4px 1.6px 0 rgba(255, 255, 255, 0.3);
@@ -100,8 +104,8 @@
 			font-size: 2.4rem;
 			column-gap: 3.2rem;
 			position: absolute;
-			top: 23.88rem;
-			left: 51rem;
+			left: 42.1rem;
+			bottom: 15.7rem;
 			backdrop-filter: blur(5px);
 			cursor: pointer;
 			.arrow {
@@ -114,44 +118,25 @@
 				left: 0;
 				text-align: center;
 				width: 41rem;
-				font-family: 'Arial';
-				font-weight: 400;
+				font-family: 'ArialBold';
+				font-weight: 700;
 				font-size: 2rem;
 				line-height: 2.2rem;
+				color: #232323e5;
 			}
 		}
 	}
-	.blocks-list {
-		height: 31.4rem;
-		background: linear-gradient(98.55deg, #232323 18.22%, #898989 101.1%);
 
-		.block-item {
-			flex: 1;
-			height: 100%;
-			color: #fff;
-			position: relative;
-			text-align: center;
-			white-space: pre-line;
-			row-gap: 3rem;
-			.number {
-				font-size: 3.6rem;
-				font-family: 'PoppinsBold';
-				font-weight: 600;
-			}
-			.label {
-				font-size: 2.4rem;
-				font-family: 'Arial';
-				font-weight: 400;
-				letter-spacing: 0.05em;
-			}
-			.line {
-				position: absolute;
-				bottom: 50%;
-				right: 0;
-				transform: translate(0, 50%);
-				width: 0.1rem;
-				height: 27.4rem;
-				background-color: #8d8d8d;
+	.is-zh {
+		.submit-btn {
+			padding: 0 7.5rem;
+			height: 7.8rem;
+			border-radius: 7.74rem;
+			column-gap: 3.8rem;
+			// justify-content: space-between;
+			&,
+			.ddl {
+				width: 35.4rem;
 			}
 		}
 	}

src/views/HomeMain.vue

@@ -615,10 +615,10 @@ export default defineComponent({
               homeMainData.openTypeChild = ''
               homeMainData.openType = ''
             }
-            if ((query?.id || query?.history) && !(await getIdExistToHistory())) {
-              router.push('/home')
-              return
-            }
+            // if ((query?.id || query?.history) && !(await getIdExistToHistory())) {
+            //   router.push('/home')
+            //   return
+            // }
           } else {
             homeMainData.openType = ''
             homeMainData.openTypeChild = ''

src/views/HomeView/library.vue

@@ -1721,9 +1721,8 @@ export default defineComponent({
 				sloganText = this.captionGeneration
 				if(this.selectCode == "Sketchboard"){
 					level2Type = this.selectGenerateList?.[0]?.categoryValue?this.selectGenerateList[0].categoryValue:''
-					if(this.workspace.styleName){
-						sloganText = `${this.workspace.styleName},${sloganText}`
-					}
+					// sloganText = `${this.workspace.styleName || 'all'},${sloganText}`
+					sloganText = `'all',${sloganText}`
 				}else if(this.selectCode == "Printboard"){
 					level2Type = this.scene?.value
 					if(level2Type == 'Slogan' && this.captionGeneration == ''){

src/views/Register.vue

@@ -85,7 +85,7 @@ import {
 import { setCookie, getCookie, WriteCookie, clonAllCookie } from '@/tool/cookie'
 import { Https } from '@/tool/https'
 import { useStore } from 'vuex'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import signUp from '@/component/mainPage/signUp/index.vue'
 export default defineComponent({
   components: {
@@ -93,6 +93,7 @@ export default defineComponent({
   },
   setup() {
     const store = useStore()
+	const route = useRoute();
     const router = useRouter()
     let data = reactive({
       homeRecommendMax: null,
@@ -148,7 +149,14 @@ export default defineComponent({
 
     onMounted(() => {
       updataIsMoblie()
-      const savedLang = localStorage.getItem('loginLanguage')
+      let savedLang = localStorage.getItem('loginLanguage') || 'ENGLISH'
+	  if(route?.params?.lang == 'cn'){
+		savedLang = 'CHINESE_SIMPLIFIED'
+        localStorage.setItem('loginLanguage', savedLang)
+	  }else if(route?.params?.lang == 'en'){
+		savedLang = 'ENGLISH'
+        localStorage.setItem('loginLanguage', savedLang)
+	  }
       if (savedLang) {
         data.isSelectSuccessively = savedLang === 'CHINESE_SIMPLIFIED'
       }