529 lines
14 KiB
Vue
529 lines
14 KiB
Vue
<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>
|