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

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

@@ -1,20 +1,23 @@
 <script setup lang="ts">
 import { readError } from '@/shared/utils/error'
 import { ElMessage } from 'element-plus'
-import { ChatLineRound, Iphone } from '@element-plus/icons-vue'
-import { onUnmounted, reactive, ref } from 'vue'
+import { ChatLineRound, Iphone, Key } from '@element-plus/icons-vue'
+import { onMounted, onUnmounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
-import { sendSmsCode } from '@/features/auth/api/auth'
+import { fetchAuthCaptcha, sendSmsCode, type AuthCaptcha } from '@/features/auth/api/auth'
 import { useSessionStore } from '@/stores/session'
 
 const router = useRouter()
 const session = useSessionStore()
 const loading = ref(false)
 const sending = ref(false)
+const captchaLoading = ref(false)
+const captcha = ref<AuthCaptcha | null>(null)
 const countDown = ref(0)
 const form = reactive({
   phone: '',
+  captchaCode: '',
   code: '',
 })
 
@@ -38,23 +41,49 @@ onUnmounted(() => {
   }
 })
 
+onMounted(loadCaptcha)
+
+async function loadCaptcha() {
+  captchaLoading.value = true
+  try {
+    captcha.value = await fetchAuthCaptcha()
+    form.captchaCode = ''
+  } catch (error) {
+    ElMessage.error(readError(error, '图形验证码加载失败'))
+  } finally {
+    captchaLoading.value = false
+  }
+}
+
 async function handleSendCode() {
   if (!form.phone.trim()) {
     ElMessage.warning('请输入手机号')
     return
   }
+  if (!captcha.value?.captcha_id || !form.captchaCode.trim()) {
+    ElMessage.warning('请输入图形验证码')
+    return
+  }
   sending.value = true
   try {
-    await sendSmsCode(form.phone)
+    await sendSmsCode(form.phone, captcha.value.captcha_id, form.captchaCode)
     ElMessage.success('验证码已发送，请注意查收')
     startCountDown()
   } catch (error) {
     ElMessage.error(readError(error, '验证码发送失败'))
   } finally {
+    await loadCaptcha()
     sending.value = false
   }
 }
 
+async function refreshCaptcha() {
+  if (captchaLoading.value) {
+    return
+  }
+  await loadCaptcha()
+}
+
 async function handleLogin() {
   loading.value = true
   try {
@@ -108,6 +137,29 @@ async function handleLogin() {
             />
           </el-form-item>
 
+          <el-form-item label="图形验证码">
+            <div class="user-captcha-row">
+              <el-input
+                v-model="form.captchaCode"
+                maxlength="4"
+                placeholder="请输入图形验证码"
+                size="large"
+                :prefix-icon="Key"
+                @keyup.enter="handleSendCode"
+              />
+              <button
+                class="user-captcha-image"
+                type="button"
+                :disabled="captchaLoading"
+                aria-label="刷新图形验证码"
+                @click="refreshCaptcha"
+              >
+                <img v-if="captcha" :src="captcha.image" alt="图形验证码" />
+                <span v-else>刷新</span>
+              </button>
+            </div>
+          </el-form-item>
+
           <el-form-item label="验证码">
             <div class="user-code-row">
               <el-input
@@ -311,6 +363,39 @@ async function handleLogin() {
   width: 100%;
 }
 
+.user-captcha-row {
+  display: grid;
+  grid-template-columns: 1fr 132px;
+  gap: 10px;
+  width: 100%;
+}
+
+.user-captcha-image {
+  display: grid;
+  height: 46px;
+  place-items: center;
+  overflow: hidden;
+  border: 1px solid #dbe5f0;
+  border-radius: 10px;
+  background: #f8fafc;
+  color: #1477ff;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 700;
+  padding: 0;
+}
+
+.user-captcha-image:disabled {
+  cursor: wait;
+  opacity: 0.7;
+}
+
+.user-captcha-image img {
+  display: block;
+  width: 132px;
+  height: 44px;
+}
+
 .user-code-row .el-button {
   height: 46px;
   border-radius: 10px;