Merge branch 'dev_vite' of ssh://18.167.251.121:10002/aidlab/aida_front into dev_vite

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

@@ -63,6 +63,10 @@
 							$t("Canvas.CreateAndCopy")
 						}}</span>
 					</div>
+					<div class="action-btn" @click="onReset">
+						<svg-icon name="CCut" size="26" />
+						<span class="btn-text">清空当前点位</span>
+					</div>
 				</div>
 			</div>
 		</div>
@@ -226,12 +230,16 @@
 
 	// 创建
 	function onCreate() {
-		
+		props.partManager.createPart();
 	}
 	// 复制并创建
 	function onCopyCreate() {
 		
 	}
+	// 清空当前点位
+	function onReset() {
+		props.partManager.clearPart();
+	}
 
 </script>
 
@@ -410,7 +418,7 @@
 
 	.tool-actions {
 		display: grid;
-		grid-template-columns: repeat(2, 1fr);
+		grid-template-columns: repeat(3, 1fr);
 		gap: 5px;
 		padding: 0 30px;
 	}

src/component/Canvas/CanvasEditor/index.vue

@@ -144,6 +144,7 @@ const props = defineProps({
   },
 });
 
+const loading = ref(false); 
 // 引用和状态
 const canvasRef = ref(null);
 const canvasContainerRef = shallowRef(null);
@@ -277,6 +278,7 @@ onMounted(async () => {
   canvasManager.canvas.activeLayerId = activeLayerId;
   canvasManager.activeLayerId = activeLayerId;
   canvasManager.canvas.activeElementId = activeElementId;
+  canvasManager.canvas.loading = loading;
 
   // 创建命令管理器
   commandManager = new CommandManager({
@@ -349,7 +351,7 @@ onMounted(async () => {
   });
 
   // 绑定快捷键事件
-  keyboardManager.init();
+  if(!props.hideCanvas) keyboardManager.init();
   // 绑定画布操作事件
   canvasManager.setupCanvasEvents(activeElementId, layerManager);
   canvasManager.setupCanvasInitEvent(handleCanvasInit); // 绑定画布初始化事件
@@ -1392,6 +1394,7 @@ defineExpose({
     />
 	<!-- 上传图片遮罩 -->
 	<div v-show="isDragOver" class="dragover-tip"></div>
+	<div class="loading" v-show="loading"><a-spin :delay="0.5" /></div>
   </div>
 </template>
 
@@ -1466,6 +1469,9 @@ defineExpose({
   top: 0;
   bottom: 0;
 }
+.app-container >.loading{
+	position: absolute;
+}
 
 .background-grid {
   --offsetX: 50%;

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

@@ -1,5 +1,5 @@
 import { fabric } from "fabric-with-all";
-import { generateId } from "../utils/helper";
+import { traceImageContour, imageToCanvas } from "../utils/helper";
 import { OperationType } from "../utils/layerHelper";
 import { CreateSelectionCommand } from "../commands/SelectionCommands";
 import { ClearSelectionCommand } from "../commands/LassoCutoutCommand";
@@ -34,15 +34,6 @@ export class PartManager {
 
 		// 状态
 		this.isActive = false;
-		this.partObject = null; // 当前选区对象
-		this.partId = "part_selector";
-		this.defaultCursor = "default";
-
-		// 绘制状态
-		this.drawingObject = null;
-		this.startPoint = null;
-		this.partPath = null; // 存储选区路径数据
-
 
 		// 不再直接绑定事件处理函数
 		this._mouseDownHandler = null;
@@ -58,10 +49,15 @@ export class PartManager {
 			OperationType.PART_ERASER,
 		];
 
-		this.pointList = []; // 存储点选坐标
 
 		// 当前工具
 		this.activeTool = this.toolManager.activeTool;
+
+		this.partGroup = null; // 当前选区对象
+		this.partId = "part_selector";
+		this.partCanvas = null;// 选区画布
+		// 点选工具相关
+		this.pointList = []; // 存储点选坐标
 	}
 
 	/**
@@ -82,15 +78,13 @@ export class PartManager {
 		else if (wasActive && !this.isActive) {
 			this.cleanupEvents();
 			this.clearPartObject();
+			this.clearPointData();
 		}
 	}
 
-	/**
+	/** 初始化选区相关事件 */
-	 * 初始化选区相关事件
-	 */
 	initEvents() {
 		if (!this.canvas || this._mouseDownHandler) return; // 避免重复初始化
-		this.defaultCursor = this.canvas.defaultCursor;
 
 		// 保存实例引用，用于事件处理函数中
 		const self = this;
@@ -187,9 +181,7 @@ export class PartManager {
 		document.addEventListener("keydown", this._keyDownHandler);
 	}
 
-	/**
+	/** 清理事件监听 */
-	 * 清理事件监听
-	 */
 	cleanupEvents() {
 		if (!this.canvas) return;
 
@@ -212,20 +204,19 @@ export class PartManager {
 		}
 	}
 
-	// 点选工具模式下点击事件处理
+	/** 点选工具模式下点击事件处理 */
 	_pointDownkHandler(options) {
 		// const button = options.button;
 		// const isLeft = button === 1;// 左键1（添加）  右键3（删除）
 		// const icon = `url("${isLeft ? addIcon : removeIcon}") 16 16, default`
 		// this.canvas.upperCanvasEl.style.cursor = icon;
 	}
-	// 点选工具模式下移动事件处理
+	/** 点选工具模式下移动事件处理 */
 	_pointMoveHandler(options) { }
-	// 点选工具模式下抬起事件处理
+	/** 点选工具模式下抬起事件处理 */
 	async _pointUpHandler(options) {
 		const button = options.button;
 		const isLeft = button === 1;// 左键1（添加）  右键3（删除）
-		this.canvas.upperCanvasEl.style.cursor = this.defaultCursor;
 		const fixedObject = this.canvasManager.getFixedLayerObject();
 		if (!fixedObject) return console.warn("未找到固定图层");
 		const { x, y } = options.absolutePointer;
@@ -256,10 +247,11 @@ export class PartManager {
 			label: label,
 		})
 		const image1 = await this.loadImageToObject(url);
-		const group = this.partObject;
+		this.resetPartObject();
-		this.removeAllChildren();
+		const group = this.partGroup;
 		const rgba = { r: 0, g: 255, b: 0, a: 200 }
 		const canvas = getObjectAlphaToCanvas(image1, null, 0, rgba);
+		this.partCanvas = canvas;
 		const image2 = new fabric.Image(canvas);
 		image2.set({
 			originX: fixedObject.originX,
@@ -279,47 +271,57 @@ export class PartManager {
 		}
 		this.canvas.renderAll();
 	}
-
+	/** 清空点选数据 */
-
+	clearPointData() {
-	// 框选工具模式下点击事件处理
+		this.pointList = [];
-	_rectangleDownHandler(options) {
+		this.partCanvas = null;
 	}
-	// 框选工具模式下移动事件处理
+
+
+	/** 框选工具模式下点击事件处理 */
+	_rectangleDownHandler(options) {
+		console.log(options.absolutePointer);
+	}
+	/** 框选工具模式下移动事件处理 */
 	_rectangleMoveHandler(options) {
 
 	}
-	// 框选工具模式下抬起事件处理
+	/** 框选工具模式下抬起事件处理 */
 	_rectangleUpHandler(options) {
+		console.log(options.absolutePointer);
 	}
 
 
-	// 绘制工具模式下点击事件处理
+	/** 绘制工具模式下点击事件处理 */
 	_brushDownHandler(options) {
 	}
-	// 绘制工具模式下移动事件处理
+	/** 绘制工具模式下移动事件处理 */
 	_brushMoveHandler(options) {
 
 	}
-	// 绘制工具模式下抬起事件处理
+	/** 绘制工具模式下抬起事件处理 */
 	_brushUpHandler(options) {
 	}
 
 
-	// 擦除工具模式下抬起事件处理
+	/** 擦除工具模式下抬起事件处理 */
 	_eraseUpHandler(options) {
 	}
-	// 擦除工具模式下点击事件处理
+	/** 擦除工具模式下点击事件处理 */
 	_eraseDownHandler(options) {
 	}
-	// 擦除工具模式下移动事件处理
+	/** 擦除工具模式下移动事件处理 */
 	_eraseMoveHandler(options) {
 
 	}
 
 
 
-	// 获取分隔后图片
+	/** 获取分隔后图片 */
 	async getSegAnythingImage(obj) {
+		setTimeout(() => {
+			this.canvas.loading.value = true;
+		});
 		return new Promise((resolve, reject) => {
 			// const user_id = store.state.UserHabit.userDetail.userId;
 			const user_id = 24299;
@@ -329,6 +331,7 @@ export class PartManager {
 			}
 			Https.axiosPost(Https.httpUrls.segAnything, data)
 				.then(response => {
+					this.canvas.loading.value = false;
 					if (response) {
 						resolve(response);
 					} else {
@@ -336,12 +339,13 @@ export class PartManager {
 					}
 				})
 				.catch(error => {
+					this.canvas.loading.value = false;
 					console.error(error);
 				});
 		});
 	}
 
-	// 删除指定ID的对象
+	/** 删除指定ID的对象 */
 	removeObjectsById(id) {
 		const objects = this.canvas.getObjects().filter(obj => obj.id === id);
 		this.canvas.remove(...objects);
@@ -354,10 +358,11 @@ export class PartManager {
 		});
 	}
 
-	removeAllChildren() {
+	/** 重置点位对象组 */
-		this.partObject?._objects?.forEach(child => {
+	resetPartObject(render = false) {
-			group.remove(child);
+		this.clearPartObject();
-		});
+		this.createPartObject();
+		if (render) this.canvas.renderAll();
 	}
 	createPartObject() {
 		const fixedObject = this.canvasManager.getFixedLayerObject();
@@ -378,11 +383,53 @@ export class PartManager {
 			evented: false,
 		})
 		this.canvas.add(group);
-		this.partObject = group;
+		this.partGroup = group;
 	}
+	/** 清空点位对象组 */
 	clearPartObject() {
 		this.removeObjectsById(this.partId);
-		this.partObject = null;
+		this.partGroup = null;
+	}
+
+	/** 创建当前选区 */
+	createPart() {
+		if (!this.partCanvas) return console.warn("没有点位画布");
+		const fixedObject = this.canvasManager.getFixedLayerObject();
+		if (!fixedObject) return console.warn("未找到固定图层");
+		const scaleY = fixedObject.scaleY
+		const scaleX = fixedObject.scaleX
+		const top = fixedObject.top - fixedObject.height * scaleY / 2;
+		const left = fixedObject.left - fixedObject.width * scaleX / 2;
+		const arr = traceImageContour(this.partCanvas);
+		let minX = fixedObject.width;
+		let minY = fixedObject.height;
+		const str = arr.map((v) => {
+			if (v.x < minX) minX = v.x;
+			if (v.y < minY) minY = v.y;
+			return `${v.x} ${v.y}`
+		}).join(" L ");
+		const path = new fabric.Path(`M ${str} z`);
+		path.set({
+			left: left + minX * scaleX,
+			top: top + minY * scaleY,
+			scaleX: scaleX,
+			scaleY: scaleY,
+			fill: "rgba(127, 255, 127, 0.3)",
+			stroke: "#2AA81B",
+			strokeWidth: 2,
+			strokeDashArray: [8, 4],
+			strokeLineCap: "round",// 折线端点样式
+			strokeLineJoin: "bevel", // 折线连接样式
+			strokeUniform: true, // 保持描边宽度不随缩放改变
+		});
+		// this.partGroup.add(path);
+		this.canvas.add(path);
+		this.canvas.renderAll();
+	}
+	/** 清空点位 */
+	clearPart() {
+		this.pointList = [];
+		this.resetPartObject(true);
 	}
 
 	/**
@@ -391,6 +438,8 @@ export class PartManager {
 	dispose() {
 		this.cleanupEvents();
 		this.clearPartObject();
+		this.clearPointData();
+
 		this.canvas = null;
 		this.commandManager = null;
 		this.layerManager = null;

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

@@ -429,6 +429,9 @@ export class ToolManager {
     if (this.canvasManager && this.canvasManager.selectionManager) {
       this.canvasManager.selectionManager.setCurrentTool(toolId);
     }
+    if (this.canvasManager && this.canvasManager.partManager) {
+      this.canvasManager.partManager.setCurrentTool(toolId);
+    }
 
     // 通知观察者
     this.notifyObservers(toolId);

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

@@ -995,13 +995,13 @@ export function getTransformScaleAngle(Transform) {
 }
 
 /**
- * 图片转换为canvas
+ * base64转换为canvas
  * @param {String} base64 - 图片base64编码
  * @param {Number} scale - 缩放比例
  * @param {Boolean} sr - 缩放反转，默认false
  * @returns {Promise<HTMLCanvasElement>} canvas元素
 */
-export async function base64ToCanvas(base64, scale = 1, sr = false) {
+export function base64ToCanvas(base64, scale = 1, sr = false) {
 	return new Promise((resolve, reject) => {
 		const image = new Image();
 		image.src = base64;
@@ -1014,7 +1014,7 @@ export async function base64ToCanvas(base64, scale = 1, sr = false) {
 			const height = sr ? image.height / scale : image.height * scale;
 			canvas.width = width;
 			canvas.height = height;
-			const ctx = canvas.getContext('2d');
+			const ctx = canvas.getContext('2d', { willReadFrequently: true });
 			ctx.clearRect(0, 0, width, height);
 			ctx.drawImage(image, 0, 0, width, height);
 			resolve(canvas);
@@ -1022,6 +1022,25 @@ export async function base64ToCanvas(base64, scale = 1, sr = false) {
 		image.onerror = reject;
 	});
 }
+/**
+ * image转换为canvas
+ * @param {HTMLImageElement} image - 图片元素
+ * @param {Number} scale - 缩放比例
+ * @param {Boolean} sr - 缩放反转，默认false
+ * @returns {Promise<HTMLCanvasElement>} canvas元素
+*/
+export async function imageToCanvas(image, scale = 1, sr = false) {
+	await image.decode();
+	const canvas = document.createElement('canvas');
+	const width = (sr ? image.width / scale : image.width * scale);
+	const height = sr ? image.height / scale : image.height * scale;
+	canvas.width = width;
+	canvas.height = height;
+	const ctx = canvas.getContext('2d', { willReadFrequently: true });
+	ctx.clearRect(0, 0, width, height);
+	ctx.drawImage(image, 0, 0, width, height);
+	return resolve(canvas);
+}
 
 /**
  * 图片边界跟踪算法(透明底)
@@ -1029,7 +1048,7 @@ export async function base64ToCanvas(base64, scale = 1, sr = false) {
  * @returns {Array} 边界点数组 [{x, y}, ...]
 */
 export	function traceImageContour(canvas) {
-	const ctx = canvas.getContext("2d");
+	const ctx = canvas.getContext("2d", { willReadFrequently: true });
 	const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 	const data = imageData.data;
 	const width = canvas.width;
@@ -1124,7 +1143,7 @@ export function imageAddGapToCanvas(image, gapX, gapY) {
 	const tcanvas = document.createElement('canvas');
 	tcanvas.width = image.width + gapX;
 	tcanvas.height = image.height + gapY;
-	const ctx = tcanvas.getContext('2d');
+	const ctx = tcanvas.getContext('2d', { willReadFrequently: true });
 	ctx.clearRect(0, 0, tcanvas.width, tcanvas.height);
 	ctx.drawImage(image, 0, 0);
 	return tcanvas;

src/component/Canvas/test.vue

@@ -1,11 +1,9 @@
 <template>
-	<!-- <div class="test" ref="testRef">
+	<div class="test" ref="testRef">
 		<div class="canvas-container">
 			<canvas id="canvas"></canvas>
 		</div>
-	</div> -->
+	</div>
-	<overall-canvas-demo />
-	<div style="width: 100px; height: 100px;position: relative;"><CanvasEditor /></div>
 </template>
 
 <script lang="ts" setup>

src/views/AwardPage/apply.vue

@@ -2,83 +2,155 @@
   <div class="apply-container">
     <div class="banner">
       <div class="slogan">BLOOM YOUR CREATIVITY • AiDA GLOBAL FASHION AWARD 2026</div>
-      <div class="title">Application Form</div>
+      <div class="title poppins-medium">Application Form</div>
       <div class="form-header">
-        <div class="form-title">Email Verification</div>
+        <div class="form-title poppins-bold">Email Verification</div>
         <div class="desc">AiDA Users Only</div>
       </div>
     </div>
     <div class="form-container">
       <div class="form-content">
         <a-form
-          name="form"
+                name="form"
-          ref="formRef"
+                ref="formRef"
-          layout="vertical"
+                layout="vertical"
-          :model="form"
+                :model="form"
-          :rules="rulesRef"
+                :rules="rulesRef"
-          autocomplete="off"
+                autocomplete="off">
-        >
           <div class="email-box full-row">
             <a-form-item name="email" required label="Email Address">
               <div class="email-wrapper flex align-center">
                 <a-input v-model:value="form.email" />
-                <div class="code-btn" @click="handleSendCode">Send Code</div>
+                <div
+                     class="code-btn"
+                     :class="{ disabled: isCountingDown }"
+                     @click="handleSendCode">
+                  {{ isCountingDown ? formatCountdown(countdown) : 'Send Code' }}
+                </div>
               </div>
               <div class="tips">
                 Please use the email address you registered with AiDA.
               </div>
             </a-form-item>
           </div>
-
+          <div class="form-row full-row">
-          <template v-for="item in formKeys" :key="item.key">
+            <div class="form-title poppins-bold">Personal Information</div>
-            <a-form-item
+            <div class="desc">Tell us about yourself</div>
-              v-if="item.key !== 'email'"
+          </div>
-              :required="item.required"
+          <div class="user-info flex">
-              :label="item.label"
+            <template v-for="item in formKeys" :key="item.key">
-              :name="item.key"
+              <a-form-item
-            >
+                           v-if="item.key !== 'email'"
-              <a-input v-model:value="form[item.key]" />
+                           :required="item.required"
+                           :label="item.label"
+                           :name="item.key">
+                <a-input v-model:value="form[item.key]" />
+              </a-form-item>
+            </template>
+          </div>
+          <div class="form-row full-row">
+            <div class="form-title poppins-bold">Design Information</div>
+            <div class="desc">Share your creative vision</div>
+          </div>
+          <a-form-item class="full-row design-title" name="designTitle" label="Design Title" required>
+            <a-input v-model:value="form.designTitle" />
+          </a-form-item>
+          <a-form-item class="full-row design-desc" name="description" label="Design description" required>
+            <a-textarea class="textarea" v-model:value="form.description"
+                        placeholder="Briefly describe your design concept, inspiration, and creative direction..." />
+          </a-form-item>
+          <div class="form-row full-row">
+            <div class="form-title poppins-bold">Submission Files</div>
+            <div class="desc">Upload your design materials</div>
+          </div>
+          <div class="information full-row">
+            <div class="information-title flex align-center">
+              <div class="point"></div>
+              <div class="text poppins-bold">Submission Requirements</div>
+            </div>
+            <ul class="information-list flex space-between">
+              <li class="information-item">
+                {{
+                ` Single PDF file\n Title, mood board, elaboration\n+ 4 outfit design with materials (max 15 pages)`
+                }}
+              </li>
+              <div class="right">
+                <li class="information-item">
+                  Format: Single PDF file, 15pages, maximum 20MB
+                </li>
+                <li class="information-item">
+                  {{
+                  ` Video: Design process, 1080×1920 pixels (9:16 ratio),\nmaximum 60 seconds`
+                  }}
+                </li>
+              </div>
+            </ul>
+          </div>
+          <div class="upload-container full-row">
+            <a-form-item class="full-row" name="pdfFile" required label="How will you use AiDA in your design process?">
+              <a-upload-dragger v-model:fileList="pdfList" name="file" action=""
+                                @change="info => handleFileChange(info, 'pdf')">
+                <img src="@/assets/images/award/upload.png" alt="" class="upload-icon" />
+                <p class="desc">Click to upload or drag and drop</p>
+                <p class="limit">PDF file, max 20MB</p>
+              </a-upload-dragger>
             </a-form-item>
-          </template>
+          </div>
+          <div class="upload-container full-row">
+            <a-form-item class="full-row" name="videoFile" required
+                         label="How will you use AiDA in your design process?">
+              <a-upload-dragger v-model:fileList="videoList" name="file" action=""
+                                @change="info => handleFileChange(info, 'video')">
+                <img src="@/assets/images/award/upload.png" alt="" class="upload-icon" />
+                <p class="desc">Click to upload or drag and drop</p>
+                <p class="limit">Video file(MP4, MOV), max 20MB</p>
+              </a-upload-dragger>
+            </a-form-item>
+          </div>
         </a-form>
+        <div class="conditions">
+          <div class="confitions-title poppins-bold">Terms & Conditions</div>
+          <div class="condition-list flex flex-col">
+            <div class="condition-item flex align-center" v-for="item in conditionsList" :key="item.id">
+              <a-checkbox v-model:checked="item.check" />
+              <span>{{ item.text }}</span>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-    <a-modal
+    <a-modal v-model:visible="showModal" :footer="null" :maskClosable="false" :closable="false"
-      v-model:visible="posi"
+             wrapClassName="code-modal"
-      :footer="null"
+             forceRender :keyboard="false" :style="{ top: '29.3rem' }">
-      :maskClosable="false"
-      :closable="false"
-      wrapClassName="code-modal"
-      forceRender
-      :keyboard="false"
-      :style="{ top: '29.3rem' }"
-    >
       <div class="verify-container flex flex-col align-center">
         <img src="@/assets/images/award/close.svg" class="close-icon" @click="handleCloseModal" />
-        <div class="title">Check your email</div>
+        <div class="title poppins-bold">Check your email</div>
         <div class="desc">Enter the 6-digital code sent to</div>
         <div class="email">{{ form.email }}</div>
-        <VerificationCodeInput
+        <div class="code-box">
-          ref="codeInputRef"
+          <VerifycationCodeInput :ct="emailCode" @sendCaptcha="setVerifyCode" />
-          @complete="onCodeComplete"
+        </div>
-          @change="onCodeChange"
-        />
         <div class="verify-btn" @click="handleVerifyCode">Verify</div>
+        <div class="cutdown" :class="{ disabled: isCountingDown }" @click="handleSendCode">
+          {{ isCountingDown ? `Resend Code in ${formatCountdown(countdown)}` : 'Resend' }}
+        </div>
       </div>
     </a-modal>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive } from 'vue'
+import { ref, reactive, onUnmounted } from 'vue'
 import { debounce } from 'lodash-es'
 import type { Rule } from 'ant-design-vue/es/form'
 import { message } from 'ant-design-vue'
-import VerificationCodeInput from './components/VerificationCodeInput.vue'
+import type { UploadChangeParam } from 'ant-design-vue'
+// import VerificationCodeInput from './components/VerificationCodeInput.vue'
+import VerifycationCodeInput from './components/verificationCodeInput.vue'
 
 const formRef = ref(null)
 const form = ref({
-  email: '123@qq.com',
+  email: '',
   firstName: '',
   lastName: '',
   gender: '',
@@ -88,7 +160,7 @@ const form = ref({
   phone: '',
   portfoilo: '',
   // code: '',
-  title: '',
+  designTitle: '',
   description: '',
   pdfFile: null,
   videoFile: null
@@ -96,12 +168,13 @@ const form = ref({
 
 // 验证码输入组件引用
 const codeInputRef = ref()
+const emailCode = ref(['', '', '', '', '', ''])
 
 const isValidEmail = email => {
   const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
   return emailRegex.test(email)
 }
-const validEmail = (rule, value) => {
+const validEmail = (rule: Rule, value: string) => {
   if (!value) {
     return Promise.reject('Please input the email address')
   }
@@ -192,77 +265,152 @@ const formKeys = ref([
     type: 'input',
     key: 'phone'
   },
-  {
+
-    label: 'Email Address',
-    required: true,
-    type: 'button',
-    key: 'email',
-    tips: 'Please use the same email address you registered with AiDA.'
-  },
   {
     label: 'Portfoilo Website/Instagram(Optional)',
     required: false,
     type: 'input',
     key: 'portfoilo'
-  },
-  {
-    label: 'Email Verification Code',
-    required: true,
-    type: 'input',
-    key: 'code',
-    tips: 'Please enter a 6-digit numerical code.'
   }
 ])
 
-const posi = ref(true)
+const showModal = ref(false)
+// 倒计时相关状态
+const countdown = ref(0)
+const countdownTimer = ref<NodeJS.Timeout | null>(null)
+const isCountingDown = ref(false)
+const formatCountdown = (seconds: number) => {
+  const minutes = Math.floor(seconds / 60)
+  const remainingSeconds = seconds % 60
+  return `${minutes.toString().padStart(2, '0')}:${remainingSeconds
+    .toString()
+    .padStart(2, '0')}`
+}
+
+const startCountdown = () => {
+  countdown.value = 60
+  isCountingDown.value = true
+
+  countdownTimer.value = setInterval(() => {
+    countdown.value--
+    if (countdown.value <= 0) {
+      clearCountdown()
+    }
+  }, 1000)
+}
+
+const clearCountdown = () => {
+  if (countdownTimer.value) {
+    clearInterval(countdownTimer.value)
+    countdownTimer.value = null
+  }
+  countdown.value = 0
+  isCountingDown.value = false
+}
+
 const handleSendCode = debounce(async () => {
+  // 如果正在倒计时，不允许再次发送
+  if (isCountingDown.value) {
+    return
+  }
+
   try {
     await formRef.value.validateFields(['email'])
     // TODO: 发送验证码的逻辑
     message.success('Verification code sent successfully!')
-    posi.value = true
+
-  } catch (error) {
+    // 开始倒计时
-    // 校验失败时，错误消息会自动显示在表单项下方
+    startCountdown()
-    // console.log('Validation failed:', error)
+
-  }
+    showModal.value = true
+  } catch (error) {}
 }, 300)
 
-// 验证码输入事件处理
+const verifyCode = ref(null)
-const onCodeComplete = (code: string) => {
-  console.log('Verification code completed:', code)
-  // 可以在这里处理验证码完成逻辑
-}
 
-const onCodeChange = (code: string) => {
+const setVerifyCode = value => {
-  console.log('Verification code changed:', code)
+  verifyCode.value = value
-  // 可以在这里处理验证码变化逻辑
 }
 
 const handleCloseModal = () => {
-  posi.value = false
+  showModal.value = false
-  codeInputRef.value?.reset()
 }
 
 const handleVerifyCode = () => {
-  const code = codeInputRef.value?.getCode() || ''
+  if (verifyCode.value.length !== 6) {
-  if (code.length !== 6) {
     message.error('Please enter the complete 6-digit verification code')
     return
   }
 
-  // TODO: 验证验证码的逻辑
-  console.log('Verification code:', code)
   message.success('Verification successful!')
 
   // 关闭模态框
-  posi.value = false
+  showModal.value = false
 }
+
+const pdfList = ref([])
+const videoList = ref([])
+type FileType = 'pdf' | 'video'
+const handleFileChange = (info: UploadChangeParam, type: FileType) => {
+  console.log('change---------')
+
+  const status = info.file.status
+  if (status !== 'uploading') {
+    console.log('file:', info.file)
+  }
+  if (status === 'done') {
+    message.success(`${info.file.name} file uploaded successfully.`)
+    if (type === 'pdf') {
+    }
+  } else if (status === 'error') {
+    message.error(`${info.file.name} file upload failed.`)
+  }
+}
+
+const conditionsList = ref([
+  {
+    check: false,
+    text: 'I confirm that all submitted work is original and created by me.',
+    id: 'first'
+  },
+  {
+    check: false,
+    text: 'I understand that Code-Create has marketing and promotional rights to all submitted designs and videos.',
+    id: 'second'
+  },
+  {
+    check: false,
+    text: 'I agree to participate in finalist activities if selected, including AiDA training and award ceremony.',
+    id: 'third'
+  },
+  {
+    check: false,
+    text: 'I would like to receive updates about AiDA products and future competitions. (Optional)',
+    id: 'forth'
+  }
+])
+
+// 组件卸载时清理定时器
+onUnmounted(() => {
+  clearCountdown()
+})
 </script>
 
 <style lang="less" scoped>
+.poppins-bold {
+  font-family: 'PoppinsBold';
+  font-weight: 600;
+}
+
+.poppins-medium {
+  font-family: 'PoppinsMedium';
+  font-weight: 500;
+}
+
 .full-row {
   width: 100%;
 }
+
 .banner {
   height: 54.8rem;
   background: url('@/assets/images/award/apply_bg.png') no-repeat;
@@ -270,6 +418,7 @@ const handleVerifyCode = () => {
   text-align: center;
   padding: 12rem 21.4rem 0;
   position: relative;
+
   .slogan {
     color: #585858;
     font-family: 'ArialBold';
@@ -277,12 +426,12 @@ const handleVerifyCode = () => {
     font-size: 2.8rem;
     margin-bottom: 4rem;
   }
+
   .title {
     color: #c7342c;
-    font-family: 'PoppinsMedium';
-    font-weight: 500;
     font-size: 8rem;
   }
+
   .form-header {
     height: 16.8rem;
     width: calc(100% - 42.8rem);
@@ -294,13 +443,13 @@ const handleVerifyCode = () => {
     border-top-right-radius: 0.8rem;
     text-align: left;
     padding: 6rem 6rem 0;
+
     .form-title {
       color: #232323;
-      font-family: 'PoppinsBold';
-      font-weight: 600;
       font-size: 3rem;
       margin-bottom: 1rem;
     }
+
     .desc {
       color: #b10000;
       // font-family: 'Instrument';
@@ -310,23 +459,64 @@ const handleVerifyCode = () => {
     }
   }
 }
+
+.form-row {
+  margin-top: 12rem;
+  margin-bottom: 6rem;
+
+  .form-title {
+    color: #232323;
+    font-size: 3rem;
+    margin-bottom: 1rem;
+  }
+
+  .desc {
+    color: #b10000;
+    // font-family: 'Instrument';
+    font-family: revert-layer;
+    font-weight: 500;
+    font-size: 2.4rem;
+  }
+}
+
 .form-container {
   padding: 0 21.4rem 12rem;
   background-color: #f5f5f5;
+
   .form-content {
     padding: 4rem 6rem 6rem;
     background-color: #fff;
+    border-bottom-left-radius: 0.8rem;
+    border-bottom-right-radius: 0.8rem;
+
     .ant-form {
       display: flex;
       flex-wrap: wrap;
       column-gap: 4rem;
+
+      .user-info {
+        flex-wrap: wrap;
+        row-gap: 6rem;
+        justify-content: space-between;
+      }
+
       .ant-form-item {
         width: 66.5rem;
+        margin-bottom: 0;
+
+        &.full-row {
+          width: 100%;
+        }
+
+        &.design-title {
+          margin-bottom: 9rem;
+        }
 
         :deep(label) {
           // display: none;
           flex-direction: row-reverse;
           color: #232323;
+
           &,
           &::before {
             font-family: 'Arial';
@@ -334,24 +524,36 @@ const handleVerifyCode = () => {
             font-size: 2rem;
           }
         }
+
         :deep(.ant-input) {
           border: 0.2rem solid #d5d5d5;
           height: 6rem;
           border-radius: 0.8rem;
+          font-family: 'Arial';
+          font-weight: 400;
+          font-size: 1.8rem;
+
+          &.textarea {
+            height: 20rem;
+          }
         }
       }
     }
+
     .email-box {
       :deep(.ant-input) {
         border: none !important;
+
         &:focus {
           box-shadow: none;
         }
       }
+
       .email-wrapper {
         border-radius: 0.8rem;
         border: 0.2rem solid #d5d5d5;
       }
+
       .code-btn {
         width: 13rem;
         height: 4rem;
@@ -363,8 +565,14 @@ const handleVerifyCode = () => {
         text-align: center;
         cursor: pointer;
         border-left: 0.1rem solid #d5d5d5;
+
+        &.disabled {
+          cursor: not-allowed;
+          opacity: 0.6;
+        }
       }
     }
+
     .tips {
       font-family: 'Arial';
       font-weight: 400;
@@ -374,15 +582,136 @@ const handleVerifyCode = () => {
     }
   }
 }
+
 :deep(.ant-form-item-label) {
   padding: 0 0 1rem;
 }
+
+.information {
+  padding-left: 2.4rem;
+
+  .information-title {
+    font-size: 2.8rem;
+    color: #232323;
+    column-gap: 2.4rem;
+    margin-bottom: 5rem;
+
+    .point {
+      width: 1.2rem;
+      height: 1.2rem;
+      border-radius: 50%;
+      background-color: #c7342c;
+    }
+  }
+
+  .information-list {
+    padding-left: 2.4rem;
+    column-gap: 4.8rem;
+
+    .information-item {
+      font-family: 'Arial';
+      font-weight: 400;
+      font-size: 2.4rem;
+      color: #585858;
+      position: relative;
+      list-style: disc;
+      // line-height: 3rem;
+      white-space: pre-line;
+    }
+  }
+}
+
+.upload-container {
+  margin-top: 6rem;
+
+  :deep(.ant-upload-drag) {
+    height: 32rem;
+
+    .ant-upload-btn {
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-top: 5.89rem;
+
+      .upload-icon {
+        width: 12rem;
+        height: 12rem;
+      }
+
+      .desc {
+        color: #585858;
+        font-family: 'Arial';
+        font-weight: 400;
+        font-size: 2.4rem;
+        margin: 1rem 0 2rem;
+      }
+
+      .limit {
+        color: #aaa;
+        font-family: 'Arial';
+        font-weight: 400;
+        font-size: 1.8rem;
+      }
+    }
+  }
+}
+
+.conditions {
+  margin-top: 12rem;
+
+  &-title {
+    color: #232323;
+    font-size: 3rem;
+  }
+
+  .condition-list {
+    margin-top: 6rem;
+    row-gap: 3rem;
+
+    .condition-item {
+      border: 0.2rem solid #d5d5d5;
+      height: 6rem;
+      line-height: 6rem;
+      border-radius: 0.8rem;
+      color: #585858;
+      font-family: 'Arial';
+      font-weight: 400;
+      font-size: 1.8rem;
+      padding-left: 1.5rem;
+      column-gap: 2.5rem;
+    }
+
+    :deep(.ant-checkbox-inner) {
+      border: 0.2rem solid #585858;
+    }
+
+    :deep(.ant-checkbox-wrapper:hover .ant-checkbox-inner,
+      .ant-checkbox:hover .ant-checkbox-inner,
+      .ant-checkbox-input:focus + .ant-checkbox-inner) {
+      border-color: #585858 !important;
+    }
+
+    :deep(.ant-checkbox-wrapper:hover .ant-checkbox-inner,
+      .ant-checkbox:hover .ant-checkbox-inner,
+      .ant-checkbox-input:focus+.ant-checkbox-inner) {
+      border-color: #585858 !important;
+    }
+
+    :deep(.ant-checkbox-checked .ant-checkbox-inner) {
+      border-color: #000 !important;
+      background-color: #000 !important;
+    }
+  }
+}
+
 .verify-container {
   width: 60rem;
   height: 49.4rem;
   padding: 6rem 8.6rem;
   background-color: #fff;
   position: relative;
+
   .close-icon {
     position: absolute;
     width: 2.4rem;
@@ -391,13 +720,14 @@ const handleVerifyCode = () => {
     right: 2rem;
     cursor: pointer;
   }
+
   .title {
     color: #232323;
-    font-family: 'PoppinsBold';
+
-    font-weight: 600;
     font-size: 3rem;
     line-height: 5rem;
   }
+
   .desc {
     color: #585858;
     font-family: 'Arial';
@@ -406,6 +736,7 @@ const handleVerifyCode = () => {
     line-height: 3.4rem;
     margin-top: 1.4rem;
   }
+
   .email {
     font-family: 'ArialBold';
     font-weight: 700;
@@ -413,7 +744,13 @@ const handleVerifyCode = () => {
     line-height: 3rem;
     color: #232323;
   }
-  .verify-btn{
+
+  .code-box {
+    width: 100%;
+    margin: 5rem 0;
+  }
+
+  .verify-btn {
     background-color: #232323;
     height: 4.2rem;
     border-radius: 8px;
@@ -425,6 +762,23 @@ const handleVerifyCode = () => {
     font-weight: 700;
     font-size: 1.6rem;
   }
+
+  .cutdown {
+    font-family: 'Arial';
+    font-weight: 400;
+    font-size: 1.4rem;
+    color: #585858;
+    margin-top: 2rem;
+    text-decoration: underline solid #585858;
+
+    &:not(.disabled) {
+      cursor: pointer;
+    }
+
+    &.disabled {
+      cursor: not-allowed;
+    }
+  }
 }
 </style>
 <style lang="less">

src/views/AwardPage/components/VerificationCodeInput.vue

@@ -1,151 +1,131 @@
 <template>
-  <div class="verification-code-input">
+  <div class="captcha">
-          <input
+    <input
-            v-for="(code, index) in verificationCode"
+      v-for="(c, index) in getCtData"
-            :key="index"
+      :key="index"
-            type="text"
+      type="text"
-            :value="verificationCode[index]"
+      v-model="getCtData[index]"
-            ref="inputRefs"
+      ref="inputRefs"
-            inputmode="numeric"
+      inputmode="numeric"
-            pattern="[0-9]*"
+      pattern="[0-9]*"
-            :disabled="loading"
+      @input="e => onInput(e.target.value, index)"
-            @input="(e) => onCodeInput(e, index)"
+      @keydown="e => onKeydown(e, index)"
-            @paste="(e) => onCodePaste(e, index)"
+      @keypress="e => onKeypress(e)"
-            @keydown="(e) => onCodeKeydown(e, index)"
+      @focus="onFocus"
-            @keypress="(e) => onCodeKeypress(e)"
+      @pause="onPause"
-            @focus="onCodeFocus"
+      :disabled="loading"
-            class="code-input"
+    />
-          />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick } from 'vue'
+import { ref, computed, watch, onMounted } from 'vue'
 
 interface Props {
-  loading?: boolean
+  ct: string[]
 }
 
 interface Emits {
-  (e: 'complete', code: string): void
+  (e: 'sendCaptcha', password: string): void
-  (e: 'change', code: string): void
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = defineProps<Props>()
-  loading: false
-})
-
 const emit = defineEmits<Emits>()
 
-// 验证码输入相关
+const loading = ref(false)
-const verificationCode = ref(['', '', '', '', '', ''])
+const timeout = ref<NodeJS.Timeout | null>(null)
 const inputRefs = ref<HTMLInputElement[]>([])
 
-// 验证码输入相关方法
+const getCtData = computed({
-const onCodeInput = (e: Event, index: number) => {
+  get: () => props.ct,
-  const input = e.target as HTMLInputElement
+  set: (value: string[]) => {
-  const val = input.value
+    // 这里需要特殊处理，因为computed通常是只读的
-  const cleanVal = String(val).replace(/\D/g, '')
+    // 但原代码中直接修改了getCtData，所以这里需要emit一个事件或者使用其他方式
-
+    // 由于这是父组件传来的props，我们需要通过emit通知父组件更新
-  // 检查是否已经输入了5位数字（不包括当前正在输入的第6位）
+    props.ct.splice(0, props.ct.length, ...value)
-  const filledCount = verificationCode.value.filter(v => v !== '').length
-  const isAlmostComplete = filledCount >= 5
-
-  // 如果已经输入了5位数字，检查当前输入是否会导致超过6位
-  if (isAlmostComplete && cleanVal.length === 1 && verificationCode.value[index] === '') {
-    // 如果当前输入框是空的，说明这是第6位输入，允许
-    // 如果当前输入框有值，说明是替换，不允许
-    // 这里我们允许输入，但会在设置后检查
   }
+})
 
-  // 只处理单个字符输入，粘贴由 paste 事件处理
+const ctSize = computed(() => getCtData.value.length)
-  if (cleanVal.length === 1) {
-    verificationCode.value[index] = cleanVal
 
-    // 自动跳转到下一个输入框（只有在还没到第6个时）
+const cIndex = computed(() => {
-    if (index < 5) {
+  let i = getCtData.value.findIndex(item => item === '')
-      nextTick(() => {
+  i = (i + ctSize.value) % ctSize.value
-        inputRefs.value[index + 1]?.focus()
+  return i
-      })
+})
-    }
 
-    // 发出变化事件
+const lastCode = computed(() => getCtData.value[ctSize.value - 1])
-    const finalCode = verificationCode.value.join('')
-    emit('change', finalCode)
 
-    // 如果完成了6位，发出完成事件
+watch(cIndex, () => {
-    if (finalCode.length === 6) {
+  resetCaret()
-      emit('complete', finalCode)
+})
-    }
+
-  } else if (cleanVal.length === 0) {
+watch(lastCode, (newVal, oldVal) => {
-    // 处理删除
+  if (newVal && newVal !== oldVal) {
-    verificationCode.value[index] = ''
+    inputRefs.value[ctSize.value - 1]?.blur()
-    emit('change', verificationCode.value.join(''))
+    sendCaptcha()
   }
-  // 如果是多个字符，可能是粘贴，由 paste 事件处理，这里不做处理
+})
-}
 
-const onCodePaste = (e: ClipboardEvent, index: number) => {
+onMounted(() => {
-  e.preventDefault()
+  resetCaret()
+})
 
-  // 检查是否已经输入了6位数字
+const onInput = (val: string, index: number) => {
-  const currentCode = verificationCode.value.join('')
+  if (timeout.value) {
-  if (currentCode.length === 6) {
+    clearTimeout(timeout.value)
-    return // 如果已经完成，不允许粘贴
   }
-
+  timeout.value = setTimeout(() => {
-  const pasteData = (e.clipboardData || (window as any).clipboardData).getData('text')
+    val = String(val).replace(/\D/g, '')
-  const cleanData = pasteData.replace(/\D/g, '') // 只保留数字
+    getCtData.value[index] = val
-
+    if (index === ctSize.value - 1) {
-  if (cleanData.length === 0) return
+      getCtData.value[ctSize.value - 1] = val[0] // 最后一个码，只允许输入一个字符。
-
+    } else if (val.length > 1) {
-  console.log('Paste detected:', cleanData)
+      let i = index
-
+      for (i = index; i < ctSize.value && i - index < val.length; i++) {
-  // 从当前输入框开始填充
+        getCtData.value[i] = val[i - index]
-  for (let i = 0; i < Math.min(cleanData.length, 6 - index); i++) {
+      }
-    verificationCode.value[index + i] = cleanData[i]
+      resetCaret()
-  }
+    } else if (!(val + '')) {
-
+      getCtData.value[index] = ''
-  // 移动焦点到下一个空白输入框
+    }
-  const nextEmptyIndex = verificationCode.value.findIndex((val, i) => i >= index && val === '')
+  }, 10)
-  if (nextEmptyIndex !== -1) {
+}
-    nextTick(() => {
+
-      inputRefs.value[nextEmptyIndex]?.focus()
+const onPause = () => {}
-    })
+
-  } else {
+const resetCaret = () => {
-    nextTick(() => {
+  inputRefs.value[ctSize.value - 1]?.focus()
-      inputRefs.value[5]?.focus()
+}
-    })
+
-  }
+const onFocus = () => {
-
+  // 监听 focus 事件，将光标重定位到"第一个空白符的位置"。
-  // 发出完成事件
+  let index = getCtData.value.findIndex(item => item === '')
-  emit('complete', verificationCode.value.join(''))
+  index = (index + ctSize.value) % ctSize.value
-  emit('change', verificationCode.value.join(''))
+  inputRefs.value[index]?.focus()
-}
+}
-
+
-const onCodeKeydown = (e: KeyboardEvent, index: number) => {
+const onKeypress = (e: KeyboardEvent) => {
-  // 处理删除键
+  // 只允许输入数字0-9
-  if (e.key === 'Backspace') {
+  const char = String.fromCharCode((e as any).which)
-    const input = e.target as HTMLInputElement
+  if (!/[0-9]/.test(char)) {
-    const val = input.value
+    e.preventDefault()
-
+  }
-    if (val === '') {
+}
-      // 当前输入框为空，删除上一个输入框的值
+
-      if (index > 0) {
+const onKeydown = (e: KeyboardEvent, index: number) => {
-        verificationCode.value[index - 1] = ''
+  // 处理删除键
-        nextTick(() => {
+  if (e.key === 'Backspace' || e.key === 'Delete') {
-          inputRefs.value[index - 1]?.focus()
+    const val = (e.target as HTMLInputElement).value
-        })
+    if (val === '') {
-        emit('change', verificationCode.value.join(''))
+      // 删除上一个input里的值，并对其focus。
+      if (index > 0) {
+        getCtData.value[index - 1] = ''
+        inputRefs.value[index - 1]?.focus()
       }
-    } else {
-      // 当前输入框有值，清空当前输入框
-      verificationCode.value[index] = ''
-      emit('change', verificationCode.value.join(''))
     }
   }
-
+  // 阻止其他非数字字符
-  // 阻止其他非数字字符（除了允许的控制键）
   else if (
     e.key &&
     !/[0-9]/.test(e.key) &&
@@ -164,73 +144,48 @@ const onCodeKeydown = (e: KeyboardEvent, index: number) => {
   }
 }
 
-const onCodeKeypress = (e: KeyboardEvent) => {
+const sendCaptcha = () => {
-  // 检查是否已经输入了6位数字
+  const password = getCtData.value.map(item => item).join('')
-  const currentCode = verificationCode.value.join('')
+  emit('sendCaptcha', password)
-  if (currentCode.length === 6) {
-    e.preventDefault() // 如果已经完成，阻止任何按键输入
-    return
-  }
-
-  // 只允许输入数字0-9
-  const char = String.fromCharCode(e.which || (e as any).keyCode)
-  if (!/[0-9]/.test(char)) {
-    e.preventDefault()
-  }
 }
 
-const onCodeFocus = () => {
-  // 聚焦到第一个空白输入框
-  const index = verificationCode.value.findIndex(item => item === '')
-  const focusIndex = index === -1 ? 5 : index
-  nextTick(() => {
-    inputRefs.value[focusIndex]?.focus()
-  })
-}
-
-// 暴露给父组件的方法
 const reset = () => {
-  verificationCode.value = ['', '', '', '', '', '']
+  // 重置。一般是验证码错误时触发。
-  nextTick(() => {
+  getCtData.value = getCtData.value.map(() => '')
-    inputRefs.value[0]?.focus()
+  resetCaret()
-  })
-}
-
-const getCode = () => {
-  return verificationCode.value.join('')
 }
 
+// 暴露reset方法给父组件使用
 defineExpose({
-  reset,
+  reset
-  getCode,
-  verificationCode
 })
 </script>
 
 <style scoped lang="less">
-.verification-code-input {
+.captcha {
+  width: 100%;
   display: flex;
-  column-gap: 1.2rem;
+  justify-content: space-between;
-
-  .code-input {
-    width: 5rem;
-    height: 5rem;
-    border: 0.15rem solid #d5d5d5;
-    border-radius: 0.8rem;
-    text-align: center;
-    font-size: 2rem;
-    line-height: 5rem;
-    outline: none;
-    transition: border-color 0.2s;
-
-    &:focus {
-      border-color: #232323;
-    }
-
-    &:disabled {
-      background-color: #f5f5f5;
-      color: #999;
-    }
-  }
 }
-</style>
+input {
+  width: 6rem;
+  height: 6rem;
+  border: 0.2rem solid #e6e6e6;
+  border-radius: 0.8rem;
+  text-align: center;
+  font-size: 2.4rem;
+  line-height: 6rem;
+  outline: none;
+  background-color: #f6f6f4;
+}
+input:last-of-type {
+  margin-right: 0;
+}
+input:disabled {
+  color: #000;
+  background-color: #f6f6f4;
+}
+.msg {
+  text-align: center;
+}
+</style>