init
This commit is contained in:
kk
101
src/components/behavior-captcha/concat-panel.vue
Normal file
101
src/components/behavior-captcha/concat-panel.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="concat-panel">
|
||||
<div class="concat-stage" :style="stageSize">
|
||||
<div class="concat-top" :style="topStyle"></div>
|
||||
<div class="concat-bottom" :style="bottomStyle"></div>
|
||||
</div>
|
||||
<track-slider
|
||||
ref="slider"
|
||||
hint="按住滑块，对齐上下图案"
|
||||
:locked="locked"
|
||||
@drag="handleDrag"
|
||||
@release="handleRelease"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TrackSlider from './track-slider.vue';
|
||||
|
||||
export default {
|
||||
name: 'concatPanel',
|
||||
components: { TrackSlider },
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
locked: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['confirm'],
|
||||
data() {
|
||||
return {
|
||||
moveX: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 舞台尺寸以服务端下发的逻辑尺寸为准，避免前后端各存一份常量产生偏差
|
||||
stageSize() {
|
||||
return { width: `${this.data.width}px`, height: `${this.data.height}px` };
|
||||
},
|
||||
topStyle() {
|
||||
return {
|
||||
height: `${this.data.sliceY}px`,
|
||||
backgroundImage: `url(${this.data.image})`,
|
||||
backgroundSize: `${this.data.width}px ${this.data.height}px`,
|
||||
backgroundPosition: '0 0',
|
||||
};
|
||||
},
|
||||
// 下条以背景横向循环平移实现推回复位，纵向偏移对准切缝以下的内容
|
||||
bottomStyle() {
|
||||
return {
|
||||
height: `${this.data.height - this.data.sliceY}px`,
|
||||
backgroundImage: `url(${this.data.image})`,
|
||||
backgroundSize: `${this.data.width}px ${this.data.height}px`,
|
||||
backgroundPosition: `${this.moveX}px -${this.data.sliceY}px`,
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 更换题目后下条回到初始错位状态
|
||||
data() {
|
||||
this.moveX = 0;
|
||||
this.$refs.slider?.reset();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 滑轨行程映射整幅画布宽度的循环位移
|
||||
handleDrag(progress) {
|
||||
this.moveX = Math.round(progress * this.data.width);
|
||||
},
|
||||
handleRelease() {
|
||||
this.$emit('confirm', String(this.moveX));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.concat-stage {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
.concat-stage::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 12px;
|
||||
box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.08);
|
||||
pointer-events: none;
|
||||
}
|
||||
.concat-top,
|
||||
.concat-bottom {
|
||||
width: 100%;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
</style>
|
||||
528
src/components/behavior-captcha/index.vue
Normal file
528
src/components/behavior-captcha/index.vue
Normal file
@@ -0,0 +1,528 @@
|
||||
<template>
|
||||
<teleport to="body">
|
||||
<transition name="behavior-fade">
|
||||
<div v-if="visible" class="behavior-overlay">
|
||||
<div class="behavior-panel" :class="{ 'is-shake': status === 'fail' }">
|
||||
<div class="behavior-header">
|
||||
<div class="behavior-badge">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="behavior-title">
|
||||
<span class="behavior-title-main">安全验证</span>
|
||||
<span class="behavior-title-sub">{{ subtitle }}</span>
|
||||
</div>
|
||||
<div class="behavior-actions">
|
||||
<button class="behavior-icon-btn" :class="{ 'is-spinning': status === 'loading' }" title="换一题" @click="load">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 12a9 9 0 1 1-2.64-6.36" />
|
||||
<path d="M21 3v6h-6" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="behavior-icon-btn" title="关闭" @click="close">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M18 6 6 18" />
|
||||
<path d="m6 6 12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="behavior-body">
|
||||
<transition name="behavior-swap" mode="out-in">
|
||||
<div v-if="status === 'loading'" key="skeleton" class="behavior-skeleton">
|
||||
<div class="behavior-skeleton-stage">
|
||||
<div class="behavior-skeleton-brand">
|
||||
<span class="behavior-skeleton-halo"></span>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="behavior-skeleton-text">正在构建安全环境<i></i><i></i><i></i></span>
|
||||
</div>
|
||||
<div class="behavior-skeleton-bar"></div>
|
||||
</div>
|
||||
<div v-else key="panel" class="behavior-content">
|
||||
<word-panel v-if="type === 'word' || type === 'idiom'" :data="behaviorData" :locked="locked" @confirm="handleConfirm" />
|
||||
<puzzle-panel v-else-if="type === 'puzzle'" :data="behaviorData" :locked="locked" @confirm="handleConfirm" />
|
||||
<concat-panel v-else-if="type === 'concat'" :data="behaviorData" :locked="locked" @confirm="handleConfirm" />
|
||||
<rotate-panel v-else-if="type === 'rotate'" :data="behaviorData" :locked="locked" @confirm="handleConfirm" />
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<transition name="behavior-result">
|
||||
<div v-if="status === 'success'" class="behavior-success">
|
||||
<svg class="behavior-success-icon" viewBox="0 0 52 52">
|
||||
<circle class="behavior-success-circle" cx="26" cy="26" r="24" fill="none" />
|
||||
<path class="behavior-success-check" fill="none" d="M14 27l8 8 16-17" />
|
||||
</svg>
|
||||
<span class="behavior-success-text">验证通过</span>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<transition name="behavior-result">
|
||||
<div v-if="status === 'fail'" class="behavior-fail">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M12 8v4" />
|
||||
<path d="M12 16h.01" />
|
||||
</svg>
|
||||
<span>验证未通过，即将自动重试</span>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import WordPanel from './word-panel.vue';
|
||||
import PuzzlePanel from './puzzle-panel.vue';
|
||||
import ConcatPanel from './concat-panel.vue';
|
||||
import RotatePanel from './rotate-panel.vue';
|
||||
import { getBehavior, checkBehavior } from '@/api/user';
|
||||
|
||||
const SUBTITLES = {
|
||||
word: '请按提示顺序点击图中文字',
|
||||
idiom: '请找出图中成语并按语序点击',
|
||||
puzzle: '请拖动滑块完成拼图',
|
||||
concat: '请拖动滑块对齐上下图案',
|
||||
rotate: '请拖动滑块将图案转至正确方向',
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'behaviorCaptcha',
|
||||
components: { WordPanel, PuzzlePanel, ConcatPanel, RotatePanel },
|
||||
emits: ['success'],
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
// 状态机: loading 出题中 / ready 待作答 / checking 核验中 / success 通过 / fail 未通过
|
||||
status: 'loading',
|
||||
key: '',
|
||||
type: '',
|
||||
behaviorData: {},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
subtitle() {
|
||||
return SUBTITLES[this.type] || '完成验证以继续登录';
|
||||
},
|
||||
locked() {
|
||||
return this.status !== 'ready';
|
||||
},
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.clearTimer();
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.visible = true;
|
||||
this.load();
|
||||
},
|
||||
close() {
|
||||
this.clearTimer();
|
||||
this.visible = false;
|
||||
this.status = 'loading';
|
||||
this.key = '';
|
||||
this.type = '';
|
||||
this.behaviorData = {};
|
||||
},
|
||||
load() {
|
||||
this.clearTimer();
|
||||
this.status = 'loading';
|
||||
getBehavior()
|
||||
.then(res => {
|
||||
const data = res.data;
|
||||
// 题面图预解码完成后再切换视图：出题响应到达时图片尚未完成首帧绘制，
|
||||
// 立即切换会让舞台区域先渲染为空白，由骨架屏覆盖整个等待期
|
||||
return this.preloadImages([data.data.image, data.data.piece, data.data.ring]).then(() => {
|
||||
this.key = data.key;
|
||||
this.behaviorData = data.data;
|
||||
this.type = data.type;
|
||||
this.status = 'ready';
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.close();
|
||||
});
|
||||
},
|
||||
preloadImages(sources) {
|
||||
const tasks = sources.filter(Boolean).map(
|
||||
source =>
|
||||
new Promise(resolve => {
|
||||
const image = new Image();
|
||||
image.onload = resolve;
|
||||
// 解码失败不阻塞流程，交由面板正常渲染兜底
|
||||
image.onerror = resolve;
|
||||
image.src = source;
|
||||
if (image.decode) {
|
||||
image.decode().then(resolve, resolve);
|
||||
}
|
||||
})
|
||||
);
|
||||
return Promise.all(tasks);
|
||||
},
|
||||
handleConfirm(answer) {
|
||||
if (this.status !== 'ready') return;
|
||||
this.status = 'checking';
|
||||
checkBehavior(this.key, answer).then(
|
||||
res => {
|
||||
this.status = 'success';
|
||||
const ticket = res.data.ticket;
|
||||
this.timer = setTimeout(() => {
|
||||
const key = this.key;
|
||||
this.close();
|
||||
this.$emit('success', { key, ticket });
|
||||
}, 700);
|
||||
},
|
||||
() => {
|
||||
// 题目已被服务端一次性消费，短暂展示失败反馈后自动更换题目
|
||||
this.status = 'fail';
|
||||
this.timer = setTimeout(() => this.load(), 900);
|
||||
}
|
||||
);
|
||||
},
|
||||
clearTimer() {
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.behavior-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 2100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(17, 24, 39, 0.4);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.behavior-panel {
|
||||
position: relative;
|
||||
/* 宽度跟随舞台内容自适应，保证题面图与提示条、滑轨结构性等宽对称 */
|
||||
width: fit-content;
|
||||
padding: 18px 20px 20px;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.behavior-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.behavior-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #6366f1, #3b82f6);
|
||||
box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
|
||||
color: #ffffff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.behavior-badge svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.behavior-title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 10px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
.behavior-title-main {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
line-height: 1.3;
|
||||
}
|
||||
.behavior-title-sub {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.behavior-actions {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
.behavior-icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
.behavior-icon-btn svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.behavior-icon-btn:hover {
|
||||
background: #f3f4f6;
|
||||
color: #111827;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.behavior-icon-btn:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
.behavior-icon-btn.is-spinning svg {
|
||||
animation: behavior-spin 0.8s linear infinite;
|
||||
}
|
||||
@keyframes behavior-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.behavior-body {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 骨架加载态：品牌徽标呼吸 + 斜向扫光，尺寸与题面舞台一致避免交接跳动 */
|
||||
.behavior-skeleton-stage {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 14px;
|
||||
width: 340px;
|
||||
height: 220px;
|
||||
border-radius: 12px;
|
||||
background: linear-gradient(135deg, #f8f9fc, #f1f3f8);
|
||||
box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.04);
|
||||
overflow: hidden;
|
||||
}
|
||||
.behavior-skeleton-stage::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: -60%;
|
||||
width: 50%;
|
||||
background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.75), transparent);
|
||||
transform: skewX(-16deg);
|
||||
animation: behavior-sweep 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
|
||||
}
|
||||
@keyframes behavior-sweep {
|
||||
to {
|
||||
left: 120%;
|
||||
}
|
||||
}
|
||||
.behavior-skeleton-brand {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
border-radius: 13px;
|
||||
background: linear-gradient(135deg, #6366f1, #3b82f6);
|
||||
box-shadow: 0 6px 16px rgba(59, 130, 246, 0.28);
|
||||
color: #ffffff;
|
||||
}
|
||||
.behavior-skeleton-brand svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
.behavior-skeleton-halo {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 13px;
|
||||
box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.35);
|
||||
animation: behavior-pulse 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
|
||||
}
|
||||
@keyframes behavior-pulse {
|
||||
to {
|
||||
box-shadow: 0 0 0 16px rgba(99, 102, 241, 0);
|
||||
}
|
||||
}
|
||||
.behavior-skeleton-text {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.behavior-skeleton-text i {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
margin-left: 3px;
|
||||
border-radius: 50%;
|
||||
background: #9ca3af;
|
||||
animation: behavior-dot 1.2s ease-in-out infinite;
|
||||
}
|
||||
.behavior-skeleton-text i:nth-child(2) {
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
.behavior-skeleton-text i:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
@keyframes behavior-dot {
|
||||
0%,
|
||||
60%,
|
||||
100% {
|
||||
opacity: 0.25;
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.behavior-skeleton-bar {
|
||||
height: 40px;
|
||||
margin-top: 12px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: behavior-shimmer 1.4s ease-in-out infinite;
|
||||
}
|
||||
@keyframes behavior-shimmer {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 骨架与题面的交接过渡 */
|
||||
.behavior-swap-enter-active {
|
||||
transition: opacity 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
.behavior-swap-leave-active {
|
||||
transition: opacity 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
.behavior-swap-enter-from {
|
||||
opacity: 0;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
.behavior-swap-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* 成功遮罩 */
|
||||
.behavior-success {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
.behavior-success-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
stroke: #10b981;
|
||||
stroke-width: 3;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
}
|
||||
.behavior-success-circle {
|
||||
stroke-dasharray: 151;
|
||||
stroke-dashoffset: 151;
|
||||
animation: behavior-stroke 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
|
||||
}
|
||||
.behavior-success-check {
|
||||
stroke-dasharray: 40;
|
||||
stroke-dashoffset: 40;
|
||||
animation: behavior-stroke 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s forwards;
|
||||
}
|
||||
@keyframes behavior-stroke {
|
||||
to {
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
}
|
||||
.behavior-success-text {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
/* 失败提示条 */
|
||||
.behavior-fail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
padding: 9px 12px;
|
||||
border-radius: 8px;
|
||||
background: #fef2f2;
|
||||
color: #ef4444;
|
||||
font-size: 12px;
|
||||
}
|
||||
.behavior-fail svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 面板抖动反馈 */
|
||||
.is-shake {
|
||||
animation: behavior-shake 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
@keyframes behavior-shake {
|
||||
20% {
|
||||
transform: translateX(-6px);
|
||||
}
|
||||
40% {
|
||||
transform: translateX(6px);
|
||||
}
|
||||
60% {
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
80% {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 弹窗过渡 */
|
||||
.behavior-fade-enter-active,
|
||||
.behavior-fade-leave-active {
|
||||
transition: opacity 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
.behavior-fade-enter-active .behavior-panel,
|
||||
.behavior-fade-leave-active .behavior-panel {
|
||||
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
.behavior-fade-enter-from,
|
||||
.behavior-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.behavior-fade-enter-from .behavior-panel,
|
||||
.behavior-fade-leave-to .behavior-panel {
|
||||
transform: scale(0.96) translateY(8px);
|
||||
}
|
||||
.behavior-result-enter-active,
|
||||
.behavior-result-leave-active {
|
||||
transition: opacity 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
.behavior-result-enter-from,
|
||||
.behavior-result-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
100
src/components/behavior-captcha/puzzle-panel.vue
Normal file
100
src/components/behavior-captcha/puzzle-panel.vue
Normal file
@@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="puzzle-panel">
|
||||
<div class="puzzle-stage" :style="stageSize">
|
||||
<img class="puzzle-image" :src="data.image" alt="" draggable="false" />
|
||||
<img
|
||||
class="puzzle-piece"
|
||||
:src="data.piece"
|
||||
alt=""
|
||||
draggable="false"
|
||||
:style="{
|
||||
left: `${pieceX}px`,
|
||||
top: `${data.pieceY}px`,
|
||||
width: `${data.pieceSize}px`,
|
||||
height: `${data.pieceSize}px`,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<track-slider
|
||||
ref="slider"
|
||||
hint="按住滑块，拖动完成拼图"
|
||||
:locked="locked"
|
||||
@drag="handleDrag"
|
||||
@release="handleRelease"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TrackSlider from './track-slider.vue';
|
||||
|
||||
export default {
|
||||
name: 'puzzlePanel',
|
||||
components: { TrackSlider },
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
locked: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['confirm'],
|
||||
data() {
|
||||
return {
|
||||
pieceX: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 舞台尺寸以服务端下发的逻辑尺寸为准，避免前后端各存一份常量产生偏差
|
||||
stageSize() {
|
||||
return { width: `${this.data.width}px`, height: `${this.data.height}px` };
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 更换题目后拼图块回到起点
|
||||
data() {
|
||||
this.pieceX = 0;
|
||||
this.$refs.slider?.reset();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 滑轨行程与拼图块行程等比映射，保证滑到尽头时拼图块恰好到达画布右缘
|
||||
handleDrag(progress) {
|
||||
this.pieceX = Math.round(progress * (this.data.width - this.data.pieceSize));
|
||||
},
|
||||
handleRelease() {
|
||||
this.$emit('confirm', String(this.pieceX));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.puzzle-stage {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
.puzzle-stage::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 12px;
|
||||
box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.08);
|
||||
pointer-events: none;
|
||||
}
|
||||
.puzzle-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.puzzle-piece {
|
||||
position: absolute;
|
||||
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
101
src/components/behavior-captcha/rotate-panel.vue
Normal file
101
src/components/behavior-captcha/rotate-panel.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<div class="rotate-panel">
|
||||
<div class="rotate-stage" :style="stageSize">
|
||||
<img class="rotate-image" :src="data.image" alt="" draggable="false" />
|
||||
<img
|
||||
class="rotate-ring"
|
||||
:src="data.ring"
|
||||
alt=""
|
||||
draggable="false"
|
||||
:style="{
|
||||
width: `${data.ringSize}px`,
|
||||
height: `${data.ringSize}px`,
|
||||
transform: `translate(-50%, -50%) rotate(${angle}deg)`,
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
<track-slider
|
||||
ref="slider"
|
||||
hint="按住滑块，转动图案至正确方向"
|
||||
:locked="locked"
|
||||
@drag="handleDrag"
|
||||
@release="handleRelease"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TrackSlider from './track-slider.vue';
|
||||
|
||||
export default {
|
||||
name: 'rotatePanel',
|
||||
components: { TrackSlider },
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
locked: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['confirm'],
|
||||
data() {
|
||||
return {
|
||||
angle: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 舞台尺寸以服务端下发的逻辑尺寸为准，避免前后端各存一份常量产生偏差
|
||||
stageSize() {
|
||||
return { width: `${this.data.width}px`, height: `${this.data.height}px` };
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 更换题目后内圆回到初始方向
|
||||
data() {
|
||||
this.angle = 0;
|
||||
this.$refs.slider?.reset();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 滑轨行程映射整圆角度
|
||||
handleDrag(progress) {
|
||||
this.angle = Math.round(progress * 360);
|
||||
},
|
||||
handleRelease() {
|
||||
this.$emit('confirm', String(this.angle));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.rotate-stage {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
.rotate-stage::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 12px;
|
||||
box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.08);
|
||||
pointer-events: none;
|
||||
}
|
||||
.rotate-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.rotate-ring {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
border-radius: 50%;
|
||||
will-change: transform;
|
||||
}
|
||||
</style>
|
||||
136
src/components/behavior-captcha/track-slider.vue
Normal file
136
src/components/behavior-captcha/track-slider.vue
Normal file
@@ -0,0 +1,136 @@
|
||||
<template>
|
||||
<div ref="track" class="track-slider" :class="{ 'is-dragging': dragging }">
|
||||
<div class="track-fill" :style="{ width: `${handleX + handleSize / 2}px` }"></div>
|
||||
<span v-show="!moved" class="track-hint">{{ hint }}</span>
|
||||
<div
|
||||
class="track-handle"
|
||||
:style="{ transform: `translateX(${handleX}px)` }"
|
||||
@pointerdown="handleDown"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M5 12h14" />
|
||||
<path d="m13 6 6 6-6 6" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const HANDLE_SIZE = 40;
|
||||
|
||||
export default {
|
||||
name: 'trackSlider',
|
||||
props: {
|
||||
hint: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
locked: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['drag', 'release'],
|
||||
data() {
|
||||
return {
|
||||
handleSize: HANDLE_SIZE,
|
||||
handleX: 0,
|
||||
dragging: false,
|
||||
moved: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleDown(event) {
|
||||
if (this.locked) return;
|
||||
this.dragging = true;
|
||||
this.startX = event.clientX;
|
||||
this.baseX = this.handleX;
|
||||
this.handleEl = event.currentTarget;
|
||||
this.handleEl.setPointerCapture(event.pointerId);
|
||||
this.handleEl.addEventListener('pointermove', this.handleMove);
|
||||
this.handleEl.addEventListener('pointerup', this.handleUp, { once: true });
|
||||
},
|
||||
handleMove(event) {
|
||||
if (!this.dragging) return;
|
||||
const maxX = this.$refs.track.clientWidth - HANDLE_SIZE;
|
||||
this.handleX = Math.min(Math.max(this.baseX + event.clientX - this.startX, 0), maxX);
|
||||
this.moved = this.moved || this.handleX > 0;
|
||||
this.$emit('drag', maxX > 0 ? this.handleX / maxX : 0);
|
||||
},
|
||||
handleUp() {
|
||||
this.handleEl.removeEventListener('pointermove', this.handleMove);
|
||||
this.dragging = false;
|
||||
// 从未移动的误触不视为作答，避免白白消费一次题目
|
||||
if (!this.moved) return;
|
||||
const maxX = this.$refs.track.clientWidth - HANDLE_SIZE;
|
||||
this.$emit('release', maxX > 0 ? this.handleX / maxX : 0);
|
||||
},
|
||||
reset() {
|
||||
this.handleX = 0;
|
||||
this.dragging = false;
|
||||
this.moved = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.track-slider {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
margin-top: 12px;
|
||||
border-radius: 10px;
|
||||
background: #f9fafb;
|
||||
border: 1px solid #e5e7eb;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.track-fill {
|
||||
position: absolute;
|
||||
inset: 0 auto 0 0;
|
||||
background: linear-gradient(90deg, rgba(99, 102, 241, 0.12), rgba(59, 130, 246, 0.18));
|
||||
transition: none;
|
||||
}
|
||||
.track-hint {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
pointer-events: none;
|
||||
}
|
||||
.track-handle {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.04);
|
||||
color: #6b7280;
|
||||
cursor: grab;
|
||||
transition: box-shadow 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
.track-handle svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.track-handle:hover {
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 4px 16px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
.is-dragging .track-handle {
|
||||
background: linear-gradient(135deg, #6366f1, #3b82f6);
|
||||
border-color: transparent;
|
||||
color: #ffffff;
|
||||
cursor: grabbing;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 4px 12px rgba(59, 130, 246, 0.35);
|
||||
}
|
||||
</style>
|
||||
235
src/components/behavior-captcha/word-panel.vue
Normal file
235
src/components/behavior-captcha/word-panel.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<div class="word-panel">
|
||||
<div class="word-stage" :style="stageSize" @click="handleStageClick">
|
||||
<img class="word-image" :src="data.image" alt="" draggable="false" />
|
||||
<transition-group name="word-dot">
|
||||
<span
|
||||
v-for="(dot, index) in dots"
|
||||
:key="dot.id"
|
||||
class="word-dot"
|
||||
:style="{ left: `${dot.x}px`, top: `${dot.y}px` }"
|
||||
>{{ index + 1 }}</span
|
||||
>
|
||||
</transition-group>
|
||||
</div>
|
||||
<div class="word-bar">
|
||||
<span class="word-bar-label">{{ data.prompt ? '依次点击' : '按语序点击' }}</span>
|
||||
<div class="word-chips">
|
||||
<span
|
||||
v-for="(chip, index) in chips"
|
||||
:key="index"
|
||||
class="word-chip"
|
||||
:class="{ 'is-active': index < dots.length, 'is-ordinal': !data.prompt }"
|
||||
>{{ chip }}</span
|
||||
>
|
||||
</div>
|
||||
<button class="word-undo" title="撤销上一步" :disabled="!dots.length" @click="undo">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M9 14 4 9l5-5" />
|
||||
<path d="M4 9h10.5a5.5 5.5 0 0 1 0 11H11" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'wordPanel',
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
locked: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['confirm'],
|
||||
data() {
|
||||
return {
|
||||
dots: [],
|
||||
dotSeed: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 舞台尺寸以服务端下发的逻辑尺寸为准，避免前后端各存一份常量产生偏差
|
||||
stageSize() {
|
||||
return { width: `${this.data.width}px`, height: `${this.data.height}px` };
|
||||
},
|
||||
// 语序模式不下发目标字符，提示条降级为作答进度序号
|
||||
chips() {
|
||||
if (this.data.prompt) {
|
||||
return this.data.prompt;
|
||||
}
|
||||
return Array.from({ length: this.data.targetCount }, (item, index) => index + 1);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 更换题目后清空作答痕迹
|
||||
data() {
|
||||
this.dots = [];
|
||||
this.clearTimer();
|
||||
},
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.clearTimer();
|
||||
},
|
||||
methods: {
|
||||
handleStageClick(event) {
|
||||
if (this.locked || this.dots.length >= this.data.targetCount) return;
|
||||
// 以图片原始尺寸换算坐标，保证展示缩放时命中判定仍然准确
|
||||
const rect = event.currentTarget.getBoundingClientRect();
|
||||
const x = Math.round(((event.clientX - rect.left) / rect.width) * this.data.width);
|
||||
const y = Math.round(((event.clientY - rect.top) / rect.height) * this.data.height);
|
||||
this.dots.push({ x, y, id: ++this.dotSeed });
|
||||
if (this.dots.length === this.data.targetCount) {
|
||||
// 短暂停留让最后一个序号标记完成入场，再提交作答
|
||||
this.timer = setTimeout(() => {
|
||||
this.$emit('confirm', this.dots.map(dot => `${dot.x},${dot.y}`).join(';'));
|
||||
}, 300);
|
||||
}
|
||||
},
|
||||
undo() {
|
||||
if (this.locked) return;
|
||||
this.dots.pop();
|
||||
this.clearTimer();
|
||||
},
|
||||
clearTimer() {
|
||||
if (this.timer) {
|
||||
clearTimeout(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.word-stage {
|
||||
position: relative;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
cursor: crosshair;
|
||||
user-select: none;
|
||||
}
|
||||
.word-stage::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 12px;
|
||||
box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.08);
|
||||
pointer-events: none;
|
||||
}
|
||||
.word-image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.word-dot {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: -12px 0 0 -12px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #6366f1, #3b82f6);
|
||||
border: 2px solid rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 4px 10px rgba(59, 130, 246, 0.35);
|
||||
color: #ffffff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
pointer-events: none;
|
||||
}
|
||||
.word-dot-enter-active {
|
||||
transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
.word-dot-enter-from {
|
||||
opacity: 0;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
.word-dot-leave-active {
|
||||
transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
.word-dot-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.3);
|
||||
}
|
||||
|
||||
.word-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
margin-top: 12px;
|
||||
padding: 0 10px 0 12px;
|
||||
border-radius: 10px;
|
||||
background: #f9fafb;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
.word-bar-label {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.word-chips {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
.word-chip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 7px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #e5e7eb;
|
||||
color: #374151;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
.word-chip.is-ordinal {
|
||||
color: #9ca3af;
|
||||
font-size: 12px;
|
||||
}
|
||||
.word-chip.is-active {
|
||||
background: linear-gradient(135deg, #6366f1, #3b82f6);
|
||||
border-color: transparent;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.word-undo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
color: #6b7280;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: all 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
.word-undo svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.word-undo:hover:not(:disabled) {
|
||||
background: #f3f4f6;
|
||||
color: #111827;
|
||||
}
|
||||
.word-undo:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user