From 78bed71168cee322ca2f8da29be3652c5865a272 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=81=8C=E7=B3=96=E5=8C=85=E5=AD=90?=
 <colorfulsweet@icloud.com>
Date: Sat, 16 May 2026 12:52:40 +0800
Subject: [PATCH] =?UTF-8?q?=E9=AA=8C=E8=AF=81=E7=A0=81=E8=B0=83=E8=AF=95?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=E7=B2=BE=E7=AE=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/debug/CaptchaSandbox.vue | 80 +++++-------------------------
 1 file changed, 12 insertions(+), 68 deletions(-)

diff --git a/src/views/debug/CaptchaSandbox.vue b/src/views/debug/CaptchaSandbox.vue
index 18b364f..a578e9c 100644
--- a/src/views/debug/CaptchaSandbox.vue
+++ b/src/views/debug/CaptchaSandbox.vue
@@ -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>