验证码调试页面布局精简

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">
+      <el-card shadow="never">
-        <template #header>
+        <template #header>验证码类型</template>
-          <div class="panel-title">验证码类型</div>
-        </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">
+      <el-card class="preview-card" shadow="never">
-        <template #header>
+        <template #header>验证码预览</template>
-          <div class="panel-title">验证码预览</div>
-        </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,52 +126,14 @@ onBeforeUnmount(() => destroyCaptcha(false))
   margin-bottom: 24px;
 }
 .sandbox-grid {
-  display: grid;
+  display: flex;
-  grid-template-columns: minmax(320px, 420px) minmax(420px, 1fr);
   gap: 20px;
-}
+  .el-card {
-
+    flex: 1;
-.panel-card {
+    &.preview-card {
-  border-radius: 18px;
+      flex: 0 0 420px;
-  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;
     }
   }
-
-.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 {
@@ -192,10 +141,5 @@ onBeforeUnmount(() => destroyCaptcha(false))
   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>