sookie/blog-admin-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

验证码调试页面布局精简

Browse Source
This commit is contained in:
灌糖包子 2026-05-16 12:52:40 +08:00
parent 02e12f6e3d
commit 78bed71168
Signed by: sookie
GPG Key ID: 0599BECB75C1E68D
1 changed files with 12 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/views/debug/CaptchaSandbox.vue
View File

@ -1,33 +1,24 @@
<template>
<div>
<div class="hero-actions">
<el-button type="primary" @click="startCaptcha">开始验证</el-button>
<el-button type="primary" @click="startCaptcha" plain>开始验证</el-button>
<el-button @click="reloadCaptcha" :disabled="!captchaInstance">刷新</el-button>
<el-button @click="destroyCaptcha" :disabled="!captchaInstance" plain>销毁</el-button>
</div>
<div class="sandbox-grid">
<el-card class="panel-card" shadow="never">
<template #header>
<div class="panel-title">验证码类型</div>
</template>
<el-card shadow="never">
<template #header>验证码类型</template>
<el-radio-group v-model="selectedType" class="type-group">
<el-radio-group v-model="selectedType" size="large">
<el-radio-button v-for="item in captchaTypeOptions" :key="item.value" :label="item.value">
{{ item.label }}
</el-radio-button>
</el-radio-group>
<div class="current-selection">
<span class="selection-label">当前选择</span>
<strong>{{ currentTypeLabel }}</strong>
</div>
</el-card>
<el-card class="panel-card preview-card" shadow="never">
<template #header>
<div class="panel-title">验证码预览</div>
</template>
<el-card class="preview-card" shadow="never">
<template #header>验证码预览</template>
<div ref="captchaBoxRef" class="captcha-box"></div>
</el-card>
</div>
@ -58,10 +49,6 @@ const captchaInstance = ref<TianAiCaptchaInstance | null>(null)
const captchaBoxRef = ref<HTMLElement | null>(null)
const selectedType = ref<CaptchaType>('RANDOM')
const currentTypeLabel = computed(() => {
return captchaTypeOptions.find(item => item.value === selectedType.value)?.label || '随机'
})
const requestCaptchaDataUrl = computed(() => {
if (selectedType.value === 'RANDOM') {
return requestCaptchaBaseUrl
@ -139,63 +126,20 @@ onBeforeUnmount(() => destroyCaptcha(false))
margin-bottom: 24px;
}
.sandbox-grid {
display: grid;
grid-template-columns: minmax(320px, 420px) minmax(420px, 1fr);
display: flex;
gap: 20px;
}
.panel-card {
border-radius: 18px;
border: 1px solid var(--el-border-color-lighter);
}
.panel-title {
font-size: 15px;
font-weight: 700;
color: var(--el-text-color-primary);
}
.type-group {
display: flex;
flex-wrap: wrap;
gap: 12px;
:deep(.el-radio-button__inner) {
min-width: 112px;
border-radius: 999px;
.el-card {
flex: 1;
&.preview-card {
flex: 0 0 420px;
}
}
}
.current-selection {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 18px;
padding: 14px 16px;
border-radius: 12px;
background: var(--el-fill-color-light);
color: var(--el-text-color-regular);
strong {
color: var(--el-color-primary);
font-size: 16px;
}
}
.selection-label {
color: var(--el-text-color-secondary);
font-size: 13px;
}
.captcha-box {
min-height: 350px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
background:
linear-gradient(135deg, rgba(64, 158, 255, 0.07), rgba(103, 194, 58, 0.05)),
#fff;
border: 1px dashed rgba(64, 158, 255, 0.3);
}
</style>