feat: 学员端短信验证码发送增加60秒倒计时

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import { api, saveToken } from "../services/api";
 import type { UserProfile } from "../types/api";
 
@@ -16,6 +16,24 @@ const loading = ref(false);
 const captchaLoading = ref(false);
 const message = ref("请先完成图形验证码，再获取短信验证码。");
 const errorDialog = ref("");
+const countdown = ref(0);
+let countdownTimer: ReturnType<typeof setInterval> | null = null;
+
+function startCountdown(seconds = 60) {
+  countdown.value = seconds;
+  if (countdownTimer) clearInterval(countdownTimer);
+  countdownTimer = setInterval(() => {
+    countdown.value--;
+    if (countdown.value <= 0 && countdownTimer) {
+      clearInterval(countdownTimer);
+      countdownTimer = null;
+    }
+  }, 1000);
+}
+
+onUnmounted(() => {
+  if (countdownTimer) clearInterval(countdownTimer);
+});
 
 onMounted(() => {
   void loadCaptcha();
@@ -45,6 +63,7 @@ async function sendCode() {
   try {
     await api.sendSms(phone.value, captchaId.value, captchaCode.value);
     message.value = "短信验证码已发送，请查收。";
+    startCountdown(60);
     await loadCaptcha();
   } catch (error) {
     showError(error instanceof Error ? error.message : "发送失败");
@@ -102,10 +121,10 @@ function showError(text: string) {
         <button
           type="button"
           class="secondary"
-          :disabled="loading || phone.length < 11 || captchaCode.length < 4"
+          :disabled="loading || countdown > 0 || phone.length < 11 || captchaCode.length < 4"
           @click="sendCode"
         >
-          发送
+          {{ countdown > 0 ? `${countdown} 秒后重发` : "发送" }}
         </button>
       </div>
     </label>