验证码更新

web/src/components/LoginCaptcha.vue

@@ -9,7 +9,7 @@ interface CaptchaChoice {
 
 interface CaptchaChallenge {
   captchaId: string
-  type: 'TextImage' | 'Selection' | 'OneClick'
+  type: 'TextImage' | 'MathImage' | 'Selection' | 'OneClick'
   prompt?: string
   choices?: CaptchaChoice[]
   imageData?: string
@@ -46,12 +46,13 @@ defineExpose({ refresh })
       <button type="button" :disabled="loading" @click="refresh">换一张</button>
     </div>
     <div v-loading="loading" class="captcha-input">
-      <template v-if="captcha?.type === 'TextImage'">
+      <template v-if="captcha?.type === 'TextImage' || captcha?.type === 'MathImage'">
         <img v-if="captcha.imageData" :src="captcha.imageData" alt="验证码图片，点击可更换" @click="refresh" />
         <el-input v-model="code" maxlength="8" autocomplete="off" placeholder="输入图中字符" />
       </template>
       <div v-else-if="captcha" class="captcha-question">
         <p>{{ captcha.prompt }}</p>
+        <img v-if="captcha.imageData" :src="captcha.imageData" alt="验证码图片，点击可更换" @click="refresh" />
         <div v-if="captcha.type === 'Selection'" class="captcha-choices" role="group" aria-label="验证码选项">
           <el-button
             v-for="choice in captcha.choices ?? []"
@@ -78,6 +79,7 @@ defineExpose({ refresh })
 .captcha-input img { width: 150px; height: 50px; object-fit: contain; border: 1px solid #d7e2ed; border-radius: 6px; cursor: pointer; background: #f7fafc; }
 .captcha-question { grid-column: 1 / -1; display: grid; gap: 8px; padding: 10px 12px; border: 1px solid #d7e2ed; border-radius: 6px; background: #f7fafc; }
 .captcha-question p { margin: 0; color: #233b54; font-size: 14px; }
+.captcha-question img { width: min(100%, 220px); height: 54px; object-fit: contain; border: 1px solid #d7e2ed; border-radius: 6px; cursor: pointer; background: #fff; }
 .captcha-choices { display: flex; flex-wrap: wrap; gap: 8px; }
 @media (max-width: 420px) { .captcha-input { grid-template-columns: 130px minmax(0, 1fr); } .captcha-input img { width: 130px; } }
 </style>