1

.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',
+};

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

@@ -4,13 +4,41 @@
 			"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",
 			"imgUrl": "/image/events/Fashion-Award-2024.png"
+		},
+		{
+			"id": 3,
+			"title": "AiDA Global Design Awards 2026",
+			"imgUrl": "/image/events/award-poster.gif"
 		}
 	],
 	"eventsItem": [
+		{
+			"id": 3,
+			"title": "AiDA Global Design Awards 2026",
+			"imgUrl": "/image/events/award-poster.gif",
+			"tips": "For inquiries: awards2026@code-create.com.hk",
+			"textList": [
+				{
+					"paragraph": [
+						{
+							"text": "Click the “View Details” button for more information and to join the competition! The AiDA Global Design Award 2026 is an international design competition hosted by Code‑Create, a globally leading AI fashion solutions provider, celebrating the future of creativity powered by artificial intelligence. Open to designers worldwide the competition brings together global talent, empowering AI as a creative partner—pushing fashion beyond traditional boundaries and unlocking new possibilities where technology amplifies human imagination."
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "Participants have the opportunity to compete for cash prizes totaling up to US$9,000, gain global media exposure showcased by top international platforms, and connect with designers and industry leaders worldwide. Finalists will also attend an exclusive award ceremony in Hong Kong, with travel allowance, allowing them to showcase their talent, network with professionals, and celebrate their achievements on an international stage."
+						}
+					]
+				}
+			]
+		},
 		{
 			"id": 1,
 			"title": "Just post your design work, you could have the chance to come to Hong Kong and interact with industry leaders face-to-face！",
@@ -22,45 +50,53 @@
 							"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"
@@ -80,7 +116,8 @@
 							"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

@@ -4,13 +4,41 @@
 			"id": 1,
 			"title": "什么？只要发布设计作品就有机会来香港与大佬面对面交流？！",
 			"imgUrl": "/image/events/workshop-Cn.jpg"
-      },{
+		},
+		{
 			"id": 2,
 			"title": "AiDA X SFT AI时尚设计比赛2024",
 			"imgUrl": "/image/events/Fashion-Award-2024.png"
+		},
+		{
+			"id": 3,
+			"title": "AiDA全球设计奖 2026",
+			"imgUrl": "/image/events/award-poster-zh.gif"
 		}
 	],
 	"eventsItem": [
+		{
+			"id": 3,
+			"title": "AiDA全球设计奖 2026",
+			"imgUrl": "/image/events/award-poster-zh.gif",
+			"tips": "如有疑问，请联系：awards2026@code-create.com.hk",
+			"textList": [
+				{
+					"paragraph": [
+						{
+							"text": "秉承推动 AI 赋能创意设计的初衷，Code‑Create 举办了「AiDA 全球设计大奖 2026」，面向来全球的设计师，鼓励大家探索 AI 与时尚设计的无限可能，突破传统界限，释放科技与想象力的创新潜能。点击“查看详情”按钮获取更多比赛信息，抓住成为 AI 时尚先锋的机会吧！"
+						}
+					]
+				},
+				{
+					"paragraph": [
+						{
+							"text": "参赛者将有机会赢取总奖金 9,000 美元，作品还将获得国际媒体展示机会，并与全球设计师和行业领袖建立联系。入围决赛者将受邀参加在香港举办的 专属颁奖典礼，主办方提供差旅津贴，让设计师在国际舞台展示才华、拓展人脉，并共同庆祝创意成果。"
+						}
+					]
+				}
+			]
+		},
 		{
 			"id": 1,
 			"title": "什么？只要发布设计作品就有机会来香港与大佬面对面交流？！",
@@ -22,45 +50,53 @@
 							"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"
@@ -80,7 +116,8 @@
 							"text": "秉承着激发学生使用AI进行时尚设计的创新能力的初衷，Code-Create和香港理工大学时装及纺织学院（SFT）共同举办了“AiDA X SFT AI时尚设计比赛2024”让学生们在比赛中获得宝贵的AiDA实践经验，为未来的时尚设计行业打下了坚实的基础，成为时尚界的AI先锋。"
 						}
 					]
-			},{
+				},
+				{
 					"paragraph": [
 						{
 							"text": " 此次比赛面向全体SFT 学生，最终获奖者将赢取丰厚奖金（最高可达2万港币），获得在BESFXXK的实习机会（将与著名设计师Lim Jae Hyuk先生合作设计BESFXXK 系列，该系列将在纽约时装周和巴黎时装周上展出）及更多惊喜哦！扫描二维码获取更多比赛信息。"

src/component/Account/message/system.vue

@@ -2,21 +2,36 @@
 	<div class="account_systemMessage">
 		<div class="account_generalMessage_title modal_title_text">
 			<!-- <span>系统消息</span> -->
-			<div class="account_generalMessage_title_setting" @click="allRead">{{$t('account.AllRead')}}</div>
+			<div class="account_generalMessage_title_setting" @click="allRead">
+				{{ $t("account.AllRead") }}
 			</div>
-		<div class="account_generalMessage_item modal_title_text" v-for="item in dataList" :key="item.id" @click="setRead(item)">
+		</div>
+		<div
+			class="account_generalMessage_item modal_title_text"
+			v-for="item in dataList"
+			:key="item.id"
+			@click="setRead(item)"
+		>
 			<a-badge :dot="item.isRead == 0"></a-badge>
 			<div class="account_generalMessage_item_title">
-				<div class="account_generalMessage_item_title_text" :title="item.content">{{ item.content.title }}</div>
+				<div class="account_generalMessage_item_title_text" :title="item.content">
+					{{ item.content.title }}
+				</div>
 				<div class="modal_title_text_intro">{{ item.createTime }}</div>
 			</div>
 			<div class="modal_title_text_intro">
 				{{ item.content.content }}
-				<span v-if="item.content.link" class="account_generalMessage_item_link">{{ item.content.link }}</span>
+				<span v-if="item.content.link" class="account_generalMessage_item_link">{{
+					item.content.link
+				}}</span>
 			</div>
 		</div>
-		<div class="account_generalMessage_item  modal_title_text" style="display:flex;justify-content: center;" v-if="dataList.length == 0 && isNoData">
+		<div
-			{{$t('account.dataNull')}}
+			class="account_generalMessage_item modal_title_text"
+			style="display: flex; justify-content: center"
+			v-if="dataList.length == 0 && isNoData"
+		>
+			{{ $t("account.dataNull") }}
 		</div>
 		<div class="page_loading_box" v-show="!isNoData">
 			<span class="page_loading" ref="loadingDom" v-show="!isShowMark"></span>
@@ -27,34 +42,44 @@
 	</div>
 </template>
 <script lang="ts">
-import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
+import {
-import { Https } from "@/tool/https";
+	defineComponent,
-import { useRouter,useRoute } from 'vue-router'
+	computed,
-import { useStore } from "vuex";
+	ref,
-import { useI18n } from 'vue-i18n'
+	reactive,
+	nextTick,
+	toRefs,
+	createVNode,
+	onMounted
+} from "vue"
+import { Https } from "@/tool/https"
+import { useRouter, useRoute } from "vue-router"
+import { useStore } from "vuex"
+import { useI18n } from "vue-i18n"
+import { isValidUrl } from "@/tool/util"
 export default defineComponent({
-    components:{
+	components: {},
-    },
 	// emits:['putListData'],
-    props:['setReadStatus','setAllmessage','getHistory'],
+	props: ["setReadStatus", "setAllmessage", "getHistory"],
 	setup(prop, { emit }) {
 		const router = useRouter()
-        const store = useStore();
+		const store = useStore()
 		let accountMessage = reactive({
 			dataList: [],
 			page: 1,
 			size: 10,
 			isNoData: false,
-			isShowMark: false,
+			isShowMark: false
 		})
 		let loadingDom: any = ref(null)
 		let setmessageList = () => {
 			accountMessage.isShowMark = true
 			let data = {
 				page: accountMessage.page,
-				size: accountMessage.size,
+				size: accountMessage.size
 			}
-			prop.getHistory(data).then((rv:any)=>{
+			prop.getHistory(data)
+				.then((rv: any) => {
 					accountMessage.isShowMark = false
 
 					if (rv.content.length == 0) {
@@ -62,58 +87,67 @@ export default defineComponent({
 					} else {
 						rv.content.forEach((item: any) => {
 							item.content = JSON.parse(item.content)
-					});
+						})
 						accountMessage.dataList.push(...rv.content)
 					}
-			}).catch(() => {
+				})
+				.catch(() => {
 					accountMessage.isShowMark = false
 					accountMessage.isNoData = true
 				})
 		}
 		let setRead = (item: any) => {
-			prop.setReadStatus(item).then((rv:any)=>{
+			let content = item.content.content
+			if (isValidUrl(content)) {
+				if (import.meta.env.VITE_APP_BASE_URL === "https://develop.api.aida.com.hk") {
+					content += "&env=dev"
+				}
+				window.open(content, "_blank")
+			}
+
+			prop.setReadStatus(item)
+				.then((rv: any) => {
 					item.isRead = 1
-			}).catch((err:any)=>{
 				})
+				.catch((err: any) => {})
 		}
 		let allRead = () => {
 			// emit('setAllmessage')
-			prop.setAllmessage().then(()=>{
+			prop.setAllmessage()
+				.then(() => {
 					accountMessage.dataList.forEach((item: any) => {
 						item.isRead = 1
 					})
-			}).catch((err:any)=>{
 				})
+				.catch((err: any) => {})
 		}
 		// provide('exhibitionList',exhibitionList)
 		onMounted(() => {
 			accountMessage.isNoData = false
 			accountMessage.page = 0
-			let imgParent:any = document.querySelector('.account_systemMessage .page_loading')
+			let imgParent: any = document.querySelector(".account_systemMessage .page_loading")
 			new IntersectionObserver(
 				(entries, observer) => {
 					// 如果不是相交，则直接返回
 					// console.log(entries[0]);
-					if (!entries[0].intersectionRatio) return;
+					if (!entries[0].intersectionRatio) return
 					accountMessage.page += 1
 					setmessageList()
-				},
+				}
 				// { root:worksPage }
-			).observe(loadingDom.value);
+			).observe(loadingDom.value)
 		})
 		return {
 			...toRefs(accountMessage),
 			setmessageList,
 			setRead,
 			allRead,
-		   loadingDom,
+			loadingDom
 		}
 	},
 	data() {
-        return{
+		return {}
-            
 	}
-    },
 })
 </script>
 <style lang="less" scoped>
@@ -133,7 +167,6 @@ export default defineComponent({
 			}
 			.modal_title_text_intro {
 				margin-left: 4rem;
-				
 			}
 		}
 	}

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) => {
+                        filterData.totalPayer = rv.totalAmount;
-                            const value = item && item.status === 'Success' ? parseFloat(item.payerTotal) : 0;
+                        // filterData.totalPayer = rv.content.reduce((total: number, item: any) => {
-                            return total + (isNaN(value) ? 0 : value);
+                        //     const value = item && item.status === 'Success' ? parseFloat(item.payerTotal) : 0;
-                        }, 0);
+                        //     return total + (isNaN(value) ? 0 : value);
+                        // }, 0);
 
                         // this.workspaceItem.position = this.singleTypeList[0].label
                     }

src/component/Administrator/allUser.vue

@@ -8,16 +8,11 @@
 						style="width: 250px"
 						class="range_picker"
 						v-model:value="rangePickerValue"
-                        :placeholder="[
+						:placeholder="[$t('HistoryPage.StartDate'), $t('HistoryPage.EndDate')]"
-                            $t('HistoryPage.StartDate'),
-                            $t('HistoryPage.EndDate'),
-                        ]"
 						valueFormat="YYYY-MM-DD"
 					>
 						<template #suffixIcon>
-                            <span
+							<span class="icon iconfont range_picker_icon icon-rili"></span>
-                                class="icon iconfont range_picker_icon icon-rili"
-                            ></span>
 						</template>
 					</a-range-picker>
 				</div>
@@ -63,38 +58,50 @@
 						show-search
 					></a-select>
 				</div>
+				<div class="admin_state_item">
+					<span>Orgnization:</span>
+					<a-select
+						v-model:value="organizationId"
+						placeholder="Select the organization"
+						allow-clear
+						style="width: 250px"
+						@popupScroll="handleOrganizationScroll"
+					>
+						<a-select-option
+							v-for="item in organizationOptions"
+							:key="item.id"
+							:value="item.id"
+						>
+							{{ item.name }}
+						</a-select-option>
+					</a-select>
+				</div>
 			</div>
 			<div class="admin_search">
-                <div class="admin_search_item" @click="searchHistoryList" :style="{height:isAwayOrUnfold?'4rem':''}">
+				<div
+					class="admin_search_item"
+					@click="searchHistoryList"
+					:style="{ height: isAwayOrUnfold ? '4rem' : '' }"
+				>
 					Search
 				</div>
-                <div class="admin_search_item" @click="addhHistoryList">
+				<div class="admin_search_item" @click="addhHistoryList">Add</div>
-                    Add
-                </div>
 			</div>
 			<div class="admin_state_list">
-                <div
+				<div class="admin_state_list_item" @click="lastGeTrialList('year')">
-                    class="admin_state_list_item"
-                    @click="lastGeTrialList('year')"
-                >
 					Nearly a year
 				</div>
-                <div
+				<div class="admin_state_list_item" @click="lastGeTrialList('month')">
-                    class="admin_state_list_item"
-                    @click="lastGeTrialList('month')"
-                >
 					Last month
 				</div>
-                <div
+				<div class="admin_state_list_item" @click="lastGeTrialList('week')">Last week</div>
-                    class="admin_state_list_item"
-                    @click="lastGeTrialList('week')"
-                >
-                    Last week
-                </div>
 			</div>
 		</div>
 		<div class="awayOrUnfold" :class="{ active: isAwayOrUnfold }">
-			<span class="icon iconfont menu_icon icon-xiala" @click="()=>isAwayOrUnfold = !isAwayOrUnfold"></span>
+			<span
+				class="icon iconfont menu_icon icon-xiala"
+				@click="() => (isAwayOrUnfold = !isAwayOrUnfold)"
+			></span>
 		</div>
 		<div class="admin_table_content" ref="historyTable">
 			<a-table
@@ -104,24 +111,19 @@
 				:data-source="dataList"
 				:scroll="{ y: historyTableHeight }"
 				@change="changePage"
-				:showSorterTooltip='false'
+				:showSorterTooltip="false"
 				:pagination="{
 					showSizeChanger: true,
 					current: currentPage,
 					pageSize: pageSize,
 					total: total,
 					showQuickJumper: true,
-                    bordered: false,
+					bordered: false
 				}"
 			>
 				<template #bodyCell="{ column, text, record, index }">
 					<div class="operate_list" v-if="column?.Operations">
-                        <div
+						<div class="operate_item" @click="setAagree(record)">Edit</div>
-                            class="operate_item"
-                            @click="setAagree(record)"
-                        >
-                            Edit
-                        </div>
 						<!-- <div
 							class="operate_item"
 							@click="deleteGroup(record, index)"
@@ -132,24 +134,19 @@
 				</template>
 			</a-table>
 		</div>
-		<allUserPoerationsVue ref="allUserPoerationsVue" @searchHistoryList="searchHistoryList"></allUserPoerationsVue>
+		<allUserPoerationsVue
+			ref="allUserPoerationsVue"
+			@searchHistoryList="searchHistoryList"
+		/>
 	</div>
 </template>
 <script lang="ts">
-import {
+import { defineComponent, ref, createVNode, computed, reactive, toRefs, onMounted } from "vue"
-    defineComponent,
+import { formatTime } from "@/tool/util"
-    ref,
+import { useStore } from "vuex"
-    createVNode,
+import { Https } from "@/tool/https"
-    computed,
+import allUserPoerationsVue from "./allUserPoerations.vue"
-    reactive,
+import SelectUser from "@/component/common/SelectUser.vue"
-    toRefs,
-    onMounted,
-} from "vue";
-import { formatTime } from "@/tool/util";
-import { useStore } from "vuex";
-import { Https } from "@/tool/https";
-import allUserPoerationsVue from "./allUserPoerations.vue";
-import SelectUser from '@/component/common/SelectUser.vue'
 export default defineComponent({
 	components: { allUserPoerationsVue, SelectUser },
 	setup() {
@@ -159,7 +156,7 @@ export default defineComponent({
 			tableLoading: false,
 			allCountry: [],
 			isAwayOrUnfold: false
-        });
+		})
 		let filterData: any = reactive({
 			rangePickerValue: [],
 			currentPage: 1,
@@ -172,40 +169,41 @@ export default defineComponent({
 			occupation: "",
 			systemUser: "",
 			order: "", //'Ascending  升序 Descending 降序'
-			orderBy:'',
+			orderBy: "",
 			userName: "",
-        });
+			organizationId: null
+		})
 		let state: any = ref([
 			{
 				label: "all",
-                value: "",
+				value: ""
 			},
 			{
-				label:'visitor',
+				label: "visitor",
-				value:'0',
+				value: "0"
 			},
 			{
-				label:'yearly',
+				label: "yearly",
-				value:'1',
+				value: "1"
 			},
 			{
-				label:'monthly',
+				label: "monthly",
-				value:'2',
+				value: "2"
 			},
 			{
-				label:'trial',
+				label: "trial",
-				value:'3',
+				value: "3"
 			},
 			{
 				label: "userInEvent",
-                value: "4",
+				value: "4"
 			},
 			{
 				label: "Edu Admin",
-                value: "7",
+				value: "7"
-            },
+			}
-        ]);
+		])
-        let renameData: any = ref({}); //修改名字选中的数据
+		let renameData: any = ref({}) //修改名字选中的数据
 		const columns: any = computed(() => {
 			return [
 				{
@@ -215,7 +213,7 @@ export default defineComponent({
 					key: "id",
 					width: 100,
 					fixed: "left",
-					sorter: true,
+					sorter: true
 				},
 				{
 					title: "Email",
@@ -246,7 +244,7 @@ export default defineComponent({
 					dataIndex: "language",
 					key: "language",
 					width: 100,
-					ellipsis:true,
+					ellipsis: true
 				},
 				{
 					title: "Valid Start Time",
@@ -256,12 +254,12 @@ export default defineComponent({
 					width: 200,
 					ellipsis: true,
 					customRender: (record: any) => {
-						let time = ''
+						let time = ""
 						if (record.text) {
-							time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
+							time = formatTime(record.text / 1000, "YYYY-MM-DD hh:mm:ss")
 						}
 						return time
-                    },
+					}
 				},
 				{
 					title: "Valid End Time",
@@ -271,19 +269,19 @@ export default defineComponent({
 					width: 200,
 					ellipsis: true,
 					customRender: (record: any) => {
-						let time = ''
+						let time = ""
 						if (record.text) {
-							time = formatTime(record.text / 1000, 'YYYY-MM-DD hh:mm:ss')
+							time = formatTime(record.text / 1000, "YYYY-MM-DD hh:mm:ss")
 						}
 						return time
-                    },
+					}
 				},
 				{
 					title: "Country or Region",
 					align: "center",
 					dataIndex: "country",
 					key: "country",
-					width:200,
+					width: 200
 				},
 				{
 					title: "Create Date",
@@ -291,7 +289,7 @@ export default defineComponent({
 					dataIndex: "createDate",
 					key: "createDate",
 					width: 200,
-					sorter: true,
+					sorter: true
 				},
 				{
 					title: "Is Beginner",
@@ -301,21 +299,21 @@ export default defineComponent({
 					width: 80,
 					ellipsis: true,
 					customRender: (record: any) => {
-                        let str;
+						let str
 						if (record.value == 1) {
-                            str = "Yes";
+							str = "Yes"
 						} else {
-                            str = "No";
+							str = "No"
+						}
+						return str
 					}
-                        return str;
-                    },
 				},
 				{
-                    title: 'Machine Room Ip',
+					title: "Machine Room Ip",
 					align: "center",
 					dataIndex: "browserIdentifiers",
 					key: "browserIdentifiers",
-					width:200,
+					width: 200
 				},
 				{
 					title: "Credits",
@@ -327,10 +325,10 @@ export default defineComponent({
 					dataIndex: "credits",
 					key: "credits",
 					width: 100,
-					sorter: true,
+					sorter: true
 				},
 				{
-                    title: 'User Type',
+					title: "User Type",
 					align: "center",
 					// width: 150,
 					// minWidth: 100,
@@ -340,22 +338,22 @@ export default defineComponent({
 					key: "systemUser",
 					width: 100,
 					customRender: (record: any) => {
-                        let str;
+						let str
 						if (record.value == 0) {
-                            str = "visitor";
+							str = "visitor"
 						} else if (record.value == 1) {
-                            str = "yearly";
+							str = "yearly"
 						} else if (record.value == 2) {
-                            str = "monthly";
+							str = "monthly"
 						} else if (record.value == 3) {
-                            str = "trial";
+							str = "trial"
 						} else if (record.value == 4) {
-                            str = "userInEvent";
+							str = "userInEvent"
 						} else if (record.value == 7) {
-                            str = "Edu Admin";
+							str = "Edu Admin"
+						}
+						return str
 					}
-                        return str;
-                    },
 				},
 				{
 					title: "Operations",
@@ -364,58 +362,58 @@ export default defineComponent({
 					align: "center",
 					fixed: "right",
 					// slots:{customRender:'action'}
-                    Operations: true,
+					Operations: true
-                },
+				}
-            ];
+			]
-        });
+		})
 		//改变页码
 		let changePage = (e: any, filters: any, sorter: any) => {
-            filterData.currentPage = e.current;
+			filterData.currentPage = e.current
-            filterData.pageSize = e.pageSize;
+			filterData.pageSize = e.pageSize
 			if (sorter.order) {
-				if(sorter.columnKey == 'id'){
+				if (sorter.columnKey == "id") {
-					filterData.orderBy = 'id'
+					filterData.orderBy = "id"
 				} else if (sorter.columnKey == "createDate") {
-					filterData.orderBy = 'time'
+					filterData.orderBy = "time"
 				} else if (sorter.columnKey == "credits") {
-					filterData.orderBy = 'credits'
+					filterData.orderBy = "credits"
 				}
 			}
 			if (sorter.order) {
-				filterData.order = sorter.order == "descend" ? "Descending" : "Ascending";
+				filterData.order = sorter.order == "descend" ? "Descending" : "Ascending"
 			} else {
-				filterData.order = ''
+				filterData.order = ""
+			}
+			gettrialList()
 		}
-            gettrialList();
-        };
 
 		//查询列表
 		let searchHistoryList = () => {
-            filterData.currentPage = 1;
+			filterData.currentPage = 1
-            gettrialList();
+			gettrialList()
-        };
+		}
 		let clearHistoryList = () => {
-            filterData.rangePickerValue = [],
+			;((filterData.rangePickerValue = []),
-			filterData.currentPage = 1,
+				(filterData.currentPage = 1),
-			filterData.pageSize = 10,
+				(filterData.pageSize = 10),
-			filterData.total = 0,
+				(filterData.total = 0),
-			filterData.country = "",
+				(filterData.country = ""),
-			filterData.email = "",
+				(filterData.email = ""),
-			filterData.userType = "",
+				(filterData.userType = ""),
-			filterData.ids = [],
+				(filterData.ids = []),
-			filterData.occupation = "",
+				(filterData.occupation = ""),
-			filterData.order = "", //'Ascending  升序 Descending 降序'
+				(filterData.order = ""), //'Ascending  升序 Descending 降序'
-			filterData.orderBy = "", //'Ascending  升序 Descending 降序'
+				(filterData.orderBy = ""), //'Ascending  升序 Descending 降序'
-			filterData.systemUser = "",
+				(filterData.systemUser = ""),
-			filterData.userName = "";
+				(filterData.userName = ""))
-        };
+		}
 		let setHistoryListData = () => {
 			let startDate: any = filterData.rangePickerValue?.[0]
 				? filterData.rangePickerValue[0] + " " + "00:00:00"
-                : "";
+				: ""
 			let endDate: any = filterData.rangePickerValue?.[1]
 				? filterData.rangePickerValue[1] + " " + "23:59:59"
-                : "";
+				: ""
 			let data = {
 				endTime: endDate,
 				startTime: startDate,
@@ -430,63 +428,118 @@ export default defineComponent({
 				order: filterData.order,
 				orderBy: filterData.orderBy,
 				userName: filterData.userName,
-            };
+				organizationId: filterData.organizationId
-            return data;
+			}
-        };
+			return data
+		}
 		//获取列表
 		let gettrialList = () => {
-            filter.tableLoading = true;
+			filter.tableLoading = true
-            let data = setHistoryListData();
+			let data = setHistoryListData()
-            Https.axiosPost(Https.httpUrls.getUserInfo, data).then(
+			Https.axiosPost(Https.httpUrls.getUserInfo, data).then((rv: any) => {
-                (rv: any) => {
 				if (rv) {
 					// this.dataList = rv
-                        filter.dataList = rv.records;
+					filter.dataList = rv.records
-                        filterData.total = rv.total;
+					filterData.total = rv.total
-                        filter.tableLoading = false;
+					filter.tableLoading = false
 
 					// this.workspaceItem.position = this.singleTypeList[0].label
 				}
+			})
 		}
-            );
-        };
 		let lastGeTrialList = (str: string) => {
-            clearHistoryList();
+			clearHistoryList()
-            let currentDate = new Date();
+			let currentDate = new Date()
-            let currentTimestamp = Math.floor(currentDate.getTime() / 1000);
+			let currentTimestamp = Math.floor(currentDate.getTime() / 1000)
 			// 计算30天前的时间戳
-            let thirtyDaysAgoTimestamp;
+			let thirtyDaysAgoTimestamp
 			if (str == "year") {
-                thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60;
+				thirtyDaysAgoTimestamp = currentTimestamp - 360 * 24 * 60 * 60
 			} else if (str == "month") {
-                thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60;
+				thirtyDaysAgoTimestamp = currentTimestamp - 30 * 24 * 60 * 60
 			} else if (str == "week") {
-                thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60;
+				thirtyDaysAgoTimestamp = currentTimestamp - 7 * 24 * 60 * 60
+			}
+			filterData.rangePickerValue[0] = formatTime(thirtyDaysAgoTimestamp, "YYYY-MM-DD")
+			gettrialList()
 		}
-            filterData.rangePickerValue[0] = formatTime(
-                thirtyDaysAgoTimestamp,
-                "YYYY-MM-DD"
-            );
-            gettrialList();
-        };
 		let filterOption = (input: any, option: any) => {
 			// 使用 option.label 进行搜索
-            return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+			return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
-        };
+		}
 		let addhHistoryList = () => {
-			allUserPoerationsVue.value.init('Add','')
+			allUserPoerationsVue.value.init("Add", "")
-		};
+		}
 		let allUserPoerationsVue = ref()
 		let setAagree = (data: any) => {
-			allUserPoerationsVue.value.init('Edit',data)
+			allUserPoerationsVue.value.init("Edit", data)
 		}
+
+		const organizationOptions = ref([])
+		const organizationParams = reactive({
+			page: 1,
+			size: 10,
+			total: 0
+		})
+		const organizationLoading = ref(false)
+		const getOrganizationList = async (isLoadMore = false) => {
+			console.log("111111")
+			if (organizationLoading.value) return
+			if (isLoadMore) {
+				const loaded = organizationParams.page * organizationParams.size
+				if (organizationParams.total && loaded >= organizationParams.total) return
+				organizationParams.page += 1
+			} else {
+				organizationParams.page = 1
+				organizationOptions.value = []
+			}
+			organizationLoading.value = true
+			try {
+				const { total, ...requestParams } = organizationParams
+				const rv: any = await Https.axiosPost(
+					Https.httpUrls.queryOrganization,
+					requestParams
+				)
+				if (rv) {
+					const newRecords = rv.records || []
+					// 遍历新数据，如果已存在则覆盖，不存在则追加
+					newRecords.forEach((newOrg: any) => {
+						const newOrgId = String(newOrg.id)
+						const existingIndex = organizationOptions.value.findIndex(
+							(org: any) => String(org.id) === newOrgId
+						)
+						if (existingIndex !== -1) {
+							// 如果已存在，用新数据覆盖旧项
+							organizationOptions.value[existingIndex] = newOrg
+						} else {
+							// 如果不存在，追加到末尾
+							organizationOptions.value.push(newOrg)
+						}
+					})
+					organizationParams.total = rv.total || 0
+				}
+			} finally {
+				organizationLoading.value = false
+			}
+		}
+
+		const handleOrganizationScroll = (e: any) => {
+			const target = e?.target
+			if (!target) return
+			const nearBottom = target.scrollTop + target.clientHeight >= target.scrollHeight - 20
+			if (nearBottom) {
+				getOrganizationList(true)
+			}
+		}
+
 		onMounted(() => {
-			let allCountry: any = sessionStorage.getItem("allCountry");
+			let allCountry: any = sessionStorage.getItem("allCountry")
 			if (allCountry) {
-                filter.allCountry = JSON.parse(allCountry);
+				filter.allCountry = JSON.parse(allCountry)
 			}
-            gettrialList();
+			gettrialList()
-        });
+			getOrganizationList()
+		})
 		return {
 			...toRefs(filter),
 			...toRefs(filterData),
@@ -501,22 +554,26 @@ export default defineComponent({
 			filterOption,
 			allUserPoerationsVue,
 			setAagree,
-        };
+			handleOrganizationScroll,
+			getOrganizationList,
+			organizationOptions,
+			organizationParams
+		}
 	},
 	data() {
 		return {
 			historyTableHeight: 0,
 			handleResizeColumn: (w: any, col: any) => {
-                col.width = w;
+				col.width = w
-            },
+			}
-        };
+		}
 	},
 	mounted() {
-        let historyTable: any = this.$refs.historyTable;
+		let historyTable: any = this.$refs.historyTable
-        this.historyTableHeight = historyTable.clientHeight - 200;
+		this.historyTableHeight = historyTable.clientHeight - 200
 	},
-    methods: {},
+	methods: {}
-});
+})
 </script>
 <style lang="less" scoped>
 .admin_page .admin_table_search .admin_state {
@@ -524,6 +581,5 @@ export default defineComponent({
 	flex-wrap: wrap;
 }
 .admin_page {
-	
 }
 </style>

src/component/Administrator/allUserPoerations.vue

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

src/component/Administrator/globalAwardPopularity.vue

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

src/component/Administrator/subscriptionPlan.vue

@@ -5,8 +5,8 @@
 				class="search-form"
 				layout="inline"
 				:model="searchForm"
-        :label-col="{ style: { width: '12rem' } }"
+				:label-col="{ style: { width: '14rem' } }"
-        :wrapper-col="{ style: { width: '22rem' } }"
+				:wrapper-col="{ style: { width: '20rem' } }"
 			>
 				<a-form-item label="ID">
 					<a-input v-model:value="searchForm.id" allow-clear placeholder="Input the id" />
@@ -72,7 +72,7 @@
 						:options="countryList"
 					/>
 				</a-form-item>
-        <a-form-item>
+				<a-form-item class="search-form__actions">
 					<a-space>
 						<a-button type="primary" @click="handleSearch">Search</a-button>
 						<a-button @click="handleReset">Reset</a-button>
@@ -92,6 +92,7 @@
 					:loading="tableLoading"
 					:bordered="false"
 					row-key="id"
+					:customRow="customPlanRow"
 					@change="changePage"
 					@resizeColumn="handleResizeColumn"
 					:scroll="{ y: historyTableHeight }"
@@ -107,10 +108,11 @@
 					<template #bodyCell="{ column, record }">
 						<template
 							v-if="
-                column.key === 'currentPeriodStart' || column.key === 'currentPeriodEnd'
+								column.key === 'currentPeriodStart' ||
+								column.key === 'currentPeriodEnd'
 							"
 						>
-              {{ formatTime(record[column.key], 'YYYY-MM-DD hh:mm:ss') }}
+							{{ formatTime(record[column.key], "YYYY-MM-DD hh:mm:ss") }}
 						</template>
 
 						<template v-if="column.key === 'status'">
@@ -120,15 +122,15 @@
 						</template>
 
 						<template v-else-if="column.key === 'actions'">
-              <a-space>
+							<a-space class="plan-row-actions" @click.stop>
-                <a @click="openEdit(record)">Edit</a>
+								<a @click.stop="openEdit(record)">Edit</a>
 								<a-popconfirm
 									title="Confirm to delete this subscription plan?"
 									ok-text="Confirm"
 									cancel-text="Cancel"
 									@confirm="removePlan(record.id)"
 								>
-                  <a class="danger-text">Delete</a>
+									<a class="danger-text" @click.stop>Delete</a>
 								</a-popconfirm>
 							</a-space>
 						</template>
@@ -137,6 +139,50 @@
 			</div>
 		</a-card>
 
+		<a-modal
+			v-model:visible="userInfoModalVisible"
+			title="User Info"
+			width="80%"
+			:footer="null"
+			:destroy-on-close="true"
+			class="user-info-modal"
+		>
+			<a-table
+				:columns="userInfoColumns"
+				:data-source="userInfoList"
+				:loading="userInfoLoading"
+				:pagination="{
+					showSizeChanger: true,
+					current: userInfoPage.current,
+					pageSize: userInfoPage.size,
+					total: userInfoPage.total,
+					showQuickJumper: true,
+					bordered: false
+				}"
+				row-key="id"
+				:scroll="{ x: 1280, y: 420 }"
+				@change="changeUserInfoPage"
+			>
+				<template #bodyCell="{ column, record }">
+					<template
+						v-if="
+							column.key === 'validStartTime' ||
+							column.key === 'validEndTime' ||
+							column.key === 'createDate'
+						"
+					>
+						{{ formatUserTime(record[column.key]) }}
+					</template>
+					<template v-else-if="column.key === 'systemUser'">
+						{{ getSystemUserLabel(record.systemUser) }}
+					</template>
+					<template v-else-if="column.key === 'isBeginner'">
+						{{ record.isBeginner == 1 ? "Yes" : "No" }}
+					</template>
+				</template>
+			</a-table>
+		</a-modal>
+
 		<div class="subscriptionPlanModal" ref="subscriptionPlanModal"></div>
 		<a-modal
 			class="subscriptionPlan_modal generalModel"
@@ -213,7 +259,10 @@
 							@select="handleOrganizationSelect"
 							@change="handleOrganizationChange"
 						>
-              <a-select-option value="ADD_ORGANIZATION" class="add-organization-option">
+							<a-select-option
+								value="ADD_ORGANIZATION"
+								class="add-organization-option"
+							>
 								+ Create Organization
 							</a-select-option>
 							<a-select-option
@@ -393,27 +442,30 @@ import {
 		ref,
 		onMounted,
 		onBeforeUnmount,
+		onActivated,
 		computed,
 		nextTick,
 		useTemplateRef
-} from 'vue'
+	} from "vue"
-import SelectUser from '@/component/common/SelectUser.vue'
+	import SelectUser from "@/component/common/SelectUser.vue"
-import { message } from 'ant-design-vue'
+	import { message } from "ant-design-vue"
-import { Https } from '@/tool/https'
+	import { Https } from "@/tool/https"
-import { formatTime } from '@/tool/util'
+	import { formatTime } from "@/tool/util"
-import store from '@/store'
+	import store from "@/store"
-import type { FormInstance, Rule } from 'ant-design-vue/es/form'
+	import type { FormInstance, Rule } from "ant-design-vue/es/form"
-import { debounce } from 'lodash-es'
+	import { debounce } from "lodash-es"
-import dayjs, { Dayjs } from 'dayjs'
+	import dayjs, { Dayjs } from "dayjs"
 
-type PlanStatus = 'PENDING' | 'ACTIVE' | 'EXPIRED'
+	type PlanStatus = "PENDING" | "ACTIVE" | "EXPIRED"
 	interface SubscriptionPlan {
 		id: number
+		userId?: string | number
 		name: string
 		currentPeriodStart: string
 		currentPeriodEnd: string
 		organizationId: string
 		adminAccId: string
+		adminAccEmail?: string
 		status: PlanStatus
 		creditLimit: number
 		accountNum?: number
@@ -421,17 +473,32 @@ interface SubscriptionPlan {
 		endStamp: number
 	}
 
+	interface UserInfoRecord {
+		id: number
+		userEmail?: string
+		userName?: string
+		language?: string
+		validStartTime?: number | string
+		validEndTime?: number | string
+		country?: string
+		createDate?: number | string
+		isBeginner?: number
+		browserIdentifiers?: string
+		credits?: number
+		systemUser?: number | string
+	}
+
 	const countryList = ref([])
 	const userRef = ref(null)
 
 	const searchForm = reactive({
-  name: '',
+		name: "",
-  startTime: '',
+		startTime: "",
-  endTime: '',
+		endTime: "",
 		organizationId: undefined as string | undefined,
 		adminAccId: undefined as string | undefined,
 		status: [] as PlanStatus[] | [],
-  id: '',
+		id: "",
 		countryOrRegion: null,
 		page: 1,
 		size: 10,
@@ -442,15 +509,24 @@ const toSeconds = (dateStr: string) => Math.floor(new Date(dateStr).getTime() /
 
 	const tableData = ref<SubscriptionPlan[]>([])
 	const tableLoading = ref(false)
+	const userInfoModalVisible = ref(false)
+	const userInfoLoading = ref(false)
+	const userInfoList = ref<UserInfoRecord[]>([])
+	const currentUserInfoPlanId = ref<string | number | null>(null)
+	const userInfoPage = reactive({
+		current: 1,
+		size: 10,
+		total: 0
+	})
 
 	const modalVisible = ref(false)
 	const confirmLoading = ref(false)
-const modalTitle = ref('New Subscription Plan')
+	const modalTitle = ref("New Subscription Plan")
 	const isEditMode = ref(false)
 	const formState = reactive({
-  name: '',
+		name: "",
-  currentPeriodStart: '',
+		currentPeriodStart: "",
-  currentPeriodEnd: '',
+		currentPeriodEnd: "",
 		organizationId: undefined as string | undefined,
 		adminAccId: undefined as string | undefined,
 		creditLimit: null as number | null,
@@ -461,44 +537,44 @@ const formState = reactive({
 
 	const organizationModalVisible = ref(false)
 	const organizationForm = reactive({
-  name: '',
+		name: "",
 		type: undefined as string | undefined
 	})
 
 	const statusLabelMap: Record<PlanStatus, string> = {
-  PENDING: 'Pending',
+		PENDING: "Pending",
-  ACTIVE: 'Active',
+		ACTIVE: "Active",
-  EXPIRED: 'Expired'
+		EXPIRED: "Expired"
 	}
 	const statusColorMap: Record<PlanStatus, string> = {
-  PENDING: 'blue',
+		PENDING: "blue",
-  ACTIVE: 'green',
+		ACTIVE: "green",
-  EXPIRED: 'red'
+		EXPIRED: "red"
 	}
 
 	const statusOption = ref([
 		{
-    label: 'Pending',
+			label: "Pending",
-    value: 'PENDING'
+			value: "PENDING"
 		},
 		{
-    label: 'Active',
+			label: "Active",
-    value: 'ACTIVE'
+			value: "ACTIVE"
 		},
 		{
-    label: 'Expired',
+			label: "Expired",
-    value: 'EXPIRED'
+			value: "EXPIRED"
 		}
 	])
 
 	const disabledDate = (current: Dayjs) => {
-  return current && current < dayjs().subtract(1, 'days').endOf('day')
+		return current && current < dayjs().subtract(1, "days").endOf("day")
 	}
 
 	const disableEndDate = (current: Dayjs) => {
 		if (isEditMode.value) {
 			const specificTime = dayjs(formState.currentPeriodEnd)
-    return current && current < dayjs(formState.currentPeriodEnd * 1000).startOf('day')
+			return current && current < dayjs(formState.currentPeriodEnd * 1000).startOf("day")
 		}
 		return disabledDate(current)
 	}
@@ -509,7 +585,7 @@ const range = (start: number, end: number) => {
 		}
 		return result
 	}
-const disableEndTime = date => {
+	const disableEndTime = (date) => {
 		if (!formState.currentPeriodEnd || !isEditMode.value)
 			return {
 				disabledHours: () => [],
@@ -519,7 +595,7 @@ const disableEndTime = date => {
 
 		const specificTime = dayjs.unix(formState.currentPeriodEnd)
 
-  if (date && date.isSame(specificTime, 'day')) {
+		if (date && date.isSame(specificTime, "day")) {
 			// 如果是指定日期当天，禁用时间戳之前的时间
 			const hour = specificTime.hour()
 			const minute = specificTime.minute()
@@ -527,7 +603,7 @@ const disableEndTime = date => {
 
 			return {
 				disabledHours: () => Array.from({ length: hour }, (_, i) => i), // 禁用小时之前
-      disabledMinutes: selectedHour => {
+				disabledMinutes: (selectedHour) => {
 					if (selectedHour === hour) {
 						return Array.from({ length: minute }, (_, i) => i) // 同小时，禁用分钟之前
 					}
@@ -555,114 +631,328 @@ const normalizeStatus = (status?: string): PlanStatus | undefined => {
 		return upper
 	}
 	const getStatusColor = (status?: string) =>
-  statusColorMap[normalizeStatus(status) as PlanStatus] || 'default'
+		statusColorMap[normalizeStatus(status) as PlanStatus] || "default"
 
 	const columns = [
-  { title: 'Name', dataIndex: 'name', key: 'name', align: 'center', width: 180 },
+		{ title: "Name", dataIndex: "name", key: "name", align: "center", width: 180 },
-  { title: 'ID', dataIndex: 'id', key: 'id', align: 'center', width: 80 },
+		{ title: "ID", dataIndex: "id", key: "id", align: "center", width: 80 },
 		{
-    title: 'Organization',
+			title: "Organization",
-    dataIndex: 'organizationName',
+			dataIndex: "organizationName",
-    key: 'organizationName',
+			key: "organizationName",
-    align: 'center',
+			align: "center",
 			width: 180
 		},
 		{
-    title: 'Admin Account',
+			title: "Admin Account",
-    dataIndex: 'adminAccEmail',
+			dataIndex: "adminAccEmail",
-    key: 'adminAccEmail',
+			key: "adminAccEmail",
-    align: 'center',
+			align: "center",
 			width: 180,
 			ellipsis: true
 		},
 		{
-    title: 'Sub-Account Num',
+			title: "Sub-Account Num",
-    dataIndex: 'accountNum',
+			dataIndex: "accountNum",
-    key: 'accountNum',
+			key: "accountNum",
-    align: 'center',
+			align: "center",
 			width: 120,
 			ellipsis: true
 		},
 		{
-    title: 'Country or Region',
+			title: "Country or Region",
-    dataIndex: 'countryOrRegion',
+			dataIndex: "countryOrRegion",
-    key: 'countryOrRegion',
+			key: "countryOrRegion",
-    align: 'center',
+			align: "center",
 			width: 120,
 			ellipsis: true
 		},
 		{
-    title: 'Start Time',
+			title: "Start Time",
-    dataIndex: 'currentPeriodStart',
+			dataIndex: "currentPeriodStart",
-    key: 'currentPeriodStart',
+			key: "currentPeriodStart",
-    align: 'center',
+			align: "center",
 			width: 200
 		},
 		{
-    title: 'End Time',
+			title: "End Time",
-    dataIndex: 'currentPeriodEnd',
+			dataIndex: "currentPeriodEnd",
-    key: 'currentPeriodEnd',
+			key: "currentPeriodEnd",
-    align: 'center',
+			align: "center",
 			width: 200
 		},
-  { title: 'Status', dataIndex: 'status', key: 'status', align: 'center', width: 100 },
+		{ title: "Status", dataIndex: "status", key: "status", align: "center", width: 100 },
 		{
-    title: 'Credit Limit',
+			title: "Credit Limit",
-    dataIndex: 'creditLimit',
+			dataIndex: "creditLimit",
-    key: 'creditLimit',
+			key: "creditLimit",
-    align: 'center',
+			align: "center",
 			width: 120
 		},
-  { title: 'Operations', key: 'actions', width: 160, align: 'center', fixed: 'right' }
+		{ title: "Operations", key: "actions", width: 160, align: "center", fixed: "right" }
 	]
 
-const historyTable = ref()
+	const userInfoColumns = [
+		{ title: "User Id", dataIndex: "id", key: "id", align: "center", width: 100 },
+		{
+			title: "Email",
+			dataIndex: "userEmail",
+			key: "userEmail",
+			align: "center",
+			width: 200,
+			ellipsis: true
+		},
+		{
+			title: "User Name",
+			dataIndex: "userName",
+			key: "userName",
+			align: "center",
+			width: 150,
+			ellipsis: true
+		},
+
+		{
+			title: "Valid Start Time",
+			dataIndex: "validStartTime",
+			key: "validStartTime",
+			align: "center",
+			width: 200
+		},
+		{
+			title: "Valid End Time",
+			dataIndex: "validEndTime",
+			key: "validEndTime",
+			align: "center",
+			width: 200
+		},
+		{
+			title: "Country or Region",
+			dataIndex: "country",
+			key: "country",
+			align: "center",
+			width: 180,
+			ellipsis: true
+		},
+		{
+			title: "Credits",
+			dataIndex: "credits",
+			key: "credits",
+			align: "center",
+			width: 100
+		},
+		{
+			title: "User Type",
+			dataIndex: "systemUser",
+			key: "systemUser",
+			align: "center",
+			width: 120
+		}
+	]
+
+	const systemUserLabelMap: Record<string, string> = {
+		"0": "visitor",
+		"1": "yearly",
+		"2": "monthly",
+		"3": "trial",
+		"4": "userInEvent",
+		"7": "Edu Admin"
+	}
+
+	const getSystemUserLabel = (systemUser?: number | string) => {
+		if (systemUser === undefined || systemUser === null) return ""
+		return systemUserLabelMap[String(systemUser)] || String(systemUser)
+	}
+
+	const formatUserTime = (value?: number | string) => {
+		if (!value) return ""
+		if (typeof value === "number") {
+			return formatTime(value / 1000, "YYYY-MM-DD hh:mm:ss")
+		}
+		if (/^\d+$/.test(value)) {
+			return formatTime(Number(value) / 1000, "YYYY-MM-DD hh:mm:ss")
+		}
+		return value
+	}
+
+	const normalizeUserInfoList = (res: any): UserInfoRecord[] => {
+		if (Array.isArray(res)) return res
+		if (Array.isArray(res?.records)) return res.records
+		if (res) return [res]
+		return []
+	}
+
+	const buildUserInfoParams = (id: string | number) => ({
+		endTime: "",
+		startTime: "",
+		size: userInfoPage.size,
+		page: userInfoPage.current,
+		systemUser: "",
+		country: "",
+		email: "",
+		userType: "",
+		ids: [],
+		occupation: "",
+		order: "",
+		orderBy: "",
+		userName: "",
+		subscriptionPlanId: id
+	})
+
+	const fetchUserInfo = async () => {
+		if (currentUserInfoPlanId.value === null) return
+		userInfoLoading.value = true
+		userInfoList.value = []
+
+		try {
+			const res = await Https.axiosPost(
+				Https.httpUrls.getUserInfo,
+				buildUserInfoParams(currentUserInfoPlanId.value)
+			)
+			const records = normalizeUserInfoList(res)
+			userInfoList.value = records
+			userInfoPage.total = Number(res?.total ?? records.length)
+		} catch (error: any) {
+			message.error(error.message || "Failed to load user info")
+			console.error(error)
+		} finally {
+			userInfoLoading.value = false
+		}
+	}
+
+	const openUserInfo = async (record: SubscriptionPlan) => {
+		console.log(record)
+		// debugger
+
+		currentUserInfoPlanId.value = record.id
+		userInfoPage.current = 1
+		userInfoModalVisible.value = true
+		await fetchUserInfo()
+	}
+
+	const changeUserInfoPage = (pagination: any) => {
+		userInfoPage.current = pagination.current
+		userInfoPage.size = pagination.pageSize
+		fetchUserInfo()
+	}
+
+	const customPlanRow = (record: SubscriptionPlan) => {
+		return {
+			onClick: (event: MouseEvent) => {
+				const target = event.target as HTMLElement | null
+				if (target?.closest(".plan-row-actions")) return
+				openUserInfo(record)
+			}
+		}
+	}
+
+	const historyTable = ref<HTMLElement | null>(null)
 	const historyTableHeight = ref(0)
+	const minTableBodyHeight = 120
+	let tableResizeObserver: ResizeObserver | null = null
+	let tableResizeTimer: ReturnType<typeof window.setTimeout> | null = null
+
 	const handleResizeColumn = (w: any, col: any) => {
 		col.width = w
 	}
 
-const calculateTableHeight = () => {
+	const getElementOuterHeight = (element: Element | null) => {
-  nextTick(() => {
+		if (!element) return 0
-    if (historyTable.value) {
+		const htmlElement = element as HTMLElement
-      historyTableHeight.value = historyTable.value.clientHeight - 200
+		const style = window.getComputedStyle(htmlElement)
+		return (
+			htmlElement.offsetHeight +
+			Number.parseFloat(style.marginTop || "0") +
+			Number.parseFloat(style.marginBottom || "0")
+		)
 	}
+
+	const calculateTableHeight = () => {
+		if (tableResizeTimer) {
+			window.clearTimeout(tableResizeTimer)
+		}
+		tableResizeTimer = window.setTimeout(() => {
+			nextTick(() => {
+				const tableWrapper = historyTable.value
+				if (!tableWrapper) {
+					tableResizeTimer = null
+					return
+				}
+
+				const tableHead = tableWrapper.querySelector(".ant-table-thead") ?? null
+				const pagination = tableWrapper.querySelector(".ant-pagination") ?? null
+				const tableHeadHeight = getElementOuterHeight(tableHead) || 55
+				const paginationHeight = getElementOuterHeight(pagination) || 48
+				const reservedHeight = tableHeadHeight + paginationHeight + 8
+
+				historyTableHeight.value = Math.max(
+					minTableBodyHeight,
+					tableWrapper.clientHeight - reservedHeight
+				)
+				tableResizeTimer = null
 			})
+		}, 50)
 	}
 
 	const handleResize = () => {
 		calculateTableHeight()
 	}
 
+	const setupTableResizeObserver = () => {
+		if (!historyTable.value || typeof ResizeObserver === "undefined") return
+		tableResizeObserver?.disconnect()
+		tableResizeObserver = new ResizeObserver(() => {
+			calculateTableHeight()
+		})
+		tableResizeObserver.observe(historyTable.value)
+
+		const searchCard = historyTable.value
+			.closest(".subscription-plan")
+			?.querySelector(".search-card")
+		if (searchCard) {
+			tableResizeObserver.observe(searchCard)
+		}
+	}
+
 	onMounted(async () => {
 		await getOrganizationList()
 		await handleSearch()
 		calculateTableHeight()
-  window.addEventListener('resize', handleResize)
+		setupTableResizeObserver()
-  const list = sessionStorage.getItem('allCountry')
+		window.addEventListener("resize", handleResize)
+		const list = sessionStorage.getItem("allCountry")
 		countryList.value = list ? JSON.parse(list) : []
 	})
 
+	onActivated(() => {
+		calculateTableHeight()
+	})
+
 	onBeforeUnmount(() => {
-  window.removeEventListener('resize', handleResize)
+		window.removeEventListener("resize", handleResize)
+		tableResizeObserver?.disconnect()
+		if (tableResizeTimer) {
+			window.clearTimeout(tableResizeTimer)
+			tableResizeTimer = null
+		}
 	})
 
 	const handleFetchTableData = async () => {
 		tableLoading.value = true
 		return Https.axiosPost(Https.httpUrls.searchAllSubscribePlan, searchForm)
-    .then(res => {
+			.then((res) => {
 				tableData.value = res.records
 				searchForm.total = res.total
 			})
 			.finally(() => {
 				tableLoading.value = false
+				calculateTableHeight()
 			})
 	}
 
 	const resetFormState = () => {
-  formState.name = ''
+		formState.name = ""
-  formState.currentPeriodStart = ''
+		formState.currentPeriodStart = ""
-  formState.currentPeriodEnd = ''
+		formState.currentPeriodEnd = ""
 		formState.organizationId = undefined
 		formState.adminAccId = undefined
 		formState.creditLimit = null
@@ -683,26 +973,26 @@ const handleSearch = () => {
 	}
 
 	const handleReset = () => {
-  searchForm.name = ''
+		searchForm.name = ""
-  searchForm.startTime = ''
+		searchForm.startTime = ""
-  searchForm.endTime = ''
+		searchForm.endTime = ""
 		searchForm.organizationId = undefined
 		searchForm.adminAccId = undefined
 		searchForm.status = []
-  searchForm.id = ''
+		searchForm.id = ""
 		searchForm.countryOrRegion = null
 		handleSearch()
 	}
 
 	const openCreate = () => {
-  modalTitle.value = 'New Subscription Plan'
+		modalTitle.value = "New Subscription Plan"
 		isEditMode.value = false
 		resetFormState()
 		modalVisible.value = true
 	}
 
 	const openEdit = (record: SubscriptionPlan) => {
-  modalTitle.value = 'Edit Subscription Plan'
+		modalTitle.value = "Edit Subscription Plan"
 		isEditMode.value = true
 		formState.name = record.name
 		formState.currentPeriodStart = String(record.currentPeriodStart)
@@ -755,25 +1045,25 @@ const validateForm = (): boolean => {
 		}
 
 		const requiredFields: FieldRule[] = [
-    { value: formState.currentPeriodStart, message: 'Please select the start time' },
+			{ value: formState.currentPeriodStart, message: "Please select the start time" },
-    { value: formState.currentPeriodEnd, message: 'Please select the end time' },
+			{ value: formState.currentPeriodEnd, message: "Please select the end time" },
-    { value: formState.adminAccId, message: 'Please select the admin account' },
+			{ value: formState.adminAccId, message: "Please select the admin account" },
 			{
 				value: formState.creditLimit,
-      message: 'Please input credit limit',
+				message: "Please input credit limit",
 				checkNull: true
 			},
 			{
 				value: formState.accountNum,
-      message: 'Please input account number',
+				message: "Please input account number",
 				checkNull: true
 			}
 		]
 
 		if (!isEditMode.value) {
 			requiredFields.push(
-      { value: formState.name, message: 'Please input the name' },
+				{ value: formState.name, message: "Please input the name" },
-      { value: formState.organizationId, message: 'Please select organization' }
+				{ value: formState.organizationId, message: "Please select organization" }
 			)
 		}
 
@@ -806,7 +1096,7 @@ const handleSubmit = async () => {
 				res = await Https.axiosPost(Https.httpUrls.createSubscribePlan, params)
 			}
 			message.success(
-      `${isEditMode.value ? 'Subscription plan updated' : 'Subscription plan created'}`
+				`${isEditMode.value ? "Subscription plan updated" : "Subscription plan created"}`
 			)
 		} catch (error: any) {
 			message.error(error.message)
@@ -835,8 +1125,8 @@ const cancelModal = () => {
 	const removePlan = (id: number) => {
 		tableLoading.value = true
 		Https.axiosGet(Https.httpUrls.deleteSubscribePlan, { params: { id } })
-    .then(res => {
+			.then((res) => {
-      message.success('Subscription plan deleted')
+				message.success("Subscription plan deleted")
 				handleReset()
 			})
 			.catch((error: any) => {
@@ -901,15 +1191,15 @@ const handleOrganizationScroll = (e: any) => {
 	}
 
 	const handleOrganizationSelect = (value: string) => {
-  if (value === 'ADD_ORGANIZATION') {
+		if (value === "ADD_ORGANIZATION") {
 			// 打开添加组织弹窗
 			organizationModalVisible.value = true
 			// 使用nextTick确保值被重置，使其不被选中
 			nextTick(() => {
-      if (searchForm.organizationId === 'ADD_ORGANIZATION') {
+				if (searchForm.organizationId === "ADD_ORGANIZATION") {
 					searchForm.organizationId = undefined
 				}
-      if (formState.organizationId === 'ADD_ORGANIZATION') {
+				if (formState.organizationId === "ADD_ORGANIZATION") {
 					formState.organizationId = undefined
 				}
 			})
@@ -918,12 +1208,12 @@ const handleOrganizationSelect = (value: string) => {
 
 	const handleOrganizationChange = (value: string) => {
 		// 如果change事件触发时值是"添加组织"，立即重置
-  if (value === 'ADD_ORGANIZATION') {
+		if (value === "ADD_ORGANIZATION") {
 			nextTick(() => {
-      if (searchForm.organizationId === 'ADD_ORGANIZATION') {
+				if (searchForm.organizationId === "ADD_ORGANIZATION") {
 					searchForm.organizationId = undefined
 				}
-      if (formState.organizationId === 'ADD_ORGANIZATION') {
+				if (formState.organizationId === "ADD_ORGANIZATION") {
 					formState.organizationId = undefined
 				}
 			})
@@ -932,13 +1222,13 @@ const handleOrganizationChange = (value: string) => {
 
 	const cancelOrganizationModal = () => {
 		organizationModalVisible.value = false
-  organizationForm.name = ''
+		organizationForm.name = ""
 		organizationForm.type = undefined
 	}
 
 	const handleCreateOrganization = async () => {
 		if (!organizationForm.name || !organizationForm.type) {
-    message.warning('Please fill in name and type')
+			message.warning("Please fill in name and type")
 			return
 		}
 		try {
@@ -948,7 +1238,7 @@ const handleCreateOrganization = async () => {
 					type: organizationForm.type
 				}
 			})
-    message.success('Organization created successfully')
+			message.success("Organization created successfully")
 			cancelOrganizationModal()
 			// 刷新组织列表
 			await getOrganizationList()
@@ -960,26 +1250,28 @@ const handleCreateOrganization = async () => {
 				}
 			}
 		} catch (error: any) {
-    message.error(error.message || 'Failed to create organization')
+			message.error(error.message || "Failed to create organization")
 			console.error(error)
 		}
 	}
 
 	const filterOption = (input: string, option: any) => {
-  const label = option?.label ?? option?.children ?? option?.key?.label ?? ''
+		const label = option?.label ?? option?.children ?? option?.key?.label ?? ""
 		return String(label).toLowerCase().includes(input.toLowerCase())
 	}
 </script>
 
 <style lang="less" scoped>
 	.subscription-plan {
-  padding: 2rem 2.4rem 3.2rem 0;
+		padding: 2rem 2.4rem 0 0;
 		display: flex;
 		height: 100%;
+		min-height: 0;
 		flex-direction: column;
 
 		.search-card {
 			margin-bottom: 1.6rem;
+			flex-shrink: 0;
 		}
 
 		.table-card {
@@ -987,13 +1279,15 @@ const filterOption = (input: string, option: any) => {
 			display: flex;
 			flex-direction: column;
 			overflow: hidden;
+			min-height: 0;
 
 			:deep(.ant-card-body) {
 				flex: 1;
 				display: flex;
 				flex-direction: column;
 				overflow: hidden;
-      padding: 2.4rem;
+				padding: 2.4rem 2.4rem 0;
+				min-height: 0;
 			}
 
 			.table-card__header {
@@ -1007,6 +1301,42 @@ const filterOption = (input: string, option: any) => {
 				flex: 1;
 				overflow: hidden;
 				min-height: 0;
+
+				:deep(.ant-table-wrapper),
+				:deep(.ant-spin-nested-loading),
+				:deep(.ant-spin-container) {
+					height: 100%;
+				}
+
+				:deep(.ant-spin-container) {
+					display: flex;
+					flex-direction: column;
+					overflow: hidden;
+				}
+
+				:deep(.ant-table) {
+					flex: 1;
+					min-height: 0;
+					overflow: hidden;
+				}
+
+				:deep(.ant-table-container) {
+					height: 100%;
+					display: flex;
+					flex-direction: column;
+				}
+
+				:deep(.ant-table-content) {
+					height: 100%;
+				}
+
+				:deep(.ant-table-body) {
+					overflow-y: auto !important;
+				}
+
+				:deep(.ant-pagination) {
+					flex-shrink: 0;
+				}
 			}
 
 			.danger-text {
@@ -1026,8 +1356,23 @@ const filterOption = (input: string, option: any) => {
 			:deep(.ant-table-tbody > tr:hover > td) {
 				background: rgb(202, 202, 202);
 			}
+
+			:deep(.ant-table-tbody > tr) {
+				cursor: pointer;
+			}
+
+			:deep(.plan-row-actions) {
+				cursor: default;
 			}
 		}
+	}
+
+	.user-info-modal {
+		:deep(.ant-modal-body) {
+			padding: 2.4rem;
+		}
+	}
+
 	:deep(.subscriptionPlan_modal) {
 		.ant-modal-body {
 			// height: calc(65rem * 1.2);
@@ -1079,11 +1424,69 @@ const filterOption = (input: string, option: any) => {
 	}
 
 	:deep(.search-form) {
-  column-gap: 2rem;
+		--search-label-width: 14rem;
-  row-gap: 2rem;
+		--search-control-width: 20rem;
+		align-items: flex-start;
+		column-gap: 1.8rem;
+		row-gap: 1.8rem;
+
+		.ant-form-item {
+			min-width: calc(var(--search-label-width) + var(--search-control-width));
+			margin-right: 0;
+			margin-bottom: 0;
+		}
+
+		.ant-form-item-label {
+			flex: 0 0 var(--search-label-width);
+			max-width: var(--search-label-width);
+			overflow: visible;
+			white-space: nowrap;
+
+			> label {
+				white-space: nowrap;
+			}
+		}
+
+		.ant-form-item-control {
+			flex: 0 0 var(--search-control-width);
+			max-width: var(--search-control-width);
+		}
+
+		.ant-input,
+		.ant-input-affix-wrapper,
+		.ant-picker,
 		.ant-select {
 			width: 100% !important;
 		}
+
+		.search-form__actions {
+			min-width: auto;
+
+			.ant-form-item-control {
+				flex: 0 0 auto;
+				max-width: none;
+			}
+		}
+	}
+
+	@media (min-width: 1600px) {
+		:deep(.search-form) {
+			--search-control-width: 22rem;
+		}
+	}
+
+	@media (max-width: 760px) {
+		:deep(.search-form) {
+			.ant-form-item {
+				flex: 1 1 100%;
+				min-width: 100%;
+			}
+
+			.ant-form-item-control {
+				flex: 1 1 auto;
+				max-width: calc(100% - var(--search-label-width));
+			}
+		}
 	}
 
 	:deep(.ant-select-dropdown) {

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

@@ -109,12 +109,19 @@ 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 patternTransform = object.fill?.hasOwnProperty("patternTransform") ? object.fill.patternTransform : createPatternTransform(0.3, 0);
+			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 = tObject.width / 2 - img.width * scale / 2;
+			const offsetX = tWidth / 2 - img.width * scale / 2;
-			const offsetY = tObject.height / 2 - img.height * scale / 2;
+			const offsetY = tHeight / 2 - img.height * scale / 2;
 			const pattern = new fabric.Pattern({
 				source: img,
 				repeat: this.fillRepeat,
@@ -146,10 +153,10 @@ export class FillRepeatCommand extends Command {
 				let scaleX = tObject.scaleX || 1;
 				let scaleY = tObject.scaleY || 1;
 				rect.set({
-					width: tObject.width,
+					width: tWidth,
-					height: tObject.height,
+					height: tHeight,
-					top: tObject.top - tObject.height * scaleY / 2,
+					top: tObject.top - tHeight * scaleY / 2,
-					left: tObject.left - tObject.width * scaleX / 2,
+					left: tObject.left - tWidth * scaleX / 2,
 					scaleX,
 					scaleY,
 				});

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

@@ -283,7 +283,7 @@ export class PasteLayerCommand extends Command {
       if(this.newLayer.isPrintTrims){
 		this.layers.value.forEach((layer) => {
           if (layer.isPrintTrimsGroup) {
-            layer.children.push(this.newLayer);
+            layer.children.unshift(this.newLayer);
           }
         })
 	  }else if (this.insertIndex !== undefined && this.insertIndex !== null) {

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

@@ -126,8 +126,8 @@
 									:options="selectOptions"
 									@change="(e) => changeFillRepeat(e, v)"
 									:disabled="
-										v.layer?.metadata?.level2Type ===
+										v.layer?.metadata?.sourceData?.type ===
-										'Embroidery'
+										'trims'
 									"
 								/>
 							</div>

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

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

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

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

src/component/Canvas/CanvasEditor/managers/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,
@@ -625,17 +623,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 			this.updateMaskPosition(backgroundObject);
 		}
 
-	// 更新颜色层信息
+		this.setSpecialCliptInfo(false, true)
-	// const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
-	// if(colorObject){
-	// 	await this.setObjecCliptInfo(colorObject);
-	// }
-	const groupLayer = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
-	if(groupLayer){
-		const groupRect = new fabric.Rect({});
-		await this.setObjecCliptInfo(groupRect);
-		groupLayer.clippingMask = groupRect.toObject();
-	}
 
 		// 重新渲染画布
 		this.canvas.renderAll();
@@ -1160,7 +1148,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		const flScaleY = fixedLayerObj.scaleY
 		const prints = [];
 		const trims = [];
-	objects.forEach((v) => {
+		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;
@@ -1174,7 +1162,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,
@@ -1240,8 +1228,8 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 			}
 		})
 		// prints.sort((a, b) => a.ifSingle ? 1 : -1);
-	prints.forEach((v, i) => v.priority = i + 1);
+		// prints.forEach((v, i) => v.priority = i + 1);
-	trims.forEach((v, i) => v.priority = i + 1);
+		// trims.forEach((v, i) => v.priority = i + 1);
 		return { prints, trims };
 	}
 
@@ -1337,7 +1325,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 		}
 	}
 	loadJSON(json, calllBack) {
-
+		this.canvas.loading.value = true;
 		// 确保传入的json是字符串格式
 		if (typeof json === "object") {
 			json = JSON.stringify(json);
@@ -1507,25 +1495,15 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 	 * 创建其他图层：印花、颜色、元素...
 	 * @param {Object} otherData - 其他图层数据
 	*/
-  async createOtherLayers(otherData, isUpdate = false) {
+	async createOtherLayers(otherData) {
 		if (!otherData) return console.warn("otherData 为空不需要添加");
-	this.canvas.loading.value = true;
 		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 = [];
+		const ids = [SpecialLayerId.COLOR, SpecialLayerId.SPECIAL_GROUP];
-	if(isUpdate){
-		updateColor && ids.push(SpecialLayerId.COLOR)
-		updateSpecialGroup && ids.push(SpecialLayerId.SPECIAL_GROUP)
-	}else{
-		ids.push(SpecialLayerId.COLOR)
-		ids.push(SpecialLayerId.SPECIAL_GROUP)
-	}
 		this.layers.value = this.layers.value.filter((layer) => {
 			if (ids.includes(layer.id)) {
 				ids.push(...layer.children?.map((child) => child.id));
@@ -1533,11 +1511,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 = [];// 平铺图层
@@ -1555,16 +1537,35 @@ 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;
-	this.canvas.loading.value = false;
 	}
 
+	//设置印花元素颜色的裁剪信息
+	async setSpecialCliptInfo(isColor = true, isGroup = true) {
+		// 更新颜色层信息
+		if (isColor) {
+			const colorObject = this.getLayerObjectById(SpecialLayerId.COLOR);
+			if (colorObject) {
+				await this.setObjecCliptInfo(colorObject);
+			}
+
+		}
+		// 更新特殊组图层信息
+		if (isGroup) {
+			const groupLayer = this.layerManager.getLayerById(SpecialLayerId.SPECIAL_GROUP);
+			if (groupLayer) {
+				const groupRect = new fabric.Rect({});
+				await this.setObjecCliptInfo(groupRect);
+				groupLayer.clippingMask = groupRect.toObject();
+			}
+		}
+	}
 	// 设置画布对象的裁剪信息
 	async setObjecCliptInfo(tagObject, data) {
 		const fixedLayerObj = this.getFixedLayerObject();
@@ -1686,7 +1687,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 			let opacity = 1
 			let flipX = false;
 			let flipY = false;
-	  let blendMode = BlendMode.MULTIPLY;
+			let blendMode = BlendMode.NORMAL;
 			//   if(item.type === "trims") blendMode = BlendMode.NORMAL;// 元素正常
 			if (item.object) {
 				opacity = item.object.opacity
@@ -1712,7 +1713,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 				hasBorders: true,
 				isPrintTrims: true,
 			});
-      this.canvas.add(image);
+			//   this.canvas.add(image);
 			let layer = createLayer({
 				id: id,
 				name: name,
@@ -1723,7 +1724,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);
 		};
@@ -1808,7 +1810,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 				},
 				isPrintTrims: true,
 			});
-      this.canvas.add(rect);
+			//   this.canvas.add(rect);
 			let layer = createLayer({
 				id: id,
 				name: name,
@@ -1820,6 +1822,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
 				blendMode: blendMode,
 				fabricObjects: [rect.toObject(["id", "layerId", "layerName"])],
 				metadata: { sourceData: item },
+				object: rect,
 			})
 			children.push(layer);
 		};
@@ -1836,6 +1839,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);
 		// 插入组图层

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

@@ -606,7 +606,9 @@ export class ExportManager {
 			imageSmoothingEnabled: true,
 		});
 		// tempFabricCanvas.setZoom(1);
-	console.log("==========", fixedLayerObject)
+		const ox = fixedLayerObject.left - fixedLayerObject.width * fixedLayerObject.scaleX / 2
+		const oy = fixedLayerObject.top - fixedLayerObject.height * fixedLayerObject.scaleY / 2
+		// console.log("==========", fixedLayerObject, ox, oy)
 		try {
 			// 克隆并添加所有对象到临时画布，需要调整位置相对于固定图层
 			for (let i = 0; i < objectsToExport.length; i++) {
@@ -616,15 +618,20 @@ export class ExportManager {
 					restoreOpacityInRedGreen && true
 				);
 				if (cloned) {
+					let scaleX = cloned.scaleX / fixedLayerObject.scaleX
+					let scaleY = cloned.scaleY / fixedLayerObject.scaleY
+					let top = (cloned.top - oy) * scaleY
+					let left = (cloned.left - ox) * scaleX
+					if (cloned.originX === "center" && cloned.originY === "center") {
+						top = canvasHeight / 2
+						left = canvasWidth / 2
+					}
 					cloned.set({
-            left: canvasWidth / 2,
+						left: left,
-            top: canvasHeight / 2,
+						top: top,
-			scaleX: cloned.scaleX / fixedLayerObject.scaleX,
+						scaleX: scaleX,
-			scaleY: cloned.scaleY / fixedLayerObject.scaleY,
+						scaleY: scaleY,
-			originX: "center",
-			originY: "center",
 					});
-		  console.log("==========", {...cloned})
 					// 更新对象坐标
 					cloned.setCoords();
 					tempFabricCanvas.add(cloned);

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;
     }
 

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

@@ -90,16 +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();
-			}
 		} 
+		// 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) {
@@ -380,7 +381,8 @@ export class PartManager {
 			box: [...this.pointList],
 		});
 		const image = await this.loadImageToObject(url);
-		const canvas = getObjectAlphaToCanvas(image, null, 0, this.rgba);
+		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);
 	}
 	/** 获取分隔后图片 */

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

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

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

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

src/component/Canvas/CanvasEditor/managers/command/CommandManager.js

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

src/component/Canvas/CanvasEditor/managers/liquify/LiquifyRealTimeUpdater.js

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

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

@@ -30,7 +30,8 @@ export class LayerSort {
     if (canvasObjects.length === 0) return;
 
     // 使用画布渲染优化
-    await optimizeCanvasRendering(this.canvas, () => {
+	await new Promise((resolve) => {
+		optimizeCanvasRendering(this.canvas, () => {
 		// 计算每个对象应该在的 z-index 位置
 		const objectZIndexMap = this.calculateObjectZIndexes();
 
@@ -51,6 +52,8 @@ export class LayerSort {
 			this.canvas.moveTo(item.object, index);
 			}
 		});
+		resolve();
+		});
     });
   }
 

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;
+				isHave = false;
-				data.data[i + 1] = 0;
-				data.data[i + 2] = 0;
-				data.data[i + 3] = 0;
 			} else {
+				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(
+    const optimizedBounds = calculateOptimizedBounds(
-    //   clippingObject,
+      clippingObject,
-    //   fabricObjects
+      fabricObjects
-    // );
+    );
-	const optimizedBounds = {
+	console.log("📐 优化后的选区边界框:", optimizedBounds);
-		left: clippingObject.left - clippingObject.width / 2,
+	// const optimizedBounds = {
-		top: clippingObject.top - clippingObject.height / 2,
+	// 	left: clippingObject.left - clippingObject.width / 2,
-		width: clippingObject.width,
+	// 	top: clippingObject.top - clippingObject.height / 2,
-		height: clippingObject.height,
+	// 	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/canvasExample.vue

@@ -333,50 +333,54 @@
 	]);
 	const canvasLoadJsonSuccess = () => {
 		console.log("画布加载JSON成功");
+		return;
 		canvasEditor.value?.updateOtherLayers({
 			color: { rgba: { r: 255, g: 0, b: 0, a: 1 } },
 			printObject: {
 				prints: [
-					// {
+					{
-					// 	ifSingle: false,
+						ifSingle: false,
-					// 	level2Type: "Pattern",
+						level2Type: "Pattern",
-					// 	designType: "Library",
+						designType: "Library",
-					// 	path: "/src/assets/images/canvas/yinhua1.jpg",
+						path: "/src/assets/images/canvas/yinhua1.jpg",
-					// 	location: [800, 600],
+						location: [800, 600],
-					// 	scale: [1, 1],
+						scale: [1, 1],
-					// 	angle: 0,
+						angle: 0,
-					// 	object: {
+						priority: 1,
-					// 		top: 300,
+						object: {
-					// 		left: 400,
+							top: 300,
-					// 		scaleX: 0.5,
+							left: 400,
-					// 		scaleY: 0.5,
+							scaleX: 0.5,
-					// 		opacity: 1,
+							scaleY: 0.5,
-					// 		angle: 0,
+							opacity: 1,
-					// 		flipX: false,
+							angle: 0,
-					// 		flipY: false,
+							flipX: false,
+							flipY: false,
 							// blendMode: "multiply",
-					// 		gapX: 0,
+							gapX: 0,
-					// 		gapY: 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: [700, 400],
+						location: [550, 650],
-						scale: [0.1, 0.133],
+						scale: [0.15, 0.2],
 						angle: 0,
+						priority: 2,
 					},
+					// {
+					// 	ifSingle: true,
+					// 	level2Type: "Pattern",
+					// 	designType: "Library",
+					// 	path: "/src/assets/images/canvas/yinhua1.jpg",
+					// 	location: [700, 400],
+					// 	scale: [0.1, 0.133],
+					// 	angle: 0,
+					// 	priority: 3,
+					// },
 				],
 			},
 		});
@@ -443,6 +447,7 @@
 				</template>
 			</CanvasEditor>
 		</div>
+		<img src="" alt="" id="canvas-test-dom">
 	</div>
 </template>
 <style>
@@ -454,6 +459,13 @@
 		height: 600px !important;
 		z-index: 99999999;
 	}
+	#canvas-test-dom{
+		position: fixed;
+		z-index: 9999999999;
+		top: 0;
+		left: 0;
+		pointer-events: none;
+	}
 </style>
 <style scoped lang="less">
 	* {

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/Detail/DesignDetail.vue

@@ -331,7 +331,6 @@ 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
@@ -369,7 +368,6 @@ export default defineComponent({
 				// }else if(isCurrent){
 					
 				// }
-				console.log(JSON.parse(JSON.stringify(detailData.selectDetail.color)),'=====')
 				color = list[i].color?.rgba?.r != null?`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:''
 					gradient = list[i].gradient
 				if((detailData.currentDetailType == 'sketch' && newData?.sketch) || detailData.isEditPattern.value == 'editSketch'){
@@ -500,7 +498,7 @@ export default defineComponent({
 		}
 		const submit = async ()=>{
 			detailData.loadingShow = true
-			if(detailData.isEditPattern.value !== 'canvasEditor'){
+			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)
@@ -565,11 +563,14 @@ export default defineComponent({
 				}
 			}else{
 				//走画布合成图片并且直接分割
+				if(detailData.isEditPattern.value !== 'canvasEditor' && detailData.isEditPattern.value !== 'redGreenExample'){
 					if(detailData.isEditPattern.value !== 'canvasEditor'){
 						if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail()
+					}
 					let otherData = await updateOtherLayers('single')
 					await detailDom.canvasBox.updateOtherLayers(otherData)
 				}
+				
 				await detailDom.canvasBox.privewDetail()
 				await upDateFrontBackSketch()
 				await uploadSelectDetail()
@@ -625,7 +626,7 @@ export default defineComponent({
 				if(detailData.isEditPattern.value && detailData.isEditPattern.value == str){
 					// await detailDom.canvasBox.saveCanvas()
 					await (detailDom.canvasBox as any).privewDetail()
-					if(detailData.isEditPattern.value == 'canvasEditor')await uploadSelectDetail()
+					if(detailData.isEditPattern.value == 'canvasEditor' || detailData.isEditPattern.value == 'redGreenExample')await uploadSelectDetail()
 					detailData.isEditPattern.value = ''
 				}else{
 					// if(detailData.isEditPattern.value && (str == 'canvasEditor' || str == 'redGreenExample')){
@@ -759,7 +760,6 @@ export default defineComponent({
 		const uploadSelectDetail = async ()=>{//更新选中的detail
 			// await detailDom.canvasBox.saveCanvas()
 			const allInfo = await (detailDom.canvasBox as any).getCanvasElement()
-			console.log(allInfo)
 			let color:any = {}
 			if(allInfo.color?.color?.rgba || allInfo.color?.color?.gradient){
 				let canvasColor = allInfo.color.color;
@@ -781,8 +781,7 @@ export default defineComponent({
 					color.gradient = canvasColor.gradient
 				}
 			}
-
+			if(detailData.isEditPattern.value == 'canvasEditor' || detailData.isEditPattern.value == 'redGreenExample'){
-			if(detailData.isEditPattern.value == 'canvasEditor'){
 				delete detailData.selectDetail.newDetail
 				detailData.selectDetail.trims.prints = allInfo.trims || []
 				detailData.selectDetail.printObject.prints = allInfo.prints || []
@@ -805,7 +804,6 @@ export default defineComponent({
 			if(detailData.currentDetailType == 'color'){
 				detailData.detailLeftColorKey++
 			}
-			
 		}
 		const canvasReload = async ()=>{
 			if(detailData.isEditPattern.value){

src/component/Detail/canvas/index.vue

@@ -12,7 +12,6 @@
 							is-edit
 							:clothingImageUrl="selectDetail.path"
 							:clothingImageUrl2="selectDetail.maskUrl || selectDetail.layersObject[0].maskUrl"
-							:clothingMinIOPath="selectDetail.minIOPath"
 							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>
@@ -164,7 +163,6 @@ export default defineComponent({
 		const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{
 			// if(!detailDom.editCanvas)return
 			return new Promise(async (res,reject)=>{
-				console.log(detailDom.editCanvas)
 				await detailDom.editCanvas.exportImage({
 					isContainFixed:true,
 					width:props.sketchSize.width,
@@ -246,17 +244,27 @@ export default defineComponent({
 
 
 		const frontBackChange = async (value:any)=>{
+			let front = detailData.frontBack.front[detailData.imgDomIndex]
+			let back = detailData.frontBack.back[detailData.imgDomIndex]
+			store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
+			await nextTick()
 			if(!detailData.selectDetail.partialDesign.partialDesignPath && !detailData.selectDetail.partialDesign.partialDesignBase64){
 				await privewDetail()
+			}else{
+				await detailDom.editCanvas.exportImage({
+					isFrontBackUpdata: true,
+					isContainFixed:true,
+					width:props.sketchSize.width,
+					height:props.sketchSize.height,
+				}).then((rv)=>{
+					if(detailData.selectDetail?.partialDesign)detailData.selectDetail.partialDesign.partialDesignBase64 = rv
+				})
 			}
 			let full = detailData.selectDetail.partialDesign.partialDesignBase64 || detailData.selectDetail.partialDesign.partialDesignPath || detailData.selectDetail.path
 			let size = {
 				...detailData.canvasConfig,
 			}
-			store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
 			segmentImage(value,full,size).then(async (rv)=>{
-				let front = detailData.frontBack.front[detailData.imgDomIndex]
-				let back = detailData.frontBack.back[detailData.imgDomIndex]
 				if(!front?.oldImageUrl)front.oldImageUrl = front.imageUrl
 				if(!front?.oldMaskUrl)front.oldMaskUrl = front.maskUrl
 				if(!back?.oldImageUrl)back.oldImageUrl = back.imageUrl
@@ -268,7 +276,6 @@ export default defineComponent({
 				back.imageUrl = rv.targetBackUrl
 				// store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
 			})
-
 		}
 		const editSketchCanvasInit = async (value:any)=>{
 			detailData.canvasInstance = value

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),
+				sketch:computed(()=>{
-				print:computed(()=>store.state.UploadFilesModule.allBoardData.printboardFiles),
+					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="selectDetail.path" alt="" class="designOpenrtion_sketch" ref="sketchImg" @load="()=>isSketchLoad = true"> -->
-					<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.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,
+				priority:printIndex,
-				scale,
+				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,8 +393,8 @@ export default defineComponent({
 					angle: 0,
 					flipX: false,
 					flipY: false,
-					// blendMode: "multiply",
+					blendMode: "multiply",
-					blendMode: "source-over",
+					// blendMode: "source-over",
 					gapX: 0,
 					gapY: 0,
 				}
@@ -400,7 +421,8 @@ export default defineComponent({
 				}
 			}
 		}
-		const setPosition = ()=>{
+		const setPosition = async ()=>{
+			await new Promise<void>((resolve, reject) => {
 				nextTick(()=>{
 					let img = new Image
 					img.onload = ()=>{
@@ -436,15 +458,12 @@ export default defineComponent({
 							})
 							setItemPosition()
 						}
-					// if(props.type == 'print'){
+						resolve('')
-					// 	editPrintElementData.overallSingle = state
-					// }
 					}
-				// undividedLayer
+					img.src = editPrintElementData.selectDetail.path
-				//计算宽高使用editPrintElementData.selectDetail.path
-				// img.src = editPrintElementData.selectDetail.path
-				img.src = editPrintElementData.selectDetail.undividedLayer?editPrintElementData.selectDetail.undividedLayer:editPrintElementData.selectDetail.path
 				})
+			})
+			
 		}
 		// watch(()=>editPrintElementData.selectDetail?.id,(newVal)=>{
 		// 	if(!newVal)return
@@ -518,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,
@@ -652,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)
@@ -804,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();
 			}
 		}
@@ -835,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)
@@ -855,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) => {
@@ -866,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,
 				});
 			}
@@ -898,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/index.vue

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

src/component/Events/eventsDetail.vue

@@ -3,76 +3,109 @@
 		<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 class="modal_title_text" v-for="item in eventsDetail.textList">
+				</div>
+				<div
+					class="modal_title_text content"
+					v-for="item in eventsDetail.textList"
+					:class="{ award: eventsDetail.id === 3 }"
+				>
 					<div class="eventsDetail_content_right_btn_box">
-						<div class="eventsDetail_content_right_btn" v-for="buttonItem,buttonIndex in item?.button" @click="openButton(buttonItem,buttonIndex)">
+						<div
-							<div v-show="!loadingShow[buttonIndex]" class="started_btn">{{ buttonItem.text }}</div>
+							class="eventsDetail_content_right_btn"
-							<div v-show="loadingShow[buttonIndex]" class="started_btn"><i class="fi fi-br-loading"></i></div>
+							v-for="(buttonItem, buttonIndex) in item?.button"
+							@click="openButton(buttonItem, buttonIndex)"
+						>
+							<div v-show="!loadingShow[buttonIndex]" class="started_btn">
+								{{ buttonItem.text }}
 							</div>
-					</div>
+							<div v-show="loadingShow[buttonIndex]" class="started_btn">
-					<div class="modal_title_text_intro" v-for="introItem in item?.paragraph" :class="{active:introItem.display == 'flex'}" v-detailText="introItem.text">
+								<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>
+				<div class="tips" v-if="eventsDetail.tips">{{ eventsDetail.tips }}</div>
+			</div>
 		</div>
-	
 	</div>
 </template>
 <script lang="ts">
-import { LoadingOutlined } from "@ant-design/icons-vue";
+import { LoadingOutlined } from "@ant-design/icons-vue"
-import { defineComponent,h ,toRefs,ref,reactive,onMounted,nextTick,provide,computed} from '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 { Https } from "@/tool/https"
-import { message, Upload, Modal } from "ant-design-vue";
+import { message, Upload, Modal } from "ant-design-vue"
-import fullScreenImg from '@/component/HomePage/fullScreenImg.vue'
+import fullScreenImg from "@/component/HomePage/fullScreenImg.vue"
-import { useRouter } from 'vue-router';
+import { useRouter } from "vue-router"
-import { useI18n } from "vue-i18n";
+import { useI18n } from "vue-i18n"
-import generalMenu from "@/component/HomePage/generalMenu.vue";
+import generalMenu from "@/component/HomePage/generalMenu.vue"
-import eventData from "@/assets/json/events.json";
+import eventData from "@/assets/json/events.json"
-import eventDataCn from "@/assets/json/events_cn.json";
+import eventDataCn from "@/assets/json/events_cn.json"
-import { useStore } from "vuex";
+import { useStore } from "vuex"
+
 export default defineComponent({
 	components: {
 		generalMenu,
-		fullScreenImg,
+		fullScreenImg
 	},
 	props: {
 		isScroll: {
 			type: Boolean,
-			 default:true,
+			default: true
-		 },
+		}
 	},
 	setup() {
-		const router = useRouter();
+		const { t, locale } = useI18n()
-        const store = useStore();
+		const router = useRouter()
+		const store = useStore()
 		let filter: any = reactive({
-			eventsDetail: {
+			eventsDetail: {},
-			},
 			getListDate: {
-				"getLikePortfolio": 0,
+				getLikePortfolio: 0,
-				"getMyPortfolio": 0,
+				getMyPortfolio: 0,
 				page: 1,
-				size:10,
+				size: 10
 			},
 			isShowMark: false,
 			isNoData: false, //如果数据为空就不加载
-			loadingShow:{},
+			loadingShow: {}
 		})
-		let likeFile = (item:any,type:string) => {
+		let likeFile = (item: any, type: string) => {}
-		}
 		let setBack = () => {
-			router.go(-1);
+			router.go(-1)
 			// router.push('/home/events')
 		}
 		let openButton = (data: any, index: number) => {
@@ -80,29 +113,40 @@ export default defineComponent({
 				return
 			}
 			filter.loadingShow[index] = true
-			Https.axiosGet(data.https).then(
+			Https.axiosGet(data.https)
-                (rv: any) => {
+				.then((rv: any) => {
 					if (rv) {
 						message.success(data.success)
 						filter.loadingShow[index] = false
 					}
-                }
+				})
-            ).catch(res=>{
+				.catch((res) => {
 					filter.loadingShow[index] = false
-            });
+				})
+		}
+		const openDetail = () => {
+			let language = locale.value === "ENGLISH" ? "en" : "cn"
+			let url = `https://aida-global-design-awards.com.hk/${language}`
+			// 如果是dev环境把域名换成http://192.168.31.198
+
+			if (import.meta.env.VITE_APP_BASE_URL === "https://develop.api.aida.com.hk") {
+				url += "?env=dev"
+			}
+			window.open(url, "_blank")
+
+			//	router.push("/award/index")
 		}
 		onMounted(() => {
-			const { t, locale } = useI18n();
+			const currentLocale = locale.value
-			const currentLocale = locale.value;
 			let eventLangData: any
-			if(currentLocale == 'ENGLISH'){
+			if (currentLocale == "ENGLISH") {
 				eventLangData = eventData
 			} else {
 				eventLangData = eventDataCn
 			}
 			eventLangData.eventsItem.forEach((item: any) => {
 				if (item.id == router.currentRoute.value.query.eventId) {
-					filter.eventsDetail = item;
+					filter.eventsDetail = item
 				}
 			})
 		})
@@ -111,6 +155,7 @@ export default defineComponent({
 			likeFile,
 			setBack,
 			openButton,
+			openDetail
 		}
 	},
 	directives: {
@@ -120,9 +165,7 @@ export default defineComponent({
 			}
 		}
 	},
-    async mounted(){
+	async mounted() {}
-	
-    },
 })
 </script>
 <style lang="less">
@@ -176,7 +219,8 @@ 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%;
@@ -199,8 +243,19 @@ export default defineComponent({
 		}
 		.eventsDetail_content_right {
 			.modal_title_text {
-				letter-spacing: .4rem;
+				letter-spacing: 0.3rem;
 				font-weight: 600;
+				&-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 {
@@ -209,7 +264,6 @@ export default defineComponent({
 					}
 					li {
 						width: 48%;
-						
 					}
 					em {
 						// font-family: auto;
@@ -221,20 +275,44 @@ export default defineComponent({
 				.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 {
 				content: "";
 				display: block;
 				border-top: 3px solid;
 				height: 6rem;
 			}
+			.modal_title_text.award:last-child:after {
+				display: none;
 			}
 		}
 	}
+}
+.detail-btn {
+	// width: 11rem;
+	padding: 0 1.4rem;
+	height: 4rem;
+	line-height: 4rem;
+	text-align: center;
+	color: #fff;
+	border-radius: 2rem;
+	background-color: #000;
+	font-size: 1.4rem;
+	white-space: nowrap;
+	cursor: pointer;
+}
+.tips{
+	color: rgba(0, 0, 0, 0.45);
+	font-size: var(--aida-fsize1-4);
+	font-weight: 400;
+	letter-spacing: 0.3rem;
+}
+.modal_title_text.content.award{
+	line-height: 1.3;
+}
 </style>

src/component/HomePage/Generate.vue

@@ -531,7 +531,7 @@ export default defineComponent({
       }
     )
     const setSpeed = (item: any) => {
-      speed.speedData = item
+      speed.speedData = {...item}
     }
     onMounted(() => {
       if (props.msg == 'Sketchboard') {
@@ -734,6 +734,8 @@ export default defineComponent({
       let maxImg = 8
       if (this.type_.type2 == 'Sketchboard') {
         maxImg = 20
+      }else if(this.type_.type2 == 'Printboard'){
+		maxImg = 16
 	}
       let parent: any = this.$parent
       if (parent.isUseGenerate) {
@@ -853,9 +855,7 @@ export default defineComponent({
           level2Type = this.sketchboardList?.[0]?.categoryValue
             ? this.sketchboardList[0].categoryValue
             : ''
-          if (this.workspace.styleName) {
+            sloganText = `${this.workspace.styleName || 'all'},${sloganText}`
-            sloganText = `${this.workspace.styleName},${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/HomePage/renew.vue

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

src/component/HomePage/scaleVideo.vue

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

src/component/common/SelectImages.vue

@@ -517,6 +517,7 @@ defineExpose({
 /* 图片网格 */
 .image-grid {
   display: grid;
+  align-content: start;
   overflow-y: auto;
   grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
   gap: 16px;

src/component/home/design/index.vue

@@ -379,6 +379,7 @@ export default defineComponent({
 	setup(props,{emit}) {
 		const {t,locale} = useI18n()
 		const store = useStore();
+		const route = useRoute()
 		const editDesignType = reactive({
 			selectProbject:computed(()=>{
 				return store.state.Workspace.probjects
@@ -624,6 +625,7 @@ export default defineComponent({
 			collItemSize.collTime = setTimeout(()=>{
 			nextTick(()=>{
 				let parentWidth = likeItemDom.value.parentElement.offsetWidth
+				if(parentWidth == 0)return
 				collItemSize.widthValue.value = collItemSize.widthValue.value == -1?100:collItemSize.widthValue.value
 				collItemSize.widthValue.value = collItemSize.widthValue.value > parentWidth?parentWidth:collItemSize.widthValue.value
 				collItemSize.collValue = Math.floor(parentWidth / collItemSize.widthValue.value)
@@ -634,7 +636,6 @@ export default defineComponent({
 				
 				collItemSize.collStyle.width = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[0] + 'px'
 				collItemSize.collStyle.height = (collItemDom.value.offsetWidth - 30) / 3 * collItemSize.scale[1] + 'px'
-
 				collItemSize.likeStyle.width = collItemSize.itemStyle.width + 'px'
 				collItemSize.likeStyle.height = collItemSize.itemStyle.height + 'px'
 				let elArr = likeItemDom.value.children
@@ -744,6 +745,12 @@ export default defineComponent({
 					"userLikeId": likeItem.id
 				}
 				arrData.push(obj)
+				designData.selectLikeDesign.forEach((v:any)=>{
+					if(v.id === likeItem.id){
+						v.oldSort = v.sort
+						v.sort = likeItem.sort
+					}
+				})
 			})
 			let data = {
 				"userLikeGroupId": userGroupId.value,
@@ -1303,9 +1310,9 @@ export default defineComponent({
 					})
 					return
 				}
-				const parents = designData.selectLikeDesign.filter((item:any) => item.resultType === 'Design');
+				const parents = designData.selectLikeDesign.filter((item:any) => item.resultType === 'Design').filter((item:any) => likeDesignCollectionList.value.some((v:any) => (v.id === item.id)));
 				parents.map((parent:any) => {
-					parent.sort = parent.oldSort||parent.sort
+					parent.sort = likeDesignCollectionList.value.find((v:any) => v.id === parent.id)?.sort || parent.oldSort||parent.sort
 					delete parent.oldSort
 					return {
 					...parent,
@@ -1532,7 +1539,7 @@ export default defineComponent({
 					this.observerData.time = setTimeout(()=>{
 						
 						this.setSystemDesigner(0)
-						this.setDesignItemStyle()
+						// this.setDesignItemStyle()
 					},100)
 					// const { width } = entry.contentRect;
 				}
@@ -1930,6 +1937,7 @@ export default defineComponent({
 			this.disLikeLoading = true;
 			Https.axiosPost(Https.httpUrls.designDislike, data)
 				.then((rv: any) => {
+					console.log(rv)
 					if (rv) {
 						this.recycleDomHidden = true
 						this.store.commit("addDesignCollectionList", [design]);

src/component/home/design/tools.vue

@@ -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,

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,
+				style:rv.workspaceVO?.style || '',
-				styleId:rv.workspaceVO?.styleId,
+				styleId:rv.workspaceVO?.styleId || null,
-				styleName:rv.workspaceVO?.styleName,
+				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,
+				style:rv.workspaceVO.style || '',
-				styleId:rv.workspaceVO.styleId,
+				styleId:rv.workspaceVO.styleId || null,
-				styleName:rv.workspaceVO.styleName,
+				styleName:rv.workspaceVO.styleName || '',
 				sex:rv.workspaceVO.sex,
 				userBrandDnaImg:rv.workspaceVO.userBrandDnaImg,
 				userBrandDnaName:rv.workspaceVO.userBrandDnaName,

src/component/home/newProject/workspace.vue

@@ -41,10 +41,10 @@
 				<div class="center">{{ selectObject?.styleName?selectObject?.styleName:$t('Header.All') }}</div>
 				<div class="gallery_btn" @click="setStyle">{{ $t('Habit.Select') }}</div>
 			</div>
-			<div class="style brand marginBottom">
+			<!-- <div class="style brand marginBottom">
 				<div class="text">{{$t('Habit.Brand')}}:</div>
 				<div class="gallery_btn" @click="setBrandDNA">{{ $t('Habit.Select') }}</div>
-			</div>
+			</div> -->
 			<div class="brandImg" v-if="selectObject.userBrandDna"><img :src="selectObject.userBrandDnaImg"></div>
 			<div class="brandDNAStrenght marginBottom" v-if="selectObject.userBrandDna">
 				<div class="text" style="font-size: 1.6rem;">
@@ -179,9 +179,9 @@ export default defineComponent({
 			dataDom.brandDNA.init(data.selectObject);
 		}
 		const setWorkspaceStyle = (value:any)=>{
-			data.selectObject.styleName = value.name
+			data.selectObject.styleName = value.name || ''
-			data.selectObject.style = value.value
+			data.selectObject.style = value.value || ''
-			data.selectObject.styleId = value.id
+			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,
+						style:rv.workspaceVO?.style || '',
-						styleId:rv.workspaceVO?.styleId,
+						styleId:rv.workspaceVO?.styleId || null,
-						styleName:rv.workspaceVO?.styleName,
+						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'
         )
-
+        // 注意：尾帧通过专门的 watch (lastFrameList) 监听，不需要从这里过滤
-        lastFrameList.value = store.state.HomeStoreModule.uploadElement.filter(
+        // lastFrameList.value = store.state.HomeStoreModule.uploadElement.filter(
-          item => item.frameType === 'last'
+        //   item => item.frameType === 'last'
-        )
+        // )
         // 更新 showFirstFrameList 中项的选中状态
         showFirstFrameList.value.forEach((listItem: any) => {
           if (listItem.id == data.selectImg.id) {

src/component/modules/habitSetStyle.vue

@@ -102,9 +102,9 @@ setup(props,{emit}) {
 		// if(habitSetStyleData.styleList.length == 0){
 		// 	getStyleList()
 		// }
-		oldDataId = data.styleId
+		oldDataId = data.styleId || null
-		habitSetStyleData.selectStyle.id = data.styleId 
+		habitSetStyleData.selectStyle.id = data.styleId || null
-		habitSetStyleData.selectStyle.name = data.styleName 
+		habitSetStyleData.selectStyle.name = data.styleName  || ''
 		// habitSetStyleData.selectStyleId = 'feng2'
 	}
 	let setCover = (item:any)=>{
@@ -258,6 +258,7 @@ methods: {
 					display: flex;
 					justify-content: center;
 					align-items: center;
+					text-align: center;
 				}
 			}
 			.content_bottom_item:nth-child(4n){

src/lang/cn.ts

@@ -1532,7 +1532,8 @@ export default {
     LiquefactionTool: '液化工具'
   },
   event: {
-    back: '返回'
+    back: '返回',
+    detail:'查看详情'
   },
   admin: {
     allUser: '所有用户',

src/lang/en.ts

@@ -1184,7 +1184,7 @@ export default {
 	CanvasTitle: {
 		ModifySketch: 'Modify Sketch',
 		ModifyItem: 'Modify Item',
-	RedGreen: 'Edit Front and Back Section',
+		RedGreen: 'Edit Front and Back Section'
 	},
 	Canvas: {
 		Canvas: 'Canvas',
@@ -1559,7 +1559,7 @@ export default {
 		PointSelection: 'Point Selection',
 		MarqueeSelection: 'Marquee Selection',
 		BrushSelection: 'Brush Selection',
-	Erase: 'Erase',
+		Erase: 'Erase'
 	},
 	speedList: {
 		High: 'High',
@@ -1583,7 +1583,8 @@ export default {
 		LiquefactionTool: 'Liquefaction Tool'
 	},
 	event: {
-    back: 'Back'
+		back: 'Back',
+		detail: 'View Details'
 	},
 	admin: {
 		allUser: 'All User',
@@ -1657,7 +1658,7 @@ export default {
 		Cancel: 'Cancel',
 		SelectPlan: 'Select Plan',
 		AllPlan: 'All',
-    PlanStart:'This plan will be actived from',
+		PlanStart: 'This plan will be actived from'
 	},
 	Login: {
 		Login: 'Login',

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",
@@ -172,6 +178,12 @@ const routes: Array<RouteRecordRaw> = [
     meta: { enter: "all" },
     component: () => import("@/views/HomeRecommend.vue"),
   },
+  {
+    path: "/Square/:lang",
+    name: "HomeRecommendLang",
+    meta: { enter: "all" },
+    component: () => import("@/views/HomeRecommend.vue"),
+  },
   {
     path: "/administrator",
     name: "administrator",
@@ -325,6 +337,13 @@ const routes: Array<RouteRecordRaw> = [
         meta: { enter: 3 },
         component: () =>
           import("@/component/Administrator/SE/getGenerateFrequency/index.vue"),
+      },
+	  {
+        path: "globalAwardPopularity",
+        name: "globalAwardPopularity",
+        meta: { enter: 3 },
+        component: () =>
+          import("@/component/Administrator/globalAwardPopularity.vue"),
       },
     ],
   },

src/store/Detail/designDetail.ts

@@ -81,14 +81,16 @@ const DesignDetail : Module<DesignDetail,RootState> = {
 						left:v.layersObject[i].position?.[1],
 						width:v.layersObject[i].imageSize?.[0],
 						height:v.layersObject[i].imageSize?.[1],
-						transform:`scaleX(${v.layersObject[i].transpose?.[0] || 1}) scaleY(${v.layersObject[i].transpose?.[1] || 1}) rotate(${v.layersObject?.[i]?.rotate || 0}deg)`,
+						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,
 						top:0,
 					}
+					if(data?.fromType !== 'resize'){
 						v.maskMinioUrl = v.layersObject?.[0]?.maskMinioUrl
 						v.maskUrl = v.layersObject?.[0]?.maskUrl
+					}
 					v.layersObject[i].designOpenrtionBtn = false
 					if(v.layersObject[i].imageCategory.indexOf("back") == -1){
 						front[index] = v.layersObject[i]

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

@@ -198,6 +198,13 @@ const all = (t)=>{
       route: '/administrator/subscriptionPlan',
       key: 'sub14',
       isShow: true
+    },
+    {
+      name: 'Global Award Popularity',
+      icon: 'usetime',
+      route: '/administrator/globalAwardPopularity',
+      key: 'sub15',
+      isShow: true
     }
   ]
 }

src/tool/https.js

@@ -346,6 +346,7 @@ export const Https = {
 		switchSubscribePlan: '/api/subscription_plan/switchSubscriptionPlan', // 切换管理员订阅计划
 		switchSubAccountSubscribePlan:
 			'/api/subscription_plan/switchSubAccSubscriptionPlan', // 切换子账号订阅计划
+		getGlobalAwardPopularity: '/api/global-award/page/visit/count', // 获取global award流量
 
 		//云生成
 		designCloud: `/api/design/designCloud`, //创建云生成

src/tool/listData.js

@@ -272,12 +272,12 @@ const navTypeList = (t)=>{
 				// },
 
 
-				{
+				// {
-					icon:'fi fi-rr-puzzle-alt',
+				// 	icon:'fi fi-rr-puzzle-alt',
-					value:'deReconstruction',
+				// 	value:'deReconstruction',
-					label:t('Header.toolsDeReconstruction'),
+				// 	label:t('Header.toolsDeReconstruction'),
-					router:'tools=deReconstruction'
+				// 	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',
+				// 	icon:'fi fi-rr-cubes',
-					value:'patternMaking3D',
+				// 	value:'patternMaking3D',
-					label:t('Header.toolsPatternMaking'),
+				// 	label:t('Header.toolsPatternMaking'),
-					router:'tools=patternMaking3D'
+				// 	router:'tools=patternMaking3D'
-				},
+				// },
-				{
+				// {
-					icon:'fi fi-rr-pen-swirl',
+				// 	icon:'fi fi-rr-pen-swirl',
-					value:'canvasUpload',
+				// 	value:'canvasUpload',
-					label:t('Header.toolsCanvas'),
+				// 	label:t('Header.toolsCanvas'),
-					router:'tools=canvasUpload'
+				// 	router:'tools=canvasUpload'
-				},
+				// },
 			]
 		},
 		library:{
@@ -340,12 +340,12 @@ const navTypeList = (t)=>{
 					value:'Models',
 					router:'library=Models'
 				},
-				{
+				// {
-					icon:'fi-ss-gem',
+				// 	icon:'fi-ss-gem',
-					label:t('LibraryPage.brandDNA'),
+				// 	label:t('LibraryPage.brandDNA'),
-					value:'MyBrand',
+				// 	value:'MyBrand',
-					router:'library=MyBrand'
+				// 	router:'library=MyBrand'
-				},
+				// },
 			]
 		},
 		// history:{

src/tool/util.js

@@ -672,6 +672,17 @@ function sketchToMask(sketchImage) {
 		img.src = sketchImage;
 	});
 }
+
+function isValidUrl(string) {
+	try {
+		const url = new URL(string)
+		// 通常我们只需要 http 或 https 协议
+		return url.protocol === "http:" || url.protocol === "https:"
+	} catch (err) {
+		return false
+	}
+}
+
 export {
 	isEmail,
 	getUploadUrl,
@@ -695,5 +706,6 @@ export {
 	calculateGradientCoordinate,
 	segmentImage,
 	UrlToFile,
-  sketchToMask
+	sketchToMask,
+	isValidUrl
 }

src/views/AwardPage/components/ApplySection.vue

@@ -8,13 +8,13 @@
 			class="title animation-element"
 			ref="applyTitleRef"
 		>
-			How to Apply
+			{{ $t('AwardsPage.howToApply') }}
 		</div>
 		<div
 			class="sub-title animation-element"
 			ref="applySubTitleRef"
 		>
-			Step by step
+			{{ $t('AwardsPage.stepByStep') }}
 		</div>
 		<div
 			class="requirments-list flex flex-col"
@@ -29,26 +29,26 @@
 					:style="{ background: item.background || '#fff' }"
 				>
 					<div class="item-header flex flex-center">
-						<div class="item-title">{{ item.type }}</div>
+						<div class="item-title">{{ $t(item.type) }}</div>
 					</div>
 					<div class="context-container flex flex-center">
 						<div
 							class="context"
 							v-for="el in item.desc"
 						>
-							{{ el }}
+							{{ $t(el) }}
 						</div>
 						<div
 							class="list"
 							v-if="item.listTitle"
 						>
-							<div class="list-title">{{ item.listTitle }}</div>
+							<div class="list-title">{{ $t(item.listTitle) }}</div>
 							<ul class="list-items">
 								<li
 									class="list-item"
 									v-for="el in item.list"
 								>
-									{{ el }}
+									{{ $t(el) }}
 								</li>
 							</ul>
 						</div>
@@ -57,43 +57,36 @@
 			</div>
 			<div class="bottom flex">
 				<div class="step-3 flex flex-col animation-element" ref="step3Ref">
-					<div class="header">Step 3. Prepare Your Submission</div>
+					<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>Process Video</div>
+									<div>{{ $t('AwardsPage.processVideo') }}</div>
 								</div>
 								<div class="desc-wrapper flex flex-col space-between">
 									<div class="item-desc">
-										Include a screen‑recorded video
+										{{ $t('AwardsPage.processVideoDesc') }}
-										<br />
-										your creative process
-										<br />
-										using AiDA.​
-										<br />
 									</div>
 									<ul class="desc-lists">
 										<div class="desc-lists-title">
-											Video requirements:
+											{{ $t('AwardsPage.videoRequirements') }}
 										</div>
-										<li>Format: MP4</li>
+										<li>{{ $t('AwardsPage.videoFormat') }}</li>
-										<li>Resolution: 1080×1920 px</li>
+										<li>{{ $t('AwardsPage.videoResolution') }}</li>
-										<li>Duration: Maximum 1 minute</li>
+										<li>{{ $t('AwardsPage.videoDuration') }}</li>
-										<li>File size: Maximum 20MB</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>File Name</div>
+									<div>{{ $t('AwardsPage.fileName') }}</div>
 								</div>
 								<div class="item-desc indent">
-									AiDAGlobalDesignAward
+									{{ $t('AwardsPage.fileNameDesc') }}
-									<br />
-									2026_[Your Full Name]​
 								</div>
 							</div>
 						</div>
@@ -101,7 +94,7 @@
 							<div class="content-item flex flex-col">
 								<div class="item-header flex align-center">
 									<div class="point"></div>
-									<div>Design Portfolio(PDF)</div>
+									<div>{{ $t('AwardsPage.designPortfolio') }}</div>
 								</div>
 								<div
 									class="desc-wrapper flex-1 flex flex-col space-between"
@@ -109,25 +102,23 @@
 									<ul class="desc-lists">
 										<div class="desc-lists-title">
 											<p>
-												Submit one single PDF file that includes:
+												{{ $t('AwardsPage.submitPdf') }}
 											</p>
-											<p>Required structure:</p>
+											<p>{{ $t('AwardsPage.requiredStructure') }}</p>
 										</div>
-										<li>Design title</li>
+										<li>{{ $t('AwardsPage.pdfDesignTitle') }}</li>
-										<li>Moodboard</li>
+										<li>{{ $t('AwardsPage.pdfMoodboard') }}</li>
-										<li>Concept explanation</li>
+										<li>{{ $t('AwardsPage.pdfConcept') }}</li>
-										<div>(How to used AiDA to develop design)</div>
+										<div>{{ $t('AwardsPage.pdfConceptDesc') }}</div>
 									</ul>
 									<ul class="desc-lists">
 										<div class="desc-lists-title">
-											<p>PDF requirements:</p>
+											<p>{{ $t('AwardsPage.pdfRequirements') }}</p>
 										</div>
-										<li>Maximum 15 pages</li>
+										<li>{{ $t('AwardsPage.pdfMaxPages') }}</li>
-										<li>Maximum file size: 20MB</li>
+										<li>{{ $t('AwardsPage.pdfMaxSize') }}</li>
 										<li>
-											Language: English or native language
+											{{ $t('AwardsPage.pdfLanguage') }}
-											<br />
-											with English translation
 										</li>
 									</ul>
 								</div>
@@ -137,31 +128,22 @@
 				</div>
 				<div class="step-4 animation-element" ref="step4Ref">
 					<div class="header flex flex-col flex-center">
-						<p>Step 4. Finalist Requirement</p>
+						<p>{{ $t('AwardsPage.step4Title') }}</p>
-						<p class="sub-title">(for top 20 Designers)</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">
-										The 20 finalists will be required to
+										{{ $t('AwardsPage.step4Desc') }}
-										<br />
-										submit physical garments for final
-										<br />
-										evaluation
 									</div>
-									<li>Number of pieces: 1</li>
+									<li>{{ $t('AwardsPage.finalistPieces') }}</li>
 									<li>
-										Garments must be produced
+										{{ $t('AwardsPage.finalistBasedOn') }}
-										<br />
-										based on the submitted
-										<br />
-										AiDA-generated designs
 									</li>
 									<li>
-										Shipping instructions will be provided by
+										{{ $t('AwardsPage.finalistShipping') }}
-										Code-create
 									</li>
 								</ul>
 							</div>
@@ -175,25 +157,24 @@
 
 <script setup lang="ts">
 	import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+	import { useI18n } from 'vue-i18n'
 	import { gsap } from 'gsap'
 
+	const { t } = useI18n()
+
 	const leftRequirment = ref([
 		{
-			type: 'Step 1. Become an\nAiDA Subscriber​',
+			type: 'AwardsPage.step1Title',
-			desc: [
+			desc: ['AwardsPage.step1Desc']
-				'All applicants must be active\nAiDA subscribers at the time of\nsubmission.​ You may subscribe\nunder either a monthly or yearly plan.​'
-			]
 		},
 		{
-			type: 'Step 2. Create Your Design Using AiDA',
+			type: 'AwardsPage.step2Title',
-			desc: [
+			desc: ['AwardsPage.step2Desc'],
-				'Applicants must create their\ndesigns exclusively using the\nAiDA platform.​ '
+			listTitle: 'AwardsPage.step2ListTitle',
-			],
-			listTitle: 'Your work shold clearly demonstrate:',
 			list: [
-				'· How AiDA is used as a creative tool',
+				'AwardsPage.step2List[0]',
-				'· Your design concept and creative direction',
+				'AwardsPage.step2List[1]',
-				'· The intergration of AI and human creativity'
+				'AwardsPage.step2List[2]'
 			],
 			background: '#F9F9F9'
 		}
@@ -463,7 +444,7 @@
 							.item-desc {
 								font-family: 'Instrument';
 								font-weight: 400;
-								font-size: 24px;
+								font-size: 2.4rem;
 								color: #585858;
 								&.indent {
 									padding-left: 3.8rem;

src/views/AwardPage/components/Bloom.vue

@@ -4,46 +4,44 @@
 			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"
 		>
 			<p class="section-1">
-				The
+				{{ $t('AwardsPage.bloomText.desc1.regular1') }}
-				<span class="arial-bold">AiDA Global Design Award 2026</span>
+				<span class="arial-bold">
-				is an
+					{{ $t('AwardsPage.bloomText.desc1.bold1') }}
-				<span class="arial-bold">international design competition</span>
+				</span>
-				hosted by
+				{{ $t('AwardsPage.bloomText.desc1.regular2') }}
-				<span class="arial-bold">Code‑Create</span>
+				<span class="arial-bold">
-				, a globally leading
+					{{ $t('AwardsPage.bloomText.desc1.bold2') }}
-				<br />
+				</span>
-				<span class="arial-bold">AI fashion solutions provider,</span>
+				{{ $t('AwardsPage.bloomText.desc1.regular3') }}
-				celebrating the future of creativity powered by artificial intelligence.
+				<span class="arial-bold">
-				<br />
+					{{ $t('AwardsPage.bloomText.desc1.bold3') }}
-				Bringing together designers from around the world, AiDA empowers AI as a
+				</span>
-				creative partner—pushing fashion beyond
+				{{ $t('AwardsPage.bloomText.desc1.regular4') }}
-				<br />
+				<span class="arial-bold">
-				traditional boundaries and unlocking new possibilities where technology
+					{{ $t('AwardsPage.bloomText.desc1.bold4') }}
-				amplifies human imagination.​
+				</span>
+				{{ $t('AwardsPage.bloomText.desc1.regular5') }}
 			</p>
 			<p class="section-2">
-				Under the theme “
+				{{ $t('AwardsPage.bloomText.desc2.regular1') }}
 				<span class="arial-bold">
-					Where Imagination Meets Innovation, Creativity Blooms,
+					{{ $t('AwardsPage.bloomText.desc2.bold1') }}
 				</span>
-				” participants are invited to transform bold ideas
+				{{ $t('AwardsPage.bloomText.desc2.regular2') }}
-				<br />
-				into extraordinary designs, seamlessly merging human artistry with
-				artificial intelligence to shape the next era of fashion.
 			</p>
 		</div>
 	</div>
@@ -51,8 +49,11 @@
 
 <script setup lang="ts">
 	import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
+	import { useI18n } from 'vue-i18n'
 	import { gsap } from 'gsap'
 
+	const { t } = useI18n()
+
 	const titleRef = ref<HTMLElement | null>(null)
 	const subtitleRef = ref<HTMLElement | null>(null)
 	const textRef = ref<HTMLElement | null>(null)
@@ -192,6 +193,7 @@
 			padding: 0 21.5rem;
 			line-height: 4.5rem;
 			margin-bottom: 12.3rem;
+			white-space: pre-line;
 			.section-2 {
 				margin-top: 4rem;
 			}

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="name">{{ $t(item.name) }}</div>
-				<div class="desc">{{ item.desc }}</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
@@ -29,15 +29,15 @@
 				:key="item.name"
 			>
 				<div class="prize-money">
-					{{ item.money }}
+					{{ $t(item.money) }}
 				</div>
-				<div class="prize-name">{{ item.name }}</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>
@@ -47,29 +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',
+			money: 'AwardsPage.grandMoney',
-			name: 'Grand Awards',
+			name: 'AwardsPage.grandAwards',
-			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
+			desc: [
+				'AwardsPage.cashAward',
+				'AwardsPage.awardCertificate',
+				'AwardsPage.globalMediaExposure'
+			]
 		},
 		{
-			money: 'US$3000',
+			money: 'AwardsPage.goldMoney',
-			name: 'Gold Awards',
+			name: 'AwardsPage.goldAwards',
-			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
+			desc: [
+				'AwardsPage.cashAward',
+				'AwardsPage.awardCertificate',
+				'AwardsPage.globalMediaExposure'
+			]
 		},
 		{
-			money: 'US$2000',
+			money: 'AwardsPage.silverMoney',
-			name: 'Silver Awards',
+			name: 'AwardsPage.silverAwards',
-			desc: ['Cash Award', 'Award Ceritificate', 'Global Media Exposure']
+			desc: [
+				'AwardsPage.cashAward',
+				'AwardsPage.awardCertificate',
+				'AwardsPage.globalMediaExposure'
+			]
 		},
 		{
-			money: 'Award\nCertification',
+			money: 'AwardsPage.awardCertification',
-			name: 'Finalists',
+			name: 'AwardsPage.finalists',
-			desc: ['Award Ceritificate', 'Global Media Exposure'],
+			desc: ['AwardsPage.TravelAllowance', 'AwardsPage.globalMediaExposure'],
-			smaller: true
+			smaller: !props.isZh
 		}
 	]
 

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="name">{{ $t(item.name) }}</div>
-				<div class="desc">{{ item.desc }}</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',
+		name: 'AwardsPage.originality',
-		desc: 'Unique perspective and\ninnovative approach to\nfashion design',
+		desc: 'AwardsPage.originalityDesc',
 		style: { width: '13rem', height: '17rem' }
 	},
 	{
 		icon: criteria2,
-		name: 'Creativity',
+		name: 'AwardsPage.creativity',
-		desc: 'Artistic vision and exceptional\ndesign excellence',
+		desc: 'AwardsPage.creativityDesc',
 		style: { width: '16rem', height: '18rem' }
 	},
 	{
 		icon: criteria3,
-		name: 'AiDA Integration',
+		name: 'AwardsPage.aidaIntegration',
-		desc: 'Effective application of\nAiDA functions',
+		desc: 'AwardsPage.aidaIntegrationDesc',
 		style: { width: '16rem', height: '18rem' }
 	},
 	{
 		icon: criteria4,
-		name: 'Execution',
+		name: 'AwardsPage.execution',
-		desc: 'Quality of presentation and\ntechnical craftsmanship',
+		desc: 'AwardsPage.executionDesc',
 		style: { width: '18.8rem', height: '18rem' }
 	}
 ])

src/views/AwardPage/components/Slogan.vue

@@ -10,32 +10,35 @@
 			:key="item.number"
 			:style="{ '--delay': `${idx * 0.18}s` }"
 		>
-			<div class="number">{{ item.number }}</div>
+			<div class="number">{{ $t(item.number) }}</div>
-			<div class="label">{{ item.label }}</div>
+			<div class="label">{{ $t(item.label) }}</div>
 			<div class="line"></div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { ref, onMounted, onUnmounted } from 'vue'
+	import { computed, ref, onMounted, onUnmounted } from 'vue'
+	import { useI18n } from 'vue-i18n'
+
+	const { t } = useI18n()
 
 	const blocksList = ref([
 		{
-			number: 'UP TO\nUS$9000',
+			number: 'AwardsPage.totalCashPrizes',
-			label: 'In total cash prizes'
+			label: 'AwardsPage.totalCashPrizesLabel'
 		},
 		{
-			number: 'GLOBAL MEDIA EXPOSE',
+			number: 'AwardsPage.globalMediaExpose',
-			label: 'Showcased by top\ninternational media platforms​'
+			label: 'AwardsPage.globalMediaExposeLabel'
 		},
 		{
-			number: 'NETWORKING\n OPPORTUNITIES',
+			number: 'AwardsPage.networkingOpportunities',
-			label: 'Build connections with\ndesigners and industry leaders​'
+			label: 'AwardsPage.networkingOpportunitiesLabel'
 		},
 		{
-			number: 'AWARD CEREMONY\nIN HONG KONG​',
+			number: 'AwardsPage.awardCeremonyHongKong',
-			label: 'Travel allowance\nprovided for finalists​'
+			label: 'AwardsPage.awardCeremonyLabel'
 		}
 	])
 	const root = ref<HTMLElement | null>(null)

src/views/AwardPage/components/Success.vue

@@ -5,9 +5,9 @@
 			alt=""
 			class="icon-img"
 		/>
-		<div class="title">{{ info.title }}</div>
+		<div class="title">{{ $t(info.title) }}</div>
 		<div class="desc">
-			{{ info.desc }}
+			{{ $t(info.desc) }}
 			<!-- <div>
 				Please review your submitted information in the AiDA in-platform message.
 			</div>
@@ -21,8 +21,11 @@
 
 <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,
@@ -34,14 +37,14 @@
 		if (props.isExpired) {
 			return {
 				icon: expiredIcon,
-				title: 'Application Deadline Passed',
+				title: 'AwardsPage.deadlinePassed',
-				desc: 'The submission deadline for AIDA Global Fashion Award 2026 has ended.\nWe are no longer accepting new applications. '
+				desc: 'AwardsPage.deadlinePassedDesc'
 			}
 		} else {
 			return {
 				icon: successIcon,
-				title: 'Submission Successful',
+				title: 'AwardsPage.submissionSuccessful',
-				desc: 'Please review your submitted information in the AiDA in-platform message.\nYou may edit it if needed. Competition updates and results will be sent via email.'
+				desc: 'AwardsPage.submissionSuccessfulDesc'
 			}
 		}
 	})

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="timeline-title">{{ $t('AwardsPage.competitionTimeline') }}</div>
-		<div class="desc">Shaping the Future</div>
+		<div class="desc">{{ $t('AwardsPage.shapingTheFuture') }}</div>
-		<div class="timeline-point">
-			<div class="labels-row flex align-center">
 		<div
-					class="item-label flex flex-col"
+			class="timeline-point"
+			ref="timelineRef"
+		>
+			<!-- 顶部标签行 -->
+			<div class="grid-row labels-row">
+				<div
+					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>
+				<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"
-					v-for="item in points"
-					:key="'icon-' + item.time"
 					/>
 				</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,43 +67,47 @@
 </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: 'Application',
+			label: 'AwardsPage.timelineApplicationLabel',
-			subLabel:'Deadline',
+			subLabel: 'AwardsPage.timelineDeadlineLabel',
-			time: 'Jul 15',
+			time: 'AwardsPage.timeJul15',
-			desc: 'Application deadline and\nentry review process\nbegins.'
+			desc: 'AwardsPage.applicationDeadlineDesc'
 		},
 		{
-			label: `20 Finallists`,
+			label: 'AwardsPage.twentyFinalistsAnnounced',
-			subLabel: 'Announced',
+			subLabel: 'AwardsPage.announcedLabel',
-			time: 'Aug 30',
+			time: 'AwardsPage.timeAug30',
-			desc: 'Announcement of 20\nfinalists entering final\nevaluation stage.'
+			desc: 'AwardsPage.twentyFinalistsDesc'
 		},
 		{
-			label: `Finallist\nSubmission`,
+			label: 'AwardsPage.finalistSubmission',
-			subLabel: 'Deadline',
+			subLabel: 'AwardsPage.submissionLabel',
-			time: 'Sept 30',
+			time: 'AwardsPage.timeSept30',
-			desc: 'Finalists submit\ncompleted outfits for\nfinal assessment.'
+			desc: 'AwardsPage.finalistSubmissionDesc'
 		},
 		{
-			label: 'Receiving Outfits',
+			label: 'AwardsPage.receivingOutfits',
-			subLabel:'from Finallists',
+			subLabel: 'AwardsPage.fromFinalistsLabel',
-			time: 'October',
+			time: 'AwardsPage.timeOctober',
-			desc: 'AiDA receives physical\noutfits from all 20\nfinalists.'
+			desc: 'AwardsPage.receivingOutfitsDesc'
 		},
 		{
-			label: 'Award',
+			label: 'AwardsPage.awardCeremony',
-			subLabel:'Ceremony',
+			subLabel: 'AwardsPage.ceremonyLabel',
-			time: 'Nov 12',
+			time: 'AwardsPage.timeNov12',
-			desc: 'Award Ceremony &\nCommunity Gathering\n– Soho House.'
+			desc: 'AwardsPage.awardCeremonyDesc'
-		},
+		}
 	])
 
 	const playAnimation = () => {
@@ -120,7 +132,7 @@
 				},
 				{
 					clipPath: 'inset(0 0% 0 0)',
-					duration: 1.6,
+					duration: 1.3,
 					ease: 'power1.out'
 				},
 				'start'
@@ -157,16 +169,14 @@
 			)
 		}
 
-		// 行内文字（标签、时间、描述）与 start 同步开始
+		// 行内文字（标签、时间、描述、图标）与 start 同步开始
-		const textItems = containerRef.value.querySelectorAll(
+		const textItems = containerRef.value.querySelectorAll('.grid-cell')
-			'.item-label, .item-time, .item-desc .txt'
-		)
 		if (textItems && textItems.length) {
 			tl.from(
 				textItems,
 				{
-					autoAlpha: 0.5,
+					// autoAlpha: 0.5,
-					duration: 0.6,
+					duration: 0.7,
 					stagger: 0.08,
 					ease: 'power2.out'
 				},
@@ -174,22 +184,6 @@
 			)
 		}
 
-		// 所有文字与线条完成后，立即开始点图标动画（按顺序出现）
-		const icons = containerRef.value.querySelectorAll('.point-icon')
-		if (icons && icons.length) {
-			// 与 'start' 标签同步开始：改为纯淡入动画（移除缩放）
-			tl.from(
-				icons,
-				{
-					autoAlpha: 0,
-					duration: 2,
-					stagger: 0.12,
-					ease: 'power2.out'
-				},
-				'start+=0.3'
-			)
-		}
-
 		hasAnimated.value = true
 	}
 
@@ -199,8 +193,8 @@
 		await nextTick()
 		if (!containerRef.value) return
 		observer = new IntersectionObserver(
-			(entries) => {
+			entries => {
-				entries.forEach((entry) => {
+				entries.forEach(entry => {
 					if (entry.isIntersecting) {
 						playAnimation()
 					}
@@ -224,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 {
@@ -248,42 +242,45 @@
 			will-change: clip-path;
 			flex: 1;
 			width: 100%;
-			margin-top: 12rem;
+			margin-top: 11rem;
-			padding: 0 21.2rem 0 22rem;
+			padding: 0 13.8rem;
 			position: relative;
 			z-index: 2;
 
-			.labels-row {
+			// 主网格布局：5列
-				position: relative;
+			display: grid;
-				z-index: 2;
+			grid-template-columns: repeat(5, 1fr);
-				margin-bottom: 8rem;
+			grid-template-rows: auto auto auto auto;
-				.item-label {
+			grid-column-gap: 0;
-					flex: 1;
+			grid-row-gap: 0;
-					color: #fff;
+
-					font-family: 'PoppinsBold';
+			// 所有 grid 子行的通用样式
-					font-weight: 600;
+			.grid-row {
-					font-size: 2.8rem;
+				display: grid;
-					text-align: center;
+				grid-template-columns: repeat(5, 1fr);
-					white-space: pre-line;
+				grid-column: 1 / -1;
-					// height: 6rem;
+			}
+
+			.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 {
+				margin-bottom: 1.6rem;
-					width: 6.4rem;
+
-					height: 6.4rem;
-					display: block;
-					margin: 0 auto;
-					z-index: 2;
-				}
 				.timeline-line {
-					width: calc(100% + 22rem + 21.2rem);
+					position: absolute;
+					top: 50%;
 					left: -22rem;
+					right: -21.2rem;
 					height: 0.15rem;
 					background: linear-gradient(
 						90deg,
@@ -293,40 +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 {
+				.time-cell {
-					flex: 1;
 					color: #f95750;
 					font-family: 'Arial';
 					font-weight: 400;
 					font-size: 2.8rem;
 					line-height: 4.5rem;
-					text-align: center;
 				}
 			}
 
+			// 描述行
 			.descs-row {
-				.item-desc {
+				.desc-cell {
-					flex: 1;
 					.txt {
 						font-family: 'Arial';
 						font-weight: 400;
 						font-size: 2rem;
 						text-align: center;
 						color: #e0e0e0;
-						width: 31.2rem;
+						width: 100%;
-						height: 10.2rem;
+						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="text">{{ $t(text) }}</div>
-      <div class="tips">{{ tips }}</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…',
+		uploading: 'AwardsPage.uploadInProgress',
-		success: 'Uploaded Successfully',
+		success:'AwardsPage.uploadSuccess',
-		error: 'Upload failed'
+		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

@@ -83,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 = () => {
@@ -110,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'
 		}
 	})
 

src/views/AwardPage/index.vue

@@ -1,8 +1,11 @@
 <template>
-	<div class="award-page">
+	<div
+		class="award-page"
+		:class="{ 'is-zh': isZh }"
+	>
 		<div class="banner">
 			<video
-				src="@/assets/images/award/banner.mp4"
+				:src="bannerUrl"
 				autoplay
 				muted
 				loop
@@ -15,13 +18,13 @@
 				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 class="ddl">{{ $t('AwardsPage.applicationDeadline') }}</div>
 			</div>
 		</div>
 
@@ -29,14 +32,15 @@
 		<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'
@@ -46,7 +50,19 @@
 	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')
@@ -63,7 +79,7 @@
 		height: 2.4rem;
 	}
 	.banner {
-		height: 108rem;
+		height: 100rem;
 		// background: url('@/assets/images/award/banner.png') no-repeat;
 		// background-size: cover;
 		position: relative;
@@ -102,12 +118,26 @@
 				left: 0;
 				text-align: center;
 				width: 41rem;
-				font-family: 'Arial';
+				font-family: 'ArialBold';
-				font-weight: 400;
+				font-weight: 700;
 				font-size: 2rem;
 				line-height: 2.2rem;
 				color: #232323e5;
 			}
 		}
 	}
+
+	.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;
+			}
+		}
+	}
 </style>

src/views/HomeMain.vue

@@ -400,7 +400,7 @@
 					<a href="https://www.facebook.com/CodeCreateAI" target="_blank" >
 						<img src="@/assets/images/socialMediaLogo/faceBookIcon.svg" alt="">
 					</a>
-					<a href="https://www.youtube.com/@AiDA-3.1" target="_blank" >
+					<a href="https://www.youtube.com/@Code-Create_AiDA" target="_blank" >
 						<img src="@/assets/images/socialMediaLogo/socialIcons.svg" alt="">
 					</a>
 					<a href="https://www.linkedin.com/company/code-create-limited" target="_blank" >

src/views/HomeRecommend.vue

@@ -62,7 +62,7 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
 import { useStore } from 'vuex'
 import { setLang } from '@/tool/guide'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { gsap, TweenMax } from 'gsap'
 import { ScrollTrigger } from 'gsap/ScrollTrigger'
 export default defineComponent({
@@ -71,6 +71,7 @@ export default defineComponent({
 		const {t, locale} = useI18n()
     const store = useStore()
     const router = useRouter()
+	const route = useRoute()
     let registerModel = ref()
     let data = reactive({})
 
@@ -117,7 +118,14 @@ export default defineComponent({
     onMounted(() => {
       window.addEventListener('resize', updataIsMoblie)
       // 初始化语言设置
-      const savedLang = localStorage.getItem('loginLanguage')
+      let savedLang = localStorage.getItem('loginLanguage')
+	  if(route?.params?.lang == 'cn'){
+		savedLang = 'CHINESE_SIMPLIFIED'
+        localStorage.setItem('loginLanguage', savedLang)
+	  }{
+		savedLang = 'ENGLISH'
+        localStorage.setItem('loginLanguage', savedLang)
+	  }
       if (savedLang) {
         isChinese.value = savedLang === 'CHINESE_SIMPLIFIED'
         locale.value = savedLang

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 || 'all'},${sloganText}`
-						sloganText = `${this.workspace.styleName},${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'
       }