Show dialog for user SMS login errors

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

@@ -15,6 +15,7 @@ const captchaImage = ref("");
 const loading = ref(false);
 const captchaLoading = ref(false);
 const message = ref("请先完成图形验证码，再获取短信验证码。");
+const errorDialog = ref("");
 
 onMounted(() => {
   void loadCaptcha();
@@ -36,7 +37,7 @@ async function loadCaptcha() {
 
 async function sendCode() {
   if (!captchaId.value || captchaCode.value.length < 4) {
-    message.value = "请先输入图形验证码";
+    showError("请先输入图形验证码");
     return;
   }
   loading.value = true;
@@ -46,7 +47,7 @@ async function sendCode() {
     message.value = "短信验证码已发送，请查收。";
     await loadCaptcha();
   } catch (error) {
-    message.value = error instanceof Error ? error.message : "发送失败";
+    showError(error instanceof Error ? error.message : "发送失败");
     await loadCaptcha();
   } finally {
     loading.value = false;
@@ -66,6 +67,11 @@ async function login() {
     loading.value = false;
   }
 }
+
+function showError(text: string) {
+  message.value = text;
+  errorDialog.value = text;
+}
 </script>
 
 <template>
@@ -109,5 +115,13 @@ async function login() {
       {{ loading ? "处理中..." : "立即进入" }}
     </button>
     <div class="form-tip">{{ message }}</div>
+
+    <div v-if="errorDialog" class="dialog-mask" role="alertdialog" aria-modal="true" aria-labelledby="login-error-title">
+      <div class="dialog-box">
+        <strong id="login-error-title">无法发送验证码</strong>
+        <p>{{ errorDialog }}</p>
+        <button type="button" class="primary" @click="errorDialog = ''">知道了</button>
+      </div>
+    </div>
   </section>
 </template>

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

@@ -177,6 +177,43 @@ button:disabled {
   font-size: 13px;
 }
 
+.dialog-mask {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: rgba(12, 24, 20, 0.42);
+}
+
+.dialog-box {
+  width: min(100%, 320px);
+  padding: 22px;
+  border-radius: 18px;
+  background: #ffffff;
+  box-shadow: 0 18px 48px rgba(15, 31, 26, 0.22);
+}
+
+.dialog-box strong {
+  display: block;
+  color: #17211d;
+  font-size: 18px;
+  line-height: 1.35;
+}
+
+.dialog-box p {
+  margin: 10px 0 18px;
+  color: #51655d;
+  font-size: 14px;
+  line-height: 1.7;
+}
+
+.dialog-box .primary {
+  width: 100%;
+  margin-top: 0;
+}
+
 .topbar {
   height: 72px;
   display: grid;