Add graphic captcha before user SMS login

ai_knowledge_base_v2/apps/user-client/src/components/LoginPanel.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { onMounted, ref } from "vue";
 import { api, saveToken } from "../services/api";
 import type { UserProfile } from "../types/api";
 
@@ -8,18 +8,46 @@ const emit = defineEmits<{
 }>();
 
 const phone = ref("");
-const code = ref("123456");
+const code = ref("");
+const captchaId = ref("");
+const captchaCode = ref("");
+const captchaImage = ref("");
 const loading = ref(false);
-const message = ref("开发阶段验证码默认 123456");
+const captchaLoading = ref(false);
+const message = ref("请先完成图形验证码，再获取短信验证码。");
+
+onMounted(() => {
+  void loadCaptcha();
+});
+
+async function loadCaptcha() {
+  captchaLoading.value = true;
+  try {
+    const result = await api.captcha();
+    captchaId.value = result.captchaId;
+    captchaImage.value = result.imageBase64;
+    captchaCode.value = "";
+  } catch (error) {
+    message.value = error instanceof Error ? error.message : "图形验证码加载失败";
+  } finally {
+    captchaLoading.value = false;
+  }
+}
 
 async function sendCode() {
+  if (!captchaId.value || captchaCode.value.length < 4) {
+    message.value = "请先输入图形验证码";
+    return;
+  }
   loading.value = true;
   message.value = "";
   try {
-    await api.sendSms(phone.value);
-    message.value = "验证码已发送，开发阶段默认 123456";
+    await api.sendSms(phone.value, captchaId.value, captchaCode.value);
+    message.value = "短信验证码已发送，请查收。";
+    await loadCaptcha();
   } catch (error) {
     message.value = error instanceof Error ? error.message : "发送失败";
+    await loadCaptcha();
   } finally {
     loading.value = false;
   }
@@ -52,10 +80,26 @@ async function login() {
     </label>
 
     <label>
-      验证码
+      图形验证码
+      <div class="captcha-row">
+        <input v-model="captchaCode" inputmode="text" maxlength="8" placeholder="请输入图形验证码" />
+        <button type="button" class="captcha-image" :disabled="captchaLoading" @click="loadCaptcha">
+          <img v-if="captchaImage" :src="captchaImage" alt="图形验证码" />
+          <span v-else>{{ captchaLoading ? "加载中" : "刷新" }}</span>
+        </button>
+      </div>
+    </label>
+
+    <label>
+      短信验证码
       <div class="code-row">
-        <input v-model="code" inputmode="numeric" maxlength="8" placeholder="验证码" />
-        <button type="button" class="secondary" :disabled="loading || phone.length < 11" @click="sendCode">
+        <input v-model="code" inputmode="numeric" maxlength="8" placeholder="请输入短信验证码" />
+        <button
+          type="button"
+          class="secondary"
+          :disabled="loading || phone.length < 11 || captchaCode.length < 4"
+          @click="sendCode"
+        >
           发送
         </button>
       </div>