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>

ai_knowledge_base_v2/apps/user-client/src/services/api.ts

@@ -1,4 +1,4 @@
-import type { ApiResponse, ChatMessage, ChatSession, LoginResult, UserProfile } from "../types/api";
+import type { ApiResponse, CaptchaResult, ChatMessage, ChatSession, LoginResult, UserProfile } from "../types/api";
 
 const API_BASE = import.meta.env.VITE_API_BASE_URL ?? "http://127.0.0.1:8100/api";
 const TOKEN_KEY = "ai-kb-user-token";
@@ -31,7 +31,9 @@ async function request<T>(path: string, init: RequestInit = {}): Promise<T> {
 }
 
 export const api = {
-  sendSms: (phone: string) => request<null>("/auth/sms/send", { method: "POST", body: JSON.stringify({ phone }) }),
+  captcha: () => request<CaptchaResult>("/auth/captcha"),
+  sendSms: (phone: string, captchaId: string, captchaCode: string) =>
+    request<null>("/auth/sms/send", { method: "POST", body: JSON.stringify({ phone, captchaId, captchaCode }) }),
   login: (phone: string, code: string) =>
     request<LoginResult>("/auth/login", { method: "POST", body: JSON.stringify({ phone, code }) }),
   logout: () => request<null>("/auth/logout", { method: "POST", body: JSON.stringify({}) }),

ai_knowledge_base_v2/apps/user-client/src/styles.css

@@ -117,6 +117,33 @@ button {
   gap: 10px;
 }
 
+.captcha-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 128px;
+  gap: 10px;
+}
+
+.captcha-image {
+  height: 48px;
+  padding: 0;
+  overflow: hidden;
+  border: 1px solid #cad8d2;
+  border-radius: 14px;
+  background: #ffffff;
+}
+
+.captcha-image img {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+
+.captcha-image span {
+  color: #5f746c;
+  font-size: 13px;
+}
+
 .primary,
 .secondary,
 .send-btn,

ai_knowledge_base_v2/apps/user-client/src/types/api.ts

@@ -20,6 +20,12 @@ export interface LoginResult {
   user: UserProfile;
 }
 
+export interface CaptchaResult {
+  captchaId: string;
+  imageBase64: string;
+  expiresInSeconds: number;
+}
+
 export interface ChatSession {
   id: number;
   title: string;