diff --git a/ai_knowledge_base_v2/apps/user-client/src/components/LoginPanel.vue b/ai_knowledge_base_v2/apps/user-client/src/components/LoginPanel.vue index 84dda0b..971970a 100644 --- a/ai_knowledge_base_v2/apps/user-client/src/components/LoginPanel.vue +++ b/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; +} diff --git a/ai_knowledge_base_v2/apps/user-client/src/styles.css b/ai_knowledge_base_v2/apps/user-client/src/styles.css index 7e589e7..39c2054 100644 --- a/ai_knowledge_base_v2/apps/user-client/src/styles.css +++ b/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;