init
This commit is contained in:
kk
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>
|
||||
Reference in New Issue
Block a user