移动端和 PC 端登录页都加了“图形验证码

frontend/src/features/auth/views/MobileRegisterView.vue

@@ -1,24 +1,54 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { RouterLink, useRoute, useRouter } from 'vue-router'
 import { showToast } from 'vant'
 
+import { fetchAuthCaptcha, type AuthCaptcha } from '@/features/auth/api/auth'
 import { useSessionStore } from '@/stores/session'
 import { useSmsCountdown } from '@/shared/composables/useSmsCountdown'
+import { readError } from '@/shared/utils/error'
 
 const router = useRouter()
 const route = useRoute()
 const session = useSessionStore()
 const loading = ref(false)
 const agreed = ref(false)
+const captchaLoading = ref(false)
+const captcha = ref<AuthCaptcha | null>(null)
 const form = reactive({
   phone: '',
+  captchaCode: '',
   code: '',
   inviteCode: '',
 })
 
 const { countDown, sending, handleSendCode } = useSmsCountdown()
 
+onMounted(loadCaptcha)
+
+async function loadCaptcha() {
+  captchaLoading.value = true
+  try {
+    captcha.value = await fetchAuthCaptcha()
+    form.captchaCode = ''
+  } catch (error) {
+    showToast({ message: readError(error, '图形验证码加载失败'), icon: 'cross' })
+  } finally {
+    captchaLoading.value = false
+  }
+}
+
+async function sendCode() {
+  const shouldRefresh = Boolean(form.captchaCode.trim())
+  await handleSendCode(form.phone, {
+    captchaId: captcha.value?.captcha_id || '',
+    captchaCode: form.captchaCode,
+  })
+  if (shouldRefresh) {
+    await loadCaptcha()
+  }
+}
+
 async function handleRegister() {
   if (!agreed.value) {
     showToast({
@@ -68,6 +98,25 @@ async function handleRegister() {
           />
         </label>
 
+        <label class="auth-input-row captcha-row">
+          <input
+            v-model="form.captchaCode"
+            type="text"
+            maxlength="4"
+            autocomplete="off"
+            placeholder="图形验证码"
+          />
+          <button
+            class="captcha-image-button"
+            type="button"
+            :disabled="captchaLoading"
+            @click="loadCaptcha"
+          >
+            <img v-if="captcha" :src="captcha.image" alt="图形验证码" />
+            <span v-else>刷新</span>
+          </button>
+        </label>
+
         <label class="auth-input-row code-row">
           <input
             v-model="form.code"
@@ -83,7 +132,7 @@ async function handleRegister() {
               :disabled="sending || countDown > 0"
               :loading="sending"
               class="code-btn"
-              @click="handleSendCode(form.phone)"
+              @click="sendCode"
             >
               {{ countDown > 0 ? `${countDown}s` : sending ? '发送中' : '发送验证码' }}
             </van-button>
@@ -223,6 +272,11 @@ async function handleRegister() {
   gap: 8px;
 }
 
+.auth-input-row.captcha-row {
+  gap: 10px;
+  padding-right: 4px;
+}
+
 .auth-input-row input {
   width: 100%;
   min-width: 0;
@@ -242,6 +296,33 @@ async function handleRegister() {
   justify-content: flex-end;
 }
 
+.captcha-image-button {
+  display: grid;
+  flex: 0 0 116px;
+  width: 116px;
+  height: 40px;
+  place-items: center;
+  overflow: hidden;
+  border: 1px solid #dbe5f0;
+  border-radius: 8px;
+  background: #f8fafc;
+  color: #1477ff;
+  font-size: 12px;
+  font-weight: 800;
+  padding: 0;
+}
+
+.captcha-image-button:disabled {
+  opacity: 0.65;
+}
+
+.captcha-image-button img {
+  display: block;
+  width: 120px;
+  height: 40px;
+  object-fit: cover;
+}
+
 .code-btn {
   min-width: 82px;
   height: 32px;