aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
X1627315083
2026-01-19 11:03:03 +08:00
parent 55f4e5626e a0a751c661
commit e4cdebfe40
9 changed files with 709 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/award/upload.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 225 KiB

12
src/component/Canvas/CanvasEditor/components/PartSelectorPanel.vue
View File

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

8
src/component/Canvas/CanvasEditor/index.vue
View File

@@ -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%;

137
src/component/Canvas/CanvasEditor/managers/PartManager.js
View File

@@ -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.removeAllChildren();
this.resetPartObject();
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();
}
// 框选工具模式下点击事件处理
_rectangleDownHandler(options) {
/** 清空点选数据 */
clearPointData() {
this.pointList = [];
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 => {
group.remove(child);
});
/** 重置点位对象组 */
resetPartObject(render = false) {
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;

3
src/component/Canvas/CanvasEditor/managers/ToolManager.js
View File

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

29
src/component/Canvas/CanvasEditor/utils/helper.js
View File

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

6
src/component/Canvas/test.vue
View File

@@ -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> -->
<overall-canvas-demo />
<div style="width: 100px; height: 100px;position: relative;"><CanvasEditor /></div>
</div>
</template>
<script lang="ts" setup>

520
src/views/AwardPage/apply.vue
View File

@@ -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"
ref="formRef"
layout="vertical"
:model="form"
:rules="rulesRef"
autocomplete="off"
>
name="form"
ref="formRef"
layout="vertical"
:model="form"
:rules="rulesRef"
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>
<template v-for="item in formKeys" :key="item.key">
<a-form-item
v-if="item.key !== 'email'"
:required="item.required"
:label="item.label"
:name="item.key"
>
<a-input v-model:value="form[item.key]" />
<div class="form-row full-row">
<div class="form-title poppins-bold">Personal Information</div>
<div class="desc">Tell us about yourself</div>
</div>
<div class="user-info flex">
<template v-for="item in formKeys" :key="item.key">
<a-form-item
v-if="item.key !== 'email'"
: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
v-model:visible="posi"
:footer="null"
:maskClosable="false"
:closable="false"
wrapClassName="code-modal"
forceRender
:keyboard="false"
:style="{ top: '29.3rem' }"
>
<a-modal v-model:visible="showModal" :footer="null" :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
ref="codeInputRef"
@complete="onCodeComplete"
@change="onCodeChange"
/>
<div class="code-box">
<VerifycationCodeInput :ct="emailCode" @sendCaptcha="setVerifyCode" />
</div>
<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) {
// 校验失败时，错误消息会自动显示在表单项下方
// console.log('Validation failed:', error)
}
// 开始倒计时
startCountdown()
showModal.value = true
} catch (error) {}
}, 300)
// 验证码输入事件处理
const onCodeComplete = (code: string) => {
console.log('Verification code completed:', code)
// 可以在这里处理验证码完成逻辑
}
const verifyCode = ref(null)
const onCodeChange = (code: string) => {
console.log('Verification code changed:', code)
// 可以在这里处理验证码变化逻辑
const setVerifyCode = value => {
verifyCode.value = value
}
const handleCloseModal = () => {
posi.value = false
codeInputRef.value?.reset()
showModal.value = false
}
const handleVerifyCode = () => {
const code = codeInputRef.value?.getCode() || ''
if (code.length !== 6) {
if (verifyCode.value.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">

311
src/views/AwardPage/components/VerificationCodeInput.vue
View File

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